/* ============================================================ DISCOVER EULESS — Style System v3 (brand-aligned) Palette: --green #446343 primary brand color — buttons, nav accents, icons, links, decorative elements --green-dark hover / pressed state of primary green --green-tint very light green wash for subtle fills --text #000000 pure black — all standard text on white/soft-gray backgrounds --text-soft same pure black; kept as a distinct token for secondary copy so hierarchy can be reintroduced later without touching every rule --bg #FFFFFF primary background --bg-soft #F8F8F6 secondary background (alternating section rhythm) --gold #C8A96A accent — used sparingly (dividers, small labels) --line neutral gray hairline borders Roughly: 80% white space, 15% dark text, 5% green accent, with gold reserved for a handful of decorative touches only. Type: DM Sans — single typeface across headings, body, nav & buttons (headings 700/800, body 400/500, nav 500/600, buttons 600) Signature: hand-drawn "trail" dividers between sections + soft grain ============================================================ */ /* ============================================================ IMAGE ASSET LIST — all files below live in /images/, alongside this stylesheet and index.html. See index.html's for the full list with section-by-section notes; referenced here too since this file also points at /images/: images/grain-texture.svg — paper-grain background texture (.grain div, fixed overlay) All other images (logo, hero, section photography) are inserted via tags in index.html, not CSS — see that file's asset list for the complete set of expected filenames. ============================================================ */ :root { --green: #446343; --green-dark: #3A5439; --green-darker: #2B3F2A; --green-tint: rgba(68, 99, 67, 0.08); --green-tint-strong: rgba(68, 99, 67, 0.14); --text: #000000; --text-soft: #000000; --bg: #FFFFFF; --bg-soft: #F8F8F6; --gold: #C8A96A; --line: #E7E9E6; --font-primary: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; /* Fields is a licensed display serif (not distributable via Google Fonts). "Playfair Display" is loaded as a close, freely-licensed stand-in with the same elegant, high-contrast serif character. If/when you obtain licensed Fields webfont files, add an @font-face block (see the commented example just below the :root block) declaring the family name "Fields", and this variable will pick it up automatically — no other CSS needs to change. */ --font-heading: "Fields", "Playfair Display", Georgia, "Times New Roman", serif; /* ============================================================ TYPOGRAPHY SYSTEM — single source of truth for every heading level and body/caption style site-wide. Change a value here and it updates everywhere that level is used. See the h1–h6 base rules below for how these are applied, and style-guide.html for a visual reference sheet. ============================================================ */ --fs-h1: clamp(3.4rem, 8vw, 6.4rem); --fs-h2: clamp(2.1rem, 4.2vw, 3.15rem); --fs-h3: clamp(1.76rem, 2.7vw, 2.16rem); --fs-h4: 1.1rem; --fs-body: 1rem; --fs-lede: clamp(1.05rem, 1.5vw, 1.2rem); --fs-quote: clamp(1.5rem, 3vw, 2.1rem); --fs-small: 0.85rem; --fw-h1: 400; /* lighter/display weight for the hero — editorial emphasis */ --fw-heading: 500; /* h2–h6 default weight */ --fw-body: 400; --lh-heading: 1.15; --lh-body: 1.65; --ls-heading: -0.02em; --mb-h1: 30px; --mb-h2: 24px; --mb-h3: 16px; --mb-h4: 18px; /* spacing scale */ --space-2xs: 12px; --space-xs: 20px; --space-s: 32px; --space-m: 36px; --space-l: 60px; --space-section: clamp(56px, 7vw, 120px); --container: 1220px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Uncomment and point at your own hosted files once you have a Fields webfont license — the --font-heading variable above will then use the real typeface automatically, with Playfair Display as its fallback. @font-face { font-family: "Fields"; src: url("/fonts/Fields-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fields"; src: url("/fonts/Fields-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Fields"; src: url("/fonts/Fields-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } */ /* ---------- RESET ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-primary); color: var(--text); background: var(--bg); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); overflow-x: hidden; position: relative; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); margin-bottom: var(--mb-h1); } h2 { font-size: var(--fs-h2); margin-bottom: var(--mb-h2); } h3 { font-size: var(--fs-h3); margin-bottom: var(--mb-h3); } h4 { font-size: var(--fs-h4); margin-bottom: var(--mb-h4); } h5, h6 { font-size: var(--fs-body); margin-bottom: var(--mb-h4); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } /* ---------- SUBTLE GRAIN OVERLAY (premium paper texture) ---------- */ .grain { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.02; mix-blend-mode: multiply; background-image: url("images/grain-texture.svg"); } /* ---------- SHARED ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 36px; font-family: var(--font-primary); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em; border-radius: 999px; border: 1px solid transparent; transition: transform 0.5s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); cursor: pointer; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--green); color: #fff; } .btn-primary:hover { background: var(--green-dark); } .btn-ghost { border-color: rgba(31,41,51,0.28); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--green); color: var(--green); background: var(--green-tint); } .btn-ghost.light { border-color: rgba(255,255,255,0.75); color: #fff; background: rgba(0,0,0,0.22); } .btn-ghost.light:hover { border-color: #fff; background: rgba(0,0,0,0.4); } .btn-ghost.light:focus-visible { outline-color: #fff; outline-offset: 3px; } /* Scroll-reveal: staggered fade + rise */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Image reveal: soft upward wipe, distinct from text reveal */ .reveal-image { overflow: hidden; } .reveal-image img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.3s var(--ease), transform 1.6s var(--ease); } .reveal-image.is-visible img { clip-path: inset(0 0 0% 0); transform: scale(1); } /* ============================================================ TRAIL DIVIDER — signature motif: a hand-drawn trail line with a single waypoint, drawn in on scroll. One of the few places the limited gold accent appears. ============================================================ */ .trail-divider { max-width: 240px; margin: 0 auto; padding: 24px 0; color: var(--gold); } .trail-path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; opacity: 0.75; } .trail-dot { fill: var(--green); opacity: 0; transition: opacity 0.6s var(--ease) 0.9s; } .trail-divider.in-view .trail-dot { opacity: 1; } /* ============================================================ HEADER / NAV ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 28px 0; transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .site-header.scrolled { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); padding: 15px 0; box-shadow: 0 1px 0 var(--line); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: center; position: relative; } .brand { display: flex; align-items: center; } .brand-logo { display: block; height: 126px; width: auto; } /* nav-group only exists as a grouping/toggle target for mobile; on desktop it dissolves via display:contents so nav-left/nav-right become direct descendants for absolute-positioning purposes */ .nav-group { display: contents; } /* Absolutely centered against the logo's own height (the only in-flow child of .header-inner), so nav text sits exactly at the logo's vertical midpoint regardless of the two heights differing. */ .nav-left, .nav-right { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 36px; } .nav-left { left: 32px; } .nav-right { right: 32px; } .nav-left a, .nav-right a { font-family: var(--font-primary); font-weight: 700; letter-spacing: 0.015em; font-size: 1.17rem; line-height: 1; color: #fff; position: relative; transition: color 0.4s var(--ease); } .site-header.scrolled .nav-left a, .site-header.scrolled .nav-right a { color: var(--text); } .nav-left a::after, .nav-right a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--green); transition: width 0.35s var(--ease); } .nav-left a:hover, .nav-right a:hover { color: var(--green); } .nav-left a:hover::after, .nav-right a:hover::after { width: 100%; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 1.5px; background: #fff; transition: background 0.4s var(--ease); } .site-header.scrolled .nav-toggle span { background: var(--text); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100vh; min-height: 680px; display: flex; align-items: center; overflow: hidden; } .hero-media { position: absolute; inset: -8% 0 -8% 0; width: 100%; height: 116%; will-change: transform; } .hero-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: heroZoom 18s ease-out forwards; } @keyframes heroZoom { to { transform: scale(1); } } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,32,24,0.48) 0%, rgba(24,32,24,0.14) 40%, rgba(24,32,24,0.58) 100%); } .hero-content { position: relative; z-index: 2; max-width: 720px; padding: 0 32px; color: #fff; margin: 0 auto; text-align: center; } .hero-title em { font-style: italic; font-weight: 500; color: #A9C4A0; } /* Prevent "connected here." from wrapping onto a 3rd line at large desktop font sizes — widen the container and lock line 2, without changing font size or the mobile/tablet layout. */ @media (min-width: 1024px) { .hero-content { max-width: min(1600px, 95vw); } .hero-line2 { white-space: nowrap; } } .hero-sub { font-size: var(--fs-lede); font-weight: 400; max-width: 520px; color: rgba(255,255,255,0.92); margin: 0 auto 44px; } .hero-actions { display: flex; gap: 18px; flex-wrap: wrap; } .hero .hero-actions { justify-content: center; } .scroll-cue { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; width: 24px; height: 40px; border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; } .scroll-cue span { position: absolute; top: 8px; left: 50%; width: 4px; height: 4px; margin-left: -2px; background: #fff; border-radius: 50%; animation: scrollCue 1.9s ease-in-out infinite; } @keyframes scrollCue { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; transform: translateY(14px); } } /* ============================================================ SECTION SHELLS ============================================================ */ .section { position: relative; padding: var(--space-section) 32px; max-width: var(--container); margin: 0 auto; background: var(--bg); } .section-flush { position: relative; background: var(--bg); } /* Alternating rhythm: soft-gray band sections (never tan/beige) */ .parks, .favorites, .events { background: var(--bg-soft); } .section-head { max-width: 620px; margin-bottom: 48px; } .section-lede { color: var(--text-soft); font-size: var(--fs-lede); font-weight: 400; max-width: 520px; } /* Ghost watermark word */ .lifestyle { position: relative; overflow: hidden; } .ghost-word { position: absolute; top: -6%; right: -2%; font-family: var(--font-heading); font-weight: 400; font-size: clamp(6rem, 18vw, 15rem); color: transparent; -webkit-text-stroke: 1px var(--green-tint-strong); z-index: 0; pointer-events: none; user-select: none; line-height: 1; } /* ============================================================ LIFESTYLE — moment grid ============================================================ */ .moment-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: var(--space-l); } .moment-card { padding: 44px 30px; border-top: 1px solid var(--line); transition: border-color 0.5s var(--ease), background 0.5s var(--ease); } .moment-card:hover { border-color: var(--green); background: var(--green-tint); } .moment-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--green); margin-bottom: 28px; } .moment-icon svg { width: 42px; height: 42px; } .moment-copy { font-family: var(--font-heading); font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.005em; color: var(--text); } .whisper-facts { position: relative; z-index: 1; text-align: center; font-size: 1.19rem; letter-spacing: 0.04em; color: var(--text-soft); border-top: 1px solid var(--line); padding-top: var(--space-m); } /* ============================================================ PARKS — light editorial section (soft-gray band, no dark bg) ============================================================ */ .parks .section-head { max-width: var(--container); margin-left: auto; margin-right: auto; padding: var(--space-section) 32px 0; margin-bottom: 48px; } .card-grid { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 3px; } .image-card { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4/5; } .image-card.large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .image-card:hover img { transform: scale(1.05); } .image-card figcaption { position: absolute; inset: auto 0 0 0; padding: 34px 30px; background: linear-gradient(180deg, transparent, rgba(15,20,15,0.82) 80%); color: #fff; } .image-card h3 { color: #fff; } .image-card p { font-size: 0.9rem; font-weight: 400; color: rgba(255,255,255,0.85); max-width: 340px; } .pull-quote { max-width: 760px; margin: var(--space-l) auto 0; padding: 0 32px var(--space-section); text-align: center; } .pull-quote p { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--fs-quote); color: var(--text); line-height: 1.35; margin-bottom: 20px; } .pull-quote cite { font-family: var(--font-primary); font-weight: 600; font-style: normal; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } /* ============================================================ FAMILY — editorial split rows ============================================================ */ .split-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; margin-bottom: 72px; } .split-row:last-child { margin-bottom: 0; } .split-row.reverse { direction: rtl; } .split-row.reverse > * { direction: ltr; } .split-media { border-radius: 4px; overflow: hidden; } .split-media img { aspect-ratio: 4/3.3; object-fit: cover; } .split-text p { color: var(--text-soft); font-weight: 400; margin: 20px 0 26px; max-width: 460px; } .check-list li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 0.95rem; color: var(--text); } .check-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 8px; border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green); transform: rotate(-45deg); } /* ============================================================ LOCAL FAVORITES — horizontal scroller ============================================================ */ .scroll-hint { font-size: var(--fs-small); color: var(--text-soft); letter-spacing: 0.04em; margin-bottom: 24px; } .favorites-scroller { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin: 0 -32px; padding-left: 32px; padding-right: 32px; scrollbar-width: thin; scrollbar-color: var(--green) transparent; } .favorites-scroller::-webkit-scrollbar { height: 5px; } .favorites-scroller::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; } .favorite-card { flex: 0 0 300px; scroll-snap-align: start; border-radius: 6px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); } .favorite-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -22px rgba(31,41,51,0.16); border-color: var(--green-tint-strong); } .favorite-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .favorite-copy { padding: 22px 22px 26px; } .favorite-copy p { font-size: 0.9rem; color: var(--text-soft); font-weight: 400; } /* ============================================================ EVENTS — season strip ============================================================ */ .season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); } .season-card { background: var(--bg-soft); padding: 48px 30px; transition: background 0.5s var(--ease); } .season-card:hover { background: var(--bg); } .season-label { display: inline-block; font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .season-card p { font-size: 0.92rem; color: var(--text-soft); font-weight: 400; } /* ============================================================ FINAL CTA ============================================================ */ .final-cta { min-height: 640px; display: flex; align-items: center; overflow: hidden; } .final-cta-media { position: absolute; inset: -8% 0 -8% 0; width: 100%; height: 116%; will-change: transform; } .final-cta-img { width: 100%; height: 100%; object-fit: cover; } .final-cta-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,20,0.52), rgba(20,26,20,0.66)); } .final-cta-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 72px 32px; text-align: center; color: #fff; } .final-cta-content h2 { color: #fff; } .final-cta-content p { font-weight: 400; color: rgba(255,255,255,0.88); margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; } .final-cta-content .hero-actions { justify-content: center; } /* ============================================================ FOOTER — deep green, ties the signature brand color into the one deliberately dark moment on the page ============================================================ */ .site-footer { background: var(--green-darker); color: rgba(255,255,255,0.78); padding: 64px 32px 0; } .footer-inner { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; } .brand-logo--footer { height: 139px; } .footer-brand p { margin-top: 16px; font-size: 0.9rem; max-width: 260px; color: rgba(255,255,255,0.6); } .footer-links { display: flex; gap: 72px; } .footer-links h4 { letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } .footer-links a { display: block; font-size: 0.92rem; margin-bottom: 12px; color: rgba(255,255,255,0.75); transition: color 0.3s var(--ease); } .footer-links a:hover { color: #fff; } .footer-bottom { max-width: var(--container); margin: 0 auto; padding: 26px 0; font-size: 0.8rem; color: rgba(255,255,255,0.5); text-align: center; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .moment-grid { grid-template-columns: repeat(2, 1fr); } .card-grid { grid-template-columns: repeat(2, 1fr); } .image-card.large { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; } .season-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .header-inner { display: flex; align-items: center; justify-content: space-between; } .nav-toggle { display: flex; } .nav-group { display: none; } .nav-left, .nav-right { position: static; transform: none; } .site-header.nav-open .nav-group { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 24px 32px 32px; gap: 20px; box-shadow: 0 16px 32px -20px rgba(31,41,51,0.16); } /* Dissolve the left/right grouping so all six links stack as one unified list, matching the original single-dropdown mobile menu. */ .site-header.nav-open .nav-group .nav-left, .site-header.nav-open .nav-group .nav-right { display: contents; } .site-header.nav-open .nav-group a { color: var(--text); } .split-row, .split-row.reverse { grid-template-columns: 1fr; direction: ltr; gap: 24px; margin-bottom: 56px; } } @media (max-width: 640px) { :root { --space-section: 52px; } .moment-grid { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr; } .image-card.large { grid-column: span 1; aspect-ratio: 4/3; } .season-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-title { font-size: clamp(2.8rem, 11vw, 3.8rem); } .footer-inner { flex-direction: column; gap: 40px; } .footer-links { gap: 40px; } .favorite-card { flex: 0 0 78vw; } }