/* Strangey Dangey marketing site — shared styles Theme toggles via [data-mode="mom"] (default) and [data-mode="dad"] on . */ :root[data-mode="mom"], :root { --bg: #FFF5F0; --bg-2: #FBEDE4; --surface: #FFFFFF; --raised: #F5E9DB; --ink: #3B2A2A; --ink-dim: rgba(59,42,42,0.62); --ink-muted: rgba(59,42,42,0.42); --signal: #E8736B; --signal-ink: #FFFCF7; --accent: #F0D58A; --border: rgba(59,42,42,0.10); --shadow: 0 4px 14px rgba(59,42,42,0.06), 0 0 0 1px rgba(59,42,42,0.04); --shadow-lg: 0 24px 60px rgba(232,115,107,0.18), 0 0 0 1px rgba(59,42,42,0.04); --bg-grad: radial-gradient(ellipse at top, #FBEDE4 0%, #FFF5F0 60%, #FBEDE4 100%); } :root[data-mode="dad"] { --bg: #06050A; --bg-2: #15131D; --surface: #15131D; --raised: #1F1A2E; --ink: #E8E4F0; --ink-dim: rgba(232,228,240,0.68); --ink-muted: rgba(232,228,240,0.42); --signal: #FFD93D; --signal-ink: #06050A; --accent: #A080FF; --border: rgba(160,128,255,0.14); --shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 1px rgba(160,128,255,0.12); --shadow-lg: 0 24px 60px rgba(255,217,61,0.16), 0 0 0 1px rgba(160,128,255,0.12); --bg-grad: radial-gradient(ellipse at top, #15131D 0%, #06050A 60%, #06050A 100%); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } a { color: var(--signal); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; } .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .brand { display: inline-flex; align-items: baseline; font: 800 18px/1 "Plus Jakarta Sans", sans-serif; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; } .brand .dot { color: var(--signal); margin-left: -1px; } .nav-links { display: flex; gap: 22px; align-items: center; font: 600 14px/1 sans-serif; } .nav-links a { color: var(--ink-dim); } .toggle { display: inline-flex; padding: 3px; background: var(--raised); border-radius: 999px; border: 1px solid var(--border); } .toggle button { background: transparent; border: none; padding: 6px 12px; font: 700 11px/1 sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); border-radius: 999px; cursor: pointer; } .toggle button.active { background: var(--signal); color: var(--signal-ink); } .hero { padding: 64px 0 40px; text-align: center; } .eyebrow { font: 700 11px/1 sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); margin-bottom: 14px; } .h1 { font: 800 56px/1.05 "Plus Jakarta Sans", sans-serif; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 720px; margin-inline: auto; } .h1 em { font-style: normal; color: var(--signal); } .lede { font: 500 18px/1.5 sans-serif; color: var(--ink-dim); max-width: 540px; margin: 0 auto 32px; } .waitlist { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; padding: 6px; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); border: 1px solid var(--border); } .waitlist input { flex: 1; border: none; background: transparent; padding: 14px 18px; font: 500 15px/1 sans-serif; color: var(--ink); outline: none; } .waitlist input::placeholder { color: var(--ink-muted); } .waitlist button { border: none; background: var(--signal); color: var(--signal-ink); font: 800 14px/1 sans-serif; padding: 0 22px; border-radius: 999px; cursor: pointer; height: 44px; letter-spacing: .02em; } .waitlist button:active { transform: scale(.97); } .waitlist-note { font: 500 12px/1.4 sans-serif; color: var(--ink-muted); margin-top: 10px; } .section { padding: 56px 0; } .section h2 { font: 800 32px/1.1 sans-serif; letter-spacing: -0.02em; margin: 0 0 12px; } .section .sub { font: 500 16px/1.5 sans-serif; color: var(--ink-dim); margin: 0 0 32px; max-width: 520px; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .frame { aspect-ratio: 9/19.5; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-radius: 36px; padding: 8px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; border: 1px solid var(--border); } .frame .scr { width: 100%; height: 100%; border-radius: 28px; background: var(--surface); padding: 24px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .frame .notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 80px; height: 18px; background: var(--ink); border-radius: 12px; opacity: .9; z-index: 2; } .footer { padding: 40px 0 60px; border-top: 1px solid var(--border); margin-top: 40px; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-links { display: flex; gap: 18px; font: 500 13px/1 sans-serif; } .footer-links a { color: var(--ink-dim); } .footer-meta { font: 500 12px/1.4 sans-serif; color: var(--ink-muted); } /* Legal pages */ .legal { max-width: 720px; padding: 56px 24px 80px; margin: 0 auto; } .legal h1 { font: 800 38px/1.1 sans-serif; letter-spacing: -0.02em; margin: 0 0 8px; } .legal .updated { font: 500 13px/1 sans-serif; color: var(--ink-muted); margin: 0 0 32px; } .legal h2 { font: 800 18px/1.2 sans-serif; margin: 32px 0 8px; letter-spacing: -0.01em; } .legal p, .legal li { font: 500 15px/1.65 sans-serif; color: var(--ink); } .legal p, .legal ul { margin: 0 0 14px; } .legal ul { padding-left: 22px; } .legal a.back { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 sans-serif; color: var(--ink-dim); margin-bottom: 24px; } @media (max-width: 720px) { .h1 { font-size: 40px; } .gallery { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } .nav-links { gap: 14px; } .nav-links .nav-link-extra { display: none; } }