/* ========================================================================== YVAN NUNES — Consultor de Negócios Landing page · Obsidian / Champagne Gold, per the brand board -------------------------------------------------------------------------- 1. Design tokens 2. Reset & base 3. Layout primitives (container, section, titles, pill) 4. Buttons 5. Header 6. Hero 7. Marquee strip 8. Timeline / diferenciais 9. Stats banner 10. Services grid 11. Testimonials 12. Chapter + collage 13. CTA band 14. About card 15. FAQ 16. Footer + floating WhatsApp 17. Reveal animations 18. Responsive 19. Utility overrides 20. Brand-board refinements ========================================================================== */ /* ============ 1. DESIGN TOKENS ============ */ /* Palette, type and graphic language taken from the Yvan Nunes brand board: Obsidian Black, Graphite, Champagne Gold, Performance Yellow, Warm Ivory. */ :root{ /* backgrounds */ --bg: #0B0B0C; /* Obsidian Black */ --bg-2: #08080A; --bg-3: #131315; --surface: #1C1D1F; /* Graphite */ --surface-2: #232426; /* accents */ --blue: #C7A15A; /* Champagne Gold — the primary accent */ --blue-2: #B8904A; --blue-bright: #C7A15A; --cyan: #E4B336; /* Performance Yellow — the highlight */ --blue-soft: #D8BC85; --ivory: #F4F0EB; /* Warm Ivory */ --ink: #0B0B0C; /* text that sits on gold */ /* channel forms, so alpha variants follow the active theme */ --bg-rgb: 11,11,12; --accent-rgb: 199,161,90; --accent2-rgb: 228,179,54; /* Obsidian on gold is 7.8:1; white on gold is 2.4:1 and would fail. */ --on-accent: #0B0B0C; /* text */ --white: #FFFFFF; --muted: #93908B; --muted-2: #B0ACA6; /* lines & glows */ --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13); --line-gold: rgba(var(--accent-rgb),.32); --glow: rgba(var(--accent-rgb),.34); --glow-soft: rgba(var(--accent-rgb),.15); /* gradients — mirror the metallic ramp used by the logo mark */ --grad-btn: linear-gradient(100deg, #B8904A 0%, #C7A15A 38%, #E4B336 100%); --grad-band: linear-gradient(115deg, #9C7A34 0%, #C7A15A 44%, #E4B336 100%); /* type */ --font-head: 'Manrope', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* spacing scale */ --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-120: 120px; /* layout */ --container: 1200px; --gutter: 48px; --radius: 12px; --radius-sm: 6px; --ease: cubic-bezier(.22,.61,.36,1); } /* Alternate accent system — add class="theme-blue" to for the electric blue variant. Text on the accent flips to white because blue is dark enough to carry it; on gold it must stay obsidian (see --on-accent). */ .theme-blue{ --bg: #07090F; --bg-2: #090B12; --bg-3: #0D1018; --surface: #111318; --surface-2: #13151A; --blue: #165DFF; --blue-2: #1267FF; --blue-bright: #1388FF; --cyan: #00A6FF; --blue-soft: #5B8CFF; --muted: #8D939F; --muted-2: #A3A7AF; --line-gold: rgba(var(--accent-rgb),.34); --glow: rgba(var(--accent-rgb),.35); --glow-soft: rgba(var(--accent-rgb),.16); --grad-btn: linear-gradient(90deg, #174BFF 0%, #3988FF 100%); --grad-band: linear-gradient(115deg, #0C46E8 0%, #165DFF 42%, #1E7BFF 100%); --on-accent: #FFFFFF; --bg-rgb: 7,9,15; --accent-rgb: 22,93,255; --accent2-rgb: 0,166,255; } /* ============ 2. RESET & BASE ============ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--white); font-family:var(--font-body); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; margin:0; letter-spacing:-.02em; line-height:1.12; } p{ margin:0; } /* is only a format-selection wrapper — take it out of the box tree so the stays the direct flex/grid item every layout rule below targets. */ picture{ display:contents; } img,svg{ display:block; max-width:100%; } img{ height:auto; } ul,ol{ margin:0; padding:0; list-style:none; } a{ color:inherit; text-decoration:none; } .accent{ color:var(--blue-bright); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } ::selection{ background:var(--blue); color:#fff; } /* ============ 3. LAYOUT PRIMITIVES ============ */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .section{ position:relative; padding-block:var(--s-120); background:var(--bg); } .section--intro{ background:var(--bg-2); } .section--services{ background:var(--bg); } .section--chapter{ background:var(--bg-2); padding-block:110px; } .section--about{ padding-block:110px; } .section--faq{ padding-block:100px 110px; } .section-head{ text-align:center; max-width:820px; margin-inline:auto; margin-bottom:var(--s-64); } .section-title{ font-size:clamp(28px, 3.2vw, 41px); line-height:1.18; font-weight:700; } .section-sub{ margin-top:var(--s-16); color:var(--muted); font-size:14px; } .section-cta{ margin-top:var(--s-48); display:flex; justify-content:center; } /* ============ 4. BUTTONS ============ */ .btn{ --btn-h:52px; display:inline-flex; align-items:center; justify-content:center; height:var(--btn-h); padding-inline:32px; border:0; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.06em; white-space:nowrap; cursor:pointer; transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease); } .btn--primary{ background:var(--grad-btn); color:var(--on-accent); font-weight:700; box-shadow:0 8px 26px -12px var(--glow); } .btn--primary:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 14px 34px -10px var(--glow); } .btn--white{ background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,.14); } .btn--white:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(0,0,0,.5); } .btn--ghost{ background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--white); } .btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); } .btn--sm{ --btn-h:34px; padding-inline:18px; font-size:11px; letter-spacing:.08em; } .btn--lg{ --btn-h:54px; padding-inline:34px; } /* ============ 5. HEADER ============ */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(var(--bg-rgb),.74); border-bottom:1px solid transparent; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background-color .35s var(--ease), border-color .35s var(--ease); } .site-header.is-stuck{ background:rgba(var(--bg-rgb),.94); border-bottom-color:var(--line); } .header__inner{ display:flex; align-items:center; gap:var(--s-32); height:68px; } .brand{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; } /* The mark itself, lifted from the brand board. Left as artwork — no frame, no tint — so the metallic ramp reads the way the identity draws it. */ .brand__mark{ width:auto; height:32px; flex:0 0 auto; filter:drop-shadow(0 3px 12px rgba(var(--accent-rgb),.3)); } .brand__text{ display:flex; flex-direction:column; line-height:1.05; } .brand__text strong{ font-family:var(--font-head); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .brand__text strong span{ color:var(--blue-bright); font-weight:500; margin-left:.34em; } .brand__text em{ font-style:normal; font-size:7.5px; letter-spacing:.26em; color:var(--muted); text-transform:uppercase; margin-top:4px; } .header__nav{ display:flex; align-items:center; gap:var(--s-32); margin-left:auto; } .header__nav a{ position:relative; font-size:12.5px; color:var(--muted-2); letter-spacing:.02em; transition:color .25s var(--ease); } .header__nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--blue-bright); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .header__nav a:hover{ color:var(--white); } .header__nav a:hover::after{ transform:scaleX(1); } .header__actions{ display:flex; align-items:center; gap:10px; margin-left:var(--s-24); } .header__burger{ display:none; width:38px; height:38px; margin-left:auto; border:1px solid var(--line-2); border-radius:8px; background:rgba(255,255,255,.04); cursor:pointer; padding:0; place-items:center; gap:4px; } .header__burger span{ display:block; width:16px; height:1.5px; background:#fff; transition:transform .3s var(--ease), opacity .2s var(--ease); } .header__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } .header__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .header__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); } .mobile-nav{ border-top:1px solid var(--line); background:rgba(var(--bg-rgb),.98); padding:var(--s-16) var(--gutter) var(--s-24); display:flex; flex-direction:column; gap:2px; } .mobile-nav a{ padding:13px 0; font-size:14px; color:var(--muted-2); border-bottom:1px solid var(--line); } .mobile-nav .btn{ margin-top:var(--s-16); border-bottom:0; color:#fff; } /* ============ 6. HERO ============ */ /* Full-bleed: a foto ocupa a seção inteira e o texto fica sobre ela, apoiado por um scrim que escurece o lado esquerdo o suficiente para o contraste. */ .hero{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; min-height:min(84vh, 680px); background:var(--bg); } /* Master panorâmico (1672x941): o sujeito está à direita e o capô escuro à esquerda já é a área de leitura, então o scrim só precisa firmar o contraste em vez de escurecer meia imagem. */ .hero__bg{ position:absolute; inset:0; z-index:-2; } .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 42%; filter:contrast(1.03) saturate(1.04) sepia(.05); } .hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(90deg, rgba(var(--bg-rgb),.92) 0%, rgba(var(--bg-rgb),.72) 30%, rgba(var(--bg-rgb),.34) 52%, rgba(var(--bg-rgb),.08) 74%, rgba(var(--bg-rgb),.22) 100%), linear-gradient(180deg, rgba(var(--bg-rgb),.62) 0%, rgba(var(--bg-rgb),0) 26%, rgba(var(--bg-rgb),0) 60%, var(--bg) 100%); } .hero__inner{ position:relative; width:100%; padding-block:var(--s-64); } .hero__copy{ max-width:560px; } .hero__title{ font-size:clamp(31px, 3.3vw, 46px); line-height:1.14; font-weight:700; letter-spacing:-.025em; text-shadow:0 2px 24px rgba(0,0,0,.45); } .hero__lead{ margin-top:var(--s-24); max-width:440px; color:var(--muted-2); font-size:14px; line-height:1.75; text-shadow:0 1px 16px rgba(0,0,0,.5); } .hero__copy .btn{ margin-top:var(--s-32); } /* ============ 7. MARQUEE STRIP ============ */ .marquee{ position:relative; overflow:hidden; height:40px; background:var(--bg-3); border-block:1px solid var(--line); display:flex; align-items:center; } .marquee__track{ display:flex; gap:26px; align-items:center; white-space:nowrap; animation:marquee 34s linear infinite; will-change:transform; } .marquee__track span{ font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.22); } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ============ 8. TIMELINE ============ */ .timeline{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:40px; } .timeline__item{ position:relative; display:grid; grid-template-columns:32px 1fr; gap:var(--s-24); padding-bottom:40px; } .timeline__item:last-child{ padding-bottom:0; } /* vertical connecting line */ .timeline__item:not(:last-child)::before{ content:""; position:absolute; left:15.5px; top:40px; bottom:0; width:1px; background:linear-gradient(180deg, var(--blue), rgba(var(--accent-rgb),.06)); } .timeline__icon{ display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--blue-bright); box-shadow:0 0 18px -6px var(--glow); } .timeline__body h3{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin-bottom:8px; } .timeline__body p{ color:var(--muted); font-size:13.5px; line-height:1.8; max-width:64ch; } /* ============ 9. STATS BANNER ============ */ .stats{ background:var(--grad-band); position:relative; overflow:hidden; } .stats::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, rgba(255,255,255,.22), transparent 62%); pointer-events:none; } .stats__inner{ position:relative; z-index:1; min-height:290px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:var(--s-64); } .stats__number{ font-family:var(--font-head); font-size:clamp(46px, 6.4vw, 84px); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--on-accent); text-shadow:0 10px 40px rgba(0,0,0,.14); } .stats__plus{ color:var(--on-accent); opacity:.55; } .stats__label{ margin-top:var(--s-24); font-family:var(--font-head); font-size:clamp(17px, 2vw, 27px); font-weight:600; color:var(--on-accent); letter-spacing:-.01em; opacity:.86; } /* ============ 10. SERVICES GRID ============ */ .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:1060px; margin-inline:auto; } .card{ position:relative; overflow:hidden; min-height:196px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); } /* small blue glowing detail at the top edge of every card */ .card__spark{ position:absolute; top:0; left:26px; width:56px; height:2px; border-radius:0 0 3px 3px; background:linear-gradient(90deg, var(--blue-bright), rgba(var(--accent-rgb),0)); box-shadow:0 0 14px 1px var(--glow); transform-origin:left center; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .card__icon{ display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; border:1px solid var(--line-2); border-radius:9px; background:linear-gradient(160deg, rgba(var(--accent-rgb),.16), rgba(255,255,255,.02)); color:var(--blue-bright); } .card h3{ font-size:14.5px; font-weight:600; color:var(--blue-bright); letter-spacing:-.005em; margin-bottom:10px; } .card p{ color:var(--muted); font-size:12.5px; line-height:1.75; } .card:hover{ transform:translateY(-4px); background:var(--surface-2); border-color:rgba(var(--accent-rgb),.42); box-shadow:0 18px 44px -22px var(--glow), 0 0 0 1px rgba(var(--accent-rgb),.08); } .card:hover .card__spark{ transform:scaleX(1.7); box-shadow:0 0 20px 2px var(--glow); } /* ============ 12. CHAPTER + COLLAGE ============ */ .chapter{ display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:56px; align-items:center; } .chapter__title{ font-size:clamp(30px, 3.4vw, 43px); line-height:1.14; margin-bottom:var(--s-24); } .chapter__copy p{ color:var(--muted); font-size:13.5px; line-height:1.85; margin-bottom:14px; max-width:430px; } .chapter__copy .btn{ margin-top:var(--s-16); } .collage{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(6, 92px); gap:12px; } .collage__item{ margin:0; overflow:hidden; border-radius:10px; background:var(--surface); } .collage__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .collage__item:hover img{ transform:scale(1.04); } .collage__item--a{ grid-column:1; grid-row:1 / 4; } .collage__item--b{ grid-column:2 / 4; grid-row:1 / 3; } .collage__item--c{ grid-column:2; grid-row:3 / 5; } .collage__item--d{ grid-column:3; grid-row:3 / 7; } .collage__item--e{ grid-column:1; grid-row:4 / 7; } /* ============ 13. CTA BAND ============ */ .cta-band{ background:var(--grad-band); position:relative; overflow:hidden; } .cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(66% 120% at 50% 0%, rgba(255,255,255,.2), transparent 60%); pointer-events:none; } .cta-band__inner{ position:relative; z-index:1; min-height:296px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:var(--s-48); } .cta-band h2{ font-size:clamp(27px, 3.3vw, 42px); line-height:1.2; color:var(--on-accent); } .cta-band p{ margin-top:14px; font-size:13px; color:var(--on-accent); opacity:.72; } .cta-band .btn{ margin-top:var(--s-32); } /* ============ 14. ABOUT CARD ============ */ .about{ max-width:1100px; margin-inline:auto; padding:56px; border:1px solid var(--line); border-radius:18px; background:var(--surface); display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:48px; align-items:center; } .about__name{ font-size:clamp(28px, 3vw, 38px); margin-bottom:var(--s-24); } .about__copy p{ color:var(--muted); font-size:13px; line-height:1.85; margin-bottom:13px; } .about__copy p:last-child{ margin-bottom:0; } .about__media{ position:relative; align-self:stretch; min-height:420px; border-radius:14px; } /* Pinned to the media box rather than sized by `height:100%`: the intrinsic ratio from the img's width/height attributes would otherwise win whenever the parent's height is indefinite. */ .about__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 14%; border-radius:14px; } .about__badge{ position:absolute; top:-30px; right:-30px; width:112px; height:112px; display:grid; place-items:center; border-radius:50%; background:rgba(9,11,18,.86); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:spin 26s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ============ 15. FAQ ============ */ .faq{ display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:70px; align-items:start; } .faq__aside{ position:relative; } .faq__ghost{ position:absolute; top:-46px; left:-6px; font-family:var(--font-head); font-size:132px; font-weight:800; letter-spacing:-.05em; line-height:1; color:#fff; opacity:.035; pointer-events:none; user-select:none; } .faq__title{ position:relative; font-size:clamp(28px, 3.1vw, 39px); margin-bottom:var(--s-32); } .contact-card{ display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:12px; border:1px solid rgba(var(--accent-rgb),.34); border-radius:10px; background:var(--surface); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .contact-card:hover{ transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.7); box-shadow:0 14px 34px -22px var(--glow); } .contact-card__icon{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:9px; background:rgba(var(--accent-rgb),.14); color:var(--blue-bright); } .contact-card__text{ display:flex; flex-direction:column; line-height:1.35; } .contact-card__text strong{ font-size:10.5px; font-weight:600; letter-spacing:.11em; color:var(--white); } .contact-card__text em{ font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; } /* accordion */ .faq__list{ padding-top:6px; } .qa{ border-bottom:1px solid var(--line); } .qa summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-24); min-height:52px; padding-block:15px; font-size:13px; color:var(--muted-2); cursor:pointer; list-style:none; transition:color .25s var(--ease); } .qa summary::-webkit-details-marker{ display:none; } .qa summary:hover{ color:var(--white); } .qa[open] summary{ color:var(--white); } .qa__chev{ flex:0 0 auto; width:8px; height:8px; border-right:1.6px solid var(--blue-bright); border-bottom:1.6px solid var(--blue-bright); transform:rotate(45deg) translate(-2px,-2px); transition:transform .35s var(--ease); } .qa[open] .qa__chev{ transform:rotate(-135deg) translate(-2px,-2px); } /* Height is animated inline by main.js so the closing transition also plays. Without JS the native
behaviour still reveals the answer. */ .qa__body{ overflow:hidden; color:var(--muted); font-size:12.5px; line-height:1.85; transition:height .38s var(--ease), opacity .3s var(--ease); } .qa__body p{ padding-bottom:18px; max-width:640px; } .js .qa__body{ opacity:0; } .js .qa[open] .qa__body{ opacity:1; } /* ============ 16. FOOTER ============ */ .site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:var(--s-48) var(--s-32); } .footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-32); padding-bottom:var(--s-32); border-bottom:1px solid var(--line); } .brand--footer .brand__text strong{ font-size:15px; } .socials{ display:flex; gap:10px; } .socials a{ display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line-2); border-radius:8px; color:var(--muted-2); transition:color .28s var(--ease), border-color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease); } .socials a:hover{ color:#fff; transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.6); background:rgba(var(--accent-rgb),.12); } .footer__legal{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-32); padding-top:var(--s-24); } .footer__legal p{ color:var(--muted); font-size:10.5px; line-height:1.8; max-width:640px; opacity:.72; } .footer__top{ font-size:10px; letter-spacing:.12em; color:var(--muted-2); white-space:nowrap; transition:color .25s var(--ease); } .footer__top:hover{ color:var(--blue-bright); } /* floating WhatsApp */ /* Kept on the brand gold rather than WhatsApp green: the glyph still reads as WhatsApp, and obsidian-on-gold is both on-palette and high contrast. */ .wa-float{ position:fixed; right:22px; bottom:22px; z-index:70; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--grad-btn); color:var(--on-accent); box-shadow:0 10px 30px -10px var(--glow); transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease); } .wa-float:hover{ transform:translateY(-3px) scale(1.04); filter:brightness(1.07); box-shadow:0 16px 38px -10px var(--glow); } /* ============ 17. REVEAL ANIMATIONS ============ */ /* Scoped to .js so content is never hidden when scripting is unavailable. */ .js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity, transform; } .js .reveal.is-visible{ opacity:1; transform:none; } .js .reveal--delay{ transition-delay:.12s; } /* Cards are both revealed and hover-animated: the reveal shorthand would otherwise replace their hover transition, so declare both together. */ .js .card.reveal{ transition:opacity .6s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); } /* staggered service cards */ .js .cards .card:nth-child(1){ transition-delay:.00s; } .js .cards .card:nth-child(2){ transition-delay:.07s; } .js .cards .card:nth-child(3){ transition-delay:.14s; } .js .cards .card:nth-child(4){ transition-delay:.21s; } .js .cards .card:nth-child(5){ transition-delay:.28s; } .js .cards .card:nth-child(6){ transition-delay:.35s; } .js .timeline__item:nth-child(2){ transition-delay:.09s; } .js .timeline__item:nth-child(3){ transition-delay:.18s; } @media (prefers-reduced-motion: reduce){ /* Alternativa intencional, não um kill global: os laços decorativos param, as transições funcionais encolhem mas continuam existindo para que a mudança de estado siga perceptível (acordeão, hover, foco). */ .marquee__track, .about__badge{ animation:none !important; } .js .reveal{ opacity:1; transform:none; transition:none; } *,*::before,*::after{ transition-duration:.08s !important; animation-duration:.08s !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } } /* ============ 18. RESPONSIVE ============ */ /* Laptop 1024–1439 */ @media (max-width:1300px){ :root{ --gutter:40px; } } @media (max-width:1100px){ :root{ --gutter:36px; } .section{ padding-block:96px; } .hero__inner{ min-height:500px; } .about{ padding:44px; gap:36px; } .faq{ gap:48px; } } /* Tablet 768–1023 */ @media (max-width:1023px){ :root{ --gutter:32px; } .header__nav{ display:none; } .header__actions{ display:none; } .header__burger{ display:grid; } /* Sem largura para uma faixa lateral, o scrim passa a escurecer de baixo para cima e o texto ancora na parte inferior da imagem. */ .hero{ min-height:min(76vh, 600px); align-items:flex-end; } .hero__bg img{ object-position:62% 26%; } .hero__scrim{ background: linear-gradient(180deg, rgba(var(--bg-rgb),.7) 0%, rgba(var(--bg-rgb),.28) 26%, rgba(var(--bg-rgb),.78) 62%, var(--bg) 100%); } .hero__inner{ padding-block:var(--s-48) var(--s-64); } .hero__copy{ max-width:640px; } .hero__title{ font-size:clamp(32px, 5.4vw, 42px); } .hero__lead{ max-width:560px; } .section-title{ font-size:clamp(26px, 4.2vw, 34px); } .cards{ grid-template-columns:repeat(2, 1fr); } .chapter{ grid-template-columns:1fr; gap:var(--s-48); } .chapter__copy p{ max-width:none; } .collage{ grid-template-rows:repeat(6, 76px); } .about{ grid-template-columns:1fr; gap:var(--s-32); } .about__media{ order:-1; min-height:320px; } .about__badge{ width:92px; height:92px; top:-22px; right:-8px; } .about__badge svg{ width:92px; height:92px; } .faq{ grid-template-columns:1fr; gap:var(--s-48); } .faq__ghost{ font-size:110px; top:-38px; } .footer__legal{ flex-direction:column; align-items:flex-start; gap:var(--s-16); } } /* Mobile 320–767 */ @media (max-width:767px){ :root{ --gutter:20px; } body{ font-size:14.5px; } .section{ padding-block:72px; } .section--chapter, .section--about{ padding-block:72px; } .section--faq{ padding-block:64px 80px; } .section-head{ margin-bottom:var(--s-32); } .section-title{ font-size:clamp(24px, 7.4vw, 32px); } .hero{ min-height:min(82vh, 620px); } /* origem retrato neste breakpoint (ver no HTML) */ .hero__bg img{ object-position:52% 30%; } .hero__inner{ padding-block:var(--s-32) var(--s-48); } .hero__title{ font-size:clamp(30px, 8.6vw, 38px); } .hero__title br{ display:none; } .hero__lead{ font-size:13.5px; margin-top:var(--s-16); } .btn{ --btn-h:50px; width:100%; padding-inline:20px; font-size:12px; } .btn--sm{ --btn-h:38px; width:auto; } .header__burger{ display:grid; } .mobile-nav .btn{ width:100%; } .marquee{ height:38px; } .marquee__track span{ font-size:13px; } .timeline{ gap:28px; } .timeline__item{ grid-template-columns:28px 1fr; gap:16px; padding-bottom:28px; } .timeline__item:not(:last-child)::before{ left:13.5px; top:36px; } .timeline__icon{ width:28px; height:28px; } .stats__inner{ min-height:220px; padding-block:var(--s-48); } .stats__number{ font-size:clamp(40px, 12.6vw, 56px); } .stats__label{ font-size:clamp(15px, 4.4vw, 19px); margin-top:var(--s-16); } .cards{ grid-template-columns:1fr; gap:14px; } .card{ min-height:0; padding:22px; } .chapter__title{ font-size:clamp(26px, 8vw, 34px); } .chapter__title br{ display:none; } .collage{ grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(6, 62px); gap:8px; } .collage__item--a{ grid-column:1; grid-row:1 / 4; } .collage__item--b{ grid-column:2; grid-row:1 / 3; } .collage__item--c{ grid-column:2; grid-row:3 / 5; } .collage__item--d{ grid-column:2; grid-row:5 / 7; } .collage__item--e{ grid-column:1; grid-row:4 / 7; } .cta-band__inner{ min-height:250px; padding-block:var(--s-48); } .cta-band h2{ font-size:clamp(24px, 7.4vw, 31px); } .cta-band h2 br{ display:none; } .about{ padding:26px 22px; border-radius:14px; } .about__media{ min-height:280px; } .about__badge{ width:78px; height:78px; top:-18px; right:-6px; } .about__badge svg{ width:78px; height:78px; } .faq__ghost{ font-size:82px; top:-26px; } .faq__title{ font-size:clamp(25px, 7.6vw, 31px); } .qa summary{ font-size:12.5px; min-height:48px; } .footer__inner{ flex-direction:column; align-items:flex-start; gap:var(--s-24); } .wa-float{ right:16px; bottom:16px; width:46px; height:46px; } } /* ============ 19. UTILITY OVERRIDES ============ */ [hidden]{ display:none !important; } /* ============ 20. BRAND-BOARD REFINEMENTS ============ */ /* Marquee: the board's four pillars rather than a repeated name. */ .marquee__track span::before{ content:''; display:inline-block; width:3px; height:3px; margin-right:26px; border-radius:50%; background:var(--blue-bright); vertical-align:middle; opacity:.85; } /* About: frase de fecho, separada do corpo por uma linha dourada e em texto claro — em caixa-alta espaçada uma frase desse tamanho ficaria ilegível. */ .about__copy .about__close{ margin-top:var(--s-24); margin-bottom:0; padding-top:var(--s-16); border-top:1px solid var(--line-gold); font-family:var(--font-head); font-size:15px; font-weight:500; line-height:1.6; color:var(--white); text-wrap:balance; } /* Footer: assinatura manuscrita sobre a frase de fecho do manual. */ .footer__center{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; gap:12px; } .footer__sign{ width:auto; height:64px; opacity:.42; transition:opacity .4s var(--ease); } .footer__sign:hover{ opacity:.62; } .footer__motto{ text-align:center; font-family:var(--font-head); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); } /* The photography is daylight-neutral; a light warm grade keeps it in the same family as the champagne palette instead of reading cold against it. */ .about__media img, .collage__item--a img, .collage__item--e img{ filter:contrast(1.03) saturate(1.04) sepia(.05); } @media (max-width:1023px){ .footer__center{ align-items:flex-start; } .footer__motto{ text-align:left; } } @media (max-width:767px){ .brand__mark{ height:28px; } } /* ============ 21. ACESSIBILIDADE E ESTADOS ============ */ /* --- Foco visível --------------------------------------------------------- Não havia nenhum indicador de foco no projeto: quem navega por teclado ficava sem saber onde estava. :focus-visible mostra o anel só para teclado, sem sujar o clique de mouse. O offset joga o anel para fora do elemento, sobre o obsidiano, onde o dourado tem 7,8:1. */ :where(a, button, summary, [tabindex]):focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:var(--radius-sm); } /* Sobre a faixa dourada o anel dourado sumiria — inverte para branco. */ .cta-band :where(a, button):focus-visible, .btn--white:focus-visible{ outline-color:#fff; } /* O summary do acordeão ocupa a linha toda; anel rente lê melhor que deslocado. */ .qa summary:focus-visible{ outline-offset:-2px; border-radius:4px; } /* --- Skip link ------------------------------------------------------------ Fora da tela até receber foco: primeira parada do Tab pula o header inteiro. */ .skip-link{ position:absolute; left:var(--gutter); top:0; z-index:100; padding:10px 18px; border-radius:0 0 var(--radius-sm) var(--radius-sm); background:var(--grad-btn); color:var(--on-accent); font-size:12px; font-weight:700; letter-spacing:.06em; transform:translateY(-110%); transition:transform .2s var(--ease); } .skip-link:focus-visible{ transform:translateY(0); outline-offset:-4px; } /* --- Âncoras sob o header fixo ------------------------------------------- Sem isto, clicar em "Serviços" deixa o título embaixo do header de 68px. */ [id]{ scroll-margin-top:88px; } /* --- Alvos de toque ------------------------------------------------------- Ícones de 34-38px ficavam abaixo do confortável. A área clicável cresce sem mudar o desenho, via pseudo-elemento. */ .socials a, .header__burger, .btn--sm{ position:relative; } .socials a::after, .header__burger::after{ content:""; position:absolute; inset:50% 50%; width:44px; height:44px; transform:translate(-50%,-50%); } /* --- Toque e realce ------------------------------------------------------- Remove o atraso de 300ms e o flash cinza padrão do toque. */ a, button, summary{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(var(--accent-rgb),.18); } /* --- Quebra de título ----------------------------------------------------- */ h1, h2, h3, .hero__title, .section-title, .chapter__title, .faq__title{ text-wrap:balance; } .hero__lead, .timeline__body p, .card p{ text-wrap:pretty; } /* --- Área segura no iOS --------------------------------------------------- O botão flutuante encostava no indicador de home. */ .wa-float{ right:max(22px, env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom)); } /* ============ 22. SUPERFÍCIES DO NAVEGADOR ============ As partes que não desenhamos também carregam o design. Sem isto, a barra de rolagem e o cursor de texto chegam com o padrão do navegador, que não pertence a sistema de design nenhum. */ /* Firefox */ html{ scrollbar-color: rgba(var(--accent-rgb),.42) var(--bg-2); scrollbar-width: thin; } /* WebKit / Blink */ ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:var(--bg-2); } ::-webkit-scrollbar-thumb{ border:3px solid var(--bg-2); border-radius:99px; background:rgba(var(--accent-rgb),.42); } ::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.62); } ::-webkit-scrollbar-corner{ background:var(--bg-2); } /* Cursor de texto na cor da marca */ body{ caret-color: var(--blue-bright); }