/* ======================================================================== O Casal Legendário — app styles. Sanctuary-dark, gold, editorial. Tokens audited from the real site (DESIGN_SYSTEM_REAL.md). ===================================================================== */ :root { /* surfaces */ --ink: #090806; --bg: #0D0A07; --bg-2: #120E09; --surface: rgba(255,255,255,0.045); --surface-2: rgba(255,255,255,0.085); --line: rgba(245,240,234,0.12); --line-2: rgba(245,240,234,0.06); /* text */ --text: #F5F0EA; --cream: #E8DDD0; --muted: rgba(245,240,234,0.66); --muted-2: rgba(245,240,234,0.86); --faint: rgba(245,240,234,0.52); /* accent — gold is the brand signature */ --accent: #C9A96E; --accent-deep: #A98A4F; --accent-soft: rgba(201,169,110,0.16); --accent-line: rgba(201,169,110,0.42); --on-accent: #2A2114; /* category accents (parcimony) */ --navy: #3a5a86; --green: #6f9e7b; --copper: #D08A48; --ember: #C83030; --danger: #D8A08E; --success: #D4C28B; /* form */ --radius: 24px; --radius-sm: 16px; --radius-xs: 12px; --shadow: 0 26px 90px rgba(0,0,0,0.55); --shadow-sm: 0 12px 34px rgba(0,0,0,0.35); --ease: cubic-bezier(.22,1,.36,1); /* type */ --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'DM Sans', system-ui, -apple-system, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; /* density (driven by tweaks) */ --density: 1; --tsize: 1; } /* light mode (tweak) */ :root[data-theme="light"] { --ink: #F3EEE4; --bg: #F7F2E9; --bg-2: #FBF7EF; --surface: rgba(40,30,16,0.035); --surface-2: rgba(40,30,16,0.06); --line: rgba(40,30,16,0.14); --line-2: rgba(40,30,16,0.07); --text: #26211A; --cream: #3a3228; --muted: rgba(38,33,26,0.62); --muted-2: rgba(38,33,26,0.82); --faint: rgba(38,33,26,0.40); --accent-soft: rgba(169,138,79,0.14); --accent-line: rgba(169,138,79,0.5); --on-accent: #2A2114; --shadow: 0 26px 70px rgba(60,45,20,0.16); --shadow-sm: 0 12px 30px rgba(60,45,20,0.10); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--ink); /* Trava de zoom mobile: bloqueia duplo-toque, ajuste automático de texto e reflow de balão (Android + iOS). Pareado com user-scalable=no no viewport. */ touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; /* trava o desplazamento lateral: o rolava porque só o body tinha overflow-x */ } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: calc(16px * var(--tsize)); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; touch-action: manipulation; overscroll-behavior-y: none; /* mata o "bounce"/pull-to-refresh que parece zoom */ -webkit-tap-highlight-color: transparent; } /* iOS faz auto-zoom ao focar qualquer campo com fonte < 16px. Piso de 16px em TODOS os controles preserva o scaling do --tsize sem disparar o zoom. Esta é a causa-raiz nº1 do "fica aproximando" ao tocar nos inputs. */ input, textarea, select, .field, .twk-field { font-size: max(16px, calc(15px * var(--tsize))); } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent-soft); } /* scrollbar */ *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } *::-webkit-scrollbar-track { background: transparent; } /* ── type primitives ─────────────────────────────────────────── */ .serif { font-family: var(--serif); font-weight: 500; letter-spacing: 0; } .verse { font-family: var(--verse-font, var(--serif)); font-style: italic; font-weight: 500; line-height: 1.22; text-wrap: pretty; } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: calc(11px * var(--tsize)); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .eyebrow.muted { color: var(--muted); } .kicker { font-family: var(--mono); font-size: calc(10px * var(--tsize)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } /* ── glow ───────────────────────────────────────────────────── */ .glow-top { overflow: hidden; overflow: clip; } .glow-top::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: min(680px, max(0px, calc(100% - 24px))); height: 360px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, var(--accent-soft), transparent 68%); opacity: 0.9; } @media (prefers-reduced-motion: no-preference) { .glow-top::before { animation: glowBreath 8s ease-in-out infinite; } } @keyframes glowBreath { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } } /* ── buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; font-size: calc(15px * var(--tsize)); line-height: 1; padding: calc(14px * var(--density)) calc(22px * var(--density)); transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-gold { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 3px 14px rgba(201,169,110,0.28); } .btn-gold:hover { background: #d4b67c; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.42), 0 6px 20px rgba(201,169,110,0.40); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent-line); transform: translateY(-2px); } .btn-soft { background: var(--surface); color: var(--text); border-color: var(--line); } .btn-soft:hover { background: var(--surface-2); border-color: var(--accent-line); } .btn-full { width: 100%; } .btn-lg { font-size: calc(16px * var(--tsize)); padding: calc(16px * var(--density)) calc(26px * var(--density)); } .btn-sm { font-size: calc(13px * var(--tsize)); padding: calc(9px * var(--density)) calc(15px * var(--density)); } /* ── cards ──────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: calc(20px * var(--density)); transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .card-sm { border-radius: var(--radius-sm); padding: calc(14px * var(--density)); } /* hover sóbrio: a borda só firma (--line), sem puxar ouro — ouro fica reservado ao foco/ação */ .card-hover:hover { transform: translateY(-2px); border-color: var(--line); } .card-accent { border-color: var(--accent-line); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 55%); } .card-tap { cursor: pointer; } /* ── pills / chips / tags ──────────────────────────────────── */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; padding: 9px 16px; min-height: 40px; font-size: calc(13px * var(--tsize)); font-weight: 500; background: var(--surface); border: 1px solid var(--line); color: var(--muted-2); white-space: nowrap; cursor: pointer; transition: all .16s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pill:hover { border-color: var(--accent-line); color: var(--text); background: var(--surface-2); transform: translateY(-1px); } .pill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: calc(10px * var(--tsize)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--radius-xs); padding: 4px 8px; } .tag-plain { color: var(--muted); border-color: var(--line); } .chip-streak { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 6px 12px; color: var(--accent); font-family: var(--mono); font-weight: 500; font-size: calc(13px * var(--tsize)); } /* ── progress ──────────────────────────────────────────────── */ .bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s var(--ease); } .jpips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .jpip { width: 14px; height: 4px; border-radius: 999px; background: var(--surface-2); transition: background .3s var(--ease), transform .3s var(--ease); } .jpip.on { background: var(--accent); transform: scaleY(1.5); } @media (prefers-reduced-motion: reduce) { .jpip { transition: none; } } /* ── inputs ────────────────────────────────────────────────── */ .field { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--text); font-family: var(--sans); /* piso de 16px: impede o auto-zoom do iOS ao focar, mantendo o scaling do --tsize */ font-size: max(16px, calc(15px * var(--tsize))); padding: 13px 15px; transition: border-color .16s var(--ease); } /* ── foco de teclado: anel de ouro consistente em todo o sistema (WCAG 2.4.7) ── */ .btn:focus-visible, .pill:focus-visible, .qa:focus-visible, .lrow:focus-visible, .iconbtn:focus-visible, .side-link:focus-visible, .tab-item:focus-visible, .card-tap:focus-visible { outline: none; /* gap escuro (--bg) + anel ouro sólido (--accent) para contraste real do foco */ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } .field:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } /* ── foco visível (teclado): anel ouro, só em :focus-visible para não poluir toque/mouse ── */ :where(button, a, input, textarea, select, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent-line); } /* mantém o input sem anel quando o foco vem do toque/mouse, preservando o visual atual */ .field:focus:not(:focus-visible) { outline: none; box-shadow: none; } .field::placeholder { color: var(--faint); } textarea.field { resize: vertical; min-height: 110px; line-height: 1.5; } .label { font-family: var(--mono); font-size: calc(11px * var(--tsize)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; } /* ── notices ──────────────────────────────────────────────── */ .notice { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--radius-sm); padding: 14px 16px; font-size: calc(13.5px * var(--tsize)); line-height: 1.5; background: rgba(216,160,142,0.08); border: 1px solid rgba(216,160,142,0.3); color: var(--muted-2); } .notice .ico { color: var(--danger); flex: 0 0 auto; margin-top: 1px; } /* ── divider ──────────────────────────────────────────────── */ .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .rule-soft { background: var(--line-2); } /* ── layout shell ─────────────────────────────────────────── */ #root { min-height: 100vh; min-height: 100dvh; } .app { height: 100vh; height: 100dvh; display: flex; overflow: hidden; position: relative; } /* sidebar (desktop) */ .sidebar { display: none; flex-direction: column; gap: 4px; width: 248px; flex: 0 0 248px; padding: 26px 18px; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; height: 100dvh; background: var(--bg); } .side-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; } .side-brand img { width: 38px; height: 38px; border-radius: var(--radius-xs); } .side-brand .nm { font-family: var(--serif); font-size: 21px; color: var(--accent); line-height: 1.05; } .side-link { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: var(--radius-xs); color: var(--muted); font-weight: 500; font-size: 15px; transition: all .15s var(--ease); cursor: pointer; } .side-link:hover { background: var(--surface); color: var(--text); } .side-link.on { background: var(--accent-soft); color: var(--text); font-weight: 600; } .side-link.on svg { color: var(--accent); } .side-foot { margin-top: auto; padding: 14px 10px 0; } /* main column */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } .scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .col { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 18px calc(120px * var(--density)); } .col-wide { max-width: 1080px; } /* tab bar (mobile) */ .tabbar { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: stretch; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; color: var(--muted); padding: 8px 2px; border-radius: var(--radius-xs); min-height: 48px; position: relative; font-size: max(11.5px, calc(11.5px * var(--tsize))); font-weight: 500; transition: color .15s var(--ease); } .tab-item.on { color: var(--accent); } .tab-item svg { transition: transform .2s var(--ease); } .tab-item.on svg { transform: translateY(-1px); } /* estado ativo reforçado SEM depender só de cor (WCAG 1.4.1): peso + barrinha superior */ .tab-item.on span { font-weight: 700; } .tab-item.on::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); pointer-events: none; } /* top app bar (mobile) */ .appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 18px 14px; min-height: 56px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); } .appbar .ttl { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; flex: 1; min-width: 0; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-xs); background: transparent; border: 1px solid transparent; color: var(--text); transition: all .15s var(--ease); flex: 0 0 auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .iconbtn:hover { background: var(--surface); border-color: var(--line); } /* ── botão "Voltar" com texto: affordance óbvio em standalone (sem barra do navegador) ── NÃO declarar .backbtn:focus-visible: a regra genérica :where(button...) (foco ouro) já cobre. */ .backbtn { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 6px; border-radius: var(--radius-xs); background: transparent; border: 1px solid transparent; color: var(--text); font-weight: 600; font-size: 15px; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .backbtn:hover { background: var(--surface); border-color: var(--line); } /* ──

→