/* ============================================================================ fluent.css — THE design-system foundation (single source of truth) ---------------------------------------------------------------------------- Why this file exists: styles.css (9k+ lines) accreted 8 competing chrome blocks and ~75 `!important` rules with no cascade discipline, so every fix spawned another override. This file installs a deterministic spine so the design system always wins — "as if the app was built on it from day 1". CASCADE-LAYER SPINE (order declared once in index.html ): @layer reset, force, legacy, system; · reset — base reset (lowest) · force — !important re-assertions that must beat legacy's !important (earlier layer ⇒ its !important outranks legacy's !important). TRANSITIONAL: shrinks to zero as legacy chrome is deleted. · legacy — ALL of styles.css (wrapped in `@layer legacy {}`). Demoted, so its normal rules can never beat `system`, and its !important is only beaten where `force` explicitly re-asserts. · system — this file's tokens + primitives + chrome (highest normal). RULES OF THE ROAD: 1. ONE token set lives here (`@layer system :root`). Don't add a 4th `:root` in styles.css — change values here. 2. New UI consumes the `.fds-*` primitives + tokens. No new `!important` outside the `force` layer. 3. Component-scoped tokens (--fx-*, --art-*) stay in legacy on purpose — do NOT redefine them globally here or you break explorer/artifact theming. ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ SYSTEM LAYER — tokens, primitives, chrome (clean, no !important) ════════════════════════════════════════════════════════════════════════════ */ @layer system { /* ───────────────────────── TOKENS (canonical) ─────────────────────────── */ :root { /* Base surface · Mica (opaque, warm studio black) */ --bg-deep: #0A0908; --mica: #0C0B0A; --mica-alt: #0F0E0C; --bg-grad-a: #0C0B0A; --bg-grad-b: #100E0C; --bg-grad-c: #0C0E0B; /* Neutral layers (Fluent fills over the base) */ --layer: rgba(255, 255, 255, 0.045); --layer-alt: rgba(255, 255, 255, 0.085); --card: #16130F; --card-alt: #1D1915; --fill-input: rgba(255, 255, 255, 0.04); /* Acrylic (translucent material for chrome + flyouts) */ --acrylic-bg: rgba(18, 16, 13, 0.72); --acrylic-bg-strong: rgba(26, 22, 18, 0.84); --acrylic-bg-faint: rgba(16, 14, 11, 0.55); --acrylic-blur: 30px; --smoke: rgba(0, 0, 0, 0.55); /* Strokes */ --stroke: rgba(255, 255, 255, 0.09); --stroke-subtle: rgba(255, 255, 255, 0.055); --stroke-strong: rgba(255, 255, 255, 0.16); /* Acrylic aliases (former --glass-* names; the .glass utility is retired, these tokens now back .search-glass, sliders + chrome surfaces) */ --glass-bg: var(--acrylic-bg); --glass-bg-strong: var(--acrylic-bg-strong); --glass-bg-faint: var(--acrylic-bg-faint); --glass-border: var(--stroke); --glass-border-strong: var(--stroke-strong); --glass-blur: 30px; --glass-blur-light: 18px; /* Ink (text) */ --ink: #F5F5F5; --ink-soft: rgba(245, 245, 245, 0.78); --ink-mute: rgba(245, 245, 245, 0.55); --ink-faint: rgba(245, 245, 245, 0.36); /* Accent (amber — the single warm signal) */ --accent: #FFD080; --accent-hover: #FFE0A0; --accent-active: #E0B36A; --accent-fg: #0A0908; --accent-hot: #C49A5A; --accent-cool: #8A9AA0; --accent-warm: #C8A04A; /* Brand / category identity (Figma Folio vars) */ --folio-lm: #F5F5F5; /* White LM */ --folio-dm: #1A1A1A; /* Black DM */ --folio-mi: #FF0000; /* Moving Images / clients (red) */ --folio-vs: #D4FF00; /* Visual Studios / roles (acid yellow) */ --folio-neutral: #2E2E2E; /* Role / category colours — warm cinematic palette */ --role-moving-images: #C49A5A; --role-visual-systems: #B8A468; --role-comp-culture: #8A9AA0; --role-doc-research: #C8A04A; --role-leadership-edu: #9AA878; --role-other: #A89878; /* Geometry — Fluent 2 rounded scale */ --radius-control: 4px; --radius-card: 8px; --radius-overlay: 8px; --radius-lg: 8px; --radius-md: 6px; --radius-sm: 4px; --radius-pill: 999px; /* Elevation — Fluent 2 ambient + directional shadow pairs */ --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.32), 0 0 2px rgba(0, 0, 0, 0.28); --shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.40), 0 0 2px rgba(0, 0, 0, 0.30); --shadow-dialog: 0 32px 64px rgba(0, 0, 0, 0.50), 0 0 8px rgba(0, 0, 0, 0.34); --shadow-glass: var(--shadow-flyout); --shadow-float: var(--shadow-dialog); /* Chrome material — semantic tokens for the app shell (decoupled from the app-wide --glass-* so retuning chrome never disturbs overlays). */ --chrome-bg: rgba(20, 18, 15, 0.74); --chrome-bg-strong: rgba(26, 22, 18, 0.86); --chrome-stroke: rgba(255, 255, 255, 0.12); --chrome-fg: #F5F5F5; --chrome-fg-mute: rgba(245, 245, 245, 0.60); --chrome-blur: 20px; --sheet-bg: #3E3730; --sheet-stroke: rgba(225, 180, 115, 0.45); --page-bg: #0C0C0C; /* Typography */ --font-ui: "Geist", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --font-data: "Cascadia Code", "Geist Mono", ui-monospace, SFMono-Regular, monospace; --font-identity: "Instrument Serif", Georgia, serif; --font-year: "Climate Crisis", Impact, sans-serif; --font-human: "Caveat", "Instrument Serif", cursive; /* Type ramp (size / line-height / weight / tracking) */ --type-caption: 12px; --type-body: 14px; --type-body-lh: 1.5; --type-subtitle: 16px; --type-title: 20px; --type-title-lh: 1.3; --type-large: 28px; --type-display: clamp(34px, 4vw, 56px); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --track-label: 0.04em; /* Motion */ --t-fast: 180ms cubic-bezier(0.33, 0, 0.67, 1); --t-med: 320ms cubic-bezier(0.33, 0, 0.67, 1); --t-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1); --focus-ring: var(--accent); color-scheme: dark; } /* ───────────────── LIGHT THEME — flips the same names ──────────────────── */ [data-theme="light"] { --bg-deep: #F3F2F1; --mica: #F3F2F1; --mica-alt: #FAF9F8; --bg-grad-a: #F3F2F1; --bg-grad-b: #F3F2F1; --bg-grad-c: #E9E7E4; --layer: rgba(0, 0, 0, 0.035); --layer-alt: rgba(0, 0, 0, 0.065); --card: #FFFFFF; --card-alt: #FAF9F8; --fill-input: rgba(0, 0, 0, 0.035); --acrylic-bg: rgba(252, 252, 251, 0.80); --acrylic-bg-strong: rgba(255, 255, 255, 0.90); --acrylic-bg-faint: rgba(248, 248, 246, 0.62); --smoke: rgba(0, 0, 0, 0.30); --stroke: rgba(0, 0, 0, 0.10); --stroke-subtle: rgba(0, 0, 0, 0.06); --stroke-strong: rgba(0, 0, 0, 0.18); --ink: #1A1714; --ink-soft: rgba(26, 23, 20, 0.78); --ink-mute: rgba(26, 23, 20, 0.55); --ink-faint: rgba(26, 23, 20, 0.35); --accent-active: #C49A5A; --accent-fg: #0A0908; --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.10), 0 0 2px rgba(0, 0, 0, 0.10); --shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.10); --shadow-dialog: 0 32px 64px rgba(0, 0, 0, 0.18), 0 0 8px rgba(0, 0, 0, 0.10); --chrome-bg: rgba(255, 255, 255, 0.82); --chrome-bg-strong: rgba(255, 255, 255, 0.92); --chrome-stroke: rgba(26, 23, 20, 0.16); --chrome-fg: #1A1A1A; --chrome-fg-mute: rgba(26, 23, 20, 0.58); --sheet-bg: #EADCB9; --sheet-stroke: rgba(160, 120, 70, 0.45); --page-bg: #F3F2F1; --focus-ring: #1A1A1A; color-scheme: light; } /* ════════════════════════ PRIMITIVES (.fds-*) ═══════════════════════════ Reusable building blocks. The chrome below is authored ON these so the system is dogfooded; future markup should reach for these classes too. */ .fds-acrylic { background: var(--chrome-bg); border: 1px solid var(--chrome-stroke); -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(150%); backdrop-filter: blur(var(--chrome-blur)) saturate(150%); box-shadow: var(--shadow-flyout); } .fds-card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* Button — Fluent 2 neutral default, stealth + accent variants */ .fds-btn { font-family: var(--font-ui); font-size: var(--type-body); font-weight: var(--weight-semibold); line-height: 1; color: var(--ink); background: var(--layer); border: 1px solid var(--stroke); border-radius: var(--radius-control); min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .fds-btn:hover { background: var(--layer-alt); } .fds-btn:active { background: var(--layer); } .fds-btn--stealth { background: transparent; border-color: transparent; color: var(--ink-mute); } .fds-btn--stealth:hover { background: var(--layer); color: var(--ink); } .fds-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .fds-btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Pill container (filter rows, tag groups) */ .fds-pill-bar { display: inline-flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--radius-pill); background: var(--chrome-bg); border: 1px solid var(--chrome-stroke); -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(140%); backdrop-filter: blur(var(--chrome-blur)) saturate(140%); } /* Input field */ .fds-input { font-family: var(--font-ui); font-size: var(--type-body); color: var(--ink); background: var(--fill-input); border: 1px solid var(--stroke); border-radius: var(--radius-control); min-height: 32px; padding: 0 12px; outline: none; transition: border-color var(--t-fast), background var(--t-fast); } .fds-input::placeholder { color: var(--ink-faint); } .fds-input:focus { border-color: var(--accent); } /* Typography utilities */ .fds-caption { font: var(--weight-regular) var(--type-caption)/1.4 var(--font-ui); } .fds-body { font: var(--weight-regular) var(--type-body)/var(--type-body-lh) var(--font-ui); } .fds-subtitle { font: var(--weight-semibold) var(--type-subtitle)/var(--type-title-lh) var(--font-ui); } .fds-title { font: var(--weight-semibold) var(--type-title)/var(--type-title-lh) var(--font-ui); } .fds-display { font: var(--weight-bold) var(--type-display)/1.05 var(--font-identity); } .fds-mono { font-family: var(--font-data); } /* ════════════════════════ APP CHROME (rebuilt clean) ════════════════════ One authoritative definition of the top bar, nav tabs, search, theme toggle, filter pills, stats and the dossier sheet. Targets the REAL native controls (button.navlink, input.search-glass, input#themeToggle) — not the dead shells the legacy CSS still references. Positions match the shipped Folio home so layout doesn't jump. */ /* Page background follows theme */ body.folio-home { background: var(--page-bg); } /* Top command row — transparent, tabs at left */ body.folio-home .topnav { position: fixed; top: 12px; left: 26px; right: 26px; height: auto; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 58; } body.folio-home .topnav-links { display: flex; align-items: center; gap: 16px; margin: 0; } /* search + theme toggle live inline at the right end of the bar */ body.folio-home .topnav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } /* Pivot tabs — stealth buttons + active underline */ body.folio-home .navlink { font-family: var(--font-ui); font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; height: 42px; padding: 0 18px; line-height: 1; border: 0; border-radius: var(--radius-control); cursor: pointer; background: transparent; color: var(--chrome-fg-mute); display: inline-flex; align-items: center; position: relative; transition: color var(--t-fast), background var(--t-fast); } body.folio-home .navlink:hover { background: var(--layer); color: var(--chrome-fg); } body.folio-home .navlink.active { background: transparent; color: var(--chrome-fg); } body.folio-home .navlink.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; background: var(--accent); border-radius: 2px; } body.folio-home .navlink-sub { font-family: var(--font-data); font-size: 10px; opacity: 0.7; margin-left: 5px; } body.folio-home .navlink-sep { color: var(--chrome-fg-mute); opacity: 0.5; } /* The dossier sheet — the 3D stage panel */ body.folio-home main { padding: 0; } body.folio-home .workspace { display: block; height: 100%; padding: 0; } body.folio-home .map-stage { position: fixed; top: 54px; left: 18px; right: 18px; bottom: 18px; width: auto; height: auto; margin: 0; background: var(--sheet-bg); border: 1px solid var(--sheet-stroke); border-radius: 24px; overflow: hidden; z-index: 10; } body.folio-home .terrain-stage, body.folio-home .terrain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Filter pills — bold vertical rail on the LEFT edge. Each role is a big, legible row with a colour-coded icon chip so the disciplines read at a glance instead of a cramped horizontal scroller that ran off-screen. Collapsible via toggle button to unblock the 3D canvas. */ body.folio-home .filter-bar { position: fixed; left: 24px; top: 50%; right: auto; bottom: auto; transform: translateY(-50%); width: auto; max-width: none; padding: 0; background: transparent; border: 0; z-index: 35; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } body.folio-home .filter-bar.collapsed .filter-pills { display: none !important; } body.folio-home .filter-toggle { width: 44px; height: 44px; border-radius: var(--radius-card); background: var(--chrome-bg-strong); border: 1px solid var(--chrome-stroke); color: var(--chrome-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(160%); backdrop-filter: blur(var(--chrome-blur)) saturate(160%); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); flex-shrink: 0; } body.folio-home .filter-toggle svg { width: 22px; height: 22px; } body.folio-home .filter-toggle:hover { background: var(--layer); transform: rotate(90deg); } body.folio-home .filter-pills { width: auto; max-height: 80vh; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: var(--radius-card); background: var(--chrome-bg-strong); border: 1px solid var(--chrome-stroke); box-shadow: var(--shadow-flyout); -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(160%); backdrop-filter: blur(var(--chrome-blur)) saturate(160%); overflow-y: auto; scrollbar-width: none; } body.folio-home .filter-pills::-webkit-scrollbar { display: none; } body.folio-home .rolepill { border: 1.5px solid transparent; background: transparent; border-radius: var(--radius-card); min-height: 52px; height: auto; padding: 8px 24px 8px 8px; color: var(--chrome-fg); gap: 14px; max-width: none; width: 100%; flex: 0 0 auto; white-space: nowrap; justify-content: flex-start; display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 16px; font-weight: 600; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } body.folio-home .rolepill:hover { background: var(--layer); transform: translateX(2px); } body.folio-home .rolepill.active { background: var(--layer-alt); border-color: var(--pill-color, var(--accent)); } body.folio-home .rolepill-icon { width: 24px; height: 24px; flex: 0 0 auto; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--pill-color); box-shadow: none; } body.folio-home .rolepill-icon svg { width: 20px; height: 20px; display: block; } body.folio-home .rolepill-label { font-family: var(--font-ui); font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--chrome-fg); } /* Search — inline pill at the right of the top bar (native input) */ body.folio-home .search-wrap { position: relative; display: flex; align-items: center; width: clamp(240px, 24vw, 360px); flex: 0 0 auto; top: auto; right: auto; left: auto; bottom: auto; } body.folio-home input.search-glass { width: 100%; height: 42px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1px solid var(--chrome-stroke); background: var(--chrome-bg-strong); color: var(--chrome-fg); font-family: var(--font-data); font-size: 15px; padding: 0 16px 0 46px; outline: none; -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(150%); backdrop-filter: blur(var(--chrome-blur)) saturate(150%); box-shadow: var(--shadow-card); transition: border-color var(--t-fast), box-shadow var(--t-fast); } body.folio-home input.search-glass:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); } body.folio-home input.search-glass::placeholder { color: var(--chrome-fg-mute); } body.folio-home .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--chrome-fg-mute); pointer-events: none; z-index: 2; display: inline-flex; } body.folio-home .search-icon img { width: 22px !important; height: 22px !important; } body.folio-home .search-chips { position: absolute; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; background: transparent; border: 0; z-index: 5; } body.folio-home .search-chips:empty { display: none; } /* Theme toggle — native checkbox, inline after the search field. MUST be position:relative (not static): the knob ::before is position:absolute and anchors to the nearest positioned ancestor — with static it flew to the top-left corner as a stray white dot over the archive tab. */ body.folio-home input#themeToggle.theme-switch { position: relative; flex: 0 0 auto; top: auto; right: auto; left: auto; bottom: auto; } /* Stats readout — top-left/overlay */ body.folio-home #statsPanel { left: 32px; top: 96px; } body.folio-home #statsPanel strong { font-family: var(--font-data); font-weight: 700; line-height: 1; color: var(--chrome-fg); } body.folio-home #statsPanel span { font-family: var(--font-data); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--chrome-fg-mute); } /* Loader copy rotates through recruiter-facing proof while the city loads. Reserve two title lines so the progress bar stays still as phrases change. */ body.folio-home .loader-inner { width: min(360px, calc(100vw - 48px)); } body.folio-home .loader-title { min-height: 2em; display: grid; place-items: end center; text-wrap: balance; } body.folio-home .loader-subtitle, body.folio-home .loader-status { min-height: 1.4em; } } /* ════════════════════════════════════════════════════════════════════════════ FORCE LAYER — re-assertions that must beat legacy's !important ---------------------------------------------------------------------------- `force` is declared BEFORE `legacy`, so among !important declarations it outranks legacy. Only the properties legacy pins with !important on REAL elements need to appear here; everything else is handled cleanly in `system`. Values reference the same tokens — no drift. As legacy chrome blocks are deleted, delete the matching line here. ════════════════════════════════════════════════════════════════════════════ */ @layer force { /* Keep chrome out of the way of full-screen overlays (legacy relied on a :has() display:none !important — preserve the behaviour authoritatively). */ body.folio-home:has(:is(.gallery-overlay, .gallery-artifact).visible) :is(.topnav, .search-wrap, input#themeToggle, .theme-switch), body.folio-home:has(:is(.project-page, .gallery-overlay, .gallery-artifact, .nav-page).visible) :is(.filter-bar, #statsPanel) { display: none !important; } /* Nav tabs — legacy forces colour/bg/height with !important */ body.folio-home .navlink { background: transparent !important; color: var(--chrome-fg-mute) !important; height: 42px !important; font-size: 16px !important; opacity: 1 !important; filter: none !important; } body.folio-home .navlink:hover { background: var(--layer) !important; color: var(--chrome-fg) !important; } body.folio-home .navlink.active, body.folio-home .navlink.active[data-view] { background: transparent !important; color: var(--chrome-fg) !important; } /* Role pills — beat legacy's transparent-icon + active-fill forces so the colour-coded chips and the new vertical-rail active state survive. */ body.folio-home .rolepill-icon { background: transparent !important; color: var(--pill-color) !important; box-shadow: none !important; } body.folio-home .rolepill.active .rolepill-icon { color: var(--pill-color) !important; } body.folio-home .rolepill.active { border-color: var(--pill-color, var(--accent)) !important; } /* Stats — legacy forces position + font + colour. Left-anchored top HUD: the old `left:50% + translateX(-50%)` centring leaked its transform onto the pixel-left position, shoving the first stat ("89 PROJECTS") off-screen. */ body.folio-home #statsPanel { left: 32px !important; transform: none !important; top: 96px !important; } body.folio-home #statsPanel strong { font-family: var(--font-data) !important; font-weight: 700 !important; line-height: 1 !important; color: var(--chrome-fg) !important; text-shadow: none !important; } body.folio-home #statsPanel span { font-family: var(--font-data) !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--chrome-fg-mute) !important; text-shadow: none !important; } /* Search — beat legacy's competing fixed-position + colour generations (8590 top:14/right:200, 8769 right:96, 9047 relative). The field is now an inline pill inside .topnav-actions. */ body.folio-home .search-wrap { position: relative !important; width: clamp(240px, 24vw, 360px) !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; } body.folio-home input.search-glass { width: 100% !important; color: var(--chrome-fg) !important; background: var(--chrome-bg-strong) !important; border: 1px solid var(--chrome-stroke) !important; } body.folio-home input.search-glass::placeholder { color: var(--chrome-fg-mute) !important; } body.folio-home .search-icon { color: var(--chrome-fg-mute) !important; } /* Theme toggle — inline in topnav-actions; relative (NOT static) so the absolute knob ::before anchors inside the pill instead of flying to the top-left corner as a stray white dot. */ body.folio-home input#themeToggle.theme-switch { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; } /* Filter bar — beat legacy's competing position generations. Now a vertical rail pinned to the LEFT edge, centred vertically. */ body.folio-home .filter-bar { position: fixed !important; left: 52px !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: auto !important; } body.folio-home .rolepill { color: var(--chrome-fg) !important; } /* Topnav — enforce symmetric viewport margins (26px each side) so the theme toggle and brand have equal breathing room. Beats legacy's asymmetric right:16px/left:22px overrides. */ body.folio-home .topnav { left: 26px !important; right: 26px !important; top: 12px !important; } body.folio-home .rolepill.active { background: var(--layer-alt) !important; color: var(--chrome-fg) !important; } body.folio-home .rolepill.active .rolepill-label { color: var(--chrome-fg) !important; } /* Stray gallery brand-dot leaking onto the home chrome (top-left, over archive) */ body.folio-home .gallery-dot { display: none !important; } .gallery-overlay.visible .gallery-dot { display: inline-block !important; } /* Kill the brand logo dot/anchor on the home outright (the white-ish circle over the archive tab). The element is also removed from index.html; this is the belt-and-suspenders so no cached CSS can ever paint it. */ body.folio-home .brand, body.folio-home .brand-dot, .topnav .brand-dot { display: none !important; } /* Stats — kill the ugly opaque side panel; make it a clean transparent readout */ body.folio-home #statsPanel { left: 26px !important; top: 96px !important; bottom: auto !important; width: auto !important; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.folio-home #statsPanel .stat-value { font-size: clamp(24px, 2.8vw, 36px) !important; } /* Explorer sheet → exactly match the home map-stage panel (legacy pins these; the authoritative bento geometry lives in the BENTO SHELL block below) */ .fx-sheet { background: var(--sheet-bg) !important; border: var(--panel-stroke-w, 2px) solid var(--sheet-stroke) !important; border-radius: var(--panel-radius, 16px) !important; } /* Back button: respect the `hidden` attr the JS sets at grid level. Legacy `.fx-back{display:flex !important}` was overriding it, floating it over the first card; force (earlier layer) out-ranks legacy's !important. */ .fx-back[hidden] { display: none !important; } } /* ============================================================================ CONTINUITY — stats typography + make the roles/clients explorer use the SAME top-bar language as the home, so switching views no longer jumps between two different-looking components (was: home text-tabs vs explorer colored manila). ============================================================================ */ @layer system { body.folio-home .stats-panel-inner { display: flex; flex-direction: row; gap: 36px; align-items: center; } body.folio-home #statsPanel .stat-row { display: flex; align-items: baseline; gap: 10px; } body.folio-home #statsPanel .stat-value { font-family: var(--font-data); font-weight: 700; line-height: 1; color: var(--chrome-fg); font-size: clamp(24px, 2.8vw, 36px); } body.folio-home #statsPanel .stat-label { font-family: var(--font-data); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--chrome-fg-mute); } /* Explorer page → same transparent page + rounded sheet as the home */ .fx { background: var(--page-bg); color: var(--ink); padding: 52px 18px 18px; } .fx-sheet { background: var(--sheet-bg); border: var(--panel-stroke-w, 2px) solid var(--sheet-stroke); border-radius: var(--panel-radius, 16px); } /* Explorer tab row → identical to the home top bar (stealth tabs, amber underline) */ .fx-tabrow { position: absolute; left: 26px; right: 26px; top: 12px; height: 40px; display: flex; align-items: center; gap: 2px; z-index: 3; } .fx-ftab { font-family: var(--font-ui); font-size: 16px; font-weight: 600; letter-spacing: 0; height: 42px; padding: 0 18px; line-height: 1; border: 0; border-radius: var(--radius-control); cursor: pointer; background: transparent; color: var(--chrome-fg-mute); display: inline-flex; align-items: center; gap: 8px; position: relative; transition: color var(--t-fast), background var(--t-fast); } .fx-ftab:hover { height: 42px; background: var(--layer); color: var(--chrome-fg); filter: none; } .fx-ftab.is-active { height: 42px; background: transparent; color: var(--chrome-fg); } .fx-ftab.is-active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; } /* drop the lime/red manila fills in both themes */ .fx-ftab--home, .fx-ftab--roles, .fx-ftab--clients { background: transparent; color: var(--chrome-fg-mute); } .fx-ftab--home.is-active, .fx-ftab--roles.is-active, .fx-ftab--clients.is-active { background: transparent; color: var(--chrome-fg); } .fx-ftab--home svg { width: 16px; height: 16px; display: block; } } :root[data-theme="light"] .fx-ftab, :root[data-theme="light"] .fx-ftab--home, :root[data-theme="light"] .fx-ftab--roles, :root[data-theme="light"] .fx-ftab--clients { background: transparent; color: var(--chrome-fg-mute); } :root[data-theme="light"] .fx-ftab.is-active { color: var(--chrome-fg); } /* ============================================================================ CLUSTER LIST — clean readable card grid shown when a building maps to several entries (replaces the low-contrast manila cascade). Mirrors the explorer sheet + file cards so building clicks read like the rest of the app. ============================================================================ */ @layer system { .project-page .cl-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 52px 18px 18px; background: var(--page-bg); color: var(--ink); font-family: var(--font-ui); } .cl-head { display: flex; align-items: center; gap: 16px; padding: 0 8px 18px; flex: 0 0 auto; } .cl-head-text { display: flex; flex-direction: column; gap: 2px; } .cl-title { margin: 0; font-weight: 700; font-size: clamp(20px, 2.4vw, 32px); text-transform: lowercase; letter-spacing: 0; color: var(--ink); line-height: 1.1; } .cl-count { font-family: var(--font-data); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; } .cl-back-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--sheet-stroke); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .cl-back-btn:hover { background: var(--layer); border-color: var(--accent); color: var(--accent); transform: scale(1.05); } .project-page:has(.cl-page) #projectPageClose, .project-page:has(.cl-page) #projectBack { display: none !important; } .cl-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-content: start; padding: 20px; background: var(--sheet-bg); border: var(--panel-stroke-w, 2px) solid var(--sheet-stroke); border-radius: var(--panel-radius, 16px); } .cl-card { display: flex; flex-direction: column; text-align: left; cursor: pointer; border: 1px solid var(--stroke); border-radius: var(--radius-card); overflow: hidden; background: var(--card); color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .cl-card:hover { border-color: var(--accent); background: var(--card-alt); transform: translateY(-2px); } .cl-card-thumb { display: block; aspect-ratio: 16 / 10; background: var(--layer); overflow: hidden; } .cl-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cl-card-ph { display: block; width: 100%; height: 100%; background: var(--layer); } .cl-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; } .cl-card-title { font-family: var(--font-ui); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink); } .cl-card-meta { font-family: var(--font-data); font-size: 11px; color: var(--ink-mute); } } /* ============================================================================ ARTIFACT (canonical single-entry view) — robust layout. The legacy stage centred its 3 columns and, when it collapsed at narrow widths, the rows overlapped (description ran over the hero image). Top-align the columns, force long titles to wrap, and stack as a real flex column when narrow so nothing can overlap at any width. ============================================================================ */ @layer system { /* Centre the columns vertically again (the image caps below now prevent the old overlap on their own, so we don't need the top-align workaround). */ .gallery-artifact .artifact-stage { align-items: center; gap: clamp(28px, 3vw, 44px); } .gallery-artifact .artifact-left, .gallery-artifact .artifact-right { align-self: center; min-width: 0; overflow: visible; } /* The hero column gets min-width:0 + the media caps at 100% of its TRACK so a wide image can no longer spill 46vw into the side columns (the Rabble Labs overlap). Height cap keeps it from pushing the stage taller than the view. */ .gallery-artifact .artifact-hero { align-self: center; min-width: 0; max-width: 100%; } .gallery-artifact .artifact-hero img, .gallery-artifact .artifact-hero video, .gallery-artifact .artifact-hero iframe { max-width: 100%; max-height: 74vh; } .gallery-artifact .artifact-title { overflow-wrap: anywhere; hyphens: auto; } @media (max-width: 1000px) { .gallery-artifact .artifact-stage { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 100%; gap: 28px; overflow-y: auto; padding: 72px 24px 40px; } .gallery-artifact .artifact-hero img, .gallery-artifact .artifact-hero video, .gallery-artifact .artifact-hero iframe { max-width: 100%; max-height: 52vh; } } } /* ════════════════════════════════════════════════════════════════════════ BENTO SHELL (rev 2026-07-16) — ONE authoritative chrome generation. The manila folder-tab silhouette (clip-path/shape() notch) is GONE. Every top-level surface is ONE plain rectangle: 2px border, one radius, one uniform margin — applied identically to the archive (.map-stage), the explorer (.fx-sheet), the codex (.np-codex) and the cluster grid. Visible chrome = a single hamburger button; search + dark-mode + section links all live in its flyout. Written in @layer force so it outranks every earlier chrome generation in styles.css/fluent.css — no mixup. ════════════════════════════════════════════════════════════════════════ */ @layer force { :root { --panel-margin: 18px; /* ONE margin between every panel edge and the viewport */ --panel-radius: 16px; /* ONE corner radius for every top-level panel */ --panel-stroke-w: 2px; /* ONE bento border weight */ --chrome-inset: 30px; /* hamburger distance from the viewport right edge */ --chrome-top: 30px; /* hamburger distance from the viewport top (inside the panel) */ } /* ── NAVIGATION BAR → a single floating hamburger, top-right, INSIDE the panel rectangle. The bar itself is a transparent, non-interactive strip; only its children take pointer events. ─────────────────────────────── */ body.folio-home .topnav { position: fixed !important; top: var(--chrome-top) !important; height: 38px !important; left: var(--chrome-inset) !important; right: var(--chrome-inset) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; padding: 0 !important; box-sizing: border-box !important; z-index: 100 !important; pointer-events: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.folio-home .topnav * { pointer-events: auto !important; } body.folio-home .topnav-actions { display: flex !important; align-items: center !important; gap: 12px !important; } /* The explorer's own duplicate pill row is retired: it existed to sit behind the old topnav pills; once those collapsed into the hamburger the duplicates surfaced and collided with the chrome cluster. The flyout is the one navigation surface now. */ .fx-tabrow { display: none !important; } /* ── BENTO BODY → every panel is the same plain rectangle ─────────────── */ body.folio-home .map-stage, .fx-sheet { clip-path: none !important; border-radius: var(--panel-radius) !important; background: var(--sheet-bg) !important; border: var(--panel-stroke-w) solid var(--sheet-stroke) !important; filter: none !important; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35) !important; } body.folio-home .map-stage-wrapper { position: fixed !important; inset: var(--panel-margin) !important; width: auto !important; height: auto !important; pointer-events: none; filter: none !important; z-index: 10 !important; } body.folio-home .map-stage { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: auto; overflow: hidden !important; } /* The explorer sheet renders in two shapes — with a .fx-sheet-wrapper (roles/clients) and as a direct .fx child (case studies). Anchor the rectangle to the viewport-filling ancestor with the SAME inset in both, so every section gets the identical bento geometry. */ body.folio-home .fx { padding: 0 !important; } .fx-sheet-wrapper { position: absolute; inset: 0; width: auto !important; height: auto !important; pointer-events: none; filter: none !important; } .fx-sheet { position: absolute !important; inset: var(--panel-margin) !important; pointer-events: auto; width: auto !important; height: auto !important; overflow: hidden !important; } /* Codex (big-type list view) — same rectangle, not a full-bleed takeover. Fixed to the viewport; the ancestors' identity transform (nav-page-inner) and padding (nav-page, 80/0/64) would otherwise become the containing block and skew the bento margin, so codex-mode neutralizes both. */ .np-codex { position: fixed !important; inset: var(--panel-margin) !important; border-radius: var(--panel-radius) !important; background: var(--sheet-bg) !important; border: var(--panel-stroke-w) solid var(--sheet-stroke) !important; overflow: hidden !important; } body.folio-home .nav-page.codex-mode { padding: 0 !important; } body.folio-home .nav-page.codex-mode .nav-page-inner { transform: none !important; padding: 0 !important; } /* Cluster entry grid — match the bento border weight + radius. */ .cl-grid { border: var(--panel-stroke-w) solid var(--sheet-stroke) !important; border-radius: var(--panel-radius) !important; } /* The onboarding tour narrates the 3D city; it has no business floating over ANY overlay surface (explorers, project reader, entry detail, gallery). Hidden while one is open — it resumes untouched when the user returns to the archive. */ body:has(.nav-page.visible) #onboardTooltip, body:has(.nav-page.visible) #onboardHighlight, body:has(.project-page.visible) #onboardTooltip, body:has(.project-page.visible) #onboardHighlight, body.project-open #onboardTooltip, body.project-open #onboardHighlight, body:has(.detail-panel[aria-hidden="false"]) #onboardTooltip, body:has(.detail-panel[aria-hidden="false"]) #onboardHighlight, body:has(.gallery-overlay.visible) #onboardTooltip, body:has(.gallery-overlay.visible) #onboardHighlight, body:has(.gallery-artifact.visible) #onboardTooltip, body:has(.gallery-artifact.visible) #onboardHighlight { display: none !important; } /* Stats readout — senior-designer styled HUD widget */ body.folio-home #statsPanel { left: 52px !important; top: 116px !important; bottom: auto !important; width: auto !important; height: auto !important; padding: 16px 28px !important; background: var(--chrome-bg-strong) !important; border: 1.5px solid var(--sheet-stroke) !important; border-radius: 18px !important; box-shadow: var(--shadow-card), 0 10px 30px rgba(0, 0, 0, 0.15) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; backdrop-filter: blur(16px) saturate(140%) !important; transition: transform var(--t-fast) ease, border-color var(--t-fast) ease !important; } body.folio-home #statsPanel:hover { border-color: var(--accent) !important; transform: translateY(-2px) !important; } body.folio-home #statsPanel .stats-panel-inner { display: flex !important; flex-direction: row !important; gap: 36px !important; align-items: center !important; } body.folio-home #statsPanel .stat-row { display: flex !important; align-items: baseline !important; gap: 10px !important; } body.folio-home #statsPanel .stat-row:not(:last-child) { border-right: 1px solid var(--sheet-stroke) !important; padding-right: 18px !important; } body.folio-home #statsPanel strong, body.folio-home #statsPanel .stat-value { font-family: var(--font-ui) !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: var(--chrome-fg) !important; text-shadow: none !important; } body.folio-home #statsPanel span, body.folio-home #statsPanel .stat-label { font-family: var(--font-data) !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--chrome-fg-mute) !important; margin-top: 2px !important; text-shadow: none !important; } /* Explorer scroller fixes — unify all inner views to flow naturally inside .fx-main */ .fx.is-codex .fx-files, .fx.is-single .fx-single { position: relative !important; inset: auto !important; overflow: visible !important; height: auto !important; } .fx-main { min-height: 0 !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Dock the sidebar directly below the stats panel */ body.folio-home .filter-bar { position: fixed !important; left: 52px !important; top: 218px !important; /* Exactly 32px below the stats panel bottom */ bottom: auto !important; transform: none !important; width: auto !important; } /* The explorer header starts below the floating hamburger and never runs under it: the button occupies the top-right corner inside the panel. */ .fx-sheet .fx-chrome { padding-top: 22px !important; padding-right: 84px !important; } /* the archive toolbar sits top-left inside the panel */ body.folio-home .map-toolbar { left: 18px !important; right: auto !important; } /* Compact screens: same bento rhythm, tighter numbers. */ @media (max-width: 720px) { :root { --panel-margin: 12px; --panel-radius: 14px; --chrome-inset: 22px; --chrome-top: 22px; } .fx-sheet .fx-chrome { padding-right: 72px !important; } } } /* ════════════════════════════════════════════════════════════════════════ HAMBURGER NAV (rev 2026-07-13) — the five section tabs collapse into a flyout. Visible chrome cluster = Search · Dark-mode · Menu. Appended LAST in @layer force so it outranks the earlier inline-pill nav generation. Also: (d) resets the search icon to a centred flex child, and re-tunes the folder tab now that the nav cluster is small (bigger manila, cleaner notch). ════════════════════════════════════════════════════════════════════════ */ @layer force { /* ── (d) SEARCH ICON — the old design pinned it position:absolute/left:16px; the flex-circle never reset that, so it sat off-centre. Make it a normal centred flex child again. ─────────────────────────────────────────────── */ body.folio-home .search-wrap .search-icon { position: static !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px; height: 20px; line-height: 0; } body.folio-home .search-wrap .search-icon img { width: 18px !important; height: 18px !important; display: block; } /* ── MENU (hamburger) button — matches the search circle ────────────────── */ body.folio-home .nav-menu-toggle { width: 38px !important; height: 38px !important; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px !important; border: 1px solid var(--chrome-stroke) !important; background: var(--chrome-bg-strong) !important; color: var(--chrome-fg) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } body.folio-home .nav-menu-toggle:hover { background: var(--layer) !important; border-color: var(--chrome-stroke-strong, var(--chrome-stroke)) !important; } body.folio-home .nav-menu-toggle .nav-menu-icon-close { display: none; } body.folio-home .topnav.nav-open .nav-menu-toggle { background: var(--accent) !important; color: #1A1714 !important; border-color: var(--accent) !important; } body.folio-home .topnav.nav-open .nav-menu-toggle .nav-menu-icon { display: none; } body.folio-home .topnav.nav-open .nav-menu-toggle .nav-menu-icon-close { display: block; } /* ── FLYOUT PANEL — .topnav-links becomes a dropdown card, hidden until open ── */ body.folio-home .topnav-links { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important; min-width: 224px; max-width: 82vw; margin: 0 !important; padding: 8px !important; border-radius: 16px !important; background: var(--chrome-bg-strong) !important; border: 1px solid var(--chrome-stroke) !important; box-shadow: var(--shadow-flyout) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; backdrop-filter: blur(22px) saturate(160%) !important; transform-origin: top right; z-index: 70; /* Closed = REMOVED from the page entirely. opacity:0 + pointer-events:none was not enough — the invisible flyout still captured clicks (a descendant link re-enabled pointer-events), so its "download folio" link overlapped and stole clicks from the anirudh.website case-study folder at wide viewports. display:none cannot be overridden by any descendant. */ display: none !important; } body.folio-home .topnav.nav-open .topnav-links { display: flex !important; animation: navFlyoutIn 0.16s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes navFlyoutIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.folio-home .topnav.nav-open .topnav-links { animation: none !important; } } /* menu rows — full-width, left-aligned, capitalised */ body.folio-home .topnav-links .navlink { width: 100% !important; height: 40px !important; padding: 0 12px !important; justify-content: flex-start !important; border-radius: 10px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--chrome-fg) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: capitalize; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.folio-home .topnav-links .navlink:hover { background: var(--layer) !important; border-color: transparent !important; } body.folio-home .topnav-links .navlink.active { background: var(--accent) !important; color: #1A1714 !important; border-color: var(--accent) !important; } body.folio-home .topnav-links .navlink-sub { margin-left: auto !important; font-size: 10px !important; opacity: 0.7; font-weight: 600; } body.folio-home .topnav-links .navlink--contact { gap: 8px !important; } body.folio-home .topnav-links .navlink--contact > img:first-child { display: inline-block !important; width: 18px !important; height: 18px !important; object-fit: contain; } /* the absolutely-positioned "available now" sticker hangs outside the flyout edge — the pigeon icon + label carry the row on their own */ body.folio-home .topnav-links .navlink--contact .available-sticker { display: none !important; } /* folio download row — accent-tinted, sits at the bottom of the flyout */ body.folio-home .nav-folio-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 42px; margin-top: 5px; padding: 0 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--chrome-fg); font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); } body.folio-home .nav-folio-link:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); } body.folio-home .nav-folio-link svg { color: var(--accent); flex: 0 0 auto; } /* ── IN-MENU SEARCH — the search field is the flyout's first row: always expanded, full width, no hover choreography. ─────────────────────────── */ body.folio-home .topnav-links .nav-menu-search { width: 100%; } body.folio-home .topnav-links .search-wrap { width: 100% !important; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--chrome-stroke) !important; background: var(--layer) !important; cursor: text; transition: border-color var(--t-fast), box-shadow var(--t-fast); } body.folio-home .topnav-links .search-wrap:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; } body.folio-home .topnav-links input.search-glass { flex: 1 1 auto; width: auto !important; min-width: 0; border: 0 !important; background: transparent !important; padding: 0 !important; opacity: 1 !important; outline: none !important; box-shadow: none !important; font-family: var(--font-ui); font-size: 13.5px; color: var(--chrome-fg); } /* chips + clear-filters wrap under the field instead of overflowing the row */ body.folio-home .topnav-links .search-chips { display: contents; } body.folio-home .topnav-links .active-filters-container { flex: 0 0 auto; } /* ── IN-MENU DARK MODE — a labelled row wrapping the existing switch. ──── */ body.folio-home .topnav-links .nav-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; color: var(--chrome-fg); font-family: var(--font-ui); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--t-fast); } body.folio-home .topnav-links .nav-menu-theme:hover { background: var(--layer); } body.folio-home .topnav-links .nav-menu-theme .theme-switch { flex: 0 0 auto; margin: 0; } /* divider between the utility rows (search/theme) and the section links */ body.folio-home .topnav-links .nav-menu-divider { height: 1px; margin: 3px 4px; background: var(--chrome-stroke); border: 0; flex: 0 0 auto; } /* The nav-page × was pinned top-right directly under the menu toggle (the "stray circle" the owner saw behind the hamburger). The fx-tabrow home tab AND the hamburger both return to the archive, so the redundant nav-page close is hidden in folder-home. */ body.folio-home .nav-page-close { display: none !important; } /* Mobile mode overrides — bypass city on mobile, style swipeable flat navigation */ body.mobile-mode .navlink[data-view="archive"] { display: none !important; } @media (max-width: 720px) { .fx-body { flex-direction: column !important; padding: 16px 12px !important; gap: 16px !important; } .fx-sidebar { flex: 0 0 auto !important; flex-direction: row !important; width: 100% !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; display: flex !important; gap: 8px !important; padding: 4px 0 12px !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch; /* Hide scrollbar */ -ms-overflow-style: none; scrollbar-width: none; } .fx-sidebar::-webkit-scrollbar { display: none; } .fx-srow { flex: 0 0 auto !important; width: auto !important; padding: 8px 16px !important; border-radius: 20px !important; margin: 0 !important; font-size: 13px !important; background: var(--layer) !important; border: 1px solid var(--chrome-stroke) !important; } .fx-srow.is-active { background: var(--accent) !important; color: #1A1714 !important; border-color: var(--accent) !important; } .fx-main { flex: 1 1 auto !important; width: 100% !important; height: auto !important; } .fx.is-codex .fx-files { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px !important; padding: 16px 12px !important; } .fx-file { border-radius: 12px !important; } /* Reset stats and sidebar columns positioning on mobile so they don't break boundaries */ body.folio-home #statsPanel { left: 12px !important; right: 12px !important; top: 64px !important; width: auto !important; } body.folio-home .filter-bar { left: 12px !important; right: 12px !important; top: 172px !important; width: auto !important; } } }