/* base.css — shared chrome for parkboxd.com. Loaded FIRST on every page. Owns tokens, reset, common body, beta banner, nav, footer, buttons, .eyebrow, the platform availability row, and :focus-visible rings. Home-only sections live in styles.css; content-only extras in legal.css. */ :root{ /* Warm-coral design system: neutral canvas, warm off-white text, coral accent, non-red status (orange high, slate down). --red equals the warm high tone and is used by assets/app.js waitColor(). */ --canvas:#0C0C0E; --s0:#101012; --s1:#151517; --s2:#1C1C20; --s3:#26262B; --line:#26262B; --line2:#34343A; /* --ink: the deep near-black used for text on the coral accent and the phone device body; --notch: the true-black status island / notch. */ --ink:#05060a; --notch:#000; /* One named easing for interactive hovers/reveals — consistent motion. */ --ease:cubic-bezier(.25,.1,.25,1); --hi:#F0EBE3; --bd:#A8A29C; --mut:#A8A29C; --dim:#6E6A66; --accent:#ED6363; --accent-press:#D85555; --green:#7BA86E; --amber:#D8A24A; --orange:#D96B3A; --down:#6B7A8A; --red:#D96B3A; --gold:#E8B45A; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--canvas);color:var(--bd);font-family:"Inter",system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;position:relative} .mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums} .disp{font-family:"Space Grotesk",sans-serif;letter-spacing:-.03em} a{color:inherit;text-decoration:none} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} /* Focus rings — visible :focus-visible on every interactive element (was absent site-wide, an a11y gap). Keyboard/AT users get a clear coral ring; mouse users don't (that's the :focus-visible contract). */ a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* iOS TestFlight beta banner. Hidden by default; the inline head script adds .pbx-beta-on to before paint so it never blocks content without JS. */ #beta-banner{display:none} .pbx-beta-on #beta-banner{display:flex} .beta-banner{align-items:center;gap:10px;background:var(--s1);border-bottom:1px solid var(--line);padding:8px 16px;font-family:"Inter",system-ui,sans-serif;font-size:13px;line-height:1.3;color:var(--bd)} .beta-banner .bb-mark{width:18px;height:18px;border-radius:4px;flex:0 0 auto;display:block} .beta-banner .bb-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hi)} .beta-banner a.bb-text:hover{text-decoration:none} .beta-banner .bb-join{flex:0 0 auto;background:var(--accent);color:var(--ink);font-weight:700;font-size:12px;border-radius:999px;padding:5px 13px;text-decoration:none;white-space:nowrap} .beta-banner a.bb-join:hover{text-decoration:none} .beta-banner .bb-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:transparent;color:var(--dim);font-size:17px;line-height:1;cursor:pointer;border-radius:6px} .beta-banner .bb-close:hover{color:var(--hi)} /* Section kicker / eyebrow — Space Grotesk semibold, sentence case, muted (not mono, not tracked-caps, not coral). No text-transform. */ .eyebrow{font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:-.01em;color:var(--mut);font-weight:600} /* Buttons — one implementation for home + content pages. */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;border-radius:11px;padding:11px 18px;transition:background .15s var(--ease),border-color .15s var(--ease)} .btn.primary{background:var(--accent);color:var(--ink)} .btn.primary:hover{background:var(--accent-press)} .btn svg{width:16px;height:16px;stroke-width:2.2} /* Quiet iOS text link — the secondary CTA beside a single primary. No border, no fill, no pill: bare label (+ optional device glyph), muted ink resolving to the coral on hover (color only — no underline animation, no translateY lift). Sits on the shared baseline of the .cta row with the primary. */ .cta-quiet{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--mut);transition:color .15s var(--ease)} .cta-quiet:hover{color:var(--accent)} .cta-quiet svg{width:16px;height:16px;stroke-width:2.2} /* Nav — single implementation (home classes). Content pages narrow .wrap in legal.css so the brand aligns with the article column. Height 64px everywhere. */ header.nav{position:sticky;top:0;z-index:100;background:rgba(12,12,14,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--hi);text-decoration:none} .brand:hover{text-decoration:none} .brand-mark{display:block;width:28px;height:28px;border-radius:6px;flex:0 0 auto} .navlinks{display:flex;align-items:center;gap:30px} .navlinks a:not(.btn){font-size:14px;color:var(--bd);font-weight:500} .navlinks a:not(.btn):hover{color:var(--hi)} /* At narrow widths the secondary links drop to a compact second row under the logo + primary button, staying visible and tappable. Desktop is unchanged. navlinks becomes display:contents so its children join the header flex row: the brand + primary button hold the top row, the muted links wrap below. */ @media(max-width:720px){ .nav .wrap{flex-wrap:wrap;height:auto;gap:10px 18px;padding-top:12px;padding-bottom:12px} .brand{margin-right:auto} .navlinks{display:contents} /* Full-width zero-height flex break: forces the links onto their own row after the brand + button, independent of container width (order sits it between). */ .nav .wrap::after{content:"";flex-basis:100%;height:0;order:1} .navlinks a:not(.btn){order:2;font-size:13px;min-height:44px;display:inline-flex;align-items:center} } @media(max-width:480px){.nav .wrap{gap:8px 16px}.btn{padding:10px 14px}} /* Platform availability row — honest 3-state web-first story. Filled dot = live (green); hollow ring = not-yet. Reuses the .live pill aesthetic. Static, no JS. */ .availability{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .availability .av{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .availability .av i{width:8px;height:8px;border-radius:999px;flex:0 0 auto} .availability .av.live i{background:var(--green)} .availability .av.soon{color:var(--dim)} .availability .av.soon i{background:transparent;border:1px solid var(--line2)} /* Footer — one shared rich footer everywhere. */ footer{border-top:1px solid var(--line);padding:54px 0 40px} .foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} .foot .brand{margin-bottom:12px} .foot .brand-mark{width:26px;height:26px} .foot .tagf{font-size:13px;color:var(--mut);max-width:260px} .fcols{display:flex;gap:64px;flex-wrap:wrap} /* Footer column heads — Space Grotesk semibold, sentence case, muted. */ .fcol h4{font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:-.01em;color:var(--mut);margin-bottom:14px;font-weight:600} .fcol a{display:block;font-size:14px;color:var(--bd);margin-bottom:10px} .fcol a:hover{color:var(--hi)} .fcol .soon{color:var(--dim);font-size:14px;margin-bottom:10px} .copy{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.06em;color:var(--dim)}