/* ============================================================ PRANCHAS DWG SOLAR — Blueprint / CAD sales sheet Type system + grid paper + title block + palette tokens (Fonts são carregadas via no do index.html) ============================================================ */ /* ---------- Constant tokens (structure) ---------- */ :root{ --paper: #eef1f4; --paper-2: #e6eaee; --sheet: #f5f7f9; --grid: rgba(31,73,112,0.045); --grid-major: rgba(31,73,112,0.08); --ink: #16263a; --ink-soft: #4a5d72; --ink-faint: #5a697b; /* tertiary labels — darkened to clear AA on light */ --line: #1f4970; /* technical line-work on light */ --hairline: rgba(22,38,58,0.16); /* palette tokens (overridden per [data-palette]) */ --accent: #f59e0b; /* fills + accent text on DARK only */ --accent-2: #fbbf24; --accent-text: #11243a; /* text/icon ON accent fill */ --accent-ink: oklch(0.52 0.13 67); /* accent as TEXT on light paper (AA-safe) */ --hero-bg: #0a2238; --hero-bg-2: #0d2c46; --hero-grid: rgba(120,190,255,0.16); --hero-grid-2: rgba(120,190,255,0.28); --hero-line: rgba(190,224,255,0.85); --hero-ink: #eaf3ff; --hero-ink-soft:rgba(199,221,247,0.72); --hero-glow: rgba(245,158,11,0.30); --shadow-rgb: 16 30 48; /* drop-shadow ink — use rgb(var(--shadow-rgb) / a) */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 1180px; --radius: 2px; } /* ===== Palette variations (troque data-palette no ) ===== */ [data-palette="solar"]{ --accent:#f59e0b; --accent-2:#fbbf24; --accent-text:#11243a; --accent-ink:oklch(0.52 0.13 67); --hero-bg:#0a2238; --hero-bg-2:#0d2c46; --hero-grid:rgba(120,190,255,0.15); --hero-grid-2:rgba(120,190,255,0.28); --hero-line:rgba(196,226,255,0.85); --hero-glow:rgba(245,158,11,0.32); } [data-palette="heliografia"]{ --accent:#2b8aef; --accent-2:#5aa9ff; --accent-text:#ffffff; --accent-ink:oklch(0.52 0.15 252); --hero-bg:#062a4a; --hero-bg-2:#093b66; --hero-grid:rgba(150,205,255,0.18); --hero-grid-2:rgba(150,205,255,0.32); --hero-line:rgba(214,236,255,0.9); --hero-glow:rgba(43,138,239,0.34); } [data-palette="energia"]{ --accent:#15b66e; --accent-2:#34d98a; --accent-text:#06281c; --accent-ink:oklch(0.515 0.12 160); --hero-bg:#06241d; --hero-bg-2:#0a3527; --hero-grid:rgba(120,235,190,0.14); --hero-grid-2:rgba(120,235,190,0.26); --hero-line:rgba(196,255,228,0.85); --hero-glow:rgba(21,182,110,0.30); } [data-palette="grafite"]{ --accent:#e5484d; --accent-2:#ff6b6f; --accent-text:#ffffff; --accent-ink:oklch(0.525 0.17 25); --hero-bg:#16181c; --hero-bg-2:#202329; --hero-grid:rgba(220,225,235,0.10); --hero-grid-2:rgba(220,225,235,0.20); --hero-line:rgba(232,236,244,0.85); --hero-glow:rgba(229,72,77,0.28); } /* ---------- Reset / base ---------- */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--accent); color:var(--accent-text); } /* graph-paper background applied to body */ body{ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px); background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px; } /* ---------- Mono label utility (CAD annotations) ---------- */ .mono{ font-family:'IBM Plex Mono',monospace; } .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); } .tag-accent{ color:var(--accent-ink); } /* section index chip e.g. PR-02 */ .idx{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.14em; display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); } .idx::before{ content:""; width:26px; height:1px; background:var(--line); display:inline-block; } /* ---------- Layout shell ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } section{ position:relative; } /* crop-mark corners for framed blocks */ .crop{ position:relative; } .crop::before,.crop::after{ content:""; position:absolute; width:14px; height:14px; pointer-events:none; border-color:var(--line); border-style:solid; border-width:0; } /* ---------- Headings ---------- */ h1,h2,h3{ font-family:'Archivo',sans-serif; line-height:1.02; margin:0; color:var(--ink); text-wrap:balance; } h1{ font-weight:900; letter-spacing:-0.02em; } h2{ font-weight:800; letter-spacing:-0.015em; } .display{ font-size:clamp(34px,5.4vw,54px); } .h-sec{ font-size:clamp(26px,3.4vw,42px); font-weight:800; letter-spacing:-0.015em; } .lead{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-soft); max-width:60ch; text-wrap:pretty; } /* ---------- Buttons ---------- */ .btn{ font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:0.01em; font-size:16px; line-height:1; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:12px; padding:18px 26px; border-radius:var(--radius); background:var(--accent); color:var(--accent-text); position:relative; transition:transform .15s var(--ease-out-quart), box-shadow .2s var(--ease-out-quart), filter .2s ease; box-shadow: 0 0 0 1px var(--accent), 6px 6px 0 0 rgb(var(--shadow-rgb) / 0.18); } .btn:hover{ transform:translate(-1px,-1px); box-shadow: 0 0 0 1px var(--accent), 8px 8px 0 0 rgb(var(--shadow-rgb) / 0.22); filter:saturate(1.05); } .btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 1px var(--accent), 2px 2px 0 0 rgb(var(--shadow-rgb) / 0.22); } .btn .arrow{ font-family:'IBM Plex Mono',monospace; font-weight:600; } .btn-ghost{ background:transparent; color:var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover{ background:rgba(31,73,112,0.06); box-shadow: inset 0 0 0 1.5px var(--line); transform:translate(-1px,-1px); } .btn-lg{ padding:22px 34px; font-size:18px; } /* tiny price subtext under cta */ .cta-sub{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint); letter-spacing:0.04em; margin-top:12px; } /* ============================================================ STICKY HEADER — title-block bar ============================================================ */ .topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 86%, transparent); backdrop-filter:blur(8px) saturate(1.1); border-bottom:1px solid var(--line); } .topbar-inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px; height:62px; display:flex; align-items:center; gap:22px; } .brand{ display:flex; align-items:center; gap:11px; } .brand-mark{ width:30px; height:30px; flex:none; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--line); } .brand-name{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; letter-spacing:0.02em; } .brand-name b{ color:var(--accent); } .topbar-fields{ display:flex; gap:0; margin-left:auto; } .tb-field{ padding:0 16px; border-left:1px solid var(--hairline); display:flex; flex-direction:column; justify-content:center; gap:2px; } .tb-field .k{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.16em; color:var(--ink-faint); text-transform:uppercase; } .tb-field .v{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--ink); } .topbar .btn{ padding:11px 18px; font-size:13px; box-shadow:0 0 0 1px var(--accent), 3px 3px 0 0 rgba(16,30,48,0.18); } .topbar .btn:hover{ transform:translateY(-1px); } /* ============================================================ HERO — true blueprint field ============================================================ */ .hero{ background: radial-gradient(120% 90% at 80% -10%, var(--hero-bg-2), var(--hero-bg) 60%); color:var(--hero-ink); position:relative; overflow:hidden; border-bottom:1px solid var(--line); } .hero::before{ /* blueprint grid */ content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px), linear-gradient(var(--hero-grid-2) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-2) 1px, transparent 1px); background-size: 30px 30px, 30px 30px, 150px 150px, 150px 150px; mask-image: radial-gradient(120% 100% at 30% 30%, #000 55%, transparent 100%); opacity: .5; /* grade na metade da intensidade — textura de fundo, não elemento que compete */ } .hero-inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; position:relative; z-index:2; min-height:600px; } .hero h1{ color:var(--hero-ink); } .hero .kicker{ color:var(--accent); margin-bottom:22px; } .hero .sub{ color:var(--hero-ink-soft); margin:22px 0 32px; font-size:clamp(15px,1.5vw,18px); max-width:52ch; } .hero-cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .hero .btn-ghost{ color:var(--hero-ink); box-shadow:inset 0 0 0 1.5px var(--hero-line); } .hero .btn-ghost:hover{ background:rgba(255,255,255,0.06); box-shadow:inset 0 0 0 1.5px var(--hero-line); } /* hero meta strip */ .hero-meta{ display:flex; gap:26px; margin-top:34px; padding-top:22px; border-top:1px solid var(--hero-grid-2); flex-wrap:wrap; } .hero-meta .m .n{ font-family:'Archivo',sans-serif; font-weight:800; font-size:24px; color:var(--hero-ink); } .hero-meta .m .l{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--hero-ink-soft); } .hero-meta .m .n b{ color:var(--accent); } /* hero diagram frame */ .diagram-frame{ position:relative; } .diagram-frame .frame-tag{ position:absolute; top:-10px; left:14px; background:var(--hero-bg); padding:0 10px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.16em; color:var(--hero-ink-soft); text-transform:uppercase; } .diagram-frame .frame-tag.r{ left:auto; right:14px; } .diagram-box{ border:1px solid var(--hero-line); padding:18px; border-radius:2px; background:rgba(0,0,0,0.12); } .diagram-box img{ width:100%; height:auto; display:block; border-radius:2px; } /* dimension caption under diagram */ .dim-row{ display:flex; justify-content:space-between; margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; color:var(--hero-ink-soft); text-transform:uppercase; } /* ===== DEMO / VÍDEO (tela do conteúdo) — seção CLARA (papel), como o corpo. A transição escuro(hero) -> claro separa do hero; o vídeo escuro vira a "tela". ===== */ /* Variação C — vídeo cinematográfico com HUD de gravação de tela */ .demo-hud{ position:relative; max-width:1060px; } .demo-hud video{ width:100%; height:auto; display:block; border-radius:3px; aspect-ratio:1342/838; background:#06121f; pointer-events:none; user-select:none; box-shadow:0 20px 46px -22px rgb(var(--shadow-rgb) / 0.42); } .hud-c{ position:absolute; width:28px; height:28px; border:2px solid var(--accent); pointer-events:none; } .hud-c.tl{ top:-2px; left:-2px; border-right:none; border-bottom:none; } .hud-c.tr{ top:-2px; right:-2px; border-left:none; border-bottom:none; } .hud-c.bl{ bottom:-2px; left:-2px; border-right:none; border-top:none; } .hud-c.br{ bottom:-2px; right:-2px; border-left:none; border-top:none; } .hud-rec{ position:absolute; top:15px; left:15px; display:flex; align-items:center; gap:9px; background:rgba(6,18,31,.82); padding:7px 13px; border-radius:3px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--hero-ink); } .hud-rec::before{ content:""; width:9px; height:9px; border-radius:50%; background:#ff5b5b; animation:recblink 1.2s steps(1) infinite; } .hud-rec i{ font-style:normal; color:var(--hero-ink-soft); } .hud-dim{ position:absolute; top:15px; right:15px; background:rgba(6,18,31,.82); padding:6px 11px; border-radius:3px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--hero-ink-soft); } @keyframes recblink{ 50%{ opacity:.2; } } @media (max-width:600px){ .hud-c{ width:18px; height:18px; } .hud-rec,.hud-dim{ font-size:10px; padding:5px 9px; } } /* ============================================================ GENERIC SECTION ============================================================ */ .sec{ padding:88px 0; } .sec-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:44px; max-width:62ch; } .sec-head .idx{ margin-bottom:2px; } /* ---------- Problem list (carimbo "RETRABALHO") ---------- */ .painlist{ list-style:none; margin:0; padding:0; display:grid; gap:2px; } .painlist li{ display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px dashed var(--hairline); } .painlist li .x{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent-ink); flex:none; margin-top:3px; font-weight:600; } .painlist li span:last-child{ color:var(--ink-soft); } /* ---------- Problem: variante com carimbo "RETRABALHO" ---------- */ .stampwrap{ position:relative; } .painlist.two{ grid-template-columns:1fr 1fr; gap:0 48px; } .ret-stamp{ position:absolute; top:-8px; right:0; transform:rotate(-8deg); pointer-events:none; font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(20px,2.6vw,32px); letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); border:3px double var(--accent-ink); border-radius:7px; padding:7px 16px; mix-blend-mode:multiply; opacity:.92; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 35%, transparent); } /* telas médias: carimbo sai de cima do título e vira selo no topo */ @media(max-width:880px){ .ret-stamp{ position:static; display:inline-block; transform:rotate(-3deg); margin-bottom:18px; font-size:24px; } } @media(max-width:600px){ .painlist.two{ grid-template-columns:1fr; gap:0; } } /* ---------- Solução: Antes × Depois ---------- */ .plate{ border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--hero-bg); padding:10px; } .plate img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:1px; } .ba-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; margin-top:8px; } .ba-grid figure{ margin:0; } .ba-tag{ display:block; margin-bottom:9px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); } .ba-tag.on{ color:var(--accent-ink); } .ba-pane{ aspect-ratio:1.41; } .ba-blank{ position:relative; border:1px dashed var(--hairline); border-radius:2px; background:#fbfcfd; background-image:linear-gradient(rgba(31,73,112,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,73,112,0.05) 1px,transparent 1px); background-size:22px 22px; display:flex; align-items:center; justify-content:center; } .ba-blank span{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em; color:#9aa6b2; text-transform:uppercase; } .ba-cursor{ position:absolute; left:50%; top:50%; width:2px; height:30px; background:var(--accent-ink); transform:translate(60px,-50%); animation:blink 1.1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0; } } .ba-arrow{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:30px; color:var(--accent-ink); text-align:center; } .ba-grid figcaption{ margin-top:12px; font-size:14px; color:var(--ink-soft); line-height:1.45; } @media(max-width:720px){ .ba-grid{ grid-template-columns:1fr; gap:16px; } .ba-arrow{ transform:rotate(90deg); } } /* ---------- Mechanism steps ---------- */ .steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; counter-reset:s; } .step{ padding:24px 22px 26px; border:1px solid var(--hairline); border-right:none; background:var(--sheet); position:relative; } .step:last-child{ border-right:1px solid var(--hairline); } .step .sn{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; color:var(--accent-ink); font-weight:600; } .step h3{ font-size:17px; margin:14px 0 8px; font-weight:700; font-family:'Archivo'; } .step p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; } .step .node{ position:absolute; top:24px; right:20px; width:9px; height:9px; border:1.5px solid var(--line); border-radius:50%; } /* ---------- Benefits grid ---------- */ .bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); } .bcell{ background:var(--paper); padding:26px 24px; display:flex; flex-direction:column; gap:12px; transition:background .2s var(--ease-out-quart); } .bcell:hover{ background:var(--sheet); } .bcell .bi{ width:34px; height:34px; color:var(--accent); } .bcell .bn{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint); letter-spacing:0.14em; } .bcell h3{ font-size:16.5px; font-weight:700; font-family:'Archivo'; line-height:1.2; } .bcell p{ margin:0; font-size:13.5px; color:var(--ink-soft); } /* ---------- For whom / not for whom ---------- */ .fit{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .fitcard{ border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--sheet); } .fitcard.no{ border-style:dashed; } .fitcard .fh{ padding:18px 24px; border-bottom:1px solid var(--hairline); display:flex; align-items:center; gap:12px; } .fitcard .fh .badge{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.1em; padding:5px 10px; border-radius:2px; } .fitcard.yes .fh .badge{ background:var(--accent); color:var(--accent-text); } .fitcard.no .fh .badge{ background:transparent; color:var(--ink-soft); border:1px solid var(--hairline); } .fitcard .fh h3{ font-size:18px; font-family:'Archivo'; font-weight:700; } .fitlist{ list-style:none; margin:0; padding:14px 24px 24px; display:grid; gap:11px; } .fitlist li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); } .fitlist li .mk{ flex:none; margin-top:2px; font-family:'IBM Plex Mono',monospace; font-weight:600; } .fitcard.yes .mk{ color:var(--accent-ink); } .fitcard.no .mk{ color:var(--ink-faint); } /* ---------- Proof band ---------- */ .proof{ background:var(--hero-bg); color:var(--hero-ink); position:relative; overflow:hidden; border-block:1px solid var(--line); } .proof::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(100% 120% at 80% 0,#000,transparent 75%); } .proof-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.5fr 0.8fr; gap:48px; align-items:center; } .proof .big{ font-family:'Archivo'; font-weight:900; font-size:clamp(56px,9vw,118px); line-height:0.9; letter-spacing:-0.03em; color:var(--hero-ink); } .proof .big b{ color:var(--accent); } .proof .biglabel{ font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--hero-ink-soft); margin-top:10px; } .proof p{ color:var(--hero-ink-soft); font-size:16px; max-width:52ch; margin-top:18px; } .proof .seal-col{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; } .proof .seal{ color:var(--accent); width:160px; height:160px; flex:none; } .proof .seal svg{ width:100%; height:100%; display:block; } .proof .sig{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--hero-ink-soft); } .proof .sig b{ display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; letter-spacing:0; text-transform:none; color:var(--hero-ink); margin-top:4px; } /* ---------- Offer (empilhamento de valor) ---------- */ .offer{ position:relative; } .ofb-box{ max-width:680px; margin-inline:auto; border:1.5px solid var(--line); border-radius:3px; background:var(--sheet); padding:38px 40px 32px; box-shadow:10px 10px 0 0 rgb(var(--shadow-rgb) / 0.10); } .ofb-stack{ list-style:none; margin:0; padding:0; } .ofb-stack li{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px dashed var(--hairline); } .ofb-stack li:first-child{ border-top:1px dashed var(--hairline); } .ofb-stack .t{ font-size:15.5px; color:var(--ink); } .ofb-stack .t b{ font-weight:600; } .ofb-stack .t i{ display:block; font-style:normal; color:var(--ink-soft); font-size:13px; margin-top:3px; } .ofb-stack .st{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--hairline); padding:3px 8px; border-radius:2px; flex:none; } .ofb-stack .st.bonus{ background:var(--accent); color:var(--accent-text); border-color:transparent; } .ofb-close{ display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:26px; flex-wrap:wrap; } .ofb-close .pricetag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); } .ofb-close .price{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-0.03em; line-height:0.9; color:var(--ink); margin:6px 0 2px; } .ofb-close .price .cur{ font-size:24px; vertical-align:top; color:var(--accent-ink); margin-right:1px; } .ofb-close .price .val{ font-size:72px; } .ofb-close .install{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); margin-top:3px; } .ofb-close .btn{ flex:1; min-width:220px; justify-content:center; } .offer .trust-row{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:24px; padding-top:20px; border-top:1px dashed var(--hairline); } .offer .trust-row span{ display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); } .offer .trust-row svg{ width:15px; height:15px; color:var(--accent-ink); flex:none; } /* ---------- FAQ accordion ---------- */ .faq{ border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--hairline); } .faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 0; display:flex; align-items:center; gap:20px; font-family:'Archivo'; font-weight:700; font-size:18px; color:var(--ink); } .faq-q .qn{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint); flex:none; width:34px; } .faq-q .qt{ flex:1; } .faq-q .qi{ flex:none; width:22px; height:22px; position:relative; } .faq-q .qi::before,.faq-q .qi::after{ content:""; position:absolute; background:var(--accent); transition:transform .25s ease; } .faq-q .qi::before{ top:10px; left:2px; width:18px; height:2px; } .faq-q .qi::after{ top:2px; left:10px; width:2px; height:18px; } .faq-item.open .qi::after{ transform:scaleY(0); } .faq-a{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease-out-expo); } .faq-a .inner{ padding:0 0 26px 54px; color:var(--ink-soft); font-size:15px; max-width:70ch; } /* ---------- Final CTA ---------- */ .finalcta{ background:var(--hero-bg); color:var(--hero-ink); position:relative; overflow:hidden; border-top:1px solid var(--line); } .finalcta::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(120% 120% at 50% 0,#000,transparent 80%); } .finalcta-inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto; } .finalcta h2{ color:var(--hero-ink); font-size:clamp(30px,4.6vw,56px); } .finalcta p{ color:var(--hero-ink-soft); font-size:18px; margin:20px auto 34px; max-width:54ch; } /* ============================================================ FOOTER — full title block (carimbo) ============================================================ */ .foot{ background:var(--paper-2); border-top:1px solid var(--line); padding:0; } .titleblock{ max-width:var(--maxw); margin:0 auto; border-inline:1px solid var(--hairline); } .tb-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; } .tb-cell{ border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:16px 18px; } .tb-cell:last-child{ border-right:none; } .tb-cell .k{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.16em; color:var(--ink-faint); text-transform:uppercase; } .tb-cell .v{ font-family:'Archivo'; font-weight:700; font-size:15px; color:var(--ink); margin-top:5px; } .tb-cell .v.mono{ font-family:'IBM Plex Mono'; font-weight:500; font-size:13px; } .tb-wide{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; } .foot-legal{ max-width:var(--maxw); margin:0 auto; padding:18px 18px 40px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint); letter-spacing:0.03em; line-height:1.7; } /* ============================================================ FOCUS · MOTION ============================================================ */ /* Visible keyboard focus on every interactive control */ :focus-visible{ outline:2px solid var(--line); outline-offset:3px; border-radius:1px; } .hero :focus-visible,.proof :focus-visible,.finalcta :focus-visible{ outline-color:var(--hero-ink); } :focus:not(:focus-visible){ outline:none; } /* One orchestrated page-load on the hero only (no scroll-reveal reflex) */ @keyframes riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @keyframes diagramIn{ from{ opacity:0; transform:translateY(16px) scale(0.985); } to{ opacity:1; transform:none; } } .hero .kicker{ animation:riseIn .6s var(--ease-out-expo) both; } .hero h1{ animation:riseIn .7s var(--ease-out-expo) .06s both; } .hero .sub{ animation:riseIn .7s var(--ease-out-expo) .14s both; } .hero-cta-row{ animation:riseIn .7s var(--ease-out-expo) .22s both; } .hero-meta{ animation:riseIn .7s var(--ease-out-expo) .30s both; } .hero .diagram-frame{ animation:diagramIn .8s var(--ease-out-expo) .18s both; } /* Reduced motion: drop entrance + smooth-scroll, keep everything visible */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; transition-delay:0 !important; scroll-behavior:auto !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; gap:36px; padding-top:56px; padding-bottom:56px; min-height:0; } .diagram-frame{ order:2; } .steps{ grid-template-columns:1fr 1fr; } .step{ border-right:1px solid var(--hairline); } .bgrid{ grid-template-columns:1fr 1fr; } .fit{ grid-template-columns:1fr; } .proof-inner{ grid-template-columns:1fr; gap:28px; } .tb-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .topbar-fields{ display:none; } .sec{ padding:60px 0; } .steps{ grid-template-columns:1fr; } .bgrid{ grid-template-columns:1fr; } .hero-meta{ gap:18px; } .wrap,.topbar-inner,.hero-inner{ padding-left:18px; padding-right:18px; } .ofb-box{ padding:26px 20px; } .ofb-close{ flex-direction:column; align-items:stretch; text-align:center; } .faq-a .inner{ padding-left:0; } } /* ============================================================ MOBILE CONTEXT — toque + safe-area (notch) ============================================================ */ html{ -webkit-text-size-adjust:100%; } a, button, .btn, .faq-q, summary{ -webkit-tap-highlight-color:transparent; } /* Aparelhos de toque não têm hover real: não deixa o "lift" do botão grudar depois do tap. Os :active existentes seguem dando o feedback. */ @media (hover: none){ .btn:hover, .btn-ghost:hover, .topbar .btn:hover, .hero .btn-ghost:hover{ transform:none; } } /* Notch / safe-area: mantém o conteúdo fora do inset (paisagem em telas com notch) e preenche o topo do header. No-op onde o inset é 0 (todo aparelho sem notch), então não muda nada no desktop. */ @supports (padding:max(0px)){ .wrap, .topbar-inner, .hero-inner{ padding-left:max(28px, env(safe-area-inset-left)); padding-right:max(28px, env(safe-area-inset-right)); } .foot-legal{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); } .topbar{ padding-top:env(safe-area-inset-top); } @media (max-width:600px){ .wrap, .topbar-inner, .hero-inner{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); } } }