/* ========================================================================== FixTheAngels — theme.css Design tokens + shared chrome (nav/footer) for the site-wide redesign. THEME CONTRACT -------------- 1. Every page that loads this stylesheet MUST place this inline script in BEFORE the to this file, to prevent a flash of the wrong theme on load: 2. Theme values: '' (attribute absent) = dark (default), 'light' = light mode. Theme toggle buttons (`.fta-nav .theme-btn`) must, on click: - flip `document.documentElement.dataset.theme` between '' and 'light' - persist the choice with `localStorage.setItem('fta-theme', )` 3. Fonts are NOT bundled here — each page loads Anton, Inter, and JetBrains Mono via Google Fonts (see any existing page's for the canonical tags). 4. This file intentionally contains ONLY design tokens + shared chrome (nav/footer). Homepage section styles (hero, ticker, roster cards, etc.) live in a separate home.css and are NOT part of this file. 5. Body-level theming (background/color/font) only applies on pages that opt in via `` — inner pages keep their existing body styling untouched. ========================================================================== */ :root{ --bg:#07070a; --bg2:#0d0d12; --card:rgba(255,255,255,.04); --card-bd:rgba(255,255,255,.09); --tx:#f5f5f7; --mut:#8b8f98; --red:#e4103a; --red-glow:rgba(228,16,58,.55); --red-dim:rgba(228,16,58,.14); --gold:#ffb74d; --green:#2ecc71; --font-disp:'Anton',sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } [data-theme="light"]{ --bg:#f5f4f0; --bg2:#ffffff; --card:rgba(255,255,255,.85); --card-bd:rgba(0,0,0,.1); --tx:#141418; --mut:#5c5f66; --red:#ba0021; --red-glow:rgba(186,0,33,.25); --red-dim:rgba(186,0,33,.07); } /* ---------- body theming (homepage-only opt-in) ---------- */ body[data-fta-theme]{ background:var(--bg);color:var(--tx);font-family:var(--font-body); transition:background .5s ease,color .5s ease; } /* ---------- shared utility classes ---------- */ .disp{font-family:var(--font-disp);font-weight:400;letter-spacing:.01em} .mono{font-family:var(--font-mono)} .glass{ background:var(--card);border:1px solid var(--card-bd);border-radius:14px; backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); } /* ---------- nav (namespaced: .fta-nav) ---------- */ .fta-nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:18px 42px; transition:all .4s ease; } .fta-nav.scrolled{ background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--card-bd); padding:12px 42px; } .fta-nav .logo{font-size:20px;letter-spacing:.04em;color:var(--tx);text-decoration:none} .fta-nav .logo .red{color:var(--red)} .fta-nav .nav-links{display:flex;gap:30px;align-items:center} .fta-nav .nav-links a{ color:var(--mut);text-decoration:none;font-size:13px;font-weight:500; letter-spacing:.06em;text-transform:uppercase;position:relative; transition:color .25s; } .fta-nav .nav-links a::after{ content:'';position:absolute;left:0;bottom:-5px;height:1.5px;width:0; background:var(--red);transition:width .3s ease; } .fta-nav .nav-links a:hover{color:var(--tx)} .fta-nav .nav-links a:hover::after{width:100%} .fta-nav .theme-btn{ background:var(--card);border:1px solid var(--card-bd);color:var(--tx); border-radius:24px;padding:7px 14px;font-size:13px;cursor:pointer; transition:all .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .fta-nav .theme-btn:hover{border-color:var(--red);box-shadow:0 0 18px var(--red-glow)} /* ---------- hamburger (mobile nav trigger, hidden on desktop) ---------- */ .fta-nav .hamburger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:34px;height:34px;padding:0;background:transparent;border:none;cursor:pointer; } .fta-nav .hamburger span{ display:block;width:100%;height:2px;background:var(--tx); transition:transform .3s ease,opacity .3s ease; } .fta-nav .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .fta-nav .hamburger.open span:nth-child(2){opacity:0} .fta-nav .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- mobile full-screen menu overlay ---------- */ .fta-mmenu{ position:fixed;inset:0;z-index:99; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px; background:color-mix(in srgb,var(--bg) 96%,transparent); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); opacity:0;pointer-events:none;visibility:hidden; transition:opacity .35s ease; } .fta-mmenu.open{opacity:1;pointer-events:auto;visibility:visible} .fta-mmenu a{ color:var(--tx);text-decoration:none;font-family:var(--font-disp); font-size:32px;text-transform:uppercase;letter-spacing:.02em; } .fta-mmenu a:hover{color:var(--red)} /* ---------- keyboard focus (focus-visible only; works in both themes) ---------- */ .fta-nav .logo:focus-visible, .fta-nav .nav-links a:focus-visible, .fta-nav .theme-btn:focus-visible, .fta-nav .hamburger:focus-visible, .fta-mmenu a:focus-visible{ outline:2px solid var(--red);outline-offset:3px; } /* ---------- footer (namespaced: .fta-footer) ---------- */ .fta-footer{ padding:26px 42px;display:flex;justify-content:space-between; color:var(--mut);font-size:12px;border-top:1px solid var(--card-bd); } /* ---------- responsive ---------- */ @media (max-width:767px){ .fta-nav .nav-links a{display:none} .fta-nav .hamburger{display:flex} } @media (min-width:768px){ .fta-nav .hamburger{display:none} .fta-mmenu{display:none} } @media (max-width:700px){ .fta-nav{padding:14px 20px} .fta-footer{padding:20px;flex-direction:column;gap:8px;text-align:center} } /* ---------- inner-page chrome hardening ---------- Inner pages (players, blog, about, …) keep their own legacy inline nav CSS and are dark-only: their does NOT opt into data-fta-theme. Two fixes: 1) Neutralise the legacy `.nav-links{position:absolute}` rule so the shared nav's links sit in the flex flow instead of floating centred. 2) Pin the shared chrome to the dark-mode tokens regardless of the persisted theme, so a stored `light` preference (bootstrapped onto for the homepage's benefit) never renders dark-on-dark nav text over a dark inner-page body. The homepage opts in via and is unaffected by this override. */ .fta-nav .nav-links{position:static;left:auto;top:auto;transform:none} body:not([data-fta-theme]) .fta-nav, body:not([data-fta-theme]) .fta-mmenu{ --bg:#07070a; --tx:#f5f5f7; --mut:#8b8f98; --card:rgba(255,255,255,.04); --card-bd:rgba(255,255,255,.09); --red:#e4103a; --red-glow:rgba(228,16,58,.55); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .fta-nav,.fta-nav.scrolled,.fta-nav .nav-links a,.fta-nav .nav-links a::after, .fta-nav .theme-btn,.fta-nav .hamburger span,.fta-mmenu, body[data-fta-theme]{ transition:none !important; } }