/* ===================================================================== * website-layout.css — GLOBAL "Website Layout" shell. * * The admin picks a Website Layout (Website Theme → Website Layout). theme.js * puts it on on EVERY page, so this stylesheet * reskins the SITE-WIDE navigation shell (the top bar) into that layout's * form on every page — while each page keeps its own content. * * Two header conventions exist site-wide; every rule targets BOTH: * • member / admin / dashboard pages : body > header (wrapping nav.hdr-*) * • public pages : .navbar * * 'atelier' (Classic) is the baseline — it needs NO rules here (absence of * overrides = today's look). Only the other four add a shell skin, under * their own attribute, so Classic and any un-set page are 100% untouched. * ===================================================================== */ :root{ /* The shell bar fill HONOURS the container-fill toggle: glassy translucent by default, opaque over the theme ink when the admin sets "Solid". This is why the transparent/solid switch now visibly affects every layout's chrome. */ --wl-bar: color-mix(in srgb, var(--cb-ink, #0b0b12) 58%, transparent); /* glassy, still readable */ --wl-line: rgba(var(--primary-rgb, 196,14,46), .22); --wl-side: 220px; /* sidebar-layout rail width */ } html[data-dash-containers="solid"]{ --wl-bar: color-mix(in srgb, var(--cb-text, #fff) 5%, var(--cb-ink, #0b0b12)); /* fully opaque */ } /* Convenience: the "nav link" selector list, reused per layout (excludes the logo and the notif buttons). */ /* (kept inline in each block — CSS has no selector variables) */ /* IMPORTANT — the per-layout link styling below targets ONLY real nav links: `.nav-links > a` and `.header-nav-links > a` (direct children). This deliberately EXCLUDES the notification buttons (.notif-btn, which are grandchildren via .notif-icons), the avatar dropdown links (.dropdown-link), and the logo — styling those broke the icon buttons (the bug where the notif icons went tiny/pill-shaped in Bento & Tabbed). Never widen this to a bare `nav a`. */ /* ══ TABULAR CONSOLE — a dense, uppercase, monospaced console bar ═════════ */ html[data-dashboard="tabular"] > body > header, html[data-dashboard="tabular"] .navbar{ padding-top: 8px !important; padding-bottom: 8px !important; background: var(--wl-bar) !important; border-bottom: 2px solid var(--wl-line) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html[data-dashboard="tabular"] > body > header nav{ gap: 12px; } html[data-dashboard="tabular"] .navbar{ gap: 12px; } html[data-dashboard="tabular"] .nav-links > a, html[data-dashboard="tabular"] .header-nav-links > a{ font-family: var(--cb-mono, ui-monospace, monospace) !important; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; } html[data-dashboard="tabular"] .header-logo{ font-size: 18px; } /* ══ BENTO COMMAND — a floating rounded bar; nav items read as tiles ══════ */ html[data-dashboard="bento"] > body > header{ background: transparent !important; border: 0 !important; } html[data-dashboard="bento"] > body > header > nav, html[data-dashboard="bento"] .navbar{ margin: 14px 16px !important; border-radius: 22px !important; border: 1px solid var(--wl-line) !important; background: var(--wl-bar) !important; box-shadow: 0 12px 34px -14px rgba(0,0,0,.62) !important; padding: 12px 22px !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html[data-dashboard="bento"] .nav-links > a, html[data-dashboard="bento"] .header-nav-links > a{ padding: 8px 14px !important; border-radius: var(--cb-rect-r, 14px); transition: background .15s, color .15s; } html[data-dashboard="bento"] .nav-links > a:hover, html[data-dashboard="bento"] .header-nav-links > a:hover{ background: rgba(var(--primary-rgb, 196,14,46), .12); } html[data-dashboard="bento"] .nav-links > a.active, html[data-dashboard="bento"] .header-nav-links > a.active{ background: rgba(var(--primary-rgb, 196,14,46), .16) !important; color: #fff; } /* ══ TABBED WORKSPACE — centered bar; nav items are big pill tabs ═════════ */ html[data-dashboard="tabs"] > body > header, html[data-dashboard="tabs"] .navbar{ background: var(--wl-bar) !important; border-bottom: 1px solid var(--wl-line) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html[data-dashboard="tabs"] > body > header nav, html[data-dashboard="tabs"] .navbar{ justify-content: center !important; gap: 6px; } html[data-dashboard="tabs"] .header-logo{ margin-right: auto; } html[data-dashboard="tabs"] .navbar .nav-right, html[data-dashboard="tabs"] > body > header .header-right{ margin-left: auto; } html[data-dashboard="tabs"] .nav-links > a, html[data-dashboard="tabs"] .header-nav-links > a{ padding: 9px 18px !important; border-radius: 999px; transition: background .15s, color .15s; } html[data-dashboard="tabs"] .nav-links > a:hover, html[data-dashboard="tabs"] .header-nav-links > a:hover{ background: rgba(var(--primary-rgb, 196,14,46), .12); } html[data-dashboard="tabs"] .nav-links > a.active, html[data-dashboard="tabs"] .header-nav-links > a.active{ background: var(--gradient-active, var(--gradient, linear-gradient(100deg, var(--primary), var(--secondary)))) !important; color: #fff; } /* ══ SIDEBAR PANEL — the top bar becomes a fixed left rail; content shifts ══ */ html[data-dashboard="sidebar"] > body{ padding-left: var(--wl-side); } html[data-dashboard="sidebar"] > body > header, html[data-dashboard="sidebar"] .navbar{ position: fixed !important; left: 0; top: 0; bottom: 0; width: var(--wl-side); height: 100vh; z-index: 900; background: var(--wl-bar) !important; border-right: 1px solid var(--wl-line) !important; border-bottom: 0 !important; overflow-y: auto; overflow-x: visible; display: flex !important; flex-direction: column !important; /* NO backdrop-filter here on purpose: a filter/backdrop-filter would make this rail the containing block for the account dropdown's position:fixed, clipping the flyout inside the rail. Without it the flyout escapes to the viewport (see .avatar-dropdown below). */ } /* member/admin/dash: the inner