/* ========================================================= Beetstra Training — website Bouwt op tokens.css (uit het Beetstra Design System). Regels die hier gelden: · nooit #FFFFFF — lichtste waarde is var(--fg1) · geen 1px scheidingslijnen; diepte via #0F0F0F → #1A1A1A → #2A2A2A · goud is schaars: CTA's, het goudwoord, actieve keuze, focus ========================================================= */ /* ─── Web-schaal ────────────────────────────────────────── De type-scale in tokens.css is gemaakt voor een 390pt telefoonscherm. Op een website leest dat te klein. We schalen de tokens hier op in plaats van tokens.css aan te passen — dat blijft de bron van waarheid. */ :root { --fs-s: 15px; --fs-m: 17px; --fs-xs: 12px; --fs-breadcrumb: 11px; --gutter: clamp(20px, 5vw, 48px); --measure: 68ch; --header-h: 72px; } *, *::before, *::after { box-sizing: border-box; } /* ─── Contrastcorrectie op de tokens ────────────────────── --fg3 (#5A5A5A) haalt op --bg een verhouding van 2.78 : 1 en zakt daarmee onder AA, ook voor grote tekst. In de app werkt dat omdat het daar alleen decoratie is; op deze site zijn de eyebrows, de "optioneel"-markering en de footerregel tekst die gelezen moet worden. Die gaan naar --fg2 (7.33 : 1). --fg3 blijft in gebruik voor puur decoratieve invullingen. */ .bt-section-label, .bt-breadcrumb:not(.gold), small, .bt-caption { color: var(--fg2); } /* Componenten hieronder zetten display:grid/flex; zonder deze regel wint dat van het hidden-attribuut en staat een verborgen paneel gewoon in beeld. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; } /* Zijwaarts pannen op mobiel dichtzetten. overflow-x op alleen is niet genoeg: op iOS blijft dan meebewegen. `clip` heeft de voorkeur boven `hidden` omdat het geen scrollcontainer maakt — anders sneuvelt scroll-padding-top en position: sticky. */ html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } img, picture, svg { max-width: 100%; } img { height: auto; display: block; } a { color: var(--accent-ink); text-decoration-color: var(--accent-ink-soft); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--accent-ink); } /* Focus — 2px goud op 50%, design-systeemregel. */ :where(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-s); } .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 720px; } /* Weggeklipt in plaats van op left: -9999px gezet: dat laatste maakt een gebied buiten het scherm dat op mobiel meepant. */ .skip-link { position: absolute; left: 0; top: 0; z-index: 100; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--primary); color: var(--on-primary); padding: 12px 20px; border-radius: 0 0 var(--r-l) 0; font-weight: var(--w-bold); text-decoration: none; } .skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; } /* ─── Knoppen ───────────────────────────────────────────── tokens.css levert de visuele stijl; interactie hoort bij de site. */ .btn { cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .1s ease; min-height: 52px; } .bt-btn-primary.btn { box-shadow: var(--cta-shadow), inset 0 0 0 1px var(--cta-edge); } .bt-btn-primary.btn:hover { background: var(--primary-dark); } .bt-btn-secondary.btn:hover { background: var(--accent-tint); } .btn:active { transform: translateY(1px); } /* ─── Header ──────────────────────────────────────────── */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: transparent; transition: background-color .25s ease; } .site-header.is-stuck { background: var(--header-stuck); backdrop-filter: blur(20px); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-l); } .header-logo { display: block; line-height: 0; } .header-logo img { width: auto; height: 34px; } .header-cta { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-s); letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg1); text-decoration: none; padding: 10px 0; } .header-cta:hover { color: var(--accent-ink); } /* ─── Hero ──────────────────────────────────────────── De foto ligt achter de tekst. De verduistering is daarom gericht en niet vlak: links, waar de tekst staat, is het scherm bijna dicht; rechts, waar het onderwerp staat, blijft de foto vrijwel onaangetast. Een vlakke laag over het hele beeld haalt juist het onderwerp weg. */ .hero { position: relative; min-height: min(94vh, 820px); min-height: min(94svh, 820px); /* svh: verandert niet als de adresbalk schuift */ display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--sp-3xl)); padding-bottom: clamp(48px, 7vw, 96px); overflow: hidden; background: var(--bg); } .hero-media { position: absolute; inset: 0; max-width: none; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 26%; } .hero::after { content: ""; position: absolute; inset: 0; background: /* logo en aanmeldlink moeten altijd op donker staan */ linear-gradient(to bottom, rgba(15, 15, 15, 0.80) 0%, rgba(15, 15, 15, 0) 140px), /* korte overgang naar het canvas onderaan */ linear-gradient(to top, var(--bg) 0%, rgba(15, 15, 15, 0) 24%), /* het scherm zelf: zwaar links, open rechts */ linear-gradient(100deg, rgba(15, 15, 15, 0.94) 0%, rgba(15, 15, 15, 0.90) 30%, rgba(15, 15, 15, 0.55) 52%, rgba(15, 15, 15, 0.18) 74%, rgba(15, 15, 15, 0.06) 100%); } .hero-inner { position: relative; z-index: 1; } .hero-title { font-size: clamp(32px, 5.2vw, 62px); margin: var(--sp-m) 0 var(--sp-l); } .lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: var(--measure); color: var(--fg1); } /* Boven een foto is --fg2 te licht om betrouwbaar te blijven; hier --fg1. */ .hero .lede { color: var(--fg1); max-width: 44ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-m); margin-top: var(--sp-2xl); } /* Gelijk verdeeld als ze naast elkaar passen, allebei volle breedte zodra ze onder elkaar vallen — nooit twee knoppen van verschillende lengte. */ .hero-actions .btn { flex: 1 1 210px; } .hero-note { color: var(--fg2); font-size: var(--fs-s); margin: var(--sp-l) 0 0; } /* Op een telefoon is er geen "rechterkant" om vrij te laten: daar staat de tekst over de volle breedte, dus wordt het scherm van onderaf opgebouwd. */ @media (max-width: 767px) { .hero { min-height: min(88vh, 680px); align-items: flex-end; } @supports (height: 1svh) { .hero { min-height: min(88svh, 680px); } } .hero-media img { object-position: 62% 22%; } .hero::after { background: linear-gradient(to bottom, rgba(15, 15, 15, 0.80) 0%, rgba(15, 15, 15, 0) 140px), linear-gradient(to top, var(--bg) 0%, rgba(15, 15, 15, 0.94) 26%, rgba(15, 15, 15, 0.72) 52%, rgba(15, 15, 15, 0.30) 78%, rgba(15, 15, 15, 0.15) 100%); } .hero-actions .btn { flex: 1 1 100%; } } @media (min-width: 768px) { .hero-inner > * { max-width: min(56%, 620px); } .hero-actions { max-width: min(56%, 620px); } } /* ─── Secties ─────────────────────────────────────────── */ .section { padding-block: clamp(56px, 8vw, 112px); background: var(--bg); } .section-alt { background: var(--surface); } .section h2 { font-size: clamp(26px, 3.4vw, 40px); margin-top: var(--sp-s); } .section .bt-section-label { display: block; } .section > .wrap > .lede { margin-bottom: var(--sp-2xl); } /* Doelenlijst — tonale kaartjes, geen bullets, geen randen */ .goals-intro { color: var(--fg2); margin-bottom: var(--sp-m); } .goals { list-style: none; margin: 0 0 var(--sp-3xl); padding: 0; display: grid; gap: var(--sp-m); grid-template-columns: 1fr; } @media (min-width: 620px) { .goals { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .goals { grid-template-columns: repeat(3, 1fr); } } .goal { background: var(--surface); border-radius: var(--r-l); padding: var(--sp-l); display: flex; align-items: flex-start; gap: var(--sp-m); font-weight: var(--w-medium); font-size: var(--fs-m); } .section-alt .goal { background: var(--surface-high); } /* Lijnicoon in de accentkleur, uitgelijnd op de eerste tekstregel */ .goal-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--accent-ink); margin-top: calc((1.5em - 24px) / 2); } /* Trainingstijden — zelfde tonale kaartjes als de doelenlijst */ .schedule { list-style: none; margin: 0 0 var(--sp-3xl); padding: 0; display: grid; gap: var(--sp-m); grid-template-columns: 1fr; } @media (min-width: 620px) { .schedule { grid-template-columns: repeat(3, 1fr); } } .slot { background: var(--surface); border-radius: var(--r-l); padding: var(--sp-l); display: grid; gap: var(--sp-xs); } .section-alt .slot { background: var(--surface-high); } .slot-day { font-weight: var(--w-bold); font-size: var(--fs-m); } .slot-time { color: var(--accent-ink); font-variant-numeric: tabular-nums; } /* Tweede bootcampvariant: eigen kop, tekst en één tijdslot onder het hoofdrooster */ .bootcamp-variant { max-width: 720px; margin-bottom: var(--sp-3xl); } .bootcamp-variant h3 { margin-bottom: var(--sp-m); } .bootcamp-variant .schedule { margin-top: var(--sp-l); margin-bottom: 0; } @media (min-width: 620px) { .bootcamp-variant .schedule { grid-template-columns: minmax(0, 1fr); max-width: 300px; } } /* Tekst naast beeld */ .split { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; margin-bottom: var(--sp-3xl); } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split-reverse .split-text { order: 2; } } .split-text p { max-width: var(--measure); } .split-media { margin: 0; } .split-media img { border-radius: var(--r-l); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* Kaarten */ .cards { display: grid; gap: var(--sp-l); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: var(--sp-3xl); } .card { padding: clamp(20px, 3vw, 32px); } .section-alt .card { background: var(--surface-high); } .card p:last-child { margin-bottom: 0; } .section-cta { display: grid; gap: var(--sp-l); justify-items: start; } .section-cta .lede { margin: 0; } /* ─── Formulier ───────────────────────────────────────── */ .section-form { background: var(--bg); } /* De sectie loopt op volle breedte mee, zodat het eyebrow, de kop en de introtekst op één lijn staan met de secties erboven. Alleen het formulier zelf blijft smal: invoervelden naast elkaar over 1120px lezen slecht. */ /* Honeypot: uit beeld zonder display:none (dat slaan bots over) en zonder negatieve offset (die zorgde voor zijwaarts scrollen op mobiel). */ .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-intro { margin-bottom: var(--sp-2xl); max-width: 720px; } .section-form .form, .section-form .form-success { max-width: 720px; } .form { display: grid; gap: var(--sp-xl); } .field { display: grid; gap: var(--sp-s); border: 0; margin: 0; padding: 0; min-width: 0; } .field-row { display: grid; gap: var(--sp-xl); } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .field-label { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg2); padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-s); } .optional { font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--fg2); text-transform: uppercase; } .field-hint { color: var(--fg2); font-size: var(--fs-s); margin: 0; line-height: 1.5; } .input { width: 100%; background: var(--surface-high); color: var(--fg1); font-family: var(--font-body); font-size: var(--fs-m); border: 1px solid var(--border); /* toegankelijkheid: veldgrens moet zichtbaar zijn */ border-radius: var(--r-l); padding: 15px var(--sp-l); min-height: 52px; transition: border-color .15s ease; } /* Het voorbeeldnummer is een leeshint, geen decoratie — dus ook --fg2. */ .input::placeholder { color: var(--fg2); } .input:hover { border-color: var(--border-hover); } .input:focus { border-color: var(--accent-ink); } .textarea { resize: vertical; min-height: 128px; line-height: 1.55; } /* Datumveld: Safari/Chrome tekenen hun eigen kalendericoon in donkerblauw-zwart */ input[type="date"] { color-scheme: inherit; } /* Keuze-pillen */ .pillgroup { display: flex; flex-wrap: wrap; gap: var(--sp-s); } .pill { position: relative; display: inline-flex; } /* De radio wordt niet verkleind tot 0×0 maar bedekt de hele pil: hij blijft een echt klikdoel, houdt zijn plek in de focusvolgorde en blijft voor een schermlezer gewoon een radio. */ .pill input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .pill span { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px var(--sp-xl); background: var(--surface-high); color: var(--fg1); border-radius: var(--r-full); font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-s); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .pill:hover span { background: var(--surface-highest); } .pill input:checked + span { background: var(--primary); color: var(--on-primary); font-weight: var(--w-bold); } .pill input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Akkoordvinkje */ .check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-m); align-items: start; cursor: pointer; } .check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; background: var(--surface-high); border: 1px solid var(--border); border-radius: var(--r-s); cursor: pointer; display: grid; place-content: center; transition: background-color .15s ease, border-color .15s ease; } .check input::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .check input:checked { background: var(--primary); border-color: var(--primary); } .check input:checked::after { opacity: 1; } .check span { color: var(--fg2); font-size: var(--fs-s); line-height: 1.55; } /* Fouten — gedempt rozé uit het design system, geen fel rood */ .field-error { color: var(--error); font-size: var(--fs-s); margin: 0; } .field-error::before { content: "— "; } .input.is-invalid { border-color: var(--error); } .form-errors { background: rgba(196, 145, 138, 0.12); color: var(--error-soft); border-radius: var(--r-l); padding: var(--sp-l); font-size: var(--fs-s); } .form-errors p { color: inherit; margin: 0; } .btn-submit { width: 100%; margin-top: var(--sp-s); } @media (min-width: 640px) { .btn-submit { width: auto; justify-self: start; padding-inline: 40px; } } /* Bevestiging */ .form-success { background: var(--surface-high); border-radius: var(--r-l); padding: clamp(24px, 4vw, 40px); display: grid; gap: var(--sp-m); justify-items: start; } .form-success h3 { margin: 0; } .form-success p { margin: 0; } /* ─── Footer ──────────────────────────────────────────── */ .site-footer { background: var(--bg); padding-block: clamp(48px, 6vw, 80px) var(--sp-3xl); } .footer-inner { display: grid; gap: var(--sp-2xl); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .footer-brand img { width: 44px; height: auto; } .footer-tag { font-size: var(--fs-l); margin-top: var(--sp-m); } .footer-list { list-style: none; margin: var(--sp-m) 0 0; padding: 0; display: grid; gap: var(--sp-s); } .footer-list li { color: var(--fg2); font-size: var(--fs-s); } address.footer-list { font-style: normal; color: var(--fg2); font-size: var(--fs-s); line-height: 1.7; display: block; } /* Alleen een kleurverschil met de tekst eromheen is te weinig om een link als link te herkennen; daarom een onderstreping. */ .footer-list a { color: var(--fg1); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; } .footer-list a:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); } /* Placeholdermarkering — moet opvallen zolang de gegevens ontbreken. Verwijder de -elementen samen met de placeholders. */ .ph { color: var(--on-primary); background: var(--primary); font-size: var(--fs-xs); font-weight: var(--w-bold); padding: 1px 6px; border-radius: var(--r-s); } .footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-m); justify-content: space-between; padding-top: var(--sp-2xl); color: var(--fg2); } .footer-bottom a { color: var(--fg2); text-decoration: none; } .footer-bottom a:hover { color: var(--primary); } /* ─── Losse pagina's (privacy, 404) ───────────────────── */ .page { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(56px, 8vw, 112px); } .page h1 { font-size: clamp(28px, 4vw, 44px); } .page h2 { font-size: clamp(20px, 2.4vw, 26px); margin-top: var(--sp-3xl); } .page p, .page li { max-width: var(--measure); color: var(--fg2); } .page ul { padding-left: var(--sp-xl); display: grid; gap: var(--sp-s); } .page .back { display: inline-block; margin-top: var(--sp-3xl); } /* ─── Bewegingsvoorkeur ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ─── Thema ─────────────────────────────────────────────── Donker is de merkstand en blijft de standaard, ook als het besturingssysteem op licht staat. Licht is een bewuste keuze van de bezoeker via de knop rechtsboven; die keuze wordt onthouden. tokens.css blijft ongemoeid — de lichte set herdefinieert alleen dezelfde variabelen. De namen hieronder zijn nieuw en web-specifiek: --accent-ink is goud dat als tekst of lijn moet lezen. Puur goud (#F1C103) haalt op een crèmekleurige ondergrond 1,56 : 1 en is daar dus onbruikbaar voor tekst; als vlak (knopvulling) kan het wel, mits het een rand krijgt die de vorm begrenst — vandaar --cta-edge. */ :root { color-scheme: dark; --accent-ink: var(--primary); --accent-ink-soft: rgba(241, 193, 3, 0.40); --accent-tint: rgba(241, 193, 3, 0.08); --focus-ring: rgba(241, 193, 3, 0.50); --cta-shadow: var(--shadow-gold); --cta-edge: transparent; --header-stuck: rgba(26, 26, 26, 0.94); --border-hover: #3A3A3A; } html[data-theme="light"] { color-scheme: light; /* Alle waarden hieronder komen uit het huisstijlpalet, op twee na die hun herkomst in het commentaar dragen. huisstijl.md noemt grijs #F5F5F5 zelf als achtergrondkleur, met zwart, geel of blauw erop. */ --bg: #F5F5F5; /* Beetstra grijs */ --surface: #EBEBEB; /* tonale stap, zoals #0F0F0F -> #1A1A1A */ --surface-high: #E0E0E0; --surface-highest: #D6D6D6; --fg1: #252525; /* Beetstra zwart, 14,1 : 1 op --bg */ --fg2: #5A5A5A; /* de --fg3 uit het donkere thema, 6,3 : 1 */ --fg3: #8A8A8A; /* decoratief */ --border: #767676; /* 3,4 : 1 op de veldvulling; op licht moet de veldgrens zichtbaar zijn */ --border-hover: #5A5A5A; /* Geel haalt als tekst 1,56 : 1 op grijs en kan daar dus niet. De huisstijl geeft blauw als toegestane variant op grijs: 8,5 : 1. */ --accent-ink: #2F4093; /* Beetstra blauw */ --accent-ink-soft: rgba(47, 64, 147, 0.40); --accent-tint: rgba(47, 64, 147, 0.10); --focus-ring: rgba(47, 64, 147, 0.65); /* Geel blijft geel als vlak, maar met een merkzwarte rand — anders heeft de knopvorm geen zichtbare grens tegen het grijs (1,56 : 1). */ --cta-edge: #252525; --cta-shadow: 0 8px 20px rgba(37, 37, 37, 0.16); --header-stuck: rgba(245, 245, 245, 0.94); /* Afgeleid, niet uit de huisstijl: die kent geen foutkleur. Dit is de --error uit het design system, donker genoeg gemaakt voor licht (6,98 : 1); de zachte rozetint zelf haalt daar 2,1 : 1. */ --error: #8C3A2E; --error-soft: #7A2E22; } /* Goud dat als tekst staat, volgt --accent-ink in plaats van --primary. */ .bt-editorial-title .gold, h1.bt-display .gold, .bt-breadcrumb.gold, .bt-accent { color: var(--accent-ink); } .bt-btn-secondary { color: var(--accent-ink); border-color: var(--accent-ink); } .pill input:checked + span { box-shadow: inset 0 0 0 1px var(--cta-edge); } html[data-theme="light"] .check input:checked { border-color: var(--cta-edge); } html[data-theme="light"] .form-errors { background: var(--surface-high); } /* De hero blijft in beide thema's een donkere foto met een lichte tekst erover; het verloop onderaan loopt wel naar de paginakleur van het actieve thema. Deze tekst mag dus niet met --fg1 meebewegen. */ .hero .bt-breadcrumb, .hero .hero-title, .hero .lede, .hero .hero-note { color: #F5F5F5; } .hero .bt-breadcrumb.gold, .hero .gold { color: var(--primary); } /* Beide heroknoppen zijn gelijkwaardig: Personal Training en Bootcamp zijn twee keuzes, geen hoofd- en bijzaak. Allebei omlijnd, geen vulling — een gevulde knop leest als "dit is de bedoeling". */ .hero .bt-btn-secondary { color: var(--primary); border-color: var(--primary); } .hero .bt-btn-secondary.btn:hover { background: rgba(241, 193, 3, 0.08); } .hero .hero-note { color: var(--fg2); } html[data-theme="light"] .hero .hero-note { color: #A0A0A0; } /* Het woordmerk heeft twee versies: wit+goud voor donkere ondergronden, zwart+goud voor lichte. Boven de hero is de header doorzichtig, dus daar blijft het witte merk staan tot de header een vlak krijgt. */ .header-logo img { width: auto; height: 34px; } .header-logo .logo-on-light { display: none; } html[data-theme="light"] .site-header.is-stuck .logo-on-light { display: block; } html[data-theme="light"] .site-header.is-stuck .logo-on-dark { display: none; } .site-header .header-cta { color: #F5F5F5; } html[data-theme="light"] .site-header.is-stuck .header-cta { color: var(--fg1); } .footer-brand .mark-on-light { display: none; } html[data-theme="light"] .footer-brand .mark-on-light { display: block; } html[data-theme="light"] .footer-brand .mark-on-dark { display: none; } /* ─── Themaschakelaar ─────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid rgba(245, 245, 245, 0.28); border-radius: var(--r-full); cursor: pointer; color: #F5F5F5; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } html[data-theme="light"] .site-header.is-stuck .theme-toggle { color: var(--fg1); border-color: rgba(21, 20, 15, 0.28); } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } html[data-theme="light"] .site-header.is-stuck .theme-toggle:hover { color: var(--accent-ink); border-color: var(--accent-ink); } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } .header-actions { display: flex; align-items: center; gap: var(--sp-l); } @media (prefers-reduced-motion: reduce) { .theme-toggle, .site-header { transition: none; } }