/* ============================================ AIC Lab — Shared Site Chrome (Header + Footer) Styles the markup injected by aic-common.js into #site-header / #site-footer on EVERY page. Self-contained on purpose: hardcoded colors, no dependency on a host page's own :root variables, so header/footer look identical no matter which page's local design system surrounds them. Link this file from every page's , using the correct relative depth: root level -> css/site-chrome.css one folder deep -> ../css/site-chrome.css two folders deep -> ../../css/site-chrome.css ============================================ */ /* ── Header / Nav ── */ header { position: fixed; top: 0; width: 100%; background: rgba(10,14,23,.9); backdrop-filter: blur(20px); z-index: 100; padding: 1rem 2rem; border-bottom: 1px solid rgba(0,212,255,.1); } header .header-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } header .logo { display: flex; align-items: center; gap: 1rem; } header .logo h1 { font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg,#00d4ff,#10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } header .logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg,#00d4ff,#10b981); border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; box-shadow: 0 4px 20px rgba(0,212,255,.3); } header nav ul { display: flex; gap: 2rem; list-style: none; } header nav a { color: #a8b2c8; text-decoration: none; font-weight: 500; transition: all .3s; position: relative; font-size: .95rem; } header nav a:hover, header nav a.active { color: #ffffff; } header nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background: linear-gradient(135deg,#00d4ff,#10b981); transition: width .3s; } header nav a:hover::after, header nav a.active::after { width: 100%; } header .lang-toggle { display: flex; gap: .4rem; } header .lang-toggle a, header .lang-toggle button { font-size: .78rem; font-weight: 700; padding: .35rem .8rem; border-radius: 100px; border: 1px solid rgba(255,255,255,.15); color: #a8b2c8; background: transparent; cursor: pointer; text-decoration: none; transition: all .25s; } header .lang-toggle a.active, header .lang-toggle button.active { color: #00d4ff; border-color: rgba(0,212,255,.5); background: rgba(0,212,255,.08); } header .mobile-menu-btn { display: none; cursor: pointer; background: none; border: none; color: #ffffff; font-size: 1.5rem; } @media (max-width: 768px) { header .mobile-menu-btn { display: block; } header nav { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: rgba(10,14,23,.98); backdrop-filter: blur(20px); padding: 5rem 2rem 2rem; transition: right .3s; z-index: 99; } header nav.mobile-open { right: 0; } header nav ul { flex-direction: column; gap: 1.5rem; } } /* Push page content below the fixed header on pages that don't already reserve top padding for it. Harmless if the page's own hero already has enough top padding — this just sets a floor. */ #site-header:empty { display: none; } #site-header + main, #site-header ~ main:first-of-type { scroll-margin-top: 76px; } /* ── Footer ── */ footer { background: #111827; padding: 4rem 2rem 2rem; position: relative; border-top: 1px solid rgba(255,255,255,.06); } footer .footer-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 3rem; } footer .footer-logo { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; } footer .footer-logo h2 { font-size: 1.5rem; font-weight: 700; background: linear-gradient(90deg,#ffffff,#10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } footer .footer-info p { color: #a8b2c8; line-height: 1.6; margin-bottom: 1.5rem; } footer .social-links { display: flex; gap: 1rem; } footer .social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; text-decoration: none; color: #ffffff; transition: all .3s ease; } footer .social-link:hover { background: #00d4ff; transform: translateY(-3px); } footer .footer-title { font-size: 1.3rem; margin-bottom: 1.5rem; font-weight: 600; color: #ffffff; } footer .footer-links { list-style: none; display: flex; flex-direction: column; gap: 1rem; } footer .footer-links a { color: #a8b2c8; text-decoration: none; transition: all .3s ease; } footer .footer-links a:hover { color: #10b981; } footer .footer-contact { display: flex; flex-direction: column; gap: 1rem; } footer .contact-item { display: flex; align-items: flex-start; gap: 1rem; } footer .contact-item i, footer .contact-item span.ico { color: #00d4ff; font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; } footer .contact-info a { color: inherit; text-decoration: none; } footer .contact-info a:hover { color: #00d4ff; } footer .contact-info { color: #a8b2c8; line-height: 1.6; } footer .copyright { text-align: center; padding-top: 3rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.1); color: #a8b2c8; font-size: .85rem; } @media (max-width: 768px) { header .header-container { padding: 0 1rem; } }