/* ============================================================ AtendenteX — TEMA CLARO Camada de sobreposição. Carregue DEPOIS de styles.css e ligue com class="tema-claro" na tag . Mesma paleta da marca; muda só qual cor ocupa a superfície. ============================================================ */ .tema-claro{ /* texto que antes vivia sobre o navy agora vive sobre o claro */ --on-ink: #112835; --on-ink-dim: #4B6577; --ink-line: rgba(17,40,53,.14); --shadow: 0 20px 50px -24px rgba(17,40,53,.22); --shadow-lift: 0 28px 66px -26px rgba(17,40,53,.26); } /* ── superfícies: alternância branco / #F6F6F6 ─────────── */ .tema-claro body{ background:var(--white); } .tema-claro .sec--paper, .tema-claro .sec--ink{ background:var(--white); color:var(--on-paper); } .tema-claro #beneficios, .tema-claro #recursos, .tema-claro #planos{ background:var(--paper); } .tema-claro .sec--ink h2{ color:var(--on-paper); } .tema-claro .sec--ink .kicker{ color:var(--sig-ink); } .tema-claro .sec--ink .split{ border-bottom-color:rgba(17,40,53,.12); } .tema-claro .sec--ink .split__body, .tema-claro .sec-head p{ color:var(--on-paper-dim); } .tema-claro .sec--ink .ticks li{ color:var(--on-paper-dim); } .tema-claro .sec--ink .ticks li::before{ color:var(--sig-ink); } /* ── header ────────────────────────────────────────────── */ .tema-claro .site-head{ background:rgba(255,255,255,.86); border-bottom:1px solid rgba(17,40,53,.10); } .tema-claro .brand img{ filter:none; } /* logo na cor original */ .tema-claro .site-nav a{ color:var(--on-paper-dim); } .tema-claro .site-nav a:hover{ color:var(--on-paper); } .tema-claro .site-nav__ghost{ color:var(--sig-ink) !important; } .tema-claro .nav-burger{ border-color:rgba(17,40,53,.18); } .tema-claro .nav-burger span{ background:var(--on-paper); } /* ── hero ──────────────────────────────────────────────── */ .tema-claro .hero{ background: radial-gradient(900px 520px at 12% -10%, rgba(68,175,218,.17), transparent 62%), radial-gradient(760px 480px at 92% 8%, rgba(58,191,135,.15), transparent 60%), var(--white); color:var(--on-paper); } .tema-claro .lede{ color:var(--on-paper); } .tema-claro .sub{ color:var(--on-paper-dim); } .tema-claro .hero__ticks li{ color:var(--on-paper-dim); } .tema-claro .hero__ticks li::before{ color:var(--sig-ink); } .tema-claro .hero .btn--line{ border-color:rgba(17,40,53,.28); } .tema-claro .hero .btn--line:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); } .tema-claro .hero__note{ color:var(--on-paper-dim); border-left-color:rgba(17,40,53,.18); } /* ── thread: vira uma conversa clara de verdade ────────── */ .tema-claro .thread{ background:var(--white); } .tema-claro .thread__bar{ background:linear-gradient(180deg,#FAFBFC,#FFFFFF); border-bottom:1px solid rgba(17,40,53,.09); } .tema-claro .thread__who b{ color:var(--on-paper); } .tema-claro .thread__who i{ color:var(--go-ink); } .tema-claro .thread__tag{ color:var(--on-paper-dim); border-color:rgba(17,40,53,.20); } .tema-claro .thread__log{ background: radial-gradient(520px 300px at 80% 0%, rgba(68,175,218,.09), transparent 60%), #EFF3F5; } .tema-claro .msg--in{ background:var(--white); color:var(--on-paper); box-shadow:0 2px 6px -2px rgba(17,40,53,.16); } .tema-claro .msg--in time{ color:var(--on-paper-dim); } .tema-claro .msg--out{ background:linear-gradient(160deg,#D7F6E7,#C8F1DC); color:#123B2B; box-shadow:0 2px 6px -2px rgba(17,40,53,.16); } .tema-claro .msg--out time{ color:var(--go-ink); } .tema-claro .ticks2{ color:var(--sig-ink); } .tema-claro .msg--typing{ background:var(--white); box-shadow:0 2px 6px -2px rgba(17,40,53,.16); } .tema-claro .msg--typing i{ background:#8FA6B2; } .tema-claro .thread__foot{ border-top-color:rgba(17,40,53,.10); } .tema-claro .chip{ background:var(--paper); color:var(--on-paper-dim); } .tema-claro .chip--go{ background:var(--go-lift); color:var(--ink-deep); } /* ── passos ────────────────────────────────────────────── */ .tema-claro .step{ border-top-color:rgba(17,40,53,.16); } .tema-claro .step::before{ background:var(--sig); box-shadow:0 0 0 5px rgba(68,175,218,.16); } .tema-claro .step__n{ color:var(--sig-ink); } .tema-claro .step p{ color:var(--on-paper-dim); } /* ── depoimento: o único campo de cor cheia da página ──── */ .tema-claro .quote-sec{ background:linear-gradient(155deg,#E8FBF1 0%,#E5F6FB 100%); color:var(--on-paper); } .tema-claro .quote-sec blockquote{ color:var(--on-paper); } .tema-claro .stars{ color:var(--warm-ink); } .tema-claro .stars span, .tema-claro .cite span{ color:var(--on-paper-dim); } /* ── planos: o "Popular" inverte para o navy da marca ──── */ .tema-claro .plan{ background:var(--white); box-shadow:var(--shadow); } .tema-claro .plan h3, .tema-claro .plan__price b{ color:var(--on-paper); } .tema-claro .plan__price span, .tema-claro .plan__custom{ color:var(--on-paper-dim); } .tema-claro .plan .btn--line{ border-color:rgba(17,40,53,.28); } .tema-claro .plan .btn--line:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); } .tema-claro .plan--pop{ background:linear-gradient(170deg,#14413A,#112835 72%); } .tema-claro .plan--pop h3, .tema-claro .plan--pop .plan__price b{ color:var(--white); } .tema-claro .plan--pop .plan__price span{ color:#9FBECE; } .tema-claro .plan--pop .ticks li{ color:#9FBECE; } .tema-claro .plan--pop .ticks li::before{ color:var(--sig-lift); } /* ── contato ───────────────────────────────────────────── */ .tema-claro #contato{ background:var(--paper); } .tema-claro .form{ background:var(--white); } .tema-claro .form input, .tema-claro .form textarea{ background:#FBFCFC; } /* ── rodapé: mantém o navy como âncora da página ───────── */ .tema-claro .site-foot .brand img{ filter:brightness(0) invert(1); } .tema-claro .site-foot__nav a, .tema-claro .site-foot__by{ color:#9FBECE; } .tema-claro .site-foot__nav a:hover{ color:var(--white); } /* ── menu mobile ───────────────────────────────────────── */ @media (max-width:860px){ .tema-claro .site-nav{ background:var(--white); border-bottom:1px solid rgba(17,40,53,.10); } .tema-claro .site-nav a{ border-top-color:rgba(17,40,53,.09); } }