:root { --ink: #1b1333; /* deep plum, mascot outline + text-on-accent */ --bg: #17122a; /* plum-ink background */ --surface: #211a3a; --surface-2:#2b2247; --border: #392c58; --coral: #ff5d8f; /* primary pop */ --mint: #49d6c0; /* secondary pop */ --butter: #ffc857; /* tertiary pop */ --lavender: #b39cff; /* quaternary pop */ --cheek: #ff9dc0; /* mascot cheeks */ --text: #f6f1ff; --muted: #a99ec9; --radius: 14px; --radius-lg:20px; --topbar-bg:rgba(23,18,42,0.82); /* sticky topbar; per-theme so light skins don't get a dark bar */ } /* ---------- responsive breakpoint convention ---------- Custom properties can't be used inside @media conditions without a preprocessor (none is used here), so these are documented literal values to keep new breakpoints consistent rather than actual usable variables: 480px (--bp-phone) primary target: phone portrait widths (~375-430px) 720px (--bp-narrow) secondary: narrow desktop/small-tablet two-column collapses 860px (--bp-tablet) secondary: tablet-ish widths (matches the existing calendar layout collapse, kept as the reference value for any new tablet-tier breakpoint) Existing ad hoc breakpoints (720/860/880/900px) are left as-is; only new rules need to pick one of the tiers above. */ /* ---------- wrestler themes ---------- Each block overrides the same custom-property contract defined on :root, so the whole UI re-skins from these ~13 variables alone. data-theme is stamped on server-side (from the friendlies_theme cookie) so there's no flash of the default palette on load. Slugs mirror the THEMES set in app.py and the THEMES list in app.js. Names are placeholders the user plans to rename — the comment records who each represents so that mapping isn't lost. default (:root above) = Rika-adjacent plum/coral (the original look). */ /* Rika — black, white, silver, shocks of red (Rika Tatsumi / 辰巳リカ) */ [data-theme="rika"] { --ink:#0d0d0f; --bg:#111114; --surface:#1b1b20; --surface-2:#26262d; --border:#38383f; --coral:#e5133a; --mint:#c9ccd4; --butter:#eef0f4; --lavender:#9aa0ad; --cheek:#ff6b7f; --text:#f4f5f7; --muted:#9a9aa6; --topbar-bg:rgba(13,13,15,0.85); } /* Shino — green, greenish-yellow, white (Shino Suzuki / 鈴木志乃). Softened from the original: --mint was a near-neon yellow-green (#c7e94d) used on hover/focus/badges — very high luminance against the dark green background, genuinely harsh to stare at. Pulled it down to a muted sage-lime and eased the primary green pop off max saturation so nothing glows. */ [data-theme="shino"] { --ink:#0f2417; --bg:#122820; --surface:#1a3329; --surface-2:#234036; --border:#33564a; --coral:#4bc48a; --mint:#a9cf5c; --butter:#dcecc0; --lavender:#8bcfa8; --cheek:#a6ef7f; --text:#eef6ee; --muted:#8fb39c; --topbar-bg:rgba(18,40,32,0.85); } /* Miu — shades of pink, white (Miu Watanabe / 渡辺未詩) */ [data-theme="miu"] { --ink:#4a1130; --bg:#fff2f8; --surface:#ffe3ef; --surface-2:#ffd3e5; --border:#f7b3d0; --coral:#ff4f9a; --mint:#ff8fc0; --butter:#ffc2dd; --lavender:#d96fb0; --cheek:#ff9ec9; --text:#5a1136; --muted:#b56690; --topbar-bg:rgba(255,242,248,0.85); } /* HIMAWARI — bright yellow, orange, brown (sunflower) */ [data-theme="himawari"] { --ink:#3a2408; --bg:#2a1c0a; --surface:#3a2810; --surface-2:#4b3416; --border:#664824; --coral:#ff9c1a; --mint:#ffd23f; --butter:#ffe07a; --lavender:#d98a3c; --cheek:#ffbe5c; --text:#fff5e0; --muted:#c9a56f; --topbar-bg:rgba(42,28,10,0.85); } /* Raku — softer yellow, pastels (Raku / らく) */ [data-theme="raku"] { --ink:#5a4a2e; --bg:#fffdf3; --surface:#fdf6e0; --surface-2:#f7edcf; --border:#ecdcae; --coral:#f7b955; --mint:#a8d8c0; --butter:#ffe9a6; --lavender:#c4b0e0; --cheek:#ffc9d6; --text:#6b5836; --muted:#a99a76; --topbar-bg:rgba(255,253,243,0.85); } /* Arisu — bright rainbow skewed purple, b&w zebra accent (Arisu Endo / 遠藤有栖). Loud & candy-bright on purpose: a vivid violet base (not near-black) so the whole UI reads purple, with max-saturation rainbow pops (magenta→lime→amber→ cyan) across the accent slots. b&w zebra carried by the near-black ink and bright-white text. */ [data-theme="arisu"] { --ink:#160a24; --bg:#3a1a6e; --surface:#4a2288; --surface-2:#5c2ca8; --border:#7d44d6; --coral:#f4f405; --mint:#7bff3d; --butter:#ffd21a; --lavender:#26e0ff; --cheek:#ff8fe6; --text:#ffffff; --muted:#d0b6ff; --topbar-bg:rgba(58,26,110,0.82); } /* Yuki Arai — blue, white, red, stars; emphasis blue (Yuki Arai / 荒井優希). */ [data-theme="arai"] { --ink:#0a1a3a; --bg:#0d1e46; --surface:#152a5c; --surface-2:#1e3873; --border:#2f4d94; --coral:#e63054; --mint:#5b9dff; --butter:#e8f0ff; --lavender:#8fb8ff; --cheek:#ff8fa8; --text:#f0f6ff; --muted:#94b0dc; --topbar-bg:rgba(13,30,70,0.85); } /* Hyper Misao — teal, pink/magenta, black (Hyper Misao / ハイパーミサヲ). */ [data-theme="misao"] { --ink:#0a0a0d; --bg:#101015; --surface:#181820; --surface-2:#22222d; --border:#37374a; --coral:#ff3d97; --mint:#25d0c0; --butter:#7cf0e4; --lavender:#ff8fc4; --cheek:#ff9ecf; --text:#f2f4f6; --muted:#9aa4b0; --topbar-bg:rgba(16,16,21,0.85); } /* Kamiyu — denim (blue & white), sparkly silver/diamonds, black (Yuki Kamifuku / 上福ゆき / @zacyuki). Denim-blue base; the pops carry silver-white + diamond-ice tones; black ink. The woven denim texture and the twinkling diamond sparkles are added by the two overlay layers below (both scoped to this theme only) — see .denim-fx / [data-theme="kamiyu"] body::after. */ [data-theme="kamiyu"] { --ink:#0b0f1a; --bg:#1c3a63; --surface:#244a7a; --surface-2:#2d588c; --border:#3f6ba6; --coral:#eaf1fb; --mint:#bcd4ef; --butter:#dfe8f5; --lavender:#9ec3e8; --cheek:#cfe0f2; --text:#f4f8fd; --muted:#a9c2df; --topbar-bg:rgba(20,42,72,0.85); /* faint diagonal denim weave woven over --bg. Two opposing thread directions + a fine warp line, all very low-alpha so photos stay the focus. */ --denim: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px); } /* Denim texture layer: painted onto the body background only under this theme. The base :root body background (the two radial glows + --bg) still applies; this just prepends the weave on top of --bg via an extra background image. */ [data-theme="kamiyu"] body { background: radial-gradient(1200px 500px at 80% -10%, rgba(158,195,232,0.10), transparent 60%), radial-gradient(1000px 500px at 0% 0%, rgba(220,232,245,0.06), transparent 55%), var(--denim), var(--bg); background-attachment: fixed; } /* Sparkle layer: a fixed, non-interactive full-viewport wash of tiny silver "diamond" dots that slowly twinkle. Scoped to Kamiyu; pointer-events:none so it never eats clicks; low opacity to stay subtle. */ [data-theme="kamiyu"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,0.9) 0.5px, transparent 1.5px), radial-gradient(circle, rgba(220,235,255,0.7) 0.5px, transparent 1.5px); background-size: 180px 180px, 240px 240px; background-position: 20px 40px, 130px 110px; opacity: 0.5; animation: kamiyu-twinkle 5.5s ease-in-out infinite; } @keyframes kamiyu-twinkle { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { [data-theme="kamiyu"] body::after { animation: none; opacity: 0.4; } } /* Pom — CLOWN MODE (Pom / ぽむ). Deliberately obnoxious, loud, chaotic, almost unusable — per request, leaning into her clown costume (cobalt polka-dot bib, red ruffles, plaid yellow, black&white harlequin skirt, primary chaos). This is the one theme that intentionally violates the "keep photos the focus" rule. Circus-primary palette; the loud background patterns + the constant hue-cycling + the wobble are the chaos. Everything decorative is pointer-events:none so it's *annoying*, not actually broken — clicks still land — and all motion is killed under prefers-reduced-motion. */ /* --pom-hue is a real animatable angle: typing it via @property lets it interpolate, so animating it cycles the *background color itself* (built from hsl(var(--pom-hue)...)) instead of filtering the whole page. That's the fix — the old `filter: hue-rotate()` on body recolored every descendant (photos, text, buttons) too, which is why the base stayed blue while content shifted. */ @property --pom-hue { syntax: ''; inherits: true; initial-value: 220deg; } [data-theme="pom"] { --pom-hue: 220deg; --ink:#10121c; --bg: hsl(var(--pom-hue) 78% 42%); /* the color that now cycles on its own */ --surface: hsl(var(--pom-hue) 72% 48%); --surface-2: hsl(var(--pom-hue) 70% 54%); --border:#ffd21a; --coral:#ff2020; --mint:#ffe000; --butter:#ff59b0; --lavender:#00c2ff; --cheek:#ff8fbf; --text:#ffffff; --muted:#ffe9a0; --radius:6px; --radius-lg:8px; /* squarer, cheaper-looking corners */ --topbar-bg: hsl(var(--pom-hue) 78% 42% / 0.7); /* bold black&white harlequin diamonds (the skirt) */ --harlequin: repeating-linear-gradient(60deg, rgba(0,0,0,0.5) 0 22px, transparent 22px 44px), repeating-linear-gradient(-60deg, rgba(0,0,0,0.5) 0 22px, transparent 22px 44px); /* fat white polka dots (the bib) */ --polka: radial-gradient(circle, rgba(255,255,255,0.85) 9px, transparent 10px); /* drive the hue cycle here on :root so --bg / --surface / --topbar-bg all shift together. No `filter` anywhere = content stays its true colors. */ animation: pom-huecycle 8s linear infinite; } /* Loud patterned background over the (now self-shifting) --bg. */ [data-theme="pom"] body { background: var(--polka), var(--harlequin), var(--bg); background-size: 64px 64px, 44px 76px, 44px 76px; } /* A second fixed layer of drifting confetti dots over everything. */ [data-theme="pom"] body::after { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, #ff2020 6px, transparent 7px), radial-gradient(circle, #ffe000 6px, transparent 7px), radial-gradient(circle, #ff59b0 6px, transparent 7px); background-size: 150px 150px, 200px 210px, 260px 180px; background-position: 0 0, 70px 90px, 160px 40px; opacity: 0.55; animation: pom-drift 3.2s linear infinite; } /* The topbar can't sit still either. */ [data-theme="pom"] .topbar { animation: pom-wobble 0.9s ease-in-out infinite; } [data-theme="pom"] .brand-star { animation: pom-spin 2.4s linear infinite; } /* Hover = a fast, desynced hue-rotate on just the hovered element, so images, buttons, chips etc. churn through colors while pointed at. Different periods (2.1 / 1.3 / 1.7s) keep them out of phase so it reads as chaotic/random. Applied only :hover, only to the element itself — never an ancestor — so it doesn't bleed onto the rest of the page. */ [data-theme="pom"] .photo-card:hover { animation: pom-hoverchurn 2.1s linear infinite; } [data-theme="pom"] .btn-accent:hover, [data-theme="pom"] .btn-ghost:hover, [data-theme="pom"] .btn-icon:hover, [data-theme="pom"] .theme-btn:hover { animation: pom-hoverchurn 1.3s linear infinite; } [data-theme="pom"] .ex-chip:hover, [data-theme="pom"] .search-chip:hover, [data-theme="pom"] .tag-chip:hover { animation: pom-hoverchurn 1.7s linear infinite; } @keyframes pom-huecycle { to { --pom-hue: 580deg; } } /* 220 -> 220+360 = full wheel */ @keyframes pom-hoverchurn { to { filter: hue-rotate(360deg); } } @keyframes pom-drift { to { background-position: 150px 150px, 220px 300px, 420px 220px; } } @keyframes pom-wobble { 0%,100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } } @keyframes pom-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-theme="pom"], [data-theme="pom"] body::after, [data-theme="pom"] .topbar, [data-theme="pom"] .brand-star, [data-theme="pom"] .photo-card:hover, [data-theme="pom"] .btn-accent:hover, [data-theme="pom"] .btn-ghost:hover, [data-theme="pom"] .btn-icon:hover, [data-theme="pom"] .theme-btn:hover, [data-theme="pom"] .ex-chip:hover, [data-theme="pom"] .search-chip:hover, [data-theme="pom"] .tag-chip:hover { animation: none; } } /* Pom B — Harajuku plaid (Pom / ぽむ, her *other* costume: the tartan-mix Harajuku look — navy/white/red/yellow plaid, cream knit, red trim). The calm counterpart to CLOWN MODE: cozy, muted, no animation, photos stay the focus. A faint static tartan weave sits on the background as the nod to the plaid. Originally a light cream theme; flipped to a dark warm-charcoal base (not the light bg re-tinted) for better reading comfort — cream/plaid colors now live in the surfaces and accents instead of the page background. */ [data-theme="pomb"] { --ink:#efe6d4; --bg:#211a14; --surface:#2c2319; --surface-2:#39301f; --border:#544632; --coral:#e0574f; --mint:#6f93d6; --butter:#e8b93a; --lavender:#8fa3d4; --cheek:#e6a0a0; --text:#f1e9db; --muted:#b5a488; --topbar-bg:rgba(33,26,20,0.88); /* faint tartan: two low-alpha red/navy stripe sets crossing over --bg */ --tartan: repeating-linear-gradient(0deg, rgba(224,87,79,0.07) 0 3px, transparent 3px 26px), repeating-linear-gradient(0deg, rgba(111,147,214,0.07) 13px 16px, transparent 16px 26px), repeating-linear-gradient(90deg, rgba(224,87,79,0.07) 0 3px, transparent 3px 26px), repeating-linear-gradient(90deg, rgba(111,147,214,0.07) 13px 16px, transparent 16px 26px); } [data-theme="pomb"] body { background: var(--tartan), var(--bg); background-size: 26px 26px; } /* Suzume — cyber bee: neon yellow-green & silver, black trim (Suzume / すずめ). Hip/cool/cheerful, not soft — a near-black tech base (faint blue-gray tint, not flat black) with a chartreuse-neon primary pop and chrome-silver secondary, echoing her hex-panel gear. A faint honeycomb lattice is woven into the background as the "bee" nod, in the same restrained spirit as Kamiyu's denim weave — visible on close look, not distracting from photos. */ [data-theme="suzume"] { --ink:#0a0d0a; --bg:#111614; --surface:#181f1c; --surface-2:#212a25; --border:#33413a; --coral:#c8f21e; --mint:#d8d8dc; --butter:#eaffb0; --lavender:#9fb0aa; --cheek:#e6ff8f; --text:#f2f7ee; --muted:#8fa39a; --topbar-bg:rgba(17,22,20,0.85); /* honeycomb: two 60°-mirrored hex-edge line sets, very low alpha */ --honeycomb: repeating-linear-gradient(60deg, rgba(200,242,30,0.05) 0 1px, transparent 1px 34px), repeating-linear-gradient(-60deg, rgba(200,242,30,0.05) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(216,216,220,0.04) 0 1px, transparent 1px 34px); } [data-theme="suzume"] body { background: var(--honeycomb), var(--bg); background-size: 40px 68px; } /* Shoko — bestial kaiju (Shoko Nakajima / 中島翔子). Brown leather & fur, bone/ cream, deep red, a touch of turquoise (the cord ties/wraps on her gear). Warm dark-brown base rather than black, so it reads "hide/leather," not generic dark mode. */ [data-theme="shoko"] { --ink:#1c130c; --bg:#241811; --surface:#2f2016; --surface-2:#3c291b; --border:#5a4128; --coral:#b3372a; --mint:#4fa8a0; --butter:#e8dcc4; --lavender:#9c7a52; --cheek:#d98f7a; --text:#f1e6d3; --muted:#b39a7c; --topbar-bg:rgba(28,19,12,0.87); } /* Haru — tokusatsu (Kamen Rider vibes) (Haru). Bright tech-blue, chrome silver, a slight yellow secondary accent, echoing the paneled chest-armor look. --butter alone (8 call sites sitewide) barely shows up, so yellow is also carried by --lavender (163 combined call sites w/ --coral/--mint: filter buttons, chips, code snippets, secondary hovers) so it actually reads as present, while --mint stays chrome silver instead of being sacrificed to it. --lavender drives *text color* at most of those sites though, so the original full-saturation #ffd23f was straight yellow text on blue everywhere — too loud. Muted it toward a soft gold so it still reads as "yellow accent" without shouting as body text. Background is tokusatsu "speed lines" — the radiating diagonal-motion-line burst from action-panel effects — instead of a flat grid, which read as a dull test pattern. Fixed corner, low alpha, so it's a mood cue, not noise. */ [data-theme="haru"] { --ink:#04101c; --bg:#0a2c4a; --surface:#0f3c63; --surface-2:#164c7c; --border:#2f74a8; --coral:#1fc8e8; --mint:#c7ccd4; --butter:#ffd23f; --lavender:#d9b869; --cheek:#8fe0ff; --text:#f0f8ff; --muted:#8fb6d4; --topbar-bg:rgba(10,44,74,0.85); /* speed-line burst radiating from the top-right, plus a faint chrome sheen band. conic-gradient makes the radiating wedges; repeating it gives evenly spaced "lines" instead of a smooth fade. */ --speedlines: repeating-conic-gradient(from 0deg at 100% 0%, rgba(127,216,238,0.09) 0deg 1.2deg, transparent 1.2deg 6deg), linear-gradient(200deg, rgba(199,204,212,0.07), transparent 45%); } [data-theme="haru"] body { background: var(--speedlines), var(--bg); } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(1200px 500px at 80% -10%, rgba(179,156,255,0.10), transparent 60%), radial-gradient(1000px 500px at 0% 0%, rgba(73,214,192,0.07), transparent 55%), var(--bg); color: var(--text); font-family: 'Inter', system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif; /* sticky footer: body is a min-height-viewport flex column, and the footer takes margin-top:auto (below), so on short pages (e.g. an untrusted user's view-only People page) the footer sinks to the bottom of the screen instead of riding up under the content. Tall pages scroll normally. */ min-height: 100vh; display: flex; flex-direction: column; } .hidden { display: none !important; } a { color: inherit; }