/* CSG Marketing, the client-portal design system. One system, three skins, driven by : (none) = CSG owner console: cream + deep forest green, Fraunces/Outfit forward-realty = Forward Rlty: paper + ink + champagne, Cormorant Garamond/Inter the-lending-pros = The Lending Pros: near-black + white, Inter/Mulish Every legacy class + variable name is preserved; themes only swap token values. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Montserrat:wght@400;500;600;700;800&display=swap'); /* ── tokens ─────────────────────────────────────────────────── */ :root{ /* CSG owner console (default) */ /* --bone (the plate behind a preview image) and --line (a hairline / count-pill fill) were USED in seven places and DEFINED in none, so every skin fell back to the cream literal baked into the var() — which is correct here and reads as a pale slab on the two near-black portals. Defined per skin below; a fallback that always fires is just a hardcoded colour wearing a token's clothes. */ --bone:#E8E3DA; --line:#E6E2D8; --bg:#F6F3EC; --bg2:#FBF9F4; --surface:#FFFFFF; --surface2:#F0EDE4; --border:rgba(28,58,43,0.10); --border2:rgba(28,58,43,0.18); --accent:#2A4A38; --accent-ink:#F5EFE2; --accent-glow:rgba(42,74,56,0.10); --green:#2A4A38; --green-mid:#34543F; --green-glow:rgba(42,74,56,0.10); --sage:#4A8062; --ink:#22302A; --muted:#9C927E; --muted2:#6E675A; --ok:#3A7E58; --amber:#A5771F; --red:#A84A38; --blue:#3A5A9C; --serif:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; --display-style:normal; --display-weight:600; --display-track:-0.02em; --btn-bg:#2A4A38; --btn-fg:#F5EFE2; --btn-bg-hover:#34543F; --hairline:rgba(28,58,43,0.14); --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:16px; --shadow:0 18px 40px -20px rgba(28,42,35,0.28); --card-shadow:0 1px 2px rgba(28,58,43,.04); --nav-bg:rgba(246,243,236,0.88); } /* Forward Rlty, editorial paper & champagne */ [data-portal="forward-realty"]{ --bg:#F5F1E8; --bg2:#EFE9DC; --surface:#FFFFFF; --surface2:#F3EEE3; --border:rgba(10,10,10,0.10); --border2:rgba(10,10,10,0.18); --accent:#B8956A; --accent-ink:#FFFFFF; --accent-glow:rgba(184,149,106,0.14); --green:#B8956A; --green-mid:#a9855c; --green-glow:rgba(184,149,106,0.14); --sage:#B8956A; --ink:#0A0A0A; --muted:#8A8378; --muted2:#5D5850; --ok:#4A6B52; --amber:#A5771F; --red:#9a4432; --blue:#44576e; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --display-style:normal; --display-weight:500; --display-track:-0.01em; --btn-bg:#B8956A; --btn-fg:#FFFFFF; --btn-bg-hover:#A98357; --hairline:rgba(10,10,10,0.16); --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:20px; --shadow:0 18px 40px -20px rgba(60,46,26,.22); --card-shadow:0 12px 34px rgba(60,46,26,.08); --nav-bg:rgba(250,247,240,0.68); } /* ── Forward: Atlas daylight (Brett-approved boards, 2026-09-02) — champagne aurora under white glass. Painted on like LC, so there is no seam at the nav. ── */ html[data-portal="forward-realty"]{ background: radial-gradient(56% 46% at 10% -8%, rgba(184,149,106,.30), transparent 70%), radial-gradient(50% 40% at 96% 2%, rgba(226,186,130,.26), transparent 70%), radial-gradient(48% 42% at 40% 110%, rgba(196,138,120,.14), transparent 70%), #F5F1E8; background-attachment:fixed; } [data-portal="forward-realty"] body{ background:transparent; } [data-portal="forward-realty"] .card, [data-portal="forward-realty"] .mat-card, [data-portal="forward-realty"] .gal-card{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border-color:rgba(255,255,255,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 34px rgba(60,46,26,.08); } /* The Lending Pros, after dark */ [data-portal="the-lending-pros"]{ --bone:#1C1F24; --line:rgba(255,255,255,0.10); --bg:#0C0D0F; --bg2:#121418; --surface:#16181C; --surface2:#1D2025; --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.18); --accent:#D8D9D6; --accent-ink:#111214; --accent-glow:rgba(220,221,218,0.10); --green:#D8D9D6; --green-mid:#c2c3c0; --green-glow:rgba(220,221,218,0.10); --sage:#D8D9D6; --ink:#F4F4F3; --muted:#8C8F94; --muted2:#B4B7BC; --ok:#7FBF9A; --amber:#D9B36A; --red:#E08A78; --blue:#8FA8D9; --serif:'Inter',system-ui,sans-serif; --sans:'Mulish',system-ui,sans-serif; --display-style:normal; --display-weight:650; --display-track:-0.015em; --btn-bg:#E8E9E6; --btn-fg:#111214; --btn-bg-hover:#D8D9D6; --hairline:rgba(255,255,255,0.16); --shadow:0 24px 60px -24px rgba(0,0,0,.8); --card-shadow:none; --nav-bg:rgba(10,11,13,0.86); } /* ── TLP signature treatment (from their materials: spotlight, grain, pill, heavy caps) ── */ [data-portal="the-lending-pros"]{ --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:20px; } [data-portal="the-lending-pros"] body{ background: radial-gradient(110% 72% at 50% -12%, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 38%, transparent 62%), #0A0B0D; background-attachment:fixed; } [data-portal="the-lending-pros"] body::after{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-portal="the-lending-pros"] h1{ color:rgba(255,255,255,.92); } [data-portal="the-lending-pros"] h1 em{ color:#fff; } [data-portal="the-lending-pros"] .eyebrow{ display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.55); border-radius:100px; padding:8px 17px; color:rgba(255,255,255,.9); font-weight:700; letter-spacing:.12em; margin-bottom:12px; } [data-portal="the-lending-pros"] .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; flex:0 0 auto; } [data-portal="the-lending-pros"] .btn{ font-weight:700; font-family:'Inter',system-ui,sans-serif; } [data-portal="the-lending-pros"] .btn:not(.btn-primary):not(.primary):not(.danger):not(.btn-red):not(.btn-ok):not(.btn-amber){ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; } [data-portal="the-lending-pros"] .selbar .btn{ background:var(--btn-fg) !important; color:var(--btn-bg) !important; border-color:var(--btn-fg) !important; } [data-portal="the-lending-pros"] .nav-link.active::after{ height:3px; background:#fff; } [data-portal="the-lending-pros"] .mat-card:hover, [data-portal="the-lending-pros"] .gal-card:hover{ border-color:rgba(255,255,255,.35); } [data-portal="the-lending-pros"] .chip{ border-width:1.5px; font-weight:700; } [data-portal="the-lending-pros"] .card, [data-portal="the-lending-pros"] .mat-card, [data-portal="the-lending-pros"] .gal-card{ background:rgba(23,25,28,.55); -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); border-color:rgba(255,255,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 44px rgba(0,0,0,.32); } [data-portal="the-lending-pros"] .chip.active{ border-color:#fff; } /* Cross-document view transitions (MPA page morphs). Top-level at-rule by spec; today only the LC portal names surfaces to ride it — other brands simply keep instant navigation until they opt surfaces in. */ @view-transition{ navigation:auto; } /* Luxury Collective — LIQUID GLASS (Brett, 2026-08-20 v4: "a true iOS 26 product… liquid glass, rounded edges, super simple, well engineered"). First-principles rebuild as a design layer only: same markup, same JS. Grammar: near-black canvas; smoked-glass chrome (nav, menus, modals) that truly blurs; quiet elevated surfaces for content; ONE clean sans (Inter — the SF-like face) for the whole interface; the Didone lives only at brand moments (login, wordmark, artwork). Sentence-case capsule controls. Gold appears ONLY as the tint of an act: the primary button, the active state, the owner's mark. Everything else is monochrome smoke. */ [data-portal="luxury-collective"]{ --bone:#0E0E10; --line:rgba(255,255,255,0.08); --bg:#0A0A0C; --bg2:#101013; --surface:#17171A; --surface2:#0E0E10; --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.18); --accent:#C6A75E; --accent-ink:#0B0B0B; --accent-glow:rgba(198,167,94,0.14); --green:#C6A75E; --green-mid:#A9873F; --green-glow:rgba(198,167,94,0.14); --sage:#C6A75E; --ink:#F5F5F7; --muted:#98989D; --muted2:#C9C9CE; --ok:#8FBF9F; --amber:#D9B36A; --red:#E08A78; --blue:#8FA8D9; --serif:'Inter',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; --display-style:normal; --display-weight:650; --display-track:-0.022em; --btn-bg:#C6A75E; --btn-fg:#0B0B0B; --btn-bg-hover:#D4B76C; --hairline:rgba(255,255,255,0.1); --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:26px; --shadow:0 28px 70px -28px rgba(0,0,0,.92); --card-shadow:0 1px 0 rgba(255,255,255,.05) inset; --nav-bg:rgba(18,18,21,0.62); } /* ── ground: black under one soft spotlight, a breath of gold at the crown. Painted on (the canvas), not : body's box starts below the nav margin, so a gradient on body left a flat black strip and a hard seam across the viewport top. ── */ html[data-portal="luxury-collective"]{ background: radial-gradient(110% 64% at 50% -16%, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 42%, transparent 64%), radial-gradient(56% 36% at 78% -10%, rgba(198,167,94,.07) 0%, transparent 58%), #0A0A0B; background-attachment:fixed; /* native widgets (selects, checkboxes, scrollbars, popups) render for a dark canvas — macOS paints control chrome from the color-scheme, not from author styles */ color-scheme:dark; } [data-portal="luxury-collective"] body{ background:transparent; } /* form controls in the brand's hand, not the OS's */ [data-portal="luxury-collective"] input[type="checkbox"], [data-portal="luxury-collective"] input[type="radio"]{ accent-color:#C6A75E; } [data-portal="luxury-collective"] select{ appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398989D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; border:1px solid transparent; border-radius:12px; color:#F5F5F7; padding:11px 34px 11px 14px; } [data-portal="luxury-collective"] select:focus{ border-color:transparent; box-shadow:0 0 0 3px rgba(198,167,94,.35); outline:none; background-color:rgba(255,255,255,.09); } /* an overlong placeholder fades out instead of slicing a glyph on the border */ [data-portal="luxury-collective"] input.field{ text-overflow:ellipsis; } [data-portal="luxury-collective"] input.field::placeholder{ text-overflow:ellipsis; } [data-portal="luxury-collective"] .mat-search{ max-width:none; } [data-portal="luxury-collective"] .mat-search input{ text-overflow:ellipsis; } [data-portal="luxury-collective"] summary::marker{ color:#98989D; } [data-portal="luxury-collective"] .acct-btn .chev{ color:#98989D; font-size:14px; margin-left:2px; } [data-portal="luxury-collective"] .gen-grid{ grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); } /* ── nav: a liquid-glass capsule. Content scrolls under it; the active page is a pill inside the bar (the iPadOS tab grammar), not an underline. Condenses on scroll. ── */ [data-portal="luxury-collective"] nav.topbar{ position:sticky; top:12px; z-index:100; height:58px; max-width:1128px; margin:12px auto 6px; padding:0 10px; background:var(--nav-bg); -webkit-backdrop-filter:blur(28px) saturate(1.7); backdrop-filter:blur(28px) saturate(1.7); border:1px solid rgba(255,255,255,.11); border-bottom:1px solid rgba(255,255,255,.11); border-radius:999px; box-shadow:0 18px 44px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); transition:height .3s cubic-bezier(.2,.6,.2,1), background .3s ease; } [data-portal="luxury-collective"] nav.topbar.lc-scrolled{ height:50px; background:rgba(16,16,19,.78); } @media (max-width:1160px){ [data-portal="luxury-collective"] nav.topbar{ margin-inline:14px; max-width:none; } } [data-portal="luxury-collective"] .nav-link{ font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:#98989D; padding:7px 14px; border-radius:999px; transition:color .25s ease, background .25s ease; } [data-portal="luxury-collective"] .nav-link{ position:relative; } [data-portal="luxury-collective"] .nav-link:hover{ color:#F5F5F7; background:rgba(255,255,255,.06); } /* the active state is a dedicated capsule BEHIND the label — it, not the link, rides the view transition, so on navigation the capsule glides while every label stays put */ [data-portal="luxury-collective"] .nav-link.active{ color:#F5F5F7; background:transparent; } [data-portal="luxury-collective"] .nav-link.active:hover{ background:transparent; } [data-portal="luxury-collective"] .nav-link .nav-pill{ position:absolute; inset:0; z-index:-1; border-radius:999px; background:rgba(255,255,255,.12); } [data-portal="luxury-collective"] .nav-link.active::after{ display:none; } [data-portal="luxury-collective"] .nav-links{ gap:4px; } [data-portal="luxury-collective"] .acct-btn{ background:rgba(255,255,255,.06); border-color:transparent; } [data-portal="luxury-collective"] .acct-btn:hover{ background:rgba(255,255,255,.11); } [data-portal="luxury-collective"] .acct-btn .nm{ font-weight:500; } [data-portal="luxury-collective"] .menu{ background:rgba(26,26,29,.96); -webkit-backdrop-filter:blur(30px) saturate(1.6); backdrop-filter:blur(30px) saturate(1.6); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:0 30px 70px -24px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.07); } /* ── type: the iOS large-title. One clean sans; the title says everything; no rules, no eyebrows, no accent italics — hierarchy from size and weight alone. ── */ [data-portal="luxury-collective"] h1{ color:#F5F5F7; } [data-portal="luxury-collective"] h1 em, [data-portal="luxury-collective"] h2 em{ font-style:normal; color:inherit; /* the serif's gold italic has no place in a sans UI */ } [data-portal="luxury-collective"] main.wrap{ padding-top:46px; } [data-portal="luxury-collective"] .page-head{ position:relative; padding-bottom:8px; margin-bottom:28px; } [data-portal="luxury-collective"] .page-head h1{ font-size:clamp(30px,3.2vw,38px); line-height:1.08; letter-spacing:-0.022em; font-weight:700; } [data-portal="luxury-collective"] .page-head .sub{ font-size:13.5px; margin-top:8px; max-width:74ch; } [data-portal="luxury-collective"] .page-head .eyebrow{ display:none; } /* the title carries it */ [data-portal="luxury-collective"] .eyebrow{ color:#98989D; letter-spacing:.1em; font-weight:600; border-color:transparent; } /* ── surfaces: content sits on quiet elevated smoke; true glass is reserved for chrome (nav, menus, modals) — exactly how iOS spends its materials ── */ [data-portal="luxury-collective"] .card{ background:linear-gradient(178deg, #17171A 0%, #121215 100%); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 44px -30px rgba(0,0,0,.8); } [data-portal="luxury-collective"] .modal{ background:rgba(26,26,29,.82); -webkit-backdrop-filter:blur(34px) saturate(1.6); backdrop-filter:blur(34px) saturate(1.6); border:1px solid rgba(255,255,255,.13); border-radius:24px; box-shadow:0 40px 90px -30px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.08); } [data-portal="luxury-collective"] .overlay{ background:rgba(4,4,5,.55); backdrop-filter:blur(10px); } /* ── controls: sentence-case capsules. Filled gold = THE act; everything else is glass. No letter-spacing, no shouting — iOS quiet. ── */ [data-portal="luxury-collective"] .btn{ text-transform:none; letter-spacing:-0.01em; font-weight:600; font-size:13px; font-family:'Inter',system-ui,sans-serif; border-radius:999px; padding:10px 18px; transition:transform .25s cubic-bezier(.2,.6,.2,1), background .25s ease, border-color .25s ease; } [data-portal="luxury-collective"] .btn:active{ transform:scale(.96); } [data-portal="luxury-collective"] .btn-primary{ background:linear-gradient(180deg,#D2B268,#AE8C43); border-color:transparent; color:#141005; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -10px rgba(198,167,94,.5); } [data-portal="luxury-collective"] .btn-primary:hover{ background:linear-gradient(180deg,#DDBE74,#B8944B); } [data-portal="luxury-collective"] .btn:not(.btn-primary):not(.btn-red):not(.btn-ok):not(.btn-amber){ background:rgba(255,255,255,.08); border-color:transparent; color:#F5F5F7; } [data-portal="luxury-collective"] .btn:not(.btn-primary):not(.btn-red):not(.btn-ok):not(.btn-amber):hover{ background:rgba(255,255,255,.13); } [data-portal="luxury-collective"] .field{ background:rgba(255,255,255,.06); border-color:transparent; border-radius:12px; color:#F5F5F7; transition:background .2s ease, box-shadow .2s ease; } [data-portal="luxury-collective"] .field:focus{ background:rgba(255,255,255,.09); border-color:transparent; box-shadow:0 0 0 3px rgba(198,167,94,.35); } [data-portal="luxury-collective"] .chip{ border-radius:999px; border-color:transparent; color:#AEAEB2; background:rgba(255,255,255,.06); font-weight:600; letter-spacing:0; text-transform:none; font-size:12.5px; padding:10px 16px; } [data-portal="luxury-collective"] .chip:hover{ color:#F5F5F7; background:rgba(255,255,255,.11); } [data-portal="luxury-collective"] .chip.active{ background:rgba(255,255,255,.16); border-color:transparent; color:#F5F5F7; } /* ── THE GALLERY WALL. The uniform boxed grid put a wide business card as a tiny strip floating in a tall frame ("all completely right in the middle of it… looks goofy"). Instead: a masonry wall — every artwork at its OWN natural shape, edge to edge in its frame, caption beneath, like work hung in a gallery. Pure CSS (columns), same markup. ── */ [data-portal="luxury-collective"] .gal-grid{ display:block; columns:3 300px; column-gap:22px; } [data-portal="luxury-collective"] .gal-card{ display:inline-block; width:100%; break-inside:avoid; margin-bottom:22px; } [data-portal="luxury-collective"] .gal-card .thumb{ aspect-ratio:auto; background:#0B0B0C; } [data-portal="luxury-collective"] .gal-card .thumb img{ width:100%; height:auto; object-fit:unset; object-position:unset; display:block; } [data-portal="luxury-collective"] .mat-card, [data-portal="luxury-collective"] .gal-card{ background:linear-gradient(178deg, #161619 0%, #111114 100%); border:1px solid rgba(255,255,255,.08); border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:transform .4s cubic-bezier(.2,.6,.2,1), border-color .4s ease, box-shadow .4s ease; } [data-portal="luxury-collective"] .mat-card:hover, [data-portal="luxury-collective"] .gal-card:hover{ transform:translateY(-3px) scale(1.005); border-color:rgba(255,255,255,.2); box-shadow:0 30px 60px -26px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.06); } [data-portal="luxury-collective"] .mat-card .thumb{ background:#0B0B0D; } [data-portal="luxury-collective"] .mat-card .nm, [data-portal="luxury-collective"] .gal-card .nm{ font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:15px; letter-spacing:-0.01em; } [data-portal="luxury-collective"] .mat-card .ct{ color:#98989D; letter-spacing:.02em; text-transform:none; font-weight:500; font-size:11.5px; } /* ── details that read as one product ── */ [data-portal="luxury-collective"] ::selection{ background:rgba(198,167,94,.28); } [data-portal="luxury-collective"] :focus-visible{ outline:2px solid rgba(198,167,94,.6); outline-offset:2px; } [data-portal="luxury-collective"] ::-webkit-scrollbar{ width:10px; height:10px; } [data-portal="luxury-collective"] ::-webkit-scrollbar-track{ background:#0A0A0B; } [data-portal="luxury-collective"] ::-webkit-scrollbar-thumb{ background:#232326; border-radius:99px; border:2px solid #0A0A0B; } [data-portal="luxury-collective"] ::-webkit-scrollbar-thumb:hover{ background:#323236; } /* gold stays where it means something: eighteen gold rings made the owner's mean nothing. Everyone gets a quiet hairline ring; ONLY the owner's is gold. */ [data-portal="luxury-collective"] .gen-card img, [data-portal="luxury-collective"] .gen-card .avf{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3px rgba(245,243,238,.18); } [data-portal="luxury-collective"] .gen-card.own img, [data-portal="luxury-collective"] .gen-card.own .avf{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px rgba(198,167,94,.6); } [data-portal="luxury-collective"] .who-badge{ border-color:rgba(198,167,94,.45); } /* status pills speak sentence case, like iOS badges */ [data-portal="luxury-collective"] .pill{ text-transform:none; letter-spacing:0; font-weight:600; font-size:11px; padding:4px 10px; } /* field labels speak sentence case too — the tracked caps were the old voice */ [data-portal="luxury-collective"] label.lbl{ text-transform:none; letter-spacing:.01em; font-size:12px; font-weight:500; color:#98989D; } /* gold discipline, enforced edge to edge: - the signed-in avatar is not the owner — neutral disc - the decorative gold card-thread goes neutral - the approvals pills/tabs paint from vars, so re-map the vars in their containers - per-row Emulate is not THE act — glass, not gold - the Help fab is utility chrome — monochrome */ [data-portal="luxury-collective"] .acct-btn .av{ background:rgba(255,255,255,.14); color:#F5F5F7; } [data-portal="luxury-collective"] .card.accent::before{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); opacity:.5; } [data-portal="luxury-collective"] #sectabs{ --btn-bg:rgba(255,255,255,.16); --btn-fg:#F5F5F7; --surface:rgba(255,255,255,.06); --border2:transparent; --ink:#F5F5F7; --muted:#98989D; } [data-portal="luxury-collective"] #bchips{ --accent:rgba(255,255,255,.85); --ink:#F5F5F7; --muted:#98989D; } [data-portal="luxury-collective"] .btn-primary[data-emu]{ background:rgba(255,255,255,.08); color:#F5F5F7; box-shadow:none; } [data-portal="luxury-collective"] .btn-primary[data-emu]:hover{ background:rgba(255,255,255,.13); } [data-portal="luxury-collective"] .support-fab{ color:#C9C9CE; } /* the account chevron and details markers become drawn chevrons, not font glyphs */ [data-portal="luxury-collective"] .acct-btn .chev{ font-size:0; width:10px; height:6px; margin-left:4px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398989D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } [data-portal="luxury-collective"] summary{ list-style:none; } [data-portal="luxury-collective"] summary::-webkit-details-marker{ display:none; } [data-portal="luxury-collective"] details > summary::before{ content:''; display:inline-block; width:10px; height:6px; margin-right:9px; vertical-align:2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398989D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .25s cubic-bezier(.2,.6,.2,1); } [data-portal="luxury-collective"] details[open] > summary::before{ transform:rotate(180deg); } /* category counts become legible iOS badges */ [data-portal="luxury-collective"] .ced-count{ font-size:12px; font-weight:600; color:#C9C9CE; background:rgba(255,255,255,.08); border-radius:99px; padding:2px 9px; } /* the emulation banner: still unmissable, no longer a gold slab */ [data-portal="luxury-collective"] #emu-banner{ background:rgba(20,20,22,.85); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); color:#F5F5F7; border-bottom:1px solid rgba(198,167,94,.55); } [data-portal="luxury-collective"] .gal-card .meta{ padding-bottom:12px; } /* the "Who is this for?" selector breathes away from its explainer line */ [data-portal="luxury-collective"] #forCard .field-row{ margin-top:22px; } [data-portal="luxury-collective"] #forCard .card-sub{ line-height:1.6; } /* the floating selection capsule, a size quieter */ [data-portal="luxury-collective"] .selbar{ gap:12px; padding:8px 9px 8px 18px; } [data-portal="luxury-collective"] .selbar .ct{ font-size:12.5px; } [data-portal="luxury-collective"] .selbar .btn{ padding:8px 16px; font-size:12.5px; } /* the print acknowledgement in the dark system's own amber — the cream panel was a light-theme relic glaring against the glass */ [data-portal="luxury-collective"] .print-ack{ background:rgba(217,179,106,.09); border:1px solid rgba(217,179,106,.3); border-left:3px solid #D9B36A; } [data-portal="luxury-collective"] .pa-txt{ color:#D6D1C2; } [data-portal="luxury-collective"] .pa-txt b{ color:#EFE9DA; } [data-portal="luxury-collective"] .print-ack.flash{ animation:lcPaFlash .5s ease 2; } @keyframes lcPaFlash{ 0%,100%{ background:rgba(217,179,106,.09); } 50%{ background:rgba(217,179,106,.24); } } /* ── THE LIQUID SLIDER: cross-document View Transitions. On navigation the browser morphs same-named surfaces between pages — the bar holds still, the active pill SLIDES from the old tab to the new one, content crossfades with a soft rise. The app-shell boot in config.js guarantees a bar exists on the new page's first frame, so the morph always has both sides. Unsupported browsers just navigate. ── */ [data-portal="luxury-collective"] nav.topbar{ view-transition-name:lc-nav; } [data-portal="luxury-collective"] .nav-link.active .nav-pill{ view-transition-name:lc-active-pill; } [data-portal="luxury-collective"] .acct-btn{ view-transition-name:lc-acct; } [data-portal="luxury-collective"] #emu-banner{ view-transition-name:lc-emu; } html[data-portal="luxury-collective"]::view-transition-group(lc-active-pill){ animation-duration:.4s; animation-timing-function:cubic-bezier(.3,.9,.3,1); } html[data-portal="luxury-collective"]::view-transition-group(lc-nav), html[data-portal="luxury-collective"]::view-transition-group(lc-acct), html[data-portal="luxury-collective"]::view-transition-group(lc-emu){ animation-duration:.3s; } html[data-portal="luxury-collective"]::view-transition-old(root){ animation:lcPageOut .18s cubic-bezier(.4,0,1,1) both; } html[data-portal="luxury-collective"]::view-transition-new(root){ animation:lcPageIn .3s cubic-bezier(.2,.6,.2,1) both; } @keyframes lcPageOut{ to{ opacity:0; } } @keyframes lcPageIn{ from{ opacity:0; transform:translateY(8px); } } /* ── MOTION PACK: alive, never busy. Menus and modals pop like iOS sheets; the large title settles as content scrolls under the bar; surfaces answer the hand. ── */ [data-portal="luxury-collective"] .menu.open{ animation:lcPop .26s cubic-bezier(.2,.9,.3,1.1) both; transform-origin:top right; } [data-portal="luxury-collective"] .overlay.open .modal{ animation:lcPop .3s cubic-bezier(.2,.9,.3,1.1) both; transform-origin:center 40%; } @keyframes lcPop{ from{ opacity:0; transform:scale(.96) translateY(-4px); } } [data-portal="luxury-collective"] .toast{ animation:lcToast .35s cubic-bezier(.2,.9,.3,1.1) both; } @keyframes lcToast{ from{ opacity:0; transform:translateY(14px) scale(.97); } } [data-portal="luxury-collective"] .btn:not(:active):hover{ transform:translateY(-1px); } [data-portal="luxury-collective"] .gal-card .thumb img, [data-portal="luxury-collective"] .mat-card .thumb img{ transition:filter .45s ease, transform .45s cubic-bezier(.2,.6,.2,1); } [data-portal="luxury-collective"] .gal-card:hover .thumb img{ filter:brightness(1.05); } [data-portal="luxury-collective"] .gen-card img, [data-portal="luxury-collective"] .gen-card .avf{ transition:box-shadow .35s ease, transform .35s cubic-bezier(.2,.6,.2,1); } [data-portal="luxury-collective"] .gen-card:hover img, [data-portal="luxury-collective"] .gen-card:hover .avf{ transform:scale(1.05); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px rgba(245,243,238,.34); } [data-portal="luxury-collective"] .gen-card.own:hover img{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px rgba(198,167,94,.85); } /* the iOS large-title settle: the opener quiets as it slides under the glass */ @supports (animation-timeline: scroll()){ [data-portal="luxury-collective"] .page-head{ animation:lcTitleSettle linear both; animation-timeline:scroll(); animation-range:0px 180px; transform-origin:left top; } @keyframes lcTitleSettle{ to{ opacity:.6; transform:scale(.975) translateY(-6px); } } } @media (prefers-reduced-motion: reduce){ [data-portal="luxury-collective"] .menu.open, [data-portal="luxury-collective"] .overlay.open .modal, [data-portal="luxury-collective"] .toast{ animation:none; } [data-portal="luxury-collective"] .btn:not(:active):hover{ transform:none; } [data-portal="luxury-collective"] .page-head{ animation:none; } html[data-portal="luxury-collective"]::view-transition-group(*), html[data-portal="luxury-collective"]::view-transition-old(root), html[data-portal="luxury-collective"]::view-transition-new(root){ animation:none; } } /* roster grammar goes quiet: iOS section headers, sentence-case titles */ [data-portal="luxury-collective"] .gen-sec .t{ color:#98989D; letter-spacing:.08em; } [data-portal="luxury-collective"] .gen-card .sub2{ text-transform:none; letter-spacing:0; font-size:12px; color:#98989D; margin-top:2px; } [data-portal="luxury-collective"] .gen-card .nm{ font-weight:600; font-size:15.5px; letter-spacing:-0.01em; } /* selects: the .field shorthand background wiped the chevron off select.field — re-assert the affordance as longhands, which win independently of the shorthand */ [data-portal="luxury-collective"] select, [data-portal="luxury-collective"] select.field{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398989D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; } /* checkboxes join the family: an inset well with a gold check, not a bare OS square */ [data-portal="luxury-collective"] input[type="checkbox"]{ appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); border-radius:5px; background:rgba(14,14,16,.75); cursor:pointer; position:relative; } [data-portal="luxury-collective"] input[type="checkbox"]:checked{ background:linear-gradient(180deg,#D2B268,#A9873F); border-color:transparent; } [data-portal="luxury-collective"] input[type="checkbox"]:checked::after{ content:''; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #0B0B0B; border-width:0 2px 2px 0; transform:rotate(42deg); } @media (prefers-reduced-motion: reduce){ [data-portal="luxury-collective"] .btn, [data-portal="luxury-collective"] .mat-card, [data-portal="luxury-collective"] .gal-card{ transition:none; } } /* ── base ───────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0;} html,body{background:var(--bg);} body{font-family:var(--sans);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;} a{color:var(--ink);text-decoration:none;} h1,h2,h3,.serif{font-family:var(--serif);font-weight:var(--display-weight);font-style:var(--display-style);letter-spacing:var(--display-track);text-wrap:balance;} h1 em,h2 em{font-style:italic;color:var(--accent);font-weight:inherit;} ::selection{background:var(--accent-glow);} /* layout */ .wrap{max-width:1120px;margin:0 auto;padding:0 28px;} .center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;} .stack{display:flex;flex-direction:column;} .row{display:flex;align-items:center;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .grow{flex:1;} .muted{color:var(--muted);} .muted2{color:var(--muted2);} .hidden{display:none !important;} /* ── nav ────────────────────────────────────────────────────── */ nav.topbar{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(18px); border-bottom:1px solid var(--hairline);height:66px;display:flex;align-items:center;} .brand-chip{display:inline-flex;align-items:center;gap:9px;background:var(--btn-bg);color:var(--btn-fg); padding:8px 15px;border-radius:var(--r);font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-0.01em;} .nav-links{display:flex;gap:26px;margin-left:36px;} .nav-link{position:relative;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--muted2);padding:6px 2px;transition:color .15s;} .nav-link:hover{color:var(--ink);background:none;} .nav-link.active{color:var(--ink);background:none;} .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);} .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;} .nav-who{font-size:13px;color:var(--muted2);} /* ── cards & panels ─────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;box-shadow:var(--card-shadow);} .card.pad-lg{padding:36px;} .card-title{font-family:var(--serif);font-size:19px;font-weight:600;} .card-sub{font-size:13px;color:var(--muted);margin-top:4px;} .panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;} .card.accent{position:relative;overflow:hidden;} .card.accent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;} /* ── forms ──────────────────────────────────────────────────── */ label.lbl{font-size:10.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px;} .field{width:100%;padding:13px 15px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r); font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;} .field::placeholder{color:var(--muted);} .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} textarea.field{resize:vertical;min-height:84px;} .field-row{display:flex;flex-direction:column;gap:0;margin-bottom:16px;} /* ── buttons ────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--r); font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0.04em;cursor:pointer;border:1px solid var(--border2); background:var(--surface);color:var(--ink);transition:all .15s;} .btn:hover{border-color:var(--muted);} .btn:disabled{opacity:.5;cursor:not-allowed;} .btn-primary{background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);box-shadow:var(--shadow);} .btn-primary:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);} .btn-ghost{background:none;border-color:transparent;} .btn-sm{padding:8px 14px;font-size:12.5px;} .btn-ok{background:var(--ok);color:#fff;border:none;} .btn-amber{background:var(--amber);color:#fff;border:none;} .btn-red{background:none;color:var(--red);border:1px solid color-mix(in srgb, var(--red) 35%, transparent);} .btn-red:hover{background:color-mix(in srgb, var(--red) 8%, transparent);} /* ── pills ──────────────────────────────────────────────────── */ .pill{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;} .pill-pending{background:var(--surface2);color:var(--muted2);border:1px solid var(--border2);} .pill-generating{background:color-mix(in srgb, var(--blue) 12%, transparent);color:var(--blue);border:1px solid color-mix(in srgb, var(--blue) 30%, transparent);} .pill-awaiting{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber);border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);} .pill-approved{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 32%, transparent);} .pill-denied{background:color-mix(in srgb, var(--red) 12%, transparent);color:var(--red);border:1px solid color-mix(in srgb, var(--red) 30%, transparent);} .pill-changes{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber);border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);} .pill-hold{background:var(--surface2);color:var(--muted2);border:1px solid var(--border2);} .pill-delivered{background:color-mix(in srgb, var(--accent) 15%, transparent);color:color-mix(in srgb, var(--accent) 80%, var(--ink));border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);} /* ── misc ───────────────────────────────────────────────────── */ .avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--surface2);border:1px solid var(--border2); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:var(--muted2);} /* ── THE HEADSHOT CROP STANDARD ────────────────────────────────────────────────────── A portrait cropped at the browser default (object-position 50% 50%) slices the top of the head off — a person's face sits in the UPPER half of a headshot, not the middle. It happened on the rendered materials and then again here, on every avatar in the portal: the roster cards, the generator's agent list, the account menu. This is the house standard for ANY agent photo in the product, in every portal and every brokerage we onboard. If you add a new place that shows an agent's face, it inherits this — do not re-solve it locally. The matching rule for RENDERED materials is injected by the renderer (see process-requests-background.mjs). IT IS A DEFAULT, NOT A LAW (2026-08-17). One number cannot frame everybody: a photo shot wide, or with the subject off to one side, still crops badly. So a person may carry their OWN framing (agents.headshot_focus_x / _y, migration 0037) and every avatar rendered from an agent row sets `--headshot-focus` inline for them — one helper, headshotFocusStyle() in assets/auth.js, so five files never grow five copies of the same expression. A person with nothing saved sets NOTHING and inherits the 50% 22% below, which is byte-for-byte what `center 22%` computed to, so nobody's avatar moved the day this shipped. Keep the default in this one place: HOUSE_FOCUS in assets/person.mjs is its twin and they must agree. */ :root{ --headshot-focus: 50% 22%; } .avatar, .acct-btn .av, .pcard img, img.headshot, [data-agent-photo]{ object-position: var(--headshot-focus, 50% 22%); } /* ── THE FRAMING CONTROL ITSELF (assets/headshot-framer.mjs) ───────────────────────── The tile an admin drags on /accounts/, and the agent's own avatar on /profile/ and /account/. It writes the SAME `--headshot-focus` the rule above reads, live, as the pointer moves — which is why the tile is not a preview of the crop, it IS the crop. `touch-action:none` is what makes the drag work with a FINGER: without it the browser claims the gesture as a page scroll and the photo never moves at all. */ img.framable{cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;} img.framable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} img.framable.dragging{cursor:grabbing;outline:2px solid var(--accent);outline-offset:2px;} .framehint{font-size:12px;line-height:1.5;color:var(--muted2);} .framehint.unsaved{color:var(--accent);font-weight:600;} /* the small text links under a framing tile — "Change photo · Reset framing" */ .framebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:7px;} .framebar[hidden]{display:none;} /* display:flex above otherwise outranks the UA [hidden] rule */ .framebar button{background:none;border:none;padding:0;font:inherit;font-size:12px;color:var(--muted2); text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:var(--sans);} .framebar button:hover{color:var(--ink);} .framebar button[disabled]{opacity:.45;cursor:default;text-decoration:none;} /* ── what a finished piece can do (assets/material-actions.mjs) ───────────────────────── ONE row, one accent. This used to be two rows of up to six buttons whose colours were decided by data — Caption went black if a caption existed, Download went black if one didn't — so the emphasis moved from card to card and the whole gallery read as jagged. The row never wraps: it scrolls, so a narrow card cannot silently grow a second line and make its neighbours look wrong. */ .matbar{display:flex;align-items:center;gap:8px;margin-top:11px;} .matbar .matbar-primary{flex:1 1 auto;min-width:0;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .matbar .matbar-more{flex:0 0 auto;width:36px;padding-left:0;padding-right:0;text-align:center; font-size:16px;line-height:1;letter-spacing:.06em;} /* the ⋯ menu: fixed to the viewport, so a card at the edge of the grid still opens inward */ .matmenu{position:fixed;z-index:800;min-width:186px;padding:6px;border-radius:12px; background:var(--surface);border:1px solid var(--border2);box-shadow:0 12px 34px rgba(0,0,0,.16);} .matmenu button{display:block;width:100%;text-align:left;padding:9px 11px;border:none;border-radius:8px; background:none;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;} .matmenu button:hover,.matmenu button:focus-visible{background:var(--surface2);outline:none;} .matmenu button.danger{color:var(--red,#B3452F);} .matmenu button.danger:hover,.matmenu button.danger:focus-visible{background:rgba(179,69,47,.10);} .matmenu-sep{border:none;border-top:1px solid var(--border2);margin:5px 7px;} /* ── bulk clean-up (the Select mode on a materials gallery) ───────────────────────────── "Maybe even having some kind of select feature on that page to delete items." Deleting a long-dead gallery one card at a time is the kind of chore people simply never do, so the clutter stays forever. */ .gal-card{position:relative;} .bulkmode .gal-card{cursor:pointer;} .bulkbox{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border-radius:50%; background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center; justify-content:center;font-size:13px;color:transparent;transition:all .15s;} .gal-card.bulkpick{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);} .gal-card.bulkpick .bulkbox{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} /* The floating bar. Named bulkbar, NOT selbar: .selbar is already the material picker's own selection pill in /request/, and it ships visibility:hidden until .show is added — reusing the name made this bar invisible and unclickable, which check-bulk-select caught by measuring where a press actually lands. It borrows that component's look on purpose, so the product has one visual language for "you have things selected". FIXED, not sticky: sticky only constrains an element while its own box is on screen, so a bar appended after a long gallery sat at the bottom of the DOCUMENT — you ticked a card at the top and Delete was an entire scroll away (measured at y=913 in a 900px viewport). */ .bulkbar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:600; display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center; max-width:calc(100vw - 24px);background:var(--btn-bg);color:var(--btn-fg); padding:12px 15px 12px 24px;border-radius:999px;box-shadow:var(--shadow);} .bulkbar .n{font-size:13.5px;font-weight:600;letter-spacing:.02em;} .bulkbar .btn{background:var(--btn-fg);color:var(--btn-bg);border:none;border-radius:999px;padding:9px 18px;} .bulkbar .btn[disabled]{opacity:.45;} .bulkbar .btn-red{background:var(--red,#B3452F);color:#fff;} /* ...and the last row of cards must not hide underneath it */ body.has-bulkbar{padding-bottom:104px;} /* the one-line explanation that replaces a delivery button when there is nothing to deliver */ .matnote{font-size:12px;line-height:1.5;color:var(--muted2);margin-top:9px;} /* What you do RARELY lives with the piece at full size, not on the card: there is room here, and a destructive action is much harder to hit by accident beside a picture than in a row of buttons you were aiming at. */ .lb-manage{z-index:2;flex:0 0 auto; display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px;border-radius:14px; background:rgba(20,22,20,.72);backdrop-filter:blur(8px);} .lb-mbtn{padding:9px 15px;border-radius:9px;border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);color:#F4F2ED;font:inherit;font-size:13px;cursor:pointer;} .lb-mbtn:hover{background:rgba(255,255,255,.16);} .lb-mbtn.danger{border-color:rgba(226,116,106,.5);color:#F2B4AD;} .lb-mbtn.danger:hover{background:rgba(226,116,106,.22);} /* ── the framing dialog (assets/headshot-frame-dialog.mjs) ───────────────────────────── Framing used to mean dragging an 88px avatar in the corner of a form: the thing you were aiming was the size of a stamp and you judged the result at that size. It gets its own room now — a stage big enough to aim, with the two sizes the product actually renders previewing live beside it, so the decision is made against the real thing. */ /* Above EVERYTHING: the Customize editor is z-index 9990, its lightbox 9999, its picker 9998. At the plain .overlay's 700 this dialog opened behind the editor — invisible, and each press stacked another dimmed backdrop. */ .overlay.framedlg-ov{z-index:10050;} .modal.framedlg{max-width:600px;} .framedlg .fd-note{color:var(--muted2);font-size:13px;line-height:1.6;margin:10px 0 0;} .framedlg .fd-body{display:flex;gap:22px;align-items:flex-start;margin-top:18px;} .framedlg .fd-stage{position:relative;flex:0 0 auto;width:264px;height:330px;border-radius:16px;overflow:hidden; background:var(--surface2);border:1px solid var(--border2);} .framedlg .fd-stage.sq{height:264px;} .framedlg .fd-stage img{width:100%;height:100%;object-fit:cover;display:block;} /* A thirds guide, not a crop mask: it says "aim here" without pretending the frame is smaller than it is. Pointer-events off so it never eats the drag. */ .framedlg .fd-guide{position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,transparent calc(33.33% - .5px),rgba(255,255,255,.16) calc(33.33% - .5px), rgba(255,255,255,.16) calc(33.33% + .5px),transparent calc(33.33% + .5px)), linear-gradient(to right,transparent calc(50% - .5px),rgba(255,255,255,.16) calc(50% - .5px), rgba(255,255,255,.16) calc(50% + .5px),transparent calc(50% + .5px));} .framedlg .fd-side{flex:1;min-width:0;} .framedlg .fd-prevlabel{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2);} .framedlg .fd-prevrow{display:flex;gap:18px;align-items:flex-start;margin-top:12px;} .framedlg .fd-prevrow figure{margin:0;text-align:center;} .framedlg .fd-prevrow figcaption{font-size:11px;color:var(--muted);margin-top:7px;} .framedlg .fd-prev{display:block;object-fit:cover;background:var(--surface2);border:1px solid var(--border2);} .framedlg .fd-prev.round{width:56px;height:56px;border-radius:50%;} .framedlg .fd-prev.card{width:72px;height:72px;border-radius:14px;} .framedlg .fd-state{font-size:12px;line-height:1.5;color:var(--muted2);margin-top:18px;} .framedlg .fd-state.on{color:var(--accent);font-weight:600;} /* Pinned for the same reason the person card's footer is: .modal caps at 88vh and scrolls, so on a short window the row a person needs — Cancel and Use this framing — can sit below the fold of something that does not look scrollable. The negative margins let it span the modal's own 28px padding so the stage passes cleanly underneath. */ .framedlg .fd-actions{display:flex;gap:9px;align-items:center; position:sticky;bottom:-28px;z-index:2; margin:24px -28px -28px;padding:16px 28px 28px; background:var(--bg2);border-top:1px solid var(--border2);} @media (max-width:560px){ .framedlg .fd-body{flex-direction:column;gap:16px;} .framedlg .fd-stage{width:100%;height:300px;} .framedlg .fd-state{margin-top:12px;} } .divider{height:1px;background:var(--border);margin:20px 0;} /* pointer-events:none: a toast is a notification, never a control — it popped over the request page's Continue bar (same bottom-center spot) and ate the click */ .toast{pointer-events:none;position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--btn-bg);color:var(--btn-fg); padding:13px 22px;border-radius:var(--r);font-size:14px;box-shadow:var(--shadow);z-index:10500;opacity:0;transition:opacity .2s;} .toast.show{opacity:1;} .toast.err{background:var(--red);color:#fff;} .spinner{width:18px;height:18px;border:2px solid color-mix(in srgb, currentColor 35%, transparent);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;} @keyframes spin{to{transform:rotate(360deg);}} #emu-banner{position:sticky;top:0;z-index:200;display:none;align-items:center;justify-content:center;gap:16px; padding:10px 16px;background:var(--btn-bg);color:var(--btn-fg);font-size:13px;font-weight:500;} #emu-banner .x{padding:5px 14px;background:var(--btn-fg);color:var(--btn-bg);border:none;border-radius:7px;font-weight:700;font-size:12.5px;cursor:pointer;} /* ── page scaffolding ───────────────────────────────────────── */ main.wrap{padding:44px 28px 110px;} .page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:30px;} .page-head h1{font-size:34px;line-height:1.05;} .page-head .sub{font-size:14px;color:var(--muted2);margin-top:8px;max-width:56ch;} .page-head .grow{flex:1;} .eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);} .empty{text-align:center;padding:56px 24px;color:var(--muted);font-size:14px;} .empty .big{font-family:var(--serif);font-size:18px;color:var(--muted2);margin-bottom:6px;} /* nav account menu */ .acct-btn{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;border:1px solid var(--border2);border-radius:100px; background:var(--surface);cursor:pointer;transition:border-color .15s;font-family:var(--sans);} .acct-btn:hover{border-color:var(--muted);} .acct-btn .av{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--btn-bg);color:var(--btn-fg); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:12px;} .acct-btn .nm{font-size:13px;font-weight:500;color:var(--ink);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .acct-btn .chev{color:var(--muted);font-size:10px;} .menu{position:absolute;right:0;top:48px;min-width:225px;background:var(--surface);border:1px solid var(--border2); border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:300;display:none;} .menu.open{display:block;} .menu .mhead{padding:10px 12px 8px;border-bottom:1px solid var(--border);margin-bottom:4px;} .menu .mhead .mn{font-weight:600;font-size:14px;} .menu .mhead .mr{font-size:11.5px;color:var(--muted);margin-top:2px;} .menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border:none;background:none; border-radius:8px;font-family:var(--sans);font-size:13.5px;color:var(--ink);cursor:pointer;} .menu-item:hover{background:var(--surface2);} .menu-item svg{width:16px;height:16px;stroke:var(--muted2);fill:none;stroke-width:1.8;} .menu-item.danger{color:var(--red);} .menu-item.danger svg{stroke:var(--red);} /* tables */ .tbl{width:100%;border-collapse:collapse;} .tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); padding:0 12px 12px;border-bottom:1px solid var(--border);} .tbl td{padding:14px 12px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;} .tbl tr:last-child td{border-bottom:none;} .tbl .who{display:flex;align-items:center;gap:12px;} .role-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--surface2);color:var(--muted2);border:1px solid var(--border2);} .role-badge.master{background:var(--accent-glow);color:var(--ink);border-color:color-mix(in srgb, var(--accent) 40%, transparent);} .role-select{padding:7px 10px;border:1px solid var(--border2);border-radius:8px;font-family:var(--sans);font-size:13px;background:var(--surface);color:var(--ink);} /* modal */ .overlay{position:fixed;inset:0;z-index:700;background:rgba(12,14,12,.5);backdrop-filter:blur(4px); display:none;align-items:center;justify-content:center;padding:24px;} .overlay.open{display:flex;} .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;padding:28px;width:100%;max-width:460px; max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);} .modal-title{font-family:var(--serif);font-size:20px;font-weight:600;} .modal-close{float:right;width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--muted2);cursor:pointer;font-size:15px;} /* The caption modal's editable box (caption-modal.mjs). A real textarea, never focused on open — the iOS keyboard belongs to the tap that asks for it, not to pressing Copy caption. */ .capedit{display:block;width:100%;box-sizing:border-box;height:42vh;min-height:200px;max-height:46vh;overflow-y:auto;resize:vertical; border:1px solid var(--border2);background:var(--surface);border-radius:12px;padding:16px 18px; font-family:inherit;font-size:14px;line-height:1.6;color:var(--ink); -webkit-appearance:none;appearance:none;outline:none;transition:border-color .15s, box-shadow .15s;} .capedit:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);} /* toggle switch */ .switch{position:relative;width:40px;height:23px;flex-shrink:0;} .switch input{opacity:0;width:0;height:0;} .switch .track{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;transition:.18s;cursor:pointer;} .switch .track::before{content:'';position:absolute;height:17px;width:17px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.2);} .switch input:checked + .track{background:var(--accent);border-color:var(--accent);} .switch input:checked + .track::before{transform:translateX(17px);} .perm-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);} .perm-row:last-child{border-bottom:none;} .perm-row .lbl2{font-size:14px;color:var(--ink);} .perm-row .hint{font-size:12px;color:var(--muted);} /* ── material picker (request page) ─────────────────────────── */ .chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px;} .chip{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:9px 16px;border-radius:999px;border:1px solid var(--border2);background:var(--surface);color:var(--muted2);cursor:pointer;transition:all .15s;} .chip:hover{color:var(--ink);} .chip.active{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);} .mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;} /* full-width section label inside the catalogue grid, so "All" reads as tidy type groups */ .mat-cathead{grid-column:1/-1;display:flex;align-items:baseline;gap:9px;font-family:var(--sans); font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); margin:26px 0 -2px;padding-bottom:11px;border-bottom:1px solid var(--border);} .mat-cathead:first-child{margin-top:2px;} .mat-catn{font-weight:600;letter-spacing:.02em;color:var(--muted2);font-size:11px;} .mat-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;} .mat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);} /* Catalog thumbs: a portrait MAT that shows the whole piece, never a crop. The catalog holds portrait letter (0.77), square posts (1.00), cards (0.71) and the odd very tall stack (0.34); cover-cropping them into a landscape box hid most of the artwork and looked off-centre. 3:4 + contain frames every format honestly. */ .mat-card .thumb{aspect-ratio:3/4;background:var(--surface2);overflow:hidden; display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;} .mat-card .thumb img{max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;display:block;transition:transform .5s; filter:drop-shadow(0 5px 14px rgba(40,32,20,.16));} .mat-card:hover .thumb img{transform:scale(1.035);} .mat-card .meta{padding:13px 15px 15px;} .mat-card .nm{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.2;} .mat-card .ct{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px;} .mat-card .tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%; background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center; font-size:13px;color:transparent;transition:all .15s;} .mat-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);} .mat-card.sel .tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} .selbar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);z-index:400; display:flex;align-items:center;gap:18px;background:var(--btn-bg);color:var(--btn-fg); padding:13px 15px 13px 24px;border-radius:999px;box-shadow:var(--shadow);transition:transform .25s ease;} .selbar{visibility:hidden;pointer-events:none;} /* belt & suspenders: never visible, never clickable at zero */ .selbar.show{transform:translateX(-50%) translateY(0);visibility:visible;pointer-events:auto;} .selbar .ct{font-size:13.5px;font-weight:600;letter-spacing:.02em;} .selbar .btn{background:var(--btn-fg);color:var(--btn-bg);border:none;border-radius:999px;padding:10px 20px;} /* ── full-screen material viewer ────────────────────────────── */ /* THE TOOLBAR SITS UNDER THE PIECE, NEVER ON IT. "Email it to Carlos" and the page counter used to be position:absolute/fixed at bottom:22px, floating over the artwork — and every social post and every flyer is tall enough to fill the height, so the bar covered the bottom of the very thing you opened the viewer to look at (Brett, 2026-09-11). The viewer is now a column, and the picture's height budget drops by exactly what is in flow beneath it, so the whole piece is always visible on every portal and at every size. */ .lightbox{position:fixed;inset:0;z-index:800;background:rgba(8,9,10,.86);backdrop-filter:blur(10px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; padding:34px;cursor:zoom-out;animation:lbIn .18s ease;} .lightbox img{max-width:92vw;max-height:90vh;flex:0 1 auto; border-radius:10px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8);cursor:default;} .lightbox:has(.lb-manage) img{max-height:calc(90vh - 78px);} .lightbox:has(.lb-count) img{max-height:calc(90vh - 46px);} .lightbox:has(.lb-manage):has(.lb-count) img{max-height:calc(90vh - 124px);} .lightbox .lb-close{position:fixed;top:20px;right:22px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(6px);} @keyframes lbIn{from{opacity:0;}to{opacity:1;}} /* ── material gallery (my materials) ────────────────────────── */ .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;} .gal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;} .gal-card .thumb{aspect-ratio:4/4.4;background:var(--surface2);overflow:hidden;} .gal-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;} .gal-card .meta{padding:14px 16px 16px;} .gal-card .nm{font-family:var(--serif);font-size:16px;font-weight:600;} .gal-card .row2{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap;} /* ── mobile (iOS-first) ─────────────────────────────────────── */ html{-webkit-text-size-adjust:100%;} button,a,.btn,.chip,.mat-card,.menu-item{-webkit-tap-highlight-color:transparent;touch-action:manipulation;} @supports (padding:env(safe-area-inset-left)){ nav.topbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);} } @media (max-width:760px){ .wrap{padding:0 18px;} main.wrap{padding:26px 18px 130px !important;} /* topbar: brand + account on row 1, links become a swipeable row 2 */ nav.topbar{height:auto;padding-top:calc(9px + env(safe-area-inset-top,0px));padding-bottom:0;} nav.topbar > .wrap{flex-wrap:wrap;row-gap:2px;} .nav-links{order:3;flex-basis:100%;margin-left:0;gap:22px;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding:8px 2px 12px;} .nav-links::-webkit-scrollbar{display:none;} .nav-link{white-space:nowrap;flex:0 0 auto;} .acct-btn .nm{max-width:96px;} .nav-who{display:none;} /* The account menu used position:fixed with top:auto. A backdrop-filter ancestor (the nav itself blurs) makes the NAV the containing block rather than the viewport, and in the wrapped mobile flex row the static position resolved ABOVE the screen: measured top was -36px, so the first 36px of the menu was cut off and unreachable. Anchor it to the account button instead, which does not care what the containing block is. */ .menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;margin-top:0; min-width:min(280px,calc(100vw - 28px));max-height:calc(100dvh - 150px);overflow-y:auto; -webkit-overflow-scrolling:touch;overscroll-behavior:contain;} /* type + surfaces */ .page-head{flex-wrap:wrap;margin-bottom:22px;} .page-head h1{font-size:clamp(25px,7.4vw,34px);} .card{padding:20px 18px;} .card.pad-lg{padding:26px 20px;} .panel{padding:16px;} /* forms: 16px stops iOS auto-zoom on focus */ .field,.role-select{font-size:16px;} /* inline two-column grids stack (request/account/accounts pages) */ main [style*="grid-template-columns"]{grid-template-columns:1fr !important;} main .row{flex-wrap:wrap;} /* grids */ .mat-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .mat-card .thumb{padding:9px;} .mat-card .meta{padding:11px 12px 12px;} .mat-card .nm{font-size:14px;} .mat-card .ct{font-size:9px;} .gal-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .gal-card .meta{padding:12px;} .gal-card .nm{font-size:14px;} .gal-card .row2 .btn-sm{padding:7px 11px;font-size:11.5px;} .chips{gap:7px;margin-bottom:18px;} .chip{padding:8px 13px;} /* fixed elements respect the home-indicator */ .selbar{bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 24px); gap:12px;padding:11px 12px 11px 18px;} .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px); width:max-content;text-align:center;} /* tables scroll sideways inside their card, never the page */ .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} .tbl th,.tbl td{white-space:nowrap;} /* overlays */ .overlay{padding:12px;} .modal{padding:22px 18px;max-height:calc(100dvh - 24px);} .lightbox{padding:14px;} .lightbox img{max-width:96vw;max-height:82dvh;} .lightbox:has(.lb-manage) img{max-height:calc(82dvh - 78px);} .lightbox:has(.lb-count) img{max-height:calc(82dvh - 46px);} .lightbox:has(.lb-manage):has(.lb-count) img{max-height:calc(82dvh - 124px);} .lightbox .lb-close{top:calc(14px + env(safe-area-inset-top,0px));right:14px;} #emu-banner{font-size:12px;padding:8px 12px;gap:10px;flex-wrap:wrap;text-align:center;} } @media (max-width:360px){ .mat-grid,.gal-grid{grid-template-columns:1fr;} .mat-card .thumb{height:210px;} } /* ══════════════════════════════════════════════════════════════════════════════ ── CSG HQ · THE ROOM (html[data-theme="hq"], console host only) ── Approved direction, 2026-09-09: a night rail against a cream ground, generous radius, soft depth, one gold act per screen. The console host renders /approvals/, /vault/, /templates/, /accounts/, /account/ and /permissions/ in this same theme, so the work is done in the TOKEN LAYER and every shared component re-skins with it. There is not a single per-page rule below. The three brand portals never reach this block. config.js sets data-theme="hq" only when window.CSG.PORTAL is null (a portal resolves a slug and gets data-portal instead), and requireHQ() sends a portal session home before /hq/ renders. Verified against config.js and hq.js, not assumed. Two voices retired here. Mint (--accent #7CB394, --ok #5BEAA0, the graphite ground) is gone: the palette is CSG's own cream, night, green and gold. And mono no longer speaks for labels — --mono resolves to the sans, and --code carries the one place the console still shows a literal shell line. ────────────────────────────────────────────────────────────────────────────── */ html[data-theme="hq"]{ color-scheme:light; /* the CSG kit, by name */ --night:#0B0F0C; --night2:#111814; --night-lift:#141B17; --cream:#F6F3EC; --cream2:#FBF9F4; --cream3:#EFEAE0; --cream-ink:#F5EFE2; --gold:#B8956A; --gold-2:#CBA87A; --gold-lift:#D8B98C; --gold-ink:#8A6A3F; --gold-wash:rgba(184,149,106,.14); --gold-line:rgba(184,149,106,.42); --green-deep:#20392C; /* the ONE token the kit lacks. A failure can never wear the calm colour, so this is the failure-and-destruction hue and nothing else: never decoration, never an emphasis border, never a hover. */ --alert:#8C2F2A; --alert-wash:rgba(140,47,42,.08); --alert-line:rgba(140,47,42,.34); /* the system's own token names, repointed at the kit */ --bg:#F6F3EC; --bg2:#FBF9F4; --surface:#FBF9F4; --surface2:#EFEAE0; --bone:#EFEAE0; --line:#E6E2D8; --border:rgba(34,48,42,.12); --border2:rgba(34,48,42,.20); --hairline:rgba(34,48,42,.12); --accent:#2A4A38; --accent-ink:#F5EFE2; --accent-glow:rgba(42,74,56,.09); --green:#2A4A38; --green-mid:#34543F; --green-glow:rgba(42,74,56,.09); --sage:#3A6349; --ink:#22302A; --muted:#6E675A; --muted2:#4A5249; /* the status ramp: green runs · gold needs a human · alert failed · cream is quiet. --blue is kept because other code reads the name, and resolves to the green ramp so no foreign hue enters the room — the working state is the same green, outlined instead of filled (.chip-st.blue, .pill-generating). */ --ok:#2A4A38; --amber:#8A6A3F; --red:#8C2F2A; --blue:#2A4A38; --serif:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; --mono:'Outfit',system-ui,sans-serif; --code:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --display-style:normal; --display-weight:600; --display-track:-.018em; --btn-bg:#2A4A38; --btn-fg:#F5EFE2; --btn-bg-hover:#20392C; --nav-bg:rgba(11,15,12,.88); --r-sm:12px; --r:14px; --r-lg:18px; --r-xl:22px; --r-card:24px; --card-shadow:0 1px 1px rgba(34,48,42,.03), 0 8px 16px -14px rgba(34,48,42,.16); --shadow:0 1px 1px rgba(34,48,42,.04), 0 12px 26px -16px rgba(34,48,42,.24), 0 40px 70px -44px rgba(34,48,42,.32); --shadow-pop:0 2px 4px rgba(34,48,42,.05), 0 22px 44px -20px rgba(34,48,42,.28), 0 60px 100px -60px rgba(34,48,42,.5); --ease:cubic-bezier(.16,1,.3,1); } /* the ground: cream, with a breath of gold at the crown. The veil stops at 10% because at 14% it drags --muted text down to 4.51:1 — inside the floor, but with nothing left over. */ html[data-theme="hq"] body{ background:radial-gradient(1100px 520px at 86% -12%, rgba(184,149,106,.10), transparent 62%), var(--cream); background-attachment:fixed; font-size:14px; line-height:1.45; } html[data-theme="hq"] ::selection{background:rgba(184,149,106,.28);} /* ── type scale: Fraunces displays, Outfit speaks ──────────────────────────── Fraunces 32/21/17.5 for page title, card name and section head; Outfit 15.5 row title, 14 body, 13.5 secondary, 13 meta, 12 micro. Nothing on the console is under 12px. Tracked caps survive in one role only — the micro label over a number — and they are Outfit, not mono. */ html[data-theme="hq"] h1, html[data-theme="hq"] h2, html[data-theme="hq"] h3, html[data-theme="hq"] .serif{font-family:var(--serif);} html[data-theme="hq"] .mono{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0;} html[data-theme="hq"] .eyebrow, html[data-theme="hq"] label.lbl, html[data-theme="hq"] .tbl th{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);} html[data-theme="hq"] .card-title{font-size:19px;} html[data-theme="hq"] .card-sub, html[data-theme="hq"] .page-head .sub{font-size:13.5px;color:var(--muted);} html[data-theme="hq"] .page-head h1{font-size:clamp(26px,3.2vw,32px);line-height:1.06;} html[data-theme="hq"] .empty{color:var(--muted);font-size:14px;} html[data-theme="hq"] .empty .big{font-family:var(--serif);font-size:19px;color:var(--ink);} /* ── the night rail ────────────────────────────────────────────────────────── hq.js mounts .hq-nav on every console page, so this one surface is the console's chrome everywhere: night against the cream ground, sentence-case labels, and the gold monogram as the only gold in the bar. */ .hq-nav{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,var(--night-lift),var(--night)); border-bottom:1px solid rgba(245,239,226,.10);box-shadow:0 20px 44px -38px rgba(11,15,12,.9);} .hq-nav .in{max-width:1320px;margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;gap:22px;} .hq-mark{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--cream-ink);letter-spacing:-.012em; display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none;} .hq-mark .sig{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;color:#2A1F10; background:linear-gradient(150deg,var(--gold-lift),var(--gold));border:0;border-radius:9px;padding:4px 9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -12px rgba(184,149,106,.9);} .hq-links{display:flex;gap:2px;margin-left:12px;} .hq-link{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none; background:transparent;border:none;cursor:pointer;color:rgba(245,239,226,.66);padding:9px 14px;border-radius:12px; white-space:nowrap;transition:color .3s var(--ease),background .3s var(--ease);} .hq-link:hover{color:var(--cream-ink);background:rgba(245,239,226,.06);} .hq-link.active{color:var(--cream-ink);background:rgba(245,239,226,.09);box-shadow:inset 0 1px 0 rgba(245,239,226,.08);} .hq-link.active::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--gold-2);margin-right:9px;vertical-align:1px;} .hq-right{margin-left:auto;display:flex;align-items:center;gap:12px;} /* desktop keeps the exact offset the inline style used to give it (moved out of hq.js so the mobile anchor rule can win); on mobile .hq-right becomes the anchor instead */ @media (min-width:761px){ .hq-menu{top:58px;} } .hq-clock{font-family:var(--sans);font-size:12px;font-weight:400;color:rgba(245,239,226,.62);letter-spacing:.06em; font-variant-numeric:tabular-nums;} /* the account control is chrome, so it wears the rail's own material */ html[data-theme="hq"] .hq-nav .acct-btn{background:rgba(245,239,226,.07);border-color:rgba(245,239,226,.18);} html[data-theme="hq"] .hq-nav .acct-btn:hover{border-color:rgba(245,239,226,.34);} html[data-theme="hq"] .hq-nav .acct-btn .nm{color:var(--cream-ink);} html[data-theme="hq"] .hq-nav .acct-btn .chev{color:rgba(245,239,226,.62);font-size:12px;} html[data-theme="hq"] .hq-nav .acct-btn .av{background:linear-gradient(155deg,#31563F,var(--green-deep)); color:var(--cream-ink);box-shadow:0 0 0 1px rgba(245,239,226,.14);} /* ── page scaffold ───────────────────────────────────────────────────────────── */ .hq-wrap{max-width:1320px;margin:0 auto;padding:34px 32px 120px;} .hq-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:28px;flex-wrap:wrap;} .hq-head h1{font-size:clamp(26px,3.2vw,32px);line-height:1.06;color:var(--ink);} .hq-head h1 em{color:var(--accent);} .hq-head .sub{font-size:14px;color:var(--muted);margin-top:8px;max-width:64ch;} .hq-eyebrow{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);} /* section head: a Fraunces title, a hairline, the count on the right. Anything else the page hangs in the row (a filter set) falls in after the count. */ .sect{display:flex;align-items:center;gap:16px;margin:34px 0 14px;font-family:var(--serif);font-size:17.5px; font-weight:600;letter-spacing:-.008em;text-transform:none;color:var(--ink);} .sect::after{content:'';order:1;flex:1;height:1px;background:var(--hairline);} .sect .n{order:2;font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted); font-variant-numeric:tabular-nums;} .sect > span:not(.n){order:3;} /* ── the running dot, the one live signal ──────────────────────────────────── A halo that breathes, not a glow: on cream a glow reads as a smudge. */ .led{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;flex:0 0 auto; box-shadow:0 0 0 3px rgba(42,74,56,.14);animation:ledpulse 2.9s var(--ease) infinite;} .led.amber{background:var(--gold);box-shadow:0 0 0 3px rgba(184,149,106,.18);} .led.red{background:var(--alert);box-shadow:0 0 0 3px rgba(140,47,42,.16);animation:none;} .led.off{background:var(--muted);box-shadow:none;animation:none;opacity:.6;} @keyframes ledpulse{0%,100%{box-shadow:0 0 0 3px rgba(42,74,56,.16);}50%{box-shadow:0 0 0 7px rgba(42,74,56,0);}} /* ── numbers and their labels ────────────────────────────────────────────────── */ .stat-l{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:7px;} /* ── status chips: green runs · gold needs a human · alert failed · cream is quiet ── */ .chip-st{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none; padding:4px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; border:1px solid var(--hairline);color:var(--muted2);background:var(--cream3);} .chip-st.on{color:var(--green);border-color:rgba(42,74,56,.24);background:var(--green-glow);} /* in production: the same green, outlined. Filled is live, outlined is working. */ .chip-st.blue{color:var(--green);border-color:rgba(42,74,56,.34);background:transparent;} /* the gold wash carries the meaning and the words stay ink, because gold ink on a gold wash measures 4.13:1 — under the 4.5:1 floor this console holds. */ .chip-st.amber{color:var(--ink);border-color:var(--gold-line);background:var(--gold-wash);} .chip-st.red{color:var(--alert);border-color:var(--alert-line);background:var(--alert-wash);} /* ── meters ────────────────────────────────────────────────────────────────── A meter belongs to work that can be part-done — an onboarding at 50%. It never reports health: a bar that can only ever read full makes a failure look exactly like calm, so health states the fact and changes character when it is bad. */ /* .prog is the one class in this block that /approvals/ also renders on a brand portal. Forward and TLP restyle it in the rail shell, but Luxury Collective carries no data-shell="rail" — so these three rules stay EXACTLY as they were before the rebrand, or LC's decided-so-far bar disappears. They paint on that portal and nowhere else; the console's own bar is the scoped block under them. */ .prog{height:7px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;position:relative;} .prog > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4A8062,var(--accent)); box-shadow:0 0 12px rgba(124,179,148,.5);transition:width .5s ease;} .prog.amber > i{background:linear-gradient(90deg,#8f6d2f,var(--amber));box-shadow:0 0 12px rgba(239,193,92,.5);} html[data-theme="hq"] .prog{height:8px;border-radius:99px;background:rgba(34,48,42,.08);border:0;overflow:hidden;} html[data-theme="hq"] .prog > i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--gold-2),var(--gold)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:width .5s var(--ease);} html[data-theme="hq"] .prog.amber > i{background:linear-gradient(90deg,var(--gold-2),var(--gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.45);} html[data-theme="hq"] .prog.alert > i{background:linear-gradient(90deg,#A8453E,var(--alert));} html[data-theme="hq"] .prog-lbl{display:flex;justify-content:space-between;align-items:baseline; font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:8px;} html[data-theme="hq"] .prog-lbl b{color:var(--ink);font-weight:500;} /* ── the attention feed, the one list of things that need a human ───────────── */ .att{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--cream2); box-shadow:var(--card-shadow);overflow:hidden;} .att .arow{position:relative;display:flex;align-items:center;gap:16px;padding:17px 20px; border-bottom:1px solid var(--hairline);transition:background .3s var(--ease);} .att .arow:last-child{border-bottom:none;} .att .arow:hover{background:rgba(34,48,42,.02);} .att .arow.decide{background:linear-gradient(90deg, rgba(184,149,106,.11), rgba(184,149,106,0) 46%);} .att .arow.decide::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--gold-lift),var(--gold));} .att .arow .t{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em;} .att .arow .t b{font-weight:500;} .att .arow .who2{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--muted); margin-top:1px;} .att .arow .act{margin-left:auto;flex:0 0 auto;} .att .clear{padding:26px;text-align:center;font-family:var(--sans);font-size:13.5px;letter-spacing:0; text-transform:none;color:var(--muted);} .next-line{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline); font-family:var(--sans);font-size:13px;color:var(--muted);} .next-line .k2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;} .next-line b{color:var(--ink);font-weight:500;} /* ── wizard ──────────────────────────────────────────────────────────────────── */ .wiz{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;} .wiz-rail{position:sticky;top:92px;} .wiz-steps{display:flex;flex-direction:column;gap:2px;} .wstep{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r);font-family:var(--sans); font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer; border:1px solid transparent;transition:background .3s var(--ease),color .3s var(--ease);} .wstep .k{width:26px;height:26px;border-radius:9px;border:1px solid var(--border2);display:flex;align-items:center; justify-content:center;font-size:12px;font-weight:500;flex:0 0 auto;font-variant-numeric:tabular-nums;} .wstep.done{color:var(--muted2);} .wstep.done .k{background:var(--green-glow);border-color:rgba(42,74,56,.3);color:var(--green);} .wstep.active{color:var(--ink);background:var(--cream2);border-color:var(--hairline);box-shadow:var(--card-shadow);} .wstep.active .k{background:linear-gradient(158deg,var(--gold-lift),var(--gold));color:#2A1F10;border-color:rgba(138,106,63,.42);} .wstep.locked{opacity:.45;cursor:not-allowed;} .wiz-progress{margin-bottom:18px;} .wiz-panel{background:var(--cream2);border:1px solid var(--hairline);border-radius:var(--r-card);padding:30px; box-shadow:var(--card-shadow);} .wiz-panel h2{font-size:24px;color:var(--ink);margin-bottom:6px;} .wiz-panel .lead{font-size:14px;color:var(--muted);margin-bottom:24px;max-width:60ch;} .wiz-foot{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline);} .wiz-foot .save{font-family:var(--sans);font-size:12.5px;color:var(--muted);letter-spacing:0;text-transform:none;} /* package pick */ .pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .pkg{border:1.5px solid var(--hairline);border-radius:var(--r-card);padding:24px;cursor:pointer;background:var(--cream2); transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);} .pkg:hover{border-color:var(--border2);box-shadow:var(--card-shadow);} .pkg.sel{border-color:var(--gold);background:rgba(184,149,106,.1);box-shadow:0 0 0 1px var(--gold);} .pkg .ic{font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:500;} .pkg h3{font-family:var(--serif);font-size:21px;color:var(--ink);margin:10px 0 8px;} .pkg p{font-size:13.5px;color:var(--muted);line-height:1.55;} /* dropzone + files */ .drop{border:1.5px dashed var(--border2);border-radius:var(--r-lg);padding:30px 20px;text-align:center;color:var(--muted); font-size:13.5px;cursor:pointer;background:var(--cream2); transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);} .drop:hover,.drop.over{border-color:var(--gold-line);color:var(--ink);background:rgba(184,149,106,.07);} .drop .big{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink); display:block;margin-bottom:6px;} .filerow{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--hairline);border-radius:var(--r); font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--cream2);margin-top:8px;} .filerow .sz{color:var(--muted);margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums;} .filerow .rm{color:var(--alert);cursor:pointer;background:none;border:none;font-size:15px;font-family:inherit;} /* checklist board (client detail) */ .ck-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--hairline);} .ck-item:last-child{border-bottom:none;} .ck-item .st{margin-top:3px;} .ck-item .lbl3{font-size:14.5px;color:var(--ink);font-weight:500;} .ck-item .hint{font-size:13px;color:var(--muted);margin-top:3px;} .ck-item .val{font-family:var(--sans);font-size:13px;color:var(--green);margin-top:6px;word-break:break-word;} .ck-item .acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto;} /* work order timeline */ .wo{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px 20px;background:var(--cream2);margin-top:10px; box-shadow:var(--card-shadow);} .wo .t{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .wo .t .name{font-family:var(--serif);font-size:17.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink);} .wo-track{display:flex;align-items:center;gap:0;margin-top:18px;} .wo-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative;} .wo-node::before{content:'';position:absolute;top:6px;left:-50%;right:50%;height:1.5px;background:rgba(34,48,42,.16);} .wo-node:first-child::before{display:none;} .wo-node .dotn{width:13px;height:13px;border-radius:50%;border:2px solid rgba(34,48,42,.2);background:var(--cream2);z-index:1;} .wo-node.done .dotn{background:var(--green);border-color:var(--green);} .wo-node.done::before{background:var(--green);} .wo-node.now .dotn{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 3px rgba(184,149,106,.2);} .wo-node .nl{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);text-align:center;} .wo-node.done .nl,.wo-node.now .nl{color:var(--ink);} .wo .lg{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.8;} .wo .lg b{color:var(--ink);font-weight:500;} /* lifecycle dots (shared visual language) */ .sdots{display:inline-flex;gap:5px;align-items:center;} .sdots i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(34,48,42,.22);background:transparent;display:block;} .sdots i.done{background:var(--green);border-color:var(--green);} .sdots i.now{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,106,.2);} /* the terminal block keeps the night: a literal shell line is the one place the console still speaks in code, and --code is the only monospace left */ .term{background:var(--night);border:1px solid rgba(245,239,226,.1);border-radius:var(--r-lg);padding:16px 18px; font-family:var(--code);font-size:12.5px;color:rgba(245,239,226,.78);line-height:1.7;overflow-x:auto;} .term .p{color:var(--gold-2);} .term b{color:var(--cream-ink);font-weight:500;} /* ── controls ──────────────────────────────────────────────────────────────── Sentence case, capsule, one gold act. The uppercase tracked button was the terminal's voice; the console speaks in iOS Settings tone — a label, not a command line. */ html[data-theme="hq"] .btn{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none; min-height:44px;padding:9px 20px;border-radius:14px;background:var(--cream2);border:1px solid var(--hairline);color:var(--ink); box-shadow:var(--card-shadow); transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .25s var(--ease),border-color .25s var(--ease);} html[data-theme="hq"] .btn:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow);} html[data-theme="hq"] .btn:active{transform:translateY(0) scale(.99);} html[data-theme="hq"] .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;} /* ...but a gold ring 3px outside a GOLD-GRADIENT button is 2.65:1 on the card and 1.25:1 against the face it wraps, under the 3:1 non-text floor (SC 1.4.11 / 2.4.13). The primary act takes the green ring instead: 9.35:1 on the card, and green-on-gold is already the Room's own pairing. Console-scoped, so no portal is touched. */ html[data-theme="hq"] .btn-primary:focus-visible{outline-color:var(--green);} html[data-theme="hq"] .btn:disabled{opacity:.45;box-shadow:none;transform:none;} html[data-theme="hq"] .btn-sm{min-height:38px;padding:7px 15px;border-radius:12px;font-size:13px;} html[data-theme="hq"] .btn-primary{background:linear-gradient(158deg,var(--gold-lift),var(--gold));color:#2A1F10; border-color:rgba(138,106,63,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 26px -14px rgba(184,149,106,1), 0 2px 6px -3px rgba(34,48,42,.3);} html[data-theme="hq"] .btn-primary:hover{background:linear-gradient(158deg,#E3CAA0,var(--gold-2));border-color:rgba(138,106,63,.5);} html[data-theme="hq"] .btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted2);} html[data-theme="hq"] .btn-ghost:hover{background:rgba(34,48,42,.05);border-color:transparent;} /* approve, request changes and delete keep their MEANING as a tint. Only the gold button is filled, so a screen never carries two primary acts. */ html[data-theme="hq"] .btn-ok{background:var(--cream2);color:var(--green);border-color:rgba(42,74,56,.3);} html[data-theme="hq"] .btn-amber{background:var(--cream2);color:var(--gold-ink);border-color:var(--gold-line);} html[data-theme="hq"] .btn-red{background:var(--cream2);color:var(--alert);border-color:var(--alert-line);} html[data-theme="hq"] .btn-red:hover{background:rgba(140,47,42,.07);} html[data-theme="hq"] .card{background:var(--cream2);border-radius:var(--r-card);box-shadow:var(--card-shadow);} html[data-theme="hq"] .panel{background:var(--cream);border-radius:var(--r-lg);} html[data-theme="hq"] .field{background:var(--cream2);border-radius:var(--r);} html[data-theme="hq"] .field:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,106,.2);} html[data-theme="hq"] label.lbl{color:var(--muted);font-family:var(--sans);} html[data-theme="hq"] .menu{border-radius:var(--r-lg);border-color:var(--hairline);box-shadow:var(--shadow);} html[data-theme="hq"] .menu-item{font-size:14px;border-radius:var(--r-sm);} html[data-theme="hq"] .menu .mhead .mr{font-size:12.5px;color:var(--muted);} html[data-theme="hq"] .modal{border-radius:var(--r-card);border-color:var(--hairline);} html[data-theme="hq"] .overlay{background:rgba(11,15,12,.42);} html[data-theme="hq"] .role-badge{font-size:12px;font-weight:500;padding:4px 11px;background:var(--cream3); color:var(--muted2);border-color:var(--hairline);} html[data-theme="hq"] .role-badge.master{background:var(--gold-wash);color:var(--ink);border-color:var(--gold-line);} html[data-theme="hq"] .role-select, html[data-theme="hq"] select.field{background:var(--cream2);border-radius:var(--r-sm);font-size:13.5px;color:var(--ink);} html[data-theme="hq"] .chip{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none; padding:9px 16px;background:var(--cream2);border-color:var(--hairline);color:var(--muted2);box-shadow:var(--card-shadow);} html[data-theme="hq"] .chip:hover{color:var(--ink);border-color:var(--border2);} html[data-theme="hq"] .chip.active{background:var(--green);color:var(--cream-ink);border-color:var(--green);} /* pills: Capitalized, 12px, the hue carried by the wash. Gold takes ink type for the same 4.13:1 reason the gold chip does. */ html[data-theme="hq"] .pill{font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none;padding:4px 11px; border-radius:999px;} html[data-theme="hq"] .pill-pending, html[data-theme="hq"] .pill-hold{background:var(--cream3);color:var(--muted2);border-color:var(--hairline);} html[data-theme="hq"] .pill-awaiting, html[data-theme="hq"] .pill-changes{background:var(--gold-wash);color:var(--ink);border-color:var(--gold-line);} html[data-theme="hq"] .pill-generating{background:transparent;color:var(--green);border-color:rgba(42,74,56,.34);} html[data-theme="hq"] .pill-approved, html[data-theme="hq"] .pill-delivered{background:var(--green-glow);color:var(--green);border-color:rgba(42,74,56,.24);} html[data-theme="hq"] .pill-denied{background:var(--alert-wash);color:var(--alert);border-color:var(--alert-line);} html[data-theme="hq"] .avatar{background:var(--cream3);border-color:var(--hairline);color:var(--muted2);} html[data-theme="hq"] .tbl td{border-bottom-color:var(--hairline);} html[data-theme="hq"] .tbl th{border-bottom-color:var(--hairline);padding-bottom:12px;} html[data-theme="hq"] .switch .track{background:var(--cream3);border-color:var(--border2);} html[data-theme="hq"] .switch input:checked + .track{background:var(--green);border-color:var(--green);} /* color swatch input row */ .swrow{display:flex;align-items:center;gap:10px;} .swrow input[type=color]{width:44px;height:44px;border-radius:var(--r);border:1px solid var(--border2); background:var(--cream2);padding:3px;cursor:pointer;} /* Reduced motion: named surfaces only. A blanket animation:none would also freeze the spinner and the skeletons, and a frozen loading indicator reads as a hung page — the one thing the console must never look like. */ @media (prefers-reduced-motion:reduce){ html[data-theme="hq"] .btn, html[data-theme="hq"] .chip, html[data-theme="hq"] .hq-link, html[data-theme="hq"] .att .arow, html[data-theme="hq"] .drop, html[data-theme="hq"] .pkg, html[data-theme="hq"] .wstep{transition:none;} html[data-theme="hq"] .btn:hover, html[data-theme="hq"] .btn:active{transform:none;} html[data-theme="hq"] .led{animation:none;} } /* ── mobile ─────────────────────────────────────────────────────────────────── */ @media (max-width:900px){ .wiz{grid-template-columns:1fr;} .wiz-rail{position:static;} /* The strip scrolls, so the cut edge has to SAY so: the trailing steps fade out instead of stopping mid-word, which is the only thing telling anyone that steps 4 and 5 are a swipe away. The ::after spacer is what keeps the last step out of the fade once the strip is scrolled to its end. */ .wiz-steps{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:6px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);} .wiz-steps::-webkit-scrollbar{display:none;} .wiz-steps::after{content:'';flex:0 0 42px;} .wstep{flex:0 0 auto;} .pkg-grid{grid-template-columns:1fr;} } @media (max-width:760px){ .hq-nav .in{height:auto;flex-wrap:wrap;padding:10px 18px;row-gap:2px;} .hq-right{position:relative;} /* the account menu anchors to this, not the blurred nav */ /* Same rule as the wizard strip: the nav scrolls here, so the last label fades out rather than being sliced in half. Nothing about the nav's order or contents moves. */ .hq-links{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin-left:-6px;padding:6px 0 8px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);} .hq-links::-webkit-scrollbar{display:none;} .hq-links::after{content:'';flex:0 0 42px;} .hq-clock{display:none;} .hq-wrap{padding:24px 18px 120px;} .hq-head h1{font-size:clamp(24px,7vw,30px);} .wiz-panel{padding:22px 18px;} .wo-track{flex-wrap:wrap;row-gap:14px;} .wo-node{flex:1 0 33%;} .wo-node::before{display:none;} } /* ── support widget (client portals only) ───────────────────── */ .support-fab{position:fixed;z-index:500;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px)); display:inline-flex;align-items:center;gap:8px;padding:11px 17px 11px 14px;border-radius:999px; background:var(--surface);color:var(--ink);border:1px solid var(--border2); box-shadow:0 10px 30px -12px rgba(0,0,0,.35);cursor:pointer; font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;} .support-fab svg{color:var(--accent);} .support-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(0,0,0,.45);border-color:var(--muted);} .support-fab:active{transform:translateY(0);} @media (max-width:640px){ .support-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:11px 15px 11px 13px;font-size:13px;} } /* Multi page lightbox. A guide used to open its cover and hide the other eleven pages. */ .lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font-size:26px;line-height:1; cursor:pointer;z-index:801;display:flex;align-items:center;justify-content:center;} .lb-prev:hover,.lb-next:hover{background:rgba(0,0,0,.7);} .lb-prev{left:20px;} .lb-next{right:20px;} .lb-count{flex:0 0 auto;color:rgba(255,255,255,.85); font-size:13px;letter-spacing:.08em;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:20px;z-index:801;} @media (max-width:520px){.lb-prev{left:8px;} .lb-next{right:8px;}} /* Vault: brand sections and captions (2026-08-03). Posts from two brands used to sit in one unlabelled grid; the header names the brand a block belongs to, and only appears when more than one is on screen. */ .brand-head{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin:26px 0 10px;display:flex;align-items:center;gap:9px;} .brand-head:first-child{margin-top:4px;} .brand-head::after{content:"";flex:1;height:1px;background:var(--line,#e6e2d8);} .brand-head span{font-size:11px;font-weight:600;letter-spacing:0;background:var(--line,#eee); color:var(--muted);border-radius:99px;padding:1px 8px;} /* flex-basis 100% because .chips is itself a flex row: without it the brand row and the type row sit side by side on one line, exactly in the multi-brand console view they exist for. */ .chip-row{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;} .chip-row+.chip-row{margin-top:7px;} /* THE POST FEED (2026-08-03), the vault's own layout, not shared with /materials/ or /agents/. Artwork beside the WHOLE caption, readable before copying, no click required. Colour rule, learned twice today: caption text sits DIRECTLY on the card surface and inherits its colour, no background fill of its own, no var-on-var pairing. The card chrome reuses the exact tokens .gal-card already proves on every portal, including TLP's dark theme, and the buttons sit on that same proven surface, where each brand's .btn styling is designed to live. */ .post-feed{display:flex;flex-direction:column;gap:18px;} .post-row{display:grid;grid-template-columns:250px minmax(0,1fr); background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;} /* The image keeps ITS OWN aspect ratio, never cropped. The first version stretched the image box to the row's height (driven by the caption) and object-fit:cover sliced both sides off every 4:5 post. align-self:start stops the grid stretch; height:auto lets the PNG decide. */ .post-row .pr-img{background:var(--surface2);align-self:start;} .post-row .pr-img img{width:100%;height:auto;display:block;cursor:zoom-in;} .post-row .pr-body{padding:16px 18px;display:flex;flex-direction:column;min-width:0;} .post-row .nm{font-family:var(--serif);font-size:16.5px;font-weight:600;} .post-row .by{font-size:11.5px;color:var(--muted);margin-top:2px;} .post-row .cap-teaser{margin:10px 0 4px;font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--muted2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .post-row .cap-none{margin:10px 0 4px;font-size:12.5px;font-style:italic;color:var(--muted);} .post-row .row2{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;flex-wrap:wrap;} @media (max-width:680px){ .post-row{grid-template-columns:1fr;} } /* ══════════════════════════════════════════════════════════════════════════════ LUXURY COLLECTIVE · DESKTOP SIDEBAR (concept C, Brett 2026-08-24) The HIG is explicit that desktop navigation is a SIDEBAR, not a row of tabs — tabs are the mobile pattern. Nothing about the shell MARKUP changes: the very same nav.topbar every portal renders is laid out vertically here, so each page, link set and role variation follows automatically and no JS moved. Below 900px it folds back into the top bar, which IS the right pattern at that width. The sidebar is glass and deliberately more opaque than a toolbar (.78 vs .62) — a large surface reads heavier, so it needs more fill to stay quiet. ═══════════════════════════════════════════════════════════════════════════ */ /* 901px so the sidebar, the toolbar and the editor-as-inspector all switch at the SAME width. MOBILE_ED() in request/index.html is (max-width:900px); at 900px the sidebar used to be on while the toolbar and inspector were still off — a one-pixel band, but browser zoom lands on fractional widths, so it was reachable. */ @media (min-width:901px){ /* --lc-gut is the breathing room between the sidebar's edge and the content. The toolbar and the page body BOTH read it, so the bar's title always lines up with the grid underneath rather than sitting closer in and reading as crowded. */ [data-portal="luxury-collective"]{ --lc-side:240px; --lc-gut:56px; } /* only pages that actually mount the shell — never the login card */ [data-portal="luxury-collective"] body:has(nav.topbar){ padding-left:var(--lc-side); } [data-portal="luxury-collective"] nav.topbar{ position:fixed; top:0; left:0; bottom:0; width:var(--lc-side); height:auto; max-width:none; margin:0; padding:18px 12px 14px; display:block; border:0; border-radius:0; border-right:.5px solid rgba(255,255,255,.10); background:rgba(19,19,22,.78); -webkit-backdrop-filter:blur(30px) saturate(1.4); backdrop-filter:blur(30px) saturate(1.4); box-shadow:none; transition:none; } /* the scroll-condense belongs to a floating capsule; a sidebar does not shrink */ [data-portal="luxury-collective"] nav.topbar.lc-scrolled{ height:auto; background:rgba(19,19,22,.78); } [data-portal="luxury-collective"] nav.topbar > .wrap{ max-width:none; margin:0; padding:0; height:100%; display:flex; flex-direction:column; align-items:stretch; } /* the brand chip carries an inline padding from shell.js — space it with MARGIN */ [data-portal="luxury-collective"] nav.topbar .brand-chip{ margin:4px 10px 24px; align-self:flex-start; } [data-portal="luxury-collective"] nav.topbar .nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:2px; margin:0; overflow:visible; } /* a quiet group label, the macOS source-list grammar */ [data-portal="luxury-collective"] nav.topbar .nav-sec{ font-size:11px; font-weight:600; color:#7C7C82; letter-spacing:.01em; padding:16px 11px 6px; } [data-portal="luxury-collective"] nav.topbar .nav-sec:first-child{ padding-top:2px; } [data-portal="luxury-collective"] nav.topbar .nav-link{ display:flex; align-items:center; gap:10px; min-height:34px; padding:0 11px; border-radius:9px; font-size:13.5px; } [data-portal="luxury-collective"] nav.topbar .nav-ico{ width:15px; height:15px; flex:0 0 auto; opacity:.85; } [data-portal="luxury-collective"] nav.topbar .nav-tx{ min-width:0; } /* the count is data, so it sits in tabular figures and never shifts the row */ [data-portal="luxury-collective"] nav.topbar .nav-ct{ margin-left:auto; font-size:11.5px; color:#7C7C82; font-variant-numeric:tabular-nums; flex:0 0 auto; } [data-portal="luxury-collective"] nav.topbar .nav-ct:empty{ display:none; } /* selection tints the GLYPH gold and leaves the label white — one accent, one meaning */ [data-portal="luxury-collective"] nav.topbar .nav-link.active .nav-ico{ color:var(--accent); opacity:1; } /* the selection capsule becomes a selection ROW, and still rides the view transition — so on navigation it glides down the list instead of across */ [data-portal="luxury-collective"] nav.topbar .nav-link .nav-pill{ border-radius:9px; } /* the account control sits at the foot of the list, above a hairline */ [data-portal="luxury-collective"] nav.topbar .nav-right{ display:block; margin:auto 0 0; padding-top:12px; border-top:.5px solid rgba(255,255,255,.09); } /* the foot is a plain identity row, not a control: no fill, no chevron */ [data-portal="luxury-collective"] nav.topbar .acct-btn{ width:100%; justify-content:flex-start; border-radius:10px; padding:7px 9px; background:transparent; } [data-portal="luxury-collective"] nav.topbar .acct-btn:hover{ background:rgba(255,255,255,.07); } [data-portal="luxury-collective"] nav.topbar .acct-btn .chev{ display:none; } [data-portal="luxury-collective"] nav.topbar .acct-btn .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* the menu opens UPWARD out of the foot of the sidebar */ [data-portal="luxury-collective"] nav.topbar .menu{ top:auto; bottom:calc(100% + 8px); left:0; right:auto; min-width:100%; } /* ── the content toolbar (built by lc-cinema.js) ────────────────────────────── Full-bleed across the content column, glass, with a scroll edge under it. It is the functional layer for the CONTENT, exactly as the sidebar is for navigation. */ /* FIXED across the content column, not sticky inside it. Inside the column it took the page's own max-width — /account/ pins 640px, so the bar became a 752px slab floating mid-screen instead of spanning the page. Spanning from the sidebar to the right edge is also what makes its title land on --lc-gut no matter what width the page chooses. */ [data-portal="luxury-collective"] .lc-toolbar{ position:fixed; top:0; left:var(--lc-side); right:0; z-index:50; display:flex; align-items:center; gap:11px; height:52px; margin:0; padding:0 var(--lc-gut); background:rgba(14,14,16,.72); -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5); border-bottom:.5px solid var(--hairline); } [data-portal="luxury-collective"] .lc-tb-title{ font-size:15px; font-weight:600; letter-spacing:-.012em; color:var(--ink); margin:0; } [data-portal="luxury-collective"] .lc-tb-count{ font-size:12.5px; color:#7C7C82; font-variant-numeric:tabular-nums; } [data-portal="luxury-collective"] .lc-tb-grow{ flex:1; } /* controls that travelled here from the page head keep working, just smaller */ [data-portal="luxury-collective"] .lc-toolbar .btn{ padding:8px 15px; font-size:12.5px; } [data-portal="luxury-collective"] .lc-toolbar .lbl{ display:none; } [data-portal="luxury-collective"] .lc-toolbar select, [data-portal="luxury-collective"] .lc-toolbar .role-select{ padding:7px 30px 7px 11px; font-size:12.5px; } [data-portal="luxury-collective"] .lc-head-folded{ display:none; } /* where a folded page's explanation goes: present, but not competing with the work */ [data-portal="luxury-collective"] .lc-footnote{ margin-top:52px; padding-top:16px; border-top:.5px solid var(--hairline); max-width:74ch; } [data-portal="luxury-collective"] .lc-footnote .sub, [data-portal="luxury-collective"] .lc-footnote p{ font-size:12px; line-height:1.7; color:#7C7C82; margin:0 0 6px; max-width:none; } /* The scroll-settle animation is bound to EVERY .page-head, so a second head further down a page (/request/ "The details.") sits permanently at opacity .6. LC folds its head away regardless, so the animation has nothing left to do here. */ [data-portal="luxury-collective"] .page-head{ animation:none; } /* A shell-less gate (/profile/, /reset/) has no sidebar, so it must not be indented by one — and the cached nav config.js paints on the first frame must not appear there. */ [data-portal="luxury-collective"] body:has(.center-screen){ padding-left:0; } [data-portal="luxury-collective"] body:has(.center-screen) nav.topbar[data-shellcache]{ display:none; } /* Content LEFT-aligns after the sidebar rather than re-centring in the remainder, so a page's title always begins on the same gutter as the toolbar above it whatever max-width that page sets for itself. */ [data-portal="luxury-collective"] main.wrap{ margin-left:0; margin-right:auto; padding:calc(52px + 26px) var(--lc-gut) 110px; } /* /approvals/ pins its padding INLINE, which no ordinary rule can beat, and inline styles live in markup shared with the other three skins so they cannot simply be deleted. Overriding exactly the elements that carry one keeps !important off every other page — a blanket !important here silently beat the inspector's own padding-right and let the grid run underneath the docked editor. */ [data-portal="luxury-collective"] main.wrap[style*="padding"]{ padding:calc(52px + 26px) var(--lc-gut) 110px !important; } /* the toolbar is the top of the page now; a page keeps whatever max-width it sets */ [data-portal="luxury-collective"] main.wrap:not([style*="max-width"]){ max-width:1500px; } /* Everything that floats centred does so on the VIEWPORT, which is half a sidebar off from the content column once a sidebar occupies the left of the screen. The lightbox/zoom counters are deliberately NOT in this list: they belong to full-screen overlays that cover the sidebar too, so the viewport IS their column. */ [data-portal="luxury-collective"] .selbar, [data-portal="luxury-collective"] .bulkbar, [data-portal="luxury-collective"] .toast, [data-portal="luxury-collective"] .picks{ left:calc(50% + (var(--lc-side) / 2)); } [data-portal="luxury-collective"] .bulkbar{ max-width:calc(100vw - var(--lc-side) - 24px); /* never reach under the sidebar */ } } /* ══════════════════════════════════════════════════════════════════════════════ LUXURY COLLECTIVE · CONTENT GRAMMAR (Brett 2026-08-24, "this kind of simplicity for all the pages"). The sidebar and toolbar gave the SHELL one voice; these rules give the CONTENT one. Derived from an audit of all eleven portal pages — the same violation appeared on six or eight pages at a time, so it is fixed once here rather than patched per page. Everything is scoped to this brand: the same markup renders for Forward Rlty (light paper), The Lending Pros and the console, and must not move for them. ═══════════════════════════════════════════════════════════════════════════ */ /* ── one section-header voice: a quiet label and a count, nothing else ──────── Eight pages had invented their own — tracked-out caps, gold rules, serif. */ [data-portal="luxury-collective"] .gen-sec .t, [data-portal="luxury-collective"] .mat-cathead, [data-portal="luxury-collective"] .vault-sec h2, [data-portal="luxury-collective"] .brand-head, [data-portal="luxury-collective"] .gsec, [data-portal="luxury-collective"] .ced-group, [data-portal="luxury-collective"] .ag-phead .t{ font-family:'Inter',system-ui,sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.01em; text-transform:none; color:#98989D; } [data-portal="luxury-collective"] .mat-cathead{ border-bottom:0; padding-bottom:0; margin:30px 0 12px; } [data-portal="luxury-collective"] .gen-sec .n, [data-portal="luxury-collective"] .mat-catn, [data-portal="luxury-collective"] .vault-sec h2 .n, [data-portal="luxury-collective"] .brand-head span, [data-portal="luxury-collective"] .gsec .n{ font-size:12px; font-weight:600; letter-spacing:0; color:#C9C9CE; background:rgba(255,255,255,.08); border:0; border-radius:99px; padding:2px 9px; font-variant-numeric:tabular-nums; } /* a source-list header carries no rule line */ [data-portal="luxury-collective"] .gen-sec::after, [data-portal="luxury-collective"] .gsec::after, [data-portal="luxury-collective"] .brand-head::after{ display:none; } /* ── micro-labels: no 8.5px gold caps, no tracked-out field labels ──────────── */ [data-portal="luxury-collective"] .who-badge, [data-portal="luxury-collective"] .mat-secpick, [data-portal="luxury-collective"] .kind, [data-portal="luxury-collective"] .gcount{ font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:#C9C9CE; background:rgba(255,255,255,.08); border:1px solid transparent; border-radius:999px; padding:3px 9px; font-variant-numeric:tabular-nums; } [data-portal="luxury-collective"] .sub2, [data-portal="luxury-collective"] .rbadge{ text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; color:#98989D; margin-top:2px; } [data-portal="luxury-collective"] label.lbl, [data-portal="luxury-collective"] span.lbl, [data-portal="luxury-collective"] .pmodal .frow .lbl, [data-portal="luxury-collective"] .photopick .plbl{ text-transform:none; letter-spacing:.01em; font-size:12px; font-weight:500; color:#98989D; } /* ── gold marks ONE act. Everything that borrowed it becomes glass ─────────── A gold button on every card meant nothing on the screen was the primary act. */ [data-portal="luxury-collective"] .matbar .btn-primary, [data-portal="luxury-collective"] .post-row.is-posted .btn-primary{ background:rgba(255,255,255,.10); color:#F5F5F7; border-color:transparent; box-shadow:none; } [data-portal="luxury-collective"] .matbar .btn-primary:hover, [data-portal="luxury-collective"] .post-row.is-posted .btn-primary:hover{ background:rgba(255,255,255,.15); } /* approve / request-changes keep their MEANING as a text tint, not a filled disc: removing the colour outright would leave the approvals stream unreadable at a glance */ [data-portal="luxury-collective"] .btn-ok{ background:rgba(255,255,255,.08); border-color:transparent; color:#8FBF9F; } [data-portal="luxury-collective"] .btn-amber{ background:rgba(255,255,255,.08); border-color:transparent; color:#D9B36A; } [data-portal="luxury-collective"] .btn-ok:hover, [data-portal="luxury-collective"] .btn-amber:hover{ background:rgba(255,255,255,.13); } [data-portal="luxury-collective"] .btn-red{ background:rgba(224,138,120,.12); border-color:transparent; color:#E08A78; } [data-portal="luxury-collective"] .pill-awaiting, [data-portal="luxury-collective"] .pill-changes, [data-portal="luxury-collective"] .pill-delivered{ background:rgba(255,255,255,.08); color:#C9C9CE; border-color:transparent; } /* hover is never gold — SELECTION is gold, and only selection */ [data-portal="luxury-collective"] .gen-card:hover, [data-portal="luxury-collective"] .pcard:hover, [data-portal="luxury-collective"] .ag-card:hover{ border-color:rgba(255,255,255,.2); } [data-portal="luxury-collective"] .ag-panel{ border-color:rgba(255,255,255,.08); } /* needs-attention is amber; it is not the brand's act */ [data-portal="luxury-collective"] .framehint.unsaved{ color:#D9B36A; font-weight:600; } [data-portal="luxury-collective"] .pcard .pc-status.warn{ color:#D9B36A; } [data-portal="luxury-collective"] .pcard .pc-dot.warn{ background:#D9B36A; } [data-portal="luxury-collective"] .photopick.empty:hover .shot{ border-color:rgba(255,255,255,.28); } /* the shell-less pages (/profile/, /reset/) opened on a gold slab */ [data-portal="luxury-collective"] .brand-chip{ background:rgba(255,255,255,.06); color:var(--ink); } /* ── floating bars are CHROME, so they wear chrome glass ───────────────────── These were painted with the gold button fill and carried dark text on gold at 1.97:1 — under the 4.5:1 floor for the labels they carry. */ [data-portal="luxury-collective"] .bulkbar, [data-portal="luxury-collective"] .selbar, [data-portal="luxury-collective"] .picks{ background:rgba(20,20,22,.85); color:#F5F5F7; -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); border:.5px solid var(--hairline); box-shadow:0 24px 60px -24px rgba(0,0,0,.9); } [data-portal="luxury-collective"] .bulkbar .btn{ background:rgba(255,255,255,.10); color:#F5F5F7; } [data-portal="luxury-collective"] .bulkbar .btn:hover{ background:rgba(255,255,255,.16); } /* Continue is the one gold act inside the tray */ [data-portal="luxury-collective"] .selbar .btn:not(.btn-red):not(.btn-ok):not(.btn-amber):not([disabled]){ background:linear-gradient(180deg,#D2B268,#AE8C43); color:#141005; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -10px rgba(198,167,94,.5); } /* ── one content-card family: same fill, same hairline, same radius ─────────── */ [data-portal="luxury-collective"] .gen-card, [data-portal="luxury-collective"] .ag-card, [data-portal="luxury-collective"] .ag-panel, [data-portal="luxury-collective"] .pcard, [data-portal="luxury-collective"] .post-row, [data-portal="luxury-collective"] .tcard, [data-portal="luxury-collective"] details.grp, [data-portal="luxury-collective"] .photopick{ background:linear-gradient(178deg,#161619 0%,#111114 100%); border:1px solid rgba(255,255,255,.08); border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } [data-portal="luxury-collective"] .gen-card:hover, [data-portal="luxury-collective"] .ag-card:hover, [data-portal="luxury-collective"] .pcard:hover, [data-portal="luxury-collective"] .post-row:hover, [data-portal="luxury-collective"] .tcard:hover, [data-portal="luxury-collective"] details.grp:hover{ border-color:rgba(255,255,255,.2); box-shadow:0 20px 44px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); } /* accordion rows join the same family */ [data-portal="luxury-collective"] .mat-sec{ border-radius:16px; border-color:transparent; background:rgba(255,255,255,.05); padding:14px 16px; } [data-portal="luxury-collective"] .mat-sec.open{ background:rgba(255,255,255,.09); border-color:transparent; } /* ── controls: capsules, and a file input that is not an OS widget ──────────── */ [data-portal="luxury-collective"] input[type="file"]{ padding:8px 10px; font-size:12.5px; color:#98989D; } [data-portal="luxury-collective"] input[type="file"]::file-selector-button, [data-portal="luxury-collective"] input[type="file"]::-webkit-file-upload-button{ background:rgba(255,255,255,.08); border:0; border-radius:999px; padding:8px 15px; margin-right:11px; font:600 12.5px 'Inter',system-ui,sans-serif; color:#F5F5F7; cursor:pointer; } [data-portal="luxury-collective"] .framebar button{ background:rgba(255,255,255,.08); border-radius:999px; padding:7px 14px; font-size:12.5px; color:#F5F5F7; text-decoration:none; } [data-portal="luxury-collective"] .framehint{ font-size:12.5px; } [data-portal="luxury-collective"] .mat-search input{ background:rgba(255,255,255,.06); border:1px solid transparent; border-radius:12px; color:#F5F5F7; } [data-portal="luxury-collective"] .mat-search input:focus{ background:rgba(255,255,255,.09); box-shadow:0 0 0 3px rgba(198,167,94,.35); outline:none; } [data-portal="luxury-collective"] .lb-mbtn, [data-portal="luxury-collective"] .lightbox .lb-close, [data-portal="luxury-collective"] .lb-prev, [data-portal="luxury-collective"] .lb-next{ background:rgba(255,255,255,.10); border:1px solid transparent; border-radius:999px; color:#F5F5F7; } [data-portal="luxury-collective"] .lb-mbtn:hover, [data-portal="luxury-collective"] .lightbox .lb-close:hover, [data-portal="luxury-collective"] .lb-prev:hover, [data-portal="luxury-collective"] .lb-next:hover{ background:rgba(255,255,255,.16); } [data-portal="luxury-collective"] .lb-manage{ background:rgba(20,20,22,.72); } /* the card ⋯ menu joins the one menu material */ [data-portal="luxury-collective"] .matmenu{ background:rgba(26,26,29,.96); -webkit-backdrop-filter:blur(30px) saturate(1.6); backdrop-filter:blur(30px) saturate(1.6); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:0 30px 70px -24px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.07); } /* ── type ramp: names are one size, not five ────────────────────────────────── */ [data-portal="luxury-collective"] .card-title{ font-size:15px; font-weight:600; letter-spacing:-.012em; color:var(--ink); } [data-portal="luxury-collective"] .gen-card .nm, [data-portal="luxury-collective"] .ag-id .nm, [data-portal="luxury-collective"] .post-row .nm{ font-weight:600; font-size:15.5px; letter-spacing:-.01em; } [data-portal="luxury-collective"] .who-head .nm{ font-size:20px; font-weight:600; letter-spacing:-.015em; } [data-portal="luxury-collective"] .who-head .sub2{ font-size:12px; text-transform:none; letter-spacing:0; } [data-portal="luxury-collective"] .post-row .cap-none{ font-style:normal; } /* a card still rendering must hold its frame instead of collapsing to a sliver */ [data-portal="luxury-collective"] .gal-card .thumb:not(:has(img)){ aspect-ratio:4/4.4; display:flex; align-items:center; justify-content:center; } /* ══════════════════════════════════════════════════════════════════════════════ ── OPTION 3 · RAIL SHELL (FR + TLP, 2026-09-05) ── The prototype look, live, for Forward Rlty and The Lending Pros. Every rule here sits under html[data-shell="rail"], which config.js sets from the brand's `shell:'rail'` flag (never on /login or /reset). Delete the flag and this whole block is inert; Luxury Collective and the console never carry the attribute. In order: the prototype palette mapped onto the EXISTING token names (so every legacy component re-skins for free), then the components the prototype draws differently (flat cards, compact chips and pills, tiles, no taglines), then the chrome (rail, top row, phone tab bar, the fixed-bar offset), then the prototype's own components that /home/, /more/ and the piece sheet are built from. Sizes: rail and tab labels are 10px (the system pattern), pills, tags, story labels and count badges 11px bold; everything else holds Brett's 12px floor. ═══════════════════════════════════════════════════════════════════════════ */ /* ── tokens: the prototype palette on the existing names ────────────────────── */ html[data-shell="rail"][data-portal="forward-realty"]{ --bg:#F7F4EE; --bg2:#F3EFE7; --surface:#FFFFFF; --surface2:#F1EDE4; --bone:#EAE5DA; --line:rgba(10,10,10,.10); --line-2:rgba(10,10,10,.06); --border:rgba(10,10,10,.10); --border2:rgba(10,10,10,.16); --ink:#1E1A14; --muted:#8A8378; --muted2:#5D5850; --accent:#B8956A; --accent-ink:#FFFFFF; --accent-glow:rgba(184,149,106,.14); --accent-deep:#8F6F45; --accent-wash:rgba(184,149,106,.14); --green:#B8956A; --green-mid:#A98357; --green-glow:rgba(184,149,106,.14); --sage:#B8956A; --ok:#4A6B52; --amber:#A5771F; --red:#9a4432; --blue:#44576e; --pos:#4A6B52; --pos-wash:rgba(74,107,82,.12); --warn:#A5771F; --warn-wash:rgba(165,119,31,.12); --neg:#9a4432; --neg-wash:rgba(154,68,50,.10); --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --display-style:normal; --display-weight:500; --display-track:-0.01em; --btn-bg:#1E1A14; --btn-fg:#F7F4EE; --btn-bg-hover:#2C2721; --hairline:rgba(10,10,10,.10); --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:20px; --shadow:0 10px 30px rgba(50,40,24,.08); --card-shadow:none; --nav-bg:#FFFFFF; background:#F7F4EE; } html[data-shell="rail"][data-portal="the-lending-pros"]{ --bg:#0E0F11; --bg2:#121418; --surface:#16181C; --surface2:#1F2226; --bone:#1C1F24; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.18); --ink:#F4F4F3; --muted:#8F939A; --muted2:#B4B7BB; --accent:#D8D9D6; --accent-ink:#0E0F11; --accent-glow:rgba(216,217,214,.10); --accent-deep:#EDEEEA; --accent-wash:rgba(255,255,255,.08); --green:#D8D9D6; --green-mid:#C2C3C0; --green-glow:rgba(216,217,214,.10); --sage:#D8D9D6; --ok:#7FBF9A; --amber:#D9B36A; --red:#E08A78; --blue:#8FA8D9; --pos:#7FBF9A; --pos-wash:rgba(127,191,154,.14); --warn:#D9B36A; --warn-wash:rgba(217,179,106,.14); --neg:#E08A78; --neg-wash:rgba(224,138,120,.14); --serif:'Inter',system-ui,sans-serif; --sans:'Mulish',system-ui,sans-serif; --display-style:normal; --display-weight:650; --display-track:-0.015em; --btn-bg:#D8D9D6; --btn-fg:#0E0F11; --btn-bg-hover:#EDEEEA; --hairline:rgba(255,255,255,.10); --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:20px; --shadow:0 12px 34px rgba(0,0,0,.45); --card-shadow:none; --nav-bg:#16181C; background:#0E0F11; } /* the aurora and the spotlight belong to the glass look; the prototype is flat paper (the TLP grain on body::after stays, at its .05) */ html[data-shell="rail"][data-portal="forward-realty"] body{ background:transparent; } html[data-shell="rail"][data-portal="the-lending-pros"] body{ background:#0E0F11; } html[data-shell="rail"] h1 em, html[data-shell="rail"] h2 em{ color:var(--accent-deep); } html[data-shell="rail"] ::selection{ background:var(--accent-wash); } /* ── flat surfaces: the prototype has no glass ──────────────────────────────── */ html[data-shell="rail"] .card, html[data-shell="rail"] .mat-card, html[data-shell="rail"] .gal-card{ background:var(--surface); border:1px solid var(--border); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } html[data-shell="rail"] .card{ border-radius:16px; } html[data-shell="rail"] .card.accent::before{ display:none; } html[data-shell="rail"] .card-title{ font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:0; } html[data-shell="rail"] .card-sub{ font-size:12.5px; color:var(--muted); } html[data-shell="rail"] .panel{ background:var(--surface2); border-color:transparent; border-radius:14px; } html[data-shell="rail"] .divider{ background:var(--line-2); } html[data-shell="rail"] .empty{ color:var(--muted); } html[data-shell="rail"] .empty .big{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); } /* ── buttons: flat, compact, capsule ────────────────────────────────────────── */ html[data-shell="rail"] .btn{ height:38px; padding:0 18px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:0; border:1px solid var(--border); background:var(--surface); color:var(--ink); box-shadow:none; } html[data-shell="rail"] .btn:hover{ border-color:var(--border2); background:var(--surface2); } html[data-shell="rail"] .btn svg{ width:16px; height:16px; } html[data-shell="rail"] .btn-primary, html[data-shell="rail"] .btn.primary{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); box-shadow:none; } html[data-shell="rail"] .btn-primary:hover, html[data-shell="rail"] .btn.primary:hover{ background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); } html[data-shell="rail"] .btn-ghost, html[data-shell="rail"] .btn.ghost{ background:var(--surface2); border-color:transparent; color:var(--ink); } html[data-shell="rail"] .btn-sm{ height:32px; padding:0 13px; font-size:12.5px; } html[data-shell="rail"] .btn-ok{ background:var(--pos); color:#fff; border-color:var(--pos); } html[data-shell="rail"] .btn-amber{ background:var(--warn); color:var(--btn-fg); border-color:var(--warn); } html[data-shell="rail"] .btn-red{ background:var(--neg-wash); color:var(--neg); border-color:transparent; } html[data-shell="rail"] .btn-red:hover{ background:var(--neg-wash); border-color:var(--neg); } /* TLP's outlined secondary button is written at (0,5,0) in the brand block above, so it has to be beaten by name; the dark floating bars keep their own inverted buttons. */ html[data-shell="rail"][data-portal="the-lending-pros"] .btn:not(.btn-primary):not(.primary):not(.danger):not(.btn-red):not(.btn-ok):not(.btn-amber):not(.bulkbar *):not(.selbar *){ background:var(--surface2); border-color:transparent; color:var(--ink); } html[data-shell="rail"][data-portal="the-lending-pros"] .btn:not(.btn-primary):not(.primary):not(.danger):not(.btn-red):not(.btn-ok):not(.btn-amber):not(.bulkbar *):not(.selbar *):hover{ background:var(--accent-wash); } /* ── chips (30px capsules, sentence case) and pills (11px, capitalized text) ─── */ html[data-shell="rail"] .chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); line-height:1; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; cursor:pointer; } html[data-shell="rail"] .chip svg{ width:14px; height:14px; } html[data-shell="rail"] .chip:hover{ background:var(--surface2); color:var(--ink); } html[data-shell="rail"] .chip.active{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); } html[data-shell="rail"] .chip.done{ background:var(--pos-wash); border-color:transparent; color:var(--pos); } html[data-shell="rail"] .chip.primary{ background:var(--btn-bg); color:var(--btn-fg); border-color:transparent; } html[data-shell="rail"] .chips{ gap:6px; margin:6px 0 18px; } html[data-shell="rail"] .pill{ font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; padding:4px 9px; border-radius:999px; background:var(--surface2); color:var(--muted2); border:1px solid transparent; line-height:1.3; flex:none; } html[data-shell="rail"] .pill.pos, html[data-shell="rail"] .pill-approved, html[data-shell="rail"] .pill-delivered{ background:var(--pos-wash); color:var(--pos); border-color:transparent; } html[data-shell="rail"] .pill.warn, html[data-shell="rail"] .pill-awaiting, html[data-shell="rail"] .pill-changes, html[data-shell="rail"] .pill-generating{ background:var(--warn-wash); color:var(--warn); border-color:transparent; } html[data-shell="rail"] .pill.neg, html[data-shell="rail"] .pill-denied{ background:var(--neg-wash); color:var(--neg); border-color:transparent; } html[data-shell="rail"] .pill-pending, html[data-shell="rail"] .pill-hold{ background:var(--surface2); color:var(--muted2); border-color:transparent; } html[data-shell="rail"] .tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:999px; background:var(--accent-wash); color:var(--accent-deep); text-transform:none; line-height:1.3; white-space:nowrap; } html[data-shell="rail"] .tag.new{ background:var(--warn-wash); color:var(--warn); } html[data-shell="rail"] .tag.posted{ background:var(--pos-wash); color:var(--pos); } html[data-shell="rail"] .tag.auto{ background:var(--surface2); color:var(--muted2); } /* ── tiles: the material gallery and the catalogue take the prototype's tile ─── */ html[data-shell="rail"] .gal-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; } html[data-shell="rail"] .gal-card{ border-radius:14px; padding:8px; transition:box-shadow .2s, border-color .2s; } html[data-shell="rail"] .gal-card:hover{ box-shadow:var(--shadow); border-color:var(--border2); } /* social art is square inside the 4:5 tile: letterbox it on --surface2 so the whole piece reads (TLP "JUST FUNDED." / "$372,500" were cropped by cover). The vault's .post-row tile is the same shape and gets the same rule; `body` in the selector outranks the page's own cover. */ html[data-shell="rail"] .gal-card .thumb{ aspect-ratio:4/5; border-radius:9px; background:var(--surface2); } html[data-shell="rail"] .gal-card .thumb img{ object-fit:contain; object-position:center; } html[data-shell="rail"] body .post-row .pr-img{ background:var(--surface2); } html[data-shell="rail"] body .post-row .pr-img img{ object-fit:contain; object-position:center; } html[data-shell="rail"] .gal-card .meta{ padding:9px 4px 2px; } html[data-shell="rail"] .gal-card .nm{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .gal-card .row2{ margin-top:8px; gap:6px; } /* The New tag sits at the artwork's BOTTOM-RIGHT, clear of the logo every piece carries top-left. It stays in flow right after the artwork (the vault tile orders its image first), pulled up over it by its own 20px + 8px; the 8px margin-bottom gives that back, so the meta below never moves. Specificity beats the pages' own top-left placement (materials:40, vault:122). */ html[data-shell="rail"] .gal-card .thumb + .tag.new, html[data-shell="rail"] body .post-row .tag.new{ position:static; order:0; display:inline-flex; align-items:center; height:20px; margin:8px 0 -2px; align-self:flex-start; } html[data-shell="rail"] body .post-row .pr-img{ order:-1; } html[data-shell="rail"] .bulkbox{ top:14px; right:14px; width:22px; height:22px; font-size:11px; } html[data-shell="rail"] .gal-card.bulkpick{ border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-wash); } html[data-shell="rail"][data-portal="the-lending-pros"] .gal-card.bulkpick{ border-color:var(--accent); } html[data-shell="rail"] .mat-grid{ gap:12px; } html[data-shell="rail"] .mat-card{ border-radius:14px; padding:8px; } html[data-shell="rail"] .mat-card .thumb{ border-radius:9px; background:var(--surface2); } html[data-shell="rail"] .mat-card .meta{ padding:9px 4px 2px; } html[data-shell="rail"] .mat-card .nm{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } html[data-shell="rail"] .mat-card .ct{ font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin-top:2px; } html[data-shell="rail"] .mat-card .tick{ top:14px; right:14px; width:22px; height:22px; font-size:11px; box-shadow:0 1px 3px rgba(0,0,0,.15); } html[data-shell="rail"] .mat-card.sel{ border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-wash); } html[data-shell="rail"] .mat-card.sel .tick{ background:var(--ink); border-color:var(--ink); color:var(--bg); } html[data-shell="rail"][data-portal="the-lending-pros"] .mat-card.sel{ border-color:var(--accent); } html[data-shell="rail"][data-portal="the-lending-pros"] .mat-card.sel .tick{ background:var(--accent); border-color:var(--accent); color:#0E0F11; } html[data-shell="rail"] .mat-cathead{ font-size:12px; letter-spacing:.06em; } html[data-shell="rail"] .mat-catn{ font-size:12px; } /* ── page heads: the title alone, no tagline, no eyebrow (Brett: no taglines) ── */ html[data-shell="rail"] .page-head{ align-items:center; margin-bottom:22px; animation:none; } html[data-shell="rail"] .page-head h1{ font-size:34px; line-height:1.05; font-weight:500; letter-spacing:-.01em; text-transform:none; } html[data-shell="rail"] .page-head h1 em{ font-style:italic; color:var(--accent-deep); } html[data-shell="rail"][data-portal="the-lending-pros"] .page-head h1{ font-size:26px; font-weight:650; letter-spacing:-.02em; } html[data-shell="rail"][data-portal="the-lending-pros"] .page-head h1 em{ font-style:normal; color:var(--muted2); font-weight:500; } html[data-shell="rail"] .page-head .sub, html[data-shell="rail"] .eyebrow{ display:none; } /* the one eyebrow that stays: /request/'s "Step n of n" line — plain 12.5px muted text, and never the TLP skin's bordered capsule with its dot (app.css TLP .eyebrow / ::before) */ html[data-shell="rail"] .eyebrow.step{ display:block; border:0; border-radius:0; padding:0; background:none; box-shadow:none; gap:0; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); margin-bottom:6px; font-variant-numeric:tabular-nums; } html[data-shell="rail"] .eyebrow.step::before{ content:none; } /* ── forms, modals, toast ───────────────────────────────────────────────────── */ html[data-shell="rail"] label.lbl{ font-size:12px; letter-spacing:.06em; } html[data-shell="rail"] .field{ border-radius:12px; border-color:var(--border); padding:11px 13px; } html[data-shell="rail"] .field:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } html[data-shell="rail"] .modal{ border-radius:18px; background:var(--surface); border-color:var(--border); } html[data-shell="rail"] .modal-title{ font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:0; } html[data-shell="rail"] .modal-close{ border-radius:50%; border-color:var(--border); } html[data-shell="rail"] .toast{ border-radius:999px; padding:11px 18px; font-size:13px; font-weight:600; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; white-space:nowrap; max-width:calc(100vw - 32px); } html[data-shell="rail"][data-portal="the-lending-pros"] .toast{ background:var(--surface); color:var(--ink); border:1px solid var(--border); } html[data-shell="rail"] .toast.err{ background:var(--neg); color:#fff; border-color:var(--neg); } /* a toast that carries an Undo is a control for as long as it shows */ html[data-shell="rail"] .toast:has(button){ padding-right:12px; } html[data-shell="rail"] .toast.show:has(button){ pointer-events:auto; } html[data-shell="rail"] .toast button{ font:inherit; font-weight:700; color:var(--accent); background:none; border:0; padding:4px 6px; cursor:pointer; } html[data-shell="rail"][data-portal="the-lending-pros"] .toast button{ color:var(--accent-deep); } /* ── chrome, shared between widths ──────────────────────────────────────────── */ html[data-shell="rail"] .shell .brand-chip{ background:none; padding:0; border-radius:0; color:inherit; gap:0; font-size:0; } html[data-shell="rail"] .shell .brand-chip img{ display:block; width:auto; object-fit:contain; } html[data-shell="rail"] .shell .ph{ display:none; } html[data-shell="rail"] .shell .sp{ flex:1; } html[data-shell="rail"] .tabbar{ display:none; } /* anchored by its LEFT edge just past the icon's right edge (the rail glyph is 23px, the tab's 24px), so a two- or three-digit count grows away from the glyph, never over it */ html[data-shell="rail"] .nav-ct{ position:absolute; top:2px; left:calc(50% + 12px); right:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--warn); color:var(--bg); font-size:11px; font-weight:700; line-height:18px; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:0; } html[data-shell="rail"] .nav-ct:empty{ display:none; } html[data-shell="rail"] .ib{ width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); flex:none; cursor:pointer; padding:0; font:inherit; } html[data-shell="rail"] .ib svg{ width:18px; height:18px; } html[data-shell="rail"] .ib:hover{ background:var(--surface2); } html[data-shell="rail"] .topbar-top{ position:sticky; top:0; z-index:90; height:64px; display:flex; align-items:center; gap:14px; padding:0 28px; background:var(--bg); border-bottom:1px solid var(--line-2); } /* the emulation banner owns the sticky top while it shows */ html[data-shell="rail"] body.emulating .topbar-top{ position:static; } html[data-shell="rail"] .gsearch{ display:flex; align-items:center; gap:8px; width:320px; max-width:100%; height:38px; margin:0; padding:0 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--muted); transition:border-color .15s, box-shadow .15s; } html[data-shell="rail"] .gsearch svg{ width:15px; height:15px; flex:none; } html[data-shell="rail"] .gsearch input{ flex:1; min-width:0; border:0; background:none; font:inherit; font-size:13.5px; color:var(--ink); outline:none; padding:0; -webkit-appearance:none; appearance:none; } html[data-shell="rail"] .gsearch input::placeholder{ color:var(--muted); } html[data-shell="rail"] .gsearch input::-webkit-search-decoration, html[data-shell="rail"] .gsearch input::-webkit-search-cancel-button{ -webkit-appearance:none; } html[data-shell="rail"] .gsearch:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } html[data-shell="rail"] .topbar-top .acct-btn{ width:38px; height:38px; padding:0; border:2px solid var(--border); border-radius:50%; overflow:hidden; background:var(--surface2); display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .15s; } html[data-shell="rail"] .topbar-top .acct-btn:hover{ border-color:var(--accent); } html[data-shell="rail"] .topbar-top .acct-btn .av{ width:100%; height:100%; border-radius:50%; font-size:12px; } /* ── the account menu under the avatar (Brett, 2026-09-11) ──────────────────── Only what is about THIS person's own account, plus Sign out. The office — the roster, templates, permissions — stays on /more/, which is where an admin looks for it. */ html[data-shell="rail"] .acctwrap{ position:relative; flex:none; display:flex; align-items:center; } html[data-shell="rail"] .acctmenu{ position:absolute; top:calc(100% + 10px); right:0; z-index:130; width:288px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:6px; transform-origin:top right; animation:acctmenu-in .14s cubic-bezier(.2,.7,.3,1); } html[data-shell="rail"] .acctmenu[hidden]{ display:none; } @keyframes acctmenu-in{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:none; } } /* The menu's header: who is signed in. Not a control, so it takes no hover and no pointer — it used to be a link to /account/, which is where "Contact & license" below it already goes. */ html[data-shell="rail"] .acctmenu .am-who{ display:flex; align-items:center; gap:11px; padding:9px 10px 11px; margin-bottom:4px; border-bottom:1px solid var(--line-2); color:var(--ink); cursor:default; } html[data-shell="rail"] .acctmenu .am-av{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--surface2); flex:none; display:flex; align-items:center; justify-content:center; } /* .av is styled by `.acct-btn .av` in the bar; inside the menu there is no .acct-btn above it, so the initials span needs its own box or it renders as loose inline text beside the circle. */ html[data-shell="rail"] .acctmenu .am-av .av{ width:100%; height:100%; border-radius:50%; object-fit:cover; font-size:13px; font-weight:700; background:var(--surface2); color:var(--muted2); display:flex; align-items:center; justify-content:center; } html[data-shell="rail"] .acctmenu .am-wt{ min-width:0; } html[data-shell="rail"] .acctmenu .am-wt b{ display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .acctmenu .am-wt small{ display:block; font-size:12px; color:var(--muted); margin-top:1px; } html[data-shell="rail"] .acctmenu .am-it{ display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; min-height:44px; padding:0 10px; border:0; background:none; border-radius:11px; font:inherit; font-size:13.5px; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer; } html[data-shell="rail"] .acctmenu .am-it:hover{ background:var(--surface2); } html[data-shell="rail"] .acctmenu .am-it svg{ width:18px; height:18px; flex:none; color:var(--muted2); } html[data-shell="rail"] .acctmenu .am-t{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .acctmenu .am-v{ flex:none; max-width:96px; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .acctmenu .am-it.neg{ margin-top:4px; border-top:1px solid var(--line-2); border-radius:0 0 12px 12px; color:var(--neg); } html[data-shell="rail"] .acctmenu .am-it.neg svg{ color:currentColor; } /* THE BOTTOM BAR STAYS STRICTLY IN PLACE (Brett, 2026-09-11). iOS rubber-band overscroll drags the whole page — position:fixed elements included — so scrolling past the end lifted the tab bar and left a gap under it. -y only: the left-edge back swipe is a horizontal gesture and must keep working. (WKWebView also answers to scrollView.bounces on the native side.) */ html[data-shell="rail"], html[data-shell="rail"] body{ overscroll-behavior-y:none; } html[data-shell="rail"] :is(.btn, .chip, .ib, .story, .link, .seg button, .more .it, .tab, .nav-link, .acct-btn):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ── desktop: the rail ──────────────────────────────────────────────────────── */ @media (min-width:900px){ /* only pages that mount the shell — never a shell-less gate page */ html[data-shell="rail"] body{ padding-left:84px; } html[data-shell="rail"] body:not(:has(.shell)){ padding-top:64px; } /* the column and the top row exist before the shell lands, so nothing is shoved */ html[data-shell="rail"] nav.topbar.rail{ position:fixed; top:0; left:0; bottom:0; width:84px; height:auto; z-index:100; display:flex; flex-direction:column; align-items:center; gap:2px; padding:18px 0 16px; margin:0; background:var(--surface); border:0; border-right:1px solid var(--border); border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; } html[data-shell="rail"] nav.topbar.rail::-webkit-scrollbar{ display:none; } html[data-shell="rail"] nav.topbar.rail > .brand-chip{ margin:6px 0 18px; flex:none; } html[data-shell="rail"] nav.topbar.rail > .brand-chip img{ height:30px; max-width:58px; } html[data-shell="rail"] nav.topbar.rail .nav-links{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; width:100%; } html[data-shell="rail"] nav.topbar.rail .nav-link{ position:relative; width:70px; padding:9px 0 7px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--muted2); font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:none; line-height:1.2; transition:background .15s, color .15s; } html[data-shell="rail"] nav.topbar.rail .nav-link::after{ content:none; } html[data-shell="rail"] nav.topbar.rail .nav-ico{ width:23px; height:23px; } html[data-shell="rail"] nav.topbar.rail .nav-link .nav-tx{ white-space:nowrap; } html[data-shell="rail"] nav.topbar.rail .nav-link:hover{ background:var(--surface2); color:var(--ink); } html[data-shell="rail"] nav.topbar.rail .nav-link.active{ background:var(--accent-wash); color:var(--accent-deep); } html[data-shell="rail"][data-portal="the-lending-pros"] nav.topbar.rail .nav-link.active{ color:var(--ink); } /* the Create tile carries its own fill, so the row behind it never washes */ html[data-shell="rail"] nav.topbar.rail .nav-link.create{ margin:6px 0; } html[data-shell="rail"] nav.topbar.rail .nav-link.create, html[data-shell="rail"] nav.topbar.rail .nav-link.create.active{ background:none; color:var(--muted2); } html[data-shell="rail"] nav.topbar.rail .nav-link.create:hover{ color:var(--ink); } html[data-shell="rail"] nav.topbar.rail .create .pb{ width:44px; height:44px; border-radius:14px; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; } html[data-shell="rail"][data-portal="the-lending-pros"] nav.topbar.rail .create .pb{ background:var(--accent); color:#0E0F11; } html[data-shell="rail"] nav.topbar.rail .create .pb .nav-ico{ width:22px; height:22px; } html[data-shell="rail"] main.wrap{ max-width:1180px; padding:28px 28px 110px; margin:0 auto; } html[data-shell="rail"] main.wrap[style*="padding"]{ padding:28px 28px 110px !important; } /* Everything fixed at left:50% centres on the VIEWPORT, half a rail off the content column. The lightbox and the sheet are not in this list: they cover the rail too. */ html[data-shell="rail"] body:has(.shell) .selbar, html[data-shell="rail"] body:has(.shell) .bulkbar, html[data-shell="rail"] body:has(.shell) .toast, html[data-shell="rail"] body:has(.shell) .picks{ left:calc(50% + 42px); } html[data-shell="rail"] body:has(.shell) .bulkbar{ max-width:calc(100vw - 108px); } } /* ── phone: the tab bar ─────────────────────────────────────────────────────── */ @media (max-width:899px){ html[data-shell="rail"] nav.topbar.rail{ display:none; } html[data-shell="rail"] body{ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); } html[data-shell="rail"] body:not(:has(.shell)){ padding-top:56px; } html[data-shell="rail"] .topbar-top{ position:static; height:auto; padding:10px 16px 6px; border-bottom:0; gap:10px; } html[data-shell="rail"] .topbar-top .gsearch{ display:none; } html[data-shell="rail"] .topbar-top .ph{ display:inline-flex; } html[data-shell="rail"] .topbar-top .brand-chip.ph img{ height:22px; max-width:120px; } /* Forward Rlty's mark is a two-line wordmark, so 22px of height put the RLTY line at about 7px — legible on a desktop rail, not in the hand (Brett, 2026-09-18). Raised for this brand only: TLP and Luxury Collective are single-line marks that already read fine, and a shared bump would have made those two overbearing. Geometry stays in app.css per CLAUDE.md; it is scoped by portal, not forked into a second stylesheet. */ html[data-portal="forward-realty"][data-shell="rail"] .topbar-top .brand-chip.ph img{ height:32px; max-width:168px; } html[data-shell="rail"] .topbar-top .ib.ph{ width:38px; height:38px; } html[data-shell="rail"] .topbar-top .acct-btn{ width:36px; height:36px; } html[data-shell="rail"] .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:100; /* The bar has to reserve the home-indicator strip so the indicator never sits on a tab, but flex-start pinned the icons to the top and left that strip reading as dead padding under the bar. Centre the row in the space above the inset and trim the bar, so the reserved strip looks like the edge of the bar rather than a gap beneath it. */ height:calc(60px + env(safe-area-inset-bottom,0px)); padding:4px 6px env(safe-area-inset-bottom,0px); background:var(--surface); border-top:1px solid var(--border); justify-content:space-around; align-items:center; } html[data-shell="rail"] .tab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; width:62px; padding-top:4px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.02em; line-height:1.2; text-decoration:none; border-radius:10px; } html[data-shell="rail"] .tab .nav-ico{ width:24px; height:24px; } html[data-shell="rail"] .tab.active{ color:var(--ink); } html[data-shell="rail"] .tab.create{ padding-top:0; } html[data-shell="rail"] .tab.create > span{ width:48px; height:48px; border-radius:16px; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.2); margin-top:-8px; } html[data-shell="rail"][data-portal="the-lending-pros"] .tab.create > span{ background:var(--accent); color:#0E0F11; } html[data-shell="rail"] .tab.create .nav-ico{ width:24px; height:24px; } html[data-shell="rail"] .tab > span{ white-space:nowrap; } html[data-shell="rail"] .tab .nav-ct{ top:0; left:calc(50% + 10px); right:auto; } html[data-shell="rail"] main.wrap{ padding:6px 14px 40px !important; } html[data-shell="rail"] .page-head{ margin-bottom:16px; } html[data-shell="rail"] .page-head h1{ font-size:27px; } html[data-shell="rail"][data-portal="the-lending-pros"] .page-head h1{ font-size:24px; } /* fixed bars clear the tab bar */ html[data-shell="rail"] body:has(.shell) .toast{ bottom:calc(100px + env(safe-area-inset-bottom,0px)); } html[data-shell="rail"] body:has(.shell) .selbar, html[data-shell="rail"] body:has(.shell) .bulkbar{ bottom:calc(96px + env(safe-area-inset-bottom,0px)); } html[data-shell="rail"] body:has(.shell) .picks{ bottom:calc(160px + env(safe-area-inset-bottom,0px)); } html[data-shell="rail"] body.has-bulkbar:has(.shell){ padding-bottom:calc(170px + env(safe-area-inset-bottom,0px)); } html[data-shell="rail"] .chip{ height:30px; padding:0 10px; font-size:12px; } html[data-shell="rail"] .gal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } html[data-shell="rail"] .gal-card .nm{ font-size:12px; } } @media (max-width:899px) and (display-mode:standalone){ html[data-shell="rail"] .topbar-top{ padding-top:max(50px, env(safe-area-inset-top,0px)); } } @media (max-width:380px){ html[data-shell="rail"] .gal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } } /* ── the prototype's own components: Home, More, the piece sheet ─────────────── */ html[data-shell="rail"] .cols{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; } html[data-shell="rail"] .cols.one{ grid-template-columns:minmax(0,1fr); } /* nothing in the side column: one column, no empty gutter */ html[data-shell="rail"] .cols > *{ min-width:0; } html[data-shell="rail"] .greet{ font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.05; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; } html[data-shell="rail"] .greet em{ font-style:italic; color:var(--accent-deep); font-weight:inherit; } html[data-shell="rail"][data-portal="the-lending-pros"] .greet{ font-weight:700; font-size:26px; letter-spacing:-.02em; } html[data-shell="rail"][data-portal="the-lending-pros"] .greet em{ font-style:normal; color:var(--muted2); font-weight:500; } html[data-shell="rail"] .greet-sub{ color:var(--muted2); margin-top:4px; font-size:14px; } /* stories: social posts only — gold ring to post, grey ring posted, gone after 3 days */ html[data-shell="rail"] .stories{ display:flex; gap:14px; margin:18px 0 22px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; max-width:100%; } html[data-shell="rail"] .stories::-webkit-scrollbar{ display:none; } html[data-shell="rail"] .story{ display:flex; flex-direction:column; align-items:center; gap:7px; width:76px; flex:none; text-align:center; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-decoration:none; } html[data-shell="rail"] .story .ring{ display:block; width:64px; height:64px; border-radius:50%; padding:2.5px; background:conic-gradient(var(--accent), color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); } html[data-shell="rail"] .story .ring.seen{ background:var(--border); } html[data-shell="rail"] .story .ring.warn{ background:var(--warn); } html[data-shell="rail"] .story .ring.neg{ background:var(--neg); } html[data-shell="rail"] .story .ring i{ display:flex; width:100%; height:100%; border-radius:50%; border:2.5px solid var(--bg); overflow:hidden; background:var(--surface2); align-items:center; justify-content:center; font-size:16px; font-weight:700; font-style:normal; color:var(--muted2); } html[data-shell="rail"] .story .ring i img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; } html[data-shell="rail"] .story small{ font-size:12px; font-weight:600; color:var(--muted2); line-height:1.2; } html[data-shell="rail"] .story.done small{ color:var(--muted); } /* section header: a title and a count, nothing else */ html[data-shell="rail"] .sh{ display:flex; align-items:baseline; gap:10px; margin:8px 0 12px; } html[data-shell="rail"] .sh h2{ font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em; font-style:normal; color:var(--ink); } html[data-shell="rail"] .sh > span{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; } html[data-shell="rail"] .sh .sp{ flex:1; } html[data-shell="rail"] .link{ font-size:12.5px; font-weight:600; color:var(--accent-deep); background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-decoration:none; } html[data-shell="rail"] .hint{ font-size:12px; color:var(--muted); margin-top:8px; line-height:1.5; } html[data-shell="rail"] .num{ font-variant-numeric:tabular-nums; } /* piece row: thumb, name, meta, caption, action chips. `.row` alone is the legacy flex utility used all over the pages, so the card look keys on the row's own .info child (or .piece). */ html[data-shell="rail"] .row:has(> .info), html[data-shell="rail"] .row.piece{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:stretch; flex-wrap:nowrap; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px; margin-bottom:10px; transition:box-shadow .2s, transform .2s; cursor:pointer; color:var(--ink); text-decoration:none; width:auto; text-align:left; font:inherit; } html[data-shell="rail"] .row:has(> .info):hover, html[data-shell="rail"] .row.piece:hover{ box-shadow:var(--shadow); transform:translateY(-1px); } html[data-shell="rail"] .row > .th{ border-radius:10px; overflow:hidden; background:var(--surface2); aspect-ratio:4/5; } html[data-shell="rail"] .row > .th img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; } html[data-shell="rail"] .row > .info{ display:flex; flex-direction:column; min-width:0; } html[data-shell="rail"] .row .info .name{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--ink); } html[data-shell="rail"] .row .info .meta{ color:var(--muted); font-size:12px; margin-top:2px; padding:0; } html[data-shell="rail"] .row .info .cap{ color:var(--muted2); font-size:13px; margin-top:8px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } html[data-shell="rail"] .row .info .acts{ display:flex; gap:6px; margin-top:auto; padding-top:10px; flex-wrap:wrap; } /* person row (the roster on the manager's home) */ html[data-shell="rail"] .prow{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:10px 12px; margin-bottom:8px; cursor:pointer; color:var(--ink); text-decoration:none; width:100%; text-align:left; font:inherit; transition:box-shadow .2s; } html[data-shell="rail"] .prow:hover{ box-shadow:var(--shadow); } html[data-shell="rail"] .prow .pav{ width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--muted2); flex:none; } html[data-shell="rail"] .prow .pav img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; } html[data-shell="rail"] .prow .t{ flex:1; min-width:0; } html[data-shell="rail"] .prow b{ display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .prow small{ display:block; color:var(--muted); font-size:12px; } /* side cards and their list rows: a day or a thumb, a title and a line, a pill */ html[data-shell="rail"] .side .card{ padding:16px 18px; margin-bottom:14px; border-radius:16px; } html[data-shell="rail"] .side h3{ font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:0; font-style:normal; color:var(--ink); margin:0 0 10px; display:flex; justify-content:space-between; align-items:baseline; } html[data-shell="rail"] .side h3 span{ color:var(--muted); font-weight:600; font-size:12px; } html[data-shell="rail"] .li{ display:flex; align-items:center; gap:10px; padding:9px 0; min-height:51px; border-top:1px solid var(--line-2); font-size:13px; color:var(--ink); } html[data-shell="rail"] .li:first-child, html[data-shell="rail"] .card > h3 + .li, html[data-shell="rail"] .sh + .li{ border-top-color:transparent; } html[data-shell="rail"] .li .t{ flex:1; min-width:0; } html[data-shell="rail"] .li b{ display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .li small{ display:block; color:var(--muted); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .li img{ width:34px; height:34px; border-radius:8px; object-fit:cover; object-position:center 20%; flex:none; } html[data-shell="rail"] .li .day{ width:42px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; flex:none; } html[data-shell="rail"] a.li, html[data-shell="rail"] button.li, html[data-shell="rail"] .li[data-open], html[data-shell="rail"] .li[data-nav], html[data-shell="rail"] .li[data-person], html[data-shell="rail"] .li[data-auto], html[data-shell="rail"] .li[role="button"]{ cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:10px; width:auto; text-align:left; font:inherit; font-size:13px; color:inherit; background:none; border-left:0; border-right:0; border-bottom:0; text-decoration:none; } html[data-shell="rail"] a.li:hover, html[data-shell="rail"] button.li:hover, html[data-shell="rail"] .li[data-open]:hover, html[data-shell="rail"] .li[data-nav]:hover, html[data-shell="rail"] .li[data-person]:hover, html[data-shell="rail"] .li[data-auto]:hover, html[data-shell="rail"] .li[role="button"]:hover{ background:var(--surface2); } /* a list row that stands alone as its own card (the owner's ledger) */ html[data-shell="rail"] .li.card, html[data-shell="rail"] .card.li{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 12px; margin:0 0 8px; } html[data-shell="rail"] .prog{ height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; margin-top:8px; } html[data-shell="rail"] .prog i{ display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .5s cubic-bezier(.23,1,.32,1); } /* the adoption ring (owner's home): --p is the percentage */ html[data-shell="rail"] .adopt{ display:flex; align-items:center; gap:18px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:14px; flex-wrap:wrap; } html[data-shell="rail"] .ring-a{ width:82px; height:82px; border-radius:50%; flex:none; position:relative; background:conic-gradient(var(--accent) calc(var(--p,0) * 1%), var(--surface2) 0); } html[data-shell="rail"] .ring-a i{ position:absolute; inset:8px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; font-style:normal; font-variant-numeric:tabular-nums; } html[data-shell="rail"] .adopt b{ display:block; font-size:15px; font-weight:600; } html[data-shell="rail"] .adopt small{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; } html[data-shell="rail"] .faces{ display:flex; margin-top:8px; } html[data-shell="rail"] .faces span{ width:26px; height:26px; border-radius:50%; overflow:hidden; border:2px solid var(--surface); margin-left:-8px; background:var(--surface2); flex:none; } html[data-shell="rail"] .faces span:first-child{ margin-left:0; } html[data-shell="rail"] .faces span img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; } /* segmented filter (All / Ready / Posted) */ html[data-shell="rail"] .seg{ display:inline-flex; background:var(--surface2); border-radius:999px; padding:3px; } html[data-shell="rail"] .seg button, html[data-shell="rail"] .seg a{ padding:7px 16px; border-radius:999px; font-weight:600; font-size:12.5px; color:var(--muted); background:none; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; text-decoration:none; transition:background .15s, color .15s; } html[data-shell="rail"] .seg .on, html[data-shell="rail"] .seg .active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); } /* More: the iOS Settings list */ html[data-shell="rail"] .more{ max-width:640px; } html[data-shell="rail"] .more .grp{ background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-top:14px; overflow:hidden; } html[data-shell="rail"] .more .grp .gh{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:12px 16px 4px; } html[data-shell="rail"] .more .it{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; border:0; border-top:1px solid var(--line-2); font:inherit; font-size:14px; color:var(--ink); background:none; text-align:left; cursor:pointer; text-decoration:none; transition:background .15s; } html[data-shell="rail"] .more .it:first-of-type, html[data-shell="rail"] .more .gh + .it, html[data-shell="rail"] .more .who + .it{ border-top:0; } html[data-shell="rail"] .more .it:hover{ background:var(--surface2); } html[data-shell="rail"] .more .it .ic{ width:34px; height:34px; border-radius:10px; background:var(--surface2); display:flex; align-items:center; justify-content:center; color:var(--muted2); flex:none; } html[data-shell="rail"] .more .it .ic svg{ width:17px; height:17px; } html[data-shell="rail"] .more .it .t{ flex:1; min-width:0; } html[data-shell="rail"] .more .it small{ display:block; color:var(--muted); font-size:12px; } html[data-shell="rail"] .more .it .val{ color:var(--muted); font-size:13px; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; white-space:nowrap; } html[data-shell="rail"] .more .it .val img{ width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:center 20%; } html[data-shell="rail"] .more .it .chev{ color:var(--muted); width:16px; height:16px; flex:none; } html[data-shell="rail"] .more .it.danger{ justify-content:center; color:var(--neg); font-weight:600; } html[data-shell="rail"] .more .who{ display:flex; align-items:center; gap:14px; padding:14px 16px; } html[data-shell="rail"] .more .who img, html[data-shell="rail"] .more .who .av{ width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--surface2); color:var(--muted2); font-weight:700; font-size:18px; } html[data-shell="rail"] .more .who b{ display:block; font-size:17px; font-weight:600; } html[data-shell="rail"] .more .who small{ color:var(--muted); font-size:13px; } /* the piece sheet: a panel from the right on desktop, a bottom sheet on the phone */ /* A sheet locks the page (html.sheet-open body{overflow:hidden}); with a classic scrollbar that would drop the viewport's gutter and shove the whole page 15px — so the gutter is kept. Overlay scrollbars (macOS, iOS) reserve nothing and see no change. */ html[data-shell="rail"]{ scrollbar-gutter:stable; } html[data-shell="rail"] .scrim{ position:fixed; inset:0; background:rgba(20,16,10,.4); z-index:650; opacity:0; pointer-events:none; transition:opacity .25s; } html[data-shell="rail"][data-portal="the-lending-pros"] .scrim{ background:rgba(0,0,0,.55); } html[data-shell="rail"] .scrim.on{ opacity:1; pointer-events:auto; } html[data-shell="rail"] .sheet{ position:fixed; top:0; right:0; bottom:0; width:440px; max-width:100%; background:var(--surface); z-index:660; transform:translateX(100%); transition:transform .32s cubic-bezier(.32,.72,0,1); display:flex; flex-direction:column; border-left:1px solid var(--border); } html[data-shell="rail"] .sheet.on{ transform:none; } html[data-shell="rail"] .sheet .sbar{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-2); } html[data-shell="rail"] .sheet .sbar b{ font-size:15px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .sheet .sbody{ flex:1; overflow:auto; padding:18px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-gutter:stable; } /* the artwork box is reserved from the piece's own aspect (--ar, home-data.mjs::artAspect): its final height on the first frame, --surface2 until the picture lands, the picture contained */ html[data-shell="rail"] .sheet .art{ position:relative; width:100%; aspect-ratio:var(--ar, 4 / 5); max-height:62vh; background:var(--surface2); border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-sizing:border-box; } html[data-shell="rail"] .sheet .art img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; display:block; } html[data-shell="rail"] .sheet .art.art-sm{ max-height:200px; } html[data-shell="rail"] .sheet .art.art-none{ color:var(--muted); font-size:13px; } html[data-shell="rail"] .sheet .kv{ display:flex; gap:14px; margin-top:14px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; } html[data-shell="rail"] .sheet .kv b{ color:var(--ink); font-weight:600; } html[data-shell="rail"] .sheet .kv .pos{ color:var(--pos); } html[data-shell="rail"] .sheet .capbox{ margin-top:14px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.55; color:var(--muted2); white-space:pre-wrap; overflow-wrap:anywhere; } html[data-shell="rail"] .sheet .sacts{ padding:14px 18px 18px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:8px; } html[data-shell="rail"] .sheet .sacts .btn{ width:100%; height:44px; font-size:14px; } /* Two buttons fit side by side; a delivered social post puts THREE in here (Save image, Mark as posted, Edit and remake) and the row had neither wrap nor a shrink floor. A flex item defaults to min-width:auto, so once a label is wider than its third of the row the row OVERFLOWS rather than reflowing — on Forward's home screen the third button ran off the edge of the sheet and "Edit and remake" was unreachable (Brett, 2026-09-15, screenshot). The two sibling .row2 rules (.gal-card, .post-row) already wrap; this one was the odd one out. A third button now takes its own full-width line, which reads better than three cramped ones anyway. */ html[data-shell="rail"] .sheet .row2{ display:flex; flex-direction:column; gap:8px; } html[data-shell="rail"] .sheet .row2 .btn{ width:100%; min-width:0; } html[data-shell="rail"] .sheet .gap{ display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line-2); font-size:13.5px; } html[data-shell="rail"] .sheet .gap b{ margin-left:auto; text-align:right; font-weight:600; } html[data-shell="rail"] .sheet .gap .pill{ margin-left:auto; } html[data-shell="rail"] .sheet .pav{ width:88px; height:88px; border-radius:50%; overflow:hidden; background:var(--surface2); margin:0 auto; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; color:var(--muted2); } html[data-shell="rail"] .sheet .pav img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; } html[data-shell="rail"] .sheet .pname{ text-align:center; margin-top:12px; } html[data-shell="rail"] .sheet .pname b{ font-size:18px; font-weight:600; display:block; } html[data-shell="rail"] .sheet .pname small{ color:var(--muted); font-size:12.5px; } html[data-shell="rail"] .sheet textarea{ width:100%; min-height:96px; resize:vertical; } /* A shell-less gate page (/profile/, the router) must not be indented by a rail it does not mount, and the cached shell config.js paints on the first frame must not show there. */ html[data-shell="rail"] body:has(.center-screen){ padding-left:0; padding-bottom:0; padding-top:0; } html[data-shell="rail"] body:has(.center-screen) .shell[data-shellcache]{ display:none; } /* Phone sizes for the components above. They live here, AFTER their base rules, because a media query adds no specificity: the same selector later in the file would win otherwise (the first phone block above only holds overrides for rules that come before it). */ @media (max-width:899px){ html[data-shell="rail"] .greet{ font-size:27px; } html[data-shell="rail"][data-portal="the-lending-pros"] .greet{ font-size:24px; } html[data-shell="rail"] .cols{ grid-template-columns:minmax(0,1fr); gap:14px; } html[data-shell="rail"] .row:has(> .info), html[data-shell="rail"] .row.piece{ grid-template-columns:92px minmax(0,1fr); padding:10px; gap:12px; } html[data-shell="rail"] .row .info .cap{ display:none; } html[data-shell="rail"] .row .info .acts{ padding-top:8px; } html[data-shell="rail"] .sheet{ width:100%; top:auto; height:88%; border-radius:22px 22px 0 0; transform:translateY(100%); border-left:0; border-top:1px solid var(--border); } html[data-shell="rail"] .sheet.on{ transform:none; } html[data-shell="rail"] .more{ max-width:none; } } @media (prefers-reduced-motion:reduce){ html[data-shell="rail"] .btn, html[data-shell="rail"] .chip, html[data-shell="rail"] .gal-card, html[data-shell="rail"] .mat-card, html[data-shell="rail"] .row, html[data-shell="rail"] .prow, html[data-shell="rail"] .sheet, html[data-shell="rail"] .scrim, html[data-shell="rail"] .toast, html[data-shell="rail"] .prog i, html[data-shell="rail"] .nav-link, html[data-shell="rail"] .tab, html[data-shell="rail"] .gsearch, html[data-shell="rail"] .seg button, html[data-shell="rail"] .more .it, html[data-shell="rail"] .sheet.on{ transition:none; } html[data-shell="rail"] .row:has(> .info):hover, html[data-shell="rail"] .row.piece:hover, html[data-shell="rail"] .mat-card:hover{ transform:none; } } /* search palette */ /* One search across materials, people and pages (search.mjs), mounted by the rail shell. Desktop: a card hung under the shell's search field (the form is its box, so the emulation banner's static top row changes nothing). Phone: the same rows as a full-screen sheet with its own input and a Cancel. Rows 44px; thumbs 36px at 4:5, avatars 32px circles, page glyph tiles; the selected row wears the accent wash. Text holds the 12px floor. */ html[data-shell="rail"] .gsearch{ position:relative; } html[data-shell="rail"] .spal{ position:absolute; top:calc(100% + 8px); left:0; z-index:95; width:min(560px, calc(100vw - 140px)); min-width:100%; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:8px; max-height:60vh; overflow:auto; overscroll-behavior:contain; color:var(--ink); font-family:var(--sans); font-size:13.5px; text-align:left; cursor:default; } html[data-shell="rail"] .spal[hidden]{ display:none; } html[data-shell="rail"] .spal .gh{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px 10px 4px; } html[data-shell="rail"] .spal .sr{ display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:4px 10px; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; } html[data-shell="rail"] .spal .sr.on{ background:var(--accent-wash); } html[data-shell="rail"] .spal .sr:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } html[data-shell="rail"] .spal .sr .st{ flex:1; min-width:0; } html[data-shell="rail"] .spal .sr b{ display:block; font-size:13.5px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .spal .sr small{ display:block; font-size:12px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-shell="rail"] .spal .sth{ width:36px; height:45px; border-radius:6px; overflow:hidden; background:var(--surface2); flex:none; } html[data-shell="rail"] .spal .sth img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; } html[data-shell="rail"] .spal .sav{ width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--surface2); flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted2); } html[data-shell="rail"] .spal .sav img{ width:100%; height:100%; object-fit:cover; display:block; } html[data-shell="rail"] .spal .sic{ width:32px; height:32px; border-radius:9px; background:var(--surface2); color:var(--muted2); flex:none; display:flex; align-items:center; justify-content:center; } html[data-shell="rail"] .spal .sic svg{ width:17px; height:17px; } html[data-shell="rail"] .spal .sempty{ padding:14px 10px; font-size:13px; color:var(--muted); } /* the first open is still fetching: the rows' room is held, so the answer lands without a jump */ html[data-shell="rail"] .spal .splist.pending{ min-height:140px; } /* phone: full screen, the input on top, Cancel beside it, the rows below */ html[data-shell="rail"] .spal.full{ position:fixed; inset:0; width:auto; min-width:0; max-height:none; z-index:640; border:0; border-radius:0; box-shadow:none; padding:env(safe-area-inset-top,0px) 0 0; background:var(--bg); display:flex; flex-direction:column; overflow:hidden; } html[data-shell="rail"] .spal.full[hidden]{ display:none; } html[data-shell="rail"] .spal.full .sptop{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line-2); flex:none; } html[data-shell="rail"] .spal.full .spq{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--muted); transition:border-color .15s, box-shadow .15s; } html[data-shell="rail"] .spal.full .spq svg{ width:15px; height:15px; flex:none; } html[data-shell="rail"] .spal.full .spq input{ flex:1; min-width:0; border:0; background:none; font:inherit; font-size:16px; color:var(--ink); outline:none; padding:0; -webkit-appearance:none; appearance:none; } html[data-shell="rail"] .spal.full .spq input::placeholder{ color:var(--muted); } html[data-shell="rail"] .spal.full .spq input::-webkit-search-decoration, html[data-shell="rail"] .spal.full .spq input::-webkit-search-cancel-button{ -webkit-appearance:none; } html[data-shell="rail"] .spal.full .spq:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } html[data-shell="rail"] .spal.full .spcancel{ font:inherit; font-size:14px; font-weight:600; color:var(--accent-deep); background:none; border:0; padding:6px 2px; cursor:pointer; flex:none; } html[data-shell="rail"] .spal.full .splist{ flex:1; overflow:auto; padding:8px 8px calc(16px + env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } html[data-shell="rail"].spal-open body{ overflow:hidden; } @media (max-width:899px) and (display-mode:standalone){ html[data-shell="rail"] .spal.full{ padding-top:max(50px, env(safe-area-inset-top,0px)); } } @media (prefers-reduced-motion:reduce){ html[data-shell="rail"] .spal.full .spq{ transition:none; } }