/* ═══════════════════════════════════════════════════════════════════════════ theme.css — Brněnské Tlapky The site's accent colour, and the logo hover glow. Load it FIRST, before main.css / events.css: ── CHANGING THE COLOUR ────────────────────────────────────────────────── Edit the four values in the :root block below. The whole palette is listed underneath as ready-made blocks — to go blue, copy the Eros blue values over the ones in :root. That's the only edit; nothing else references a colour directly. (No JavaScript, nothing saved per visitor. If you ever want visitors to choose for themselves, the commented blocks are already in the right shape for it — but that's a later problem.) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── ACTIVE THEME: Spooky orange ── */ --accent: #f08c00; /* fills, borders, the logo glow */ --accent2: #ff4f00; /* hover / active partner */ --on-accent: #0e0c0a; /* text sitting ON --accent */ --accent-ink: #f08c00; /* --accent used AS TEXT on the dark background */ --accent-rgb: 240,140,0; /* same colour as r,g,b — for rgba() */ /* ── Structure ── */ --bg: #0e0c0a; --surface: #1a1714; --border: #2e2a26; --text: #ede8e2; --muted: #7a7066; --nav-h: 64px; --nav-logo: 48px; /* ── Logo glow tuning ── */ --glow-rest: #ffffffcc; --glow-rest-size: 2.5px; --glow-hover-size: 5px; --glow-speed: .2s; } /* ═══════════════════════════════════════════════════════════════════════════ THE PALETTE — copy one set into :root above to switch. Why four values and not one: --accent alone can't do every job. · --on-accent is the text drawn on top of --accent. Black on Spooky orange is fine; black on Flamik blue, Blood red or Violet is unreadable, which is what your own notes said next to those three. · --accent-ink is --accent used as TEXT on the #0e0c0a background. The dark accents fail badly here: Flamik blue is 2.1:1, well under the 4.5:1 you need to read it. So those entries carry a lightened version of the same hue instead — 4.5:1 or better, and it still looks like the colour. Bright accents don't need it, so there it's just --accent again. Affects: .section-label, .page-label, .hero h1 em, .event time, .faqQ, links, footer links. ─────────────────────────────────────────────────────────────────────────── Fuzzzy lime (the old default) --accent: #86e824; --accent2: #42a400; --on-accent: #0e0c0a; --accent-ink: #86e824; --accent-rgb: 134,232,36; Spooky orange ← currently active --accent: #f08c00; --accent2: #ff4f00; --on-accent: #0e0c0a; --accent-ink: #f08c00; --accent-rgb: 240,140,0; Eros blue (bright blue — reads well as text as-is) --accent: #37c3e7; --accent2: #1b93b4; --on-accent: #0e0c0a; --accent-ink: #37c3e7; --accent-rgb: 55,195,231; Flamik blue (dark — needs white text on it, lightened ink) --accent: #004e62; --accent2: #00323f; --on-accent: #ffffff; --accent-ink: #0085a7; --accent-rgb: 0,78,98; Cheese yellow --accent: #dddd00; --accent2: #a8a800; --on-accent: #0e0c0a; --accent-ink: #dddd00; --accent-rgb: 221,221,0; Blood red (white text, as you guessed) --accent: #dd0000; --accent2: #a00000; --on-accent: #ffffff; --accent-ink: #f40000; --accent-rgb: 221,0,0; Candy pink --accent: #ff69b4; --accent2: #e0348c; --on-accent: #0e0c0a; --accent-ink: #ff69b4; --accent-rgb: 255,105,180; Violet (dark — needs white text on it, lightened ink) --accent: #9400d3; --accent2: #6d009c; --on-accent: #ffffff; --accent-ink: #bd23ff; --accent-rgb: 148,0,211; LGBT rainbow — not a colour, so not a copy-paste job: add data-theme="rainbow" to instead. See below. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LOGO HOVER GLOW White halo at rest, accent glow on hover. Applies to the Brněnské Tlapky logo on every page that loads this file — index, gallery, events, forms, activity. Nothing else glows. Two deliberate details: · The transition sits on :not(:hover), so the glow snaps ON and fades OFF. That asymmetry is what makes it feel responsive, and it's how you wrote it. · It transitions `filter` only. A bare `transition: .2s` means `transition: all`, which also animates colour and borders. ═══════════════════════════════════════════════════════════════════════════ */ .nav-logo { filter: drop-shadow(0 0 var(--glow-rest-size) var(--glow-rest)); } .nav-logo:hover, .nav-logo:focus-visible { filter: drop-shadow(0 0 var(--glow-hover-size) var(--accent)); } .nav-logo:not(:hover) { transition: filter var(--glow-speed); } @media (prefers-reduced-motion: reduce) { .nav-logo:not(:hover) { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ RAINBOW THEME Turn it on with: A gradient can't live in --accent: `border: 1px solid var(--accent)` and `drop-shadow(… var(--accent))` both expect one colour and break otherwise. So the rainbow is done the only way it can be — as real gradients on text and backgrounds, and as a stack of coloured shadows for the glow. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="rainbow"] { /* Solid fallbacks, for the places a gradient genuinely cannot go (border-color, single-colour shadows, SVG fills). */ --accent: #ff8c00; --accent2: #e40303; --on-accent: #0e0c0a; --accent-ink: #ff8c00; --accent-rgb: 255,140,0; --accent-grad: linear-gradient(180deg, #e40303 0%, #e40303 16.66%, #ff8c00 16.66%, #ff8c00 33.33%, #ffed00 33.33%, #ffed00 50%, #008026 50%, #008026 66.66%, #004cff 66.66%, #004cff 83.33%, #732982 83.33%, #732982 100%); /* Same stripes left-to-right, for wide elements where vertical banding would look like a glitch rather than a flag. */ --accent-grad-h: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004cff, #732982); /* A gradient shadow isn't a thing, so stack six offset colours. */ --accent-glow-rainbow: drop-shadow(0 -3px 2px #e40303) drop-shadow(0 -2px 2px #ff8c00) drop-shadow(0 -1px 2px #ffed00) drop-shadow(0 1px 2px #008026) drop-shadow(0 2px 2px #004cff) drop-shadow(0 3px 2px #732982); } /* ── Rainbow TEXT ──────────────────────────────────────────────────────── background-clip:text paints the gradient through the glyphs. The -webkit- prefix is still required: Safari and every iOS browser need it. */ [data-theme="rainbow"] .hero h1 em, [data-theme="rainbow"] .section-label, [data-theme="rainbow"] .page-label, [data-theme="rainbow"] .post-header h3, [data-theme="rainbow"] .event time { /* .fuzzz is deliberately absent: it stays Fuzzzy lime in every theme, rainbow included. Add `, [data-theme="rainbow"] .fuzzz` to this list if you'd rather the name went rainbow too. */ background-image: var(--accent-grad-h); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Gradient text can't carry a text-shadow, so lift it off the dark background with a touch of weight instead. */ font-weight: 800; } /* ── Rainbow BACKGROUNDS ─────────────────────────────────────────────────── */ [data-theme="rainbow"] .btn-primary, [data-theme="rainbow"] .hero .closestEvent .time span, [data-theme="rainbow"] .accent-grad { background-image: var(--accent-grad); background-color: transparent; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); /* readable over any stripe */ } /* The countdown digits set their own colour in main.css, so inheriting from the span isn't enough — they'd stay near-black over the green and blue stripes. Force them pale with a shadow instead. */ [data-theme="rainbow"] .hero .closestEvent .time .timeVal, [data-theme="rainbow"] .hero .closestEvent .time .timeLet { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); } [data-theme="rainbow"] .btn-primary:hover { background-image: var(--accent-grad-h); color: #fff; } /* A gradient can't be a border-colour, so the rainbow border is a padded gradient backdrop with the surface colour masked back in on top. */ [data-theme="rainbow"] .hero .closestEvent { border: none; padding: calc(1.5rem + 2px); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--accent-grad-h) border-box; border: 2px solid transparent; } /* ── Rainbow SHADOWS ─────────────────────────────────────────────────────── */ [data-theme="rainbow"] .nav-logo:hover, [data-theme="rainbow"] .nav-logo:focus-visible { filter: var(--accent-glow-rainbow); } [data-theme="rainbow"] .card:hover, [data-theme="rainbow"] #bluesky:hover { border-color: #ff8c00; box-shadow: 0 12px 32px rgba(0,0,0,.3), -6px 0 10px -6px #e40303, -3px 0 10px -6px #ff8c00, 0 0 10px -6px #ffed00, 3px 0 10px -6px #008026, 6px 0 10px -6px #004cff, 9px 0 10px -6px #732982; } /* Gradient text in a high-contrast context is a readability risk — the stripes include #ffed00 and #008026, which differ a lot against dark. Fall back to flat ink when the visitor has asked for more contrast. */ @media (prefers-contrast: more) { [data-theme="rainbow"] .hero h1 em, [data-theme="rainbow"] .section-label, [data-theme="rainbow"] .page-label, [data-theme="rainbow"] .post-header h3, [data-theme="rainbow"] .event time { background-image: none; -webkit-text-fill-color: var(--accent-ink); color: var(--accent-ink); } }