/* Chromes de navegação do shell — o eixo data-nav (7 padrões reais do * navigation.card, via extensão local do manifest) aplicado no . * Estilos portados 1:1 do protótipo Seletor de Variantes (bundle 8cd72241). * Este arquivo: lockup da marca, visibilidade por modo, lateral (nsb), * barra superior (ntop) e placements; flutuantes/paleta em * shell-nav-float.css. */ /* ── lockup da marca (SGMARK anima via js/sgmark.js) ─────── */ .logo{ display:inline-flex; align-items:center; gap:9px; line-height:1; font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.025em; color:var(--text); } .logo__mark{ position:relative; display:grid; place-items:center; flex:none; color:var(--primary); } .logo__mark .mark, .logo__mark svg{ width:100%; height:100%; display:block; } .logo__word{ white-space:nowrap; } .logo__word .sig{ color:var(--primary); } /* (a visibilidade dos chromes por modo vive no FIM de shell-nav-float.css — precisa vencer as bases na cascata) */ .shell{ position:relative; } /* user + sair na barra de página, exceto quando a lateral (com rodapé) está de pé */ .shell-topbar-user{ display:none; align-items:center; gap:.5rem; } .shell:not([data-nav]) .shell-topbar-user{ display:flex; } html:not([data-nav="side"]) .shell-topbar-user{ display:flex; } .shell-topbar-spacer{ flex:1; } /* ── lateral (nsb) — a sidebar REAL com o visual do card ──── */ .nsb{ width:214px; flex:none; display:flex; background:var(--surface); border-right:1px solid var(--border); flex-direction:column; padding:14px 12px; gap:12px; } .shell-nsb{ min-height:100vh; } .nsb__top{ padding:2px 6px 6px; } .nsb__nav{ position:relative; display:flex; flex-direction:column; gap:2px; } .nsb__thumb{ position:absolute; left:0; top:0; width:0; height:0; z-index:0; background:var(--primary-bg); border-radius:9px; box-shadow:inset 3px 0 0 var(--primary); transition:transform .42s var(--ease-spring), width .3s var(--ease-spring), height .3s var(--ease-spring); } .nsb__a{ position:relative; z-index:1; display:flex; align-items:center; gap:11px; height:38px; padding:0 12px; border:0; background:transparent; color:color-mix(in srgb, var(--text-muted) 68%, var(--text)); font:inherit; font-size:13px; font-weight:500; cursor:pointer; border-radius:9px; transition:color .2s; text-decoration:none; } .nsb__a svg{ width:18px; height:18px; flex:none; } .nsb__a span{ flex:1; text-align:left; } .nsb__a:hover{ color:var(--text); } .nsb__a.is-on{ color:var(--primary-text); } .nsb__ct{ font-family:var(--font-mono); font-size:10px; font-style:normal; color:var(--text-subtle); background:var(--surface-sunken); border-radius:5px; padding:1px 6px; } .nsb__a.is-on .nsb__ct{ background:var(--primary); color:var(--on-primary); } .nsb__foot{ margin-top:auto; display:flex; flex-direction:column; gap:8px; } .nsb__user{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 6px; } .nsb__user .shell-user{ font-size:12px; } /* ── barra superior (ntop) ───────────────────────────────── */ .shell-ntop-host{ padding:12px 16px 0; } .ntop{ display:flex; align-items:center; gap:16px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 16px; } .ntop__links{ position:relative; display:flex; gap:2px; } .ntop__thumb{ position:absolute; top:0; bottom:0; left:0; width:0; z-index:0; background:var(--primary-bg); border-radius:9px; transition:transform .42s var(--ease-spring), width .42s var(--ease-spring); } .ntop__a{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:0; background:transparent; color:color-mix(in srgb, var(--text-muted) 68%, var(--text)); font:inherit; font-size:13px; font-weight:500; cursor:pointer; border-radius:9px; transition:color .25s; text-decoration:none; } .ntop__a svg{ width:16px; height:16px; } .ntop__a:hover{ color:var(--text); } .ntop__a.is-on{ color:var(--primary-text); } .ntop__spacer{ flex:1; } .ntop__avatar{ width:28px; height:28px; border-radius:var(--radius-full); background:var(--primary-bg); color:var(--primary-text); display:grid; place-items:center; font-size:11px; font-weight:600; flex:none; } /* ── placements dos flutuantes (portados do host do protótipo) ── */ .shell-pill-host{ position:absolute; top:14px; left:0; right:0; justify-content:center; z-index:40; pointer-events:none; } .shell-pill-host > *{ pointer-events:auto; } .shell-dock-host{ position:fixed; bottom:18px; left:0; right:0; justify-content:center; z-index:40; pointer-events:none; } .shell-dock-host > *{ pointer-events:auto; } [data-nav="pill"] .shell-content{ padding-top:4.5rem; } [data-nav="dock"] .shell-content{ padding-bottom:6rem; } /* ── mobile (ADR-015): lateral/trilho viram off-canvas ────── */ @media (max-width: 767px){ [data-nav="side"] .shell-nsb, [data-nav="rail"] .shell-nrail{ position:fixed; inset:0 auto 0 0; z-index:20; transform:translateX(-100%); } @media (prefers-reduced-motion: no-preference){ [data-nav="side"] .shell-nsb, [data-nav="rail"] .shell-nrail{ transition:transform .2s ease; } } [data-nav="side"] .shell-nsb.is-open, [data-nav="rail"] .shell-nrail.is-open{ transform:translateX(0); } [data-nav="side"] .shell-nav-toggle, [data-nav="rail"] .shell-nav-toggle{ display:inline-flex; } [data-nav="side"] .shell-scrim, [data-nav="rail"] .shell-scrim{ display:block; position:fixed; inset:0; z-index:10; background:var(--overlay-scrim, rgb(0 0 0 / .4)); } [data-nav="side"] .shell-topbar-user, [data-nav="rail"] .shell-topbar-user{ display:flex; } }