/* === SIYLIS STANDARD HEADER === Matches index.html header — use on ALL pages. Include Chakra Petch font in : */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(8,14,18,0.92) 0%, rgba(6,10,13,0.92) 100%); border-bottom: 1px solid rgba(212,175,55,0.4); box-shadow: 0 2px 12px rgba(0,0,0,0.55); backdrop-filter: blur(8px); padding: 0; overflow: visible; } header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.6) 30%, rgba(212,175,55,0.9) 50%, rgba(212,175,55,0.6) 70%, transparent 100%); } header nav { display: flex; gap: 0; align-items: center; } .nav-link { font-family: 'Chakra Petch', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; color: #a9b6c7; text-decoration: none; text-transform: uppercase; padding: 10px 16px; border-left: 1px solid rgba(212,175,55,0.15); transition: all 0.2s; position: relative; } .nav-link:first-child { border-left: none; } .nav-link:hover { color: #ffd77a; background: rgba(212,175,55,0.12); } .nav-link.active { color: #d4af37; } .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 20%; right: 20%; height: 2px; background: #d4af37; box-shadow: 0 0 8px rgba(212,175,55,0.3); } .nav-cta { font-family: 'Chakra Petch', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: #0b0c0c; text-decoration: none; text-transform: uppercase; padding: 6px 18px; margin-left: 8px; background: linear-gradient(180deg, #ffd77a 0%, #d4af37 100%); border: 1px solid #c79a2d; box-shadow: 0 0 16px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,255,255,0.2); transition: all 0.2s; } .nav-cta:hover { background: linear-gradient(180deg, #d4af37 0%, #ffd77a 100%); box-shadow: 0 0 20px rgba(212,175,55,0.3); } /* === STANDARD FOOTER === */ footer { background: rgba(8, 20, 32, 0.85); border-top: 1px solid rgba(0, 229, 200, 0.15); padding: 16px 5vw; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #a9b6c7; } footer a { color: #a9b6c7; text-decoration: none; margin-left: 16px; } footer a:hover { color: #d4af37; } /* === MOBILE === */ @media (max-width: 768px) { header { height: auto; padding: 6px 0; } header nav { flex-wrap: wrap; justify-content: center; } .nav-link { font-size: 0.6rem; padding: 8px 10px; } .nav-cta { font-size: 0.6rem; padding: 5px 14px; } }