diff --git a/src/styles/global.css b/src/styles/global.css index f56e6e1..dd7a37b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -68,6 +68,10 @@ a:hover { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; + /* Board-glow halo around the focus ring. The solid outline carries WCAG + visibility; the halo is on-brand polish (focusable els have no resting + box-shadow here, so nothing is clobbered). */ + box-shadow: 0 0 0 4px var(--accent-glow); } ::selection { @@ -75,6 +79,30 @@ a:hover { color: var(--accent-ink); } +/* Themed scrollbar — thin, board-tinted. The track dissolves into the page; the + thumb carries a cyan→magenta accent (padding-boxed so it reads slim with + breathing room) and brightens on hover. Firefox + WebKit. */ +html { + scrollbar-width: thin; + scrollbar-color: var(--accent-strong) transparent; +} +::-webkit-scrollbar { + width: 11px; + height: 11px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + border-radius: 8px; + border: 3px solid transparent; + background-clip: padding-box; + background-color: color-mix(in srgb, var(--accent) 55%, var(--accent-2)); +} +::-webkit-scrollbar-thumb:hover { + background-color: color-mix(in srgb, var(--accent) 72%, var(--accent-2)); +} + img, svg { max-width: 100%; @@ -160,6 +188,9 @@ svg { -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--border); border-radius: var(--radius); + /* A 1px inner top highlight — light catching the glass edge — so cards read as + raised even at rest (depth layering). The lift+glow stack lands on hover. */ + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } @@ -186,7 +217,8 @@ svg { .card:hover { border-color: var(--accent-line); transform: translateY(-2px); - box-shadow: var(--shadow), 0 0 22px var(--accent-glow); + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), var(--shadow), + 0 0 22px var(--accent-glow); } .card:hover::before { opacity: 0.9;