/* ========================================================= SELETA CONTABILIDADE — Brand tokens + 3 directional skins ========================================================= */ /* ---- Brand palette extracted from logo ---- */ :root { --seleta-forest: #0e3a3a; --seleta-forest-2: #134848; --seleta-forest-3: #1d5e5b; --seleta-navy: #0e1a2a; --seleta-ink: #0b121f; --seleta-copper: #9c6f44; --seleta-copper-light: #c9a075; --seleta-copper-soft: #d4b48c; --seleta-cream: #f7f4ee; --seleta-cream-2: #efeadf; --seleta-paper: #faf8f2; --seleta-line: rgba(14, 26, 42, 0.12); } /* ========================================================= DEFAULT SKIN — applied to ; overridden by data-skin ========================================================= */ html { --bg: var(--seleta-cream); --bg-elev: #ffffff; --bg-soft: var(--seleta-cream-2); --bg-deep: var(--seleta-forest); --ink: var(--seleta-ink); --ink-soft: #3b4456; --ink-mute: #6b7385; --ink-faint: #9ba3b2; --line: var(--seleta-line); --line-strong: rgba(14, 26, 42, 0.28); --accent: var(--seleta-forest); --accent-deep: #082525; --gold: var(--seleta-copper); --gold-soft: var(--seleta-copper-soft); /* On-deep colors for sections that invert */ --on-deep-ink: var(--seleta-cream); --on-deep-mute: rgba(247, 244, 238, 0.72); --on-deep-line: rgba(247, 244, 238, 0.18); /* Type families */ --ff-display: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif; --ff-serif: 'Source Serif 4', 'Cormorant Garamond', Georgia, serif; --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Density */ --density-scale: 1; --pad-section-y: calc(120px * var(--density-scale)); --pad-section-x: clamp(24px, 4vw, 64px); --gap-block: calc(48px * var(--density-scale)); --gap-tight: calc(20px * var(--density-scale)); /* Sizes */ --t-mega: clamp(56px, 9vw, 132px); --t-h1: clamp(40px, 5.5vw, 80px); --t-h2: clamp(32px, 3.6vw, 52px); --t-h3: clamp(22px, 1.8vw, 28px); --t-lead: clamp(18px, 1.3vw, 22px); --t-body: 17px; --t-small: 14px; --t-micro: 11px; --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --shadow-1: 0 1px 0 var(--line); --shadow-2: 0 12px 32px rgba(14,26,42,0.08), 0 2px 4px rgba(14,26,42,0.04); font-size: 16px; background: var(--bg); color: var(--ink); } /* ---------- Skin: CONSERVATIVE (institutional — default-equivalent) ---------- */ html[data-skin="conservative"] { --bg: var(--seleta-cream); --bg-elev: #ffffff; --bg-soft: var(--seleta-cream-2); --bg-deep: var(--seleta-forest); --ink: var(--seleta-ink); --accent: var(--seleta-forest); --gold: var(--seleta-copper); --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-serif: 'Source Serif 4', Georgia, serif; --radius-0: 0; --radius-1: 0; --radius-2: 2px; } /* ---------- Skin: MODERN (tech-forward, much white, sans-leaning) ---------- */ html[data-skin="modern"] { --bg: #ffffff; --bg-elev: #ffffff; --bg-soft: #f5f5f3; --bg-deep: #0b1417; --ink: #0a0a0a; --ink-soft: #2b2b2b; --ink-mute: #6b6b6b; --line: rgba(10,10,10,0.10); --line-strong: rgba(10,10,10,0.24); --accent: var(--seleta-forest); --gold: var(--seleta-copper); --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-serif: 'Inter', sans-serif; --radius-0: 0; --radius-1: 4px; --radius-2: 10px; --t-h1: clamp(44px, 6vw, 88px); --t-h2: clamp(34px, 4vw, 56px); } /* ---------- Skin: BOLD (premium, dark, warm) ---------- */ html[data-skin="bold"] { --bg: #0a2424; --bg-elev: #0e2a2a; --bg-soft: #143434; --bg-deep: #061a1a; --ink: var(--seleta-cream); --ink-soft: rgba(247, 244, 238, 0.84); --ink-mute: rgba(247, 244, 238, 0.62); --ink-faint: rgba(247, 244, 238, 0.40); --line: rgba(247, 244, 238, 0.14); --line-strong: rgba(247, 244, 238, 0.32); --accent: var(--seleta-copper-light); --gold: var(--seleta-copper-light); --on-deep-ink: var(--seleta-cream); --on-deep-mute: rgba(247, 244, 238, 0.72); --on-deep-line: rgba(247, 244, 238, 0.18); --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-serif: 'Source Serif 4', Georgia, serif; --radius-0: 0; --radius-1: 0; --radius-2: 0; --t-h1: clamp(48px, 7vw, 108px); --t-h2: clamp(36px, 4.4vw, 64px); } /* ---------- Density variants ---------- */ html[data-density="compact"] { --density-scale: 0.78; } html[data-density="regular"] { --density-scale: 1; } html[data-density="spacious"] { --density-scale: 1.18; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ff-serif); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--t-body); line-height: 1.5; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 500; } p { margin: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } ::selection { background: var(--accent); color: var(--seleta-cream); } /* ---------- Type utilities ---------- */ .display { font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; } .serif { font-family: var(--ff-serif); } .sans { font-family: var(--ff-sans); } .mono { font-family: var(--ff-mono); } .italic { font-style: italic; } .t-mega { font-size: var(--t-mega); } .t-h1 { font-size: var(--t-h1); } .t-h2 { font-size: var(--t-h2); } .t-h3 { font-size: var(--t-h3); } .t-lead { font-size: var(--t-lead); line-height: 1.45; } .t-small { font-size: var(--t-small); } .t-micro { font-size: var(--t-micro); } .muted { color: var(--ink-mute); } .soft { color: var(--ink-soft); } .uppercase { text-transform: uppercase; letter-spacing: 0.18em; } .tracked { letter-spacing: 0.14em; } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } /* ---------- Layout primitives ---------- */ .container { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad-section-x); } .section { padding: var(--pad-section-y) var(--pad-section-x); } .section--tight { padding: calc(var(--pad-section-y) * 0.6) var(--pad-section-x); } .section--deep { background: var(--bg-deep); color: var(--on-deep-ink); } .section--deep .muted { color: var(--on-deep-mute); } .section--deep hr { border-top-color: var(--on-deep-line); } .section--soft { background: var(--bg-soft); } /* ---------- Eyebrow label ---------- */ .eyebrow { font-family: var(--ff-sans); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; } .eyebrow--clean::before { display: none; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-bd: var(--ink); display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; font-family: var(--ff-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--radius-1); cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn .arr { transition: transform .3s ease; } .btn:hover .arr { transform: translateX(4px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); } .btn--accent { --btn-bg: var(--accent); --btn-fg: var(--seleta-cream); --btn-bd: var(--accent); } .btn--gold { --btn-bg: var(--gold); --btn-fg: #1a1106; --btn-bd: var(--gold); } .btn--link { background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 6px 0; text-transform: none; letter-spacing: 0.02em; font-family: var(--ff-serif); font-size: 16px; } .section--deep .btn--ghost { --btn-fg: var(--on-deep-ink); --btn-bd: var(--on-deep-ink); } /* Hero has a dark image + overlay regardless of skin, so the ghost button needs the cream variant to stay legible. */ .hero .btn--ghost { --btn-fg: var(--seleta-cream); --btn-bd: var(--seleta-cream); } .hero .btn--ghost:hover { background: rgba(247, 244, 238, 0.08); } /* ---------- Image placeholders (editorial) ---------- */ .media { position: relative; background: var(--bg-soft); overflow: hidden; border-radius: var(--radius-2); } .media::after { content: attr(data-label); position: absolute; left: 16px; bottom: 12px; font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); background: rgba(0, 0, 0, 0.35); padding: 6px 10px; border-radius: 2px; backdrop-filter: blur(6px); } .media--no-label::after { display: none; } /* Photo tags disabled site-wide (09/2026) */ .media::after { display: none; } .media__inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* Editorial gradient placeholders (different "scenes") */ .media-scene-office { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.4), transparent 60%), linear-gradient(150deg, #2c3a3f 0%, #4d5a5e 40%, #6b7378 100%); } .media-scene-boardroom { background: radial-gradient(ellipse at 50% 0%, rgba(247,234,210,0.22), transparent 55%), linear-gradient(160deg, #1a2a2f 0%, #233a3f 50%, #0e1a1c 100%); } .media-scene-architecture { background: repeating-linear-gradient(105deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 60px), linear-gradient(180deg, #c9b89a 0%, #8a7656 100%); } .media-scene-team { background: radial-gradient(ellipse at 70% 30%, rgba(255,225,180,0.25), transparent 60%), linear-gradient(140deg, #3a4a48 0%, #56635f 60%, #8a9389 100%); } .media-scene-portrait { background: radial-gradient(ellipse at 50% 35%, rgba(220,200,170,0.55), transparent 55%), linear-gradient(180deg, #2c3338 0%, #1a1f23 100%); } .media-scene-document { background: linear-gradient(180deg, #efe8d8 0%, #d4c9b1 100%); } .media-scene-data { background: radial-gradient(ellipse at 30% 50%, rgba(156,111,68,0.2), transparent 60%), linear-gradient(140deg, #0e2a2a 0%, #133838 100%); } /* Bold skin: warm tones for placeholders */ html[data-skin="bold"] .media-scene-office, html[data-skin="bold"] .media-scene-team { background: radial-gradient(ellipse at 30% 20%, rgba(201,160,117,0.28), transparent 55%), linear-gradient(150deg, #0c2424 0%, #143838 50%, #1d5e5b 100%); } /* ---------- Logo block ---------- */ .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .logo__mark { height: 68px; width: 68px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .logo__mark img { height: 100%; width: 100%; object-fit: contain; } .logo__word { display: flex; flex-direction: column; line-height: 1; } .logo__word-top { font-family: var(--ff-display); font-size: 22px; letter-spacing: 0.08em; font-weight: 500; } .logo__word-bot { font-family: var(--ff-sans); font-size: 8.5px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin-top: 4px; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); transition: background .3s ease, border-color .3s ease; } .nav__inner { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad-section-x); } .nav__links { display: flex; align-items: center; justify-content: space-evenly; flex: 1; gap: 24px; margin: 0 40px; } .nav__link { white-space: nowrap; font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); position: relative; padding: 6px 0; cursor: pointer; background: none; border: 0; transition: color .2s ease; } .nav__link:hover, .nav__link.is-active { color: var(--ink); } .nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); } .nav__link--highlight { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--gold); border-radius: 2px; background: color-mix(in srgb, var(--gold) 12%, transparent); transition: background .2s ease, color .2s ease; } .nav__link--highlight:hover { background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--accent-deep); } .nav__link--highlight.is-active::after { display: none; } .nav__link--highlight.is-active { background: var(--gold); color: #1a1106; } .nav__link--highlight.is-active .nav__link-badge { background: #1a1106; color: var(--gold-soft); } .nav__link-badge { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; background: var(--gold); color: #1a1106; border-radius: 2px; } .nav__link--has-menu { display: inline-flex; align-items: center; gap: 6px; } .nav__cta { display: inline-flex; align-items: center; gap: 18px; } /* .nav__client removed 09/2026 */ .nav__client { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .nav__client:hover { color: var(--ink); border-bottom-color: var(--gold); } @media (max-width: 1180px) { .nav__client { display: none; } .nav__links { margin: 0 20px; gap: 12px; } } /* ---------- Footer ---------- */ .footer { background: var(--bg-deep); color: var(--on-deep-ink); padding: 80px var(--pad-section-x) 32px; } .footer a { color: var(--on-deep-ink); } .footer hr { border-top-color: var(--on-deep-line); } .footer__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 64px; } .footer__col h4 { font-family: var(--ff-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-deep-mute); margin-bottom: 18px; } .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer__col a { font-size: 16px; color: var(--on-deep-ink); opacity: 0.92; transition: opacity .2s; } .footer__col a:hover { opacity: 0.65; } .footer__bottom { max-width: 1320px; margin: 0 auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--on-deep-mute); } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- Page route transitions ---------- */ .route { animation: routeIn .55s ease both; } @keyframes routeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes wmFade { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 0.09; transform: none; } } /* ---------- Hero specifics ---------- */ .hero { position: relative; min-height: calc(100vh - 78px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--bg); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,18,0.45) 0%, rgba(8,18,18,0.55) 55%, rgba(8,18,18,0.82) 100%); } html[data-skin="modern"] .hero__overlay { background: linear-gradient(180deg, rgba(8,18,18,0.32) 0%, rgba(8,18,18,0.50) 55%, rgba(8,18,18,0.78) 100%); } html[data-skin="conservative"] .hero__overlay { background: linear-gradient(180deg, rgba(8,18,18,0.40) 0%, rgba(8,18,18,0.55) 55%, rgba(8,18,18,0.85) 100%); } html[data-skin="bold"] .hero__overlay { background: linear-gradient(180deg, rgba(8,18,18,0.55) 0%, rgba(8,18,18,0.65) 55%, rgba(10,36,36,0.92) 100%); } .hero__content { position: relative; z-index: 2; padding: 80px var(--pad-section-x) 60px; max-width: 1480px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 32px; align-self: end; color: var(--seleta-cream); } .hero__title { font-family: var(--ff-display); font-size: clamp(48px, 7vw, 124px); font-weight: 400; line-height: 1.0; letter-spacing: -0.015em; max-width: 16ch; text-wrap: balance; color: var(--seleta-cream); } .hero__title em { font-style: italic; color: var(--gold-soft, var(--gold)); padding-right: 0.2em; } html[data-skin="bold"] .hero__title em { color: var(--seleta-copper-light); } .hero__sub { font-family: var(--ff-serif); font-size: var(--t-lead); max-width: 56ch; line-height: 1.5; opacity: 0.92; } .hero__meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 12px; } .hero__strip { position: relative; z-index: 2; border-top: 1px solid rgba(247, 244, 238, 0.16); background: rgba(8, 18, 18, 0.55); backdrop-filter: blur(14px); color: var(--seleta-cream); } .hero__strip-inner { max-width: 1480px; margin: 0 auto; padding: 22px var(--pad-section-x); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: baseline; } .hero__stat-num { font-family: var(--ff-display); font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; line-height: 1; } .hero__stat-label { font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; margin-top: 6px; } /* ---------- 3D hero ---------- */ .hero--3d { background: radial-gradient(ellipse at 70% 40%, #143c3c 0%, #0a2424 55%, #071a1a 100%); } .hero__media--3d { z-index: 0; } .hero-scene { position: absolute; inset: 0; } .hero-scene canvas { display: block; width: 100% !important; height: 100% !important; } .hero__overlay--3d { background: linear-gradient(90deg, rgba(7,26,26,0.78) 0%, rgba(7,26,26,0.45) 38%, transparent 62%), linear-gradient(180deg, rgba(7,26,26,0.10) 0%, rgba(7,26,26,0.20) 50%, rgba(7,26,26,0.85) 100%); z-index: 1; } html[data-skin] .hero--3d .hero__overlay--3d { background: linear-gradient(90deg, rgba(7,26,26,0.78) 0%, rgba(7,26,26,0.45) 38%, transparent 62%), linear-gradient(180deg, rgba(7,26,26,0.10) 0%, rgba(7,26,26,0.20) 50%, rgba(7,26,26,0.85) 100%); } .hero__in { opacity: 0; transform: translateY(28px); animation: heroIn 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both; display: inline-block; } .hero__sub.hero__in, .hero__meta.hero__in { display: block; } .hero__meta.hero__in { display: flex; } @keyframes heroIn { to { opacity: 1; transform: none; } } .hero__title .hero__in { opacity: 0; } .hero__scroll { position: absolute; right: var(--pad-section-x); bottom: 110px; z-index: 3; width: 1px; height: 64px; background: rgba(247,244,238,0.18); overflow: hidden; } .hero__scroll span { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold-soft); animation: scrollHint 2.2s ease-in-out infinite; } @keyframes scrollHint { to { top: 110%; } } /* ---------- Tilt (3D hover) ---------- */ .tilt { position: relative; transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; will-change: transform; } .tilt__sheen { pointer-events: none; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s ease; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.22), transparent 45%); mix-blend-mode: soft-light; } .tilt:hover .tilt__sheen { opacity: 1; } .media-tilt { border-radius: var(--radius-2); box-shadow: 0 30px 80px rgba(14,26,42,0.18); } .media-tilt:hover { box-shadow: 0 50px 110px rgba(14,26,42,0.26); } .media-tilt .media { border-radius: inherit; } .pillar--card { padding: 32px 28px; border: 1px solid var(--line); background: var(--bg-elev); border-top: 1px solid var(--line); border-radius: var(--radius-2); box-shadow: 0 1px 0 var(--line); } .pillar--card:hover { box-shadow: 0 28px 60px rgba(14,26,42,0.12); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } html[data-skin="bold"] .pillar--card { background: var(--bg-soft); } .pillar--card .pillar__num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); font-size: 10px; } /* ---------- Magnetic ---------- */ .magnetic { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .magnetic:hover { transition: transform .08s linear; } /* ---------- Orbit logo (CTA) ---------- */ .orbit { position: relative; display: grid; place-items: center; } .orbit__logo { position: relative; z-index: 2; width: 62%; height: 62%; object-fit: contain; animation: orbitFloat 6s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.4)); } .orbit__halo { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(201,160,117,0.42) 0%, rgba(201,160,117,0.10) 45%, transparent 70%); animation: orbitBreathe 6s ease-in-out infinite; } .orbit__svg { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; } .orbit__g { transform-origin: 100px 100px; transform-box: view-box; } .orbit__g--a { transform: rotate(-18deg); animation: orbitSpinA 18s linear infinite; } .orbit__g--b { transform: rotate(32deg); animation: orbitSpinB 26s linear infinite; } .orbit__g--c { animation: orbitSpinC 40s linear infinite; } @keyframes orbitSpinA { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } } @keyframes orbitSpinB { from { transform: rotate(32deg); } to { transform: rotate(-328deg); } } @keyframes orbitSpinC { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes orbitFloat { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } } @keyframes orbitBreathe { 0%,100% { transform: scale(0.9); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .orbit__logo, .orbit__halo, .orbit__g { animation: none; } } .cta-strip__row { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; } @media (max-width: 960px) { .cta-strip__row { grid-template-columns: 1fr; gap: 32px; align-items: start; } } .cta-strip { position: relative; overflow: hidden; } .cta-strip__glow { position: absolute; right: -10%; top: -30%; width: 55%; height: 160%; background: radial-gradient(ellipse at center, rgba(201,160,117,0.22) 0%, transparent 60%); pointer-events: none; } .cta-strip__coin { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); opacity: 0.95; pointer-events: none; } @media (max-width: 960px) { .cta-strip__coin { display: block; position: relative; right: auto; top: auto; transform: none; margin: 0 auto 32px; width: max-content; opacity: 0.9; } } @media (max-width: 960px) { .cta-strip__coin { display: none; } .hero__scroll { display: none; } } @media (prefers-reduced-motion: reduce) { .hero__in { animation: none; opacity: 1; transform: none; } .spin3d__coin, .hero__scroll span { animation: none; } .tilt { transform: none; } } /* ---------- Cards / grids ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-block); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-tight); } @media (max-width: 960px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 40px !important; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .hero__strip-inner { grid-template-columns: 1fr 1fr; gap: 20px; } .nav__links { display: none; } .nav__cta .btn { display: none; } .nav__burger { display: inline-flex; } } /* ---------- Mobile drawer ---------- */ .nav__burger { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-1); cursor: pointer; } .nav__burger span { width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; } .nav__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { opacity: 0; } .nav__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .nav__drawer { display: none; } @media (min-width: 961px) { .nav__drawer { display: none !important; } .nav__burger { display: none !important; } } @media (max-width: 960px) { .nav__drawer { display: none; flex-direction: column; gap: 4px; padding: 24px var(--pad-section-x) 40px; background: var(--bg); border-top: 1px solid var(--line); max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height .45s cubic-bezier(.2,.7,.2,1), padding .45s ease; } .nav__drawer.is-open { display: flex; max-height: 80vh; padding-top: 24px; padding-bottom: 40px; overflow: auto; } .nav__drawer-link { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 16px 0; font-family: var(--ff-display); font-size: 28px; color: var(--ink); cursor: pointer; opacity: 0; transform: translateY(10px); } .nav__drawer.is-open .nav__drawer-link { animation: heroIn .5s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 50ms) both; } .nav__drawer-link.is-active { color: var(--gold); } .nav__burger { display: inline-flex; } } /* Pillar (differentiators) */ .pillar { padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .pillar__num { font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .pillar__title { font-family: var(--ff-display); font-size: clamp(22px, 1.8vw, 30px); font-weight: 500; line-height: 1.15; } .pillar__body { color: var(--ink-soft); line-height: 1.55; } /* Service row */ .svc-row { display: grid; grid-template-columns: 80px 1fr 280px auto; gap: 32px; align-items: start; padding: 36px 0; border-top: 1px solid var(--line); cursor: pointer; transition: padding .35s ease; } .svc-row:last-child { border-bottom: 1px solid var(--line); } .svc-row:hover { padding-left: 12px; } .svc-row__num { font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0.14em; color: var(--ink-mute); padding-top: 10px; } .svc-row__title { font-family: var(--ff-display); font-size: clamp(28px, 3vw, 44px); font-weight: 500; line-height: 1.05; } .svc-row__desc { font-family: var(--ff-serif); color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .svc-row__chev { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } @media (max-width: 960px) { .svc-row { grid-template-columns: 1fr; gap: 14px; } } /* KPI marquee */ .kpi { display: flex; flex-direction: column; gap: 6px; } .kpi__num { font-family: var(--ff-display); font-weight: 400; font-size: clamp(56px, 7vw, 112px); line-height: 0.96; letter-spacing: -0.02em; } .kpi__num em { color: var(--gold); font-style: italic; } .kpi__label { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } /* Testimonial */ .quote { font-family: var(--ff-display); font-style: italic; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.22; font-weight: 400; letter-spacing: -0.005em; max-width: 22ch; text-wrap: balance; } .quote-attribution { display: flex; align-items: center; gap: 16px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); max-width: 22ch; } .quote-avatar { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,225,180,0.45), transparent 55%), linear-gradient(140deg, #3a4a48 0%, #56635f 100%); } .quote-attr-name { font-family: var(--ff-display); font-size: 22px; font-weight: 500; } .quote-attr-role { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } /* Form */ .field { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); } .field label { font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .field input, .field textarea, .field select { background: transparent; border: 0; outline: none; font-family: var(--ff-serif); font-size: 20px; color: var(--ink); padding: 4px 0; resize: none; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field--focus { border-bottom-color: var(--accent); } /* Chip */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.06em; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); cursor: pointer; transition: all .25s ease; background: transparent; } .chip.is-active, .chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* Floating WhatsApp */ .wa { position: fixed; bottom: 24px; right: 24px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 90; cursor: pointer; transition: transform .2s ease; } .wa:hover { transform: scale(1.06); } /* Tool card */ .tool-card { border: 1px solid var(--line); background: var(--bg-elev); padding: 32px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; transition: border-color .25s ease, transform .25s ease, background .25s ease; text-decoration: none; color: inherit; } .tool-card:hover { border-color: var(--ink); box-shadow: 0 28px 60px rgba(14,26,42,0.12); } .tool-card__cta { text-decoration: none; } .links-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .links-grid__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--ff-serif); font-size: 17px; color: var(--ink); transition: color .2s ease, padding-left .3s ease; } .links-grid__item:hover { color: var(--accent); padding-left: 8px; } .links-grid__item .arr { font-family: var(--ff-sans); font-size: 13px; color: var(--gold); } @media (max-width: 960px) { .links-grid { grid-template-columns: 1fr; } } html[data-skin="bold"] .tool-card { background: var(--bg-soft); border-color: var(--line); } .tool-card__icon { width: 44px; height: 44px; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-style: italic; font-size: 22px; color: var(--accent); } html[data-skin="bold"] .tool-card__icon { color: var(--gold); border-color: var(--on-deep-line); } .tool-card__title { font-family: var(--ff-display); font-size: 26px; font-weight: 500; line-height: 1.1; } .tool-card__desc { font-family: var(--ff-serif); color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .tool-card__cta { font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 10px; } /* About — bio rows */ .bio-row { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); } .bio-row__photo { aspect-ratio: 4 / 5; } @media (max-width: 960px) { .bio-row { grid-template-columns: 1fr; gap: 24px; } } /* Timeline */ .timeline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-block); border-top: 1px solid var(--line); padding-top: 32px; } .timeline__item .yr { font-family: var(--ff-display); font-style: italic; font-size: 32px; color: var(--gold); margin-bottom: 12px; } .timeline__item p { font-family: var(--ff-serif); color: var(--ink-soft); line-height: 1.55; } @media (max-width: 960px) { .timeline { grid-template-columns: 1fr; } } /* FAQ accordion */ .faq-item { border-top: 1px solid var(--line); padding: 20px 0; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-family: var(--ff-display); font-size: 24px; font-weight: 500; background: none; border: 0; width: 100%; text-align: left; padding: 8px 0; color: inherit; } .faq-a { font-family: var(--ff-serif); color: var(--ink-soft); line-height: 1.6; max-width: 70ch; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease, padding .35s ease; overflow: hidden; } .faq-a > div { min-height: 0; overflow: hidden; padding-top: 0; } .faq-item.is-open .faq-a { grid-template-rows: 1fr; padding-top: 12px; } /* Bold-skin specific: italic display flourishes */ html[data-skin="bold"] .pillar__num { color: var(--gold); } html[data-skin="bold"] .eyebrow { color: var(--gold); } /* Modern-skin specific: tighter caps for nav */ html[data-skin="modern"] .nav { background: rgba(255,255,255,0.78); } html[data-skin="modern"] .nav__link { font-weight: 500; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .reveal, .route, .btn, .svc-row { transition: none; animation: none; } .reveal { opacity: 1; transform: none; } } /* ========================================================= REFORMA TRIBUTÁRIA — landing-page-specific styles ========================================================= */ .reforma-hero { position: relative; padding: 100px var(--pad-section-x) 120px; background: var(--bg); overflow: hidden; } .reforma-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .reforma-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; } .reforma-hero__title { font-size: clamp(48px, 6.4vw, 108px); line-height: 0.98; letter-spacing: -0.018em; margin-top: 32px; max-width: 14ch; font-weight: 400; text-wrap: balance; } .reforma-hero__sub { font-family: var(--ff-serif); font-size: var(--t-lead); line-height: 1.55; color: var(--ink-soft); margin-top: 28px; max-width: 52ch; } .reforma-hero__sub strong { color: var(--ink); font-weight: 600; } .reforma-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; } .reforma-hero__panel { background: var(--bg-elev); border: 1px solid var(--line); padding: 36px; border-radius: var(--radius-2); box-shadow: var(--shadow-2); } .reforma-hero__panel-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--ink-mute); } .reforma-hero__panel-body { padding-top: 24px; } .reforma-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); } .reforma-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 24%, transparent); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 24%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 0%, transparent); } } @media (max-width: 960px) { .reforma-hero__inner { grid-template-columns: 1fr; } } /* Stats strip */ .reforma-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .reforma-stat { border-top: 1px solid var(--line-strong); padding-top: 24px; } .reforma-stat__num { font-family: var(--ff-display); font-size: clamp(40px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.015em; color: var(--ink); } .reforma-stat__label { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 14px; max-width: 26ch; line-height: 1.5; } @media (max-width: 960px) { .reforma-stats { grid-template-columns: 1fr 1fr; } } /* Section head shared */ .reforma-section-head { margin-bottom: 56px; } /* Compare old vs new */ .reforma-compare { display: grid; grid-template-columns: 1fr 60px 1.1fr; gap: 32px; align-items: center; } .reforma-compare__col { background: var(--bg-elev); border: 1px solid var(--line); padding: 36px; border-radius: var(--radius-2); } .reforma-compare__col--new { background: var(--bg-deep); color: var(--on-deep-ink); border-color: transparent; } .reforma-compare__col--new .reforma-tax-list__abbr { color: var(--gold-soft); } .reforma-compare__col--new .reforma-tax-list__desc { color: rgba(247,244,238,0.78); } .reforma-compare__col--new .reforma-tax-list li { border-color: var(--on-deep-line); } .reforma-compare__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .reforma-compare__col--new .reforma-compare__head { border-color: var(--on-deep-line); } .reforma-compare__label { font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .reforma-compare__col--new .reforma-compare__label { color: var(--on-deep-mute); } .reforma-compare__count { font-family: var(--ff-display); font-style: italic; font-size: 22px; color: var(--gold); } .reforma-compare__arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-mute); } .reforma-tax-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .reforma-tax-list li { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); } .reforma-tax-list li:first-child { border-top: 0; } .reforma-tax-list__abbr { font-family: var(--ff-display); font-weight: 500; font-size: 22px; color: var(--accent); flex: 0 0 80px; letter-spacing: 0.04em; } .reforma-tax-list__desc { font-family: var(--ff-serif); font-size: 15px; color: var(--ink-soft); flex: 1; line-height: 1.45; } .reforma-tax-list__new { justify-content: space-between; } .reforma-tax-list__new > div { display: flex; gap: 16px; align-items: center; flex: 1; } .reforma-tax-list__rate { font-family: var(--ff-mono); font-size: 13px; color: var(--gold-soft); white-space: nowrap; padding: 4px 10px; border: 1px solid var(--on-deep-line); border-radius: 2px; } @media (max-width: 960px) { .reforma-compare { grid-template-columns: 1fr; } .reforma-compare__arrow { transform: rotate(90deg); padding: 8px; } } /* Timeline */ .reforma-timeline { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: step; } .reforma-timeline__item { display: grid; grid-template-columns: 160px 60px 1fr; gap: 32px; align-items: start; padding: 36px 0; border-top: 1px solid var(--on-deep-line); } .reforma-timeline__item:last-child { border-bottom: 1px solid var(--on-deep-line); } .reforma-timeline__year { font-family: var(--ff-display); font-style: italic; font-size: clamp(36px, 3.4vw, 56px); font-weight: 500; line-height: 1; color: var(--gold-soft); letter-spacing: -0.01em; } .reforma-timeline__line { position: relative; height: 100%; display: flex; justify-content: center; padding-top: 22px; } .reforma-timeline__line::before { content: ""; position: absolute; top: 22px; bottom: -36px; width: 1px; background: var(--on-deep-line); } .reforma-timeline__item:last-child .reforma-timeline__line::before { display: none; } .reforma-timeline__dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-soft) 16%, transparent); } .reforma-timeline__body { padding-top: 8px; } @media (max-width: 960px) { .reforma-timeline__item { grid-template-columns: 1fr; gap: 12px; } .reforma-timeline__line { display: none; } } /* Impact cards */ .reforma-impact { background: var(--bg-elev); border: 1px solid var(--line); padding: 36px; border-radius: var(--radius-2); transition: transform .25s ease, border-color .25s ease; } .reforma-impact:hover { border-color: var(--accent); box-shadow: 0 28px 60px rgba(14,26,42,0.12); } .reforma-impact__num { font-family: var(--ff-display); font-style: italic; font-size: 40px; color: var(--gold); line-height: 1; } /* Phase cards */ .reforma-phase { background: var(--bg-elev); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 28px 32px; } .reforma-phase__phase { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } /* Hero mini-comparison bars */ .reforma-mini-bar { display: flex; gap: 4px; height: 56px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; } .reforma-mini-bar span { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 2px; } .reforma-mini-bar--old span { background: var(--bg-soft); border: 1px solid var(--line-strong); color: var(--ink-soft); } .reforma-mini-bar--new span { background: var(--accent); color: var(--seleta-cream); } .reforma-mini-bar--new span:nth-child(2) { background: color-mix(in srgb, var(--accent) 80%, var(--gold)); } .reforma-mini-bar--new span:nth-child(3) { background: var(--gold); color: #1a1106; } /* Reforma promo banner (on the home top of nav) */ .reforma-banner { background: var(--bg-deep); color: var(--on-deep-ink); padding: 12px var(--pad-section-x); display: flex; align-items: center; justify-content: center; gap: 18px; font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0.04em; flex-wrap: wrap; cursor: pointer; transition: background .25s ease; border-bottom: 1px solid var(--on-deep-line); } .reforma-banner:hover { background: color-mix(in srgb, var(--bg-deep) 88%, var(--gold)); } .reforma-banner__tag { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); padding: 4px 10px; border: 1px solid var(--on-deep-line); border-radius: 999px; } .reforma-banner__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-soft); font-weight: 500; } /* ---------- Mobile overflow guard (added 09/2026) ---------- */ html, body { overflow-x: clip; max-width: 100%; } @media (max-width: 720px) { /* inline grids from JSX (style="grid-template-columns") collapse to one column */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .footer__grid { grid-template-columns: 1fr; gap: 36px; } .footer__col a, .footer__col li { overflow-wrap: anywhere; } .hero__strip-inner { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .hero__stat-num { font-size: clamp(26px, 8vw, 40px); } .hero__stat-label { font-size: 10px; } img, svg, video, iframe { max-width: 100%; } pre, table { max-width: 100%; overflow-x: auto; } }