/* * Homepage styles. Adapted from mockups/a.php ("Bitfield", variant A). * * Font-face notes: * - Only 4 weights ship: Plex Sans 400/700, Plex Mono 400/600. Plex Sans 600 * does not exist (an 11 KB file for one line of text is not worth it) — * .verdict b uses 700 instead of the mockup's 600. * - The @font-face rules (incl. unicode-range) used to be hand-typed here. * That was wrong four times running (missing/misplaced codepoints), so * they are now generated by scripts/build-fonts.sh straight from the * cmap it already reads to build the subsets — same computation, one * source of truth, no second place to drift. The generated block lives * in src/assets/fonts/fonts.css (build output, gitignored, not here) and * is inlined into by src/index.php — see the comment there for * why inline instead of a stylesheet @import. */ :root{ --bg:#090d12; --surface:#111820; --line:#243040; --text:#e8eff6; --muted:#8296a8; /* 4.5:1 on both --bg (5.04:1) and --surface (4.62:1, the stricter one) — was #4a5b6d (2.79:1 / 2.56:1), failing WCAG AA. See .superpowers/sdd/task-5-report.md for the full contrast table. */ --faint:#6d849c; --v4:#ff9e4a; --v6:#35d6c0; --v4-dim:rgba(255,158,74,.14); --v6-dim:rgba(53,214,192,.14); } *{box-sizing:border-box;margin:0} html{background:var(--bg)} body{ font-family:'Plex Sans',system-ui,sans-serif;color:var(--text); -webkit-font-smoothing:antialiased;line-height:1.5; min-height:100vh;display:flex;flex-direction:column; } /* Alles wat .wrap deelt gebruikt hieronder padding-block, nooit de padding- shorthand: die heeft dezelfde specificiteit en zou de 24px hier wegvagen, waardoor de inhoud op mobiel tegen de schermrand plakt. */ .wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:24px} @media(max-width:480px){.wrap{padding-inline:16px}} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---- header ---- */ .top{padding-block:28px;display:flex;align-items:center;justify-content:space-between} .mark{font-weight:700;font-size:17px;letter-spacing:-.02em} .mark b{color:var(--v6);font-weight:700} .lang{display:flex;gap:2px;font-family:'Plex Mono',monospace;font-size:12px} .lang a{ color:var(--faint);text-decoration:none;padding:5px 9px;border-radius:5px; } .lang a[aria-current]{color:var(--text);background:var(--surface)} .lang a:hover{color:var(--text)} .lang a:focus-visible{outline:2px solid var(--v6);outline-offset:2px} /* ---- hero ---- */ .hero{flex:1;padding-block:8px 56px} .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:860px){.grid{grid-template-columns:1fr}} .card{ background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:24px;position:relative;overflow:hidden; } .card::before{ content:'';position:absolute;inset:0 0 auto 0;height:2px; background:var(--accent);opacity:.8; } .card--v4{--accent:var(--v4);--dim:var(--v4-dim)} .card--v6{--accent:var(--v6);--dim:var(--v6-dim)} .card__label{ font-family:'Plex Mono',monospace;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);margin-bottom:14px; display:flex;align-items:center;gap:8px;font-weight:400; } .card__label::after{content:'';flex:1;height:1px;background:var(--line)} .addr{ font-family:'Plex Mono',monospace;font-weight:600; font-size:clamp(19px,3.4vw,30px);letter-spacing:-.02em; word-break:break-all;line-height:1.25;margin-bottom:4px; } .addr--v6{font-size:clamp(15px,2.2vw,20px)} .addr--none{color:var(--faint);font-weight:400} .copy{ margin-top:14px;background:transparent;border:1px solid var(--line); color:var(--muted);font-family:'Plex Mono',monospace;font-size:12px; padding:7px 12px;border-radius:6px;cursor:pointer; } .copy:hover{border-color:var(--accent);color:var(--accent)} .copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .copy.is-done{color:var(--accent);border-color:var(--accent)} .copy:disabled{opacity:.5;cursor:default} /* ---- copy-all: één actie over beide kaarten ---- Neutraal (grijs) i.p.v. amber/cyaan: deze knop hoort bij geen van beide protocollen, dus mag hij niet de betekenisdragende accentkleur van één ervan lenen. */ .copyall{margin-top:18px;text-align:center} .copyall .copy{margin-top:0} .copy--all:hover{border-color:var(--muted);color:var(--text)} .copy--all:focus-visible{outline-color:var(--muted)} .copy--all.is-done{color:var(--text);border-color:var(--muted)} /* ---- signature: the bit grid ---- */ /* De verhouding hoort op het rooster, niet op de cellen. Stond aspect-ratio:1 op .bit, dan leidde elke cel zijn hoogte af uit zijn eigen fractionele 1fr-breedte (23,4375px en dergelijke) en rondde de browser dat per cel apart af. Bij het schalen van het venster viel die afronding per kolom anders uit: ongelijke cellen en rijen die niet meer uitlijnen. Met expliciete rijen en de ratio op de container rekent de browser alle sporen uit een doos af, dus is de afronding overal gelijk. */ .bits{ display:grid; grid-template-columns:repeat(var(--cols),1fr); grid-template-rows:repeat(var(--rows),1fr); aspect-ratio:var(--cols) / var(--rows); gap:3px;margin:20px 0 16px; } .bit{ border-radius:1.5px;background:var(--dim); animation:pop .3s ease-out backwards;animation-delay:calc(var(--i) * 6ms); } .bit.is-on{background:var(--accent)} @keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} @media(prefers-reduced-motion:reduce){.bit{animation:none}} .meta{ font-family:'Plex Mono',monospace;font-size:12.5px;color:var(--muted); display:grid;gap:5px; } .meta div{display:flex;gap:8px} .meta dt{color:var(--faint);min-width:74px} .meta strong{color:var(--text);font-weight:400} .count{color:var(--accent);font-weight:600} /* ---- verdict line ---- */ .verdict{ margin-top:22px;padding:15px 18px;border:1px solid var(--line); border-radius:10px;font-size:14.5px;color:var(--muted); } .verdict b{color:var(--text);font-weight:700} /* ---- share row ---- */ /* Onderaan de kaarten, niet erboven: dit mag nooit met de adressen concurreren om aandacht — dat is nog steeds de enige vraag waarvoor de bezoeker kwam. */ .share{ margin-top:14px;padding-top:14px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px; font-family:'Plex Mono',monospace;font-size:12px; } .share__label{color:var(--faint)} .share a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)} .share a:hover{color:var(--text);border-bottom-color:var(--muted)} .share a:focus-visible,.share button:focus-visible{outline:2px solid var(--v6);outline-offset:2px} /* .copy en .share__native hergebruiken de kaart-knopstijl, alleen zonder de marge die daar de ruimte onder het bit-raster maakt. */ .share .copy,.share__native{ margin-top:0;background:transparent;border:1px solid var(--line); color:var(--muted);font-family:'Plex Mono',monospace;font-size:12px; padding:7px 12px;border-radius:6px;cursor:pointer; } .share .copy:hover,.share__native:hover{border-color:var(--v6);color:var(--v6)} .share .copy.is-done{color:var(--v6);border-color:var(--v6)} /* Twee rijen: stille navigatie naar de uitlegpagina's (.foot-links), en de bestaande privacy-/attributieregel (.foot-meta) eronder. Zie templates/partials/footer.php voor waarom de linkjes hier staan en niet ertussen: dit staat sowieso al onder de fold, dus de eerste-viewport- belofte van de homepage blijft ongemoeid. */ .foot{ border-top:1px solid var(--line);padding-block:20px; font-family:'Plex Mono',monospace;font-size:12px;color:var(--faint); display:flex;flex-direction:column;gap:14px; } .foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)} .foot a:hover{color:var(--text);border-bottom-color:var(--muted)} .foot a:focus-visible{outline:2px solid var(--v6);outline-offset:2px} .foot-links{display:flex;flex-wrap:wrap;gap:8px 16px} .foot-meta{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap} /* ---- "waarom heb ik geen IPv6"-link in de adreskaart ---- */ /* Alleen app.js zet dit element neer (zie absent()), en alleen voor de IPv6-kaart: dit is precies het moment waarop die vraag ontstaat. */ .addr .why-link{ margin-left:8px;font-size:13px;font-weight:400;font-family:'Plex Mono',monospace; color:var(--v6);text-decoration:none;border-bottom:1px solid var(--v6-dim); } .addr .why-link:hover{border-bottom-color:var(--v6)} .addr .why-link:focus-visible{outline:2px solid var(--v6);outline-offset:2px} /* ---- uitlegpagina's (templates/article.php) ---- Deze pagina's moeten bij de checker horen, niet als losse blog aanvoelen. Het bindmiddel is het label-motief van de kaarten: monospace, hoofdletters, ruime letterafstand, accentkleur, met een streep die de regel uitvult (.card__label). Dat komt hier terug op de h2's, zodat je aan de typografie ziet dat het dezelfde site is -- zonder dat er een nieuw idee bij komt. Regellengte rond de 68 tekens: langer wordt lastig lezen, en deze pagina's zijn 500+ woorden. */ .article{flex:1;padding-block:36px 64px;max-width:680px} .article__eyebrow{ font-family:'Plex Mono',monospace;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--v6);margin-bottom:12px; display:flex;align-items:center;gap:8px; } .article__eyebrow::after{content:'';flex:1;height:1px;background:var(--line)} .article h1{ font-size:clamp(27px,4vw,38px);line-height:1.18;letter-spacing:-.02em; margin-bottom:24px; } .article__body{font-size:16.5px;line-height:1.7;color:#c3cfdc} /* De eerste alinea beantwoordt de vraag -- Google toont die, en de lezer wil geen inleiding. Iets groter en lichter, zodat dat ook zichtbaar is. */ .article__body > p:first-of-type{ font-size:18px;line-height:1.6;color:var(--text);margin-bottom:28px; } .article__body p{margin-bottom:20px} .article__body p:last-child{margin-bottom:0} .article__body h2{ font-family:'Plex Mono',monospace;font-size:12.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--v6); margin:40px 0 14px;display:flex;align-items:center;gap:10px; } .article__body h2::after{content:'';flex:1;height:1px;background:var(--line)} .article__body a{color:var(--v6);text-decoration:none;border-bottom:1px solid var(--v6-dim)} .article__body a:hover{border-bottom-color:var(--v6)} .article__body a:focus-visible{outline:2px solid var(--v6);outline-offset:2px} .article__body strong{color:var(--text);font-weight:700} .article__body ul{margin:0 0 20px 20px} .article__body li{margin-bottom:8px} .article__body code{ font-family:'Plex Mono',monospace;font-size:14px;color:var(--v4); background:var(--surface);border:1px solid var(--line); border-radius:4px;padding:1px 5px; } /* De FAQ-blokken worden kaarten, hetzelfde vlak en dezelfde radius als de adreskaarten op de homepage. */ .article__faq{margin-top:48px} .article__faq > h2{ font-family:'Plex Mono',monospace;font-size:12.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--muted); margin-bottom:16px;display:flex;align-items:center;gap:10px; } .article__faq > h2::after{content:'';flex:1;height:1px;background:var(--line)} .faq__item{ background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:18px 20px;margin-bottom:10px; } .faq__item h3{font-size:15.5px;font-weight:700;margin-bottom:8px;color:var(--text)} .faq__item p{font-size:15px;line-height:1.6;color:var(--muted);margin:0} /* Terug naar de checker: dat is waar de bezoeker vandaan kwam en waar de site om draait, dus die link mag opvallen. Zelfde vorm als de knoppen op de kaarten. */ .article__back{margin-top:44px} .article__back a{ display:inline-block;font-family:'Plex Mono',monospace;font-size:13px; color:var(--muted);text-decoration:none; border:1px solid var(--line);border-radius:6px;padding:9px 14px; } .article__back a:hover{border-color:var(--v6);color:var(--v6)} .article__back a:focus-visible{outline:2px solid var(--v6);outline-offset:2px}