/* ===================================================================== SAEKYUNG — shared site header Self-contained (literal brand colours, no external variables) so it can be loaded on any page on top of its own stylesheet. Mirrors the Home page topbar exactly. Load this LAST in so it wins over any older inline .topbar rules. ===================================================================== */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(12, 42, 68, .92); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .14); } .topbar .shell.topbar-inner, .topbar-inner { width: min(100% - 48px, 1200px); margin: 0 auto; min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; } /* Brand */ .topbar .brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; } .topbar .brand:hover { color: #fff; } .topbar .brand-monogram { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.35); } .topbar .brand-wordmark { display: flex; flex-direction: column; line-height: 1; } .topbar .brand-wordmark .mark { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: .14em; font-size: 16px; color: #fff; } .topbar .brand-wordmark .sub { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-style: italic; color: #7ec5d4; font-size: 13px; margin-top: 2px; letter-spacing: .04em; } /* Primary nav */ .topbar .primary-nav { display: flex; align-items: center; gap: 6px; justify-content: center; } .topbar .primary-nav a { color: #e8eff5; padding: 10px 14px; border-radius: 10px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .01em; text-decoration: none; transition: background .2s ease, color .2s ease; } .topbar .primary-nav a:hover { background: rgba(255,255,255,.06); color: #fff; } .topbar .primary-nav a.is-active { color: #f5c544; } .topbar .primary-nav a.is-active::after { content: ""; display: block; width: 18px; height: 2px; background: #f5c544; margin: 4px auto 0; border-radius: 2px; } /* CTA cluster */ .topbar .topbar-cta { display: flex; align-items: center; gap: 10px; } .topbar .nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; cursor: pointer; align-items: center; justify-content: center; } .topbar .nav-toggle:hover { background: rgba(255,255,255,.12); } /* Buttons (scoped to header so page styles are untouched) */ .topbar .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease; } .topbar .button.lg { padding: 13px 24px; font-size: 15px; min-height: 48px; } .topbar .button.primary { background: #d8412a; color: #fff; box-shadow: 0 14px 32px rgba(216, 65, 42, .28); } .topbar .button.primary:hover { background: #a82b18; color: #fff; box-shadow: 0 16px 36px rgba(168, 43, 24, .35); transform: translateY(-1px); } .topbar .button.ghost-light { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; } .topbar .button.ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); } .topbar .button .arrow { transition: transform .2s ease; } .topbar .button:hover .arrow { transform: translateX(3px); } /* Mobile nav sheet */ .mobile-nav { display: none; position: fixed; inset: 72px 0 auto 0; background: rgba(8, 24, 40, .98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.14); padding: 8px 24px 16px; z-index: 49; } .mobile-nav.is-open { display: block; } .mobile-nav a { display: block; color: #fff; text-decoration: none; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 500; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.14); } .mobile-nav a:last-of-type { border-bottom: 0; color: #f5c544; } /* Responsive */ @media (max-width: 1024px) { .topbar .primary-nav { display: none; } .topbar .nav-toggle { display: inline-flex; } .topbar .shell.topbar-inner, .topbar-inner { grid-template-columns: 1fr auto; } } @media (max-width: 620px) { .topbar .topbar-cta .button.lg { display: none; } } @media (max-width: 520px) { .topbar .brand-wordmark .sub { display: none; } }