/* ============================================================ smarterbrain.ai, design system Award-winning, but kind. Green + light grey. Mobile-first. ============================================================ */ /* Self-hosted fonts (latin subset, variable) - CSP default-src 'self' */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/hanken.woff2') format('woff2');} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage.woff2') format('woff2');} /* ============================== TOKENS ============================== */ :root { /* Surfaces */ --paper: #ffffff; --mist: #f4f8f5; --cloud: #e8efea; --line: oklch(0.92 0.012 158); --line-strong: oklch(0.86 0.018 158); /* Ink */ --ink: #15241c; --ink-soft: #41544a; --ink-faint: #6c7d73; /* Greens, the hero */ --g-900: #103a28; --g-800: #155f40; --g-700: #1f7a52; --g-600: #248a5e; --g-500: #2fae74; --g-400: #58c592; --g-300: #8fd9b6; --g-200: #bfead4; --g-100: #dff3e9; --g-50: #eef9f2; /* Roles (default theme = "grove") */ --accent: var(--g-700); --accent-strong: var(--g-800); --accent-bright: var(--g-500); --accent-soft: var(--g-100); --accent-tint: var(--g-50); --on-accent: #ffffff; --focus: #0f6b45; /* Type */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --fs-display: clamp(2.55rem, 6.2vw, 4.6rem); --fs-h1: clamp(2.1rem, 4.6vw, 3.2rem); --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem); --fs-h3: clamp(1.2rem, 1.6vw, 1.4rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.3rem); --fs-body: 1.0625rem; --fs-small: 0.9rem; --fs-eyebrow: 0.8rem; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radius */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px; /* Shadow, green-tinted, soft depth */ --sh-1: 0 1px 2px oklch(0.5 0.04 158 / 0.06), 0 2px 8px oklch(0.5 0.04 158 / 0.06); --sh-2: 0 4px 12px oklch(0.5 0.05 158 / 0.08), 0 12px 28px oklch(0.5 0.05 158 / 0.07); --sh-3: 0 10px 24px oklch(0.5 0.06 158 / 0.10), 0 26px 54px oklch(0.5 0.06 158 / 0.10); --sh-glow: 0 14px 44px oklch(0.62 0.12 158 / 0.28); /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: 160ms; --t: 320ms; --t-slow: 620ms; /* Layout */ --maxw: 1180px; --gut: clamp(20px, 5vw, 56px); } /* Alternate themes (set via Tweaks: data-theme on ) */ :root[data-theme="sage"] { --accent: #2a7a57; --accent-strong: #1d5e42; --accent-bright: #46b487; --focus: #1d6b4b; } :root[data-theme="forest"] { --accent: #185c3c; --accent-strong: #103f2a; --accent-bright: #2fae74; --focus: #0e4a31; } /* Type personality swap (data-type on ) */ :root[data-type="rounded"] { --font-display: 'Hanken Grotesk', system-ui, sans-serif; } /* ============================== RESET ============================== */ *, *::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; } } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } /* ============================== LAYOUT ============================== */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(56px, 9vw, 120px); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: var(--s-2); } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent-bright); } h1, h2, h3 { font-family: var(--font-display); line-height: 1.06; letter-spacing: -0.015em; font-weight: 600; } h2.section-title { font-size: var(--fs-h2); margin-top: var(--s-3); max-width: 18ch; } .lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; } .center { text-align: center; } .center .section-title, .center .lead { margin-inline: auto; } .center .eyebrow::before { display: none; } .center .eyebrow { letter-spacing: 0.16em; } /* ============================== BUTTONS ============================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 14px 24px; border-radius: var(--r-pill); transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); white-space: nowrap; line-height: 1; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-glow); } .btn--primary:hover { background: var(--accent-strong); transform: translateY(-2px); } .btn--primary:active { transform: translateY(0); } .btn--ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-strong); transform: translateY(-2px); } .btn--soft { background: var(--accent-soft); color: var(--accent-strong); } .btn--soft:hover { background: var(--g-200); } .btn--lg { padding: 17px 30px; font-size: 1.06rem; } .btn--block { width: 100%; } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } /* ============================== NAV ============================== */ .nav { position: sticky; top: 0; z-index: 60; background: oklch(1 0 0 / 0.78); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t), background var(--t); } .nav.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-1); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; } .brand__mark { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 3px 6px oklch(0.6 0.1 158 / 0.25)); } .brand b { color: var(--ink); font-weight: 700; } .brand span { color: var(--accent); } .nav__links { display: none; align-items: center; gap: var(--s-6); } .nav__links a { font-weight: 500; color: var(--ink-soft); font-size: 0.98rem; position: relative; padding: 6px 0; transition: color var(--t-fast); } .nav__links a:hover { color: var(--ink); } .nav__links a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--accent-bright); border-radius:2px; transition: width var(--t) var(--ease); } .nav__links a:hover::after { width: 100%; } .nav__cta { display: none; } .nav__menu { display: inline-flex; } @media (min-width: 880px) { .nav__links, .nav__cta { display: flex; } .nav__menu { display: none; } } .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); } .menu-btn:hover { background: var(--mist); } .menu-btn svg { width: 24px; height: 24px; } /* Mobile sheet */ .sheet { position: fixed; inset: 0; z-index: 80; display: none; } .sheet[data-open="true"] { display: block; } .sheet__scrim { position: absolute; inset: 0; background: oklch(0.2 0.03 158 / 0.4); opacity: 0; transition: opacity var(--t); } .sheet[data-open="true"] .sheet__scrim { opacity: 1; } .sheet__panel { position: absolute; top: 12px; right: 12px; left: 12px; background: var(--paper); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-3); transform: translateY(-12px); opacity: 0; transition: transform var(--t) var(--ease), opacity var(--t); } .sheet[data-open="true"] .sheet__panel { transform: none; opacity: 1; } .sheet__panel a { display: block; padding: 14px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: 1.1rem; } .sheet__panel a:hover { background: var(--mist); } .sheet__panel .btn { margin-top: var(--s-3); } .sheet__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); } /* ============================== HERO ============================== */ .hero { position: relative; overflow: hidden; padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(48px, 8vw, 104px); } .hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 82% 8%, var(--g-50), transparent 70%), radial-gradient(50% 60% at 6% 96%, var(--accent-tint), transparent 70%), var(--paper); } .hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; } @media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } } .hero__title { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.025em; max-width: 16ch; } .hero__title em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; } .hero__title em::after { content:""; position:absolute; left:-2%; right:-2%; bottom: 0.06em; height: 0.32em; z-index:-1; background: var(--g-200); border-radius: var(--r-pill); opacity: .7; } .hero__lead { margin-top: var(--s-5); max-width: 46ch; } .hero__cta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .hero__assure { margin-top: var(--s-5); display: inline-flex; align-items: center; gap: var(--s-3); font-size: 0.96rem; color: var(--ink-soft); font-weight: 500; } .hero__assure .lockpill { width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); flex: none; } .hero__assure .lockpill svg { width: 16px; height: 16px; } /* Hero visual, privacy device card + mascot */ .hero__visual { position: relative; display: grid; place-items: center; min-height: 340px; } .hero__blob { position: absolute; inset: 6% 4%; background: linear-gradient(150deg, var(--g-100), var(--accent-tint)); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; filter: blur(2px); z-index: 0; } .device { position: relative; z-index: 2; width: min(380px, 92%); background: var(--paper); border-radius: 12px; box-shadow: var(--sh-3); border: 1px solid var(--line); overflow: hidden; } /* Windows 11 window chrome */ .winbar { display: flex; align-items: stretch; justify-content: space-between; height: 38px; border-bottom: 1px solid var(--line); background: var(--mist); } .winbar__title { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; } .winbar__icon { width: 16px; height: 16px; flex: none; } .winbar__sub { color: var(--ink-faint); font-weight: 500; } .winbar__ctl { display: flex; align-items: stretch; flex: none; } .winbtn { width: 42px; display: grid; place-items: center; color: var(--ink-soft); transition: background var(--t-fast), color var(--t-fast); } .winbtn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; } .winbtn--min:hover, .winbtn--max:hover { background: oklch(0.2 0.03 158 / 0.07); } .winbtn--close:hover { background: #c42b1c; color: #fff; } .device__body { padding: var(--s-5); } .checkrow { display: flex; align-items: center; gap: var(--s-3); padding: 11px 0; border-bottom: 1px dashed var(--line); } .checkrow:last-child { border-bottom: 0; } .checkrow .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex: none; } .checkrow .tick svg { width: 15px; height: 15px; } .checkrow .lbl { font-weight: 600; font-size: 0.96rem; } .checkrow .sub { font-size: 0.8rem; color: var(--ink-faint); } .checkrow .grow { flex: 1; } .checkrow .stat { font-size: 0.78rem; font-weight: 700; color: var(--accent-strong); background: var(--accent-tint); padding: 3px 10px; border-radius: var(--r-pill); } .device__foot { margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-2); font-size: 0.8rem; color: var(--ink-soft); background: var(--accent-tint); border-radius: var(--r-md); padding: 11px 14px; } .device__foot svg { width: 16px; height: 16px; color: var(--accent-strong); flex: none; } .hero__mascot { position: absolute; z-index: 3; width: clamp(86px, 16vw, 124px); right: -2%; bottom: -3%; filter: drop-shadow(0 12px 22px oklch(0.5 0.1 158 / 0.3)); } .float { animation: float 6s var(--ease) infinite; } @keyframes float { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-10px) rotate(2deg);} } /* Trust strip */ .trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mist); } .trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-7); padding-block: var(--s-5); } .trust__item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); } .trust__item svg { width: 18px; height: 18px; color: var(--accent); } /* ============================== HOW IT WORKS ============================== */ .cards3 { display: grid; gap: var(--s-5); margin-top: var(--s-7); } @media (min-width: 760px) { .cards3 { grid-template-columns: repeat(3, 1fr); } } .feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); } .feature:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--g-200); } .feature__icon { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; margin-bottom: var(--s-4); } .feature__icon svg { width: 28px; height: 28px; } .feature__n { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; } .feature h3 { font-size: var(--fs-h3); margin: 6px 0 var(--s-3); } .feature p { color: var(--ink-soft); font-size: 1rem; } /* ============================== PLAYBOOKS ============================== */ .pb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); } .pb-grid { display: grid; gap: var(--s-5); margin-top: var(--s-7); } @media (min-width: 620px) { .pb-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .pb-grid { grid-template-columns: repeat(3, 1fr); } } .playbook { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); } .playbook:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--g-200); } .playbook:focus-within { border-color: var(--accent); } .playbook__cover { aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(135deg, oklch(1 0 0 / .35) 0 2px, transparent 2px 12px), linear-gradient(150deg, var(--cov-a, var(--g-100)), var(--cov-b, var(--g-200))); } .playbook__glyph { width: 64px; height: 64px; color: var(--accent-strong); opacity: .9; } .playbook__glyph svg { width: 100%; height: 100%; } .playbook__chip { position: absolute; top: 12px; left: 12px; font-size: 0.74rem; font-weight: 700; letter-spacing: .03em; color: var(--accent-strong); background: oklch(1 0 0 / .82); padding: 5px 11px; border-radius: var(--r-pill); backdrop-filter: blur(4px); } .playbook__body { padding: var(--s-5); display: flex; flex-direction: column; gap: 8px; flex: 1; } .playbook h3 { font-size: 1.18rem; letter-spacing: -0.01em; } .playbook h3 a::after { content:""; position:absolute; inset:0; } .playbook p { color: var(--ink-soft); font-size: 0.96rem; } .playbook__meta { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; gap: var(--s-3); font-size: 0.84rem; color: var(--ink-faint); font-weight: 600; } .playbook__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); } .playbook__go { margin-left: auto; color: var(--accent); display: inline-flex; transition: transform var(--t) var(--ease); } .playbook:hover .playbook__go { transform: translateX(4px); } .playbook__go svg { width: 18px; height: 18px; } /* ============================== PRIVACY PROMISE ============================== */ .privacy { background: radial-gradient(70% 90% at 100% 0%, oklch(0.32 0.07 158 / 0.5), transparent 60%), linear-gradient(165deg, var(--g-900), #0c2f20); color: #eaf6ef; position: relative; overflow: hidden; } .privacy::before { content:""; position:absolute; inset:0; z-index:0; opacity:.5; background: repeating-linear-gradient(135deg, oklch(1 0 0 / .03) 0 1px, transparent 1px 22px); } .privacy .wrap { position: relative; z-index: 1; } .privacy__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; } @media (min-width: 940px) { .privacy__grid { grid-template-columns: 1fr 1fr; } } .privacy .eyebrow { color: var(--g-300); } .privacy .eyebrow::before { background: var(--g-400); } .privacy h2 { font-size: var(--fs-h2); color: #fff; max-width: 16ch; margin-top: var(--s-3); } .privacy__lead { margin-top: var(--s-4); color: oklch(0.92 0.03 158); font-size: var(--fs-lead); max-width: 44ch; } .privacy__list { margin-top: var(--s-6); display: grid; gap: var(--s-4); } .privacy__list li { display: flex; gap: var(--s-3); align-items: flex-start; } .privacy__list .pin { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: oklch(1 0 0 / .12); color: var(--g-300); } .privacy__list .pin svg { width: 17px; height: 17px; } .privacy__list b { color: #fff; font-weight: 600; } .privacy__list span { display: block; color: oklch(0.86 0.03 158); font-size: 0.96rem; } /* Boundary diagram */ .boundary { position: relative; background: oklch(1 0 0 / .05); border: 1.5px solid oklch(1 0 0 / .14); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px); } .boundary__label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-300); } .boundary__label svg { width: 16px; height: 16px; flex: none; } .boundary__pc { margin-top: var(--s-4); border: 1.5px dashed var(--g-400); border-radius: var(--r-lg); padding: var(--s-5); background: oklch(0.18 0.04 158 / .4); position: relative; } .boundary__pc::after { content: "YOUR PC"; position: absolute; top: -10px; left: 18px; font-size: 0.66rem; font-weight: 800; letter-spacing: .14em; color: var(--g-300); background: #0e3324; padding: 2px 10px; border-radius: var(--r-pill); } .boundary__dots { display: flex; flex-wrap: wrap; gap: 10px; } .boundary__dots i { width: 34px; height: 34px; border-radius: var(--r-sm); background: oklch(1 0 0 / .1); display: grid; place-items: center; color: var(--g-300); } .boundary__dots i svg { width: 17px; height: 17px; } .boundary__flow { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-3); justify-content: center; color: oklch(0.8 0.03 158); font-size: 0.85rem; font-weight: 600; } .boundary__flow .x { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: oklch(1 0 0 / .08); color: var(--g-300); } .boundary__flow .x svg { width: 15px; height: 15px; } .boundary__cloud { display: inline-flex; align-items: center; gap: 7px; opacity: .55; } .boundary__cloud svg { width: 22px; height: 22px; } .boundary__cap { margin-top: var(--s-4); text-align: center; font-size: 0.86rem; color: oklch(0.88 0.03 158); } .boundary__cap b { color: #fff; } /* ============================== ADVISORY ============================== */ .advisory { background: var(--mist); } .advisory__card { display: flex; gap: var(--s-5); align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--sh-1); } .advisory__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex: none; } .advisory__icon svg { width: 26px; height: 26px; } .advisory h3 { font-size: 1.3rem; margin-bottom: 6px; } .advisory p { color: var(--ink-soft); max-width: 64ch; } .advisory a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ============================== EARLY ACCESS ============================== */ .cta { position: relative; overflow: hidden; } .cta__card { position: relative; border-radius: var(--r-2xl); overflow: hidden; background: radial-gradient(80% 120% at 0% 0%, var(--g-600), var(--g-800) 70%); color: #fff; padding: clamp(36px, 6vw, 72px); text-align: center; box-shadow: var(--sh-3); } .cta__card::before { content:""; position:absolute; inset:0; opacity:.4; background: repeating-linear-gradient(135deg, oklch(1 0 0 / .05) 0 1px, transparent 1px 20px); } .cta__card > * { position: relative; } .cta__mascot { width: 92px; height: 92px; margin: 0 auto var(--s-3); filter: drop-shadow(0 10px 20px oklch(0.2 0.06 158 / 0.4)); } .cta h2 { font-size: var(--fs-h2); color: #fff; max-width: 18ch; margin: var(--s-3) auto 0; } .cta .eyebrow { color: var(--g-200); justify-content: center; } .cta .eyebrow::before { display:none; } .cta p { color: oklch(0.92 0.03 158); margin: var(--s-4) auto 0; max-width: 44ch; font-size: var(--fs-lead); } .form { margin: var(--s-6) auto 0; max-width: 460px; } .form__row { display: flex; gap: var(--s-3); flex-direction: column; } @media (min-width: 520px) { .form__row { flex-direction: row; } } .input { flex: 1; padding: 15px 18px; border-radius: var(--r-pill); border: none; background: oklch(1 0 0 / .94); color: var(--ink); font: inherit; font-size: 1rem; box-shadow: inset 0 0 0 1.5px transparent; } .input::placeholder { color: var(--ink-faint); } .input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .cta .btn--primary { background: #fff; color: var(--accent-strong); box-shadow: var(--sh-2); } .cta .btn--primary:hover { background: var(--g-50); } .form__note { margin-top: var(--s-4); font-size: 0.84rem; color: oklch(0.9 0.03 158); display: inline-flex; gap: 8px; align-items: center; justify-content: center; } .form__note svg { width: 15px; height: 15px; } .form__ok { display: none; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 1.05rem; padding: 15px; } .form[data-sent="true"] .form__row, .form[data-sent="true"] .form__note { display: none; } .form[data-sent="true"] .form__ok { display: flex; } .form__ok svg { width: 22px; height: 22px; } /* ============================== FOOTER ============================== */ .footer { background: #0e2419; color: oklch(0.84 0.02 158); padding-block: var(--s-8) var(--s-6); } .footer__top { display: grid; gap: var(--s-7); } @media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .footer__brand .brand b { color: #fff; } .footer__brand .brand span { color: var(--g-300); } .footer__brand p { margin-top: var(--s-4); font-size: 0.94rem; max-width: 34ch; color: oklch(0.78 0.02 158); } .footer__social { margin-top: var(--s-5); display: flex; gap: var(--s-3); } .footer__social a { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: oklch(1 0 0 / .06); color: oklch(0.86 0.02 158); transition: background var(--t), color var(--t), transform var(--t-fast); } .footer__social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); } .footer__social svg { width: 20px; height: 20px; } .footer__col h4 { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: .1em; text-transform: uppercase; color: oklch(0.7 0.02 158); margin-bottom: var(--s-4); font-weight: 700; } .footer__col a { display: block; padding: 6px 0; font-size: 0.96rem; color: oklch(0.82 0.02 158); transition: color var(--t-fast); } .footer__col a:hover { color: #fff; } .footer__disc { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid oklch(1 0 0 / .08); display: flex; gap: var(--s-4); align-items: flex-start; } .footer__disc svg { width: 18px; height: 18px; color: var(--g-300); flex: none; margin-top: 2px; } .footer__disc p { font-size: 0.84rem; color: oklch(0.72 0.02 158); line-height: 1.6; max-width: 86ch; } .footer__bar { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; font-size: 0.84rem; color: oklch(0.66 0.02 158); } .footer__bar a { color: oklch(0.78 0.02 158); } .footer__bar a:hover { color: #fff; } /* ============================== COOKIE CONSENT ============================== */ .cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 440px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s-5); display: none; } .cookie.is-in { display: block; animation: cookieIn var(--t-slow) var(--ease-out) both; } @keyframes cookieIn { from { transform: translateY(130%); opacity: 0; } to { transform: none; opacity: 1; } } .cookie__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); } .cookie__head img { width: 30px; height: 30px; } .cookie__head b { font-family: var(--font-display); font-size: 1.02rem; } .cookie p { font-size: 0.9rem; color: var(--ink-soft); } .cookie p a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; } .cookie__btns { display: flex; gap: var(--s-3); margin-top: var(--s-4); } .cookie__btns .btn { flex: 1; padding: 11px 16px; font-size: 0.94rem; } @media (prefers-reduced-motion: reduce) { .cookie.is-in { animation: none; } } /* ============================== REVEAL MOTION ============================== */ /* Visible by default (robust: if JS/paint never runs, content still shows). JS adds .is-primed to BELOW-the-fold elements; removing it animates them in. */ .reveal { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .reveal.is-primed { opacity: 0; transform: translateY(22px); } .reveal[data-d="1"] { transition-delay: 80ms; } .reveal[data-d="2"] { transition-delay: 160ms; } .reveal[data-d="3"] { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-primed { opacity: 1 !important; transform: none !important; transition: none; } .float { animation: none; } } /* Skip link */ .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600; transition: top var(--t); } .skip:focus { top: 16px; } /* Mascot visibility (Tweaks: data-mascot on ) */ :root[data-mascot="hero"] .hero__mascot { width: clamp(110px, 21vw, 168px); } :root[data-mascot="minimal"] .hero__mascot { display: none; } :root[data-mascot="minimal"] .device { width: min(420px, 96%); }