/* ============================================================ THE PREP DAD - Design System tokens Brand: PrepDad Purple #732987 · Grey #D9D9D9 · White Display: Chosence (ALL CAPS, tracked) · Body: Montserrat Themes driven by [data-theme] on . Default: dark. ============================================================ */ /* ---- Fonts (self-hosted) ---- */ @font-face{font-family:'Chosence';src:url('../fonts/chosence-bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Chosence';src:url('../fonts/chosence-bolditalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:'Chosence';src:url('../fonts/chosence-regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Chosence';src:url('../fonts/chosence-light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap} /* ---- Core brand constants ---- */ :root{ --brand-purple:#732987; --brand-purple-deep:#5A1F6B; --brand-grey:#D9D9D9; --font-display:'Chosence',-apple-system,system-ui,sans-serif; --font-body:'Montserrat',-apple-system,system-ui,sans-serif; /* spacing scale (4px rhythm) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:28px; --s7:36px; --s8:44px; --s9:64px; --s10:88px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; --maxw:1080px; } /* ============ DARK (default) ============ */ :root,[data-theme="dark"]{ --bg:#120A17; --bg-2:#170B1E; --grad-glow:radial-gradient(1100px 620px at 50% -8%, rgba(168,92,200,.20) 0%, rgba(115,41,135,.06) 38%, transparent 68%); --surface:#1E1128; --surface-2:#251532; --surface-raised:#2C1A3A; --line:rgba(214,196,228,.12); --line-strong:rgba(214,196,228,.22); --text:#F5EFF8; --text-mid:#C3B2D0; --text-low:#917C9F; --accent:#B06FCB; /* lifted purple for legibility on dark */ --accent-bright:#C98FE0; --accent-fill:#7E2E95; /* button/fills */ --accent-fill-hi:#9A45B4; --on-accent:#FFFFFF; --accent-ghost:rgba(176,111,203,.12); --accent-ring:rgba(176,111,203,.32); --done:#43C99A; --done-ghost:rgba(67,201,154,.14); --shadow-card:0 30px 70px -38px rgba(0,0,0,.8); --shadow-raise:0 20px 50px -30px rgba(120,46,149,.6); --logo-lockup:url('../assets/logo-lockup-light.png'); --logo-wordmark:url('../assets/wordmark-light.png'); --logo-badge:url('../assets/badge-light.png'); } /* ============ LIGHT ============ */ [data-theme="light"]{ --bg:#FAF8FC; --bg-2:#F2ECF6; --grad-glow:radial-gradient(1100px 620px at 50% -8%, rgba(115,41,135,.10) 0%, rgba(115,41,135,.03) 40%, transparent 70%); --surface:#FFFFFF; --surface-2:#FBF8FD; --surface-raised:#FFFFFF; --line:rgba(26,16,32,.10); --line-strong:rgba(26,16,32,.16); --text:#1B1022; --text-mid:#5B4B66; --text-low:#8A7C94; --accent:#732987; --accent-bright:#8A36A3; --accent-fill:#732987; --accent-fill-hi:#8A36A3; --on-accent:#FFFFFF; --accent-ghost:rgba(115,41,135,.08); --accent-ring:rgba(115,41,135,.20); --done:#1F9D6B; --done-ghost:rgba(31,157,107,.12); --shadow-card:0 24px 60px -36px rgba(115,41,135,.28); --shadow-raise:0 20px 46px -28px rgba(115,41,135,.30); --logo-lockup:url('../assets/logo-lockup-purple.png'); --logo-wordmark:url('../assets/wordmark-purple.png'); --logo-badge:url('../assets/badge-purple.png'); } /* ---- Reset / base ---- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); background:var(--bg); background-image:var(--grad-glow); background-repeat:no-repeat; color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; } /* faint dotted texture, very subtle */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(176,111,203,.05) 1px, transparent 1px); background-size:30px 30px;opacity:.5; } [data-theme="light"] body::before{background-image:radial-gradient(rgba(115,41,135,.05) 1px,transparent 1px)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ---- Type primitives ---- */ .display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.02} .eyebrow{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--text-low)} .eyebrow--accent{color:var(--accent)} /* ---- Brand lockups ---- */ .brand-lockup{background:var(--logo-lockup) center/contain no-repeat} .brand-wordmark{background:var(--logo-wordmark) left center/contain no-repeat} .brand-badge{background:var(--logo-badge) center/contain no-repeat;border-radius:var(--r-pill)} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-body);font-weight:700; font-size:14px;border-radius:var(--r-pill);padding:13px 24px;border:1px solid transparent;cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease;white-space:nowrap} .btn--primary{background:var(--accent-fill);color:var(--on-accent);box-shadow:var(--shadow-raise)} .btn--primary:hover{background:var(--accent-fill-hi);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)} .btn--ghost:hover{border-color:var(--accent);color:var(--accent-bright)} /* ---- Pills / chips ---- */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600; padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2);color:var(--text-mid)} .pill--accent{background:var(--accent-ghost);border-color:var(--accent-ring);color:var(--accent-bright)} .pill--done{background:var(--done-ghost);border-color:transparent;color:var(--done)} /* ---- Card ---- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}