/* GENERATED by scripts/sync-design-system.mjs — do not edit by hand. Source: design/ (Claude Design project 90ac63ba). Edit there, then re-run. */ /* ========================================================================== tokens/fonts.css ========================================================================== */ /* Archivo (display + numerals) via Google Fonts. SUBSTITUTION: no font binaries were supplied with the brief; Archivo is loaded from Google's CDN. Swap for self-hosted files before production if the site must be fully self-contained. */ /* Self-hosted, latin + latin-ext subsets. Substituted for the design system's Google Fonts @import by scripts/sync-design-system.mjs — production makes no third-party requests. Licence: /assets/fonts/OFL.txt (SIL OFL 1.1). */ @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji'; --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; } /* ========================================================================== tokens/colors.css ========================================================================== */ :root{ /* Base palette — light */ --blue-900:#012169; /* Union blue */ --blue-700:#0B3A9E; --blue-100:#E4EAF6; --red-600:#C8102E; /* Union red */ --red-100:#F8E3E6; --gold-400:#F0C14B; /* achievement / progress */ --gold-100:#FBF0D6; --paper:#F7F6F3; --white:#FFFFFF; --ink:#12161C; --muted:#4E5560; --hairline:#E1DFD9; --green-600:#1E7A45; /* pass */ --green-100:#E2F1E8; /* Semantic aliases — light theme is the default */ --surface-page:var(--paper); --surface-card:var(--white); --surface-sunken:#EFEDE8; --surface-brand:var(--blue-900); --surface-accent-soft:var(--blue-100); --surface-gold-soft:var(--gold-100); --text-body:var(--ink); --text-muted:var(--muted); --text-brand:var(--blue-900); --text-accent:var(--red-600); --text-on-brand:#FFFFFF; --text-on-gold:#3A2B06; --border-hairline:var(--hairline); --border-strong:#C9C5BB; --border-brand:var(--blue-900); --brand-primary:var(--blue-900); --brand-accent:var(--red-600); --brand-gold:var(--gold-400); --state-pass:var(--green-600); --state-pass-soft:var(--green-100); --state-fail:var(--red-600); --state-fail-soft:var(--red-100); --focus-ring:var(--red-600); --focus-ring-offset:var(--surface-page); /* Guilloche / engraving hairline texture colour */ --engrave-line:rgba(1,33,105,.10); } @media (prefers-color-scheme:dark){ :root{ --blue-900:#6E93E8; --blue-700:#8FAEF0; --blue-100:#1B2A4A; --red-600:#FF6B6B; --red-100:#3A1D22; --gold-400:#F0C14B; --gold-100:#332A12; --paper:#0A1020; --white:#111A2E; --ink:#E9EDF5; --muted:#9BA8BF; --hairline:#1E2A44; --green-600:#4CC38A; --green-100:#13301F; --surface-sunken:#0D1526; --surface-page:#0A1020; --surface-card:#111A2E; --surface-brand:#0F1B33; --text-on-brand:#E9EDF5; --border-strong:#2C3B5C; --engrave-line:rgba(110,147,232,.14); } } /* Forced themes — add data-theme="dark" | "light" on to override the media query */ [data-theme=dark]{ --blue-900:#6E93E8;--blue-700:#8FAEF0;--blue-100:#1B2A4A;--red-600:#FF6B6B;--red-100:#3A1D22; --gold-400:#F0C14B;--gold-100:#332A12;--paper:#0A1020;--white:#111A2E;--ink:#E9EDF5;--muted:#9BA8BF; --hairline:#1E2A44;--green-600:#4CC38A;--green-100:#13301F;--surface-sunken:#0D1526; --surface-page:#0A1020;--surface-card:#111A2E;--surface-brand:#0F1B33;--text-on-brand:#E9EDF5; --border-strong:#2C3B5C;--engrave-line:rgba(110,147,232,.14); } [data-theme=light]{ --blue-900:#012169;--blue-700:#0B3A9E;--blue-100:#E4EAF6;--red-600:#C8102E;--red-100:#F8E3E6; --gold-400:#F0C14B;--gold-100:#FBF0D6;--paper:#F7F6F3;--white:#FFFFFF;--ink:#12161C;--muted:#4E5560; --hairline:#E1DFD9;--green-600:#1E7A45;--green-100:#E2F1E8;--surface-sunken:#EFEDE8; --surface-page:#F7F6F3;--surface-card:#FFFFFF;--surface-brand:#012169;--text-on-brand:#FFFFFF; --border-strong:#C9C5BB;--engrave-line:rgba(1,33,105,.10); } /* ========================================================================== tokens/typography.css ========================================================================== */ :root{ /* Sizes — mobile-first; --step-* are the fluid display sizes */ --text-caption:12px; --text-small:14px; --text-body-size:16px; --text-lead:18px; --text-h4:20px; --text-h3:24px; --text-h2:clamp(26px,4vw,34px); --text-h1:clamp(32px,6vw,52px); --text-display:clamp(40px,8vw,72px); --text-numeral:clamp(34px,7vw,60px); --leading-tight:1.06; --leading-heading:1.16; --leading-body:1.6; --leading-loose:1.75; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800; --tracking-display:-0.02em; --tracking-heading:-0.01em; --tracking-body:0; --tracking-caps:0.09em; --numeral-features:"tnum" 1,"lnum" 1; /* @kind other */ } /* Every figure, timer, score and count uses tabular lining numerals. */ .lu-num,[data-num]{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--numeral-features)} .lu-eyebrow{font-family:var(--font-display);font-size:var(--text-caption);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)} /* ========================================================================== tokens/spacing.css ========================================================================== */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --section-y:clamp(48px,9vw,96px); /* @kind spacing */ --gutter:clamp(16px,5vw,32px); /* @kind spacing */ --measure:64ch; --container:1120px; --container-narrow:720px; } /* ========================================================================== tokens/shape.css ========================================================================== */ :root{ --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px; --border-width:1px; --border-thick:2px; /* Shadows are quiet: paper lift, not material elevation */ --shadow-none:none; --shadow-card:0 1px 2px rgba(18,22,28,.05),0 8px 24px -16px rgba(18,22,28,.24); --shadow-raised:0 2px 4px rgba(18,22,28,.06),0 18px 40px -22px rgba(18,22,28,.32); --shadow-press:inset 0 2px 4px rgba(1,33,105,.28); --shadow-focus:0 0 0 3px var(--surface-page),0 0 0 5px var(--focus-ring); /* Perforation divider — dotted, like a tear-off strip */ --perforation:radial-gradient(circle,var(--border-hairline) 1.5px,transparent 1.6px) 0 50%/10px 3px repeat-x; } @media (prefers-color-scheme:dark){ :root{ --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.7); --shadow-raised:0 2px 4px rgba(0,0,0,.5),0 18px 40px -22px rgba(0,0,0,.8); --shadow-press:inset 0 2px 4px rgba(0,0,0,.5); } } /* ========================================================================== tokens/motion.css ========================================================================== */ :root{ --dur-fast:120ms; /* @kind other */ --dur-base:200ms; /* @kind other */ --dur-slow:380ms; /* @kind other */ --dur-rise:520ms; /* @kind other */ --ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */ --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */ --ease-stamp:cubic-bezier(.34,1.4,.64,1); /* @kind other */ --rise-distance:14px; } @keyframes lu-rise{from{opacity:0;transform:translateY(var(--rise-distance))}to{opacity:1;transform:none}} @keyframes lu-ring{from{stroke-dashoffset:var(--ring-length,314)}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ========================================================================== tokens/base.css ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--leading-body);text-wrap:pretty;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);margin:0;color:var(--text-body);text-wrap:balance} p{margin:0} a{color:var(--text-brand);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--text-accent)} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px} img{max-width:100%;display:block} button{font:inherit} /* ========================================================================== site layer — src/assets/site.css ========================================================================== */ /* Site layer. The token layer (design/tokens/*.css, flattened into assets/styles.css by scripts/sync-design-system.mjs) is loaded first and owns every colour, size, radius, shadow and duration used below. These rules are a one-way port of the design kit's inline styles (ui_kits/website/{Chrome,Landing,Policies}.jsx). Where a number appears here it appears there too — if the two disagree, the kit wins. Nothing invents a value that is not already a token. */ /* ------------------------------------------------------------------ layout */ .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; } .section > .wrap { padding-block: var(--section-y); } .section--sunken { background: var(--surface-sunken); } .section--brand { background: var(--surface-brand); } .section--brand, .section--brand h2, .section--brand h3 { color: var(--text-on-brand); } .section--brand .sec-head__lead { color: color-mix(in srgb, var(--text-on-brand) 80%, transparent); } .stack { display: grid; gap: var(--space-8); } .grid-auto { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-auto--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-auto--narrow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* Clipped rather than pushed off-screen. The usual `inset-inline-start:-9999px` trick flips to the RIGHT under dir="rtl" and drags the document's scroll width out with it, so Urdu got a horizontal scrollbar and clipped content. */ .skip-link { position: absolute; top: 0; inset-inline-start: 8px; z-index: 50; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--surface-card); color: var(--text-brand); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); } .skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; top: 8px; } .ic--inline { display: inline-block; vertical-align: -2px; margin-inline-start: 6px; } /* ---------------------------------------------------------------- masthead */ .masthead { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface-page) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-end: 1px solid var(--border-hairline); } .masthead__inner { max-width: var(--container); margin-inline: auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: var(--space-4); } .masthead__actions { margin-inline-start: auto; display: flex; gap: var(--space-2); align-items: center; } /* Scoped to beat `.btn { display: inline-flex }`, which is declared later in this file and would otherwise win on equal specificity — putting the desktop CTA back into the mobile masthead and squeezing the wordmark onto three lines. The matching reveal at 900px is scoped the same way. */ .masthead__actions .masthead__cta { display: none; } .wordmark__text { white-space: nowrap; } .wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-body); } .wordmark__mark { object-fit: contain; border-radius: 7px; } .wordmark__text { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 17px; letter-spacing: -0.01em; line-height: 1.1; } .wordmark--lg .wordmark__text { font-size: 19px; } .site-nav { display: none; margin-inline-start: auto; gap: var(--space-5); } .site-nav a { font-size: 15px; font-weight: var(--weight-medium); text-decoration: none; color: var(--text-body); } .site-nav a:hover { color: var(--text-accent); } /* ------------------------------------------------------------------ drawer */ /* overflow:hidden is load-bearing, not tidiness: the closed panel sits at translateX(±100%), and without clipping it contributes its own width to the document's scroll width — a 340px phantom scrollbar on every page. */ .drawer { position: fixed; inset: 0; z-index: 40; visibility: hidden; overflow: hidden; } .drawer[data-open] { visibility: visible; } .drawer__scrim { position: absolute; inset: 0; background: rgba(10, 16, 32, .5); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .drawer[data-open] .drawer__scrim { opacity: 1; } .drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 340px); background: var(--surface-page); border-inline-start: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); } [dir=rtl] .drawer__panel { transform: translateX(-100%); } .drawer[data-open] .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .drawer__nav { display: grid; margin-block-start: var(--space-4); } .drawer__nav a { display: flex; align-items: center; padding: 14px 4px; text-decoration: none; color: var(--text-body); font-weight: var(--weight-medium); border-block-end: 1px solid var(--border-hairline); } .drawer__chev { margin-inline-start: auto; color: var(--border-strong); } [dir=rtl] .drawer__chev { transform: scaleX(-1); } .drawer__foot { margin-block-start: auto; } /* ------------------------------------------------------------------ button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -0.005em; border-radius: var(--radius-md); border: var(--border-width) solid transparent; cursor: pointer; text-decoration: none; text-align: center; transition: transform var(--dur-fast) var(--ease-stamp), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .btn:active { transform: translateY(1px) scale(.985); } .btn--sm { font-size: var(--text-small); padding: 8px 14px; min-height: 36px; } .btn--md { font-size: var(--text-body-size); padding: 12px 20px; min-height: 44px; } .btn--lg { font-size: var(--text-lead); padding: 16px 28px; min-height: 52px; } .btn--block { width: 100%; } .btn--primary { background: var(--brand-primary); color: var(--text-on-brand); box-shadow: var(--shadow-card); } .btn--primary:hover { color: var(--text-on-brand); background: var(--blue-700); } .btn--primary:active { box-shadow: var(--shadow-press); } .btn--accent { background: var(--brand-accent); color: #fff; box-shadow: var(--shadow-card); } .btn--accent:hover { color: #fff; } .btn--secondary { background: var(--surface-card); color: var(--text-brand); border-color: var(--border-brand); } .btn--ghost { background: transparent; color: var(--text-brand); } .icon-btn { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-brand); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out); } .icon-btn:hover { background: var(--surface-accent-soft); } /* -------------------------------------------------------------------- card */ .card { position: relative; overflow: hidden; isolation: isolate; } .card--r-lg { border-radius: var(--radius-lg); } .card--r-md { border-radius: var(--radius-md); } .card--r-sm { border-radius: var(--radius-sm); } .card--p-none { padding: 0; } .card--p-sm { padding: var(--space-4); } .card--p-md { padding: var(--space-6); } .card--p-lg { padding: var(--space-8); } .card--paper { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-hairline); } .card--brand { background: var(--surface-brand); color: var(--text-on-brand); border: 1px solid transparent; } .card--soft { background: var(--surface-accent-soft); color: var(--text-body); border: 1px solid transparent; } .card--gold { background: var(--surface-gold-soft); color: var(--text-body); border: 1px solid var(--brand-gold); } .card--elevated { box-shadow: var(--shadow-card); } .card__engrave { position: absolute; inset: 0; pointer-events: none; opacity: .9; z-index: -1; background: repeating-linear-gradient(115deg, var(--engrave-line) 0 1px, transparent 1px 7px); -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%); } .card--brand .card__engrave { background: repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 1px, transparent 1px 7px); } /* ------------------------------------------------------------------- badge */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid transparent; width: fit-content; } .badge--brand { background: var(--surface-accent-soft); color: var(--text-brand); border-color: color-mix(in srgb, var(--brand-primary) 22%, transparent); } .badge--neutral { background: var(--surface-card); color: var(--text-muted); border-color: var(--border-hairline); } .badge--pass { background: var(--state-pass-soft); color: var(--state-pass); border-color: color-mix(in srgb, var(--state-pass) 30%, transparent); } .badge--gold { background: var(--surface-gold-soft); color: var(--text-on-gold); border-color: var(--brand-gold); } /* ----------------------------------------------------------------- divider */ .divider { border: 0; height: 1px; background: var(--border-hairline); margin: 0; } .divider--perf { height: 3px; background: var(--perforation); } /* --------------------------------------------------------- section heading */ .sec-head { display: grid; gap: var(--space-3); max-width: var(--measure); } .sec-head__title { font-size: var(--text-h2); font-weight: var(--weight-black); letter-spacing: var(--tracking-display); } .sec-head__lead { font-size: var(--text-lead); color: var(--text-muted); } /* -------------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; } .hero__engrave { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, var(--engrave-line) 0 1px, transparent 1px 8px); -webkit-mask-image: radial-gradient(90% 70% at 80% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 70% at 80% 0%, #000, transparent 70%); } .hero__inner { position: relative; max-width: var(--container); margin-inline: auto; padding: var(--section-y) var(--gutter); display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); } /* 38ch, not the kit's 32ch: the kit's StoreBadge is a placeholder slot, while the real Apple and Google badges need ~410px to sit side by side as designed. Any narrower and they stack, which reads as two competing CTAs. */ .hero__copy { display: grid; gap: var(--space-5); align-content: center; max-width: 38ch; } .hero__title { font-size: var(--text-h1); font-weight: var(--weight-black); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); } .hero__lead { font-size: var(--text-lead); color: var(--text-muted); max-width: 46ch; } .hero__note { font-size: var(--text-small); color: var(--text-muted); } .hero__shots { display: flex; gap: var(--space-4); overflow-x: auto; padding-block-end: 4px; scrollbar-width: thin; } /* ---------------------------------------------------------- number/explain */ .figure-card { display: grid; gap: 4px; } .figure-card__n { font-family: var(--font-display); font-size: 44px; font-weight: var(--weight-black); color: var(--text-brand); line-height: 1; } .figure-card__l { color: var(--text-muted); } /* ------------------------------------------------------------------- stats */ .stat { display: grid; gap: var(--space-2); } .stat__value { font-family: var(--font-display); font-size: var(--text-numeral); font-weight: var(--weight-black); line-height: 1; letter-spacing: var(--tracking-display); color: var(--text-on-brand); } .stat--gold .stat__value { color: var(--brand-gold); } .stat__label { font-size: var(--text-small); color: color-mix(in srgb, var(--text-on-brand) 78%, transparent); } /* ------------------------------------------------------------------- modes */ .mode { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .mode__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-accent-soft); color: var(--text-brand); } .mode__title { font-size: var(--text-h4); font-weight: var(--weight-bold); } .mode__desc { color: var(--text-muted); } .mode__meta { font-size: var(--text-small); color: var(--text-brand); font-weight: var(--weight-semibold); } /* --------------------------------------------------------------------- faq */ .faq { border-block-end: 1px solid var(--border-hairline); } .faq__q { display: flex; align-items: center; gap: var(--space-4); cursor: pointer; list-style: none; padding: var(--space-5) 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h4); } .faq__q::-webkit-details-marker { display: none; } .faq__chev { margin-inline-start: auto; flex: none; color: var(--text-brand); transition: transform var(--dur-base) var(--ease-out); } .faq[open] .faq__chev { transform: rotate(180deg); } .faq__a { padding-block-end: var(--space-5); color: var(--text-muted); max-width: var(--measure); display: grid; gap: var(--space-3); } /* ------------------------------------------------------------------- chips */ .chip { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-hairline); text-decoration: none; color: var(--text-body); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } a.chip:hover { border-color: var(--border-brand); transform: translateY(-1px); color: var(--text-body); } .chip--current { border-color: var(--border-brand); background: var(--surface-accent-soft); } .chip__native { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lead); } .chip__name { font-size: var(--text-small); color: var(--text-muted); } /* ------------------------------------------------------------ store badges */ .stores { display: flex; gap: var(--space-3); flex-wrap: wrap; } .store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); text-decoration: none; border: 1px solid var(--ink); box-shadow: var(--shadow-card); transition: transform var(--dur-fast) var(--ease-stamp); } .store:hover { color: var(--paper); transform: translateY(-1px); } .store:active { transform: translateY(1px) scale(.985); } .store__glyph { flex: none; } .store__text { display: grid; line-height: 1.15; } .store__sub { font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .8; } .store__name { font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-bold); } .section--brand .store { background: var(--paper); color: var(--ink); border-color: var(--paper); } .section--brand .store:hover { color: var(--ink); } /* ------------------------------------------------------------ phone frames */ .phone { margin: 0; display: grid; gap: var(--space-3); flex: none; width: var(--phone-w); } .phone__body { position: relative; border-radius: 26px; padding: 7px; background: var(--ink); box-shadow: var(--shadow-raised); transform: rotate(var(--phone-tilt)); } /* 1206 × 2622 is the real capture size of the shipped screenshots (scripts/import-screenshots.sh). Reserving the exact ratio means the hero does not reflow when the images decode. */ /* `height: auto` is required, not tidiness. The width/height attributes on the are presentational hints that map to CSS width/height, so without this the attribute height (1044px) beats aspect-ratio and every screenshot renders as a tall vertical smear. */ .phone__shot, .phone__slot { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 20px; background: var(--surface-sunken); object-fit: cover; } .phone__slot { background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 10px, var(--surface-card) 10px 20px); } .phone__cap { font-size: var(--text-caption); color: var(--text-muted); line-height: 1.4; } /* ----------------------------------------------------------- question card */ .qc { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); } .qc__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); } .qc__chapter { font-family: var(--font-display); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); } .qc__counter { font-size: var(--text-caption); color: var(--text-muted); } .qc__history { font-size: var(--text-caption); color: var(--text-muted); } .qc__q { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h4); } .qc__q-t { color: var(--text-muted); font-size: var(--text-small); } .qc__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .qc__opt { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); background: var(--surface-page); } .qc__opt.is-right { border-color: var(--state-pass); background: var(--state-pass-soft); } .qc__opt.is-wrong { border-color: var(--state-fail); background: var(--state-fail-soft); } .qc__opt.is-sel { border-color: var(--border-brand); } .qc__marker { flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill); display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; font-weight: var(--weight-bold); background: var(--surface-card); border: 1px solid var(--border-hairline); } .qc__opt.is-right .qc__marker { background: var(--state-pass); color: #fff; border-color: var(--state-pass); } .qc__opt.is-wrong .qc__marker { background: var(--state-fail); color: #fff; border-color: var(--state-fail); } .qc__opt-text { display: grid; gap: 1px; } .qc__opt-t { color: var(--text-muted); font-size: var(--text-small); } .qc__exp { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-gold-soft); border: 1px solid var(--brand-gold); color: var(--text-on-gold); font-size: var(--text-small); } .qc__exp-t { opacity: .85; } /* ---------------------------------------------------------- progress bars */ .pbar { display: grid; gap: 6px; } .pbar__row { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; } .pbar__label { font-size: var(--text-small); font-weight: var(--weight-medium); } .pbar__meta { font-size: var(--text-caption); color: var(--text-muted); } .pbar__track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; border: 1px solid var(--border-hairline); } .pbar__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-primary); } .pbar__fill--gold { background: var(--brand-gold); } /* ---------------------------------------------------------- progress ring */ .ring { position: relative; width: var(--ring-size); height: var(--ring-size); flex: none; display: grid; place-items: center; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 10; stroke-linecap: round; } .ring__track { stroke: var(--surface-sunken); } .ring__val { stroke: var(--brand-primary); animation: lu-ring var(--dur-rise) var(--ease-out) both; } .ring--gold .ring__val { stroke: var(--brand-gold); } .ring__mid { position: absolute; display: grid; justify-items: center; gap: 0; } .ring__num { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-black); line-height: 1; } .ring__sub { font-size: var(--text-caption); color: var(--text-muted); } /* -------------------------------------------------------------- stamp seal */ .seal { display: grid; justify-items: center; gap: 0; width: 92px; height: 92px; border-radius: var(--radius-pill); place-content: center; text-align: center; transform: rotate(var(--seal-angle)); font-family: var(--font-display); border: 2px dashed var(--brand-gold); color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 12%, transparent); } .seal__label { font-size: 20px; font-weight: var(--weight-black); letter-spacing: -0.01em; } .seal__sub { font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .9; } /* In the kit the seal is absolutely positioned into the download band's top right. Below 900px there is no room beside the heading, so it returns to the flow above it rather than overlapping the text. */ .seal--float { position: static; margin-inline: auto; } @media (min-width: 900px) { .seal--float { position: absolute; inset-inline-end: 0; top: -18px; margin-inline: 0; } } .stores--center { justify-content: center; } /* ------------------------------------------------------- language switcher */ .langs { position: relative; } .langs__btn { width: auto; padding-inline: 12px; gap: 7px; display: inline-flex; align-items: center; list-style: none; white-space: nowrap; } .langs__btn::-webkit-details-marker { display: none; } .langs__cur { display: none; font-size: var(--text-small); font-weight: var(--weight-semibold); } .langs__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30; min-width: 232px; max-height: 62vh; overflow-y: auto; padding: var(--space-2); display: grid; gap: 1px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); } .langs__item { display: flex; align-items: baseline; gap: var(--space-3); padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-body); } .langs__item:hover { background: var(--surface-accent-soft); color: var(--text-body); } .langs__item.is-current { background: var(--surface-accent-soft); font-weight: var(--weight-semibold); } .langs__en { margin-inline-start: auto; font-size: var(--text-caption); color: var(--text-muted); } /* ------------------------------------------------------------------ footer */ .site-footer { border-block-start: 1px solid var(--border-hairline); background: var(--surface-sunken); } .site-footer > .wrap { padding-block: var(--space-12); display: grid; gap: var(--space-8); } .site-footer__grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .site-footer__tagline { margin-block-start: var(--space-3); color: var(--text-muted); font-size: var(--text-small); max-width: 34ch; } .site-footer h3 { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-block-end: var(--space-3); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .site-footer a { color: var(--text-body); text-decoration: none; font-size: var(--text-small); } .site-footer a:hover { color: var(--text-accent); text-decoration: underline; } .site-footer__disclaimer { font-size: var(--text-small); color: var(--text-body); max-width: 86ch; } .site-footer__source { font-size: var(--text-small); color: var(--text-muted); max-width: 86ch; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; font-size: var(--text-caption); color: var(--text-muted); border-block-start: 1px solid var(--border-hairline); padding-block-start: var(--space-6); } /* --------------------------------------------------------------- documents */ /* Privacy, Terms and Support share this shell — the kit's Doc component. */ .doc { max-width: var(--container-narrow); margin-inline: auto; padding: var(--section-y) var(--gutter); display: grid; gap: var(--space-6); } .doc__head { display: grid; gap: var(--space-3); } .doc__title { font-size: var(--text-h1); font-weight: var(--weight-black); letter-spacing: var(--tracking-display); } .doc__updated { color: var(--text-muted); font-size: var(--text-small); } .doc__lead { font-size: var(--text-lead); color: var(--text-muted); } .doc__body { display: grid; gap: var(--space-6); max-width: var(--measure); } .doc__body h2 { font-size: var(--text-h3); font-weight: var(--weight-bold); margin-block-start: var(--space-4); } .doc__body h3 { font-size: var(--text-h4); font-weight: var(--weight-bold); margin-block-start: var(--space-3); } .doc__body p { margin-block-start: var(--space-3); } .doc__body ul { display: grid; gap: var(--space-2); padding-inline-start: 1.1em; margin-block-start: var(--space-3); } .doc__body section > :first-child { margin-block-start: 0; } .doc__toc { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-hairline); } .doc__toc ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: var(--text-small); } /* The kit's visible TODO block. Nothing shipped uses it — scripts/check.mjs fails the build if one reaches dist/ — but the style stays so that a draft left in a content file is impossible to miss during review. */ .doc__todo { display: flex; gap: var(--space-2); align-items: flex-start; background: var(--surface-gold-soft); border: 1px solid var(--brand-gold); color: var(--text-on-gold); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--text-small); } .doc__todo strong { letter-spacing: .08em; } /* ------------------------------------------------------------ guide tables */ .factlist { display: grid; gap: 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); } .factlist__row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--border-hairline); } .factlist__row:last-child { border-block-end: 0; } .factlist__k { color: var(--text-muted); font-size: var(--text-small); } .factlist__v { font-family: var(--font-display); font-weight: var(--weight-bold); } /* ------------------------------------------------------------------ motion */ [data-rise] { animation: lu-rise var(--dur-rise) var(--ease-out) both; } /* -------------------------------------------------------------- breakpoint */ /* The kit's single breakpoint: burger out, inline nav and store CTA in, hero goes side by side. */ @media (min-width: 900px) { .burger { display: none; } .site-nav { display: flex; } .masthead__actions .masthead__cta { display: inline-flex; } .langs__cur { display: inline; } .hero__inner { grid-template-columns: 1fr 1.05fr; align-items: center; } } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }