/* ================================================================== GBX MARKETING — style.css Folha de estilos principal (layout desktop-first + componentes). Media queries de responsividade ficam em responsive.css ================================================================== */ /* ------------------------------------------------------------------ 1. TOKENS DE MARCA (CSS Variables) Altere as cores/fontes aqui para propagar em todo o site. Paleta extraída da logo oficial GBX Marketing (laranja de marca #F3931F). Tema padrão é escuro; tema claro sobrescreve abaixo. ------------------------------------------------------------------ */ :root { /* Cor de marca */ --color-orange: #F3931F; --color-orange-light: #FFB259; --color-orange-dark: #C96F0E; --gradient-brand: linear-gradient(135deg, #FFB259 0%, #F3931F 55%, #C96F0E 100%); /* Tema escuro (padrão) */ --color-bg: #0A0A0D; --color-bg-alt: #101014; --color-surface: #17171D; --color-surface-2: #1D1D24; --color-surface-glass: rgba(255, 255, 255, 0.045); --color-border: rgba(255, 255, 255, 0.09); --color-text: #F5F5F7; --color-text-dim: #A0A0AC; --color-text-faint: #6B6B78; --color-white: #FFFFFF; --color-black: #000000; --shadow-elev: 0 20px 60px -20px rgba(0, 0, 0, 0.55); --shadow-orange: 0 15px 40px -12px rgba(243, 147, 31, 0.45); /* Tipografia */ --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Layout */ --container-w: 1240px; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-full: 999px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --transition: 0.4s var(--ease); } /* Tema claro — ativado via [data-theme="light"] no pelo JS */ [data-theme="light"] { --color-bg: #FAFAF8; --color-bg-alt: #F2F1ED; --color-surface: #FFFFFF; --color-surface-2: #F5F4F1; --color-surface-glass: rgba(10, 10, 13, 0.035); --color-border: rgba(10, 10, 13, 0.09); --color-text: #121214; --color-text-dim: #55555F; --color-text-faint: #8A8A93; --shadow-elev: 0 20px 60px -25px rgba(20, 20, 20, 0.18); } /* ------------------------------------------------------------------ 2. RESET E BASE ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--transition), color var(--transition); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: 1rem; color: inherit; } /* Foco visível para acessibilidade via teclado */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; } /* Respeita usuários que preferem menos animação */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } section { position: relative; padding: 120px 0; } /* Esconde o scroll da página enquanto o menu mobile está aberto */ body.no-scroll { overflow: hidden; } /* ------------------------------------------------------------------ 3. UTILITÁRIOS ------------------------------------------------------------------ */ .text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-orange); background: var(--color-surface-glass); border: 1px solid var(--color-border); padding: 8px 16px; border-radius: var(--radius-full); margin-bottom: 20px; } .eyebrow--light { color: var(--color-white); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); } .section-head { max-width: 680px; margin-bottom: 64px; } .section-head--center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } .section-title { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 16px; } .section-subtitle { color: var(--color-text-dim); font-size: 1.05rem; max-width: 60ch; } .section-head--center .section-subtitle { margin: 0 auto; } /* ------------------------------------------------------------------ 4. ANIMAÇÕES DE ENTRADA (Scroll Reveal) Elementos com [data-reveal] começam invisíveis e sobem levemente; a classe .is-visible é adicionada via JavaScript com IntersectionObserver ------------------------------------------------------------------ */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------------ 5. BOTÕES ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; padding: 15px 28px; border-radius: var(--radius-full); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); white-space: nowrap; } .btn i { font-size: 1.1em; } .btn--primary { background: var(--gradient-brand); color: #14100A; box-shadow: var(--shadow-orange); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 45px -10px rgba(243, 147, 31, 0.55); } .btn--ghost { background: var(--color-surface-glass); color: var(--color-text); border: 1px solid var(--color-border); backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: var(--color-orange); color: var(--color-orange); transform: translateY(-3px); } .btn--white { background: var(--color-white); color: #14100A; } .btn--white:hover { transform: translateY(-3px); box-shadow: 0 20px 45px -10px rgba(255,255,255,0.3); } .btn--sm { padding: 10px 20px; font-size: 0.85rem; } .btn--lg { padding: 18px 34px; font-size: 1rem; } /* ================================================================== LOADER INICIAL ================================================================== */ .loader { position: fixed; inset: 0; z-index: 9999; background: var(--color-bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease); } .loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader__mark { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; } .loader__logo { width: 56px; height: 56px; object-fit: contain; animation: pulseLogo 1.6s ease-in-out infinite; } .loader__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--color-orange); animation: spin 1.1s linear infinite; } .loader__ring--2 { inset: 14px; border-top-color: var(--color-orange-light); animation-duration: 0.8s; animation-direction: reverse; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulseLogo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.92); opacity: 0.7; } } /* ================================================================== CURSOR CUSTOMIZADO (apenas dispositivos com mouse — ver JS) ================================================================== */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s ease; opacity: 0; } .cursor-dot { width: 6px; height: 6px; background: var(--color-orange); } .cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(243,147,31,0.5); transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease, border-color .25s ease; } .has-mouse .cursor-dot, .has-mouse .cursor-ring { opacity: 1; } .cursor-ring.is-hover { width: 54px; height: 54px; border-color: var(--color-orange); } /* ================================================================== HEADER ================================================================== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; padding: 22px 0; transition: padding var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); border-bottom: 1px solid transparent; } .header.is-scrolled { padding: 14px 0; background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(16px); border-bottom-color: var(--color-border); box-shadow: 0 10px 30px -15px rgba(0,0,0,0.4); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .header__logo-img { height: 34px; width: auto; object-fit: contain; transition: height var(--transition); } .header.is-scrolled .header__logo-img { height: 28px; } .nav__list { display: flex; align-items: center; gap: 34px; } .nav__link { position: relative; font-size: 0.92rem; font-weight: 600; color: var(--color-text-dim); transition: color var(--transition); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--color-orange); transition: width var(--transition); } .nav__link:hover { color: var(--color-text); } .nav__link:hover::after { width: 100%; } .header__actions { display: flex; align-items: center; gap: 16px; } .theme-toggle { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface-glass); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), transform 0.3s var(--ease); } .theme-toggle:hover { border-color: var(--color-orange); transform: rotate(-12deg); } .theme-toggle__icon { position: absolute; font-size: 1.1rem; transition: opacity 0.3s ease, transform 0.4s var(--ease); } .theme-toggle__icon--sun { opacity: 0; transform: scale(0.4) rotate(90deg); color: var(--color-orange); } .theme-toggle__icon--moon { opacity: 1; transform: scale(1) rotate(0); } [data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: scale(1) rotate(0); } [data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: scale(0.4) rotate(-90deg); } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 30px; padding: 6px 0; } .nav-toggle__bar { width: 100%; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 340px); background: var(--color-bg-alt); border-left: 1px solid var(--color-border); z-index: 499; padding: 100px 32px 40px; transform: translateX(100%); transition: transform 0.5s var(--ease); display: flex; flex-direction: column; gap: 40px; } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav__list { display: flex; flex-direction: column; gap: 22px; } .mobile-nav__link { font-size: 1.15rem; font-weight: 600; font-family: var(--font-display); } /* ================================================================== HERO ================================================================== */ .hero { padding: 180px 0 0; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__dot-grid { position: absolute; inset: 0; background-image: radial-gradient(var(--color-border) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 100%); opacity: 0.7; } .hero__glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.35; } .hero__glow--1 { width: 520px; height: 520px; background: var(--color-orange); top: -180px; right: -120px; } .hero__glow--2 { width: 420px; height: 420px; background: var(--color-orange-dark); bottom: -160px; left: -100px; opacity: 0.22; } .hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; } .hero__title { font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin-bottom: 22px; } .hero__subtitle { font-size: 1.1rem; color: var(--color-text-dim); max-width: 52ch; margin-bottom: 36px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 56px; } .hero__stats { display: grid; grid-template-columns: repeat(4, auto); gap: 32px; } .hero__stat { display: flex; flex-direction: column; } .hero__stat-number, .hero__stat-plus { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--color-text); } .hero__stat-plus { color: var(--color-orange); } .hero__stat-label { font-size: 0.8rem; color: var(--color-text-faint); margin-top: 4px; max-width: 12ch; } /* --- Elemento assinatura: radar de precisão --- */ .hero__visual { display: flex; align-items: center; justify-content: center; } .radar { position: relative; width: 420px; height: 420px; max-width: 100%; } .radar__ring { position: absolute; border-radius: 50%; border: 1px solid var(--color-border); } .radar__ring--1 { inset: 0; } .radar__ring--2 { inset: 60px; } .radar__ring--3 { inset: 120px; border-style: dashed; } .radar__crosshair { position: absolute; inset: 0; } .radar__crosshair::before, .radar__crosshair::after { content: ''; position: absolute; background: var(--color-border); } .radar__crosshair::before { left: 0; right: 0; top: 50%; height: 1px; } .radar__crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; } .radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(243,147,31,0.55), transparent 28%); animation: radarSpin 5s linear infinite; mask-image: radial-gradient(circle, transparent 0%, black 2%); } @keyframes radarSpin { to { transform: rotate(360deg); } } .radar__core { position: absolute; inset: 150px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-elev); animation: pulseCore 3s ease-in-out infinite; } .radar__core-logo { width: 46%; } @keyframes pulseCore { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,147,31,0.35), var(--shadow-elev); } 50% { box-shadow: 0 0 0 14px rgba(243,147,31,0), var(--shadow-elev); } } .radar__blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--color-orange); box-shadow: 0 0 0 0 rgba(243,147,31,0.6); animation: blipPing 2.4s ease-out infinite; } .radar__blip--1 { top: 18%; left: 30%; animation-delay: 0s; } .radar__blip--2 { top: 65%; left: 72%; animation-delay: 0.8s; } .radar__blip--3 { top: 40%; left: 85%; animation-delay: 1.6s; } @keyframes blipPing { 0% { box-shadow: 0 0 0 0 rgba(243,147,31,0.5); } 70% { box-shadow: 0 0 0 14px rgba(243,147,31,0); } 100% { box-shadow: 0 0 0 0 rgba(243,147,31,0); } } .radar__tag { position: absolute; font-family: var(--font-mono); font-size: 0.7rem; background: var(--color-surface); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: var(--radius-full); white-space: nowrap; color: var(--color-text-dim); box-shadow: var(--shadow-elev); } .radar__tag--1 { top: 6%; right: -6%; } .radar__tag--2 { bottom: 10%; left: -10%; } .radar__tag--3 { bottom: -4%; right: 12%; } /* Faixa marquee */ .marquee { margin-top: 100px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 22px 0; overflow: hidden; } .marquee__track { display: flex; gap: 16px; width: max-content; animation: marqueeScroll 26s linear infinite; } .marquee__item { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); white-space: nowrap; } .marquee__dot { color: var(--color-orange); } @keyframes marqueeScroll { to { transform: translateX(-50%); } } /* ================================================================== QUEM SOMOS ================================================================== */ .about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; } .about__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elev); } .about__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .about__badge { position: absolute; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--color-bg) 75%, transparent); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.15); padding: 14px 18px; border-radius: var(--radius-md); color: var(--color-white); } .about__badge i { font-size: 1.6rem; color: var(--color-orange); } .about__badge strong { display: block; font-family: var(--font-display); font-size: 1rem; } .about__badge span { font-size: 0.78rem; opacity: 0.75; } .about__text { color: var(--color-text-dim); margin-bottom: 18px; max-width: 60ch; } .about__pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; } .pillar { display: flex; gap: 14px; align-items: flex-start; } .pillar i { font-size: 1.5rem; color: var(--color-orange); flex-shrink: 0; margin-top: 2px; } .pillar h3 { font-size: 1.02rem; margin-bottom: 4px; } .pillar p { font-size: 0.88rem; color: var(--color-text-faint); } /* ================================================================== SERVIÇOS ================================================================== */ .services { background: var(--color-bg-alt); } .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .service-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px 30px; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--color-orange) 45%, var(--color-border)); box-shadow: var(--shadow-elev); } .service-card__icon { width: 56px; height: 56px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-orange) 14%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--color-orange); margin-bottom: 22px; } .service-card__title { font-size: 1.25rem; margin-bottom: 10px; } .service-card__desc { color: var(--color-text-dim); font-size: 0.92rem; margin-bottom: 20px; } .service-card__benefits { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; flex-grow: 1; } .service-card__benefits li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--color-text-dim); } .service-card__benefits i { color: var(--color-orange); font-size: 1rem; } .service-card__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--color-orange); transition: gap var(--transition); } .service-card__link:hover { gap: 12px; } .service-card--featured { grid-column: span 3; background: var(--gradient-brand); color: #17110A; position: relative; overflow: hidden; /* Grid dedicado: ícone | (título+descrição+benefícios) | botão */ display: grid; grid-template-columns: auto 1fr auto; column-gap: 40px; row-gap: 10px; align-items: center; } .service-card--featured .service-card__icon { grid-column: 1; grid-row: 1 / span 3; align-self: start; } .service-card--featured .service-card__title { grid-column: 2; grid-row: 1; } .service-card--featured .service-card__desc { grid-column: 2; grid-row: 2; margin-bottom: 0; } .service-card--featured .service-card__benefits { grid-column: 2; grid-row: 3; margin-bottom: 0; } .service-card--featured .btn--white { grid-column: 3; grid-row: 1 / span 3; align-self: center; } .service-card--featured .service-card__desc, .service-card--featured .service-card__benefits li { color: rgba(23,17,10,0.78); } .service-card--featured .service-card__benefits i { color: #17110A; } .service-card__icon--white { background: rgba(23,17,10,0.12); color: #17110A; } .service-card__seal { position: absolute; top: 24px; right: 30px; background: #17110A; color: var(--color-orange-light); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 6px; } /* ================================================================== DIFERENCIAIS ================================================================== */ .why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .why-card { background: var(--color-bg); padding: 44px 34px; transition: background var(--transition); } .why-card:hover { background: var(--color-surface); } .why-card i { font-size: 1.9rem; color: var(--color-orange); margin-bottom: 18px; display: block; } .why-card h3 { font-size: 1.1rem; margin-bottom: 10px; } .why-card p { font-size: 0.9rem; color: var(--color-text-dim); } /* ================================================================== COMO FUNCIONA (Timeline) ================================================================== */ .process { background: var(--color-bg-alt); } .timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; } .timeline__line { display: none; } .timeline__item { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px 26px; transition: border-color var(--transition), transform var(--transition); } .timeline__item:hover { border-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-border)); transform: translateY(-4px); } .timeline__number { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-orange); display: block; margin-bottom: 14px; } .timeline__content h3 { font-size: 1.1rem; margin-bottom: 8px; } .timeline__content p { font-size: 0.9rem; color: var(--color-text-dim); } /* ================================================================== PORTFÓLIO ================================================================== */ .portfolio__filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; } .filter-btn { padding: 10px 20px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 600; color: var(--color-text-dim); transition: all var(--transition); } .filter-btn:hover { color: var(--color-text); border-color: var(--color-orange); } .filter-btn.is-active { background: var(--color-orange); border-color: var(--color-orange); color: #17110A; } .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .portfolio-item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3.1; cursor: pointer; transition: transform var(--transition); } .portfolio-item.is-hidden { display: none; } .portfolio-item:hover { transform: scale(1.02); } .portfolio-item__media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255,255,255,0.85); } .portfolio-item__media--1 { background: linear-gradient(135deg, #2b2b33, #17171d); } .portfolio-item__media--2 { background: linear-gradient(135deg, #3a2312, #17171d); } .portfolio-item__media--3 { background: linear-gradient(135deg, #4a2b0d, #17171d); } .portfolio-item__media--4 { background: linear-gradient(135deg, #22262b, #17171d); } .portfolio-item__media--5 { background: linear-gradient(135deg, #33241a, #17171d); } .portfolio-item__media--6 { background: linear-gradient(135deg, #2a2a30, #17171d); } .portfolio-item__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; background: linear-gradient(0deg, rgba(0,0,0,0.85) 10%, transparent 65%); opacity: 0; transform: translateY(10px); transition: all var(--transition); } .portfolio-item:hover .portfolio-item__overlay { opacity: 1; transform: translateY(0); } .portfolio-item__tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; background: var(--color-orange); color: #17110A; padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 10px; } .portfolio-item__overlay h3 { color: var(--color-white); font-size: 1.15rem; margin-bottom: 4px; } .portfolio-item__overlay p { color: rgba(255,255,255,0.75); font-size: 0.85rem; } /* ================================================================== DEPOIMENTOS ================================================================== */ .testimonials { background: var(--color-bg-alt); } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px; transition: transform var(--transition); } .testimonial-card:hover { transform: translateY(-6px); } .testimonial-card__stars { color: var(--color-orange); letter-spacing: 3px; margin-bottom: 18px; } .testimonial-card__text { font-size: 0.95rem; color: var(--color-text-dim); margin-bottom: 26px; } .testimonial-card__author { display: flex; align-items: center; gap: 14px; } .testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-brand); color: #17110A; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; } .testimonial-card__author strong { display: block; font-size: 0.92rem; } .testimonial-card__author span { font-size: 0.78rem; color: var(--color-text-faint); } /* ================================================================== CTA / CONTATO ================================================================== */ .cta-section { background: #0E0B08; overflow: hidden; } [data-theme="light"] .cta-section { background: #141110; } .cta-section__bg { position: absolute; inset: 0; opacity: 0.5; } .cta-section__inner { position: relative; text-align: center; } .cta-section__title { color: var(--color-white); font-size: clamp(2rem, 3.6vw, 3rem); max-width: 18ch; margin: 0 auto 18px; } .cta-section__text { color: rgba(255,255,255,0.65); max-width: 56ch; margin: 0 auto 56px; } .cta-section__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; text-align: left; max-width: 980px; margin: 0 auto; } .cta-form { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(16px); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 18px; } .cta-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cta-form__field { display: flex; flex-direction: column; gap: 8px; } .cta-form__field label { font-size: 0.8rem; color: rgba(255,255,255,0.6); font-weight: 600; } .cta-form__field input, .cta-form__field select, .cta-form__field textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--color-white); transition: border-color var(--transition), background var(--transition); } .cta-form__field input::placeholder, .cta-form__field textarea::placeholder { color: rgba(255,255,255,0.35); } .cta-form__field input:focus, .cta-form__field select:focus, .cta-form__field textarea:focus { border-color: var(--color-orange); background: rgba(255,255,255,0.09); outline: none; } .cta-form__field select option { color: #111; } .cta-form__submit { margin-top: 6px; width: 100%; } .cta-form__note { font-size: 0.85rem; color: var(--color-orange-light); min-height: 1.2em; } .cta-side { display: flex; flex-direction: column; gap: 16px; } .cta-side__card { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: 22px; transition: border-color var(--transition), transform var(--transition); } .cta-side__card:not(.cta-side__card--static):hover { border-color: var(--color-orange); transform: translateY(-4px); } .cta-side__card i { font-size: 1.6rem; color: var(--color-orange); flex-shrink: 0; } .cta-side__card strong { display: block; color: var(--color-white); font-size: 0.95rem; } .cta-side__card span { font-size: 0.82rem; color: rgba(255,255,255,0.55); } .cta-side__card--whats { background: rgba(37, 211, 102, 0.08); border-color: rgba(37, 211, 102, 0.25); } .cta-side__card--whats i { color: #25D366; } /* ================================================================== FAQ (Accordion) ================================================================== */ .accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .accordion__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .accordion__icon { flex-shrink: 0; font-size: 1.2rem; color: var(--color-orange); transition: transform var(--transition); } .accordion__item.is-open .accordion__icon { transform: rotate(45deg); } .accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); } .accordion__panel p { padding: 0 26px 24px; color: var(--color-text-dim); font-size: 0.92rem; max-width: 65ch; } /* ================================================================== RODAPÉ ================================================================== */ .footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-top: 90px; } .footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px; } .footer__logo { height: 34px; margin-bottom: 18px; } .footer__brand p { color: var(--color-text-faint); font-size: 0.9rem; max-width: 34ch; margin-bottom: 22px; } .footer__socials { display: flex; gap: 12px; } .footer__socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .footer__socials a:hover { background: var(--color-orange); border-color: var(--color-orange); color: #17110A; transform: translateY(-3px); } .footer__col { display: flex; flex-direction: column; gap: 14px; } .footer__col h4 { font-size: 0.95rem; margin-bottom: 6px; } .footer__col a, .footer__col span { font-size: 0.88rem; color: var(--color-text-faint); display: flex; align-items: center; gap: 8px; transition: color var(--transition); } .footer__col a:hover { color: var(--color-orange); } .footer__bottom { border-top: 1px solid var(--color-border); padding: 24px 0; } .footer__bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--color-text-faint); } /* ================================================================== BOTÕES FLUTUANTES ================================================================== */ .whatsapp-float { position: fixed; bottom: 28px; left: 28px; z-index: 400; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 12px 30px -8px rgba(37,211,102,0.6); animation: floatBounce 3.2s ease-in-out infinite; transition: transform var(--transition); } .whatsapp-float:hover { transform: scale(1.08); } @keyframes floatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .back-to-top { position: fixed; bottom: 28px; right: 28px; z-index: 400; width: 50px; height: 50px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--color-orange); border-color: var(--color-orange); color: #17110A; }