@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Great+Vibes&display=swap'); /* ═══════════════════════════════════════════════════════════════════════════ CHANGELOG 27 JUL DROP — BLOCK O (the shell becomes REAL — applied, not just shipped). Additive; nothing removed: + O4 mobile type: at the ONE breakpoint the base type steps down to 15px via the ONE --fs token (pages read html{font-size:var(--fs)}; the A−/A+ zoom sets --fs inline and still wins). No per-page hacks. + O5 .elv-footer — the ONE footer spread: left block hard LEFT, right block hard RIGHT across the shell width on desktop; below the breakpoint it renders exactly as before (inline, centred). .elv-footer-sep hides the " · " separator only when the two halves are spread apart. + O6 .elv-topbar desktop: flex-wrap:nowrap — the bar is ONE line at every width ≥860px (logo+name hard left, controls right via .elv-spacer; no wrapping at ≥1920px). Mobile keeps wrap. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ CHANGELOG EVERYTHING DROP (26 Jul 2026) — shared shell (look half): + A1 .elv-name-neon — the glowing purple→magenta lockup (gradient + animated glow, values copied from the LIVE main site). Children paint no background of their own, so the Alex-Brush initial never seams off the gradient. + A2 .elv-name-gold — the sub-brand's metallic gold finish (values copied from the sub-brand's live site). Gold belongs to that brand ONLY. + B5 .navclu / .clu-head / .clu-items / .collapse* — sidebar clusters and the runtime accordion, promoted from the App so every surface matches it. + E2 .elv-toast — the one shared toast. + B0 --elv-content-max 1180→1480 + .elv-wide — desktop content fills the width (the dead-right-gutter fix); mobile untouched, ONE breakpoint kept. Nothing removed — every rule of the previous shell survives. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ELEVATE SHARED SHELL — upgrade-2026-07-24 ONE layout, EVERY surface (§0 THE DESIGN BIBLE · §0.1 SHARED-TEMPLATE MANDATE). This file is byte-identical in every Pages folder (oneapp/, console/, book/, landing/) — the selfcheck proves it by checksum. It loads LAST in , AFTER each page's own stylesheet, so the desktop rules always win over any legacy base width-cap (the exact stranded-column bug of 24 Jul, fixed once, inherited everywhere). LAYOUT LAW (§0): · Desktop primary: left sidebar (icon+label, sticky) + content filling the width up to 1680px. Never a narrow centred phone column with dead space. · ONE breakpoint — 860px. Below it: sidebar collapses behind ☰ into a slide-over drawer. Above it: sidebar always visible. No dead zone. · Sticky topbar: ☰ (mobile) · ONE ~34px round logo · page/operator name · right: ONE a11y bar (A− A+ A ☀︎/☾) · ← My World · Profile & rates · Log out. · Dark/light: body.light ONLY RECOLOURS. Same text, same fonts, same layout. ═══════════════════════════════════════════════════════════════════════════ */ /* ── tokens (dark canonical values; body.light recolours them below) ── */ :root{ --elv-bg:#15101a; --elv-panel:#1f1726; --elv-panel2:#271d31; --elv-line:#3a2f47; --elv-ink:#f3e9dd; --elv-muted:#a99bb5; --elv-gold:#c9a96e; --elv-rose:#c4607a; --elv-purple:#835E8C; --elv-ok:#7fdca0; --elv-warn:#ffcf6b; --elv-max:1680px; --elv-content-max:1480px; --elv-side-w:230px; --elv-logo:34px; } body.light{ --elv-bg:#fdfbff; --elv-panel:#ffffff; --elv-panel2:#f6f0fb; --elv-line:#dcc9ef; --elv-ink:#4a3a63; --elv-muted:#8a7a9e; --elv-gold:#9c7635; --elv-ok:#2f8d5e; --elv-warn:#b3542e; } /* ── the shell frame ── */ .elv-shell{max-width:var(--elv-max);margin:0 auto;min-height:100vh} .elv-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px; padding:10px 16px;background:rgba(21,16,26,.96);backdrop-filter:blur(8px); border-bottom:1px solid var(--elv-line);flex-wrap:wrap} body.light .elv-topbar{background:rgba(253,251,255,.96)} .elv-topbar .elv-logo{width:var(--elv-logo);height:var(--elv-logo);border-radius:50%; cursor:pointer;object-fit:cover;background:var(--elv-panel2);flex:0 0 auto} .elv-topbar .elv-title{font-weight:700;font-size:16px;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .elv-topbar .elv-spacer{flex:1 1 auto} .elv-burger{display:none;background:var(--elv-panel2);border:1px solid var(--elv-line); color:var(--elv-ink);border-radius:8px;padding:7px 12px;font-size:17px;cursor:pointer;width:auto} /* ── §0 NAME LOCKUP — the Alex-Brush initial JOINS the rest, same colour ── markup (shell.js builds it): Armarni The initial inherits the SAME color/gradient as its word — never its own. P4 (25 Jul): the initial was OVERLAPPING the next letter (Alex Brush swash runs past its advance width). A .06em breathing gap + a hair smaller keeps it legible and joined — identical on every surface (checksum-gated). */ /* ═══ S1 (27 Jul) — THE SIGNATURE IS UNTOUCHABLE. The booking header rendered "CARMARNI J BULKANI": a page-level text-transform:uppercase + letter-spacing leaked into the lockup (an uppercased, stretched Alex Brush A reads as a C; uppercased Great Vibes invents phantom glyphs). The lockup now hard-locks its own typography with !important so NO surface, theme or header rule can re-case, re-track or re-font her signature. Theme = colour only (S4). Her note "way less spacing in the A to rmarni": the .06em gap is now 0 — joined tightly; the initial's own advance width keeps it from overlapping. */ .elv-lockup{font-family:'Great Vibes',cursive!important;font-weight:400!important; text-transform:none!important;letter-spacing:0!important;font-style:normal!important} .elv-lockup i{font-family:'Alex Brush','Great Vibes',cursive!important;font-style:normal!important; font-size:1.35em;line-height:1;margin-right:0;letter-spacing:0!important;text-transform:none!important; color:inherit;background:inherit;-webkit-background-clip:inherit;vertical-align:-0.06em} /* A5 (25 Jul): 'script-first-word' treatment — the remaining words render as PLAIN upright wide-tracked serif CAPS (never script), inheriting the same colour/gradient as the word beside them. Data-driven per brand row. */ .elv-lockup-caps{font-family:'Cormorant Garamond',Georgia,serif;font-style:normal; font-weight:600;font-size:.72em;letter-spacing:.28em;text-transform:uppercase; color:inherit;background:inherit;-webkit-background-clip:inherit;vertical-align:.08em} /* ═══ A1/A2 (26 Jul) — SIGNATURE COLOURS (per-brand DATA: profiles.name_color) The wrapper (.elv-name) owns the gradient; children paint NO background of their own, so the whole lockup — Alex-Brush initial included — is clipped from ONE gradient (no seam on the initial, the landing/book bug). ═══ */ .elv-name{white-space:nowrap} .elv-name .elv-lockup,.elv-name .elv-lockup i,.elv-name .elv-lockup-caps{ background:none;-webkit-background-clip:border-box;color:inherit;-webkit-text-fill-color:inherit} /* the MAIN signature — glowing purple→magenta, copied from the live main site. NEVER gold, never flat. Animated glow; respects reduced-motion. */ .elv-name-neon{background:linear-gradient(120deg,#b79ae0,#c77dff 45%,#ff5fd0); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; animation:elvNameGlow 3s ease-in-out infinite} body.light .elv-name-neon{background:linear-gradient(120deg,#5e447e,#9a7cc4 45%,#d24a8b); -webkit-background-clip:text;background-clip:text} @keyframes elvNameGlow{ 0%,100%{filter:drop-shadow(0 0 6px rgba(154,124,196,.55)) drop-shadow(0 0 16px rgba(199,125,255,.35))} 50%{filter:drop-shadow(0 0 10px rgba(176,108,255,.85)) drop-shadow(0 0 26px rgba(255,95,208,.45))}} /* the sub-brand signature — metallic gold, copied from its live site. GOLD IS THAT BRAND'S ONLY — no other name may wear it. */ .elv-name-gold{background:linear-gradient(175deg,#f3e2ad,#d9bd7e 34%,#9c7a3a 52%,#f0dca2 70%,#c9a96e 100%); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} body.light .elv-name-gold{background:linear-gradient(175deg,#b8933f,#8a6a2e 45%,#6f5426 55%,#a8823c 100%); -webkit-background-clip:text;background-clip:text} @media (prefers-reduced-motion:reduce){.elv-name-neon{animation:none}} /* ── ONE a11y bar (shell.js removes any duplicates; §0 gate 3) ── */ .elv-a11y{display:flex;gap:6px;align-items:center;flex:0 0 auto} .elv-a11y button{background:var(--elv-panel2);border:1px solid var(--elv-line); color:var(--elv-ink);border-radius:8px;padding:7px 11px;font-size:14px; font-weight:700;width:auto;cursor:pointer;margin:0} .elv-a11y button.elv-a-active{border-color:var(--elv-gold);color:var(--elv-gold)} /* ── body = sidebar + content ── */ .elv-body{display:block} .elv-side{display:none;flex-direction:column;gap:4px} .elv-side button,.elv-side a{display:block;width:100%;text-align:left;background:var(--elv-panel2); border:1px solid var(--elv-line);color:var(--elv-muted);border-radius:10px; font-size:14px;font-weight:600;padding:11px 14px;cursor:pointer;text-decoration:none} .elv-side button.active,.elv-side a.active{background:linear-gradient(90deg,var(--elv-purple),var(--elv-rose));color:#fff;border-color:transparent} body.light .elv-side button.active,body.light .elv-side a.active{background:linear-gradient(100deg,#cdbcec,#e2c6ea 50%,#f3c9de);color:#4a3268} .elv-content{padding:16px;min-width:0} /* ── home tile grid (§0: auto-fill, fills the row) ── */ .elv-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .elv-tile{background:var(--elv-panel);border:1px solid var(--elv-line);border-radius:16px; padding:20px 14px;text-align:center;cursor:pointer;transition:transform .12s;color:inherit;text-decoration:none} .elv-tile:hover{transform:translateY(-2px);border-color:var(--elv-rose)} /* ═══ THE ONE BREAKPOINT — 860px, and these blocks sit at the END of the cascade (this file loads last), so no legacy phone cap can ever win on desktop again. Gate 1 checks this ordering in every page. ═══ */ @media(min-width:860px){ /* O6 (27 Jul): the bar is ONE line on desktop — logo+name hard left, the controls carried right by .elv-spacer; never 3 wrapped rows at ≥1920px */ .elv-topbar{flex-wrap:nowrap} .elv-burger{display:none !important} .elv-body.elv-has-side{display:grid;grid-template-columns:var(--elv-side-w) minmax(0,1fr);align-items:start} .elv-side{display:flex !important;position:sticky;top:64px;padding:14px 10px; border-right:1px solid var(--elv-line);min-height:70vh;overflow:visible} .elv-content{padding:22px 30px;max-width:var(--elv-content-max)} /* B0 (26 Jul): pages that need the FULL width (dashboards, money, studio) add .elv-wide on the .elv-body wrapper — no per-page !important wars */ .elv-body.elv-wide .elv-content{max-width:none;padding:22px clamp(24px,3vw,56px)} /* legacy page caps that must lose on desktop — every known phone-cap id/class */ #app,#shell,#wrap,.wrap-narrow,main.narrow{max-width:var(--elv-max) !important} } @media(max-width:859px){ /* O4 (27 Jul): body type steps down on mobile via the ONE --fs token — ~15px base below the breakpoint. Pages read html{font-size:var(--fs)}; the shell zoom (A−/A+) writes --fs inline on and still wins. */ :root{--fs:15px} body{font-size:var(--fs,15px)} .elv-burger{display:inline-block} .elv-side{display:none} .elv-side.open{display:flex;position:fixed;top:0;left:0;bottom:0;width:78vw;max-width:330px; background:var(--elv-panel);z-index:90;padding:70px 14px 20px;overflow-y:auto; box-shadow:20px 0 60px rgba(0,0,0,.55)} } /* ═══ O5 (27 Jul) — the ONE footer spread. Left block hard LEFT, right block hard RIGHT across the real shell width on desktop; below the breakpoint the footer renders exactly as it always did (inline flow, page's own centring). .elv-footer-sep is the cosmetic " · " between the halves — hidden only once the halves are spread apart. ═══ */ .elv-footer{max-width:var(--elv-max);margin-left:auto;margin-right:auto;min-width:0} @media(min-width:860px){ .elv-footer{display:flex;align-items:center;justify-content:space-between; gap:1rem;flex-wrap:wrap;text-align:left;padding-left:clamp(16px,4vw,56px);padding-right:clamp(16px,4vw,56px)} .elv-footer .elv-footer-sep{display:none} } /* ═══ B5 (26 Jul) — sidebar clusters + runtime accordion (promoted from the App so every surface folds the same way — the reference look) ═══ */ .navclu{border:1px solid var(--elv-line);border-radius:12px;overflow:hidden;margin:2px 0} .navclu .clu-head{display:block;width:100%;text-align:left;background:var(--elv-panel2); border:none;color:var(--elv-ink);font-size:14px;font-weight:800;padding:11px 14px;cursor:pointer} .navclu .clu-chev{display:inline-block;transition:transform .15s;margin-right:4px} .navclu.open .clu-chev{transform:rotate(90deg)} .navclu .clu-items{display:none;padding:4px 6px 6px} .navclu.open .clu-items{display:block} .navclu .clu-items button,.navclu .clu-items a{margin:2px 0} .collapse{background:var(--elv-panel);border:1px solid var(--elv-line);border-radius:16px;margin:10px 0;overflow:hidden} .collapse .collapse-head{display:flex;align-items:center;gap:8px;padding:13px 16px;cursor:pointer;user-select:none} .collapse .collapse-head h2,.collapse .collapse-head h3{margin:0;font-size:1.02rem} .collapse .collapse-head .chev{transition:transform .15s} .collapse .collapse-body{display:none;padding:0 16px 16px} .collapse.open .collapse-body{display:block} /* ═══ E2 (26 Jul) — the one shared toast ═══ */ .elv-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px); background:var(--elv-panel2);color:var(--elv-ink);border:1px solid var(--elv-line); border-radius:12px;padding:11px 18px;font-size:14px;font-weight:600;z-index:99999; opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:88vw} .elv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .elv-toast.err{border-color:#d65a64;color:#ffb3ba} .elv-toast.ok{border-color:var(--elv-ok);color:var(--elv-ok)} body.light .elv-toast.err{color:#a33540} /* ── uploads (§2 UPLOADS LAW — a real picker + drag-drop, never a URL field) ── */ .elv-drop{border:2px dashed var(--elv-line);border-radius:14px;padding:18px;text-align:center; color:var(--elv-muted);cursor:pointer;transition:border-color .15s;margin-top:8px} .elv-drop.drag{border-color:var(--elv-rose);color:var(--elv-ink)} .elv-drop input[type=file]{display:none} .elv-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--elv-line)} .elv-upmeta{font-size:11px;color:var(--elv-muted)} .elv-upbar{height:4px;border-radius:4px;background:var(--elv-line);overflow:hidden;margin-top:4px} .elv-upbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--elv-rose),var(--elv-gold));transition:width .2s} /* ── shared small bits ── */ .elv-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--elv-line); border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--elv-muted)} .elv-chip.on{border-color:var(--elv-ok);color:var(--elv-ok)} .elv-chip.off{border-color:#d65a64;color:#e8808a} .elv-pencil{background:transparent;border:1px solid var(--elv-line);color:var(--elv-muted); border-radius:8px;padding:6px 10px;width:auto;font-size:13px;cursor:pointer} .elv-pencil:hover{border-color:var(--elv-gold);color:var(--elv-gold)}