/* * ============================================================ * BUNKER BOX — Global Stylesheet * ============================================================ * * CDN DEPENDENCIES — load in this order in every HTML : * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ============================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { --color-charcoal: #141414; --color-green-primary: #5aad48; --color-green-dark: #3d7a30; --color-gold: #c9a84c; --color-white: #ffffff; --color-white-80: rgba(255, 255, 255, 0.8); --color-white-60: rgba(255, 255, 255, 0.6); --font-primary: 'Cinzel', serif; --font-body: 'Inter', sans-serif; --nav-height: 70px; --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); --gold-border: 1.5px solid #c9a84c; --card-bg: #141414; --shadow-gold: 0 0 20px rgba(201, 168, 76, 0.15); --shadow-gold-hover: 0 0 40px rgba(201, 168, 76, 0.3); } /* ============================================================ GLOBAL RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--color-charcoal); color: var(--color-white); font-family: var(--font-body); overflow-x: hidden; /* Crisp text rendering on Mac/iOS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: var(--font-primary); } ul { list-style: none; } /* ============================================================ FAIRWAY BACKGROUND Static horizontal stripes — no animation. ============================================================ */ .fairway-bg { background-image: url('assets/fairway-background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; animation: none; } /* ============================================================ NAVIGATION ============================================================ */ .main-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent; transition: var(--transition-smooth); } .main-nav.scrolled { background: var(--color-charcoal); transition: var(--transition-smooth); } /* Nav inner bar — always charcoal, exactly 70px tall */ .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); padding: 0 40px; position: relative; z-index: 2; background: var(--color-charcoal); } /* Logo group */ .nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-top: 8px; } .nav-logo-svg { height: 58px; width: auto; display: block; filter: brightness(0) invert(1); } .nav-logo-divider { width: 1.5px; height: 48px; background: var(--color-gold); opacity: 0.8; flex-shrink: 0; } .nav-brand-name { font-family: var(--font-primary); font-size: 28px; font-weight: 400; color: var(--color-white); letter-spacing: 5px; white-space: nowrap; } /* Nav links */ .nav-links { display: flex; list-style: none; gap: 48px; align-items: center; margin-left: auto; margin-right: auto; padding: 0; position: absolute; left: 50%; transform: translateX(-50%); } .nav-link { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 2.07px; text-transform: uppercase; color: var(--color-white); position: relative; padding-bottom: 4px; transition: var(--transition-smooth); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--color-gold); transition: width 0.3s ease; } .nav-link:hover { color: var(--color-gold); transition: var(--transition-smooth); } .nav-link:hover::after { width: 100%; } /* CTA button */ .nav-cta { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 2.07px; color: var(--color-white); border: var(--gold-border); padding: 10px 20px; text-transform: uppercase; transition: var(--transition-smooth); white-space: nowrap; flex-shrink: 0; margin-top: 12px; } .nav-cta:hover { background: var(--color-gold); color: var(--color-charcoal); } /* Nav pennant curve */ .nav-curve { position: absolute; bottom: -48px; left: 0; width: 100%; height: 50px; z-index: 1; pointer-events: none; line-height: 0; overflow: visible; } /* Mobile drawer — hidden on desktop */ .nav-mobile-menu { display: none; } /* Hamburger — hidden on desktop */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; background: none; border: none; flex-shrink: 0; position: relative; z-index: 3; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--color-white); transition: var(--transition-smooth); transform-origin: center; } /* X state */ .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; } .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--color-charcoal); border-top: var(--gold-border); padding: 60px 40px 40px; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; } .footer-logo { display: flex; align-items: center; gap: 12px; } .footer-logo-svg { height: 36px; width: auto; display: block; filter: brightness(0) invert(1); } .footer-logo-divider { width: 1.5px; height: 32px; background: #c9a84c; opacity: 0.8; flex-shrink: 0; } .footer-logo-text { display: flex; flex-direction: column; gap: 4px; } .footer-brand { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 400; letter-spacing: 5px; color: #ffffff; display: block; line-height: 1; } .footer-links { display: flex; flex-direction: column; } .footer-links a { font-size: 14px; color: var(--color-white-60); line-height: 2; transition: var(--transition-smooth); } .footer-links a:hover { color: var(--color-gold); } .footer-contact { display: flex; flex-direction: column; } .footer-contact a { font-size: 14px; color: var(--color-white-60); line-height: 2; transition: var(--transition-smooth); } .footer-contact a:hover { color: var(--color-gold); } .footer-copy { grid-column: 1 / -1; font-size: 12px; color: var(--color-white-60); text-align: center; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 20px; line-height: 1.6; } /* ============================================================ SHARED COMPONENT STYLES ============================================================ */ /* Section tag — decorative label above headlines */ .section-tag { display: flex; align-items: center; gap: 12px; justify-content: center; font-family: var(--font-primary); font-size: 13px; letter-spacing: 4px; color: #c9a84c; text-transform: uppercase; opacity: 1; } .section-tag::before, .section-tag::after { content: ''; width: 40px; height: 1px; background: #c9a84c; opacity: 1; flex-shrink: 0; } /* Headlines */ .section-headline { font-family: var(--font-primary); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 300; color: var(--color-white); letter-spacing: 4px; text-align: center; line-height: 1.2; /* Optimal Cinzel kerning and ligatures */ font-feature-settings: "kern" 1, "liga" 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .section-subheadline { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 17px; letter-spacing: 0.5px; color: var(--color-white-80); text-align: center; line-height: 1.6; max-width: 600px; margin: 0 auto; } /* Gold divider rule */ .section-divider { width: 60px; height: 1.5px; background: var(--color-gold); margin: 20px auto; border: none; } /* Gold card */ .gold-card { background: var(--color-charcoal); border: var(--gold-border); padding: 40px; transition: var(--transition-smooth); box-shadow: var(--shadow-gold); } .gold-card:hover { box-shadow: var(--shadow-gold-hover); transform: translateY(-4px); } /* CTA Button — solid */ .cta-button { display: inline-flex; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 2.07px; text-transform: uppercase; color: var(--color-white); background: var(--color-charcoal); border: var(--gold-border); padding: 18px 40px; transition: var(--transition-smooth); cursor: pointer; } .cta-button:hover { background: var(--color-gold); color: var(--color-charcoal); } .cta-button .btn-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cta-button:hover .btn-arrow { transform: translateX(6px); } /* CTA Button — ghost (transparent background) */ .cta-button-ghost { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--color-white); background: transparent; border: var(--gold-border); padding: 18px 40px; transition: var(--transition-smooth); cursor: pointer; } .cta-button-ghost:hover { background: var(--color-gold); color: var(--color-charcoal); } .cta-button-ghost .btn-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cta-button-ghost:hover .btn-arrow { transform: translateX(6px); } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ /* ── 1024px — tablet landscape ────────────────────────────── */ @media (max-width: 1024px) { .nav-inner { padding: 0 28px; } .nav-links { gap: 24px; } .nav-cta { padding: 10px 14px; font-size: 10px; letter-spacing: 2px; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-logo { grid-column: 1 / -1; } } /* ============================================================ SCROLL TO TOP BUTTON ============================================================ */ .scroll-top-btn { position: fixed; bottom: 32px; right: 32px; width: 56px; height: 56px; background: var(--color-charcoal); border: var(--gold-border); color: var(--color-gold); font-size: 20px; display: flex; align-items: center; justify-content: center; z-index: 900; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; /* Ensure it stays above page content but below nav (1000) */ line-height: 1; } .scroll-top-btn.visible { opacity: 1; pointer-events: auto; } .scroll-top-btn:hover { background: var(--color-gold); color: var(--color-charcoal); transform: translateY(-3px); } /* ============================================================ VIDEO WRAPPER LOADING STATE Pulse animation before video fires canplaythrough. ============================================================ */ @keyframes loadPulse { 0% { background-color: rgba(201, 168, 76, 0.05); } 100% { background-color: rgba(201, 168, 76, 0.10); } } .video-loading { animation: loadPulse 2s ease-in-out infinite alternate; } /* Remove pulse once video is ready — JS adds .video-loaded */ .video-loaded { animation: none; background-color: transparent; } /* ============================================================ FOOTER TAGLINE ============================================================ */ .footer-tagline { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 4px; color: #c9a84c; text-transform: uppercase; display: block; line-height: 1; } /* ── 375px — small phones ─────────────────────────────────── */ @media (max-width: 375px) { .nav-inner { padding: 0 16px; } .nav-brand-name { font-size: 15px; letter-spacing: 3px; } .nav-logo-svg { height: 32px; } .nav-mobile-menu .nav-links { padding: 16px 20px; } .nav-mobile-cta { margin: 12px 20px 20px; } .site-footer { padding: 40px 16px 28px; } .section-tag { font-size: 10px; letter-spacing: 3px; } .cta-button, .cta-button-ghost { font-size: 11px; padding: 14px 22px; letter-spacing: 2px; } } /* ============================================================ AOS ANIMATION OVERRIDES ============================================================ */ [data-aos] { pointer-events: auto !important; } [data-aos][data-aos][data-aos-duration='600'] { transition-duration: 600ms; } /* ============================================================ MOBILE — consolidated single breakpoint ============================================================ */ @media (max-width: 768px) { /* NAV CURVE - hidden on mobile */ .nav-curve { display: none !important; } /* NAV BAR */ .main-nav { background: #141414 !important; } .nav-inner { height: 70px !important; padding: 0 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; position: relative !important; z-index: 9999 !important; background: #141414 !important; } /* NAV LOGO */ .nav-logo { flex-shrink: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } .nav-logo-svg { height: 36px !important; } .nav-logo-divider { height: 28px !important; } .nav-brand-name { font-size: 16px !important; letter-spacing: 4px !important; } /* HIDE DESKTOP NAV LINKS AND CTA ON MOBILE */ .nav-inner .nav-links { display: none !important; } .nav-cta { display: none !important; } /* SHOW HAMBURGER BUTTON */ .nav-hamburger { display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 8px !important; cursor: pointer !important; background: none !important; border: none !important; margin-left: auto !important; flex-shrink: 0 !important; } .nav-hamburger span { width: 24px !important; height: 2px !important; background: #ffffff !important; display: block !important; } /* MOBILE DRAWER - hidden by default */ .nav-mobile-menu { display: none; flex-direction: column; position: fixed !important; top: 70px !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; background: #141414 !important; padding: 8px 0 24px 0 !important; z-index: 9998 !important; border-top: 1px solid rgba(201, 168, 76, 0.3) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; overflow: hidden !important; transform: none !important; margin: 0 !important; box-sizing: border-box !important; } /* MOBILE DRAWER - shown when open */ .nav-mobile-menu.mobile-open { display: flex !important; } /* MOBILE DRAWER NAV LINKS */ .nav-mobile-menu .nav-links { display: flex !important; flex-direction: column !important; position: static !important; width: 100vw !important; max-width: 100vw !important; background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; transform: none !important; left: auto !important; right: auto !important; } .nav-mobile-menu .nav-links li { width: 100vw !important; max-width: 100vw !important; display: block !important; padding: 0 !important; margin: 0 !important; list-style: none !important; position: static !important; transform: none !important; text-align: center !important; } .nav-mobile-menu .nav-link { display: block !important; width: 100% !important; padding: 18px 32px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 3px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-transform: uppercase !important; text-align: center !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; opacity: 1 !important; visibility: visible !important; white-space: nowrap !important; background: transparent !important; text-decoration: none !important; } .nav-mobile-menu .nav-link::after { display: none !important; } .nav-mobile-menu .nav-link:hover { color: #c9a84c !important; background: rgba(201, 168, 76, 0.05) !important; } /* MOBILE DRAWER CTA BUTTON */ .nav-mobile-cta { display: block !important; margin: 16px 32px 0 !important; padding: 14px 20px !important; text-align: center !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #ffffff !important; border: 1.5px solid #c9a84c !important; text-decoration: none !important; } .nav-mobile-cta:hover { background: #c9a84c !important; color: #141414 !important; } /* SCROLL TO TOP BUTTON */ .scroll-top-btn { width: 44px !important; height: 44px !important; font-size: 16px !important; bottom: 16px !important; right: 16px !important; } /* FOOTER */ .footer-inner { grid-template-columns: 1fr !important; text-align: center !important; } .footer-logo { justify-content: center !important; } }