/* ============================================================================ site-dark.css - joewfoley.net NIGHT SKIN (prototype, 2026-10-22) ---------------------------------------------------------------------------- Inert until , which the head snippet and /assets/js/theme.js set. Light mode is untouched by this file. Palette taken from /background_night.jpg: midnight navy sky #0a1626 / #12233a moonlight cream #efe6cc torch amber #eaa75a Panel design: the night skin does NOT recolour the frosted glass. Panels are solid midnight slate with a moonlit hairline edge, a soft top light and a torch-amber glow on hover (Joe, 2026-10-22: frosted panels are not canonical; design upgrades approved). Edit guide: colours are tokens in the first block; change them there. ============================================================================ */ /* ========== 1. NIGHT TOKENS ========== */ html[data-theme="dark"] { color-scheme: dark; --ink: #e9e4d6; --ink-deep: #f5f0e3; --terracotta: #eaa75a; /* accent becomes torch amber */ --teal: #8fb8c8; --night: #0a1626; --night-2: #12233a; --moon: #efe6cc; --torch: #eaa75a; --torch-soft: #f6c27e; --text-soft: #ccd5e0; /* body copy on panels */ --text-muted: #a9b8c9; /* small print */ --panel-top: rgba(20, 38, 62, 0.94); --panel-bottom: rgba(9, 20, 36, 0.92); --panel-edge: rgba(239, 230, 204, 0.16); --panel-edge-hover: rgba(239, 230, 204, 0.32); } /* ========== 2. PAGE AND TYPE ========== */ html[data-theme="dark"] body { background-color: var(--night); /* shown while the night image loads */ background-image: url('/background_night.jpg'); } html[data-theme="dark"] h1 { text-shadow: 0 2px 24px rgba(3, 9, 20, 0.8), 0 0 2px rgba(3, 9, 20, 0.6); } /* Text that sits straight on the night sky gets a soft shadow for legibility. */ html[data-theme="dark"] header p, html[data-theme="dark"] footer p, html[data-theme="dark"] .activity-note, html[data-theme="dark"] section > h2 { text-shadow: 0 1px 12px rgba(3, 9, 20, 0.9); } /* Tailwind colour utilities used in the page markup, re-pointed for night. */ html[data-theme="dark"] .text-\[\#1e293b\] { color: #e2e8ef; } html[data-theme="dark"] .text-\[\#334155\] { color: var(--text-soft); } html[data-theme="dark"] .text-\[\#475569\] { color: var(--text-muted); } html[data-theme="dark"] .text-\[\#0f2933\] { color: var(--moon); } html[data-theme="dark"] .hover\:text-\[\#bc6c4d\]:hover { color: var(--torch); } html[data-theme="dark"] .border-\[\#bc6c4d\]\/30 { border-color: rgba(234, 167, 90, 0.28); } /* Core Function icons: the light-mode inks are too dark for night. */ html[data-theme="dark"] .text-\[\#2d4f5b\] { color: #8fb8c8; } html[data-theme="dark"] .text-\[\#9a3412\] { color: #f0a35e; } html[data-theme="dark"] .text-\[\#134e4a\] { color: #7cc4b8; } html[data-theme="dark"] .text-\[\#7c2d12\] { color: #e8a84c; } html[data-theme="dark"] .site-link:hover { color: var(--torch-soft); } html[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #c77a45, #1f4f63); color: #fdf6e3; box-shadow: 0 10px 26px rgba(2, 6, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); } /* ========== 3. MIDNIGHT SLATE PANELS (replace the frosted glass) ========== */ html[data-theme="dark"] .glass { background: radial-gradient(120% 60% at 50% 0%, rgba(239, 230, 204, 0.07), transparent 60%), linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--panel-edge); outline-color: transparent; box-shadow: 0 20px 50px rgba(1, 5, 12, 0.5), 0 2px 8px rgba(1, 5, 12, 0.35), inset 0 1px 0 rgba(239, 230, 204, 0.12); } html[data-theme="dark"] .glass:hover { border-color: var(--panel-edge-hover); box-shadow: 0 26px 60px rgba(1, 5, 12, 0.58), 0 0 0 1px rgba(234, 167, 90, 0.12), 0 10px 34px -12px rgba(234, 167, 90, 0.28), inset 0 1px 0 rgba(239, 230, 204, 0.16); } /* ========== 4. PROJECT CARDS ========== Each card keeps its brand stripe; its accent becomes a faint corner glow, and accent-coloured text is lifted toward moonlight so it stays readable. */ html[data-theme="dark"] .project-card { --card-lift: color-mix(in srgb, var(--project-accent) 62%, #f5f0e3); border-color: color-mix(in srgb, var(--project-accent) 28%, var(--panel-edge)); background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--project-accent) 18%, transparent), transparent 62%), linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); } html[data-theme="dark"] .project-card h3 i { color: var(--card-lift) !important; } html[data-theme="dark"] .project-card .site-link { color: var(--card-lift); } html[data-theme="dark"] .project-card > .project-status { color: #f5f0e3; background: color-mix(in srgb, var(--project-accent) 30%, #0d1b2e); border-color: color-mix(in srgb, var(--project-accent) 70%, #f5f0e3); } /* Signature textures carried into night. */ html[data-theme="dark"] .project-beatles { background: radial-gradient(circle at 90% 18%, rgba(212, 154, 59, 0.16) 0 8%, transparent 8.5%), linear-gradient(180deg, rgba(34, 30, 24, 0.94), rgba(12, 20, 34, 0.92)); } html[data-theme="dark"] .project-compliance { background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(224, 221, 207, 0.05) 31px 32px), linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); } /* Workplace Safety: hazard yellow on charcoal instead of black on yellow. */ html[data-theme="dark"] .project-safety { --card-lift: #ffd21f; border-color: rgba(255, 210, 31, 0.34); outline-color: rgba(255, 210, 31, 0.4); background: radial-gradient(circle at 82% 86%, rgba(255, 210, 31, 0.10), transparent 36%), linear-gradient(180deg, rgba(28, 30, 32, 0.96), rgba(16, 18, 20, 0.96)); } html[data-theme="dark"] .project-safety h3, html[data-theme="dark"] .project-safety p { color: #f3e6b3 !important; text-shadow: none; } html[data-theme="dark"] .project-safety > .project-status { color: #17191b; background: #ffd21f; border-color: #ffd21f; } /* ========== 5. ACTIVITY TICKER ========== The per-site themes keep their accent; surfaces turn to night tinted by it. */ html[data-theme="dark"] .activity-ticker { --activity-lift: color-mix(in srgb, var(--activity-accent) 58%, #f5f0e3); --activity-deep: #ece6d6; --activity-surface: color-mix(in srgb, var(--activity-accent) 14%, #0c1a2c); --activity-surface-soft: color-mix(in srgb, var(--activity-accent) 24%, #0f2034); --activity-border: color-mix(in srgb, var(--activity-accent) 45%, rgba(201, 214, 232, 0.18)); background: linear-gradient(135deg, var(--activity-surface), var(--activity-surface-soft)); border-color: var(--activity-border); } html[data-theme="dark"] .activity-ticker::before, html[data-theme="dark"] .activity-progress span { background: var(--activity-lift); } html[data-theme="dark"] .activity-kicker-label i, html[data-theme="dark"] .activity-post-marker { color: var(--activity-lift); border-color: var(--activity-lift); background: var(--activity-surface); } html[data-theme="dark"] .activity-note { color: var(--text-muted); } html[data-theme="dark"] .activity-link:focus-visible, html[data-theme="dark"] .activity-control:focus-visible { outline-color: var(--activity-lift); } /* ========== 6. THEME SWITCH (night) ========== */ html[data-theme="dark"] .ts-track { background: rgba(10, 22, 38, 0.82); border-color: rgba(239, 230, 204, 0.2); outline-color: rgba(234, 167, 90, 0.16); box-shadow: 0 10px 28px rgba(1, 5, 12, 0.5), inset 0 1px 0 rgba(239, 230, 204, 0.1); } html[data-theme="dark"] .ts-track button { color: var(--moon); } html[data-theme="dark"] .ts-track button:hover { background: rgba(234, 167, 90, 0.14); } html[data-theme="dark"] .ts-track button[aria-checked="true"] { background: linear-gradient(135deg, #c77a45, #1f4f63); color: #fdf6e3; }