/* ============================================================ SHARED STYLES — used on every page of the 4x4 Campout site. Nav, ticker, footer, and mobile menu live here so they stay in sync across pages. Each page sets its own accent colors via the CSS variables below, then adds its own .css for the sections unique to that page. ============================================================ */ @font-face { font-family: 'Serial B'; src: url('../fonts/SerialB-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Brand palette — shared across all pages */ --cream: #FFE8D3; --brown: #76543C; --black: #000000; /* Home page theme */ --deep-green: #14360A; --mint-green: #7FE78E; /* Info / Safety page theme */ --olive-dark: #344B22; /* hero + footer bg, wordmark shadow layer */ --mustard: #B9AC35; /* headings, logo accent, wordmark front layer */ --icon-olive: #3E3906; /* hand-drawn icon fill */ /* Per-page accent — override in each page's or body via data-theme */ --logo-accent: var(--cream); --footer-bg: var(--brown); --nav-h: 110px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Serial B', sans-serif; background: var(--black); color: var(--cream); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ---------- NAV ---------- */ .site-nav { position: absolute; top: 0; left: 0; width: 100%; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 56px); z-index: 100; } .nav-logo { width: clamp(135px, 12vw, 195px); height: auto; flex-shrink: 0; } .site-nav > a:first-child { align-self: flex-start; margin-top: 8px; } .nav-links { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); } .nav-links span { font-size: 20px; letter-spacing: 0.03em; white-space: nowrap; text-transform: uppercase; transition: opacity 0.2s ease; } .nav-right { display: flex; align-items: center; gap: 28px; } .nav-tickets-btn { font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; } .nav-toggle { background: none; border: none; color: var(--cream); display: flex; flex-direction: column; gap: 5px; padding: 8px; z-index: 210; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--cream); transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Full visual site-menu overlay styles live in site-menu.css (shared across every page) */ @media (max-width: 900px) { .nav-links span, .nav-tickets-btn { font-size: 14px; } } @media (max-width: 640px) { .nav-links { display: none; } /* duplicated into mobile menu instead */ .nav-tickets-btn { font-size: 12px; } } /* ---------- TICKER (identical position/behavior on every page) ---------- */ .ticker-wrap { background: var(--brown); overflow: hidden; white-space: nowrap; padding: 10.8px 0; position: relative; z-index: 5; transition: background-color 0.2s ease; } .ticker-wrap:hover { background-color: #307442; } .ticker-track { display: inline-flex; align-items: center; will-change: transform; /* transform is now driven by JS (see shared.js) instead of a CSS @keyframes animation — see the comment there for why. */ } .ticker-item { display: inline-flex; align-items: center; gap: 18px; padding: 0 44px; font-size: 17px; letter-spacing: 0.06em; flex-shrink: 0; color: var(--cream); text-transform: uppercase; } .ticker-item img { height: 26px; width: auto; } .ticker-item img.ticker-item-logo--1 { height: 31.2px; } .ticker-item img.ticker-item-logo--2 { height: 52px; } .ticker-item img.ticker-item-logo--3 { height: 31.2px; } /* ---------- FOOTER (bg + logo color set per-page via variables) ---------- */ .site-footer { background: var(--footer-bg); padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 56px) 0; } .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-bottom: 28px; } .footer-links { display: flex; flex-wrap: wrap; gap: 14px; } .footer-pill { border: 2px solid var(--cream); border-radius: 14px; padding: 10px 22px; font-size: 14px; letter-spacing: 0.03em; color: var(--cream); text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .footer-pill:hover { background: var(--cream); color: var(--footer-bg); } .footer-icon--instagram { display: inline-flex; align-items: center; justify-content: center; color: var(--cream); transition: opacity 0.2s ease; } .footer-icon--instagram:hover { opacity: 0.7; } /* Row wrappers only matter on mobile (see media query below) — on desktop they collapse out of the layout entirely so the pills keep flowing directly inside .footer-links exactly as before. */ .footer-row { display: contents; } @media (max-width: 700px) { /* Copyright line is dropped on mobile per request. */ .footer-copy { display: none; } /* Two explicit rows instead of one wrapping flex line: Tickets / Music schedule share the top row (with the bare Instagram icon tucked beside them, no capsule/border of its own so it doesn't steal width Music schedule needs to stay on one line), Important info / Campout map share the bottom row as equal halves. */ .footer-links { display: flex; flex-direction: column; gap: 8px !important; flex: 1 1 100%; } .footer-row { display: flex; align-items: center; gap: 8px !important; } .footer-pill { text-align: center; padding: 10px 8px; } .footer-row--top .footer-pill--tickets, .footer-row--top .footer-pill--schedule { flex: 1 1 0; } .footer-icon--instagram { flex: 0 0 auto; width: 40px; } .footer-row--bottom .footer-pill--info, .footer-row--bottom .footer-pill--map { flex: 1 1 0; } } .footer-copy { font-size: 18px; letter-spacing: 0.03em; color: var(--cream); text-transform: uppercase; } .footer-divider { border: none; border-top: 2px solid var(--cream); margin: 0; } .footer-logo-wrap { padding: clamp(16px, 3vw, 32px) 0 20px; line-height: 0; } .footer-logo-wrap img { width: 100%; height: auto; }