Padrão visual: chips pill premium, sóbrios, animados no hover.
======================================================== */
.ptlx-selectors {
display: inline-flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.ptlx-selector-group {
display: inline-flex;
gap: 4px;
padding: 4px;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(0, 217, 255, 0.18);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 12px rgba(0,0,0,0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ptlx-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--postulax-muted);
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
user-select: none;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.18s ease,
box-shadow 0.25s ease;
}
.ptlx-chip .ptlx-chip-flag { font-size: 15px; line-height: 1; }
.ptlx-chip .ptlx-chip-sym { font-size: 12px; font-weight: 700; color: var(--postulax-cyan); letter-spacing: 0; }
.ptlx-chip .ptlx-chip-code { font-size: 10px; color: inherit; text-transform: uppercase; letter-spacing: 0.06em; }
.ptlx-chip:hover {
color: var(--postulax-text);
background: rgba(0, 217, 255, 0.08);
border-color: rgba(0, 217, 255, 0.25);
transform: translateY(-1px);
}
.ptlx-chip:active { transform: translateY(0); }
.ptlx-chip:focus-visible {
outline: 2px solid var(--postulax-gold);
outline-offset: 2px;
}
.ptlx-chip.is-active {
background: linear-gradient(180deg, rgba(0,217,255,0.22), rgba(0,217,255,0.10));
border-color: rgba(0, 217, 255, 0.55);
color: var(--postulax-text);
box-shadow: 0 0 0 1px rgba(0,217,255,0.15) inset, 0 2px 10px rgba(0,217,255,0.18);
}
.ptlx-chip.is-active .ptlx-chip-sym { color: var(--postulax-cyan); }
@media (max-width: 640px) {
.ptlx-selectors { flex-direction: column; align-items: stretch; gap: 8px; }
.ptlx-selector-group { justify-content: center; }
}
/* ========================================================
5. RODAPÉ PREMIUM POSTULAX (substitui o footprint branco)
Uso:
======================================================== */
.ptlx-footer {
margin-top: 48px;
background: linear-gradient(180deg, #0B1622 0%, #0D1B2A 60%, #0A1420 100%);
border-top: 1px solid rgba(0, 217, 255, 0.14);
box-shadow: 0 -1px 0 rgba(255,255,255,0.03) inset;
padding: 22px 16px 26px;
color: var(--postulax-muted);
}
.ptlx-footer-inner {
max-width: 1100px; margin: 0 auto;
display: flex; align-items: center; justify-content: center;
gap: 14px; text-align: center; flex-wrap: wrap;
}
.ptlx-footer-owl { color: var(--postulax-cyan); opacity: 0.65; }
.ptlx-footer-brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.35; }
.ptlx-footer-title {
font-size: 13px; color: var(--postulax-text);
letter-spacing: 0.06em;
}
.ptlx-footer-title b { color: var(--postulax-cyan); letter-spacing: 0.14em; font-weight: 800; }
.ptlx-footer-sub {
font-size: 10.5px; color: var(--postulax-dim);
letter-spacing: 0.04em;
}
@media (max-width: 520px) {
.ptlx-footer-brand { align-items: center; }
.ptlx-footer-inner { flex-direction: column; gap: 8px; }
}
/* ========================================================
6. CORUJA — marca d'água dinâmica (free / premium / pro)
Uso:
Posiciona-se absoluto no canto inferior direito do body/container.
Cor muda conforme o plano (ciano padrão, dourado Premium, esmeralda Pro).
======================================================== */
.ptlx-owl-watermark {
position: fixed;
right: 14px; bottom: 14px;
z-index: 5;
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
opacity: 0.22;
transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ptlx-owl-watermark .postulax-owl { width: 22px; height: 22px; color: currentColor; opacity: 1; }
.ptlx-owl-watermark[data-plan="free"] { color: var(--postulax-muted); opacity: 0.18; }
.ptlx-owl-watermark[data-plan="premium"] { color: var(--postulax-gold); opacity: 0.55; }
.ptlx-owl-watermark[data-plan="pro"] { color: var(--postulax-good); opacity: 0.65; }
.ptlx-owl-watermark[data-plan="premium"]:hover,
.ptlx-owl-watermark[data-plan="pro"]:hover { transform: scale(1.08); opacity: 0.8; }
@media print {
.ptlx-owl-watermark { opacity: 0.25 !important; }
}
@media (max-width: 520px) {
.ptlx-owl-watermark { right: 10px; bottom: 10px; width: 22px; height: 22px; }
.ptlx-owl-watermark .postulax-owl { width: 18px; height: 18px; }
}
/* =========================================================
7) Dropdown GLOBAL de idioma — PT / EN
Montado por postulax-lang.js em #ptlx-lang-drop (inline no header).
Default: inline no fluxo da nav (antes do .nav-cta).
Páginas legadas ainda podem posicionar como "fixed" sobrescrevendo.
========================================================= */
.ptlx-lang { position: relative; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: inline-flex; }
.ptlx-lang-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: #CBD5E1;
font-size: 12px; font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
line-height: 1;
}
.ptlx-lang-text { font-weight: 700; }
.ptlx-lang-btn:hover {
border-color: rgba(0, 217, 255, 0.35);
color: #F8FAFC;
background: rgba(0, 217, 255, 0.06);
}
.ptlx-lang-btn:focus-visible {
outline: none;
border-color: rgba(0, 217, 255, 0.55);
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.14);
}
.ptlx-lang-globe { font-size: 12px; opacity: 0.85; } /* legado — ainda funciona em páginas velhas */
.ptlx-lang-caret {
color: #64748B; font-size: 10px;
transition: transform 0.22s ease;
}
.ptlx-lang[data-state="open"] .ptlx-lang-caret { transform: rotate(180deg); color: #00D9FF; }
.ptlx-lang[data-state="open"] .ptlx-lang-btn { border-color: rgba(0, 217, 255, 0.45); color: #F8FAFC; }
.ptlx-lang-menu {
position: absolute; top: calc(100% + 8px); right: 0;
min-width: 210px;
margin: 0; padding: 6px;
list-style: none;
background: linear-gradient(180deg, #0D1B2A 0%, #0A1420 100%);
border: 1px solid rgba(0, 217, 255, 0.2);
border-radius: 12px;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
opacity: 0; transform: translateY(-6px) scale(0.98);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
z-index: 90;
}
.ptlx-lang[data-state="open"] .ptlx-lang-menu {
opacity: 1; transform: translateY(0) scale(1);
pointer-events: auto;
}
.ptlx-lang-menu li {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
color: #CBD5E1;
border-radius: 8px;
cursor: pointer;
font-size: 13px; font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.ptlx-lang-menu li:hover { background: rgba(0, 217, 255, 0.08); color: #F8FAFC; }
.ptlx-lang-menu li.is-active {
background: rgba(0, 217, 255, 0.12);
color: #00D9FF;
font-weight: 600;
}
.ptlx-lang-menu li .ptlx-lang-flag { font-size: 16px; }
.ptlx-lang-menu li .ptlx-lang-label { flex: 1; }
.ptlx-lang-menu li .ptlx-lang-check { color: #00D9FF; font-weight: 700; font-size: 12px; }
@media (max-width: 520px) {
.ptlx-lang-btn { padding: 5px 9px; font-size: 11px; }
/* Em mobile o menu é fixado e ocupa as bordas da tela — nunca vaza */
.ptlx-lang-menu {
position: fixed;
top: 64px; /* logo abaixo do nav (altura do nav) */
left: 12px;
right: 12px;
min-width: 0;
max-width: none;
width: auto;
transform-origin: top right;
}
}
/* =========================================================
8) Modal inicial de seleção de idioma (bloqueante)
Montado por postulax-lang.js na primeira visita.
========================================================= */
html.ptlx-lang-locked { overflow: hidden; }
html.ptlx-lang-locked body { overflow: hidden; }
.ptlx-lang-modal {
position: fixed; inset: 0; z-index: 9999;
background: radial-gradient(ellipse at center, rgba(13, 27, 42, 0.94), rgba(5, 12, 22, 0.98));
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: ptlx-lang-modal-in 0.28s ease-out;
}
.ptlx-lang-modal.is-closing { animation: ptlx-lang-modal-out 0.22s ease-in forwards; }
@keyframes ptlx-lang-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptlx-lang-modal-out { from { opacity: 1; } to { opacity: 0; } }
.ptlx-lang-modal-panel {
width: 100%; max-width: 460px;
background: linear-gradient(180deg, #111E2E 0%, #0A1420 100%);
border: 1px solid rgba(0, 217, 255, 0.22);
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
padding: 32px 28px 22px;
text-align: center;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
animation: ptlx-lang-panel-in 0.34s cubic-bezier(.2,.9,.3,1);
}
@keyframes ptlx-lang-panel-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ptlx-lang-modal-owl {
width: 72px; height: 72px; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
}
.ptlx-lang-modal-owl img {
width: 56px; height: 56px;
display: block;
user-select: none; pointer-events: none;
}
.ptlx-lang-modal-title {
font-size: 20px; font-weight: 800; color: var(--postulax-text);
letter-spacing: 0.02em; line-height: 1.35; margin: 0 0 22px;
}
.ptlx-lang-modal-title span {
display: block; font-size: 13px; font-weight: 500; color: var(--postulax-muted);
letter-spacing: 0.03em; margin-top: 4px;
}
.ptlx-lang-modal-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 0 0 18px;
}
@media (max-width: 480px) {
.ptlx-lang-modal-grid { grid-template-columns: 1fr; }
}
.ptlx-lang-modal-opt {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 18px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: var(--postulax-text);
cursor: pointer;
transition: border-color 0.22s, background 0.22s, transform 0.18s;
font-family: inherit;
}
.ptlx-lang-modal-opt:hover {
border-color: rgba(0, 217, 255, 0.45);
background: rgba(0, 217, 255, 0.06);
transform: translateY(-2px);
}
.ptlx-lang-modal-opt:focus-visible {
outline: 2px solid var(--postulax-gold); outline-offset: 2px;
}
.ptlx-lang-modal-flag { font-size: 30px; line-height: 1; }
.ptlx-lang-modal-name { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.ptlx-lang-modal-sub { font-size: 11px; color: var(--postulax-muted); font-weight: 500; letter-spacing: 0.02em; }
.ptlx-lang-modal-foot {
font-size: 10px; color: var(--postulax-dim);
letter-spacing: 0.16em; text-transform: uppercase;
margin-top: 6px; opacity: 0.7;
}
/* =========================================================
9) Dropdown LOCAL de moeda — premium, com setinha
Montado por postulax-currency.js em #ptlx-currency-drop.
Exclusivo das ferramentas.
========================================================= */
.ptlx-curr {
position: relative; display: inline-flex;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ptlx-curr-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 10px;
background: linear-gradient(180deg, rgba(255, 184, 0, 0.10), rgba(255, 184, 0, 0.04));
border: 1px solid rgba(255, 184, 0, 0.35);
border-radius: 8px;
color: var(--postulax-gold);
font-size: 12px; font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
line-height: 1;
font-family: inherit;
}
.ptlx-curr-btn:hover {
border-color: rgba(255, 184, 0, 0.65);
background: linear-gradient(180deg, rgba(255, 184, 0, 0.18), rgba(255, 184, 0, 0.08));
color: #FFD673;
box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.12);
}
.ptlx-curr-btn:focus-visible {
outline: none;
border-color: rgba(255, 184, 0, 0.75);
box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18);
}
.ptlx-curr-code { font-weight: 800; }
.ptlx-curr-caret {
color: var(--postulax-gold); font-size: 10px;
transition: transform 0.22s ease;
opacity: 0.85;
}
.ptlx-curr[data-state="open"] .ptlx-curr-caret { transform: rotate(180deg); opacity: 1; }
.ptlx-curr[data-state="open"] .ptlx-curr-btn {
border-color: rgba(255, 184, 0, 0.75);
background: linear-gradient(180deg, rgba(255, 184, 0, 0.22), rgba(255, 184, 0, 0.08));
color: #FFD673;
}
.ptlx-curr-menu {
position: absolute; top: calc(100% + 8px); right: 0;
min-width: 220px;
margin: 0; padding: 6px;
list-style: none;
background: linear-gradient(180deg, #0D1B2A 0%, #0A1420 100%);
border: 1px solid rgba(255, 184, 0, 0.28);
border-radius: 12px;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
opacity: 0; transform: translateY(-6px) scale(0.98);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
z-index: 90;
}
.ptlx-curr[data-state="open"] .ptlx-curr-menu {
opacity: 1; transform: translateY(0) scale(1);
pointer-events: auto;
}
.ptlx-curr-menu li {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
color: #CBD5E1;
border-radius: 8px;
cursor: pointer;
font-size: 12.5px; font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.ptlx-curr-menu li:hover { background: rgba(255, 184, 0, 0.10); color: var(--postulax-text); }
.ptlx-curr-menu li.is-active {
background: rgba(255, 184, 0, 0.14);
color: var(--postulax-gold);
font-weight: 700;
}
.ptlx-curr-menu li .ptlx-curr-sym {
font-size: 13px; font-weight: 800; color: var(--postulax-gold);
min-width: 28px; text-align: left; letter-spacing: 0;
}
.ptlx-curr-menu li .ptlx-curr-info { display: flex; flex-direction: column; flex: 1; }
.ptlx-curr-menu li .ptlx-curr-name { font-weight: 700; letter-spacing: 0.04em; }
.ptlx-curr-menu li .ptlx-curr-label { font-size: 10.5px; color: var(--postulax-muted); letter-spacing: 0.02em; }
.ptlx-curr-menu li .ptlx-curr-check { color: var(--postulax-gold); font-weight: 700; font-size: 12px; }
@media (max-width: 520px) {
.ptlx-curr-btn { padding: 5px 9px; font-size: 11px; }
/* Mesma correção do lang-menu: em mobile, fixar nas bordas da tela */
.ptlx-curr-menu {
position: fixed;
top: 64px;
left: 12px;
right: 12px;
min-width: 0;
max-width: none;
width: auto;
transform-origin: top right;
}
}
/* =========================================================
10) CORUJA POSTULAX — sistema de marca em 4 contextos
Princípio: menos é mais. Aplicar APENAS em:
1) Header (.owl-logo--silver)
2) Hero watermark (.owl-logo--watermark)
3) Card Pro (.owl-logo--pro)
4) Card Premium / lock badge (.owl-logo--premium / .premium-lock-badge)
========================================================= */
:root {
--owl-glow-cyan: rgba(0, 217, 255, 0.12);
--owl-glow-pro: rgba(0, 217, 255, 0.14);
--owl-glow-premium: rgba(255, 184, 0, 0.16);
}
/* Container base — SVGs oficiais usam viewBox 754×662 (aspect ~1.14:1).
Glow já vem embutido em cada SVG via
; CSS apenas dimensiona. */
.owl-logo,
.owl-logo--silver,
.owl-logo--pro,
.owl-logo--premium,
.owl-logo--watermark {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
user-select: none;
pointer-events: none;
height: auto; /* SVG mantém aspect ratio */
}
/* HEADER — coruja cyan-silver oficial, ao lado de POSTULAX
Tamanho proporcional à altura visual da wordmark (mais discreta).
Mobile: encolhe para preservar espaço dos botões nav. */
.owl-logo--silver {
width: 22px;
margin-right: 2px;
}
@media (max-width: 900px) { .owl-logo--silver { width: 20px; } }
@media (max-width: 480px) { .owl-logo--silver { width: 18px; margin-right: 0; } }
/* === HEADER UNIVERSAL POSTULAX ===
Padroniza .nav-logo, .nav-hamburger, .nav-back-mobile em TODAS as páginas.
Usa !important com moderação para sobrescrever declarações inline antigas.
Pattern HTML esperado:
*/
.nav-logo {
font-size: 0.95rem !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
}
@media (max-width: 480px) {
.nav-logo { font-size: 0.9rem !important; gap: 8px !important; letter-spacing: 0.12em !important; }
}
/* Botões de mobile do nav (hamburger + back) — escondidos em desktop. */
.nav-hamburger {
display: none;
background: transparent; border: none; cursor: pointer;
width: 40px; height: 40px;
align-items: center; justify-content: center; position: relative;
color: #F4F7FB;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: #F4F7FB; position: relative; }
.nav-hamburger span::before, .nav-hamburger span::after {
content: ""; position: absolute; left: 0; width: 100%; height: 2px;
background: #F4F7FB; transition: transform 0.25s;
}
.nav-hamburger span::before { top: -7px; }
.nav-hamburger span::after { top: 7px; }
.nav-hamburger.open span { background: transparent; }
.nav-hamburger.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span::after { transform: translateY(-7px) rotate(-45deg); }
.nav-back-mobile {
display: none;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
color: #A8B6CC;
padding: 0 12px; height: 36px; border-radius: 8px;
font-weight: 700; align-items: center; justify-content: center;
text-decoration: none;
}
@media (max-width: 900px) {
nav.site-nav, body > nav { padding: 0 1rem !important; }
.nav-hamburger { display: inline-flex; }
.nav-back-mobile { display: inline-flex; margin-left: auto; margin-right: 10px; }
.nav-links {
position: fixed !important;
top: 64px; left: 0; right: 0;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
padding: 8px 0 !important;
background: rgba(15,27,45,0.98);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.06);
transform: translateY(-8px); opacity: 0; pointer-events: none;
transition: opacity 0.22s, transform 0.22s;
}
.nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-links li { width: 100%; padding: 0 1.5rem; list-style: none; }
.nav-links li a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-links li:last-child a { border-bottom: none; }
}
/* HERO — marca d'água INSTITUCIONAL: coruja centralizada atrás do texto.
Estilo Stripe / Morgan Stanley — quase invisível, presente como assinatura.
z-index negativo para que TODO o conteúdo do hero passe por cima. */
.owl-logo--watermark {
position: absolute;
top: 50%;
left: 50%;
width: clamp(380px, 70vw, 880px);
opacity: 0.025;
pointer-events: none;
z-index: 0;
transform: translate(-50%, -50%);
filter: blur(0.4px) saturate(0.8);
user-select: none;
}
/* Garante que o conteúdo do hero fique acima da marca d'água */
.hero > *:not(.owl-logo--watermark) { position: relative; z-index: 1; }
@media (max-width: 900px) {
.owl-logo--watermark { opacity: 0.022; width: clamp(280px, 80vw, 560px); }
}
@media (max-width: 480px) {
.owl-logo--watermark { opacity: 0.02; width: clamp(220px, 90vw, 420px); }
}
/* CARD PRO — selo silver puro */
.owl-logo--pro {
width: 32px;
}
/* CARD PREMIUM — selo dourado */
.owl-logo--premium {
width: 32px;
}
/* PREMIUM LOCK BADGE — pílula com coruja para áreas bloqueadas premium */
.premium-lock-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255, 184, 0, 0.08);
border: 1px solid rgba(255, 184, 0, 0.18);
border-radius: 999px;
color: #D4A63A;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
white-space: nowrap;
}
.premium-lock-badge .owl-logo--premium {
width: 18px; height: 18px;
filter: none; /* dentro do badge não duplica glow */
}
.premium-lock-badge--lg { padding: 10px 18px; font-size: 13px; }
.premium-lock-badge--lg .owl-logo--premium { width: 22px; height: 22px; }
/* Hero wrapper — garantir que watermark tenha referência posicional */
.hero-wrap, .hero, .page-head {
position: relative;
/* watermark posiciona-se absoluto dentro */
}