/* ═══════════════════════════════════════════════════════════ BOLD THEME Swiss-poster / type-foundry-specimen aesthetic — saturated vermilion, near-black ink, floating white pills, oversized tight-tracked grotesque headlines. Activate: add data-style="bold" to . Owns its palette, type scale and radius scale outright; only the class contract in base.css is shared. ═══════════════════════════════════════════════════════════ */ /* ── Bold light ── The vermilion IS the page background — ink text on it clears 5.1:1 (verified), so text/text-sub/muted/accent-2/accent-3 all stay in the ink family: on a background this saturated, only near-black passes AA — white text on vermilion is just 3.8:1. */ /* ── Bold palette ── deep poster inks. Badges fill solid with these, so the whole set sits in one dark lightness band and a single white --p-on-accent is readable on every one of them; they also hold against the vermilion field without vibrating the way fluorescents would. ── */ html[data-style='bold'] { --p-accent-1: #00706a; --p-accent-2: #b8154f; --p-accent-3: #8a6400; --p-accent-4: #5a3ea8; --p-accent-5: #1a4fae; --p-accent-6: #b81f33; --p-accent-7: #3a7d22; --p-accent-8: #b8460a; --p-info: #1a4fae; --p-success: #3a7d22; --p-warn: #8a6400; --p-danger: #b81f33; --p-on-accent: #ffffff; /* The whole premise of this theme. Archivo Black, as large as the viewport allows, tracked tight enough to lock into a single mass. */ --t-h1: clamp(3rem, 1.2rem + 9vw, 7rem); --t-h2: clamp(2rem, 1.2rem + 3.4vw, 3.25rem); --t-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); --t-lh-display: 0.9; --t-lh-heading: 1.02; --t-track-display: -0.038em; --t-track-heading: -0.03em; /* In light mode this theme's accent IS the ink, so the shared mid lightness would lift it off the vermilion into mush. Dark mode is left alone — there the accent is vermilion on near-black and the generic dark --ink-l (higher specificity) correctly takes over. */ --ink-l: 0.21; /* One radius language, not twelve: tight on the small controls so they read as cut shapes, generous on the cards so they read as the floating white pills the poster premise is built on. */ --r-xs: 0.2rem; --r-sm: 0.4rem; --r-md: 0.6rem; --r-lg: 1.25rem; --r-pill: 999px; } html[data-style='bold'] { --c-bg: #f43c1d; --c-surface: #ffffff; --c-border: #120a08; --c-muted: #2b120a; --c-text: #120a08; --c-text-sub: #241009; --c-dot: #e2572f; --c-nav-bg: rgba(255, 255, 255, 0.92); --c-accent: #120a08; --c-accent-2: #241009; --c-accent-3: #1a0b06; /* Text/icons sitting ON a --c-accent fill. Accent is ink here (buttons read as solid black pills), so on-accent is white — 19.6:1, nowhere near --c-bg's failing 3.8:1 on vermilion. */ --c-on-accent: #ffffff; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); } /* ── Bold dark ── Same personality inverted: near-black page, off-white ink, vermilion promoted to accent (it pops against near-black at 6.3:1+, so buttons/checked states become vermilion pills). */ html[data-style='bold'][data-theme='dark'] { --c-bg: #120a08; --c-surface: #1f130e; --c-border: #f5ede8; --c-muted: #9c7a6c; --c-text: #f5ede8; --c-text-sub: #c9b0a5; --c-dot: #2a1611; --c-nav-bg: rgba(18, 10, 8, 0.9); --c-accent: #ff5b39; --c-accent-2: #f43c1d; --c-accent-3: #ff7a57; /* Ink on the bright vermilion accent — 6.3:1. */ --c-on-accent: #150905; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); } /* ── Bold dark (system preference) ── */ @media (prefers-color-scheme: dark) { html[data-style='bold']:not([data-theme]) { --c-bg: #120a08; --c-surface: #1f130e; --c-border: #f5ede8; --c-muted: #9c7a6c; --c-text: #f5ede8; --c-text-sub: #c9b0a5; --c-dot: #2a1611; --c-nav-bg: rgba(18, 10, 8, 0.9); --c-accent: #ff5b39; --c-accent-2: #f43c1d; --c-accent-3: #ff7a57; --c-on-accent: #150905; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); } } /* ══════════════════════════════════════════════════════════ BOLD STYLE OVERRIDES Applied to html[data-style='bold'] ══════════════════════════════════════════════════════════ */ /* ── Archivo body font ── */ html[data-style='bold'] body { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ── Archivo Black for headings — huge, tight, flat ── */ html[data-style='bold'] h1, html[data-style='bold'] h2, html[data-style='bold'] h3 { font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; } /* ── No gradient headline — flat ink, poster-style tight caps ── */ html[data-style='bold'] .gradient-text { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--c-text) !important; background-clip: unset !important; font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; } /* ── Kill dot grid and ambient halos — a flat vermilion poster field reads as the identity itself; blurred blobs and a stipple grid both dilute that flatness, so both effects are switched off (mirrors how brutalist drops them for its own flat, hard-edged look). ── */ html[data-style='bold'] .dot-grid { background-image: none !important; } html[data-style='bold'] .halo-drift-1, html[data-style='bold'] .halo-drift-2, html[data-style='bold'] .halo-drift-3, html[data-style='bold'] .halo-drift-4 { display: none !important; } /* ── Nav as a floating white pill: rounded lower edge, ink hairline, no blur so the surface reads as a solid card, not glass ── */ html[data-style='bold'] nav { border-radius: 0 0 var(--r-lg) var(--r-lg); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Cards: white surface, 2px ink hairline, soft lift on hover ── */ html[data-style='bold'] .card, html[data-style='bold'] .link-card { border-width: 2px; transition: transform 0.15s ease, box-shadow 0.15s ease; } html[data-style='bold'] .card:hover, html[data-style='bold'] .link-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(18, 10, 8, 0.35); } /* ── Tags: uppercase labels as small surface pills ── base.css tints the .tag-* variants as palette-coloured TEXT on an 8% fill of the same hue — legible on a neutral page, invisible on this one (--p-accent-2 on the vermilion bg is ~1.3:1). So Bold flips them: the text is always ink-on-surface (AA in both modes) and the palette colour moves to the border, which carries the same identity. ── */ html[data-style='bold'] .tag { font-family: 'Archivo', sans-serif; font-weight: 700; border-width: 2px; border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); letter-spacing: 0.12em; } html[data-style='bold'] .tag-accent-1 { border-color: var(--p-accent-1); } html[data-style='bold'] .tag-accent-2 { border-color: var(--p-accent-2); } html[data-style='bold'] .tag-accent-3 { border-color: var(--p-accent-3); } html[data-style='bold'] .tag-accent-4 { border-color: var(--p-accent-4); } html[data-style='bold'] .tag-accent-5 { border-color: var(--p-accent-5); } html[data-style='bold'] .tag-accent-6 { border-color: var(--p-accent-6); } html[data-style='bold'] .tag-accent-7 { border-color: var(--p-accent-7); } html[data-style='bold'] .tag-accent-8 { border-color: var(--p-accent-8); } /* ── Button system: ink pills, tight Archivo Black caps ── */ html[data-style='bold'] .btn-primary, html[data-style='bold'] .btn-outlined { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0.02em; } html[data-style='bold'] .btn-outlined { border-width: 2px; border-color: var(--c-border); } html[data-style='bold'] .btn-icon { border-width: 2px; border-color: var(--c-border); } html[data-style='bold'] .theme-toggle { border-width: 2px; border-color: var(--c-border); } /* ══ Forms ══════════════════════════════════════════════════ */ html[data-style='bold'] .field-label { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--t-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text); } html[data-style='bold'] .field-hint { font-family: 'Archivo', sans-serif; color: var(--c-muted); } html[data-style='bold'] .input, html[data-style='bold'] .select { font-family: 'Archivo', sans-serif; border-width: 2px; border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); } html[data-style='bold'] .input:focus, html[data-style='bold'] .input:focus-visible, html[data-style='bold'] .select:focus, html[data-style='bold'] .select:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 30%, transparent); } /* Chevron drawn from currentColor so it always reads as ink. */ html[data-style='bold'] .select { color: var(--c-text); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.35rem) center, calc(100% - 1rem) center; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; } html[data-style='bold'] .checkbox, html[data-style='bold'] .radio, html[data-style='bold'] .switch { border-width: 2px; border-color: var(--c-border); background: var(--c-surface); } html[data-style='bold'] .checkbox:checked, html[data-style='bold'] .radio:checked, html[data-style='bold'] .switch:checked { border-color: var(--c-accent); background: var(--c-accent); } /* The checked radio fills with accent here, so base's accent-coloured dot would vanish into it — the dot flips to on-accent. */ html[data-style='bold'] .radio::before { background: var(--c-on-accent); } /* Base's thumb geometry assumes a 1px track border; with this theme's 2px it clips at the far end, so the offsets shrink to compensate. */ html[data-style='bold'] .switch::before { top: 0.075rem; left: 0.1rem; } html[data-style='bold'] .switch:checked::before { transform: translateX(1.2rem); } html[data-style='bold'] .checkbox:focus-visible, html[data-style='bold'] .radio:focus-visible, html[data-style='bold'] .switch:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 30%, transparent); } /* ══ Feedback ═══════════════════════════════════════════════ */ /* Alerts keep their base palette tints (color-mix from --p-*) — only the border gets the theme's hard 2px ink treatment. */ html[data-style='bold'] .alert { font-family: 'Archivo', sans-serif; border-width: 2px; border-color: var(--c-border); } html[data-style='bold'] .alert-title { font-weight: 700; letter-spacing: 0.01em; } html[data-style='bold'] .badge { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Base paints the track with --c-border — which is INK in this theme, so track and fill would both be black. White track, ink rail. */ html[data-style='bold'] .progress { border: 1px solid var(--c-border); border-radius: var(--r-xs); background: var(--c-surface); } /* Skeleton: flat tint, no sliding shimmer — a moving gradient fights the flat poster surface. The sweep lives on base's ::after, so that is switched off; in its place a plain opacity pulse still reads as "in progress" without the gradient sweep. */ html[data-style='bold'] .skeleton { background: color-mix(in srgb, var(--c-border) 12%, var(--c-surface)) !important; animation: bold-skeleton-pulse 1.4s ease-in-out infinite; } html[data-style='bold'] .skeleton::after { display: none !important; } @keyframes bold-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { html[data-style='bold'] .skeleton { animation: none; } } /* Spinner: in light mode --c-accent IS the ink (buttons read as solid black pills — see the --ink-l note above), and --c-border is the same ink, so base's ring/arc pair (border vs accent) collapses into one flat colour and the rotation has nothing to show. A translucent-ink ring always contrasts with the solid-ink arc regardless of that overlap — same idiom vaporwave uses for its own accent-only ring. Covers dark mode too (accent and border already differ there, but a self-consistent ring/arc pair is still correct and keeps light and dark on one rule instead of splitting the override). */ html[data-style='bold'] .spinner { border-width: 3px; border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); border-top-color: var(--c-accent); } @media (prefers-reduced-motion: reduce) { html[data-style='bold'] .spinner { animation: none; border-color: var(--c-accent); border-right-color: color-mix(in srgb, var(--c-accent) 25%, transparent); } } /* ══ Navigation ═════════════════════════════════════════════ */ html[data-style='bold'] .tabs { border-bottom: 2px solid var(--c-border); } html[data-style='bold'] .tab { font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: var(--t-xs); } /* The underline is base's ::after element, not a real border — thicken that (a border-width here would never paint: .tab has no border). */ html[data-style='bold'] .tab-active { font-weight: 700; } html[data-style='bold'] .tab-active::after { height: 4px; } html[data-style='bold'] .breadcrumbs { font-family: 'Archivo', sans-serif; font-size: var(--t-xs); letter-spacing: 0.02em; text-transform: uppercase; } html[data-style='bold'] .breadcrumbs a:hover { color: var(--c-accent); } /* Pagination reads as solid ink squares — square corners, hard border; the active fill already comes from --c-accent (ink in light, vermilion in dark) via the shared token contract. */ html[data-style='bold'] .page { border-width: 2px; border-color: var(--c-border); font-family: 'Archivo', sans-serif; font-weight: 700; }