/* ============================================================ SILENT HILL HELP CENTER — MAIN STYLESHEET Dark atmospheric theme with fog, grain, and horror aesthetics ============================================================ */ /* ─── CUSTOM PROPERTIES ──────────────────────────────────────── */ :root { /* Core palette */ --clr-bg: #0a0a0a; --clr-bg-raised: #111111; --clr-bg-card: #141414; --clr-bg-card-hover: #1a1a1a; --clr-surface: #1e1e1e; --clr-border: rgba(92, 138, 110, 0.15); --clr-border-glow: rgba(92, 138, 110, 0.35); /* Fog green — the iconic Silent Hill sickly green */ --clr-accent: #5c8a6e; --clr-accent-dim: #3d6652; --clr-accent-glow: rgba(92, 138, 110, 0.25); --clr-accent-fog: rgba(92, 138, 110, 0.07); /* Blood/rust — subtle secondary */ --clr-rust: #7a3228; --clr-rust-dim: rgba(122, 50, 40, 0.4); /* Otherworld descent level — set by JS on (0 = normal, 1 = full rust) */ --sh-ow: 0; /* Text */ --clr-text: #c2c2c2; --clr-text-muted: #6b6b6b; --clr-text-faint: #3a3a3a; --clr-heading: #e0ddd8; /* Typography */ --font-heading: 'Cinzel', 'Georgia', serif; --font-body: 'Raleway', 'Segoe UI', sans-serif; --font-distressed: 'Special Elite', 'Courier New', monospace; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* Layout */ --max-width: 1100px; --sidebar-width: 260px; --header-height: 64px; /* Transitions */ --transition-fast: 150ms ease; --transition-med: 300ms ease; --transition-slow: 600ms ease; /* Shadows */ --shadow-card: 0 2px 12px rgba(0,0,0,0.6), 0 0 0 1px var(--clr-border); --shadow-glow: 0 0 20px var(--clr-accent-glow); --shadow-deep: 0 8px 40px rgba(0,0,0,0.8); } /* ─── RESET & BASE ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: #050505; /* near-black base under fog layers */ color: var(--clr-text); font-family: var(--font-body); font-weight: 400; line-height: 1.7; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--clr-accent); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } a:hover { color: #8abf9e; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* ─── IMAGE-BASED ROLLING FOG ────────────────────────────────── */ /* * Technique: two copies of a fog-texture PNG side by side (200% wide). * Continuously scrolling left at different speeds per layer. * Opacity keyframes on each layer create realistic density variation. * CSS filter adds the sickly Silent Hill green tint. */ .fogwrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; contain: strict; isolation: isolate; /* Single tint pass on the wrapper — far cheaper than per-layer filters */ filter: sepia(0.3) hue-rotate(95deg) saturate(0.7) brightness(0.88); } .foglayer { height: 100%; position: absolute; top: 0; left: 0; width: 200%; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .fogimg { float: left; height: 100%; width: 50%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fogimg--1 { background-image: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png"); } .fogimg--2 { background-image: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png"); } /* Layer 1 — normal orientation → fog pools at BOTTOM of viewport */ #foglayer_01 { animation: fog_opacity_1 12s linear infinite, fog_move 16s linear infinite; } /* Layer 2 — flipped vertically → same fog now appears at TOP of viewport */ #foglayer_02 { animation: fog_opacity_2 22s linear infinite, fog_move_flip 14s linear infinite; } /* Layer 3 — normal orientation, different speed → more bottom depth */ /* Layer 4 — flipped, different speed → more top depth */ /* Horizontal scroll — move left one full width then reset */ @keyframes fog_move { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Irregular opacity pulses per layer so they feel independent */ @keyframes fog_opacity_1 { 0% { opacity: 0.22; } 22% { opacity: 0.75; } 40% { opacity: 0.45; } 58% { opacity: 0.65; } 80% { opacity: 0.30; } 100% { opacity: 0.22; } } @keyframes fog_opacity_2 { 0% { opacity: 0.65; } 25% { opacity: 0.35; } 50% { opacity: 0.20; } 80% { opacity: 0.55; } 100% { opacity: 0.65; } } @keyframes fog_opacity_3 { 0% { opacity: 0.80; } 27% { opacity: 0.35; } 52% { opacity: 0.70; } 68% { opacity: 0.40; } 100% { opacity: 0.80; } } @media (max-width: 767px) { .fogimg { width: 100%; } } /* ─── GLOBAL ATMOSPHERIC FOG (CSS gradient, all pages) ──────── */ /* Ensures consistent fog atmosphere on content-heavy pages where the image fog layers may be less visible between elements. */ .fogwrapper::before, .fogwrapper::after { content: ''; position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; z-index: 10; animation: cssAtmosFog 16s ease-in-out infinite alternate; } /* Bottom atmospheric pool */ .fogwrapper::before { bottom: 0; height: 40%; background: radial-gradient( ellipse 140% 60% at 50% 100%, rgba(120, 160, 140, 0.22) 0%, rgba(80, 120, 100, 0.10) 45%, transparent 72% ); } /* Top atmospheric pool */ .fogwrapper::after { top: 0; height: 40%; background: radial-gradient( ellipse 140% 60% at 50% 0%, rgba(120, 160, 140, 0.20) 0%, rgba(80, 120, 100, 0.08) 45%, transparent 72% ); animation-delay: -8s; } @keyframes cssAtmosFog { from { opacity: 0.5; } to { opacity: 0.9; } } /* ─── PAGE DARKEN LAYER ─────────────────────────────────────── */ .page-darken { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 5, 0.62); pointer-events: none; z-index: 1; } /* Ensure the main content element itself is positioned so its children's z-index: 2 actually beats the page-darken at z-index 1 */ .main-content { position: relative; z-index: 2; } /* ─── NOISE OVERLAY ──────────────────────────────────────────── */ .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 200px 200px; mix-blend-mode: overlay; } /* ─── VIGNETTE ───────────────────────────────────────────────── */ .vignette { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; background: radial-gradient( ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100% ); } /* ─── LAYOUT UTILITY ─────────────────────────────────────────── */ .section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); position: relative; z-index: 2; } .section-inner--narrow { max-width: 680px; } /* ─── HEADER ─────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(6, 6, 6, 0.96); border-bottom: 1px solid var(--clr-border); } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); height: var(--header-height); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; } .brand-link { display: flex; align-items: center; gap: var(--space-sm); color: var(--clr-heading); font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; } .brand-link:hover { color: var(--clr-accent); } .brand-icon { display: inline-flex; align-items: center; width: 44px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(196, 26, 26, 0.5)); transition: filter var(--transition-med); } .brand-icon svg { width: 44px; height: 44px; } .brand-link:hover .brand-icon { filter: drop-shadow(0 0 16px rgba(196, 26, 26, 0.9)); animation: haloSpin 2.5s linear infinite; } @keyframes haloSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .brand-name { font-weight: 600; } .header-nav { display: flex; align-items: center; gap: var(--space-lg); } .nav-link { font-size: 0.85rem; color: var(--clr-text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; transition: color var(--transition-fast); } .nav-link:hover { color: var(--clr-accent); } .nav-link--submit, .nav-link--signin { padding: 6px 16px; border: 1px solid var(--clr-border-glow); border-radius: 2px; color: var(--clr-accent); background: transparent; transition: background var(--transition-fast), box-shadow var(--transition-fast); } .nav-link--submit:hover, .nav-link--signin:hover { background: var(--clr-accent-fog); box-shadow: var(--shadow-glow); color: var(--clr-accent); } .user-nav { display: flex; align-items: center; gap: var(--space-md); } .user-greeting { font-size: 0.8rem; color: var(--clr-text-muted); font-family: var(--font-distressed); } /* Header fog strip */ .fog-strip { position: absolute; bottom: -12px; left: 0; right: 0; height: 24px; background: linear-gradient(to bottom, rgba(92,138,110,0.04) 0%, transparent 100%); pointer-events: none; z-index: 1; } .fog-strip--footer { top: -12px; bottom: auto; background: linear-gradient(to top, rgba(92,138,110,0.04) 0%, transparent 100%); } /* ─── HERO ───────────────────────────────────────────────────── */ .hero { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; z-index: 2; } /* CSS fog-layer classes removed — image fog system handles all fog. hero-mist removed — hero now has transparent background. */ .hero-inner { position: relative; z-index: 4; text-align: center; padding: var(--space-3xl) var(--space-xl); width: 100%; max-width: 700px; background: rgba(10, 16, 12, 0.82); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 6px; } .hero-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 600; color: var(--clr-heading); letter-spacing: 0.06em; text-transform: none; margin-bottom: var(--space-md); text-shadow: 0 2px 12px rgba(0,0,0,0.6); } .hero-description { font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.7; max-width: 560px; margin: 0 auto var(--space-xl); opacity: 0.85; } .hero-eyebrow { font-family: var(--font-distressed); font-size: 0.85rem; color: var(--clr-text-muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-md); opacity: 0.75; } /* ─── SEARCH ─────────────────────────────────────────────────── */ .search-wrapper { position: relative; max-width: 560px; margin: 0 auto var(--space-lg); } .search-wrapper .search-field, .search-wrapper input[type="search"], .search-wrapper input[type="text"] { width: 100%; padding: 14px 48px 14px 48px; background: rgba(20, 20, 20, 0.85); border: 1px solid var(--clr-border-glow); border-radius: 3px; color: var(--clr-text); font-family: var(--font-body); font-size: 1rem; outline: none; transition: border-color var(--transition-med), box-shadow var(--transition-med); -webkit-appearance: none; } .search-wrapper input:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-fog), var(--shadow-glow); } .search-wrapper input::placeholder { color: var(--clr-text-muted); } /* Search icon override */ .search-wrapper .search-icon, .search-wrapper form::before { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--clr-accent-dim); pointer-events: none; } .search-hints { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); } .hints-label { font-size: 0.78rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .hint-tag { display: inline-block; padding: 3px 12px; border: 1px solid var(--clr-border); border-radius: 20px; font-size: 0.78rem; color: var(--clr-text-muted); transition: all var(--transition-fast); } .hint-tag:hover { border-color: var(--clr-accent); color: var(--clr-accent); background: var(--clr-accent-fog); } /* Inline search (search results page) */ .search-wrapper--inline { max-width: 100%; margin: 0; } /* ─── PAGE HEADERS ───────────────────────────────────────────── */ .page-header { position: relative; overflow: hidden; padding: var(--space-2xl) 0 var(--space-xl); background: rgba(10, 16, 12, 0.82); border-bottom: 1px solid rgba(255, 255, 255, 0.05); z-index: 2; } .page-header .section-inner { padding-top: var(--space-md); } /* ─── CONTENT WRAPPER ────────────────────────────────────────── */ .content-wrapper { padding: var(--space-2xl) 0; position: relative; z-index: 2; } .content-with-sidebar { display: grid; grid-template-columns: 1fr var(--sidebar-width); gap: var(--space-2xl); align-items: start; } /* ─── CATEGORIES GRID ────────────────────────────────────────── */ .categories-section { padding: var(--space-2xl) 0; position: relative; z-index: 2; } .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } @media (max-width: 768px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .categories-grid { grid-template-columns: 1fr; } } .category-card { position: relative; display: flex; flex-direction: column; align-items: center; /* centre everything horizontally */ text-align: center; padding: var(--space-xl) var(--space-xl) var(--space-lg); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 4px; color: var(--clr-text); overflow: hidden; transition: border-color var(--transition-med), transform var(--transition-med), box-shadow var(--transition-med); box-shadow: var(--shadow-card); } .category-card:hover { border-color: #7c2020; transform: translateY(-3px); box-shadow: var(--shadow-card), 0 0 22px rgba(124, 32, 32, 0.3); background: #161010; color: var(--clr-text); } /* Card ambient glow on hover — deep worn crimson, like SH2 cover squares */ .category-card__glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 50%, rgba(139, 28, 28, 0.22) 0%, transparent 65%); opacity: 0; transition: opacity var(--transition-slow); pointer-events: none; } .category-card:hover .category-card__glow { opacity: 1; } .category-card__icon { width: 44px; height: 44px; margin-bottom: var(--space-md); flex-shrink: 0; color: #c41a1a; /* Hidden by default — materialises on hover */ opacity: 0; transition: opacity 0.5s ease, filter 0.4s ease; } .category-icon { width: 44px; height: 44px; } .category-card:hover .category-card__icon { opacity: 1; filter: drop-shadow(0 0 7px rgba(196, 26, 26, 1)) drop-shadow(0 0 20px rgba(196, 26, 26, 0.6)) drop-shadow(0 0 40px rgba(196, 26, 26, 0.25)); } .category-card__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--clr-heading); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-sm); } .category-card__desc { font-size: 0.875rem; color: var(--clr-text-muted); line-height: 1.6; flex: 1; } .category-card__arrow { margin-top: var(--space-md); color: var(--clr-accent-dim); font-size: 1.1rem; transition: transform var(--transition-fast), color var(--transition-fast); display: flex; align-items: center; gap: 6px; } /* Replace → with a centered "View →" label */ .category-card__arrow::before { content: 'View'; font-family: var(--font-heading); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; } .category-card:hover .category-card__arrow { transform: translateX(4px); color: #a83030; } .category-card:hover .category-card__title { color: #d4a0a0; } /* ─── SECTION TITLE ──────────────────────────────────────────── */ .section-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--clr-heading); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); } .section-title__accent { color: var(--clr-accent); font-size: 0.7rem; } /* ─── PROMOTED / ARTICLES GRID ───────────────────────────────── */ .promoted-section { padding: 0 0 var(--space-2xl); position: relative; z-index: 2; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); } .article-card { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 3px; color: var(--clr-text); transition: all var(--transition-med); } .article-card:hover { border-color: var(--clr-accent); background: var(--clr-bg-card-hover); color: var(--clr-text); transform: translateX(4px); } .article-card__title { font-size: 0.9rem; color: var(--clr-text); font-weight: 500; margin-bottom: 2px; } .article-card__author { font-size: 0.75rem; color: var(--clr-text-muted); } .article-card__arrow { color: var(--clr-accent-dim); transition: transform var(--transition-fast); flex-shrink: 0; margin-left: var(--space-md); } .article-card:hover .article-card__arrow { transform: translateX(4px); color: var(--clr-accent); } /* ─── BREADCRUMBS ────────────────────────────────────────────── */ /* Full-width breadcrumb bar above the article card */ .article-breadcrumb-bar { margin-bottom: var(--space-md); padding: 7px var(--space-md); background: rgba(13, 21, 16, 0.2); border-radius: 3px; border-left: 2px solid rgba(92, 138, 110, 0.2); overflow: hidden; white-space: nowrap; } .article-breadcrumb-bar .breadcrumbs { margin-bottom: 0; } /* Switch ol to block + nowrap so li elements flow as inline text — immune to Zendesk's flex overrides on li */ .article-breadcrumb-bar .breadcrumbs ol { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .article-breadcrumb-bar .breadcrumbs li { display: inline !important; white-space: nowrap !important; } .article-breadcrumb-bar .breadcrumbs li:not(:last-child)::after { display: inline !important; } .article-breadcrumb-bar .breadcrumbs li a { display: inline !important; white-space: nowrap; } .breadcrumbs { margin-bottom: var(--space-xl); } .breadcrumbs ol { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; font-size: 0.75rem; overflow: hidden; white-space: nowrap; } .breadcrumbs li { display: flex; align-items: center; gap: 4px; color: var(--clr-text-muted); flex-shrink: 1; min-width: 0; overflow: hidden; } /* All crumbs except the last one truncate with ellipsis */ .breadcrumbs li:not(:last-child) { flex-shrink: 2; } .breadcrumbs li a, .breadcrumbs li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--clr-text-faint); } .breadcrumbs a { color: var(--clr-text-muted); transition: color var(--transition-fast); } .breadcrumbs a:hover { color: var(--clr-accent); } .breadcrumbs [aria-current="page"] { color: var(--clr-text-muted); } /* The immediate parent crumb becomes a visible ← Back link on deep pages */ .page--section .breadcrumbs li:nth-last-child(2) a, .page--article .breadcrumbs li:nth-last-child(2) a { color: var(--clr-accent); font-weight: 500; } .page--section .breadcrumbs li:nth-last-child(2) a::before, .page--article .breadcrumbs li:nth-last-child(2) a::before { content: '\2190 '; } /* Explicit back button used in section/article templates */ .btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; margin-bottom: var(--space-xl); font-size: 0.8rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); border: 1px solid var(--clr-border); border-radius: 2px; background: transparent; transition: all var(--transition-fast); } .btn-back::before { content: '\2190 '; font-size: 1rem; } .btn-back:hover { color: var(--clr-accent); border-color: var(--clr-accent); background: var(--clr-accent-fog); } /* ─── PAGE TITLES ────────────────────────────────────────────── */ .page-title { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; color: var(--clr-heading); letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 0 30px rgba(92, 138, 110, 0.2); } .page-description { margin-top: var(--space-sm); color: var(--clr-text-muted); font-size: 0.9rem; } /* ─── SECTION BLOCKS ─────────────────────────────────────────── */ .section-block { margin-bottom: var(--space-lg); padding: var(--space-xl); background: rgba(13, 21, 16, 0.23); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 4px; } .section-block__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--clr-heading); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); } .section-block__title a { color: inherit; } .section-block__title a:hover { color: var(--clr-accent); } .section-block__desc { font-size: 0.85rem; color: var(--clr-text-muted); margin-bottom: var(--space-md); } /* ─── ARTICLE LIST ───────────────────────────────────────────── */ .article-list { display: flex; flex-direction: column; gap: 2px; } .article-list__item { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .article-list__link { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9rem; color: var(--clr-text); transition: color var(--transition-fast), padding-left var(--transition-fast); line-height: 1.4; } .article-list__link:hover { color: #d4a0a0; padding-left: var(--space-xs); } .article-list--detailed .article-list__meta { font-size: 0.75rem; color: var(--clr-text-faint); margin-top: 2px; } .see-all-link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-md); padding: 6px 14px; font-size: 0.78rem; font-family: var(--font-body); color: var(--clr-text-muted); border: 1px solid var(--clr-border); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; background: transparent; cursor: pointer; transition: all var(--transition-fast); } .see-all-link:hover { color: var(--clr-accent); border-color: var(--clr-accent); background: var(--clr-accent-fog); } /* ── LOAD MORE ARROW BUTTON ──────────────────────────────────── */ .load-more-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-lg); width: 100%; padding: var(--space-md) 0; background: transparent; border: none; border-top: 1px solid var(--clr-border); cursor: pointer; color: var(--clr-text-muted); font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; transition: color var(--transition-med); } .load-more-btn::after { content: ''; display: block; width: 36px; height: 36px; border: 1.5px solid var(--clr-border); border-radius: 50%; background: var(--clr-bg-card); /* chevron-down drawn with CSS borders */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 60%; background-position: center; background-repeat: no-repeat; transition: all var(--transition-med); animation: arrowBounce 2s ease-in-out infinite; } .load-more-btn:hover { color: var(--clr-accent); } .load-more-btn:hover::after { border-color: var(--clr-accent); background-color: var(--clr-accent-fog); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c8a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); box-shadow: 0 0 12px var(--clr-accent-glow); animation: none; transform: translateY(3px); } .load-more-btn:disabled { opacity: 0.4; cursor: default; } .load-more-btn:disabled::after { animation: none; } @keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* Fade-in for dynamically appended articles */ @keyframes articleAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .article-list__item--new { opacity: 0; animation: articleAppear 0.35s ease forwards; } /* ─── LEGIBILITY CARD ────────────────────────────────────────── */ /* Very faint frosted-glass backing applied to all text-heavy areas so content stays readable against the rolling fog behind it. */ .article-body { background: rgba(13, 21, 16, 0.23); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 4px; padding: var(--space-xl); } /* content-main is a CSS grid column — no padding/background so it doesn't break the two-column layout when multiple items are present */ /* ─── SIDEBAR ────────────────────────────────────────────────── */ .content-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-lg)); background: rgba(13, 21, 16, 0.27); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 4px; padding: var(--space-lg); } .sidebar-title { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; color: var(--clr-heading); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--space-lg); padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); border-bottom: 1px solid rgba(92, 138, 110, 0.25); border-left: 2px solid var(--clr-accent); background: rgba(92, 138, 110, 0.06); border-radius: 0 2px 2px 0; } .sidebar-list { display: flex; flex-direction: column; gap: 2px; } .sidebar-list__item a { display: block; padding: 6px var(--space-sm); font-size: 0.84rem; color: var(--clr-text-muted); border-radius: 2px; transition: all var(--transition-fast); border-left: 2px solid transparent; } .sidebar-list__item a:hover { color: var(--clr-accent); background: var(--clr-accent-fog); border-left-color: var(--clr-accent); padding-left: var(--space-md); } .sidebar-list__item--active a { color: var(--clr-accent); background: var(--clr-accent-fog); border-left-color: var(--clr-accent); padding-left: var(--space-md); } /* ─── ARTICLE BODY ───────────────────────────────────────────── */ .article-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--clr-border); } /* Title first, large and prominent — DBD-inspired layout */ .article-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; color: var(--clr-heading); letter-spacing: 0.03em; line-height: 1.25; margin-bottom: var(--space-lg); } /* Author / date row sits beneath the title */ .article-byline { display: flex; align-items: center; gap: var(--space-md); } .article-byline__avatar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); object-fit: cover; filter: grayscale(0.3); flex-shrink: 0; background: var(--clr-surface); } .article-byline__info { display: flex; flex-direction: column; gap: 3px; } .article-byline__name { font-size: 0.88rem; font-weight: 600; color: var(--clr-heading); } .article-byline__dates { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .article-byline__date { font-size: 0.78rem; color: var(--clr-text-muted); } .article-byline__updated { font-size: 0.78rem; color: var(--clr-text-muted); opacity: 0.8; } .article-byline__updated::before { content: '\2022'; margin-right: var(--space-sm); opacity: 0.45; } /* Rich text content */ .article-content { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text); } .article-content h1, .article-content h2, .article-content h3, .article-content h4 { font-family: var(--font-heading); color: var(--clr-heading); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-xl) 0 var(--space-md); } .article-content h2 { font-size: 1.15rem; } .article-content h3 { font-size: 0.95rem; } .article-content p { margin-bottom: var(--space-md); } .article-content ul, .article-content ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); } .article-content ul { list-style: disc; } .article-content ol { list-style: decimal; } .article-content li { margin-bottom: var(--space-xs); } .article-content a { color: var(--clr-accent); text-decoration: underline; text-underline-offset: 3px; } .article-content blockquote { border-left: 3px solid var(--clr-accent-dim); padding-left: var(--space-lg); margin: var(--space-lg) 0; color: var(--clr-text-muted); font-style: italic; } .article-content code { background: var(--clr-surface); color: var(--clr-accent); padding: 1px 6px; border-radius: 2px; font-family: var(--font-distressed); font-size: 0.875em; } .article-content pre { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 4px; padding: var(--space-lg); overflow-x: auto; margin: var(--space-lg) 0; } .article-content pre code { background: none; padding: 0; } .article-content img { border-radius: 4px; margin: var(--space-lg) 0; border: 1px solid var(--clr-border); filter: saturate(0.75) brightness(0.9); } .article-content table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.875rem; } .article-content th, .article-content td { padding: 10px var(--space-md); border: 1px solid var(--clr-border); text-align: left; } .article-content th { background: var(--clr-surface); color: var(--clr-heading); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .article-content tr:hover td { background: rgba(92,138,110,0.03); } /* Tabs (like Zephyr's Settings/Utilities tabs) */ .article-content .tabs-nav { display: flex; gap: 0; border-bottom: 1px solid var(--clr-border); margin-bottom: var(--space-lg); } .article-content .tab-btn { padding: var(--space-sm) var(--space-lg); background: none; border: none; border-bottom: 2px solid transparent; color: var(--clr-text-muted); font-family: var(--font-body); font-size: 0.875rem; cursor: pointer; transition: all var(--transition-fast); letter-spacing: 0.04em; } .article-content .tab-btn.active, .article-content .tab-btn:hover { color: var(--clr-accent); border-bottom-color: var(--clr-accent); } .article-content .tab-panel { display: none; padding: var(--space-lg); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-top: none; font-size: 0.875rem; } .article-content .tab-panel.active { display: block; } /* ─── ARTICLE VOTE ───────────────────────────────────────────── */ .article-vote { margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 4px; text-align: center; } .vote-question { font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-heading); margin-bottom: var(--space-lg); } .vote-buttons { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-md); } .vote-btn { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 20px; background: transparent; border: 1px solid var(--clr-border); border-radius: 2px; color: var(--clr-text-muted); font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; transition: all var(--transition-fast); } .vote-btn svg { width: 16px; height: 16px; } .vote-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); background: var(--clr-accent-fog); } .vote-count { font-size: 0.8rem; color: var(--clr-text-muted); } /* ─── COMMENTS ───────────────────────────────────────────────── */ .comments-section { margin-top: var(--space-2xl); } .comments-title { font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-heading); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--clr-border); } .comment { display: flex; gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid var(--clr-border); } .comment__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; filter: grayscale(0.5); border: 1px solid var(--clr-border); object-fit: cover; } .comment__header { display: flex; gap: var(--space-md); align-items: center; margin-bottom: var(--space-sm); } .comment__author { font-size: 0.85rem; color: var(--clr-heading); font-weight: 500; } .comment__date { font-size: 0.75rem; color: var(--clr-text-muted); } .comment__content { font-size: 0.875rem; color: var(--clr-text); line-height: 1.6; } .comment-form { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); } .comment-input { background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 3px; color: var(--clr-text); font-family: var(--font-body); font-size: 0.9rem; padding: var(--space-md); resize: vertical; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .comment-input:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-fog); } .comment-input::placeholder { color: var(--clr-text-muted); } /* ─── SEARCH RESULTS ─────────────────────────────────────────── */ /* Generative answers panel — themed to match the dark aesthetic */ [data-test-id="generative-answers"], .generative-answers { margin-bottom: var(--space-xl); padding: var(--space-xl); background: rgba(13, 21, 16, 0.35); border: 1px solid rgba(92, 138, 110, 0.2); border-left: 3px solid var(--clr-accent-dim); border-radius: 4px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 0.9rem; color: var(--clr-text); line-height: 1.7; } .results-meta { font-size: 0.8rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-xl); } .search-results { display: flex; flex-direction: column; gap: var(--space-lg); } .search-result { padding: var(--space-xl); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 3px; transition: border-color var(--transition-med); } .search-result:hover { border-color: var(--clr-accent); } .search-result__title { display: block; font-family: var(--font-heading); font-size: 1rem; color: var(--clr-heading); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); transition: color var(--transition-fast); } .search-result:hover .search-result__title { color: var(--clr-accent); } .search-result__excerpt { font-size: 0.875rem; color: var(--clr-text-muted); margin-bottom: var(--space-sm); line-height: 1.6; } .search-result__breadcrumb { font-size: 0.75rem; color: var(--clr-text-faint); } .search-result__breadcrumb a { color: var(--clr-text-faint); } .search-result__breadcrumb a:hover { color: var(--clr-accent); } /* No results */ .no-results { text-align: center; padding: var(--space-3xl) 0; } .no-results__icon svg { width: 64px; height: 64px; margin: 0 auto var(--space-xl); } .no-results__title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); } .no-results__hint { font-size: 0.875rem; color: var(--clr-text-faint); } /* ─── BUTTONS ────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; padding: 10px 24px; background: var(--clr-accent); color: #0a0a0a; border: none; border-radius: 2px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all var(--transition-fast); } .btn-primary:hover { background: #8abf9e; box-shadow: var(--shadow-glow); } .btn-ghost { display: inline-flex; align-items: center; padding: 6px 16px; background: transparent; color: var(--clr-accent); border: 1px solid var(--clr-border-glow); border-radius: 2px; font-size: 0.8rem; font-family: var(--font-body); cursor: pointer; transition: all var(--transition-fast); } .btn-ghost:hover { background: var(--clr-accent-fog); box-shadow: var(--shadow-glow); } /* ─── REQUESTS TABLE ─────────────────────────────────────────── */ .requests-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .requests-table th { text-align: left; padding: 10px var(--space-md); font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); border-bottom: 1px solid var(--clr-border); } .requests-table td { padding: var(--space-md); border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--clr-text-muted); } .requests-table tr:hover td { background: rgba(92,138,110,0.04); } .requests-table a { color: var(--clr-accent); } .status-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; } .status-badge--open { background: rgba(92,138,110,0.15); color: var(--clr-accent); } .status-badge--solved { background: rgba(50,50,50,0.5); color: var(--clr-text-muted); } .status-badge--pending { background: rgba(122,50,40,0.2); color: #c07060; } /* ─── PAGINATION ─────────────────────────────────────────────── */ .pagination, nav[aria-label="pagination"] { display: flex; gap: var(--space-sm); align-items: center; justify-content: center; margin-top: var(--space-2xl); flex-wrap: wrap; } .pagination a, .pagination span, nav[aria-label="pagination"] a, nav[aria-label="pagination"] span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--clr-border); border-radius: 2px; font-size: 0.8rem; color: var(--clr-text-muted); transition: all var(--transition-fast); } .pagination a:hover, nav[aria-label="pagination"] a:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .pagination .current, nav[aria-label="pagination"] .current { border-color: var(--clr-accent); background: var(--clr-accent-fog); color: var(--clr-accent); } /* ─── FORMS (new request) ─────────────────────────────────────── */ form label { display: block; font-size: 0.8rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-xs); } form input[type="text"], form input[type="email"], form select, form textarea { width: 100%; padding: 10px var(--space-md); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 2px; color: var(--clr-text); font-family: var(--font-body); font-size: 0.9rem; margin-bottom: var(--space-md); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } form input:focus, form select:focus, form textarea:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-fog); } /* ── CUSTOM REQUEST FORM ─────────────────────────────────────── */ .sh-form { display: flex; flex-direction: column; gap: var(--space-lg); } .form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .form-group { display: flex; flex-direction: column; gap: var(--space-xs); } .form-label { font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-text-muted); } .form-required { color: #a83030; } .form-required-note { font-size: 0.75rem; color: var(--clr-text-faint); } .form-input { width: 100%; padding: 12px var(--space-md); background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: 2px; color: var(--clr-text); font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-fog); } .form-input::placeholder { color: var(--clr-text-faint); } .form-input.form-input--error { border-color: #7c2020; } .form-textarea { resize: vertical; min-height: 160px; } .form-error { font-size: 0.75rem; color: #a83030; min-height: 1em; } .form-error-banner { padding: var(--space-md); background: rgba(124,32,32,0.15); border: 1px solid rgba(124,32,32,0.4); border-radius: 2px; color: #d08080; font-size: 0.875rem; } .form-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } /* Success state */ .request-success { text-align: center; padding: var(--space-3xl) 0; } .request-success__icon { font-size: 3rem; color: var(--clr-accent); margin-bottom: var(--space-lg); text-shadow: 0 0 20px var(--clr-accent-glow); } .request-success__title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--clr-heading); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); } .request-success__body { color: var(--clr-text-muted); margin-bottom: var(--space-xl); font-size: 0.9rem; } @media (max-width: 600px) { .form-row--half { grid-template-columns: 1fr; } } form select { appearance: none; cursor: pointer; } /* ─── FOOTER ─────────────────────────────────────────────────── */ .site-footer { position: relative; background: var(--clr-bg-raised); border-top: 1px solid var(--clr-border); z-index: 2; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl); display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; } .footer-brand-name { font-family: var(--font-heading); font-size: 0.85rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.15em; } .footer-nav { display: flex; gap: var(--space-lg); } .footer-link { font-size: 0.8rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .footer-link:hover { color: var(--clr-accent); } .footer-disclaimer { max-width: var(--max-width); margin: 0 auto; padding: var(--space-md) var(--space-xl); border-top: 1px solid var(--clr-border); font-size: 0.7rem; color: var(--clr-text-faint); line-height: 1.6; text-align: center; opacity: 0.7; } .footer-disclaimer em { font-style: italic; } .footer-copy { margin-left: auto; font-size: 0.75rem; color: var(--clr-text-faint); font-family: var(--font-distressed); } /* ─── EMPTY STATE ────────────────────────────────────────────── */ .empty-state { font-size: 0.9rem; color: var(--clr-text-muted); text-align: center; padding: var(--space-2xl) 0; } /* ─── SCROLLBAR ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--clr-bg); opacity: 1; transition: opacity 2s ease-out; } ::-webkit-scrollbar-thumb { background: var(--clr-surface); border-radius: 3px; transition: background 2s ease-out, opacity 2s ease-out; } ::-webkit-scrollbar-thumb:hover { background: var(--clr-accent-dim); } /* Scrollbar peeling away — triggered by .sh-scrollbar-peel on */ @keyframes shScrollbarPeel { 0% { opacity: 1; transform: scaleX(1); } 30% { opacity: 0.7; transform: scaleX(0.85); } 60% { opacity: 0.35; transform: scaleX(0.5); } 100% { opacity: 0; transform: scaleX(0); } } html.sh-scrollbar-peel::-webkit-scrollbar-thumb { animation: shScrollbarPeel 3.5s ease-in forwards; } html.sh-scrollbar-peel::-webkit-scrollbar-track { animation: shScrollbarPeel 4s ease-in 0.5s forwards; } /* Firefox */ html.sh-scrollbar-peel { scrollbar-color: transparent transparent; transition: scrollbar-color 3s ease-in; } /* ─── SELECTION ──────────────────────────────────────────────── */ ::selection { background: var(--clr-accent-glow); color: var(--clr-heading); } /* ─── FOCUS VISIBLE ──────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 3px; border-radius: 2px; } /* ─── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 900px) { .content-with-sidebar { grid-template-columns: 1fr; } .content-sidebar { position: static; order: -1; } } @media (max-width: 640px) { .section-inner { padding: 0 var(--space-lg); } .header-inner { padding: 0 var(--space-lg); } .hero-inner { padding: var(--space-2xl) var(--space-lg); } .footer-inner { padding: var(--space-lg); } .header-nav .nav-link:not(.nav-link--submit):not(.nav-link--signin) { display: none; } .categories-grid { grid-template-columns: 1fr; } .articles-grid { grid-template-columns: 1fr; } .footer-copy { margin-left: 0; } } /* ─── DISTRESSED FLICKER (optional, subtle) ──────────────────── */ @keyframes subtleFlicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: 0.97; } 97% { opacity: 1; } 98% { opacity: 0.95; } 99% { opacity: 1; } } .page--article .article-title { animation: subtleFlicker 12s infinite; } /* ─── ARTICLE TABLE OF CONTENTS SIDEBAR ─────────────────────── */ .sh-toc { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); width: 200px; max-height: 78vh; z-index: 10; overflow: hidden; /* Show at 1460px+ so it sits cleanly between article and viewport edge */ display: none; } @media (min-width: 1460px) { .sh-toc { display: flex; flex-direction: column; } } /* Inner scroll container */ .sh-toc { background: rgba(8, 13, 10, 0.94); border: 1px solid rgba(92, 138, 110, 0.28); border-radius: 3px; padding: 18px 14px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(92,138,110,0.3) transparent; box-shadow: inset 0 0 0 4px rgba(8,13,10,0.94), inset 0 0 0 5px rgba(92,138,110,0.12), 0 16px 48px rgba(0,0,0,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Corner bracket decorations (top-left and bottom-right) */ .sh-toc__corner { position: absolute; width: 14px; height: 14px; border-color: rgba(92, 138, 110, 0.55); border-style: solid; pointer-events: none; } .sh-toc__corner--tl { top: 5px; left: 5px; border-width: 1.5px 0 0 1.5px; } .sh-toc__corner--br { bottom: 5px; right: 5px; border-width: 0 1.5px 1.5px 0; } /* Header label */ .sh-toc__label { font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(92, 138, 110, 0.65); text-align: center; margin-bottom: 5px; } /* Title — single line */ .sh-toc__title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600; color: var(--clr-heading); text-align: center; letter-spacing: 0.06em; white-space: nowrap; margin-bottom: 8px; } /* Divider with symbol */ .sh-toc__divider { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .sh-toc__div-line { flex: 1; height: 1px; background: rgba(92, 138, 110, 0.25); } .sh-toc__div-sym { width: 32px; height: 32px; flex-shrink: 0; color: rgba(92, 138, 110, 0.6); } .sh-toc__div-sym svg { width: 32px; height: 32px; } /* List */ .sh-toc__list { list-style: none; margin: 0; padding: 0; } .sh-toc__item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px 6px 4px; border-radius: 2px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 80ms ease, border-left-color 80ms ease; border-left: 2px solid transparent; cursor: pointer; } .sh-toc__item:hover { background: rgba(92, 138, 110, 0.1); border-left-color: rgba(92, 138, 110, 0.4); } .sh-toc__item--active { background: rgba(92, 138, 110, 0.14); border-left-color: var(--clr-accent); } .sh-toc__num { font-family: var(--font-distressed); font-size: 0.68rem; color: var(--clr-accent); flex-shrink: 0; margin-top: 1px; min-width: 18px; } .sh-toc__link { font-size: 0.76rem; color: var(--clr-text-muted); line-height: 1.4; text-decoration: none; transition: color 80ms ease; } .sh-toc__item:hover .sh-toc__link, .sh-toc__item--active .sh-toc__link { color: var(--clr-text); } /* Footer */ .sh-toc__footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(92, 138, 110, 0.18); text-align: center; flex-shrink: 0; } /* Moth back-to-top button */ .sh-toc__moth-btn { display: block; width: 100%; padding: 4px 16px 2px; background: none; border: none; cursor: pointer; transition: filter 0.35s ease, transform 0.2s ease; margin-bottom: 4px; } /* Canvas-processed moth — background already transparent, just needs size + transitions */ .sh-toc__moth-img { width: 100%; max-width: 80px; height: auto; display: block; margin: 0 auto; opacity: 0.72; transition: opacity 1.2s ease, filter 1.2s ease, transform 0.2s ease; } .sh-toc__moth-btn:hover .sh-toc__moth-img { opacity: 1; transform: scale(1.05); } /* Dissolve is handled by JS canvas particle scatter — no CSS class needed */ .sh-toc__moth-btn--flash .sh-toc__moth-img { filter: sepia(1) hue-rotate(320deg) saturate(3) brightness(0.8); } /* Scroll-to-top arrow beneath the moth */ .sh-toc__scroll-arrow { display: block; text-align: center; font-size: 1.4rem; line-height: 1; color: rgba(92, 138, 110, 0.5); margin-top: 4px; letter-spacing: 0; transition: color 0.3s ease, transform 0.2s ease; } .sh-toc__moth-btn:hover .sh-toc__scroll-arrow { color: rgba(92, 138, 110, 0.9); transform: translateY(-3px); } .sh-toc__room { font-family: var(--font-heading); font-size: 0.72rem; color: rgba(92, 138, 110, 0.65); letter-spacing: 0.1em; margin-bottom: 3px; } .sh-toc__fog { font-family: var(--font-distressed); font-size: 0.62rem; color: rgba(150, 150, 150, 0.45); display: flex; align-items: center; justify-content: center; gap: 5px; letter-spacing: 0.06em; } .sh-toc__fog-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #c41a1a; box-shadow: 0 0 5px rgba(196, 26, 26, 0.8); animation: tocFogDotPulse 2.4s ease-in-out infinite; } @keyframes tocFogDotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 5px rgba(196,26,26,0.8); } 50% { opacity: 0.3; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { /* Disable all persistent animations for users who prefer reduced motion */ .foglayer, .fogwrapper::before, .fogwrapper::after, .brand-icon svg, .sh-toc__moth-free-flap, .sh-moth-flyaway, .sh-rust-noise, .sh-rust-scanlines, .sh-rust-blood { animation: none !important; transition: none !important; } /* Freeze otherworld filter — no gradual darkening */ .sh-otherworld-content { filter: none !important; transition: none !important; } /* Keep fog visible but static */ .foglayer { opacity: 0.35 !important; } } /* Flipped-layer scroll — includes scaleY(-1) so the flip isn't overridden */ @keyframes fog_move_flip { from { transform: scaleY(-1) translateX(0); } to { transform: scaleY(-1) translateX(-50%); } } /* ─── HIDDEN REVEAL TEXT ────────────────────────────────────────── * Usage in article editor (source view): * Your secret text here * or: Your secret text here * * Works automatically inside any article body (.article-content). * Also supports the .silent-hill-healthcare-article parent class * if set on a wrapper element. * * Optimisations vs raw version: * • letter-spacing removed from transition — it triggers layout * reflow every frame; replaced with a static value on hover. * • will-change omitted from base state (don't promote every * piece of article text). The 180ms transition is fast enough * that the browser handles it without pre-promotion. * • Only color, opacity, text-shadow are transitioned — all * paint-only properties, no layout involvement. * ────────────────────────────────────────────────────────────────── */ /* Base: text is invisible, retains layout space and is selectable */ .article-content .sh-hidden-reveal, .article-content [data-sh-hidden="true"], .silent-hill-healthcare-article .sh-hidden-reveal, .silent-hill-healthcare-article [data-sh-hidden="true"] { color: transparent !important; opacity: 0.01 !important; text-shadow: none !important; cursor: help; user-select: text; -webkit-user-select: text; transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease; } /* Reveal on hover or keyboard focus — glows blood red */ .article-content .sh-hidden-reveal:hover, .article-content .sh-hidden-reveal:focus, .article-content [data-sh-hidden="true"]:hover, .article-content [data-sh-hidden="true"]:focus, .silent-hill-healthcare-article .sh-hidden-reveal:hover, .silent-hill-healthcare-article .sh-hidden-reveal:focus, .silent-hill-healthcare-article [data-sh-hidden="true"]:hover, .silent-hill-healthcare-article [data-sh-hidden="true"]:focus { color: #ff3b3b !important; opacity: 1 !important; text-shadow: 0 0 6px rgba(255, 36, 36, 0.95), 0 0 14px rgba(150, 0, 0, 0.90), 0 0 22px rgba( 90, 0, 0, 0.75) !important; letter-spacing: 0.02em; outline: none; } /* Block-level hidden reveals (headers, divs, paragraphs) */ .article-content .sh-hidden-block, .silent-hill-healthcare-article .sh-hidden-block { display: block !important; border-left: 2px solid rgba(196, 26, 26, 0.15); padding-left: 10px; margin: 6px 0; } .article-content .sh-hidden-block:hover, .article-content .sh-hidden-block:focus, .silent-hill-healthcare-article .sh-hidden-block:hover, .silent-hill-healthcare-article .sh-hidden-block:focus { border-left-color: rgba(255, 59, 59, 0.6); } /* Any heading that already carries the class via inline HTML */ .article-content h2.sh-hidden-reveal, .article-content h3.sh-hidden-reveal, .article-content h4.sh-hidden-reveal, .silent-hill-healthcare-article h2.sh-hidden-reveal, .silent-hill-healthcare-article h3.sh-hidden-reveal, .silent-hill-healthcare-article h4.sh-hidden-reveal { display: block !important; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .article-content .sh-hidden-reveal, .article-content [data-sh-hidden="true"], .silent-hill-healthcare-article .sh-hidden-reveal, .silent-hill-healthcare-article [data-sh-hidden="true"] { transition: none !important; } } /* ─── ENTRY WARNING OVERLAY ─────────────────────────────────── */ #sh-entry-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(2, 3, 2, 0.97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: var(--space-xl); animation: overlayFadeIn 0.6s ease forwards; } #sh-entry-overlay.sh-entry-overlay--out { animation: overlayFadeOut 0.65s ease forwards; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } } .sh-entry-box { max-width: 520px; width: 100%; text-align: center; padding: var(--space-2xl) var(--space-xl); background: rgba(8, 12, 9, 0.92); border: 1px solid rgba(196, 26, 26, 0.3); border-radius: 4px; box-shadow: 0 0 60px rgba(196, 26, 26, 0.12), 0 0 0 1px rgba(196,26,26,0.1) inset; animation: boxRise 0.9s ease forwards; } @keyframes boxRise { from { transform: translateY(18px); opacity: 0.3; } to { transform: translateY(0); opacity: 1; } } .sh-entry-halo-wrap { display: flex; justify-content: center; margin-bottom: var(--space-md); } .sh-entry-halo { width: 80px; height: 80px; filter: drop-shadow(0 0 12px rgba(196,26,26,0.65)); opacity: 0.9; } .sh-entry-badge { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(196, 26, 26, 0.7); margin-bottom: var(--space-sm); } .sh-entry-title { font-family: var(--font-heading); font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: 600; color: var(--clr-heading); letter-spacing: 0.05em; line-height: 1.3; margin: 0 0 var(--space-md); text-align: center; } .sh-entry-rule { width: 60px; height: 1px; background: rgba(196, 26, 26, 0.35); margin: 0 auto var(--space-lg); } .sh-entry-lore { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--space-md); } .sh-entry-warning { font-size: 0.8rem; color: var(--clr-text-muted); background: rgba(196, 26, 26, 0.07); border: 1px solid rgba(196, 26, 26, 0.2); border-radius: 3px; padding: var(--space-md); margin-bottom: var(--space-xl); line-height: 1.6; text-align: left; } .sh-entry-warning strong { color: #d08080; } /* ── Video-game [ ENTER ] prompt ── */ .sh-entry-start { display: block; background: none; border: none; font-family: var(--font-distressed); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--clr-heading); cursor: pointer; margin: 0 auto var(--space-xl); padding: 6px 0; animation: shEntryPulse 2.2s ease-in-out infinite, shEntryFloat 3.6s ease-in-out infinite; text-shadow: 0 0 18px rgba(255, 230, 200, 0.25); } .sh-entry-start:hover { color: #fff; text-shadow: 0 0 24px rgba(255, 240, 220, 0.55); } @keyframes shEntryPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.18; } } @keyframes shEntryFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .sh-entry-legal { font-size: 0.65rem; color: var(--clr-text-faint); line-height: 1.6; opacity: 0.65; border-top: 1px solid var(--clr-border); padding-top: var(--space-md); } .sh-entry-legal em { font-style: italic; } /* ═══════════════════════════════════════════════════════════════ RUST DESCENT — OTHERWORLD ARTICLE EFFECT v75 Activated by:
(any wrapper) Dissolve text:

Corrupt text: ═══════════════════════════════════════════════════════════════ */ /* ── Rust blotch overlay — edges/corners only, never covers center text ── */ .sh-rust-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity 2s ease-out; background: radial-gradient(ellipse 55% 38% at 0% 0%, rgba(108,40,10,0.80) 0%, transparent 100%), radial-gradient(ellipse 48% 32% at 100% 0%, rgba( 92,30, 6,0.75) 0%, transparent 100%), radial-gradient(ellipse 48% 38% at 0% 100%, rgba( 98,36, 8,0.78) 0%, transparent 100%), radial-gradient(ellipse 55% 40% at 100% 100%, rgba(115,44,12,0.82) 0%, transparent 100%), radial-gradient(ellipse 22% 65% at 0% 50%, rgba( 84,28, 5,0.55) 0%, transparent 100%), radial-gradient(ellipse 22% 65% at 100% 50%, rgba( 90,32, 7,0.55) 0%, transparent 100%), radial-gradient(ellipse 85% 22% at 50% 100%, rgba( 78,24, 4,0.50) 0%, transparent 100%), radial-gradient(ellipse 85% 18% at 50% 0%, rgba( 70,20, 3,0.45) 0%, transparent 100%); /* No blend mode — stays at edges, never touches center content */ /* Long transition so first appearance is a slow, almost-imperceptible creep */ transition: opacity 3.5s cubic-bezier(0.4, 0, 1, 1); } /* ── All-edge blood inset glow ── */ .sh-rust-blood { position: fixed; inset: 0; pointer-events: none; z-index: 11; opacity: 0; border-radius: 0; /* Inset glow from all four sides */ box-shadow: inset 0 0 90px 20px rgba(150, 6, 6, 0.55), inset 0 60px 60px -20px rgba(120, 4, 4, 0.35), inset 0 -60px 60px -20px rgba(120, 4, 4, 0.35); transition: opacity 0.12s ease-in; } .sh-rust-blood.sh-blood-fade { transition: opacity 1.6s ease-out 0.2s; } /* ── Edge vignette — darkness creeping in from all sides ── */ .sh-rust-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: 0; transition: opacity 4s cubic-bezier(0.4, 0, 1, 1); background: radial-gradient( ellipse 72% 68% at 50% 48%, transparent 30%, rgba(5, 0, 0, 0.50) 62%, rgba(10, 0, 0, 0.90) 100% ); } /* ── Animated noise / static grain ── */ @keyframes shNoiseShift { 0% { background-position: 0px 0px; } 10% { background-position: -52px -31px; } 20% { background-position: 33px -62px; } 30% { background-position: -18px 44px; } 40% { background-position: 61px 11px; } 50% { background-position: -40px 55px; } 60% { background-position: 22px -44px; } 70% { background-position: -65px 18px; } 80% { background-position: 48px 38px; } 90% { background-position: -10px -55px; } 100% { background-position: 0px 0px; } } .sh-rust-noise { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 1.4s ease-out; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); background-size: 250px 250px; mix-blend-mode: overlay; animation: shNoiseShift 0.35s steps(1) infinite paused; } .sh-rust-noise.sh-noise-active { animation-play-state: running; } /* ── Horizontal scanlines ── */ @keyframes shScanlineScroll { from { background-position: 0 0; } to { background-position: 0 6px; } } .sh-rust-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 12; opacity: 0; transition: opacity 1.8s ease-out; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 4px, rgba(0,0,0,0.10) 4px, rgba(0,0,0,0.10) 6px ); animation: shScanlineScroll 0.18s linear infinite; } /* ── Dissolved text — instant snap, layout space preserved ── */ [data-sh-dissolve] { transition: none !important; } [data-sh-dissolve].sh-dissolved { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; pointer-events: none; } [data-sh-dissolve].sh-dissolved * { visibility: hidden !important; } /* ── Full-page Otherworld color drain applied to content containers ── */ /* Otherworld filter driven by --sh-ow CSS custom property on . JS sets one property; all tagged elements update in a single style pass. */ .sh-otherworld-content { filter: sepia(calc(var(--sh-ow) * 0.38)) hue-rotate(-9deg) saturate(calc(1 - var(--sh-ow) * 0.45)) brightness(calc(1 - var(--sh-ow) * 0.14)); transition: filter 2.5s ease-out; will-change: filter; } /* ── Blood-red text selection once Otherworld starts ── */ body.sh-otherworld-active ::selection { background: rgba(160, 8, 8, 0.75); color: #f0ddd0; } /* ── Right sidebar shatter ── */ @keyframes shSidebarShatter { 0% { opacity: 1; transform: translate( 0px, 0px) skewX( 0deg); clip-path: inset(0 0 0 0); } 10% { opacity: 0.85; transform: translate(-7px, 2px) skewX(-5deg); clip-path: inset( 8% 0 18% 0); } 22% { opacity: 1; transform: translate( 5px, 0px) skewX( 0deg); clip-path: inset( 0 0 0 0); } 35% { opacity: 0.45; transform: translate(-4px, 3px) skewX( 7deg); clip-path: inset(28% 0 32% 0); } 48% { opacity: 0.8; transform: translate( 0px, 0px) skewX( 0deg); clip-path: inset( 0 0 0 0); } 60% { opacity: 0.18; transform: translate( 9px,-2px) skewX(-8deg); clip-path: inset(18% 0 52% 0); } 74% { opacity: 0.55; transform: translate(-5px, 1px) skewX( 3deg); clip-path: inset( 0 0 0 0); } 87% { opacity: 0.08; transform: translate( 4px, 2px) skewX(-4deg); clip-path: inset(62% 0 8% 0); } 100% { opacity: 0; transform: translate( 0px, 0px) skewX( 0deg); clip-path: inset( 0 0 100% 0); } } .content-sidebar.sh-sidebar-shatter { animation: shSidebarShatter 1.1s steps(4) forwards; pointer-events: none; } .content-sidebar.sh-sidebar-gone { visibility: hidden; pointer-events: none; } /* ── ToC sidebar item glitch before dissolve ── */ @keyframes shTocGlitch { 0% { opacity: 1; transform: translate(0,0) skewX(0deg); clip-path: inset(0 0 0 0); } 12% { opacity: 0.8; transform: translate(-4px,0) skewX(-3deg); clip-path: inset(10% 0 30% 0); } 24% { opacity: 1; transform: translate(3px,0) skewX(0deg); clip-path: inset(0 0 0 0); } 36% { opacity: 0.6; transform: translate(-2px,1px) skewX(4deg); clip-path: inset(40% 0 15% 0); } 50% { opacity: 0.9; transform: translate(0,0) skewX(0deg); clip-path: inset(0 0 0 0); } 62% { opacity: 0.3; transform: translate(5px,-1px) skewX(-5deg); clip-path: inset(20% 0 50% 0); } 75% { opacity: 0.7; transform: translate(-3px,0) skewX(2deg); clip-path: inset(0 0 0 0); } 88% { opacity: 0.1; transform: translate(2px,1px) skewX(-2deg); clip-path: inset(60% 0 5% 0); } 100% { opacity: 0; transform: translate(0,0) skewX(0deg); clip-path: inset(0 0 100% 0); } } .sh-toc__item.sh-toc-glitch { animation: shTocGlitch 0.9s steps(3) forwards; pointer-events: none; } .sh-toc__item.sh-toc-gone { visibility: hidden; pointer-events: none; height: 0; overflow: hidden; margin: 0; padding: 0; } /* Smooth opacity fadeout before JS hides the item */ .sh-toc__item[style*="opacity: 0"] { transition: opacity 0.15s ease-out; } /* ── Free moth wing-flap (cursor follower mode) ── */ @keyframes shMothFlap { 0% { transform: scaleX(1.0); } 30% { transform: scaleX(0.65); } 60% { transform: scaleX(0.65); } 100% { transform: scaleX(1.0); } } .sh-moth-free-flap { animation: shMothFlap 0.26s ease-in-out infinite; transform-origin: center center; filter: drop-shadow(0 0 6px rgba(92,138,110,0.5)); } /* ── Moth fly-away animation ── */ @keyframes shMothFlyAway { /* Take-off: rise slightly and spread */ 0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; } 8% { transform: translateY(-10px) scale(1.12) rotate(-4deg); opacity: 1; } /* Flutter sequence — scaleX simulates wing beats */ 18% { transform: translateY(-30px) scale(1.08) rotate(3deg) scaleX(0.85); opacity: 0.95; } 26% { transform: translateY(-55px) scale(1.05) rotate(-5deg) scaleX(1.1); opacity: 0.9; } 36% { transform: translateY(-90px) scale(1.0) rotate(2deg) scaleX(0.8); opacity: 0.85; } 46% { transform: translateY(-135px) scale(0.92) rotate(-3deg) scaleX(1.12); opacity: 0.75; } 58% { transform: translateY(-195px) scale(0.82) rotate(4deg) scaleX(0.78); opacity: 0.55; } 72% { transform: translateY(-270px) scale(0.68) rotate(-2deg) scaleX(1.05); opacity: 0.35; } 88% { transform: translateY(-370px) scale(0.5) rotate(1deg) scaleX(0.9); opacity: 0.12; } 100% { transform: translateY(-500px) scale(0.3) rotate(0deg); opacity: 0; } } .sh-moth-flyaway { animation: shMothFlyAway 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; transform-origin: center bottom; } /* ── TOC panel slides out to the left after all items dissolve ── */ .sh-toc { transition: opacity 0.8s ease, transform 0.8s ease; } .sh-toc--exit { opacity: 0 !important; transform: translateY(-50%) translateX(-260px) !important; pointer-events: none; } /* ── Page flicker — applied to article wrapper only, NOT full page ── */ @keyframes shRustFlicker { 0% { opacity: 1; filter: blur(0px); } 25% { opacity: 0.22; filter: blur(0.6px); } 50% { opacity: 0.88; filter: blur(0px); } 75% { opacity: 0.15; filter: blur(0.4px); } 100% { opacity: 1; filter: blur(0px); } } /* Target the article wrapper, not body */ [data-sh-effect="rust-descent"].sh-flicker, .article-content.sh-flicker { animation: shRustFlicker 0.15s steps(2) forwards; } /* ── Respect reduced-motion ── */ @media (prefers-reduced-motion: reduce) { .sh-rust-overlay, .sh-rust-vignette, .sh-rust-noise, .sh-rust-blood, .sh-rust-scanlines { transition: none !important; } .sh-rust-noise { animation: none !important; } .sh-rust-scanlines { animation: none !important; } [data-sh-effect="rust-descent"].sh-flicker, .article-content.sh-flicker { animation: none !important; } .sh-toc__item.sh-toc-glitch { animation: none !important; } .content-sidebar.sh-sidebar-shatter { animation: none !important; } }