/* * Fialho Tech Custom — v1.0.2 * CSS premium usando seletores reais do site (Etapa 1) * Carregado após o CSS do Elementor — regras de mesma especificidade aqui vencem. */ /* ============================================== TOKENS — Design system alinhado ao site real ============================================== */ :root { --ft-blue: #0A66FF; --ft-blue-hover: #1D72FF; --ft-blue-dark: #2563EB; --ft-cyan: #00C2FF; --ft-navy-900: #010913; --ft-navy-800: #020B1F; --ft-navy-700: #031A42; --ft-navy-600: #041A47; --ft-navy-card: #061A40; --ft-white: #FFFFFF; --ft-text-dark: #0F172A; --ft-text-mid: #475569; --ft-card-bg: #F8FAFC; --ft-border: #E2E8F0; --ft-border-blue: #BFDBFE; --ft-radius-hero: 32px; --ft-radius-card: 24px; --ft-radius-btn: 14px; --ft-ease: cubic-bezier(0.22, 1, 0.36, 1); --ft-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06); --ft-shadow-blue: 0 10px 28px rgba(10, 102, 255, 0.32); } /* ============================================== BASE ============================================== */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(10, 102, 255, 0.16); color: inherit; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(10, 102, 255, 0.40); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(10, 102, 255, 0.70); } /* ============================================== BARRA DE PROGRESSO DE LEITURA (injetada via JS) ============================================== */ #ft-progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--ft-blue) 0%, var(--ft-cyan) 100%); z-index: 99999; pointer-events: none; transition: width 0.08s linear; border-radius: 0 2px 2px 0; } /* ============================================== HEADER — Sticky com glass effect ao rolar ============================================== */ header.elementor-location-header { position: sticky !important; top: 0; z-index: 9999; transition: background-color 0.30s var(--ft-ease), box-shadow 0.30s var(--ft-ease), backdrop-filter 0.30s ease; will-change: background-color, box-shadow; } /* Glass frosted — ativado pela classe JS .ft-scrolled no */ body.ft-scrolled header.elementor-location-header { background-color: rgba(255, 255, 255, 0.90) !important; backdrop-filter: blur(20px) saturate(200%) !important; -webkit-backdrop-filter: blur(20px) saturate(200%) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.08) !important; } /* Nav items — transição suave de cor */ .elementor-location-header .elementor-nav-menu .elementor-item { transition: color 0.22s ease !important; } /* ============================================== HERO — Background premium com camadas decorativas ============================================== */ body:not(.ft-home-page) .ft-hero { background: radial-gradient(ellipse 65% 55% at 88% 25%, rgba(37, 99, 235, 0.22) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 8% 80%, rgba(0, 194, 255, 0.09) 0%, transparent 55%), linear-gradient(rgba(10, 102, 255, 0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 102, 255, 0.032) 1px, transparent 1px), linear-gradient(145deg, var(--ft-navy-900) 0%, var(--ft-navy-800) 35%, var(--ft-navy-700) 65%, var(--ft-navy-600) 100%) !important; background-size: 100% 100%, 100% 100%, 52px 52px, 52px 52px, 100% 100% !important; border: 1px solid rgba(37, 99, 235, 0.26) !important; border-radius: var(--ft-radius-hero, 32px) !important; box-shadow: 0 32px 80px rgba(2, 11, 31, 0.30), inset 0 1px 0 rgba(100, 160, 255, 0.12) !important; overflow: hidden !important; } /* ============================================== HERO CARD — Glassmorphism premium ============================================== */ .ft-hero-card { background: rgba(6, 26, 64, 0.80) !important; border: 1px solid rgba(37, 99, 235, 0.40) !important; border-radius: 24px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(100, 160, 255, 0.10) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; transition: transform 0.35s var(--ft-ease), box-shadow 0.35s var(--ft-ease), border-color 0.35s ease !important; } .ft-hero-card:hover { transform: translateY(-8px) !important; box-shadow: 0 36px 80px rgba(37, 99, 235, 0.30), 0 0 0 1px rgba(56, 189, 248, 0.38), inset 0 1px 0 rgba(100, 160, 255, 0.14) !important; border-color: rgba(56, 189, 248, 0.62) !important; } /* ============================================== BOTÃO PRIMÁRIO — Gradiente com shimmer animado ============================================== */ .ft-btn-primary .elementor-button { background: linear-gradient(135deg, var(--ft-blue-hover) 0%, var(--ft-blue-dark) 100%) !important; color: var(--ft-white) !important; border: none !important; border-radius: var(--ft-radius-btn, 14px) !important; font-weight: 700 !important; letter-spacing: 0.025em !important; box-shadow: 0 6px 22px rgba(10, 102, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.22s var(--ft-ease), box-shadow 0.22s ease, filter 0.22s ease !important; position: relative; overflow: hidden !important; } /* Shimmer — percorre o botão no hover */ .ft-btn-primary .elementor-button::before { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; } .ft-btn-primary .elementor-button:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 40px rgba(10, 102, 255, 0.52) !important; filter: brightness(1.07); color: var(--ft-white) !important; text-decoration: none !important; } .ft-btn-primary .elementor-button:hover::before { left: 160%; } .ft-btn-primary .elementor-button:active { transform: translateY(0) !important; box-shadow: 0 4px 14px rgba(10, 102, 255, 0.28) !important; } /* ============================================== BOTÃO OUTLINE — Hover com preenchimento sutil ============================================== */ .ft-btn-outline .elementor-button { background: transparent !important; color: var(--ft-white) !important; border: 2px solid rgba(37, 99, 235, 0.72) !important; border-radius: var(--ft-radius-btn, 14px) !important; font-weight: 600 !important; letter-spacing: 0.025em !important; transition: transform 0.22s var(--ft-ease), background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important; } .ft-btn-outline .elementor-button:hover { background: rgba(37, 99, 235, 0.14) !important; border-color: var(--ft-blue) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(10, 102, 255, 0.22) !important; color: var(--ft-white) !important; } .ft-btn-outline .elementor-button:active { transform: translateY(0) !important; } /* ============================================== SERVICE CARDS — Hover premium + accent line no topo ============================================== */ .ft-service-card { background: var(--ft-white) !important; border: 1px solid var(--ft-border) !important; border-radius: var(--ft-radius-card, 24px) !important; box-shadow: var(--ft-shadow-card), 0 1px 2px rgba(15, 23, 42, 0.03) !important; transition: transform 0.32s var(--ft-ease), box-shadow 0.32s ease, border-color 0.32s ease !important; overflow: hidden !important; position: relative; } /* Accent line azul no topo — aparece no hover */ .ft-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ft-blue), var(--ft-cyan)); opacity: 0; transition: opacity 0.30s ease; z-index: 1; } .ft-service-card:hover { transform: translateY(-10px) !important; border-color: var(--ft-border-blue) !important; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(37, 99, 235, 0.06) !important; background: var(--ft-white) !important; } .ft-service-card:hover::before { opacity: 1; } /* ============================================== FOOTER — Linha de glow + gradiente ============================================== */ footer.elementor-location-footer { position: relative; } /* Linha de glow azul no topo — usa ::after (::before é reservado pelo Elementor para clearfix) */ footer.elementor-location-footer::after { content: '' !important; display: block !important; position: absolute !important; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(10, 102, 255, 0.65) 25%, rgba(0, 194, 255, 0.90) 50%, rgba(10, 102, 255, 0.65) 75%, transparent 100% ); pointer-events: none; z-index: 2; } .ft-footer { background: linear-gradient(180deg, var(--ft-navy-800) 0%, var(--ft-navy-900) 100%) !important; } .ft-footer a { transition: color 0.22s ease !important; } .ft-footer a:hover { color: var(--ft-cyan) !important; opacity: 0.92; } /* ============================================== BLOG — Post cards ============================================== */ .elementor-posts .elementor-post__card { transition: transform 0.30s var(--ft-ease), box-shadow 0.30s ease !important; } .elementor-posts .elementor-post__card:hover { transform: translateY(-6px) !important; box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12) !important; } /* ============================================== FADE-IN SUAVE (coordenado com JS) ============================================== */ .ft-fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.65s var(--ft-ease), transform 0.65s var(--ft-ease); will-change: opacity, transform; } .ft-fade-in.ft-visible { opacity: 1; transform: translateY(0); will-change: auto; } /* ============================================== TIPOGRAFIA — Refinamentos globais ============================================== */ .elementor-heading-title { letter-spacing: -0.015em !important; line-height: 1.18 !important; } .elementor-widget-text-editor p, .elementor-text-editor p { line-height: 1.78; } a { transition: color 0.20s ease, opacity 0.20s ease; } /* ============================================== MOBILE ============================================== */ @media (max-width: 767px) { body:not(.ft-home-page) .ft-hero { border-radius: 20px !important; background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px, 100% 100% !important; } .ft-hero-card { border-radius: 20px !important; } .ft-service-card { border-radius: 20px !important; } header.elementor-location-header { position: sticky !important; } } @media (max-width: 480px) { body:not(.ft-home-page) .ft-hero { border-radius: 16px !important; } }