/* ========================================================================== AW2 DESIGN FOUNDATION — try.clutchday.com (funnel_id: aw2_v1_demo) -------------------------------------------------------------------------- Derived from the official Clutchday design handoff. Do not improvise on top of this file — go back to the source when something is unspecified: ~/Desktop/cd_app_dev/design_handoff_clutchday_web_rebrand/ reference/clutchday-design-system.md (the written system) reference/clutchday-tokens.css (token values) patches/globals.css (web application of the system) mockups/clutchday-web.css (component vocabulary) ~/Desktop/cd_app_dev/apps/web/src/app/globals.css (live implementation) ~/Desktop/cd_app_dev/apps/web/tailwind.config.ts (live radii/shadows) THE RULES THIS FILE ENFORCES - Dark-first. Pure #000 and pure #FFF. No hued greys — grey is white at an opacity. - ONE accent: cyan #00D2FF. CTAs, focus, selection, progress fills, active tint, and hairline accent rules only. NEVER as text colour. - TT Firs Neue at 300 / 400 / 500 only. No bold face ships, so `font-synthesis: none` is set globally and maps to 500. Never write font-weight: 600 or 700. - Radii: sm 8 / md 12 / lg 18 / xl 28 / 2xl 32 / pill. - Brushstroke wallpaper sits at 5% over black, page-level only. Never full-strength, never inside a card. - Section headers ALL CAPS + wide tracking. Body and buttons sentence case. - No emoji. No unicode glyphs used as icons. Token names keep the `--cd-` prefix (funnel/cd-popup.css already reads --cd-font, --cd-accent-gradient and --cd-shadow-accent from :root). Class names are prefixed `aw2-` so nothing collides with the popup's `cdco-` or with app-derived `cd-` classes. Self-contained: fonts in ./fonts, images in ./assets. No CDN, no framework. ========================================================================== */ /* ========================================================================== 1. FONTS Subset of the handoff OTFs (Latin + punctuation), converted to WOFF2. Preload the two that paint first, in : ========================================================================== */ @font-face { font-family: "TT Firs Neue"; src: url("fonts/TT-Firs-Neue-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "TT Firs Neue"; src: url("fonts/TT-Firs-Neue-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TT Firs Neue"; src: url("fonts/TT-Firs-Neue-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ========================================================================== 2. TOKENS ========================================================================== */ :root { color-scheme: dark; /* ---- core ---- */ --cd-black: #000; --cd-white: #fff; --cd-accent: #00D2FF; --cd-accent-bottom: rgba(0, 210, 255, 0.75); --cd-danger: #D92D20; /* ---- surfaces (white over black, opacity only — never a grey hex) ---- */ --cd-surface: rgba(255, 255, 255, 0.07); --cd-surface-pressed: rgba(255, 255, 255, 0.16); --cd-stroke: rgba(255, 255, 255, 0.20); --cd-stroke-strong: rgba(255, 255, 255, 0.35); --cd-stroke-soft: rgba(255, 255, 255, 0.12); --cd-stroke-hair: rgba(255, 255, 255, 0.08); /* ---- text ---- */ --cd-text-primary: #fff; --cd-text-secondary: rgba(255, 255, 255, 0.76); --cd-text-tertiary: rgba(255, 255, 255, 0.60); --cd-text-muted: rgba(255, 255, 255, 0.40); /* ---- accent tints (surfaces and strokes only, never text) ---- */ --cd-accent-tint: rgba(0, 210, 255, 0.12); --cd-accent-stroke: rgba(0, 210, 255, 0.35); --cd-accent-ring: rgba(0, 210, 255, 0.28); /* ---- the only gradients in the system ---- */ --cd-accent-gradient: linear-gradient(90deg, #00D2FF 0%, rgba(0, 210, 255, 0.75) 100%); --cd-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.20) 100%); /* protection gradient — bottom-pinned chrome over content (OnboardingBottomAction) */ --cd-bottom-fade: linear-gradient(0deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.72) 100%); /* hero-only ambient glow — see DEVIATIONS in the notes */ --cd-hero-glow: radial-gradient(120% 70% at 50% -12%, rgba(0, 210, 255, 0.10), transparent 62%); /* ---- shadows (one per element, never stacked) ---- */ --cd-shadow-card: 0 10px 18px rgba(0, 0, 0, 0.35); --cd-shadow-elev: 0 6px 10px rgba(0, 0, 0, 0.25); --cd-shadow-accent: 0 12px 20px rgba(0, 210, 255, 0.40); --cd-shadow-accent-sm: 0 6px 12px rgba(0, 210, 255, 0.35); --cd-shadow-accent-lg: var(--cd-shadow-accent); /* base.css compat */ /* ---- radii ---- */ --cd-radius-sm: 8px; --cd-radius-md: 12px; --cd-radius-lg: 18px; --cd-radius-xl: 28px; --cd-radius-2xl: 32px; --cd-radius-pill: 9999px; /* ---- spacing ---- */ --cd-space-1: 4px; --cd-space-2: 8px; --cd-space-3: 12px; --cd-space-4: 14px; /* card inner padding */ --cd-space-5: 16px; --cd-space-6: 18px; --cd-space-7: 22px; --cd-space-8: 24px; /* screen gutter */ --cd-space-9: 32px; /* ---- motion ---- */ --cd-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --cd-dur-fast: 150ms; --cd-dur: 250ms; --cd-dur-slow: 400ms; /* ---- type ---- --cd-font carries the FULL stack (not the bare family name) because funnel/base.css sets `html, body { font-family: var(--cd-font) }` with no fallback of its own. --cd-font-sans is an alias; both are safe to use. */ --cd-font: "TT Firs Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cd-font-sans: var(--cd-font); /* Mobile-first fluid scale. Lower bound is tuned for a 390px phone held at arm's length; upper bound is the desktop courtesy. */ --aw2-fs-hero: clamp(2.5rem, 10.2vw, 4.25rem); /* 40 → 68 */ --aw2-fs-h2: clamp(1.75rem, 6.4vw, 2.5rem); /* 28 → 40 */ --aw2-fs-h3: clamp(1.25rem, 4.6vw, 1.5rem); /* 20 → 24 */ --aw2-fs-lede: clamp(1.0625rem, 4.4vw, 1.25rem); /* 17 → 20 */ --aw2-fs-body: clamp(1rem, 4.1vw, 1.0625rem); /* 16 → 17 */ --aw2-fs-small: 0.9375rem; /* 15 */ --aw2-fs-fine: 0.8125rem; /* 13 */ --aw2-fs-eyebrow: 0.6875rem; /* 11 */ --aw2-fs-stat: clamp(2.5rem, 11vw, 3.75rem); /* 40 → 60 */ --aw2-track-caps: 0.22em; /* ---- layout ---- */ --aw2-gutter: var(--cd-space-8); --aw2-measure: 34rem; /* 544px — text column */ --aw2-measure-wide: 68rem; /* 1088px — desktop grid sections */ --aw2-section-y: clamp(3.5rem, 13vw, 6.5rem); } /* ========================================================================== 3. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } body { min-height: 100dvh; overflow-x: clip; background-color: var(--cd-black); color: var(--cd-text-primary); font-family: var(--cd-font-sans); font-weight: 400; font-size: var(--aw2-fs-body); line-height: 1.5; font-synthesis: none; /* no bold face ships — never fake one */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; } strong, b { font-weight: 500; } /* maps bold markup onto Medium */ hr { border: 0; height: 1px; background: var(--cd-stroke-hair); margin: 0; } ::selection { background: var(--cd-accent); color: var(--cd-black); } /* Focus — accent ring, keyboard only. */ :focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 3px; border-radius: var(--cd-radius-sm); } :focus:not(:focus-visible) { outline: none; } /* ========================================================================== 4. PAGE GROUND + BRUSHSTROKE WALLPAPER The brushstroke is the identity anchor. 5% over pure black, page level only. Asset is white-on-black flattened greyscale, so opacity alone is correct. ========================================================================== */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("assets/bg-brushstroke.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.05; } /* ========================================================================== 5. LAYOUT ========================================================================== */ .aw2-section { position: relative; padding-block: var(--aw2-section-y); } .aw2-section--tight { padding-block: clamp(2.25rem, 8vw, 4rem); } .aw2-section--flush { padding-block: 0; } /* A section that reads as a distinct band. Hairline only — no hued fill. */ .aw2-section--banded { border-block: 1px solid var(--cd-stroke-hair); } .aw2-wrap { width: 100%; max-width: var(--aw2-measure); margin-inline: auto; padding-inline: var(--aw2-gutter); } .aw2-wrap--wide { max-width: var(--aw2-measure-wide); } .aw2-wrap--flush { padding-inline: 0; } /* Vertical rhythm helper — 18px between sections, 12–14px between cards. */ .aw2-stack > * + * { margin-top: var(--cd-space-6); } .aw2-stack-sm > * + * { margin-top: var(--cd-space-3); } .aw2-stack-lg > * + * { margin-top: var(--cd-space-9); } .aw2-center { text-align: center; } .aw2-divider { height: 1px; background: var(--cd-stroke-hair); } /* ========================================================================== 6. TYPE PRIMITIVES ========================================================================== */ /* ALL CAPS section header / eyebrow. White at opacity — accent is not a text colour. Use .aw2-eyebrow--strong when it must carry more weight. */ .aw2-eyebrow { display: block; font-size: var(--aw2-fs-eyebrow); font-weight: 500; line-height: 1.2; letter-spacing: var(--aw2-track-caps); text-transform: uppercase; color: var(--cd-text-secondary); } /* Dimmer eyebrow for a header that must not compete with the headline. */ .aw2-eyebrow--quiet { color: var(--cd-text-tertiary); } /* Eyebrow with the accent as a graphic mark, not as ink on the letters. */ .aw2-eyebrow--marked { display: flex; align-items: center; gap: var(--cd-space-2); color: var(--cd-text-secondary); } .aw2-eyebrow--marked::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--cd-accent-gradient); flex: 0 0 auto; } .aw2-hero { font-size: var(--aw2-fs-hero); font-weight: 500; line-height: 1.02; letter-spacing: -0.032em; text-wrap: balance; } /* Light 300 on the hero when the line is long and needs to breathe. */ .aw2-hero--light { font-weight: 300; letter-spacing: -0.025em; } .aw2-h2 { font-size: var(--aw2-fs-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; } .aw2-h3 { font-size: var(--aw2-fs-h3); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; } .aw2-lede { font-size: var(--aw2-fs-lede); font-weight: 300; line-height: 1.45; color: var(--cd-text-secondary); text-wrap: pretty; } .aw2-body { font-size: var(--aw2-fs-body); font-weight: 400; line-height: 1.55; color: var(--cd-text-secondary); text-wrap: pretty; } .aw2-small { font-size: var(--aw2-fs-small); color: var(--cd-text-secondary); } .aw2-fine { font-size: var(--aw2-fs-fine); line-height: 1.45; color: var(--cd-text-muted); } /* Tracked all-caps run-in, e.g. legal and attribution. */ .aw2-caps { text-transform: uppercase; letter-spacing: 0.12em; } /* ========================================================================== 7. BUTTONS Sentence case labels. Primary is the only accent-filled element on screen; do not put two primaries in one viewport. Add data-cd-cta to any CTA so clutch-aw2.js picks it up. ========================================================================== */ .aw2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cd-space-2); min-height: 56px; /* thumb target */ padding: 16px 28px; border-radius: var(--cd-radius-pill); font-size: 1.0625rem; font-weight: 500; line-height: 1.1; letter-spacing: 0.005em; text-align: center; transition: transform var(--cd-dur-fast) var(--cd-ease), box-shadow var(--cd-dur-fast) var(--cd-ease), background-color var(--cd-dur-fast) var(--cd-ease), border-color var(--cd-dur-fast) var(--cd-ease); } .aw2-btn:active { transform: scale(0.97); } .aw2-btn[disabled], .aw2-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; transform: none; } .aw2-btn--primary { background: var(--cd-accent-gradient); color: var(--cd-black); box-shadow: var(--cd-shadow-accent-sm); } .aw2-btn--primary:hover { box-shadow: var(--cd-shadow-accent); } /* Ghost / secondary — stroke only, never accent-filled. */ .aw2-btn--ghost { background: transparent; color: var(--cd-white); border: 1px solid var(--cd-stroke); } .aw2-btn--ghost:hover { background: var(--cd-surface); border-color: var(--cd-stroke-strong); } /* Neutral white pill — the app's Welcome primary. Use when the accent CTA is already spoken for elsewhere in the same view. */ .aw2-btn--white { background: var(--cd-white); color: var(--cd-black); } .aw2-btn--block { display: flex; width: 100%; } .aw2-btn--sm { min-height: 44px; padding: 11px 20px; font-size: var(--aw2-fs-small); } /* Caption under a CTA — risk reversal, never a promise the app can't keep. */ .aw2-btn-note { margin-top: var(--cd-space-3); font-size: var(--aw2-fs-fine); color: var(--cd-text-tertiary); text-align: center; } /* ========================================================================== 8. GLASS CARD ========================================================================== */ .aw2-card { position: relative; padding: var(--cd-space-6); border: 1px solid var(--cd-stroke-hair); border-radius: var(--cd-radius-lg); background: var(--cd-card-gradient); box-shadow: var(--cd-shadow-card); } .aw2-card--xl { border-radius: var(--cd-radius-2xl); padding: var(--cd-space-7); } .aw2-card--flat { box-shadow: none; background: var(--cd-surface); } /* Selected / highlighted card — accent moves to the stroke and the glow, never to the copy inside it. */ .aw2-card--accent { border-color: var(--cd-accent-stroke); background: linear-gradient(135deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.02) 60%, rgba(0, 0, 0, 0.20) 100%); box-shadow: var(--cd-shadow-accent); } /* Pill tag for a card corner — accent as an active tint. */ .aw2-tag { display: inline-block; padding: 4px 10px; border: 1px solid var(--cd-accent-stroke); border-radius: var(--cd-radius-pill); background: var(--cd-accent-tint); color: var(--cd-white); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.4; } /* ========================================================================== 9. DEVICE / VIDEO FRAMES The page is a product demo — these carry the HTML app screens. ========================================================================== */ /* Phone bezel. Put a .m app-screen recreation inside. */ .aw2-device { position: relative; width: 100%; max-width: 300px; margin-inline: auto; padding: 8px; border: 1px solid var(--cd-stroke); border-radius: 44px; background: var(--cd-black); box-shadow: var(--cd-shadow-card); } .aw2-device__screen { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 36px; background: var(--cd-black); } .aw2-device__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Accent halo for the one hero device. Use once per page. */ .aw2-device--hero { box-shadow: var(--cd-shadow-accent); border-color: var(--cd-accent-stroke); } /* Landscape 16:9 frame for a screen capture that is not a phone. */ /* Caption under a demo step. */ .aw2-caption { margin-top: var(--cd-space-4); font-size: var(--aw2-fs-small); line-height: 1.45; color: var(--cd-text-secondary); text-align: center; } /* ========================================================================== 10. QUOTE / TESTIMONIAL ========================================================================== */ .aw2-quote { padding: var(--cd-space-6) var(--cd-space-6) var(--cd-space-6) var(--cd-space-7); border: 1px solid var(--cd-stroke-hair); border-left: 2px solid var(--cd-accent); border-radius: var(--cd-radius-lg); background: var(--cd-card-gradient); box-shadow: var(--cd-shadow-card); } .aw2-quote__text { font-size: var(--aw2-fs-lede); font-weight: 300; line-height: 1.4; letter-spacing: -0.008em; color: var(--cd-white); text-wrap: pretty; } .aw2-quote__attrib { margin-top: var(--cd-space-5); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cd-text-tertiary); } /* ========================================================================== 11. STATS ========================================================================== */ .aw2-stats { display: grid; grid-template-columns: 1fr; gap: var(--cd-space-3); } .aw2-stat { padding: var(--cd-space-6); border: 1px solid var(--cd-stroke-hair); border-radius: var(--cd-radius-lg); background: var(--cd-card-gradient); box-shadow: var(--cd-shadow-card); } .aw2-stat__value { font-size: var(--aw2-fs-stat); font-weight: 500; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--cd-white); } .aw2-stat__label { margin-top: var(--cd-space-2); font-size: var(--aw2-fs-eyebrow); font-weight: 500; letter-spacing: var(--aw2-track-caps); text-transform: uppercase; color: var(--cd-text-tertiary); } .aw2-stat__note { margin-top: var(--cd-space-2); font-size: var(--aw2-fs-fine); color: var(--cd-text-muted); } /* Accent progress fill — one of the sanctioned accent uses. */ .aw2-meter { margin-top: var(--cd-space-4); height: 6px; border-radius: 6px; background: var(--cd-stroke-hair); overflow: hidden; } .aw2-meter__fill { height: 100%; border-radius: 6px; background: var(--cd-accent-gradient); transition: width var(--cd-dur) var(--cd-ease); } /* ========================================================================== 12. FAQ / DISCLOSURE Markup:
…

…

========================================================================== */ .aw2-faq { border-bottom: 1px solid var(--cd-stroke-hair); } .aw2-faq:first-of-type { border-top: 1px solid var(--cd-stroke-hair); } .aw2-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cd-space-4); padding: var(--cd-space-6) 0; font-size: var(--aw2-fs-body); font-weight: 500; line-height: 1.35; color: var(--cd-white); cursor: pointer; list-style: none; } .aw2-faq__q::-webkit-details-marker { display: none; } /* Chevron drawn in CSS — no icon font, no SVG request. */ .aw2-faq__q::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; border-right: 1.5px solid var(--cd-text-tertiary); border-bottom: 1.5px solid var(--cd-text-tertiary); transform: rotate(45deg); transition: transform var(--cd-dur-fast) var(--cd-ease), border-color var(--cd-dur-fast) var(--cd-ease); } .aw2-faq[open] > .aw2-faq__q::after { transform: rotate(-135deg); border-color: var(--cd-accent); } .aw2-faq__a { padding-bottom: var(--cd-space-6); max-width: 32rem; } /* ========================================================================== 13. FORM FIELDS Input font-size stays at 16px so iOS does not zoom the viewport on focus. ========================================================================== */ .aw2-field { display: block; } .aw2-field + .aw2-field { margin-top: var(--cd-space-5); } .aw2-label { display: block; margin-bottom: var(--cd-space-2); font-size: var(--aw2-fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cd-text-secondary); } .aw2-input, .aw2-select, .aw2-textarea { width: 100%; padding: 14px var(--cd-space-4); border: 1px solid var(--cd-stroke); border-radius: var(--cd-radius-md); background: var(--cd-surface); color: var(--cd-white); font-size: 1rem; line-height: 1.4; outline: none; transition: border-color var(--cd-dur-fast) var(--cd-ease), box-shadow var(--cd-dur-fast) var(--cd-ease); appearance: none; } .aw2-textarea { min-height: 112px; resize: vertical; } .aw2-input::placeholder, .aw2-textarea::placeholder { color: rgba(255, 255, 255, 0.35); } .aw2-input:focus, .aw2-select:focus, .aw2-textarea:focus { border-color: var(--cd-accent); box-shadow: 0 0 0 3px var(--cd-accent-ring); } /* The browser ring is redundant once the field paints its own accent ring. */ .aw2-input:focus-visible, .aw2-select:focus-visible, .aw2-textarea:focus-visible { outline: none; } .aw2-input[aria-invalid="true"] { border-color: var(--cd-danger); } .aw2-error { display: none; margin-top: var(--cd-space-2); font-size: var(--aw2-fs-fine); color: var(--cd-danger); } .aw2-error.is-shown { display: block; } .aw2-hint { margin-top: var(--cd-space-2); font-size: var(--aw2-fs-fine); color: var(--cd-text-muted); } /* ========================================================================== 14. STICKY BOTTOM CTA DOCK Uses the system's protection gradient so page content reads under it. ========================================================================== */ .aw2-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--cd-space-3) var(--aw2-gutter) calc(var(--cd-space-3) + env(safe-area-inset-bottom)); background: var(--cd-bottom-fade); border-top: 1px solid var(--cd-stroke-soft); transform: translateY(110%); transition: transform var(--cd-dur) var(--cd-ease); } .aw2-dock.is-shown { transform: translateY(0); } .aw2-dock__inner { max-width: var(--aw2-measure); margin-inline: auto; } /* Pair with: body { padding-bottom: 96px } once the dock can appear. */ .aw2-has-dock { padding-bottom: 104px; } /* ========================================================================== 15. LOGO MARKS ========================================================================== */ .aw2-logo { height: 26px; width: auto; } /* assets/cd-icon-white.png */ .aw2-logo--stacked { height: 64px; width: auto; } /* assets/cd-stacked-white.png */ /* ========================================================================== 16. HERO ========================================================================== */ .aw2-hero-section { position: relative; padding-top: clamp(2.5rem, 9vw, 4.5rem); padding-bottom: var(--aw2-section-y); } .aw2-hero-section::before { content: ""; position: absolute; inset: -20% 0 auto 0; height: 90%; z-index: -1; pointer-events: none; background: var(--cd-hero-glow); } /* ========================================================================== 17. MOTION Reveal-on-scroll is opt-in and JS-gated: without JS the content is visible, which is the only acceptable failure mode on a paid landing page. Add `document.documentElement.classList.add('js')` before first paint. ========================================================================== */ .js .aw2-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--cd-dur-slow) var(--cd-ease), transform var(--cd-dur-slow) var(--cd-ease); will-change: opacity, transform; } .js .aw2-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js .aw2-reveal { opacity: 1; transform: none; } /* Same guarantee for the app screens. The staging rules hold rows at opacity 0 until JS adds .is-on; if a reduced-motion user also loses the script, that would be a phone full of nothing. Release them in CSS. */ .js .m[data-stage] .m-slot, .js .m[data-stage] .m-ev, .js .m[data-stage] .m-swap, .js .m[data-stage] .m-glist li { opacity: 1; transform: none; } .aw2-btn:active { transform: none; } /* The app screens are built complete in markup and only revealed by motion, so flattening animation costs the reveal, never the content. */ } /* ========================================================================== 18. DESKTOP COURTESY 98% of traffic is mobile. Desktop only widens the measure and lets a few groups sit side by side. Nothing below this line is load-bearing. ========================================================================== */ @media (min-width: 48rem) { :root { --aw2-gutter: var(--cd-space-9); } .aw2-stats { grid-template-columns: repeat(3, 1fr); gap: var(--cd-space-4); } .aw2-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .aw2-device { max-width: 320px; } .aw2-dock { display: none; } /* the dock is a mobile affordance */ .aw2-has-dock { padding-bottom: 0; } } @media (hover: none) { /* Mobile has no hover — mirror the app's selection behaviour instead. */ .aw2-btn--ghost:hover { background: transparent; } }