/* * Skeleton v4 Theme — Illetes * File: illetes.css * Source: https://dhd.audio * DHD Elektronische Fertigungsgesellschaft mbH, Leipzig * Professional broadcast audio equipment manufacturer * * Usage: * @import './illetes.css'; * * * Palette — Illetes: * Primary → Amber Orange (#f18700) --accent: oklch(0.76 0.177 59) * Secondary → Warm Sand (hue 97.5) --base: oklch(0.65 0.015 97.5) * Tertiary → Steel Blue (hue 212) --info: oklch(0.65 0.11 212) * Surface → Warm Neutral (hue 90–100, warm off-white → near-black) * Success → Green (hue 147) --success: oklch(0.65 0.175 147) * Warning → Golden Amber (hue 85) --warning: oklch(0.65 0.154 85) * Error → Coral Red (hue 21) --danger: oklch(0.65 0.202 21) * * Typography: * Headings: 'dhd-font' (Borna, self-hosted), weight 400 → Inter fallback * Body: Inter, letter-spacing −1px (--text-letter-spacing on site) * Heading letter-spacing: −0.06em (--heading-letter-spacing: −6% on site) * * Radius: 0.375rem base (site default: 5px), 0.5rem container */ /* Inter — self-hosted variable font (no external request). Files in ../assets/fonts/ ; url() resolves relative to this stylesheet. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } [data-theme='illetes'] { /* ── Spacing & Scale ─────────────────────────────────────────────────── */ --spacing: 0.25rem; --text-scaling: 1.067; /* ── Base Typography ─────────────────────────────────────────────────── */ --base-font-color: var(--color-surface-700); --base-font-color-dark: var(--color-surface-200); --base-font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif; --base-font-size: inherit; --base-line-height: inherit; --base-font-weight: normal; --base-font-style: normal; --base-letter-spacing: 0em; /* site: --text-letter-spacing: -1px */ /* ── Heading Typography ──────────────────────────────────────────────── */ --heading-font-color: var(--color-surface-900); --heading-font-color-dark: oklch(1 0 0); --heading-font-family: 'dhd-font', 'Inter', ui-sans-serif, system-ui, sans-serif; --heading-font-weight: 400; /* site: Borna Regular (not bold) */ --heading-font-style: normal; --heading-letter-spacing: 0em; /* site: --heading-letter-spacing: -6% */ /* ── Anchor Typography ───────────────────────────────────────────────── */ --anchor-font-color: var(--color-primary-500); --anchor-font-color-dark: var(--color-primary-400); --anchor-font-family: inherit; --anchor-font-size: inherit; --anchor-line-height: inherit; --anchor-font-weight: inherit; --anchor-font-style: inherit; --anchor-letter-spacing: inherit; --anchor-text-decoration: none; --anchor-text-decoration-hover: underline; --anchor-text-decoration-active: none; --anchor-text-decoration-focus: none; /* ── Body Background ─────────────────────────────────────────────────── */ /* Site: --body-bg-color = --base-ultra-light = oklch(0.9416 0.0148 97.55) */ --body-background-color: var(--color-surface-100); --body-background-color-dark: var(--color-surface-900); /* ── Borders & Radius ────────────────────────────────────────────────── */ /* Site: --radius: 5px; CTA buttons: border-radius: 999px (pill shape) */ --radius-base: 0.375rem; --radius-container: 0.5rem; --default-border-width: 1px; --default-divide-width: 1px; --default-ring-width: 1px; /* ═══════════════════════════════════════════════════════════════════════ COLOR PALETTES — oklch, derived from dhd.audio Automatic CSS framework Source: https://dhd.audio/wp-content/uploads/automatic-css/automatic.css (Automatic CSS v4.0.0-rc-1, generated 2026-04-13) ═══════════════════════════════════════════════════════════════════════ */ /* ── PRIMARY: Amber Orange (#f18700) ────────────────────────────────── */ /* Source: --accent: oklch(0.76 0.177 59) — UIKit confirms #f18700 */ --color-primary-50: oklch(0.978 0.022 73); /* very pale peach */ --color-primary-100: oklch(0.952 0.055 71); /* light peach */ --color-primary-200: oklch(0.912 0.100 68); /* pale orange */ --color-primary-300: oklch(0.866 0.140 64); /* light orange */ --color-primary-400: oklch(0.818 0.165 61); /* medium-light orange */ --color-primary-500: oklch(0.760 0.177 59); /* #f18700 --accent */ --color-primary-600: oklch(0.680 0.175 55); /* medium orange */ --color-primary-700: oklch(0.570 0.162 50); /* medium-dark amber */ --color-primary-800: oklch(0.450 0.140 45); /* dark amber */ --color-primary-900: oklch(0.325 0.105 40); /* very dark amber */ --color-primary-950: oklch(0.225 0.072 38); /* near-black amber */ --color-primary-contrast-dark: oklch(0.10 0.04 59); --color-primary-contrast-light: oklch(0.99 0 0); --color-primary-contrast-50: var(--color-primary-contrast-dark); --color-primary-contrast-100: var(--color-primary-contrast-dark); --color-primary-contrast-200: var(--color-primary-contrast-dark); --color-primary-contrast-300: var(--color-primary-contrast-dark); --color-primary-contrast-400: var(--color-primary-contrast-dark); --color-primary-contrast-500: var(--color-primary-contrast-dark); --color-primary-contrast-600: var(--color-primary-contrast-dark); --color-primary-contrast-700: var(--color-primary-contrast-light); --color-primary-contrast-800: var(--color-primary-contrast-light); --color-primary-contrast-900: var(--color-primary-contrast-light); --color-primary-contrast-950: var(--color-primary-contrast-light); /* ── SECONDARY: Warm Sand (--base palette, hue 97.5) ────────────────── */ /* Source: --base: oklch(0.65 0.0147 97.55) — warm neutral body scale */ --color-secondary-50: oklch(0.979 0.005 90); --color-secondary-100: oklch(0.962 0.008 93); --color-secondary-200: oklch(0.929 0.012 95); --color-secondary-300: oklch(0.882 0.016 96); --color-secondary-400: oklch(0.775 0.018 97); --color-secondary-500: oklch(0.650 0.015 97); /* --base */ --color-secondary-600: oklch(0.530 0.013 97); --color-secondary-700: oklch(0.420 0.010 97); --color-secondary-800: oklch(0.312 0.008 97); --color-secondary-900: oklch(0.220 0.006 97); --color-secondary-950: oklch(0.138 0.004 97); --color-secondary-contrast-dark: oklch(0.10 0.008 97); --color-secondary-contrast-light: oklch(0.99 0 0); --color-secondary-contrast-50: var(--color-secondary-contrast-dark); --color-secondary-contrast-100: var(--color-secondary-contrast-dark); --color-secondary-contrast-200: var(--color-secondary-contrast-dark); --color-secondary-contrast-300: var(--color-secondary-contrast-dark); --color-secondary-contrast-400: var(--color-secondary-contrast-dark); --color-secondary-contrast-500: var(--color-secondary-contrast-dark); --color-secondary-contrast-600: var(--color-secondary-contrast-light); --color-secondary-contrast-700: var(--color-secondary-contrast-light); --color-secondary-contrast-800: var(--color-secondary-contrast-light); --color-secondary-contrast-900: var(--color-secondary-contrast-light); --color-secondary-contrast-950: var(--color-secondary-contrast-light); /* ── TERTIARY: Steel Blue (--info palette, hue 212) ─────────────────── */ /* Source: --info: oklch(0.65 0.11 212) in automatic.css */ --color-tertiary-50: oklch(0.970 0.020 212); --color-tertiary-100: oklch(0.940 0.045 212); --color-tertiary-200: oklch(0.900 0.075 212); --color-tertiary-300: oklch(0.840 0.100 212); --color-tertiary-400: oklch(0.760 0.108 212); --color-tertiary-500: oklch(0.650 0.110 212); /* --info */ --color-tertiary-600: oklch(0.540 0.108 212); --color-tertiary-700: oklch(0.430 0.095 212); --color-tertiary-800: oklch(0.320 0.075 212); --color-tertiary-900: oklch(0.222 0.055 212); --color-tertiary-950: oklch(0.140 0.035 212); --color-tertiary-contrast-dark: oklch(0.10 0.04 212); --color-tertiary-contrast-light: oklch(0.99 0 0); --color-tertiary-contrast-50: var(--color-tertiary-contrast-dark); --color-tertiary-contrast-100: var(--color-tertiary-contrast-dark); --color-tertiary-contrast-200: var(--color-tertiary-contrast-dark); --color-tertiary-contrast-300: var(--color-tertiary-contrast-dark); --color-tertiary-contrast-400: var(--color-tertiary-contrast-dark); --color-tertiary-contrast-500: var(--color-tertiary-contrast-dark); --color-tertiary-contrast-600: var(--color-tertiary-contrast-light); --color-tertiary-contrast-700: var(--color-tertiary-contrast-light); --color-tertiary-contrast-800: var(--color-tertiary-contrast-light); --color-tertiary-contrast-900: var(--color-tertiary-contrast-light); --color-tertiary-contrast-950: var(--color-tertiary-contrast-light); /* ── SUCCESS: Green (hue 147) ────────────────────────────────────────── */ /* Source: --success: oklch(0.65 0.175 147) in automatic.css */ --color-success-50: oklch(0.972 0.040 147); --color-success-100: oklch(0.940 0.080 147); --color-success-200: oklch(0.900 0.115 147); --color-success-300: oklch(0.845 0.155 147); --color-success-400: oklch(0.778 0.168 147); --color-success-500: oklch(0.650 0.175 147); /* --success */ --color-success-600: oklch(0.540 0.168 147); --color-success-700: oklch(0.430 0.152 147); --color-success-800: oklch(0.322 0.122 147); --color-success-900: oklch(0.225 0.090 147); --color-success-950: oklch(0.142 0.058 147); --color-success-contrast-dark: oklch(0.10 0.04 147); --color-success-contrast-light: oklch(0.99 0 0); --color-success-contrast-50: var(--color-success-contrast-dark); --color-success-contrast-100: var(--color-success-contrast-dark); --color-success-contrast-200: var(--color-success-contrast-dark); --color-success-contrast-300: var(--color-success-contrast-dark); --color-success-contrast-400: var(--color-success-contrast-dark); --color-success-contrast-500: var(--color-success-contrast-dark); --color-success-contrast-600: var(--color-success-contrast-light); --color-success-contrast-700: var(--color-success-contrast-light); --color-success-contrast-800: var(--color-success-contrast-light); --color-success-contrast-900: var(--color-success-contrast-light); --color-success-contrast-950: var(--color-success-contrast-light); /* ── WARNING: Golden Amber (hue 85) ─────────────────────────────────── */ /* Source: --warning: oklch(0.65 0.1535 85) in automatic.css */ --color-warning-50: oklch(0.975 0.040 85); --color-warning-100: oklch(0.952 0.075 85); --color-warning-200: oklch(0.920 0.105 85); --color-warning-300: oklch(0.875 0.130 85); --color-warning-400: oklch(0.790 0.150 85); --color-warning-500: oklch(0.650 0.154 85); /* --warning */ --color-warning-600: oklch(0.530 0.142 85); --color-warning-700: oklch(0.420 0.125 85); --color-warning-800: oklch(0.315 0.095 85); --color-warning-900: oklch(0.220 0.068 85); --color-warning-950: oklch(0.140 0.044 85); --color-warning-contrast-dark: oklch(0.10 0.04 85); --color-warning-contrast-light: oklch(0.99 0 0); --color-warning-contrast-50: var(--color-warning-contrast-dark); --color-warning-contrast-100: var(--color-warning-contrast-dark); --color-warning-contrast-200: var(--color-warning-contrast-dark); --color-warning-contrast-300: var(--color-warning-contrast-dark); --color-warning-contrast-400: var(--color-warning-contrast-dark); --color-warning-contrast-500: var(--color-warning-contrast-dark); --color-warning-contrast-600: var(--color-warning-contrast-light); --color-warning-contrast-700: var(--color-warning-contrast-light); --color-warning-contrast-800: var(--color-warning-contrast-light); --color-warning-contrast-900: var(--color-warning-contrast-light); --color-warning-contrast-950: var(--color-warning-contrast-light); /* ── ERROR: Coral Red (hue 21) ───────────────────────────────────────── */ /* Source: --danger: oklch(0.65 0.202 21) in automatic.css */ --color-error-50: oklch(0.972 0.030 21); --color-error-100: oklch(0.940 0.060 21); --color-error-200: oklch(0.895 0.100 21); --color-error-300: oklch(0.835 0.150 21); --color-error-400: oklch(0.755 0.185 21); --color-error-500: oklch(0.650 0.202 21); /* --danger */ --color-error-600: oklch(0.545 0.200 21); --color-error-700: oklch(0.440 0.185 21); --color-error-800: oklch(0.335 0.155 21); --color-error-900: oklch(0.235 0.110 21); --color-error-950: oklch(0.150 0.072 21); --color-error-contrast-dark: oklch(0.10 0.05 21); --color-error-contrast-light: oklch(0.99 0 0); --color-error-contrast-50: var(--color-error-contrast-dark); --color-error-contrast-100: var(--color-error-contrast-dark); --color-error-contrast-200: var(--color-error-contrast-dark); --color-error-contrast-300: var(--color-error-contrast-dark); --color-error-contrast-400: var(--color-error-contrast-dark); --color-error-contrast-500: var(--color-error-contrast-dark); --color-error-contrast-600: var(--color-error-contrast-light); --color-error-contrast-700: var(--color-error-contrast-light); --color-error-contrast-800: var(--color-error-contrast-light); --color-error-contrast-900: var(--color-error-contrast-light); --color-error-contrast-950: var(--color-error-contrast-light); /* ── SURFACE: Warm Neutral (hue 90–100) ─────────────────────────────── */ /* Site bg: --base-ultra-light = oklch(0.9416 0.0148 97.55) ≈ warm white */ /* Body text: #4c5255 ≈ oklch(0.43 0.012 210) — dark charcoal */ --color-surface-50: oklch(0.982 0.006 90); /* warm near-white */ --color-surface-100: oklch(0.963 0.010 92); /* warm white (body bg) */ --color-surface-200: oklch(0.929 0.013 93); /* light border */ --color-surface-300: oklch(0.878 0.016 95); --color-surface-400: oklch(0.755 0.017 97); --color-surface-500: oklch(0.580 0.015 98); --color-surface-600: oklch(0.490 0.013 100); --color-surface-700: oklch(0.404 0.012 100); /* dark border / body text */ --color-surface-800: oklch(0.305 0.010 100); --color-surface-900: oklch(0.215 0.008 100); --color-surface-950: oklch(0.134 0.005 100); /* near-black */ --color-surface-contrast-dark: oklch(0.10 0.008 100); --color-surface-contrast-light: oklch(0.99 0 0); --color-surface-contrast-50: var(--color-surface-contrast-dark); --color-surface-contrast-100: var(--color-surface-contrast-dark); --color-surface-contrast-200: var(--color-surface-contrast-dark); --color-surface-contrast-300: var(--color-surface-contrast-dark); --color-surface-contrast-400: var(--color-surface-contrast-dark); --color-surface-contrast-500: var(--color-surface-contrast-dark); --color-surface-contrast-600: var(--color-surface-contrast-light); --color-surface-contrast-700: var(--color-surface-contrast-light); --color-surface-contrast-800: var(--color-surface-contrast-light); --color-surface-contrast-900: var(--color-surface-contrast-light); --color-surface-contrast-950: var(--color-surface-contrast-light); }