/* ── BIBI RACE · DESIGN TOKENS (shared) ── Identidade Bibi Race: âmbar-neon sobre preto quente. Dark é o padrão (visão noturna). O tema claro entra via [data-theme="light"] no , aplicado por shared/theme.js. Tudo aqui é variável: trocar o tema reflete em todas as páginas que usam estes tokens. */ /* fontes da marca — carregadas aqui para propagar a todas as páginas */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700;1,800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); :root{ color-scheme: dark; --bg:#0C0A06; --surface:#15110A; --surface-2:#211A0F; --card:#15110A; --card-border:rgba(255,182,39,0.15); --ink:#F7F1E4; --ink-mid:rgba(247,241,228,0.62); --ink-dim:rgba(247,241,228,0.40); --ink-faint:rgba(247,241,228,0.28); --line:rgba(247,241,228,0.10); --accent:#FFB627; /* âmbar neon · primária / CTA */ --accent-bright:#FFD15A; /* âmbar brilho · hover / destaque */ --accent-deep:#E8950C; /* dourado profundo · sombra / pressed */ --accent-soft:#FFDE9C; /* areia clara · texto sobre âmbar */ --on-accent:#1A1304; /* tinta escura para usar sobre âmbar */ --danger:#FF5F57; --ghost-bg:rgba(255,182,39,0.06); --ghost-bd:rgba(255,182,39,0.30); --ghost-bg-hover:rgba(255,182,39,0.12); --ghost-bd-hover:rgba(255,182,39,0.55); --glow:0 0 14px rgba(255,182,39,0.45),0 0 44px rgba(232,149,12,0.28); /* chrome (navbar / tabbar / logo) — antes chumbado em tabbar.css */ --navbar-bg:rgba(12,10,6,0.75); --tabbar-bg:rgba(12,10,6,0.85); --logo-filter:none; --nav-logo:url('../logo.png'); /* lockup âmbar + texto creme (fundo escuro) */ } /* ── TEMA CLARO (âmbar sobre creme quente) ── */ :root[data-theme="light"]{ color-scheme: light; --bg:#FBF7EE; --surface:#FFFFFF; --surface-2:#F3EADA; --card:#FFFFFF; --card-border:rgba(232,149,12,0.22); --ink:#1A1304; --ink-mid:rgba(26,19,4,0.62); --ink-dim:rgba(26,19,4,0.45); --ink-faint:rgba(26,19,4,0.30); --line:rgba(26,19,4,0.12); --accent:#E8950C; /* âmbar mais fechado lê melhor no claro */ --accent-bright:#FFB627; --accent-deep:#C77A05; --accent-soft:#7A5A12; --on-accent:#1A1304; --danger:#E5484D; --ghost-bg:rgba(232,149,12,0.08); --ghost-bd:rgba(232,149,12,0.28); --ghost-bg-hover:rgba(232,149,12,0.14); --ghost-bd-hover:rgba(232,149,12,0.50); --glow:0 0 14px rgba(232,149,12,0.25),0 0 40px rgba(232,149,12,0.14); --navbar-bg:rgba(251,247,238,0.85); --tabbar-bg:rgba(251,247,238,0.90); --logo-filter:none; --nav-logo:url('../logo-bibi-light.png'); /* lockup âmbar + texto preto (fundo claro) */ } /* transição suave ao alternar o tema (não anima no primeiro paint) */ html.vk-theme-ready, html.vk-theme-ready body{ transition: background-color .35s ease, color .35s ease; } *,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; margin:0;padding:0; } ::selection{background:rgba(255,182,39,0.28);color:#fff} body{min-height:100vh;overflow-x:hidden} a{color:inherit;text-decoration:none} /* ── TYPOGRAPHY ── */ .t-eyebrow{ font-family:'Space Mono',monospace; font-size:9px;letter-spacing:.32em;text-transform:uppercase; color:var(--ink-dim); display:flex;align-items:center;gap:12px; } .t-eyebrow::before{content:'';width:24px;height:1px;background:var(--accent);flex-shrink:0} .t-h1{ font-family:'Montserrat',sans-serif;font-style:italic;font-weight:800; font-size:60px;line-height:.92;letter-spacing:-.02em;text-transform:uppercase; color:var(--ink); text-shadow:0 0 26px rgba(255,182,39,0.30); } .t-h2{ font-family:'Montserrat',sans-serif;font-style:italic;font-weight:800; font-size:30px;line-height:1;letter-spacing:-.01em;text-transform:uppercase; color:var(--ink); } .t-sub{ font-family:'Inter',sans-serif;font-weight:400; font-size:14px;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-dim);line-height:1.6; } .t-mono{ font-family:'Space Mono',monospace; font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-dim); } /* ── BUTTONS ── */ .btn-primary{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:16px 24px; background:var(--accent);border:none;color:var(--on-accent);border-radius:3px; font-family:'Inter',sans-serif;font-weight:700; font-size:13px;letter-spacing:.04em;text-transform:uppercase; cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .25s ease; } .btn-primary:hover{background:var(--accent-bright);box-shadow:var(--glow)} .btn-primary:active{transform:scale(.98)} .btn-ghost{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%;padding:14px 20px; background:var(--ghost-bg); border:1px solid var(--ghost-bd); color:var(--accent-soft);border-radius:3px; font-family:'Inter',sans-serif;font-weight:600; font-size:11px;letter-spacing:.06em;text-transform:uppercase; cursor:pointer;transition:background .2s,border-color .2s,color .2s; } .btn-ghost:hover{background:var(--ghost-bg-hover);border-color:var(--ghost-bd-hover);color:var(--accent)} .btn-danger{ background:var(--danger);color:#000; } .btn-danger:hover{background:#ff8076} /* ── BADGES ── */ .badge{ font-family:'Space Mono',monospace; font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent-soft); background:var(--ghost-bg); border:1px solid var(--ghost-bd); padding:6px 10px;border-radius:20px;font-weight:400; } /* ── CARDS ── */ .surface-card{ background:var(--card); border:1px solid var(--line); border-radius:8px; position:relative; }