/* ============================================================================= theme.css — gifts.wtf SHARED brand + 3-mode theme (single source of truth for every page/tab: marketplace, username shop, anon numbers). gifts.wtf is a STANDALONE product (no longer "inteltrade"). TWO MODES, toggled by (the old light + blue/hashtag modes were removed 2026-08; stored 'light'/'hashtag'/legacy values migrate to 'wtf' in the pre-paint script + controller, so nobody is stuck on a dead theme): wtf — the DEFAULT: soft blue→lavender pastel canvas, frosted near-white panels, deep-plum ink, pink #F7A8D8 / red #E0392B brand. (light UA) dark — a real dark mode: deep near-black indigo canvas, light ink, the same pink/red brand accents, translucent-dark readable panels. Every page keeps ONE set of variable names; only their VALUES change per mode, so a page's own CSS re-themes for free. Load this BEFORE the page's own sheet. ========================================================================== */ /* ---- BUBBLY DISPLAY FONT — Shrikhand (SIL OFL, Jonny Pinhorn): a heavy, slightly-slanted BULBOUS SERIF — the closest OFL letterform to the baked-in /giftswtf-logo.png wordmark (Cooper-Black-like). Self-hosted woff2 so it is CSP-clean (font-src 'self'; NO data: allowed, NO CDN). Used ONLY for big display headings; the wordmark itself is the PNG; body stays system UI. font-weight is declared as a RANGE so bold requests (700/800/900) use the single face as-is instead of synthesizing a mushy faux-bold. Fredoka stays self-hosted as the fallback face. */ @font-face{ font-family:"Shrikhand"; font-style:normal; font-weight:400 900; font-display:swap; src:url(shrikhand.woff2) format("woff2"); } @font-face{ font-family:"Fredoka"; font-style:normal; font-weight:700; font-display:swap; src:url(fredoka-700.woff2) format("woff2"); } @font-face{ font-family:"Fredoka"; font-style:normal; font-weight:600; font-display:swap; src:url(fredoka-600.woff2) format("woff2"); } :root{ --font-bubble:"Shrikhand","Fredoka","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif; } /* ---- WTF (default, first paint) : soft blue→lavender canvas, near-white frosted panels, deep-plum ink, pink+red brand. This is the DEFAULT gifts.wtf look. Structured like a LIGHT theme (light surfaces, dark ink) so dense data surfaces stay high-contrast and legible. -------------------------------- */ :root, :root[data-theme="wtf"]{ color-scheme:light; --void:#E9E4FA; --panel:#FCFAFF; --raised:#FFFFFF; --hover:#F3EDFC; --well:#ECE6F8; --hairline:rgba(42,33,64,.14); --hairline-2:rgba(42,33,64,.26); --grid:#E4DBF4; --axis:#CFC2EA; --ink-hi:#2A2140; --ink-mid:#4A4166; --ink-lo:#7B7299; --ink-faint:#A79EC2; --p100:#FCE1F0; --p200:#F7A8D8; --p300:#F06AAE; --p400:#E0392B; --p500:#CB281D; --p600:#A81F16; --p700:#7A140E; --sweep:#B4790A; --gain:#12854B; --loss:#C42F36; --r1:#F7A8D8; --r2:#EF6FA9; --r3:#E0392B; --r4:#A81F16; --on-accent:#FFFFFF; --page-bg:linear-gradient(120deg,#9EB4F2 0%,#B7ADF0 50%,#C9B7EF 100%); } /* ---- DARK : a real dark mode. Deep near-black indigo canvas, light ink, the SAME pink/red brand accents, translucent-dark readable panels. NOT an inverted pastel — the surface vars go dark, the ink vars go light, and the ramp ends flip role: --p100 (a LIGHT tint-fill in wtf) becomes a DARK plum tint, while --p600/--p700 (DARK accent-text in wtf) become LIGHT pinks so every icon/label/link that inks with them stays legible on the dark canvas. --p200..--p500 keep the visible pink→red identity, nudged for dark contrast. */ :root[data-theme="dark"]{ color-scheme:dark; --void:#0B0912; --panel:#171226; --raised:#1E1830; --hover:#271F3D; --well:#100C1C; --hairline:rgba(247,168,216,.15); --hairline-2:rgba(247,168,216,.30); --grid:rgba(255,255,255,.07); --axis:rgba(255,255,255,.16); --ink-hi:#F6F1FA; --ink-mid:#CFC4E4; --ink-lo:#9C8FC0; --ink-faint:#6E6194; --p100:#2A1424; --p200:#F7A8D8; --p300:#F06AAE; --p400:#F0493B; --p500:#E0392B; --p600:#F7A8D8; --p700:#FCE1F0; --sweep:#E7B23A; --gain:#3FD08A; --loss:#FF6B6B; --r1:#F7A8D8; --r2:#F06AAE; --r3:#F0493B; --r4:#FF8E80; --on-accent:#FFFFFF; --page-bg:radial-gradient(130% 100% at 50% -12%, #1C1436 0%, #0E0A1C 52%, #070510 100%); } /* every page paints its base from --page-bg so both modes feel intentional */ body{ background:var(--page-bg) fixed; } /* .nascar heading: on DARK the wtf white top-shadow reads as grime — swap it for a soft red glow so the brand-red heading pops on the dark canvas. */ :root[data-theme="dark"] .nascar{ color:var(--p300); text-shadow:0 1px 0 rgba(0,0,0,.5), 0 6px 22px rgba(240,73,59,.38); } /* ============================================================================= .nascar — the display-heading treatment that matches the PNG wordmark's bubbly-serif mood: Shrikhand, solid brand red, a soft white lift so it sits crisply on the frosted panels. The pink-fill/red-outline treatment lives ONLY in the wordmark PNG — headings stay solid so the mark stays special. ========================================================================== */ .nascar{ font-family:var(--font-bubble); font-weight:700; font-style:normal; text-transform:uppercase; letter-spacing:.02em; display:inline-block; color:var(--p400); text-shadow:0 2px 0 rgba(255,255,255,.30), 0 8px 22px rgba(224,57,43,.16); } /* gifts.wtf BRAND HEADER — spacer (left) · THE WORDMARK IMAGE (centre) · Powered by $PYONYA (right). The wordmark is /giftswtf-logo.png (2400×1350, transparent bg — the bg-removed first frame of the hero video): pink-fill / red-outline bubbly-serif GIFTS.WTF. The PNG carries huge transparent margins, so the link is a tight CROP BOX: .gw-wm-crop keeps a fixed aspect via padding-top and the oversized centred crops its margins away — the glyphs span ~98% of the box width at every size. */ .gw-brandbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px clamp(14px,3vw,40px) 8px; flex-wrap:wrap; } .gw-wordmark{ display:block; text-decoration:none; order:0; flex:0 1 auto; width:clamp(250px, 36vw, 520px); transition:transform .18s ease; } .gw-wordmark:hover{ transform:translateY(-1px) scale(1.01); } .gw-wm-crop{ display:block; position:relative; overflow:hidden; width:100%; height:0; padding-top:14%; /* crop-box ≈ the glyph band */ } .gw-wm-crop img{ position:absolute; left:50%; top:50%; width:160%; max-width:none; height:auto; /* glyphs span the box; margins crop */ transform:translate(-50%,-50%); } .gw-net{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-mid); font-weight:700; font-size:14px; text-decoration:none; } .gw-net .b-hashicon{ width:18px; height:18px; border-radius:50%; } .gw-net:hover{ color:var(--ink-hi); } .gw-pyonya{ color:var(--p400); font-weight:800; font-size:14px; text-decoration:none; white-space:nowrap; } .gw-pyonya:hover{ color:var(--p500); } @media (max-width:640px){ .gw-brandbar{ justify-content:center; gap:8px; } .gw-wordmark{ order:-1; flex-basis:100%; } } /* ============================================================================= #themeToggle — WTF (pink ★, the default pastel) / Dark (moon), on every page. ========================================================================== */ #themeToggle{ display:inline-flex; gap:4px; background:var(--raised); border:1px solid var(--hairline-2); border-radius:999px; padding:3px; } #themeToggle button{ width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-lo); font-size:15px; line-height:1; background:transparent; border:0; } #themeToggle button:hover{ color:var(--ink-hi); background:var(--hover); } #themeToggle button[aria-pressed="true"]{ background:var(--p400); color:var(--on-accent); }