/* * The public site's stylesheet (PLAN.md D74). Hand-written and served as it is: no build step. * * It borrows the product's look — brand/README.md — so the site and the app read as one thing: * Barlow for sentences, Barlow Condensed for headings, figures and buttons; the product blue spent * on the one action per view; the 4 px strip across the top. The header, the hero and the footer * sit on the logo's own navy in both colour schemes, which is why they always use logo-dark.svg. * * The rule of this file is restraint (D76, amended 2026-09-20). Structure comes from type, space * and hairlines; a box is drawn only around something a person chooses or fills in — a package, * a form field. One radius, one shadow, and that shadow only under a screenshot. No gradients: * the one drawing on the site is the rink behind the hero, because it says what this is about. * * Two rules the app learned the hard way hold here too: anything tappable is at least 44 px, and * Barlow has no arrows or tick marks in it — every mark below is drawn, never typed. */ @font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); } :root { color-scheme: light; --navy: #0A1428; --navy-raised: #131F3A; --navy-line: rgba(255, 255, 255, 0.12); --on-navy: #F2F2F0; --on-navy-muted: #A9B4C8; --sky: #5AA9FF; --bg: #F3F3F1; --surface: #FFFFFF; --raised: #E9E9E6; --ink: #111214; --muted: #5C606A; --line: #D8D8D3; --primary: #2B59C3; --primary-hover: #234AA6; --on-primary: #FFFFFF; --error: #B3261E; --radius: 8px; --shadow: 0 18px 40px -22px rgba(10, 20, 40, 0.45); --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif; --font-display: 'Barlow Condensed', 'Arial Narrow', 'Barlow', sans-serif; } /* Light unless the visitor chose dark: the server writes their choice on from a cookie (SiteController::theme), so this never follows the system setting and never flashes. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #111214; --surface: #1B1D22; --raised: #24272E; --ink: #F2F2F0; --muted: #9A9DA6; --line: #2C2F37; --primary: #6082D2; --primary-hover: #7593DB; --on-primary: #111214; --error: #F2B8B5; --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } body { margin: 0; /* The narrowest the site is laid out for. Below it the page scrolls sideways rather than squeezing the bar's logo, sign-in chip and menu into each other. */ min-width: 300px; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-body); /* The strip the app wears at the top of every screen. */ border-top: 4px solid var(--primary); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.35rem, 5.2vw, 3.6rem); font-weight: 800; line-height: 1.04; } h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); } h3, .h3 { font-size: 1.45rem; line-height: 1.15; } p { margin: 0; text-wrap: pretty; } a { color: var(--primary); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; } .wrap { width: min(1220px, 100% - 40px); margin-inline: auto; } .wrap--narrow { width: min(720px, 100% - 40px); } .skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--surface); color: var(--ink); padding: 12px 16px; border-radius: var(--radius); } .skip:focus { left: 8px; } /* A label over a heading: small, quiet, and the same everywhere it appears. */ .eyebrow { font: 600 0.9rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .hero .eyebrow, .section--ink .eyebrow { color: var(--on-navy-muted); } .link { font-weight: 600; text-underline-offset: 4px; display: inline-block; padding: 10px 0; } /* ── Buttons ───────────────────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--radius); font: 700 1.1rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .btn--small { min-height: 44px; padding: 0 16px; font-size: 1rem; } .btn--wide { width: 100%; min-height: 52px; } .btn--primary { background: var(--primary); color: var(--on-primary); } .btn--primary:hover { background: var(--primary-hover); } .btn--outline { border-color: var(--line); color: var(--ink); background: transparent; } .btn--outline:hover { border-color: var(--ink); } .btn--ghost { border-color: var(--navy-line); color: var(--on-navy); } .btn--ghost:hover { border-color: var(--on-navy); } /* On the navy the product blue is always the light scheme's: the ground does not change. */ .top .btn--primary, .hero .btn--primary, .cta .btn--primary { background: #2B59C3; color: #FFFFFF; } .top .btn--primary:hover, .hero .btn--primary:hover, .cta .btn--primary:hover { background: #3A6BDC; } /* ── Header ────────────────────────────────────────────────────────────────────────────────── */ .top { position: sticky; top: 0; z-index: 10; background: var(--navy); border-bottom: 1px solid var(--navy-line); } .top__row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; } .top__logo { display: inline-flex; align-items: center; min-height: 44px; } .top__logo img { height: 34px; width: auto; } .top__nav { display: none; align-items: center; gap: 4px; } .top__nav > a:not(.btn), .top__sheet > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius); color: var(--on-navy-muted); text-decoration: none; font-weight: 500; } .top__nav > a:not(.btn):hover, .top__nav > a[aria-current='page'] { color: var(--on-navy); } .top__nav .btn { margin-left: 12px; } .top__langs { display: inline-flex; margin: 0 4px; } .top__langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--on-navy-muted); text-decoration: none; font: 600 0.95rem/1 var(--font-display); letter-spacing: 0.08em; } .top__langs a[aria-current='true'] { color: var(--on-navy); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .top__langs a:hover { color: var(--on-navy); } .top__menu { position: static; } .top__menu summary { list-style: none; width: 48px; height: 48px; display: grid; place-content: center; gap: 5px; border-radius: var(--radius); cursor: pointer; } .top__menu summary::-webkit-details-marker { display: none; } .top__menu summary span { display: block; width: 22px; height: 2px; background: var(--on-navy); border-radius: 2px; } .top__menu[open] summary { background: var(--navy-raised); } .top__sheet { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 4px; padding: 12px 20px 20px; background: var(--navy); border-bottom: 1px solid var(--navy-line); } .top__sheet > a:not(.btn) { min-height: 48px; font-size: 1.1rem; color: var(--on-navy); } .top__sheet .top__langs { justify-self: start; margin: 4px 0 8px; } .top__sheet .btn { min-height: 52px; font-size: 1.15rem; margin-top: 4px; } @media (min-width: 1000px) { .top__nav { display: flex; } .top__menu { display: none; } } /* ── Hero ──────────────────────────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; color: var(--on-navy); background: var(--navy); } /* A rink seen from above, as faintly as the lines under fresh ice. The site's one drawing. */ .hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='20' y='20' width='1160' height='560' rx='150'/%3E%3Cline x1='600' y1='20' x2='600' y2='580'/%3E%3Ccircle cx='600' cy='300' r='90'/%3E%3Cline x1='420' y1='20' x2='420' y2='580'/%3E%3Cline x1='780' y1='20' x2='780' y2='580'/%3E%3Ccircle cx='230' cy='170' r='70'/%3E%3Ccircle cx='230' cy='430' r='70'/%3E%3Ccircle cx='970' cy='170' r='70'/%3E%3Ccircle cx='970' cy='430' r='70'/%3E%3Cline x1='100' y1='20' x2='100' y2='580'/%3E%3Cline x1='1100' y1='20' x2='1100' y2='580'/%3E%3C/svg%3E") center / cover no-repeat; opacity: 0.045; pointer-events: none; } .hero__grid { position: relative; display: grid; gap: 40px; padding-block: 56px 0; } .hero__copy { max-width: 600px; } /* The headline is two short sentences, one per line: sized so that each fits its line at a desk and on a phone, rather than the first wrapping and the second not. */ .hero h1 { font-size: clamp(1.8rem, 4.3vw, 3.1rem); } .hero__line { display: block; } .hero__lead { margin-top: 20px; font-size: 1.15rem; color: var(--on-navy-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero__note { margin-top: 18px; font-size: 0.95rem; color: var(--on-navy-muted); } .hero__stage { position: relative; min-height: 120px; } .hero__stage .device--desktop { width: 92%; margin-left: auto; transform: translateY(24px); } .hero__stage .device--phone { position: absolute; left: 0; bottom: -40px; width: min(36%, 210px); } @media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 64px; padding-block: 96px 0; } .hero__copy { padding-bottom: 104px; } .hero__stage { align-self: end; } .hero__stage .device--desktop { width: 118%; margin-left: 6%; transform: translateY(40px); } .hero__stage .device--phone { left: -4%; bottom: -60px; width: 33%; } } /* ── Devices ───────────────────────────────────────────────────────────────────────────────── */ .device { box-shadow: var(--shadow); background: #1B1D22; } .device img { width: 100%; } .device--phone { border: 7px solid #1B1D22; border-radius: 30px; outline: 1px solid rgba(255, 255, 255, 0.14); overflow: hidden; } .device--phone img { border-radius: 23px; } /* A width of its own: inside a centring grid it would otherwise shrink to a picture that has not arrived yet, and jump when it does. */ .device--desktop { width: 100%; border-radius: var(--radius); border: 1px solid rgba(128, 128, 128, 0.28); overflow: hidden; } .device__bar { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: #24272E; } .device__bar span { width: 8px; height: 8px; border-radius: 50%; background: #4A4E58; } /* ── Sections ──────────────────────────────────────────────────────────────────────────────── */ .section { padding-block: 72px; } .section--flush { padding-top: 0; } .section--surface { background: var(--surface); border-block: 1px solid var(--line); } .section--ink { background: var(--navy); color: var(--on-navy); } .section--ink p { color: var(--on-navy-muted); } .section__head { max-width: 640px; margin-bottom: 48px; } .section__head p { margin-top: 14px; color: var(--muted); font-size: 1.1rem; } @media (min-width: 900px) { .section { padding-block: 104px; } .section--flush { padding-top: 0; } } .pagehead { background: var(--navy); color: var(--on-navy); padding-block: 56px 64px; margin-bottom: 56px; } .pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); } .pagehead p { margin-top: 16px; color: var(--on-navy-muted); font-size: 1.1rem; max-width: 640px; } .page-pricing .pagehead { padding-bottom: 120px; margin-bottom: -72px; } /* ── Why: the page's one piece of plain prose ──────────────────────────────────────────────── */ .why { display: grid; gap: 32px; } .why__lead { font: 600 clamp(1.5rem, 2.6vw, 1.9rem)/1.25 var(--font-display); text-wrap: balance; } .why__body { display: grid; gap: 16px; color: var(--muted); } @media (min-width: 900px) { .why { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } } /* Three facts on one line, separated by nothing but space and a rule above. */ .facts { display: grid; gap: 28px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); } .fact h3 { font-size: 1.2rem; } .fact p { margin-top: 6px; color: var(--muted); font-size: 1rem; } @media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 48px; } } /* ── Features ──────────────────────────────────────────────────────────────────────────────── */ .feature { display: grid; gap: 32px; align-items: center; padding-block: 40px; } .feature:first-of-type { padding-top: 0; } .feature__copy { max-width: 520px; } .feature__copy > p:not(.eyebrow) { margin-top: 14px; color: var(--muted); } .feature__shot { display: grid; place-items: center; } .feature--phone .feature__shot { padding: 40px 24px; border-radius: var(--radius); background: var(--raised); } .feature--phone .device { width: min(264px, 70%); } @media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; padding-block: 64px; } .feature--flip .feature__copy { order: 2; } .feature--phone { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .feature--phone.feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } } /* What else a feature does: plain lines under a rule, not a row of ticks. */ .points { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); } .points li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1rem; } .section--ink .points, .section--ink .points li { border-color: var(--navy-line); } .section--ink .points li { color: var(--on-navy); } /* The features that have no picture of their own, side by side. */ .also { display: grid; gap: 40px; margin-top: 40px; padding-top: 48px; border-top: 1px solid var(--line); } .also p:not(.eyebrow) { margin-top: 12px; color: var(--muted); } @media (min-width: 900px) { .also { grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 24px; padding-top: 64px; } } .bank { display: grid; gap: 32px; align-items: start; } .bank h2 { margin-bottom: 18px; } .bank .points { margin-top: 0; } @media (min-width: 900px) { .bank { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; } } /* A tick drawn from two borders: Barlow has no check mark in it. Used where something is included in a package, and nowhere else. */ .ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; } .ticks li { position: relative; padding-left: 30px; font-size: 1rem; } .ticks li::before { content: ''; position: absolute; left: 4px; top: 0.35em; width: 6px; height: 12px; border: solid var(--primary); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); } /* ── Trust: terms and what they mean ───────────────────────────────────────────────────────── */ .terms { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .terms div { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; } .terms dt { font: 700 1.2rem/1.2 var(--font-display); } .terms dd { margin: 0; color: var(--muted); font-size: 1rem; } @media (min-width: 760px) { .terms div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: baseline; } } /* ── Steps ─────────────────────────────────────────────────────────────────────────────────── */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 32px; } .steps li { counter-increment: step; } .steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 10px; font: 700 1rem/1 var(--font-display); letter-spacing: 0.1em; color: var(--primary); } .steps h3 { font-size: 1.3rem; } .steps p { margin-top: 6px; color: var(--muted); font-size: 1rem; } .steps--stacked { margin: 24px 0 32px; gap: 0; border-top: 1px solid var(--line); } .steps--stacked li { display: flex; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); } .steps--stacked li::before { margin: 0; } .steps--stacked p { margin: 0; color: var(--ink); } @media (min-width: 900px) { .steps:not(.steps--stacked) { grid-template-columns: repeat(3, 1fr); gap: 48px; } } /* ── Plans ─────────────────────────────────────────────────────────────────────────────────── */ .plans { display: grid; gap: 20px; } .plan { display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px 28px; } .plan--featured { border-color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); } .plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .plan__badge { font: 600 0.85rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); } .plan h3 { font-size: 1.9rem; font-weight: 800; } .plan__tagline { margin-top: 8px; color: var(--muted); } .plan__price { margin-top: 24px; display: flex; align-items: baseline; gap: 8px; } .plan__price strong { font: 800 3rem/1 var(--font-display); font-variant-numeric: tabular-nums; } .plan__price span { font: 600 1.1rem/1 var(--font-display); color: var(--muted); letter-spacing: 0.03em; } .plan__vat { margin-top: 4px; color: var(--muted); font-size: 0.95rem; } .plan .ticks { margin-bottom: 28px; flex: 1; align-content: start; } @media (min-width: 760px) { .plans { grid-template-columns: repeat(2, 1fr); max-width: 880px; } } /* Two abreast on a tablet, and one column per package once there is room (D82's third one). `--3` is how many there actually are, so a card is never squeezed under the ~280px a price and five ticks need. */ @media (min-width: 1060px) { .plans--3 { grid-template-columns: repeat(3, 1fr); max-width: 1160px; } } .page-pricing .plans { margin-inline: auto; } .plans__more { margin-top: 20px; } .compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .compare table { width: 100%; border-collapse: collapse; min-width: 520px; } .compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 1rem; } .compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; } .compare thead th { font: 700 1.15rem/1 var(--font-display); letter-spacing: 0.04em; border-bottom-color: var(--ink); } .compare tbody th { font-weight: 400; } .compare td, .compare thead th:not(:first-child) { text-align: center; width: 15%; font-weight: 600; font-variant-numeric: tabular-nums; } .compare__note { margin-top: 18px; color: var(--muted); font-size: 1rem; max-width: 640px; } /* * Three packages do not fit a phone at the widths above, and the one that scrolled out of sight * was Max — the column the page is there to sell. The table stays scrollable for anything narrower * still, but at 390px it fits: the feature sentence wraps, which costs height, and height is the * one thing a phone has. */ @media (max-width: 620px) { /* `fixed` is what makes the widths below real: with the automatic layout a column is at least as wide as its longest word, so "Rajoittamaton" pushed the table past the screen and the Max column scrolled out of sight rather than wrapping. */ .compare table { min-width: 0; table-layout: fixed; } .compare th, .compare td { padding: 11px 8px; font-size: 0.92rem; } .compare thead th { font-size: 1rem; } .compare tbody th { padding-inline-start: 12px; } /* "Rajoittamaton" is wider than any share of 390px this table can give a column, so it wraps rather than being clipped — hyphenated where the browser knows how, broken where it does not. */ .compare td, .compare thead th:not(:first-child) { width: 19%; hyphens: auto; overflow-wrap: break-word; } } .yes, .no { display: inline-block; vertical-align: middle; } .yes { width: 7px; height: 13px; border: solid var(--primary); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg) translateY(-2px); } .no { width: 12px; height: 2px; border-radius: 2px; background: var(--line); } /* ── FAQ ───────────────────────────────────────────────────────────────────────────────────── */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; min-height: 60px; padding: 14px 44px 14px 0; font-weight: 600; font-size: 1.08rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before, .faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--muted); transition: transform 0.15s; } .faq summary::after { transform: rotate(90deg); } .faq details[open] summary::after { transform: rotate(0deg); } .faq details p { padding: 0 44px 22px 0; color: var(--muted); } /* ── CTA, footer ───────────────────────────────────────────────────────────────────────────── */ .cta { color: var(--on-navy); background: var(--navy); } .cta__row { display: grid; gap: 28px; align-items: center; padding-block: 64px; } .cta p { margin-top: 12px; color: var(--on-navy-muted); font-size: 1.1rem; } .cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (min-width: 800px) { .cta__row { grid-template-columns: 1fr auto; padding-block: 80px; } } .foot { background: var(--navy); color: var(--on-navy-muted); border-top: 1px solid var(--navy-line); font-size: 1rem; } .foot__grid { display: grid; gap: 36px; padding-block: 56px 40px; } .foot img { height: 40px; width: auto; } .foot__tagline { margin-top: 12px; font: 600 0.9rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; } .foot h2 { font: 600 0.9rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); margin-bottom: 8px; } .foot ul { list-style: none; margin: 0; padding: 0; } .foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-navy-muted); text-decoration: none; } .foot a:hover, .foot a[aria-current='true'] { color: var(--on-navy); } .foot__legal { padding-block: 20px 28px; border-top: 1px solid var(--navy-line); font-size: 0.9rem; } @media (min-width: 800px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } /* ── The order form ────────────────────────────────────────────────────────────────────────── */ .form { display: grid; gap: 40px; } .form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 18px; min-width: 0; } .form legend { float: left; width: 100%; padding: 0 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font: 700 1.35rem/1.1 var(--font-display); } .form legend + * { clear: both; } .form__pair { display: grid; gap: 18px; } @media (min-width: 640px) { .form__pair { grid-template-columns: 1fr 1fr; } } .form__help, .field__help { color: var(--muted); font-size: 0.95rem; } .form__after { text-align: center; } .form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__errors { padding: 16px 20px; border: 1.5px solid var(--error); border-radius: var(--radius); color: var(--error); background: var(--surface); } .form__errors ul { margin: 8px 0 0; padding-left: 20px; } .optional { font: 400 0.9rem/1 var(--font-body); color: var(--muted); letter-spacing: 0; text-transform: none; margin-left: 6px; } .field { display: grid; gap: 6px; align-content: start; } .field label { font-weight: 600; } .field input, .form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; } .form textarea { resize: vertical; min-height: 120px; } .field input:hover, .form textarea:hover { border-color: var(--muted); } .field input:focus-visible, .form textarea:focus-visible { border-color: var(--primary); outline-offset: 0; } .field--error input { border-color: var(--error); } .field__help--error { color: var(--error); font-weight: 500; } .choice { display: grid; gap: 12px; } @media (min-width: 640px) { .choice { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } .choice__item { position: relative; display: flex; gap: 14px; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--surface); } .choice__item input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--primary); flex: none; } .choice__item:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } .choice__item:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; } .choice__body { display: grid; gap: 4px; } .choice__body strong { font: 800 1.5rem/1 var(--font-display); } .choice__body span { font: 600 1.05rem/1.2 var(--font-display); color: var(--muted); letter-spacing: 0.03em; } .choice__body small { color: var(--muted); font-size: 0.95rem; } .check { display: flex; gap: 14px; align-items: flex-start; min-height: 44px; cursor: pointer; } .check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--primary); flex: none; } .check--error { color: var(--error); } /* What the contact form says once it has been sent (PLAN.md D77). It stands where the form was, so it is drawn as content rather than as a strip of colour above one. */ .done { padding: 28px 24px 20px; border: 1.5px solid var(--primary); border-radius: var(--radius); background: var(--surface); } .done h2 { font-size: 1.5rem; } .done p { margin-top: 12px; color: var(--muted); } .done .link { color: var(--primary); } /* ── Prose ─────────────────────────────────────────────────────────────────────────────────── */ .prose h2 { font-size: 1.5rem; margin: 40px 0 12px; } .prose h2:first-child { margin-top: 0; } .prose p + p { margin-top: 14px; } .prose { padding-bottom: 40px; } /* A phone in a feature row shows the top of its screen, not all 844 px of it: the row is about one idea, and a full-height phone makes the picture twice as tall as the words beside it. */ .feature--phone .device img { aspect-ratio: 390 / 600; object-fit: cover; object-position: top; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .feature--phone .device { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; } .feature--phone .feature__shot { padding-bottom: 0; align-items: end; overflow: hidden; } /* A feature's heading carries its row; the same size would read as a caption beside a picture. */ .feature h3, .also h3 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); } /* Signing in is what an existing customer came for, so it is a button in the bar at every width: beside the menu on a phone (and therefore not repeated inside it), beside the order button at a desk. Outlined, so the filled blue stays the one primary action. */ .top__sheet .top__login { display: none; } /* On a phone it is a chip: small to look at, because the bar is narrow and the menu is beside it, and still 44 px to touch — the link is the target, the chip is only what is drawn inside it. */ .top__chip { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; text-decoration: none; } .top__chip span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: var(--on-navy); font: 600 0.85rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; } .top__chip:hover span { border-color: var(--on-navy); } .top__nav .btn.top__login { margin-left: 8px; } .top__nav .btn.top__login + .btn { margin-left: 8px; } @media (min-width: 1000px) { .top__chip { display: none; } } .top .btn.top__login { border-color: rgba(255, 255, 255, 0.3); } .top .btn.top__login:hover { border-color: var(--on-navy); } /* The theme switch: an icon in the bar at a desk, a labelled row in the phone's menu. */ .top__theme { display: inline-flex; margin: 0; } .top__theme button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; color: var(--on-navy-muted); font: 500 1.1rem/1 var(--font-body); } .top__theme button:hover { color: var(--on-navy); } .top__nav .top__theme span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .top__sheet .top__theme button { min-height: 48px; padding: 0 12px; color: var(--on-navy); } /* ═══ TRIAL — direction B, "Fresh Ice". Not committed; delete this block to go back to A. ═══════ * * The bar turns white and the hero and page headers move onto a pale, cool ground, so a light page * is one surface from the first pixel. Everything inside those three reads the navy variables, so * re-pointing the variables there repaints them; the closing band and the footer stay navy as the * page's one dark anchor. The action is a deeper cut of the logo's own blue. */ :root { --bg: #F7F9FB; --surface: #FFFFFF; --raised: #E8EEF5; --ink: #0A1428; --muted: #46546B; --line: #D5DDE7; --primary: #0A66C2; --primary-hover: #08549F; --on-primary: #FFFFFF; --sky: #0B84F8; --ice: #EEF3F8; --ice-line: #D5DDE7; --ghost-line: #B8C4D4; } :root[data-theme='dark'] { --bg: #0B111C; --surface: #131C2B; --raised: #1A2538; --ink: #EAF0F7; --muted: #9FB0C6; --line: #24314A; --primary: #4C9BFF; --primary-hover: #6FB0FF; --on-primary: #0B111C; --sky: #6FB0FF; --ice: #0E1626; --ice-line: #24314A; --ghost-line: #3A4A66; } body { border-top-color: #0B84F8; } .top, .hero, .pagehead { --navy: var(--ice); --navy-raised: var(--raised); --navy-line: var(--ice-line); --on-navy: var(--ink); --on-navy-muted: var(--muted); } .top { --navy: var(--surface); } .top .btn--primary, .hero .btn--primary { background: var(--primary); color: var(--on-primary); } .top .btn--primary:hover, .hero .btn--primary:hover { background: var(--primary-hover); } .hero .btn--ghost, .top .btn.top__login, .top__chip span { border-color: var(--ghost-line); } .hero .btn--ghost:hover, .top .btn.top__login:hover, .top__chip:hover span { border-color: var(--ink); } /* The rink in the ice's own ink: the white lines of direction A would vanish on a pale ground. */ .hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%230A1428' stroke-width='2'%3E%3Crect x='20' y='20' width='1160' height='560' rx='150'/%3E%3Cline x1='600' y1='20' x2='600' y2='580'/%3E%3Ccircle cx='600' cy='300' r='90'/%3E%3Cline x1='420' y1='20' x2='420' y2='580'/%3E%3Cline x1='780' y1='20' x2='780' y2='580'/%3E%3Ccircle cx='230' cy='170' r='70'/%3E%3Ccircle cx='230' cy='430' r='70'/%3E%3Ccircle cx='970' cy='170' r='70'/%3E%3Ccircle cx='970' cy='430' r='70'/%3E%3Cline x1='100' y1='20' x2='100' y2='580'/%3E%3Cline x1='1100' y1='20' x2='1100' y2='580'/%3E%3C/svg%3E"); opacity: 0.07; } :root[data-theme='dark'] .hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='20' y='20' width='1160' height='560' rx='150'/%3E%3Cline x1='600' y1='20' x2='600' y2='580'/%3E%3Ccircle cx='600' cy='300' r='90'/%3E%3Cline x1='420' y1='20' x2='420' y2='580'/%3E%3Cline x1='780' y1='20' x2='780' y2='580'/%3E%3Ccircle cx='230' cy='170' r='70'/%3E%3Ccircle cx='230' cy='430' r='70'/%3E%3Ccircle cx='970' cy='170' r='70'/%3E%3Ccircle cx='970' cy='430' r='70'/%3E%3C/svg%3E"); opacity: 0.05; } .hero { border-bottom: 1px solid var(--ice-line); } /* The three bands, as the owner set them in the section-colour tool on 2026-09-20 (second save). Mittaristo and the closing band are a deep rink blue, the page's two dark moments; the footer is quiet, on the page's own ground in the light theme and on the hero's in the dark one. Each band re-points the navy variables, so everything drawn inside it follows. */ :root { --band: #0B3A75; --on-band-muted: #B9CBE6; --foot: #F7F9FB; } :root[data-theme='dark'] { --band: #10294F; --on-band-muted: #A9BEDD; --foot: #0E1626; } .section--ink, .cta { --navy: var(--band); --on-navy-muted: var(--on-band-muted); --navy-line: rgba(255, 255, 255, 0.16); } /* The footer wears the theme's ordinary ink, so it reads in both without a rule of its own. */ .foot { --navy: var(--foot); --on-navy: var(--ink); --on-navy-muted: var(--muted); --navy-line: var(--line); border-top-color: var(--line); } /* On a blue band a blue button disappears: there the action is white with the band's lettering. */ .cta .btn--primary { background: #FFFFFF; color: #0B3A75; } .cta .btn--primary:hover { background: #E3ECF8; } /* ═══ end of trial ═══════════════════════════════════════════════════════════════════════════ */