/* ETZ Soft — barra flutuante de idioma/moeda/tema (desktop, surge ao rolar). Autossuficiente: paleta própria por data-theme (as CSS vars do DC não chegam aqui, pois a barra vive no , fora do escopo do componente). */ .etz-qbar{ --qb-surface:#11161f; --qb-surface2:#171d28; --qb-border:rgba(255,255,255,.12); --qb-text:#f3f1ea; --qb-text2:#c4ccd6; --qb-muted:#828a96; --qb-gold:#e6b84c; --qb-goldgrad:linear-gradient(180deg,#F0C766,#D49E2C); --qb-goldsoft:rgba(230,184,76,.16); --qb-hover:rgba(255,255,255,.05); position:fixed; top:104px; right:18px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:10px; opacity:0; transform:translateX(14px); pointer-events:none; transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1); font-family:'Chakra Petch',sans-serif; } .etz-qbar[data-theme="light"]{ --qb-surface:#fffdf8; --qb-surface2:#f6f1e7; --qb-border:rgba(0,0,0,.12); --qb-text:#1b1d23; --qb-text2:#454c5a; --qb-muted:#8a8473; --qb-gold:#b9831c; --qb-goldsoft:rgba(212,158,44,.16); --qb-hover:rgba(0,0,0,.04); } .etz-qbar.is-show{ opacity:1; transform:none; pointer-events:auto; } .etz-qbar-card, .etz-qbar-theme{ background:var(--qb-surface); border:1px solid var(--qb-border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.30); } /* gatilho idioma/moeda */ .etz-qbar-locale{ display:flex; align-items:center; gap:8px; cursor:pointer; background:transparent; border:none; border-radius:12px; padding:9px 12px; color:var(--qb-text2); font:700 12px 'Chakra Petch',sans-serif; letter-spacing:.03em; transition:color .15s ease; } .etz-qbar-locale:hover{ color:var(--qb-gold); } .etz-qbar-flag{ width:22px; height:15px; border-radius:2px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.12); overflow:hidden; flex:0 0 auto; } .etz-qbar-flag svg{ display:block; width:100%; height:100%; } .etz-qbar-cur{ font-variant-numeric:tabular-nums; color:var(--qb-text); } .etz-qbar-caret{ font-size:9px; color:var(--qb-muted); transition:transform .2s ease; } .etz-qbar.is-open .etz-qbar-caret{ transform:rotate(180deg); } /* popup (dropdown) */ .etz-qbar-pop{ position:absolute; top:calc(100% + 8px); right:0; min-width:210px; background:var(--qb-surface); border:1px solid var(--qb-border); border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.40); padding:7px; opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .etz-qbar.is-open .etz-qbar-pop{ opacity:1; transform:none; pointer-events:auto; } .etz-qbar-sec{ font:700 9px 'Chakra Petch',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--qb-muted); padding:7px 9px 4px; } .etz-qbar-lang{ display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; background:transparent; border:none; border-radius:7px; padding:8px 9px; color:var(--qb-text); font:600 12.5px Manrope,sans-serif; text-align:left; transition:background .12s ease; } .etz-qbar-lang:hover{ background:var(--qb-hover); } .etz-qbar-lang[aria-current="true"]{ background:var(--qb-goldsoft); } .etz-qbar-div{ height:1px; background:var(--qb-border); margin:6px 4px; } .etz-qbar-curs{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:2px 5px 5px; } .etz-qbar-cur-btn{ cursor:pointer; border:1px solid var(--qb-border); border-radius:7px; padding:7px 0; background:transparent; color:var(--qb-muted); font:700 11px 'Chakra Petch',sans-serif; transition:all .12s ease; } .etz-qbar-cur-btn:hover{ color:var(--qb-text); border-color:var(--qb-gold); } .etz-qbar-cur-btn[aria-current="true"]{ background:var(--qb-goldgrad); color:#1a1305; border-color:transparent; } /* toggle de tema */ .etz-qbar-theme{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--qb-text2); font-size:17px; line-height:1; transition:color .15s ease, transform .2s ease; } .etz-qbar-theme:hover{ color:var(--qb-gold); transform:translateY(-1px); } @media (max-width:900px){ .etz-qbar{ display:none !important; } } @media (prefers-reduced-motion:reduce){ .etz-qbar, .etz-qbar-pop, .etz-qbar-caret, .etz-qbar-theme{ transition:none !important; } }