/* FSUBI — bundle gerado automaticamente. Não editar à mão. Editar os ficheiros em styles/ e correr build-css.sh */ /* ==== styles/base/base.css ==== */ @charset "UTF-8"; *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* O cursor nativo só é escondido em ecrãs com rato real (o JS só cria o cursor-dot nesses casos, via .has-custom-cursor no ). Em telemóvel/ tablet mantém-se o comportamento normal do sistema. */ html.has-custom-cursor *, html.has-custom-cursor *::before, html.has-custom-cursor *::after { cursor: none !important; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: 'Inter', sans-serif; background-color: var(--darker); color: var(--text-main); font-size: var(--font-sm); line-height: 1.8; overflow-x: hidden; } body.is-loading { overflow: hidden; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 2147483647; transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(255,204,0,0.4); } .cursor-trail { position: fixed; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 2147483646; box-shadow: 0 0 4px var(--accent), 0 0 10px rgba(255,204,0,0.3); } .cursor-dot.is-hovering { transform: translate(-50%, -50%) scale(1.5); background: #fff; } .site-preloader { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(255,204,0,0.09), transparent 42%), linear-gradient(180deg, #010811 0%, #021c37 100%); transition: opacity 0.55s ease, visibility 0.55s ease; } .site-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .site-preloader_panel { position: relative; display: grid; place-items: center; gap: 18px; padding: 42px 50px 36px; border-radius: 24px; background: rgba(1, 8, 17, 0.56); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 80px rgba(0,0,0,0.45); backdrop-filter: blur(14px); } .site-preloader_panel::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 1px solid rgba(255,204,0,0.15); opacity: 0.75; pointer-events: none; } .site-preloader_logo-wrap { position: relative; width: min(280px, 62vw); aspect-ratio: 3.2 / 1; display: grid; place-items: center; } .site-preloader_logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: preloader-pop 1.2s ease-in-out infinite alternate; } .site-preloader_logo--main { filter: drop-shadow(0 0 20px rgba(255,255,255,0.12)); } .site-preloader_logo--ghost { opacity: 0.16; filter: blur(0.2px) drop-shadow(0 0 28px rgba(255,204,0,0.08)); transform: scale(1.04); } .site-preloader_text { font-family: 'Oswald', sans-serif; letter-spacing: 6px; font-size: 11px; color: rgba(255,204,0,0.68); text-transform: uppercase; } .site-preloader_bar { width: min(180px, 52vw); height: 2px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); } .site-preloader_bar span { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: preloader-sweep 1.1s ease-in-out infinite; } @keyframes preloader-pop { from { transform: translateY(2px) scale(0.98); } to { transform: translateY(-2px) scale(1.02); } } @keyframes preloader-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } } /* Classes para estilos extraídos de inline */ .about-section-padding { background-color: var(--darker); } .about-badge-accent { color: var(--accent); font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 1.2rem; margin-bottom: 10px; text-transform: uppercase; } .about-title-spacing { margin-bottom: 30px; } .about-intro-text { font-size: 1.2rem; color: var(--white); margin-bottom: 20px; font-weight: 500; } .about-desc-text { color: var(--text-muted); margin-bottom: 30px; line-height: 1.8; } .about-bullets-list { list-style: none; color: var(--text-main); margin-bottom: 40px; line-height: 2; } .about-bullets-list i { color: var(--accent); margin-right: 12px; } .about-image-styled { border: 1px solid var(--glass-border); border-radius: 8px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .dept-section-bg { background-color: var(--darker); position: relative; } .dept-top-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #ffcc00, transparent); box-shadow: 0 0 12px rgba(255,204,0,0.3), 0 2px 20px rgba(2,28,55,0.8); } .dept-intro-text { max-width: 700px; margin: -20px auto 50px auto; color: var(--text-main); line-height: 1.7; } .dept-cta-spacing { margin-top: 60px; } .section-icon-accent { margin-right: 8px; color: var(--accent); } .inline-icon-gap { margin-right: 8px; } .section-heading-spacer { padding-top: 60px; margin-bottom: 20px; } .section-primary { background-color: var(--primary); border-top: 1px solid var(--glass-border); } .section-primary-light { background-color: var(--primary-light); border-top: 1px solid var(--glass-border); } .section-dark { background-color: var(--darker); border-top: 1px solid var(--glass-border); } .text-muted-sm { color: var(--text-muted); font-size: var(--font-sm); } .text-muted-sm-line { color: var(--text-muted); font-size: var(--font-sm); line-height: 1.8; } .text-white-md { color: var(--white); font-size: var(--font-md); line-height: 1.8; font-weight: 500; } .value-title { font-size: var(--font-lg); } .value-desc { color: var(--text-muted); font-size: var(--font-sm); } .title-xl-spacer { margin-bottom: 20px; font-size: var(--font-xl); } .hero-subtitle-main { color: var(--text-main); margin: 0 auto; } .hero-subtitle-wide { max-width: 850px; } .hero-subtitle-narrow { max-width: 600px; } .hero-scroll-delay { animation-delay: 0.5s; } .hero-overlay-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; } .hero-overlay-grid-soft { background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 50px 50px; } .location-link-spaced { margin-top: 15px; } .history-subtitle-main { color: var(--text-main); } .history-note-card { opacity: 0.8; border: 1px dashed rgba(255,204,0,0.5); padding: 10px; border-radius: 8px; } .history-note-content { border-left-color: var(--accent); } .history-spinner-icon { font-size: 1rem; color: var(--accent); margin-right: 10px; } .footer-link-icon { margin-right: 5px; color: var(--accent); } .footer-text-desc { color: var(--text-muted); line-height: 1.7; } .footer-bottom-flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; } .footer-copyright { margin: 0; } .footer-links-group { display: flex; gap: 20px; font-size: 0.85rem; } .footer-links-group a { color: var(--text-muted); } .location-no-decor { text-decoration: none; } .email-link-footer { color: var(--text-muted); transition: 0.3s; } .email-link-footer:hover { color: #ffcc00; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /*teclado*/ .skip-link { position: absolute; top: -100px; left: 12px; z-index: 9999; background: var(--accent); color: var(--darker); padding: 12px 20px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; text-decoration: none; border-radius: 4px; transition: top 0.2s ease; } .skip-link:focus { top: 12px; } /* ==== styles/base/variables.css ==== */ :root { /* Cores da Marca */ --primary: #021c37; --primary-light: #032a52; --accent: #ffcc00; --accent-glow: rgba(255, 204, 0, 0.4); /* Fundos Escuros */ --dark: #010811; --darker: #000408; /* Texto */ --white: #ffffff; --text-main: #cccccc; --text-muted: #888888; /* Escala Tipográfica Universal */ --font-xs: 0.85rem; --font-sm: 1rem; --font-md: 1.15rem; --font-lg: 1.5rem; --font-xl: 2.2rem; --font-xxl: clamp(2.5rem, 5vw, 3.5rem); --font-hero: clamp(3rem, 8vw, 6rem); /* Transições e UI */ --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-bounce: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); --glass-bg: rgba(2, 28, 55, 0.3); --glass-border: rgba(255, 255, 255, 0.08); --steps: 5; /* Variável para controlar o número de passos na história */ } /* ==== styles/base/typography.css ==== */ h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; color: var(--white); text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.2; } .section-title { font-size: var(--font-xxl); margin-bottom: 50px; text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; transition: var(--transition-bounce); } .section-title span { color: var(--accent); transition: var(--transition); } .section-title::after { content: ''; display: block; width: 80px; height: 3px; background: var(--accent); margin-top: 15px; transition: var(--transition); } .section-title:hover { transform: scale(1.02); text-shadow: 0 0 20px rgba(255,255,255,0.2); } .section-title:hover span { text-shadow: 0 0 20px var(--accent-glow); } .section-title:hover::after { width: 140px; box-shadow: 0 0 15px var(--accent); } .section-title.inline-title { display: block; text-align: left; } .section-title.inline-title::after { margin: 15px 0 0 0; } .section-title.inline-title:hover { transform: translateX(10px) scale(1.02); } .custom-subtitle { max-width: 800px; color: var(--text-muted); font-size: var(--font-md); line-height: 1.7; margin: -30px auto 60px auto; text-align: center; font-weight: 300; } .text-center { text-align: center; } /* ==== styles/components/buttons.css ==== */ /* --- Botões Globais --- */ .btn-primary, .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 35px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; transition: var(--transition); border: 2px solid var(--accent); } .btn-primary { background: var(--accent); color: var(--darker); } .btn-primary:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 15px rgba(255,204,0,0.2); } .btn-outline { background: transparent; color: var(--accent); } .btn-outline:hover { background: var(--accent); color: var(--darker); } .btn-primary i, .btn-outline i { transition: 0.3s; } .btn-primary:hover i, .btn-outline:hover i { transform: translateX(5px); } /* Botão LinkedIn Premium */ .btn-linkedin-premium { display: inline-flex; align-items: center; gap: 10px; padding: 12px 30px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; color: var(--white); font-weight: 600; font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); background: rgba(255,255,255,0.02); } .btn-linkedin-premium i { font-size: 1.3rem; color: #0077b5; transition: var(--transition); } .btn-linkedin-premium:hover { background: #0077b5; color: var(--white); border-color: #0077b5; box-shadow: 0 10px 20px rgba(0, 119, 181, 0.4); } .btn-linkedin-premium:hover i { color: var(--white); } /* ==== styles/components/modal.css ==== */ /* --- Modais (Fichas de Especificação HUD) --- */ .modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s ease; } .modal-content.data-sheet { background: linear-gradient(145deg, #021224, var(--darker)); padding: 50px; border: 1px solid var(--accent); border-radius: 12px; width: 95%; max-width: 750px; position: relative; box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 0 30px rgba(255,204,0,0.05); transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Padrão Blueprint no fundo do Modal */ background-image: linear-gradient(145deg, rgba(2,18,36,0.95), rgba(0,4,8,0.98)), repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.02) 2px); } .modal[aria-hidden="false"] { opacity: 1; } .modal[aria-hidden="false"] .modal-content { transform: scale(1) translateY(0); } .close-btn { position: absolute; top: 20px; right: 25px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); width: 40px; height: 40px; border-radius: 50%; color: var(--white); font-size: 1.2rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .close-btn:hover { background: var(--accent); color: var(--darker); border-color: var(--accent); transform: rotate(90deg); } .modal-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; border-bottom: 2px solid rgba(255,255,255,0.05); padding-bottom: 20px; } .modal-main-icon { font-size: 2.5rem; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); } .modal-header h2 { font-size: var(--font-xl); color: var(--white); margin: 0; letter-spacing: 2px; } .modal-body p { font-size: var(--font-md); color: var(--text-main); line-height: 1.8; margin-bottom: 30px; } .tech-stack-container { background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); padding: 20px; border-radius: 8px; margin-bottom: 30px; } .tech-stack-title { font-family: 'Oswald', sans-serif; font-size: 1rem; color: var(--accent); margin-bottom: 15px; letter-spacing: 1px; } .tech-tags { display: flex; gap: 10px; flex-wrap: wrap; } .tech-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--white); padding: 6px 15px; border-radius: 4px; font-family: monospace; font-size: 0.85rem; } .task-list { list-style: none; padding: 0; margin: 0; } .task-list li { display: flex; align-items: flex-start; gap: 15px; color: var(--text-main); margin-bottom: 15px; font-size: var(--font-sm); } .task-list li i { color: var(--accent); font-size: 1rem; margin-top: 5px; } /* ==== styles/components/storytelling.css ==== */ /*Hero com vídeo estático*/ .hero-video-section { position: relative; height: 100dvh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #010811; } .hero-video-section .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; z-index: 0; } .hero-video-section .hero-tech-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(1,8,17,0.2), rgba(1,8,17,0.9)); z-index: 1; } .hero-content-static { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 120px; max-width: 900px; } .hero-content-static .step-label { display: block; font-size: 0.75rem; letter-spacing: 6px; color: var(--accent); font-weight: 700; text-transform: uppercase; margin-bottom: 20px; font-family: 'Oswald', sans-serif; text-align: center; width: 100%; } .hero-content-static h1 { font-size: clamp(3rem, 9vw, 7rem); font-weight: 900; line-height: 1.1; color: var(--white); text-transform: uppercase; letter-spacing: -0.5px; text-align: center; width: 100%; margin-bottom: 32px; } .hero-content-static h1 em { font-style: italic; color: var(--accent); } .hero-content-static p { font-size: 1.05rem; color: var(--text-muted); max-width: 460px; line-height: 1.8; text-align: center; margin: 0 auto 40px; } /* ==== styles/layout/hero.css ==== */ /* ----------------------------------- 2.1 HEROES (Títulos com Animação Soft/Glow) ----------------------------------- */ .hero, .hero-about { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-size: cover; background-position: center; position: relative; padding: 0 20px; } .hero { min-height: 100vh; } .hero-about { min-height: 65vh; padding-top: 80px; } .hero-tech-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(1,8,17, 0.6), var(--darker)); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 900px; display: flex; flex-direction: column; align-items: center; } .partners-page .hero-tech-overlay, .car-page .hero-tech-overlay { background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; } /* Títulos base */ .home-page .hero h1:hover, .hero-about h1:hover { color: var(--white); text-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 35px var(--accent-glow), 0 0 65px rgba(255, 204, 0, 0.4); } .hero-subtitle-pro { font-size: var(--font-md); color: var(--white); margin-bottom: 40px; font-weight: 300; max-width: 750px; line-height: 1.8; text-align: center; } .hero-cta-group { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .scroll-indicator { position: absolute; bottom: 30px; text-align: center; z-index: 2; animation: bounce 2s infinite; outline: none; } /* 1. Transforma os Heroes em contentores flexíveis e inteligentes */ .hero-comp, .hero-car { display: flex !important; flex-direction: column !important; min-height: 100vh !important; padding: 100px 20px 20px 20px !important; background-size: cover; background-position: center; position: relative; } /* 2. A Magia do Centramento Absoluto */ .hero-comp .hero-content, .hero-car .hero-content { margin: auto !important; z-index: 2; width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; text-align: center; } /* 3. Botão DESCER genérico (Fica colado ao fundo) */ .scroll-indicator-wrapper { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 auto 30px auto !important; z-index: 10; } /* 4. BOTÃO INICIAR SISTEMAS (AQUI ESTÁ A CORREÇÃO DO ESPAÇO!) */ .power-start-container { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 53px auto 0px auto !important; z-index: 10; } .scroll-indicator-wrapper a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; outline: none; animation: bounce 2s infinite; transition: opacity 0.3s; } .scroll-indicator-wrapper a:hover { opacity: 0.7; } .scroll-indicator-wrapper span { font-size: 0.85rem; color: var(--accent); letter-spacing: 3px; font-weight: 700; text-transform: uppercase; line-height: 1; } .scroll-indicator-wrapper i { color: var(--white); font-size: 1.8rem; } .hero-bg{ position:absolute; inset:0; background-image:url('../../assets/FS_01.webp'); background-size:cover; background-position:center; transform:scale(1.03); will-change:transform; z-index:0; } /* ==== styles/layout/footer.css ==== */ /* --- Footer Corporativo --- */ .fsubi-footer { background-color: #010811; padding-top: 80px; border-top: 1px solid var(--glass-border); position: relative; } .fsubi-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; margin-bottom: 60px; } .footer-logo { height: 60px; margin-bottom: 25px; transition: 0.3s; } .footer-logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255,255,255,0.1)); } .social-icons { display: flex; gap: 15px; margin-top: 25px; } .social-icons a { width: 40px; height: 40px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: var(--white); border-radius: 4px; transition: 0.3s; } .social-icons a:hover { background: var(--accent); color: var(--darker); transform: translateY(-5px); } .footer-title { font-size: var(--font-lg); margin-bottom: 25px; padding-bottom: 10px; position: relative; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 15px; font-size: var(--font-sm); } .footer-links a:hover { color: var(--accent); transform: translateX(5px); display: inline-block; } .location-link { display: flex; gap: 15px; margin-bottom: 20px; font-size: var(--font-sm); transition: 0.3s; } .location-link:hover { color: var(--white); } .location-link i { color: var(--accent); font-size: 1.2rem; margin-top: 4px; } .footer-bottom { background: #000; padding: 25px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: var(--font-xs); } /* ==== styles/layout/layout.css ==== */ .container { max-width: 1350px; margin: 0 auto; padding: 0 25px; width: 100%; } .section-padding { padding: 100px 0; position: relative; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; } .grid-stretch { align-items: stretch !important; } .blueprint-bg { position: relative; } .blueprint-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 40px 40px; z-index: -1; pointer-events: none; } .motorsport-pattern { position: relative; } .motorsport-pattern::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 8px); z-index: -1; pointer-events: none; } /* ==== styles/layout/navbar.css ==== */ /* --- Navbar Comum --- */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 25px 5%; position: fixed; width: 100%; top: 0; z-index: 2000; background: transparent; transition: var(--transition); border-bottom: 1px solid transparent; } .navbar.scrolled { background: rgba(1, 8, 17, 0.95); backdrop-filter: blur(15px); border-bottom: 1px solid var(--glass-border); padding: 15px 5%; } .logo-container img { height: 45px; transition: var(--transition); } .logo-container img:hover { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); } .nav-links { display: flex; list-style: none; gap: 35px; align-items: center; } .nav-links a { color: var(--white); font-weight: 500; font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 1px; } .nav-links a:hover, .nav-links a.active { color: var(--accent); } .btn-nav { border: 1px solid var(--accent); padding: 10px 24px; color: var(--accent) !important; } .btn-nav:hover { background: var(--accent); color: var(--darker) !important; } .lang-btn { appearance: none; -webkit-appearance: none; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(2,28,55,0.7)); color: var(--white); border-radius: 999px; padding: 0; min-width: 86px; height: 42px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(0,0,0,0.2); transition: var(--transition); overflow: hidden; position: relative; backdrop-filter: blur(8px); } .lang-btn:hover { transform: translateY(-1px); border-color: rgba(255, 204, 0, 0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 24px rgba(0,0,0,0.28), 0 0 18px rgba(255,204,0,0.12); } .lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .lang-btn_track { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 10px; font-family: 'Oswald', sans-serif; font-size: 0.95rem; letter-spacing: 1px; color: var(--text-main); } .lang-btn_label { min-width: 28px; text-align: center; color: var(--white); } .lang-btn_badge { width: 26px; height: 26px; border-radius: 9999px; flex: 0 0 26px; border: 1px solid rgba(0,0,0,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.2); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden; clip-path: circle(50% at 50% 50%); } .lang-btn_badge--pt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23d32f2f'/%3E%3Crect width='14' height='24' fill='%230a7b3d'/%3E%3Ccircle cx='14' cy='12' r='5.2' fill='%23f4d24a'/%3E%3Ccircle cx='14' cy='12' r='3.8' fill='%23ffffff'/%3E%3Cpath d='M14 8.7c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5Zm0 1.1c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4 1.4-.6 1.4-1.4-.6-1.4-1.4-1.4Z' fill='%23c23a2b'/%3E%3Cpath d='M14 6.8l1 1.4-1 .7-1-.7 1-1.4Zm-2.6 1.8 1.6.3-.2 1.1-1.6-.3.2-1.1Zm5.2 0 .2 1.1-1.6.3-.2-1.1 1.6-.3Zm-5.2 5.7-.2-1.1 1.6-.3.2 1.1-1.6.3Zm5.2 0-1.6.3-.2-1.1 1.6-.3.2 1.1Zm-2.6 1.8-1-1.4 1-.7 1 .7-1 1.4Z' fill='%23f4d24a'/%3E%3C/svg%3E"); } .lang-btn_badge--en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%231f4e99'/%3E%3Cpath d='M0 0l36 24M36 0L0 24' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M0 0l36 24M36 0L0 24' stroke='%23c0392b' stroke-width='3'/%3E%3Cpath d='M14 0h8v24h-8zM0 8h36v8H0z' fill='%23ffffff'/%3E%3Cpath d='M15.5 0h5v24h-5zM0 9.5h36v5H0z' fill='%23c0392b'/%3E%3C/svg%3E"); } .lang-btn[data-lang="en"] .lang-btn_track { flex-direction: row; } .lang-btn[data-lang="pt"] .lang-btn_track { flex-direction: row-reverse; } .lang-btn[data-lang="en"] .lang-btn_label { color: var(--white); } .lang-btn[data-lang="pt"] .lang-btn_label { color: var(--white); } .mobile-menu-toggle { display: none; background: transparent; border: none; flex-direction: column; gap: 6px; z-index: 2001; cursor: pointer; } .hamburger-line { width: 30px; height: 2px; background: var(--white); transition: 0.3s; } /* Animação para "X" quando o menu está aberto */ .mobile-menu-toggle.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu-toggle.is-active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-toggle.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Bloqueia o scroll do body enquanto o menu mobile está aberto */ body.nav-open { overflow: hidden; } /* ==== styles/utilities/animations.css ==== */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes float-icon { 0%, 100% { transform: scale(1.18) translateY(-8px); } 50% { transform: scale(1.18) translateY(-14px); } } .badge-accent { display: inline-flex; align-items: center; background: rgba(255,204,0,0.08); color: var(--accent); padding: 8px 20px; border: 1px solid rgba(255,204,0,0.3); font-weight: 700; font-size: var(--font-xs); margin-bottom: 25px; letter-spacing: 1.5px; border-radius: 30px; text-transform: uppercase; } .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.active { opacity: 1; transform: translateY(0); } .blink { animation: blink 1.5s infinite; } /* ==== styles/utilities/responsive.css ==== */ @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 40px; } .section-padding { padding: 80px 0; } .footer-content { grid-template-columns: 1fr; text-align: center; } .footer-title::after { content: ''; display: block; width: 40px; height: 2px; background: var(--accent); margin: 10px auto 0; } .social-icons, .location-link { justify-content: center; } .mobile-menu-toggle { display: flex; } .nav-links { position: fixed; top: 0; right: -100%; width: 85%; height: 100vh; background: rgba(1,8,17,0.98); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; transition: 0.4s; border-left: 1px solid var(--glass-border); } .nav-links.nav-active { right: 0; box-shadow: -20px 0 50px rgba(0,0,0,0.8); } } /* ==== styles/pages/about.css ==== */ /* ============================================================ ABOUT PAGE — styles/pages/about.css Formula Student UBI · Redesign 2026 ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. HERO ══════════════════════════════════════════════════════════ */ .about-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: linear-gradient(180deg, #000408 0%, #021c37 55%, #000408 100%); } .about-hero_grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 60px 60px; z-index: 0; pointer-events: none; } .about-hero_scan-line { position: absolute; top: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); animation: scan-down 7s linear infinite; z-index: 1; pointer-events: none; opacity: 0.45; } @keyframes scan-down { 0% { top: -4px; opacity: 0; } 5% { opacity: 0.45; } 95% { opacity: 0.25; } 100% { top: 100%; opacity: 0; } } .about-hero_floaters { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .floater { position: absolute; font-family: 'Oswald', sans-serif; text-transform: uppercase; user-select: none; } .floater--1 { top: 16%; left: 5%; font-size: 3.5rem; color: rgba(255,204,0,0.045); animation: float-gentle 9s ease-in-out infinite; } .floater--2 { top: 28%; right: 7%; font-size: 0.65rem; letter-spacing: 5px; color: rgba(255,255,255,0.06); animation: float-gentle 11s ease-in-out infinite 1.2s; } .floater--3 { bottom: 30%; left: 4%; font-size: 0.6rem; letter-spacing: 5px; color: rgba(255,204,0,0.08); animation: float-gentle 13s ease-in-out infinite 2.5s; } .floater--4 { top: 52%; right: 5%; font-size: 3rem; color: rgba(255,255,255,0.03); animation: float-gentle 10s ease-in-out infinite 0.7s; } .floater--5 { bottom: 38%; right: 14%; font-size: 0.6rem; letter-spacing: 6px; color: rgba(255,204,0,0.07); animation: float-gentle 12s ease-in-out infinite 3.2s; } @keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .about-hero_content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; padding: 80px 30px 130px; } .about-hero_eyebrow { display: flex; align-items: center; gap: 12px; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 30px; } .about-hero_dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 22px var(--accent-glow); animation: pulse-dot 2.2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent-glow); transform: scale(1); } 50% { box-shadow: 0 0 16px var(--accent), 0 0 36px var(--accent-glow); transform: scale(1.2); } } .about-hero_title { font-family: 'Oswald', sans-serif; font-size: clamp(3.8rem, 9.5vw, 7.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -2px; color: var(--white); text-transform: uppercase; margin-bottom: 30px; } .about-hero_title em { font-style: normal; color: var(--accent); display: block; text-shadow: 0 0 60px rgba(255,204,0,0.3); } .about-hero_subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.5); max-width: 600px; line-height: 1.95; font-weight: 300; margin-bottom: 52px; } .about-hero_scroll { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent); font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 5px; text-decoration: none; text-transform: uppercase; animation: bounce 2.8s ease-in-out infinite; transition: opacity 0.3s; } .about-hero_scroll:hover { opacity: 0.6; } .about-hero_scroll i { font-size: 1rem; color: rgba(255,255,255,0.5); margin-top: 2px; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(9px); } } .about-hero_bottom-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px; padding: 12px 40px; font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 5px; color: rgba(255,255,255,0.15); text-transform: uppercase; z-index: 2; border-top: 1px solid rgba(255,255,255,0.04); } .about-hero_bottom-bar-line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); } /* ══════════════════════════════════════════════════════════ 2. SECTION LABELS — decoração lateral ══════════════════════════════════════════════════════════ */ .mv-section, .values-section, .history-section { position: relative; } .mv-section_label, .values-section_label, .history-section_label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center center; display: flex; align-items: center; gap: 12px; font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 5px; color: rgba(255,255,255,0.08); text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 0; display: none; } .mv-section_label-line, .values-section_label-line, .history-section_label-line { display: inline-block; width: 36px; height: 1px; background: rgba(255,255,255,0.08); } /* ══════════════════════════════════════════════════════════ 3. MISSÃO & VISÃO ══════════════════════════════════════════════════════════ */ .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,0.04); } .mv-card { position: relative; background: var(--darker); padding: 60px 52px 56px; display: flex; flex-direction: column; overflow: hidden; transition: background 0.4s ease; cursor: default; } .mv-card:hover { background: rgba(2,28,55,0.55); } /* Letra gigante decorativa */ .mv-card_number { position: absolute; bottom: -20px; right: 20px; font-family: 'Oswald', sans-serif; font-size: 11rem; font-weight: 700; color: rgba(255,255,255,0.018); line-height: 1; pointer-events: none; user-select: none; transition: color 0.5s; } .mv-card:hover .mv-card_number { color: rgba(255,204,0,0.04); } /* Barra lateral esquerda */ .mv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .mv-card:hover::before { transform: scaleY(1); } .mv-card_icon-wrap { width: 52px; height: 52px; border-radius: 2px; background: rgba(255,204,0,0.05); border: 1px solid rgba(255,204,0,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 30px; transition: background 0.35s, border-color 0.35s; } .mv-card_icon-wrap i { font-size: 1.4rem; color: rgba(255,204,0,0.4); transition: color 0.35s; } .mv-card:hover .mv-card_icon-wrap { background: rgba(255,204,0,0.08); border-color: rgba(255,204,0,0.25); } .mv-card:hover .mv-card_icon-wrap i { color: var(--accent); } .mv-card_title { font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--white); letter-spacing: 1px; margin-bottom: 22px; text-transform: uppercase; } .mv-card_title span { color: var(--accent); } .mv-card_text { font-size: 1rem; line-height: 2; color: var(--text-muted); font-style: italic; border: none; padding: 0; margin: 0; flex-grow: 1; transition: color 0.35s; } .mv-card:hover .mv-card_text { color: var(--text-main); } /* Barra accent em baixo — remove antiga */ .mv-card_accent-bar { display: none; } /* ══════════════════════════════════════════════════════════ 4. VALORES — Cards limpos em row ══════════════════════════════════════════════════════════ */ .values-header { text-align: center; margin-bottom: 60px; } .values-subtitle { color: var(--text-muted); font-size: 1rem; max-width: 680px; margin: 16px auto 0; line-height: 1.9; font-weight: 300; } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .value-block { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-top: 2px solid transparent; border-radius: 2px; padding: 36px 28px 32px; display: flex; flex-direction: column; position: relative; transition: background 0.4s ease, border-top-color 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; cursor: default; } .value-block:hover { background: rgba(2,28,55,0.5); border-top-color: var(--accent); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .value-block_inner { display: contents; /* não precisamos do wrapper extra */ } .value-block_top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; } .value-block_num { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 3px; color: rgba(255,204,0,0.25); transition: color 0.3s; } .value-block:hover .value-block_num { color: var(--accent); } .value-block_icon { font-size: 1.8rem; color: rgba(255,255,255,0.12); transition: color 0.4s, transform 0.4s; display: block; } .value-block:hover .value-block_icon { color: var(--accent); transform: translateY(-3px); } .value-block_title { font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--white); letter-spacing: 2px; margin-bottom: 14px; text-transform: uppercase; } .value-block_desc { font-size: 0.9rem; line-height: 1.85; color: var(--text-muted); flex-grow: 1; transition: color 0.3s; } .value-block:hover .value-block_desc { color: var(--text-main); } /* remove o hover-bar antigo */ .value-block_hover-bar { display: none; } /* ══════════════════════════════════════════════════════════ 5. HISTÓRIA — Timeline horizontal ══════════════════════════════════════════════════════════ */ .history-header { text-align: center; margin-bottom: 80px; } .history-subtitle { color: var(--text-muted); font-size: 1rem; max-width: 640px; margin: 16px auto 0; line-height: 1.9; font-weight: 300; } .htimeline { position: relative; padding-bottom: 20px; } /* Linha horizontal — posicionada via JS de ordem, aqui é o trick CSS */ .htimeline_items { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; /* A linha corre pelo meio: cada coluna tem metade acima + dot + metade abaixo */ /* Definimos que a linha está a 50% da altura total */ } /* Linha horizontal removida */ .htimeline::before { display: none; } /* Ocultar o elemento vazio */ .htimeline_rail { display: none; } /* ── Cada item ──────────────────────────────────────────── */ .htimeline_item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; padding: 0 20px; } /* Dot central */ .htimeline_node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; z-index: 3; position: relative; } .htimeline_dot { width: 18px; height: 18px; border-radius: 50%; background: var(--darker); border: 2px solid var(--accent); flex-shrink: 0; position: relative; z-index: 4; transition: background 0.3s, box-shadow 0.35s, transform 0.35s; } .htimeline_item:hover .htimeline_dot { background: var(--accent); box-shadow: 0 0 24px var(--accent-glow); transform: scale(1.35); } .htimeline_dot--pulse { background: var(--accent); animation: pulse-ring 2s ease-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,204,0,0.55); } 70% { box-shadow: 0 0 0 14px rgba(255,204,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); } } /* Hastes verticais */ .htimeline_stem { display: block; width: 1px; height: 44px; flex-shrink: 0; } .htimeline_stem--down { background: linear-gradient(to bottom, rgba(255,204,0,0.5), rgba(255,204,0,0.06)); } .htimeline_stem--up { background: linear-gradient(to top, rgba(255,204,0,0.5), rgba(255,204,0,0.06)); order: -1; } /* Cards */ .htimeline_card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 4px; padding: 28px 24px 24px; width: 100%; position: relative; transition: background 0.4s ease, border-color 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; } /* Seta card-acima → aponta para baixo */ .htimeline_card--above::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid rgba(255,255,255,0.07); transition: border-top-color 0.35s; } /* Seta card-abaixo → aponta para cima */ .htimeline_card--below::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.07); transition: border-bottom-color 0.35s; } .htimeline_card--live { border-color: rgba(255,204,0,0.18); background: rgba(2,28,55,0.45); border-top: 2px solid var(--accent); } .htimeline_item:hover .htimeline_card { background: rgba(2,28,55,0.6); border-color: rgba(255,204,0,0.28); box-shadow: 0 20px 55px rgba(0,0,0,0.45); transform: translateY(-5px); } .htimeline_item:hover .htimeline_card--above { transform: translateY(-5px); } .htimeline_item:hover .htimeline_card--below { transform: translateY(5px); } .htimeline_item:hover .htimeline_card--above::after { border-top-color: rgba(255,204,0,0.28); } .htimeline_item:hover .htimeline_card--below::before { border-bottom-color: rgba(255,204,0,0.28); } /* Tag */ .htimeline_tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 3px; color: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.07); border-radius: 2px; padding: 3px 8px; margin-bottom: 14px; text-transform: uppercase; } .htimeline_tag--live { color: var(--accent); border-color: rgba(255,204,0,0.22); background: rgba(255,204,0,0.05); } .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse-dot 1.6s ease-in-out infinite; } .htimeline_title { font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--white); letter-spacing: 1px; margin-bottom: 12px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; line-height: 1.3; } .timeline-spin-icon { font-size: 0.8rem; color: var(--accent); flex-shrink: 0; } .htimeline_desc { font-size: 0.88rem; line-height: 1.9; color: var(--text-muted); transition: color 0.35s; } .htimeline_item:hover .htimeline_desc { color: var(--text-main); } /* Data */ .htimeline_date { font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 4px; color: var(--accent); text-transform: uppercase; white-space: nowrap; display: block; } /* ── Ordem dos elementos por item ──────────────────────── */ /* Item 1: card acima → node → date */ .htimeline_item:nth-child(1) .htimeline_card--above { order: 1; } .htimeline_item:nth-child(1) .htimeline_node { order: 2; } .htimeline_item:nth-child(1) .htimeline_date--below { order: 3; margin-top: 14px; } /* Item 2: date → node → card abaixo */ .htimeline_item:nth-child(2) .htimeline_date--above { order: 1; margin-bottom: 14px; } .htimeline_item:nth-child(2) .htimeline_node { order: 2; } .htimeline_item:nth-child(2) .htimeline_card--below { order: 3; } /* Item 3: card acima → node → date */ .htimeline_item:nth-child(3) .htimeline_card--above { order: 1; } .htimeline_item:nth-child(3) .htimeline_node { order: 2; } .htimeline_item:nth-child(3) .htimeline_date--below { order: 3; margin-top: 14px; } /* ── Barra de progresso da timeline ────────────────────── */ .htimeline_progress { margin-top: 60px; display: flex; align-items: center; gap: 0; } .htimeline_progress-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; } .htimeline_progress-step::before { content: ''; position: absolute; top: 7px; left: 50%; width: 100%; height: 1px; background: rgba(255,255,255,0.06); z-index: 0; } .htimeline_progress-step:last-child::before { display: none; } .htimeline_progress-pip { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,204,0,0.3); background: var(--darker); position: relative; z-index: 1; transition: background 0.3s, border-color 0.3s; } .htimeline_progress-step--done .htimeline_progress-pip { background: rgba(255,204,0,0.25); border-color: var(--accent); } .htimeline_progress-step--active .htimeline_progress-pip { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); animation: pulse-ring 2s ease-out infinite; } .htimeline_progress-label { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 3px; color: rgba(255,255,255,0.18); text-transform: uppercase; text-align: center; } .htimeline_progress-step--active .htimeline_progress-label { color: var(--accent); } /* ══════════════════════════════════════════════════════════ 6. CTA FINAL ══════════════════════════════════════════════════════════ */ .about-cta { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(2,28,55,0.7) 0%, #000408 60%); text-align: center; border-top: 1px solid rgba(255,255,255,0.04); } .about-cta_bg-accent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(255,204,0,0.05) 0%, transparent 65%); pointer-events: none; } .about-cta_inner { position: relative; z-index: 1; } .about-cta_pre { font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 6px; color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 22px; } .about-cta_title { font-family: 'Oswald', sans-serif; font-size: clamp(2.8rem, 6.5vw, 5rem); font-weight: 700; line-height: 1; color: var(--white); text-transform: uppercase; margin-bottom: 52px; } .about-cta_title em { font-style: normal; color: var(--accent); display: block; } .about-cta_actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════ 7. RESPONSIVO ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .mv-grid { gap: 2px; } .mv-section_label, .values-section_label, .history-section_label { display: none; } .about-hero_floaters { display: none; } /* Timeline horizontal → vertical em mobile */ .htimeline::before { display: none; } .htimeline_items { grid-template-columns: 1fr; gap: 0; padding-left: 32px; position: relative; } .htimeline_items::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--accent) 0%, rgba(255,204,0,0.08) 100%); } .htimeline_item { flex-direction: column !important; align-items: flex-start; padding: 0 0 48px; position: relative; } /* Dot posicionado absolutamente na esquerda */ .htimeline_node { position: absolute; left: -32px; top: 0; } .htimeline_stem { display: none; } /* Reset order — tudo desce na ordem do DOM */ .htimeline_item:nth-child(1) .htimeline_card--above, .htimeline_item:nth-child(2) .htimeline_card--below, .htimeline_item:nth-child(3) .htimeline_card--above { order: 3 !important; } .htimeline_item:nth-child(1) .htimeline_date--below, .htimeline_item:nth-child(2) .htimeline_date--above, .htimeline_item:nth-child(3) .htimeline_date--below { order: 1 !important; margin: 0 0 10px !important; } .htimeline_item:nth-child(1) .htimeline_node, .htimeline_item:nth-child(2) .htimeline_node, .htimeline_item:nth-child(3) .htimeline_node { order: 0 !important; } .htimeline_card--above::after, .htimeline_card--below::before { display: none; } .htimeline_progress { display: none; } } @media (max-width: 700px) { .mv-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .mv-card { padding: 40px 30px; } .value-block { padding: 28px 22px; } .htimeline_card { padding: 20px 18px; } .about-cta_actions { flex-direction: column; align-items: center; } .about-hero_bottom-bar { display: none; } } /* ══════════════════════════════════════════════════════════ 8. TIMELINE — Interatividade (clique em progress step) ══════════════════════════════════════════════════════════ */ /* Steps clicáveis: reset button styles */ .htimeline_progress-step--linked { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; -webkit-appearance: none; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; flex: 1; transition: opacity 0.25s; } .htimeline_progress-step--linked:hover { opacity: 0.85; } /* Card seleccionado */ .htimeline_item--selected .htimeline_card { background: rgba(2, 28, 55, 0.75) !important; border-color: rgba(255, 204, 0, 0.45) !important; box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.2), 0 24px 60px rgba(0, 0, 0, 0.5) !important; transform: translateY(-6px) !important; } .htimeline_item--selected .htimeline_card--above::after { border-top-color: rgba(255, 204, 0, 0.45) !important; } .htimeline_item--selected .htimeline_card--below::before { border-bottom-color: rgba(255, 204, 0, 0.45) !important; } .htimeline_item--selected .htimeline_desc { color: var(--text-main) !important; } /* Dot "aceso" no item seleccionado */ .htimeline_item--selected .htimeline_dot:not(.htimeline_dot--pulse) { background: var(--accent) !important; box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.55); animation: pulse-ring 1.6s ease-out infinite !important; transform: scale(1.35) !important; } /* Pip da progress bar seleccionado */ .htimeline_progress-step--selected .htimeline_progress-pip { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 14px var(--accent-glow) !important; animation: pulse-ring 1.6s ease-out infinite !important; } .htimeline_progress-step--selected .htimeline_progress-label { color: var(--accent) !important; } /* ==== styles/pages/competition.css ==== */ /* ========================================================================== 2.5 PÁGINA COMPETIÇÃO (TELEMETRIA DE ALTA PERFORMANCE) ========================================================================== */ /* Hero Competição (100vh estruturado exatamente como o Index) */ .hero-comp { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background-size: cover; background-position: center; text-align: center; position: relative; padding: 0 20px; background-color: var(--darker); } .hero-comp h1 { font-size: var(--font-hero); margin-bottom: 20px; color: var(--white); text-shadow: 0 10px 30px rgba(0,0,0,0.8); line-height: 1.1; transition: all 0.4s ease; } .hero-comp h1:hover { color: var(--white); text-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 35px var(--accent-glow), 0 0 65px rgba(255, 204, 0, 0.4); } /* Layout da Introdução (Desafio Global) */ .comp-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .comp-intro-stats { display: flex; gap: 50px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--glass-border); } .comp-stat-box { border-left: 3px solid var(--accent); padding-left: 20px; } .comp-stat-row { display: flex; align-items: baseline; } .comp-stat-val { font-family: 'Oswald', sans-serif; font-size: 3.5rem; color: var(--white); line-height: 1; margin-bottom: 5px; } .comp-stat-lbl { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; } .comp-intro-visual { position: relative; display: flex; align-items: center; justify-content: center; } .comp-intro-radial { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,204,0,0.1) 0%, transparent 60%); top: 0; left: 0; z-index: 0; } .comp-intro-image { width: 100%; border-radius: 8px; border: 1px solid var(--glass-border); position: relative; z-index: 1; box-shadow: 0 20px 50px rgba(0,0,0,0.6); } .comp-subtitle-wide { max-width: 850px; } .competition-dynamic-subtitle { color: var(--text-main); } .competition-section-top { border-top: 1px solid var(--glass-border); } .competition-section-dark { background-color: var(--darker); } .competition-section-primary { background-color: var(--primary); } .inspection-card { padding: 30px 20px; } .inspection-card i { font-size: 2.5rem; margin-bottom: 20px; display: block; } .inspection-card h3 { font-size: 1.5rem; margin-bottom: 10px; } .inspection-card p { color: var(--text-main); font-size: 0.85rem; font-weight: normal; line-height: 1.6; text-transform: none; letter-spacing: 0; } .inspection-card-tech i { color: var(--accent); } .inspection-card-tilt i { color: var(--white); } .inspection-card-rain i { color: var(--text-muted); } .inspection-card-brake i { color: var(--accent); } .dynamic-card-featured { grid-column: 1 / -1; } .dynamic-card-featured .watermark { font-size: 8rem; top: 50px; } .competition-energy-desc { max-width: 85%; } .wheel-percent { font-size: 0.5em; margin-left: 5px; } .score-row-pts-muted { color: rgba(255,255,255,0.4); } /* --- DASHBOARD INTERATIVO (RODA E LISTAS) --- */ .scoring-controls { display: flex; justify-content: center; gap: 20px; margin-bottom: 50px; flex-wrap: wrap; } .btn-toggle { background: rgba(255,255,255,0.02); border: 2px solid var(--glass-border); color: var(--text-main); padding: 12px 35px; font-family: 'Oswald', sans-serif; font-size: 1.2rem; letter-spacing: 2px; border-radius: 4px; cursor: pointer; transition: var(--transition); backdrop-filter: blur(5px); position: relative; overflow: hidden; } .btn-toggle::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,204,0,0.2), transparent); transition: 0.5s; } .btn-toggle:hover::before { left: 100%; } .btn-toggle.active { background: var(--accent); color: var(--darker); border-color: var(--accent); box-shadow: 0 0 25px var(--accent-glow); } .interactive-scoring-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; background: linear-gradient(145deg, #010a14, #021830); border: 1px solid var(--glass-border); border-top: 3px solid var(--accent); padding: 50px; border-radius: 8px; box-shadow: 0 25px 60px rgba(0,0,0,0.8); position: relative; overflow: hidden; } .interactive-scoring-layout::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px); pointer-events: none; z-index: 0; } /* O Gráfico Circular Dinâmico */ .wheel-container { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; z-index: 1; } .wheel { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#021c37 0% 100%); position: relative; transition: background 0.4s ease-in-out; box-shadow: 0 0 40px rgba(0,0,0,0.9), inset 0 0 30px rgba(0,0,0,0.8); } .wheel::after { content: ''; position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; background: var(--darker); border-radius: 50%; box-shadow: inset 0 0 30px rgba(0,0,0,1); border: 1px solid rgba(255,255,255,0.05); } .wheel-inner-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; display: flex; flex-direction: column; width: 100%; } .wheel-pts { font-family: 'Oswald', sans-serif; font-size: 5rem; color: var(--white); line-height: 1; text-shadow: 0 0 20px rgba(255,204,0,0.3); transition: color 0.3s; } .wheel-lbl { font-size: 0.95rem; color: var(--accent); letter-spacing: 4px; font-weight: 700; margin-top: 5px; transition: color 0.3s; text-transform: uppercase; } /* Lista de Provas Interativa (Em Grelha para melhor acomodação) */ .scoring-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; position: relative; z-index: 1; } .score-row { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border); padding: 12px 15px; border-radius: 4px; transition: var(--transition); border-left: 4px solid var(--row-color, var(--accent)); cursor: pointer; } .score-row:hover { background: rgba(255,255,255,0.05); transform: translateY(-3px); border-color: var(--row-color, var(--accent)); box-shadow: 0 5px 15px rgba(0,0,0,0.4); } .score-row-name { font-size: 0.9rem; color: var(--white); font-weight: 500; display: flex; align-items: center; gap: 10px; transition: var(--transition); } .score-row:hover .score-row-name { color: var(--row-color, var(--accent)); } .score-row-name i { width: 18px; text-align: center; font-size: 1rem; color: var(--row-color, var(--accent)); } .score-row-pts { font-family: 'Oswald', sans-serif; font-size: 1.2rem; color: var(--white); transition: var(--transition); } .score-row:hover .score-row-pts { color: var(--row-color, var(--accent)); text-shadow: 0 0 10px var(--row-color, var(--accent)); } /* --- ANÁLISE DINÂMICA (Cartões Laser) --- */ .dynamic-card { background: linear-gradient(180deg, rgba(2, 18, 36, 0.4), rgba(0, 4, 8, 0.8)); border: 1px solid var(--glass-border); padding: 40px; position: relative; transition: var(--transition); overflow: hidden; display: flex; flex-direction: column; border-radius: 8px; } .dynamic-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transition: 0.6s; } .dynamic-card:hover { transform: translateY(-8px); border-color: rgba(255,204,0,0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.6); background: linear-gradient(180deg, rgba(2, 28, 55, 0.6), rgba(0, 4, 8, 0.9)); } .dynamic-card:hover::before { left: 100%; } .dynamic-card i.watermark { position: absolute; right: 20px; top: 20px; font-size: 4rem; color: rgba(255,255,255,0.03); transition: 0.5s; pointer-events: none; } .dynamic-card:hover i.watermark { color: rgba(255,204,0,0.05); transform: scale(1.2) rotate(15deg); } .dyn-pts { display: inline-block; background: rgba(255,204,0,0.1); color: var(--accent); padding: 6px 15px; font-family: 'Oswald', sans-serif; font-size: var(--font-sm); border: 1px solid var(--accent); margin-bottom: 20px; box-shadow: 0 0 15px rgba(255,204,0,0.1); border-radius: 4px; } .dynamic-card h3 { font-size: var(--font-xl); color: var(--white); margin-bottom: 15px; position: relative; z-index: 1; } .dynamic-card p { color: var(--text-main); font-size: var(--font-sm); line-height: 1.8; margin-bottom: 30px; position: relative; z-index: 1; flex-grow: 1; } /* Responsividade Mobile */ @media (max-width: 900px) { .comp-intro-grid { grid-template-columns: 1fr; gap: 40px; } .interactive-scoring-layout { grid-template-columns: 1fr; gap: 50px; padding: 30px 20px; } .wheel-container { max-width: 280px; } .wheel-pts { font-size: 3.5rem; } .scoring-list { grid-template-columns: 1fr; } } /* ============================================================ RACE WEEKEND + COUNTDOWN — Adições 2026 ============================================================ */ /* ── HERO (novo) ─────────────────────────────────────────── */ .comp-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: linear-gradient(180deg, #000408 0%, #021c37 55%, #000408 100%); } .comp-hero_grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .comp-hero_scan { position: absolute; top: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scan-down 7s linear infinite; opacity: 0.45; pointer-events: none; } @keyframes scan-down { 0% { top:-4px; opacity:0; } 5% { opacity:.45; } 95% { opacity:.25; } 100% { top:100%; opacity:0; } } .comp-hero_floaters { position:absolute; inset:0; pointer-events:none; z-index:1; } .comp-floater { position: absolute; font-family: 'Oswald', sans-serif; text-transform: uppercase; user-select: none; } .comp-floater--1 { top:15%; left:4%; font-size:3.5rem; color:rgba(255,204,0,0.04); animation: float-g 9s ease-in-out infinite; } .comp-floater--2 { top:25%; right:6%; font-size:0.65rem; letter-spacing:6px; color:rgba(255,255,255,0.06); animation: float-g 11s ease-in-out infinite 1s; } .comp-floater--3 { bottom:30%; left:5%; font-size:0.6rem; letter-spacing:5px; color:rgba(255,204,0,0.08); animation: float-g 13s ease-in-out infinite 2s; } .comp-floater--4 { top:55%; right:5%; font-size:3rem; color:rgba(255,255,255,0.03); animation: float-g 10s ease-in-out infinite 0.5s; } @keyframes float-g { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } } .comp-hero_content { position: relative; z-index:2; display: flex; flex-direction:column; align-items:center; text-align:center; max-width: 900px; padding: 80px 30px 130px; } .comp-hero_eyebrow { display: flex; align-items:center; gap:12px; font-family: 'Oswald', sans-serif; font-size:0.72rem; letter-spacing:6px; color:var(--accent); text-transform:uppercase; margin-bottom:28px; } .comp-hero_dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent),0 0 22px var(--accent-glow); animation: pdot 2.2s ease-in-out infinite; flex-shrink:0; } @keyframes pdot { 0%,100% { box-shadow:0 0 8px var(--accent),0 0 18px var(--accent-glow); transform:scale(1); } 50% { box-shadow:0 0 16px var(--accent),0 0 36px var(--accent-glow); transform:scale(1.2); } } .comp-hero_title { font-family: 'Oswald', sans-serif; font-size: clamp(3.5rem,9vw,7.5rem); font-weight:700; line-height:0.95; letter-spacing:-2px; color:var(--white); text-transform:uppercase; margin-bottom:28px; } .comp-hero_title em { font-style:normal; color:var(--accent); display:block; text-shadow:0 0 60px rgba(255,204,0,0.3); } .comp-hero_sub { font-size:1.05rem; color:rgba(255,255,255,0.5); max-width:600px; line-height:1.95; font-weight:300; margin-bottom:48px; } .comp-hero_scroll { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--accent); font-family:'Oswald',sans-serif; font-size:0.68rem; letter-spacing:5px; text-decoration:none; text-transform:uppercase; animation:bounce-c 2.8s ease-in-out infinite; transition:opacity 0.3s; } .comp-hero_scroll:hover { opacity:0.6; } .comp-hero_scroll i { font-size:1rem; color:rgba(255,255,255,0.5); margin-top:2px; } @keyframes bounce-c { 0%,100% { transform:translateY(0); } 55% { transform:translateY(9px); } } .comp-hero_bar { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; gap:18px; padding:12px 40px; font-family:'Oswald',sans-serif; font-size:0.65rem; letter-spacing:5px; color:rgba(255,255,255,0.15); text-transform:uppercase; z-index:2; border-top:1px solid rgba(255,255,255,0.04); } .comp-hero_bar-line { flex:1; height:1px; background:rgba(255,255,255,0.05); } /* ── RACE WEEKEND SECTION ────────────────────────────────── */ .rw-section { position: relative; background: #000408; border-top: 1px solid rgba(255,255,255,0.04); overflow: hidden; } .rw-section_bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .rw-header { text-align: center; margin-bottom: 52px; position: relative; z-index: 2; } .rw-header_eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:0.7rem; letter-spacing:6px; color:var(--accent); text-transform:uppercase; margin-bottom:18px; } .rw-header_dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pdot 2s ease-in-out infinite; flex-shrink:0; } .rw-subtitle { color:var(--text-muted); font-size:1rem; font-weight:300; max-width:640px; margin:14px auto 24px; line-height:1.9; } .rw-drag-hint { display:inline-flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:0.65rem; letter-spacing:4px; color:rgba(255,255,255,0.2); text-transform:uppercase; border:1px solid rgba(255,255,255,0.06); padding:6px 16px; border-radius:20px; animation:drag-hint 2s ease-in-out infinite; } @keyframes drag-hint { 0%,100% { transform:translateX(0); } 30% { transform:translateX(-6px); } 70% { transform:translateX(6px); } } /* Track strip */ .rw-track-strip { display:flex; align-items:center; gap:0; margin-bottom: 0; position: relative; z-index:2; } .rw-track-strip_line { height:4px; flex:1; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); } .rw-track-strip_dash { height:4px; width:60px; background:var(--accent); box-shadow:0 0 12px rgba(255,204,0,0.4); animation:dash-run 3s linear infinite; } @keyframes dash-run { 0% { transform:translateX(-300px); } 100% { transform:translateX(calc(100vw + 300px)); } } /* ── Scroll container ────────────────────────────────────── */ .rw-scroll-container { overflow-x: auto; overflow-y: visible; cursor: grab; padding: 20px 0 32px; position: relative; z-index: 2; scrollbar-width: thin; scrollbar-color: rgba(255,204,0,0.2) transparent; -webkit-overflow-scrolling: touch; } .rw-scroll-container:active { cursor: grabbing; } .rw-scroll-container::-webkit-scrollbar { height: 3px; } .rw-scroll-container::-webkit-scrollbar-track { background: transparent; } .rw-scroll-container::-webkit-scrollbar-thumb { background: rgba(255,204,0,0.2); border-radius:2px; } .rw-timeline { display: flex; gap: 0; padding: 0 40px; width: max-content; align-items: center; min-height: 420px; position: relative; } /* Linha horizontal central */ .rw-timeline::before { display: none; } /* ── Cada fase ──────────────────────────────────────────── */ .rw-phase { display: flex; flex-direction: column; align-items: center; width: 280px; flex-shrink: 0; position: relative; z-index: 1; /* itens ímpares: card acima / itens pares: card abaixo */ } /* DIA label */ .rw-phase_day { font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 4px; color: rgba(255,255,255,0.18); text-transform: uppercase; position: absolute; white-space: nowrap; } /* Layout padrão (ímpares) — card acima, dia abaixo */ .rw-phase:not(.rw-phase--alt) .rw-phase_day { bottom: calc(50% - 90px); /* abaixo do dot */ transform: translateY(100%); margin-top: 10px; } /* Layout alt (pares) — card abaixo, dia acima */ .rw-phase--alt .rw-phase_day { top: calc(50% - 90px); transform: translateY(-100%); margin-bottom: 10px; } /* Nó com dot */ .rw-phase_connector { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 100%; } .rw-phase_dot { width: 16px; height: 16px; border-radius: 50%; background: #000408; border: 2px solid var(--accent); flex-shrink: 0; transition: background 0.3s, box-shadow 0.35s, transform 0.35s; } .rw-phase:hover .rw-phase_dot { background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); transform: scale(1.4); } .rw-phase_dot--finale { width: 22px; height: 22px; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,204,0,0.55); animation: pulse-ring-c 2s ease-out infinite; } @keyframes pulse-ring-c { 0% { box-shadow:0 0 0 0 rgba(255,204,0,0.55); } 70% { box-shadow:0 0 0 14px rgba(255,204,0,0); } 100% { box-shadow:0 0 0 0 rgba(255,204,0,0); } } /* Cards */ .rw-phase_card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 4px; padding: 22px 20px 18px; width: 240px; position: relative; transition: background 0.35s, border-color 0.35s, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; } /* Cards ímpares ficam acima da linha */ .rw-phase:not(.rw-phase--alt) .rw-phase_card { margin-bottom: calc(50% + 28px); transform-origin: bottom center; } /* Cards pares ficam abaixo da linha */ .rw-phase--alt .rw-phase_card { margin-top: calc(50% + 28px); transform-origin: top center; } /* Seta */ .rw-phase:not(.rw-phase--alt) .rw-phase_card::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid rgba(255,255,255,0.07); transition: border-top-color 0.35s; } .rw-phase--alt .rw-phase_card::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.07); transition: border-bottom-color 0.35s; } .rw-phase_card--dynamic { border-top: 2px solid rgba(255,204,0,0.2); } .rw-phase_card--finale { border-color: rgba(255,204,0,0.25); background: rgba(2,28,55,0.5); border-top: 2px solid var(--accent); box-shadow: 0 0 30px rgba(255,204,0,0.08); } .rw-phase:hover .rw-phase_card { background: rgba(2,28,55,0.6); border-color: rgba(255,204,0,0.3); box-shadow: 0 16px 50px rgba(0,0,0,0.45); } /* Remove as bolas amarelas na timeline (pontos das fases e progress dots) */ .rw-phase_dot, .rw-progress-dots .rw-dot { display: none !important; } .rw-phase:not(.rw-phase--alt):hover .rw-phase_card { transform: translateY(-6px); } .rw-phase--alt:hover .rw-phase_card { transform: translateY(6px); } .rw-phase:hover .rw-phase_card::after { border-top-color: rgba(255,204,0,0.3); } .rw-phase:hover .rw-phase_card::before { border-bottom-color: rgba(255,204,0,0.3); } .rw-phase_num { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 3px; color: rgba(255,204,0,0.25); text-transform: uppercase; margin-bottom: 10px; transition: color 0.3s; } .rw-phase:hover .rw-phase_num { color: var(--accent); } .rw-phase_icon-wrap { width: 40px; height: 40px; border-radius: 3px; background: rgba(255,204,0,0.05); border: 1px solid rgba(255,204,0,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background 0.35s, border-color 0.35s; } .rw-phase_icon-wrap i { font-size: 1.1rem; color: rgba(255,204,0,0.35); transition: color 0.35s; } .rw-phase_icon-wrap--finale { background: rgba(255,204,0,0.1); border-color: rgba(255,204,0,0.3); animation: icon-pulse 2s ease-in-out infinite; } .rw-phase_icon-wrap--finale i { color: var(--accent); } @keyframes icon-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,204,0,0.3); } 50% { box-shadow:0 0 0 8px rgba(255,204,0,0); } } .rw-phase:hover .rw-phase_icon-wrap { background:rgba(255,204,0,0.08); border-color:rgba(255,204,0,0.25); } .rw-phase:hover .rw-phase_icon-wrap i { color: var(--accent); } .rw-phase_title { font-family: 'Oswald', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; line-height: 1.3; } .rw-phase_desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 12px; transition: color 0.35s; } .rw-phase:hover .rw-phase_desc { color: var(--text-main); } .rw-phase_checks { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } .rw-phase_checks span { font-family: 'Oswald', sans-serif; font-size: 0.56rem; letter-spacing: 2px; color: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 4px; transition: color 0.3s, border-color 0.3s; } .rw-phase:hover .rw-phase_checks span { color: rgba(255,204,0,0.6); border-color: rgba(255,204,0,0.15); } .rw-phase_pts { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 3px; color: rgba(255,255,255,0.2); text-transform: uppercase; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.04); transition: color 0.3s, border-top-color 0.3s; } .rw-phase:hover .rw-phase_pts { color: rgba(255,255,255,0.4); border-top-color: rgba(255,204,0,0.1); } .rw-phase_pts--dynamic { color: rgba(255,204,0,0.4); } .rw-phase:hover .rw-phase_pts--dynamic { color: var(--accent); } .rw-phase_pts--finale { color: var(--accent); font-size: 0.8rem; border-top-color: rgba(255,204,0,0.15); } /* Progress dots */ .rw-progress-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; position: relative; z-index:2; } .rw-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.12); transition: background 0.3s, transform 0.3s; cursor: pointer; } .rw-dot--active { background: var(--accent); transform: scale(1.3); } .rw-dot--finale { background: rgba(255,204,0,0.4); } /* ── COUNTDOWN + SEMÁFORO ────────────────────────────────── */ .countdown-section { position: relative; background: #000408; border-top: 1px solid rgba(255,255,255,0.04); overflow: hidden; } .countdown-section_bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,204,0,0.05), transparent); pointer-events: none; } .countdown-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; position: relative; z-index: 1; } /* Semáforo */ .semaforo { display: flex; flex-direction: column; align-items: center; gap: 12px; } .semaforo_housing { display: flex; gap: 14px; background: #050505; border: 2px solid rgba(255,255,255,0.08); border-radius: 50px; padding: 18px 24px; box-shadow: 0 8px 40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04); position: relative; } /* Reflexo metálico */ .semaforo_housing::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: rgba(255,255,255,0.08); border-radius: 50%; } .semaforo_light { width: 48px; height: 48px; border-radius: 50%; background: rgba(180, 0, 0, 0.15); border: 2px solid rgba(255,255,255,0.04); box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); transition: background 0.15s ease, box-shadow 0.15s ease; position: relative; overflow: hidden; } /* Reflexo na luz */ .semaforo_light::after { content: ''; position: absolute; top: 15%; left: 20%; width: 30%; height: 25%; background: rgba(255,255,255,0.15); border-radius: 50%; } .semaforo_light--on { background: radial-gradient(circle at 40% 35%, #ff6b6b, #cc0000); box-shadow: 0 0 20px rgba(200,0,0,0.8), 0 0 50px rgba(200,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3); } .semaforo_light--go { background: radial-gradient(circle at 40% 35%, #66ff66, #00aa00); box-shadow: 0 0 20px rgba(0,200,0,0.8), 0 0 50px rgba(0,200,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3); } .semaforo_label { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 5px; color: rgba(255,255,255,0.2); text-transform: uppercase; } /* Countdown header */ .cd-header { max-width: 640px; } .cd-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; } .cd-eyebrow_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pdot 2s ease-in-out infinite; } .cd-title { font-family: 'Oswald', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--white); text-transform: uppercase; line-height: 1; margin-bottom: 16px; } .cd-title em { font-style: normal; color: var(--accent); } .cd-subtitle { font-size: 0.95rem; color: var(--text-muted); line-height: 1.9; font-weight: 300; } /* Dígitos */ .cd-digits { display: flex; align-items: center; gap: 8px; } .cd-unit { display: flex; flex-direction: column; align-items: center; gap: 10px; } .cd-num { font-family: 'Oswald', sans-serif; font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 700; color: var(--white); line-height: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-top: 2px solid rgba(255,204,0,0.3); border-radius: 4px; padding: 18px 24px 14px; min-width: 100px; text-align: center; position: relative; overflow: hidden; transition: border-top-color 0.3s, color 0.3s; font-variant-numeric: tabular-nums; } /* Scan line */ .cd-num::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.04); top: 50%; } .cd-num--flash { color: var(--accent) !important; border-top-color: var(--accent) !important; box-shadow: 0 0 20px rgba(255,204,0,0.15); } .cd-lbl { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 4px; color: rgba(255,255,255,0.25); text-transform: uppercase; } .cd-sep { font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: rgba(255,204,0,0.3); margin-bottom: 28px; animation: sep-blink 1s step-end infinite; } @keyframes sep-blink { 0%,100%{opacity:1} 50%{opacity:0.2} } .cd-target-info { display: inline-flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 4px; color: rgba(255,255,255,0.2); text-transform: uppercase; border: 1px solid rgba(255,255,255,0.05); padding: 8px 18px; border-radius: 20px; } .cd-target-info i { color: var(--accent); } /* ── Responsivo ──────────────────────────────────────────── */ @media (max-width: 900px) { .comp-hero_floaters { display: none; } .comp-hero_bar { display: none; } .rw-drag-hint { display: inline-flex; } /* sempre visível */ .cd-digits { gap: 4px; } .cd-num { min-width: 72px; padding: 12px 14px 10px; } } @media (max-width: 600px) { .rw-phase { width: 220px; } .rw-phase_card { width: 190px; } .semaforo_light { width: 36px; height: 36px; } .semaforo_housing { gap: 10px; padding: 14px 16px; } .cd-num { min-width: 60px; font-size: 2rem; padding: 10px 10px 8px; } .cd-sep { font-size: 1.8rem; } } /* ==== styles/pages/departments.css ==== */ /* ========================= ISO FAN CAROUSEL (PREMIUM) ========================= */ .dept-tech-grid { position: relative; display: flex; justify-content: center; align-items: center; height: 600px; margin-top: 40px; overflow: visible; } .dept-panel { width: 300px; min-height: 320px; position: absolute; border-radius: 22px; padding: 32px; background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); transition: all 0.8s cubic-bezier(0.2, 0.9, 0.2, 1); cursor: pointer; user-select: none; pointer-events: none; /* Perspetiva individual em cada painel */ perspective: 1000px; } /* POSIÇÕES DO LEQUE */ /* Esquerda Longe */ .dept-panel.pos-far-left { transform: translateX(-500px) rotateY(40deg) scale(0.7); opacity: 0.25; z-index: 1; pointer-events: auto; } /* Esquerda Perto */ .dept-panel.pos-left { transform: translateX(-280px) rotateY(25deg) scale(0.85); opacity: 0.55; z-index: 5; pointer-events: auto; } /* CENTRO (ACTIVE) */ .dept-panel.pos-active { transform: translateX(0) rotateY(0deg) scale(1.1); opacity: 1; z-index: 10; border-color: rgba(255, 204, 0, 0.4); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,204,0,0.1); pointer-events: auto; } .dept-panel.pos-active:hover { transform: translateX(0) rotateY(0deg) scale(1.15); border-color: var(--accent); } .dept-panel.pos-right { transform: translateX(280px) rotateY(-25deg) scale(0.85); opacity: 0.55; z-index: 5; pointer-events: auto; } .dept-panel.pos-far-right { transform: translateX(500px) rotateY(-40deg) scale(0.7); opacity: 0.25; z-index: 1; pointer-events: auto; } /* HOVER NA CARTA ATIVA */ .dept-panel.pos-active:hover { transform: translateX(0) rotateY(0deg) translateZ(320px) scale(1.15); border-color: var(--accent); } .dept-panel.pos-far-far-left, .dept-panel.pos-far-far-right, .dept-panel.pos-hidden { transform: translateX(0) scale(0.4); opacity: 0; z-index: 0; pointer-events: none; } /* ==== styles/pages/home.css ==== */ /* ----------------------------------- 2.2 HOME (Componentes extra) ----------------------------------- */ .home-dept-card { display: grid; place-items: center; gap: 12px; min-height: 320px; padding: 32px 28px; border-radius: 14px; position: relative; overflow: hidden; text-align: center; background: linear-gradient(180deg, rgba(2,28,55,0.38), rgba(1,8,17,0.6)); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s, background 0.45s; } .home-dept-card::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 64px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), rgba(255,204,0,0.6)); box-shadow: 0 6px 20px rgba(255,204,0,0.06); opacity: 0.9; z-index: 2; } .home-dept-card:hover { transform: translateY(-14px) scale(1.01); background: linear-gradient(180deg, rgba(2,28,55,0.6), rgba(1,8,17,0.82)); box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 40px rgba(255,204,0,0.06); } .home-dept-card i.dept-icon { font-size: 3.2rem; color: rgba(255,255,255,0.3); margin-bottom: 25px; transition: var(--transition); position: relative; z-index: 1; display: block; } .home-dept-card:hover i.dept-icon { color: var(--accent); transform: scale(1.15) translateY(-5px); filter: drop-shadow(0 10px 15px rgba(255,204,0,0.4)); } .card-title { font-size: var(--font-lg); color: var(--white); margin-bottom: 15px; position: relative; z-index: 1; } .home-dept-card p { position: relative; z-index: 1; margin-bottom: 10px; } /* Description slides up from bottom on hover/focus */ .home-dept-card .dept-desc { position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transform: translateY(100%); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); color: var(--white); font-size: 1.05rem; z-index: 1; padding: 0; margin: 0; } /* Slide-up animation: reveal description from bottom on hover/focus with glassmorphism */ .home-dept-card:hover .dept-desc, .home-dept-card:focus-within .dept-desc, .home-dept-card:focus .dept-desc { padding: 40px 36px 36px; background: linear-gradient(180deg, rgba(1,12,28,0.95) 0%, rgba(2,28,55,1) 100%); backdrop-filter: blur(12px); color: #e8f0ff; font-size: clamp(0.95rem, 2.5vw, 1.3rem); font-weight: 400; line-height: 2.1; text-align: center; opacity: 1; transform: translateY(0); box-shadow: 0 -25px 80px rgba(0,0,0,0.6), 0 -1px 0 rgba(255,204,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05); text-shadow: 0 4px 16px rgba(0,0,0,0.65); z-index: 5; letter-spacing: 0.4px; } /* Animate title color and glow on hover */ .home-dept-card:hover .card-title, .home-dept-card:focus-within .card-title, .home-dept-card:focus .card-title { color: var(--white); transition: color 0.4s ease, text-shadow 0.4s ease; text-shadow: 0 0 20px rgba(255,204,0,0.25), 0 0 40px rgba(255,204,0,0.12); } /* Enhanced icon animation with multiple glow layers and subtle float */ .home-dept-card:hover .dept-icon, .home-dept-card:focus-within .dept-icon, .home-dept-card:focus .dept-icon { color: var(--accent); filter: drop-shadow(0 0 8px rgba(255,204,0,0.6)) drop-shadow(0 0 16px rgba(255,204,0,0.35)) drop-shadow(0 8px 30px rgba(255,204,0,0.3)); transform: scale(1.18) translateY(-8px); animation: float-icon 2.5s ease-in-out infinite; } /* Keep title, icon and arrow visible when description slides in from below */ .home-dept-card:hover .card-title, .home-dept-card:focus-within .card-title, .home-dept-card:focus .card-title, .home-dept-card:hover .dept-icon, .home-dept-card:focus-within .dept-icon, .home-dept-card:focus .dept-icon, .home-dept-card:hover .dept-card-arrow, .home-dept-card:focus-within .dept-card-arrow, .home-dept-card:focus .dept-card-arrow { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; } /* Optionally hide department name permanently if desired: uncomment next rule */ /* .home-dept-card .card-title { display: none !important; } */ /* Deixa o título e ícone visíveis sempre, ajustando camadas para a descrição */ .home-dept-card .card-title { position: relative; z-index: 2; margin: 0; padding: 0 10px; line-height: 1.05; } .home-dept-card .dept-icon { position: relative; z-index: 2; margin-bottom: 8px; font-size: 3.2rem; } /* Melhorar acessibilidade visual quando focado por teclado */ .home-dept-card:focus { outline: 3px solid rgba(255,204,0,0.12); outline-offset: 4px; } .dept-card-arrow { position: absolute; bottom: 20px; right: 25px; color: var(--accent); font-size: var(--font-md); opacity: 0; transform: translateX(-15px); transition: var(--transition); } .home-dept-card:hover .dept-card-arrow { opacity: 1; transform: translateX(0); } .pw-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #010811 0%, var(--darker) 8%); padding: 60px 0 40px; } .pw-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,204,0,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,204,0,0.025) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .pw-scanline { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,204,0,0.3) 30%, rgba(255,204,0,0.7) 50%, rgba(255,204,0,0.3) 70%, transparent 100%); animation: pw-scan 3s linear infinite; } @keyframes pw-scan { 0% { top: 0; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .pw-header-label { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 5px; color: rgba(255,204,0,0.6); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 14px; } .pw-header-label::before, .pw-header-label::after { content: ''; display: inline-block; height: 1px; width: 60px; background: linear-gradient(90deg, transparent, rgba(255,204,0,0.4), transparent); } .pw-carousel { position: relative; overflow: hidden; padding: 8px 0 4px; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .pw-grid { display: flex; align-items: stretch; gap: 16px; padding: 0 32px; width: max-content; min-width: 100%; margin: 0 auto; animation: pw-marquee var(--pw-marquee-duration, 26s) linear infinite; will-change: transform; } .pw-card { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; height: 90px; width: 180px; flex: 0 0 180px; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; transition: border-color .35s, background .35s, transform .35s cubic-bezier(.16,1,.3,1); opacity: 0; transform: translateY(14px) scale(.97); animation: pw-fade-in .55s forwards; } .pw-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -20%, rgba(255,204,0,0.18), transparent 70%); opacity: 0; transition: opacity .35s; } .pw-card::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transform: skewX(-20deg); transition: left .6s ease; } .pw-card:hover { border-color: rgba(255,204,0,0.5); background: rgba(255,204,0,0.05); transform: translateY(-5px) scale(1.03); } .pw-card:hover::before { opacity: 1; } .pw-card:hover::after { left: 130%; } @keyframes pw-fade-in { to { opacity: 1; transform: translateY(0) scale(1); } } .pw-card-corner { position: absolute; width: 8px; height: 8px; border-color: rgba(255,204,0,0.3); border-style: solid; transition: border-color .3s; } .pw-card-corner.tl { top: 5px; left: 5px; border-width: 1px 0 0 1px; } .pw-card-corner.tr { top: 5px; right: 5px; border-width: 1px 1px 0 0; } .pw-card-corner.bl { bottom: 5px; left: 5px; border-width: 0 0 1px 1px; } .pw-card-corner.br { bottom: 5px; right: 5px; border-width: 0 1px 1px 0; } .pw-card:hover .pw-card-corner { border-color: rgba(255,204,0,0.7); } .pw-card img { max-width: 85%; max-height: 45px; object-fit: contain; filter: grayscale(1) brightness(1.5); transition: .4s; position: relative; z-index: 1; } .pw-card:hover img { filter: grayscale(0%) brightness(1.1); transform: scale(1.08); } .pw-card.is-hovered, .pw-card:hover { border-color: rgba(255,204,0,0.65); background: rgba(255,204,0,0.08); transform: translateY(-5px) scale(1.03); } .pw-card.is-hovered::before, .pw-card:hover::before { opacity: 1; } .pw-card.is-hovered::after, .pw-card:hover::after { left: 130%; } .pw-card.is-hovered img { filter: grayscale(0%) brightness(1.15) drop-shadow(0 0 12px rgba(255,204,0,0.45)); transform: scale(1.1); } .pw-card.is-clone { pointer-events: none; } @keyframes pw-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } } .pw-carousel:hover .pw-grid, .pw-carousel:focus-within .pw-grid, .pw-carousel.is-paused .pw-grid { animation-play-state: paused; } /* Clones: visíveis mas sem tabindex */ .pw-card.is-clone { pointer-events: auto; } .pw-status { font-size: 10px; letter-spacing: 3px; color: rgba(255,204,0,0.35); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; } .pw-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .5; animation: pw-blink 1.8s ease-in-out infinite; } @keyframes pw-blink { 0%,100% { opacity: .3; } 50% { opacity: .9; } } .pw-bottom-line { height: 1px; margin: 20px 32px 0; background: linear-gradient(90deg, transparent, rgba(255,204,0,0.12), transparent); } .stats { background: #010811; background: linear-gradient(180deg, #021c37 0%, #010811 8%); position: relative; overflow: hidden; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); } .stats::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,204,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,204,0,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .fs-stats-track { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #ffcc00, transparent); animation: track-pulse 2.5s ease-in-out infinite; } @keyframes track-pulse { 0%,100% { opacity: 0.3; transform: scaleX(0.7); } 50% { opacity: 1; transform: scaleX(1); } } .fs-badge { text-align: center; margin-bottom: 48px; } .fs-badge span { font-size: 10px; letter-spacing: 6px; color: rgba(255,204,0,0.5); text-transform: uppercase; border: 1px solid rgba(255,204,0,0.15); padding: 6px 20px; border-radius: 2px; } .fs-stats-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .fs-stat { padding: 40px 32px; position: relative; cursor: default; transition: background 0.3s; border-right: 1px solid rgba(255,255,255,0.05); text-align: left; } .fs-stat:last-child { border-right: none; } .fs-stat::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #ffcc00; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); } .fs-stat:hover::after { transform: scaleX(1); } .fs-stat:hover { background: rgba(255,204,0,0.03); } .fs-stat-bar { position: absolute; left: 0; top: 0; width: 3px; height: 0; background: #ffcc00; transition: height 1.2s cubic-bezier(0.16,1,0.3,1); } .fs-stat.counted .fs-stat-bar { height: 100%; } .fs-stat-index { font-size: 11px; letter-spacing: 4px; color: rgba(255,204,0,0.4); text-transform: uppercase; display: block; margin-bottom: 16px; } .fs-stat-number { font-size: clamp(4rem, 8vw, 7rem); font-weight: 700; color: #fff; line-height: 0.9; letter-spacing: -2px; display: block; transition: color 0.3s, transform 0.3s; } .fs-stat:hover .fs-stat-number { color: var(--accent); transform: translateX(6px); } .fs-stat-number sup { font-size: 2rem; color: var(--accent); opacity: 0.7; vertical-align: super; } .fs-stat-label { font-size: 11px; letter-spacing: 4px; color: rgba(255,255,255,0.3); text-transform: uppercase; display: block; margin-top: 16px; transition: color 0.3s; } .fs-stat:hover .fs-stat-label { color: rgba(255,255,255,0.6); } @media (max-width: 768px) { .fs-stats-inner { grid-template-columns: 1fr; } .fs-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); } .fs-stat:last-child { border-bottom: none; } } /* ==== styles/pages/partners.css ==== */ /* ============================================================ PARTNERS PAGE — styles/pages/partners.css Formula Student UBI · Cockpit de Patrocinadores 2026 ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. HERO ══════════════════════════════════════════════════════════ */ .pt-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: linear-gradient(180deg, #000408 0%, #021c37 55%, #000408 100%); } .pt-hero_grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .pt-hero_scan { position: absolute; top: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scan-pt 7s linear infinite; opacity: 0.45; pointer-events: none; } @keyframes scan-pt { 0% { top:-4px; opacity:0; } 5% { opacity:.45; } 95% { opacity:.25; } 100% { top:100%; opacity:0; } } .pt-hero_content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; padding: 80px 30px 130px; } .pt-hero_eyebrow { display: flex; align-items: center; gap: 12px; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 28px; } .pt-hero_dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: ptdot 2.2s ease-in-out infinite; flex-shrink: 0; } @keyframes ptdot { 0%,100% { transform:scale(1); box-shadow:0 0 8px var(--accent); } 50% { transform:scale(1.2); box-shadow:0 0 18px var(--accent); } } .pt-hero_title { font-family: 'Oswald', sans-serif; font-size: clamp(3.5rem, 9vw, 7.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -2px; color: var(--white); text-transform: uppercase; margin-bottom: 28px; } .pt-hero_title em { font-style: normal; color: var(--accent); display: block; text-shadow: 0 0 60px rgba(255,204,0,0.3); } .pt-hero_sub { font-size: 1.05rem; color: rgba(255,255,255,0.5); max-width: 580px; line-height: 1.95; font-weight: 300; } .pt-hero_bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px; padding: 12px 40px; font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 5px; color: rgba(255,255,255,0.15); text-transform: uppercase; border-top: 1px solid rgba(255,255,255,0.04); z-index: 2; } .pt-hero_bar-line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); } /* ══════════════════════════════════════════════════════════ 2. BENEFÍCIOS ══════════════════════════════════════════════════════════ */ .pt-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(255,255,255,0.04); margin-top: 48px; } .pt-benefit { background: var(--darker); padding: 40px 32px; border-top: 2px solid transparent; transition: background 0.35s, border-top-color 0.35s, transform 0.4s cubic-bezier(0.16,1,0.3,1); cursor: default; } .pt-benefit:hover { background: rgba(2,28,55,0.5); border-top-color: var(--accent); transform: translateY(-4px); } .pt-benefit_icon { font-size: 1.8rem; color: rgba(255,204,0,0.3); margin-bottom: 18px; transition: color 0.35s, transform 0.35s; } .pt-benefit:hover .pt-benefit_icon { color: var(--accent); transform: scale(1.1); } .pt-benefit_title { font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 600; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .pt-benefit_desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.85; transition: color 0.35s; } .pt-benefit:hover .pt-benefit_desc { color: var(--text-main); } /* ══════════════════════════════════════════════════════════ 3. COCKPIT SECTION ══════════════════════════════════════════════════════════ */ .cockpit-section { position: relative; background: #000408; border-top: 1px solid rgba(255,255,255,0.04); overflow: hidden; } .cockpit-section_bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .cockpit-header { text-align: center; margin-bottom: 52px; position: relative; z-index: 1; } .cockpit-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; } .cockpit-eyebrow_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: ptdot 2s ease-in-out infinite; } .cockpit-sub { font-size: 1rem; color: var(--text-muted); font-weight: 300; max-width: 600px; margin: 14px auto 0; line-height: 1.9; } /* Layout cockpit */ .cockpit-layout { display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: start; position: relative; z-index: 1; } /* Diagrama SVG */ .cockpit-diagram { background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 24px; position: relative; } .car-svg { width: 100%; height: auto; display: block; } /* Hotspots */ .car-hotspot { cursor: pointer; outline: none; } .hotspot-ring { transition: r 0.3s, fill 0.3s; } .hotspot-core { transition: r 0.3s; } .hotspot-pulse { animation: hotspot-pulse 2.5s ease-out infinite; transform-origin: center; } @keyframes hotspot-pulse { 0% { r: 14; opacity: 0.8; } 70% { r: 22; opacity: 0; } 100% { r: 22; opacity: 0; } } .car-hotspot:hover .hotspot-ring, .car-hotspot:focus .hotspot-ring { fill: rgba(255,204,0,0.22); } .car-hotspot:hover .hotspot-core, .car-hotspot:focus .hotspot-core { r: 8; } .car-hotspot.is-active .hotspot-ring { fill: rgba(255,204,0,0.25); stroke-width: 2.5; } .car-hotspot.is-active .hotspot-core { fill: #fff; } /* Tooltip */ .cockpit-tooltip { position: absolute; background: rgba(0,8,18,0.97); border: 1px solid rgba(255,204,0,0.25); border-radius: 4px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; min-width: 240px; max-width: 300px; box-shadow: 0 16px 50px rgba(0,0,0,0.7); z-index: 10; pointer-events: none; animation: tooltip-in 0.2s ease both; } @keyframes tooltip-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } .cockpit-tooltip_logo { width: 52px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 3px; padding: 4px; } .cockpit-tooltip_logo img { max-width: 44px; max-height: 28px; object-fit: contain; filter: brightness(1.2); } .cockpit-tooltip_system { font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 3px; } .cockpit-tooltip_name { font-family: 'Oswald', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--white); letter-spacing: 0.5px; margin-bottom: 4px; } .cockpit-tooltip_desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; } /* Legenda */ .cockpit-legend { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; padding: 20px 18px; position: sticky; top: 100px; } .cockpit-legend_title { font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 4px; color: rgba(255,255,255,0.2); text-transform: uppercase; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; gap: 8px; } .cockpit-legend_title i { color: var(--accent); } .cockpit-legend_list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .cockpit-legend_item { display: flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 1px; color: rgba(255,255,255,0.3); text-transform: uppercase; cursor: pointer; padding: 6px 8px; border-radius: 3px; transition: background 0.25s, color 0.25s; } .cockpit-legend_item:hover { background: rgba(255,204,0,0.05); color: var(--white); } .cockpit-legend_item.is-active { color: var(--accent); background: rgba(255,204,0,0.05); } .cockpit-legend_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ 4. HALL OF FAME — Tiers ══════════════════════════════════════════════════════════ */ .pt-tiers { position: relative; background: #010811; border-top: 1px solid rgba(255,255,255,0.04); } .pt-tiers_bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .pt-tier { margin-bottom: 56px; position: relative; z-index: 1; } .pt-tier:last-child { margin-bottom: 0; } .pt-tier_header { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; } .pt-tier_medal { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; border: 1px solid; } .pt-tier_medal--platinum { background: rgba(220,220,255,0.08); border-color: rgba(220,220,255,0.2); color: #c8c8ff; } .pt-tier_medal--gold { background: rgba(255,204,0,0.08); border-color: rgba(255,204,0,0.25); color: var(--accent); } .pt-tier_medal--silver { background: rgba(180,180,180,0.06); border-color: rgba(180,180,180,0.2); color: #aaa; } .pt-tier_medal--bronze { background: rgba(180,100,40,0.08); border-color: rgba(180,100,40,0.2); color: #cd7f32; } .pt-tier_medal--partner { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); } .pt-tier_medal--inst { background: rgba(100,160,255,0.06); border-color: rgba(100,160,255,0.15); color: #6aa0ff; } .pt-tier_name { font-family: 'Oswald', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; white-space: nowrap; } [data-tier="platinum"] .pt-tier_name { color: #c8c8ff; } [data-tier="gold"] .pt-tier_name { color: var(--accent); } [data-tier="silver"] .pt-tier_name { color: #bbb; } [data-tier="bronze"] .pt-tier_name { color: #cd7f32; } [data-tier="partner"] .pt-tier_name { color: rgba(255,255,255,0.5); } [data-tier="inst"] .pt-tier_name { color: #6aa0ff; } .pt-tier_line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); } /* Grid de logos — flex para centrar quando a row não está cheia */ .pt-tier_grid { display: flex; flex-wrap: wrap; gap: 2px; background: rgba(255,255,255,0.03); } .pt-tier_grid .pt-plaque { flex: 1 1 160px; min-width: 140px; box-sizing: border-box; } /* Ouro — 4 itens → 4 colunas iguais */ [data-tier="gold"] .pt-tier_grid { justify-content: flex-start; } [data-tier="gold"] .pt-tier_grid .pt-plaque { flex: 1 1 200px; max-width: calc(25% - 2px); } /* Prata — 3 itens */ [data-tier="silver"] .pt-tier_grid .pt-plaque { flex: 1 1 240px; max-width: calc(33.333% - 2px); } /* Parceiros — 3 itens */ [data-tier="partner"] .pt-tier_grid .pt-plaque { flex: 1 1 240px; max-width: calc(33.333% - 2px); } /* Institucional — 3 itens */ [data-tier="inst"] .pt-tier_grid .pt-plaque { flex: 1 1 240px; max-width: calc(33.333% - 2px); } /* Bronze — 8 itens → preenche a linha */ [data-tier="bronze"] .pt-tier_grid .pt-plaque { flex: 1 1 150px; max-width: calc(12.5% - 2px); } /* Platina usa grid fixo */ .pt-tier_grid--lg { display: grid; grid-template-columns: repeat(3, 1fr); flex-wrap: unset; } /* Placa do parceiro */ .pt-plaque { background: rgba(255,204,0,0.04); border: 1px solid rgba(255,204,0,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px 18px; text-decoration: none; transition: background 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; } .pt-plaque::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); } .pt-plaque:hover { background: rgba(2,28,55,0.5); transform: translateY(-3px); } .pt-plaque:hover::before { transform: scaleX(1); } .pt-plaque_img-wrap { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; } .pt-plaque_img-wrap img { max-width: 120px; max-height: 52px; object-fit: contain; filter: brightness(1.1) contrast(1); transition: filter 0.35s, transform 0.35s; } .pt-plaque:hover .pt-plaque_img-wrap img { filter: brightness(1.25) contrast(1); transform: scale(1.06); } .pt-plaque_name { font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 2px; color: rgba(255,255,255,0.85); text-transform: uppercase; transition: color 0.3s; text-align: center; } .pt-plaque:hover { background: rgba(255,204,0,0.14); border-color: rgba(255,204,0,0.25); transform: translateY(-3px); } .pt-plaque:hover .pt-plaque_name { color: rgba(255,204,0,0.5); } /* Platina — plaques maiores */ [data-tier="platinum"] .pt-plaque { padding: 36px 24px 24px; } [data-tier="platinum"] .pt-plaque_img-wrap { height: 80px; } [data-tier="platinum"] .pt-plaque_img-wrap img { max-width: 160px; max-height: 72px; } /* ══════════════════════════════════════════════════════════ 5. GARAGE CTA ══════════════════════════════════════════════════════════ */ .garage-section { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; background: #000408; } /* Porta da garagem — duas metades que abrem */ .garage-door { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .garage-door_panel { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, #030c18 0%, #010811 100%); border: none; transition: transform 1.2s cubic-bezier(0.77,0,0.175,1); } .garage-door_panel--top { top: 0; height: 50%; transform: translateY(0); border-bottom: 1px solid rgba(255,204,0,0.1); } .garage-door_panel--bot { bottom: 0; height: 50%; transform: translateY(0); border-top: 1px solid rgba(255,204,0,0.1); } /* Ripas horizontais */ .garage-door_slats { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; } .garage-door_slats span { flex: 1; border-bottom: 1px solid rgba(255,255,255,0.03); } /* Garagem aberta */ .garage-door.is-open .garage-door_panel--top { transform: translateY(-102%); } .garage-door.is-open .garage-door_panel--bot { transform: translateY(102%); } /* Conteúdo (escondido atrás da porta) */ .garage-content { position: relative; z-index: 1; width: 100%; background: linear-gradient(135deg, rgba(2,28,55,0.5), #000408); border-top: 1px solid rgba(255,255,255,0.04); } /* Fundo radial */ .garage-content::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(255,204,0,0.05) 0%, transparent 65%); pointer-events: none; } .garage-content_inner { position: relative; z-index: 1; padding: 100px 30px; text-align: center; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; } .garage-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; } .garage-eyebrow_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: ptdot 2s ease-in-out infinite; } .garage-title { font-family: 'Oswald', sans-serif; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700; color: var(--white); text-transform: uppercase; line-height: 1; } .garage-title em { font-style: normal; color: var(--accent); display: block; } .garage-sub { font-size: 1rem; color: var(--text-muted); max-width: 580px; line-height: 1.9; font-weight: 300; } .garage-actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .garage-btn { animation: garage-pulse 3s ease-in-out infinite; } @keyframes garage-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); } 50% { box-shadow: 0 0 0 12px rgba(255,204,0,0); } } .garage-contact-info { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .garage-contact-item { display: flex; align-items: center; gap: 8px; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 3px; color: rgba(255,255,255,0.25); text-transform: uppercase; text-decoration: none; transition: color 0.3s; } .garage-contact-item:hover { color: var(--accent); } .garage-contact-item i { color: var(--accent); } /* ══════════════════════════════════════════════════════════ 6. RESPONSIVO ══════════════════════════════════════════════════════════ */ @media (max-width: 1000px) { .cockpit-layout { grid-template-columns: 1fr; } .cockpit-legend { position: static; } .cockpit-legend_list { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 768px) { .pt-benefits { grid-template-columns: 1fr; } .pt-tier_grid--lg { grid-template-columns: repeat(2, 1fr); } .pt-tier_grid { grid-template-columns: repeat(2, 1fr); } .garage-actions { flex-direction: column; align-items: center; } .pt-hero_bar { display: none; } } @media (max-width: 480px) { .pt-tier_grid { grid-template-columns: 1fr; } } /* ==== styles/pages/prototype.css ==== */ /* ========================================================================== 2.6 PÁGINA PROTÓTIPO (MODELO 3D & BENTO GRID) ========================================================================== */ /* Hero do Protótipo */ .hero-car { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-size: cover; background-position: center; text-align: center; position: relative; padding: 0 20px; } .car-stats-hero { color: var(--text-main); margin: 0 auto; } .hero-car .hero-content { margin-top: 120px; z-index: 2; width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; } /* Título Stroke */ .car-codename { font-family: 'Oswald', sans-serif; font-size: clamp(4rem, 12vw, 8rem); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.5); line-height: 1; margin-bottom: 20px; transition: all 0.4s ease; cursor: default; } .car-codename:hover { color: var(--white); -webkit-text-stroke: 2px var(--white); text-shadow: 0 0 15px rgba(255,255,255,0.8); } /* Botão de Ignição */ .power-start-container { margin-top: 50px; transition: transform 0.3s ease; display: block; } .power-start-container:hover { transform: translateY(-5px); } .power-start-container a { display: flex; flex-direction: column; align-items: center; text-decoration: none; outline: none; } .power-btn-label { font-size: 0.85rem; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: block; } .fa-power-off { font-size: 3.5rem; color: var(--accent); filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.4)); animation: pulseGlow 2s infinite; transition: 0.3s; } .power-start-container:hover .fa-power-off { filter: drop-shadow(0 0 25px var(--accent)); color: #fff; } @keyframes pulseGlow { 0% { filter: drop-shadow(0 0 5px var(--accent)); opacity: 0.8; } 50% { filter: drop-shadow(0 0 20px var(--accent)); opacity: 1; } 100% { filter: drop-shadow(0 0 5px var(--accent)); opacity: 0.8; } } /* Top Stats */ .car-top-stats { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 850px; margin: 50px auto 0 auto !important; border-top: 1px solid var(--glass-border); padding-top: 40px; } .car-top-stat-box { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .car-top-stat-box + .car-top-stat-box::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: var(--glass-border); } .car-top-val { font-family: 'Oswald', sans-serif; font-size: 3.5rem; color: var(--white); line-height: 0.9; margin-bottom: 8px; } .car-top-val span { font-size: 1.5rem; color: var(--accent); margin-left: 5px; } .car-top-lbl { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; } /* HUD & 3D Viewer */ .model-viewer-container { background: radial-gradient(circle at center, rgba(4, 21, 40, 0.8) 0%, #010811 100%); border-radius: 12px; padding: 10px; border: 1px solid var(--glass-border); position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.5); margin-bottom: 60px; overflow: hidden; } .hud-overlay { position: absolute; top: 20px; left: 20px; z-index: 10; pointer-events: none; text-align: left; } /* Stat Cards */ .stat-card { background: linear-gradient(145deg, rgba(2, 28, 55, 0.4), rgba(0, 4, 8, 0.9)); border: 1px solid var(--glass-border); padding: 40px 15px; border-radius: 12px; text-align: center; transition: var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } .stat-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.4); } .stat-val { font-size: 3.5rem; font-family: 'Oswald', sans-serif; color: #fff; margin: 0; line-height: 1.1; } /* ========================================================================== FICHA TÉCNICA — Engineering Data Sheet ========================================================================== */ .tech-sheet { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(255, 204, 0, 0.15); border-radius: 4px; overflow: hidden; background: rgba(0, 4, 8, 0.7); } /* Cabeçalho da ficha */ .tech-sheet_header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 20px 36px; background: rgba(255, 204, 0, 0.04); border-bottom: 1px solid rgba(255, 204, 0, 0.2); } .tech-sheet_doc-id { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 4px; color: var(--accent); opacity: 0.7; text-transform: uppercase; white-space: nowrap; } .tech-sheet_breadcrumb { display: flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; opacity: 0.5; } .tech-sheet_breadcrumb span { color: var(--accent); opacity: 0.9; } .tech-sheet_status { display: flex; align-items: center; gap: 8px; font-size: 0.58rem; letter-spacing: 3px; text-transform: uppercase; color: #4dff91; opacity: 0.75; white-space: nowrap; } .tech-sheet_status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4dff91; box-shadow: 0 0 8px #4dff91; flex-shrink: 0; animation: statusPulse 2.4s infinite; } @keyframes statusPulse { 0%, 100% { opacity: 0.6; box-shadow: 0 0 4px #4dff91; } 50% { opacity: 1; box-shadow: 0 0 12px #4dff91; } } /* Grelha dos sistemas */ .tech-sheet_grid { display: grid; grid-template-columns: 1fr 1fr; } /* Bloco de sistema */ .tsys { padding: 44px 40px; position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.3s; } .tsys:nth-child(even) { border-right: none; } .tsys--full { grid-column: span 2; border-right: none; border-bottom: none; } .tsys:hover { background: rgba(255,204,0,0.025); } /* Número do sistema (watermark) */ .tsys_index { position: absolute; top: -10px; right: 20px; font-family: 'Oswald', sans-serif; font-size: 7rem; font-weight: 900; color: var(--accent); opacity: 0.03; line-height: 1; letter-spacing: -6px; pointer-events: none; transition: opacity 0.4s; user-select: none; } .tsys:hover .tsys_index { opacity: 0.07; } /* Cabeçalho do bloco */ .tsys_head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); } .tsys_icon-wrap { flex-shrink: 0; width: 42px; height: 42px; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgba(255, 204, 0, 0.05); transition: background 0.3s, border-color 0.3s; } .tsys:hover .tsys_icon-wrap { background: rgba(255, 204, 0, 0.1); border-color: rgba(255, 204, 0, 0.5); } .tsys_icon-wrap i { font-size: 1.1rem; color: var(--accent); } .tsys_meta { flex: 1; } .tsys_tag { display: block; font-size: 0.57rem; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); opacity: 0.65; margin-bottom: 4px; font-family: 'Inter', sans-serif; font-weight: 700; } .tsys_title { font-family: 'Oswald', sans-serif; font-size: clamp(1.1rem, 1.8vw, 1.45rem); color: var(--white); letter-spacing: 2px; margin: 0; line-height: 1.2; transition: color 0.3s; } .tsys:hover .tsys_title { color: var(--accent); } /* Descrição */ .tsys_desc { color: var(--text-muted); font-size: 0.83rem; line-height: 1.85; margin-bottom: 28px; max-width: 440px; } /* Tabela de specs */ .tsys_specs { width: 100%; border-collapse: collapse; } .tsys_specs tr { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; } .tsys_specs tr:last-child { border-bottom: none; } .tsys_specs tr:hover { background: rgba(255,204,0,0.03); } .tsys_specs td { display: block; } .tsys_key { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--text-muted); opacity: 0.75; padding-left: 2px; } .tsys_val { text-align: right; font-family: 'Oswald', sans-serif; font-size: 1rem; color: var(--white); letter-spacing: 0.5px; padding-right: 2px; } .tsys_val em { font-style: normal; font-size: 0.65rem; color: var(--accent); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 1.5px; margin-left: 4px; vertical-align: middle; } /* Barra de progresso para métricas com percentagem */ .tsys_bar-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .tsys_bar-row:last-child { border-bottom: none; } .tsys_bar-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .tsys_bar-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--text-muted); opacity: 0.75; } .tsys_bar-value { font-family: 'Oswald', sans-serif; font-size: 0.95rem; color: var(--white); } .tsys_bar-value em { font-style: normal; font-size: 0.62rem; color: var(--accent); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 1.5px; margin-left: 3px; } .tsys_bar-track { height: 2px; background: rgba(255,255,255,0.06); border-radius: 1px; overflow: hidden; } .tsys_bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, rgba(255,204,0,0.5) 100%); border-radius: 1px; transform-origin: left; animation: barGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-play-state: paused; } .reveal.is-visible .tsys_bar-fill { animation-play-state: running; } @keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Layout full-width (chassi) */ .tsys_cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } /* Rodapé da ficha */ .tech-sheet_footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 36px; border-top: 1px solid rgba(255, 204, 0, 0.12); background: rgba(255, 204, 0, 0.02); } .tech-sheet_footer-note { font-size: 0.57rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); opacity: 0.45; } .tech-sheet_footer-rev { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 3px; color: var(--accent); opacity: 0.5; text-transform: uppercase; } /* Responsivo */ @media (max-width: 900px) { .tech-sheet_grid { grid-template-columns: 1fr; } .tsys--full { grid-column: span 1; } .tsys:nth-child(even) { border-right: 1px solid rgba(255,255,255,0.04); } .tsys { border-right: none; } .tsys_cols { grid-template-columns: 1fr; gap: 0; } .tech-sheet_header { grid-template-columns: 1fr; gap: 8px; } .tech-sheet_breadcrumb { display: none; } } @media (max-width: 768px) { .car-codename { font-size: 4rem; } .car-top-stats { flex-direction: column; gap: 36px; border-top: none; } .car-top-stat-box + .car-top-stat-box::before { display: none; } .tsys { padding: 32px 24px; } .tech-sheet_header { padding: 16px 24px; } .tech-sheet_footer { padding: 12px 24px; flex-direction: column; gap: 6px; text-align: center; } } /* ==== styles/pages/media.css ==== */ /* ═══════════════════════════════════════════ MEDIA PAGE — Instagram embed + Eventos ═══════════════════════════════════════════ */ .media-section-header { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5rem; margin-bottom: 2.5rem; } .media-section-sub { order: 3; margin-top: -1rem; opacity: 0.75; } .media-ig-follow { white-space: nowrap; } /* Container do embed oficial do Instagram (iframe) */ .media-ig-embed { width: 100%; border-radius: 12px; overflow: hidden; background: transparent; display: flex; justify-content: center; padding: 0.5rem; } .media-ig-embed iframe { width: 100%; max-width: 600px; height: 550px; border: none; display: block; border-radius: 8px; } @media (max-width: 600px) { .media-ig-embed iframe { height: 780px; } } /* ── Grid de eventos ── */ .media-events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem; } .media-event-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; transition: var(--transition); } .media-event-card:hover { transform: translateY(-4px); border-color: var(--accent); } .media-event-card_img-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .media-event-card_img-wrap img { width: 100%; height: 100%; object-fit: cover; } .media-event-card_badge { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--accent); color: var(--primary); font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.05em; padding: 0.3rem 0.7rem; border-radius: 20px; text-transform: uppercase; } .media-event-card_body { padding: 1.25rem 1.5rem 1.5rem; } .media-event-card_title { font-family: 'Oswald', sans-serif; font-size: var(--font-md); color: var(--white); margin-bottom: 0.5rem; } .media-event-card_meta { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: 0.6rem; } .media-event-card_meta i { margin-right: 0.3rem; color: var(--accent); } .media-event-card_desc { font-size: var(--font-sm); line-height: 1.5; color: var(--text-main); } /* ── Responsivo ── */ @media (max-width: 768px) { .media-section-header { flex-direction: column; align-items: flex-start; } .media-events-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ CARTÕES DE POST DO INSTAGRAM (manuais) ═══════════════════════════════════════════ */ .instagram-post-card { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; overflow: hidden; transition: var(--transition); } .instagram-post-card:hover { border-color: rgba(255,204,0,0.3); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); } .instagram-post-card__link { display: block; color: inherit; text-decoration: none; } .instagram-post-card__head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; } .instagram-post-card__avatar { width: 46px; height: 46px; border-radius: 8px; background: var(--dark); border: 1px solid var(--glass-border); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .instagram-post-card__avatar img { width: 75%; height: auto; object-fit: contain; } .instagram-post-card__meta { flex: 1; min-width: 0; } .instagram-post-card__handle { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--white); font-size: 0.95rem; } .instagram-post-card__date { margin: 2px 0 0; color: var(--text-muted); font-size: 0.78rem; } .instagram-post-card__icon { color: rgba(255,255,255,0.35); font-size: 1.3rem; flex-shrink: 0; } .instagram-post-card__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .instagram-post-card__caption { margin: 0; padding: 14px 16px 18px; color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Distingue um cartão-modelo de um post real, para ninguém publicar isto por engano a pensar que já são posts verdadeiros. */ .instagram-post-card--placeholder { border-style: dashed; } .instagram-post-card__badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(1,8,17,0.85); border: 1px solid rgba(255,204,0,0.4); color: var(--accent); font-family: 'Courier New', monospace; font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; pointer-events: none; } /* Desktop: grelha de 3 colunas */ .instagram-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 12px; } .instagram-posts-mobile { display: none; } /* Mobile: carrossel horizontal com scroll-snap */ @media (max-width: 900px) { .instagram-posts-grid { display: none; } .instagram-posts-mobile { display: block; margin: 0 -25px 12px; padding: 0 25px; } .instagram-posts-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 25px; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; } .instagram-posts-track::-webkit-scrollbar { display: none; } .instagram-posts-track .instagram-post-card { flex: 0 0 82%; scroll-snap-align: center; } } /* ==== styles/pages/recruitment.css ==== */ /* ============================================================ RECRUITMENT PAGE — styles/pages/recruitment.css Formula Student UBI · Mission Briefing 2026 ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. FUNDO FIXO ══════════════════════════════════════════════════════════ */ .rec-bg { position: fixed; inset: 0; z-index: -2; background: linear-gradient(160deg, #000408 0%, #010d1c 50%, #000408 100%); } .rec-bg_grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 55px 55px; } .rec-bg_vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 100%); } /* ══════════════════════════════════════════════════════════ 2. HERO — Mission Briefing ══════════════════════════════════════════════════════════ */ .rec-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 30px 60px; position: relative; } .rec-hero_content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 860px; gap: 36px; } /* Terminal topbar */ .rec-hero_terminal-bar { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px 6px 0 0; padding: 10px 18px; width: 100%; max-width: 680px; font-family: 'Courier New', monospace; font-size: 0.75rem; } .rec-hero_terminal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .rec-hero_terminal-dot--red { background: #ff5f57; } .rec-hero_terminal-dot--yellow { background: #ffbd2e; } .rec-hero_terminal-dot--green { background: #28c840; } .rec-hero_terminal-bar-title { color: rgba(255,255,255,0.35); flex: 1; text-align: center; letter-spacing: 1px; } .rec-hero_terminal-status { color: #00e676; font-size: 0.65rem; letter-spacing: 2px; animation: status-blink 2s ease-in-out infinite; } @keyframes status-blink { 0%,100% { opacity:1; } 50% { opacity:0.4; } } /* Typewriter block */ .rec-hero_typewriter-wrap { background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.07); border-top: none; border-radius: 0 0 6px 6px; padding: 36px 40px 40px; width: 100%; max-width: 680px; text-align: left; } .rec-hero_tw-line { display: flex; align-items: flex-start; gap: 6px; font-family: 'Courier New', monospace; margin-bottom: 10px; min-height: 1.5em; } .rec-hero_tw-prefix { color: rgba(255,204,0,0.5); font-size: 0.88rem; flex-shrink: 0; margin-top: 1px; } .rec-hero_tw-text { font-size: 0.88rem; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; } /* Cursor piscante inline */ .rec-hero_tw-text.tw-cursor::after { content: '█'; color: var(--accent); animation: tw-cursor 0.7s step-end infinite; font-size: 0.85em; } @keyframes tw-cursor { 0%,100% { opacity:1; } 50% { opacity:0; } } .rec-hero_tw-title { font-family: 'Oswald', sans-serif; font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: -1px; line-height: 1; margin: 20px 0 24px; min-height: 1.2em; } /* Cor amarela nas palavras chave do título */ .rec-hero_tw-title .tw-accent { color: var(--accent); } /* Métricas */ .rec-hero_metrics { display: flex; align-items: center; gap: 32px; padding: 24px 0 0; } .rec-hero_metric { display: flex; flex-direction: column; align-items: center; gap: 6px; } .rec-hero_metric-val { font-family: 'Oswald', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--white); line-height: 1; } .rec-hero_metric-lbl { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 4px; color: rgba(255,255,255,0.25); text-transform: uppercase; } .rec-hero_metric-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.08); } /* Scroll CTA */ .rec-hero_cta-scroll { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent); font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 5px; text-decoration: none; text-transform: uppercase; animation: bounce-r 2.8s ease-in-out infinite; transition: opacity 0.3s; } .rec-hero_cta-scroll:hover { opacity: 0.6; } .rec-hero_cta-scroll i { font-size: 0.9rem; color: rgba(255,255,255,0.4); margin-top: 2px; } @keyframes bounce-r { 0%,100% { transform: translateY(0); } 55% { transform: translateY(9px); } } /* ══════════════════════════════════════════════════════════ 3. MISSION BRIEFING ══════════════════════════════════════════════════════════ */ .rec-briefing { position: relative; } .rec-briefing_header { text-align: center; margin-bottom: 64px; } .rec-briefing_eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; } .rec-briefing_eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pdot-r 2s ease-in-out infinite; } @keyframes pdot-r { 0%,100% { transform:scale(1); box-shadow:0 0 6px var(--accent); } 50% { transform:scale(1.2); box-shadow:0 0 14px var(--accent); } } .rec-briefing_sub { font-size: 1rem; color: var(--text-muted); font-weight: 300; max-width: 560px; margin: 14px auto 0; line-height: 1.9; } /* Missões */ .rec-missions { display: flex; flex-direction: column; gap: 0; max-width: 960px; margin: 0 auto; } .rec-mission { display: grid; grid-template-columns: 80px 1fr; gap: 0; position: relative; } .rec-mission_sidebar { display: flex; flex-direction: column; align-items: center; padding-top: 32px; } .rec-mission_num { font-family: 'Oswald', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--accent); line-height: 1; flex-shrink: 0; } .rec-mission_num--dim { color: rgba(255,255,255,0.1); } .rec-mission_sidebar-line { width: 1px; flex: 1; min-height: 40px; background: linear-gradient(to bottom, rgba(255,204,0,0.2), rgba(255,204,0,0.04)); margin-top: 12px; } .rec-mission_body { padding: 28px 0 48px 24px; border-left: 1px solid rgba(255,255,255,0.05); margin-left: 4px; } .rec-mission_header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .rec-mission_icon-wrap { width: 44px; height: 44px; border-radius: 3px; background: rgba(255,204,0,0.07); border: 1px solid rgba(255,204,0,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rec-mission_icon-wrap i { color: var(--accent); font-size: 1.1rem; } .rec-mission_icon-wrap--dim { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); } .rec-mission_icon-wrap--dim i { color: rgba(255,255,255,0.15); } .rec-mission_tag { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 4px; color: rgba(255,204,0,0.5); text-transform: uppercase; margin-bottom: 4px; } .rec-mission_title { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--white); letter-spacing: 1px; text-transform: uppercase; } .rec-mission_status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 3px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; flex-shrink: 0; } .rec-mission_status--active { color: #00e676; border: 1px solid rgba(0,230,118,0.2); background: rgba(0,230,118,0.05); } .rec-mission_status--locked { color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.07); } .rec-mission_status-dot { width: 5px; height: 5px; border-radius: 50%; background: #00e676; animation: status-blink 1.5s ease-in-out infinite; } .rec-mission_status-dot--locked { background: rgba(255,255,255,0.15); animation: none; } .rec-mission_desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.9; margin-bottom: 20px; max-width: 680px; } .rec-mission_checklist { display: flex; flex-direction: column; gap: 10px; } .rec-mission_check { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--text-main); } .rec-mission_check i { color: #00e676; font-size: 0.8rem; flex-shrink: 0; } .rec-mission_check--locked { color: rgba(255,255,255,0.2); } .rec-mission_check--locked i { color: rgba(255,255,255,0.15); } /* ══════════════════════════════════════════════════════════ 4. TERMINAL DE CANDIDATURA ══════════════════════════════════════════════════════════ */ .rec-terminal-section { position: relative; } .rec-terminal { background: rgba(0, 8, 18, 0.92); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden; backdrop-filter: blur(20px); box-shadow: 0 40px 80px rgba(0,0,0,0.7); max-width: 900px; margin: 0 auto; } /* Scanlines */ .rec-terminal::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 8px ); pointer-events: none; z-index: 0; } /* Topbar */ .rec-terminal_topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 1; } .rec-terminal_topbar-left { display: flex; align-items: center; gap: 8px; } .rec-terminal_dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .rec-terminal_dot--r { background: #ff5f57; } .rec-terminal_dot--y { background: #ffbd2e; } .rec-terminal_dot--g { background: #28c840; } .rec-terminal_path { font-family: 'Courier New', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.2); letter-spacing: 0.5px; margin-left: 6px; } .rec-terminal_status-badge { display: flex; align-items: center; gap: 7px; font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 3px; color: #00e676; text-transform: uppercase; } .rec-terminal_status-dot-live { width: 6px; height: 6px; border-radius: 50%; background: #00e676; box-shadow: 0 0 8px #00e676; animation: status-blink 1.5s ease-in-out infinite; } /* Cabeçalho do terminal */ .rec-terminal_header { display: flex; align-items: center; gap: 20px; padding: 32px 36px 0; position: relative; z-index: 1; } .rec-terminal_header-icon { width: 48px; height: 48px; border-radius: 3px; background: rgba(255,204,0,0.06); border: 1px solid rgba(255,204,0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rec-terminal_header-icon i { color: var(--accent); font-size: 1.3rem; } .rec-terminal_title { font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .rec-terminal_title span { color: var(--accent); } .rec-terminal_subtitle { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; } .rec-accent { color: var(--accent); } /* Formulário */ .rec-form { padding: 32px 36px 40px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; } /* Blocos */ .rec-form_block { display: flex; flex-direction: column; gap: 18px; } .rec-form_block-label { display: flex; align-items: center; gap: 10px; font-family: 'Courier New', monospace; font-size: 0.72rem; color: rgba(255,204,0,0.4); letter-spacing: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); } .rec-form_block-label i { color: var(--accent); font-size: 0.8rem; } .rec-form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Campo individual */ .rec-field { display: flex; flex-direction: column; gap: 8px; } .rec-label { display: flex; align-items: center; gap: 8px; font-family: 'Courier New', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.3); letter-spacing: 1px; cursor: pointer; user-select: none; } .rec-label_key { color: rgba(255,255,255,0.5); } .rec-label_optional { color: rgba(255,255,255,0.2); font-size: 0.65rem; } .rec-label_hint { font-size: 0.8rem; color: rgba(255,255,255,0.25); line-height: 1.7; margin-top: -4px; font-family: 'Inter', sans-serif; font-style: italic; } /* Input wrap com indicador */ .rec-input-wrap { position: relative; } .rec-input { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-bottom: 2px solid rgba(255,255,255,0.08); color: var(--white); padding: 13px 16px; font-family: 'Courier New', monospace; font-size: 0.88rem; border-radius: 3px; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; outline: none; appearance: none; -webkit-appearance: none; } .rec-input::placeholder { color: rgba(255,255,255,0.15); } select.rec-input option { background: var(--dark); color: var(--white); } select.rec-input option:disabled { color: rgba(255,255,255,0.3); } /* Focus */ .rec-input:focus { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); border-bottom-color: var(--accent); box-shadow: 0 4px 20px rgba(255,204,0,0.08); } /* Preenchido com sucesso → verde */ .rec-input.is-valid { border-bottom-color: #00e676; box-shadow: 0 4px 20px rgba(0,230,118,0.08); } /* Erro */ .rec-input.is-error { border-bottom-color: #ff4444; box-shadow: 0 4px 16px rgba(255,68,68,0.08); animation: shake 0.35s ease; } @keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } /* Indicador lateral (verde/vermelho) */ .rec-input_indicator { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background 0.3s, box-shadow 0.3s; pointer-events: none; } .rec-input.is-valid + .rec-input_indicator { background: #00e676; box-shadow: 0 0 8px rgba(0,230,118,0.6); } .rec-input.is-error + .rec-input_indicator { background: #ff4444; box-shadow: 0 0 8px rgba(255,68,68,0.5); } .rec-textarea { resize: vertical; min-height: 140px; font-family: 'Inter', sans-serif; } .rec-textarea + .rec-input_indicator { top: 18px; transform: none; } /* Select */ .rec-select-wrap { position: relative; } .rec-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,204,0,0.4); font-size: 0.7rem; pointer-events: none; } .rec-select-wrap .rec-input { padding-right: 36px; cursor: pointer; } /* Char count */ .rec-char-count { font-family: 'Courier New', monospace; font-size: 0.65rem; color: rgba(255,255,255,0.2); text-align: right; letter-spacing: 1px; margin-top: 4px; } /* RGPD */ .rec-rgpd { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 3px; padding: 18px 20px; } .rec-rgpd_label { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; } .rec-rgpd_check { position: absolute; opacity: 0; width: 0; height: 0; } .rec-rgpd_box { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s; margin-top: 1px; } .rec-rgpd_box i { color: #000; font-size: 0.65rem; opacity: 0; transition: opacity 0.2s; } .rec-rgpd_check:checked ~ .rec-rgpd_box { background: var(--accent); border-color: var(--accent); } .rec-rgpd_check:checked ~ .rec-rgpd_box i { opacity: 1; } .rec-rgpd_text { font-size: 0.82rem; color: rgba(255,255,255,0.3); line-height: 1.7; } /* Botão submit */ .rec-submit { position: relative; width: 100%; padding: 0; background: transparent; border: 1px solid rgba(255,204,0,0.3); border-radius: 3px; cursor: pointer; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .rec-submit:hover { border-color: var(--accent); box-shadow: 0 0 30px rgba(255,204,0,0.12); } .rec-submit_inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 32px; font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); position: relative; z-index: 1; transition: color 0.3s; } /* Barra de progresso ao hover */ .rec-submit_bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(255,204,0,0.5)); transition: width 0.35s ease; } .rec-submit:hover .rec-submit_bar { width: 100%; } .rec-submit_loading { display: none; } .rec-submit.is-loading .rec-submit_text { display: none; } .rec-submit.is-loading .rec-submit_loading { display: flex; align-items: center; gap: 8px; } /* Output terminal */ .rec-form_output { font-family: 'Courier New', monospace; font-size: 0.82rem; padding: 14px 18px; border-radius: 3px; background: rgba(0,230,118,0.05); border: 1px solid rgba(0,230,118,0.15); color: #00e676; } /* ══════════════════════════════════════════════════════════ 5. RESPONSIVO ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .rec-form_row { grid-template-columns: 1fr; } .rec-mission { grid-template-columns: 60px 1fr; } } @media (max-width: 640px) { .rec-hero_typewriter-wrap { padding: 24px 22px 28px; } .rec-terminal_header { flex-direction: column; align-items: flex-start; } .rec-form { padding: 24px 20px 32px; } .rec-terminal_topbar { padding: 10px 14px; } .rec-terminal_path { display: none; } .rec-hero_metrics { gap: 20px; } .rec-mission { grid-template-columns: 50px 1fr; } .rec-mission_num { font-size: 1.8rem; } } /* ══════════════════════════════════════════════════════════ 6. ECRÃ DE SUCESSO ══════════════════════════════════════════════════════════ */ .rec-success { padding: 40px 36px 52px; position: relative; z-index: 1; min-height: 420px; display: flex; flex-direction: column; justify-content: center; } .rec-success_lines { font-family: 'Courier New', monospace; font-size: 0.85rem; display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; } .rec-success_line { opacity: 0; animation: line-appear 0.3s ease forwards; } @keyframes line-appear { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .rec-success_body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 16px 0; } .rec-success_icon { font-size: 4rem; color: #00e676; filter: drop-shadow(0 0 20px rgba(0,230,118,0.5)); animation: icon-pop 0.5s cubic-bezier(0.16,1,0.3,1) both; } @keyframes icon-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .rec-success_title { font-family: 'Oswald', sans-serif; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 1px; } .rec-success_title span { color: #00e676; } .rec-success_desc { font-size: 1rem; color: var(--text-muted); line-height: 1.9; max-width: 540px; } .rec-success_desc strong { color: var(--white); } .rec-success_meta { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; text-align: left; } .rec-success_meta-item { display: flex; align-items: center; gap: 14px; font-size: 0.88rem; color: rgba(255,255,255,0.35); padding: 10px 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-left: 2px solid rgba(0,230,118,0.3); border-radius: 2px; } .rec-success_meta-item i { color: #00e676; font-size: 0.85rem; flex-shrink: 0; } .rec-success_cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: transparent; border: 1px solid rgba(255,204,0,0.3); border-radius: 3px; color: var(--accent); font-family: 'Oswald', sans-serif; font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: border-color 0.3s, box-shadow 0.3s; margin-top: 8px; } .rec-success_cta:hover { border-color: var(--accent); box-shadow: 0 0 24px rgba(255,204,0,0.1); } /* ══════════════════════════════════════════════════════════ 7. ESTADO FECHADO — Candidaturas encerradas ══════════════════════════════════════════════════════════ */ .rec-closed-notice { padding: 80px 30px; position: relative; z-index: 1; } .rec-closed-notice_inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; background: rgba(255,68,68,0.03); border: 1px solid rgba(255,68,68,0.15); border-top: 2px solid #ff4444; border-radius: 4px; padding: 52px 40px; position: relative; overflow: hidden; } /* Fundo radial vermelho subtil */ .rec-closed-notice_inner::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,68,68,0.06) 0%, transparent 70%); pointer-events: none; } .rec-closed-notice_icon { font-size: 3rem; color: rgba(255,68,68,0.5); position: relative; z-index: 1; } .rec-closed-notice_title { font-family: 'Oswald', sans-serif; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 1; } .rec-closed-notice_title span { color: #ff6666; } .rec-closed-notice_desc { font-size: 1rem; color: var(--text-muted); line-height: 1.9; max-width: 480px; font-weight: 300; position: relative; z-index: 1; } .rec-closed-notice_links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; } .rec-closed-notice_link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 1px solid rgba(255,255,255,0.1); border-radius: 2px; color: rgba(255,255,255,0.5); font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: border-color 0.3s, color 0.3s; } .rec-closed-notice_link:hover { border-color: rgba(255,255,255,0.3); color: var(--white); } /* ==== styles/pages/team.css ==== */ /* ============================================================ TEAM PAGE — styles/pages/team.css Formula Student UBI · Pit Wall 2026 ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. HERO ══════════════════════════════════════════════════════════ */ .team-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: linear-gradient(180deg, #000408 0%, #021c37 55%, #000408 100%); } .team-hero_grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .team-hero_scan { position: absolute; top: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scan-down 7s linear infinite; opacity: 0.45; pointer-events: none; } @keyframes scan-down { 0% { top: -4px; opacity: 0; } 5% { opacity: 0.45; } 95% { opacity: 0.25; } 100% { top: 100%; opacity: 0; } } .team-hero_content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; padding: 80px 30px 130px; } .team-hero_eyebrow { display: flex; align-items: center; gap: 12px; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 28px; } .team-hero_dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 22px var(--accent-glow); animation: pulse-dot 2.2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%,100% { box-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent-glow); transform:scale(1); } 50% { box-shadow: 0 0 16px var(--accent), 0 0 36px var(--accent-glow); transform:scale(1.2); } } .team-hero_title { font-family: 'Oswald', sans-serif; font-size: clamp(3.8rem, 9.5vw, 7.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -2px; color: var(--white); text-transform: uppercase; margin-bottom: 28px; } .team-hero_title em { font-style: normal; color: var(--accent); display: block; text-shadow: 0 0 60px rgba(255,204,0,0.3); } .team-hero_sub { font-size: 1.05rem; color: rgba(255,255,255,0.5); max-width: 580px; line-height: 1.95; font-weight: 300; } .team-hero_bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px; padding: 12px 40px; font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 5px; color: rgba(255,255,255,0.15); text-transform: uppercase; z-index: 2; border-top: 1px solid rgba(255,255,255,0.04); } .team-hero_bar-line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); } /* ══════════════════════════════════════════════════════════ 2. DIREÇÃO — Leadership grid ══════════════════════════════════════════════════════════ */ .leadership-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: 0 auto; } /* Card do Team Leader no topo, a ocupar as duas colunas e centrado — forma a pirâmide */ .leader-card--apex { grid-column: 1 / -1; max-width: 420px; margin: 0 auto 8px; } .leader-card { background: linear-gradient(145deg, rgba(2,28,55,0.4), rgba(1,8,17,0.92)); border: 1px solid var(--glass-border); border-top: 3px solid rgba(255,204,0,0.3); border-radius: 4px; padding: 48px 36px 40px; text-align: center; position: relative; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.35s, box-shadow 0.4s; cursor: default; overflow: hidden; } .leader-card--main { border-top-color: var(--accent); box-shadow: 0 0 40px rgba(255,204,0,0.08); } .leader-card:hover { transform: translateY(-8px); border-color: rgba(255,204,0,0.35); box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(255,204,0,0.08); } .leader-card_badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 4px; color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.08); padding: 3px 10px; border-radius: 2px; text-transform: uppercase; white-space: nowrap; } .leader-card_badge--gold { color: var(--accent); border-color: rgba(255,204,0,0.25); background: rgba(255,204,0,0.05); } .leader-frame { width: 140px; height: 140px; border-radius: 50%; border: 2px solid var(--accent); padding: 5px; margin: 16px auto 20px; box-shadow: 0 0 20px rgba(255,204,0,0.15); background: var(--darker); transition: box-shadow 0.4s, transform 0.4s; } .leader-card:hover .leader-frame { box-shadow: 0 0 35px rgba(255,204,0,0.3); transform: scale(1.04); } .leader-frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .leader-name { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; } .leader-role { display: block; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 20px; } .leader-role i { margin-right: 6px; } .leader-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.85; margin-bottom: 28px; } .btn-linkedin-premium { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; color: rgba(255,255,255,0.6); font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: border-color 0.3s, color 0.3s, background 0.3s; } .btn-linkedin-premium:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,204,0,0.05); } /* ══════════════════════════════════════════════════════════ 3. PIT WALL SECTION ══════════════════════════════════════════════════════════ */ .pitwall-section { position: relative; background: #000408; border-top: 1px solid rgba(255,255,255,0.04); } .pitwall-section_bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .pitwall-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; } .pitwall-status { display: flex; align-items: center; gap: 8px; font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 4px; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 14px; } .pitwall-status_dot { width: 6px; height: 6px; border-radius: 50%; background: #00e676; box-shadow: 0 0 8px #00e676; animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .pitwall-status_text { color: #00e676; } .inline-title { margin-bottom: 10px; } .pitwall-sub { font-size: 0.92rem; color: var(--text-muted); font-weight: 300; line-height: 1.8; } .pitwall-header_meta { display: flex; flex-direction: column; gap: 8px; text-align: right; flex-shrink: 0; } .pitwall-meta-item { display: flex; gap: 14px; justify-content: flex-end; font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase; } .pitwall-meta-item span:first-child { color: rgba(255,255,255,0.2); } .pitwall-meta-item span:last-child { color: rgba(255,255,255,0.7); min-width: 70px; } /* ── Grid de ecrãs ──────────────────────────────────────── */ .pitwall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .pw-screen { background: #020d1c; border: none; padding: 0; cursor: pointer; position: relative; overflow: hidden; text-align: left; transition: background 0.35s ease; min-height: 280px; } .pw-screen:hover { background: rgba(2,28,55,0.9); } /* Borda amarela esquerda no hover */ .pw-screen::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); z-index: 5; } .pw-screen:hover::before { transform: scaleY(1); } /* Glow radial no hover */ .pw-screen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 10% 20%, rgba(255,204,0,0.05), transparent 65%); opacity: 0; transition: opacity 0.45s; pointer-events: none; } .pw-screen:hover::after { opacity: 1; } .pw-screen_frame { display: flex; flex-direction: column; padding: 24px 22px 20px; height: 100%; position: relative; z-index: 2; } /* Scanlines CRT */ .pw-screen_scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent, transparent 3px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 6px ); pointer-events: none; z-index: 1; opacity: 0.6; transition: opacity 0.35s; } .pw-screen:hover .pw-screen_scanlines { opacity: 0.15; } .pw-screen_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .pw-screen_id { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 4px; color: rgba(255,255,255,0.15); text-transform: uppercase; transition: color 0.3s; } .pw-screen:hover .pw-screen_id { color: rgba(255,204,0,0.4); } .pw-screen_status { font-family: 'Oswald', sans-serif; font-size: 0.56rem; letter-spacing: 3px; padding: 3px 8px; border-radius: 2px; text-transform: uppercase; } .pw-screen_status--ok { color: #00e676; border: 1px solid rgba(0,230,118,0.2); background: rgba(0,230,118,0.05); } .pw-screen_status--warn { color: var(--accent); border: 1px solid rgba(255,204,0,0.3); background: rgba(255,204,0,0.07); animation: status-pulse 2.5s ease-in-out infinite; } @keyframes status-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } /* Ícone grande — fundo decorativo */ .pw-screen_icon-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .pw-screen_icon { align-self: center; width: fit-content; margin-bottom: 18px; font-size: 2.2rem; color: rgba(255,204,0,0.18); transition: color 0.4s, transform 0.4s, filter 0.4s; flex-shrink: 0; } .pw-screen:hover .pw-screen_icon { color: var(--accent); transform: scale(1.1) translateY(-2px); filter: drop-shadow(0 0 10px rgba(255,204,0,0.4)); } /* Número grande decorativo atrás do ícone */ .pw-screen_bg-num { font-family: 'Oswald', sans-serif; font-size: 4rem; font-weight: 700; color: rgba(255,255,255,0.025); line-height: 1; pointer-events: none; user-select: none; transition: color 0.4s; } .pw-screen:hover .pw-screen_bg-num { color: rgba(255,204,0,0.04); } .pw-screen_name { font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--white); letter-spacing: 1px; text-transform: uppercase; line-height: 1.25; margin-bottom: 16px; flex-grow: 1; transition: color 0.3s; } .pw-screen:hover .pw-screen_name { color: #fff; } .pw-screen_tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } .pw-screen_tags span { font-family: 'Oswald', sans-serif; font-size: 0.56rem; letter-spacing: 2px; color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.06); padding: 3px 7px; border-radius: 2px; text-transform: uppercase; transition: color 0.3s, border-color 0.3s, background 0.3s; } .pw-screen:hover .pw-screen_tags span { color: rgba(255,204,0,0.6); border-color: rgba(255,204,0,0.18); background: rgba(255,204,0,0.04); } .pw-screen_footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.04); padding-top: 12px; transition: border-top-color 0.35s; } .pw-screen:hover .pw-screen_footer { border-top-color: rgba(255,204,0,0.1); } .pw-screen_members { font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 3px; color: rgba(255,255,255,0.18); text-transform: uppercase; display: flex; align-items: center; gap: 5px; transition: color 0.3s; } .pw-screen:hover .pw-screen_members { color: rgba(255,255,255,0.4); } .pw-screen_members i { font-size: 0.55rem; } .pw-screen_cta { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 3px; color: transparent; text-transform: uppercase; display: flex; align-items: center; gap: 7px; transition: color 0.35s; } .pw-screen:hover .pw-screen_cta { color: var(--accent); } /* ══════════════════════════════════════════════════════════ 4. MODAL PIT WALL ══════════════════════════════════════════════════════════ */ .pw-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: stretch; justify-content: flex-end; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; } .pw-modal.is-open { pointer-events: all; opacity: 1; } .pw-modal_overlay { position: absolute; inset: 0; background: rgba(0,4,8,0.85); backdrop-filter: blur(4px); cursor: pointer; } .pw-modal_panel { position: relative; width: min(780px, 100%); height: 100%; background: #000c1a; border-left: 1px solid rgba(255,204,0,0.15); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); } .pw-modal.is-open .pw-modal_panel { transform: translateX(0); } /* Scanlines no painel */ .pw-modal_panel::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 6px ); pointer-events: none; z-index: 0; } /* Topbar */ .pw-modal_topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.4); position: relative; z-index: 2; flex-shrink: 0; } .pw-modal_topbar-left { display: flex; align-items: center; gap: 12px; font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 4px; text-transform: uppercase; } .pw-modal_topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.8s ease-in-out infinite; } .pw-modal_topbar-id { color: var(--accent); } .pw-modal_topbar-label { color: rgba(255,255,255,0.2); } .pw-modal_close { background: none; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 3px; padding: 5px 12px; border-radius: 2px; cursor: pointer; display: flex; align-items: center; gap: 8px; text-transform: uppercase; transition: border-color 0.3s, color 0.3s; } .pw-modal_close:hover { border-color: rgba(255,100,100,0.4); color: rgba(255,100,100,0.8); } /* Terminal loading */ .pw-modal_loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; z-index: 1; } .pw-terminal { font-family: 'Courier New', monospace; font-size: 0.88rem; color: var(--accent); line-height: 2; width: 100%; max-width: 480px; } .pw-terminal_line { min-height: 1.5em; color: rgba(255,204,0,0.85); white-space: pre; } .pw-terminal_line::before { content: '> '; color: rgba(255,204,0,0.4); } .pw-terminal_cursor { display: inline-block; color: var(--accent); animation: cursor-blink 0.8s step-end infinite; } @keyframes cursor-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* Conteúdo real */ .pw-modal_content { flex: 1; overflow-y: auto; padding: 32px 32px 48px; position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: rgba(255,204,0,0.2) transparent; } .pw-modal_content::-webkit-scrollbar { width: 4px; } .pw-modal_content::-webkit-scrollbar-track { background: transparent; } .pw-modal_content::-webkit-scrollbar-thumb { background: rgba(255,204,0,0.2); border-radius: 2px; } /* Header dept */ .pw-modal_dept-header { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.05); } .pw-modal_dept-icon { width: 52px; height: 52px; border-radius: 4px; background: rgba(255,204,0,0.06); border: 1px solid rgba(255,204,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent); flex-shrink: 0; } .pw-modal_dept-title { font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .pw-modal_dept-tags { display: flex; flex-wrap: wrap; gap: 6px; } .pw-modal_dept-tags span { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 2px; color: var(--accent); border: 1px solid rgba(255,204,0,0.2); padding: 3px 8px; border-radius: 2px; text-transform: uppercase; background: rgba(255,204,0,0.04); } /* Foto de grupo */ .pw-modal_dept-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .pw-modal_dept-photo { width: 240px; height: 180px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,0.07); filter: grayscale(30%); transition: filter 0.3s; } .pw-modal_dept-photo:hover { filter: grayscale(0); } .pw-modal_dept-photo { cursor: zoom-in; } .pw-modal_dept-photo-label { font-family: 'Oswald', sans-serif; font-size: 0.55rem; letter-spacing: 3px; color: rgba(255,255,255,0.2); text-transform: uppercase; } .pw-photo-lightbox { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .pw-photo-lightbox.is-open { opacity: 1; pointer-events: all; } .pw-photo-lightbox_backdrop { position: absolute; inset: 0; background: rgba(0, 4, 8, 0.92); backdrop-filter: blur(6px); } .pw-photo-lightbox_img { position: relative; z-index: 1; max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; border: 1px solid rgba(255, 204, 0, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .pw-photo-lightbox_close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border: 1px solid rgba(255, 204, 0, 0.18); border-radius: 4px; background: rgba(2, 28, 55, 0.85); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pw-photo-lightbox_close:hover { transform: scale(1.04); border-color: var(--accent); color: var(--accent); } .pw-modal_desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.95; margin-bottom: 32px; } /* Secção membros */ .pw-modal_members-header, .pw-modal_tasks-header { display: flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 4px; color: rgba(255,255,255,0.3); text-transform: uppercase; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); } .pw-modal_members-header i, .pw-modal_tasks-header i { color: var(--accent); } .pw-modal_tasks-header { margin-top: 36px; } /* ── Fichas de piloto — grid 3D tilt ───────────────────── */ .pw-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 8px; } .pilot-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 4px; padding: 20px 16px 18px; text-align: center; cursor: default; transform-style: preserve-3d; transition: box-shadow 0.3s; position: relative; overflow: hidden; will-change: transform; } /* Reflexo de luz no tilt */ .pilot-card_shine { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.08) 0%, transparent 60%); pointer-events: none; opacity: 0; transition: opacity 0.3s; border-radius: inherit; } .pilot-card:hover .pilot-card_shine { opacity: 1; } .pilot-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,204,0,0.1); } .pilot-card_photo-wrap { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,204,0,0.25); margin: 0 auto 12px; overflow: hidden; background: rgba(2,28,55,0.5); position: relative; z-index: 1; } .pilot-card_photo-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(20%); transition: filter 0.35s; } .pilot-card:hover .pilot-card_photo-wrap img { filter: grayscale(0); } .pilot-card_name { font-family: 'Oswald', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; position: relative; z-index: 1; } .pilot-card_role { font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 10px; position: relative; z-index: 1; } .pilot-card_linkedin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); font-size: 0.7rem; text-decoration: none; transition: border-color 0.3s, color 0.3s; position: relative; z-index: 1; } .pilot-card_linkedin:hover { border-color: var(--accent); color: var(--accent); } /* ── Lista de tasks ─────────────────────────────────────── */ .pw-task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .pw-task-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-left: 2px solid rgba(255,204,0,0.2); border-radius: 2px; transition: background 0.3s, border-left-color 0.3s; } .pw-task-list li:hover { background: rgba(2,28,55,0.35); border-left-color: var(--accent); } .pw-task-list li i { color: var(--accent); margin-top: 3px; flex-shrink: 0; font-size: 0.75rem; } .pw-task-list li strong { color: var(--white); } /* ══════════════════════════════════════════════════════════ 5. RESPONSIVO ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .leadership-grid { grid-template-columns: 1fr; max-width: 480px; } .pitwall-grid { grid-template-columns: repeat(2, 1fr); } .pitwall-header { flex-direction: column; align-items: flex-start; } .pitwall-header_meta { text-align: left; } .pw-modal_dept-header { grid-template-columns: auto 1fr; } .pw-modal_dept-photo-wrap { display: none; } } @media (max-width: 600px) { .pitwall-grid { grid-template-columns: 1fr; } .pw-modal_panel { width: 100%; } .pw-members-grid { grid-template-columns: repeat(2, 1fr); } .team-hero_bar { display: none; } }