/* * site.css — Perfectly Paced Journeys * Shared across ALL pages: tokens, reset, typography, nav, footer, buttons * * LOAD ORDER on every page: * 1. site.css ← always first * 2. marketing.css ← Home, About, Work With Us, Contact, Destinations, Plan Your Journey * OR * journal.css ← /journal/ and /journal/posts/ * * Then at bottom of : * * * * Version 1.0 — March 2026 */ /* ============================================================ GOOGLE FONTS Import here so every page gets them via site.css. All pages use Cormorant Garamond (display) + Jost (body). DO NOT use DM Sans anywhere — it has been superseded by Jost. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap'); /* ============================================================ DESIGN TOKENS Single source of truth for all color, type, and layout values. Reference these everywhere — never hardcode hex values in page CSS. ============================================================ */ :root { /* ── FOREST PALETTE — marketing pages ──────────────────── */ --forest: #2C3E2D; /* Primary — Deep Forest Green */ --ochre: #C4873A; /* Secondary — Warm Ochre */ --slate: #7A8B8C; /* Accent — Coastal Slate */ --cream: #F5F0E8; /* Background — Aged Cream */ --parchment: #EDE6D6; /* Surface — Warm Parchment */ --ink: #1E1E1E; /* Text — Near Black */ --mist: #D4CFC5; /* Border — Warm Mist */ /* ── INK PALETTE — journal pages ───────────────────────── */ --j-ink: #1a1814; /* Deep warm black */ --j-paper: #f5f1eb; /* Warm off-white */ --j-warm: #c8a97e; /* Warm gold (maps to --ochre) */ --j-stone: #8c8275; /* Mid tone */ --j-mist: #e8e2d9; /* Light warm grey */ --j-ash: #3d3830; /* Dark warm grey */ /* ── TYPOGRAPHY ─────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif; /* ── LAYOUT ─────────────────────────────────────────────── */ --max-width: 1200px; --section-pad: 100px 40px; --radius: 2px; /* ── NAV ────────────────────────────────────────────────── */ --nav-height: 72px; --nav-bg: var(--ink); --nav-text: rgba(245, 240, 232, 0.55); --nav-hover: var(--ochre); --nav-active: var(--cream); --nav-logo: var(--cream); /* ── STATUS COLORS — scorecard + ratings ───────────────── */ --status-good: #8db48e; --status-caution: #c8a97e; --status-warn: #c4826e; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 300; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Offset for fixed nav — overridden per page if nav is sticky not fixed */ padding-top: var(--nav-height); } img { display: block; max-width: 100%; height: auto; } /* Full-bleed images inside constrained containers */ img.full-bleed { width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font-family: var(--font-body); border: none; background: none; padding: 0; } input, select, textarea { font-family: var(--font-body); } /* ============================================================ TYPOGRAPHY — shared base across both palettes ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 300; line-height: 1.15; } h1 { font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.01em; } h2 { font-size: clamp(2rem, 4vw, 3.5rem); } h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); } h4 { font-size: 1.2rem; } h5 { font-size: 1rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.05em; } p { font-size: 1rem; line-height: 1.82; } /* Eyebrow — uppercase label above headings */ .eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); } .italic { font-style: italic; } /* Ochre accent on display headings */ h1 em, h2 em, h3 em { font-style: italic; color: var(--ochre); } /* ============================================================ LAYOUT UTILITIES — shared ============================================================ */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; } .section { padding: var(--section-pad); } /* Ochre divider line */ .divider-line { width: 48px; height: 1px; background: var(--ochre); margin: 1.5rem 0; } /* Ornamental dots — used in journal posts */ .divider-ornament { text-align: center; color: var(--ochre); font-size: 1rem; letter-spacing: 0.6em; margin: 3rem 0; opacity: 0.4; } /* Visually hidden (accessibility) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ NAVIGATION Identical HTML and behavior on every page. nav.js handles: scroll state, mobile toggle, active links. ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--nav-height); background: var(--nav-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; transition: padding 0.3s ease, box-shadow 0.3s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Scrolled state — added by nav.js */ .site-nav.scrolled { box-shadow: 0 4px 40px rgba(0, 0, 0, 0.28); } /* Logo */ .nav-logo { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--nav-logo); letter-spacing: 0.02em; white-space: nowrap; transition: color 0.2s; flex-shrink: 0; } .nav-logo:hover { color: var(--ochre); } /* Optional ochre mark before logo text */ .nav-logo__mark { color: var(--ochre); margin-right: 0.35em; } /* Desktop links */ .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { font-family: var(--font-body); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nav-text); transition: color 0.2s; white-space: nowrap; } .nav-links a:hover { color: var(--nav-hover); } /* Active state — set by nav.js */ .nav-links a.active { color: var(--nav-active); } /* Nav CTA button */ .nav-cta { font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ochre); padding: 0.5rem 1.1rem; border: 1px solid rgba(196, 135, 58, 0.4); transition: background 0.2s, border-color 0.2s; white-space: nowrap; } .nav-cta:hover { background: rgba(196, 135, 58, 0.1); border-color: var(--ochre); } /* Mobile hamburger button */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; background: none; border: none; } .nav-hamburger span { display: block; width: 22px; height: 1px; background: var(--nav-text); transition: transform 0.3s, opacity 0.3s; } /* Hamburger open state — toggled by nav.js */ .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } /* Mobile nav drawer */ .nav-mobile { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--nav-bg); border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 1.5rem 2rem 2rem; z-index: 499; flex-direction: column; gap: 0; } /* Open state — toggled by nav.js */ .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nav-text); padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: color 0.2s; } .nav-mobile a:hover { color: var(--nav-hover); } .nav-mobile a.active { color: var(--nav-active); } .nav-mobile a:last-child { border-bottom: none; } /* ============================================================ FOOTER Identical HTML on every page — four-column layout. Columns: Brand + social | Explore | Plan | Legal/contact ============================================================ */ .site-footer { background: var(--ink); color: var(--cream); padding: 80px 40px 40px; } .site-footer__inner { max-width: var(--max-width); margin: 0 auto; } /* Top grid: 2fr brand + 3 × 1fr columns */ .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(245, 240, 232, 0.08); margin-bottom: 40px; } /* Brand column */ .footer-brand {} .footer-brand__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: var(--cream); margin-bottom: 0.75rem; } .footer-brand__tagline { font-family: var(--font-display); font-size: 0.78rem; font-style: italic; color: rgba(245, 240, 232, 0.38); margin-bottom: 1.25rem; line-height: 1.5; } .footer-brand__note { font-size: 0.72rem; color: rgba(245, 240, 232, 0.28); line-height: 1.65; } /* Social links */ .footer-social { display: flex; gap: 10px; margin-top: 1.5rem; } .footer-social__link { width: 34px; height: 34px; border: 1px solid rgba(245, 240, 232, 0.12); display: flex; align-items: center; justify-content: center; font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245, 240, 232, 0.3); transition: border-color 0.2s, color 0.2s; } .footer-social__link:hover { border-color: var(--ochre); color: var(--ochre); } /* Nav columns */ .footer-col h5 { font-family: var(--font-body); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); margin-bottom: 1.25rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { font-size: 0.82rem; color: rgba(245, 240, 232, 0.4); transition: color 0.2s; } .footer-col a:hover { color: var(--cream); } /* Bottom bar */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-legal { font-size: 0.68rem; color: rgba(245, 240, 232, 0.2); line-height: 1.6; } .footer-legal a { color: rgba(245, 240, 232, 0.2); transition: color 0.2s; } .footer-legal a:hover { color: rgba(245, 240, 232, 0.55); } .footer-fora { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 240, 232, 0.15); } /* ============================================================ BUTTON SYSTEM Shared across both palettes. .btn-primary / .btn-secondary / .btn-ghost / .btn-text Journal-specific: .btn-journal (ink palette CTA) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; white-space: nowrap; border-radius: var(--radius); text-decoration: none; } /* Primary — forest fill, cream text */ .btn-primary { background: var(--forest); color: var(--cream); border: 2px solid var(--forest); font-size: 0.75rem; padding: 0.9rem 2rem; } .btn-primary:hover { background: transparent; color: var(--forest); } /* Secondary — ochre outline */ .btn-secondary { background: transparent; color: var(--ochre); border: 1px solid var(--ochre); font-size: 0.72rem; padding: 0.85rem 1.8rem; } .btn-secondary:hover { background: var(--ochre); color: var(--ink); } /* Ghost — cream outline (for dark / forest backgrounds) */ .btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(245, 240, 232, 0.35); font-size: 0.72rem; padding: 0.85rem 1.8rem; } .btn-ghost:hover { border-color: var(--cream); background: rgba(245, 240, 232, 0.08); } /* Dark — ink fill (for light / cream backgrounds) */ .btn-dark { background: var(--ink); color: var(--cream); border: 2px solid var(--ink); font-size: 0.72rem; padding: 0.85rem 1.8rem; } .btn-dark:hover { background: transparent; color: var(--ink); } /* Text link with trailing arrow */ .btn-text { font-size: 0.72rem; color: var(--ochre); border: none; padding: 0; background: none; display: inline; } .btn-text::after { content: ' →'; } .btn-text:hover { opacity: 0.72; } /* Journal CTA — ink palette, warm-gold border (journal posts + journal pages) */ .btn-journal { display: inline-block; padding: 0.9rem 2.2rem; border: 1px solid var(--j-warm); color: var(--j-warm); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-body); background: transparent; transition: background 0.3s, color 0.3s; border-radius: var(--radius); } .btn-journal:hover { background: var(--j-warm); color: var(--j-ink); } /* Size modifier */ .btn--sm { font-size: 0.65rem; padding: 0.6rem 1.2rem; } .btn--lg { font-size: 0.8rem; padding: 1.1rem 2.4rem; } /* ============================================================ STAR RATING SYSTEM Used on destination pages (marketing palette). Format: ★★★★☆ — ochre filled, mist empty. scorecard good/caution/warn is separate (journal.css). ============================================================ */ .stars { color: var(--ochre); font-size: 0.9rem; letter-spacing: 0.05em; } .stars .star-empty { color: var(--mist); } .rating-item { display: flex; flex-direction: column; gap: 3px; } .rating-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); } /* ============================================================ SCROLL REVEAL .reveal elements start hidden; reveal.js adds .visible on intersection. Use .reveal-delay-N for stagger. ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger delays — apply to children when parent is .reveal-group */ .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } /* Reveal group — reveal.js staggers direct children */ .reveal-group > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-group.visible > * { opacity: 1; transform: translateY(0); } .reveal-group.visible > *:nth-child(1) { transition-delay: 0s; } .reveal-group.visible > *:nth-child(2) { transition-delay: 0.1s; } .reveal-group.visible > *:nth-child(3) { transition-delay: 0.2s; } .reveal-group.visible > *:nth-child(4) { transition-delay: 0.3s; } .reveal-group.visible > *:nth-child(5) { transition-delay: 0.4s; } .reveal-group.visible > *:nth-child(6) { transition-delay: 0.5s; } /* ============================================================ RESPONSIVE — nav and footer (shared across all pages) ============================================================ */ @media (max-width: 1024px) { .site-nav { padding: 0 24px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; } .container { padding: 0 24px; } } @media (max-width: 768px) { /* Hide desktop links, show hamburger */ .nav-links { display: none; } .nav-hamburger { display: flex; } .footer-top { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { :root { --nav-height: 60px; } .site-nav { padding: 0 20px; } .site-footer { padding: 60px 20px 32px; } .container { padding: 0 20px; } }