/* davidstoltenborg.dk — designtokens og flader * * Retning: rå performance-æstetik. Ultraløb om natten — pandelamper, kulde, * refleks, splittider. Mørk grøn bærer siden; papirfladerne er pauserne. * * Sitet har FIRE flader og ikke flere: * * .on-ink #0B1F17 hero, statsbjælke, kapitelskift, kontakt, footer * .on-forest #14392A løbertest-bånd, tidslinje, fremhævet priskort * .on-bone #E4E6DE papirflade: Om David, Medier, Udtalelser, Forløb, * Workshops, Ultra4Charity, FAQ * .on-paper #F2F3EE kun til kort, der ligger på bone * * Hver flade sætter selv sin accent. Den eneste farveregel, der skal huskes: * hi-vis på mørk, forest på lys. Der findes ikke et tilfælde, hvor hi-vis er * lovligt på papir. * * Kontrast, målt efter WCAG 2's formel mod de faktiske tokens: * * hivis på ink 12,26:1 godkendt * hivis på forest 9,09:1 godkendt * ink på hivis 12,26:1 godkendt (knaptekst) * hivis på bone 1,11:1 FALDER IGENNEM — forbudt * forest på bone 10,11:1 accent på papirflade * forest på paper 11,42:1 accent på kortflade * fg-on-dark på ink 14,91:1 brødtekst på mørk flade * fg-on-dark på forest 11,06:1 brødtekst på mørk flade * slate-light på ink 7,15:1 sekundær tekst på mørk flade * slate-light på forest 5,31:1 sekundær tekst på mørk flade * slate-ink på bone 6,48:1 sekundær tekst på papir * slate-ink på paper 7,32:1 sekundær tekst på kortflade * * --stroke-slate er IKKE en tekstfarve. Den måler 3,83:1 på ink, 3,56:1 på * bone og 2,84:1 på forest og falder igennem AA overalt. Den er udelukkende * streg- og skillelinjefarve på mørke flader og må aldrig sættes som color. * * Sekundær tekst hentes altid via --fg-muted, som fladen selv resolver. */ :root { /* ---- Flader ---- */ --ink: #0B1F17; --forest: #14392A; --bone: #E4E6DE; --paper: #F2F3EE; /* ---- Accent ---- */ --hivis: #C6E82F; --hivis-hover: #D6F45A; /* ---- Tekst ---- */ --slate-light: #9FAAA2; /* sekundær tekst på ink og forest */ --slate-ink: #47524A; /* sekundær tekst på bone og paper */ --stroke-slate: #6E7A70; /* kun streger. Aldrig color. */ --white: #FFFFFF; --fg-on-dark: #EDF0E8; --fg-on-light: var(--ink); /* Mørke flader har brug for en linje, der ikke er sort */ --line-dark: #2A4436; --line-light: #CBCEC2; --overlay-photo: linear-gradient(to top, rgba(11,31,23,.94) 0%, rgba(11,31,23,.72) 38%, rgba(11,31,23,.18) 78%, rgba(11,31,23,.05) 100%); /* ---- Spacing (4px basis) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --section-gap: var(--space-16); /* ---- Layout ---- */ --content-max: 1120px; --content-narrow: 760px; --grid-gutter: var(--space-6); --measure: 68ch; /* ---- Typografi ---- * Sektionsoverskrifter har gulv på 48px, også på mobil. Det er hovedgrebet: * overskrifter omkring 22px gjorde siden flad. */ --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Barlow Condensed", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display-tracking: -.02em; --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-lead: 20px; --text-h3: 24px; --text-h2: 48px; --text-display: clamp(56px, 8vw, 112px); --text-data: clamp(44px, 6vw, 76px); --leading-display: .92; --leading-tight: 1.05; --leading-body: 1.6; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 800; /* ---- Øvrigt ---- * Ingen afrundede flader og ingen bløde skygger. Formen kommer fra * fladeskift og fuldbleed fotografi, ikke fra kort. */ --radius: 0; --radius-control: 2px; --focus-offset: 2px; --focus-ring-color: var(--hivis); /* Sticky topbar. Ankerspring skal have samme afstand, ellers lander de * under baren. Mærket er 64px og sætter højden alene: 12 + 64 + 12 + 1px. */ --topbar-h: 89px; } @media (min-width: 768px) { :root { --text-base: 18px; --text-lead: 22px; --text-h3: 28px; --text-h2: clamp(48px, 5vw, 72px); --section-gap: var(--space-24); } } /* ---------- Fladeklasser ---------- * Komponenter refererer kun rollenavne og kender aldrig en konkret farve. * Det er derfor samme priskort kan stå på papir, forest og ink uden * variant-klasser. */ .on-ink, .on-forest { --accent: var(--hivis); --cta-fill: var(--hivis); --cta-fg: var(--ink); --cta-hover: var(--hivis-hover); --cta-text: var(--hivis); --ring: var(--hivis); --fg: var(--fg-on-dark); --fg-muted: var(--slate-light); --heading-color: var(--fg-on-dark); --line: var(--line-dark); --border-soft: var(--line-dark); --border-strong:#3A5748; --field-bg: #08170F; --field-border: var(--line-dark); --field-fg: var(--fg-on-dark); --field-placeholder: var(--slate-light); --disabled-bg: #1B3529; --disabled-fg: #9FAAA2; color: var(--fg-on-dark); } .on-ink { background: var(--ink); --card: var(--forest); } .on-forest { background: var(--forest); --card: #1B4634; } .on-bone, .on-paper { --accent: var(--forest); --cta-fill: var(--forest); --cta-fg: var(--white); --cta-hover: var(--ink); --cta-text: var(--forest); --ring: var(--forest); --fg: var(--ink); --fg-muted: var(--slate-ink); --heading-color: var(--ink); --line: var(--line-light); --border-soft: var(--line-light); --border-strong:#B4B8AB; --field-bg: var(--white); --field-border: #B4B8AB; --field-fg: var(--ink); --field-placeholder: var(--slate-ink); --disabled-bg: #D3D6CC; --disabled-fg: var(--slate-ink); color: var(--ink); } .on-bone { background: var(--bone); --card: var(--paper); } .on-paper { background: var(--paper); --card: var(--white); }