/* ============================================================ DRINKING GAMES — Design System Reusable tokens + components shared by the landing page and every individual game page. ============================================================ */ :root { color-scheme: light; /* ---- Rainbow brand palette (one hue per game) ---- */ --pink: #FF2D9B; --purple: #9D3BFF; --blue: #2E7CFF; --cyan: #12CFD6; --lime: #3FD23A; --yellow: #FFC400; --orange: #FF7A1A; --red: #FF2D55; /* ---- Neutrals ---- */ --ink: #1E1442; /* headings / borders */ --body: #352b58; /* paragraph text */ --muted: #63588c; /* secondary text (WCAG AA on canvas & white) */ --bg: #F4EFFF; /* page canvas (lavender white) */ --surface: #FFFFFF; /* cards / panels */ --line: #1E1442; /* sticker outlines */ --footer-bg: #1E1442; /* footer fill (stays dark in both themes) */ --mix-base: #FFFFFF; /* base tint color-mixes blend toward */ /* ---- Signature hero gradient ---- */ --grad-hero: linear-gradient(115deg, #FF2D9B 0%, #9D3BFF 26%, #2E7CFF 50%, #12CFD6 70%, #3FD23A 100%); --grad-btn: linear-gradient(120deg, #FF2D9B 0%, #9D3BFF 55%, #2E7CFF 100%); /* ---- Type ---- */ --font-display: 'Fredoka', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; /* ---- Type scale (fluid) ---- */ --fs-display: clamp(3.2rem, 13vw, 8.2rem); /* hero */ --fs-h1: clamp(2.6rem, 7vw, 4.6rem); --fs-h2: clamp(2rem, 5.5vw, 3.4rem); /* section title */ --fs-h3: 1.5rem; /* card title */ --fs-lead: clamp(1rem, 2.2vw, 1.18rem); --fs-body: 1.0625rem; /* 17px base */ --fs-sm: 0.96rem; --fs-label: 0.82rem; /* eyebrow / badge */ /* ---- Spacing scale (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---- Radius ---- */ --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-pill: 999px; /* ---- Borders ---- */ --bw: 3px; /* standard sticker outline */ --bw-thin: 2px; /* badges / eyebrows */ --bw-thick: 4px; /* hero feature elements */ /* ---- Motion ---- */ --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); --t-fast: .12s; --t-med: .18s; /* ---- Sticker shadows (hard offset) ---- */ --shadow-sticker: 5px 6px 0 var(--ink); --shadow-sticker-lg: 8px 10px 0 var(--ink); --shadow-soft: 0 18px 40px -20px rgba(30, 20, 66, 0.45); /* ---- Layout ---- */ --maxw: 1180px; --gutter: clamp(18px, 4vw, 48px); } /* ---------------- Reset / base ---------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ---------------- Dark theme ---------------- Opt-in via (set by theme-toggle.js). Flips --ink to a light "ink" so the whole sticker system (outlines + hard shadows + text) reads light on dark, while --footer-bg stays dark so the footer doesn't invert. */ [data-theme="dark"] { color-scheme: dark; --ink: #F1ECFF; /* now the light "ink": text, borders, shadows */ --body: #E4DEF7; --muted: #A79BD0; --bg: #140D2B; /* deep night canvas */ --surface: #221A42; /* cards / panels */ --line: #F1ECFF; --footer-bg:#0C0720; /* deeper than surface, stays dark */ --mix-base: #221A42; /* tints blend toward the dark surface */ --shadow-soft: 0 18px 40px -20px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .eyebrow { color: #d3b9ff; } [data-theme="dark"] .game-card__sub { filter: saturate(1.1) brightness(1.15); } [data-theme="dark"] .site-footer a:hover { color: #fff; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--body); background: var(--bg); line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.02; margin: 0; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } /* Global keyboard-focus ring (all interactive elements) */ :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; } [data-theme="dark"] :focus-visible { outline-color: #c9a9ff; } img { max-width: 100%; display: block; } button { font-family: inherit; } /* ---------------- Layout helpers ---------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 9vw, 110px); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5a2b9c; background: color-mix(in srgb, var(--purple) 12%, var(--mix-base)); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 7px 16px; box-shadow: 3px 3px 0 var(--ink); } .section-title { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 700; margin-top: 18px; } .section-lead { font-size: clamp(1rem, 2.2vw, 1.18rem); color: var(--muted); max-width: 46ch; margin-top: 14px; } /* ---------------- Buttons ---------------- */ .btn { --btn-bg: var(--surface); --btn-fg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1; padding: 16px 26px; min-height: 54px; border: 3px solid var(--ink); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; box-shadow: var(--shadow-sticker); white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background .2s ease; -webkit-tap-highlight-color: transparent; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 8px 0 var(--ink); } .btn:active { transform: translate(4px, 5px); box-shadow: 1px 1px 0 var(--ink); } .btn--primary { --btn-fg: #fff; background: var(--grad-btn); background-size: 160% 160%; } .btn--ghost { background: var(--surface); } .btn--lg { font-size: 1.18rem; padding: 19px 32px; min-height: 62px; } .btn--block { width: 100%; } /* ---------------- Sticker badge ---------------- */ .sticker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; padding: 6px 13px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; } /* ---------------- Game card ---------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(18px, 2.6vw, 28px); } .game-card { --card: var(--purple); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 22px; background: var(--surface); border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-sticker-lg); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; isolation: isolate; overflow: hidden; } /* color wash + alternating tilt */ .game-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; background: color-mix(in srgb, var(--card) 9%, var(--mix-base)); z-index: -1; } .game-card:nth-child(odd):hover { transform: translateY(-10px) rotate(-2deg) scale(1.025); } .game-card:nth-child(even):hover { transform: translateY(-10px) rotate(2deg) scale(1.025); } .game-card:hover { box-shadow: 10px 14px 0 var(--card); } .game-card:active { transform: translateY(-2px) scale(0.99); } .game-card__icon { width: 70px; height: 70px; display: grid; place-items: center; font-size: 2.2rem; background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 3px 4px 0 var(--ink); margin-bottom: 12px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .game-card:hover .game-card__icon { transform: rotate(-8deg) scale(1.08); } .game-card__title { font-size: 1.5rem; font-weight: 700; } .game-card__sub { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; color: var(--card); filter: saturate(1.1) brightness(0.85); } .game-card__desc { margin: 8px 0 0; font-size: 0.96rem; color: var(--muted); line-height: 1.45; text-wrap: pretty; } .game-card__cta { margin-top: auto; padding-top: 16px; font-family: var(--font-display); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; } .game-card__cta .arrow { transition: transform .2s ease; } .game-card:hover .game-card__cta .arrow { transform: translateX(5px); } .game-card__badge { position: absolute; top: 16px; right: 14px; transform: rotate(7deg); background: var(--card); color: #fff; z-index: 2; } .game-card__badge.sticker { box-shadow: 2px 3px 0 var(--ink); } /* ---------------- Footer ---------------- */ .site-footer { background: var(--footer-bg); color: #d9d2f2; padding-block: clamp(46px, 7vw, 78px) 32px; } .site-footer a { color: #d9d2f2; transition: color .15s ease; } .site-footer a:hover { color: #fff; } /* ---------------- Utility ---------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }