/* common-v3.css — Token-based bundle for Party Isla * Status: pure infrastructure (2026-05-04). Pages migrate one at a time. * Activate per-page via ?css=v3 or per-user via cookie css_v3=1. * common-v2.min.css continues to load alongside; v3 wins by source order. */ /* ========================================================================== Tokens — single source of truth ========================================================================== */ :root { /* Surfaces */ --bg: #0a0a0a; --surface: #151515; --surface-2: #1a1a1a; --border: #222; /* Text */ --text: #fff; --text-secondary: #aaa; --text-tertiary: #888; /* Brand — Pantone 186. Single token, NOT theme-aware (passes AA on both #0a0a0a and #fff, locked 2026-05-04). */ --accent: #c8102e; --accent-hover: #a40d24; /* Status */ --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; /* Typography scale (8 sizes, fluid) */ --fs-hero: clamp(40px, 6vw, 64px); --fs-hero-xl: clamp(52px, 8vw, 100px); --fs-h1: clamp(28px, 4vw, 48px); --fs-h2: clamp(22px, 3vw, 32px); --fs-h3: 18px; --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px; /* Spacing scale (4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; /* Radius — sharp/poster aesthetic. NO pill 999px. */ --radius-default: 4px; /* buttons, chips, inputs, badges */ --radius-card: 6px; /* cards, modals, blocks */ --radius-img: 4px; /* images */ /* Focus ring */ --focus-ring: 2px solid var(--accent); /* Header / footer always-dark */ --header-bg: #0a0a0a; --footer-bg: #0a0a0a; } html[data-theme="light"] { --bg: #f0f0f0; --surface: #ffffff; --surface-2: #f5f5f5; --text: #111; --text-secondary: #555; --text-tertiary: #777; /* --border stays #222 across themes (per design audit + user pref). */ /* --accent NOT overridden — Pantone 186 is AA on white (4.97:1). */ /* --header-bg / --footer-bg stay dark — header/footer always dark. */ } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: var(--fs-body); line-height: 1.55; } h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.01em; } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; } *:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } *:focus:not(:focus-visible) { outline: none; } .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; } /* ========================================================================== Skip link — first focusable element in ========================================================================== */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: #fff; padding: 12px 16px; border-radius: var(--radius-default); font-size: var(--fs-small); font-weight: 700; text-decoration: none; z-index: 9999; transition: top 120ms ease; } .skip-link:focus { top: 0; outline: var(--focus-ring); outline-offset: 2px; } /* ========================================================================== Buttons ========================================================================== */ .btn-pri { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; background: var(--accent); color: #fff; font-family: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1; border: 0; border-radius: var(--radius-default); cursor: pointer; text-decoration: none; transition: background 120ms ease; } .btn-pri:hover { background: var(--accent-hover); } .btn-pri:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .btn-sec { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; background: transparent; color: var(--text); font-family: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1; border: 1.5px solid var(--text); border-radius: var(--radius-default); cursor: pointer; text-decoration: none; transition: background 120ms ease, color 120ms ease; } .btn-sec:hover { background: var(--text); color: var(--bg); } .btn-sec:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ========================================================================== Chips / filter pills (sharp 4px, NOT pill 999px) ========================================================================== */ .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 16px; background: transparent; color: var(--text); font-family: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1; border: 1px solid var(--border); border-radius: var(--radius-default); cursor: pointer; text-decoration: none; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .chip:hover { border-color: var(--text); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s-4); } /* ========================================================================== Inputs ========================================================================== */ .input { display: block; width: 100%; min-height: 44px; padding: 12px 16px; background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--fs-body); line-height: 1.4; border: 1.5px solid var(--border); border-radius: var(--radius-default); transition: border-color 120ms ease; } .input::placeholder { color: var(--text-tertiary); } .input:focus { border-color: var(--accent); outline: var(--focus-ring); outline-offset: 0; } /* ========================================================================== Modal ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; } .modal { background: var(--surface); color: var(--text); padding: var(--s-6); border-radius: var(--radius-card); border: 1px solid var(--border); } /* ========================================================================== Layout helpers ========================================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); } @media (max-width: 768px) { .container { padding: 0 var(--s-4); } } /* ========================================================================== Long-form / legal pages (privacy, terms; reusable for future disclaimer / docs) ========================================================================== */ .legal-wrap { max-width: 800px; margin: 0 auto; padding: var(--s-8) 0 var(--s-9); } .legal-title { font-size: var(--fs-h1); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -1px; margin: 0 0 var(--s-2); } .legal-updated { font-size: var(--fs-small); color: var(--text-tertiary); margin: 0 0 var(--s-7); } .legal-wrap h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; margin: var(--s-7) 0 var(--s-3); color: var(--text); } .legal-wrap p, .legal-wrap li { font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-2); } .legal-wrap ul, .legal-wrap ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); } .legal-wrap a { color: var(--text); text-decoration: underline; } @media (max-width: 768px) { .legal-wrap { padding: var(--s-6) 0 var(--s-8); } } /* ========================================================================== Scroll-to-top button (long-form pages) ========================================================================== */ .scroll-top-btn { position: fixed; bottom: var(--s-7); right: var(--s-7); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-default); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(var(--s-3)); transition: opacity .3s ease, transform .3s ease, background .15s ease, border-color .15s ease, color .15s ease; z-index: 1100; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .scroll-top-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ========================================================================== Sectional grid: .why-section / .how-section Used on /about (.why-* only) and /partners (both .why-* and .how-*). Mediapulse-style: 280px section title left + N-column grid right, top-border numbered items separated by vertical rules. ========================================================================== */ .why-section, .how-section { padding: var(--s-8) 0; border-bottom: 1px solid var(--border); } .why-section-head, .how-section-head { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-7); margin-bottom: var(--s-7); } .why-section-title, .how-section-title { font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.1; margin: 0; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .why-item, .how-step { padding: var(--s-6) var(--s-5) var(--s-6) 0; border-top: 2px solid var(--text); } .why-item:not(:last-child), .how-step:not(:last-child) { border-right: 1px solid var(--border); } .why-item:not(:first-child), .how-step:not(:first-child) { padding-left: var(--s-5); } .why-num { font-size: var(--fs-micro); color: var(--text-tertiary); font-weight: 600; margin-bottom: var(--s-3); } .how-num { font-size: 48px; font-weight: 900; color: var(--text-tertiary); line-height: 1; margin-bottom: var(--s-3); opacity: 0.3; } .why-item h3, .how-step h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; margin: 0 0 var(--s-2); letter-spacing: 0.02em; } .why-item p, .how-step p { font-size: var(--fs-small); line-height: 1.65; color: var(--text-secondary); margin: 0; } @media (max-width: 768px) { .why-section, .how-section { padding: var(--s-7) 0; } .why-section-head, .how-section-head { grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-5); } .why-grid { grid-template-columns: 1fr 1fr; } .how-grid { grid-template-columns: 1fr; } .why-item:not(:last-child), .how-step:not(:last-child) { border-right: 0; } .why-item:not(:first-child), .how-step:not(:first-child) { padding-left: 0; } .why-grid .why-item:nth-child(odd) { border-right: 1px solid var(--border); padding-right: var(--s-4); } .why-grid .why-item:nth-child(even) { padding-left: var(--s-4); } } /* ========================================================================== Header — ALWAYS dark in both themes Scaffold only. Layout (height, padding, flex) is intentionally NOT set because the homepage

is the hero container (min-height:80vh, contains video bg + search). Per-page header rules in common-v2.css and page-specific CSS (index-page.css) supply layout. v3 only contributes the always-dark background token + accessible chrome utilities below. ========================================================================== */ .site-header { background: var(--header-bg); } /* Theme toggle — 44×44 touch target (a11y AA), sharp radius. Standalone class, applied to