/* SumoVolley.io — homepage. * * ⚠️ STAAT BEWUST LOS VAN style.css EN themes.css. Die twee dragen de acht * spelkleuren, de laddersystematiek en honderd componenten die hier niet * voorkomen; ze meeladen zou de eerste verf van een marketingpagina laten wachten * op de opmaak van een heel spel. Deze pagina heeft ÉÉN ontwerp in twee standen. * * ⚠️ ALLES HANGT AAN `[data-mode]`, nooit aan een themanaam. Het pre-paint-script * in de zet dat attribuut vóór de eerste verf — uit een opgeslagen keuze, * anders uit de voorkeur van het toestel. */ /* ⚠️ DE LICHTE STAND IS HET `day`-THEMA VAN HET SPEL, LETTERLIJK OVERGENOMEN. `themes.css` bouwt zijn lichte ladder uit twee getallen — `--th-h: 214` en `--th-s: 40%` voor `day` — en daaruit volgen alle vlakken. Die uitkomsten staan hieronder uitgerekend, zodat de homepage dezelfde blauwtint draagt als de arena zonder dat hij `themes.css` hoeft te laden (dat bestand draagt acht kleuren en honderd componenten die hier niet voorkomen). ⚠️ VERANDERT `day` OOIT VAN TINT, DAN LOOPT DIT UIT DE PAS. Dat is de prijs van niet-meeladen, en hij is bewust genomen. Bij een wijziging: neem `--th-h` en `--th-s` uit `themes.css` en reken deze zes opnieuw uit met dezelfde lichtheden — die staan er per regel bij. ⚠️ `--dim` IS BEWUST DONKERDER DAN `--text-dim` UIT HET SPEL (54%). In het spel staat die tekst op een paneel van 85-90%; hier staat hij op de PAGINA van 78%, en dan haalt 54% de leesbaarheidsdrempel van 4,5:1 niet. Op 30% wel. */ :root { --bg: hsl(214, 40%, 78%); /* = --bg-page (de paginakleur) */ --surface: hsl(214, 40%, 90%); /* = --panel-surface (kop, kaarten, voet) */ --alt: hsl(214, 40%, 85%); /* = --bg-panel (de om-en-om banden) */ --ink: hsl(214, 30%, 13%); /* = --text-primary */ --dim: hsl(214, 20%, 30%); /* donkerder dan --text-dim — zie noot */ --line: hsl(214, 40%, 76%); /* = --border-row */ --accent: #1e6fd9; --gold: #f5c518; --gold-ink: #2a2202; --glass: hsla(214, 40%, 93%, .8); --shadow: 0 1px 2px hsla(214, 30%, 13%, .07), 0 8px 24px hsla(214, 30%, 13%, .09); --m1: #c23a52; --m2: #245fa8; --m3: #6a44b0; /* De scrollbalk — zie de noot bij `::-webkit-scrollbar`. */ --scroll-goot: hsl(214, 40%, 88%); --scroll-duim: hsl(214, 26%, 62%); --scroll-duim-op: hsl(214, 28%, 48%); } :root[data-mode="dark"] { --bg: #0f1a2b; --surface: #16233a; --alt: #132032; --ink: #eef3fa; --dim: #9cb0c9; --line: #24344d; --accent: #6ab0ff; --gold: #f5c518; --gold-ink: #2a2202; --glass: rgba(20, 32, 54, .74); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --m1: #ef6b83; --m2: #63a8e8; --m3: #a487e0; --scroll-goot: #16233a; --scroll-duim: #3d5170; --scroll-duim-op: #56719b; } /* ── Het raster en de fijne lijnen, net als op het inlogscherm ────────────── ⚠️ TWEE VERSCHILLENDE LAGEN, en ze doen iets anders: `body::after` het RASTER van 40x40 — ACHTER alles (z-index -1), zoals `.grid-bg` op login, privacy en de 404. Geeft de pagina diepte zonder ergens overheen te liggen. `body::before` de fijne HORIZONTALE lijnen — een vaste laag OVER de hele pagina (z-index 150), precies als op login: boven de kop en de secties, onder de menu's (200) en de vensters. ⚠️ EN DE KOP DRAAGT ER EEN EIGEN KOPIE VAN (`.top::before`). Die moet namelijk BOVEN de schermafdrukken liggen, en die liggen zelf boven de lijnen — dus de kop komt boven de laag uit en zou hem anders missen. Zie de noot bij de z-index van `.top`. De laag over de pagina heeft een tijdje ALLEEN in de kop gezeten en dat was te weinig: zonder de rest blijft van het raster een patroon van grote vierkanten over. De schermafdrukken zijn apart opgetild (`.shot img`) — dáár was de redenering wél juist, want een foto van het spel hoort geen lijnen te dragen. ⚠️ De waarden zijn overgenomen uit login.html, met `day` (h=214) ingevuld — de homepage heeft één ontwerp in twee standen en dus geen `--th-h`. Verandert die tint daar ooit, dan loopt dit uit de pas; zie de noot bovenin dit bestand, waar dat al voor zes andere kleuren geldt. */ :root { --grid-line: hsla(214, 50%, 30%, .06); --scanline: hsla(214, 40%, 20%, .04); } :root[data-mode="dark"] { --grid-line: rgba(255, 255, 255, .05); --scanline: rgba(0, 0, 0, .08); } /* ⚠️ `z-index: -1` EN NIET 0. Een geplaatst element met z-index 0 tekent BOVEN de gewone inhoud van de pagina — dan ligt het raster over de tekst in plaats van erachter. Negatief zet het achter de inhoud maar nog vóór de achtergrond van `body`, en dat is precies de laag die we willen. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; } /* ⚠️ OVER DE HELE PAGINA, PRECIES ZOALS OP LOGIN. Deze laag heeft eerst alleen in de kop gezeten, met als redenering dat lijnen over veertien schermafdrukken en de illustratie iets anders zijn dan lijnen over een egaal inlogkaartje. Dat is op 2026-09-02 teruggedraaid: zonder die lijnen blijft van het raster alleen een patroon van grote vierkanten over, en dan lijkt de pagina niet meer op de voordeur ernaast. De secties onderaan dragen bovendien hetzelfde vlak als de kop en zagen er dan anders uit dan die kop. ⚠️ z-index 150, hetzelfde getal als op login, en om dezelfde reden: boven de kop (20) en de secties, onder de twee menu's die daar net voor opgetild zijn. Een open menu hoort schoon te zijn. */ body::before { content: ''; position: fixed; inset: 0; z-index: 150; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, var(--scanline) 3px, var(--scanline) 4px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* ⚠️ SAMEN MET DE SCROLLBALK HIERONDER HOUDT DIT HET LOGO OP DEZELFDE PLEK ALS OP HET INLOGSCHERM. Deze pagina is lang en heeft altijd een balk, die pagina past meestal op één scherm en heeft er geen — en de kop centreert met `margin: auto` binnen de beschikbare breedte, die daardoor ~10px verschilde. Het gevolg was niet te zien op één pagina, wél bij het wisselen van tabblad: dan trilde het merk (gemeld 2026-09-02). `stable` reserveert de ruimte altijd, dus beide pagina's rekenen met hetzelfde. De volledige redenering staat in `login.html` bij de `html`-regel. */ scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ⚠️ EXACT DEZELFDE MATEN ALS OP HET INLOGSCHERM, en de BREEDTE is wat telt: de gereserveerde ruimte hierboven is zo breed als de balk zelf, dus met 10px daar en de systeembreedte (~15px) hier zouden de twee koppen alsnog een paar pixels uit elkaar liggen. De kleuren komen wél uit de thema-tokens — het inlogscherm heeft vaste wit-alpha's die op deze lichte pagina onzichtbaar zouden zijn. Bijvangst: de schuifrij met schermafdrukken krijgt dezelfde balk. Die had al `scrollbar-width: thin` voor Firefox; dat blijft, want die eigenschap raakt de webkit-regels niet. */ /* ⚠️ DE DUIM STOND OP `--line`, EN DAT IS DE KLEUR VAN EEN RANDJE. Op de lichte stand (76% lichtheid) tegen een goot van 85% is dat vrijwel niet te zien; een scrollbalk moet juist opvallen tegen zijn achtergrond. Nu een eigen token per stand, ongeveer halverwege tussen de rand en de tekstkleur. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scroll-goot); } ::-webkit-scrollbar-thumb { background: var(--scroll-duim); border-radius: 5px; min-height: 40px; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-duim-op); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace; font-size: 15px; line-height: 1.65; -webkit-text-size-adjust: 100%; } h1, h2, h3 { line-height: 1.2; margin: 0; } p { margin: 0; } img { max-width: 100%; height: auto; } a { color: var(--accent); } /* ⚠️ DE AANRAAK-FLITS VAN DE BROWSER IS ALTIJD EEN RECHTHOEK, ook om een knop die volledig rond is. Op een telefoon zag je bij een tik op het maantje, de wereldbol of de naamknop een blauw VIERKANT achter een ronde pil verschijnen (gemeld met een foto, 2026-09-02). Hij is niet te vormen — alleen uit te zetten. ⚠️ EN DAN MOET ER IETS VOOR IN DE PLAATS KOMEN. Zonder terugkoppeling weet je op een aanraakscherm niet of je tik geregistreerd is; `:hover` bestaat daar niet. Vandaar de `:active`-stand hieronder: hij volgt de eigen vorm van de knop, dus rond blijft rond. Zet die twee dus altijd samen. */ a, button, .btn, .icon-btn { -webkit-tap-highlight-color: transparent; } .btn:active, .icon-btn:active { transform: scale(0.96); } .btn, .icon-btn { transition: transform .08s ease; } @media (prefers-reduced-motion: reduce) { .btn, .icon-btn { transition: none; } /* Geen schaal, maar wél terugkoppeling — anders is er bij uitgezette beweging helemaal niets meer te zien van een tik. */ .btn:active, .icon-btn:active { transform: none; filter: brightness(0.93); } } /* Zichtbare focus, overal. Een marketingpagina is vaak het eerste wat iemand met een toetsenbord tegenkomt. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); } /* ── Knoppen ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; /* raakbaar met een duim */ padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; /* volledig rond, net als de icoonknoppen */ background: transparent; color: var(--ink); font: inherit; font-size: .88em; letter-spacing: .5px; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: bold; } .btn-ghost { background: var(--surface); } .btn-lg { min-height: 52px; padding: 0 26px; font-size: .95em; } .icon-btn { position: relative; /* draagt het onzichtbare raakvlak hieronder */ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .74em; letter-spacing: .5px; cursor: pointer; flex: none; /* nooit samenpersen — zie `.brand-mark` */ } /* De huisknop is een LINK en geen knop: het is navigatie, dus middenklik, "openen in nieuw tabblad" en de statusbalk horen te werken. Daardoor heeft hij twee dingen nodig die een `