/* ═══════════════════════════════════════════════════════════ BRUTALIST THEME Activate: add data-style="brutalist" to . Owns its palette, type scale and radius scale outright; only the class contract in base.css is shared. ═══════════════════════════════════════════════════════════ */ /* ── Brutalist light ── */ /* ── Brutalist palette ── pure, unmixed signal colour: the theme's whole argument is that nothing is softened, so the accents are primaries at full saturation rather than the origin theme's tuned values. ── */ html[data-style='brutalist'] { --p-accent-1: #00c8c8; --p-accent-2: #ff0080; --p-accent-3: #ffd400; --p-accent-4: #7c3aed; --p-accent-5: #0066ff; --p-accent-6: #ff0000; --p-accent-7: #00c400; --p-accent-8: #ff6600; --p-info: #0066ff; --p-success: #00c400; --p-warn: #ffd400; --p-danger: #ff0000; --p-on-accent: #000000; /* Oswald is condensed: it can carry more size at the same measure. */ --t-h1: clamp(2.75rem, 1.4rem + 6vw, 5.25rem); --t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); --t-lh-display: 0.94; --t-track-display: -0.03em; /* Nothing is softened, including the corners. Zeroing the scale is what squares every kit component; the universal rule below is only a backstop for markup the kit does not style. */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; --r-round: 0; } html[data-style='brutalist'] { --c-bg: #f5f5f5; --c-surface: #ffffff; --c-border: #000000; --c-muted: #555555; --c-text: #000000; --c-text-sub: #333333; --c-dot: #cccccc; --c-nav-bg: #f5f5f5; --c-accent: #ff6600; --c-accent-2: #ff0000; --c-accent-3: #ffe600; /* Text/icons sitting ON a --c-accent fill. Near-white on this orange is only 2.7:1, so on-accent is a warm near-black instead. */ --c-on-accent: #1a0f00; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); } /* ── Brutalist dark ── */ html[data-style='brutalist'][data-theme='dark'] { --c-bg: #000000; --c-surface: #0a0a0a; --c-border: #ffffff; --c-muted: #999999; --c-text: #ffffff; --c-text-sub: #cccccc; --c-dot: #222222; --c-nav-bg: #000000; --c-accent: #ff6600; --c-accent-2: #ff0000; --c-accent-3: #ffe600; --c-on-accent: #1a0f00; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); } /* ── Brutalist dark (system preference) ── */ @media (prefers-color-scheme: dark) { html[data-style='brutalist']:not([data-theme]) { --c-bg: #000000; --c-surface: #0a0a0a; --c-border: #ffffff; --c-muted: #999999; --c-text: #ffffff; --c-text-sub: #cccccc; --c-dot: #222222; --c-nav-bg: #000000; --c-accent: #ff6600; --c-accent-2: #ff0000; --c-accent-3: #ffe600; --c-on-accent: #1a0f00; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); } } /* ══════════════════════════════════════════════════════════ BRUTALIST STYLE OVERRIDES Applied to html[data-style='brutalist'] ══════════════════════════════════════════════════════════ */ /* ── SUSE Mono body font ── */ html[data-style='brutalist'] body { font-family: 'SUSE Mono', 'Courier New', monospace; -webkit-font-smoothing: auto; } /* ── Oswald for headings ── */ html[data-style='brutalist'] h1, html[data-style='brutalist'] h2, html[data-style='brutalist'] h3 { font-family: 'Oswald', sans-serif; font-weight: 700; } /* ── Backstop: square anything the radius tokens above don't reach ── */ html[data-style='brutalist'] *, html[data-style='brutalist'] *::before, html[data-style='brutalist'] *::after { border-radius: 0 !important; } /* ── Kill backdrop blur on nav ── */ html[data-style='brutalist'] nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── No gradient headline — plain Oswald uppercase ── */ html[data-style='brutalist'] .gradient-text { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--c-text) !important; background-clip: unset !important; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; } /* ── Hide ambient glow halos ── */ html[data-style='brutalist'] .halo-drift-1, html[data-style='brutalist'] .halo-drift-2, html[data-style='brutalist'] .halo-drift-3, html[data-style='brutalist'] .halo-drift-4 { display: none !important; } /* ── Kill dot grid ── */ html[data-style='brutalist'] .dot-grid { background-image: none !important; } /* ── Thick borders + offset shadow on cards ── */ html[data-style='brutalist'] .card { border-width: 2px; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: none; } html[data-style='brutalist'] .card:hover { transform: translateY(-3px) !important; box-shadow: 6px 8px 0 var(--c-accent) !important; } html[data-style='brutalist'] .link-card { border-width: 2px; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: none; } html[data-style='brutalist'] .link-card:hover { transform: translateY(-3px) !important; box-shadow: 6px 8px 0 var(--c-accent) !important; } /* ── Tag pills become mono label squares ── */ html[data-style='brutalist'] .tag { font-family: 'Courier New', Courier, monospace; letter-spacing: 0.05em; } /* ── Button system: brutalist overrides ── */ html[data-style='brutalist'] .btn-primary, html[data-style='brutalist'] .btn-outlined { font-family: 'Courier New', Courier, monospace; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } html[data-style='brutalist'] .btn-primary:hover { opacity: 1; transform: translateY(-3px); box-shadow: 6px 8px 0 var(--c-text); } html[data-style='brutalist'] .btn-outlined { border-width: 2px; border-color: var(--c-border); color: var(--c-text); } html[data-style='brutalist'] .btn-outlined:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-3px); box-shadow: 6px 8px 0 var(--c-text); } html[data-style='brutalist'] .btn-icon { border-width: 2px; } html[data-style='brutalist'] .btn-icon:hover { transform: translateY(-2px); box-shadow: 5px 6px 0 var(--c-text); } /* ══════════════════════════════════════════════════════════ BRUTALIST — new element classes (forms / feedback / nav) ══════════════════════════════════════════════════════════ */ /* ── Mono labels, hard offset shadow on focus ── */ html[data-style='brutalist'] .field-label, html[data-style='brutalist'] .field-hint { font-family: 'Courier New', Courier, monospace; } html[data-style='brutalist'] .field-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--t-xs); } html[data-style='brutalist'] .input, html[data-style='brutalist'] .select { border-width: 2px; font-family: 'SUSE Mono', 'Courier New', monospace; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } html[data-style='brutalist'] .input:hover, html[data-style='brutalist'] .select:hover { border-color: var(--c-border); } html[data-style='brutalist'] .input:focus-visible, html[data-style='brutalist'] .select:focus-visible { box-shadow: 4px 5px 0 var(--c-text); transform: translate(-2px, -2px); } html[data-style='brutalist'] .input:disabled, html[data-style='brutalist'] .select:disabled { opacity: 0.5; } /* ── Square checkbox, hard check ── */ html[data-style='brutalist'] .checkbox { border-width: 2px; } html[data-style='brutalist'] .checkbox::before { clip-path: polygon(10% 45%, 0 65%, 45% 100%, 100% 10%, 85% 0%, 40% 65%); } html[data-style='brutalist'] .checkbox:focus-visible, html[data-style='brutalist'] .radio:focus-visible { box-shadow: 3px 4px 0 var(--c-text); } /* ── Square radio (brutalist trades the circle for the family's zero-radius look) ── */ html[data-style='brutalist'] .radio { border-width: 2px; } /* ── Switch as a square slider ── */ html[data-style='brutalist'] .switch { border-width: 2px; } html[data-style='brutalist'] .switch::before { box-shadow: none; } html[data-style='brutalist'] .switch:focus-visible { box-shadow: 3px 4px 0 var(--c-text); } /* ── Alerts: uniform 2px frame + solid tint, mono — the variant lives in the tinted fill, not a side-tab edge ── */ html[data-style='brutalist'] .alert { border-width: 2px; font-family: 'SUSE Mono', 'Courier New', monospace; } html[data-style='brutalist'] .alert-title { text-transform: uppercase; letter-spacing: 0.04em; } html[data-style='brutalist'] .alert-info { background: color-mix(in srgb, var(--p-info) 16%, var(--c-surface)); } html[data-style='brutalist'] .alert-success { background: color-mix(in srgb, var(--p-success) 16%, var(--c-surface)); } html[data-style='brutalist'] .alert-warn { background: color-mix(in srgb, var(--p-warn) 18%, var(--c-surface)); } html[data-style='brutalist'] .alert-error { background: color-mix(in srgb, var(--p-danger) 16%, var(--c-surface)); } /* ── Badges: mono, squared ── */ html[data-style='brutalist'] .badge { font-family: 'Courier New', Courier, monospace; letter-spacing: 0.05em; } /* ── Progress: base's --c-border track is pure black/white here, which would swallow the fill — surface track behind a hard 2px rail ── */ html[data-style='brutalist'] .progress { border: 2px solid var(--c-border); background: var(--c-surface); height: 0.75rem; } /* ── Skeleton: flat blocks, no shimmer gradient ── */ html[data-style='brutalist'] .skeleton { border: 2px solid var(--c-border); } html[data-style='brutalist'] .skeleton::after { display: none !important; } /* ── Spinner: square, hard-edged rotation ── */ html[data-style='brutalist'] .spinner { border-width: 3px; } /* ── Tabs: thick underline ── */ html[data-style='brutalist'] .tabs { border-bottom-width: 2px; } html[data-style='brutalist'] .tab { font-family: 'Courier New', Courier, monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } html[data-style='brutalist'] .tab::after { height: 3px; } html[data-style='brutalist'] .tab-active::after { background: var(--c-text); } html[data-style='brutalist'] .tab:focus-visible { box-shadow: 3px 4px 0 var(--c-text); } /* ── Breadcrumbs: mono trail ── */ html[data-style='brutalist'] .breadcrumbs { font-family: 'Courier New', Courier, monospace; text-transform: uppercase; letter-spacing: 0.04em; } /* ── Pagination: square buttons, hard offset shadow ── */ html[data-style='brutalist'] .page { border-width: 2px; font-family: 'Courier New', Courier, monospace; font-weight: 700; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } html[data-style='brutalist'] .page:hover { transform: translate(-2px, -2px); box-shadow: 3px 4px 0 var(--c-text); } html[data-style='brutalist'] .page-active { box-shadow: none !important; transform: none !important; } html[data-style='brutalist'] .page:focus-visible { box-shadow: 3px 4px 0 var(--c-text); }