/** * @file theme.css * Zwarte Piet colour scheme: charcoal backgrounds, white text, red accents. * * You can customise these values without rebuilding the compiled CSS. * Copy this file to your web root so it sits next to index.php, clear * Drupal's cache, and changes will be reflected immediately. */ @layer base { :root { /* ── Surfaces ──────────────────────────────────────────────────────── */ --background: oklch(0.25 0.005 250); /* charcoal ~#3a3a3d */ --foreground: oklch(0.97 0.005 60); /* warm white */ --card: oklch(0.30 0.005 250); /* lighter charcoal card */ --card-foreground: oklch(0.97 0.005 60); --popover: oklch(0.30 0.005 250); --popover-foreground: oklch(0.97 0.005 60); /* ── Brand / interactive ────────────────────────────────────────────── */ --primary: oklch(0.55 0.22 27); /* vivid red */ --primary-foreground: oklch(1 0 0); /* white on red */ --secondary: oklch(0.38 0.005 250); /* medium charcoal */ --secondary-foreground: oklch(0.97 0.005 60); --accent: oklch(0.55 0.22 27); /* red accent (same as primary) */ --accent-foreground: oklch(1 0 0); --destructive: oklch(0.50 0.22 27); /* slightly deeper red */ --destructive-foreground: oklch(1 0 0); /* ── Red palette scale ─────────────────────────────────────────────── */ --red-50: oklch(0.97 0.02 27); --red-100: oklch(0.93 0.05 27); --red-200: oklch(0.86 0.09 27); --red-300: oklch(0.78 0.13 27); --red-400: oklch(0.69 0.18 27); --red-500: oklch(0.60 0.21 27); --red-600: oklch(0.55 0.22 27); --red-700: oklch(0.48 0.20 27); --red-800: oklch(0.40 0.17 27); --red-900: oklch(0.32 0.13 27); --red-950: oklch(0.24 0.09 27); /* ── Charcoal palette scale ────────────────────────────────────────── */ --charcoal-50: oklch(0.95 0.005 250); --charcoal-100: oklch(0.88 0.005 250); --charcoal-200: oklch(0.78 0.005 250); --charcoal-300: oklch(0.65 0.005 250); --charcoal-400: oklch(0.52 0.005 250); --charcoal-500: oklch(0.42 0.005 250); --charcoal-600: oklch(0.35 0.005 250); --charcoal-700: oklch(0.30 0.005 250); --charcoal-800: oklch(0.25 0.005 250); --charcoal-900: oklch(0.20 0.005 250); --charcoal-950: oklch(0.15 0.005 250); /* ── Status scales ─────────────────────────────────────────────────── */ --success-50: oklch(0.97 0.02 170); --success-100: oklch(0.92 0.04 170); --success-200: oklch(0.85 0.07 170); --success-300: oklch(0.75 0.09 170); --success-400: oklch(0.68 0.1 170); --success-500: oklch(0.6 0.11 170); --success-600: oklch(0.52 0.12 170); --success-700: oklch(0.45 0.11 170); --success-800: oklch(0.38 0.09 170); --success-900: oklch(0.3 0.07 170); --warning-50: oklch(0.98 0.02 75); --warning-100: oklch(0.95 0.04 70); --warning-200: oklch(0.88 0.08 65); --warning-300: oklch(0.8 0.12 60); --warning-400: oklch(0.72 0.15 55); --warning-500: oklch(0.65 0.17 50); --warning-600: oklch(0.57 0.18 45); --warning-700: oklch(0.5 0.17 40); --warning-800: oklch(0.42 0.14 35); --warning-900: oklch(0.34 0.11 30); --info-50: oklch(0.97 0.02 210); --info-100: oklch(0.92 0.04 210); --info-200: oklch(0.86 0.06 210); --info-300: oklch(0.78 0.08 210); --info-400: oklch(0.7 0.09 210); --info-500: oklch(0.62 0.1 210); --info-600: oklch(0.55 0.11 210); --info-700: oklch(0.48 0.1 210); --info-800: oklch(0.38 0.08 210); --info-900: oklch(0.3 0.06 210); /* ── Muted / borders ───────────────────────────────────────────────── */ --muted: oklch(0.33 0.005 250); --muted-foreground: oklch(0.73 0.005 250); --border: oklch(0.37 0.005 250); --input: oklch(0.33 0.005 250); --ring: oklch(0.55 0.22 27); /* red focus ring */ --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace; /* ── Radius — slightly sharper ──────────────────────────────────────── */ --radius: 0.5rem; /* ── Shadows ────────────────────────────────────────────────────────── */ --shadow-x: 0; --shadow-y: 1px; --shadow-blur: 3px; --shadow-spread: 0px; --shadow-opacity: 0.25; --shadow-color: oklch(0 0 0); --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.15); --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.15), 0 1px 2px -1px hsl(0 0% 0% / 0.2); --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.2), 0 2px 4px -1px hsl(0 0% 0% / 0.2); --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.2), 0 2px 4px -1px hsl(0 0% 0% / 0.2); --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.2), 0 4px 6px -2px hsl(0 0% 0% / 0.2); --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.2), 0 8px 10px -2px hsl(0 0% 0% / 0.2); --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.2), 0 12px 14px -3px hsl(0 0% 0% / 0.2); --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.2), 0 16px 18px -3px hsl(0 0% 0% / 0.2); --tracking-normal: 0em; --spacing: 0.25rem; /* Set navbar height for hero billboard overlay */ --navbar-height: calc(var(--spacing) * 15); @media (min-width: 768px) { --navbar-height: calc(var(--spacing) * 18); } } /* ── Dark variant: deeper charcoal for .dark body class ─────────────── */ .dark { --background: oklch(0.18 0.005 250); /* very dark charcoal */ --foreground: oklch(0.97 0.005 60); --card: oklch(0.23 0.005 250); --card-foreground: oklch(0.97 0.005 60); --popover: oklch(0.23 0.005 250); --popover-foreground: oklch(0.97 0.005 60); --primary: oklch(0.60 0.22 27); /* slightly brighter red */ --primary-foreground: oklch(1 0 0); --secondary: oklch(0.30 0.005 250); --secondary-foreground: oklch(0.97 0.005 60); --accent: oklch(0.60 0.22 27); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 27); --destructive-foreground: oklch(1 0 0); --muted: oklch(0.26 0.005 250); --muted-foreground: oklch(0.68 0.005 250); --border: oklch(0.30 0.005 250); --input: oklch(0.28 0.005 250); --ring: oklch(0.60 0.22 27); --radius: 0.5rem; --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.25); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.25); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3); --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.3); --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 4px 6px -1px hsl(0 0% 0% / 0.3); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 8px 10px -1px hsl(0 0% 0% / 0.3); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 12px 14px -1px hsl(0 0% 0% / 0.3); } }