/* ===================================================================== André Corrêa — Advocacia Empresarial Design system: editorial serif + grotesque, warm dark + gold accent Theming via [data-theme] (dark|light) and [data-accent] on ===================================================================== */ /* ---------- Tokens ---------- */ :root { --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* spacing scale */ --gap: clamp(1rem, 2vw, 1.5rem); --section-y: clamp(4.5rem, 9vw, 8.5rem); --container: 1200px; --container-narrow: 880px; /* accent (gold) — overridden by [data-accent] */ --accent: oklch(0.79 0.088 79); --accent-2: oklch(0.7 0.094 70); --accent-soft: oklch(0.79 0.088 79 / 0.13); --accent-ink: oklch(0.2 0.02 70); --radius: 4px; --radius-lg: 10px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* accent palettes */ :root[data-accent="navy"] { --accent: oklch(0.7 0.105 248); --accent-2: oklch(0.62 0.12 252); --accent-soft: oklch(0.7 0.105 248 / 0.14); --accent-ink: oklch(0.98 0.01 250); } :root[data-accent="emerald"] { --accent: oklch(0.7 0.092 162); --accent-2: oklch(0.61 0.1 160); --accent-soft: oklch(0.7 0.092 162 / 0.14); --accent-ink: oklch(0.18 0.02 160); } :root[data-accent="wine"] { --accent: oklch(0.66 0.13 22); --accent-2: oklch(0.57 0.14 22); --accent-soft: oklch(0.66 0.13 22 / 0.14); --accent-ink: oklch(0.98 0.01 30); } /* ---------- Theme: dark (default) ---------- */ :root, :root[data-theme="dark"] { --bg: oklch(0.165 0.008 72); --bg-2: oklch(0.205 0.009 72); --bg-3: oklch(0.235 0.011 72); --bg-card: oklch(0.225 0.01 72); --line: oklch(0.34 0.012 72); --line-soft: oklch(0.28 0.01 72 / 0.7); --text: oklch(0.96 0.006 82); --text-2: oklch(0.76 0.01 82); --text-3: oklch(0.58 0.01 82); --shadow: 0 20px 60px -20px rgba(0,0,0,0.7); --hero-overlay: linear-gradient(90deg, rgba(20,18,15,0.96) 0%, rgba(20,18,15,0.78) 38%, rgba(20,18,15,0.42) 70%, rgba(20,18,15,0.55) 100%); } /* ---------- Theme: light ---------- */ :root[data-theme="light"] { --bg: oklch(0.975 0.006 84); --bg-2: oklch(0.945 0.008 84); --bg-3: oklch(0.92 0.009 84); --bg-card: oklch(0.99 0.004 84); --line: oklch(0.87 0.01 84); --line-soft: oklch(0.9 0.008 84); --text: oklch(0.24 0.012 72); --text-2: oklch(0.44 0.012 72); --text-3: oklch(0.58 0.012 72); --accent: oklch(0.58 0.1 64); --accent-2: oklch(0.5 0.11 60); --shadow: 0 18px 50px -24px rgba(40,30,10,0.28); --hero-overlay: linear-gradient(90deg, rgba(248,246,242,0.97) 0%, rgba(248,246,242,0.82) 40%, rgba(248,246,242,0.35) 72%, rgba(248,246,242,0.5) 100%); } :root[data-theme="light"][data-accent="navy"] { --accent: oklch(0.52 0.13 252); --accent-2: oklch(0.45 0.14 254); } :root[data-theme="light"][data-accent="emerald"]{ --accent: oklch(0.52 0.1 160); --accent-2: oklch(0.45 0.11 160); } :root[data-theme="light"][data-accent="wine"] { --accent: oklch(0.5 0.14 22); --accent-2: oklch(0.43 0.15 22); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background 0.5s var(--ease), color 0.4s var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------- Type ---------- */ .serif { font-family: var(--font-serif); } h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.06; letter-spacing: -0.01em; } .eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: 0.6; } .eyebrow.center { justify-content: center; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--text-2); line-height: 1.65; } .muted { color: var(--text-2); } .fine { color: var(--text-3); font-size: 0.86rem; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .narrow { max-width: var(--container-narrow); } section { position: relative; } .section-pad { padding-block: var(--section-y); } .alt-bg { background: var(--bg-2); } .divider { height: 1px; background: var(--line); border: 0; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.92em 1.6em; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: 0.96rem; letter-spacing: 0.01em; transition: transform 0.2s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { transform: translateY(-2px); background: var(--accent-2); } .btn-ghost { border: 1px solid var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .btn-lg { padding: 1.1em 2.1em; font-size: 1.02rem; } .btn-block { width: 100%; } .btn .arrow { transition: transform 0.25s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ============ NAV ============ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem clamp(1.25rem, 5vw, 3rem); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.3s var(--ease), backdrop-filter 0.4s; border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line-soft); padding-block: 0.8rem; } .brand { display: flex; align-items: center; gap: 0.7rem; } .brand .seal { width: 34px; height: 34px; flex: none; position: relative; display: grid; place-items: center; } .brand .seal svg { width: 100%; height: 100%; } .brand .wordmark { line-height: 1; } .brand .wm-name { font-family: var(--font-serif); font-size: 1.16rem; font-weight: 600; letter-spacing: 0.02em; } .brand .wm-sub { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--text-2); position: relative; padding-block: 0.3rem; transition: color 0.2s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--accent); transition: width 0.3s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } .nav-right { display: flex; align-items: center; gap: 1.1rem; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); border: 1px solid transparent; transition: color 0.2s, border-color 0.2s, transform 0.3s; } .icon-btn:hover { color: var(--accent); border-color: var(--line); } .icon-btn svg { width: 19px; height: 19px; } .theme-toggle .moon { display: none; } :root[data-theme="light"] .theme-toggle .moon { display: block; } :root[data-theme="light"] .theme-toggle .sun { display: none; } .nav-toggle { display: none; } /* brand logos (theme + scroll aware) */ .brand .logo-wm { height: 28px; width: auto; display: block; } .footer .brand .logo-wm { height: 34px; } @media (max-width: 560px) { .brand .logo-wm { height: 22px; } } /* default (dark theme): cream wordmark */ .logo-wm.t-light { display: none; } .logo-wm.t-dark { display: block; } /* light theme: navy wordmark on light surfaces */ :root[data-theme="light"] .logo-wm.t-dark { display: none; } :root[data-theme="light"] .logo-wm.t-light { display: block; } /* ...but the nav over the always-dark hero keeps the cream wordmark */ :root[data-theme="light"] .nav:not(.scrolled) .logo-wm.t-light { display: none; } :root[data-theme="light"] .nav:not(.scrolled) .logo-wm.t-dark { display: block; } /* contact list */ .contact-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.96rem; } .contact-list a, .contact-list span { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--text-2); transition: color 0.2s; } .contact-list a:hover { color: var(--accent); } .contact-list .ico { color: var(--accent); flex: none; margin-top: 2px; } .contact-list .ico svg { width: 17px; height: 17px; } /* nav over the dark hero (not yet scrolled) stays light regardless of theme */ .nav:not(.scrolled) .nav-links a { color: rgba(245,241,234,0.72); } .nav:not(.scrolled) .nav-links a:hover { color: #fff; } .nav:not(.scrolled) .icon-btn { color: rgba(245,241,234,0.82); } .nav:not(.scrolled) .icon-btn:hover { color: var(--accent); border-color: rgba(245,241,234,0.25); } .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: 2rem clamp(1.25rem, 5vw, 3rem); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .mobile-menu.open { opacity: 1; visibility: visible; } .mobile-menu a { font-family: var(--font-serif); font-size: 2rem; color: var(--text); padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); } .mobile-menu a:last-of-type { border-bottom: 0; } .mobile-menu .btn { margin-top: 1.5rem; } /* ============ HERO (always dark / image-backed) ============ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #f5f1ea; } .hero-media { position: absolute; inset: 0; z-index: 0; background: radial-gradient(125% 110% at 74% 28%, oklch(0.3 0.022 68), oklch(0.145 0.008 72) 68%); } .hero-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,18,15,0.95) 0%, rgba(20,18,15,0.74) 40%, rgba(20,18,15,0.4) 72%, rgba(20,18,15,0.58) 100%); } .hero .container { position: relative; z-index: 2; padding-top: 6rem; padding-bottom: 3rem; } .hero-inner { max-width: 720px; } .hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.2rem); font-weight: 500; } .hero h1 .accent { font-style: italic; color: var(--accent); } .hero .sub { margin-top: 1.7rem; max-width: 30em; color: rgba(245,241,234,0.8); } .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; } .hero .btn-ghost { border-color: rgba(245,241,234,0.32); color: #f5f1ea; } .hero .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.6rem; font-size: 0.85rem; color: rgba(245,241,234,0.72); } .hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .hero-trust b { color: #fff; font-weight: 600; } .scroll-hint { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(245,241,234,0.5); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; } .scroll-hint .line { width: 1px; height: 38px; background: linear-gradient(var(--accent), transparent); animation: scrolldot 2s var(--ease) infinite; } @keyframes scrolldot { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ============ VALUE PROP ============ */ .vp-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .vp-grid h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } .vp-body p { margin-top: 1.1rem; color: var(--text-2); } .vp-body p:first-child { margin-top: 0; } .pull { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.28; font-style: italic; color: var(--text); margin: 2rem 0; padding-left: 1.4rem; border-left: 2px solid var(--accent); text-wrap: balance; } .pull b { font-style: normal; color: var(--accent); font-weight: 500; } /* ============ PAIN ============ */ .pain-head { max-width: 38rem; } .pain-head h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin-top: 1.2rem; } .pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3rem; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; } .pain-item { background: var(--bg); padding: 2rem clamp(1.4rem, 2.5vw, 2.2rem); display: flex; gap: 1.1rem; } .alt-bg .pain-item { background: var(--bg-2); } .pain-item:hover { background: var(--bg-3); } .pain-item .num { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--accent); flex: none; padding-top: 0.15rem; min-width: 1.5rem; } .pain-item p { font-size: 1.04rem; color: var(--text); line-height: 1.5; } .pain-foot { margin-top: 2.4rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); } .pain-foot b { color: var(--accent); font-weight: 600; font-family: var(--font-serif); font-style: italic; } /* ============ SOLUTION + AREAS ============ */ .sol-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .sol-grid h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } .sol-body p { margin-top: 1.1rem; color: var(--text-2); } .sol-body .pull { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } .areas { margin-top: 4.5rem; } .areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; } .area { background: var(--bg); padding: 2.2rem 1.9rem; position: relative; } .alt-bg .area { background: var(--bg-2); } .area:hover { background: var(--bg-3); } .area .num { font-family: var(--font-serif); font-size: 0.9rem; color: var(--accent); letter-spacing: 0.1em; } .area h3 { font-size: 1.32rem; margin-top: 0.7rem; font-weight: 600; } .area p { margin-top: 0.6rem; font-size: 0.96rem; color: var(--text-2); line-height: 1.5; } .area::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .area:hover::after { transform: scaleX(1); } /* ============ BENEFITS ============ */ .ben-head { max-width: 40rem; } .ben-head h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin-top: 1.2rem; } .ben-list { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 3rem; } .ben { display: flex; gap: 1.1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; } .ben .check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); display: grid; place-items: center; margin-top: 2px; color: var(--accent); transition: background 0.3s, color 0.3s; } .ben .check svg { width: 13px; height: 13px; } .ben:hover .check { background: var(--accent); color: var(--accent-ink); } .ben p { font-size: 1.04rem; color: var(--text); line-height: 1.5; } .ben p b { color: var(--accent); font-weight: 600; } /* ============ STATS ============ */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); text-align: center; } .stat .n { font-family: var(--font-serif); font-size: clamp(2.8rem, 6vw, 4.4rem); font-weight: 500; color: var(--accent); line-height: 1; } .stat .l { margin-top: 0.8rem; color: var(--text-2); font-size: 0.98rem; } .stat + .stat { position: relative; } .stat + .stat::before { content: ""; position: absolute; left: calc(clamp(1.5rem, 4vw, 3.5rem) / -2); top: 10%; height: 80%; width: 1px; background: var(--line); } /* ============ TESTIMONIALS ============ */ .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .test-card { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 2.1rem; display: flex; flex-direction: column; gap: 1.4rem; box-shadow: var(--shadow); } .test-card .quote-mark { font-family: var(--font-serif); font-size: 3.4rem; line-height: 0.5; color: var(--accent); height: 1.2rem; } .test-card blockquote { font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.45; color: var(--text); flex: 1; } .test-card .placeholder-q { color: var(--text-3); font-style: italic; } .test-meta { display: flex; align-items: center; gap: 0.9rem; padding-top: 0.4rem; border-top: 1px solid var(--line-soft); } .test-meta image-slot { width: 48px; height: 48px; flex: none; } .test-meta .who { font-size: 0.9rem; } .test-meta .who b { display: block; color: var(--text); font-weight: 600; } .test-meta .who span { color: var(--text-3); font-size: 0.82rem; } .note-strip { margin-top: 1.6rem; font-size: 0.8rem; color: var(--text-3); display: inline-flex; gap: 0.5rem; align-items: center; } .note-strip::before { content: "i"; font-family: var(--font-serif); font-style: italic; width: 18px; height: 18px; border: 1px solid var(--text-3); border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; flex: none; } /* ============ OFFER ============ */ .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; align-items: stretch; } .offer-card { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 2.2rem; display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s; } .offer-card:hover { transform: translateY(-4px); border-color: var(--accent); } .offer-card.featured { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--bg-card) 60%); position: relative; } .offer-card .tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .offer-card h3 { font-size: 1.5rem; font-weight: 600; } .offer-card .desc { margin-top: 0.9rem; color: var(--text-2); font-size: 0.98rem; flex: 1; line-height: 1.55; } .offer-card .price { margin-top: 1.2rem; font-size: 0.84rem; color: var(--text-3); font-style: italic; } .offer-card .btn { margin-top: 1.6rem; } .offer-cta { margin-top: 3.5rem; text-align: center; max-width: 46rem; margin-inline: auto; } .offer-cta p { font-size: clamp(1.15rem, 2vw, 1.5rem); font-family: var(--font-serif); line-height: 1.4; } /* ============ OBJECTIONS ============ */ .obj-wrap { display: grid; grid-template-columns: 0.95fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); margin-top: 3rem; align-items: start; } .obj-tabs { display: flex; flex-direction: column; gap: 0.5rem; } .obj-tab { text-align: left; padding: 1.15rem 1.3rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-card); font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; color: var(--text-2); display: flex; gap: 0.8rem; align-items: baseline; transition: all 0.25s var(--ease); } .obj-tab .q { color: var(--accent); font-size: 0.85rem; flex: none; } .obj-tab:hover { color: var(--text); border-color: var(--line); } .obj-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } .obj-panel { position: relative; min-height: 200px; } .obj-content { display: none; } .obj-content.active { display: block; animation: fadeUp 0.4s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .obj-content h3 { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--accent); margin-bottom: 1.2rem; } .obj-content p { color: var(--text-2); font-size: 1.06rem; line-height: 1.65; } .obj-content p + p { margin-top: 1rem; } /* ============ GUARANTEE / URGENCY ============ */ .feature-panel { border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 4rem); background: linear-gradient(135deg, var(--accent-soft), transparent 70%); position: relative; overflow: hidden; } .feature-panel .label { color: var(--accent); } .feature-panel h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-top: 1rem; max-width: 18em; } .feature-panel p { margin-top: 1.3rem; color: var(--text-2); max-width: 42em; font-size: 1.06rem; } .feature-panel .seal-big { position: absolute; right: clamp(-2rem, -2vw, -1rem); bottom: -3rem; width: 220px; height: 220px; opacity: 0.1; } .feature-panel .seal-big svg { width: 100%; height: 100%; color: var(--accent); } .feature-panel .seal-big img { width: 100%; height: auto; display: block; } .feature-panel .seal-big .t-light { display: none; } :root[data-theme="light"] .feature-panel .seal-big .t-dark { display: none; } :root[data-theme="light"] .feature-panel .seal-big .t-light { display: block; } .urgency { text-align: center; max-width: 50rem; margin-inline: auto; } .urgency h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-top: 1rem; } .urgency p { margin-top: 1.4rem; color: var(--text-2); font-size: 1.08rem; } .slots-meter { margin: 2.4rem auto 0; max-width: 26rem; } .slots-track { height: 8px; border-radius: 99px; background: var(--bg-3); overflow: hidden; border: 1px solid var(--line); } .slots-fill { height: 100%; width: 80%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 99px; } .slots-label { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.84rem; color: var(--text-3); } .slots-label b { color: var(--accent); } /* ============ FAQ ============ */ .faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-family: var(--font-serif); font-size: clamp(1.12rem, 1.8vw, 1.32rem); font-weight: 500; color: var(--text); transition: color 0.2s; } .faq-q:hover { color: var(--accent); } .faq-icon { flex: none; width: 24px; height: 24px; position: relative; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.3s var(--ease); } .faq-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); } .faq-icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); } .faq-item.open .faq-icon::after { transform: translateX(-50%) scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq-a-inner { padding-bottom: 1.6rem; color: var(--text-2); font-size: 1.02rem; line-height: 1.65; max-width: 44em; } /* ============ FINAL CTA + FORM ============ */ .final { background: var(--bg-2); } .final-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .final-copy h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-top: 1.2rem; } .final-copy p { margin-top: 1.4rem; color: var(--text-2); font-size: 1.08rem; max-width: 34em; } .final-copy .pull { margin-top: 2rem; } .form-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.6rem); box-shadow: var(--shadow); } .form-card h3 { font-size: 1.5rem; font-weight: 600; } .form-card .form-sub { color: var(--text-2); font-size: 0.95rem; margin-top: 0.4rem; margin-bottom: 1.6rem; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.45rem; letter-spacing: 0.02em; } .field label .req { color: var(--accent); } .field input, .field textarea, .field select { width: 100%; padding: 0.85em 1em; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: 0.98rem; transition: border-color 0.2s, box-shadow 0.2s; } .field textarea { resize: vertical; min-height: 96px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field.invalid input, .field.invalid textarea { border-color: oklch(0.6 0.18 25); } .field .err { color: oklch(0.7 0.16 25); font-size: 0.78rem; margin-top: 0.35rem; display: none; } .field.invalid .err { display: block; } .consent { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.4rem 0 1.4rem; } .consent input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--accent); } .consent label { font-size: 0.8rem; color: var(--text-3); line-height: 1.5; } .consent label a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .consent.invalid label { color: oklch(0.7 0.16 25); } .form-success { display: none; text-align: center; padding: 1.5rem 0; } .form-success.show { display: block; animation: fadeUp 0.5s var(--ease); } .form-success .check-big { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; margin: 0 auto 1.2rem; } .form-success .check-big svg { width: 28px; height: 28px; } .form-success h3 { font-size: 1.4rem; } .form-success p { color: var(--text-2); margin-top: 0.6rem; } form.sent { display: none; } /* ============ PS ============ */ .ps-block { max-width: 46rem; margin: 0 auto; padding: 2.2rem clamp(1.6rem, 3vw, 2.6rem); border-left: 2px solid var(--accent); background: var(--bg-card); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .ps-block .ps-label { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.2rem; } .ps-block p { margin-top: 0.6rem; color: var(--text-2); line-height: 1.6; } /* ============ FOOTER ============ */ .footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } .footer .brand { margin-bottom: 1.2rem; } .footer-about { color: var(--text-2); font-size: 0.94rem; max-width: 30em; line-height: 1.6; } .footer-col h4 { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; font-family: var(--font-sans); font-weight: 600; } .footer-col a, .footer-col p { display: block; color: var(--text-2); font-size: 0.95rem; padding: 0.32rem 0; transition: color 0.2s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; } .footer-bottom .meta { font-size: 0.8rem; color: var(--text-3); } .footer-bottom .meta b { color: var(--text-2); font-weight: 600; } /* ============ WHATSAPP FLOAT ============ */ .wa-float { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(37,211,102,0.5); transition: transform 0.3s var(--ease); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 32px; height: 32px; } .wa-float::after { content: "Fale agora"; position: absolute; right: 72px; white-space: nowrap; background: var(--bg-card); color: var(--text); padding: 0.5em 0.9em; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s; } .wa-float:hover::after { opacity: 1; transform: none; } /* ============ NAV ACTIVE STATE ============ */ .nav-links a.active { color: var(--text); } .nav-links a.active::after { width: 100%; } .nav:not(.scrolled) .nav-links a.active { color: #fff; } /* ============ SUBPAGE HEADER (always dark banner) ============ */ .page-header { position: relative; overflow: hidden; color: #f5f1ea; padding: 11rem 0 clamp(3.5rem, 7vw, 6rem); background: radial-gradient(125% 150% at 82% 0%, oklch(0.3 0.022 68), oklch(0.145 0.008 72) 66%); } .page-header .crumb { font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(245,241,234,0.55); margin-bottom: 1.2rem; display: flex; gap: 0.5rem; align-items: center; } .page-header .crumb a { color: rgba(245,241,234,0.7); transition: color 0.2s; } .page-header .crumb a:hover { color: var(--accent); } .page-header .eyebrow { color: var(--accent); } .page-header h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); margin-top: 1rem; max-width: 16em; } .page-header p { margin-top: 1.3rem; color: rgba(245,241,234,0.8); max-width: 44em; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; } /* ============ ABOUT ============ */ .about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .about-grid h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .about-body p { margin-top: 1.1rem; color: var(--text-2); } .about-body p:first-of-type { margin-top: 1.4rem; } .about-photo { position: relative; } .about-photo image-slot { width: 100%; aspect-ratio: 4/5; box-shadow: var(--shadow); } .about-photo .badge { position: absolute; bottom: -1.4rem; left: -1.4rem; background: var(--accent); color: var(--accent-ink); padding: 1.2rem 1.6rem; border-radius: var(--radius); font-family: var(--font-serif); line-height: 1; box-shadow: var(--shadow); } .about-photo .badge b { display: block; font-size: 2.1rem; font-weight: 600; } .about-photo .badge span { font-size: 0.8rem; font-family: var(--font-sans); } .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4.5rem; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; } .value { background: var(--bg); padding: 2.2rem 1.9rem; } .alt-bg .value { background: var(--bg-2); } .value .v-num { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1rem; } .value h3 { font-size: 1.28rem; margin-top: 0.6rem; font-weight: 600; } .value p { margin-top: 0.6rem; color: var(--text-2); font-size: 0.96rem; line-height: 1.5; } /* ============ AREAS EXPLORER (rich accordion) ============ */ .area-acc { border-top: 1px solid var(--line); } .area-acc-item { border-bottom: 1px solid var(--line); } .area-acc-head { width: 100%; text-align: left; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(1.5rem, 3vw, 2.1rem) 0; transition: color 0.2s; } .area-acc-head .num { font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--accent); flex: none; width: 2.4rem; } .area-acc-head h3 { flex: 1; font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 500; transition: color 0.2s; } .area-acc-head:hover h3 { color: var(--accent); } .area-acc-head .ico { flex: none; width: 26px; height: 26px; position: relative; } .area-acc-head .ico::before, .area-acc-head .ico::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.3s var(--ease); } .area-acc-head .ico::before { left: 0; top: 50%; width: 100%; height: 1.6px; transform: translateY(-50%); } .area-acc-head .ico::after { left: 50%; top: 0; width: 1.6px; height: 100%; transform: translateX(-50%); } .area-acc-item.open .area-acc-head .ico::after { transform: translateX(-50%) scaleY(0); } .area-acc-item.open .area-acc-head h3 { color: var(--accent); } .area-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--ease); } .area-acc-item.open .area-acc-body { max-height: 760px; } .area-acc-body-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding: 0 0 2.4rem calc(2.4rem + clamp(1rem, 2.5vw, 2rem)); } .area-acc-body-inner p { color: var(--text-2); font-size: 1.05rem; line-height: 1.65; } .area-acc-incl h4 { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; font-weight: 600; } .area-acc-incl ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .area-acc-incl li { display: flex; gap: 0.7rem; color: var(--text); font-size: 0.98rem; } .area-acc-incl li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.5rem; background: var(--accent); transform: rotate(45deg); } /* ============ CONTACT PAGE ============ */ .contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; } .contact-info h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } .contact-info > p { margin-top: 1.2rem; color: var(--text-2); max-width: 36em; } .info-rows { margin-top: 2.4rem; display: flex; flex-direction: column; } .info-row { display: flex; gap: 1.1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line-soft); } .info-row:first-child { border-top: 1px solid var(--line-soft); } .info-row .ico { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); } .info-row .ico svg { width: 19px; height: 19px; } .info-row .rc { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .info-row .rv { display: block; margin-top: 0.25rem; color: var(--text); font-size: 1.05rem; } .info-row a.rv:hover { color: var(--accent); } .wa-cta-card { margin-top: 2rem; background: #25d366; color: #07331a; border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; display: flex; align-items: center; gap: 1.2rem; transition: transform 0.25s var(--ease); } .wa-cta-card:hover { transform: translateY(-3px); } .wa-cta-card svg { width: 38px; height: 38px; flex: none; fill: #07331a; } .wa-cta-card b { display: block; font-size: 1.1rem; } .wa-cta-card span { font-size: 0.9rem; opacity: 0.8; } /* ============ CTA BAND (reusable, dark) ============ */ .cta-band { position: relative; overflow: hidden; color: #f5f1ea; text-align: center; padding: clamp(4rem, 8vw, 6.5rem) 0; background: radial-gradient(120% 160% at 50% 0%, oklch(0.28 0.02 68), oklch(0.15 0.008 72) 70%); } .cta-band .eyebrow { color: var(--accent); justify-content: center; } .cta-band h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-top: 1rem; max-width: 20em; margin-inline: auto; } .cta-band p { margin-top: 1.3rem; color: rgba(245,241,234,0.78); max-width: 40em; margin-inline: auto; font-size: 1.08rem; } .cta-band .hero-cta { justify-content: center; margin-top: 2.4rem; } .cta-band .btn-ghost { border-color: rgba(245,241,234,0.32); color: #f5f1ea; } .cta-band .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* section helpers */ .section-tight { padding-block: clamp(3rem, 6vw, 5rem); } .areas-overview-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.6rem; } .areas-overview-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); max-width: 14em; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.96rem; white-space: nowrap; } .link-arrow .arrow { transition: transform 0.25s var(--ease); } .link-arrow:hover .arrow { transform: translateX(4px); } /* ============ RESPONSIVE ============ */ @media (max-width: 940px) { .nav-links { display: none; } .nav-toggle { display: grid; } .nav-right .btn { display: none; } .vp-grid, .sol-grid, .obj-wrap, .faq-grid, .final-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; } .areas-grid { grid-template-columns: repeat(2, 1fr); } .test-grid, .offer-grid, .values { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } .area-acc-body-inner { grid-template-columns: 1fr; padding-left: calc(2.4rem + clamp(1rem, 2.5vw, 2rem)); } .about-photo { max-width: 460px; margin: 1.4rem auto 0; } } @media (max-width: 620px) { body { font-size: 17px; } .pain-grid, .ben-list { grid-template-columns: 1fr; } .areas-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; gap: 2.5rem; } .stat + .stat::before { display: none; } .footer-top { grid-template-columns: 1fr; } .hero-cta .btn { flex: 1; } .area-acc-body-inner { padding-left: 0; } .area-acc-head .num { width: 1.8rem; } }