/* ═══════════════════════════════════════════════════════════════════════════ 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:1180px; --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. */ .elv-lockup{font-weight:700} .elv-lockup i{font-family:'Alex Brush','Great Vibes',cursive;font-style:normal; font-size:1.45em;line-height:1;margin-right:-0.12em;letter-spacing:0; color:inherit;background:inherit;-webkit-background-clip:inherit;vertical-align:-0.06em} /* ── 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){ .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)} /* 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){ .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)} } /* ── 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)}