/* Complete system stylesheet - Themes: .theme-dark and .theme-light controlled via class on - Components: header, nav, hero/video, sections, cards, gallery (2x3), forms, buttons, footer - Utilities and responsive rules (mobile-first) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap'); /* ------------------------- Design tokens ------------------------- */ :root{ /* spacing */ --gap-xs:6px; --gap-sm:10px; --gap-md:16px; --gap-lg:24px; /* sizes */ --header-h:64px; /* radii */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; /* transitions */ --t: 0.28s cubic-bezier(.2,.9,.3,1); /* shadows */ --soft-shadow: 0 8px 24px rgba(2,6,12,0.55); } /* Theme palettes (swappable by adding .theme-light on body) */ .theme-dark{ --bg-1: #0b0e14; /* deep */ --bg-2: #121826; /* secondary */ --card: #0f1320; --glass: rgba(255,255,255,0.04); --muted: #9aa4ad; --text: #eaf6ff; --neon-green: #18ff92; --neon-cyan: #00d4ff; } .theme-light{ --bg-1: #f6f8fb; --bg-2: #eef3f7; --card: #ffffff; --glass: rgba(0,0,0,0.06); --muted: #6b7280; --text: #07101a; --neon-green: #0fb06d; --neon-cyan: #06a7d9; } /* global */ *{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));color:var(--text);-webkit-font-smoothing:antialiased} /* Utility container */ .container{max-width:1100px;margin:28px auto;padding:18px} /* ------------------------- Header & Navigation ------------------------- */ .site-header{ position:fixed;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:60; background: linear-gradient(90deg, rgba(6,8,10,0.45), rgba(10,14,20,0.25)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass); } .site-header .logo{font-weight:800;letter-spacing:0.6px} .menu{display:flex;gap:10px;align-items:center} .menu a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;transition:all var(--t);font-weight:600} .menu a:hover{color:var(--text);transform:translateY(-2px);} .menu a::after{content:'';display:block;height:3px;background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan));width:0;border-radius:6px;transition:width var(--t)} .menu a:hover::after{width:100%} /* hamburger (mobile) */ .hamburger{display:flex;align-items:center;gap:8px} .hamburger button{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:8px;color:var(--muted)} /* ------------------------- Hero / Video background ------------------------- */ .hero{position:relative;padding-top:var(--header-h);min-height:56vh;display:flex;align-items:center;justify-content:center} .video-wrap{position:absolute;inset:0;overflow:hidden} .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .video-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,6,8,0.6), rgba(6,10,16,0.75));} .hero .hero-content{position:relative;z-index:4;text-align:center;padding:20px} .hero h1{font-size:clamp(1.6rem,4vw,2.6rem);margin:0 0 8px} .hero p{color:var(--muted);margin:0 0 18px} /* ------------------------- Sections & Cards ------------------------- */ .section{padding:18px} .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border:1px solid var(--glass);padding:16px;border-radius:var(--radius-md);box-shadow:var(--soft-shadow);transition:transform var(--t),box-shadow var(--t)} .card:hover{transform:translateY(-6px)} /* Headings */ h2{font-size:1.25rem;margin:0 0 10px} h3{font-size:1rem;margin:0 0 6px} /* ------------------------- Partners */ .partners{display:flex;flex-direction:column;gap:12px} .partner{display:flex;gap:12px;align-items:center} .partner img{width:72px;height:72px;object-fit:contain;border-radius:8px;border:1px solid rgba(255,255,255,0.04);padding:6px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)} .partner p{margin:0;color:var(--muted)} /* ------------------------- Gallery 2x3 ------------------------- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:12px} .gallery .item{overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));transition:transform var(--t),box-shadow var(--t)} .gallery .item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)} .gallery .item:hover img{transform:scale(1.04)} .gallery-controls{display:flex;justify-content:center;gap:8px;margin-top:10px} .gallery-controls button{padding:8px 12px;border-radius:8px;border:0;background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan));color:#021314;font-weight:700;cursor:pointer;transition:opacity var(--t)} /* ------------------------- Operações Gallery 2x3 (same as main gallery) ------------------------- */ .operacoes-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:12px} .operacoes-gallery .item{overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));transition:transform var(--t),box-shadow var(--t);cursor:pointer} .operacoes-gallery .item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)} .operacoes-gallery .item:hover{transform:translateY(-6px)} .operacoes-gallery .item:hover img{transform:scale(1.04)} .operacoes-controls{display:flex;justify-content:center;gap:8px;margin-top:10px} .operacoes-controls button{padding:8px 12px;border-radius:8px;border:0;background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan));color:#021314;font-weight:700;cursor:pointer;transition:opacity var(--t)} /* ------------------------- Buttons ------------------------- */ .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan));color:#021314;font-weight:700;cursor:pointer;transition:transform var(--t),box-shadow var(--t)} .btn:active{transform:translateY(1px)} .btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)} /* Smaller button for form submit */ .btn.small{ padding:8px 20px; font-size:14px; align-self:flex-start; min-width:auto; } /* ------------------------- Forms ------------------------- */ .form{display:flex;flex-direction:column;gap:12px} .input,textarea{ width:100%; box-sizing:border-box; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:12px; border-radius:8px; outline:none; transition:box-shadow var(--t),border-color var(--t); font-family:inherit; font-size:14px; } .input:focus,textarea:focus{box-shadow:0 0 0 6px rgba(24,255,146,0.06);border-color:var(--neon-green)} textarea{min-height:120px;resize:vertical} /* Form labels */ .field{display:flex;flex-direction:column;width:100%} .field label{display:block;font-weight:600;margin-bottom:6px;color:var(--muted)} /* ------------------------- Footer ------------------------- */ .footer{border-top:1px solid rgba(255,255,255,0.03);text-align:center;padding:20px;color:var(--muted)} /* ------------------------- Utilities ------------------------- */ .text-muted{color:var(--muted)} .center{display:flex;align-items:center;justify-content:center} .stack{display:flex;flex-direction:column;gap:12px} .hidden{display:none} /* ------------------------- Video overlay text */ .video-text{position:relative;z-index:6;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.6)} /* ------------------------- Responsive rules (mobile-first) ------------------------- */ @media(min-width:700px){ .gallery{grid-auto-rows:220px} .operacoes-gallery{grid-auto-rows:220px} } @media(min-width:900px){ .menu{display:flex} .hamburger{display:none} .container{padding:28px} } @media(max-width:699px){ .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px} .operacoes-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px} .site-header{padding:0 12px} } @media(max-width:480px){ .hero h1{font-size:1.4rem} .gallery{grid-auto-rows:140px} .operacoes-gallery{grid-auto-rows:140px} } /* ------------------------- Accessibility focus helpers ------------------------- */ a:focus,button:focus,input:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(0,212,255,0.06)} /* Small helper for cards inside grid to keep 2x3 fixed per page */ .gallery-paged{display:block} /* ------------------------- Modal for gallery images ------------------------- */ .modal{ position:fixed; inset:0; background:rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; visibility:hidden; transition:all var(--t); padding:20px; box-sizing:border-box; } .modal.active{opacity:1;visibility:visible} .modal-content{ position:relative; max-width:calc(100vw - 40px); max-height:calc(100vh - 40px); width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .modal img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-md); box-shadow:0 12px 48px rgba(0,0,0,0.7); } .modal-close{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.7); border:0; color:#fff; font-size:24px; cursor:pointer; padding:8px; border-radius:50%; transition:background var(--t); z-index:101; width:40px; height:40px; display:flex; align-items:center; justify-content:center; } .modal-close:hover{background:rgba(255,255,255,0.1)} /* Modal navigation buttons */ .modal-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.7); border:0; color:#fff; font-size:32px; cursor:pointer; padding:12px 16px; border-radius:50%; transition:all var(--t); z-index:102; width:56px; height:56px; display:flex; align-items:center; justify-content:center; user-select:none; } .modal-prev{left:-80px} .modal-next{right:-80px} .modal-nav:hover{ background:rgba(0,0,0,0.9); transform:translateY(-50%) scale(1.1); } .modal-nav:disabled{ opacity:0.3; cursor:not-allowed; transform:translateY(-50%); } /* Gallery item cursor pointer */ .gallery .item{cursor:pointer} /* Responsive adjustments for modal */ @media(max-width:768px){ .modal{padding:10px} .modal-content{ max-width:calc(100vw - 20px); max-height:calc(100vh - 20px); } .modal-close{ top:8px; right:8px; font-size:20px; width:36px; height:36px; } .modal-nav{ font-size:24px; width:44px; height:44px; padding:8px 12px; } .modal-prev{left:-60px} .modal-next{right:-60px} } @media(max-width:480px){ .modal{padding:5px} .modal-content{ max-width:calc(100vw - 10px); max-height:calc(100vh - 10px); } .modal-close{ top:6px; right:6px; font-size:18px; width:32px; height:32px; } .modal-nav{ font-size:20px; width:40px; height:40px; padding:6px 10px; } .modal-prev{left:-45px} .modal-next{right:-45px} } /* End of comprehensive stylesheet */