/* VersaPlay Appearance Engine v1.2.6 — temas e controles unificados */ /* Temas adaptados do protótipo fornecido, mapeados para as variáveis reais do VersaPlay. */ html{ --vp-appearance-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --vp-appearance-scale:1; --vp-appearance-radius:18px; --vp-appearance-overlay:.85; --vp-appearance-bg-image:none; } html[data-vp-appearance-theme="light"]{--bg:#f6f9fc;--surface:#fff;--soft:#eef5f9;--text:#16233a;--muted:#67788c;--line:#dfe8ef;--blue:#0877c9;--blue2:#0064ad;--green:#079b65;--shadow:0 10px 28px rgba(32,62,86,.08);--vp-bg:#f6f9fc;--vp-surface:#fff;--vp-surface-soft:#eef5f9;--vp-text:#16233a;--vp-muted:#67788c;--vp-line:#dfe8ef;--vp-blue:#0877c9;--vp-blue-strong:#0064ad;--vp-blue-soft:#e7f4fd;--vp-green:#079b65;--vp-shadow:0 10px 28px rgba(32,62,86,.08);color-scheme:light} html[data-vp-appearance-theme="dark"]{--bg:#07111c;--surface:#101c29;--soft:#172635;--text:#edf5fb;--muted:#9eb0c0;--line:#263849;--blue:#35a8f4;--blue2:#138edc;--green:#13a974;--shadow:0 10px 30px rgba(0,0,0,.28);--vp-bg:#07111c;--vp-surface:#101c29;--vp-surface-soft:#172635;--vp-text:#edf5fb;--vp-muted:#9eb0c0;--vp-line:#263849;--vp-blue:#35a8f4;--vp-blue-strong:#138edc;--vp-blue-soft:#12324a;--vp-green:#13a974;--vp-shadow:0 10px 30px rgba(0,0,0,.28);color-scheme:dark} html[data-vp-appearance-theme="neutral"]{--bg:#e9e7e2;--surface:#f7f5f0;--soft:#e1ded7;--text:#242421;--muted:#66645e;--line:#d1cdc4;--blue:#6558c8;--blue2:#5146ad;--green:#267f61;--shadow:0 7px 24px rgba(45,43,38,.10);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:light} html[data-vp-appearance-theme="blended"]{--bg:#18122b;--surface:#302846;--soft:#3b3157;--text:#ffe6c7;--muted:#c1bacd;--line:#58496f;--blue:#ff8b24;--blue2:#e36e00;--green:#54bf8b;--shadow:0 9px 28px rgba(24,18,43,.5);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:dark} html[data-vp-appearance-theme="cyberpunk"]{--bg:#05050a;--surface:#120e24;--soft:#1d1635;--text:#00ffd0;--muted:#ff5a91;--line:#00bfa5;--blue:#ffe600;--blue2:#d6be00;--green:#00e2b8;--shadow:0 0 20px rgba(255,230,0,.18);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:dark} html[data-vp-appearance-theme="forest"]{--bg:#061e14;--surface:#0b2e1f;--soft:#123d2b;--text:#ecfdf5;--muted:#77d9ae;--line:#285942;--blue:#10b981;--blue2:#059669;--green:#16a66e;--shadow:0 8px 24px rgba(0,0,0,.35);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:dark} html[data-vp-appearance-theme="dracula"]{--bg:#282a36;--surface:#383a4a;--soft:#44475a;--text:#f8f8f2;--muted:#aab2d5;--line:#5a5f78;--blue:#ff79c6;--blue2:#bd93f9;--green:#50fa7b;--shadow:0 10px 26px rgba(0,0,0,.28);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:dark} html[data-vp-appearance-theme="sunset"]{--bg:#251044;--surface:#3c1d6b;--soft:#4a267d;--text:#fff7ed;--muted:#fdba74;--line:#6b3a91;--blue:#f97316;--blue2:#ea580c;--green:#3dbb82;--shadow:0 8px 30px rgba(43,16,85,.45);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:dark} html[data-vp-appearance-theme="mono"]{--bg:#121212;--surface:#1d1d1d;--soft:#272727;--text:#fff;--muted:#a0a0a0;--line:#3a3a3a;--blue:#fff;--blue2:#d4d4d4;--green:#d4d4d4;--shadow:none;--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:none;color-scheme:dark} html[data-vp-appearance-theme="ocean"]{--bg:#031525;--surface:#0a2540;--soft:#103452;--text:#e0f2fe;--muted:#79cbed;--line:#24506c;--blue:#38bdf8;--blue2:#0284c7;--green:#18aa84;--shadow:0 8px 32px rgba(2,21,37,.55);--vp-bg:var(--bg);--vp-surface:var(--surface);--vp-surface-soft:var(--soft);--vp-text:var(--text);--vp-muted:var(--muted);--vp-line:var(--line);--vp-blue:var(--blue);--vp-blue-strong:var(--blue2);--vp-green:var(--green);--vp-shadow:var(--shadow);color-scheme:dark} @media(prefers-color-scheme:dark){html[data-vp-appearance-theme="system"]{--bg:#07111c;--surface:#101c29;--soft:#172635;--text:#edf5fb;--muted:#9eb0c0;--line:#263849;--blue:#35a8f4;--blue2:#138edc;--green:#13a974;--shadow:0 10px 30px rgba(0,0,0,.28);--vp-bg:#07111c;--vp-surface:#101c29;--vp-surface-soft:#172635;--vp-text:#edf5fb;--vp-muted:#9eb0c0;--vp-line:#263849;--vp-blue:#35a8f4;--vp-blue-strong:#138edc;--vp-green:#13a974;--vp-shadow:0 10px 30px rgba(0,0,0,.28);color-scheme:dark}} @media(prefers-color-scheme:light){html[data-vp-appearance-theme="system"]{--bg:#f6f9fc;--surface:#fff;--soft:#eef5f9;--text:#16233a;--muted:#67788c;--line:#dfe8ef;--blue:#0877c9;--blue2:#0064ad;--green:#079b65;--shadow:0 10px 28px rgba(32,62,86,.08);--vp-bg:#f6f9fc;--vp-surface:#fff;--vp-surface-soft:#eef5f9;--vp-text:#16233a;--vp-muted:#67788c;--vp-line:#dfe8ef;--vp-blue:#0877c9;--vp-blue-strong:#0064ad;--vp-green:#079b65;--vp-shadow:0 10px 28px rgba(32,62,86,.08);color-scheme:light}} html[data-vp-font="inter"]{--vp-appearance-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif} html[data-vp-font="roboto"]{--vp-appearance-font:Roboto,Arial,Helvetica,sans-serif} html[data-vp-font="poppins"]{--vp-appearance-font:Poppins,Inter,system-ui,sans-serif} html[data-vp-font="montserrat"]{--vp-appearance-font:Montserrat,Inter,system-ui,sans-serif} html[data-vp-font="playfair"]{--vp-appearance-font:"Playfair Display",Georgia,"Times New Roman",serif} html[data-vp-font="merriweather"]{--vp-appearance-font:Merriweather,Georgia,"Times New Roman",serif} html[data-vp-font="firacode"]{--vp-appearance-font:"Fira Code","Courier New",monospace} html[data-vp-font="jetbrains"]{--vp-appearance-font:"JetBrains Mono","Courier New",monospace} html[data-vp-font="orbitron"]{--vp-appearance-font:Orbitron,Inter,system-ui,sans-serif} html[data-vp-font="arcade"]{--vp-appearance-font:"Press Start 2P","Courier New",monospace} html[data-vp-size="small"]{--vp-appearance-scale:.90} html[data-vp-size="medium"]{--vp-appearance-scale:1} html[data-vp-size="large"]{--vp-appearance-scale:1.10} html[data-vp-size="xlarge"]{--vp-appearance-scale:1.20} html[data-vp-shape="square"]{--vp-appearance-radius:0px} html[data-vp-shape="soft"]{--vp-appearance-radius:8px} html[data-vp-shape="rounded"]{--vp-appearance-radius:18px} html[data-vp-shape="pill"]{--vp-appearance-radius:28px} body.vp-store-body,.vp-info-main,.vp-info-top,.vp-info-footer{font-family:var(--vp-appearance-font)!important} body.vp-store-body{font-size:calc(16px * var(--vp-appearance-scale));background:var(--bg)!important;color:var(--text)!important;position:relative} body.vp-store-body::before{content:"";position:fixed;inset:0;background-image:var(--vp-appearance-bg-image);background-size:cover;background-position:center;background-attachment:fixed;z-index:-2;pointer-events:none} body.vp-store-body::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,var(--vp-appearance-overlay));opacity:0;z-index:-1;pointer-events:none} html.vp-has-bg-image body.vp-store-body::after{opacity:1} /* Unificação para temas além de claro/escuro. */ html[data-vp-appearance-theme] .vp-store-header{background:color-mix(in srgb,var(--surface) 94%,transparent)!important;border-color:var(--line)!important} html[data-vp-appearance-theme] .vp-store-search{background:var(--soft)!important;border-color:var(--line)!important} html[data-vp-appearance-theme] .vp-store-search input{color:var(--text)!important} html[data-vp-appearance-theme] .vp-store-search input::placeholder{color:var(--muted)!important} html[data-vp-appearance-theme] .vp-store-login, html[data-vp-appearance-theme] .vp-store-appearance, html[data-vp-appearance-theme] .vp-store-mobile-toggle, html[data-vp-appearance-theme] .vp-store-mobile-panel, html[data-vp-appearance-theme] .vp-store-mobile-action, html[data-vp-appearance-theme] .vp-store-mobile-theme-options button, html[data-vp-appearance-theme] .vp-store-appearance-menu{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important} html[data-vp-appearance-theme] .vp-store-card, html[data-vp-appearance-theme] .vp-store-stats div, html[data-vp-appearance-theme] .vp-store-empty, html[data-vp-appearance-theme] .vp-store-footer, html[data-vp-appearance-theme] .vp-store-donation{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important} html[data-vp-appearance-theme] .vp-store-card-copy p, html[data-vp-appearance-theme] .vp-store-intro p, html[data-vp-appearance-theme] .vp-store-section-head p, html[data-vp-appearance-theme] .vp-store-meta, html[data-vp-appearance-theme] .vp-store-footer a, html[data-vp-appearance-theme] .vp-store-donation-copy p, html[data-vp-appearance-theme] .vp-store-donation-copy small{color:var(--muted)!important} html[data-vp-appearance-theme] .vp-store-kicker, html[data-vp-appearance-theme] .vp-store-more, html[data-vp-appearance-theme] .vp-store-tabs a:hover, html[data-vp-appearance-theme] .vp-store-tabs a.is-active{color:var(--blue)!important} html[data-vp-appearance-theme] .vp-store-tabs a.is-active:after{background:var(--blue)!important} html[data-vp-appearance-theme] .vp-store-open{background:var(--blue)!important;color:#fff!important} html[data-vp-appearance-theme="mono"] .vp-store-open{color:#111!important} html[data-vp-shape] .vp-store-card, html[data-vp-shape] .vp-store-app-icon, html[data-vp-shape] .vp-store-btn, html[data-vp-shape] .vp-store-open, html[data-vp-shape] .vp-store-search, html[data-vp-shape] .vp-store-stats div, html[data-vp-shape] .vp-store-donation{border-radius:var(--vp-appearance-radius)!important} html[data-vp-layout="minimalist"]{--shadow:none;--vp-shadow:none} html[data-vp-layout="minimalist"] .vp-store-card, html[data-vp-layout="minimalist"] .vp-store-header, html[data-vp-layout="minimalist"] .vp-store-donation{box-shadow:none!important;backdrop-filter:none!important} html[data-vp-layout="futuristic"] .vp-store-card:hover, html[data-vp-layout="futuristic"] .vp-store-donation, html[data-vp-layout="futuristic"] .vp-store-appearance-menu{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 22%,transparent),0 12px 34px color-mix(in srgb,var(--blue) 18%,transparent)!important} /* Quick menu */ .vp-appearance-quick-separator{height:1px;background:var(--vp-line,var(--line));margin:6px 4px} .vp-store-appearance-menu .vp-appearance-open-advanced{grid-template-columns:24px 1fr 20px;font-weight:800;color:var(--vp-blue,var(--blue))} .vp-appearance-mobile-config{margin-top:9px;width:100%;text-align:left} /* Drawer */ .vp-appearance-backdrop{position:fixed;inset:0;z-index:5100;background:rgba(0,0,0,.54);backdrop-filter:blur(3px)} .vp-appearance-backdrop[hidden]{display:none!important} .vp-appearance-drawer{position:fixed;top:0;right:0;z-index:5200;width:min(430px,100vw);height:100dvh;display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;background:var(--surface,#fff);color:var(--text,#16233a);border-left:1px solid var(--line,#dfe8ef);box-shadow:-16px 0 50px rgba(0,0,0,.28);transition:transform .26s ease,visibility .26s} .vp-appearance-drawer.is-open{transform:translateX(0);visibility:visible} .vp-appearance-drawer-head{padding:20px 18px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;align-items:flex-start} .vp-appearance-drawer-head h2{margin:2px 0 4px;font-size:1.2rem}.vp-appearance-drawer-head p{margin:0;color:var(--muted);font-size:.79rem;line-height:1.45}.vp-appearance-kicker{font-size:.66rem;font-weight:900;letter-spacing:.12em;color:var(--blue)} .vp-appearance-close{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);font-size:1.5rem;cursor:pointer} .vp-appearance-drawer-body{flex:1;overflow:auto;padding:17px 18px 28px}.vp-appearance-group{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--line)}.vp-appearance-group:last-child{border-bottom:0}.vp-appearance-label{display:block;margin:0 0 9px;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase} .vp-appearance-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vp-appearance-theme-grid button,.vp-appearance-segmented button{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);cursor:pointer;font:inherit}.vp-appearance-theme-grid button{display:flex;align-items:center;gap:8px;padding:8px 10px;text-align:left}.vp-appearance-theme-grid button.is-active,.vp-appearance-segmented button.is-active{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 20%,transparent);color:var(--blue);font-weight:850} .vp-appearance-drawer select,.vp-appearance-drawer input[type="file"],.vp-appearance-drawer input[type="range"]{width:100%}.vp-appearance-drawer select,.vp-appearance-drawer input[type="file"]{min-height:43px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);padding:8px;font:inherit} .vp-appearance-segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.vp-appearance-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vp-appearance-colors label{display:grid;gap:6px;color:var(--muted);font-size:.78rem}.vp-appearance-colors input[type="color"]{width:100%;height:42px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--soft)} .vp-appearance-secondary{margin-top:10px;min-height:36px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text);cursor:pointer}.vp-appearance-help{margin-top:7px;color:var(--muted);font-size:.73rem;line-height:1.4}.vp-appearance-range-row{display:flex;justify-content:space-between;gap:12px;margin:13px 0 5px;color:var(--muted);font-size:.76rem} .vp-appearance-drawer-foot{padding:13px 18px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:9px;background:var(--surface)}.vp-appearance-drawer-foot button{min-height:43px;border-radius:10px;font-weight:850;cursor:pointer}.vp-appearance-reset{border:1px solid var(--line);background:transparent;color:var(--text)}.vp-appearance-done{border:0;background:var(--blue);color:#fff} body.vp-appearance-lock{overflow:hidden} /* As páginas institucionais criadas na v1.1.3 herdam as preferências. */ html[data-vp-appearance-theme] body:has(.vp-info-main){background:var(--vp-bg,var(--bg))!important;color:var(--vp-text,var(--text))!important;font-family:var(--vp-appearance-font)!important;font-size:calc(16px * var(--vp-appearance-scale))} html[data-vp-appearance-theme] .vp-info-top,html[data-vp-appearance-theme] .vp-info-footer,html[data-vp-appearance-theme] .vp-info-hero,html[data-vp-appearance-theme] .vp-info-card{background:var(--vp-surface,var(--surface))!important;color:var(--vp-text,var(--text))!important;border-color:var(--vp-line,var(--line))!important} html[data-vp-appearance-theme] .vp-info-card p,html[data-vp-appearance-theme] .vp-info-card li,html[data-vp-appearance-theme] .vp-info-hero p,html[data-vp-appearance-theme] .vp-info-meta,html[data-vp-appearance-theme] .vp-info-footer nav a{color:var(--vp-muted,var(--muted))!important} html[data-vp-shape] .vp-info-hero,html[data-vp-shape] .vp-info-card{border-radius:var(--vp-appearance-radius)!important} @media(max-width:560px){.vp-appearance-drawer{width:100vw}.vp-appearance-drawer-head{padding:16px 14px 13px}.vp-appearance-drawer-body{padding:15px 14px 24px}.vp-appearance-drawer-foot{padding:12px 14px}.vp-appearance-theme-grid{grid-template-columns:1fr 1fr}.vp-appearance-theme-grid button{font-size:.85rem}.vp-appearance-colors{grid-template-columns:1fr 1fr}} @media(prefers-reduced-motion:reduce){.vp-appearance-drawer{transition:none!important}} /* ========================================================= v1.1.6 — correções observadas no teste em vídeo ========================================================= */ /* A imagem escolhida agora fica realmente visível. Na v1.1.4 o background opaco do body ficava acima da imagem. */ html.vp-has-bg-image body.vp-store-body{ background-color:var(--bg)!important; background-image: linear-gradient( rgba(0,0,0,var(--vp-appearance-overlay)), rgba(0,0,0,var(--vp-appearance-overlay)) ), var(--vp-appearance-bg-image)!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; background-attachment:fixed!important; } html.vp-has-bg-image body.vp-store-body::before, html.vp-has-bg-image body.vp-store-body::after{ display:none!important; } /* Páginas institucionais também recebem a imagem de fundo escolhida. */ html.vp-has-bg-image body:has(.vp-info-main){ background-color:var(--bg,var(--vp-bg))!important; background-image: linear-gradient( rgba(0,0,0,var(--vp-appearance-overlay)), rgba(0,0,0,var(--vp-appearance-overlay)) ), var(--vp-appearance-bg-image)!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; background-attachment:fixed!important; } /* Em página com imagem, superfícies ficam levemente translúcidas para o fundo aparecer. */ html.vp-has-bg-image .vp-store-header{ background:color-mix(in srgb,var(--surface) 90%,transparent)!important; backdrop-filter:blur(10px); } html.vp-has-bg-image .vp-store-card, html.vp-has-bg-image .vp-store-stats div, html.vp-has-bg-image .vp-store-donation, html.vp-has-bg-image .vp-store-footer{ background:color-mix(in srgb,var(--surface) 91%,transparent)!important; backdrop-filter:blur(7px); } /* Estado dos atalhos rápidos: nenhum check falso em tema avançado. */ .vp-store-appearance-menu [data-vp-theme-option] .vp-store-theme-check{ visibility:hidden; } .vp-store-appearance-menu [data-vp-theme-option].is-active .vp-store-theme-check, .vp-store-appearance-menu [data-vp-theme-option][aria-pressed="true"] .vp-store-theme-check{ visibility:visible; } /* Melhora leitura do painel com fontes grandes ou monoespaçadas. */ .vp-appearance-drawer{ font-size:16px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .vp-appearance-drawer button, .vp-appearance-drawer select, .vp-appearance-drawer input{ font-family:inherit; } .vp-appearance-drawer-head, .vp-appearance-drawer-foot{ flex-shrink:0; } /* A seleção de fonte/tamanho do site não deve deformar a interface do configurador. */ html[data-vp-size="large"] .vp-appearance-drawer, html[data-vp-size="xlarge"] .vp-appearance-drawer{ font-size:16px; } /* Pequeno refinamento para viewport baixa, como no vídeo em desktop. */ @media(max-height:720px) and (min-width:561px){ .vp-appearance-drawer-head{padding:13px 16px 10px} .vp-appearance-drawer-body{padding:12px 16px 18px} .vp-appearance-group{padding-bottom:13px;margin-bottom:13px} .vp-appearance-theme-grid button{min-height:36px} .vp-appearance-drawer-foot{padding:9px 16px} } /* ============================================================== VersaPlay v1.1.7: CORREÇÃO DE ESCALA E FORMATO DE TODO O SITE ============================================================== Os componentes existentes usam rem; mudar apenas font-size do body não alterava o texto dos cards, headings e botões. */ html[data-vp-size="small"] { font-size: 88% !important; } html[data-vp-size="medium"] { font-size: 100% !important; } html[data-vp-size="large"] { font-size: 112.5% !important; } html[data-vp-size="xlarge"] { font-size: 125% !important; } /* Mantém controles de Aparência utilizáveis com tamanho GG. */ .vp-appearance-drawer { font-size: 16px; } .vp-appearance-drawer .vp-appearance-theme-grid button, .vp-appearance-drawer .vp-appearance-segmented button { font-size: 14px; } .vp-appearance-drawer .vp-appearance-label { font-size: 12px; } .vp-appearance-drawer-head h2 { font-size: 20px; } .vp-appearance-drawer-head p { font-size: 13px; } .vp-appearance-drawer select,.vp-appearance-drawer input { font-size: 14px; } /* Cards e botões ganham raios separados: Pílula não vira um card oval. */ html[data-vp-shape="square"] { --vp-card-radius: 0px; --vp-btn-radius: 0px; } html[data-vp-shape="soft"] { --vp-card-radius: 8px; --vp-btn-radius: 7px; } html[data-vp-shape="rounded"] { --vp-card-radius: 18px; --vp-btn-radius: 12px; } html[data-vp-shape="pill"] { --vp-card-radius: 32px; --vp-btn-radius: 999px; } html[data-vp-shape] :is( .vp-store-card, .vp-store-donation, .vp-store-stats > div, .vp-store-appearance-menu, .vp-store-mobile-panel, .vp-info-card, .vp-info-hero, .vp-donation-card, .vp-store-empty ){ border-radius: var(--vp-card-radius) !important; } html[data-vp-shape] :is( .vp-store-open, .vp-store-btn, .vp-store-search, .vp-store-more, .vp-store-mobile-toggle, .vp-store-mobile-action, .vp-store-tabs a, .vp-store-donation-btn, .vp-appearance-theme-grid button, .vp-appearance-segmented button, .vp-appearance-secondary ){ border-radius: var(--vp-btn-radius) !important; } /* Distinções permanentes, visíveis tanto em desktop como no celular. */ html[data-vp-layout="minimalist"] :is( .vp-store-card, .vp-store-donation, .vp-store-stats > div, .vp-store-header, .vp-store-footer, .vp-info-card, .vp-info-hero ){ box-shadow: none !important; backdrop-filter: none !important; background-image: none !important; border-color: var(--line) !important; } html[data-vp-layout="minimalist"] .vp-store-card { border-width: 1px !important; background: var(--surface) !important; } html[data-vp-layout="minimalist"] :is(.vp-store-btn,.vp-store-open,.vp-store-donation-btn){ box-shadow: none !important; filter: none !important; } html[data-vp-layout="minimalist"] .vp-store-intro { background: transparent !important; box-shadow: none !important; } html[data-vp-layout="futuristic"] :is( .vp-store-card, .vp-store-donation, .vp-store-stats > div, .vp-info-card, .vp-info-hero ){ border-color: color-mix(in srgb,var(--blue) 48%,var(--line)) !important; background-image: linear-gradient(135deg,color-mix(in srgb,var(--blue) 9%,transparent),transparent 68%) !important; box-shadow: 0 0 0 1px color-mix(in srgb,var(--blue) 18%,transparent), 0 10px 28px color-mix(in srgb,var(--blue) 16%,transparent) !important; } html[data-vp-layout="futuristic"] :is(.vp-store-open,.vp-store-btn,.vp-store-donation-btn){ box-shadow: 0 0 12px color-mix(in srgb,var(--blue) 24%,transparent) !important; } html[data-vp-layout="futuristic"] .vp-store-intro { background-image: radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 62%) !important; } /* O configurador não perde legibilidade por causa do Estilo visual. */ html[data-vp-layout] .vp-appearance-drawer { background: var(--surface) !important; background-image:none !important; } .vp-appearance-current-summary { display:block; font:600 12px/1.5 Inter,system-ui,sans-serif; color:var(--muted); margin:10px 0 0; } /* Regras de exibição explícitas prevalecem sobre estilos antigos. */ #vp-store-appearance-menu[hidden],#vp-store-mobile-panel[hidden], #vp-appearance-backdrop[hidden] {display:none !important;} /* ========================================================= v1.1.8 — CONTROLES DE APARÊNCIA COM EFEITO EXPLÍCITO ========================================================= */ /* Tamanho: usa pixels na raiz para que todos os componentes em rem mudem. P=14px, M=16px, G=18px, GG=20px. */ html[data-vp-size="small"],html.vp-size-small{font-size:14px!important} html[data-vp-size="medium"],html.vp-size-medium{font-size:16px!important} html[data-vp-size="large"],html.vp-size-large{font-size:18px!important} html[data-vp-size="xlarge"],html.vp-size-xlarge{font-size:20px!important} /* O painel não cresce junto com a página; assim o usuário consegue usar GG no celular. */ html[class*="vp-size-"] .vp-appearance-drawer{font-size:16px!important} /* Formato — alvos reais da Home Store. */ html[data-vp-shape="square"],html.vp-shape-square{ --vp-card-radius:0px;--vp-btn-radius:0px;--vp-icon-radius:0px; } html[data-vp-shape="soft"],html.vp-shape-soft{ --vp-card-radius:8px;--vp-btn-radius:7px;--vp-icon-radius:7px; } html[data-vp-shape="rounded"],html.vp-shape-rounded{ --vp-card-radius:18px;--vp-btn-radius:12px;--vp-icon-radius:14px; } html[data-vp-shape="pill"],html.vp-shape-pill{ --vp-card-radius:34px;--vp-btn-radius:999px;--vp-icon-radius:28px; } html[class*="vp-shape-"] :is( .vp-store-card,.vp-store-blog-card,.vp-store-donation,.vp-store-stats>div, .vp-store-appearance-menu,.vp-store-mobile-panel,.vp-store-empty, .vp-info-card,.vp-info-hero,.vp-donation-card ), html[data-vp-shape] :is( .vp-store-card,.vp-store-blog-card,.vp-store-donation,.vp-store-stats>div, .vp-store-appearance-menu,.vp-store-mobile-panel,.vp-store-empty, .vp-info-card,.vp-info-hero,.vp-donation-card ){ border-radius:var(--vp-card-radius)!important; } html[class*="vp-shape-"] :is( .vp-store-open,.vp-store-btn,.vp-store-search,.vp-store-more, .vp-store-mobile-toggle,.vp-store-mobile-action,.vp-store-tabs a, .vp-store-donation-btn,.vp-store-search-clear ), html[data-vp-shape] :is( .vp-store-open,.vp-store-btn,.vp-store-search,.vp-store-more, .vp-store-mobile-toggle,.vp-store-mobile-action,.vp-store-tabs a, .vp-store-donation-btn,.vp-store-search-clear ){ border-radius:var(--vp-btn-radius)!important; } html[class*="vp-shape-"] .vp-store-app-icon, html[data-vp-shape] .vp-store-app-icon{ border-radius:var(--vp-icon-radius)!important; } /* Estilo Padrão: não adiciona efeito artificial além do layout normal. */ html[data-vp-layout="standard"] .vp-store-card, html.vp-layout-standard .vp-store-card{ outline:none!important; } /* Minimalista: visual plano e claramente diferente. */ html[data-vp-layout="minimalist"], html.vp-layout-minimalist{ --shadow:none!important; --vp-shadow:none!important; } html[data-vp-layout="minimalist"] :is( .vp-store-card,.vp-store-donation,.vp-store-stats>div,.vp-store-header, .vp-store-footer,.vp-info-card,.vp-info-hero,.vp-store-appearance-menu ), html.vp-layout-minimalist :is( .vp-store-card,.vp-store-donation,.vp-store-stats>div,.vp-store-header, .vp-store-footer,.vp-info-card,.vp-info-hero,.vp-store-appearance-menu ){ box-shadow:none!important; backdrop-filter:none!important; background-image:none!important; border:1px solid var(--line)!important; } html[data-vp-layout="minimalist"] :is(.vp-store-btn,.vp-store-open,.vp-store-donation-btn), html.vp-layout-minimalist :is(.vp-store-btn,.vp-store-open,.vp-store-donation-btn){ box-shadow:none!important; background-image:none!important; filter:none!important; } /* Futurista: brilho permanente (não depende de hover/touch). */ html[data-vp-layout="futuristic"] :is( .vp-store-card,.vp-store-donation,.vp-store-stats>div,.vp-info-card,.vp-info-hero ), html.vp-layout-futuristic :is( .vp-store-card,.vp-store-donation,.vp-store-stats>div,.vp-info-card,.vp-info-hero ){ border-color:color-mix(in srgb,var(--blue) 62%,var(--line))!important; background-image: linear-gradient(135deg,color-mix(in srgb,var(--blue) 14%,transparent),transparent 66%)!important; box-shadow: 0 0 0 1px color-mix(in srgb,var(--blue) 25%,transparent), 0 0 22px color-mix(in srgb,var(--blue) 16%,transparent), 0 16px 34px rgba(0,0,0,.12)!important; } html[data-vp-layout="futuristic"] :is(.vp-store-open,.vp-store-btn,.vp-store-donation-btn), html.vp-layout-futuristic :is(.vp-store-open,.vp-store-btn,.vp-store-donation-btn){ box-shadow:0 0 16px color-mix(in srgb,var(--blue) 38%,transparent)!important; } html[data-vp-layout="futuristic"] .vp-store-intro, html.vp-layout-futuristic .vp-store-intro{ background-image: radial-gradient(circle at 14% 0%,color-mix(in srgb,var(--blue) 23%,transparent),transparent 52%)!important; } /* Pré-visualização interna para o efeito ser visível enquanto o painel está aberto. */ .vp-appearance-preview{ border:1px solid var(--line); border-radius:var(--vp-card-radius,18px); padding:14px; background:var(--surface); margin-top:12px; } .vp-appearance-preview strong{display:block;margin-bottom:4px} .vp-appearance-preview p{margin:0 0 10px;color:var(--muted)} .vp-appearance-preview button{ border:0; border-radius:var(--vp-btn-radius,12px); background:var(--blue); color:#fff; padding:8px 14px; font-weight:800; } html[data-vp-layout="minimalist"] .vp-appearance-preview, html.vp-layout-minimalist .vp-appearance-preview{ box-shadow:none!important; background-image:none!important; } html[data-vp-layout="futuristic"] .vp-appearance-preview, html.vp-layout-futuristic .vp-appearance-preview{ border-color:color-mix(in srgb,var(--blue) 62%,var(--line))!important; background-image:linear-gradient(135deg,color-mix(in srgb,var(--blue) 15%,transparent),transparent 70%)!important; box-shadow:0 0 18px color-mix(in srgb,var(--blue) 22%,transparent)!important; } /* v1.1.9 - o efeito principal também é aplicado via style inline pelo JS. Este CSS mantém o fallback declarativo. */ .vp-appearance-current-summary{ margin:8px 0 0; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--soft); color:var(--text); font-size:12px; font-weight:800; } .vp-appearance-current-summary{display:block!important}.vp-appearance-preview{display:block!important;margin-top:10px} /* v1.2.2 — reforço de estado visual dos controles */ .vp-appearance-segmented button.is-active, .vp-appearance-theme-grid button.is-active{ outline:2px solid var(--blue)!important; outline-offset:1px; font-weight:900!important; } .vp-appearance-current-summary{ display:block!important; margin-top:10px!important; } /* v1.2.5 — isolamento absoluto das camadas de Aparência */ #vp-store-appearance-menu[hidden], #vp-store-mobile-panel[hidden], #vp-appearance-backdrop[hidden]{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #vp-appearance-drawer[aria-hidden="true"]{ visibility:hidden!important; pointer-events:none!important; transform:translateX(105%)!important; } #vp-appearance-drawer.is-open[aria-hidden="false"]{ visibility:visible!important; pointer-events:auto!important; transform:translateX(0)!important; } #vp-appearance-drawer[aria-hidden="true"] *, #vp-store-appearance-menu[hidden] *, #vp-store-mobile-panel[hidden] *{ pointer-events:none!important; } /* v1.2.6 — menus voltam a receber cliques quando ficam visíveis */ #vp-store-appearance-menu:not([hidden]), #vp-store-mobile-panel:not([hidden]){ visibility:visible!important; pointer-events:auto!important; } #vp-appearance-backdrop:not([hidden]){ visibility:visible!important; pointer-events:auto!important; }