/* ========================================================================= Ribeiro Cavalcante Advocacia — Cirurgia Reparadora Pós-Bariátrica Design system: warm cream paper + charcoal anchors + brass accent Theming is driven by data-palette / data-type on (set by Tweaks). ========================================================================= */ /* ---------- Fonts ---------- */ /* System fonts — alinhadas ao site principal (Georgia + system stack) */ /* ---------- Theme tokens ---------- */ :root { /* palette — alinhada ao site principal (navy + gold + branco) */ --bg: #ffffff; --bg-2: #f8f9fa; --surface: #ffffff; --ink: #1a1a2e; --ink-soft: #4a4a5a; --muted: #495057; --line: rgba(5,13,37,.10); --line-strong: rgba(5,13,37,.18); --dark: #050d25; --dark-2: #0f1d3d; --on-dark: #ffffff; --on-dark-mut: rgba(255,255,255,.7); --accent: #d18b00; --accent-2: #b07600; --accent-tint: #fdf3e0; --positive: #2f6b54; --positive-tint:#dceae3; --font-head: Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); --radius-s: 8px; --radius: 8px; --radius-l: 12px; --shadow-s: 0 2px 8px rgba(0,0,0,.08); --shadow: 0 4px 16px rgba(0,0,0,.12); --ease: cubic-bezier(.22,.61,.36,1); } /* (paletas alternativas removidas — LP usa paleta fixa alinhada ao site principal) */ /* ---------- Reset ---------- */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; } ul { list-style:none; padding:0; } h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.3; color:var(--dark); } ::selection { background:var(--accent); color:#fff; } /* ---------- Layout helpers ---------- */ .wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section { padding-block:clamp(64px,9vw,128px); position:relative; } .section--tight { padding-block:clamp(48px,7vw,88px); } .eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); } .eyebrow::before { content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block; } .eyebrow--center::after { content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block; } .eyebrow--ondark { color:var(--accent); } .h-xl { font-size:clamp(2rem,4.5vw,3.2rem); } .h-lg { font-size:clamp(1.9rem,3.8vw,3rem); } .h-md { font-size:clamp(1.4rem,2.4vw,2rem); } .lead { font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); line-height:1.55; } .measure { max-width:62ch; } .measure-s { max-width:46ch; } .text-center { text-align:center; } .mx-auto { margin-inline:auto; } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0.75rem 1.75rem; border-radius:4px; font-weight:600; font-size:0.95rem; letter-spacing:.01em; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s; white-space:nowrap; cursor:pointer; border:1.5px solid transparent; } .btn svg { width:18px; height:18px; } .btn--primary { background:var(--accent); color:#fff; box-shadow:0 8px 22px -8px var(--accent-2); } .btn--primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--accent-2); background:var(--accent-2); } .btn--ghost { border-color:var(--line-strong); color:var(--ink); } .btn--ghost:hover { border-color:var(--ink); transform:translateY(-2px); } .btn--ondark { border-color:rgba(236,230,216,.28); color:var(--on-dark); } .btn--ondark:hover { border-color:var(--on-dark); background:rgba(236,230,216,.06); transform:translateY(-2px); } .btn--wa { background:#1f9d57; color:#fff; box-shadow:0 8px 22px -8px rgba(31,157,87,.7); } .btn--wa:hover { background:#198347; transform:translateY(-2px); } .btn--block { width:100%; } /* ---------- Header ---------- */ .site-header { position:fixed; inset:0 0 auto 0; z-index:80; display:flex; align-items:center; justify-content:center; padding:14px var(--gutter); background:#050d25; transition:background .3s, box-shadow .3s, padding .3s; } .site-header > .header-wrap { width:100%; max-width:var(--maxw); display:flex; align-items:center; justify-content:space-between; gap:24px; } .site-header.scrolled { background:color-mix(in srgb, #050d25 94%, #000); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(5,13,37,.28); padding-block:10px; } /* light treatment on the navy bar */ .site-header .brand__logo { filter:brightness(0) invert(1); } .site-header .brand__name { color:var(--on-dark); } .site-header .brand__name small { color:var(--on-dark-mut); } .site-header .brand__mark { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); } .site-header .nav__links a { color:rgba(255,255,255,.85); } .site-header .nav__links a:hover { color:var(--accent); } .site-header .nav__links a::after { background:var(--accent); } .site-header .nav-toggle span, .site-header .nav-toggle span::before, .site-header .nav-toggle span::after { background:#fff; } .site-header .nav__cta .btn--primary { background:var(--accent); color:#fff; box-shadow:none; } .site-header .nav__cta .btn--primary:hover { background:var(--accent-2); color:#fff; transform:translateY(-1px); } .brand { display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand__logo { height:40px; width:auto; display:block; } .footer .brand__logo { height:44px; } .brand__mark { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; border:1.5px solid var(--accent); color:var(--accent-2); font-family:var(--font-head); font-weight:600; font-size:17px; letter-spacing:.02em; background:color-mix(in srgb, var(--accent-tint) 60%, transparent); } .brand__name { font-family:var(--font-head); font-weight:600; font-size:18px; line-height:1.05; letter-spacing:.01em; } .brand__name small { display:block; font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:2px; } .nav { display:flex; align-items:center; gap:30px; } .nav__links { display:flex; gap:26px; } .nav__links a { font-weight:500; font-size:15px; color:var(--ink-soft); position:relative; padding-block:4px; } .nav__links a::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--accent); transition:width .25s var(--ease); } .nav__links a:hover { color:var(--ink); } .nav__links a:hover::after { width:100%; } .nav__cta { display:flex; align-items:center; gap:14px; } .nav-toggle { display:none; width:44px; height:44px; border-radius:10px; align-items:center; justify-content:center; } .nav-toggle span { width:20px; height:2px; background:var(--ink); position:relative; transition:.25s; } .nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.25s; } .nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; } /* ---------- Hero ---------- */ .hero { position:relative; padding-top:128px; overflow:hidden; } .hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; } .hero__alert { display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:7px 14px 7px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-soft); box-shadow:var(--shadow-s); } .hero__alert .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); } .hero h1 { margin-bottom:22px; } .hero h1 em { font-style:italic; color:var(--accent-2); } .hero__sub { margin-bottom:18px; } .hero__loc { display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; font-size:14.5px; font-weight:600; color:var(--accent-2); } .hero__loc svg { width:16px; height:16px; flex:none; } .hero__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .hero__trust { display:flex; flex-wrap:wrap; gap:22px; margin-top:36px; padding-top:26px; border-top:1px solid var(--line); } .hero__trust .ti { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft); font-weight:500; } .hero__trust .ti svg { width:19px; height:19px; color:var(--accent-2); flex:none; } /* hero media / doctor card */ .hero__media { position:relative; } .figure { position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); } .ph { position:relative; background:var(--bg-2); background-image:repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb,var(--ink) 5%,transparent) 11px 12px); display:grid; place-items:center; color:var(--muted); } .ph__label { font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.04em; background:var(--surface); padding:6px 12px; border-radius:999px; border:1px solid var(--line); box-shadow:var(--shadow-s); } .hero__media .figure { aspect-ratio:4/4.7; } .hero__pro { position:absolute; left:-18px; bottom:24px; right:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); max-width:280px; } .hero__pro .name { font-family:var(--font-head); font-weight:600; font-size:18px; } .hero__pro .role { font-size:13px; color:var(--muted); margin-top:1px; } .hero__pro .credrow { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; } .cred { font-size:11.5px; font-weight:600; letter-spacing:.03em; padding:4px 9px; border-radius:6px; background:var(--accent-tint); color:var(--accent-2); } /* ---------- Generic section head ---------- */ .shead { max-width:760px; } .shead.text-center { margin-inline:auto; } .shead .eyebrow { margin-bottom:18px; } .shead h2 { margin-bottom:16px; } /* ---------- Cards & grids ---------- */ .grid { display:grid; gap:20px; } .grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-s); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong); } .card h3 { font-size:1.18rem; margin-bottom:9px; } .card p { color:var(--ink-soft); font-size:15.5px; } .icon-badge { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent-2); margin-bottom:18px; } .icon-badge svg { width:23px; height:23px; } /* identificação — checklist of complaints */ .complaints { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; } .complaint { display:flex; gap:13px; align-items:flex-start; padding:15px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); font-size:15.5px; color:var(--ink-soft); font-weight:500; transition:border-color .25s, transform .25s; } .complaint:hover { border-color:var(--accent); transform:translateX(3px); } .complaint .x { flex:none; width:22px; height:22px; border-radius:6px; background:var(--accent-tint); color:var(--accent-2); display:grid; place-items:center; } .complaint .x svg { width:13px; height:13px; } /* procedimentos region cards */ .region { display:flex; flex-direction:column; gap:0; } .region .rtitle { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .region .rtitle h3 { font-size:1.22rem; } .region ul { display:flex; flex-direction:column; gap:9px; } .region li { display:flex; gap:10px; align-items:flex-start; font-size:14.8px; color:var(--ink-soft); } .region li::before { content:""; flex:none; margin-top:9px; width:5px; height:5px; border-radius:50%; background:var(--accent); } /* dark band */ .band-dark { background:#050d25; color:var(--on-dark); } .band-dark h2 { color:var(--on-dark); } .band-dark .lead { color:var(--on-dark-mut); } .band-dark .eyebrow { color:var(--accent); } .band-dark .eyebrow::before,.band-dark .eyebrow--center::after { background:var(--accent); } /* why-deny: claim vs reality */ .deny { display:grid; gap:18px; } .deny__row { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid rgba(236,230,216,.16); border-radius:var(--radius); overflow:hidden; } .deny__cell { padding:24px 26px; } .deny__cell.claim { background:rgba(236,230,216,.04); } .deny__cell.real { background:rgba(160,124,70,.12); border-left:1px solid rgba(236,230,216,.16); } .deny__tag { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; display:inline-block; } .deny__cell.claim .deny__tag { color:var(--on-dark-mut); } .deny__cell.real .deny__tag { color:var(--accent); } .deny__cell p { font-size:15.5px; line-height:1.5; } .deny__cell.claim p { color:var(--on-dark-mut); } .deny__cell.real p { color:var(--on-dark); } /* eligibility two-column */ .split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; } .checklist { display:flex; flex-direction:column; gap:13px; } .checklist li { display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-soft); } .checklist li .ck { flex:none; width:24px; height:24px; border-radius:50%; background:var(--positive-tint); color:var(--positive); display:grid; place-items:center; margin-top:1px; } .checklist li .ck svg { width:14px; height:14px; } /* steps timeline */ .steps { display:grid; gap:0; counter-reset:step; } .step { display:grid; grid-template-columns:auto 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start; } .step:last-child { border-bottom:none; } .step__num { counter-increment:step; width:54px; height:54px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-head); font-size:22px; font-weight:600; color:var(--accent-2); border:1.5px solid var(--accent); background:var(--surface); } .step__num::before { content:counter(step,decimal-leading-zero); } .step h3 { font-size:1.25rem; margin-bottom:6px; } .step p { color:var(--ink-soft); font-size:15.5px; } /* function/benefits list with big number-free emphasis */ .func { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 24px; } .func li { display:flex; gap:13px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; color:var(--ink-soft); } .func li svg { flex:none; width:20px; height:20px; color:var(--accent-2); margin-top:3px; } /* decisions / jurisprudence cards */ .dcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-s); } .dcard__top { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); } .dcard__top .pill { font-size:12px; font-weight:600; letter-spacing:.04em; padding:5px 11px; border-radius:999px; background:var(--positive-tint); color:var(--positive); } .dcard__top .court { font-size:13px; color:var(--muted); font-weight:500; } .dcard__body { padding:22px 24px; } .dcard__body p { font-size:15.5px; color:var(--ink-soft); } .dcard__quote { font-family:var(--font-head); font-style:italic; font-size:1.15rem; line-height:1.4; color:var(--ink); } /* trust/security tags */ .tags { display:flex; flex-wrap:wrap; gap:11px; } .tag { display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border:1px solid rgba(236,230,216,.18); border-radius:999px; font-size:14.5px; font-weight:500; color:var(--on-dark); } .tag svg { width:16px; height:16px; color:var(--accent); } .notice { border:1px solid rgba(236,230,216,.2); border-left:3px solid var(--accent); border-radius:var(--radius-s); padding:18px 22px; background:rgba(236,230,216,.04); font-size:14.5px; color:var(--on-dark-mut); } /* attorney bio */ .bio { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; } .bio .figure { aspect-ratio:4/4.6; } .bio__creds { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:24px 0 28px; } .bio__cred { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); } .bio__cred .k { font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); margin-bottom:4px; } .bio__cred .v { font-size:15px; color:var(--ink); font-weight:500; } .bio__list { display:flex; flex-direction:column; gap:10px; } .bio__list li { display:flex; gap:11px; font-size:15.5px; color:var(--ink-soft); } .bio__list li svg { flex:none; width:18px; height:18px; color:var(--accent-2); margin-top:3px; } /* testimonials */ .quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .quote { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-s); display:flex; flex-direction:column; } .quote__mark { font-family:var(--font-head); font-size:54px; line-height:.6; color:var(--accent-tint); height:28px; } .quote p { font-size:16px; color:var(--ink); line-height:1.55; flex:1; } .quote__who { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; } .quote__av { width:40px; height:40px; border-radius:50%; background:var(--accent-tint); color:var(--accent-2); display:grid; place-items:center; font-weight:700; font-family:var(--font-head); flex:none; } .quote__who .nm { font-weight:600; font-size:14.5px; } .quote__who .mt { font-size:12.5px; color:var(--muted); } /* FAQ */ .faq { max-width:840px; margin-inline:auto; border-top:1px solid var(--line); } .faq__item { border-bottom:1px solid var(--line); } .faq__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 4px; text-align:left; } .faq__q span { font-family:var(--font-head); font-size:1.2rem; font-weight:500; color:var(--ink); } .faq__ic { flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:.3s var(--ease); position:relative; } .faq__ic::before,.faq__ic::after { content:""; position:absolute; background:var(--accent-2); transition:.3s var(--ease); } .faq__ic::before { width:13px; height:2px; } .faq__ic::after { width:2px; height:13px; } .faq__item[open] .faq__ic { background:var(--accent); border-color:var(--accent); } .faq__item[open] .faq__ic::before,.faq__item[open] .faq__ic::after { background:#fff; } .faq__item[open] .faq__ic::after { transform:scaleY(0); } .faq__a { overflow:hidden; } .faq__a-inner { padding:0 4px 26px; color:var(--ink-soft); font-size:16px; max-width:68ch; line-height:1.62; } /* form */ .form-band { background:var(--bg-2); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; } .form-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow); } .field { margin-bottom:16px; } .field label { display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:7px; } .field .req { color:var(--accent-2); } .field input,.field select,.field textarea { width:100%; padding:13px 15px; border:1.5px solid var(--line-strong); border-radius:var(--radius-s); background:#fff; color:var(--ink); font-family:var(--font-body); font-size:15.5px; transition:border-color .2s, box-shadow .2s; } .field textarea { resize:vertical; min-height:92px; } .field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .radio-chips { display:flex; flex-wrap:wrap; gap:9px; } .radio-chips label { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border:1.5px solid var(--line-strong); border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; margin:0; transition:.2s; color:var(--ink-soft); } .radio-chips input { position:absolute; opacity:0; width:0; } .radio-chips label:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#fff; } .consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin:6px 0 18px; line-height:1.5; } .consent input { margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none; } .form-note { font-size:13px; color:var(--muted); margin-top:14px; line-height:1.5; padding:14px 16px; background:var(--bg-2); border-radius:var(--radius-s); border:1px solid var(--line); } .form-aside .ti { display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); } .form-aside .ti:last-child { border-bottom:none; } .form-aside .ti .ic { flex:none; width:42px; height:42px; border-radius:11px; background:var(--accent-tint); color:var(--accent-2); display:grid; place-items:center; } .form-aside .ti .ic svg { width:21px; height:21px; } .form-aside .ti h4 { font-family:var(--font-head); font-size:1.05rem; margin-bottom:3px; } .form-aside .ti p { font-size:14.5px; color:var(--ink-soft); } .form-ok { display:none; text-align:center; padding:30px 10px; } .form-ok.show { display:block; } .form-ok .ok-ic { width:64px; height:64px; border-radius:50%; background:var(--positive-tint); color:var(--positive); display:grid; place-items:center; margin:0 auto 18px; } .form-ok .ok-ic svg { width:32px; height:32px; } /* footer */ .footer { background:#050d25; color:var(--on-dark-mut); padding-block:clamp(48px,6vw,72px) 0; } .footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; } .footer .brand__name,.footer h4 { color:var(--on-dark); } .footer h4 { font-family:var(--font-body); font-size:1rem; font-weight:700; margin-bottom:16px; color:var(--accent); } .footer a { color:var(--on-dark-mut); font-size:14.5px; display:block; padding:5px 0; transition:color .2s; } .footer a:hover { color:var(--accent-bright); } .footer__about { font-size:14.5px; line-height:1.6; max-width:34ch; margin-top:16px; } .footer__social { display:flex; gap:10px; margin-top:18px; } .footer__social a { width:38px; height:38px; border:1px solid rgba(238,241,247,.18); border-radius:10px; display:grid; place-items:center; padding:0; color:var(--on-dark-mut); transition:.2s; } .footer__social a:hover { color:var(--dark); background:var(--accent-bright); border-color:var(--accent-bright); } .footer__social svg { width:18px; height:18px; } .footer__brand .brand__mark { border-color:var(--accent); color:var(--accent); background:transparent; } .footer__bottom { margin-top:48px; padding:24px 0; border-top:1px solid rgba(236,230,216,.14); display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center; font-size:12.5px; } .footer__legal { max-width:60ch; line-height:1.6; } .footer__disc { font-size:12px; line-height:1.6; color:var(--on-dark-mut); opacity:.75; padding:18px 0 26px; border-top:1px solid rgba(236,230,216,.08); } /* sticky mobile CTA */ .mobile-cta { display:none; } /* reveal — hidden state only when JS is active, so print/PDF/no-JS show content */ html.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); } html.js .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } /* ============ Responsive ============ */ @media (max-width:1000px){ .hero__grid{ grid-template-columns:1fr; } .hero__media{ max-width:440px; } .bio{ grid-template-columns:1fr; } .bio .figure{ max-width:420px; } .footer__grid{ grid-template-columns:1fr 1fr; } .quotes{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } .split{ grid-template-columns:1fr; } } @media (max-width:760px){ body{ font-size:16px; } .nav__links,.nav .nav__cta .btn{ display:none; } .nav-toggle{ display:flex; } .nav.open .nav__links{ display:flex; flex-direction:column; position:fixed; inset:64px 12px auto 12px; background:#050d25; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:18px; gap:6px; box-shadow:var(--shadow); z-index:90; } .nav.open .nav__links a{ padding:11px 8px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.1); color:var(--on-dark); } .grid-3,.grid-4,.complaints,.func,.bio__creds,.deny__row{ grid-template-columns:1fr; } .deny__cell.real{ border-left:none; border-top:1px solid rgba(236,230,216,.16); } .field-row{ grid-template-columns:1fr; } .footer__grid{ grid-template-columns:1fr; gap:28px; } .hero{ padding-top:104px; } .hero__pro{ position:static; max-width:none; margin-top:14px; } .mobile-cta{ display:flex; position:fixed; inset:auto 0 0 0; z-index:70; gap:10px; padding:12px; background:color-mix(in srgb,var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); } .mobile-cta .btn{ flex:1; padding:14px; } body{ padding-bottom:74px; } } @media (max-width:480px){ .grid-2{ grid-template-columns:1fr; } .step{ grid-template-columns:1fr; gap:12px; } }