@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --gold: #c9a84c; --gold-light: #e8d48b; --gold-dim: #8b7534; --gold-glow: rgba(201, 168, 76, 0.15); --gold-glow-strong: rgba(201, 168, 76, 0.35); --black: #0c0c0c; --black-soft: #111111; --black-card: #161616; --black-border: #1f1f1f; --gray: #707070; --gray-light: #999999; --white: #f5f1eb; --white-dim: #bfbbb5; --danger: #d85555; --green: #4caf50; --mono: 'JetBrains Mono', monospace; --sans: 'Inter', -apple-system, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--gold-dim) var(--black); } body { background: var(--black); color: var(--white); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%23C9A84C' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23C9A84C'/%3E%3C/svg%3E") 16 16, auto; } /* The gold-dot cursor inherits from ; a `*, *::before, *::after` !important universal rule used to force it (duplicated the one removed from index.html) — it sat on the hot style-recalc path and clobbered semantic `cursor: pointer` on buttons/links. Removed; inheritance keeps the custom cursor everywhere. */ /* ===== LAYOUT ===== */ #app-layout { display: flex; flex-direction: column; min-height: 100vh; /* Clear the fixed nav, whose own height grows by the top safe-area inset. */ padding-top: calc(46px + env(safe-area-inset-top, 0px)); } /* ===== TOP NAV BAR (dropdown) ===== */ #sidebar { position: fixed; top: 0; left: 0; right: 0; z-index: 500; /* Push the bar below the notch/status bar on cover-fit viewports. */ padding-top: env(safe-area-inset-top, 0px); /* Solid near-opaque fill instead of a full-width backdrop-filter blur, which re-rasterized the fixed bar on every scroll frame (see index.html). */ background: rgba(12, 12, 12, 0.97); border-bottom: 1px solid var(--black-border); } /* The always-visible handle bar */ .sidebar-header { display: flex; align-items: center; /* Keep the bar's contents clear of a side notch when held in landscape. */ padding: 0 calc(24px + env(safe-area-inset-right, 0px)) 0 calc(24px + env(safe-area-inset-left, 0px)); height: 46px; position: relative; } .sidebar-title { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.25s; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; } .sidebar-title:hover { color: var(--gold-light); } /* "Apply for Clearance" pinned to the left corner of the nav bar. Hidden by default; revealed only once the hero has scrolled out of view (JS toggles .nav-apply-visible via an IntersectionObserver). */ .nav-apply-btn { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid var(--gold-dim); padding: 7px 14px; border-radius: 3px; cursor: pointer; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease), background 0.25s, border-color 0.25s; } .nav-apply-btn.nav-apply-visible { opacity: 1; pointer-events: auto; } /* The Archive menu unfolds leftward over the same corner — while it is open, the apply button yields (fades out) so the two never overlap. */ #sidebar:has(.nav-menu-left:hover) .nav-apply-btn.nav-apply-visible, #sidebar:has(.nav-menu-left:focus-within) .nav-apply-btn.nav-apply-visible { opacity: 0; pointer-events: none; } .nav-apply-btn:hover { background: var(--gold-glow); border-color: var(--gold); color: var(--gold-light); } body.theme-red .nav-apply-btn { color: var(--danger); border-color: rgba(216, 85, 85, 0.4); } body.theme-red .nav-apply-btn:hover { background: rgba(216, 85, 85, 0.1); border-color: var(--danger); } .nav-half { display: flex; flex: 1; gap: 3px; align-items: center; } #navLeft { justify-content: flex-end; padding-right: 100px; } #navRight { justify-content: flex-start; padding-left: 100px; } #sidebarNav { display: flex; align-items: center; flex: 1; } .nav-item { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; cursor: pointer; transition: all 0.2s; font-size: 12px; color: var(--white-dim); text-decoration: none; border-radius: 3px; white-space: nowrap; position: relative; border: 1px solid transparent; } .nav-item:hover { background: var(--gold-glow); color: var(--gold); border-color: var(--gold-dim); } .nav-item.active { background: var(--gold-glow); color: var(--gold); border-color: var(--gold); font-weight: 500; } .nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .nav-dot.green { background: var(--green); } .nav-dot.red { background: var(--danger); } .nav-dot.yellow { background: var(--gold); } /* ===== HOVER DROPDOWN MENUS (The Archive / About the Archive) ===== */ /* Overlap guard: halves clip at their edges and every layer can shrink, so expanded menus ellipsize instead of running into the centered title (the 100px half padding keeps its zone clear) or off-screen. */ .nav-half { min-width: 0; overflow: hidden; } .nav-menu { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; } .nav-menu-items .nav-item { min-width: 0; flex-shrink: 1; } .nav-menu-trigger { flex-shrink: 0; } .nav-menu-trigger { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; } /* Triggers keep the gold (or red-theme) colour change on hover/active but never show the nav-item box — ID selector outranks the theme overrides */ #sidebar .nav-menu-trigger, #sidebar .nav-menu-trigger:hover, #sidebar .nav-menu-trigger.active { background: none; border-color: transparent; } .nav-menu-items { display: flex; align-items: center; gap: 3px; max-width: 0; min-width: 0; flex-shrink: 1; opacity: 0; overflow: hidden; white-space: nowrap; pointer-events: none; transition: max-width 0.4s ease, opacity 0.3s ease; } .nav-menu:hover .nav-menu-items, .nav-menu:focus-within .nav-menu-items { max-width: 900px; opacity: 1; pointer-events: auto; } /* The Archive: items sit before the trigger and unfold leftwards. About the Archive: items sit after the trigger and unfold rightwards. */ .nav-menu-left .nav-menu-items { justify-content: flex-end; } /* ===== MAIN CONTENT AREA ===== */ #main-content { flex: 1; min-height: 100vh; position: relative; overflow-y: auto; } #main-content.snap-scroll .breadcrumbs { display: none; } /* ===== BREADCRUMBS ===== */ .breadcrumbs { padding: 16px 40px; font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--black-border); background: rgba(12, 12, 12, 0.5); } .breadcrumb-item { cursor: pointer; transition: color 0.2s; } .breadcrumb-item:hover { color: var(--gold); } .breadcrumb-sep { color: var(--black-border); } .breadcrumb-current { color: var(--gold); font-weight: 500; } /* ===== PAGE HEADER ===== */ .page-header { padding: 60px 40px 40px; position: relative; overflow: hidden; } .page-header::after { content: ''; position: absolute; bottom: 0; left: 40px; right: 40px; height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent); } .page-header-overline { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 600; } .page-header-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--white); margin-bottom: 16px; } .page-header-meta { font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 0.8px; display: flex; gap: 16px; align-items: center; } .clearance-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .clearance-dot.public { background: var(--green); } .clearance-dot.classified { background: var(--danger); } .clearance-dot.restricted { background: var(--gold); } /* ===== PAGE CONTENT WRAPPER ===== */ .page-content { padding: 40px; max-width: 1200px; } @keyframes pulseGlow { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); } } /* ===== DIRECTORY GRID ===== */ .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; } .dir-card { border: 1px solid var(--black-border); background: var(--black-card); padding: 28px; /* Explicit properties (not `all`) so the engine doesn't diff every animatable property; transform is GPU-cheap for the hover lift. */ transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; } .dir-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 100%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .dir-card:hover::before { opacity: 1; } .dir-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 10px 24px rgba(201, 168, 76, 0.15); } .dir-card-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; color: var(--white); position: relative; z-index: 1; } .dir-card-desc { font-size: 0.9rem; color: var(--gray-light); line-height: 1.7; position: relative; z-index: 1; margin-bottom: 16px; } /* ===== POST CARDS (within directory) ===== */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 24px; } .post-card { border: 1px solid var(--black-border); background: var(--black-card); padding: 28px; transition: all 0.4s var(--ease); cursor: pointer; position: relative; overflow: hidden; } .post-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 100%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .post-card:hover::before { opacity: 1; } .post-card:hover { border-color: var(--gold); transform: translateY(-3px); } .post-card-number { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--gold); margin-bottom: 12px; line-height: 1; } .post-card-title { font-size: 1.2rem; font-weight: 600; color: var(--white); margin-bottom: 8px; line-height: 1.3; position: relative; z-index: 1; } .post-card-excerpt { font-size: 0.9rem; color: var(--gray-light); line-height: 1.7; position: relative; z-index: 1; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-meta { font-family: var(--mono); font-size: 9px; color: var(--gray); display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--black-border); position: relative; z-index: 1; letter-spacing: 0.5px; } .post-card.add-post { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; color: var(--gray); min-height: 200px; text-align: center; } .post-card.add-post:hover { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-glow); } /* ===== NARRATIVES READING LIST ===== */ .nar-wrap { max-width: 900px; margin: 0 auto; } .page-header-center { text-align: center; } .page-header-center .page-header-meta { justify-content: center; } .page-header-center::after { display: none; } .nar-section { margin-bottom: 56px; } .nar-section-label { font-size: 20px; font-weight: 600; letter-spacing: 0.5px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-dim); display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; transition: color 0.2s; } .nar-section-label:hover { color: var(--gold-light); } /* Collapse/expand caret + body toggle */ .nar-section-caret { font-size: 12px; color: var(--gold); flex-shrink: 0; transition: transform 0.25s var(--ease); } .nar-section.collapsed .nar-section-caret { transform: rotate(-90deg); } .nar-section.collapsed .nar-section-label { margin-bottom: 0; } .nar-section.collapsed .nar-section-body { display: none; } body.theme-red .nar-section-caret { color: var(--danger); } body.theme-red .nar-section-label:hover { color: #e08888; } .nar-section-count { font-family: var(--mono); font-size: 11px; color: var(--gray); font-weight: 400; margin-left: auto; letter-spacing: 1px; } .nar-row { display: grid; grid-template-columns: 44px 110px 1fr auto; gap: 20px; align-items: start; padding: 20px 12px; margin: 0 -12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; transition: background 0.2s, box-shadow 0.2s; border-radius: 6px; } .nar-row:hover { background: rgba(201, 168, 76, 0.05); box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.08); } .nar-row.classified:hover { background: rgba(216, 85, 85, 0.05); box-shadow: inset 0 0 0 1px rgba(216, 85, 85, 0.08); } .nar-num { font-family: var(--mono); font-size: 12px; color: var(--gray); text-align: right; padding-top: 6px; } .nar-cover { width: 110px; height: 72px; border-radius: 4px; overflow: hidden; background: var(--black-border); flex-shrink: 0; position: relative; } .nar-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .nar-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.3); transition: background 0.2s; } .nar-row:hover .nar-play { background: rgba(0, 0, 0, 0.15); color: #fff; } .nar-cover.fallback { visibility: hidden; } .nar-info { min-width: 0; padding-top: 2px; } .nar-title { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .nar-meta { font-size: 11px; color: var(--gray-light); margin-bottom: 8px; } .nar-blurb { font-size: 13px; color: var(--white-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nar-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; padding: 3px 10px; border-radius: 3px; white-space: nowrap; align-self: start; margin-top: 6px; } /* ===== CATEGORY FILTER BAR ===== */ .category-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--black-border); } .cat-btn { padding: 6px 14px; background: transparent; border: 1px solid var(--black-border); color: var(--gray-light); font-family: var(--mono); font-size: 10px; cursor: pointer; border-radius: 2px; transition: all 0.2s; letter-spacing: 0.5px; } .cat-btn:hover { border-color: var(--gold-dim); color: var(--gold); } .cat-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); } /* ===== CLEARANCE BADGES (shared colors for .access-badge, .nar-badge, etc.) ===== */ .access-badge { display: inline-block; padding: 3px 8px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; border-radius: 2px; } .access-badge.public, .nar-badge.public { border: 1px solid rgba(76, 175, 80, 0.35); background: rgba(76, 175, 80, 0.09); color: var(--green); } .access-badge.classified, .nar-badge.classified { border: 1px solid rgba(216, 85, 85, 0.35); background: rgba(216, 85, 85, 0.09); color: var(--danger); } .access-badge.restricted, .nar-badge.restricted { border: 1px solid var(--gold-dim); background: var(--gold-glow); color: var(--gold); } /* ===== SERIES GROUPING (Collected Stories) ===== */ .nar-series-group { margin-bottom: 56px; border: 1px solid var(--gold-dim); border-radius: 8px; padding: 24px 20px 12px; background: rgba(201, 168, 76, 0.02); } .nar-series-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-dim); } .nar-series-label { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; color: var(--gold); } .nar-series-count { font-family: var(--mono); font-size: 11px; color: var(--gray); letter-spacing: 1px; } .nar-novel-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gold); opacity: 0.7; } .nar-chapter-count { display: inline; font-family: var(--mono); font-size: 10px; color: var(--gold); margin-left: 8px; letter-spacing: 0.5px; } /* ===== NOVEL INDEX PAGE ===== */ .novel-index { max-width: 760px; padding: 40px; padding-bottom: 80px; margin: 0 auto; } .novel-index-header { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 40px; } .novel-index-title { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px; } .novel-series-tag { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--gold); border: 1px solid var(--gold-dim); padding: 3px 10px; border-radius: 3px; margin-top: 8px; letter-spacing: 1px; } .novel-blurb { font-size: 15px; line-height: 1.8; color: var(--white-dim); margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .novel-blurb p { margin-bottom: 16px; } .novel-chapters-section { margin-bottom: 48px; } .novel-chapters-heading { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; color: var(--white); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-dim); } .novel-chapter-row { display: grid; grid-template-columns: 40px 1fr auto 24px; gap: 16px; align-items: center; padding: 16px 12px; margin: 0 -12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; transition: background 0.2s, box-shadow 0.2s; border-radius: 4px; } .novel-chapter-row:hover { background: rgba(201, 168, 76, 0.05); box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.08); } .novel-chapter-row.classified:hover { background: rgba(216, 85, 85, 0.05); box-shadow: inset 0 0 0 1px rgba(216, 85, 85, 0.08); } .novel-chapter-num { font-family: var(--mono); font-size: 13px; color: var(--gray); text-align: right; } .novel-chapter-title { font-size: 15px; font-weight: 500; } .novel-chapter-arrow { color: var(--gray); font-size: 14px; transition: color 0.2s; } .novel-chapter-row:hover .novel-chapter-arrow { color: var(--gold); } /* ===== CHAPTER PAGE NAVIGATION ===== */ .chapter-page .chapter-novel-ref { font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: 1px; cursor: pointer; margin-bottom: 8px; opacity: 0.8; transition: opacity 0.2s; } .chapter-page .chapter-novel-ref:hover { opacity: 1; text-decoration: underline; } /* ===== Classified narratives: red theme for chapter & novel views ===== */ /* Chapter view: novel-title reference goes red when the chapter is classified */ body.theme-red .chapter-page .chapter-novel-ref { color: var(--danger); } /* Novel index (fully classified novel): red accents throughout */ body.theme-red .novel-series-tag { color: var(--danger); border-color: rgba(216, 85, 85, 0.4); } body.theme-red .novel-chapters-heading { border-bottom-color: rgba(216, 85, 85, 0.4); } body.theme-red .novel-chapter-row:hover .novel-chapter-arrow { color: var(--danger); } .chapter-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; margin: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .chapter-nav-top { margin-top: 0; border-top: none; } .chapter-nav-bottom { margin-bottom: 0; border-bottom: none; } .chapter-nav-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--black-border); color: var(--white-dim); font-family: var(--mono); font-size: 11px; cursor: pointer; border-radius: 3px; transition: all 0.2s; letter-spacing: 0.5px; } .chapter-nav-btn:hover:not(.disabled) { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-glow); } .chapter-nav-btn.disabled { opacity: 0.3; cursor: default; } .chapter-nav-index { font-size: 10px; padding: 6px 12px; } /* ===== POST PAGE ===== */ .post-page { max-width: 760px; padding: 40px; padding-bottom: 80px; margin: 0 auto; } /* ===== CONTENT TOC (sticky sidebar index) ===== */ .content-toc { position: fixed; right: 32px; top: 50%; transform: translateY(-50%); max-height: 60vh; overflow-y: auto; width: 180px; z-index: 700; font-family: var(--mono); font-size: 11px; scrollbar-width: none; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .content-toc.visible { opacity: 1; pointer-events: auto; } .content-toc::-webkit-scrollbar { display: none; } .content-toc-item { display: block; padding: 4px 0 4px 12px; color: var(--gray); text-decoration: none; border-left: 1px solid var(--black-border); line-height: 1.4; cursor: pointer; transition: color 0.2s, border-color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .content-toc-item:hover { color: var(--white-dim); } .content-toc-item.active { color: var(--gold); border-left-color: var(--gold); } .content-toc-item.depth-3 { padding-left: 24px; font-size: 10px; } .provenance-reading-mode .content-toc { opacity: 0.4 !important; } .provenance-reading-mode .content-toc:hover { opacity: 1 !important; } .provenance-reading-mode.provenance-bottom .content-toc { opacity: 0 !important; pointer-events: none !important; } @media (max-width: 1200px) { .content-toc { display: none; } } .post-page-header { margin-bottom: 40px; text-align: center; } .post-page-number { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; } .post-page-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.15; color: var(--white); margin-bottom: 16px; } .post-page-meta { font-family: var(--mono); font-size: 10px; color: var(--gray); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; letter-spacing: 0.5px; padding-bottom: 24px; border-bottom: 1px solid var(--black-border); } .post-page-body { margin-top: 32px; font-size: 1.05rem; color: var(--white-dim); line-height: 1.9; } .post-page-body h2 { font-size: 1.6rem; color: var(--white); margin: 40px 0 16px; font-weight: 600; } .post-page-body h3 { font-size: 1.3rem; color: var(--white); margin: 32px 0 12px; font-weight: 600; } .post-page-body p { margin-bottom: 20px; text-align: left; } .post-page-body blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; margin: 24px 0; color: var(--gold-light); font-style: italic; background: var(--gold-glow); } .post-page-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-dim); padding: 8px 20px; transition: all 0.3s var(--ease); cursor: pointer; margin-top: 24px; } .post-page-back:hover { background: var(--gold-glow); border-color: var(--gold); } .post-page-back::before { content: '\25C0'; transition: transform 0.3s var(--ease); } .post-page-back:hover::before { transform: translateX(-4px); } /* "Star Chart" return button — sends the reader from an archive entry back to the star chart, focused on the empire / system / body it documents. Populated by populateGalaxyReturn(); the slot stays empty (and collapses) otherwise. */ .galaxy-return-slot { display: flex; justify-content: center; } .galaxy-return-slot:not(:empty) { margin-top: 20px; } .galaxy-return-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-light); background: var(--gold-glow); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 8px 18px; cursor: pointer; transition: all 0.3s var(--ease); } .galaxy-return-btn:hover { border-color: var(--gold); background: rgba(201, 168, 76, 0.14); } .post-page-red .galaxy-return-btn { color: var(--danger); border-color: rgba(216, 85, 85, 0.35); background: rgba(216, 85, 85, 0.08); } .post-page-red .galaxy-return-btn:hover { border-color: var(--danger); background: rgba(216, 85, 85, 0.14); } /* Red theme for post pages (classified/personnel) */ .post-page-red .post-page-number { color: rgba(216, 85, 85, 0.4); } .post-page-red .post-page-back { color: var(--danger); border-color: rgba(216, 85, 85, 0.3); } .post-page-red .post-page-back:hover { background: rgba(216, 85, 85, 0.1); border-color: var(--danger); } .post-page-red .post-page-body blockquote { border-left-color: var(--danger); color: #e8a0a0; background: rgba(216, 85, 85, 0.08); } .post-page-red .access-badge.classified { border-color: rgba(216, 85, 85, 0.4); background: rgba(216, 85, 85, 0.15); color: var(--danger); } /* ===== VIDEO PLAYER ===== */ .video-player-wrap { margin-top: 32px; border-radius: 6px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .video-player { display: block; width: 100%; max-height: 70vh; background: #000; } .video-synopsis { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .video-synopsis p { color: var(--white-dim); font-size: 14px; line-height: 1.8; font-style: italic; text-align: left; } /* ===== SECTION CONTROLS ===== */ .section-wrapper { position: relative; } .section-controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; z-index: 10; } .sc { width: 26px; height: 26px; border-radius: 3px; border: 1px solid var(--black-border); background: var(--black-card); color: var(--gray); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .sc:hover { border-color: var(--gold); color: var(--gold); } /* ===== MARQUEE ===== */ .marquee-strip { width: 100%; padding: 24px 0; background: var(--black-soft); border-top: 1px solid var(--black-border); border-bottom: 1px solid var(--black-border); overflow: hidden; } .marquee-track { display: flex; gap: 48px; animation: scrollMarquee 20s linear infinite; white-space: nowrap; } @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-item { font-family: var(--mono); font-size: clamp(12px, 1.5vw, 16px); color: var(--gold); font-weight: 600; letter-spacing: 2px; flex-shrink: 0; } /* ===== BUTTONS ===== */ .btn-primary { padding: 12px 28px; background: var(--gold); color: var(--black); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.35s var(--ease); text-decoration: none; display: inline-block; } .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201, 168, 76, 0.3); } /* ===== MODAL ===== */ .modal-overlay { position: fixed; inset: 0; /* Solid darker scrim instead of a full-viewport backdrop-filter blur, which was expensive to establish and recomputed while the hero glow animated. */ background: rgba(0, 0, 0, 0.85); z-index: 2000; display: none; align-items: center; justify-content: center; /* Scroll a modal that is taller than a short/landscape viewport instead of trapping its buttons off-screen; the bottom inset clears the home indicator. */ overflow-y: auto; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } .modal-overlay.show { display: flex; } .modal { background: var(--black-card); border: 1px solid var(--black-border); padding: 28px; /* min-width was 360px, which overflowed 320px phones (iPhone SE) and touched the edges at 360px. Auto margins center it and keep the top scrollable. */ min-width: 0; max-width: 520px; width: 100%; margin: auto; } .modal-title { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 600; } .modal-input { width: 100%; background: var(--black); border: 1px solid var(--black-border); color: var(--white); font-family: var(--sans); font-size: 14px; padding: 10px 14px; outline: none; margin-bottom: 12px; } .modal-input:focus { border-color: var(--gold-dim); } .modal-label { font-family: var(--mono); font-size: 9px; color: var(--gray-light); margin-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase; display: block; } .modal-select { width: 100%; background: var(--black); border: 1px solid var(--black-border); color: var(--white); font-family: var(--mono); font-size: 11px; padding: 8px 10px; outline: none; margin-bottom: 12px; cursor: pointer; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .modal-textarea { width: 100%; background: var(--black); border: 1px solid var(--black-border); color: var(--white); font-family: var(--sans); font-size: 13px; padding: 10px 14px; outline: none; margin-bottom: 12px; min-height: 80px; resize: vertical; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(80px); background: var(--black-card); border: 1px solid var(--gold-dim); color: var(--gold); font-family: var(--mono); font-size: 11px; padding: 10px 20px; z-index: 3000; opacity: 0; transition: all 0.4s var(--ease); pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.toast-center { top: 50%; bottom: auto; transform: translate(-50%, -50%) scale(0.96); max-width: min(90vw, 420px); text-align: center; font-size: 13px; line-height: 1.6; padding: 18px 26px; } .toast.toast-center.show { transform: translate(-50%, -50%) scale(1); } /* ===== ANIMATIONS ===== */ [data-anim] { opacity: 0; transition-duration: 0.8s; transition-timing-function: var(--ease); } [data-anim].visible { opacity: 1; } [data-anim='fade-up'] { transform: translateY(40px); transition-property: opacity, transform; } [data-anim='fade-up'].visible { transform: translateY(0); } [data-anim='fade-down'] { transform: translateY(-40px); transition-property: opacity, transform; } [data-anim='fade-down'].visible { transform: translateY(0); } [data-anim='fade-left'] { transform: translateX(-50px); transition-property: opacity, transform; } [data-anim='fade-left'].visible { transform: translateX(0); } [data-anim='fade-right'] { transform: translateX(50px); transition-property: opacity, transform; } [data-anim='fade-right'].visible { transform: translateX(0); } [data-anim='zoom-in'] { transform: scale(0.8); transition-property: opacity, transform; } [data-anim='zoom-in'].visible { transform: scale(1); } [data-anim='blur-in'] { filter: blur(16px); transition-property: opacity, filter; } [data-anim='blur-in'].visible { filter: blur(0); } [data-anim='clip-reveal'] { clip-path: inset(0 100% 0 0); transition-property: opacity, clip-path; } [data-anim='clip-reveal'].visible { clip-path: inset(0 0 0 0); } [data-anim='char-spread'] { letter-spacing: 0; transition-property: opacity, letter-spacing; } [data-anim='char-spread'].visible { letter-spacing: 0.15em; } [data-anim='none'] { opacity: 1; } /* ===== STATIC PAGE CONTENT ===== */ .static-content { max-width: 760px; } .static-content h2 { font-size: 1.8rem; font-weight: 700; color: var(--white); margin: 48px 0 16px; } .static-content h3 { font-size: 1.3rem; font-weight: 600; color: var(--gold); margin: 32px 0 12px; } .static-content p { font-size: 1.05rem; color: var(--white-dim); line-height: 1.9; margin-bottom: 20px; } .static-content blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; margin: 24px 0; color: var(--gold-light); background: var(--gold-glow); font-style: italic; } /* ===== PROVENANCE PAGE ===== */ .provenance-grid { display: flex; flex-direction: column; gap: 0; max-width: 900px; padding: 0 40px 60px; margin: 0 auto; } .provenance-card { padding: 56px 0; border-bottom: 1px solid var(--black-border); position: relative; display: flex; align-items: flex-start; gap: 32px; } .provenance-card:first-child { padding-top: 32px; } .provenance-card:last-child { border-bottom: none; } .provenance-card-body { flex: 1; min-width: 0; } .provenance-card h2 { font-size: 1.6rem; font-weight: 700; color: var(--white); margin-bottom: 16px; line-height: 1.2; } .provenance-card p { font-size: 1.05rem; color: var(--white-dim); line-height: 1.9; margin-bottom: 20px; text-align: left; } .provenance-read-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-dim); padding: 8px 20px; transition: all 0.3s var(--ease); cursor: pointer; } .provenance-read-more:hover { background: var(--gold-glow); border-color: var(--gold); } .provenance-read-more::after { content: '\25B6'; transition: transform 0.3s var(--ease); } .provenance-read-more:hover::after { transform: translateX(4px); } .provenance-page-header { text-align: center; } .provenance-page-header::after { left: 0 !important; right: 0 !important; } .provenance-page-header .page-header-meta { justify-content: center; } /* Provenance full-section page */ .provenance-full { max-width: 760px; padding: 40px; padding-bottom: 80px; margin: 0 auto; } .provenance-full h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.15; } .provenance-full p { font-size: 1.05rem; color: var(--white-dim); line-height: 1.9; margin-bottom: 20px; text-align: left; } .provenance-full h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; color: var(--white); margin: 48px 0 20px; line-height: 1.2; } .provenance-full h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 600; color: var(--gold-light); margin: 36px 0 16px; line-height: 1.3; } .provenance-full blockquote { border-left: 3px solid var(--gold-dim); padding: 12px 20px; margin: 24px 0; background: rgba(201, 168, 76, 0.06); color: var(--white-dim); font-style: italic; line-height: 1.8; } .provenance-full strong { color: var(--white); font-weight: 600; } .provenance-full em { font-style: italic; } .provenance-full .provenance-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-dim); padding: 8px 20px; transition: all 0.3s var(--ease); cursor: pointer; margin-top: 24px; } .provenance-full .provenance-back:hover { background: var(--gold-glow); border-color: var(--gold); } .provenance-full .provenance-back::before { content: '\25C0'; transition: transform 0.3s var(--ease); } .provenance-full .provenance-back:hover::before { transform: translateX(-4px); } .provenance-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 16px; } .provenance-nav-row .provenance-back { margin-top: 0; } .provenance-next { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-dim); padding: 8px 20px; transition: all 0.3s var(--ease); cursor: pointer; margin-left: auto; } .provenance-next:hover { background: var(--gold-glow); border-color: var(--gold); } .provenance-next::after { content: '\25B6'; transition: transform 0.3s var(--ease); } .provenance-next:hover::after { transform: translateX(4px); } /* Long-list rendering: off-screen rows skip layout & paint entirely, so scrolling stays smooth however many entries the archive accumulates */ .lib-entry, .pn-entry, .nar-row, .entrypoint-card { content-visibility: auto; contain-intrinsic-size: auto 120px; } /* ===== PUBLIC RECORDS: LIBRARY CATALOG ===== */ .lib-layout { display: grid; grid-template-columns: 344px 1fr; min-height: calc(100vh - 36px); } .lib-sidebar { border-right: 1px solid var(--black-border); padding: 32px 0 48px; background: rgba(12, 12, 12, 0.6); overflow-y: auto; position: sticky; top: 36px; height: calc(100vh - 36px); } /* ============================================================ INDEX SEARCH (design direction: a collapsible control) collapsed -> the magnifying glass with its two vertical lines expanded -> [glass] [input] | [category v] [-> run] The box clips a fixed-width inner row and animates its own width open, so the right edge slides right as the box reveals itself. ============================================================ */ .lib-search-wrap { --lib-search-w: 312px; display: flex; align-items: center; gap: 8px; padding: 0 16px 16px; border-bottom: 1px solid var(--black-border); margin-bottom: 8px; } .lib-search { flex: 0 0 auto; width: 40px; /* collapsed: a 40x40 square holding the centered glass */ height: 40px; overflow: hidden; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--black-border); border-radius: 4px; transition: width 0.42s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .lib-search.open { width: var(--lib-search-w); } /* Once fully open, stop clipping so the category menu can overflow */ .lib-search.expanded { overflow: visible; } .lib-search.open:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); } /* Fixed-width row; the box above clips it while collapsed */ .lib-search-inner { display: flex; align-items: center; width: var(--lib-search-w); height: 100%; } .lib-search-glass { flex: 0 0 auto; width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; } .lib-search-icon { width: 14px; height: 14px; color: var(--gray); transition: color 0.2s var(--ease); } .lib-search.open .lib-search-icon, .lib-search-glass:hover .lib-search-icon { color: var(--gold); } .lib-search-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px; border: none; background: none; outline: none; color: var(--white); font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; } .lib-search-input::placeholder { color: var(--gray); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; } /* Dashed divider between the input and the category selector */ .lib-search-div { flex: 0 0 auto; width: 0; height: 18px; border-left: 1px dashed var(--black-border); margin: 0 6px; } /* Category selector: narrows the search to a category/subcategory */ .lib-search-cat { position: relative; flex: 0 0 auto; } .lib-search-cat-btn { display: flex; align-items: center; gap: 5px; max-width: 78px; height: 24px; padding: 0 4px; border: none; background: none; cursor: pointer; color: var(--white-dim); font-family: var(--sans); font-size: 11px; } .lib-search-cat-btn:hover { color: var(--gold); } .lib-search-cat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-search-cat-caret { flex: 0 0 auto; font-size: 13px; line-height: 1; color: var(--gray); transition: transform 0.2s var(--ease); } .lib-search-cat.open .lib-search-cat-caret { transform: rotate(180deg); } .lib-search-cat-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 152px; max-height: 260px; overflow-y: auto; padding: 4px; background: var(--black-card); border: 1px solid var(--black-border); border-radius: 4px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); display: none; z-index: 60; } .lib-search-cat.open .lib-search-cat-menu { display: block; } .lib-search-cat-opt { display: block; width: 100%; padding: 7px 10px; border: none; border-radius: 3px; background: none; text-align: left; cursor: pointer; color: var(--white-dim); font-family: var(--sans); font-size: 12px; transition: background 0.12s, color 0.12s; } .lib-search-cat-opt.sub { padding-left: 22px; font-size: 11px; color: var(--gray-light); } .lib-search-cat-opt:hover { background: var(--gold-glow); color: var(--gold); } .lib-search-cat-opt.active { color: var(--gold); font-weight: 600; } /* Run button: a right-pointing triangle (the "go" action) */ .lib-search-go { flex: 0 0 auto; width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; border: none; border-left: 1px solid var(--black-border); background: none; cursor: pointer; color: var(--gray); transition: color 0.15s, background 0.15s; } .lib-search-go:hover { color: var(--gold); background: var(--gold-glow); } .lib-search-go svg { width: 13px; height: 13px; fill: currentColor; } @media (prefers-reduced-motion: reduce) { .lib-search { transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } } /* Caret only appears on phones, where the index collapses */ .lib-sidebar-caret { display: none; flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--gold); } /* While searching, the results list replaces the category index */ .lib-search-results { display: none; } .lib-sidebar.searching .lib-search-results { display: block; } .lib-sidebar.searching > .lib-cat-toggle, .lib-sidebar.searching > .lib-cat { display: none; } .lib-search-summary { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); padding: 4px 24px 10px; } .lib-search-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px 24px; border: none; border-left: 2px solid transparent; background: none; text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .lib-search-item:hover, .lib-search-item:focus-visible { background: var(--gold-glow); border-left-color: var(--gold); outline: none; } .lib-search-item-meta { display: flex; align-items: center; gap: 6px; } /* Which catalog a cross-catalog result comes from */ .lib-search-item-cat { font-family: var(--mono); font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-light); border: 1px solid var(--black-border); border-radius: 2px; padding: 1px 4px; } .lib-search-item-code { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--gray); } .lib-search-item-title { font-family: var(--sans); font-size: 12.5px; color: var(--white-dim); line-height: 1.35; } .lib-search-item:hover .lib-search-item-title, .lib-search-item:focus-visible .lib-search-item-title { color: var(--gold); } .lib-search-item mark { background: var(--gold-glow-strong); color: var(--white); border-radius: 1px; } .lib-search-empty { padding: 8px 24px; font-family: var(--sans); font-size: 12px; color: var(--gray); } .lib-cat-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 24px; cursor: pointer; transition: all 0.2s; border: none; background: none; width: 100%; text-align: left; color: var(--white-dim); font-family: var(--sans); font-size: 13px; } .lib-cat-toggle:hover { background: var(--gold-glow); color: var(--gold); } .lib-cat-toggle.active { color: var(--gold); font-weight: 600; } .lib-cat-arrow { font-size: 8px; transition: transform 0.25s var(--ease); color: var(--gray); width: 12px; text-align: center; } .lib-cat-toggle.open .lib-cat-arrow { transform: rotate(90deg); } .lib-cat-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--gray); background: var(--black-card); padding: 1px 6px; border-radius: 2px; } .lib-subcats { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); padding: 0; } .lib-subcats.open { max-height: 300px; padding: 2px 0 8px; } .lib-main { padding: 40px; flex: 1; min-width: 0; } .lib-breadcrumb { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--gray); margin-bottom: 24px; text-transform: uppercase; } .lib-breadcrumb span { cursor: pointer; transition: color 0.15s; } .lib-breadcrumb span:hover { color: var(--gold); } .lib-breadcrumb .lib-bc-sep { margin: 0 8px; color: var(--black-border); cursor: default; } .lib-breadcrumb .lib-bc-current { color: var(--gold); } .lib-title { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; margin-bottom: 8px; color: var(--white); } .lib-subtitle { color: var(--gray-light); margin-bottom: 32px; font-size: 14px; line-height: 1.6; } .lib-results-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--black-border); margin-bottom: 24px; } .lib-results-count { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--gray); text-transform: uppercase; } .lib-sort { font-family: var(--mono); font-size: 10px; color: var(--gray-light); background: var(--black-card); border: 1px solid var(--black-border); padding: 5px 12px; border-radius: 2px; cursor: pointer; transition: border-color 0.2s; } .lib-sort:hover { border-color: var(--gold-dim); } .lib-sort:focus { outline: none; border-color: var(--gold); } .lib-entry { display: grid; grid-template-columns: 72px 80px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(31, 31, 31, 0.5); cursor: pointer; transition: all 0.2s; align-items: start; } .lib-entry-cover { width: 80px; height: 54px; border-radius: 3px; overflow: hidden; background: var(--black-border); flex-shrink: 0; } .lib-entry-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .lib-entry-cover.fallback { visibility: hidden; } .lib-entry:hover { background: rgba(201, 168, 76, 0.03); margin: 0 -16px; padding: 20px 16px; border-radius: 4px; } .lib-entry-idx { font-family: var(--mono); font-size: 11px; color: var(--gold-dim); padding-top: 4px; white-space: nowrap; } .lib-entry-body { min-width: 0; } .lib-entry-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--white); line-height: 1.3; } .lib-entry-excerpt { font-size: 13px; color: var(--white-dim); line-height: 1.6; } .lib-entry-cat-tag { display: inline-block; font-family: var(--mono); font-size: 9px; color: var(--gray); background: var(--black-card); padding: 1px 6px; border-radius: 2px; margin-top: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .lib-entry-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-top: 2px; flex-shrink: 0; } .lib-entry-date { font-family: var(--mono); font-size: 10px; color: var(--gray); } .lib-entry-badge { font-family: var(--mono); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; background: rgba(76, 175, 80, 0.12); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.25); } .lib-empty { text-align: center; padding: 80px 20px; color: var(--gray); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; } /* ===== RED THEME OVERRIDES (Classified Records, Dossiers) ===== */ .lib-red .lib-sidebar-caret { color: var(--danger); } .lib-red .lib-search.open:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(216, 85, 85, 0.15); } .lib-red .lib-search.open .lib-search-icon, .lib-red .lib-search-glass:hover .lib-search-icon, .lib-red .lib-search-cat-btn:hover, .lib-red .lib-search-go:hover { color: var(--danger); } .lib-red .lib-search-go:hover { background: rgba(216, 85, 85, 0.06); } .lib-red .lib-search-cat-opt:hover { background: rgba(216, 85, 85, 0.06); color: var(--danger); } .lib-red .lib-search-cat-opt.active { color: var(--danger); } .lib-red .lib-search-item:hover, .lib-red .lib-search-item:focus-visible { background: rgba(216, 85, 85, 0.06); border-left-color: var(--danger); } .lib-red .lib-search-item:hover .lib-search-item-title, .lib-red .lib-search-item:focus-visible .lib-search-item-title { color: var(--danger); } .lib-red .lib-search-item mark { background: rgba(216, 85, 85, 0.28); } .lib-red .lib-cat-toggle:hover { background: rgba(216, 85, 85, 0.06); color: var(--danger); } .lib-red .lib-cat-toggle.active { color: var(--danger); } .lib-red .lib-breadcrumb span:hover { color: var(--danger); } .lib-red .lib-breadcrumb .lib-bc-current { color: var(--danger); } .lib-red .lib-sort:hover { border-color: rgba(216, 85, 85, 0.4); } .lib-red .lib-sort:focus { border-color: var(--danger); } .lib-red .lib-entry:hover { background: rgba(216, 85, 85, 0.03); } .lib-red .lib-entry-idx { color: rgba(216, 85, 85, 0.4); } .lib-red .lib-entry-cover.fallback { visibility: hidden; } .lib-red .lib-entry-badge { background: rgba(216, 85, 85, 0.12); color: #d85555; border: 1px solid rgba(216, 85, 85, 0.25); } .lib-red .graph-legend-dot.gold { background: #d85555; } .lib-red .entrypoint-card:hover { border-color: rgba(216, 85, 85, 0.4); background: rgba(216, 85, 85, 0.04); } .lib-red .entrypoint-card-idx { color: rgba(216, 85, 85, 0.4); } .lib-red .entrypoints-label { color: var(--danger); } .lib-red .entrypoints-line { background: var(--danger); } /* ===== SITE-WIDE RED THEME (classified contexts) ===== */ body.theme-red .nav-item:hover { background: rgba(216, 85, 85, 0.1); color: var(--danger); border-color: rgba(216, 85, 85, 0.3); } body.theme-red .nav-item.active { background: rgba(216, 85, 85, 0.12); color: var(--danger); border-color: var(--danger); } /* nav dots always keep their original color regardless of theme */ body.theme-red .breadcrumb-item:hover { color: var(--danger); } body.theme-red .breadcrumb-current { color: var(--danger); } body.theme-red .page-header::after { background: linear-gradient(180deg, rgba(216, 85, 85, 0.05) 0%, transparent 100%); } body.theme-red .page-header-overline { color: var(--danger); } body.theme-red .page-header-title { color: var(--white); } body.theme-red .clearance-dot.classified { background: var(--danger); } body.theme-red .clearance-dot.restricted { background: var(--danger); } body.theme-red .access-badge.classified { border-color: rgba(216, 85, 85, 0.4); background: rgba(216, 85, 85, 0.15); color: var(--danger); } body.theme-red .access-badge.restricted { border-color: rgba(216, 85, 85, 0.4); background: rgba(216, 85, 85, 0.15); color: var(--danger); } body.theme-red #scrollPct { color: var(--danger); } body.theme-red .post-card:hover { border-color: var(--danger); } body.theme-red .post-card-number { color: rgba(216, 85, 85, 0.4); } body.theme-red .post-card.add-post:hover { border-color: rgba(216, 85, 85, 0.3); color: var(--danger); background: rgba(216, 85, 85, 0.06); } body.theme-red .cat-btn:hover { border-color: rgba(216, 85, 85, 0.3); color: var(--danger); } body.theme-red .cat-btn.active { border-color: var(--danger); color: var(--danger); background: rgba(216, 85, 85, 0.1); } body.theme-red .graph-explore-title { color: var(--danger); } body.theme-red .post-page-number { color: rgba(216, 85, 85, 0.4); } body.theme-red .post-page-back { color: var(--danger); border-color: rgba(216, 85, 85, 0.3); } body.theme-red .post-page-back:hover { background: rgba(216, 85, 85, 0.1); border-color: var(--danger); } body.theme-red .post-page-body blockquote { border-left-color: var(--danger); color: #e8a0a0; background: rgba(216, 85, 85, 0.08); } body.theme-red .graph-legend-dot.gold { background: #c9a84c; } /* Red theme: cursor */ body.theme-red { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%23D85555' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23D85555'/%3E%3C/svg%3E") 16 16, auto !important; } /* (Red-theme cursor also inherits from body.theme-red; the universal !important rule that used to force it was removed for the same reason as the base gold one above.) */ /* Red theme: scrollbar */ html:has(body.theme-red) { scrollbar-color: rgba(216, 85, 85, 0.4) var(--black); } body.theme-red { scrollbar-color: rgba(216, 85, 85, 0.4) var(--black); } body.theme-red #main-content { scrollbar-color: rgba(216, 85, 85, 0.4) var(--black); } body.theme-red .lib-sidebar { scrollbar-color: rgba(216, 85, 85, 0.3) transparent; } /* Red theme: nav logo and separator */ body.theme-red .sidebar-title { color: var(--danger); } /* Red theme: footer */ body.theme-red .footer-section { border-top-color: rgba(216, 85, 85, 0.15); } body.theme-red .footer-status { color: var(--danger); } body.theme-red .footer-status::before { background: var(--danger); } body.theme-red .footer-nav li a:hover { color: var(--danger); } body.theme-red .footer-contact a { color: var(--danger); } body.theme-red .footer-contact a:hover { color: #e08888; } body.theme-red .footer-bar { border-top-color: rgba(216, 85, 85, 0.15); } body.theme-red .footer-section .pricing-cta { background: var(--danger); } body.theme-red .footer-section .pricing-cta:hover { background: #e08888; } body.theme-red .footer-section .pricing-cta.secondary { background: transparent; border-color: var(--danger); color: var(--danger); } body.theme-red .footer-section .pricing-cta.secondary:hover { background: rgba(216, 85, 85, 0.1); } /* ===== WIKILINKS & OUTGOING LINKS (gold, Obsidian-style) ===== */ .wikilink, .md-outlink { color: var(--gold) !important; text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, 0.3); transition: all 0.2s var(--ease); padding-bottom: 1px; } .wikilink:hover, .md-outlink:hover { color: var(--gold-light) !important; border-bottom-color: var(--gold-light); text-shadow: 0 0 8px rgba(201, 168, 76, 0.25); } .wikilink::before { content: '[['; opacity: 0; font-size: 0.85em; color: var(--gold-dim); transition: opacity 0.2s; } .wikilink::after { content: ']]'; opacity: 0; font-size: 0.85em; color: var(--gold-dim); transition: opacity 0.2s; } .wikilink:hover::before, .wikilink:hover::after { opacity: 0.6; } /* Bold and italic in post content */ .post-page-body strong, .btl-essay-body strong, .pn-post-body strong, .why-text strong, .static-content strong { color: var(--white); font-weight: 700; } .post-page-body em, .btl-essay-body em, .pn-post-body em, .why-text em, .static-content em { color: var(--white-dim); font-style: italic; } /* Red theme overrides for wikilinks in classified context */ .lib-red .wikilink, body.theme-red .wikilink { color: var(--danger) !important; border-bottom-color: rgba(216, 85, 85, 0.3); } .lib-red .wikilink:hover, body.theme-red .wikilink:hover { color: #e08888 !important; border-bottom-color: #e08888; text-shadow: 0 0 8px rgba(216, 85, 85, 0.25); } .lib-red .wikilink::before, .lib-red .wikilink::after, body.theme-red .wikilink::before, body.theme-red .wikilink::after { color: rgba(216, 85, 85, 0.5); } /* Red theme: Behind the Lore essay (classified essays) — swap every gold accent (category label, blockquote, back button) for danger red */ body.theme-red .btl-essay-cat { color: var(--danger); } body.theme-red .btl-essay-body blockquote { border-left-color: var(--danger); color: #e08888; background: rgba(216, 85, 85, 0.06); } body.theme-red .btl-essay-back { color: var(--danger); border-color: rgba(216, 85, 85, 0.4); } body.theme-red .btl-essay-back:hover { background: rgba(216, 85, 85, 0.1); border-color: var(--danger); } /* Red theme: sticky table of contents active item */ body.theme-red .content-toc-item.active { color: var(--danger); border-left-color: var(--danger); } /* ===== NO ENTRY YET (unresolved wikilink) ===== */ .no-entry-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; padding: 60px 24px; } .no-entry-icon { font-size: 48px; margin-bottom: 24px; opacity: 0.3; } .no-entry-title { font-family: var(--mono); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 12px; } .no-entry-target { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 600; color: var(--white); margin-bottom: 8px; } .no-entry-desc { color: var(--gray-light); font-size: 14px; margin-bottom: 32px; max-width: 400px; } .no-entry-back { background: none; border: 1px solid var(--gold-dim); color: var(--gold); font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 24px; border-radius: 3px; transition: all 0.2s var(--ease); } .no-entry-back:hover { background: var(--gold-glow); border-color: var(--gold); color: var(--gold-light); } /* ===== GRAPH EXPLORE VIEW ===== */ .graph-explore { padding: 0; } .graph-explore-header { text-align: center; padding: 32px 40px 0; } .graph-explore-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 8px; } .graph-container { position: relative; width: 100%; height: 480px; border-top: 1px solid var(--black-border); border-bottom: 1px solid var(--black-border); background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.03) 0%, transparent 70%); overflow: hidden; } .graph-container canvas { display: block; width: 100%; height: 100%; } .graph-fs-btn { position: absolute; top: 12px; right: 12px; z-index: 11; background: rgba(12, 12, 12, 0.85); backdrop-filter: blur(8px); border: 1px solid var(--black-border); border-radius: 6px; color: var(--gray); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s; } .graph-fs-btn:hover { color: var(--gold); border-color: var(--gold-dim); } .graph-fs-btn svg { width: 16px; height: 16px; } .graph-container.graph-fs { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; border: none; background: var(--black); } .graph-container.graph-fs .graph-fs-btn { top: 16px; right: 16px; } .graph-container.graph-fs ~ .graph-legend { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10000; background: rgba(12, 12, 12, 0.9); padding: 8px 24px; border: 1px solid var(--gold-dim); border-radius: 4px; } .graph-tooltip { position: absolute; display: none; background: rgba(12, 12, 12, 0.95); border: 1px solid var(--gold-dim); padding: 8px 14px; border-radius: 4px; pointer-events: none; font-size: 12px; color: var(--white); max-width: 260px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); z-index: 10; } .graph-tooltip-title { font-weight: 600; margin-bottom: 2px; } .graph-tooltip-meta { font-family: var(--mono); font-size: 9px; color: var(--gray-light); letter-spacing: 0.5px; text-transform: uppercase; } .graph-legend { display: flex; gap: 20px; justify-content: center; padding: 12px 0; font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 0.5px; } .graph-legend-item { display: flex; align-items: center; gap: 6px; } .graph-legend-dot { width: 8px; height: 8px; border-radius: 50%; } .graph-legend-dot.gold { background: var(--gold); } .graph-legend-dot.red { background: #d85555; } .graph-legend-dot.dim { background: var(--gray); } .graph-legend-dot.subdim { background: #f5f1eb; } .graph-legend-dot.wikilink-dot { background: var(--gold); box-shadow: 0 0 6px rgba(201, 168, 76, 0.6); border: 1px dashed rgba(201, 168, 76, 0.5); } /* Entrypoint section */ .entrypoints-section { padding: 40px; } .entrypoints-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .entrypoints-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .entrypoints-line { flex: 1; height: 1px; background: var(--black-border); } .entrypoint-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(31, 31, 31, 0.5); cursor: pointer; transition: all 0.2s; align-items: start; } .entrypoint-card:hover { background: rgba(201, 168, 76, 0.03); margin: 0 -16px; padding: 20px 16px; border-radius: 4px; } .entrypoint-card-idx { font-family: var(--mono); font-size: 11px; color: var(--gold-dim); padding-top: 4px; white-space: nowrap; } .entrypoint-card-body { min-width: 0; } .entrypoint-card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--white); } .entrypoint-card-excerpt { font-size: 13px; color: var(--white-dim); line-height: 1.6; } .entrypoint-card-tag { display: inline-block; font-family: var(--mono); font-size: 9px; color: var(--gray); background: var(--black-card); padding: 1px 6px; border-radius: 2px; margin-top: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .entrypoint-card-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-top: 2px; flex-shrink: 0; } .entrypoint-card-date { font-family: var(--mono); font-size: 10px; color: var(--gray); } .entrypoint-card-badge { font-family: var(--mono); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; } .entrypoint-card-badge.public { background: rgba(76, 175, 80, 0.12); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.25); } .entrypoint-card-badge.classified { background: rgba(216, 85, 85, 0.12); color: #d85555; border: 1px solid rgba(216, 85, 85, 0.25); } /* Responsive */ @media (max-width: 900px) { .lib-layout { grid-template-columns: 1fr; } .lib-sidebar { position: relative; top: 0; height: auto; border-right: none; border-bottom: 1px solid var(--black-border); padding: 16px 0; } .lib-entry { grid-template-columns: 1fr; gap: 8px; } .lib-entry-cover { display: none; } .nar-row { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 16px 8px; margin: 0 -8px; } .nar-cover { display: none; } .lib-entry-idx { display: none; } .lib-entry-meta { flex-direction: row; align-items: center; } .novel-index-header { flex-direction: column; gap: 20px; } .novel-index-title { font-size: 24px; } .chapter-nav { flex-wrap: wrap; gap: 8px; } .chapter-nav-btn { font-size: 10px; padding: 6px 10px; flex: 1; text-align: center; min-width: 0; } .nar-series-group { padding: 16px 12px 8px; } #sidebarNav { padding: 6px 12px; gap: 2px; } .nav-item { font-size: 10px; padding: 4px 8px; } .page-header { padding: 40px 24px 24px; } .page-content { padding: 24px; } .dir-grid { grid-template-columns: 1fr; } .post-grid { grid-template-columns: 1fr; } .latest-grid { grid-template-columns: 1fr; } .latest-divider { height: 1px; width: 100%; } .latest-column { padding: 24px 0; } .latest-column:first-child { text-align: left; } .latest-column:first-child .latest-column-cards { direction: ltr; } .latest-column:first-child .view-all-btn { float: none; } .latest-bottom-row { grid-template-columns: 1fr; } .latest-bottom-row .latest-divider { height: 1px; width: 100%; } .latest-bottom-col { padding: 24px 0; } .latest-bottom-cards { grid-template-columns: 1fr; } } @media (max-width: 600px) { .sidebar-header { padding: 0 12px; height: 36px; } } /* ===== READING MODE (provenance + post pages) ===== */ .provenance-reading-mode #sidebar, .provenance-reading-mode .breadcrumbs, .provenance-reading-mode .page-header, .provenance-reading-mode .provenance-back, .provenance-reading-mode .provenance-next, .provenance-reading-mode .provenance-nav-row, .provenance-reading-mode .post-page-back, .provenance-reading-mode .footer-section { opacity: 0; pointer-events: none; } .provenance-reading-mode #scrollPct { opacity: 0.6 !important; } .provenance-reading-mode, .provenance-reading-mode #main-content { scrollbar-width: none !important; } .provenance-reading-mode::-webkit-scrollbar, .provenance-reading-mode #main-content::-webkit-scrollbar { display: none !important; } html:has(body.provenance-reading-mode) { scrollbar-width: none !important; } html:has(body.provenance-reading-mode)::-webkit-scrollbar { display: none !important; } /* Smooth transitions for all fading elements */ #sidebar, .breadcrumbs, .page-header, .provenance-back, .provenance-next, .provenance-nav-row, .post-page-back, .footer-section { transition: opacity 0.6s var(--ease); } .provenance-reading-mode.provenance-bottom #sidebar, .provenance-reading-mode.provenance-bottom .breadcrumbs, .provenance-reading-mode.provenance-bottom .page-header, .provenance-reading-mode.provenance-bottom .provenance-back, .provenance-reading-mode.provenance-bottom .provenance-next, .provenance-reading-mode.provenance-bottom .provenance-nav-row, .provenance-reading-mode.provenance-bottom .post-page-back, .provenance-reading-mode.provenance-bottom .footer-section { opacity: 1; pointer-events: auto; } .provenance-reading-mode.provenance-bottom #scrollPct { opacity: 0.8 !important; } .provenance-reading-mode.provenance-bottom, .provenance-reading-mode.provenance-bottom #main-content { scrollbar-width: thin !important; } html:has(body.provenance-reading-mode.provenance-bottom) { scrollbar-width: thin !important; } /* ===== NEW HOME PAGE SECTIONS ===== */ .home-hero-new { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(60px, 10vw, 100px) clamp(24px, 5vw, 60px); position: relative; overflow: hidden; background: var(--black); } .home-hero-new::before { content: ''; position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; background: radial-gradient(circle, var(--gold-glow-strong) 0%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; will-change: transform, opacity; animation: pulseGlow 8s ease-in-out infinite; } /* Motion-sensitive users (and a good proxy for weak devices) get a static glow instead of the perpetual 800x800 scale/opacity animation. */ @media (prefers-reduced-motion: reduce) { .home-hero-new::before { animation: none; opacity: 0.6; } } .hero-content { max-width: min(1600px, 92vw); width: 100%; position: relative; z-index: 2; } /* Staggered fade-up animation */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-anim { opacity: 0; animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-anim-1 { animation-delay: 0.15s; } .hero-anim-2 { animation-delay: 0.4s; } .hero-anim-3 { animation-delay: 0.65s; } .hero-anim-4 { animation-delay: 0.85s; } .hero-author { font-family: var(--mono); font-style: italic; color: var(--gold); font-size: clamp(12px, 1.4vw, 18px); letter-spacing: 2px; margin-bottom: clamp(20px, 2.6vh, 34px); } .hero-title-large { font-size: clamp(2.75rem, 7.5vw, 8.5rem); font-weight: 700; color: var(--white); line-height: 1; margin-bottom: clamp(16px, 2vh, 28px); letter-spacing: -0.02em; } .hero-description { font-size: clamp(15px, 1.9vw, 22px); color: var(--white-dim); line-height: 1.75; margin-bottom: clamp(32px, 4.5vh, 56px); max-width: min(760px, 90vw); margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; } .gf-btn { border: 1px solid var(--gold); padding: clamp(16px, 1.9vh, 22px) clamp(32px, 3.2vw, 52px); background: transparent; color: var(--gold); font-family: var(--mono); font-size: clamp(12px, 1.05vw, 15px); letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s var(--ease); display: flex; align-items: center; gap: 12px; } .gf-btn:hover { background: var(--gold-glow); box-shadow: 0 0 20px var(--gold-glow-strong); } /* STATS SECTION */ .stats-section { background: var(--white); color: var(--black); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 60px); } .stats-inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 60px); } .stats-row { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 8vw, 80px); align-items: start; } .stats-word-count { text-align: center; } .stat-item { text-align: center; } /* Each stat is its own size container so the number's font can cap relative to the cell — 21cqw fits ~8 digits, so 6-7 digit counters can never overlap a neighbour or leave the viewport at any width */ .stat-item { container-type: inline-size; min-width: 0; } /* Size containment zeroes out content-sized boxes — give the standalone word-count stat an explicit width so its container query has one */ .stats-word-count, .stats-word-count .stat-item { width: 100%; } .stat-number { font-size: clamp(4rem, 12vw, 9rem); font-size: min(clamp(4rem, 12vw, 9rem), 21cqw); font-weight: 700; color: var(--black); line-height: 1; margin-bottom: 20px; font-family: var(--sans); } .stat-label { font-family: var(--mono); font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; } /* DIRECTORIES SECTION */ .directories-section { background: var(--white); color: var(--black); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; /* Vertical padding scales with viewport HEIGHT (vh), so the section stays airy on tall monitors but compacts on short windows — the height lost to the browser chrome + taskbar shrinks the spacing instead of pushing content off-screen. */ padding: clamp(28px, 5.5vh, 80px) clamp(24px, 5vw, 60px); } .section-heading { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; color: var(--black); margin-bottom: 0; line-height: 1.2; text-align: center; } .directories-list { display: grid; grid-template-columns: repeat(6, 1fr); /* Row gaps + vertical padding are the biggest contributors to this section's height; make them height-responsive so the grid packs down on short windows. */ gap: clamp(18px, 5vh, 72px) 0; text-align: center; flex: 1; align-content: center; padding: clamp(12px, 3vh, 64px) clamp(40px, 8vw, 120px); } .dir-item { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 16px); } .dir-item.dir-offset-half { grid-column: 2 / span 2; } .dir-item.dir-center-single { grid-column: 3 / span 2; } .dir-item.dir-full-row { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; } .dir-item-number { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 12px; } .dir-item-number::before { content: ''; display: inline-block; width: 12px; height: 12px; background: var(--gold); } .dir-item-name { font-size: 1.4rem; font-weight: 700; color: var(--black); cursor: pointer; transition: color 0.3s var(--ease); } .dir-item-name:hover { color: var(--gold); } .dir-item-desc { font-size: 0.9rem; color: var(--gray); line-height: 1.6; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease); } .dir-item:hover .dir-item-desc { max-height: 80px; opacity: 1; } /* LATEST ADDITIONS SECTION */ .latest-section { background: var(--black); color: var(--white); min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; /* Height-responsive vertical padding (see .directories-section). */ padding: clamp(14px, 3vh, 32px) clamp(24px, 5vw, 60px); } .latest-header { margin-bottom: clamp(12px, 2.6vh, 32px); text-align: center; } .latest-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; color: var(--white); margin-bottom: 12px; } .latest-description { color: var(--white-dim); line-height: 1.8; } .latest-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; width: 100%; } .latest-divider { background: var(--gold-dim); width: 1px; align-self: stretch; } .latest-column { padding: 0 40px; } .latest-column-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.5vh, 16px); margin-bottom: clamp(10px, 2vh, 24px); } .latest-column:first-child { text-align: right; } .latest-column:first-child .latest-column-cards { direction: rtl; } .latest-column:first-child .latest-card { direction: ltr; } .latest-column:first-child .view-all-btn { float: right; } .latest-column:last-child { text-align: left; } .latest-column .latest-card { text-align: left; } .latest-column h3 { font-size: 1.1rem; color: var(--gold); font-family: var(--mono); text-transform: uppercase; letter-spacing: 2px; margin-bottom: clamp(10px, 2vh, 24px); font-weight: 600; } .latest-card { background: var(--black-card); border: 1px solid var(--black-border); padding: 0; overflow: hidden; transition: all 0.4s var(--ease); cursor: pointer; display: flex; flex-direction: column; } .latest-card:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(201, 168, 76, 0.15); transform: translateY(-4px); } .latest-card-content { padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; } .latest-card-title { font-size: clamp(0.8rem, 1.2vw, 1rem); font-weight: 700; color: var(--white); margin-bottom: 4px; line-height: 1.3; } .latest-card-date { font-family: var(--mono); font-size: 9px; color: var(--gray); letter-spacing: 0.5px; margin-bottom: 6px; } .latest-card-excerpt { color: var(--white-dim); font-size: 0.8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .view-all-btn { border: 1px solid var(--gold); padding: 12px 28px; background: transparent; color: var(--gold); font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s var(--ease); } .view-all-btn:hover { background: var(--gold-glow); box-shadow: 0 0 20px var(--gold-glow-strong); } .latest-bottom-row { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; width: 100%; margin-top: clamp(10px, 2vh, 24px); padding-top: clamp(10px, 1.8vh, 20px); border-top: 1px solid var(--black-border); } .latest-bottom-col { padding: 0 40px; } .latest-bottom-col:first-child { text-align: right; } .latest-bottom-col:first-child .view-all-btn { float: right; } .latest-bottom-col:last-child { text-align: left; } .latest-bottom-col h3 { font-size: 1.1rem; color: var(--gold); font-family: var(--mono); text-transform: uppercase; letter-spacing: 2px; margin-bottom: clamp(10px, 2vh, 24px); font-weight: 600; } .latest-bottom-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.5vh, 16px); margin-bottom: clamp(10px, 2vh, 24px); text-align: left; } /* Short desktop windows (laptop screens, or a monitor with browser chrome + taskbar eating into the height): the content-dense Latest section — 11 cards across two grids — sits right at the edge of one screen even after the height-responsive spacing above. Drop the secondary excerpt text and tighten card padding so the whole section (titles + dates for every entry) stays visible without scrolling. Monitors (>= 840px tall, e.g. 1080p even with a visible taskbar) keep the full two-line excerpts. Desktop only; mobile keeps its layout. */ @media (min-width: 769px) and (max-height: 840px) { .latest-card-excerpt { display: none; } .latest-card-content { padding: 8px 12px; } .view-all-btn { padding: 8px 22px; } } /* GALAXY MAP SECTION */ .galaxy-section { background: var(--black); color: var(--white); min-height: 100vh; display: flex; flex-direction: column; padding: clamp(16px, 2vw, 24px) clamp(24px, 5vw, 60px); position: relative; overflow: hidden; } .galaxy-header { text-align: center; margin-bottom: 12px; position: relative; z-index: 2; } .galaxy-overline { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 4px; } .galaxy-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; color: var(--white); margin-bottom: 8px; line-height: 1.2; } .galaxy-stats { display: flex; justify-content: center; gap: 32px; font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 1px; } .galaxy-stat-val { color: var(--gold); font-weight: 700; font-size: 14px; } #galaxy-canvas-wrap { position: relative; width: 100%; flex: 1; min-height: 250px; max-height: calc(100vh - 250px); border-radius: 12px; overflow: hidden; border: 1px solid var(--black-border); background: radial-gradient(ellipse at center, rgba(30, 25, 15, 0.4) 0%, var(--black) 70%); } #galaxy-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; } #galaxy-tooltip { position: absolute; pointer-events: none; z-index: 10; background: rgba(12, 12, 12, 0.92); backdrop-filter: blur(8px); border: 1px solid var(--gold-dim); border-radius: 6px; padding: 6px 12px; font-family: var(--mono); font-size: 11px; color: var(--gold-light); white-space: nowrap; display: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } #galaxy-tooltip .tt-name { font-weight: 600; color: var(--gold); } #galaxy-tooltip .tt-info { color: var(--gray-light); font-size: 10px; } .galaxy-bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; position: relative; z-index: 2; gap: 12px; } .galaxy-controls { display: flex; gap: 8px; align-items: center; } .galaxy-ctrl-btn { background: var(--black-card); border: 1px solid var(--black-border); color: var(--gray); font-family: var(--mono); font-size: 10px; padding: 6px 14px; border-radius: 4px; cursor: pointer; letter-spacing: 1px; transition: all 0.25s; } .galaxy-ctrl-btn:hover { color: var(--gold); border-color: var(--gold-dim); } .galaxy-ctrl-btn.active { color: var(--gold); border-color: var(--gold); background: var(--gold-glow); } /* Corridor hover submenu */ /* Role buttons on the right side of bottom bar */ .galaxy-role-buttons { display: flex; gap: 8px; align-items: center; } .galaxy-role-btn { background: var(--black-card); border: 1px solid var(--black-border); color: var(--gray); font-family: var(--mono); font-size: 10px; padding: 6px 14px; border-radius: 4px; cursor: pointer; letter-spacing: 1px; transition: all 0.25s; white-space: nowrap; } .galaxy-role-btn:hover { color: #e84040; border-color: #e84040; } .galaxy-role-btn.active { color: #e84040; border-color: #e84040; background: rgba(232, 64, 64, 0.1); } /* Fullscreen galaxy map */ .galaxy-section.galaxy-fullscreen { position: fixed; inset: 0; z-index: 9999; padding: 0; margin: 0; display: flex; flex-direction: column; } .galaxy-section.galaxy-fullscreen .galaxy-header { display: none; } .galaxy-section.galaxy-fullscreen #galaxy-canvas-wrap { flex: 1; width: 100%; height: auto; border-radius: 0; border: none; max-height: none; min-height: 0; } .galaxy-section.galaxy-fullscreen .galaxy-bottom-bar { padding: 12px 16px 16px; margin-top: 0; } /* Guide button (top-left of galaxy map) */ .galaxy-guide-btn { position: absolute; top: 12px; left: 12px; z-index: 11; background: rgba(12, 12, 12, 0.85); backdrop-filter: blur(8px); border: 1px solid var(--black-border); border-radius: 6px; color: var(--gray); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s; font-family: var(--mono); font-size: 16px; font-weight: 700; } .galaxy-guide-btn:hover { color: var(--gold); border-color: var(--gold-dim); } /* Guide popup overlay */ .galaxy-guide-overlay { display: none; position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); align-items: center; justify-content: center; } .galaxy-guide-overlay.visible { display: flex; } .galaxy-guide-panel { background: var(--black-card); border: 1px solid var(--gold-dim); border-radius: 10px; max-width: 520px; width: 90%; max-height: 85%; overflow-y: auto; padding: 28px 32px; position: relative; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); } .galaxy-guide-panel::-webkit-scrollbar { width: 5px; } .galaxy-guide-panel::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; } .galaxy-guide-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--gray); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; } .galaxy-guide-close:hover { color: var(--gold); } .galaxy-guide-title { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .galaxy-guide-section { margin-bottom: 18px; } .galaxy-guide-section-title { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--black-border); } .galaxy-guide-text { font-size: 13px; line-height: 1.7; color: var(--white-dim); } .galaxy-guide-item { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 12px; line-height: 1.6; } .galaxy-guide-key { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--gold-light); white-space: nowrap; min-width: 90px; } .galaxy-guide-val { color: var(--white-dim); } .galaxy-fs-btn { position: absolute; top: 12px; right: 12px; z-index: 11; background: rgba(12, 12, 12, 0.85); backdrop-filter: blur(8px); border: 1px solid var(--black-border); border-radius: 6px; color: var(--gray); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s; } .galaxy-fs-btn:hover { color: var(--gold); border-color: var(--gold-dim); } .galaxy-fs-btn svg { width: 16px; height: 16px; } /* WHY SECTION */ .why-section { background: var(--white); color: var(--black); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 60px); text-align: center; } .why-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; margin-bottom: 32px; line-height: 1.2; max-width: 800px; } .why-text { font-size: clamp(13px, 1.8vw, 16px); line-height: 1.8; max-width: 700px; margin-bottom: 40px; color: var(--gray); text-align: left; } /* FOOTER */ .footer-section { background: var(--black); color: var(--white); padding: clamp(60px, 10vw, 100px) clamp(24px, 5vw, 60px); border-top: 1px solid var(--black-border); } .footer-content { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-status { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--mono); font-size: 9px; color: var(--gold); } .footer-status::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--gold); } .footer-nav { list-style: none; } .footer-nav li { margin-bottom: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px; color: var(--gray-light); } .footer-nav li a { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.3s var(--ease); } .footer-nav li a:hover { color: var(--gold); } .footer-contact { font-family: var(--mono); font-size: 9px; color: var(--gray-light); line-height: 1.8; } .footer-contact a { color: var(--gold); text-decoration: none; transition: color 0.3s var(--ease); } .footer-contact a:hover { color: var(--gold-light); } .footer-bar { border-top: 1px solid var(--black-border); padding-top: 24px; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--gray); letter-spacing: 0.5px; } /* SUBSCRIPTION PAGE */ .subscription-section { background: var(--black); color: var(--white); padding: clamp(16px, 2vw, 24px) clamp(24px, 5vw, 60px) clamp(20px, 3vw, 32px); min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; } .subscription-header { text-align: center; margin-bottom: 32px; } .subscription-title { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 16px; color: var(--white); } .subscription-subtitle { font-size: clamp(13px, 1.8vw, 16px); color: var(--white-dim); line-height: 1.8; max-width: 600px; margin: 0 auto; } /* Access-code entry, sitting above the tier cards. */ .sub-code-box { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px auto 0; flex-wrap: wrap; } .sub-code-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-light); } .sub-code-field { display: flex; gap: 8px; align-items: center; } /* "Apply by letter" callout — a wide box centered below the cards. */ .app-letter-box { max-width: 600px; margin: 40px auto 0; padding: 16px 22px; border: 1px solid var(--black-border); background: var(--black-card); border-radius: 8px; text-align: left; } .app-letter-link { display: inline-block; color: var(--gold); font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; line-height: 1.5; border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px; cursor: pointer; } .app-letter-note { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--gray-light); } .app-letter-lead { display: block; margin-top: 12px; color: var(--gold); font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; line-height: 1.5; } .app-letter-mail { display: inline-block; margin-top: 4px; color: var(--gold); font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px; text-decoration: none; cursor: pointer; transition: color 0.3s var(--ease); } .app-letter-mail:hover { color: var(--gold-light); } /* The six access-level cards are the header cells of the comparison table (see .plan-card-cell), so they line up over their columns and scroll sideways with the feature rows. Card sizing lives here; placement is driven by the table's fixed column widths. */ .pricing-card { background: var(--black-card); border: 1px solid var(--black-border); border-radius: 10px; padding: 22px 20px; position: relative; display: flex; flex-direction: column; height: 100%; transition: border-color 0.3s var(--ease); } .pricing-card:hover { border-color: var(--gold-dim); } .pricing-card.featured { border-color: var(--gold); background: linear-gradient(135deg, var(--black-card) 0%, var(--gold-glow) 100%); } /* Editorial Board — the premium recurring rung. Gold-light border + a faint wash so it reads as the top tier without competing with the featured card's stronger glow. */ .pricing-card.elite { border-color: var(--gold-light); background: linear-gradient(135deg, var(--black-card) 0%, var(--gold-glow) 100%); } /* Donation — a one-time option, set apart from the recurring ladder with a dashed border rather than a colored fill. */ .pricing-card.donation { border-style: dashed; border-color: var(--gold-dim); background: var(--black-soft); } .pricing-card.elite .pricing-tier, .pricing-card.donation .pricing-tier { color: var(--gold-light); } .pricing-badge { position: absolute; top: -10px; right: 20px; font-family: var(--mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--black); background: var(--gold); padding: 4px 10px; border-radius: 20px; font-weight: 700; } .pricing-tier { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; } .pricing-blurb { font-size: 12px; color: var(--gray-light); line-height: 1.5; margin-bottom: 18px; } .pricing-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .pricing-amount { font-family: var(--mono); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 600; color: var(--white); line-height: 1; } .pricing-period { font-size: 12px; color: var(--gray-light); } .pricing-note { font-size: 12px; color: var(--white-dim); min-height: 18px; margin-bottom: 18px; } .pricing-cta { width: 100%; margin-top: auto; padding: 11px; border-radius: 6px; background: var(--gold); color: var(--black); border: none; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s var(--ease); } .pricing-cta:hover { background: var(--gold-light); } .pricing-cta.secondary { background: transparent; border: 1px solid var(--gold); color: var(--gold); } .pricing-cta.secondary:hover { background: var(--gold-glow); } /* ---- Feature comparison table ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The six cards and the comparison rows are ONE table so the cards stay aligned over their columns. The table is wider than the page, so it scrolls sideways inside this container; the feature-label column and the group headings are sticky so they stay visible while scrolling tiers. */ /* Region = [‹ arrow] [scrolling table] [arrow ›], arrows flanking the box. width:100% keeps the flex item from taking its max-content width (which, with auto side margins, would overflow the viewport and push the right arrow off-screen); max-width + auto margins still center it when wide. */ .plan-region { display: flex; align-items: flex-start; gap: 8px; width: 100%; max-width: 1272px; margin: 40px auto 0; } .plan-compare { flex: 1 1 auto; min-width: 0; width: 100%; overflow-x: auto; padding-top: 14px; /* room for the cards' -10px badges */ border-radius: 10px; } .plan-compare:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Carousel arrows — height + vertical offset are set from JS to match the card band; JS also toggles .is-disabled at the scroll extents. */ .plan-nav { flex: 0 0 40px; align-self: flex-start; display: flex; align-items: center; justify-content: center; min-height: 64px; background: var(--black-card); border: 1px solid var(--gold-dim); border-radius: 8px; color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease); } .plan-nav:hover { background: var(--gold-glow); border-color: var(--gold); } .plan-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .plan-nav.is-disabled { opacity: 0.3; pointer-events: none; } /* ---- Mobile / tablet carousel (one focused tier card, swipe + dots) ---- */ .plan-carousel-outer { display: none; /* shown at <=1024px */ width: 100%; max-width: 520px; margin: 28px auto 0; } .plan-carousel-wrap { position: relative; } .plan-carousel { position: relative; /* cards' offsetParent, so carouselTo() math is correct */ display: flex; align-items: flex-start; /* cards carry their own fixed height */ gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; /* top pad clears the -10px badge. Left/right pad is set in JS (layoutCarousel) to exactly center the fixed-width cards. */ padding: 14px 7% 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .plan-carousel::-webkit-scrollbar { display: none; } /* Every card is the same fixed, viewport-friendly height; the feature list inside scrolls when a tier has more entries than fit, so the card size never changes as you swipe between tiers. */ .plan-carousel-card { flex: 0 0 86%; scroll-snap-align: center; height: clamp(440px, 68vh, 560px); } .plan-carousel-card .pricing-cta { margin-top: 8px; min-height: 44px; } .plan-carousel-card .stack-features { flex: 1 1 auto; min-height: 0; /* allow the list to shrink below its content and scroll */ overflow-y: auto; scrollbar-width: thin; } /* Overlay arrows on the side gutters, centered on the card band. */ .plan-cnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--black-card); border: 1px solid var(--gold-dim); color: var(--gold); font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease); } .plan-cnav-left { left: -6px; } .plan-cnav-right { right: -6px; } .plan-cnav:hover { background: var(--gold-glow); border-color: var(--gold); } .plan-cnav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .plan-cnav.is-disabled { opacity: 0.25; pointer-events: none; } /* Position dots below the card band. */ .plan-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; } .plan-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--black-border); cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .plan-dot:hover { background: var(--gold-dim); } .plan-dot.is-active { background: var(--gold); transform: scale(1.3); } .plan-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .stack-features { list-style: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--black-border); display: grid; gap: 9px; } .stack-features li { position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.45; color: var(--white-dim); } .stack-features li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; } .stack-features li.stack-group { padding-left: 0; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); } .stack-features li.stack-group:first-child { margin-top: 0; } .stack-features li.stack-group::before { content: none; } .stack-val { color: var(--gold); font-family: var(--mono); font-size: 11px; } @media (max-width: 1024px) { /* The wide comparison table is unusable on phones & tablets (its sticky label column alone eats most of the width) — hide it, including the ‹ › arrows it contains, and show the swipeable tier carousel instead. */ .plan-region { display: none; } .plan-carousel-outer { display: block; } /* Comfortable touch target (>= 44px) for the access-code field. */ #subCodeInput, #subCodeInput + button { min-height: 44px; } } .plan-table { border-collapse: separate; /* sticky cells are unreliable with collapse */ border-spacing: 0; table-layout: fixed; width: 100%; min-width: 2130px; /* 210 label col + 6 x 320 tier cols */ height: 1px; /* seeds % heights so header cards become equal-height */ font-size: 13px; } .plan-table col.pt-col-labels { width: 210px; } .plan-table col.pt-col-tier { width: 320px; } .plan-table th, .plan-table td { padding: 13px 16px; text-align: center; vertical-align: middle; } /* Card row = table head: each cell just tops its card, no header text styling. height:100% (against the table's seeded height) makes every cell — and the card filling it — the same height, so the CTAs line up along one baseline. */ .plan-card-cell { vertical-align: top; text-align: left; text-transform: none; height: 100%; padding: 6px 8px 22px; } .pt-corner { position: sticky; left: 0; z-index: 3; background: var(--black); border-right: 1px solid var(--black-border); } /* Featured column (Classified Clearance) — faint gold wash so the column ties back to the featured card. --gold-glow flips green in clearance-active. */ .plan-table .pt-col-featured { background: var(--gold-glow); } /* Sticky feature-label column. */ .plan-table .pt-feature { position: sticky; left: 0; z-index: 2; text-align: left; color: var(--white-dim); font-weight: 400; background: var(--black); border-right: 1px solid var(--black-border); border-bottom: 1px solid rgba(31, 31, 31, 0.6); } .plan-table tbody td { border-bottom: 1px solid rgba(31, 31, 31, 0.6); } .plan-table tbody tr:hover .pt-feature { background: #151515; } .plan-table tbody tr:hover td:not(.pt-col-featured) { background: rgba(255, 255, 255, 0.02); } /* Section labels. The cell spans the full width; the LABEL inside is sticky (a full-width colspan cell can't stick), so the group name stays visible at the left while the tiers scroll. */ .pt-group-th { text-align: left; background: var(--black); padding: 24px 16px 10px; } .pt-group-label { position: sticky; left: 16px; z-index: 2; display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 500; } .pt-info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 7px; border: 1px solid var(--gray-light); border-radius: 50%; font-size: 9px; color: var(--gray-light); cursor: help; vertical-align: middle; } .pt-info:hover, .pt-info:focus { border-color: var(--gold); color: var(--gold); outline: none; } .pt-yes { color: var(--gold); font-size: 15px; } .pt-no { color: var(--gray-light); } .pt-text { color: var(--white-dim); font-size: 12px; } .plan-foot-note { max-width: 900px; margin: 18px auto 0; text-align: center; font-size: 12px; line-height: 1.7; color: var(--gray-light); } @media (max-width: 800px) { .plan-compare { margin-top: 32px; } .plan-foot-note { padding: 0 16px; } } /* Subscription page — "clearance active" green theme. The page is built almost entirely on the --gold* accent vars (even inline styles), so re-pointing those vars to greens on the section recolors the whole thing at once — cards, buttons, checkmarks, links, the input's Activate button. Kept as an instant swap on purpose: a CSS transition on a var()-backed property does NOT re-resolve when the custom property changes in Chromium, so animating it leaves elements stuck on the old gold. The green wash + status badge already read the switch clearly. */ .subscription-section.clearance-active { --gold: #57c25c; --gold-light: #8fe094; --gold-dim: #3a8f40; --gold-glow: rgba(76, 175, 80, 0.15); --gold-glow-strong: rgba(76, 175, 80, 0.35); background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(76, 175, 80, 0.1), var(--black) 55%); } .subscription-section.clearance-active .subscription-title { color: var(--gold-light); } /* ===== RELEASES PAGE ===== */ .releases-page { padding: 0; } .releases-hero { padding: 120px 60px 80px; border-bottom: 1px solid var(--black-border); } .releases-overline { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .releases-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1; color: var(--white); margin-bottom: 16px; } .releases-desc { font-size: 15px; color: var(--white-dim); max-width: 560px; line-height: 1.7; } .releases-category-nav { display: flex; gap: 0; border-bottom: 1px solid var(--black-border); padding: 0 60px; background: var(--black-soft); } .releases-cat-tab { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); padding: 16px 24px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.3s var(--ease); background: none; border-top: none; border-left: none; border-right: none; } .releases-cat-tab:hover { color: var(--white); } .releases-cat-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .releases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; padding: 60px; } .release-card { border: 1px solid var(--black-border); background: var(--black-card); overflow: hidden; transition: all 0.4s var(--ease); cursor: pointer; } .release-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(201, 168, 76, 0.12); } .release-type-badge { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--black); background: var(--gold); padding: 4px 10px; } .release-info { padding: 20px; } .release-info-title { font-size: 1.1rem; font-weight: 600; color: var(--white); margin-bottom: 6px; } .release-info-meta { font-family: var(--mono); font-size: 9px; color: var(--gray); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .release-info-desc { font-size: 13px; color: var(--white-dim); line-height: 1.6; margin-bottom: 14px; } .release-link { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); transition: border-color 0.3s; } .release-link:hover { border-color: var(--gold); } /* Add release cards by creating .md files in the releases/ folder */ @media (max-width: 768px) { .releases-hero { padding: 80px 24px 60px; } .releases-category-nav { padding: 0 24px; overflow-x: auto; } .releases-grid { padding: 32px 24px; grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .releases-grid { grid-template-columns: 1fr; } } /* ===== PATCH NOTES TIMELINE ===== */ .pn-page { padding: 0; } .pn-hero { padding: 80px 60px 60px; position: relative; overflow: hidden; text-align: center; } .pn-hero::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(600px, calc(100% - 120px)); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .pn-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--white); margin-bottom: 16px; } .pn-desc { color: var(--white-dim); max-width: 600px; line-height: 1.8; font-size: 15px; margin: 0 auto; } /* Patch Notes 90-day activity graph */ .pn-graph-wrap { max-width: 700px; margin: 32px auto 0; padding: 0 20px; } .pn-graph-bars { display: flex; align-items: flex-end; gap: 2px; height: 34px; position: relative; } .pn-graph-bar { flex: 1; height: 100%; border-radius: 2px; position: relative; transition: opacity 0.15s ease; min-width: 0; } .pn-graph-bar.empty { background: var(--black-border); } .pn-graph-bar.has-notes { background: var(--gold); cursor: pointer; } .pn-graph-bars:hover .pn-graph-bar { opacity: 0.4; } .pn-graph-bars:hover .pn-graph-bar:hover { opacity: 1; } .pn-graph-bar.empty:hover { background: var(--gray); opacity: 0.6; } .pn-graph-bar.has-notes:hover { background: var(--gold-light); box-shadow: 0 0 8px rgba(201, 168, 76, 0.5); } .pn-graph-labels { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 0.5px; } .pn-graph-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 100; background: var(--black-card); border: 1px solid var(--black-border); border-radius: 4px; padding: 10px 14px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; min-width: 180px; max-width: 320px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .pn-graph-bar:hover .pn-graph-tooltip { opacity: 1; } .pn-graph-tooltip-date { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; } .pn-graph-tooltip-title { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 4px; white-space: normal; line-height: 1.4; } .pn-graph-tooltip-excerpt { font-size: 11px; color: var(--white-dim); line-height: 1.5; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .pn-graph-tooltip-empty { font-size: 11px; color: var(--gray); font-style: italic; } /* Tooltip edge clamping */ .pn-graph-bar:nth-child(-n + 8) .pn-graph-tooltip { left: 0; transform: none; } .pn-graph-bar:nth-last-child(-n + 8) .pn-graph-tooltip { left: auto; right: 0; transform: none; } .pn-timeline { position: relative; padding: 60px 60px 80px; max-width: 900px; margin: 0 auto; } .pn-timeline::before { content: ''; position: absolute; left: 90px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--gold-dim), var(--black-border) 80%, transparent); } .pn-entry { position: relative; padding-left: 80px; margin-bottom: 48px; opacity: 0; transform: translateY(16px); animation: pnFadeIn 0.5s var(--ease) forwards; } .pn-entry:nth-child(1) { animation-delay: 0.1s; } .pn-entry:nth-child(2) { animation-delay: 0.2s; } .pn-entry:nth-child(3) { animation-delay: 0.3s; } .pn-entry:nth-child(4) { animation-delay: 0.35s; } .pn-entry:nth-child(5) { animation-delay: 0.4s; } .pn-entry:nth-child(6) { animation-delay: 0.45s; } @keyframes pnFadeIn { to { opacity: 1; transform: translateY(0); } } .pn-node { position: absolute; left: -80px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold); background: var(--black); z-index: 2; transition: all 0.3s var(--ease); } .pn-entry:hover .pn-node { background: var(--gold); box-shadow: 0 0 12px rgba(201, 168, 76, 0.5); } .pn-date { position: absolute; left: -194px; top: 0; width: 100px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--gray); letter-spacing: 0.5px; line-height: 20px; } .pn-version { display: block; font-size: 10px; color: var(--gold-dim); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; } .pn-card { background: var(--black-card); border: 1px solid var(--black-border); border-radius: 6px; padding: 28px 32px; cursor: pointer; transition: all 0.3s var(--ease); position: relative; } .pn-card:hover { border-color: var(--gold-dim); background: rgba(201, 168, 76, 0.04); transform: translateX(4px); } .pn-card-number { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--gold-dim); text-transform: uppercase; margin-bottom: 8px; } .pn-card-title { font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 10px; line-height: 1.3; } .pn-card-excerpt { font-size: 14px; color: var(--white-dim); line-height: 1.7; } .pn-card-arrow { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--gold-dim); font-size: 18px; opacity: 0; transition: opacity 0.3s var(--ease); } .pn-card:hover .pn-card-arrow { opacity: 1; } @media (max-width: 768px) { .pn-hero { padding: 60px 24px 40px; } .pn-timeline { padding: 40px 24px 60px; } .pn-timeline::before { left: 24px; } .pn-entry { padding-left: 48px; } .pn-node { left: -48px; } .pn-date { position: static; text-align: left; width: auto; margin-bottom: 8px; } .pn-version { display: inline; margin-left: 8px; } .pn-post { padding: 40px 24px 60px; } } /* Patch note individual page */ .pn-post { max-width: 760px; margin: 0 auto; padding: 60px 40px 80px; } .pn-post-header { margin-bottom: 48px; } .pn-post-version { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .pn-post-version-badge { background: var(--gold-glow); border: 1px solid var(--gold-dim); padding: 3px 10px; border-radius: 3px; font-weight: 600; } .pn-post-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.2; color: var(--white); margin-bottom: 16px; } .pn-post-meta { font-family: var(--mono); font-size: 11px; color: var(--gray); letter-spacing: 0.5px; display: flex; align-items: center; gap: 16px; } .pn-post-body { color: var(--white-dim); line-height: 1.9; font-size: 16px; } .pn-post-body h2 { color: var(--gold); font-size: 18px; font-weight: 600; margin: 40px 0 16px; letter-spacing: -0.01em; } .pn-post-body h3 { color: var(--white); font-size: 16px; font-weight: 600; margin: 32px 0 12px; } .pn-post-body p { margin-bottom: 20px; } .pn-post-body strong { color: var(--white); font-weight: 600; } .pn-post-body ul, .pn-post-body ol { margin: 16px 0 20px 24px; color: var(--white-dim); } .pn-post-body li { margin-bottom: 8px; line-height: 1.7; } .pn-post-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; padding: 10px 20px; border: 1px solid var(--black-border); border-radius: 4px; background: transparent; color: var(--gray); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s var(--ease); } .pn-post-back:hover { border-color: var(--gold-dim); color: var(--gold); } /* Patch notes day-compiled view */ .pn-day-entry { margin-bottom: 32px; } .pn-day-sep { height: 1px; margin: 40px 0; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .pn-day-entry-header { margin-bottom: 20px; } .pn-day-entry-num { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--gold-dim); text-transform: uppercase; } .pn-day-entry-title { font-size: 22px; font-weight: 600; color: var(--white); margin-top: 6px; line-height: 1.3; } .pn-day-entry-body { color: var(--white-dim); line-height: 1.9; font-size: 16px; } .pn-day-entry-body h2 { color: var(--gold); font-size: 18px; font-weight: 600; margin: 32px 0 12px; } .pn-day-entry-body p { margin-bottom: 16px; } .pn-day-entry-body strong { color: var(--white); } .pn-day-entry-body ul, .pn-day-entry-body ol { margin: 12px 0 16px 24px; } .pn-day-entry-body li { margin-bottom: 6px; line-height: 1.7; } /* ===== SCROLL PERCENTAGE INDICATOR ===== */ #scrollPct { position: fixed; top: 50%; right: calc(16px + env(safe-area-inset-right, 0px)); z-index: 800; transform: translateY(-50%); font-family: var(--mono); font-size: 13px; color: var(--gold); letter-spacing: 0.5px; opacity: 0.6; transition: opacity 0.3s; pointer-events: none; } #scrollPct:hover { opacity: 1; } /* ========== BEHIND THE LORE: MAGAZINE / EDITORIAL ========== */ .btl-layout { max-width: 900px; margin: 0 auto; padding: 0 40px 80px; } .btl-header { text-align: center; margin-bottom: 48px; } .btl-header-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--white); margin-bottom: 12px; } .btl-header-desc { color: var(--white-dim); font-size: 14px; line-height: 1.6; max-width: 520px; margin: 0 auto; } /* Featured essay card */ .btl-featured { border: 1px solid var(--gold-dim); border-radius: 6px; padding: 48px 44px; margin-bottom: 48px; cursor: pointer; background: linear-gradient(135deg, rgba(201, 168, 76, 0.06), transparent); transition: border-color 0.3s, box-shadow 0.3s; } .btl-featured:hover { border-color: var(--gold); box-shadow: 0 0 40px rgba(201, 168, 76, 0.06); } .btl-featured-label { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .btl-featured-label::before { content: '\2605'; font-size: 12px; } .btl-featured-title { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; color: var(--white); margin-bottom: 12px; line-height: 1.2; } .btl-featured-excerpt { color: var(--white-dim); font-size: 15px; line-height: 1.7; max-width: 620px; margin-bottom: 20px; text-align: left; } .btl-featured-meta { font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 0.5px; display: flex; gap: 16px; align-items: center; margin-bottom: 20px; } .btl-featured-cta { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; transition: letter-spacing 0.3s; } .btl-featured:hover .btl-featured-cta { letter-spacing: 2px; } /* Category filter bar */ .btl-cat-bar { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; } .btl-cat-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 16px; border-radius: 3px; background: none; color: var(--gray); border: 1px solid var(--black-border); cursor: pointer; transition: all 0.2s; } .btl-cat-btn:hover { color: var(--gold); border-color: var(--gold-dim); } .btl-cat-btn.active { color: var(--gold); border-color: var(--gold); background: rgba(201, 168, 76, 0.08); } /* Essay grid */ .btl-section-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-dim); } .btl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 48px; } .btl-card { border: 1px solid var(--black-border); border-radius: 4px; padding: 28px 24px; cursor: pointer; transition: all 0.25s; background: var(--black-card); } .btl-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .btl-card-cat { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .btl-card-title { font-size: 1.1rem; font-weight: 600; color: var(--white); margin-bottom: 8px; line-height: 1.3; } .btl-card-excerpt { font-size: 13px; color: var(--white-dim); line-height: 1.6; margin-bottom: 16px; text-align: left; } .btl-card-meta { font-family: var(--mono); font-size: 9px; color: var(--gray); letter-spacing: 0.5px; display: flex; justify-content: space-between; } .btl-card-num { color: var(--gold-dim); } /* ========== BEHIND THE LORE: ESSAY READER ========== */ .btl-essay { max-width: 680px; padding: 60px 40px 80px; margin: 0 auto; } .btl-essay-header { text-align: center; margin-bottom: 48px; } .btl-essay-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .btl-essay-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--white); margin-bottom: 16px; line-height: 1.2; } .btl-essay-meta { font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: 0.5px; display: flex; gap: 20px; align-items: center; justify-content: center; padding-bottom: 24px; border-bottom: 1px solid var(--black-border); } .btl-essay-body { margin-top: 36px; font-size: 1.08rem; color: var(--white-dim); line-height: 1.95; } .btl-essay-body p { margin-bottom: 22px; text-align: left; max-width: 680px; margin-left: auto; margin-right: auto; } .btl-essay-body h2 { font-size: 1.5rem; color: var(--white); margin: 44px auto 16px; font-weight: 600; text-align: center; max-width: 680px; } .btl-essay-body h3 { font-size: 1.2rem; color: var(--white); margin: 36px auto 12px; font-weight: 600; text-align: center; max-width: 680px; } .btl-essay-body blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; margin: 28px auto; color: var(--gold-light); font-style: italic; background: var(--gold-glow); max-width: 680px; } .btl-essay-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-dim); padding: 8px 20px; transition: all 0.3s; cursor: pointer; margin-top: 32px; } .btl-essay-back:hover { background: var(--gold-glow); border-color: var(--gold); } .btl-essay-back::before { content: '\25C0'; transition: transform 0.3s; } .btl-essay-back:hover::before { transform: translateX(-4px); } /* ===== CLEARANCE GATE OVERLAY ===== */ .clearance-gate { position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); /* Scroll when the panel is taller than a short/landscape viewport so the input and Authenticate button never end up off-screen (auto margins on the inner panel keep the top reachable — align:center alone would clip). */ overflow-y: auto; } .clearance-gate.active { opacity: 1; pointer-events: all; } .clearance-gate-inner { text-align: center; max-width: 460px; padding: 40px; margin: auto; } .clearance-gate-icon { font-size: 48px; margin-bottom: 24px; color: var(--danger); } /* Only animate the pulsing text-shadow while the gate is actually shown. The gate is opacity:0 (not display:none), so an unscoped rule repainted this icon every frame on every page — including the home page. */ .clearance-gate.active .clearance-gate-icon { animation: pulse-danger 2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .clearance-gate.active .clearance-gate-icon { animation: none; } } @keyframes pulse-danger { 0%, 100% { opacity: 0.7; text-shadow: 0 0 20px rgba(216, 85, 85, 0.3); } 50% { opacity: 1; text-shadow: 0 0 40px rgba(216, 85, 85, 0.6); } } .clearance-gate-title { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--danger); margin-bottom: 12px; } .clearance-gate-subtitle { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(216, 85, 85, 0.5); margin-bottom: 40px; } .clearance-gate-input-wrap { position: relative; margin-bottom: 24px; } .clearance-gate-input { width: 100%; padding: 14px 20px; font-family: var(--mono); font-size: 15px; letter-spacing: 3px; text-align: center; text-transform: uppercase; background: rgba(216, 85, 85, 0.06); border: 1px solid rgba(216, 85, 85, 0.25); color: var(--white); border-radius: 4px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; } .clearance-gate-input:focus { border-color: var(--danger); box-shadow: 0 0 20px rgba(216, 85, 85, 0.15); } .clearance-gate-input::placeholder { color: rgba(216, 85, 85, 0.3); letter-spacing: 2px; font-size: 12px; text-transform: uppercase; } .clearance-gate-input.error { border-color: var(--danger); animation: shake-gate 0.4s ease; } @keyframes shake-gate { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .clearance-gate-submit { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 12px 32px; background: transparent; border: 1px solid rgba(216, 85, 85, 0.4); color: var(--danger); border-radius: 4px; transition: all 0.3s; cursor: pointer; } .clearance-gate-submit:hover { background: rgba(216, 85, 85, 0.1); border-color: var(--danger); } .clearance-gate-error { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--danger); margin-top: 16px; min-height: 18px; opacity: 0; transition: opacity 0.3s; } .clearance-gate-error.visible { opacity: 1; } .clearance-gate-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(216, 85, 85, 0.1); } .clearance-gate-footer-text { font-size: 12px; color: var(--gray); line-height: 1.6; } .clearance-gate-footer-text a { color: var(--danger); text-decoration: none; border-bottom: 1px solid rgba(216, 85, 85, 0.3); transition: border-color 0.2s; } .clearance-gate-footer-text a:hover { border-bottom-color: var(--danger); } .clearance-gate-back { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); cursor: pointer; transition: color 0.2s; } .clearance-gate-back:hover { color: var(--white-dim); } /* ===== MOBILE HAMBURGER MENU ===== */ .mobile-menu-btn { display: none; background: none; border: none; padding: 4px; color: var(--gold); cursor: pointer; flex-shrink: 0; width: 28px; height: 28px; align-items: center; justify-content: center; } .mobile-menu-btn span { display: block; width: 18px; height: 2px; background: var(--gold); transition: all 0.3s var(--ease); position: relative; } .mobile-menu-btn span::before, .mobile-menu-btn span::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--gold); transition: all 0.3s var(--ease); } .mobile-menu-btn span::before { top: -6px; } .mobile-menu-btn span::after { top: 6px; } /* Open state: the three bars morph into a vertical three-dot (⋮) toggle — pressing the dots collapses the menu back into the bar */ .mobile-menu-btn.open span, .mobile-menu-btn.open span::before, .mobile-menu-btn.open span::after { width: 4px; height: 4px; border-radius: 50%; } .mobile-menu-btn.open span::before { top: -8px; } .mobile-menu-btn.open span::after { top: 8px; } /* Classified content: the three bars / three-dot toggle go red too */ body.theme-red .mobile-menu-btn { color: var(--danger); } body.theme-red .mobile-menu-btn span, body.theme-red .mobile-menu-btn span::before, body.theme-red .mobile-menu-btn span::after { background: var(--danger); } /* ===== DISABLE CUSTOM CURSOR ON TOUCH DEVICES ===== */ @media (hover: none) and (pointer: coarse) { body, *, *::before, *::after { cursor: auto !important; } } /* ===== MOBILE NAV: 900px and below ===== The nav collapses to the hamburger drawer earlier than the content does. The desktop horizontal nav starts clipping labels below ~900px (cramped on iPad-portrait, unfolded foldables, and landscape phones), while the richer 769–1120px hybrid content layout is still comfortable there. So the nav switches to the drawer at ≤900px and the content rules reopen at ≤768px. */ @media (max-width: 900px) { /* -- Hamburger menu visible; z-index keeps the ⋮ toggle above the opened drawer, whose opaque background covers the header strip -- */ .mobile-menu-btn { display: flex; position: absolute; right: calc(24px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 30; } /* No room for the corner button beside the centered title + hamburger */ .nav-apply-btn { display: none; } #sidebar { flex-direction: column; } .sidebar-header { flex-wrap: wrap; position: relative; justify-content: center; } .sidebar-title { position: static; transform: none; } #sidebarNav { display: none; flex-direction: column; width: 100%; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 2px; background: rgba(12, 12, 12, 0.99); border-top: 1px solid var(--black-border); max-height: 70vh; overflow-y: auto; } #sidebarNav.mobile-open { display: flex; } .nav-half { flex-direction: column; width: 100%; justify-content: flex-start !important; padding: 0 !important; overflow: visible; } #sidebarNav .sidebar-title { display: none; } .nav-item { padding: 10px 12px; font-size: 13px; width: 100%; border-bottom: 1px solid var(--black-border); } .nav-item:last-child { border-bottom: none; } /* The active item's highlight box must keep all four edges — the separator rules above zero out border-bottom on the last row, which cut the box open when the active page sat last in a menu */ .nav-item.active { border: 1px solid var(--gold); } body.theme-red .nav-item.active { border: 1px solid var(--danger); } /* Hover menus become always-open sections on mobile */ .nav-menu { flex-direction: column; width: 100%; align-items: stretch; } .nav-menu-left { flex-direction: column-reverse; } .nav-menu-trigger { pointer-events: none; border-bottom: none; color: var(--gray); font-size: 9px; padding: 10px 8px 4px; } .nav-menu-items { max-width: none; opacity: 1; pointer-events: auto; overflow: visible; white-space: normal; flex-direction: column; width: 100%; align-items: stretch; } /* The Archive reads Public Records → Collected Stories on phones (the DOM order is inverted for the desktop leftward unfold, so the drawer reverses it back visually) */ .nav-menu-left .nav-menu-items { flex-direction: column-reverse; } /* Separators follow the visual order: the DOM-last item renders on top (needs its divider), the DOM-first renders at the bottom. :not(.active) keeps the gold active box's four edges intact. */ .nav-menu-left .nav-menu-items .nav-item:last-child:not(.active) { border-bottom: 1px solid var(--black-border); } .nav-menu-left .nav-menu-items .nav-item:first-child:not(.active) { border-bottom: none; } } /* ===== MOBILE CONTENT: 768px and below ===== Reopened at the original phone breakpoint so the 769–900px tablet range keeps its hybrid content layout (two-column directories, galaxy map, etc. — see the 769–1120px block) while still using the drawer nav from the ≤900px block. */ @media (max-width: 768px) { /* -- Home sections: each fills the visible viewport (below the 46px nav) and snaps into place while scrolling (see snap rules further down) -- */ .hero-content { max-width: 100%; } .home-hero-new { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); padding: 40px 20px; } .home-hero-new::before { width: 340px; height: 340px; } .hero-buttons { width: 100%; } .hero-description { max-width: 100%; } /* -- Stats section: all four counters on one screen -- */ .stats-section { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); padding: 40px 24px; } .stats-row { grid-template-columns: 1fr; gap: 22px; } .stat-number { font-size: clamp(2.2rem, 11vw, 3.2rem); font-size: min(clamp(2.2rem, 11vw, 3.2rem), 21cqw); } /* -- Galaxy map: hidden on phones (reading-first; initGalaxyMap skips too) -- */ .galaxy-section { display: none; } /* -- Scroll percentage: clutter on small screens -- */ #scrollPct { display: none; } /* -- Directories section: a lean index that fits one screen -- */ .directories-section { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); padding: 28px 20px; justify-content: center; } .directories-list { grid-template-columns: 1fr; gap: 14px; padding: 12px 8px; } .dir-item, .dir-item.dir-full-row { gap: 3px; } .dir-item-number { font-size: 10px; } .dir-item-number::before { width: 8px; height: 8px; } .dir-item-name { font-size: 1.15rem; } /* Descriptions stay visible on phones so a tap target explains itself (base rule hides them until hover, which touch doesn't have) */ .dir-item-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: none; opacity: 1; font-size: 11px; line-height: 1.45; max-width: 280px; margin: 0 auto; } .directories-section .section-heading { font-size: 1.6rem; } .dir-item, .dir-item.dir-offset-half, .dir-item.dir-center-single { grid-column: 1; } /* -- Footer -- */ .footer-content { grid-template-columns: 1fr; gap: 40px; } /* -- Galaxy section -- */ .galaxy-bottom-bar { flex-wrap: wrap; } .galaxy-controls { flex-wrap: wrap; gap: 6px; } .galaxy-role-buttons { flex-wrap: wrap; gap: 6px; } .galaxy-stats { gap: 16px; flex-wrap: wrap; } .galaxy-ctrl-btn { padding: 8px 12px; font-size: 9px; } .galaxy-role-btn { padding: 8px 12px; font-size: 9px; } /* -- Breadcrumbs -- */ .breadcrumbs { padding: 12px 16px; overflow-x: auto; white-space: nowrap; } /* -- Page header & content -- */ .page-header { padding: 32px 16px 24px; } .page-header::after { left: 16px; right: 16px; } .page-content { padding: 16px; } /* -- Reading-first typography: comfortable measure, larger body text -- */ .post-page, .provenance-full { padding: 28px 18px 64px; } .btl-essay { padding: 36px 18px 64px; } .post-page-body, .btl-essay-body { font-size: 1.0625rem; line-height: 1.8; } .provenance-full p { font-size: 1.0625rem; line-height: 1.8; } .post-page-body h2, .btl-essay-body h2 { font-size: 1.35rem; margin: 32px 0 14px; } .post-page-body h3, .btl-essay-body h3 { font-size: 1.15rem; margin: 26px 0 10px; } .post-page-body blockquote, .btl-essay-body blockquote, .provenance-full blockquote { padding: 12px 16px; margin: 20px 0; } .post-page-header { margin-bottom: 28px; } .btl-essay-header { margin-bottom: 32px; } /* -- Post and dir cards -- */ .dir-card { padding: 20px; } .post-card { padding: 20px; } /* -- Provenance overview: index becomes a compact watermark above the text instead of a 110px side column -- */ .provenance-grid { padding: 0 18px 48px; } .provenance-card { flex-direction: column; gap: 8px; padding: 36px 0; } .provenance-card:first-child { padding-top: 20px; } .provenance-card h2 { font-size: 1.35rem; margin-bottom: 12px; } .provenance-card p { font-size: 1rem; line-height: 1.75; } .provenance-read-more { padding: 12px 22px; min-height: 44px; } /* Full-section pages: back/next stack as full-width touch buttons */ .provenance-nav-row { flex-direction: column; align-items: stretch; gap: 10px; } .provenance-next, .provenance-nav-row .provenance-back { justify-content: center; min-height: 44px; margin-left: 0; } /* -- Behind the Lore -- */ .btl-layout { padding: 0; } /* -- Patch Notes -- */ /* 90-day activity graph: 90 hover-tooltip bars ~1.5px wide at phone width — unusable on touch, so phones skip it (timeline has it all) */ .pn-graph-wrap { display: none; } .pn-entry { margin-bottom: 32px; } /* Center the node on the timeline rail (left: -48px put it off-screen) */ .pn-node { left: -8px; } .pn-card { padding: 18px 16px; } .pn-card-title { font-size: 16px; } .pn-hero { padding: 40px 20px 32px; } .pn-desc { font-size: 14px; } /* The base .pn-post rule sits after the older pn media block in source order and was overriding its mobile padding — this block loads last */ .pn-post { padding: 32px 18px 56px; } /* -- Releases: swipeable tabs, breathing room in cards, tappable links -- */ .releases-cat-tab { flex-shrink: 0; padding: 16px 18px; } .releases-category-nav { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .releases-category-nav::-webkit-scrollbar { display: none; } .release-card { padding: 16px; } .release-info { padding: 12px 0 0; } .release-info-desc { font-size: 14px; line-height: 1.65; } .release-link { display: inline-flex; align-items: center; min-height: 44px; } /* -- On the Editor (and other static pages): match the reading views -- */ .static-content p { font-size: 1.0625rem; line-height: 1.8; } .static-content h2 { font-size: 1.35rem; margin: 32px 0 14px; } .static-content h3 { font-size: 1.15rem; margin: 26px 0 10px; } .static-content blockquote { padding: 12px 16px; margin: 20px 0; } /* -- Releases -- */ .releases-grid { grid-template-columns: 1fr; padding: 24px 16px; } .releases-hero { padding: 60px 16px 40px; } .releases-category-nav { padding: 0 16px; } /* -- Subscription/Pricing -- */ /* -- Touch targets (min 44px) -- */ .gf-btn, .view-all-btn { padding: 14px 28px; min-height: 44px; } .post-page-back, .provenance-back, .btl-essay-back, .pn-post-back, .no-entry-back { padding: 12px 20px; min-height: 44px; } .chapter-nav-btn { min-height: 44px; } /* -- Latest section -- */ .latest-column { padding: 0 16px; } .latest-bottom-col { padding: 0 16px; } .latest-column-cards { grid-template-columns: 1fr; } .latest-bottom-cards { grid-template-columns: 1fr; } /* -- Latest Additions: lean — 2 entries per column, 1 per bottom row -- */ .latest-section { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); padding: 40px 0; } .latest-column-cards .latest-card:nth-child(n + 3) { display: none; } .latest-bottom-cards .latest-card:nth-child(n + 2) { display: none; } .latest-header { margin-bottom: 24px; } /* -- Why section fills its screen; footer stays compact -- */ .why-section { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); display: flex; flex-direction: column; justify-content: center; padding: 32px 24px; } .why-title { font-size: 1.4rem; margin-bottom: 12px; } .why-text { font-size: 0.9rem; line-height: 1.65; } .footer-section { padding-top: 40px; } /* -- Collected Stories (narratives): reading-list tuned for phones -- */ /* The list renders outside .page-content, so it needs its own side padding here — without it rows sat flush against (and 8px past) the screen edge */ .nar-wrap { padding: 0 16px 48px; } .nar-section { margin-bottom: 40px; } .nar-section-label { font-size: 17px; margin-bottom: 16px; } .nar-series-group { padding: 16px 14px 8px; margin-bottom: 40px; } .nar-series-label { font-size: 18px; } .nar-row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 10px; margin: 0; } .nar-num { display: none; } .nar-title { font-size: 16px; } .nar-blurb { -webkit-line-clamp: 3; } .cat-btn { padding: 10px 16px; } /* -- Novel index: centered cover, tighter reading column -- */ .novel-index { padding: 28px 18px 64px; } .novel-index-header { gap: 16px; margin-bottom: 28px; align-items: center; text-align: center; } .novel-blurb { font-size: 16px; line-height: 1.75; margin-bottom: 32px; padding-bottom: 24px; } .novel-chapter-row { padding: 14px 8px; margin: 0 -8px; } /* -- Film posts: synopsis readable at arm's length -- */ .video-synopsis p { font-size: 15px; } /* -- Clearance gate: keyboard-safe, no iOS input zoom -- */ .clearance-gate { align-items: flex-start; overflow-y: auto; } .clearance-gate-inner { padding: 28px 20px 40px; margin-top: 8vh; width: 100%; max-width: 420px; } .clearance-gate-icon { font-size: 38px; margin-bottom: 16px; } .clearance-gate-title { font-size: 18px; } .clearance-gate-subtitle { margin-bottom: 28px; } .clearance-gate-input { font-size: 16px; /* below 16px iOS Safari auto-zooms the page on focus */ padding: 14px 16px; } .clearance-gate-submit { width: 100%; padding: 14px; min-height: 48px; } .clearance-gate-footer { margin-top: 28px; } .clearance-gate-back { padding: 12px; margin-top: 12px; } /* -- Records library ("All Records" view): list-first on phones -- */ .lib-sidebar { padding: 0; position: relative; top: 0; height: auto; /* Short auto-height bar on phones: don't clip the category dropdown, and keep it stacked above the content list below. */ overflow: visible; z-index: 5; border-right: none; border-bottom: 1px solid var(--black-border); } .lib-search-wrap { --lib-search-w: min(300px, calc(100vw - 96px)); padding: 12px 16px; margin-bottom: 0; border-bottom: none; } .lib-sidebar-caret { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 13px; color: var(--gold); transition: transform 0.25s ease; } .lib-sidebar.open .lib-sidebar-caret { transform: rotate(180deg); } /* Collapsed by default: only the Index header shows; tap to expand */ .lib-sidebar > .lib-cat-toggle, .lib-sidebar > .lib-cat { display: none; } .lib-sidebar.open > .lib-cat-toggle { display: flex; } .lib-sidebar.open > .lib-cat { display: block; } .lib-sidebar.open { padding-bottom: 12px; } .lib-cat-toggle { padding: 12px 20px; font-size: 14px; } .lib-main { padding: 24px 16px 48px; } .lib-title { font-size: 1.5rem; margin-bottom: 16px; } .lib-results-bar { flex-wrap: wrap; gap: 10px; } .lib-sort { padding: 8px 12px; font-size: 11px; } /* Entry Points cards stack vertically */ .entrypoint-card { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; } .entrypoint-card-idx { display: none; } .entrypoint-card-meta { flex-direction: row; align-items: center; gap: 12px; } /* -- Native section snapping on the home page (touch-friendly; the wheel-based JS snap only covers desktop). html is the scroller; .snap-scroll is set on #main-content only while home is open. -- */ html:has(#main-content.snap-scroll) { scroll-snap-type: y mandatory; scroll-padding-top: 46px; } .snap-scroll .home-hero-new, .snap-scroll .stats-section, .snap-scroll .directories-section, .snap-scroll .latest-section, .snap-scroll .why-section, .snap-scroll .footer-section { scroll-snap-align: start; } .snap-scroll .home-hero-new, .snap-scroll .stats-section, .snap-scroll .directories-section, .snap-scroll .why-section { scroll-snap-stop: always; } } /* ===== MOBILE: 480px and below ===== */ @media (max-width: 480px) { .hero-title-large { font-size: clamp(2rem, 10vw, 3.5rem); } .gf-btn { width: 100%; justify-content: center; } .hero-buttons { flex-direction: column; gap: 12px; width: 100%; } .page-header-meta { flex-wrap: wrap; gap: 8px; } .stat-number { font-size: clamp(2.5rem, 14vw, 4rem); font-size: min(clamp(2.5rem, 14vw, 4rem), 21cqw); } .galaxy-stats { flex-direction: column; gap: 8px; } .latest-card-content { padding: 12px; } .post-page, .provenance-full { padding: 24px 16px 56px; } .btl-essay { padding: 28px 16px 56px; } .post-page-title, .provenance-full h1, .btl-essay-title { font-size: 1.6rem; } } /* ===== SMALL PHONES: 390px and below (SE, compact Androids) ===== */ @media (max-width: 390px) { .hero-title-large { font-size: clamp(1.8rem, 9.5vw, 2.6rem); } .stat-number { font-size: clamp(2.2rem, 13vw, 3.2rem); font-size: min(clamp(2.2rem, 13vw, 3.2rem), 21cqw); } .post-page, .provenance-full { padding: 20px 14px 48px; } .btl-essay { padding: 24px 14px 48px; } .post-page-body, .btl-essay-body, .provenance-full p, .static-content p { font-size: 1rem; } .page-header { padding: 24px 14px 20px; } .breadcrumbs { padding: 10px 14px; } .chapter-nav-btn { flex: 1 1 100%; } .pricing-card { padding: 24px 16px; } } /* ===== ULTRA-NARROW: 340px and below (JioPhone 2 @240, folded foldables) ===== Everything else is single-column by 390px, but the "Latest" section keeps a two-card-column grid down to phone widths; two columns can't fit this narrow and get clipped. Stack it to one column, drop the divider, and undo the right-aligned mirroring that only makes sense in the two-up layout. */ @media (max-width: 340px) { .latest-grid { grid-template-columns: 1fr; } .latest-divider { display: none; } .latest-column:first-child, .latest-column:last-child { text-align: left; padding: 0 8px; } .latest-column:first-child .latest-column-cards { direction: ltr; } .latest-column:first-child .view-all-btn { float: none; } .home-hero-new { padding-left: 14px; padding-right: 14px; } } /* ===== TABLET (hybrid desktop/mobile): 769-1120px ===== */ @media (min-width: 769px) and (max-width: 1120px) { /* Home sections breathe but don't force full viewport height */ .stats-section, .directories-section { min-height: auto; padding: 72px 40px; } .home-hero-new { min-height: 85vh; } /* Directories: two per row, descriptions always visible (no hover on touch) */ .directories-list { grid-template-columns: repeat(4, 1fr); gap: 56px 24px; padding: 40px 24px; } .dir-item, .dir-item.dir-offset-half { grid-column: span 2; } .dir-item.dir-center-single { grid-column: 2 / span 2; } .dir-item-desc { max-height: 80px; opacity: 1; } /* Galaxy map kept (desktop half of the hybrid) but bounded */ .galaxy-section { min-height: auto; } #galaxy-canvas-wrap { min-height: 380px; max-height: 62vh; } /* Reading views: slightly narrower measure, roomy touch targets */ .post-page, .provenance-full { max-width: 680px; padding: 40px 32px 72px; } .btl-essay { padding: 48px 32px 72px; } .nav-item { padding: 8px 14px; } .view-all-btn, .gf-btn { min-height: 44px; } .latest-column-cards, .latest-bottom-cards { grid-template-columns: 1fr; } } /* ===== SHORT / LANDSCAPE VIEWPORTS (phones held sideways; ~<=520px tall) ===== The home sections are built one-per-screen at min-height:100vh (svh on phones). On a short landscape viewport that forces tall, half-empty screens and can push a section's content out of reach. Let them size to their content instead, trim vertical padding, and keep the galaxy canvas bounded. Placed last so it wins over the 100vh/svh rules by source order. */ @media (max-height: 520px) { .home-hero-new, .stats-section, .directories-section, .latest-section, .galaxy-section, .why-section, .subscription-section { min-height: auto; } .home-hero-new { padding-top: 28px; padding-bottom: 28px; } #galaxy-canvas-wrap { min-height: 300px; max-height: 78vh; } } /* ============================================================ PROJECT STATUS PAGE (the progression page) ============================================================ */ .ps-intro { max-width: 72ch; margin: 4px 0 8px; } .ps-intro p { color: var(--gray-light); line-height: 1.7; margin: 0 0 14px; } .ps-zone { margin-top: 44px; } .ps-zone-title { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(201,168,76,0.2); padding-bottom: 10px; margin: 0 0 22px; } .ps-empty { color: var(--gray); font-family: var(--mono); font-size: 12px; padding: 18px 0; } /* Work in Progress cards */ .ps-cards { display: flex; flex-direction: column; gap: 16px; } .ps-card { display: flex; align-items: center; justify-content: space-between; gap: 26px; background: rgba(255,255,255,0.025); border: 1px solid rgba(201,168,76,0.16); border-radius: 14px; padding: 22px 26px; transition: border-color 0.25s; } .ps-card-cleared { border-color: rgba(201,168,76,0.3); } .ps-card-body { flex: 1 1 auto; min-width: 0; } .ps-status { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; } .ps-pct { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; } .ps-name { font-size: 15px; color: var(--gold-light); margin-bottom: 12px; letter-spacing: 0.3px; } .ps-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); } .ps-type { border: 1px solid var(--gold-dim); border-radius: 3px; padding: 2px 9px; color: var(--gold); } .ps-clock { color: var(--gray-light); } .ps-burst-wrap { flex: 0 0 auto; line-height: 0; } /* Redaction bars (public view) */ .ps-redact { display: inline-block; background: linear-gradient(90deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)); color: transparent !important; border-radius: 2px; padding: 0 0.5em; user-select: none; } .ps-redact-sm { font-size: 0.9em; } .ps-redact-md { letter-spacing: 2px; } /* Radial burst */ .ps-burst .ps-spoke { stroke-width: 2; stroke-linecap: round; } .ps-burst .ps-spoke-on { stroke: var(--gold); } .ps-burst .ps-spoke-off { stroke: rgba(201,168,76,0.14); } .ps-burst .ps-spoke-red { stroke: rgba(120,120,120,0.32); } /* Milestone ladder */ .ps-ladder { display: flex; flex-direction: column; gap: 14px; } .ps-rung { background: rgba(255,255,255,0.02); border: 1px solid rgba(201,168,76,0.14); border-radius: 10px; padding: 16px 20px; } .ps-rung-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 11px; } .ps-rung-label { font-size: 15px; color: var(--gold-light); } .ps-rung-trigger { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); } .ps-rung-bar { height: 4px; background: rgba(201,168,76,0.12); border-radius: 2px; overflow: hidden; } .ps-rung-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.6s var(--ease); } .ps-rung-note { font-size: 12.5px; color: var(--gray-light); margin-top: 11px; font-style: italic; } .ps-rung-reached { border-color: var(--gold); } .ps-rung-reached .ps-rung-label { color: var(--gold); } /* Clearance register counters */ .ps-counters { display: flex; flex-wrap: wrap; gap: 16px; } .ps-counter { flex: 1 1 150px; background: rgba(255,255,255,0.02); border: 1px solid rgba(201,168,76,0.14); border-radius: 10px; padding: 20px; text-align: center; } .ps-counter-num { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--gold); } .ps-counter-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); margin-top: 8px; } .ps-cta { margin-top: 44px; text-align: center; } /* Subscription-page link to the Project Status page */ .subscription-supporting { color: var(--gray-light); max-width: 62ch; margin: 16px auto 0; line-height: 1.6; } .ps-sublink-wrap { margin: 18px 0 4px; text-align: center; } .ps-sublink { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid var(--gold-dim); padding: 10px 20px; border-radius: 3px; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; } .ps-sublink:hover { background: var(--gold-glow); border-color: var(--gold); color: var(--gold-light); } @media (max-width: 600px) { .ps-card { flex-direction: column; align-items: flex-start; gap: 18px; } .ps-burst-wrap { align-self: center; } } .ps-rung-reached { background: rgba(201,168,76,0.06); } .ps-rung-mark { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 1px 7px; margin-left: 10px; vertical-align: middle; white-space: nowrap; } /* Center the Project Status page */ .ps-page { max-width: 860px; margin-left: auto; margin-right: auto; } .ps-page .page-header, .ps-page .ps-intro { text-align: center; } .ps-page .ps-intro p { margin-left: auto; margin-right: auto; } /* Inline redaction for the lore block characters, matching the Project Status bars */ .redacted-text { background: linear-gradient(90deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)); color: transparent; border-radius: 2px; } /* Project Status register: one line per tier, total below (no cards) */ .ps-count-list { display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; } .ps-count-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 4px; border-bottom: 1px solid rgba(201,168,76,0.10); } .ps-count-label { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); } .ps-count-val { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--gold); white-space: nowrap; } .ps-count-total { border-bottom: none; border-top: 1px solid var(--gold-dim); margin-top: 4px; padding-top: 14px; } .ps-count-total .ps-count-label { color: var(--gold-light); } .ps-count-total .ps-count-val { font-size: 20px; color: var(--gold-light); } .ps-count-donation { border-bottom: none; padding-top: 6px; } .ps-count-donation .ps-count-label { color: var(--gold-light); } .ps-count-donation .ps-count-val { font-size: 16px; color: var(--gold); } /* ===== Legal pages (Impressum, Privacy, Withdrawal, Terms, Cookies) ===== */ .legal-lang-switch { display: flex; justify-content: center; gap: 8px; margin: 0 0 28px; } .legal-lang-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; padding: 6px 16px; background: transparent; color: var(--gray-light); border: 1px solid var(--gold-dim); border-radius: 4px; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .legal-lang-btn:hover { color: var(--gold-light); border-color: var(--gold); } .legal-lang-btn.active { color: var(--gold-light); border-color: var(--gold); background: rgba(255, 255, 255, 0.04); } .legal-content { max-width: 760px; margin: 0 auto; text-align: left; } .legal-content h2 { margin-top: 32px; } .legal-content h3 { margin-top: 22px; } .legal-content ul { padding-left: 22px; } .legal-content li { margin: 4px 0; } @media (max-width: 900px) { .footer-content { grid-template-columns: 1fr 1fr; } }