/* ============================================================= KOSU APPS — Design System A shared, themeable stylesheet for the studio site + app pages. Themes are scoped via ============================================================= */ /* ------------------------------------------------------------- 1. Reset & base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--focus, #6C5CE7); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--sel-bg, rgba(108,92,231,.22)); color: var(--text); } /* ------------------------------------------------------------- 2. Design tokens — KOSU studio (default / homepage) ------------------------------------------------------------- */ :root { --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Neutrals */ --ink: #17151F; --ink-2: #2C2937; --muted: #6A6577; --muted-2: #918C9E; --paper: #FBF9F6; --paper-2: #F3EFE9; --surface: #FFFFFF; --surface-2: #FAF8F5; --line: rgba(23, 21, 31, 0.09); --line-strong: rgba(23, 21, 31, 0.14); /* Signature brand — coral (Car Care) flows into violet (Pillowy) */ --coral: #F2654E; --coral-soft: #FF8B73; --violet: #6C5CE7; --violet-deep: #5A4AD1; --lavender: #B6A6E9; --amber: #E9B949; --brand-grad: linear-gradient(118deg, #F2654E 0%, #9A5BD8 52%, #6C5CE7 100%); --brand-grad-soft: linear-gradient(118deg, rgba(242,101,78,.16), rgba(108,92,231,.16)); /* Roles (overridden per theme) */ --bg: var(--paper); --bg-soft: var(--paper-2); --text: var(--ink); --text-soft: var(--ink-2); --accent: var(--violet); --focus: var(--violet); --sel-bg: rgba(108, 92, 231, .20); --footer-bg: #141019; --footer-text: #C9C4D6; --footer-head: #FFFFFF; --footer-line: rgba(255, 255, 255, 0.10); --nav-bg: rgba(251, 249, 246, 0.72); --nav-border: rgba(23, 21, 31, 0.08); /* Shadows */ --shadow-xs: 0 1px 2px rgba(20, 18, 28, .05); --shadow-sm: 0 2px 4px rgba(20,18,28,.05), 0 4px 12px rgba(20,18,28,.05); --shadow-md: 0 10px 30px -8px rgba(20, 18, 28, .12); --shadow-lg: 0 32px 64px -24px rgba(20, 18, 28, .24); --shadow-glow: 0 24px 60px -18px rgba(108, 92, 231, .35); /* Radii */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; /* Layout */ --container: 1180px; --container-wide: 1320px; --gutter: clamp(20px, 5vw, 44px); --section-y: clamp(72px, 11vw, 144px); --nav-h: 72px; } /* ------------------------------------------------------------- 3. Theme — CAR CARE (warm "Sunday Drive" premium) ------------------------------------------------------------- */ .theme-car { --bg: #FAF3E3; --bg-soft: #F4EAD3; --surface: #FFFFFF; --surface-2: #FFFBF2; --text: #3F3733; --text-soft: #574C45; --muted: #6E6259; --muted-2: #8B7E72; --line: rgba(142, 51, 44, 0.12); --line-strong: rgba(142, 51, 44, 0.2); --coral: #D95F52; --brand-1: #D95F52; --brand-strong: #BC4A3D; --brand-dark: #8E332C; --accent: #BC4A3D; --amber: #E9B949; --amber-deep: #7A5510; --focus: #BC4A3D; --sel-bg: rgba(217, 95, 82, .22); --brand-grad: linear-gradient(120deg, #E07A5F 0%, #D95F52 45%, #BC4A3D 100%); --brand-grad-soft: linear-gradient(120deg, rgba(217,95,82,.14), rgba(233,185,73,.16)); --nav-bg: rgba(250, 243, 227, 0.78); --nav-border: rgba(142, 51, 44, 0.10); --footer-bg: #2A1C18; --footer-text: #E7D6C5; --footer-head: #FFFFFF; --footer-line: rgba(255, 255, 255, 0.10); --shadow-sm: 0 2px 4px rgba(107,84,48,.07), 0 6px 16px rgba(107,84,48,.08); --shadow-md: 0 14px 34px -10px rgba(107, 84, 48, .20); --shadow-lg: 0 36px 70px -24px rgba(107, 84, 48, .32); --shadow-glow: 0 26px 60px -18px rgba(217, 95, 82, .34); /* candy car plate tints */ --plate-blue: #DDF1FA; --plate-green: #DEF2E3; --plate-purple: #EFE6FA; --plate-yellow: #FFF0C9; --plate-red: #FBDDD2; } /* ------------------------------------------------------------- 4. Theme — PILLOWY (calm night sky) ------------------------------------------------------------- */ .theme-pillowy { --bg: #16161F; --bg-soft: #1F1F38; --surface: rgba(58, 58, 92, 0.42); --surface-2: rgba(58, 58, 92, 0.28); --surface-solid: #262643; --text: #ECE9F5; --text-soft: #D5D1E8; --muted: #A7A2C6; --muted-2: #837EA3; --line: rgba(182, 166, 233, 0.16); --line-strong: rgba(182, 166, 233, 0.28); --brand-1: #B6A6E9; --brand-2: #9D8FD6; --lavender: #B6A6E9; --amber: #F2C79B; --amber-soft: #E7B384; --accent: #B6A6E9; --focus: #B6A6E9; --sel-bg: rgba(182, 166, 233, .28); --brand-grad: linear-gradient(120deg, #B6A6E9 0%, #C9A9D8 50%, #F2C79B 100%); --brand-grad-soft: linear-gradient(120deg, rgba(182,166,233,.18), rgba(242,199,155,.16)); --nav-bg: rgba(22, 22, 31, 0.66); --nav-border: rgba(182, 166, 233, 0.14); --footer-bg: #12121C; --footer-text: #B7B2D2; --footer-head: #FFFFFF; --footer-line: rgba(182, 166, 233, 0.12); --shadow-sm: 0 2px 6px rgba(0,0,0,.30); --shadow-md: 0 16px 40px -12px rgba(0, 0, 0, .55); --shadow-lg: 0 40px 80px -28px rgba(0, 0, 0, .7); --shadow-glow: 0 30px 70px -20px rgba(182, 166, 233, .35); } .theme-pillowy body, body.theme-pillowy { background: radial-gradient(1200px 700px at 78% -8%, rgba(182,166,233,.16), transparent 60%), radial-gradient(900px 600px at 12% 8%, rgba(242,199,155,.08), transparent 55%), linear-gradient(180deg, #2A2A4D 0%, #1F1F38 42%, #16161F 100%); background-attachment: fixed; } /* ------------------------------------------------------------- 4b. Theme — VOLLEYBALL HERO (neon match night) ------------------------------------------------------------- */ .theme-volley { --bg: #0E1430; --bg-soft: #141D3F; --surface: rgba(27, 36, 64, 0.82); --surface-2: rgba(35, 45, 78, 0.68); --surface-solid: #1B2440; --text: #FFF7EC; --text-soft: #E9ECF7; --muted: #B4BDD7; --muted-2: #8994B5; --line: rgba(114, 215, 255, 0.15); --line-strong: rgba(114, 215, 255, 0.28); --brand-1: #FF7A3D; --brand-2: #FF5A5F; --gold: #FFC93C; --teal: #35C4C8; --accent: #FF7A3D; --focus: #FFC93C; --sel-bg: rgba(255, 122, 61, .28); --brand-grad: linear-gradient(120deg, #FF9A45 0%, #FF7A3D 48%, #FF5A5F 100%); --brand-grad-soft: linear-gradient(120deg, rgba(255,122,61,.18), rgba(53,196,200,.14)); --nav-bg: rgba(14, 20, 48, 0.76); --nav-border: rgba(114, 215, 255, 0.14); --footer-bg: #080D22; --footer-text: #AEB8D5; --footer-head: #FFFFFF; --footer-line: rgba(114, 215, 255, 0.12); --shadow-sm: 0 3px 10px rgba(2, 6, 23, .26); --shadow-md: 0 18px 42px -12px rgba(2, 6, 23, .62); --shadow-lg: 0 42px 90px -28px rgba(2, 6, 23, .82); --shadow-glow: 0 28px 70px -22px rgba(255, 122, 61, .52); } body.theme-volley { background: radial-gradient(1050px 680px at 86% -5%, rgba(53,196,200,.14), transparent 60%), radial-gradient(900px 640px at 8% 12%, rgba(255,122,61,.13), transparent 56%), linear-gradient(180deg, #111937 0%, #0E1430 46%, #090F27 100%); background-attachment: fixed; } /* ------------------------------------------------------------- 5. Typography ------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--text); } .display { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } h2.section-title, .section-title { font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; } h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); } p { color: var(--text-soft); } .lead { font-size: clamp(1.06rem, 1.7vw, 1.32rem); line-height: 1.55; color: var(--muted); font-weight: 400; } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } .grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Eyebrow / kicker */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 22px; height: 1.5px; border-radius: 2px; background: currentColor; opacity: .55; } .eyebrow.center::before { display: none; } /* ------------------------------------------------------------- 6. Layout primitives ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container.wide { max-width: var(--container-wide); } .container.narrow { max-width: 820px; } .section { padding-block: var(--section-y); } .section.tight { padding-block: clamp(48px, 7vw, 88px); } .section-head { max-width: 680px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head .lead { margin-top: 18px; } .section-head .section-title { margin-top: 16px; } .grid { display: grid; gap: clamp(20px, 2.4vw, 32px); } .stack { display: flex; flex-direction: column; } .divider { height: 1px; background: var(--line); border: 0; } /* ------------------------------------------------------------- 7. Buttons ------------------------------------------------------------- */ .btn { --_bg: var(--text); --_fg: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; border-radius: var(--r-pill); background: var(--_bg); color: var(--_fg); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, opacity .2s; white-space: nowrap; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { --_fg: #fff; background: var(--brand-grad); background-size: 140% 140%; box-shadow: var(--shadow-glow); } .btn-primary:hover { background-position: 100% 50%; box-shadow: var(--shadow-lg); } .btn-ghost { --_bg: transparent; --_fg: var(--text); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-xs); background: var(--surface); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .theme-pillowy .btn-ghost { background: var(--surface); backdrop-filter: blur(8px); } .theme-volley .btn-ghost { background: var(--surface); backdrop-filter: blur(10px); } .btn-lg { padding: 17px 34px; font-size: 1.05rem; } .btn-block { width: 100%; } .btn-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--accent); } .btn-link .arrow { transition: transform .25s ease; } .btn-link:hover .arrow { transform: translateX(4px); } /* ------------------------------------------------------------- 8. Store badges ------------------------------------------------------------- */ .store-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 18px; border-radius: 16px; background: var(--badge-bg, #15131C); color: var(--badge-fg, #fff); border: 1px solid var(--badge-border, transparent); box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; min-width: 168px; } .store-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .store-badge svg { width: 26px; height: 26px; flex: none; } .store-badge .label { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .store-badge .label .small { font-size: 0.64rem; letter-spacing: .04em; opacity: .8; text-transform: uppercase; } .store-badge .label .big { font-size: 1.06rem; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.01em; } .store-badge.is-soon { opacity: .92; } .store-badge .soon-tag { margin-left: 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.16); } .theme-car .store-badge { --badge-bg: #2A1C18; } .theme-pillowy .store-badge { --badge-bg: #2B2B4A; --badge-border: rgba(182,166,233,.22); } .theme-volley .store-badge { --badge-bg: #18213F; --badge-border: rgba(114,215,255,.18); } /* ------------------------------------------------------------- 9. Navigation ------------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background .3s ease, border-color .3s ease, box-shadow .3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--nav-border); } .nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--text); } .brand .brand-mark { width: 34px; height: 34px; flex: none; } .brand .brand-mark img { width: 100%; height: 100%; } .brand b { font-weight: 800; } .brand .brand-sub { font-weight: 500; color: var(--muted); } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { padding: 9px 14px; border-radius: var(--r-pill); font-weight: 500; font-size: 0.95rem; color: var(--text-soft); transition: background .2s, color .2s; } .nav-links a:hover { color: var(--text); background: var(--brand-grad-soft); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; color: var(--text); } .nav-toggle span { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .2s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s; } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } body.nav-open .nav-toggle span { background: transparent; } body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); } /* ------------------------------------------------------------- 10. Hero (shared scaffold) ------------------------------------------------------------- */ .hero { position: relative; padding-top: calc(var(--nav-h) + clamp(36px, 7vw, 80px)); padding-bottom: clamp(56px, 9vw, 120px); overflow: hidden; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; z-index: 0; pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(36px, 6vw, 80px); } .hero-copy .display { margin-top: 22px; } .hero-copy .lead { margin-top: 24px; max-width: 38ch; } .hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-meta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; } .hero-meta .meta-item { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--muted); font-weight: 500; } .hero-meta .meta-item svg { width: 18px; height: 18px; color: var(--accent); flex: none; } /* pill badge above hero title */ .pill-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: 0.82rem; font-weight: 500; color: var(--text-soft); } .pill-badge .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-grad); display: inline-grid; place-items: center; color: #fff; font-size: 11px; } .theme-pillowy .pill-badge { backdrop-filter: blur(10px); } .theme-volley .pill-badge { backdrop-filter: blur(10px); } /* ------------------------------------------------------------- 11. Phone mockup (device frame + app screens) ------------------------------------------------------------- */ .phone-stage { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1600px; } .phone { position: relative; width: clamp(248px, 30vw, 320px); aspect-ratio: 320 / 660; border-radius: 46px; padding: 13px; background: linear-gradient(155deg, #2b2b33 0%, #141418 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset, var(--shadow-lg), 0 50px 90px -40px rgba(0,0,0,.5); z-index: 1; } .phone::after { /* side buttons */ content: ""; position: absolute; right: -2px; top: 130px; width: 3px; height: 64px; border-radius: 3px; background: rgba(255,255,255,.10); box-shadow: 0 -86px 0 rgba(255,255,255,.10), 0 -130px 0 rgba(255,255,255,.10); } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: var(--screen-bg, #fff); display: flex; flex-direction: column; } .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 38%; height: 26px; background: #111; border-radius: 0 0 16px 16px; z-index: 6; } .phone-float { animation: floaty 7s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } /* status bar inside screens */ .scr-status { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px 6px; font-size: 12px; font-weight: 600; z-index: 5; } .scr-status .dots { display: flex; gap: 4px; align-items: center; } .scr-status .dots i { width: 15px; height: 9px; border-radius: 2px; background: currentColor; opacity:.85; display:inline-block; } /* ---------- Car Care app screen ---------- */ .scr-car { --screen-bg: #FAF3E3; background: #FAF3E3; color: #3F3733; } .scr-car .scr-status { color: #3F3733; } .scr-car .scr-body { padding: 4px 18px 18px; overflow: hidden; flex: 1; } .scr-car .scr-kicker { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8E332C; } .scr-car .scr-h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; color: #3F3733; } .car-card { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 11px; margin-top: 11px; box-shadow: 0 8px 18px -10px rgba(107,84,48,.4); } .car-card .plate { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; } .car-card .plate img { width: 36px; } .car-card .info { flex: 1; min-width: 0; } .car-card .info .name { font-weight: 700; font-size: 13.5px; color: #3F3733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .car-card .info .sub { font-size: 11px; color: #756A60; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .car-card .chip { font-size: 10px; font-weight: 700; padding: 5px 9px; border-radius: 999px; white-space: nowrap; } .chip-due { background: #FBDDD2; color: #8E332C; } .chip-ok { background: #DEF2E3; color: #3E8460; } .chip-soon { background: #FFF0C9; color: #7A5510; } .scr-car .add-btn { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #BC4A3D; color: #fff; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 999px; box-shadow: 0 4px 0 #8E332C; } /* Car detail / maintenance history screen */ .scr-car .svc-head { display:flex; align-items:baseline; justify-content:space-between; margin-top: 8px; } .scr-car .svc-section { font-size: 11px; font-weight: 700; color:#574C45; } .svc-list { margin-top: 8px; display:flex; flex-direction:column; gap:8px; } .svc-row { display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:10px; box-shadow: 0 6px 14px -9px rgba(107,84,48,.45); } .svc-row .svc-ico { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#FFF3E1;color:#BC4A3D;flex:none;} .svc-row .svc-ico svg{width:19px;height:19px;} .svc-row .svc-main{flex:1;min-width:0;} .svc-row .svc-name{font-weight:700;font-size:12.5px;color:#3F3733;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .svc-row .svc-meta{font-size:10px;color:#756A60;margin-top:2px;} .svc-row .svc-when{font-size:9.5px;font-weight:700;text-align:right;flex:none;padding:4px 7px;border-radius:999px;} /* push notification mock card */ .notif-card { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; padding: 13px 15px; box-shadow: var(--shadow-lg); width: min(330px, 80vw); } .notif-card .notif-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; background: var(--brand-grad); } .notif-card .notif-ico svg { width: 20px; height: 20px; } .notif-card .n-top { display:flex; justify-content:space-between; align-items:center; gap:8px; } .notif-card .n-app { font-size: 11px; font-weight: 700; letter-spacing:.02em; color:#3F3733; text-transform:uppercase; } .notif-card .n-time { font-size: 10.5px; color:#8B7E72; } .notif-card .n-title { font-weight: 700; font-size: 13.5px; color:#2A211D; margin-top:3px; } .notif-card .n-body { font-size: 12.5px; color:#574C45; margin-top:1px; line-height:1.4; } /* floating mascot */ .mascot-float { filter: drop-shadow(0 24px 30px rgba(107,84,48,.32)); animation: floaty 6s ease-in-out infinite; } /* ---------- Pillowy app screen ---------- */ .scr-pillow { --screen-bg: #1b1b30; background: linear-gradient(180deg, #2A2A4D 0%, #1F1F38 50%, #16161F 100%); color: #ECE9F5; } .scr-pillow .scr-status { color: #ECE9F5; } .scr-pillow .scr-body { padding: 6px 20px 20px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .scr-pillow .stars { position: absolute; inset: 0; pointer-events: none; } .scr-pillow .scr-step { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #A7A2C6; font-weight: 600; margin-top: 4px; } .scr-pillow .scr-muscle { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-top: 4px; color: #ECE9F5; } .breath-rings { position: relative; width: 168px; height: 168px; margin: 14px auto 6px; display: grid; place-items: center; } .breath-rings .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(182,166,233,.4); animation: breathe 6s ease-in-out infinite; } .breath-rings .ring.r2 { inset: 22px; border-color: rgba(182,166,233,.28); animation-delay: .4s; } .breath-rings .ring.r3 { inset: 44px; border-color: rgba(242,199,155,.4); animation-delay: .8s; } .breath-rings .pillow-mini { width: 78px; z-index: 2; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); } @keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.05); opacity: 1; } } .scr-pillow .guide { font-size: 13px; color: #D5D1E8; margin-top: 8px; max-width: 22ch; line-height: 1.5; } .scr-pillow .next-dot { margin-top: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(182,166,233,.16); border: 1px solid rgba(182,166,233,.4); display: grid; place-items: center; color: #B6A6E9; font-size: 22px; } /* Pillowy home screen bits */ .scr-pillow .home-pillow { width: 116px; margin: 10px auto 4px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); } .scr-pillow .home-title { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; } .scr-pillow .begin-btn { width: 100%; margin-top: 4px; background: linear-gradient(120deg,#B6A6E9,#9D8FD6); color: #1A1A2E; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 999px; text-align: center; box-shadow: 0 12px 26px -10px rgba(182,166,233,.6); } .scr-pillow .streak-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 13px; border-radius: 999px; background: rgba(242,199,155,.14); border: 1px solid rgba(242,199,155,.34); font-size: 12px; font-weight: 600; color: #F2C79B; } /* ---------- Volleyball Hero screenshot screens ---------- */ .phone.phone-volley { width: clamp(254px, 30vw, 330px); aspect-ratio: 9 / 16; padding: 10px; border-radius: 42px; background: linear-gradient(155deg, #303A5A 0%, #090D1E 72%); box-shadow: 0 0 0 2px rgba(114,215,255,.08) inset, var(--shadow-lg), 0 34px 90px -34px rgba(255,122,61,.42); } .phone-volley .phone-screen { border-radius: 32px; background: #0E1430; } .phone-volley .phone-notch { height: 22px; background: #080B18; } .scr-volley { background: #0E1430; } .scr-volley img { width: 100%; height: 100%; object-fit: cover; } .volley-icon-float { position: absolute; width: clamp(72px, 9vw, 104px); right: 2%; bottom: 2%; z-index: 4; border-radius: 24%; box-shadow: 0 18px 38px -14px rgba(2,6,23,.75), 0 0 0 1px rgba(255,255,255,.12); animation: floaty 6.4s ease-in-out infinite; } /* floating streak badge (page decoration) */ .streak-float { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 16px; background: rgba(38,38,67,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(242,199,155,.3); box-shadow: var(--shadow-lg); color: #ECE9F5; } .streak-float .sf-emoji { font-size: 22px; } .streak-float .sf-num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #F2C79B; } .streak-float .sf-label { font-size: .72rem; color: #B7B2D2; } /* Hero app switcher (three interactive phones + segmented control) */ .hero-switcher { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); } .hero-phones { position: relative; display: grid; place-items: center; width: 100%; min-height: clamp(540px, 60vw, 648px); } .hero-phones .phone { width: clamp(232px, 27vw, 286px); } .hero-phones .phone-card { position: absolute; cursor: pointer; border-radius: 46px; -webkit-tap-highlight-color: transparent; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .45s ease; } .hero-phones .phone-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 12px; } /* The active phone sits forward; the other two frame it from behind. */ .hero-phones[data-active="car"] .pc-car, .hero-phones[data-active="pillow"] .pc-pillow, .hero-phones[data-active="volley"] .pc-volley { transform: translate(0, 3%) rotate(0) scale(1); z-index: 3; opacity: 1; filter: none; } .hero-phones[data-active="car"] .pc-pillow, .hero-phones[data-active="pillow"] .pc-volley, .hero-phones[data-active="volley"] .pc-car { transform: translate(-39%, -4%) rotate(-9deg) scale(.7); z-index: 2; opacity: .74; filter: brightness(.78) saturate(.9); } .hero-phones[data-active="car"] .pc-volley, .hero-phones[data-active="pillow"] .pc-car, .hero-phones[data-active="volley"] .pc-pillow { transform: translate(39%, -4%) rotate(9deg) scale(.7); z-index: 1; opacity: .7; filter: brightness(.76) saturate(.88); } /* Hover lifts either inactive phone to signal that it is selectable. */ .hero-phones .phone-card:not(:focus):hover { opacity: .95; filter: brightness(.94) saturate(1); } /* segmented control */ .phone-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .theme-pillowy .phone-tabs { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .theme-volley .phone-tabs { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .phone-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--muted); transition: color .2s ease, background .3s ease, box-shadow .3s ease; } .phone-tab .t-ico { font-size: 1.02rem; line-height: 1; } .phone-tab:hover { color: var(--text); } .phone-tab.is-active { color: #fff; background: var(--brand-grad); box-shadow: var(--shadow-glow); } @media (max-width: 600px) { .hero-phones { min-height: 452px; } .hero-phones[data-active="car"] .pc-car, .hero-phones[data-active="pillow"] .pc-pillow, .hero-phones[data-active="volley"] .pc-volley { transform: translate(0, 3%) rotate(0) scale(.82); } .hero-phones[data-active="car"] .pc-pillow, .hero-phones[data-active="pillow"] .pc-volley, .hero-phones[data-active="volley"] .pc-car { transform: translate(-30%, -4%) rotate(-8deg) scale(.53); } .hero-phones[data-active="car"] .pc-volley, .hero-phones[data-active="pillow"] .pc-car, .hero-phones[data-active="volley"] .pc-pillow { transform: translate(30%, -4%) rotate(8deg) scale(.53); } .phone-tab { padding-inline: 12px; font-size: .82rem; } } /* ------------------------------------------------------------- 12. App showcase cards (homepage) ------------------------------------------------------------- */ .showcase { display: grid; gap: clamp(24px, 3vw, 36px); } .show-card { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 1fr 0.8fr; gap: 24px; align-items: center; border: 1px solid var(--line); box-shadow: var(--shadow-md); isolation: isolate; } .show-card .show-bg { position: absolute; inset: 0; z-index: -1; } .show-card.card-car { background: linear-gradient(135deg, #FFF7E8 0%, #FBE6D5 100%); color: #3F3733; } .show-card.card-pillow { background: linear-gradient(150deg, #2A2A4D 0%, #1A1A2E 100%); color: #ECE9F5; } .show-card.card-volley { background: linear-gradient(145deg, #172143 0%, #0C122C 72%); color: #FFF7EC; border-color: rgba(114,215,255,.15); } .show-card .tag { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; } .card-car .tag { background: rgba(217,95,82,.14); color: #BC4A3D; } .card-pillow .tag { background: rgba(182,166,233,.16); color: #C9BEF0; } .card-volley .tag { background: rgba(255,122,61,.14); color: #FF9A64; } .show-card h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 16px; font-weight: 800; letter-spacing: -.02em; } .card-car h3 { color: #3F3733; } .card-pillow h3 { color: #fff; } .card-volley h3 { color: #fff; } .show-card .show-tagline { margin-top: 8px; font-size: 1.05rem; font-weight: 500; } .card-car .show-tagline { color: #8E332C; } .card-pillow .show-tagline { color: #C9BEF0; } .card-volley .show-tagline { color: #FF9A64; } .show-card .show-desc { margin-top: 14px; font-size: .98rem; line-height: 1.6; max-width: 42ch; } .card-car .show-desc { color: #574C45; } .card-pillow .show-desc { color: #B7B2D2; } .card-volley .show-desc { color: #BEC7DE; } .show-points { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; } .show-points li { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 500; } .show-points li svg { width: 18px; height: 18px; flex: none; } .card-car .show-points li { color: #574C45; } .card-car .show-points svg { color: #BC4A3D; } .card-pillow .show-points li { color: #D5D1E8; } .card-pillow .show-points svg { color: #B6A6E9; } .card-volley .show-points li { color: #E2E7F3; } .card-volley .show-points svg { color: #35C4C8; } .show-card .show-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .show-visual { display: flex; align-items: center; justify-content: center; } .show-card .show-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding: 13px 24px; border-radius: 999px; } .card-car .show-cta { background: #BC4A3D; color: #fff; box-shadow: 0 14px 30px -12px rgba(188,74,61,.6); } .card-pillow .show-cta { background: linear-gradient(120deg,#B6A6E9,#9D8FD6); color: #1A1A2E; box-shadow: 0 14px 30px -12px rgba(182,166,233,.5); } .card-volley .show-cta { background: linear-gradient(120deg,#FF9A45,#FF5A5F); color: #fff; box-shadow: 0 14px 34px -12px rgba(255,122,61,.58); } .show-card .show-cta .arrow { transition: transform .25s; } .show-card .show-cta:hover .arrow { transform: translateX(4px); } .card-car .show-link { color: #BC4A3D; font-weight: 600; } .card-pillow .show-link { color: #C9BEF0; font-weight: 600; } .card-volley .show-link { color: #72D7FF; font-weight: 600; } /* ------------------------------------------------------------- 13. Feature cards ------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 32px); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; height: 100%; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .feature-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--brand-grad-soft); color: var(--accent); margin-bottom: 18px; } .feature-ico svg { width: 26px; height: 26px; } .feature-card h3 { font-size: 1.18rem; font-weight: 700; } .feature-card p { margin-top: 9px; font-size: .96rem; color: var(--muted); line-height: 1.58; } .theme-pillowy .feature-card { backdrop-filter: blur(10px); } .theme-volley .feature-card { backdrop-filter: blur(10px); } /* Volleyball Hero marketing stills */ .game-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); align-items: start; } .game-shot { overflow: hidden; border-radius: clamp(18px, 2.4vw, 28px); background: #111937; border: 1px solid rgba(114,215,255,.16); box-shadow: var(--shadow-md); } .game-shot:nth-child(2) { margin-top: clamp(24px, 5vw, 62px); } .game-shot img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; } .game-shot figcaption { padding: 14px 16px 16px; color: var(--muted); font-size: .86rem; line-height: 1.45; } .game-shot figcaption strong { color: var(--text); display: block; font-size: .94rem; } /* feature card with accent fill */ .feature-card.is-feature-lg { grid-column: span 1; } /* ------------------------------------------------------------- 14. Steps (how it works) ------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: step; } .step { position: relative; } .step .step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; background: var(--brand-grad); color: #fff; box-shadow: var(--shadow-sm); margin-bottom: 18px; } .step h3 { font-size: 1.22rem; } .step p { margin-top: 8px; color: var(--muted); font-size: .96rem; } .steps.connected .step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -20px; height: 2px; background: linear-gradient(90deg, var(--line-strong), transparent); } /* ------------------------------------------------------------- 15. Stat band ------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1; } .stat .num.grad-text { display: inline-block; } .stat .label { margin-top: 10px; font-size: .9rem; color: var(--muted); font-weight: 500; } /* ------------------------------------------------------------- 16. Marquee (language ticker) ------------------------------------------------------------- */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; gap: 14px; animation: marquee 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track .lang { flex: none; padding: 10px 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 500; font-size: .92rem; color: var(--text-soft); box-shadow: var(--shadow-xs); } .theme-pillowy .marquee-track .lang { backdrop-filter: blur(8px); } @keyframes marquee { to { transform: translateX(-50%); } } /* ------------------------------------------------------------- 17. Pricing (Pillowy) ------------------------------------------------------------- */ .pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 760px; margin-inline: auto; } .price-card { position: relative; border-radius: var(--r-lg); padding: clamp(26px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-glow); } .theme-pillowy .price-card { backdrop-filter: blur(12px); } .price-card .plan { font-weight: 600; font-size: 1.05rem; color: var(--text); } .price-tag { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; } .price-tag .amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem,4vw,2.8rem); letter-spacing: -.03em; } .price-tag .per { color: var(--muted); font-size: .95rem; font-weight: 500; } .price-card .billed { margin-top: 6px; font-size: .88rem; color: var(--muted); } .price-card .ribbon { position: absolute; top: 18px; right: 18px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--brand-grad); color: #1A1A2E; } .price-feats { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; } .price-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--text-soft); } .price-feats li svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; } .price-card .btn { margin-top: 24px; width: 100%; } /* ------------------------------------------------------------- 18. Science / split feature blocks ------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split.reverse .split-visual { order: -1; } .split-list { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; } .split-item { display: flex; gap: 16px; } .split-item .si-ico { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--brand-grad-soft); color: var(--accent); } .split-item h3 { font-size: 1.12rem; } .split-item p { margin-top: 5px; font-size: .95rem; color: var(--muted); } /* generic media frame */ .media-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--surface); } /* ------------------------------------------------------------- 19. CTA band ------------------------------------------------------------- */ .cta-band { position: relative; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 80px); text-align: center; overflow: hidden; color: #fff; isolation: isolate; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-grad); } .cta-band.dark::before { background: linear-gradient(135deg, #232038, #14121d); } .cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); } .cta-band p { color: rgba(255,255,255,.85); margin-top: 14px; max-width: 52ch; margin-inline: auto; } .cta-band .store-row { justify-content: center; margin-top: 30px; } .cta-band .orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .5; z-index: -1; } /* ------------------------------------------------------------- 20. Footer ------------------------------------------------------------- */ .footer { background: var(--footer-bg); color: var(--footer-text); padding-top: clamp(56px, 7vw, 88px); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; } .footer .brand { color: var(--footer-head); } .footer-blurb { margin-top: 16px; max-width: 32ch; font-size: .95rem; color: var(--footer-text); } .footer-col h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--footer-head); opacity: .7; font-family: var(--font-body); font-weight: 600; } .footer-col ul { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .footer-col a { color: var(--footer-text); font-size: .95rem; transition: color .2s; } .footer-col a:hover { color: var(--footer-head); } .footer-bottom { border-top: 1px solid var(--footer-line); padding-block: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: .88rem; color: var(--footer-text); } .footer-bottom .made { opacity: .8; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--footer-line); transition: background .2s, border-color .2s; } .footer-social a:hover { background: rgba(255,255,255,.08); } .footer-social svg { width: 18px; height: 18px; } /* ------------------------------------------------------------- 21. Reveal animations ------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .08s; } [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-reveal][data-delay="3"] { transition-delay: .24s; } [data-reveal][data-delay="4"] { transition-delay: .32s; } [data-reveal][data-delay="5"] { transition-delay: .40s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* ------------------------------------------------------------- 22. Utilities ------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mx-auto { margin-inline: auto; } .hide-mobile { } .full-bleed-soft { background: var(--bg-soft); } .relative { position: relative; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 200; } .skip-link:focus { left: 12px; top: 12px; } /* ------------------------------------------------------------- 22b. Prose (legal / article pages) + error page ------------------------------------------------------------- */ .page-hero { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 88px)); padding-bottom: clamp(24px, 4vw, 40px); } .prose { max-width: 760px; } /* Long legal articles can never reach the observer's percentage threshold on a short mobile viewport; keep the article itself visible and animate only the compact page-hero elements around it. */ .prose[data-reveal] { opacity: 1; transform: none; transition: none; } .prose > p:first-of-type { font-size: 1.1rem; color: var(--text-soft); } .prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 44px; } .prose h3 { font-size: 1.12rem; margin-top: 28px; } .prose p, .prose li { color: var(--muted); font-size: 1rem; line-height: 1.7; } .prose p { margin-top: 14px; } .prose ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .prose li { padding-left: 26px; position: relative; } .prose li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .prose a.feature-card { text-decoration: none; } .prose .muted-note { font-size: .9rem; } .error-wrap { min-height: 76vh; display: grid; place-items: center; text-align: center; padding-top: var(--nav-h); } .error-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 18vw, 11rem); line-height: .9; letter-spacing: -.04em; } /* ------------------------------------------------------------- 23. Responsive ------------------------------------------------------------- */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-copy { text-align: center; margin-inline: auto; max-width: 640px; } .hero-copy .lead { margin-inline: auto; } .hero-cta, .hero-meta { justify-content: center; } .show-card { grid-template-columns: 1fr; } .show-visual { order: -1; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; gap: 28px; } .steps.connected .step::after { display: none !important; } .split { grid-template-columns: 1fr; gap: 36px; } .split.reverse .split-visual { order: 0; } .stats { grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 980px) { .nav-links, .nav-actions .btn:not(.nav-cta-mobile) { display: none; } .nav-toggle { display: inline-flex; } .nav-mobile { position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--nav-border); box-shadow: var(--shadow-lg); padding: 18px var(--gutter) 28px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; z-index: 99; } body.nav-open .nav-mobile { transform: none; opacity: 1; pointer-events: auto; } .nav-mobile a { padding: 14px 8px; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line); color: var(--text); } .nav-mobile .btn { margin-top: 16px; width: 100%; } .pricing { grid-template-columns: 1fr; } .show-card .show-actions { justify-content: flex-start; } .game-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game-shot:nth-child(2) { margin-top: 24px; } } @media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); gap: 26px; } .store-row { width: 100%; } .store-badge { flex: 1; min-width: 0; } .btn { width: 100%; } .hero-cta .btn, .show-actions .show-cta { width: 100%; } .game-gallery { grid-template-columns: 1fr; max-width: 330px; margin-inline: auto; } .game-shot:nth-child(2) { margin-top: 0; } } /* hide desktop-only nav cta on mobile inside the bar (we surface it in the panel) */ .nav-mobile { display: none; } @media (max-width: 980px) { .nav-mobile { display: flex; } }