/* ============================================================ LDGCB – Shared Stylesheet ============================================================ */ /* ── Variables ─────────────────────────────────────── */ :root { --navy: #071d3d; --navy-2: #0d2f63; --gold: #b48a3a; --cream: #f5efe3; --white-soft: rgba(255, 255, 255, 0.92); } /* ── Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── Body defaults ──────────────────────────────────── */ body { margin: 0; min-height: 100vh; font-family: Inter, system-ui, sans-serif; color: white; background: #000; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* ── Full-screen background image ───────────────────── */ .background { position: fixed; inset: 0; z-index: 0; } .background img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.42); } /* ── Dark gradient overlay ──────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(7, 29, 61, 0.50), rgba(7, 29, 61, 0.88) ); } /* ── Main content container ─────────────────────────── */ .container { position: relative; z-index: 2; min-height: 100vh; width: 100%; max-width: 1280px; margin: 0 auto; padding: 72px 24px; } /* ══════════════════════════════════════════════════════ HAMBURGER NAV — shared by all pages nav.js appends

to Home page gets nav--light instead. ══════════════════════════════════════════════════════ */ .nav { position: fixed; top: 28px; right: 28px; z-index: 300; } /* ── Bell button ────────────────────────────────────── */ .nav-burger { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; cursor: pointer; border-radius: 12px; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; overflow: visible; } /* Bell ring animation — swings and naturally comes to rest at 25deg */ @keyframes bell-ring-open { 0% { transform: rotate(0deg); } 10% { transform: rotate(28deg); } 25% { transform: rotate(-18deg); } 40% { transform: rotate(22deg); } 55% { transform: rotate(-10deg); } 70% { transform: rotate(18deg); } 82% { transform: rotate(8deg); } 91% { transform: rotate(20deg); } 96% { transform: rotate(17deg); } 100% { transform: rotate(25deg); } } /* Swing back to upright when closing */ @keyframes bell-ring-close { 0% { transform: rotate(25deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } } .nav-burger .bell-icon { transform-origin: 50% 20%; } /* Ringing open — plays once, holds at 25deg via forwards fill */ .nav-burger.ringing-open .bell-icon { animation: bell-ring-open 0.7s ease-in-out forwards; } /* Swinging closed — plays once, returns to 0deg */ .nav-burger.ringing-close .bell-icon { animation: bell-ring-close 0.45s ease-in-out forwards; } /* Static held position when open and animation has finished */ .nav.open .nav-burger .bell-icon { transform: rotate(25deg); } /* ── Dark variant (interior pages — dark bg) ────────── */ .nav--dark .nav-burger { background: rgba(7, 29, 61, 0.55); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, 0.18); } .nav--dark .nav-burger:hover { background: rgba(7, 29, 61, 0.80); } .nav--dark .nav-burger .bell-svg { stroke: #f5e7c5; } /* ── Light variant (home page — cream bg) ───────────── */ .nav--light .nav-burger { background: rgba(255, 248, 236, 0.55); backdrop-filter: blur(7px); border-color: rgba(7, 29, 61, 0.18); box-shadow: 0 4px 16px rgba(7, 29, 61, 0.10); } .nav--light .nav-burger:hover { background: rgba(255, 248, 236, 0.88); } .nav--light .nav-burger .bell-svg { stroke: #071d3d; } /* ── Dropdown panel ─────────────────────────────────── */ .nav-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; max-width: calc(100vw - 56px); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.22s, transform 0.22s; } .nav.open .nav-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Dark dropdown (interior pages) */ .nav--dark .nav-dropdown { background: rgba(7, 29, 61, 0.96); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.14); } /* Light dropdown (home page) */ .nav--light .nav-dropdown { background: rgba(255, 248, 236, 0.97); backdrop-filter: blur(14px); border: 1px solid rgba(7, 29, 61, 0.14); } /* ── Dropdown items ─────────────────────────────────── */ .nav-dropdown a, .nav-dropdown .nav-active { display: block; padding: 14px 24px; font-family: Cinzel, Georgia, serif; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; transition: background 0.15s, color 0.15s; } .nav-dropdown a:last-child, .nav-dropdown .nav-active:last-child { border-bottom: none; } /* Dark items */ .nav--dark .nav-dropdown a { color: #f5e7c5; border-bottom-color: rgba(255, 255, 255, 0.08); } .nav--dark .nav-dropdown a:hover { background: rgba(255, 255, 255, 0.07); color: var(--gold); } .nav--dark .nav-dropdown .nav-active { color: var(--gold); border-bottom-color: rgba(255, 255, 255, 0.08); font-weight: 600; cursor: default; } /* Light items */ .nav--light .nav-dropdown a { color: var(--navy); border-bottom-color: rgba(7, 29, 61, 0.07); } .nav--light .nav-dropdown a:hover { background: rgba(7, 29, 61, 0.06); color: var(--gold); } .nav--light .nav-dropdown .nav-active { color: var(--gold); border-bottom-color: rgba(7, 29, 61, 0.07); font-weight: 600; cursor: default; } /* ── Responsive ─────────────────────────────────────── */ @media (max-width: 768px) { .container { padding: 48px 16px; } .nav { top: 18px; right: 18px; } } /* ══════════════════════════════════════════════════════ SUB-MENU — click to expand, stays open until dismissed ══════════════════════════════════════════════════════ */ .nav-has-sub { position: relative; } /* Parent row: link + chevron button inline */ .nav-parent-row { display: flex; align-items: center; border-bottom-width: 1px; border-bottom-style: solid; } .nav--dark .nav-parent-row { border-bottom-color: rgba(255, 255, 255, 0.08); } .nav--light .nav-parent-row { border-bottom-color: rgba(7, 29, 61, 0.07); } /* Parent link fills the row */ .nav-parent-row a { flex: 1; border-bottom: none !important; padding: 14px 8px 14px 24px !important; } /* Chevron — clickable button, rotates when open */ .nav-sub-chevron { all: unset; cursor: pointer; padding: 14px 16px 14px 4px; color: var(--gold); opacity: 0.6; display: flex; align-items: center; transition: opacity 0.2s, transform 0.2s; } .nav-sub-chevron:hover { opacity: 1; } .nav-has-sub.sub-open .nav-sub-chevron { opacity: 1; transform: rotate(90deg); } /* Sub-menu — smooth height expand via grid trick */ .nav-submenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .nav-has-sub.sub-open .nav-submenu { grid-template-rows: 1fr; } /* Required inner wrapper for 0fr grid trick */ .nav-submenu-inner { overflow: hidden; } /* Sub-item links */ .nav-sub-item { display: block; padding: 11px 20px 11px 36px !important; font-family: Cinzel, Georgia, serif; font-size: 0.78rem !important; letter-spacing: 0.08em; text-transform: uppercase; border-bottom-width: 1px; border-bottom-style: solid; transition: background 0.15s, color 0.15s; } .nav-sub-item:last-child { border-bottom: none !important; } .nav--dark .nav-sub-item { color: #f5e7c5 !important; border-bottom-color: rgba(255, 255, 255, 0.07) !important; background: rgba(0, 0, 0, 0.18); } .nav--dark .nav-sub-item:hover { background: rgba(255, 255, 255, 0.07) !important; color: var(--gold) !important; } .nav--light .nav-sub-item { color: var(--navy) !important; border-bottom-color: rgba(7, 29, 61, 0.07) !important; background: rgba(7, 29, 61, 0.05); } .nav--light .nav-sub-item:hover { background: rgba(7, 29, 61, 0.08) !important; color: var(--gold) !important; }