/* ============================================================ HackNao English — Landing Page Minimal, kitwork-inspired design system. Light / Dark / System theming via [data-theme]. ============================================================ */ :root { /* Neutral palette — light */ --bg: #faf9f6; --surface: #ffffff; --surface-2: #f4f2ec; --text: #1a1a18; --muted: #6c6a63; --border: #e7e4dc; --border-strong: #d8d4ca; /* Brand green (matches the app theme: primary #2E7D5B, accent #66BB6A) */ --accent: #2e7d5b; --accent-strong: #25684c; --accent-2: #66bb6a; --accent-soft: #e4f1ea; --on-accent: #ffffff; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans KR", "Noto Sans JP", sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; /* Shape & motion */ --radius: 14px; --radius-lg: 22px; --maxw: 1120px; --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .06), 0 24px 60px rgba(0, 0, 0, .08); --ease: cubic-bezier(.22, .61, .36, 1); } [data-theme="dark"] { --bg: #0e0e10; --surface: #161618; --surface-2: #1d1d20; --text: #f1efea; --muted: #9a978f; --border: #28282c; --border-strong: #34343a; --accent: #66bb6a; --accent-strong: #86ce8e; --accent-2: #2e7d5b; --accent-soft: #16271d; --on-accent: #0e1a13; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .5); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s var(--ease), color .3s var(--ease); } h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 650; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } /* Hide translatable text until js/main.js applies the dictionary, so non-English visitors don't see a flash of the English source. The class is added pre-paint by the language script in (only when the resolved language isn't English) and removed on apply. visibility (not display) keeps layout stable — no CLS. */ html.i18n-cloak [data-i18n] { visibility: hidden; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); font-weight: 500; } .section { padding: 96px 0; } .section-head { max-width: 660px; margin: 0 auto 56px; text-align: center; } .section-head h2 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 16px; } .section-head p { color: var(--muted); font-size: 18px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 15.5px; font-weight: 550; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), background-color .2s, border-color .2s, color .2s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); } .btn svg { width: 17px; height: 17px; } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 50; /* No backdrop-filter: it would create a containing block that traps the position:fixed mobile menu overlay inside the header. Use a near-opaque background instead so content doesn't bleed through when scrolling under. */ background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s; } @supports (backdrop-filter: blur(1px)) { /* Frosted glass only when no full-screen overlay is active (desktop, or mobile with the menu closed) — keeps the blur off the fixed overlay's containing-block ancestor while the menu is open. */ body:not(.nav-open) .header { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } } .header.scrolled { border-bottom-color: var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.01em; } .brand .logo { width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: 15px; font-family: var(--font-serif); } .nav { display: flex; align-items: center; gap: 6px; } .nav-links { display: flex; gap: 4px; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; white-space: nowrap; transition: color .2s, background-color .2s; } .nav-links a:hover { color: var(--text); background: var(--surface-2); } .controls { display: flex; align-items: center; gap: 8px; } /* Icon button + selects */ .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background-color .2s, border-color .2s; } .icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .icon-btn svg { width: 18px; height: 18px; } .select-wrap { position: relative; display: inline-flex; } .select-wrap svg.chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; color: var(--muted); } select.lang, select.theme { appearance: none; -webkit-appearance: none; font-family: var(--font-sans); font-size: 14px; font-weight: 550; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 30px 9px 12px; cursor: pointer; transition: background-color .2s, border-color .2s; } select.lang:hover, select.theme:hover { border-color: var(--border-strong); background: var(--surface-2); } /* Hamburger: hidden on desktop (full nav is inline), shown on mobile. */ .menu-toggle { display: none; } .menu-toggle .i-close { display: none; } /* Store buttons: only surfaced inside the mobile menu overlay (hidden otherwise). */ .nav-stores { display: none; } .nav-stores .store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; background: #111; color: #fff; text-decoration: none; border: 1px solid #111; min-width: 210px; transition: transform .12s ease; } .nav-stores .store-btn:hover { transform: translateY(-2px); color: #fff; background: #111; } .nav-stores .store-btn svg { width: 26px; height: 26px; flex: none; } .nav-stores .store-btn .sb-small { font-size: 11px; opacity: .85; display: block; line-height: 1.1; } .nav-stores .store-btn .sb-big { font-size: 17px; font-weight: 700; line-height: 1.2; } [data-theme="dark"] .nav-stores .store-btn, [data-theme="dark"] .nav-stores .store-btn:hover { background: #fff; color: #111; border-color: #fff; } /* ---------- Hero ---------- */ .hero { padding: 84px 0 72px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 78% -8%, var(--accent-soft), transparent 70%), radial-gradient(560px 320px at 8% 6%, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 70%); opacity: .9; } .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .hero-copy { max-width: 600px; } .hero h1 { font-size: clamp(34px, 5vw, 56px); margin: 18px 0 22px; } .hero h1 .grad { color: var(--accent-strong); } .hero-sub { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 640px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; color: var(--muted); font-size: 14.5px; } .hero-meta span { display: inline-flex; align-items: center; gap: 7px; } .hero-meta svg { width: 16px; height: 16px; color: var(--accent-strong); } /* ---------- Hero scan-to-install QR ---------- */ .hero-qr { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: fit-content; max-width: 100%; } .hero-qr-copy { flex: 1 1 130px; min-width: 130px; } .hero-qr-title { font-weight: 700; margin: 0 0 3px; font-size: 15px; } .hero-qr-sub { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.4; } .hero-qr-item { margin: 0; text-align: center; } .hero-qr-btn { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; border-radius: 9px; } .hero-qr-btn img { width: 78px; height: 78px; background: #fff; border-radius: 9px; padding: 5px; display: block; transition: transform .15s ease; } .hero-qr-btn:hover img { transform: scale(1.05); } .hero-qr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .hero-qr-item figcaption { color: var(--muted); font-size: 11px; margin-top: 5px; } /* ---------- QR full-screen scan dialog ---------- */ .qr-modal { border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; color: var(--text); } .qr-modal[open] { display: grid; place-items: center; } .qr-modal::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); } .qr-modal-card { position: relative; width: min(90vw, 360px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px 28px 24px; text-align: center; } .qr-modal[open] .qr-modal-card { animation: qrPop .18s ease both; } @keyframes qrPop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } .qr-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .qr-modal-close:hover { background: var(--border); } .qr-modal-title { font-weight: 700; font-size: 18px; margin: 0 0 4px; } .qr-modal-hint { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.45; } .qr-modal-img { width: min(74vw, 260px); height: min(74vw, 260px); background: #fff; border-radius: 14px; padding: 12px; display: block; margin: 0 auto 18px; } .qr-modal-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; } .qr-modal-link:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .qr-modal[open] .qr-modal-card { animation: none; } .hero-qr-btn img { transition: none; } } /* ---------- Hero phone mockups ---------- */ .hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; } .phone { margin: 0; position: absolute; border-radius: 38px; overflow: hidden; background: var(--surface); padding: 7px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); } .phone picture { display: block; width: 100%; height: 100%; } .phone img { display: block; width: 100%; height: 100%; border-radius: 31px; } .phone-front { width: 256px; transform: rotate(3deg) translateX(34px); z-index: 2; } .phone-back { width: 236px; transform: rotate(-6deg) translateX(-78px); z-index: 1; opacity: .98; } .phone-front, .phone-back { transition: transform .4s var(--ease); } .hero-visual:hover .phone-front { transform: rotate(2deg) translateX(28px) translateY(-6px); } .hero-visual:hover .phone-back { transform: rotate(-7deg) translateX(-86px) translateY(-2px); } /* Theme-aware screenshot swap */ .shot.dark-only { display: none; } [data-theme="dark"] .shot.light-only { display: none; } [data-theme="dark"] .shot.dark-only { display: block; } /* ---------- Method pillars ---------- */ .methods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .method { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; overflow: hidden; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; } .method:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } .method .num { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .08em; } .method .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); margin: 16px 0 18px; } .method .ic svg { width: 24px; height: 24px; } .method h3 { font-size: 21px; margin-bottom: 10px; } .method p { color: var(--muted); font-size: 15.5px; } .method ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; } .method li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--text); } .method li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-strong); } /* ---------- Feature grid ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color .25s, transform .25s var(--ease); } .feature:hover { border-color: var(--border-strong); transform: translateY(-2px); } .feature .fic { color: var(--accent-strong); margin-bottom: 14px; } .feature .fic svg { width: 22px; height: 22px; } .feature h3 { font-size: 17.5px; margin-bottom: 7px; } .feature p { color: var(--muted); font-size: 14.5px; } /* ---------- Stats band ---------- */ .stats { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 56px 0; } .stat { text-align: center; } .stat .big { font-family: var(--font-serif); font-size: clamp(34px, 5vw, 50px); color: var(--accent-strong); line-height: 1; } .stat .lbl { color: var(--muted); font-size: 14px; margin-top: 10px; } /* ---------- How it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; position: relative; } .step .badge { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 18px; background: var(--accent); color: var(--on-accent); margin-bottom: 16px; } .step h3 { font-size: 18px; margin-bottom: 8px; } .step p { color: var(--muted); font-size: 15px; } /* ---------- CTA band ---------- */ .cta-band { padding: 92px 0; } .cta-card { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: var(--radius-lg); padding: 60px 40px; text-align: center; color: var(--on-accent); position: relative; overflow: hidden; } .cta-card h2 { font-size: clamp(26px, 4vw, 38px); color: var(--on-accent); } .cta-card p { color: color-mix(in srgb, var(--on-accent) 86%, transparent); font-size: 18px; margin: 14px auto 28px; max-width: 520px; } .cta-card .btn-primary { background: var(--on-accent); color: var(--accent-strong); } .cta-card .btn-primary:hover { background: color-mix(in srgb, var(--on-accent) 88%, #000); } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); padding: 54px 0 40px; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; } .footer .brand { margin-bottom: 12px; } .footer-about { max-width: 320px; color: var(--muted); font-size: 14.5px; } .footer-cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 14px; } .footer-col a { display: block; color: var(--text); font-size: 14.5px; padding: 5px 0; transition: color .2s; } .footer-col a:hover { color: var(--accent-strong); } .footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13.5px; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ Live demo (#demo) — Dictation & Shadowing, shared design tokens ============================================================ */ .section-demo { background: var(--surface-2); } .demo-shell { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; } /* tabs */ .dx-tabsrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .dx-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .dx-detail { margin-left: auto; padding: 9px 18px; font-size: 14px; } .dx-tab { font: inherit; font-size: 15px; font-weight: 550; border: 0; background: transparent; color: var(--muted); padding: 8px 20px; border-radius: 999px; cursor: pointer; transition: background-color .2s var(--ease), color .2s; } .dx-tab:hover { color: var(--text); } .dx-tab.active { background: var(--accent); color: var(--on-accent); } /* small buttons reuse .btn but tighter */ .dx-sm { padding: 9px 16px; font-size: 14.5px; } /* catalog cards */ .dx-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .dx-card { text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: transform .15s var(--ease), border-color .15s, box-shadow .15s; } .dx-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .dx-card-error { cursor: default; opacity: .7; } .dx-card-top { display: flex; align-items: center; gap: 8px; } .dx-card-title { font-weight: 600; font-size: 16px; } .dx-card-desc { color: var(--muted); font-size: 14px; } .dx-card-meta { color: var(--muted); font-size: 13px; } .dx-thumb { width: 100%; border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 4px; } .dx-empty { color: var(--muted); text-align: center; padding: 32px; } .dx-badge { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); } .dx-tag { font-size: 12px; color: var(--muted); } /* practice head */ .dx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .dx-back { font: inherit; font-size: 14px; font-weight: 550; border: 0; background: transparent; color: var(--accent-strong); cursor: pointer; padding: 0; } .dx-title { font-weight: 600; font-size: 18px; flex: 1; } .dx-progress { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 14px; } .dx-muted { color: var(--muted); font-size: 14px; } .dx-notice { background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent-strong); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 14px; } .dx-notice a { color: var(--accent-strong); text-decoration: underline; } .dx-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .dx-speed { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .dx-speed select, .dx-input { font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; } .dx-speed select { padding: 6px 8px; font-size: 14px; } /* dictation */ .dx-input { width: 100%; padding: 12px 14px; font-size: 16px; resize: vertical; } .dx-input:focus { outline: none; border-color: var(--accent); } .dx-actions { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .dx-result, .dx-answerbox { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-top: 12px; } .dx-marks { font-size: 17px; line-height: 2; } .dx-score { margin-top: 8px; color: var(--muted); } .dx-w { padding: 1px 5px; border-radius: 6px; } .dx-correct { background: var(--accent-soft); color: var(--accent-strong); } .dx-wrong { background: color-mix(in srgb, #e5484d 18%, transparent); color: #c62a2f; text-decoration: underline wavy #e5484d; } .dx-missing { background: color-mix(in srgb, #e5484d 12%, transparent); color: #c62a2f; } .dx-extra { background: color-mix(in srgb, #f5a623 20%, transparent); color: #b5740a; text-decoration: line-through; } [data-theme="dark"] .dx-wrong, [data-theme="dark"] .dx-missing { color: #ff9ea1; } [data-theme="dark"] .dx-extra { color: #ffc879; } .dx-hint { color: #b5740a; margin-top: 6px; font-size: 14px; } [data-theme="dark"] .dx-hint { color: #ffc879; } /* shadowing */ .dx-ytwrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; margin-bottom: 14px; } .dx-ytwrap iframe, .dx-ytwrap #dx-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .dx-thint { color: var(--muted); font-size: 14px; margin-bottom: 8px; } .dx-transcript { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); } .dx-line { display: flex; gap: 12px; padding: 9px 14px; cursor: pointer; border-left: 3px solid transparent; font-size: 15px; } .dx-line:hover { background: var(--surface-2); } .dx-line.active { background: var(--accent-soft); border-left-color: var(--accent); } .dx-ts { color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; min-width: 44px; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 8px; } .hero-copy { max-width: 640px; } .hero-meta { justify-content: flex-start; } .hero-visual { min-height: 480px; margin-top: 18px; transform: scale(.96); } } @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .steps { grid-template-columns: 1fr; } } @media (max-width: 720px) { .section { padding: 72px 0; } /* Mobile nav: hamburger visible, links collapse into a full-screen overlay that is shown/hidden with a plain display toggle (no opacity transition — fade + position:fixed interact badly across engines). */ .menu-toggle { display: inline-grid; } .nav-links { display: none; } body.nav-open { overflow: hidden; } body.nav-open .nav-links { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; padding: 24px; background: var(--bg); } /* Direct-child links only — keep the store buttons out of this rule. */ body.nav-open .nav-links > a { font-size: 21px; font-weight: 600; color: var(--text); text-align: center; padding: 13px; border-radius: 12px; } body.nav-open .nav-links > a:hover, body.nav-open .nav-links > a:active { background: var(--surface-2); } body.nav-open .nav-stores { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; } body.nav-open .menu-toggle .i-open { display: none; } body.nav-open .menu-toggle .i-close { display: block; } /* Collapsed header has no room for the selects beside the hamburger, so hide them in the top bar and surface them inside the overlay instead. Scoped to headers that actually have a hamburger (the landing home); other pages (download/contact/legal) keep their selects visible since they have no overlay to surface them in. */ .controls:has(.menu-toggle) .select-wrap { display: none; } body.nav-open .controls { position: fixed; left: 0; right: 0; bottom: 32px; z-index: 61; display: flex; justify-content: center; gap: 12px; } body.nav-open .controls .select-wrap { display: inline-flex; } /* Keep the close (X) pinned top-right, above the overlay, out of the bottom row. */ body.nav-open .menu-toggle { position: fixed; top: 13px; right: 24px; z-index: 62; } .methods-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .hero { padding: 48px 0 40px; } /* On phones, scanning your own screen is pointless — the tap-to-install CTA wins. */ .hero-qr { display: none; } .hero-visual { min-height: 420px; transform: scale(.86); } .phone-front { transform: rotate(3deg) translateX(26px); } .phone-back { transform: rotate(-6deg) translateX(-66px); } } @media (max-width: 380px) { .hero-visual { transform: scale(.74); min-height: 380px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { transition: none; opacity: 1; transform: none; } } /* ============================================================ Persistent "get the app" banner — injected by js/app-banner.js. Pinned to the top on phones (like a native store smart-banner), hidden on desktop. The sticky header is nudged down by the banner height so the two never overlap. See js/app-banner.js. ============================================================ */ :root { --appbar-h: 60px; } .app-banner { display: none; } /* desktop / wide screens: hidden */ @media (max-width: 767px) { .app-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 45; /* below the header (50) so the open mobile menu covers it */ display: flex; align-items: center; gap: 12px; height: var(--appbar-h); padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--border); } .app-banner .ab-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: var(--shadow); } .app-banner .ab-text { flex: 1 1 auto; min-width: 0; /* allow the subtitle to ellipsize instead of pushing the CTA out */ line-height: 1.25; } .app-banner .ab-text b { display: block; font-weight: 700; font-size: 14px; color: var(--text); } .app-banner .ab-text span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-banner .ab-cta { flex: none; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 8px 18px; text-decoration: none; } .app-banner .ab-cta:active { opacity: 0.9; } /* Make room for the fixed banner and push the sticky header below it. */ body.has-appbar { padding-top: var(--appbar-h); } body.has-appbar .header { top: var(--appbar-h); } /* While the full-screen mobile menu is open, drop the banner offset so the overlay starts at the very top. */ body.has-appbar.nav-open .header { top: 0; } }