diff --git a/resources/css/app.css b/resources/css/app.css index 7fcaefa..7c32460 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -8,6 +8,13 @@ @custom-variant dark (&:where(.dark, .dark *)); +@theme { + /* lvl0 palette. Primary is the house red shared with incr and buckets; + bordeaux is the secondary, used for dividers and recessed chrome. */ + --color-primary: oklch(63.7% 0.237 25.331); + --color-bordeaux: oklch(25.8% 0.092 26.042); +} + @font-face { font-family: '7Segment'; /* Relative so Vite resolves and fingerprints it; an absolute /fonts path @@ -22,21 +29,51 @@ .font-digital { } .glow-red { - box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); + box-shadow: 0 0 20px color-mix(in oklab, var(--color-primary) 40%, transparent); transition: box-shadow 300ms ease; } .glow-red:hover { - box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); + box-shadow: 0 0 25px color-mix(in oklab, var(--color-primary) 60%, transparent); +} + +.glow-red:focus, +.glow-red:focus-within { + box-shadow: 0 0 28px color-mix(in oklab, var(--color-primary) 70%, transparent); } .glow-red-text { - text-shadow: 0 0 12px rgba(239, 68, 68, 0.7), 0 0 30px rgba(239, 68, 68, 0.4); + text-shadow: + 0 0 12px color-mix(in oklab, var(--color-primary) 70%, transparent), + 0 0 30px color-mix(in oklab, var(--color-primary) 40%, transparent); +} + +/* Bordeaux itself is too dark to bloom against black, so the halo is emitted in + primary red at low alpha — dim element, brighter glow, as CRT phosphor behaves. */ +.glow-bordeaux { + box-shadow: 0 0 14px color-mix(in oklab, var(--color-primary) 35%, transparent); + transition: box-shadow 300ms ease; +} + +.glow-bordeaux:hover { + box-shadow: 0 0 18px color-mix(in oklab, var(--color-primary) 50%, transparent); +} + +.glow-bordeaux:focus, +.glow-bordeaux:focus-within { + box-shadow: 0 0 26px color-mix(in oklab, var(--color-primary) 65%, transparent); +} + +/* Same bloom for a 1-2px rule, where a spread-based shadow has no box to hug. */ +.glow-bordeaux-line { + box-shadow: + 0 0 6px color-mix(in oklab, var(--color-primary) 45%, transparent), + 0 0 14px color-mix(in oklab, var(--color-primary) 25%, transparent); } .scrollbar-red { scrollbar-width: thin; - scrollbar-color: var(--color-red-500) transparent; + scrollbar-color: var(--color-bordeaux) transparent; } .scrollbar-red::-webkit-scrollbar { @@ -48,12 +85,12 @@ .scrollbar-red::-webkit-scrollbar-track { } .scrollbar-red::-webkit-scrollbar-thumb { - background: var(--color-red-500); + background: var(--color-bordeaux); border: 2px solid #000; } .scrollbar-red::-webkit-scrollbar-thumb:hover { - background: var(--color-red-400); + background: var(--color-red-900); } @theme { diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 87cc7f5..ebca85b 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -15,14 +15,14 @@
-

+

> Anagram Finder

@csrf -