/** * assets/css/nav.css * Shared navigation styles — included in every page's */ /* ── Site header ── */ .site-header { position: sticky; top: 0; z-index: 500; padding: .9rem 0; background: rgba(6,4,13,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(201,168,76,.1); transition: padding .3s cubic-bezier(.25,.46,.45,.94); } .site-header.scrolled { padding: .6rem 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Logo */ .logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; } .logo-main { font-family: 'Cinzel Decorative', serif; font-size: 1rem; font-weight: 900; background: linear-gradient(135deg, #f4e4a6, #c9a84c, #7a6030); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: .04em; } .logo-sub { font-family: 'Cinzel', serif; font-size: .52rem; letter-spacing: .3em; text-transform: uppercase; color: #6b5f8a; margin-top: .2rem; } /* Desktop nav links */ .nav-links { display: flex; gap: 2.25rem; list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: #b8aed4; text-decoration: none; position: relative; transition: color .3s; padding-bottom: 2px; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: #c9a84c; transition: width .3s cubic-bezier(.25,.46,.45,.94); } .nav-links a:hover, .nav-links a.nav-active { color: #f4e4a6; } .nav-links a.nav-active::after, .nav-links a:hover::after { width: 100%; } /* Auth CTAs */ .nav-cta { font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; padding: .6rem 1.4rem; background: linear-gradient(135deg, #7a6030, #c9a84c, #e8c96d); color: #06040d; border-radius: 2px; text-decoration: none; transition: box-shadow .3s, transform .3s; white-space: nowrap; display: inline-block; } .nav-cta:hover { box-shadow: 0 4px 18px rgba(201,168,76,.35); transform: translateY(-1px); } .nav-cta.nav-cta-active { box-shadow: 0 0 0 1px rgba(201,168,76,.4); } .nav-cta-ghost { font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; padding: .55rem 1.2rem; border: 1px solid rgba(201,168,76,.3); color: #e8c96d; border-radius: 2px; text-decoration: none; transition: all .3s; white-space: nowrap; } .nav-cta-ghost:hover { border-color: #c9a84c; background: rgba(201,168,76,.08); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 4px; } .hamburger span { display: block; width: 22px; height: 1px; background: #c9a84c; transition: all .3s; transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Mobile Drawer ── */ .mobile-drawer { position: fixed; top: 0; left: 0; height: 100%; width: 300px; background: rgba(8,5,16,.98); border-right: 1px solid rgba(201,168,76,.12); z-index: 600; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .35s cubic-bezier(.25,.46,.45,.94); will-change: transform; } .mobile-drawer.open { transform: translateX(0); } .mobile-overlay { position: fixed; inset: 0; z-index: 590; background: rgba(6,4,13,.7); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s; } .mobile-overlay.show { opacity: 1; pointer-events: all; } .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(201,168,76,.1); } .mobile-close-btn { background: transparent; border: none; color: #7a6030; font-size: 1.2rem; cursor: pointer; transition: color .3s; } .mobile-close-btn:hover { color: #c9a84c; } .mobile-drawer-links { flex: 1; display: flex; flex-direction: column; padding: 1.25rem 0; overflow-y: auto; } .mob-link { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.5rem; font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #b8aed4; text-decoration: none; border-left: 2px solid transparent; transition: all .25s; } .mob-link span { font-size: 1rem; width: 20px; text-align: center; } .mob-link:hover, .mob-link.mob-active { color: #f4e4a6; background: rgba(201,168,76,.06); border-left-color: #c9a84c; } .mobile-drawer-footer { padding: 1.5rem; border-top: 1px solid rgba(201,168,76,.1); display: flex; flex-direction: column; gap: .75rem; } .mob-cta { display: block; padding: .9rem; text-align: center; background: linear-gradient(135deg, #7a6030, #c9a84c, #e8c96d); color: #06040d; border-radius: 2px; text-decoration: none; font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; transition: box-shadow .3s; } .mob-cta:hover { box-shadow: 0 4px 16px rgba(201,168,76,.3); } .mob-logout { display: block; text-align: center; padding: .7rem; font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: #6b5f8a; text-decoration: none; border: 1px solid rgba(107,95,138,.25); border-radius: 2px; transition: all .3s; } .mob-logout:hover { color: #b8aed4; border-color: rgba(184,174,212,.3); } /* ── Page footer shared ── */ .site-footer-bar { position: relative; z-index: 1; background: #06040d; border-top: 1px solid rgba(201,168,76,.08); padding: 1.25rem 0; text-align: center; font-family: 'Cinzel', serif; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: #6b5f8a; } .site-footer-bar a { color: #7a6030; text-decoration: none; transition: color .3s; } .site-footer-bar a:hover { color: #c9a84c; } /* ── Responsive ── */ @media (max-width: 900px) { .nav-links, .nav-cta, .nav-cta-ghost, .nav-auth { display: none !important; } .hamburger { display: flex; } }