/* * custom.css — Skellman.io brand overrides * ========================================================== * Brand identity: warm near-black/warm off-white backgrounds, * deep crimson-red accents, liquid glass surfaces. * Zero blue or cool tones anywhere. */ /* ╔══════════════════════════════════════════════════════════╗ ║ 1. DESIGN TOKENS ║ ╚══════════════════════════════════════════════════════════╝ */ :root { /* — Brand reds — */ --skm-red: #C0392B; /* primary brand red */ --skm-red-bright: #E74C3C; /* hover / accent */ --skm-red-dim: rgba(192, 57, 43, 0.28); /* ghost / tint */ --skm-red-glow: rgba(192, 57, 43, 0.18); /* subtle bg tint */ /* — Warm neutrals (shared) — */ --skm-tan: #D4C5A9; /* warm light text / secondary text */ --skm-offwhite: #EDE8E2; /* primary text on dark */ } /* ╔══════════════════════════════════════════════════════════╗ ║ 2. DARK MODE — warm near-black gradient system ║ ╚══════════════════════════════════════════════════════════╝ */ [data-md-color-scheme="slate"] { /* ── Background stops (warm, zero blue) ── */ --skm-bg-0: #0F0D0D; /* deepest — page corners/bottom */ --skm-bg-1: #141212; /* base layer */ --skm-bg-2: #1A1717; /* mid-depth surface */ --skm-bg-3: #1E1B1B; /* elevated surface */ --skm-bg-4: #241F1F; /* card / sidebar surface */ /* ── Glass panel recipe (warm dark) ── */ --glass-bg: rgba(38, 30, 30, 0.62); --glass-bg-strong: rgba(26, 20, 20, 0.88); --glass-border: rgba(255, 240, 235, 0.07); --glass-border-red: rgba(192, 57, 43, 0.38); --glass-blur: blur(24px) saturate(160%); --glass-blur-light: blur(14px) saturate(140%); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 240, 235, 0.04); /* ── Material overrides ── */ --md-primary-fg-color: var(--skm-red); --md-primary-fg-color--light: var(--skm-red-bright); --md-primary-fg-color--dark: #8B1A14; --md-accent-fg-color: var(--skm-red-bright); --md-default-bg-color: var(--skm-bg-1); --md-default-bg-color--light: var(--skm-bg-2); --md-default-bg-color--dark: var(--skm-bg-0); --md-code-bg-color: var(--skm-bg-0); --md-code-fg-color: var(--skm-tan); --md-default-fg-color: var(--skm-offwhite); --md-default-fg-color--light: var(--skm-tan); } /* ── Dark mode body gradient ── 5-stop system: two warm radial hotspots at top corners (subtle red warmth), one at bottom center (depth), plus a linear fade from --bg-3 → --bg-0. Result: the same layered depth you see in Copilot's dark surface. */ [data-md-color-scheme="slate"] body, [data-md-color-scheme="slate"] .md-main { background-color: var(--skm-bg-1); background-image: /* top-left warm bloom */ radial-gradient(ellipse 75% 45% at 12% 0%, rgba(62, 28, 26, 0.65) 0%, transparent 100%), /* top-right warm bloom */ radial-gradient(ellipse 65% 35% at 90% 4%, rgba(50, 22, 20, 0.45) 0%, transparent 100%), /* bottom-center depth sink */ radial-gradient(ellipse 80% 50% at 50% 100%, rgba(28, 16, 16, 0.50) 0%, transparent 100%), /* mid-page ambient red tint */ radial-gradient(ellipse 100% 60% at 50% 45%, rgba(38, 18, 18, 0.25) 0%, transparent 100%), /* vertical fade: warm dark top → near-black bottom */ linear-gradient(180deg, #1E1B1B 0%, #191616 30%, #141212 60%, #0F0D0D 100%); } /* ╔══════════════════════════════════════════════════════════╗ ║ 3. LIGHT MODE — warm off-white gradient system ║ ╚══════════════════════════════════════════════════════════╝ */ [data-md-color-scheme="default"] { /* ── Background stops (warm, zero cool gray) ── */ --skm-bg-0: #F5F3F2; /* lightest — page base */ --skm-bg-1: #ECE9E8; /* secondary surface */ --skm-bg-2: #E7E4E3; /* sidebar / card surface */ --skm-bg-3: #E0DCDB; /* deeper card surface */ --skm-bg-4: #D8D3D1; /* borders / dividers */ /* ── Glass panel recipe (warm light) ── */ --glass-bg: rgba(245, 240, 235, 0.68); --glass-bg-strong: rgba(235, 228, 222, 0.88); --glass-border: rgba(50, 30, 28, 0.07); --glass-border-red: rgba(192, 57, 43, 0.22); --glass-blur: blur(24px) saturate(150%); --glass-blur-light: blur(14px) saturate(130%); --glass-shadow: 0 8px 32px rgba(80, 40, 35, 0.12), 0 2px 8px rgba(80, 40, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70); /* ── Material overrides ── */ --md-primary-fg-color: var(--skm-red); --md-primary-fg-color--light: var(--skm-red-bright); --md-primary-fg-color--dark: #8B1A14; --md-accent-fg-color: var(--skm-red-bright); --md-default-bg-color: var(--skm-bg-0); --md-default-bg-color--light: #FAF8F7; --md-default-bg-color--dark: var(--skm-bg-1); --md-default-fg-color: #1E1A1A; --md-default-fg-color--light: #5C5050; } /* ── Light mode body gradient ── */ [data-md-color-scheme="default"] body, [data-md-color-scheme="default"] .md-main { background-color: var(--skm-bg-0); background-image: /* top-left warm peach bloom */ radial-gradient(ellipse 75% 45% at 18% 0%, rgba(248, 228, 215, 0.72) 0%, transparent 100%), /* top-right softer bloom */ radial-gradient(ellipse 65% 35% at 84% 6%, rgba(242, 218, 205, 0.50) 0%, transparent 100%), /* bottom-center depth */ radial-gradient(ellipse 70% 45% at 50% 100%, rgba(232, 210, 198, 0.45) 0%, transparent 100%), /* vertical warm fade */ linear-gradient(180deg, #F5F3F2 0%, #EDE9E7 45%, #E7E4E3 100%); } /* ╔══════════════════════════════════════════════════════════╗ ║ 4. HEADER ║ ╚══════════════════════════════════════════════════════════╝ */ .md-header { background: var(--glass-bg-strong) !important; backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border-bottom: 1px solid var(--glass-border-red); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); } /* Logo in top-left — larger and clearly visible */ .md-header__button.md-logo img, .md-header__button.md-logo svg { width: 3.8rem !important; height: 3.8rem !important; object-fit: contain; } /* Give the header a bit more vertical breathing room for the larger logo */ .md-header__inner { padding-top: 0.35rem; padding-bottom: 0.35rem; } /* ╔══════════════════════════════════════════════════════════╗ ║ 5. NAV TABS ║ ╚══════════════════════════════════════════════════════════╝ */ .md-tabs { background: var(--glass-bg-strong) !important; backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border-bottom: 1px solid var(--glass-border); } .md-tabs__link--active, .md-tabs__link:hover { color: var(--skm-red-bright) !important; } /* ╔══════════════════════════════════════════════════════════╗ ║ 6. SIDEBARS — boxy liquid glass cards ║ ╚══════════════════════════════════════════════════════════╝ */ .md-sidebar--primary, .md-sidebar--secondary { background: transparent !important; } .md-sidebar--primary .md-sidebar__scrollwrap, .md-sidebar--secondary .md-sidebar__scrollwrap { overflow: visible !important; /* let box-shadow escape the clip */ } /* ── Left sidebar glass card ── */ /* Starts invisible — JS adds .skm-sidebar-visible once content is confirmed */ .md-sidebar--primary .md-sidebar__inner { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-right: 1px solid var(--glass-border-red); border-radius: 14px; box-shadow: var(--glass-shadow); margin: 0.75rem 0.5rem 0.75rem 0.25rem; padding: 0.75rem 0.5rem; opacity: 0; pointer-events: none; } /* ── Right sidebar glass card ── */ .md-sidebar--secondary .md-sidebar__inner { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-left: 1px solid var(--glass-border-red); border-radius: 14px; box-shadow: var(--glass-shadow); margin: 0.75rem 0.25rem 0.75rem 0.5rem; padding: 0.75rem 0.5rem; opacity: 0; pointer-events: none; } /* ── JS adds .skm-sidebar-visible when nav links are present ── */ /* Transition only fires when the class is ADDED (fade in). */ /* Removing the class drops opacity instantly — no visible flash. */ .md-sidebar__inner.skm-sidebar-visible { opacity: 1; pointer-events: auto; transition: opacity 0.12s ease; } /* ╔══════════════════════════════════════════════════════════╗ ║ 7a. SEARCH HIGHLIGHT inside h1 ║ ╚══════════════════════════════════════════════════════════╝ When navigating from search, Material wraps matched text in elements. Inside our glass flex h1 this renders as an ugly blue box. Override it to use brand-red tint and stay inline. */ .md-typeset h1 mark, .md-typeset h1 .md-highlight { background: rgba(192, 57, 43, 0.28) !important; color: inherit !important; border-radius: 3px; padding: 0 2px; display: inline !important; /* never let mark become block in flex h1 */ box-shadow: none !important; } /* ╔══════════════════════════════════════════════════════════╗ ║ 7. PAGE HEADER BOX ║ ╚══════════════════════════════════════════════════════════╝ Logo + title inside a glass card. Logo is injected by custom.js. */ .md-typeset h1 { display: flex !important; align-items: center !important; gap: 1rem !important; background: var(--glass-bg-strong) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; border-left: 3px solid var(--skm-red) !important; border-radius: 14px !important; padding: 1.1rem 1.6rem !important; box-shadow: var(--glass-shadow) !important; margin-bottom: 1.6rem !important; border-bottom-color: transparent !important; } /* Text wrapper injected by JS — becomes the second flex item. All title text, marks, and the ¶ anchor live inside this span so they flow as inline content rather than separate flex items. */ .skm-header-text { flex: 1; min-width: 0; /* prevent flex overflow on long titles */ } /* Logo element injected by JS */ .skm-header-logo { width: 4.2rem; height: 4.2rem; flex-shrink: 0; object-fit: contain; border-radius: 4px; } /* Keep ¶ permalink from pushing the box taller */ .md-typeset h1 .headerlink { align-self: center; font-size: 0.9em; opacity: 0.35; } /* ╔══════════════════════════════════════════════════════════╗ ║ 8. NAVIGATION LINKS ║ ╚══════════════════════════════════════════════════════════╝ */ .md-nav__link--active, .md-nav__link:hover { color: var(--skm-red-bright); } .md-content a { color: var(--skm-red-bright); } .md-content a:hover { color: var(--skm-tan); text-decoration: underline; } /* ╔══════════════════════════════════════════════════════════╗ ║ 9. BUTTONS ║ ╚══════════════════════════════════════════════════════════╝ */ .md-typeset .md-button { background: var(--glass-bg); backdrop-filter: var(--glass-blur-light); border: 1px solid var(--glass-border-red); border-radius: 8px; color: var(--skm-red-bright) !important; transition: background 0.2s, border-color 0.2s; } .md-typeset .md-button:hover { background: rgba(192, 57, 43, 0.20); border-color: var(--skm-red); color: var(--skm-offwhite) !important; } /* ╔══════════════════════════════════════════════════════════╗ ║ 10. CODE BLOCKS ║ ╚══════════════════════════════════════════════════════════╝ */ .md-typeset pre > code { border-left: 2px solid var(--skm-red); } /* ╔══════════════════════════════════════════════════════════╗ ║ 11. ADMONITIONS ║ ╚══════════════════════════════════════════════════════════╝ */ .md-typeset .admonition, .md-typeset details { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border: 1px solid var(--glass-border) !important; border-left: 3px solid var(--skm-red) !important; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .md-typeset .admonition-title, .md-typeset summary { background: rgba(192, 57, 43, 0.12) !important; border-radius: 7px 7px 0 0; } /* ╔══════════════════════════════════════════════════════════╗ ║ 12. TABLES ║ ╚══════════════════════════════════════════════════════════╝ */ .md-typeset table:not([class]) { background: var(--glass-bg); backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border: 1px solid var(--glass-border); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .md-typeset table:not([class]) th { background: rgba(192, 57, 43, 0.15); border-bottom: 1px solid var(--glass-border-red); } .md-typeset table:not([class]) tr:hover { background: rgba(192, 57, 43, 0.06); } /* ╔══════════════════════════════════════════════════════════╗ ║ 13. SEARCH ║ ╚══════════════════════════════════════════════════════════╝ */ .md-search-result mark { color: var(--skm-red-bright); background: transparent; } /* ╔══════════════════════════════════════════════════════════╗ ║ 14. FOOTER ║ ╚══════════════════════════════════════════════════════════╝ */ .md-footer { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur-light); border-top: 1px solid var(--glass-border-red); } /* ╔══════════════════════════════════════════════════════════╗ ║ 15. WATERMARK ║ ╚══════════════════════════════════════════════════════════╝ Full-page centered stencil watermark sitting behind all content. Uses position:fixed so it stays centered during scroll. mix-blend-mode: - Dark mode → "screen" : white stencil adds light, glows subtly - Light mode → "multiply": white areas become transparent, outline shows */ .md-main::before { content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68vmin; height: 68vmin; background-image: url('../assets/stencil.png'); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; /* never intercepts clicks */ z-index: 0; /* behind all content */ } /* Dark mode — screen blend makes the white stencil glow warmly */ [data-md-color-scheme="slate"] .md-main::before { opacity: 0.055; mix-blend-mode: screen; } /* Light mode — invert flips white stencil to near-black so it reads against the warm off-white background, then opacity keeps it subtle */ [data-md-color-scheme="default"] .md-main::before { opacity: 0.07; filter: invert(1); mix-blend-mode: multiply; } /* * ── Phase 2 placeholders ────────────────────────────────── * - @font-face: custom brand typeface (geist, inter, or similar) * - Circuit board hero texture / parallax overlay * - Scroll-triggered IntersectionObserver reveal animations * - .skm-tool-card component (grid layout for tools index) * - Logo wordmark once horizontal SVG version exists */