@charset "UTF-8"; *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; } img { max-width: 100%; height: auto; } a { color: inherit; } :focus-visible { outline: 2px solid #d946a6; outline-offset: 2px; } /* ========================================================================== * Eve design system — root hub redesign baseline * * Tokens + primitives + atmospherics + reduced-motion ported from * docs/Eve-handoff/eve/project/styles.css (lines 5–123, 204–218, 403–596, * 737–824, 6586–6602). Light theme block (5621–5802) intentionally skipped * — dark only. * * STRIP-AND-DECIDE pass (root.scss above this line): * KEEP V9 tokens (--pink/--purple/--blue/--text/--text-muted/--bg/etc.) * — still consumed by ~30 files in Pages/Components until * Phases 5-7 rewrite them page-by-page. * KEEP @layer components { .glass-card, .featured-card } — current * homepage / blog list surfaces. Removed by Phase 5 + Phase 11. * KEEP .nav-link* / .dd-link* / .page-btn* / .progress-track / * .filter-pill* / .reading-progress* — consumed by V9 nav + * pagination + game progress until pages rewrite. * KEEP .prose / .tiptap-content typography block — consumed by * Pages/Blog/Show.vue + Filament Tiptap preview. Phase 6 * decides whether to re-theme or replace. * APPEND All Eve sections below — coexist with V9 until rewrites finish. * Eve declarations come AFTER V9 in source order so any * duplicate property (--text, color, background) wins for Eve. * * Token overrides (user direction): * --red: #ff4d8d (NOT Eve's #ff3b1f). All --red-* alphas recalculated. * ========================================================================== */ /* ─── Section ① Eve tokens ───────────────────────────────────────────────── */ .root-layout { /* Surfaces */ --bg-void: #05080b; --bg-deep: #080c11; --bg-surface: #0c121a; --bg-elevated: #111923; --bg-glow: #0a1620; /* Borders / dividers */ --line-dim: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.18); /* Accents — --red override: pink-magenta replaces Eve's orange-red */ --red: #ff4d8d; --red-soft: #ff77a8; --red-bg: rgba(255, 77, 141, 0.12); --red-line: rgba(255, 77, 141, 0.45); --red-glow: rgba(255, 77, 141, 0.6); --amber: #ffb020; --amber-soft: #ffc657; --amber-bg: rgba(255, 176, 32, 0.1); --amber-line: rgba(255, 176, 32, 0.45); --cyan: #1ec8ff; --cyan-soft: #5cd9ff; --cyan-bg: rgba(30, 200, 255, 0.1); --cyan-line: rgba(30, 200, 255, 0.45); --green: #4ade80; --magenta: #d946ef; /* Text */ --text-hi: #e8edf3; --text: #b6c0cb; --text-dim: #6b7585; --text-faint: #404a58; /* Type */ --font-display: "Saira Condensed", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Chrome dimensions */ --top-h: 44px; --rail-w: 64px; } /* ─── Section ② Global base (scoped to .root-layout) ─────────────────────── */ /* Smooth scrolling — applies to native anchor jumps, browser back-to-top, and the scrollToId composable. scroll-padding-top offsets the fixed TopBar (44px) so anchor targets land below the chrome, not behind it. Lenis (mounted by RootLayout.vue) hijacks wheel/touch for momentum; when Lenis is active, browsers add .lenis to and the rules below kick in to prevent double-smoothing. */ html:has(.root-layout) { scroll-behavior: smooth; scroll-padding-top: 60px; } @media (prefers-reduced-motion: reduce) { html:has(.root-layout) { scroll-behavior: auto; } } /* Lenis momentum-scroll hooks. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } .root-layout { background: var(--bg-void); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; position: relative; /* `overflow-x: clip` rather than `hidden` — `hidden` makes browsers compute `overflow: hidden auto`, turning this element into a scroll container that absorbs touch events on mobile without scrolling (scrollHeight == clientHeight). `clip` clips horizontally without creating a scroll context. Document body already does this too. */ overflow-x: clip; /* Prevent overscroll chaining bouncing into the body underneath. */ overscroll-behavior-y: contain; } .root-layout a { text-decoration: none; } .root-layout *, .root-layout *::before, .root-layout *::after { box-sizing: border-box; } .root-layout *:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ─── Section ③ Background atmospherics ──────────────────────────────────── */ .root-layout .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(var(--line-dim) 1px, transparent 1px), linear-gradient(90deg, var(--line-dim) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); opacity: 0.5; transform: translateZ(0); contain: paint; will-change: transform; } .root-layout .bg-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--red) 12%, transparent), transparent 60%), radial-gradient(ellipse 60% 40% at 0% 100%, rgba(30, 200, 255, 0.06), transparent 60%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%); transform: translateZ(0); contain: paint; will-change: transform; } .root-layout .bg-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 2; background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 3px); opacity: 0.7; transform: translateZ(0); contain: paint; will-change: transform; } /* ─── Section ④ UI primitives ────────────────────────────────────────────── */ /* Panel — angled corners via clip-path */ .root-layout .panel { --notch: 12px; background: rgba(12, 18, 26, 0.82); border: 1px solid var(--line); position: relative; clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)); } .root-layout .panel-glow { border-color: var(--red-line); background: linear-gradient(180deg, rgba(255, 77, 141, 0.08), rgba(12, 18, 26, 0.7)); } /* Border-frame with corner brackets */ .root-layout .framed { position: relative; padding: 18px; border: 1px solid var(--line); background: rgba(8, 13, 19, 0.6); } .root-layout .framed::before, .root-layout .framed::after, .root-layout .framed > .corner-tl, .root-layout .framed > .corner-br { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--red); border-style: solid; border-width: 0; } .root-layout .framed::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; } .root-layout .framed::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; } .root-layout .framed .corner-bl { position: absolute; bottom: -1px; left: -1px; width: 12px; height: 12px; border: 1px solid var(--red); border-top: 0; border-right: 0; } .root-layout .framed .corner-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; } /* Eyebrow / section label */ .root-layout .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--red); text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; } .root-layout .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--red); box-shadow: 0 0 6px var(--red-glow); } .root-layout .eyebrow.amber { color: var(--amber); } .root-layout .eyebrow.amber::before { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .root-layout .eyebrow.cyan { color: var(--cyan); } .root-layout .eyebrow.cyan::before { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } /* Big display titles */ .root-layout .display { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; color: var(--text-hi); margin: 0; text-transform: uppercase; } .root-layout .display.giant { font-size: clamp(48px, 8vw, 120px); line-height: 0.92; letter-spacing: 0.02em; } .root-layout .display.large { font-size: clamp(36px, 5vw, 64px); line-height: 1; } .root-layout .display.medium { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05; } .root-layout .mono { font-family: var(--font-mono); } .root-layout .kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: var(--bg-deep); letter-spacing: 0.06em; } /* Chip */ .root-layout .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-left: 2px solid var(--red); } .root-layout .chip.red { border-left-color: var(--red); color: var(--red-soft); background: var(--red-bg); } .root-layout .chip.amber { border-left-color: var(--amber); color: var(--amber-soft); background: var(--amber-bg); } .root-layout .chip.cyan { border-left-color: var(--cyan); color: var(--cyan-soft); background: var(--cyan-bg); } .root-layout .chip.dim { color: var(--text-dim); border-left-color: var(--text-faint); } /* Hexagon icon container */ .root-layout .hex { --hex-size: 44px; width: var(--hex-size); height: var(--hex-size); background: var(--red-bg); border: 1px solid var(--red-line); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; color: var(--red); flex-shrink: 0; } .root-layout .hex.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); } .root-layout .hex.cyan { background: var(--cyan-bg); border-color: var(--cyan-line); color: var(--cyan); } /* Progress arc / linear bar */ .root-layout .arc { --p: 75; --col: var(--cyan); width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--col) calc(var(--p) * 1%), rgba(255, 255, 255, 0.06) 0); display: grid; place-items: center; position: relative; } .root-layout .arc::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-deep); } .root-layout .arc .arc-num { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 10px; color: var(--col); font-weight: 600; } .root-layout .bar { height: 3px; background: rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; } .root-layout .bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 50%); background: var(--col, var(--red)); box-shadow: 0 0 6px var(--col, var(--red)); display: block; } /* Status dot — pulses by default */ .root-layout .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green), 0 0 2px var(--green); animation: root-status-pulse 2.4s ease-in-out infinite; } .root-layout .status-dot.red { background: var(--red); box-shadow: 0 0 8px var(--red-glow); } .root-layout .status-dot.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .root-layout .status-dot.cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } @keyframes root-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Button — angled corners, mono caps, hover-flip */ .root-layout .btn { --bcol: var(--red); display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid var(--bcol); color: var(--text-hi); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; text-decoration: none; position: relative; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background 0.15s, color 0.15s; } .root-layout .btn:hover { background: var(--bcol); color: #050708; } .root-layout .btn .arrow { display: inline-block; transition: transform 0.2s; } .root-layout .btn:hover .arrow { transform: translateX(3px); } .root-layout .btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--text); } .root-layout .btn.ghost:hover { border-color: var(--text-hi); background: rgba(255, 255, 255, 0.04); color: var(--text-hi); } /* Readout — keyed rows panel */ .root-layout .readout { padding: 18px 20px; border: 1px solid var(--line); background: rgba(8, 13, 19, 0.88); position: relative; } .root-layout .readout .head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 14px; } .root-layout .readout .head .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--red); } .root-layout .readout .head .id { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.1em; } .root-layout .readout .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-family: var(--font-mono); font-size: 11px; } .root-layout .readout .row .k { color: var(--text-faint); letter-spacing: 0.05em; } .root-layout .readout .row .v { color: var(--text-hi); } .root-layout .readout .row .v.red { color: var(--red-soft); } .root-layout .readout .row .v.amber { color: var(--amber); } .root-layout .readout .row .v.cyan { color: var(--cyan); } .root-layout .readout .row .v.green { color: var(--green); } /* Readout list cards (home, playlog, games) */ .root-layout .readout-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .root-layout a.readout { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .root-layout a.readout:hover { border-color: var(--red-line); transform: translateY(-2px); } .root-layout .readout-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 14px; } .root-layout .readout-head .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--red); text-transform: uppercase; } .root-layout .readout-head .date { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.1em; } .root-layout .readout-title { font-family: var(--font-display); font-size: 18px; color: var(--text-hi); margin: 0 0 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; } .root-layout .readout-excerpt { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0; flex: 1; } /* ─── Section ⑥ Chrome — TopBar / SideRail / MobileDrawer / Foot / Pagination * Ported from Eve styles.css ranges: * chrome shells 126-218 * side-rail 220-303 * frame 395-401 * foot 1424-1469 * cmd-trigger 2607-2630 * pagination 5510-5614 * mobile-drawer 6347-6559 * Bottom-ticker NOT ported (Eve element bypassed for Phase 3). * ────────────────────────────────────────────────────────────────────────── */ .root-layout .chrome { z-index: 50; } /* Skip-link — Eve red tokens replace decouple's pink utility */ .root-layout .skip-link { position: fixed; top: -100px; left: 12px; z-index: 300; padding: 8px 14px; background: var(--red-bg); border: 1px solid var(--red-line); color: var(--text-hi); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: top 0.18s; } .root-layout .skip-link:focus, .root-layout .skip-link:focus-visible { top: 12px; outline: 2px solid var(--red); outline-offset: 2px; } /* Top bar */ .root-layout .top-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--top-h); background: linear-gradient(to bottom, rgba(8, 12, 17, 0.96), rgba(8, 12, 17, 0.9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 18px 0 18px; z-index: 60; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-dim); } .root-layout .top-bar .brand { display: flex; align-items: center; gap: 10px; color: var(--text-hi); text-decoration: none; cursor: pointer; } .root-layout .brand-mark { width: 22px; height: 22px; position: relative; display: grid; place-items: center; flex-shrink: 0; } .root-layout .top-bar .brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.22em; font-size: 13px; color: var(--text-hi); } .root-layout .top-bar .brand-sub { color: var(--red); letter-spacing: 0.22em; font-size: 10px; } .root-layout .top-bar .divider { width: 1px; height: 18px; background: var(--line); margin: 0 16px; } .root-layout .top-bar .crumbs { display: flex; gap: 18px; align-items: center; } .root-layout .top-bar .crumbs .item { display: flex; gap: 8px; align-items: center; } .root-layout .top-bar .crumbs .label { color: var(--text-faint); } .root-layout .top-bar .crumbs .value { color: var(--text); } .root-layout .top-bar .spacer { flex: 1; } .root-layout .top-bar .status-cluster { display: flex; gap: 14px; align-items: center; } .root-layout .top-bar .status-cluster .item { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; } .root-layout .top-bar .status-cluster .divider { width: 1px; height: 16px; background: var(--line); } /* Brand "MENU" hint — only visible on mobile/landscape phone */ .root-layout .brand-menu-hint { display: none; } /* Side rail */ .root-layout .side-rail { position: fixed; left: 0; top: var(--top-h); bottom: 0; width: var(--rail-w); background: rgba(6, 10, 14, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-right: 1px solid var(--line); z-index: 55; display: flex; flex-direction: column; padding: 20px 0; gap: 4px; } .root-layout .side-rail .nav-item { position: relative; padding: 14px 0; text-align: center; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--text-faint); border: none; background: none; text-decoration: none; transition: color 0.2s; display: flex; flex-direction: column; align-items: center; gap: 6px; } .root-layout .side-rail .nav-item:hover { color: var(--text); } .root-layout .side-rail .nav-item.active { color: var(--red); } .root-layout .side-rail .nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--red); box-shadow: 0 0 8px var(--red-glow); } .root-layout .side-rail .nav-num { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; opacity: 0.7; } .root-layout .side-rail .nav-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: 0.2em; font-weight: 500; } .root-layout .side-rail .nav-icon { width: 18px; height: 18px; } .root-layout .side-rail .rail-foot { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--line-dim); display: flex; flex-direction: column; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 8.5px; color: var(--text-faint); } /* Main content frame */ .root-layout .frame { padding-top: var(--top-h); padding-left: var(--rail-w); position: relative; z-index: 5; outline: none; } /* Top-bar command palette trigger */ .root-layout .cmd-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px 5px 12px; border: 1px solid var(--line-strong); background: rgba(8, 13, 19, 0.6); color: var(--text-dim); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; cursor: pointer; appearance: none; -webkit-appearance: none; transition: color 0.15s, border-color 0.15s; } .root-layout .cmd-trigger:hover { color: var(--text-hi); border-color: var(--red-line); } .root-layout .cmd-kbd { display: inline-block; padding: 1px 6px; font-size: 9.5px; letter-spacing: 0.1em; border: 1px solid var(--line); background: var(--bg-deep); color: var(--text-dim); } /* Footer */ .root-layout .foot { padding: 60px clamp(28px, 4vw, 64px) 80px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; border-top: 1px solid var(--line); margin-top: 40px; } .root-layout .foot .foot-brand { display: flex; flex-direction: column; gap: 14px; } .root-layout .foot .foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .root-layout .foot a { color: var(--text); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 2px 0; display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s; } .root-layout .foot a:hover { color: var(--red); } .root-layout .foot .foot-col h5 { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; color: var(--red); margin: 0 0 12px; text-transform: uppercase; } /* Pagination */ .root-layout .pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 36px; padding-top: 22px; border-top: 1px dashed var(--line); } .root-layout .pg-info { font-size: 10px; letter-spacing: 0.18em; color: var(--text-faint); text-transform: uppercase; } .root-layout .pg-info-n { color: var(--text-hi); } .root-layout .pg-controls { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: rgba(8, 13, 19, 0.6); padding: 4px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .root-layout .pg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: none; border: 1px solid transparent; color: var(--text-dim); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .root-layout .pg-btn:hover:not(:disabled) { color: var(--red); border-color: var(--red-line); } .root-layout .pg-btn:disabled { color: var(--text-faint); cursor: not-allowed; opacity: 0.5; } .root-layout .pg-arrow { font-size: 14px; line-height: 1; } .root-layout .pg-pages { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px; } .root-layout .pg-num { min-width: 30px; padding: 7px 8px; background: none; border: 1px solid transparent; color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .root-layout .pg-num:hover { color: var(--text); border-color: var(--line-strong); } .root-layout .pg-num.active { color: var(--red); border-color: var(--red); background: var(--red-bg); box-shadow: 0 0 8px var(--red-glow); font-weight: 600; } .root-layout .pg-ellipsis { display: inline-block; padding: 0 4px; color: var(--text-faint); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; } /* Mobile drawer */ .root-layout .mobile-drawer[hidden], .root-layout .cmd-backdrop[hidden], .root-layout .music-player[hidden] { display: none !important; animation: none; } .root-layout .mobile-drawer { position: fixed; inset: 0; z-index: 250; display: flex; align-items: stretch; justify-content: flex-start; font-family: var(--font-mono); animation: root-md-fade 0.18s ease; } @keyframes root-md-fade { from { opacity: 0; } to { opacity: 1; } } .root-layout .mobile-drawer .md-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 7, 0.78); } .root-layout .mobile-drawer .md-panel { position: relative; z-index: 1; width: min(92vw, 360px); background: linear-gradient(to bottom, rgba(10, 14, 20, 0.98), rgba(6, 10, 14, 0.98)); border-right: 1px solid var(--red-line); padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; animation: root-md-slide 0.22s cubic-bezier(0.25, 0.8, 0.3, 1); } @keyframes root-md-slide { from { transform: translateX(-100%); } to { transform: translateX(0); } } .root-layout .mobile-drawer .md-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .root-layout .mobile-drawer .md-brand { display: flex; align-items: center; gap: 10px; color: var(--text-hi); } .root-layout .mobile-drawer .md-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.05em; } .root-layout .mobile-drawer .md-brand-sub { color: var(--red); letter-spacing: 0.22em; font-size: 11px; margin-left: 4px; } .root-layout .mobile-drawer .md-close { background: transparent; border: 1px solid var(--line); color: var(--text-dim); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .root-layout .mobile-drawer .md-close:hover { color: var(--red); border-color: var(--red-line); background: var(--red-bg); } .root-layout .mobile-drawer .md-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 9.5px; letter-spacing: 0.22em; color: var(--red); margin: 14px 0 4px; } .root-layout .mobile-drawer .md-eyebrow-rule { flex: 1; height: 1px; background: var(--line); } .root-layout .mobile-drawer .md-eyebrow-count { color: var(--text-faint); } .root-layout .mobile-drawer .md-pages { display: flex; flex-direction: column; gap: 2px; } .root-layout .mobile-drawer .md-page { display: grid; grid-template-columns: 32px 28px 1fr auto; align-items: center; gap: 12px; background: transparent; border: 1px solid transparent; border-left: 2px solid transparent; color: var(--text); padding: 14px 10px; cursor: pointer; text-align: left; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: var(--font-mono); } .root-layout .mobile-drawer .md-page:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--line); } .root-layout .mobile-drawer .md-page.active { background: var(--red-bg); border-left-color: var(--red); color: var(--red); } .root-layout .mobile-drawer .md-page-num { font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); } .root-layout .mobile-drawer .md-page.active .md-page-num { color: var(--red); } .root-layout .mobile-drawer .md-page-icon { display: inline-flex; align-items: center; justify-content: center; } .root-layout .mobile-drawer .md-page-label { font-size: 14px; letter-spacing: 0.18em; font-weight: 500; color: var(--text-hi); } .root-layout .mobile-drawer .md-page.active .md-page-label { color: var(--red); } .root-layout .mobile-drawer .md-page-arrow { color: var(--text-faint); font-size: 18px; } .root-layout .mobile-drawer .md-channels { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px; } .root-layout .mobile-drawer .md-channels a { color: var(--text); text-decoration: none; font-size: 12px; letter-spacing: 0.1em; padding: 6px 8px; border-left: 1px solid var(--line); transition: color 0.15s, border-color 0.15s, background 0.15s; } .root-layout .mobile-drawer .md-channels a:hover { color: var(--red); border-left-color: var(--red); background: rgba(255, 77, 141, 0.06); } .root-layout .mobile-drawer .md-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.18em; color: var(--text-dim); } /* ─── Section ⑦ Mobile-mode chrome (≤720 portrait OR ≤1024×540 landscape) ── */ @media (max-width: 720px), (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) { .root-layout { --rail-w: 0px; /* Bottom nav removed on mobile — the MobileDrawer (opened via the top-bar MENU hint) covers the same nav targets without fighting the Firefox Android dynamic URL bar. Variable kept at 0 so any remaining `var(--bottom-nav-h)` references collapse harmlessly. */ --bottom-nav-h: 0px; } /* TOP BAR collapses to brand + cmd-trigger */ .root-layout .top-bar { padding: 0 10px; gap: 4px; } .root-layout .top-bar .brand-sub { display: none; } .root-layout .top-bar .crumbs { display: none; } .root-layout .top-bar .divider { display: none; } .root-layout .top-bar .status-cluster { display: none; } .root-layout .cmd-trigger { padding: 5px 8px; gap: 6px; } .root-layout .cmd-trigger > span:nth-child(2) { display: none; } .root-layout .brand-menu-hint { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 6px; border: 1px solid var(--red-line); background: var(--red-bg); color: var(--red); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.2em; border-radius: 1px; } /* SIDE RAIL hidden on mobile — drawer (top-bar MENU) covers the nav. */ .root-layout .side-rail { display: none; } /* FRAME on mobile: no rail offset on the left, no bottom-anchored chrome (nav removed; music player moved to top). Top padding now includes the music-player strip (30px + 6px top gap + 6px bottom gap = 42px). */ .root-layout .frame { padding-left: 0; padding-top: calc(var(--top-h) + 42px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* FOOT stacks single column on narrow viewports */ .root-layout .foot { grid-template-columns: 1fr; padding: 48px 20px 72px; } /* Pagination stacks */ .root-layout .pagination { flex-direction: column; align-items: stretch; gap: 12px; } .root-layout .pg-info { text-align: center; } .root-layout .pg-controls { justify-content: center; } .root-layout .pg-btn-label { display: none; } } /* Portrait phones additionally drop the search trigger (datetime + search both gone, leaving brand + MENU hint). Landscape tablets keep search per spec. */ @media (max-width: 720px) and (orientation: portrait) { .root-layout .top-bar .cmd-trigger { display: none; } } /* ─── Section ⑧ TopBar progressive collapse (desktop intermediate widths) ─ */ @media (max-width: 1100px) and (min-width: 721px) { /* Drop REGION crumb between full-desktop and mobile mode */ .root-layout .top-bar .crumbs .item:nth-child(3) { display: none; } } @media (max-width: 900px) and (min-width: 721px) { /* Drop DESIG crumb + cmd-trigger label hint */ .root-layout .top-bar .crumbs .item:nth-child(2) { display: none; } .root-layout .cmd-trigger .cmd-kbd { display: none; } } /* ─── Section ⑨ Music player ─────────────────────────────────────────────── */ /* Ported from Eve styles.css:6019-6345. --red token is the pink-magenta override (#ff4d8d); rgba(255, 59, 31, X) from Eve is updated to (255, 77, 141, X) where it appears directly. */ .root-layout .music-player { position: fixed; left: calc(var(--rail-w) + 14px); bottom: 14px; z-index: 55; height: 32px; display: flex; align-items: stretch; background: linear-gradient(to bottom, rgba(12, 18, 26, 0.94), rgba(8, 12, 17, 0.94)); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: width 0.25s ease; user-select: none; } .root-layout .music-player .mp-label { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; background: var(--red-bg); border-right: 1px solid var(--line); color: var(--red); font-size: 9.5px; letter-spacing: 0.22em; cursor: pointer; transition: background 0.15s ease; } .root-layout .music-player .mp-label:hover { background: rgba(255, 77, 141, 0.2); } .root-layout .music-player .mp-label-text { font-weight: 600; } .root-layout .mp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .root-layout .mp-eq span { width: 2px; height: 11px; background: var(--red); border-radius: 1px; opacity: 0.55; transform-origin: bottom; transform: scaleY(0.27); will-change: transform; } .root-layout .mp-eq.on span { animation: root-mp-eq 0.9s ease-in-out infinite; opacity: 1; } .root-layout .mp-eq.on span:nth-child(1) { animation-delay: 0s; } .root-layout .mp-eq.on span:nth-child(2) { animation-delay: 0.15s; } .root-layout .mp-eq.on span:nth-child(3) { animation-delay: 0.3s; } .root-layout .mp-eq.on span:nth-child(4) { animation-delay: 0.45s; } @keyframes root-mp-eq { 0%, 100% { transform: scaleY(0.27); } 50% { transform: scaleY(1); } } .root-layout .music-player .mp-controls { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-right: 1px solid var(--line-dim); } .root-layout .music-player .mp-btn { background: transparent; border: 1px solid transparent; color: var(--text); width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .root-layout .music-player .mp-btn:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); } .root-layout .music-player .mp-btn:active { transform: translateY(0.5px); } .root-layout .music-player .mp-btn.play { color: var(--red); border-color: var(--red-line); background: var(--red-bg); margin: 0 2px; } .root-layout .music-player .mp-btn.play:hover { color: var(--red-soft); background: rgba(255, 77, 141, 0.2); box-shadow: 0 0 8px var(--red-glow); } .root-layout .music-player .mp-btn.play.on { color: var(--red-soft); background: rgba(255, 77, 141, 0.22); } .root-layout .music-player .mp-ticker { width: 200px; overflow: hidden; position: relative; display: flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--line-dim); mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 8px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 8px), transparent 100%); } .root-layout .music-player .mp-ticker-track { display: inline-flex; gap: 28px; white-space: nowrap; transform: translateX(0); will-change: transform; } .root-layout .music-player .mp-ticker-track.rolling { animation: root-mp-scroll 14s linear infinite; } .root-layout .music-player .mp-ticker-item { display: inline-flex; align-items: center; gap: 8px; } .root-layout .music-player .mp-artist { color: var(--red-soft); font-weight: 600; letter-spacing: 0.1em; } .root-layout .music-player .mp-title { color: var(--text-hi); letter-spacing: 0.05em; } .root-layout .music-player .mp-sep { color: var(--text-faint); } .root-layout .music-player .mp-sep.dim { color: var(--text-faint); opacity: 0.6; } .root-layout .music-player .mp-dur { color: var(--text-dim); } @keyframes root-mp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .root-layout .music-player .mp-trackno { display: flex; align-items: center; padding: 0 12px 0 10px; color: var(--text-hi); font-size: 9.5px; letter-spacing: 0.1em; } .root-layout .music-player .mp-trackno .dim { color: var(--text-faint); } .root-layout .music-player .mp-vol { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-right: 1px solid var(--line-dim); --vol: 70%; } .root-layout .music-player .mp-vol-icon { background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-dim); cursor: pointer; transition: color 0.15s ease; } .root-layout .music-player .mp-vol-icon:hover { color: var(--text-hi); } .root-layout .music-player .mp-vol-slider { -webkit-appearance: none; appearance: none; width: 68px; height: 14px; background: transparent; cursor: pointer; padding: 0; margin: 0; outline: none; } .root-layout .music-player .mp-vol-slider::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--red) 0, var(--red) var(--vol), var(--line-strong) var(--vol), var(--line-strong) 100%); border-radius: 1px; } .root-layout .music-player .mp-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3px; height: 12px; background: var(--red-soft); border: 0; border-radius: 0; margin-top: -5px; box-shadow: 0 0 6px var(--red-glow); transition: transform 0.12s ease; } .root-layout .music-player .mp-vol-slider:hover::-webkit-slider-thumb { transform: scaleY(1.15); } .root-layout .music-player .mp-vol-slider::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 1px; border: 0; } .root-layout .music-player .mp-vol-slider::-moz-range-progress { height: 2px; background: var(--red); border-radius: 1px; } .root-layout .music-player .mp-vol-slider::-moz-range-thumb { width: 3px; height: 12px; background: var(--red-soft); border: 0; border-radius: 0; box-shadow: 0 0 6px var(--red-glow); } .root-layout .music-player .mp-vol-slider:focus-visible::-webkit-slider-thumb { outline: 1px solid var(--red); outline-offset: 2px; } .root-layout .music-player .mp-ticker-track:not(.rolling) .mp-ticker-item[aria-hidden=true] { display: none; } .root-layout .music-player.collapsed .mp-controls, .root-layout .music-player.collapsed .mp-ticker, .root-layout .music-player.collapsed .mp-vol, .root-layout .music-player.collapsed .mp-trackno { display: none; } .root-layout .music-player.collapsed .mp-label { border-right: 0; padding-right: 14px; } @media (max-width: 900px) { .root-layout .music-player .mp-ticker { width: 160px; } } @media (max-width: 720px), (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) { .root-layout .music-player { left: 8px; right: 8px; /* Anchored just below the topbar instead of at the bottom edge. Bottom-fixed elements fight Firefox Android's bottom URL bar (visual viewport contracts on scroll-up, the bar visibly jumps); top-anchoring sidesteps the whole problem. */ top: calc(var(--top-h) + 6px); bottom: auto; height: 30px; z-index: 65; transition: right 0.25s ease, width 0.25s ease; } /* Collapsed on mobile: release right edge so container shrinks to AUX label width instead of staying pinned full-width. */ .root-layout .music-player.collapsed { right: auto; } .root-layout .music-player .mp-ticker { display: flex; width: auto; flex: 1 1 0; min-width: 0; max-width: 240px; } .root-layout .music-player .mp-trackno { padding: 0 10px 0 8px; font-size: 9px; } .root-layout .music-player .mp-label { padding: 0 8px 0 10px; font-size: 9px; letter-spacing: 0.18em; } .root-layout .music-player .mp-vol { padding: 0 8px; gap: 4px; } .root-layout .music-player .mp-vol-slider { width: 56px; } .root-layout .music-player .mp-btn { width: 28px; height: 26px; } .root-layout .music-player .mp-btn.play { margin: 0 1px; } } @media (max-width: 480px) { .root-layout .music-player .mp-label-text { display: none; } .root-layout .music-player .mp-label { padding: 0 8px; } .root-layout .music-player .mp-vol-slider { display: none; } .root-layout .music-player .mp-vol { padding: 0 8px; } } /* ─── Section ⑩ Home page (Hero + Dossier + Deployments) ─────────────────── */ /* Ported from Eve styles.css:598-1308 (Affiliations 1310-1422 + skill-bank 869-913 + readout-mini 826-836 skipped — not rendered in our Home). --red token override (#ff4d8d) flows through automatically; ProjectArt inline SVG fills are hardcoded to match. */ .root-layout .section { padding: 80px clamp(28px, 4vw, 64px) 80px; position: relative; content-visibility: auto; contain-intrinsic-size: 1px 1200px; scroll-margin-top: var(--top-h); } .root-layout .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; } .root-layout .section-head .title-block .display { margin-top: 12px; } .root-layout .title-block .label, .root-layout .mono.label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--red); text-transform: uppercase; } .root-layout .section-head .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--text-dim); text-align: right; display: flex; flex-direction: column; gap: 6px; } .root-layout .section-head .meta .v { color: var(--text); } /* Hero */ .root-layout .hero { min-height: calc(100vh - var(--top-h)); padding: 0 clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; } .root-layout .hero-canvas { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--rail-w)); right: 0; width: auto; height: 100%; display: block; z-index: 0; opacity: 0.95; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 84%, transparent 100%); } .root-layout .hero-grid-overlay { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--rail-w)); right: 0; width: auto; height: 100%; z-index: 1; background-image: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--red) 22%, transparent), transparent 50%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 78%, transparent 100%); } .root-layout .hero-content { position: relative; z-index: 2; padding: 60px 0; } .root-layout .hero-id { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--text-dim); } .root-layout .hero-id .id-chip { color: var(--red); border: 1px solid var(--red-line); background: var(--red-bg); padding: 4px 10px; letter-spacing: 0.22em; } .root-layout .hero-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 12vw, 200px); line-height: 0.88; letter-spacing: 0.005em; color: var(--text-hi); text-transform: uppercase; margin: 0; position: relative; } .root-layout .hero-name .accent { color: var(--red); text-shadow: 0 0 32px var(--red-glow); } .root-layout .hero-role { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.2vw, 30px); letter-spacing: 0.18em; color: var(--amber); text-transform: uppercase; margin: 16px 0 0; } .root-layout .hero-bio { margin: 28px 0 32px; max-width: 760px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: var(--text); } .root-layout .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* Dossier */ .root-layout .dossier { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; } .root-layout .dossier .bio p { font-size: 16px; line-height: 1.75; color: var(--text); margin: 0 0 20px; } .root-layout .dossier .bio p strong { color: var(--text-hi); font-weight: 600; } .root-layout .dossier .bio .quote { border-left: 2px solid var(--red); padding-left: 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--amber); letter-spacing: 0.04em; line-height: 1.6; margin: 24px 0; } /* Capability matrix */ .root-layout .cap-preamble { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; color: var(--text-dim); letter-spacing: 0.02em; margin: 0 0 22px 0; padding: 10px 12px; border-left: 2px solid var(--amber-line); background: linear-gradient(90deg, var(--amber-bg), transparent 70%); } .root-layout .cap-tier[data-tone=red], .root-layout .cap-chip[data-tone=red] { --tone: var(--red); --tone-soft: var(--red-soft); --tone-bg: var(--red-bg); --tone-line: var(--red-line); } .root-layout .cap-tier[data-tone=amber], .root-layout .cap-chip[data-tone=amber] { --tone: var(--amber); --tone-soft: var(--amber-soft); --tone-bg: var(--amber-bg); --tone-line: var(--amber-line); } .root-layout .cap-tier[data-tone=cyan], .root-layout .cap-chip[data-tone=cyan] { --tone: var(--cyan); --tone-soft: var(--cyan-soft); --tone-bg: var(--cyan-bg); --tone-line: var(--cyan-line); } .root-layout .cap-tier[data-tone=dim], .root-layout .cap-chip[data-tone=dim] { --tone: var(--text-dim); --tone-soft: var(--text); --tone-bg: rgba(255,255,255,0.03); --tone-line: var(--line-strong); } .root-layout .cap-tiers { display: flex; flex-direction: column; gap: 22px; } .root-layout .cap-tier { display: flex; flex-direction: column; gap: 12px; } .root-layout .cap-tier-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .root-layout .cap-tier-rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 18px; background: var(--tone-bg); border: 1px solid var(--tone-line); color: var(--tone); font-weight: 600; letter-spacing: 0.1em; font-size: 9.5px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } .root-layout .cap-tier-label { color: var(--tone); font-weight: 600; letter-spacing: 0.22em; } .root-layout .cap-tier-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--tone-line), transparent); margin: 0 4px; } .root-layout .cap-tier-note { color: var(--text-faint); font-size: 9.5px; letter-spacing: 0.1em; text-transform: none; font-style: italic; } .root-layout .cap-tier-count { color: var(--text-faint); font-size: 9.5px; letter-spacing: 0.1em; } .root-layout .cap-tier-items { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 40px; } .root-layout .cap-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tone-soft); background: var(--tone-bg); border: 1px solid var(--tone-line); padding: 5px 9px; position: relative; transition: background 120ms ease, transform 120ms ease; } .root-layout .cap-chip:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); transform: translateY(-1px); } .root-layout .cap-chip-bracket { color: var(--text-faint); font-weight: 500; } /* kvgrid (bio stats) */ .root-layout .kvgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; } .root-layout .kv { border-top: 1px solid var(--line); padding-top: 10px; } .root-layout .kv .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 6px; } .root-layout .kv .v { font-family: var(--font-display); font-size: 22px; color: var(--text-hi); letter-spacing: 0.02em; } .root-layout .kv .v small { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; margin-left: 6px; } /* Project grid */ .root-layout .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .root-layout .project-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .root-layout .project-card:hover { border-color: var(--red-line); transform: translateY(-2px); } .root-layout .project-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--red); text-transform: uppercase; } .root-layout .project-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-hi); text-transform: uppercase; margin: 0; line-height: 1.1; } .root-layout .project-desc { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; } .root-layout .project { background: rgba(10, 16, 23, 0.85); border: 1px solid var(--line); position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .root-layout .project:hover { border-color: var(--red-line); } .root-layout .project .proj-thumb { height: 200px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-deep); } .root-layout .project .proj-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 13, 19, 0.95) 100%); pointer-events: none; } .root-layout .project .proj-body { padding: 20px 22px 22px; position: relative; } .root-layout .project .proj-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-dim); } .root-layout .project .proj-row .status { display: flex; align-items: center; gap: 6px; color: var(--green); } .root-layout .project .proj-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-hi); text-transform: uppercase; line-height: 1; margin: 0 0 10px; } .root-layout .project .proj-desc { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 16px; } .root-layout .project .proj-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .root-layout .project .proj-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px dashed var(--line); } .root-layout .project .proj-link { color: var(--red); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s; } .root-layout .project .proj-link:hover { gap: 12px; color: var(--red-soft); } .root-layout .project .proj-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; } /* Mobile-mode home overrides — single-column dossier, single-column project grid */ @media (max-width: 720px), (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) { .root-layout .section { padding: 48px 16px; } .root-layout .section-head { flex-direction: column; align-items: flex-start; gap: 14px; } .root-layout .section-head .meta { text-align: left; } .root-layout .hero { padding: 0 16px; min-height: calc(100vh - var(--top-h) - var(--bottom-nav-h, 0px)); } .root-layout .hero-content { padding: 32px 0 48px; } .root-layout .dossier { grid-template-columns: 1fr; gap: 18px; } .root-layout .readout-grid { grid-template-columns: 1fr; gap: 14px; } .root-layout .project-grid { grid-template-columns: 1fr; gap: 18px; } .root-layout .cap-tier-items { padding-left: 0; } } /* ─── Section ⑪ Blog + Reviews ───────────────────────────────────────────── */ /* Eve-styled list + detail surfaces for the blog and reviews routes. The Eve styles.css blog/review selectors (.bp-*, .blog-*, .rv-*, .verdict-*) total ~1,500 LOC; the implementation here keeps the visual language but with eve-* prefixed classes matching the Vue components we shipped. */ .root-layout .eve-page-lede { margin: 12px 0 0; color: var(--text-dim); font-size: clamp(14px, 1vw, 16px); max-width: 540px; line-height: 1.55; } /* Filter chips */ .root-layout .eve-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .root-layout .eve-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); background: rgba(8, 13, 19, 0.6); border: 1px solid var(--line); cursor: pointer; text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .root-layout .eve-filter-chip:hover { color: var(--red-soft); border-color: var(--red-line); } .root-layout .eve-filter-chip--active { color: var(--red); border-color: var(--red); background: var(--red-bg); box-shadow: 0 0 12px var(--red-glow); } .root-layout .eve-filter-chip__count { color: var(--text-faint); font-size: 9.5px; letter-spacing: 0.1em; } /* Post grid */ .root-layout .eve-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .root-layout .eve-post-grid--related { grid-template-columns: repeat(3, 1fr); margin-top: 16px; } .root-layout .eve-post-card { display: flex; flex-direction: column; background: rgba(10, 16, 23, 0.85); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .root-layout .eve-post-card:hover { border-color: var(--red-line); transform: translateY(-2px); } .root-layout .eve-post-cover { aspect-ratio: 16/9; background: var(--bg-deep); overflow: hidden; position: relative; border-bottom: 1px solid var(--line); } .root-layout .eve-post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .root-layout .eve-post-card:hover .eve-post-cover img { transform: scale(1.04); } .root-layout .eve-post-cover--placeholder { display: grid; place-items: center; color: var(--text-faint); font-size: 10px; letter-spacing: 0.22em; background: linear-gradient(135deg, rgba(255, 77, 141, 0.04), rgba(30, 200, 255, 0.04)); } .root-layout .eve-post-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .root-layout .eve-post-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; color: var(--text-faint); letter-spacing: 0.14em; } .root-layout .eve-post-meta .chip { padding: 2px 8px; } .root-layout .eve-post-meta .chip--red { border-left-color: var(--red); color: var(--red-soft); background: var(--red-bg); } .root-layout .eve-post-meta .chip--amber { border-left-color: var(--amber); color: var(--amber-soft); background: var(--amber-bg); } .root-layout .eve-post-meta .chip--cyan { border-left-color: var(--cyan); color: var(--cyan-soft); background: var(--cyan-bg); } .root-layout .eve-post-meta .chip--dim { color: var(--text-dim); border-left-color: var(--text-faint); } .root-layout .eve-post-title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--text-hi); margin: 0; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .root-layout .eve-post-excerpt { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0; flex: 1; } .root-layout .eve-post-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: auto; border-top: 1px dashed var(--line-dim); } .root-layout .eve-post-arrow { color: var(--red); font-size: 10px; letter-spacing: 0.18em; transition: gap 0.15s; } .root-layout .eve-post-card:hover .eve-post-arrow { color: var(--red-soft); } .root-layout .album-card__cover { aspect-ratio: 4/3; } .root-layout .album-card__count { position: absolute; top: 8px; right: 8px; } .root-layout .album-card__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--text-dim); } .root-layout .album-card__sep { color: var(--text-faint); } .root-layout .eve-empty { padding: 80px 0; text-align: center; color: var(--text-dim); } /* Breadcrumb */ .root-layout .eve-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: 28px; } .root-layout .eve-breadcrumb__link { color: var(--text-dim); text-decoration: none; transition: color 0.15s; } .root-layout .eve-breadcrumb__link:hover { color: var(--red); } .root-layout .eve-breadcrumb__current { color: var(--text-hi); } .root-layout .eve-breadcrumb__sep { color: var(--text-faint); opacity: 0.5; } /* Post show */ .root-layout .eve-post-article { max-width: 880px; margin: 0 auto; } .root-layout .eve-post-header { padding: 24px 28px; margin-bottom: 28px; } .root-layout .eve-post-h1 { margin: 14px 0 0; text-transform: none; letter-spacing: 0.005em; } .root-layout .eve-tag-inline { color: var(--cyan); text-decoration: none; transition: color 0.15s; } .root-layout .eve-tag-inline:hover { color: var(--cyan-soft); text-decoration: underline; } .root-layout .eve-post-cover-wide { margin: 0 0 32px; border: 1px solid var(--line); background: var(--bg-deep); aspect-ratio: 16/9; overflow: hidden; } .root-layout .eve-post-cover-wide img { width: 100%; height: 100%; object-fit: cover; display: block; } .root-layout .eve-post-body.tiptap-content { color: var(--text); font-size: 16px; line-height: 1.8; } .root-layout .eve-post-body.tiptap-content h1, .root-layout .eve-post-body.tiptap-content h2, .root-layout .eve-post-body.tiptap-content h3, .root-layout .eve-post-body.tiptap-content h4 { font-family: var(--font-display); color: var(--text-hi); text-transform: none; letter-spacing: 0.01em; margin: 2rem 0 0.75rem; } .root-layout .eve-post-body.tiptap-content h2 { font-size: 1.5rem; font-weight: 600; } .root-layout .eve-post-body.tiptap-content h3 { font-size: 1.25rem; font-weight: 600; } .root-layout .eve-post-body.tiptap-content a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s; } .root-layout .eve-post-body.tiptap-content a:hover { color: var(--red-soft); } .root-layout .eve-post-body.tiptap-content strong { color: var(--text-hi); } .root-layout .eve-post-body.tiptap-content blockquote { border-left: 2px solid var(--red); background: rgba(255, 77, 141, 0.04); padding: 12px 18px; margin: 1.5rem 0; color: var(--text); font-style: italic; border-radius: 0; } .root-layout .eve-post-body.tiptap-content code { font-family: var(--font-mono); background: var(--bg-deep); color: var(--cyan-soft); padding: 2px 6px; font-size: 0.9em; border: 1px solid var(--line); } .root-layout .eve-post-body.tiptap-content pre { background: var(--bg-deep); border: 1px solid var(--line); padding: 16px; overflow-x: auto; border-radius: 0; margin: 1.5rem 0; } .root-layout .eve-post-body.tiptap-content pre code { background: transparent; border: 0; padding: 0; color: var(--text); } .root-layout .eve-post-body.tiptap-content img { margin: 1.5rem 0; border: 1px solid var(--line); border-radius: 0; } .root-layout .eve-post-body.tiptap-content ul, .root-layout .eve-post-body.tiptap-content ol { padding-left: 1.5rem; margin: 0 0 1rem; } /* Reviews-specific */ .root-layout .eve-review-verdict-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; } .root-layout .eve-review-tags { display: flex; flex-wrap: wrap; gap: 6px; } .root-layout .eve-review-game { padding: 22px 24px; margin: 0 0 32px; } .root-layout .eve-review-game__layout { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; } .root-layout .eve-review-game__cover { width: 96px; height: 136px; object-fit: cover; border: 1px solid var(--line); background: var(--bg-deep); display: block; } .root-layout .eve-review-game__info { min-width: 0; } .root-layout .eve-review-game__title { margin: 6px 0 12px; text-transform: none; letter-spacing: 0.005em; font-size: 22px; } /* Verdict badge */ .root-layout .verdict-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .root-layout .verdict-badge--sm { font-size: 9.5px; padding: 4px 8px; } .root-layout .verdict-badge--md { font-size: 10.5px; padding: 6px 12px; } .root-layout .verdict-badge--lg { font-size: 12px; padding: 9px 18px; letter-spacing: 0.22em; } .root-layout .verdict-badge .verdict-glyph { letter-spacing: 0.1em; } .root-layout .verdict-badge--green { color: var(--green); border-color: var(--green); background: rgba(74, 222, 128, 0.08); } .root-layout .verdict-badge--cyan { color: var(--cyan-soft); border-color: var(--cyan-line); background: var(--cyan-bg); } .root-layout .verdict-badge--amber { color: var(--amber-soft); border-color: var(--amber-line); background: var(--amber-bg); } .root-layout .verdict-badge--red { color: var(--red-soft); border-color: var(--red-line); background: var(--red-bg); } .root-layout .verdict-badge--dim { color: var(--text-dim); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.02); } /* Related row */ .root-layout .eve-related { margin: 56px 0 32px; } .root-layout .eve-related .eyebrow { margin-bottom: 16px; display: inline-flex; } /* Comment shell */ .root-layout .eve-comment-shell { margin-top: 40px; padding: 24px 26px; } .root-layout .eve-comment-shell__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } /* CommentSection re-skin — existing Core/Comments/* components stay untouched (MhLayout uses them too), but inside .eve-comment-shell every Tailwind utility class they author gets overridden to Eve dark surface. Aggressive use of !important is intentional: Tailwind utilities have single-class specificity, and we don't want a cascade tug-of-war on every Tailwind class touch. */ /* Section header "Comments (5)" — shell head replaces this inside Eve hub */ .root-layout .eve-comment-shell .comment-section { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } .root-layout .eve-comment-shell .comment-section__head { display: none; } .root-layout .eve-comment-shell section h2, .root-layout .eve-comment-shell section h3 { color: var(--text-hi) !important; font-family: var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; } .root-layout .eve-comment-shell section h2.font-heading { font-size: 18px; margin: 0; } .root-layout .eve-comment-shell .text-gray-900 { color: var(--text-hi) !important; } .root-layout .eve-comment-shell .text-gray-800 { color: var(--text) !important; } .root-layout .eve-comment-shell .text-gray-700 { color: var(--text) !important; } .root-layout .eve-comment-shell .text-gray-600, .root-layout .eve-comment-shell .text-gray-500 { color: var(--text-dim) !important; } .root-layout .eve-comment-shell .border-gray-200, .root-layout .eve-comment-shell .border-gray-300, .root-layout .eve-comment-shell .border-gray-400 { border-color: var(--line) !important; } /* Individual comment cards — Eve-themed panel */ .root-layout .eve-comment-shell div[id^=comment-] { background: rgba(8, 13, 19, 0.7) !important; border: 1px solid var(--line) !important; border-left: 2px solid var(--red-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 18px !important; color: var(--text); } .root-layout .eve-comment-shell div[id^=comment-]:hover { border-left-color: var(--red); } .root-layout .eve-comment-shell div[id^=comment-] img { border-radius: 0 !important; border: 1px solid var(--line); background: var(--bg-deep) !important; filter: saturate(0.85); } .root-layout .eve-comment-shell div[id^=comment-] .font-body.font-semibold { color: var(--text-hi) !important; font-family: var(--font-display); letter-spacing: 0.04em; } .root-layout .eve-comment-shell div[id^=comment-] .bg-gray-100 { background: var(--red-bg) !important; color: var(--red-soft) !important; border-color: var(--red-line) !important; } .root-layout .eve-comment-shell .comment-body { color: var(--text) !important; } .root-layout .eve-comment-shell .comment-body a { color: var(--red) !important; } .root-layout .eve-comment-shell .comment-body code { background: var(--bg-deep) !important; color: var(--cyan-soft) !important; border: 1px solid var(--line); } .root-layout .eve-comment-shell .comment-body pre { background: var(--bg-deep) !important; border: 1px solid var(--line) !important; } .root-layout .eve-comment-shell .comment-body blockquote { background: rgba(255, 77, 141, 0.06) !important; border-left-color: var(--red) !important; color: var(--text) !important; font-style: normal !important; } .root-layout .eve-comment-shell .comment-body blockquote > :first-child strong { color: var(--text) !important; } .root-layout .eve-comment-shell .comment-body blockquote > :last-child:not(:only-child) { border-top-color: var(--line) !important; color: var(--text-dim) !important; font-style: italic !important; } /* Comment form container */ .root-layout .eve-comment-shell form, .root-layout .eve-comment-shell .comment-form, .root-layout .eve-comment-shell .bg-white { padding: 18px; background: rgba(8, 13, 19, 0.7) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; } .root-layout .eve-comment-shell .bg-gray-50 { background: rgba(8, 13, 19, 0.85) !important; } .root-layout .eve-comment-shell .bg-gray-200 { background: var(--red-bg) !important; color: var(--red-soft) !important; } /* Form input fields */ .root-layout .eve-comment-shell label, .root-layout .eve-comment-shell .comment-form__label { color: var(--text-dim) !important; font-family: var(--font-mono); font-size: 10px !important; letter-spacing: 0.18em; text-transform: uppercase; } .root-layout .eve-comment-shell input[type=text], .root-layout .eve-comment-shell input[type=email], .root-layout .eve-comment-shell input[type=url], .root-layout .eve-comment-shell .comment-form__input { height: 40px; background: rgba(5, 8, 11, 0.85) !important; border: 1px solid var(--line) !important; color: var(--text-hi) !important; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; border-radius: 0 !important; resize: none; } .root-layout .eve-comment-shell input[type=text]:focus, .root-layout .eve-comment-shell input[type=email]:focus, .root-layout .eve-comment-shell input[type=url]:focus, .root-layout .eve-comment-shell .comment-form__input:focus { outline: 1px solid var(--red); outline-offset: 1px; border-color: var(--red-line) !important; box-shadow: none; } .root-layout .eve-comment-shell .comment-form__identity { background: rgba(5, 8, 11, 0.85) !important; border: 1px solid var(--line) !important; border-left: 2px solid var(--red-line) !important; color: var(--text) !important; border-radius: 0 !important; } .root-layout .eve-comment-shell .comment-form__identity strong { color: var(--text-hi) !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap { border: 1px solid var(--line) !important; border-radius: 0 !important; background: rgba(5, 8, 11, 0.85) !important; box-shadow: none !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap:focus-within { outline: 1px solid var(--red); outline-offset: 1px; border-color: var(--line) !important; box-shadow: none !important; } .root-layout .eve-comment-shell textarea { background: rgba(5, 8, 11, 0.85) !important; border: 1px solid var(--line) !important; color: var(--text-hi) !important; font-family: var(--font-body); border-radius: 0 !important; min-height: 110px; resize: vertical; } /* Comment Action Text editor — Eve HUD overrides for shared comment_action_text.css */ .root-layout .eve-comment-shell .comment-rich-text-wrap trix-editor, .root-layout .eve-comment-shell .comment-rich-text-wrap .comment-rich-text { background: rgba(5, 8, 11, 0.85) !important; color: var(--text-hi) !important; border: none !important; border-radius: 0 !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-editor:empty:not(:focus)::before { color: var(--text-dim) !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar, .root-layout .eve-comment-shell .comment-trix-toolbar { background: rgba(8, 13, 19, 0.92) !important; border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0.375rem 0.5rem 0 !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button-row { gap: 0.25rem; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button-group { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; margin-bottom: 0.375rem !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button { border: none !important; border-left: 1px solid var(--line) !important; background: transparent !important; color: var(--text-dim) !important; border-radius: 0 !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button:first-child { border-left: none !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button:not(:disabled):hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--text-hi) !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button.trix-active { background: var(--red-bg) !important; color: var(--red-soft) !important; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button--icon::before { opacity: 0.55; filter: brightness(0) invert(0.72); } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button--icon:not(:disabled):hover::before { opacity: 0.9; filter: brightness(0) invert(0.92); } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-toolbar .trix-button--icon.trix-active::before { opacity: 1; filter: brightness(0) invert(1); } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-editor blockquote, .root-layout .eve-comment-shell .comment-trix-content blockquote { background: rgba(255, 77, 141, 0.06); border-left-color: var(--red); color: var(--text); font-style: normal; } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-editor blockquote > :first-child strong, .root-layout .eve-comment-shell .comment-trix-content blockquote > :first-child strong { color: var(--text); } .root-layout .eve-comment-shell .comment-rich-text-wrap trix-editor blockquote > :last-child:not(:only-child), .root-layout .eve-comment-shell .comment-trix-content blockquote > :last-child:not(:only-child) { border-top-color: var(--line); color: var(--text-dim); font-style: italic; } .root-layout .eve-comment-shell .comment-trix-content a { color: var(--red); } /* Submit button — Eve red filled */ .root-layout .eve-comment-shell button[type=submit], .root-layout .eve-comment-shell input[type=submit], .root-layout .eve-comment-shell .comment-form__submit { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px !important; background: color-mix(in srgb, var(--red) 12%, transparent) !important; border: 1px solid var(--red) !important; color: var(--text-hi) !important; font-family: var(--font-mono); font-size: 11px !important; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 0 !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background 0.15s, color 0.15s; } .root-layout .eve-comment-shell button[type=submit]:hover:not(:disabled), .root-layout .eve-comment-shell input[type=submit]:hover:not(:disabled), .root-layout .eve-comment-shell .comment-form__submit:hover:not(:disabled) { background: var(--red) !important; color: #050708 !important; } .root-layout .eve-comment-shell button[type=submit]:disabled, .root-layout .eve-comment-shell input[type=submit]:disabled, .root-layout .eve-comment-shell .comment-form__submit:disabled { opacity: 0.4; cursor: not-allowed; } /* Quote action — Eve ghost chip (not default browser / light comment styles) */ .root-layout .eve-comment-shell .comment-quote-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; padding: 3px 8px !important; margin: 0; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--line) !important; border-left: 2px solid var(--cyan-line) !important; border-radius: 0 !important; color: var(--cyan-soft) !important; font-family: var(--font-mono) !important; font-size: 9.5px !important; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .root-layout .eve-comment-shell .comment-quote-btn:hover { background: var(--cyan-bg) !important; border-color: var(--cyan-line) !important; color: var(--cyan) !important; } /* Tiptap toolbar buttons */ .root-layout .eve-comment-shell .border-gray-700 { border-color: var(--red) !important; } /* Validation error messages */ .root-layout .eve-comment-shell .text-red { color: var(--red-soft) !important; } /* Pagination links for comments */ .root-layout .eve-comment-shell nav a, .root-layout .eve-comment-shell nav span { color: var(--text-dim) !important; border-color: var(--line) !important; } .root-layout .eve-comment-shell nav a:hover { color: var(--red) !important; border-color: var(--red-line) !important; } /* Mobile-mode blog/review overrides */ @media (max-width: 720px), (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) { .root-layout .eve-post-grid { grid-template-columns: 1fr; } .root-layout .eve-post-grid--related { grid-template-columns: 1fr; } .root-layout .eve-post-article { padding-left: 4px; padding-right: 4px; } .root-layout .eve-post-header { padding: 18px 16px; } .root-layout .eve-review-game__layout { grid-template-columns: 72px 1fr; gap: 14px; } .root-layout .eve-review-game__cover { width: 72px; height: 100px; } /* Comments — reduce nested panel padding on narrow viewports */ .root-layout .eve-comment-shell { margin-top: 28px; padding: 14px 12px; } .root-layout .eve-comment-shell__head { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .root-layout .eve-comment-shell div[id^=comment-] { padding: 12px 14px !important; } .root-layout .eve-comment-shell .comment-form { padding: 12px !important; } .root-layout .eve-comment-shell button[type=submit] { width: 100%; justify-content: center; } .root-layout .eve-comment-shell .comment-section__form { margin-top: 16px !important; } .root-layout .eve-comment-shell .comment-section__pagination { margin-top: 12px !important; } } @media (min-width: 721px) and (max-width: 1100px) { .root-layout .eve-post-grid { grid-template-columns: repeat(2, 1fr); } } /* ─── Section ⑫ Games / Playlog / Videos / About ─────────────────────────── */ /* Pragmatic Eve port for the games dashboard, playlog list + show, videos list + show, and the About page. Uses primitives from Sections ①-④ so the surface inherits dossier/readout/chip/framed without re-declaring. */ /* Games dashboard ---------------------------------------------------------- */ .root-layout .eve-stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; } .root-layout .eve-stat { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; } .root-layout .eve-stat__v { color: var(--text-hi); text-transform: none; letter-spacing: 0.005em; font-size: clamp(28px, 4vw, 44px); line-height: 1; } .root-layout .eve-stat__sub { font-size: 10px; letter-spacing: 0.18em; color: var(--text-faint); text-transform: uppercase; } /* Game card grids */ .root-layout .eve-game-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .root-layout .eve-game-grid--playlog { grid-template-columns: repeat(3, 1fr); } .root-layout .eve-game-card { display: flex; flex-direction: column; background: rgba(10, 16, 23, 0.85); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .root-layout a.eve-game-card:visited, .root-layout a.eve-top-card:visited { color: inherit; text-decoration: none; } .root-layout .eve-game-card:hover { border-color: var(--red-line); transform: translateY(-2px); } .root-layout .eve-game-cover { aspect-ratio: 3/4; background: var(--bg-deep); overflow: hidden; border-bottom: 1px solid var(--line); position: relative; } .root-layout .eve-game-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .root-layout .eve-game-cover--placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-faint); font-family: var(--font-display); font-size: 36px; letter-spacing: 0.05em; background: linear-gradient(135deg, rgba(255, 77, 141, 0.08), rgba(30, 200, 255, 0.04)); } .root-layout .eve-game-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .root-layout .eve-game-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .root-layout .eve-game-title { font-family: var(--font-display); font-size: 16px; color: var(--text-hi); line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .root-layout .eve-game-foot { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-faint); margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line-dim); text-transform: uppercase; } /* Top games */ .root-layout .eve-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .root-layout .eve-top-card { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 18px; align-items: start; } .root-layout a.eve-top-card { color: inherit; cursor: pointer; transition: border-color 0.2s, transform 0.2s; } .root-layout a.eve-top-card:hover { border-color: var(--red-line); transform: translateY(-2px); } .root-layout .eve-top-cover { width: 96px; height: 136px; background: var(--bg-deep); overflow: hidden; border: 1px solid var(--line); } .root-layout .eve-top-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .root-layout .eve-rank { color: var(--red); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; } .root-layout .eve-top-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .root-layout .eve-top-tags { display: flex; flex-wrap: wrap; gap: 4px; } /* Playlog show */ .root-layout .eve-playlog-show { max-width: 1000px; margin: 0 auto; } .root-layout .eve-playlog-header { padding: 24px 26px; margin-bottom: 28px; } .root-layout .eve-playlog-header__layout { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; } .root-layout .eve-playlog-cover { width: 160px; height: 224px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-deep); } .root-layout .eve-playlog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .root-layout .eve-playlog-cover--placeholder { font-size: 48px; } .root-layout .eve-playlog-info { min-width: 0; } .root-layout .eve-playlog-title { margin: 6px 0 14px; text-transform: none; letter-spacing: 0.005em; font-size: 26px; } .root-layout .eve-diary { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; } .root-layout .eve-diary > .eyebrow { margin-bottom: 6px; } .root-layout .eve-diary-entry { padding: 18px 22px; } .root-layout .eve-diary-meta { color: var(--text-faint); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; } .root-layout .eve-diary-body { color: var(--text); font-size: 14.5px; line-height: 1.65; } .root-layout .eve-diary-body p { margin: 0 0 0.85rem; } .root-layout .eve-diary-body strong { color: var(--text-hi); } .root-layout .eve-diary-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .root-layout .eve-diary-body a:hover { color: var(--red-soft); } .root-layout .eve-diary-body ul, .root-layout .eve-diary-body ol { padding-left: 1.4rem; } /* Videos */ .root-layout .eve-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .root-layout .eve-video-card { display: flex; flex-direction: column; background: rgba(10, 16, 23, 0.85); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .root-layout .eve-video-card:hover { border-color: var(--red-line); transform: translateY(-2px); } .root-layout .eve-video-thumb { aspect-ratio: 16/9; background: var(--bg-deep); overflow: hidden; position: relative; border-bottom: 1px solid var(--line); } .root-layout .eve-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .root-layout .eve-video-card:hover .eve-video-thumb img { transform: scale(1.04); } .root-layout .eve-video-thumb--placeholder { display: grid; place-items: center; color: var(--text-faint); font-size: 10px; letter-spacing: 0.22em; width: 100%; height: 100%; } .root-layout .eve-video-source { position: absolute; top: 8px; left: 8px; font-size: 9px; padding: 2px 6px; } .root-layout .eve-video-play { position: absolute; bottom: 10px; right: 12px; color: var(--text-hi); font-size: 18px; text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); opacity: 0.85; } .root-layout .eve-video-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .root-layout .eve-video-title { font-family: var(--font-display); font-size: 16px; line-height: 1.2; color: var(--text-hi); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .root-layout .eve-video-meta { font-size: 10px; letter-spacing: 0.18em; color: var(--text-faint); text-transform: uppercase; } /* Video show */ .root-layout .eve-video-show { max-width: 980px; margin: 0 auto; } .root-layout .eve-video-embed { padding: 0; margin: 0 0 28px; overflow: hidden; aspect-ratio: 16/9; } .root-layout .eve-video-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .root-layout .eve-video-header { padding: 22px 26px; margin-bottom: 20px; } .root-layout .eve-video-description { padding: 20px 24px; margin-bottom: 28px; } .root-layout .eve-video-description__body { margin: 14px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.7; white-space: pre-line; } /* About */ .root-layout .eve-about-section { max-width: 1100px; margin: 0 auto; } .root-layout .eve-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 28px; } .root-layout .eve-about-bio { padding: 24px 28px; } .root-layout .eve-about-bio p { color: var(--text); font-size: 15px; line-height: 1.75; margin: 14px 0; } .root-layout .eve-about-bio p strong { color: var(--text-hi); } .root-layout .eve-about-bio .quote { border-left: 2px solid var(--red); padding-left: 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--amber); letter-spacing: 0.04em; line-height: 1.6; margin: 20px 0 0; } .root-layout .eve-about-name { margin: 12px 0 8px; text-transform: none; letter-spacing: 0.005em; } .root-layout .eve-about-side { display: flex; flex-direction: column; gap: 18px; } .root-layout .eve-about-side .framed { padding: 18px 22px; } .root-layout .eve-about-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .root-layout .eve-about-link { color: var(--cyan); text-decoration: none; transition: color 0.15s; } .root-layout .eve-about-link:hover { color: var(--cyan-soft); text-decoration: underline; } /* Mobile-mode games/videos/about overrides */ @media (max-width: 720px), (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) { .root-layout .eve-stats-strip { grid-template-columns: 1fr; gap: 14px; } .root-layout .eve-game-grid, .root-layout .eve-game-grid--playlog { grid-template-columns: repeat(2, 1fr); gap: 14px; } .root-layout .eve-top-grid { grid-template-columns: 1fr; } .root-layout .eve-top-card { grid-template-columns: 72px 1fr; gap: 14px; padding: 14px; } .root-layout .eve-top-cover { width: 72px; height: 100px; } .root-layout .eve-video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .root-layout .eve-playlog-header__layout { grid-template-columns: 110px 1fr; gap: 18px; } .root-layout .eve-playlog-cover { width: 110px; height: 154px; } .root-layout .eve-about-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .root-layout .eve-video-grid { grid-template-columns: 1fr; } .root-layout .eve-game-grid, .root-layout .eve-game-grid--playlog { grid-template-columns: 1fr; } } /* Playlog entry-show page — portrait phones get a stacked layout because the 110px+1fr two-column cramps both title and meta rows at 393px width. */ @media (max-width: 720px) and (orientation: portrait) { .root-layout .eve-playlog-header { padding: 20px 18px 22px; } .root-layout .eve-playlog-header__layout { grid-template-columns: 1fr; gap: 18px; justify-items: center; } .root-layout .eve-playlog-cover { width: 180px; height: 252px; } .root-layout .eve-playlog-info { width: 100%; text-align: center; } .root-layout .eve-playlog-title { font-size: 22px; margin: 8px 0 14px; } .root-layout .eve-playlog-info .readout .row { text-align: left; font-size: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-dim); } .root-layout .eve-playlog-info .readout .row:last-child { border-bottom: 0; } .root-layout .eve-diary-entry { padding: 16px 16px; } .root-layout .eve-diary-meta { font-size: 9.5px; } .root-layout .eve-diary-body { font-size: 14px; } } @media (min-width: 721px) and (max-width: 1100px) { .root-layout .eve-game-grid { grid-template-columns: repeat(3, 1fr); } .root-layout .eve-game-grid--playlog { grid-template-columns: repeat(2, 1fr); } .root-layout .eve-video-grid { grid-template-columns: repeat(2, 1fr); } .root-layout .eve-top-grid { grid-template-columns: 1fr; } } /* ─── Section ⑬ Search results ───────────────────────────────────────────── */ .root-layout .eve-search-page { max-width: 980px; margin: 0 auto; } .root-layout .eve-search-form { display: flex; gap: 12px; margin: 24px 0 18px; } .root-layout .eve-search-input { flex: 1; height: 44px; background: rgba(8, 13, 19, 0.6); border: 1px solid var(--line); color: var(--text-hi); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; padding: 0 14px; outline: none; transition: border-color 0.15s; } .root-layout .eve-search-input::placeholder { color: var(--text-faint); } .root-layout .eve-search-input:focus { border-color: var(--red-line); } .root-layout .eve-search-results { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; } .root-layout .eve-search-row { padding: 16px 22px; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; } .root-layout .eve-search-row:hover { border-color: var(--red-line); transform: translateY(-1px); } .root-layout .eve-search-row__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .root-layout .eve-search-row__href { font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; } .root-layout .eve-search-row__title { font-family: var(--font-display); font-size: 18px; color: var(--text-hi); margin: 0 0 6px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .root-layout .eve-search-row__snippet { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.55; } @media (max-width: 720px) { .root-layout .eve-search-form { flex-direction: column; } .root-layout .eve-search-row__href { display: none; } } /* ─── Section ⑭ Command palette (⌘K overlay) ─────────────────────────────── */ /* Eve styles.css:2636-2802 ported under .root-layout scope. Palette is rendered inline by RootLayout (NOT teleported) so its --red / --line / --text-* tokens cascade from the layout root. position:fixed makes it overlay everything regardless of DOM position. */ .root-layout .cmd-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(2, 4, 7, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: root-cmd-fade 0.15s ease; } @keyframes root-cmd-fade { from { opacity: 0; } to { opacity: 1; } } .root-layout .cmd-palette { width: min(640px, 92vw); background: rgba(8, 12, 17, 0.96); border: 1px solid var(--red-line); position: relative; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 77, 141, 0.1); animation: root-cmd-slide 0.22s ease; } @keyframes root-cmd-slide { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .root-layout .cmd-corners { position: absolute; inset: 0; pointer-events: none; } .root-layout .cmd-corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--red); } .root-layout .cmd-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .root-layout .cmd-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; } .root-layout .cmd-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; } .root-layout .cmd-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .root-layout .cmd-input-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .root-layout .cmd-prompt { font-family: var(--font-mono); font-size: 18px; color: var(--red); } .root-layout .cmd-input-row input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-hi); font-family: var(--font-body); font-size: 15px; letter-spacing: 0.02em; } .root-layout .cmd-input-row input::placeholder { color: var(--text-faint); } .root-layout .cmd-hint { font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); padding: 2px 7px; border: 1px solid var(--line); } .root-layout .cmd-results { max-height: 50vh; overflow-y: auto; padding: 8px 0; } .root-layout .cmd-results::-webkit-scrollbar { width: 6px; } .root-layout .cmd-results::-webkit-scrollbar-thumb { background: var(--line-strong); } .root-layout .cmd-group { padding: 6px 0; } .root-layout .cmd-group-h { padding: 8px 18px 4px; font-size: 9px; letter-spacing: 0.24em; color: var(--text-faint); } .root-layout .cmd-item { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 14px; width: 100%; padding: 10px 18px; background: none; border: none; text-align: left; font-family: var(--font-body); color: var(--text); cursor: pointer; border-left: 2px solid transparent; transition: background 0.1s; } .root-layout .cmd-item-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); } .root-layout .cmd-item-label { font-size: 14px; color: var(--text-hi); letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .root-layout .cmd-item-label :deep(b), .root-layout .cmd-item-label b { color: var(--red-soft); font-weight: 600; } .root-layout .cmd-item-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.06em; } .root-layout .cmd-item-arrow { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); opacity: 0; transition: opacity 0.15s; } .root-layout .cmd-item.active { background: var(--red-bg); border-left-color: var(--red); } .root-layout .cmd-item.active .cmd-item-kind { color: var(--red); } .root-layout .cmd-item.active .cmd-item-arrow { opacity: 1; color: var(--red); } .root-layout .cmd-item.tone-amber.active { background: var(--amber-bg); border-left-color: var(--amber); } .root-layout .cmd-item.tone-amber.active .cmd-item-kind { color: var(--amber); } .root-layout .cmd-item.tone-amber.active .cmd-item-arrow { color: var(--amber); } .root-layout .cmd-item.tone-cyan.active { background: var(--cyan-bg); border-left-color: var(--cyan); } .root-layout .cmd-item.tone-cyan.active .cmd-item-kind { color: var(--cyan); } .root-layout .cmd-item.tone-cyan.active .cmd-item-arrow { color: var(--cyan); } .root-layout .cmd-item.tone-green.active { background: rgba(74, 222, 128, 0.08); border-left-color: var(--green); } .root-layout .cmd-item.tone-green.active .cmd-item-kind { color: var(--green); } .root-layout .cmd-item.tone-green.active .cmd-item-arrow { color: var(--green); } .root-layout .cmd-empty { padding: 32px 18px; text-align: center; color: var(--text-faint); font-size: 11px; letter-spacing: 0.18em; font-family: var(--font-mono); } .root-layout .cmd-foot { display: flex; gap: 18px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); font-family: var(--font-mono); } .root-layout .cmd-key { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--text); } /* ─── Section ⑤ Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .root-layout *, .root-layout *::before, .root-layout *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Marquees stop scrolling — show static first frame (Phase 3+4 add these) */ .root-layout .tick-track, .root-layout .music-player .mp-ticker-track.rolling, .root-layout .mp-eq.on span { animation: none !important; } .root-layout .mp-eq span { transform: scaleY(0.5); } }