/* skui-noir.css film noir dark near-monochromatic charcoal depths, blood-red accent, horizontal scanline texture with heavy film grain vignette, high-contrast editorial baskerville serif */ @import url('../skui.css'); @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:wght@300;400;500;600;700&display=swap'); :root { --bg-void: hsl(0, 0%, 4%); --bg-deep: hsl(0, 0%, 7%); --bg-base: hsl(0, 2%, 10%); --bg-raised: hsl(0, 2%, 14%); --bg-float: hsl(0, 2%, 18%); --bg-hover: hsl(0, 2%, 23%); --surf-t: hsl(0, 2%, 17%); --surf-b: hsl(0, 0%, 8%); --surf-btn-t: hsl(0, 2%, 21%); --surf-btn-b: hsl(0, 0%, 6%); --text-primary: hsl(0, 5%, 91%); --text-secondary: hsl(0, 3%, 68%); --text-muted: hsl(0, 2%, 42%); --text-inverse: hsl(0, 0%, 4%); --text-link: hsl(4, 82%, 62%); /* blood red accent */ --blue-t: hsl(4, 85%, 56%); --blue-b: hsl(0, 78%, 38%); --blue-lit: hsl(8, 88%, 64%); --blue-dim: hsl(0, 68%, 24%); /* silver secondary */ --secondary-t: hsl(0, 0%, 72%); --secondary-b: hsl(0, 0%, 50%); --secondary-lit: hsl(0, 0%, 84%); --secondary-glow: rgba(180, 180, 180, 0.18); --danger-t: #e84040; --danger-b: #c01818; --success-t: #44b844; --success-b: #228822; --warn-t: #d8a020; --warn-b: #a87010; --border-hi: rgba(220, 220, 220, 0.055); --border-lo: rgba(0, 0, 0, 0.82); --border-mid: rgba(0, 0, 0, 0.52); --shadow-sm: 0 1px 4px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.025); --shadow-md: 0 4px 24px rgba(0,0,0,0.80), 0 1px 6px rgba(0,0,0,0.60); --shadow-lg: 0 10px 52px rgba(0,0,0,0.90), 0 3px 16px rgba(0,0,0,0.68); --shadow-inset: inset 0 2px 8px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.020); --bevel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.045); --bevel-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.88); --font-sans: 'Libre Franklin', 'Helvetica Neue', sans-serif; --font-mono: 'Cascadia Code', 'Consolas', monospace; --font-display: 'Libre Baskerville', 'Georgia', serif; } /* horizontal scanlines + heavy vignette + red tint radial */ body { background-color: hsl(0, 0%, 4%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='4' height='1' fill='rgba(255,255,255,0.024)'/%3E%3Crect x='0' y='2' width='4' height='1' fill='rgba(255,255,255,0.010)'/%3E%3C/svg%3E"), radial-gradient(ellipse 95% 95% at 50% 50%, transparent 30%, rgba(0,0,0,0.65) 100%), radial-gradient(ellipse 42% 32% at 16% 12%, rgba(110,6,6,0.12) 0%, transparent 65%), linear-gradient(180deg, hsl(0,0%,5%) 0%, hsl(0,1%,4%) 100%); background-attachment: fixed; } body::before { opacity: 0.070; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; color: var(--text-primary); text-shadow: 0 2px 10px rgba(0,0,0,0.92); } h5, h6 { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .panel { background: linear-gradient(165deg, var(--bg-raised) 0%, var(--bg-float) 100%); border: 1px solid rgba(0,0,0,0.82); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.040), inset 0 -1px 0 rgba(0,0,0,0.82); } .btn--primary { background-color: var(--blue-b); background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 49%, transparent 50%, rgba(0,0,0,0.20) 100% ), linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%); border: 1px solid rgba(0,0,0,0.75); box-shadow: inset 0 1px 0 rgba(255,190,190,0.15), inset 0 -1px 0 rgba(0,0,0,0.72), 0 3px 14px rgba(0,0,0,0.68), 0 0 16px rgba(170,12,12,0.20); color: white; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.77em; } .btn--primary:hover { filter: brightness(1.14); } .btn--secondary { background-color: var(--secondary-b); background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 49%, transparent 50%, rgba(0,0,0,0.16) 100% ), linear-gradient(180deg, var(--secondary-t) 0%, var(--secondary-b) 100%); border: 1px solid rgba(0,0,0,0.70); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -1px 0 rgba(0,0,0,0.68), 0 3px 14px rgba(0,0,0,0.62); color: hsl(0,0%,4%); font-weight: 700; } .btn--secondary:hover { filter: brightness(1.10); } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--bg-float) 0%, var(--bg-deep) 100%); border-color: var(--border-lo); } .tab--active, .tab[aria-selected="true"] { background-color: var(--blue-b); background-image: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 49%, transparent 50%, rgba(0,0,0,0.16) 100% ), linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%); color: white; border-color: rgba(0,0,0,0.70); box-shadow: inset 0 1px 0 rgba(255,190,190,0.13), inset 0 -1px 0 rgba(0,0,0,0.65), 0 2px 12px rgba(0,0,0,0.62), 0 0 10px rgba(170,12,12,0.15); font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75em; } .tab--active::after, .tab[aria-selected="true"]::after { display: none; } .list-item--active { background-color: var(--blue-b); background-image: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.02) 49%, transparent 50%, rgba(0,0,0,0.14) 100% ), linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%); color: white; border-color: rgba(0,0,0,0.70); } mark { background: rgba(170,12,12,0.30); color: hsl(4,85%,74%); } blockquote { border-left-color: var(--blue-b); background: linear-gradient(90deg, rgba(170,12,12,0.08) 0%, transparent 100%); } .progress__fill { background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 49%, transparent 50%, rgba(255,255,255,0.01) 100%), linear-gradient(90deg, var(--blue-b), var(--blue-t)); box-shadow: 0 0 8px rgba(170,12,12,0.55); }