/* ═══════════════════════════════════════════════════════════════ CCA SYSTEM — design system unificado (2026-06-08) Identidade Partners (carbon/paper/gold, Cormorant, angular) + acento terracota da marca + temas claro/escuro. Espelha os valores de partners/index.html. Fonte da verdade do site. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Paleta crua ──────────────────────────────────────────── */ --carbon: #0a0a0a; --carbon-soft: #1a1a1a; --paper: #faf8f3; --paper-deep: #f3efe6; --gold: #a07a3f; --gold-deep: #7e5f31; --gold-soft: #d9c8a3; --terra: #2c7269; --terra-deep: #1f5a52; --terra-soft: rgba(44,114,105,.14); --ink: #1a1a1a; --ink-2: #3a3a3a; --ink-3: #6b6b6b; --ink-4: #9a9a9a; --line: #d9d3c5; --line-soft: #ebe6da; --display: "Cormorant Garamond", Georgia, serif; --body: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; /* ── Raios (refino 2026-07: curva consistente, sempre via token) ── */ --r-sm: 10px; /* chips, detalhes pequenos */ --r-md: 14px; /* inputs, callouts */ --r-lg: 20px; /* cards */ --r-xl: 28px; /* blocos maiores, imagens */ --r-section: clamp(30px, 5vw, 52px); /* curva das seções escuras */ --r-pill: 999px; /* botões e nav pílula */ /* ── Movimento (UMA curva de easing pro site inteiro) ── */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: .15s; --t-base: .2s; --t-slow: .35s; /* ── Tokens semânticos (contrato) — default = CLARO ───────── */ --bg: var(--paper); --surface: #ffffff; --text: var(--ink); --text-soft: var(--ink-2); --text-faint: var(--ink-3); --line-c: var(--line); --accent: var(--terra-deep); /* terracota legível em fundo claro */ --accent-gold: var(--gold-deep); /* dourado legível em fundo claro */ } /* ── Tema global (blog usa data-theme no ) ───────────── */ [data-theme="light"] { --bg: var(--paper); --surface: #fff; --text: var(--ink); --text-soft: var(--ink-2); --text-faint: var(--ink-3); --line-c: var(--line); --accent: var(--terra-deep); --accent-gold: var(--gold-deep); } [data-theme="dark"] { --bg: var(--carbon); --surface: var(--carbon-soft); --text: var(--paper); --text-soft: #c8c4ba; --text-faint: #8d877b; --line-c: rgba(217,200,163,.16); --accent: #6cb6ad; --accent-gold: var(--gold-soft); } /* ── Seções (home/sobre alternam claro/escuro) ────────────── */ .sec-light { --bg: var(--paper); --surface: #fff; --text: var(--ink); --text-soft: var(--ink-2); --text-faint: var(--ink-3); --line-c: var(--line); --accent: var(--terra-deep); --accent-gold: var(--gold-deep); } .sec-paper-deep { --bg: var(--paper-deep); --surface: #fff; --text: var(--ink); --text-soft: var(--ink-2); --text-faint: var(--ink-3); --line-c: var(--line); --accent: var(--terra-deep); --accent-gold: var(--gold-deep); } .sec-dark { --bg: var(--carbon); --surface: var(--carbon-soft); --text: var(--paper); --text-soft: #c8c4ba; --text-faint: #8d877b; --line-c: rgba(217,200,163,.16); --accent: #6cb6ad; --accent-gold: var(--gold-soft); } .sec-light, .sec-paper-deep, .sec-dark { background: var(--bg); color: var(--text); } /* ── Curvas entre seções (refino 2026-07) ───────────────────── A seção escura deixa de ser um retângulo de corte seco: ganha raio grande nos cantos (o fundo da página aparece na curva) e um glow radial dourado discreto no topo. Hero (1ª seção) e CTA final (última, colada no footer escuro) ficam sem raio nas bordas encostadas nas extremidades. */ .sec-dark { position: relative; overflow: hidden; border-radius: var(--r-section); } .sec-dark:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } .sec-dark:last-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Glow radial dourado, discreto, ancorado no topo da seção */ .sec-dark::before { content: ""; position: absolute; top: -220px; right: -140px; width: 560px; height: 420px; pointer-events: none; background: radial-gradient(closest-side, rgba(217,200,163,.09), transparent 72%); } /* Arco fino de apoio no canto oposto (linha curva editorial) */ .sec-dark::after { content: ""; position: absolute; left: -180px; bottom: -260px; width: 480px; height: 480px; pointer-events: none; border: 1px solid rgba(217,200,163,.10); border-radius: 50%; } /* Conteúdo sempre acima do glow/arco de fundo */ .sec-dark > .container { position: relative; z-index: 1; } /* Em telas estreitas a curva encolhe pra não criar vão gigante */ @media (max-width: 640px) { .sec-dark { border-radius: 26px; } .sec-dark:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } .sec-dark:last-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } /* ── Base ─────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* Seleção com a cor da marca (dourado quente, legível nos dois temas) */ ::selection { background: rgba(160,122,63,.32); color: inherit; } [data-theme="dark"] ::selection, .sec-dark ::selection { background: rgba(217,200,163,.30); } /* Scrollbar no tema (quente, discreta) */ html { scrollbar-width: thin; scrollbar-color: rgba(160,122,63,.45) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(160,122,63,.35); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(160,122,63,.55); border: 2px solid transparent; background-clip: content-box; } [data-theme="dark"] html, [data-theme="dark"] { scrollbar-color: rgba(217,200,163,.35) transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(217,200,163,.28); border: 2px solid transparent; background-clip: content-box; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(217,200,163,.45); border: 2px solid transparent; background-clip: content-box; } .container { width: min(1080px, calc(100% - 48px)); margin: 0 auto; } .container-narrow { width: min(720px, calc(100% - 40px)); margin: 0 auto; } section { padding: 88px 0; } @media (max-width: 640px) { section { padding: 60px 0; } } /* ── Tipografia ───────────────────────────────────────────── */ .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-gold); } .eyebrow-terra { color: var(--accent); } .label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); } .display { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; line-height: 1.04; color: var(--text); } h1, .h1 { font-family: var(--display); font-weight: 500; font-size: clamp(44px, 7vw, 84px); line-height: 1.02; letter-spacing: -.02em; color: var(--text); } h2, .h2 { font-family: var(--display); font-weight: 500; font-size: clamp(31px, 4.5vw, 52px); line-height: 1.06; letter-spacing: -.015em; color: var(--text); } .h3 { font-family: var(--body); font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: -.005em; color: var(--text); } .lead { font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: var(--text-soft); max-width: 62ch; text-wrap: pretty; } .display em, h1 em, h2 em, .h1 em, .h2 em { font-style: italic; font-weight: 400; color: var(--accent-gold); } h1, h2, .display { text-wrap: balance; } .stat { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.4vw, 48px); line-height: 1; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; } .num-large { font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; color: var(--accent-gold); letter-spacing: -.02em; } /* ── Botões ───────────────────────────────────────────────── */ /* Refino 2026-07: pílulas curvas, easing tokenizado. Rev 2 (pedido do dono): hover sem varredura de brilho — glow externo branco, suave, combinado à sombra quente da marca. */ .cta-gold, .cta-terra, .cta-light, .cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 17px 38px; border: 1px solid transparent; cursor: pointer; border-radius: var(--r-pill); position: relative; overflow: hidden; transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-slow) var(--ease), transform var(--t-fast) var(--ease); text-decoration: none; white-space: nowrap; } .cta-gold { background: linear-gradient(180deg, #ad8145, var(--gold)); color: #fff; border-color: var(--gold); box-shadow: 0 4px 16px rgba(160,122,63,.28), inset 0 1px 0 rgba(255,255,255,.22); } .cta-gold:hover { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-color: var(--gold-deep); box-shadow: 0 6px 20px rgba(126,95,49,.30), 0 0 26px rgba(255,255,255,.38), inset 0 1px 0 rgba(255,255,255,.20); transform: translateY(-1px); } .cta-gold:active { transform: translateY(0); } .cta-gold[aria-disabled="true"] { opacity: .4; pointer-events: none; filter: grayscale(.4); } .cta-terra { background: var(--terra); color: #fff; border-color: var(--terra); box-shadow: 0 4px 16px rgba(44,114,105,.3), inset 0 1px 0 rgba(255,255,255,.16); } .cta-terra:hover { background: var(--terra-deep); border-color: var(--terra-deep); box-shadow: 0 6px 20px rgba(31,90,82,.30), 0 0 26px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.14); transform: translateY(-1px); } .cta-terra:active { transform: translateY(0); } .cta-light { background: transparent; color: var(--text); border-color: currentColor; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-slow) var(--ease), transform var(--t-fast) var(--ease); } .cta-light:hover { background: var(--text); color: var(--bg); box-shadow: 0 0 22px rgba(255,255,255,.42); transform: translateY(-1px); } .cta-light:active { transform: translateY(0); } .cta-primary { background: var(--carbon); color: var(--paper); border-color: var(--carbon); } .cta-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); box-shadow: 0 6px 20px rgba(126,95,49,.28), 0 0 24px rgba(255,255,255,.34); transform: translateY(-1px); } .cta-primary:active { transform: translateY(0); } .btn-full { width: 100%; } /* ── Divisores ────────────────────────────────────────────── */ .rule { border: 0; border-top: 1px solid var(--line-c); } .rule-gold { border: 0; border-top: 1px solid var(--gold); } .rule-terra { border: 0; border-top: 2px solid var(--terra); } /* ── Cards ────────────────────────────────────────────────── */ /* Refino 2026-07: cantos curvos (os ticks dourados de canto vivo saíram de cena; no lugar, um fio de luz dourado que cresce no topo do card no hover). */ .card-frame { background: var(--surface); border: 1px solid var(--line-c); padding: 30px; position: relative; border-radius: var(--r-lg); transition: transform var(--t-base) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t-base) var(--ease); } .sec-dark .card-frame, [data-theme="dark"] .card-frame { background: rgba(255,255,255,.03); } .card-frame::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity var(--t-slow) var(--ease); } .card-frame::after { content: none; } .card-frame:hover { transform: translateY(-3px); border-color: rgba(160,122,63,.4); box-shadow: 0 14px 40px -14px rgba(20,16,8,.22), 0 3px 10px -3px rgba(20,16,8,.10); } .card-frame:hover::before { opacity: .8; } .sec-dark .card-frame:hover, [data-theme="dark"] .card-frame:hover { border-color: rgba(217,200,163,.32); box-shadow: 0 16px 44px -16px rgba(0,0,0,.6), 0 3px 12px -3px rgba(0,0,0,.4); } .card-frame.accent-terra::before { background: linear-gradient(90deg, transparent, var(--terra), transparent); } /* ── Listas comparativas ──────────────────────────────────── */ .check-mark::before { content: "›"; display: inline-block; width: 1.5em; color: var(--accent-gold); font-weight: 600; } .x-mark::before { content: "·"; display: inline-block; width: 1.5em; color: var(--text-faint); } /* ── Tabela formal ────────────────────────────────────────── */ table.formal { width: 100%; border-collapse: collapse; font-size: 15px; } table.formal th { text-align: left; padding: 12px 16px 12px 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--line-c); } table.formal td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line-c); vertical-align: top; color: var(--text-soft); } table.formal td strong { color: var(--text); font-weight: 600; } table.formal tr:last-child td { border-bottom: none; } /* ── FAQ (details/summary) ────────────────────────────────── */ details.faq { border-bottom: 1px solid var(--line-c); padding: 20px 0; } details.faq summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; padding-right: 36px; position: relative; font-size: 17px; line-height: 1.4; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; color: var(--accent-gold); font-weight: 400; font-size: 24px; line-height: 1; transition: transform .2s ease; } details.faq[open] summary::after { content: "−"; } details.faq .faq-a { color: var(--text-soft); font-size: 15px; line-height: 1.7; margin-top: 14px; } /* ── Eyebrow com traço (rótulo de seção) ──────────────────── */ .section-tag { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; } .section-tag::before { content: ""; width: 24px; height: 1px; background: var(--accent-gold); } .section-tag.terra::before { background: var(--accent); } /* ── Refino 2026-07: detalhes finos globais ───────────────── */ /* FAQ: hover suave + canto curvo no foco */ details.faq { border-radius: var(--r-sm); transition: background var(--t-base) var(--ease); } details.faq summary { border-radius: var(--r-sm); transition: color var(--t-base) var(--ease); } details.faq summary:hover { color: var(--accent-gold); } details.faq summary::after { transition: transform var(--t-base) var(--ease); } /* Imagens de pessoas/avatar: curva em vez de retângulo vivo */ .mentor-photo { border-radius: var(--r-md); } /* Reduced motion: desliga lifts e transições novas (glow de hover é só sombra, sem movimento) */ @media (prefers-reduced-motion: reduce) { .card-frame, .card-frame:hover { transform: none; transition: none; } .cta-gold, .cta-terra, .cta-light, .cta-primary, .cta-gold:hover, .cta-terra:hover, .cta-light:hover, .cta-primary:hover { transform: none; } }