/* ============================================================================ vp-parchment-theme.css — REPAGINAÇÃO "PERGAMINHO v2" (Velho Pergaminho) ---------------------------------------------------------------------------- Camada de tema COMPLETA. Carregue-a por ÚLTIMO no de cada página (depois de style.css / board-redesign.css / character-redesign.css / content-redesign.css / landing.css). Um arquivo, todas as telas. Cobre: tipografia (manuscrito), fundo de papel, cabeçalhos (couro+ouro), botões, cards, painéis, MODAIS, popovers, HUD do tabuleiro, chat/registro, selos/pílulas, abas, formulários e o compêndio. Reafine tudo pela PALETA no :root abaixo. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Cinzel+Decorative:wght@700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* --------------------------------------------------------------------------- 1) PALETA (cobre os tokens do style.css E do landing.css) --------------------------------------------------------------------------- */ :root{ --bg:#e7d4a6; --panel:#f4e9cb; --panel-2:#e6d4a6; --ink:#2e1c0a; --ink-soft:#5c4322; --ink-faint:#8a6a38; --muted:#8a6a38; --accent:#7a4e12; --accent-2:#b8912f; --gold:#b8912f; --rubric:#9a3225; --enemies:#9a3225; --players:#3f6d99; --neutral:#7a6a48; --rule:#b09660; --line:#b09660; --cream:#f6e9cf; --on-accent:#f6e9cf; --vp-leather:linear-gradient(180deg,#3a2913 0%,#241708 55%,#160e06 100%); --vp-gold-bright:#eecb6b; --vp-goldgrad:linear-gradient(135deg,#efd074,#9a7b3f); --vp-tile:linear-gradient(180deg,#f1e4c4,#ddc58c); --vp-tile-hi:linear-gradient(180deg,#f7ecd2,#e7d09e); --vp-wax:linear-gradient(180deg,#9a3225,#71201a); --vp-green:#4d6b2c; --vp-green-2:#3a521f; --vp-green-ink:#eaf3cf; --vp-green-line:#6e8c44; --vp-card:linear-gradient(180deg,#f4e9cb,#e6d4a6); --vp-paper:url("data:image/svg+xml;utf8,"); } /* --------------------------------------------------------------------------- 2) TIPOGRAFIA DE MANUSCRITO — corpo em Garamond, títulos em Cinzel. (é o que tira o ar de "mistura de fontes" das telas) --------------------------------------------------------------------------- */ body,input,select,textarea,button, p,span,a,li,td,th,label,small,strong,b,em,div,summary,dd,dt{ font-family:'EB Garamond',Georgia,serif !important; } h1,h2,h3,h4,h5,h6, .topbar h1,.board-top .ttl,.tb-name,.rail-name,.hud-name,.panel.boxed h2, .lp-sec-head h2,.lp-hero h1,.page-hero h2,.am-head,.modal-head,.sec-label, .rail-tabs button,.seg button,.tab,.b-btn,.lp-link,.gm-toolbar .icon-btn, .act-card .txt b,.cost,.turn-pill,.btn-gold,.hud-toggle,.spell > summary b, .spell-name,.ch-name,.abil-score,.ministat strong,.hp-row strong, .lp-kicker,.lp-ver,.badge,.tag,.pill{ font-family:'Cinzel',Georgia,serif !important; } .lp-brand .nm,.board-brand,.tb-name{ font-family:'Cinzel Decorative','Cinzel',Georgia,serif !important; } /* --------------------------------------------------------------------------- 3) FUNDO DE PAPEL — pergaminho quente da v2 (o body::before de vocês fica). --------------------------------------------------------------------------- */ body{ background-color:var(--bg); background-image: radial-gradient(1200px 780px at 78% -12%, rgba(248,236,206,.55), transparent 60%), radial-gradient(900px 680px at 6% 112%, rgba(150,110,55,.16), transparent 58%), radial-gradient(1200px 900px at 100% 100%, rgba(120,80,35,.18), transparent 55%), var(--vp-paper); background-attachment:fixed,fixed,fixed,fixed; } body:not(.board-body){ background-color:var(--bg); background-image: radial-gradient(1200px 780px at 78% -12%, rgba(248,236,206,.55), transparent 60%), radial-gradient(900px 680px at 6% 112%, rgba(150,110,55,.16), transparent 58%), radial-gradient(1200px 900px at 100% 100%, rgba(120,80,35,.20), transparent 55%), var(--vp-paper); } /* =========================================================================== 4) CABEÇALHOS — couro escuro + ouro (site, app, jogo, compêndio) COESO =========================================================================== */ .topbar,.lp-top,.board-top,body:not(.board-body) .topbar{ background:var(--vp-leather) !important; border-bottom:2px solid var(--accent-2) !important; box-shadow:0 3px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(216,168,72,.30) !important; backdrop-filter:none !important; } .topbar h1,.board-top .ttl,.tb-name,.board-brand{ color:var(--vp-gold-bright) !important; text-shadow:0 1px 2px rgba(0,0,0,.6); } .topbar h1{ font-weight:700 !important; } .lp-brand .nm{ color:var(--vp-gold-bright) !important; text-shadow:0 1px 2px rgba(0,0,0,.65); } .lp-brand .sub{ color:rgba(238,203,107,.74) !important; font-style:italic; } .lp-sigil,.tb-logo{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); } .board-top .stat,.lp-hi,.topbar .muted{ color:#d9b866 !important; } .board-top .stat strong{ color:var(--vp-gold-bright) !important; } .board-top .live{ color:#8fbf5a !important; } .btn-back,.topbar .back,.topbar h1 .back{ color:#d9b866 !important; } .btn-back:hover,.topbar .back:hover{ color:var(--vp-gold-bright) !important; } /* botões/links/segmentos dentro do couro */ .lp-link,.lp-ver,.board-top .b-btn,.topbar .controls .btn,.topbar .controls button, .board-top .icon-btn,.seg{ background:linear-gradient(180deg,#4a3418,#2b1c0c) !important; color:var(--vp-gold-bright) !important; border:1px solid var(--accent-2) !important; box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(216,168,72,.18) !important; } .lp-link:hover,.board-top .b-btn:hover,.topbar .controls .btn:hover,.board-top .icon-btn:hover{ filter:brightness(1.14); border-color:var(--vp-gold-bright) !important; } .lp-link.is-active,.lp-link.lp-gold, .seg button.active,.topbar .controls button:not(.ghost):not(.btn){ background:var(--vp-wax) !important; color:#f7e6c2 !important; border:1px solid var(--accent-2) !important; } .seg button{ background:transparent !important; color:#d9b866 !important; border:0 !important; box-shadow:none !important; } .seg button.active{ background:var(--vp-wax) !important; color:#f7e6c2 !important; } .lp-discord{ background:#5865F2 !important; border-color:#4752c4 !important; color:#fff !important; } .topbar .tag,.board-top .badge{ background:rgba(216,168,72,.14) !important; color:var(--vp-gold-bright) !important; border:1px solid var(--accent-2) !important; } .board-top .badge.dm{ background:var(--vp-wax) !important; color:#f7e6c2 !important; } /* ícone de ajuda etc. no couro */ .board-top .icon-btn{ color:var(--vp-gold-bright) !important; } /* =========================================================================== 5) BARRA DE FERRAMENTAS DO MESTRE — tira de papel v2 =========================================================================== */ .gm-toolbar{ background:linear-gradient(180deg,rgba(226,205,158,.97),rgba(206,182,132,.97)) !important; border-bottom:2px solid var(--accent-2) !important; box-shadow:inset 0 1px 0 rgba(255,250,232,.55),0 2px 7px rgba(60,35,10,.25) !important; } .gm-group .label,.gm-toolbar .label{ color:#8a6a38 !important; font-weight:700 !important; letter-spacing:.12em; } .gm-sep{ background:var(--accent-2) !important; opacity:.55; } .gm-toolbar .icon-btn{ background:var(--vp-tile) !important; color:var(--ink) !important; border:1px solid #7a5a2a !important; border-radius:8px !important; font-weight:600 !important; box-shadow:0 1px 2px rgba(60,35,10,.26), inset 0 1px 0 rgba(255,248,225,.55) !important; } .gm-toolbar .icon-btn:hover{ border-color:var(--accent-2) !important; filter:brightness(1.03); } .gm-toolbar .icon-btn.combat{ background:var(--vp-tile) !important; color:var(--ink) !important; border-color:#7a5a2a !important; } .gm-toolbar .icon-btn.danger{ background:linear-gradient(#e7cfc6,#d9b3a8) !important; color:#7a2018 !important; border-color:#c08070 !important; } /* ícones ilustrados um pouco maiores na toolbar */ .gm-toolbar .icon-btn .vp-icon{ --vp-icon-size:24px; } /* =========================================================================== 6) BOTÕES DE CONTEÚDO =========================================================================== */ button{ background:var(--vp-wax); border:1px solid var(--accent-2); box-shadow:inset 0 1px 0 rgba(255,224,180,.28),0 1px 3px rgba(0,0,0,.32); } .b-btn,.lp-btn.ghost,button.ghost,.gm-toolbar .pop button.ghost, body:not(.board-body) .btn:not(.primary):not(.danger):not(.needs-choice), body:not(.board-body) .topbar .controls .btn{ background:var(--vp-tile) !important; color:var(--ink) !important; border:1px solid var(--accent-2) !important; border-radius:9px; box-shadow:0 1px 2px rgba(60,35,10,.26), inset 0 1px 0 rgba(255,248,225,.55) !important; } /* (no couro, .board-top .b-btn e .topbar .controls .btn já foram tratados acima) */ .b-btn:hover,.lp-btn.ghost:hover,button.ghost:hover, body:not(.board-body) .btn:not(.primary):not(.danger):hover{ border-color:var(--vp-gold-bright) !important; filter:brightness(1.03); } .lp-btn.primary,a.btn.primary,.btn.primary,.btn-gold, .gm-toolbar .pop button:not(.icon-btn):not(.ghost), .row-form.spell-filters button{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border:1px solid var(--accent-2) !important; box-shadow:inset 0 1px 0 rgba(255,224,180,.3),0 6px 16px rgba(90,55,20,.35) !important; } .btn.danger,.gm-toolbar .icon-btn.danger{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border-color:var(--accent-2) !important; } /* =========================================================================== 7) PAINÉIS, CARDS E MODAIS — papel v2 + moldura dourada =========================================================================== */ .panel,.table-card,.hp-feature,.hp-step,.hp-band,.hp-proof div,.info-pop, .lp-menu-panel,.action-menu,.pop,.gm-toolbar .pop,.act-info-pop,.spell, .modal-card,.treset-card,.wizard-card,.auth-card{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; box-shadow:inset 0 0 0 1px rgba(255,250,232,.35), 0 6px 20px rgba(60,35,10,.30) !important; color:var(--ink); } .panel.boxed{ position:relative; } .panel.boxed::before{ content:""; position:absolute; inset:5px; pointer-events:none; border:1px solid rgba(184,145,47,.55); border-radius:8px; box-shadow:inset 0 0 16px rgba(184,145,47,.12); } .panel.boxed h2{ color:var(--accent) !important; border-bottom:1px solid var(--accent-2) !important; } .panel.boxed h2::before,.panel.boxed h2::after{ color:var(--accent-2) !important; } /* MODAIS */ .modal{ background:rgba(28,17,6,.62) !important; } .modal-card{ border:1px solid var(--accent-2) !important; } .modal-head{ font-family:'Cinzel',Georgia,serif !important; color:var(--accent) !important; border-bottom:1px solid var(--accent-2) !important; } .modal-foot,.modal-actions{ border-top:1px solid var(--accent-2) !important; } .modal-foot .primary,.modal-actions .btn:not(.ghost){ background:var(--vp-wax) !important; color:#f7e6c2 !important; border:1px solid var(--accent-2) !important; } .modal-foot .ghost,.modal-actions .btn.ghost{ background:var(--vp-tile) !important; color:var(--ink) !important; border:1px solid var(--accent-2) !important; } .modal-sep{ border:0; border-top:1px solid var(--accent-2); opacity:.5; } /* =========================================================================== 8) HUD DO TABULEIRO (card do personagem no rail) — de escuro p/ pergaminho =========================================================================== */ .hud-card{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; color:var(--ink) !important; box-shadow:inset 0 0 0 1px rgba(255,250,232,.35),0 6px 18px rgba(60,35,10,.3) !important; } .hud.myturn .hud-card{ border-color:var(--vp-gold-bright) !important; box-shadow:0 0 0 1px var(--vp-gold-bright),0 6px 18px rgba(60,35,10,.35) !important; } .hud-name{ color:var(--ink) !important; font-family:'Cinzel',Georgia,serif !important; } .hud-sub,.rail-sub{ color:var(--muted) !important; } .hud-portrait,.rail-tile{ border:2px solid var(--accent-2) !important; } .hud-turn,.turn-pill{ background:var(--vp-wax) !important; color:#f7e6c2 !important; } /* medidores (PV/Movimento) sobre papel */ .meter{ border:1px solid #7a5a24 !important; background:#cabf94 !important; } .meter .mv{ background:linear-gradient(90deg,#a5443a,#7f2d25) !important; } .meter .lbl{ color:#fbf3df !important; text-shadow:0 1px 2px rgba(0,0,0,.55); } /* toggles de combate (Smite, Atordoar, manobras…) */ .hud-toggle,.board-side .hud .hud-toggle{ background:var(--vp-tile) !important; color:var(--ink) !important; border:1px solid var(--accent-2) !important; } .hud-toggle.on,.board-side .hud .hud-toggle.on{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border-color:var(--accent-2) !important; } .hud-slot,.hud-extra{ color:var(--accent) !important; } .hud-gear,.board-side .hud .hud-gear{ color:var(--muted) !important; } .hud-gear:hover{ color:var(--accent) !important; } /* =========================================================================== 9) RAIL / AÇÕES / ESTADO / CHAT =========================================================================== */ .rail-head{ background:rgba(233,220,183,.6) !important; border-bottom:1px solid var(--accent-2) !important; } .rail-name{ color:var(--ink) !important; } .rail-tabs button{ background:rgba(240,231,205,.6) !important; color:var(--muted) !important; border:1px solid var(--accent-2) !important; } .rail-tabs button.active{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border-color:var(--accent-2) !important; } .sec-label{ color:var(--accent) !important; font-family:'Cinzel',Georgia,serif !important; letter-spacing:.08em; } .act-card{ background:linear-gradient(180deg,#f3e8ca,#e6d4a6) !important; border:1px solid rgba(122,90,42,.5) !important; color:var(--ink) !important; box-shadow:0 1px 2px rgba(60,35,10,.16), inset 0 1px 0 rgba(255,252,238,.5) !important; } .act-card:hover:not(:disabled){ border-color:var(--accent-2) !important; } .act-card.act-armed{ border-color:var(--rubric) !important; background:rgba(154,50,37,.14) !important; box-shadow:0 0 0 1px var(--rubric),0 0 12px rgba(154,50,37,.28) !important; } .act-card .txt b{ color:var(--ink) !important; } .act-card .txt small{ color:var(--muted) !important; } .act-card .ico .vp-icon{ --vp-icon-size:34px; } /* ícones um pouco maiores */ .act-card .ico{ width:36px; height:36px; } .act-info{ color:var(--accent) !important; } .act-info:hover{ color:var(--vp-gold-bright) !important; } /* estados/condições */ .cond.buff{ background:rgba(77,107,44,.16) !important; border:1px solid var(--vp-green-line) !important; color:#3a521f !important; } .cond.debuff{ background:rgba(154,50,37,.14) !important; border:1px solid #c08070 !important; color:#7a2018 !important; } .res-row{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; } .res-row strong,.res-adj{ color:var(--accent) !important; } .res-adj{ background:var(--panel-2) !important; border:1px solid var(--accent-2) !important; } .res-adj:hover{ background:var(--accent-2) !important; color:#2e1c0a !important; } .trait-row{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; } /* chat / registro */ .chat-form input{ background:#f4ead0 !important; border:1px solid var(--accent-2) !important; color:var(--ink) !important; } .log li{ border-bottom:1px solid rgba(176,150,96,.4) !important; color:var(--ink-soft) !important; } .log li.system{ color:var(--accent) !important; } /* FALAS HUMANAS = fala de chat (marca de citação à esquerda), sem cara de botão */ .log li.chat{ border-bottom:0 !important; background:linear-gradient(90deg,rgba(154,50,37,.09),rgba(154,50,37,0) 82%) !important; border-left:3px solid var(--rubric) !important; border-radius:0 !important; padding:5px 4px 5px 11px !important; margin:3px 0 !important; box-shadow:none !important; color:var(--ink) !important; } .log li.chat b{ color:var(--rubric) !important; font-weight:700 !important; } /* =========================================================================== 10) SELOS / PÍLULAS / CUSTOS — Ação=ouro · Bônus=verde · Reação=roxo suave =========================================================================== */ .cost.acao,.badge.dm,.pend-tag,.eq-badge,.am-action,.prep-badge{ background:linear-gradient(180deg, #842a1e, #7c261b) !important; !important; color:#ffe9a8 !important; border:1px solid var(--accent-2) !important; } .cost.ataque{ background:linear-gradient(180deg,#a5632a,#7d461a) !important; color:#ffe9c0 !important; } .cost.bonus{ background:linear-gradient(180deg,var(--vp-green),var(--vp-green-2)) !important; color:var(--vp-green-ink) !important; border:1px solid var(--vp-green-line) !important; } .cost.reacao{ background:linear-gradient(180deg,#7a5a9a,#5a3f78) !important; color:#efe6ff !important; border:1px solid #9a7fc0 !important; } .cost.especial{ background:var(--accent) !important; color:var(--cream) !important; border:1px solid var(--accent-2) !important; } .cost.passivo,.pill,.tag,.badge.player{ background:var(--panel-2) !important; color:var(--muted) !important; border:1px solid var(--rule) !important; } .econ span:not(.off){ border-color:var(--vp-green-line) !important; background:rgba(77,107,44,.14) !important; color:#3a521f !important; } .econ span.off{ background:var(--panel-2) !important; color:var(--muted) !important; border-color:var(--rule) !important; } /* =========================================================================== 11) ABAS, FORMULÁRIOS, COMPÊNDIO =========================================================================== */ .tab,.set-tab{ background:var(--panel-2) !important; color:var(--muted) !important; border:1px solid var(--rule) !important; } .tab.active,.set-tab.active{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border-color:var(--accent-2) !important; } input,select,textarea{ background:#f4ead0 !important; color:var(--ink) !important; border:1px solid var(--rule) !important; } input:focus,select:focus,textarea:focus{ outline:2px solid var(--accent-2) !important; } /* compêndio (spells/feats/races) */ .spell{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; box-shadow:0 6px 18px rgba(60,35,10,.28) !important; } .spell > summary{ color:var(--ink) !important; } .container > .muted,p.muted{ color:var(--muted) !important; } /* =========================================================================== 12) FACÇÕES E TURNO — coordenado com o CONTORNO DOS TOKENS do mapa. Paleta "tinta envelhecida" — nanquim ferro-gálico / sangue seco / sépia, no lugar do azul e vermelho de interface que brigavam com o pergaminho. O dourado do TURNO fica: é o único que deve gritar. (app.js FACTION_COLORS: jogador #2f4b7c · inimigo #8a2f24 · neutro #6f6552 · turno #f4c14b) =========================================================================== */ :root{ --tk-player:#2f4b7c; --tk-enemy:#8a2f24; --tk-neutral:#6f6552; --tk-turn:#f4c14b; } /* pontos de iniciativa / lados */ .initiative .dot.players,.dot.players{ background:var(--tk-player) !important; } .initiative .dot.enemies,.dot.enemies{ background:var(--tk-enemy) !important; } .initiative .dot.neutral,.dot.neutral{ background:var(--tk-neutral) !important; } /* retrato/tile do combatente: borda neutra por padrão, nanquim/sangue seco por facção */ .hud .rail-tile,.hud-portrait{ border:2px solid var(--accent-2) !important; } .hud.faction-players .rail-tile,.hud.faction-players .hud-portrait, .role-players .rail-tile{ border-color:var(--tk-player) !important; } .hud.faction-enemies .rail-tile,.hud.faction-enemies .hud-portrait, .role-enemies .rail-tile{ border-color:var(--tk-enemy) !important; } /* TURNO ATIVO = anel amarelo (igual ao token) — vence a facção */ .initiative li.current{ outline:2px solid var(--tk-turn) !important; box-shadow:inset 0 0 0 1px var(--tk-turn); } .turn-item.current,.turn-item.myturn,.turnbar .current{ outline:2px solid var(--tk-turn) !important; outline-offset:1px; border-radius:11px; } .hud.myturn .hud-card{ border-color:var(--tk-turn) !important; box-shadow:0 0 0 1px var(--tk-turn),0 6px 18px rgba(60,35,10,.35) !important; } .hud.myturn .rail-tile,.hud.myturn .hud-portrait{ border-color:var(--tk-turn) !important; } /* selo "SUA VEZ" / turno em amarelo, casando com o anel do token */ .turn-pill,.hud-turn{ background:linear-gradient(180deg,#e6b93f,#c8901f) !important; color:#3a2a0f !important; border:1px solid #8a6a1f !important; text-shadow:none !important; } /* links de texto */ a{ color:var(--accent); } a:hover{ color:var(--rubric); } .lp-link,.lp-btn,.btn,.b-btn,.modal-foot .primary,.modal-foot .ghost{ text-decoration:none; } /* =========================================================================== 13) CRIADOR DE AVENTURAS (adventure.php) — leva o adv-body ao nível do play. Sobrepõe o adventure-redesign.css (que usa body.adv-body .x, mais específico). =========================================================================== */ /* topbar de couro + ouro, igual ao tabuleiro */ body.adv-body .topbar{ background:var(--vp-leather) !important; border-bottom:2px solid var(--accent-2) !important; box-shadow:0 3px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(216,168,72,.30) !important; } body.adv-body .topbar h1,body.adv-body .tb-name{ color:var(--vp-gold-bright) !important; text-shadow:0 1px 2px rgba(0,0,0,.6); } body.adv-body .adv-title-input{ color:var(--vp-gold-bright) !important; background:transparent !important; border-color:transparent !important; } body.adv-body .adv-title-input:hover{ border-color:rgba(216,168,72,.5) !important; } body.adv-body .adv-title-input:focus{ border-color:var(--accent-2) !important; background:rgba(0,0,0,.28) !important; } body.adv-body .topbar h1 .back{ color:#d9b866 !important; } body.adv-body .topbar h1 .back:hover{ color:var(--vp-gold-bright) !important; } body.adv-body .tb-logo{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); } /* botões da topbar sobre o couro */ body.adv-body .topbar .controls .btn,body.adv-body .topbar .controls .icon-btn{ background:linear-gradient(180deg,#4a3418,#2b1c0c) !important; color:var(--vp-gold-bright) !important; border:1px solid var(--accent-2) !important; box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(216,168,72,.18) !important; } body.adv-body .topbar .controls .btn:hover,body.adv-body .topbar .controls .icon-btn:hover{ filter:brightness(1.14) !important; border-color:var(--vp-gold-bright) !important; } body.adv-body .topbar .controls .adv-lib-btn{ background:var(--vp-wax) !important; border-color:var(--accent-2) !important; color:#f7e6c2 !important; } body.adv-body .topbar .controls .adv-lib-btn:hover{ filter:brightness(1.08) !important; } body.adv-body .topbar .controls .tb-sep{ background:rgba(216,168,72,.4) !important; } /* colunas + cabeçalhos */ body.adv-body .adv-workspace{ background:var(--accent-2) !important; } body.adv-body .adv-col{ background:var(--vp-card) !important; } body.adv-body .adv-scene-col{ background:var(--panel) !important; } body.adv-body .adv-col-head{ color:var(--accent) !important; border-bottom:1px solid var(--accent-2) !important; background:rgba(233,220,183,.5) !important; font-family:'Cinzel',Georgia,serif !important; letter-spacing:.08em; } /* lista de áreas */ body.adv-body .area-nav-item{ color:var(--ink) !important; } body.adv-body .area-nav-item:hover{ background:rgba(184,145,47,.12) !important; } body.adv-body .area-nav-item.sel{ border-color:var(--rubric) !important; background:rgba(154,50,37,.12) !important; } body.adv-body .area-nav-item .an-count{ color:var(--muted) !important; } /* barra de cena + chips */ body.adv-body .adv-scene-bar{ background:linear-gradient(180deg,rgba(226,205,158,.6),rgba(206,182,132,.6)) !important; border-bottom:1px solid var(--accent-2) !important; } body.adv-body .area-name-input{ background:#f4ead0 !important; border:1px solid var(--rule) !important; color:var(--ink) !important; } body.adv-body .adv-scene-bar .grid-size,body.adv-body .adv-scene-bar .inline-lbl{ background:var(--vp-tile) !important; border:1px solid var(--accent-2) !important; color:var(--ink-soft) !important; } body.adv-body .adv-scene-bar select,body.adv-body .adv-scene-bar input[type=number]{ background:#f4ead0 !important; border:1px solid var(--rule) !important; color:var(--ink) !important; } body.adv-body .adv-scene-bar .btn.tiny,body.adv-body .adv-col-head .btn.tiny{ background:var(--vp-tile) !important; border:1px solid var(--accent-2) !important; color:var(--ink) !important; box-shadow:0 1px 2px rgba(60,35,10,.2), inset 0 1px 0 rgba(255,248,225,.5) !important; } body.adv-body .adv-scene-bar .btn.tiny:hover,body.adv-body .adv-col-head .btn.tiny:hover{ border-color:var(--vp-gold-bright) !important; } body.adv-body .adv-scene-bar .btn.tiny.armed{ border-color:var(--rubric) !important; background:rgba(154,50,37,.14) !important; } body.adv-body #area-save{ background:var(--vp-wax) !important; border:1px solid var(--accent-2) !important; color:#f7e6c2 !important; } body.adv-body .upload-btn{ border:1px dashed var(--accent-2) !important; background:var(--vp-tile) !important; color:var(--ink) !important; } /* leitura / notas */ body.adv-body .adv-text-row{ background:linear-gradient(180deg,rgba(226,205,158,.5),rgba(206,182,132,.5)) !important; border-top:1px solid var(--accent-2) !important; } body.adv-body #area-read,body.adv-body #area-notes{ background:#f4ead0 !important; border:1px solid var(--rule) !important; color:var(--ink) !important; } body.adv-body #area-read{ color:#6f5636 !important; } /* paleta (direita) */ body.adv-body .pal-tools button{ background:var(--vp-tile) !important; border:1px solid var(--accent-2) !important; color:var(--ink) !important; box-shadow:0 1px 2px rgba(60,35,10,.18), inset 0 1px 0 rgba(255,248,225,.5) !important; } body.adv-body .pal-tools button:hover{ border-color:var(--vp-gold-bright) !important; filter:brightness(1.02); } body.adv-body .pal-tools button.armed{ background:var(--vp-wax) !important; border-color:var(--accent-2) !important; color:#f7e6c2 !important; } body.adv-body .pal-tabs .pal-tab{ background:var(--panel-2) !important; border:1px solid var(--accent-2) !important; color:var(--muted) !important; } body.adv-body .pal-tabs .pal-tab.armed{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border-color:var(--accent-2) !important; } body.adv-body #pal-search{ background:#f4ead0 !important; border:1px solid var(--rule) !important; color:var(--ink) !important; } body.adv-body .pal-item{ color:var(--ink) !important; } body.adv-body .pal-item:hover{ background:rgba(184,145,47,.1) !important; border-color:var(--accent-2) !important; } body.adv-body .pal-item.armed{ border-color:var(--rubric) !important; background:rgba(154,50,37,.14) !important; } body.adv-body .ac-thumb{ border:1px solid var(--accent-2) !important; } body.adv-body .adv-zoom button{ background:linear-gradient(180deg,#3a2913,#1a120a) !important; border:1px solid #7a5a24 !important; color:var(--vp-gold-bright) !important; } /* biblioteca (cards no modal) */ body.adv-body .adv-tpl-card{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; } body.adv-body .adv-tpl-nm{ color:var(--accent) !important; } body.adv-body .adv-tpl-use{ background:var(--vp-wax) !important; border-color:var(--accent-2) !important; color:#f7e6c2 !important; } /* =========================================================================== 14) MENUS SUSPENSOS (Compêndio / Conta) — moldura dourada v2 =========================================================================== */ .lp-menu-caret{ color:var(--vp-gold-bright) !important; } .lp-menu:hover .lp-menu-trigger,.lp-menu:focus-within .lp-menu-trigger{ background:var(--vp-wax) !important; color:#f7e6c2 !important; border-color:var(--accent-2) !important; } .lp-menu:hover .lp-menu-trigger .lp-menu-caret,.lp-menu:focus-within .lp-menu-trigger .lp-menu-caret{ color:#f7e6c2 !important; } .lp-menu-panel{ border:1px solid var(--accent-2) !important; background:var(--vp-card) !important; box-shadow:0 14px 34px rgba(28,17,6,.5), inset 0 0 0 1px rgba(255,250,232,.35) !important; padding:7px !important; } .lp-menu-panel a{ color:var(--ink) !important; font-weight:600; border-radius:8px; } .lp-menu-panel a:hover,.lp-menu-panel a:focus-visible{ background:rgba(154,50,37,.12) !important; color:var(--rubric) !important; } .lp-menu-panel a.is-active{ background:var(--vp-wax) !important; color:#f7e6c2 !important; } .lp-menu-user{ color:var(--accent) !important; border-bottom:1px solid var(--accent-2) !important; font-family:'Cinzel',Georgia,serif !important; } /* =========================================================================== 15) CARD DE CRIATURA / TOKEN (.info-pop .ti-*) — mais legível e emoldurado =========================================================================== */ .info-pop{ background:var(--vp-card) !important; border:1px solid var(--accent-2) !important; box-shadow:0 16px 40px rgba(28,17,6,.5), inset 0 0 0 1px rgba(255,250,232,.35) !important; } .ti-head{ font-family:'Cinzel',Georgia,serif !important; font-size:18px !important; color:var(--accent) !important; border-bottom:1px solid var(--accent-2) !important; padding-bottom:8px !important; margin-bottom:4px !important; } .ti-close{ color:var(--muted) !important; border:1px solid var(--accent-2) !important; border-radius:6px !important; width:24px; height:24px; } .ti-close:hover{ color:#2e1c0a !important; background:var(--accent-2) !important; } .ti-portrait{ border:2px solid var(--accent-2) !important; background-color:#e6d4a6 !important; box-shadow:inset 0 1px 3px rgba(60,35,10,.25) !important; } .ti-portrait.ti-letter{ color:var(--accent-2) !important; } .ti-sub{ color:var(--ink-soft) !important; font-style:italic; font-size:13.5px !important; } .ti-stats{ gap:8px 14px !important; padding:8px 0 !important; border-bottom:1px solid rgba(184,145,47,.4) !important; color:var(--ink) !important; } .ti-stats b{ color:var(--accent) !important; } /* caixas de atributo = azulejo de pergaminho, legíveis */ .ti-ab{ background:var(--vp-tile) !important; border:1px solid var(--accent-2) !important; box-shadow:inset 0 1px 0 rgba(255,250,232,.55) !important; padding:7px 2px !important; } .ti-ab-l{ color:var(--ink-faint) !important; font-weight:700 !important; letter-spacing:.04em; text-transform:uppercase; } .ti-ab b{ color:var(--ink) !important; } .ti-ab-m{ color:var(--accent) !important; font-weight:600 !important; }