/* Click Coupon — the site. Design language: "ink & marker", taken straight from src/constants/theme.ts and the design canvas. Ink on paper. The yellow marker appears once per view, on the thing you are meant to press. */ /* fonts.css is linked from every page instead of imported here: an @import cannot start downloading until this file has arrived and been parsed, which put a second serial round trip on the critical path before any text could render. */ /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light; --paper: #FBFAF6; --surface: #FFFFFF; --surface2: #F2F0E8; --surface3: #E9E6DC; --ink: #12203B; --ink2: #5A6478; --ink3: #8B94A8; --line: #E1DFD6; --line2: #CFCCC0; --marker: #FFD23F; --marker-ink: #2B2200; --marker-soft: #FFF3C4; --fresh: #1B9C6B; --fresh-soft: #DFF4EA; --soon: #E8730C; --soon-soft: #FDE9D6; --urgent: #D8332A; --urgent-soft: #FBE1DE; --glass: rgba(255, 255, 255, 0.74); --glass-edge: rgba(255, 255, 255, 0.7); --shadow-card: 0 1px 2px rgba(18, 32, 59, .05), 0 6px 20px rgba(18, 32, 59, .06); --shadow-lift: 0 2px 6px rgba(18, 32, 59, .06), 0 22px 50px rgba(18, 32, 59, .13); --shadow-mark: 0 6px 16px rgba(43, 34, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .5); --display: "Secular One", "Arial Hebrew", "Heebo", system-ui, sans-serif; --body: "IBM Plex Sans Hebrew", "Arial Hebrew", "Heebo", system-ui, sans-serif; --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace; --r-card: 18px; --r-sheet: 28px; --r-button: 16px; --gut: clamp(20px, 5vw, 40px); --measure: 1120px; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"], :root:not([data-theme="light"]) { --dk-paper: #0F1626; --dk-surface: #172036; --dk-surface2: #1E2A44; --dk-surface3: #26334F; --dk-ink: #F1F3F8; --dk-ink2: #AEB6C8; --dk-ink3: #7F8AA3; --dk-line: #2A3652; --dk-line2: #3A4866; --dk-marker-soft: #3D3410; --dk-fresh: #34C48B; --dk-fresh-soft: #143627; --dk-soon: #F59A3E; --dk-soon-soft: #3E2A14; --dk-urgent: #F0645B; --dk-urgent-soft: #42201E; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: var(--dk-paper); --surface: var(--dk-surface); --surface2: var(--dk-surface2); --surface3: var(--dk-surface3); --ink: var(--dk-ink); --ink2: var(--dk-ink2); --ink3: var(--dk-ink3); --line: var(--dk-line); --line2: var(--dk-line2); --marker-soft: var(--dk-marker-soft); --fresh: var(--dk-fresh); --fresh-soft: var(--dk-fresh-soft); --soon: var(--dk-soon); --soon-soft: var(--dk-soon-soft); --urgent: var(--dk-urgent); --urgent-soft: var(--dk-urgent-soft); --glass: rgba(23, 32, 54, .74); --glass-edge: rgba(255, 255, 255, .10); --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 50px rgba(0, 0, 0, .45); } } :root[data-theme="dark"] { --paper: var(--dk-paper); --surface: var(--dk-surface); --surface2: var(--dk-surface2); --surface3: var(--dk-surface3); --ink: var(--dk-ink); --ink2: var(--dk-ink2); --ink3: var(--dk-ink3); --line: var(--dk-line); --line2: var(--dk-line2); --marker-soft: var(--dk-marker-soft); --fresh: var(--dk-fresh); --fresh-soft: var(--dk-fresh-soft); --soon: var(--dk-soon); --soon-soft: var(--dk-soon-soft); --urgent: var(--dk-urgent); --urgent-soft: var(--dk-urgent-soft); --glass: rgba(23, 32, 54, .74); --glass-edge: rgba(255, 255, 255, .10); --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 50px rgba(0, 0, 0, .45); } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } /* The header is sticky, so an anchor that scrolls a section to y=0 hides its own heading behind it. Reserve the header's height plus a little air. The value tracks the header at every breakpoint and every text size, since `zoom` scales it too. */ :root { --sticky-h: 66px; } @media (max-width: 900px) { :root { --sticky-h: 60px; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-h) + 18px); } [data-a11y-scale="115"] { --sticky-h: 76px; } [data-a11y-scale="130"] { --sticky-h: 86px; } [data-a11y-scale="150"] { --sticky-h: 99px; } [data-a11y-targets] { --sticky-h: 86px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.015em; line-height: 1.12; margin: 0; } h1 { font-size: clamp(34px, 6.2vw, 62px); } h2 { font-size: clamp(28px, 4.4vw, 44px); } h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } img, svg { max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } .mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } .ltr { direction: ltr; unicode-bidi: isolate; } .disp { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; } :root[data-theme="dark"] :focus-visible { outline-color: var(--marker); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--marker); } } ::selection { background: var(--marker); color: var(--marker-ink); } .skip { position: absolute; inset-block-start: -100px; inset-inline-start: 12px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; font-weight: 600; } .skip:focus { inset-block-start: 12px; } .wrap { width: min(100% - (var(--gut) * 2), var(--measure)); margin-inline: auto; } /* The phone mockups are laid out at 390px and scaled down with a transform, so their layout box is wider than what you see. Clip that overflow here rather than letting it widen the document — `clip` does it without creating a scroll container. */ main { overflow-x: clip; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------- marker */ /* The one brand gesture: a swipe of highlighter across a word. */ mark.mk { background: none; color: inherit; position: relative; isolation: isolate; padding-inline: .1em; } mark.mk::before { content: ""; position: absolute; inset-inline: -.08em; inset-block: .12em .06em; background: var(--marker); border-radius: 4px 10px 6px 12px; transform: rotate(-.7deg); z-index: -1; } :root[data-theme="dark"] mark.mk::before { opacity: .92; } /* ---------------------------------------------------------------- header */ .top { position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-block-end: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .top[data-stuck] { border-block-end-color: var(--line); } .top .bar { display: flex; align-items: center; gap: 18px; height: 66px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; direction: ltr; text-decoration: none; flex: none; } .wordmark .glyph { width: 30px; height: 30px; border-radius: 9px; flex: none; } .wordmark .name { font-family: var(--display); font-size: 15.5px; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; } .nav { display: flex; gap: 4px; margin-inline-start: auto; } .nav a { text-decoration: none; color: var(--ink2); font-size: 15px; font-weight: 500; padding: 9px 12px; border-radius: 999px; white-space: nowrap; } .nav a:hover { color: var(--ink); background: var(--surface2); } @media (max-width: 900px) { .nav { display: none; } } @media (max-width: 430px) { .top .bar { gap: 10px; height: 60px; } .wordmark .glyph { width: 26px; height: 26px; } .wordmark .name { font-size: 13.5px; } .top .tools .btn-sm { padding-inline: 13px; font-size: 14px; } .iconbtn { width: 40px; height: 40px; } } .top .tools { display: flex; gap: 8px; align-items: center; margin-inline-start: auto; } @media (min-width: 901px) { .top .tools { margin-inline-start: 0; } } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding-inline: 22px; border-radius: var(--r-button); font-family: var(--body); font-size: 16px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform .14s ease, opacity .14s ease, background .14s ease; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--marker); color: var(--marker-ink); box-shadow: var(--shadow-mark); } .btn-primary:hover { background: #FFDC66; } .btn-secondary { background: var(--surface2); color: var(--ink); } .btn-secondary:hover { background: var(--surface3); } .btn-sm { min-height: 44px; padding-inline: 16px; font-size: 15px; } .iconbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--ink); border: 0; cursor: pointer; flex: none; } .iconbtn:hover { background: var(--surface3); } /* ---------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding-inline: 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--surface2); color: var(--ink2); } .chip.fresh { background: var(--fresh-soft); color: var(--fresh); } .chip.soon { background: var(--soon-soft); color: var(--soon); } .chip.urgent { background: var(--urgent-soft); color: var(--urgent); } .chip.mark { background: var(--marker-soft); color: var(--marker-ink); } :root[data-theme="dark"] .chip.mark { color: var(--marker); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.mark { color: var(--marker); } } .chip.line { background: transparent; border: 1px solid var(--line2); color: var(--ink2); } /* ---------------------------------------------------------------- sections */ section { padding-block: clamp(52px, 7.5vw, 88px); } .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); margin-block-end: 14px; display: block; } .lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink2); max-width: 60ch; margin-block-start: 18px; } /* Measured in px, not ch: these boxes hold a 44px headline, not 17px body text. */ .head { max-width: 660px; } .head h2 { text-wrap: balance; } /* A two-sentence heading must break between the sentences, never inside one. balance evens the line lengths but has no idea where the full stop is. */ .head h2 .clause { display: inline-block; } /* The page's spine: a ticket perforation between chapters. */ /* Pulled into the gutter, but never past the viewport: the notches are 11px wide. */ .perf-rule { position: relative; height: 0; border-block-start: 1.5px dashed var(--line2); margin-inline: calc(11px - var(--gut)); } .perf-rule::before, .perf-rule::after { content: ""; position: absolute; inset-block-start: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); } .perf-rule::before { inset-inline-start: -11px; } .perf-rule::after { inset-inline-end: -11px; } /* ---------------------------------------------------------------- hero */ .hero { padding-block: clamp(36px, 6vw, 76px) clamp(48px, 7vw, 88px); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset-block-start: -180px; inset-inline-end: -140px; width: 620px; height: 620px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, var(--marker-soft) 0%, transparent 68%); opacity: .85; pointer-events: none; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } } .hero h1 { margin-block: 16px 0; max-width: 620px; text-wrap: balance; } .hero .lead { max-width: 52ch; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; } .stores { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; align-items: center; } /* Real download buttons now the app is out, not "coming soon" tags. */ .store { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .store svg { color: var(--ink); flex: none; } .store span { display: grid; line-height: 1.15; text-align: start; } .store small { font-size: 11.5px; color: var(--ink2); font-weight: 500; } .store b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .store:hover { border-color: var(--ink); transform: translateY(-1px); } .store:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* No App Store listing yet, so this one is a statement rather than a link. It keeps the row's shape — a missing button would leave a hole where people look for it — while making clear that there is nothing to tap: no pointer, no lift on hover, and the ink stepped back. */ .store-soon { cursor: default; opacity: .62; } .store-soon:hover { border-color: var(--line); transform: none; } /* The closing panel is inverted, so the buttons on it are too. */ .final .stores { justify-content: center; margin-block-start: 26px; } .final .store { background: transparent; border-color: color-mix(in srgb, currentColor 32%, transparent); color: inherit; } .final .store svg { color: inherit; } .final .store small { color: color-mix(in srgb, currentColor 72%, transparent); } .final .store:hover { border-color: currentColor; } /* ---------------------------------------------------------------- cards */ .grid { display: grid; gap: 16px; } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .g3 { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- ticket cards The three example tickets in "what goes in". These lived beside the phone mockups and were removed with them by mistake; the mockups stay gone. */ .ticket { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px 12px; box-shadow: var(--shadow-card); overflow: hidden; } .ticket::before, .ticket::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); top: calc(100% - 57px); } .ticket::before { inset-inline-start: -11px; } .ticket::after { inset-inline-end: -11px; } .ticket.on-surface::before, .ticket.on-surface::after { background: var(--paper); } .trow { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tm { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; min-width: 0; } .tm > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: none; } .ttitle { font-size: 16px; font-weight: 500; margin-top: 9px; line-height: 1.3; text-wrap: pretty; } .tcond { font-size: 13px; color: var(--ink2); margin-top: 2px; } .perf { border-top: 1.5px dashed var(--line2); margin: 12px -16px 9px; } .bal { height: 4px; background: var(--surface3); border-radius: 2px; margin-top: 8px; overflow: hidden; } .bal i { display: block; height: 100%; background: var(--fresh); border-radius: 2px; } .tval { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .tval b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -.01em; } .tval .tcode { font-size: 12px; color: var(--ink3); letter-spacing: .08em; } /* ---------------------------------------------------------------- split */ .split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 72px); align-items: center; } .split.flip { grid-template-columns: auto minmax(0, 1fr); } @media (max-width: 980px) { .split, .split.flip { grid-template-columns: minmax(0, 1fr); } .split .mock { justify-self: center; } } .bullets { margin-block-start: 26px; display: grid; gap: 16px; } .bullets li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; } .bullets .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--fresh-soft); color: var(--fresh); display: grid; place-items: center; flex: none; margin-block-start: 2px; } .bullets b { font-weight: 600; } .bullets span { color: var(--ink2); font-size: 15.5px; } /* ---------------------------------------------------------------- faq */ .faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .faq details { background: var(--surface); } .faq summary { cursor: pointer; list-style: none; padding: 20px 22px; font-size: 17px; font-weight: 600; /* Two grid tracks, not flex with space-between: a label mixing Hebrew and Latin ("במה זה שונה מ-Apple Wallet") becomes several bidi runs, and as flex items they were spread across the whole row. A single track keeps the sentence together. */ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; } .faq summary .q { min-width: 0; } .faq summary::-webkit-details-marker { display: none; } /* Physical borders on purpose: the chevron must point down in both directions. */ .faq summary::after { content: ""; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3); transform: rotate(45deg); transition: transform .2s ease; margin-block-start: -4px; } .faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: 4px; } .faq details > div { padding: 0 22px 22px; color: var(--ink2); font-size: 15.5px; max-width: 74ch; } .faq details > div p + p { margin-block-start: 10px; } /* ---------------------------------------------------------------- final cta */ .final { background: var(--ink); color: var(--paper); border-radius: var(--r-sheet); padding: clamp(36px, 6vw, 68px); text-align: center; position: relative; overflow: hidden; } :root[data-theme="dark"] .final { background: var(--surface2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .final { background: var(--surface2); } } .final h2 { color: inherit; } .final p { color: color-mix(in srgb, currentColor 74%, transparent); margin-inline: auto; margin-block-start: 16px; max-width: 52ch; } .final .cta-row { justify-content: center; } /* ---------------------------------------------------------------- footer */ footer { border-block-start: 1px solid var(--line); padding-block: 44px 36px; margin-block-start: clamp(56px, 8vw, 96px); } .foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; } @media (max-width: 860px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .foot { grid-template-columns: minmax(0, 1fr); } } .foot h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin: 0 0 14px; } .foot ul { display: grid; gap: 10px; } .foot a { color: var(--ink2); text-decoration: none; font-size: 15px; } .foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .foot p { color: var(--ink2); font-size: 14.5px; margin-block-start: 14px; max-width: 40ch; } .colophon { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-block-start: 40px; padding-block-start: 24px; border-block-start: 1px solid var(--line); color: var(--ink3); font-size: 13.5px; } /* ---------------------------------------------------------------- motion */ /* Visible by default. The reveal is added only when scripting is on, so the page never depends on JavaScript to show its content. */ .js .rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); } .js .rise.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---------------------------------------------------------------- legal pages */ .doc { max-width: 74ch; } .doc h2 { margin-block: 44px 14px; font-size: clamp(24px, 3.2vw, 32px); } .doc h3 { margin-block: 28px 8px; } /* Package names and long identifiers do not wrap on their own, and the page clipped them instead of scrolling — the text simply vanished past the edge. break-word only splits a token that cannot fit, so Hebrew prose is untouched. */ .doc p, .doc li { color: var(--ink2); font-size: 16.5px; overflow-wrap: break-word; } .doc p + p { margin-block-start: 12px; } /* Plain flow, not a grid. As a grid the single implicit track sized itself to the longest unbreakable token — a 440px package name inside a 350px column — and the list hung off the edge. `break-word` wraps the text but does not shrink a track, so only leaving grid actually fixes it. */ .doc ul { display: block; margin-block: 12px; } .doc ul li + li { margin-block-start: 10px; } /* The dot hangs outside the text rather than sharing a grid with it. As a grid, every child of the item became a grid item: the dot took one track, the first took the other, and the sentence that followed pushed the label's track to zero width — so labels broke one character per line. Legal lists are prose. */ .doc ul li { position: relative; padding-inline-start: 17px; } .doc ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--line2); } .doc a { color: var(--ink); text-underline-offset: 3px; } /* Contact rows read as "label — address": the address is the whole target, not a link inside a sentence, so it needs its own height. 2px each side clears the 24px minimum without disturbing the line boxes of links that are inline prose. */ .doc li a { display: inline-block; padding-block: 2px; } /* Licence text is pre-wrap, so it breaks at spaces only — and one credit line carries a URL with none, 408px of it inside a 350px column on a phone. Letting long tokens break keeps the wording intact and the text on screen. */ .doc pre { overflow-wrap: anywhere; } /* A link alone in a table cell is its own target, so the 22px line box has to grow to clear the 24px minimum — same reason as .hero-aside a above. */ .doc td > a:only-child { display: inline-block; padding-block: 2px; } /* Tables had no styling at all, so every one on the site rendered as a bare browser default: no padding, hairline borders, header indistinguishable from body. They also have to scroll inside their own box rather than push the page sideways on a phone. */ .doc .table-scroll { overflow-x: auto; margin-block: 18px; -webkit-overflow-scrolling: touch; } .doc table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 30rem; } .doc thead th { text-align: start; font-weight: 600; color: var(--ink); padding: 10px 14px; background: var(--surface2); border-block-end: 1.5px solid var(--line2); white-space: nowrap; } .doc tbody td { padding: 12px 14px; color: var(--ink2); border-block-end: 1px dashed var(--line2); vertical-align: top; } .doc tbody tr:last-child td { border-block-end: 0; } .doc tbody td:first-child { color: var(--ink); font-weight: 600; } /* On a phone a three-column table that has to scroll hides its own content behind an edge with no affordance. Two short columns and one prose column fit if the prose is allowed to wrap, so drop the floor and let it. */ @media (max-width: 620px) { .doc table { font-size: 14px; min-width: 0; } .doc thead th { white-space: normal; padding: 9px 8px; } .doc tbody td { padding: 10px 8px; } } .note { background: var(--marker-soft); border-radius: 14px; padding: 16px 18px; font-size: 15px; color: var(--marker-ink); margin-block-start: 20px; } :root[data-theme="dark"] .note { color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note { color: var(--ink); } } /* ---------------------------------------------------------------- money */ .money { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; margin-block-start: 36px; } .money .units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 620px) { .money .units { grid-template-columns: minmax(0, 1fr); } } .money .unit { padding: 30px 24px; text-align: center; position: relative; } .money .unit + .unit::before { content: ""; position: absolute; inset-block: 22px; inset-inline-start: 0; border-inline-start: 1.5px dashed var(--line2); } @media (max-width: 620px) { .money .unit + .unit::before { inset: 0 22px auto 22px; border-inline-start: 0; border-block-start: 1.5px dashed var(--line2); } } .money .unit b { display: block; font-family: var(--display); font-size: clamp(36px, 6vw, 54px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .money .unit span { display: block; margin-block-start: 10px; color: var(--ink2); font-size: 15.5px; } /* ---------------------------------------------------------------- free */ .free-band { background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-sheet); padding: clamp(28px, 5vw, 56px); text-align: center; } .free-band .word { font-family: var(--display); font-size: clamp(52px, 11vw, 104px); line-height: 1; letter-spacing: -.03em; } .free-band .word mark.mk::before { inset-block: .16em .08em; } .free-band p { color: var(--ink2); font-size: clamp(16px, 2vw, 19px); max-width: 48ch; margin: 22px auto 0; } .free-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; margin-block-start: 34px; text-align: start; } @media (max-width: 820px) { .free-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .free-grid { grid-template-columns: minmax(0, 1fr); } } .free-grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; font-size: 15.5px; } .free-grid svg { color: var(--fresh); margin-block-start: 3px; flex: none; } .free-note { margin-block-start: 30px; padding-block-start: 24px; border-block-start: 1px dashed var(--line2); color: var(--ink3); font-size: 14.5px; max-width: 62ch; margin-inline: auto; } /* ---------------------------------------------------------------- hero chips */ .assure { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; } .assure span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink2); } .assure svg { color: var(--fresh); flex: none; } /* ---------------------------------------------------------------- mobile order */ /* On one column the words come first and the phone illustrates them, both ways round. */ @media (max-width: 980px) { .split.flip .shot { order: 2; } .split.flip > div { order: 1; } } /* ================================================================ audit fixes */ /* 320px: the header CTA no longer fits beside the wordmark. The hero has one right below it, so drop it rather than squeeze it. */ @media (max-width: 400px) { .top .tools .btn-sm { display: none; } } /* Minimum target size (WCAG 2.2, 24×24): footer links are list items, not prose, so they need real height of their own. */ .foot a, .colophon a { display: inline-block; padding-block: 10px; } .foot ul { gap: 0; } .wordmark { padding-block: 6px; } /* Nothing outside the phone mockups goes below 12.5px. */ .stat cite { font-size: 13px; } .ticket .tval .tcode { font-size: 12.5px; } /* The reassurance run under the hero headline. */ .assure { gap: 9px 20px; } .assure li { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--ink2); } @media (max-width: 640px) { .g4.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4.tight .card { padding: 15px 16px; } .g4.tight .card b { font-size: 15px; } .g4.tight .card p { font-size: 13.5px; } } @media (max-width: 340px) { .g4.tight { grid-template-columns: minmax(0, 1fr); } } /* Tighter vertical rhythm on a phone, so the page stays a scroll and not a trek. */ @media (max-width: 640px) { section { padding-block: 48px; } .grid { gap: 12px; } .card { padding: 20px 18px; } .bullets { gap: 14px; } } /* ================================================================ accessibility menu The same ten adjustments the app offers (src/store/a11y.ts), plus link highlighting, which only matters on the web. Every mode is a data-attribute on . */ /* -- 1. text size ---------------------------------------------------------- */ [data-a11y-scale="115"] body { zoom: 1.15; } [data-a11y-scale="130"] body { zoom: 1.3; } [data-a11y-scale="150"] body { zoom: 1.5; } /* -- 2. bold text ---------------------------------------------------------- */ [data-a11y-bold] body :where(p, span, li, a, b, summary, h3, .lead, .stat span, .card p, td, th, label) { font-weight: 600 !important; } [data-a11y-bold] .phone * { font-weight: revert !important; } /* -- 3. wider spacing (WCAG 1.4.12) ---------------------------------------- */ [data-a11y-spacing] body :where(p, li, .lead, .card p, .smart p, .way p, summary, .doc p) { line-height: 1.85 !important; letter-spacing: .06em !important; word-spacing: .16em !important; } [data-a11y-spacing] .phone * { line-height: revert !important; letter-spacing: revert !important; word-spacing: revert !important; } /* -- 4. readable font ------------------------------------------------------ */ [data-a11y-font] { --display: system-ui, "Segoe UI", Arial, sans-serif; --body: system-ui, "Segoe UI", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; } [data-a11y-font] h1, [data-a11y-font] h2, [data-a11y-font] h3, [data-a11y-font] .disp { font-weight: 700; letter-spacing: 0; } /* -- 5. high contrast ------------------------------------------------------ */ [data-a11y-contrast] { --paper: #FFFFFF; --surface: #FFFFFF; --surface2: #FFFFFF; --surface3: #F0F0F0; --ink: #000000; --ink2: #1A1A1A; --ink3: #333333; --line: #000000; --line2: #000000; --marker: #FFE45C; --marker-soft: #FFF7D6; --marker-ink: #000000; --fresh: #00593B; --fresh-soft: #E4F5EE; --soon: #8A3B00; --soon-soft: #FBEADC; --urgent: #A3000A; --urgent-soft: #FBE3E4; --glass: #FFFFFF; --glass-edge: #000000; --shadow-card: none; --shadow-lift: none; --shadow-mark: none; } [data-a11y-contrast][data-theme="dark"] { --paper: #000000; --surface: #000000; --surface2: #0D0D0D; --surface3: #1A1A1A; --ink: #FFFFFF; --ink2: #F0F0F0; --ink3: #DDDDDD; --line: #FFFFFF; --line2: #FFFFFF; --marker: #FFD23F; --marker-soft: #2E2600; --marker-ink: #FFE98A; --fresh: #6CFFC0; --fresh-soft: #002417; --soon: #FFC46B; --soon-soft: #2B1A00; --urgent: #FF9A93; --urgent-soft: #2E0603; --glass: #000000; --glass-edge: #FFFFFF; } [data-a11y-contrast] :where(.card, .ticket, .stats, .ways, .smart, .faq, .money, .versus, .free-band, .store, .chip) { border-color: var(--line) !important; } [data-a11y-contrast] .hero::before, [data-a11y-contrast] .money .foot { background: none; } /* The final panel already inverts correctly from the tokens in both themes; forcing a colour here produced black-on-black in dark + high contrast. */ [data-a11y-contrast] .final p { color: inherit; } /* -- 6. grayscale ---------------------------------------------------------- */ [data-a11y-gray] body { filter: grayscale(1); } /* -- 7. outline every control ---------------------------------------------- */ [data-a11y-outline] :where(a, button, summary, input, .chip, .store) { outline: 2px solid var(--ink) !important; outline-offset: 2px; border-radius: 6px; } [data-a11y-outline] .phone :where(a, button, .chip) { outline: 0 !important; } /* -- 8. reduce motion ------------------------------------------------------ */ [data-a11y-motion] *, [data-a11y-motion] *::before, [data-a11y-motion] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-a11y-motion] .js .rise, .js [data-a11y-motion] .rise { opacity: 1 !important; transform: none !important; } /* -- 9. big targets -------------------------------------------------------- */ [data-a11y-targets] :where(.btn) { min-height: 60px; padding-inline: 28px; } [data-a11y-targets] :where(.btn-sm) { min-height: 52px; } [data-a11y-targets] :where(.iconbtn) { width: 54px; height: 54px; } [data-a11y-targets] :where(.nav a, .foot a, .colophon a) { padding-block: 14px; padding-inline: 14px; } [data-a11y-targets] .faq summary { padding-block: 26px; } [data-a11y-targets] .top .bar { height: auto; padding-block: 10px; } /* -- 10. highlight links --------------------------------------------------- */ [data-a11y-links] :where(main, footer) a:not(.btn):not(.wordmark) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; background: var(--marker-soft); color: var(--ink) !important; border-radius: 4px; padding-inline: 3px; } [data-a11y-links] .phone a { background: none; text-decoration: revert !important; } /* -- 11. read aloud -------------------------------------------------------- */ [data-a11y-speak] main :where(h1, h2, h3, p, li) { cursor: pointer; } [data-a11y-speak] main :where(h1, h2, h3, p, li):hover { background: var(--marker-soft); border-radius: 6px; } .a11y-speaking { outline: 3px solid var(--marker) !important; outline-offset: 3px; border-radius: 6px; } /* -- the launcher and the panel -------------------------------------------- */ .a11y-fab { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-lift); } .a11y-fab:hover { background: var(--marker-soft); } .a11y-fab .count { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px; padding-inline: 5px; border-radius: 999px; background: var(--marker); color: var(--marker-ink); border: 2px solid var(--paper); font: 700 12px/1 var(--body); display: none; place-items: center; } .a11y-fab[data-count] .count { display: grid; } .a11y-panel { position: fixed; inset-block-end: 84px; inset-inline-start: 18px; z-index: 91; width: min(360px, calc(100vw - 36px)); max-height: min(74vh, 640px); overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sheet); box-shadow: var(--shadow-lift); padding: 20px; } .a11y-panel[hidden] { display: none !important; } .a11y-panel h2 { font-size: 21px; } .a11y-panel .ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 4px; } .a11y-panel .sub { color: var(--ink2); font-size: 14px; } .a11y-panel fieldset { border: 0; padding: 0; margin: 20px 0 0; } .a11y-panel legend { padding: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-block-end: 10px; } .a11y-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .a11y-sizes button { min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); cursor: pointer; font-family: var(--display); line-height: 1; } .a11y-sizes button[aria-checked="true"] { background: var(--marker); color: var(--marker-ink); border-color: var(--marker); font-weight: 700; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; cursor: pointer; } .a11y-row + .a11y-row { border-block-start: 1px solid var(--line); } .a11y-row span { font-size: 15.5px; } .a11y-row input { position: absolute; opacity: 0; width: 1px; height: 1px; } .a11y-row .sw { width: 50px; height: 30px; border-radius: 999px; background: var(--surface3); border: 1px solid var(--line2); position: relative; flex: none; transition: background .15s ease; } .a11y-row .sw::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .15s ease; } .a11y-row input:checked + .sw { background: var(--fresh); border-color: var(--fresh); } .a11y-row input:checked + .sw::after { transform: translateX(-20px); } [dir="ltr"] .a11y-row input:checked + .sw::after { transform: translateX(20px); } .a11y-row input:focus-visible + .sw { outline: 3px solid var(--ink); outline-offset: 3px; } .a11y-panel .acts { display: flex; gap: 8px; margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--line); flex-wrap: wrap; } .a11y-panel .acts .btn { flex: 1; min-width: 130px; } .a11y-panel .stmt { display: block; margin-block-start: 14px; font-size: 14.5px; color: var(--ink2); text-underline-offset: 3px; } @media (max-width: 520px) { .a11y-fab { inset-block-end: 12px; inset-inline-start: 12px; width: 52px; height: 52px; } .a11y-panel { inset-block-end: 74px; inset-inline: 12px; width: auto; } } @media print { .a11y-fab, .a11y-panel, .top, .mock, .tabbar, .cta-row, .stores, .skip { display: none !important; } :root { --paper: #fff; --surface: #fff; --ink: #000; --ink2: #222; --ink3: #444; --line: #999; --line2: #999; } body { background: #fff; color: #000; } section { padding-block: 18px; break-inside: avoid; } .card, .ticket, .money, .free-band, .versus > div, .smart article, .way { box-shadow: none !important; break-inside: avoid; } h1, h2, h3 { break-after: avoid; } .hero::before, .perf-rule::before, .perf-rule::after { display: none; } /* Paper has no hyperlinks, so spell the destination out. */ main a[href^="http"]::after, main a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; } .final { background: #fff !important; color: #000 !important; border: 1px solid #000; } } /* -- keeping the header honest when the text is enlarged -------------------- `zoom` shrinks the usable width but leaves media-query breakpoints where they were, so the header's own breakpoints have to move with the scale. */ .top .bar > .wordmark { flex: 0 1 auto; min-width: 0; } .wordmark .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .top .tools { flex: none; } @media (max-width: 1035px) { [data-a11y-scale="115"] .nav { display: none; } } @media (max-width: 1170px) { [data-a11y-scale="130"] .nav { display: none; } } @media (max-width: 1350px) { [data-a11y-scale="150"] .nav { display: none; } } @media (max-width: 460px) { [data-a11y-scale="115"] .top .tools .btn-sm { display: none; } } @media (max-width: 520px) { [data-a11y-scale="130"] .top .tools .btn-sm { display: none; } } @media (max-width: 620px) { [data-a11y-scale="150"] .top .tools .btn-sm { display: none; } } /* Long addresses must be allowed to break rather than push the column open. */ .foot a, .doc a { overflow-wrap: anywhere; } /* ================================================================ contrast fixes Every value below was measured against its real rendered background and lifted to at least 4.5:1 for text, 3:1 for icons and borders (WCAG 2.1 AA). */ :root { /* ink3 at #8B94A8 measured 2.96:1 on paper — fine as a hairline, not as text. #6B7488 landed on 4.49:1, a hundredth under the bar; #666D82 clears it at 4.93. */ --ink3: #666D82; /* Status colours read well as dots and rings, but not as 13px chip text. These are the text-safe variants; the originals still draw the graphics. */ --fresh-text: #0F6B49; --soon-text: #9A4A05; --urgent-text: #B01F17; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink3: var(--dk-ink3); --fresh-text: var(--dk-fresh); --soon-text: var(--dk-soon); --urgent-text: var(--dk-urgent); } } :root[data-theme="dark"] { --ink3: var(--dk-ink3); --fresh-text: var(--dk-fresh); --soon-text: var(--dk-soon); --urgent-text: var(--dk-urgent); } .chip.fresh { color: var(--fresh-text); } .chip.soon { color: var(--soon-text); } .chip.urgent { color: var(--urgent-text); } .phone .chip.fresh { color: var(--fresh); } .phone .chip.soon { color: var(--soon); } .phone .chip.urgent { color: var(--urgent); } /* Dark mode turned this panel's text the same navy as its background. */ :root[data-theme="dark"] .final { color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .final { color: var(--ink); } } /* High contrast, dark: the primary button keeps a light marker background, so its label has to stay dark. */ [data-a11y-contrast][data-theme="dark"] { --marker-ink: #1A1400; } [data-a11y-contrast][data-theme="dark"] .chip.mark { color: var(--marker); } /* A second skip link opens the accessibility menu without hunting for the button. */ button.skip { border: 0; font: inherit; cursor: pointer; } .skip + .skip:focus { inset-inline-start: 210px; } /* Translucency is the enemy of legibility. In high contrast — and whenever the operating system asks for less transparency — every frosted surface goes solid. */ [data-a11y-contrast] .top, [data-a11y-contrast] .a11y-panel, [data-a11y-contrast] .tabglass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-a11y-contrast] .top { background: var(--paper); border-block-end: 1px solid var(--line); } @media (prefers-reduced-transparency: reduce) { .top { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } .tabglass, .a11y-panel { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ================================================================ app screenshots Real captures from the running app, framed rather than redrawn. The frame is CSS so the image itself stays a plain rectangle and compresses well. */ /* A device body around the screen. Without the status bar the crop read as a plain rectangle; the bezel gives it back the shape of a phone. Outer radius = inner radius + bezel thickness, so the corners stay concentric. */ .shot { margin: 0 auto; width: min(320px, 76vw); position: relative; padding: 9px; background: linear-gradient(158deg, #333B4E 0%, #151B29 46%, #262E40 100%); border-radius: 46px; box-shadow: 0 34px 64px -22px rgba(8, 13, 26, .55), 0 10px 24px -10px rgba(8, 13, 26, .38), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .06); } /* One declaration. The bezel on .shot carries the depth; the screen only needs its own hairline so the capture does not bleed into the frame. */ .shot img { display: block; width: 100%; height: auto; border: 0; border-radius: 37px; outline: 1px solid rgba(0, 0, 0, .28); outline-offset: -1px; box-shadow: none; background: var(--surface); } @media (max-width: 980px) { .shot { width: min(300px, 70vw); } } /* ================================================================ polish pass Small design-engineering details: tactile presses, text that wraps kindly, numbers that line up, and image edges that do not blur into the page. */ /* -- 1. every tactile control answers a press, not just the main buttons --- */ .store:active { transform: translateY(0) scale(.985); } .iconbtn { transition-property: background, border-color, transform; transition-duration: .14s; transition-timing-function: ease-out; } .iconbtn:active { transform: scale(.94); } .a11y-fab { transition-property: background, transform; transition-duration: .14s; transition-timing-function: ease-out; } .a11y-fab:active { transform: scale(.94); } .a11y-sizes button { transition-property: background, border-color, transform; transition-duration: .14s; transition-timing-function: ease-out; } .a11y-sizes button:active { transform: scale(.96); } .faq summary { transition-property: background; transition-duration: .14s; transition-timing-function: ease-out; } .faq summary:hover { background: var(--surface2); } .faq summary:active { background: var(--surface3); } .faq details[open] summary { background: var(--surface2); } /* -- 2. body copy should not leave orphans on the last line ---------------- */ :where(.lead, .free-note, .money .foot, .faq div p, .doc p, .doc li, .bullets span, .shot figcaption, .store small) { text-wrap: pretty; } /* -- 3. figures that sit side by side should align on the digit ------------ */ .tval b, .chip { font-variant-numeric: tabular-nums; } /* -- 4. a neutral edge on photography, never a brand-tinted one ------------ */ /* The status bar is cropped away, so this is a screen crop and not a device. A softer corner reads that way instead of pretending to be a bezel. */ :root[data-theme="dark"] .shot img { outline-color: rgba(255, 255, 255, .14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot img { outline-color: rgba(255, 255, 255, .14); } } /* -- 5. concentric radius inside the accessibility sheet ------------------- */ /* 28px sheet minus its 20px padding wants roughly a 10px inner corner. */ .a11y-sizes button { border-radius: 10px; } .a11y-panel .acts .btn { border-radius: 12px; } /* -- 6. a press should never fight someone who asked for less motion ------- */ @media (prefers-reduced-motion: reduce) { .btn:active, .store:active, .iconbtn:active, .a11y-fab:active, .a11y-sizes button:active { transform: none; } } /* -- 7. the last two targets that sat just under a comfortable size -------- */ .wordmark { padding-block: 8px; } .a11y-panel .stmt { padding-block: 11px; } /* -- 8. cross-document links sit alone in a run, so each needs its own height */ /* They are standalone targets, not links inside a sentence, so the 24px minimum applies. */ .note a { display: inline-block; padding-block: 4px; } .note { line-height: 1.9; } /* ================================================================================ DESIGN PASS · giving the page a spine The page read as one long beige document: every section the same tone, the same rhythm, separated by the same dashed rule. Three changes fix that — alternating light and deep bands, the product's own card gradients used as light, and a composition where the phone sits on something instead of floating. ================================================================================ */ :root { /* The structural band. In light it drops away from the paper; in dark it has to rise above it, or the two sit 2/255 apart and the page loses its spine. */ --deep: #0D1424; --deep-2: #131C31; --deep-ink: #F2F4F9; --deep-ink2: #9BA6BE; --deep-line: rgba(255, 255, 255, .12); /* Borrowed from the gift cards the app actually renders. */ --card-magenta: #B5359C; --card-violet: #7A3BE0; --card-indigo: #2F6FDB; } /* -- deep bands ------------------------------------------------------------ */ .band-deep { background: var(--deep); color: var(--deep-ink); position: relative; overflow: clip; } .band-deep h2, .band-deep h3, .band-deep b, .band-deep .disp { color: var(--deep-ink); } .band-deep .lead, .band-deep p { color: var(--deep-ink2); } .band-deep .eyebrow { color: var(--deep-ink2); } .band-deep .bullets span { color: var(--deep-ink2); } .band-deep .bullets b { color: var(--deep-ink); } .band-deep .tick { background: rgba(108, 255, 192, .14); color: #6CFFC0; } /* One wash of the product's own colour, low and wide, so the band is not flat black. */ .band-deep::before { content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: -10%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card-violet) 13%, transparent) 0%, transparent 66%); pointer-events: none; z-index: 0; } .band-deep > * { position: relative; z-index: 1; } :root[data-theme="dark"] { --deep: #27375E; --deep-2: #2F4270; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --deep: #27375E; --deep-2: #2F4270; } } /* -- tinted band ----------------------------------------------------------- */ .band-tint { background: var(--surface2); } :root[data-theme="dark"] .band-tint { background: var(--surface); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-tint { background: var(--surface); } } /* A band change separates better than a rule, so the rules between bands go. */ .band-deep + .wrap .perf-rule, .wrap:has(+ .band-deep) .perf-rule { display: none; } /* -- the phone sits on light, not on nothing ------------------------------- */ .shot { position: relative; } .shot::before { content: ""; position: absolute; inset: -14% -22%; background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--card-magenta) 26%, transparent) 0%, color-mix(in srgb, var(--card-violet) 16%, transparent) 45%, transparent 72%); filter: blur(30px); pointer-events: none; z-index: -1; } .band-deep .shot::before { opacity: .85; } /* On the deep band the bezel and the ground are almost the same value, so the device loses its edge. Give it a rim light instead of a darker shadow. */ .band-deep .shot { box-shadow: 0 34px 64px -22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14); } /* -- typography with more range -------------------------------------------- */ h2 { letter-spacing: -.025em; } .head h2 { font-size: clamp(30px, 4.6vw, 52px); } .hero h1 { font-size: clamp(38px, 6.6vw, 70px); letter-spacing: -.035em; } .lead { font-size: clamp(17px, 1.9vw, 20.5px); line-height: 1.62; } .eyebrow { letter-spacing: .13em; font-size: 12.5px; } /* -- the marker reads as a swipe, not a filled block ----------------------- */ mark.mk::before { inset-block: .3em .1em; border-radius: 4px 12px 6px 14px; } .free-band .word mark.mk::before { inset-block: .32em .1em; } /* -- split sections balance instead of towering ---------------------------- */ @media (min-width: 981px) { .split { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; } .shot { width: min(292px, 100%); } } /* -- pass two -------------------------------------------------------------- */ /* The tint was a hair away from paper and read as an accident. */ /* Mixed toward warm brown rather than navy: against #FBFAF6 a neutral grey reads as a dirty patch, not a chosen tone. */ .band-tint { background: color-mix(in srgb, #6B5B3E 7%, var(--paper)); } :root[data-theme="dark"] .band-tint, :root:not([data-theme="light"]) .band-tint { background: color-mix(in srgb, #fff 8%, var(--paper)); } /* The brand colour at full strength, exactly once on the page. */ .band-marker { background: var(--marker); color: var(--ink); } .band-marker .free-band { background: none; border: 0; padding: 0; box-shadow: none; } .band-marker .word mark.mk::before { display: none; } /* no highlight on a highlight */ .band-marker .word { color: var(--ink); } .band-marker p, .band-marker .free-note { color: color-mix(in srgb, var(--ink) 76%, transparent); } .band-marker .free-grid svg { color: var(--ink); } .band-marker .free-grid li { color: var(--ink); } .band-marker .free-note { border-block-start-color: color-mix(in srgb, var(--ink) 22%, transparent); } .band-marker a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Tickets were washing out against the paper. Give them a real edge and lift. */ .ticket { box-shadow: 0 1px 2px rgba(18,32,59,.05), 0 12px 28px -14px rgba(18,32,59,.22); } .band-tint .ticket, .band-marker .ticket { box-shadow: 0 1px 2px rgba(18,32,59,.06), 0 14px 30px -14px rgba(18,32,59,.26); } /* Store buttons should feel like the product, not like a form control. */ .store { background: var(--surface); border-color: color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: 0 1px 2px rgba(18,32,59,.05); } .store:hover { box-shadow: 0 6px 16px -6px rgba(18,32,59,.25); } .band-marker .store, .band-deep .store { box-shadow: none; } /* -- fixes the contrast sweep found --------------------------------------- */ /* Yellow is a light surface in either theme, so its text cannot follow --ink, which flips to near-white in dark mode and left the band unreadable. */ .band-marker { --band-ink: #12203B; color: var(--band-ink); } .band-marker .word, .band-marker h2, .band-marker h3, .band-marker b, .band-marker strong { color: var(--band-ink); } .band-marker p, .band-marker .free-note, .band-marker .free-grid li, .band-marker span { color: color-mix(in srgb, var(--band-ink) 82%, transparent); } .band-marker .free-grid svg, .band-marker a { color: var(--band-ink); } .band-marker .free-note { border-block-start-color: color-mix(in srgb, var(--band-ink) 26%, transparent); } .band-marker .store { color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 30%, transparent); background: color-mix(in srgb, #fff 55%, transparent); } .band-marker .store svg { color: var(--band-ink); } .band-marker .store small { color: color-mix(in srgb, var(--band-ink) 72%, transparent); } /* The tinted band darkened the ground just enough to drop the eyebrow below AA. */ .eyebrow { color: var(--ink2); } /* -- the savings figure ---------------------------------------------------- Three numbers side by side gave the reader no idea which one was the point. Now the sum stands alone at the top of the card and the row underneath spends it — words, not more numbers, because a second figure only competes with the first one. */ .money { border-width: 1.5px; } .money .figure { padding: 42px 24px 34px; text-align: center; border-block-end: 1.5px dashed var(--line2); } .money .figure b { display: block; font-family: var(--display); font-size: clamp(58px, 11vw, 104px); line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .money .figure > span { display: block; margin-block-start: 12px; font-size: 17px; color: var(--ink); font-weight: 600; } /* The marker sits between the caption and the promise, not after it, so the eye stops on the number before it reads what we intend to do about it. */ .money .figure > span::after { content: ""; display: block; width: 62px; height: 7px; margin: 16px auto 0; background: var(--marker); border-radius: 3px 8px 4px 9px; transform: rotate(-.8deg); } .money .units { grid-template-columns: repeat(3, minmax(0, 1fr)); } .money .unit { padding: 30px 22px; } .money .unit b { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.15; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; } .money .unit span { margin: 10px auto 0; max-width: 26ch; font-size: 15px; text-wrap: pretty; } .money-note { margin-block-start: 16px; color: var(--ink2); font-size: 14.5px; text-align: center; } @media (max-width: 620px) { .money .units { grid-template-columns: minmax(0, 1fr); } .money .figure { padding: 34px 20px 28px; } .money .unit { padding: 24px 20px; } } /* ================================================================ conversion The store badges are the action now, not a footnote under a button that only scrolled. The badge matching the visitor's platform is the loud one. */ .store.is-primary { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); box-shadow: 0 1px 2px rgba(18,32,59,.10), 0 10px 22px -10px rgba(18,32,59,.35); } .store.is-primary svg, .store.is-primary b { color: var(--marker-ink); } .store.is-primary small { color: color-mix(in srgb, var(--marker-ink) 72%, transparent); } .store.is-primary:hover { border-color: var(--marker); box-shadow: 0 6px 18px -6px rgba(18,32,59,.4); } .band-marker .store.is-primary { background: var(--band-ink); border-color: var(--band-ink); color: var(--marker); } .band-marker .store.is-primary svg, .band-marker .store.is-primary b { color: var(--marker); } .band-marker .store.is-primary small { color: color-mix(in srgb, var(--marker) 76%, transparent); } .band-deep .store.is-primary, .final .store.is-primary { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); } .band-deep .store.is-primary svg, .band-deep .store.is-primary b, .final .store.is-primary svg, .final .store.is-primary b { color: var(--marker-ink); } .final .store.is-primary small { color: color-mix(in srgb, var(--marker-ink) 72%, transparent); } /* The savings link steps back so the hero holds one loud target, not four. */ .hero-aside { margin-block-start: 16px; font-size: 15.5px; } /* The only thing in its paragraph, so the in-a-sentence exemption does not apply and the 21px line box has to grow to clear 24px. */ .hero-aside a { color: var(--ink2); text-underline-offset: 4px; display: inline-block; padding-block: 3px; } .hero-aside a:hover { color: var(--ink); } /* The header keeps a way to download at every width; it used to vanish under 400px, leaving no download target between the hero and y=6295. */ @media (max-width: 400px) { .top .tools .btn-sm { display: inline-flex; padding-inline: 12px; font-size: 13.5px; } .wordmark .name { display: none; } } /* On a phone the row was four targets of four different widths. */ @media (max-width: 560px) { .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .store { padding-inline: 12px; } .store small { font-size: 11px; } .store b { font-size: 14px; } .final .stores, .band-marker .stores { grid-template-columns: minmax(0, 1fr); } } /* ================================================================ composition The page was eight centred stacks, and the two split bands pushed their halves apart instead of holding them together. */ /* A short text column centred against a 700px phone left ~200px dead above and below. Anchor both to the top and let the eyebrow line up with the phone's upper third. */ @media (min-width: 981px) { .split { align-items: start; gap: clamp(24px, 3vw, 48px); grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } .split > div:not(.shot) { padding-block-start: 46px; } .shot { width: min(276px, 100%); } #how, #pay { padding-block: 68px; } } /* Two of the three cells were bottom-heavy with ~113px of white beneath them. */ .money .units { align-items: center; } .money .unit { display: grid; align-content: center; } .money .unit + .unit::before { inset-block: 30px; } /* The three tickets ran to different heights, so their captions started on three different baselines — the detail that separates considered from templated. */ #wallet .grid.g3 > div { display: flex; flex-direction: column; } #wallet .ticket { margin-block-end: auto; } #wallet .ticket .bal { margin-block-start: 10px; } #wallet .ticket:not(:has(.bal))::after { content: none; } /* Stacked on a phone every caption sat above the card it did not describe. */ @media (max-width: 980px) { #wallet .grid.g3 > div { display: flex; flex-direction: column; } #wallet .grid.g3 > div h3 { order: 1; margin-block: 0 10px !important; } #wallet .grid.g3 > div .ticket { order: 2; } #wallet .grid.g3 > div p { order: 3; margin-block-start: 14px; } } /* The word was timid inside a full-bleed band, and the three points landed at three unrelated x positions across 1120px. */ .band-marker .word { font-size: clamp(64px, 13vw, 150px); } .band-marker .free-grid { max-width: 760px; margin-inline: auto; } /* ================================================================ type Secular One ships one weight, so hierarchy has to come from size, tracking and colour. The ladder had a hole between 23px and 52px: everything was either small text or a poster. */ .head h2 { font-size: clamp(28px, 3.8vw, 44px); } .hero h1 { font-size: clamp(44px, 9vw, 70px); letter-spacing: -.04em; } .band-marker .word, .money .figure b { letter-spacing: -.038em; } h3 { font-size: clamp(19px, 2.2vw, 22px); } .bullets b { font-size: 17px; } /* ================================================================ colour Green is the product's "still valid" signal. Spending it on decorative ticks diluted the meaning and added a hue the brand does not own. */ .bullets .tick { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } .free-grid svg { color: var(--band-ink, var(--ink)); } .band-deep .bullets .tick { background: rgba(255,255,255,.12); color: var(--deep-ink); } /* #how promises a sequence and delivered three identical ticks. */ #how .bullets { counter-reset: step; } #how .bullets li { counter-increment: step; } #how .bullets .tick { background: none; width: auto; height: auto; } #how .bullets .tick svg { display: none; } #how .bullets .tick::before { content: counter(step); font-family: var(--display); font-size: 26px; line-height: 1; color: var(--marker); display: block; min-width: 26px; text-align: center; } /* ================================================================ motion One reveal, 550ms, on eleven blocks, with the two properties on different curves so they visibly desynced. */ .js .rise { opacity: 0; transform: translateY(10px); transition: opacity .38s cubic-bezier(.22, 1, .36, 1), transform .38s cubic-bezier(.22, 1, .36, 1); } .hero .rise, .hero.rise { opacity: 1; transform: none; transition: none; } #wallet .grid.g3 > div:nth-child(2) { transition-delay: .06s; } #wallet .grid.g3 > div:nth-child(3) { transition-delay: .12s; } /* The best asset on the page was inert. */ .ticket { transition: transform .18s ease-out, box-shadow .18s ease-out; } .ticket:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(18,32,59,.06), 0 18px 36px -16px rgba(18,32,59,.3); } /* The ambient washes were shapeless filler with no relation to the composition. */ .hero::before { opacity: .5; } .shot::before { opacity: .55; } /* -- a head that uses the width it occupies ------------------------------- */ /* Stacked, the heading stopped at 660px and left ~460px of the row empty. */ @media (min-width: 981px) { .head-wide { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: end; } .head-wide .eyebrow { grid-column: 1 / -1; } .head-wide h2 { margin: 0; } .head-wide .lead { margin-block-start: 0; max-width: none; } } /* -- promoted from repeated inline styles -------------------------------- */ .ticket-note { color: var(--ink2); font-size: 15.5px; } .ticket-title { margin-block: 22px 8px; } /* ================================================================ centred copy Section headers and standalone prose sit on the page's centre line. Bullet lists stay start-aligned: a centred list has a ragged left edge on every line and the eye loses the return point. */ .head { max-width: 720px; margin-inline: auto; text-align: center; } .head .lead { margin-inline: auto; } /* In the split bands the words sit beside a phone, so the column centres on itself rather than on the page. */ .split > div:not(.shot) { text-align: center; } .split > div:not(.shot) .lead { margin-inline: auto; } .split .bullets { text-align: start; max-width: 44ch; margin-inline: auto; } .split .bullets li { text-align: start; } /* The wallet captions under each ticket. */ #wallet .grid.g3 > div h3, #wallet .grid.g3 > div p { text-align: center; } /* The head-wide two-column arrangement is retired. */ .head-wide { max-width: 720px; display: block; } /* The hero column centres on itself too, or it is the one right-aligned block on an otherwise centred page. */ .hero-grid > div:not(.shot) { text-align: center; } .hero-grid .lead { margin-inline: auto; } .hero-grid .assure { justify-content: center; } .hero-grid .stores { justify-content: center; } .hero h1 { margin-inline: auto; } /* A single long sentence should not run the full container width. */ .money-note { max-width: 64ch; margin-inline: auto; } /* The second line is a promise, not a footnote — it must not read as fine print beside the attribution it shares a block with. */ .money-note b { display: inline-block; margin-block-start: 6px; color: var(--ink); font-size: 15.5px; } .free-note { max-width: 62ch; } /* Stacked, the three wallet items ran into each other: a caption ended and the next heading began 12px later, so they read as one block. */ @media (max-width: 980px) { #wallet .grid.g3 { gap: 38px; } #wallet .grid.g3 > div p { max-width: 42ch; margin-inline: auto; } }