/* ============================================================================ TULANI â marketing site. Built on the design-system tokens (css/tokens-entry.css). Every value below resolves to a token; the only literals are the glucose-zone hexes, which the handoff specifies directly for data-viz. ============================================================================ */ /* ---- Site-level aliases the tokens don't carry (web-only surfaces) -------- */ :root { --coral-hover: #A9443F; /* between coral-500 and coral-600 */ --focus-ring: 0 0 0 3px rgba(126,165,165,.55); /* sage, 3px â never removed */ --container: 1180px; --section-y: calc(var(--space-9xl) * 1px); /* 80px */ /* Readability floor: raise body copy from the token's 14px to 16px so no running text sits below 16px. --fs-body-s (12px) is left alone because it only carries eyebrows, labels, disclaimers and the "annual saves" caption — the caption/disclaimer exception the brief allows down to 10–12px. */ --fs-body-m: 16px; /* ---- Colour balance ------------------------------------------------------ Deep teal was carrying nearly every non-paper surface. These two aliases pull the tinted surfaces over to the palette's light blue and give the closing band the coral the tokens already sanction, so the teal is spent on the structural moments (nav, footer, Premier card) instead of everywhere. Both point at real tokens — change them here to retune the whole site. */ --tint-surface: var(--blue-100); /* was --surface-tint (teal-50) */ --tint-border: var(--blue-200); --band-accent: var(--background-tertiary); /* coral-500 — a token-sanctioned bg */ /* glucose zones (from the handoff data-viz table) */ --z-low: #364B7B; --z-slightly-low: #5E73A5; --z-in-range: #55976B; --z-slightly-high: #E4874B; --z-high: #B96630; } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Form controls don't inherit font-family by default — force them to, so Montserrat is the only typeface anywhere, including buttons and inputs. */ button, input, select, textarea, optgroup { font-family: inherit; } /* The paper lives on so the texture layer below can sit on top of it while still staying behind every section. */ html { background: var(--background-primary); } body { margin: 0; background: transparent; color: var(--content-primary); font-family: var(--font-brand); -webkit-font-smoothing: antialiased; } /* Brand texture wash. Deliberately faint — it should read as grain, not pattern, and must never cut into the contrast of small text sitting over it. Sits behind all content, so the deep-teal bands paint straight over it. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("../img/texture/Brand_Texture_Dark.svg") center / cover no-repeat; opacity: .02; } img, svg { max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } /* ---- Layout --------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: calc(var(--space-2xl) * 1px); } .section { padding-block: var(--section-y); } .section-sm { padding-block: calc(var(--space-7xl) * 1px); } /* The billing switcher controls the cards directly beneath it, so the two sections close up into one block rather than reading as separate bands. Leaves 32px, enough for the tier badge that overhangs the card top. */ .section.is-flush-b { padding-bottom: 0; } .section-sm.is-flush-t { padding-top: calc(var(--space-3xl) * 1px); } .stack-s > * + * { margin-top: calc(var(--space-s) * 1px); } .stack-m > * + * { margin-top: calc(var(--space-l) * 1px); } .stack-l > * + * { margin-top: calc(var(--space-2xl) * 1px); } .stack-xl > * + * { margin-top: calc(var(--space-4xl) * 1px); } .grid { display: grid; gap: calc(var(--space-2xl) * 1px); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .measure { max-width: 62ch; } .measure-wide { max-width: 78ch; } .center { text-align: center; margin-inline: auto; } /* Even out line breaks so a heading/lead never drops a single word onto its own line (widows). balance distributes words across lines evenly. */ .balance { text-wrap: balance; } /* ---- Eyebrow (the one uppercase exception) -------------------------------- */ .eyebrow { font: var(--w-bold) var(--fs-body-s) / 1 var(--font-brand); letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin: 0 0 calc(var(--space-m) * 1px); } .on-dark .eyebrow { color: var(--content-secondary-inverse); } /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--space-s) * 1px); font: var(--w-medium) var(--fs-body-l) / 1 var(--font-brand); padding: 16px 28px; border-radius: var(--r-md); border: 1.5px solid transparent; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft); } .btn:active { box-shadow: var(--shadow-pressed); transform: none; } /* primary = coral. Exactly one per view. */ .btn-primary { background: var(--surface-cta); color: var(--content-primary-inverse); } .btn-primary:hover { background: var(--coral-hover); transform: translateY(-1px); } /* secondary = teal outline */ .btn-secondary { background: transparent; color: var(--content-primary); border-color: var(--teal-300); } .btn-secondary:hover { background: var(--teal-50); border-color: var(--teal); transform: translateY(-1px); } /* on a deep-teal surface */ .btn-on-teal { background: rgba(255,255,255,.08); color: var(--content-primary-inverse); border-color: rgba(255,255,255,.38); } .btn-on-teal:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); } .btn-inverse { background: var(--surface-primary-inverse); color: var(--content-primary); } .btn-inverse:hover { background: #fff; transform: translateY(-1px); } /* ---- Cards ---------------------------------------------------------------- */ /* white surface on paper, soft teal-tinted shadow, no border, no accent bar */ .card { background: var(--surface); border-radius: 22px; box-shadow: 0 8px 24px rgba(0,67,67,.08); padding: calc(var(--space-3xl) * 1px); transition: box-shadow var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft); } .card-hover:hover { box-shadow: 0 14px 34px rgba(0,67,67,.12); transform: translateY(-2px); } .card-tint { background: var(--tint-surface); box-shadow: none; } /* ---- Bands ---------------------------------------------------------------- */ .band-dark { background: var(--surface-primary); color: var(--content-primary-inverse); } /* Coral closing band. Uses --background-tertiary (coral-500), which the tokens already define as a background. The one-coral-CTA-per-view rule still holds: this is a surface, and the buttons sitting on it are white, not coral. */ .band-accent { background: var(--band-accent); color: var(--content-primary-inverse); } /* .on-dark resolves .text-soft to teal-200, which lands at 2.2:1 on coral — both a colour clash and an AA failure. Coral is dark enough that nothing softer than the inverse passes 4.5:1 (coral-100 only reaches 3.7:1), so on this band the secondary copy gives up its tint and keeps the contrast. Needs .on-dark in the selector to outrank `.on-dark .text-soft` below. */ .band-accent.on-dark .text-soft { color: var(--content-primary-inverse); } /* the .t-* classes hard-code a teal color â neutralise inside dark bands */ .on-dark [class^="t-"], .on-dark [class*=" t-"] { color: inherit; } .on-dark .text-soft { color: var(--content-secondary-inverse); } .band-tint { background: var(--tint-surface); } .text-soft { color: var(--content-secondary); } /* ---- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: calc(var(--space-l) * 1px); z-index: 50; padding-top: calc(var(--space-l) * 1px); } .nav-pill { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-2xl) * 1px); background: var(--surface-primary); border-radius: var(--r-xl); box-shadow: var(--shadow-nav); padding: 12px 12px 12px 26px; color: var(--content-primary-inverse); } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 30px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: calc(var(--space-xs) * 1px); } .nav-link { font: var(--w-medium) var(--fs-body-m) / 1 var(--font-brand); color: var(--content-primary-inverse); padding: 10px 16px; border-radius: var(--r-pill); opacity: .82; transition: opacity var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft); } .nav-link:hover { opacity: 1; background: rgba(255,255,255,.10); } .nav-link.is-active { opacity: 1; background: rgba(255,255,255,.14); } .nav-cta { padding: 12px 22px; font-size: var(--fs-body-m); } .nav-toggle { display: none; } /* ---- Footer --------------------------------------------------------------- */ /* No margin above the footer — it should butt directly against the section above it, so the paper background never shows through as an awkward band. */ .site-footer { background: var(--surface-primary); color: var(--content-primary-inverse); margin-top: 0; } /* Last column is as wide as the first so the "Consumer Health Data Privacy Policy" legal link sits on one line instead of wrapping. */ .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.6fr; gap: calc(var(--space-4xl) * 1px); } .footer-logo img { height: 34px; width: auto; } .footer-head { font: var(--w-bold) var(--fs-body-s) / 1 var(--font-brand); letter-spacing: .12em; text-transform: uppercase; color: var(--content-secondary-inverse); margin: 0 0 calc(var(--space-l) * 1px); } .footer-link { display: block; font: var(--w-book) var(--fs-body-m) / 1.9 var(--font-brand); color: var(--content-primary-inverse); opacity: .78; transition: opacity var(--dur-fast) var(--ease-soft); } .footer-link:hover { opacity: 1; } .footer-base { border-top: 1px solid rgba(255,255,255,.14); margin-top: calc(var(--space-6xl) * 1px); padding-top: calc(var(--space-2xl) * 1px); display: flex; justify-content: space-between; gap: calc(var(--space-l) * 1px); flex-wrap: wrap; } .footer-fine { font: var(--w-book) var(--fs-body-s) / 1.5 var(--font-brand); color: var(--content-secondary-inverse); margin: 0; } /* ---- Legal / policy pages ------------------------------------------------- */ .legal { max-width: 74ch; margin-inline: auto; } .legal-meta { font: var(--w-book) var(--fs-body-s) / 1.5 var(--font-brand); color: var(--content-secondary); margin: calc(var(--space-s) * 1px) 0 0; } .legal-rule { border: 0; border-top: 1px solid var(--border-emphasis); margin: calc(var(--space-2xl) * 1px) 0; } .legal-body > *:first-child { margin-top: 0; } .legal-body h2 { font: var(--w-medium) var(--fs-heading-m) / 1.25 var(--font-brand); letter-spacing: var(--ls-tight); color: var(--content-primary); margin: calc(var(--space-3xl) * 1px) 0 calc(var(--space-m) * 1px); } .legal-body h3 { font: var(--w-medium) var(--fs-heading-s) / 1.3 var(--font-brand); color: var(--content-primary); margin: calc(var(--space-2xl) * 1px) 0 calc(var(--space-s) * 1px); } .legal-body p { font: var(--w-book) var(--fs-body-m) / 1.6 var(--font-brand); color: var(--content-primary); margin: 0 0 calc(var(--space-m) * 1px); } .legal-body ul { margin: 0 0 calc(var(--space-m) * 1px); padding-left: 1.4em; } .legal-body li { font: var(--w-book) var(--fs-body-m) / 1.6 var(--font-brand); color: var(--content-primary); margin: 0 0 calc(var(--space-2xs) * 1px); } .legal-body li::marker { color: var(--content-secondary); } .legal-body a { color: var(--coral); text-decoration: underline; } .legal-body a:hover { color: var(--coral-hover); } .legal-body strong { font-weight: var(--w-bold); } .legal-body .table-wrap { overflow-x: auto; margin: 0 0 calc(var(--space-l) * 1px); } .legal-body table { width: 100%; border-collapse: collapse; } .legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: calc(var(--space-s) * 1px); border-bottom: 1px solid var(--border-emphasis); font: var(--w-book) var(--fs-body-s) / 1.5 var(--font-brand); color: var(--content-primary); } .legal-body th { font-weight: var(--w-medium); } .legal-body code { font-family: var(--font-brand); background: var(--tint-surface); padding: .08em .35em; border-radius: 4px; font-size: .95em; } .legal-body table code { background: none; padding: 0; } /* ---- Placeholders (no imagery supplied) ----------------------------------- */ .placeholder { border-radius: 22px; min-height: 280px; display: grid; place-items: center; padding: calc(var(--space-2xl) * 1px); text-align: center; background: repeating-linear-gradient(135deg, var(--teal-50) 0 10px, var(--background-primary) 10px 20px); color: var(--sage); font: 400 var(--fs-body-s) / 1.5 var(--font-mono); } .on-dark .placeholder { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, rgba(255,255,255,.02) 10px 20px); color: var(--content-secondary-inverse); } /* ---- Device frame --------------------------------------------------------- Holds a real exported app screen (img/app/). Two kinds of art go in here: a whole screen, which sets its own --screen-ratio and fills the viewport, and a tall scrolling page, which gets cropped and faded via .is-scroll. */ .device { width: 340px; margin-inline: auto; padding: 12px; border-radius: 54px; background: linear-gradient(160deg, #17403f, #06201f 55%, #0d3130); box-shadow: 0 32px 70px rgba(0,40,40,.30), 0 4px 14px rgba(0,40,40,.18), inset 0 0 0 1.5px rgba(255,255,255,.10); position: relative; } .device-screen { position: relative; border-radius: 43px; overflow: hidden; background: var(--background-primary); aspect-ratio: var(--screen-ratio, 316 / 664); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); } .device-screen img { display: block; width: 100%; height: auto; } /* Fill the screen box exactly. The box's aspect-ratio equals the SVG's, so height:100% can't distort it — and it stops Safari from letterboxing the inline SVG (which left dead space at the top and rode the footer low). */ .device-screen > svg { display: block; width: 100%; height: 100%; } /* Scrolling art is taller than the viewport it sits in; fade the cut so it reads as "scrolls further" rather than as a hard crop. */ .device-screen.is-scroll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; pointer-events: none; background: linear-gradient(to bottom, rgba(247,247,246,0), var(--background-primary)); } /* speaker / island cutout */ .device::after { content: ""; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; border-radius: var(--r-pill); background: #06201f; z-index: 2; } /* side buttons */ .device-btn { position: absolute; width: 3px; background: #0a2726; border-radius: 2px; } .device-btn.b1 { left: -3px; top: 132px; height: 32px; } .device-btn.b2 { left: -3px; top: 180px; height: 58px; } .device-btn.b3 { left: -3px; top: 250px; height: 58px; } .device-btn.b4 { right: -3px; top: 196px; height: 88px; } @media (max-width: 400px) { .device { width: 100%; max-width: 340px; } } /* ---- Photography ---------------------------------------------------------- */ .photo { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-frame { border-radius: 22px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,67,67,.12); background: var(--teal-50); } .photo-frame.tall { aspect-ratio: 4 / 5; } .photo-frame.wide { aspect-ratio: 3 / 2; } .photo-frame.square { aspect-ratio: 1 / 1; } /* photo sitting inside a card, above the copy */ .card-photo { margin: calc(var(--space-3xl) * -1px) calc(var(--space-3xl) * -1px) calc(var(--space-xl) * 1px); border-radius: 22px 22px 0 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--teal-50); } /* ---- Stat figures --------------------------------------------------------- */ .stat-value { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; font-size: 40px; line-height: 1; color: var(--teal); } .on-dark .stat-value { color: var(--content-primary-inverse); } /* ---- Legend (glucose zones) ----------------------------------------------- */ .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; } .legend span { display: flex; align-items: center; gap: 6px; font: 400 var(--fs-caption) / 1 var(--font-brand); color: var(--content-secondary); } .legend i { width: 9px; height: 9px; border-radius: 50%; } /* ---- Numbered steps ------------------------------------------------------- */ .step-num { width: 44px; height: 44px; flex: none; border-radius: var(--r-pill); background: var(--tint-surface); color: var(--teal); display: grid; place-items: center; font: var(--w-medium) var(--fs-body-l) / 1 var(--font-mono); } /* ---- Checklist ------------------------------------------------------------ */ .ticks { list-style: none; padding: 0; margin: 0; } .ticks li { display: flex; align-items: flex-start; gap: calc(var(--space-m) * 1px); font: var(--w-book) var(--fs-body-m) / 1.5 var(--font-brand); padding-block: 7px; } .ticks svg { flex: none; margin-top: 2px; } /* ---- Switcher (segmented control) ----------------------------------------- */ .switcher { display: inline-flex; gap: 4px; background: var(--teal-100); border-radius: var(--r-lg); padding: 4px; } .switcher button { font: var(--w-medium) var(--fs-body-m) / 1 var(--font-alt); color: var(--teal-400); background: transparent; border: none; padding: 10px 22px; border-radius: var(--r-md); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); } .switcher button.is-on { background: var(--surface-primary); color: var(--content-primary-inverse); box-shadow: var(--shadow-switch); } /* ---- Tier cards ----------------------------------------------------------- Transcribed from the source artboards "Basic Tier-4month.svg" (328x323) and "Premier Tier-4month.svg" (328x452): 328px wide, 16px radius, 24px padding, 40px name, 32px price, 14px /mo + total, 14px features on 16px solid check icons at 24px pitch, 48px coral CTA. Both artboards use a coral CTA, so the usual one-coral-per-view rule is set aside here by design. */ .tiers { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; /* bottom-align: both 560px card bodies line up, and Premier's "most popular" badge overhangs above */ gap: calc(var(--space-3xl) * 1px); } /* ---- Tier cards as artwork (SVG per tier per term) ------------------------ */ .tier-card { display: block; width: 328px; max-width: 100%; transition: transform var(--dur-fast) var(--ease-soft); } .tier-card:hover { transform: translateY(-3px); } .tier-img { display: block; width: 100%; height: auto; border-radius: 16px; /* matches the card corner baked into the SVG */ box-shadow: 0 8px 24px rgba(0,67,67,.08); transition: box-shadow var(--dur-fast) var(--ease-soft); } .tier-card:hover .tier-img { box-shadow: 0 18px 40px rgba(0,67,67,.16); } /* The switcher sets data-tiers-term; show only the matching term's art. */ .tiers[data-tiers-term="four"] .tier-img[data-term="annual"] { display: none; } .tiers[data-tiers-term="annual"] .tier-img[data-term="four"] { display: none; } /* The whole card is a link to the App Store. */ .tier { width: 328px; max-width: 100%; padding: calc(var(--space-2xl) * 1px); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--teal-50); display: flex; flex-direction: column; position: relative; transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft); } .tier:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,67,67,.16); } .tier-featured:hover { box-shadow: 0 18px 40px rgba(0,40,40,.34); } .tier-featured { margin-top: 10px; /* badge overhangs the card top, as drawn */ background: var(--surface-primary); color: var(--content-primary-inverse); box-shadow: inset 0 0 0 1px var(--content-secondary); } .tier-badge { position: absolute; top: -10px; left: 22px; width: 119px; height: 18px; display: grid; place-items: center; background: var(--surface-cta); color: var(--content-primary-inverse); border-radius: var(--r-pill); font: var(--w-bold) 12px / 1 var(--font-brand); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; } .tier-name { font: var(--w-bold) 40px / 1.05 var(--font-brand); letter-spacing: var(--ls-tight); text-align: center; color: var(--content-primary); margin: 0; } .tier-featured .tier-name { color: var(--content-primary-inverse); } .tier-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: calc(var(--space-s) * 1px); } .tier-price b { font: var(--w-bold) 32px / 1.05 var(--font-brand); letter-spacing: var(--ls-tight); color: var(--content-primary); } .tier-featured .tier-price b { color: var(--content-primary-inverse); } .tier-price span { font: var(--w-book) 14px / 1 var(--font-brand); color: var(--content-secondary); } .tier-featured .tier-price span { color: var(--content-secondary-inverse); } .tier-total { font: var(--w-book) 14px / 1.2 var(--font-brand); text-align: center; color: var(--content-secondary); margin: calc(var(--space-xs) * 1px) 0 0; } .tier-featured .tier-total { color: var(--content-secondary-inverse); } /* feature list: 16px solid check, 8px gap, 24px pitch */ .tier-feats { list-style: none; margin: calc(var(--space-2xl) * 1px) 0 0; padding: 0 0 0 4px; color: var(--teal); /* circle fill */ --tick-ink: var(--content-primary-inverse); /* check fill */ } .tier-featured .tier-feats { color: var(--content-primary-inverse); --tick-ink: var(--teal); } .tier-feats li { display: flex; align-items: center; gap: 8px; font: var(--w-book) 16px / 1.1 var(--font-brand); color: var(--content-primary); min-height: 16px; } .tier-feats li + li { margin-top: 8px; } .tier-featured .tier-feats li { color: var(--content-primary-inverse); } .tier-feats svg { flex: none; } .tier .btn { width: 100%; height: 48px; padding: 0; margin-top: auto; /* sit at the bottom, so cards of unequal length align */ border-radius: var(--r-md); font: var(--w-medium) 20px / 1 var(--font-brand); } /* keep a minimum gap above the button when the feature list is long */ .tier-feats { margin-bottom: calc(var(--space-2xl) * 1px); } /* ---- Forms ---------------------------------------------------------------- */ .field { display: block; } .field-label { display: block; font: var(--w-medium) var(--fs-body-m) / 1 var(--font-brand); margin-bottom: calc(var(--space-s) * 1px); } .field-input { width: 100%; font: 400 var(--fs-body-l) / 1.4 var(--font-form); color: var(--content-primary); background: var(--surface); border: none; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--border-secondary); padding: 15px 16px; transition: box-shadow var(--dur-fast) var(--ease-soft); } .field-input::placeholder { color: var(--neutral-700); } .field-input:hover { box-shadow: inset 0 0 0 1px var(--teal-200); } .field-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--border-focused-typing), var(--focus-ring); } textarea.field-input { resize: vertical; min-height: 150px; } /* .field-validation-error / .input-validation-error are what the ASP.NET validation tag helpers emit â style those, not a hand-rolled class. */ .field-error { display: block; font: var(--w-book) var(--fs-body-s) / 1.4 var(--font-brand); color: var(--statusred-500); } .field-error.field-validation-error { margin-top: 6px; } .field-error:empty { display: none; } .field-input.input-validation-error { box-shadow: inset 0 0 0 2px var(--border-error); } .field-input.input-validation-error:focus { box-shadow: inset 0 0 0 2px var(--border-error), 0 0 0 3px rgba(219,56,56,.28); } /* ---- Info callout --------------------------------------------------------- */ .info { background: var(--tint-surface); border-radius: var(--r-md); padding: calc(var(--space-xl) * 1px); display: flex; gap: calc(var(--space-m) * 1px); } /* ---- Gentle reveal -------------------------------------------------------- Only hide the start state when scripting is available (). Without JS nothing would ever add .is-in, so the page must stay visible. */ .js .reveal { opacity: 0; transform: translateY(12px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft); } /* ---- Responsive ----------------------------------------------------------- */ @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { :root { --section-y: calc(var(--space-6xl) * 1px); } .grid-2, .grid-4 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: calc(var(--space-3xl) * 1px); } .t-display-l { font-size: var(--fs-display-s); } .t-display-m { font-size: 34px; } .t-heading-xl { font-size: var(--fs-heading-l); } /* nav collapses behind a toggle */ .nav-pill { flex-wrap: wrap; padding: 12px 12px 12px 20px; } .nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10); color: var(--content-primary-inverse); border: 1.5px solid rgba(255,255,255,.30); border-radius: var(--r-pill); font: var(--w-medium) var(--fs-body-m) / 1 var(--font-brand); padding: 10px 18px; cursor: pointer; } .nav-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: calc(var(--space-xs) * 1px); padding: calc(var(--space-m) * 1px) 0 calc(var(--space-s) * 1px); } .nav-menu.is-open { display: flex; } .nav-link { padding: 14px 16px; } .nav-cta { margin-top: calc(var(--space-s) * 1px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } }