/* ========================================================================== G.S. MUCKLOW — Portfolio Shared stylesheet: themeable design tokens + site utilities. Theme model ----------- Every theme-dependent colour is a CSS custom property defined as three space-separated RGB channels (e.g. `252 249 239`). The Tailwind config maps each design token to `rgb(var(--token) / )`, so all existing opacity utilities (`bg-background/80`, `border-outline/20`, …) keep working. `:root` = LIGHT theme (warm literary folio: bone + charcoal) `.dark` = DARK theme (cinematic charcoal/black — the default; set on ) ========================================================================== */ :root { /* --- Brand accents (shared by both themes) --- */ --primary: 147 38 22; /* #932616 deep oxblood red */ --primary-container: 180 62 43; /* #b43e2b */ --on-primary: 255 255 255; --on-primary-container: 255 222 216; --primary-fixed: 255 218 212; /* #ffdad4 */ --inverse-primary: 255 180 166; /* #ffb4a6 */ --secondary: 133 83 0; /* #855300 amber/bronze */ --secondary-container: 253 170 51;/* #fdaa33 signal amber */ /* Metadata (genre/status) accent — theme-aware: a readable rust on the light folio, the brighter amber on dark. */ --secondary-fixed-dim: 158 81 19;/* #9e5113 light rust */ --on-secondary: 255 255 255; --error: 186 26 26; /* #ba1a1a */ --surface-tint: 169 54 36; /* #a93624 */ --on-tertiary-container: 230 228 223; /* --- Theme-dependent surfaces & text (LIGHT) --- */ --background: 252 249 239; /* #fcf9ef bone */ --on-background: 28 28 22; /* #1c1c16 charcoal */ --surface: 252 249 239; --on-surface: 28 28 22; --on-surface-variant: 88 65 61; /* #58413d muted ink */ --surface-variant: 229 226 217; --surface-dim: 221 218 208; --surface-bright: 252 249 239; --surface-container-lowest: 255 255 255; --surface-container-low: 247 244 233; --surface-container: 241 238 228; --surface-container-high: 235 232 222; --surface-container-highest: 229 226 217; --outline: 140 113 108; /* #8c716c */ --outline-variant: 223 191 186; /* #dfbfba */ --inverse-surface: 49 49 42; --inverse-on-surface: 244 241 231; --tertiary: 78 78 74; /* Accent used for inline text/links/labels (theme-aware). Light: deep red reads well on bone. Dark: salmon reads well on black. */ --primary-fixed-dim: 147 38 22; /* #932616 */ /* Texture sources (subtle; non-critical) */ --paper-texture: url("https://www.transparenttextures.com/patterns/dark-matter.png"); --body-background-image: radial-gradient(circle at 12% -8%, rgb(var(--primary) / .035), transparent 30rem), radial-gradient(circle at 88% 4%, rgb(var(--secondary) / .03), transparent 28rem), linear-gradient(135deg, rgb(255 255 255 / .34), transparent 42%, rgb(var(--surface-container-low) / .24)); } .dark { /* --- Theme-dependent surfaces & text (DARK) --- */ --background: 14 15 13; /* #0E0F0D cinematic black */ --on-background: 238 230 214; /* #EEE6D6 aged bone */ --surface: 23 24 21; /* #171815 */ --on-surface: 238 230 214; --on-surface-variant: 201 182 176;/* #c9b6b0 readable muted bone */ --surface-variant: 28 28 22; --surface-dim: 14 15 13; --surface-bright: 38 38 32; --surface-container-lowest: 5 5 5; --surface-container-low: 18 19 17; --surface-container: 23 24 21; --surface-container-high: 28 28 22; --surface-container-highest: 32 31 26; --outline: 140 113 108; --outline-variant: 58 50 46; /* #3a322e subtle warm hairline */ --inverse-surface: 244 241 231; --inverse-on-surface: 28 28 22; --tertiary: 199 198 193; --primary-fixed-dim: 255 180 166; /* #ffb4a6 salmon accent on dark */ --secondary-fixed-dim: 255 185 95;/* #ffb95f brighter amber on dark */ --body-background-image: radial-gradient(circle at 12% 0%, rgb(var(--primary) / .045), transparent 35rem), radial-gradient(circle at 88% 5%, rgb(var(--secondary) / .025), transparent 30rem), linear-gradient(180deg, rgb(14 12 10 / .18), transparent 55%); } /* ========================================================================== Base ========================================================================== */ html { scroll-behavior: smooth; } body { background-color: rgb(var(--background)); color: rgb(var(--on-background)); background-image: var(--body-background-image); background-attachment: fixed; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } ::selection { background: rgb(var(--primary)); color: #fff; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .icon-wght-thin { font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24; } /* Form fields: solid background, warm focus underline */ input, textarea, select { background-color: rgb(var(--surface-container)) !important; } input:focus, textarea:focus, select:focus { outline: none; box-shadow: none; border-color: rgb(var(--outline) / .3) !important; border-bottom-color: rgb(var(--primary-fixed-dim)) !important; } /* ========================================================================== Atmospheric overlays (cinematic mood) ========================================================================== */ .grain-overlay, .paper-texture { pointer-events: none; } /* Fixed film-grain wash */ .grain-overlay { position: fixed; inset: 0; z-index: 40; opacity: .03; background-image: url("https://www.transparenttextures.com/patterns/stardust.png"); } /* Fixed cinematic vignette (darkens frame edges in dark theme only) */ .cinematic-vignette { pointer-events: none; position: fixed; inset: 0; z-index: 30; background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, .4) 100%); opacity: 0; transition: opacity .4s ease; } .dark .cinematic-vignette { opacity: 1; } /* Inline paper/stardust texture panel */ .paper-texture { background-image: url("https://www.transparenttextures.com/patterns/stardust.png"); opacity: .04; } /* ========================================================================== Decorative rules & grids ========================================================================== */ /* Dotted archive field (hero / panels) */ .archive-grid { background-size: 40px 40px; background-image: linear-gradient(to right, rgb(var(--on-surface) / .04) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--on-surface) / .04) 1px, transparent 1px); } /* Centred hairline rule that fades at both ends */ .editorial-rule { height: 1px; background: linear-gradient(to right, transparent, rgb(var(--outline-variant) / .8), transparent); } /* Plain warm hairline */ .archive-line { height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--outline)) 20%, rgb(var(--outline)) 80%, transparent); opacity: .3; } /* Glowing red accent rule (animated to full width on card hover via main.js) */ .red-accent-line { height: 1px; width: 3rem; background: rgb(var(--primary)); box-shadow: 0 0 8px rgb(var(--primary) / .4); transition: width .4s cubic-bezier(.2, 0, .2, 1); } /* Faint inner border for "void" panels */ .border-void { border-color: rgb(var(--outline-variant) / .6); } /* ========================================================================== Small components ========================================================================== */ .thermal-glow { filter: drop-shadow(0 0 12px rgb(var(--primary) / .4)); } .hover-lift { transition: transform .3s cubic-bezier(.2, 0, .2, 1); } .hover-lift:hover { transform: translateY(-4px); } .monospace-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .vertical-text { writing-mode: vertical-rl; } /* Thin custom scrollbar (used on scrollable panels) */ .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgb(var(--surface)); } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--tertiary)); } /* Disclosure (
/) — drop the native marker, rotate chevron */ summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } details[open] .ms-rotate { transform: rotate(180deg); } /* Mobile nav: the `hidden` attribute must win over Tailwind's `.flex` utility (equal specificity, later source order), so drive display here. */ [data-mobile-nav] { display: none; } @media (max-width: 767px) { [data-mobile-nav]:not([hidden]) { display: flex; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }