@font-face { font-family: Fredoka; src: url('/assets/fonts/Fredoka-Variable.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
:root { color-scheme: light; --background:#FBF4E8; --surface:#fff; --surface-alt:#F3E6D2; --border:#EAD7BC; --text:#3B2A1E; --muted:#6E5440; --accent:#F28C28; --accent-text:#A8520F; --on-accent:#3B2A1E; --capy:#A67550; --leaf:#3E6B2E; --danger:#B3261E; --shadow:0 22px 70px rgba(96,61,34,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --background:#1C1510; --surface:#2A2019; --surface-alt:#3A2C22; --border:#4A3A2E; --text:#F6EBDD; --muted:#C9B39C; --accent:#F59A3E; --accent-text:#F59A3E; --on-accent:#1C1510; --capy:#B98760; --leaf:#8DBA74; --danger:#F2877F; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { content:url('/assets/svg/wordmark-dark.svg'); } :root:not([data-theme="light"]) .hero-art > img { content:url('/assets/mascot/capy-dark-1024.png'); } :root:not([data-theme="light"]) .cta > img { content:url('/assets/mascot/poses/capy-sleeping-dark.png'); } :root:not([data-theme="light"]) .account-mascot { content:url('/assets/mascot/capy-dark-256.png'); } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--background); color:var(--text); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:inherit; } button { font:inherit; } :focus { outline:none; } :focus-visible { outline:3px solid var(--accent-text); outline-offset:4px; } .skip-link { position:absolute; left:16px; top:12px; z-index:10; padding:8px 12px; border-radius:8px; background:var(--surface); color:var(--text); transform:translateY(-160%); } .skip-link:focus { transform:none; }
.site-header,.site-footer { width:min(1180px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; } .site-header { padding:24px 0; } .site-footer { padding:40px 0 28px; border-top:1px solid var(--border); color:var(--muted); font-size:14px; } .site-footer nav { display:flex; gap:20px; } .site-footer a,.site-nav a,.text-link { text-decoration:none; } .site-footer a:hover,.site-nav a:hover,.text-link:hover { color:var(--accent-text); }
.brand { display:block; width:116px; height:45px; } .brand img { display:block; width:100%; height:100%; object-fit:contain; } .site-nav { display:flex; align-items:center; gap:24px; font-size:14px; } .nav-login { color:var(--accent-text); } .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:44px; padding:11px 20px; border:0; border-radius:999px; background:var(--accent); color:var(--on-accent); font-weight:700; text-decoration:none; cursor:pointer; } .button:hover { filter:brightness(.96); } .button-small { min-height:40px; padding:8px 16px; font-size:14px; } .button-quiet { background:var(--surface-alt); color:var(--text); } .text-link { display:inline-flex; align-items:center; gap:8px; color:var(--accent-text); font-weight:700; } .eyebrow { margin:0 0 12px; color:var(--accent-text); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero { width:min(1180px,calc(100% - 48px)); min-height:650px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px, .9fr); align-items:center; gap:32px; } .hero-copy { padding:64px 0; } h1,h2,h3 { font-family:Fredoka,ui-rounded,system-ui,sans-serif; line-height:1.08; letter-spacing:-.025em; } h1 { max-width:560px; margin:0 0 24px; font-size:clamp(64px,10vw,122px); font-weight:700; } h1 span { color:var(--accent-text); } h2 { margin:0 0 18px; font-size:clamp(36px,5vw,64px); } h3 { margin:0 0 10px; font-size:24px; } .hero-lede { max-width:520px; margin:0; color:var(--muted); font-size:20px; line-height:1.5; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:32px; } .hero-note { margin-top:20px; color:var(--muted); font-size:13px; } .hero-art { position:relative; display:grid; place-items:center; min-height:510px; } .hero-art img { position:relative; z-index:1; width:min(100%,420px); height:auto; } .sun { position:absolute; width:340px; height:340px; border-radius:50%; background:var(--surface-alt); } .art-caption { position:absolute; right:0; bottom:34px; z-index:2; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted); font-size:13px; }
.promise { padding:110px 0; background:var(--surface); } .section-heading,.feature-grid,.split-section,.cta { width:min(1180px,calc(100% - 48px)); margin:auto; } .section-heading { margin-bottom:40px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .feature-card { padding:28px; border:1px solid var(--border); border-radius:20px; background:var(--background); } .feature-card p,.split-section p,.download-card p,.notice span,.prose p { color:var(--muted); } .feature-number { display:block; margin-bottom:54px; color:var(--accent-text); font:700 14px Fredoka,system-ui,sans-serif; }
.split-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:120px 0; } .split-section p { max-width:520px; } .availability-card { padding:10px 24px; border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); } .availability-row { display:flex; align-items:center; gap:14px; padding:20px 0; border-bottom:1px solid var(--border); } .availability-row:last-child { border-bottom:0; } .availability-row div { display:grid; gap:2px; } .availability-row span:not(.status-dot) { color:var(--muted); font-size:13px; } .status-dot { width:12px; height:12px; border-radius:50%; } .status-ready { background:var(--leaf); } .status-prep { background:var(--accent); }
.cta { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:100px; padding:42px; border-radius:32px; background:var(--surface-alt); text-align:left; } .cta h2 { max-width:490px; font-size:clamp(32px,4vw,52px); } .cta img { align-self:end; }
.narrow-page { width:min(860px,calc(100% - 48px)); margin:0 auto; padding:90px 0 120px; } .narrow-page h1 { margin-bottom:20px; font-size:clamp(52px,8vw,86px); } .page-lede { max-width:650px; color:var(--muted); font-size:19px; } .download-list { display:grid; gap:14px; margin:45px 0; } .download-card { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px; border:1px solid var(--border); border-radius:20px; background:var(--surface); } .download-card h2 { margin:5px 0 6px; font-size:30px; } .download-card p { max-width:560px; margin:0; font-size:14px; } .platform-label { color:var(--accent-text); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .availability-badge { flex:none; padding:8px 12px; border-radius:999px; background:var(--surface-alt); color:var(--muted); font-size:13px; font-weight:700; } .notice { display:grid; gap:8px; padding:20px 24px; border-left:4px solid var(--accent); background:var(--surface-alt); } .notice strong { font-family:Fredoka,system-ui,sans-serif; font-size:20px; }
.account-page { min-height:100vh; } .account-shell { width:min(620px,calc(100% - 48px)); margin:auto; padding:70px 0 110px; } .account-card { padding:48px; border:1px solid var(--border); border-radius:32px; background:var(--surface); box-shadow:var(--shadow); text-align:center; } .account-mascot { margin:0 auto 20px; } .account-card h1 { margin:0 auto 16px; font-size:clamp(42px,7vw,68px); } .account-card p { color:var(--muted); } .account-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:30px 0 20px; } .account-status { min-height:26px; color:var(--muted); font-size:14px; } .account-status[data-state="warning"] { color:var(--danger); } .account-status[data-state="success"] { color:var(--leaf); } .account-help { margin:28px auto; font-size:13px; max-width:420px; } .prose h2 { margin-top:44px; font-size:32px; } .prose p { max-width:720px; }
[aria-disabled="true"] { cursor:not-allowed; opacity:.55; } @media (max-width:760px) { .site-header,.site-footer { width:calc(100% - 32px); } .site-header { align-items:flex-start; } .site-nav { flex-wrap:wrap; justify-content:flex-end; gap:10px 16px; } .site-nav a:not(.button):nth-child(1) { display:none; } .hero { width:calc(100% - 32px); min-height:auto; grid-template-columns:1fr; padding-top:36px; } .hero-copy { padding:20px 0 0; } .hero-art { min-height:330px; } .hero-art img { width:280px; } .sun { width:260px; height:260px; } .art-caption { right:8%; bottom:16px; } .promise { padding:72px 0; } .section-heading,.feature-grid,.split-section,.cta { width:calc(100% - 32px); } .feature-grid,.split-section { grid-template-columns:1fr; } .split-section { gap:35px; padding:80px 0; } .cta { margin-bottom:70px; padding:26px; } .cta img { width:120px; height:120px; } .download-card { align-items:flex-start; flex-direction:column; } .account-card { padding:30px 22px; } .narrow-page { width:calc(100% - 32px); padding:60px 0 80px; } .site-footer { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; } }