@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@300;400;600;800&family=Outfit:wght@400;700;900&display=swap'); /* ===================================================================== FGT NEXUS — Sistema de Temas (Escuro + Claro) Preto unificado #0A0A0A nos dois temas (logo "cravada" no fundo). O tema é controlado por data-theme no ou . Padrão: escuro. data-theme="light" ativa o claro. ===================================================================== */ /* ---------- TEMA ESCURO (padrão) ---------- */ :root, :root[data-theme="dark"] { --bg-main: #0A0A0A; /* Deep Premium Black (igual à logo) */ --bg-gradient-end: #0A0A0A; /* unificado: sem desvio azulado */ --bg-secondary: #0B1120; --bg-card: rgba(14, 16, 28, 0.75); --bg-navbar: rgba(10, 10, 10, 0.92); --bg-footer: #050505; --bg-seal: rgba(15, 23, 42, 0.8); --primary-fgt: #D4AF37; /* Premium Gold */ --primary-glow: rgba(212, 175, 55, 0.4); --copper: #C17A3A; /* Bronze/Copper */ --gold-dark: #B8860B; --text-main: #F8FAFC; --text-muted: #94A3B8; --text-on-light: #1a1a1a; /* usado em fundos dourados */ --border: rgba(193, 122, 58, 0.25); --hero-h1-from: #FFFFFF; --marquee-text: #0B1120; --about-h3: #FFFFFF; --nexus-title: #FFFFFF; --nexus-desc: #cbd5e1; } /* ---------- TEMA CLARO ---------- */ :root[data-theme="light"] { --bg-main: #F5F1E8; /* creme claro sofisticado */ --bg-gradient-end: #EFEADC; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --bg-navbar: rgba(245, 241, 232, 0.92); --bg-footer: #ECE5D4; --bg-seal: #0A0A0A; /* selo escuro = logo cravada no claro */ --primary-fgt: #B8860B; /* dourado um tom mais escuro p/ contraste no claro */ --primary-glow: rgba(184, 134, 11, 0.25); --copper: #A0612B; --gold-dark: #8a6508; --text-main: #1a1a1a; --text-muted: #6b6253; --text-on-light: #1a1a1a; --border: rgba(160, 97, 43, 0.30); --hero-h1-from: #2a2a2a; --marquee-text: #0B1120; --about-h3: #1a1a1a; --nexus-title: #1a1a1a; --nexus-desc: #4a4334; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(160deg, var(--bg-main) 0%, var(--bg-gradient-end) 100%); background-attachment: fixed; color: var(--text-main); overflow-x: hidden; min-height: 100vh; transition: background 0.4s ease, color 0.4s ease; } /* ---------- Seletor de tema (botão sol/lua) ---------- */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--primary-fgt); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--primary-fgt); transform: scale(1.08); box-shadow: 0 0 14px var(--primary-glow); } /* Navbar */ .navbar { position: fixed; top: 0; width: 100%; background: var(--bg-navbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 15px 50px; transition: all 0.3s ease; } .nav-logo { display: flex; align-items: center; gap: 15px; } .nav-logo img { height: 50px; object-fit: contain; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a { color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; } .nav-links a:hover { color: var(--primary-fgt); } .btn-restrito { background: linear-gradient(135deg, var(--copper), var(--primary-fgt)); color: var(--text-on-light); padding: 10px 25px; border-radius: 30px; text-decoration: none; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 5px 15px var(--primary-glow); border: 1px solid rgba(212, 175, 55, 0.5); } .btn-restrito:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.55); filter: brightness(1.08); } /* Hero Section */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 120px 20px 60px; position: relative; } .hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 80vw; height: 80vw; background: radial-gradient(circle, var(--primary-glow), transparent 70%); z-index: -1; } .hero h1 { font-family: 'Cinzel', serif; font-size: 56px; font-weight: 800; line-height: 1.1; margin-bottom: 20px; background: linear-gradient(to right, var(--hero-h1-from), var(--primary-fgt)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero p { font-size: 20px; color: var(--text-muted); max-width: 700px; margin-bottom: 40px; line-height: 1.6; } .btn-gold { background: linear-gradient(90deg, var(--gold-dark), var(--primary-fgt)); color: var(--text-on-light); padding: 18px 40px; border-radius: 5px; text-decoration: none; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.5); filter: brightness(1.1); } /* Marquee / Expertise Tape */ .expertise-tape { background: var(--primary-fgt); padding: 15px 0; overflow: hidden; position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.5); } .marquee { display: flex; white-space: nowrap; animation: scroll 30s linear infinite; } .marquee span { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 900; color: var(--marquee-text); text-transform: uppercase; margin-right: 50px; display: flex; align-items: center; gap: 15px; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Section About */ .section { padding: 100px 20px; max-width: 1200px; margin: 0 auto; } .section-title { font-family: 'Cinzel', serif; font-size: 36px; color: var(--primary-fgt); margin-bottom: 20px; text-align: center; } .section-subtitle { text-align: center; color: var(--text-muted); font-size: 18px; margin-bottom: 60px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .about-text h3 { font-family: 'Outfit', sans-serif; font-size: 28px; margin-bottom: 20px; color: var(--about-h3); } .about-text p { color: var(--text-muted); line-height: 1.8; margin-bottom: 15px; font-size: 16px; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); padding: 30px; border-radius: 10px; text-align: center; transition: transform 0.3s; } .stat-card:hover { transform: translateY(-5px); border-color: var(--primary-fgt); } .stat-number { font-family: 'Outfit', sans-serif; font-size: 48px; font-weight: 900; color: var(--primary-fgt); margin-bottom: 10px; } .stat-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } /* Banner Nexus Termômetro */ .nexus-banner { background: linear-gradient(135deg, rgba(193, 122, 58, 0.12), rgba(212, 175, 55, 0.10)); border: 1px solid var(--copper); border-radius: 20px; padding: 60px 40px; text-align: center; position: relative; overflow: hidden; margin: 80px 0; } .nexus-banner::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: var(--primary-fgt); filter: blur(100px); opacity: 0.25; } .nexus-title { font-family: 'Cinzel', serif; font-size: 30px; font-weight: 700; color: var(--nexus-title); margin-bottom: 15px; letter-spacing: 0.8px; } .nexus-title span { color: var(--primary-fgt); } .nexus-desc { color: var(--nexus-desc); font-size: 18px; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } /* Footer */ footer { background: var(--bg-footer); border-top: 1px solid var(--border); padding: 40px 20px; text-align: center; color: var(--text-muted); } /* Footer Seal (Selo FGT) */ .fgt-seal-container { position: relative; display: inline-block; margin-bottom: 30px; } .fgt-seal { position: relative; z-index: 2; background: var(--bg-seal); border: 2px solid var(--primary-fgt); border-radius: 50%; padding: 15px; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(212, 175, 55, 0.1); backdrop-filter: blur(5px); transition: transform 0.5s ease; } .fgt-seal img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 50%; } .fgt-seal-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background: var(--primary-fgt); filter: blur(25px); opacity: 0.3; z-index: 1; animation: pulseGlow 3s infinite alternate; } @keyframes pulseGlow { 0% { opacity: 0.1; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.3); } } .fgt-seal-container:hover .fgt-seal { transform: rotate(5deg) scale(1.05); border-color: var(--copper); box-shadow: 0 0 30px rgba(193, 122, 58, 0.45), inset 0 0 20px rgba(193, 122, 58, 0.25); } .fgt-seal-container:hover .fgt-seal-glow { background: var(--copper); animation: none; opacity: 0.6; transform: translate(-50%, -50%) scale(1.4); } @media (max-width: 768px) { .nav-links { display: none; } .hero h1 { font-size: 40px; } .about-grid { grid-template-columns: 1fr; } }