/* ============================================================================ LEX CENTRAL — site.css (marketing + auth) ---------------------------------------------------------------------------- Estilos das páginas públicas: landing, preços, cadastro, login, recuperar senha e convite. Lê SOMENTE tokens do design system (tokens.css) — esmeralda (--em-*/--accent), petróleo (--pt-*), tipografia (--font-*) etc. COMO USAR 1) copie para web/static/lex-central-site.css 2) em base.html, no , depois de style.css: 3) DIRECAO VISUAL: padrão "editorial" (minimalista). Para "moderno" (esmeralda viva), no : data-dir="moderno" 4) TEMA claro/escuro: continua pelo seu data-theme atual. ============================================================================ */ /* ====================== Home / landing ====================== */ *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } a{ color: inherit; text-decoration: none; } .lp-wrap{ width: min(1140px, 92vw); margin: 0 auto; } .lp-display{ font-family: var(--font-display); letter-spacing: var(--ls-tight); line-height: 1.04; } .lp-mono{ font-family: var(--font-mono); } .lp-eyebrow{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin: 0; display:inline-flex; align-items:center; gap: 10px; } .lp-eyebrow::before{ content:""; width: 22px; height:1px; background: var(--accent-text); } .lp-sym{ display:block; } /* ---------- buttons ---------- */ .lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; height: 50px; padding: 0 24px; border-radius: var(--r-md); cursor:pointer; border: 1px solid transparent; transition: all var(--dur-2) var(--ease); white-space:nowrap; } .lp-btn-primary{ background: var(--accent); color: var(--on-accent); } .lp-btn-primary:hover{ background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); } .lp-btn-ghost{ background: transparent; color: var(--text); border-color: var(--border-strong); } .lp-btn-ghost:hover{ border-color: var(--accent); color: var(--accent-text); } .lp-btn-sm{ height: 42px; padding: 0 18px; font-size: 14px; } /* ---------- NAV ---------- */ .lp-nav{ position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .lp-nav-in{ display:flex; align-items:center; gap: 22px; height: 70px; } .lp-brand{ display:flex; align-items:center; gap: 11px; } .lp-brand .bx{ width: 38px; height:38px; border-radius: 10px; background: var(--accent); display:grid; place-items:center; flex:none; } .lp-brand .bx .lp-sym{ width: 60%; height:60%; color:#fff; } .lp-brand b{ font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; } .lp-brand b i{ font-style: normal; font-weight: 500; color: var(--text-muted); } .lp-nav-links{ display:flex; gap: 26px; margin-left: 14px; } .lp-nav-links a{ font-size: 14.5px; color: var(--text-2); font-weight: 500; } .lp-nav-links a:hover{ color: var(--accent-text); } .lp-nav-cta{ margin-left:auto; display:flex; align-items:center; gap: 14px; } .lp-nav-cta .entrar{ font-size: 14.5px; font-weight: 600; color: var(--text-2); } .lp-nav-cta .entrar:hover{ color: var(--accent-text); } /* ---------- sections ---------- */ section{ padding: clamp(64px, 9vw, 120px) 0; } .lp-sec-head{ max-width: 60ch; } .lp-sec-head h2{ font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; line-height: 1.08; margin: 16px 0 0; } .lp-sec-head p.sub{ color: var(--text-muted); font-size: 18px; margin: 16px 0 0; } /* ---------- HERO ---------- */ .lp-hero{ position: relative; padding-top: clamp(56px, 7vw, 90px); padding-bottom: 0; overflow: clip; } .lp-hero-glow{ display:none; } .lp-hero h1{ font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 6.2vw, 70px); letter-spacing: -.03em; line-height: 1.0; margin: 22px 0 0; max-width: 16ch; } .lp-hero h1 .em{ color: var(--accent-text); } .lp-hero .sub{ font-size: clamp(17px, 2vw, 21px); color: var(--text-2); max-width: 52ch; margin: 24px 0 0; } .lp-hero-cta{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 34px; } .lp-hero-trust{ display:flex; flex-wrap:wrap; gap: 8px 20px; margin-top: 22px; color: var(--text-muted); font-size: 13.5px; } .lp-hero-trust span{ display:inline-flex; align-items:center; gap:7px; } .lp-hero-trust .dot{ width:5px; height:5px; border-radius:50%; background: var(--accent); } /* product frame */ .lp-shot{ margin-top: clamp(48px, 6vw, 80px); position: relative; } .lp-shot-frame{ border: 1px solid var(--border-strong); border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--sh-lg); background: var(--surface); } .lp-shot-bar{ height: 42px; display:flex; align-items:center; gap: 7px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .lp-shot-bar i{ width: 11px; height:11px; border-radius:50%; background: var(--border-strong); display:block; } .lp-shot-bar .addr{ margin-left: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } .lp-shot image-slot{ display:block; width: 100%; height: clamp(280px, 42vw, 560px); } /* ---------- CONTRAST ---------- */ .lp-contrast-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .lp-ccard{ border-radius: var(--r-xl); padding: 34px; border: 1px solid var(--border); background: var(--surface); } .lp-ccard h3{ font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 22px; color: var(--text-muted); } .lp-ccard.bad h3{ color: var(--text-faint); } .lp-clist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 16px; } .lp-clist li{ display:flex; gap: 13px; font-size: 16px; line-height: 1.45; } .lp-clist .mk{ flex:none; width: 22px; height: 22px; border-radius: 50%; display:grid; place-items:center; margin-top: 1px; } .lp-ccard.bad .mk{ background: var(--surface-3); color: var(--text-faint); } .lp-ccard.bad li{ color: var(--text-muted); } .lp-ccard.good .mk{ background: var(--accent-soft); color: var(--accent-text); } .lp-ccard.good li{ color: var(--text); } .lp-ccard .mk svg{ width: 13px; height:13px; } /* ---------- HOW (steps) ---------- */ .lp-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; } .lp-step{ position: relative; } .lp-step .num{ font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); font-weight: 600; letter-spacing: .1em; } .lp-step .ico{ width: 52px; height: 52px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); display:grid; place-items:center; margin: 18px 0 18px; } .lp-step .ico svg{ width: 26px; height: 26px; } .lp-step h3{ font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; } .lp-step p{ color: var(--text-muted); font-size: 15.5px; margin: 0; } /* ---------- REASSURANCE band (petrol) ---------- */ .lp-band{ background: var(--surface-ink); color: #fff; position: relative; overflow: clip; } .lp-band .lp-eyebrow{ color: var(--em-400); } .lp-band .lp-eyebrow::before{ background: var(--em-400); } .lp-band-glow{ position:absolute; inset: -40% 60% auto -10%; height: 150%; width: 60%; background: radial-gradient(circle, oklch(0.566 0.128 159 / .38), transparent 60%); filter: blur(10px); pointer-events:none; } .lp-band-in{ position: relative; z-index: 1; text-align: center; display:flex; flex-direction:column; align-items:center; } .lp-band h2{ font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 56px); letter-spacing: -.025em; line-height: 1.05; margin: 18px 0 0; max-width: 18ch; } .lp-band h2 .em{ color: var(--em-400); } .lp-band p{ color: rgba(255,255,255,.74); font-size: 18px; margin: 20px 0 0; max-width: 46ch; } .lp-band .lp-hero-cta{ justify-content:center; } .lp-band .lp-btn-ghost{ color:#fff; border-color: rgba(255,255,255,.28); } .lp-band .lp-btn-ghost:hover{ border-color:#fff; color:#fff; } .lp-band .lp-hero-trust{ color: rgba(255,255,255,.6); justify-content:center; } /* ---------- FAQ ---------- */ .lp-faq{ max-width: 800px; margin: 48px auto 0; display:flex; flex-direction:column; } .lp-faq details{ border-top: 1px solid var(--border); padding: 4px 0; } .lp-faq details:last-child{ border-bottom: 1px solid var(--border); } .lp-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap: 16px; padding: 24px 4px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .lp-faq summary::-webkit-details-marker{ display:none; } .lp-faq summary .plus{ margin-left:auto; flex:none; width: 26px; height:26px; position: relative; transition: transform var(--dur-3) var(--ease); } .lp-faq summary .plus::before, .lp-faq summary .plus::after{ content:""; position:absolute; background: var(--accent-text); border-radius: 2px; } .lp-faq summary .plus::before{ inset: 11px 2px; height: 2px; } .lp-faq summary .plus::after{ inset: 2px 11px; width: 2px; transition: opacity var(--dur-2) var(--ease); } .lp-faq details[open] summary .plus::after{ opacity: 0; } .lp-faq .ans{ padding: 0 42px 26px 4px; color: var(--text-muted); font-size: 16px; line-height: 1.6; } /* ---------- PRICING teaser ---------- */ .lp-price{ text-align:center; } .lp-price-figure{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(56px, 10vw, 104px); line-height: 1; margin: 26px 0 0; } .lp-price-figure small{ font-size: .32em; font-weight: 600; color: var(--text-muted); letter-spacing: 0; } .lp-price-figure .cur{ font-size: .42em; vertical-align: super; color: var(--text-2); } .lp-price p.note{ color: var(--text-muted); font-size: 17px; margin: 22px auto 0; max-width: 40ch; } .lp-price .lp-hero-cta{ justify-content:center; margin-top: 30px; } /* ---------- FOOTER ---------- */ .lp-foot{ border-top: 1px solid var(--border); padding: 56px 0 64px; } .lp-foot-top{ display:flex; flex-wrap:wrap; gap: 28px; align-items:center; } .lp-foot-links{ margin-left:auto; display:flex; flex-wrap:wrap; gap: 8px 24px; } .lp-foot-links a{ font-size: 14px; color: var(--text-muted); } .lp-foot-links a:hover{ color: var(--accent-text); } .lp-foot .disc{ margin-top: 34px; padding-top: 22px; border-top: 1px dashed var(--border); color: var(--text-faint); font-size: 13px; max-width: 80ch; } /* ============================================================ DIREÇÃO "MODERNO" — esmeralda viva, blocos preenchidos, brilho ============================================================ */ [data-dir="moderno"] .lp-hero-glow{ display:block; position:absolute; inset: -30% -10% auto 30%; height: 120%; width: 70%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); pointer-events:none; z-index:0; } [data-dir="moderno"] .lp-hero .lp-wrap{ position:relative; z-index:1; } [data-dir="moderno"] .lp-eyebrow{ background: var(--accent-soft); color: var(--accent-text); padding: 6px 12px; border-radius: var(--r-full); } [data-dir="moderno"] .lp-eyebrow::before{ display:none; } [data-dir="moderno"] .lp-shot-frame{ box-shadow: 0 30px 70px -30px var(--accent), var(--sh-lg); } [data-dir="moderno"] .lp-shot::before{ content:""; position:absolute; inset: 30px 8% -20px; background: radial-gradient(ellipse at center top, var(--accent-soft), transparent 70%); z-index:-1; } [data-dir="moderno"] .lp-ccard.good{ background: var(--accent-soft); border-color: var(--accent-border); } [data-dir="moderno"] .lp-step .ico{ background: var(--accent); color: var(--on-accent); } [data-dir="moderno"] .lp-btn-primary{ box-shadow: 0 10px 26px -10px var(--accent); } [data-dir="moderno"] .lp-price-figure{ color: var(--accent-text); } /* reveal animation — only when enabled (motion ok) */ /* responsive */ @media (max-width: 880px){ .lp-nav-links{ display:none; } .lp-contrast-grid{ grid-template-columns: 1fr; } .lp-steps{ grid-template-columns: 1fr; gap: 32px; } } /* ====================== Preços ====================== */ *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } a{ color: inherit; text-decoration: none; } .lp-wrap{ width: min(1140px, 92vw); margin: 0 auto; } .lp-eyebrow{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin: 0; display:inline-flex; align-items:center; gap: 10px; } .lp-eyebrow::before{ content:""; width: 22px; height:1px; background: var(--accent-text); } .lp-sym{ display:block; } .lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; height: 50px; padding: 0 24px; border-radius: var(--r-md); cursor:pointer; border: 1px solid transparent; transition: all var(--dur-2) var(--ease); white-space:nowrap; width:100%; } .lp-btn-primary{ background: var(--accent); color: var(--on-accent); } .lp-btn-primary:hover{ background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); } .lp-btn-ghost{ background: transparent; color: var(--text); border-color: var(--border-strong); } .lp-btn-ghost:hover{ border-color: var(--accent); color: var(--accent-text); } .lp-btn-sm{ height: 42px; padding: 0 18px; font-size: 14px; width:auto; } /* NAV */ .lp-nav{ position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .lp-nav-in{ display:flex; align-items:center; gap: 22px; height: 70px; } .lp-brand{ display:flex; align-items:center; gap: 11px; } .lp-brand .bx{ width: 38px; height:38px; border-radius: 10px; background: var(--accent); display:grid; place-items:center; flex:none; } .lp-brand .bx .lp-sym{ width: 60%; height:60%; color:#fff; } .lp-brand b{ font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; } .lp-brand b i{ font-style: normal; font-weight: 500; color: var(--text-muted); } .lp-nav-links{ display:flex; gap: 26px; margin-left: 14px; } .lp-nav-links a{ font-size: 14.5px; color: var(--text-2); font-weight: 500; } .lp-nav-links a:hover, .lp-nav-links a.ativo{ color: var(--accent-text); } .lp-nav-cta{ margin-left:auto; display:flex; align-items:center; gap: 14px; } .lp-nav-cta .entrar{ font-size: 14.5px; font-weight: 600; color: var(--text-2); } .lp-nav-cta .entrar:hover{ color: var(--accent-text); } /* HEADER */ .pr-head{ text-align:center; padding: clamp(56px, 8vw, 96px) 0 0; } .pr-head .lp-eyebrow{ justify-content:center; } .pr-head h1{ font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5.5vw, 60px); letter-spacing: -.03em; line-height: 1.02; margin: 20px auto 0; max-width: 18ch; } .pr-head h1 .em{ color: var(--accent-text); } .pr-head p.sub{ font-size: clamp(17px,2vw,20px); color: var(--text-2); max-width: 50ch; margin: 20px auto 0; } .pr-trust{ display:inline-flex; flex-wrap:wrap; gap: 8px 18px; margin: 22px auto 0; color: var(--text-muted); font-size: 13.5px; justify-content:center; } .pr-trust span{ display:inline-flex; align-items:center; gap:7px; } .pr-trust .dot{ width:5px; height:5px; border-radius:50%; background: var(--accent); } /* PLANS */ .pr-plans{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: clamp(40px,6vw,72px) 0; align-items:stretch; } .pr-card{ position:relative; display:flex; flex-direction:column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px 30px; } .pr-card.destaque{ border-color: var(--accent); box-shadow: var(--sh-lg); } [data-dir="moderno"] .pr-card.destaque{ background: var(--accent-soft); border-color: var(--accent-border); } .pr-badge{ position:absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 6px 14px; border-radius: var(--r-full); white-space:nowrap; } .pr-card .nome{ font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; } .pr-card .para{ color: var(--text-muted); font-size: 14.5px; margin: 6px 0 0; min-height: 42px; } .pr-price{ display:flex; align-items:baseline; gap: 4px; margin: 22px 0 0; font-family: var(--font-display); letter-spacing: -.02em; } .pr-price .cur{ font-size: 22px; font-weight: 600; color: var(--text-2); } .pr-price .val{ font-size: 52px; font-weight: 800; line-height: 1; } .pr-price .per{ font-size: 15px; color: var(--text-muted); font-weight: 500; font-family: var(--font-sans); } .pr-feats{ list-style:none; margin: 26px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); display:flex; flex-direction:column; gap: 14px; flex:1; } .pr-feats li{ display:flex; gap: 12px; font-size: 15px; line-height: 1.4; } .pr-feats .ck{ flex:none; width: 20px; height:20px; border-radius:50%; background: var(--accent-soft); color: var(--accent-text); display:grid; place-items:center; margin-top: 1px; } .pr-feats .ck svg{ width: 12px; height:12px; } .pr-feats li.muted{ color: var(--text-muted); } .pr-feats li b{ font-weight: 600; } .pr-card .lp-btn{ margin-top: 28px; } /* INCLUSO band */ .pr-incluso{ background: var(--bg-subtle); padding: clamp(56px,8vw,96px) 0; } .pr-incluso .head{ text-align:center; max-width:60ch; margin:0 auto; } .pr-incluso h2{ font-family: var(--font-display); font-weight:700; font-size: clamp(26px,3.6vw,38px); letter-spacing:-.02em; margin: 14px 0 0; } .pr-incluso .sub{ color: var(--text-muted); font-size:17px; margin: 14px 0 0; } .pr-inc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 48px; } .pr-inc{ background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding: 26px; } .pr-inc .ico{ width: 46px; height:46px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); display:grid; place-items:center; margin-bottom: 16px; } .pr-inc .ico svg{ width: 23px; height:23px; } .pr-inc h3{ font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 7px; letter-spacing: -.01em; } .pr-inc p{ color: var(--text-muted); font-size: 14.5px; margin: 0; } [data-dir="moderno"] .pr-inc .ico{ background: var(--accent); color: var(--on-accent); } /* FAQ mini */ .pr-faq{ padding: clamp(56px,8vw,96px) 0; } .pr-faq .head{ text-align:center; } .pr-faq h2{ font-family: var(--font-display); font-weight:700; font-size: clamp(24px,3.4vw,34px); letter-spacing:-.02em; margin: 14px 0 0; } .lp-faq{ max-width: 800px; margin: 40px auto 0; } .lp-faq details{ border-top: 1px solid var(--border); } .lp-faq details:last-child{ border-bottom: 1px solid var(--border); } .lp-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap: 16px; padding: 22px 4px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .lp-faq summary::-webkit-details-marker{ display:none; } .lp-faq summary .plus{ margin-left:auto; flex:none; width: 24px; height:24px; position: relative; } .lp-faq summary .plus::before, .lp-faq summary .plus::after{ content:""; position:absolute; background: var(--accent-text); border-radius: 2px; } .lp-faq summary .plus::before{ inset: 10px 2px; height: 2px; } .lp-faq summary .plus::after{ inset: 2px 10px; width: 2px; transition: opacity var(--dur-2) var(--ease); } .lp-faq details[open] summary .plus::after{ opacity: 0; } .lp-faq .ans{ padding: 0 40px 24px 4px; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; } /* CTA band */ .lp-band{ background: var(--surface-ink); color: #fff; position: relative; overflow: clip; padding: clamp(64px,9vw,110px) 0; } .lp-band-glow{ position:absolute; inset: -40% -10% auto 40%; height: 150%; width: 60%; background: radial-gradient(circle, oklch(0.566 0.128 159 / .36), transparent 60%); filter: blur(10px); pointer-events:none; } .lp-band-in{ position: relative; z-index: 1; text-align: center; display:flex; flex-direction:column; align-items:center; } .lp-band .lp-eyebrow{ color: var(--em-400); justify-content:center; } .lp-band .lp-eyebrow::before{ background: var(--em-400); } .lp-band h2{ font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.6vw, 50px); letter-spacing: -.025em; line-height: 1.06; margin: 16px 0 0; max-width: 18ch; } .lp-band h2 .em{ color: var(--em-400); } .lp-band p{ color: rgba(255,255,255,.74); font-size: 18px; margin: 18px 0 0; max-width: 46ch; } .pr-cta-row{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 30px; justify-content:center; } .pr-cta-row .lp-btn{ width:auto; } .lp-band .lp-btn-ghost{ color:#fff; border-color: rgba(255,255,255,.28); } .lp-band .lp-btn-ghost:hover{ border-color:#fff; } /* FOOTER */ .lp-foot{ border-top: 1px solid var(--border); padding: 52px 0 60px; } .lp-foot-top{ display:flex; flex-wrap:wrap; gap: 28px; align-items:center; } .lp-foot-links{ margin-left:auto; display:flex; flex-wrap:wrap; gap: 8px 24px; } .lp-foot-links a{ font-size: 14px; color: var(--text-muted); } .lp-foot-links a:hover{ color: var(--accent-text); } .lp-foot .disc{ margin-top: 32px; padding-top: 22px; border-top: 1px dashed var(--border); color: var(--text-faint); font-size: 13px; max-width: 80ch; } @media (max-width: 920px){ .pr-plans{ grid-template-columns: 1fr; max-width: 460px; margin-inline:auto; } .pr-inc-grid{ grid-template-columns: 1fr; } .lp-nav-links{ display:none; } } /* ====================== Auth (cadastro · login · recuperar · convite) ====================== */ *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } a{ color: inherit; text-decoration: none; } .lp-sym{ display:block; } .lp-eyebrow{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--em-400); margin: 0; display:inline-flex; align-items:center; gap: 10px; } .lp-eyebrow::before{ content:""; width: 22px; height:1px; background: var(--em-400); } .cad{ min-height: 100vh; display:grid; grid-template-columns: 1fr 1fr; } /* ---------- painel de marca ---------- */ .cad-arte{ position: relative; overflow: clip; color:#fff; display:flex; flex-direction:column; padding: clamp(40px, 4.5vw, 64px); background: linear-gradient(155deg, var(--pt-800) 0%, var(--pt-950) 60%, oklch(0.16 0.03 222) 100%); } .cad-arte .glow{ position:absolute; z-index:1; width:560px; height:560px; left:-140px; top:-150px; background: radial-gradient(circle, oklch(0.566 0.128 159 / .42), transparent 62%); filter: blur(8px); pointer-events:none; } .cad-arte .ghost{ position:absolute; z-index:0; right:-14%; bottom:-20%; width:72%; color: var(--em-500); opacity:.085; pointer-events:none; } .cad-arte .ghost svg{ width:100%; height:auto; display:block; } .cad-arte .edge{ position:absolute; inset:22px; border:1px solid rgba(255,255,255,.12); border-radius:18px; z-index:2; pointer-events:none; } .cad-brand{ position:relative; z-index:3; display:flex; align-items:center; gap: 13px; } .cad-brand .bx{ width:46px; height:46px; border-radius:13px; background: var(--em-600); display:grid; place-items:center; flex:none; } .cad-brand .bx .lp-sym{ width:60%; height:60%; color:#fff; } .cad-brand b{ font-family: var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; } .cad-brand b i{ font-style:normal; font-weight:500; color: rgba(255,255,255,.72); } .cad-brand:hover{ color:#fff; } .cad-arte-hero{ position:relative; z-index:3; margin-top:auto; } .cad-arte h2{ font-family: var(--font-display); font-weight:800; font-size: clamp(30px, 3.4vw, 46px); letter-spacing:-.025em; line-height:1.05; margin: 18px 0 0; max-width: 13ch; } .cad-arte h2 .em{ color: var(--em-400); } .cad-bens{ position:relative; z-index:3; list-style:none; margin: 30px 0 0; padding:0; display:flex; flex-direction:column; gap: 14px; } .cad-bens li{ display:flex; align-items:center; gap: 12px; color: rgba(255,255,255,.82); font-size: 15.5px; } .cad-bens .ck{ flex:none; width: 24px; height:24px; border-radius:50%; background: rgba(43,199,155,.16); color: var(--em-400); display:grid; place-items:center; } .cad-bens .ck svg{ width: 13px; height:13px; } .cad-arte-foot{ position:relative; z-index:3; margin-top:34px; font-size: 13.5px; color: rgba(255,255,255,.6); display:flex; gap: 8px 18px; flex-wrap:wrap; } .cad-arte-foot span{ display:inline-flex; align-items:center; gap:7px; } .cad-arte-foot .dot{ width:5px; height:5px; border-radius:50%; background: var(--em-400); } /* ---------- formulário ---------- */ .cad-form-wrap{ display:flex; flex-direction:column; justify-content:center; padding: clamp(36px, 4.5vw, 64px); overflow:auto; } .cad-form{ width: 100%; max-width: 460px; margin: 0 auto; } .cad-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 30px; } .cad-top .voltar{ font-size: 13.5px; color: var(--text-muted); font-weight:500; } .cad-top .voltar:hover{ color: var(--accent-text); } .cad-pill{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-text); background: var(--accent-soft); border-radius: var(--r-full); padding: 6px 12px; font-weight:600; } .cad-form h1{ font-family: var(--font-display); font-weight:700; font-size: clamp(28px, 3.2vw, 36px); letter-spacing:-.02em; margin: 0; } .cad-form .sub{ color: var(--text-muted); font-size: 15px; margin: 8px 0 0; } .cad-fields{ display:flex; flex-direction:column; gap: 16px; margin-top: 28px; } .field{ display:flex; flex-direction:column; gap: 7px; } .field label{ font-size: 13px; font-weight: 600; color: var(--text-2); } .field input{ height: 46px; border:1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--text); transition: border-color var(--dur-2), box-shadow var(--dur-2); } .field input::placeholder{ color: var(--text-faint); } .field input:focus{ outline:none; border-color: var(--accent); box-shadow: var(--ring); } .field-row{ display:grid; grid-template-columns: 1fr 92px; gap: 12px; } /* plano picker */ .cad-planos{ display:flex; flex-direction:column; gap: 10px; } .planopt{ position:relative; display:flex; align-items:center; gap: 13px; border:1px solid var(--border-strong); border-radius: var(--r-md); padding: 14px 16px; cursor:pointer; transition: all var(--dur-2); } .planopt input{ position:absolute; opacity:0; pointer-events:none; } .planopt .radio{ flex:none; width: 20px; height:20px; border-radius:50%; border: 2px solid var(--border-strong); display:grid; place-items:center; transition: border-color var(--dur-2); } .planopt .radio::after{ content:""; width:10px; height:10px; border-radius:50%; background: var(--accent); transform: scale(0); transition: transform var(--dur-2) var(--ease); } .planopt .pl-nome{ font-weight:600; font-size: 15px; } .planopt .pl-desc{ font-size: 12.5px; color: var(--text-muted); } .planopt .pl-preco{ margin-left:auto; font-family: var(--font-display); font-weight:700; font-size: 16px; letter-spacing:-.01em; } .planopt .pl-preco small{ font-weight:500; font-size: 11.5px; color: var(--text-muted); font-family: var(--font-sans); } .planopt .pl-tag{ position:absolute; top:-9px; right: 14px; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding: 3px 8px; border-radius: var(--r-full); } .cad-planos:has(.planopt input:checked) .planopt{ } /* noop */ .planopt:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); } .planopt:has(input:checked) .radio{ border-color: var(--accent); } .planopt:has(input:checked) .radio::after{ transform: scale(1); } /* cupom */ .cad-cupom summary{ list-style:none; cursor:pointer; font-size: 13.5px; color: var(--accent-text); font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .cad-cupom summary::-webkit-details-marker{ display:none; } .cad-cupom[open] summary{ margin-bottom: 8px; } .cad-cupom input{ height: 44px; } /* aceite */ .cad-aceite{ display:flex; gap: 11px; align-items:flex-start; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; } .cad-aceite input{ margin-top: 2px; width: 17px; height:17px; accent-color: var(--accent); flex:none; } .cad-aceite a{ color: var(--accent-text); font-weight:600; } .cad-submit{ height: 52px; border:none; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-family: inherit; font-weight:600; font-size: 15.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap: 9px; transition: all var(--dur-2); width:100%; } .cad-submit:hover{ background: var(--accent-hover); transform: translateY(-1px); } [data-dir="moderno"] .cad-submit{ box-shadow: 0 12px 28px -10px var(--accent); } .cad-entrar{ text-align:center; margin: 18px 0 0; font-size: 14px; color: var(--text-muted); } .cad-entrar a{ color: var(--accent-text); font-weight:600; } .cad-disc{ margin: 26px 0 0; padding-top: 18px; border-top: 1px dashed var(--border); color: var(--text-faint); font-size: 12px; line-height: 1.5; } @media (prefers-reduced-motion: no-preference){ @keyframes cadUp{ from{ transform: translateY(16px); } to{ transform:none; } } @keyframes cadGlow{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } } .cad-brand{ animation: cadUp .6s var(--ease) both; } .cad-arte-hero{ animation: cadUp .7s var(--ease) .08s both; } .cad-bens{ animation: cadUp .7s var(--ease) .16s both; } .cad-arte .glow{ animation: cadGlow 5.5s ease-in-out infinite; } } @media (max-width: 860px){ .cad{ grid-template-columns: 1fr; } .cad-arte{ padding: 32px; } .cad-arte-hero{ margin-top: 24px; } .cad-bens{ display:none; } .cad-arte h2{ font-size: 26px; } } /* ====================== Auth — extras (recuperar senha · convite) ====================== */ .cad-note{ margin-top: 16px; background: var(--info-bg); border:1px solid var(--info-border); color: var(--info-text); border-radius: var(--r-md); padding: 13px 15px; font-size: 13.5px; line-height:1.5; } .cad-link{ display:inline-block; margin-top:18px; font-size:14px; color: var(--accent-text); font-weight:600; } .field input:disabled{ background: var(--surface-2); color: var(--text-muted); cursor:not-allowed; } .field .hint{ font-size: 12px; color: var(--text-faint); } .login-erro, .cad-erro{ background: var(--danger-bg, #fdecec); border:1px solid var(--danger-border, #f5c2c2); color: var(--danger-text, #a12626); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; margin-top: 4px; } /* botão mostrar/ocultar senha */ .senha-wrap{ position:relative; } .senha-wrap input{ width:100%; padding-right:46px; box-sizing:border-box; } .senha-olho{ position:absolute; top:1px; right:1px; bottom:1px; width:42px; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; cursor:pointer; color: var(--text-faint); border-radius: var(--r-md); } .senha-olho:hover{ color: var(--text-2); } .senha-olho:focus-visible{ outline:none; box-shadow: var(--ring); } .senha-olho svg{ width:20px; height:20px; } .senha-olho svg[hidden]{ display:none; } /* ====================== Entrada (CSS puro, sem JS) ====================== */ @media (prefers-reduced-motion: no-preference){ @keyframes lpRise{ from{ transform: translateY(16px); } to{ transform:none; } } .lp-reveal{ animation: lpRise .7s cubic-bezier(.2,.7,.2,1) both; } }