/** * Handfish Theme: Gothic * * Dramatic black and deep red aesthetic — dark, moody, and intense. * Near-black backgrounds with blood-red accents and sharp details * create an atmosphere of dark elegance. Apply with: * * * * Or import after the base stylesheet to override defaults. */ @font-face { font-family: 'Crimson Pro'; src: url('https://fonts.noisefactor.io/fonts/crimson-pro/CrimsonPro[wght].woff2') format('woff2'); font-weight: 100 900; font-display: swap; } [data-theme="gothic"] { /* Neutrals — near-black with slight red warmth (hue 0°) */ --hf-color-1: oklch(7.0% 0.008 0); --hf-color-2: oklch(12.0% 0.012 0); --hf-color-3: oklch(17.0% 0.015 0); --hf-color-4: oklch(24.0% 0.018 0); --hf-color-5: oklch(50.0% 0.015 0); --hf-color-6: oklch(72.0% 0.010 0); --hf-color-7: oklch(90.0% 0.005 0); /* Accents — deep blood red, high chroma */ --hf-accent-1: oklch(16.0% 0.060 15); --hf-accent-2: oklch(25.0% 0.100 15); --hf-accent-3: oklch(55.0% 0.200 15); --hf-accent-4: oklch(68.0% 0.160 15); /* Semantic colors — dark, saturated */ --hf-red: oklch(58.0% 0.230 15); --hf-green: oklch(65.0% 0.150 155); --hf-yellow: oklch(82.0% 0.130 85); --hf-blue: oklch(55.0% 0.130 255); /* Typography — elegant serif */ --hf-font-family: 'Crimson Pro'; /* Sharp, precise corners */ --hf-radius-sm: 1px; --hf-radius-md: 2px; --hf-radius: 2px; --hf-radius-lg: 3px; --hf-radius-xl: 4px; --hf-radius-pill: 999px; /* Dark crimson-tinted shadows */ --hf-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.5); --hf-shadow: 0 2px 6px oklch(0% 0 0 / 0.6); --hf-shadow-md: 0 4px 12px oklch(0% 0 0 / 0.6), 0 0 8px oklch(55% 0.200 15 / 0.08); --hf-shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.7), 0 0 16px oklch(55% 0.200 15 / 0.12); --hf-shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.8), 0 0 32px oklch(55% 0.200 15 / 0.15); --hf-glow-accent: 0 0 20px oklch(55% 0.200 15 / 0.40); /* Glassmorphism — very dark, dramatic */ --hf-surface-opacity: 88%; --hf-surface-transparency: 12%; --hf-panel-opacity: 80%; --hf-panel-transparency: 20%; --hf-header-opacity: 60%; --hf-header-transparency: 40%; --hf-glass-blur: blur(24px); --hf-glass-blur-sm: blur(10px); --hf-glass-blur-lg: blur(36px); --hf-backdrop: oklch(0% 0 0 / 0.80); /* Borders — red-tinted, visible */ --hf-border: color-mix(in srgb, var(--hf-accent-3) 30%, transparent 70%); --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 50%, transparent 50%); --hf-border-focus: var(--hf-accent-3); }