SINGLE SHOT - EDITABLE PUBLIC PAGE SOURCE These are existing source files, not a standalone website. The full application uses React/Next, a Vinext/Cloudflare server build, and server-side inquiry functions. This text contains no credentials or operator-authentication code. The complete 36 MB developer archive remains in the full source package. ===== app/page.tsx ===== import Link from "next/link"; import { Hero, ImageCard, InquiryBanner, inquiryEmail, Page, SectionHeading, } from "./components/SiteShell"; export default function Home() { return ( Exclusive adventures.
Built around you.} copy="Private days outside, shaped around the people you care about. Explore family discovery, guided field experiences, off-road days, outdoor skills, the fleet, and the water—all brought together with trusted people and genuine hospitality." image="/images/hero-family-mountains.jpg" imageAlt="A family overlooking a mountain range at sunrise" position="center" > Explore adventures Talk with Eli
Start with a conversation. Ask Eli about availability, locations, and the right experience for your group. Contact Eli →
Single Shot BBQ trailer serving guests at an outdoor event with black-and-copper graphics Founder-owned partner company Single Shot BBQ A cornerstone of the Single Shot story, bringing private meals, mobile-bar service, and relaxed hospitality to gatherings indoors and out. Explore Single Shot BBQ

Make it yours

Make the experience your own.

Bring together the places, pace, comfort, equipment, and moments that feel right for your group.

Email us

A note from our founders

Wide Full Open.

Wide Full Open was one of our dad’s sayings, shaped by years of Baja racing in trophy trucks and on dirt bikes—where a throttle wide open meant trusting your preparation and committing fully to the line ahead. But WFO described far more than racing. He lived with purpose, did things right, and showed up for the people who counted on him. That is the standard he left us and the spirit behind Single Shot: make room for the people you love, earn the story you want, and go wholeheartedly toward the future you want to create.

We hope you leave with full hearts, great stories, and a reason to come back outside. — Eli, Levi, Bear & Bobby Email us to start your journey →
); } ===== app/about/page.tsx ===== import type { Metadata } from "next"; import { Hero, InquiryBanner, inquiryEmail, MountainMark, Page, SectionHeading } from "../components/SiteShell"; export const metadata: Metadata = { title: "Meet the Team", description: "Meet the capable people, trusted relationships, and shared standards behind Single Shot Adventures.", alternates: { canonical: "/about" }, }; const teamMembers = [ { name: "Levi", lead: "Seeing the whole journey and making sure every part serves the people taking it.", story: "Levi came to Single Shot after years of business leadership, where he learned to see the big picture, build trusted systems, bring people together, and make room for others to lead. He brings curiosity, practical intelligence, and a commitment to the people who matter to the work of creating meaningful outdoor experiences. At Single Shot, he connects people and ideas, helps pass the baton to the next person ready to carry it, and shapes experiences that feel thoughtful, capable, and genuinely worth remembering.", }, { name: "Eli", lead: "Reading the land, leading the field, and helping a group feel capable and safe.", story: "Eli brings practical leadership across guided hunting, responsible firearm ownership, backcountry survival, land relationships, equipment, construction, and business operations. A father of four, he is patient when people are learning and steady when conditions get difficult. Clients can count on him to set a clear standard, keep the group together, and make demanding outdoor skills feel welcoming.", }, { name: "Bear", lead: "Seeing possibilities others miss—and helping people see themselves in the adventure.", story: "Bear sees possibilities in an RV that others miss—even when it’s already a great rig. He brings the imagination, resourcefulness, and hands-on skill to take it further. His first vision video helped shape Single Shot Adventures beyond hunting, bringing stargazing, family trips, and shared time outdoors into the picture. His gift for connecting with people helps make that vision welcoming: an adventure with room for different interests, different abilities, and time together.", }, { name: "Rigo", lead: "Matching the right desert trail, machine, pace, and preparation to each group.", story: "Rigo grew up in the Southern California desert and understands its terrain, heat, distances, and hidden fun. He shines in guided side-by-side experiences where vehicle readiness, safe operation, route planning, recovery support, and respect for the land all matter. Clients gain a guide who knows how to keep the day exciting without losing sight of preparation or good judgment.", }, { name: "Rosselen", lead: "Listening closely and turning a guest’s needs into a personal, comfortable plan.", story: "Rosselen brings the care, listening skills, and calm judgment she developed in healthcare to every guest conversation. She shines when planning feels complicated or a family needs someone to slow down, understand what matters, and coordinate the details. Clients can expect a steady point of contact who helps the experience feel personal from the first call through the final follow-up.", }, { name: "Shannon", lead: "The trusted home office that keeps the team moving with care, order, and follow-through.", story: "Shannon brings years of business-management experience and a long record of dedication to the family behind Single Shot. She is growing into a leadership role at the home office, keeping records, schedules, priorities, and communication moving while the field team focuses on guests and the work ahead. Clients benefit from that steady presence in the details that are remembered, the questions that reach the right person, and the commitments that do not get lost.", }, { name: "Andrew", lead: "Finding a practical path forward and carrying important work all the way through.", story: "Andrew built his career as a high-level executive in mortgage finance and brings an exceptional memory, remarkable speed, and an ability to see connections across complex situations. Alongside Levi, he is thinking seriously about AI, the future it is creating, and how to use it with purpose. He shines when a challenge needs clarity, resources, and steady follow-through—helping good ideas move from conversation into real, completed work.", }, { name: "Christian “CJ” Matoza", lead: "Helping people build real outdoor confidence one patient, practical skill at a time.", story: "Christian grew up close to the land and the work. He shines beside guests during camping, RVing, hunting, hiking, off-roading, and horseback experiences, where attentiveness matters as much as capability. Clients gain a grounded guide who carries forward strong field knowledge and work ethic while giving people room to learn at a comfortable pace.", }, ]; export default function AboutPage() { return ( Capable people.
One shared standard.} copy="Single Shot brings trusted field leadership, creative experience design, quality equipment, and genuine western hospitality together around the people we serve." image="/images/hero-family-mountains.jpg" imageAlt="A family looking across a rugged mountain landscape" > Email us
{teamMembers.map((member) => (

Where {member.name} shines

{member.name}

{member.lead}

{member.story}

))}
Single Shot branded motorcoach, towable, trucks, Jeep, side-by-sides, quads, and catamaran arranged along the coast Signature fleet • Built to move the whole experience

The equipment behind bigger days

The toys are part of the invitation.

The right rig does more than get people there. It carries the camp, the comfort, the capability, and the freedom to shape a day around the people taking it. Single Shot brings motorcoaches, towables, trucks, Jeeps, side-by-sides, quads, and water access together as tools for bigger stories outside.

The Single Shot standard

What you can expect from us.

{['People before pace','Honest availability','Land and wildlife stewardship','Maintained equipment','Clear communication','Continuous improvement'].map((v)=>

{v}

)}
); } ===== app/plan/page.tsx ===== import type { Metadata } from "next"; import { Hero, Page, SectionHeading, inquiryEmail } from "../components/SiteShell"; export const metadata: Metadata = { title: "Connect With Single Shot", description: "Connect directly with Single Shot Adventures.", alternates: { canonical: "/plan" }, }; export default function PlanPage() { return ( Start with
a conversation.} copy="For questions about Single Shot Adventures, contact Eli directly by email." image="/images/home-rv-glamping-v1.jpg" imageAlt="A refined Single Shot basecamp ready for a private outdoor adventure" />
Email Eli

elimotoza@yahoo.com

Use the email link, or copy the address into your preferred email app. Share your activity of interest, general location, and group size.

Confirm availability and arrangements directly with Eli. This website does not take reservations or payments.

); } ===== app/globals.css ===== :root { --navy: #011925; --navy-2: #05283a; --ink: #10202b; --cream: #eee5d7; --paper: #f7f1e7; --copper: #b96f1f; --gold: #dfa042; --line: rgba(210, 154, 70, .45); --muted: #67747c; --serif: Georgia, "Times New Roman", serif; --sans: Arial, Helvetica, sans-serif; --shadow: 0 20px 60px rgba(0, 18, 29, .18); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.55; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background: radial-gradient(circle at 14% 18%, rgba(194,122,32,.12), transparent 25%), repeating-radial-gradient(ellipse at 20% 10%, transparent 0 28px, rgba(6,46,66,.035) 29px 30px); } .site-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); } .site-page main { flex: 1; background: radial-gradient(circle at 88% 8%, rgba(185,111,31,.08), transparent 26%), repeating-radial-gradient(ellipse at 12% 2%, transparent 0 38px, rgba(5,40,58,.042) 39px 40px), linear-gradient(145deg, #f8f3ea, var(--paper)); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } .skip-link { position: fixed; left: 18px; top: 14px; z-index: 1000; padding: 12px 16px; color: #fff; background: var(--navy); border: 1px solid var(--gold); transform: translateY(-160%); transition: transform .18s ease; } .skip-link:focus { transform: translateY(0); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #f0ad47; outline-offset: 3px; } .page-width { width: min(1400px, calc(100% - 80px)); margin-inline: auto; } .section-pad { padding-block: 68px; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(2, 27, 42, .98); color: #fff; border-bottom: 1px solid rgba(224, 163, 69, .36); backdrop-filter: blur(18px); } .header-inner { width: min(1480px, calc(100% - 56px)); height: 94px; margin: auto; display: flex; align-items: center; gap: 30px; } .brand { display: inline-flex; align-items: center; gap: 13px; flex: 0 0 auto; } .brand-mark { width: 76px; height: 55px; position: relative; color: #f1bd72; border-bottom: 1px solid rgba(241,189,114,.78); display: grid; place-items: center; text-shadow: 0 5px 18px rgba(231,166,66,.2); } .brand-mark-mountain::before { content: ""; position: absolute; inset: 7px 0 0; background: radial-gradient(ellipse at center bottom, rgba(231,166,66,.16), transparent 65%); } .brand-mark-mountain .mountain-mark { width: 72px; height: 44px; } .mountain-mark { --mountain-size: 48px; width: var(--mountain-size); height: calc(var(--mountain-size) * .605); position: relative; display: inline-block; flex: 0 0 auto; color: currentColor; } .mountain-mark svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .mountain-mark-ridgeline { stroke-width: 3.2; } .mountain-mark-ridge { stroke-width: 1.75; opacity: .76; } .mountain-mark-letter { stroke-width: 1.45; opacity: .42; } .mountain-mark-r { opacity: .5; } .mountain-mark-c { opacity: .46; } .mountain-mark-compact { --mountain-size: 38px; transform-origin: center; } .brand-type { display: flex; flex-direction: column; min-width: 168px; } .brand-type strong { font: 24px/1 var(--serif); text-transform: uppercase; letter-spacing: .14em; } .brand-type small { margin-top: 6px; font: 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .46em; color: #e7b568; } .brand-prominent { position: relative; isolation: isolate; gap: 18px; padding-block: 5px; } .brand-prominent::after { content: ""; position: absolute; inset: -8px -20px; z-index: -1; opacity: .72; pointer-events: none; background: radial-gradient(ellipse at 30% 50%, rgba(231,166,66,.12), transparent 66%); } .brand-prominent .brand-mark { width: 94px; height: 68px; color: #f4c27a; filter: drop-shadow(0 7px 18px rgba(231,166,66,.17)); transition: color .22s ease, filter .22s ease, transform .22s ease; } .brand-prominent .brand-mark-mountain .mountain-mark { width: 90px; height: 55px; } .brand-prominent .brand-type { min-width: 224px; transition: transform .22s ease; } .brand-prominent .brand-type strong { font-size: 29px; letter-spacing: .15em; text-shadow: 0 3px 18px rgba(0,0,0,.26); } .brand-prominent .brand-type small { margin-top: 8px; font-size: 11px; letter-spacing: .54em; } .brand-prominent:hover .brand-mark { color: #ffd18e; filter: drop-shadow(0 7px 22px rgba(231,166,66,.3)); transform: translateY(-1px); } .brand-prominent:hover .brand-type { transform: translateX(2px); } .desktop-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.55vw, 29px); } .desktop-nav a { padding-block: 12px; color: rgba(255,255,255,.82); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid transparent; } .desktop-nav a:hover { color: #fff; border-color: var(--gold); } .button { min-height: 48px; padding: 14px 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; text-transform: uppercase; letter-spacing: .11em; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease, border .2s ease; } .button:hover { transform: translateY(-2px); } .button-gold { background: linear-gradient(145deg, #8f5518 0%, #c47a25 48%, #e0a74c 100%); color: #fff; border-color: #edbd70; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 12px 30px rgba(126, 70, 13, .3); } .button-outline { border-color: #dc9126; color: #f7bd67; background: rgba(3,29,44,.22); } .button-dark { background: var(--navy); color: #fff; border-color: var(--navy); } .header-cta { padding-inline: 19px; min-width: 188px; } .mobile-menu { display: none; margin-left: auto; position: relative; z-index: 61; } .mobile-menu-trigger { min-width: 104px; min-height: 54px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #f4c27a; border: 1px solid var(--copper); background: rgba(3,29,44,.76); cursor: pointer; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; } .mobile-menu-trigger:hover { color: #fff; background: rgba(194,122,32,.16); box-shadow: 0 10px 26px rgba(0,0,0,.2); transform: translateY(-1px); } .mobile-menu-icon { width: 17px; display: grid; gap: 4px; } .mobile-menu-icon i { width: 100%; height: 1px; display: block; background: currentColor; transform-origin: center; transition: transform .22s ease, opacity .18s ease; } .mobile-menu.is-open .mobile-menu-trigger { color: var(--navy); background: linear-gradient(135deg, #e9a63f, #f2bf6d); box-shadow: 0 12px 30px rgba(0,0,0,.24); } .mobile-menu.is-open .mobile-menu-icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); } .mobile-menu.is-open .mobile-menu-icon i:nth-child(2) { opacity: 0; } .mobile-menu.is-open .mobile-menu-icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .mobile-menu-backdrop { position: fixed; inset: 94px 0 0; z-index: 58; margin: 0; padding: 0; border: 0; background: rgba(0,14,23,.58); opacity: 0; visibility: hidden; pointer-events: none; cursor: default; backdrop-filter: blur(3px); transition: opacity .22s ease, visibility 0s linear .22s; } .mobile-menu-panel { position: fixed; right: 22px; top: 94px; z-index: 60; width: min(390px, calc(100vw - 44px)); max-height: calc(100dvh - 112px); padding: 20px; display: grid; overflow-y: auto; overscroll-behavior: contain; color: #fff; background: linear-gradient(155deg, #082e45, #021c2b 72%); border: 1px solid rgba(231,166,66,.76); box-shadow: 0 28px 70px rgba(0,10,18,.48); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-14px) scale(.985); transform-origin: top right; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } .mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .mobile-menu.is-open .mobile-menu-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; } .mobile-menu-heading { margin-bottom: 8px; padding: 6px 12px 16px; border-bottom: 1px solid rgba(231,166,66,.48); } .mobile-menu-heading small, .mobile-menu-heading strong { display: block; } .mobile-menu-heading small { color: #e7a642; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .mobile-menu-heading strong { margin-top: 7px; font: 22px/1.05 var(--serif); letter-spacing: .045em; text-transform: uppercase; } .mobile-menu-panel a { min-height: 48px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.11); font-size: 14px; transition: color .18s ease, background .18s ease, padding .18s ease; } .mobile-menu-panel a b { color: #e7a642; font-size: 15px; } .mobile-menu-panel a:hover { padding-inline: 16px 10px; color: #fff; background: rgba(231,166,66,.08); } .mobile-menu-panel .mobile-menu-primary { margin-top: 12px; color: #fff; border: 1px solid #d58d27; background: linear-gradient(135deg, #9c631c, #d89c3d); font-weight: 800; } .mobile-menu-panel .mobile-menu-primary b { color: #fff; } .hero { min-height: 430px; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--navy); color: #fff; border-bottom: 1px solid rgba(231,166,66,.5); } .hero-compact { min-height: 340px; } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-fit-contain .hero-image { object-fit: contain; background: linear-gradient(135deg, #031f30, #011722); } .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,21,34,.94) 0%, rgba(2,23,37,.78) 32%, rgba(2,23,37,.28) 64%, rgba(2,23,37,.08) 100%), linear-gradient(0deg, rgba(1,20,31,.48), transparent 45%); } .hero-content { position: relative; z-index: 1; padding-block: 58px; } .hero-layout-split { min-height: 0; display: grid; grid-template-rows: auto auto; align-items: stretch; } .hero-layout-split .hero-image { position: relative; inset: auto; aspect-ratio: 2.38 / 1; height: auto; min-height: 0; object-fit: contain; } .hero-layout-split .hero-shade { display: none; } .hero-layout-split .hero-content { width: min(1180px, calc(100% - 64px)); padding-block: 42px 48px; } .hero-layout-split .hero-content h1 { max-width: 900px; font-size: clamp(44px, 4.8vw, 72px); } .hero-layout-split .hero-copy { max-width: 820px; } .marine-page .hero-layout-split .hero-image { aspect-ratio: 2.25 / 1; object-fit: cover; } .hero-content h1, .section-heading h2, .split-copy h2, .inquiry-banner h2, .safety-band h2, .dark-section h2, .cream-section h2, .what-next h2, .form-success h2 { margin: 0; font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .035em; } .hero-content h1 { max-width: 790px; font-size: clamp(48px, 5.2vw, 78px); line-height: .96; text-shadow: 0 3px 20px rgba(0,0,0,.22); } .hero-copy { max-width: 670px; margin: 20px 0 0; font-family: var(--serif); font-size: clamp(17px, 1.5vw, 22px); color: rgba(255,255,255,.87); } .eyebrow { margin: 0 0 14px; color: var(--copper); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; } .hero .eyebrow { color: #e0a345; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; } .status-pill { width: fit-content; margin-bottom: 14px; padding: 7px 16px; border: 1px solid var(--gold); border-radius: 999px; background: rgba(1,22,35,.86); color: #fff; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 800; } .section-heading { max-width: 850px; margin-bottom: 42px; } .section-heading.center { margin-inline: auto; text-align: center; } .section-heading h2 { font-size: clamp(36px, 4vw, 62px); line-height: 1.05; color: var(--navy); } .section-heading > p:last-child { max-width: 780px; margin: 20px 0 0; font-size: 17px; color: #5e6a72; } .section-heading.center > p:last-child { margin-inline: auto; } .journey-rail { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 0%, rgba(194,122,32,.18), transparent 28%), repeating-radial-gradient(ellipse at 8% 20%, transparent 0 34px, rgba(231,166,66,.035) 35px 36px), linear-gradient(135deg, #062a3b, #021a29); border-block: 1px solid rgba(231,166,66,.42); } .journey-rail-inner { padding-block: 34px; display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 2.28fr); gap: 34px; align-items: stretch; } .journey-rail-intro { padding-right: 28px; border-right: 1px solid rgba(231,166,66,.32); } .journey-rail-intro .eyebrow { margin-bottom: 7px; color: #e7a642; } .journey-rail-intro h2 { margin: 0; color: #fff; font: 30px/1.05 var(--serif); text-transform: uppercase; letter-spacing: .045em; } .journey-rail-intro > p:last-child { margin: 10px 0 0; color: rgba(255,255,255,.6); font-size: 11px; } .journey-rail-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .journey-link { min-height: 126px; padding: 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #fff; border: 1px solid rgba(231,166,66,.32); background: rgba(255,255,255,.035); transition: transform .2s ease, border-color .2s ease, background .2s ease; } .journey-link:hover { transform: translateY(-3px); border-color: #e7a642; background: rgba(231,166,66,.09); } .journey-medallion { width: 42px; height: 42px; display: grid; place-items: center; color: #f0b75f; border: 1px solid rgba(231,166,66,.62); background: rgba(231,166,66,.07); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); } .journey-medallion .mountain-mark { transform: scale(.52); } .journey-link > span:nth-child(2) { display: grid; gap: 5px; } .journey-link strong { font: 15px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .065em; } .journey-link small { color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.35; } .journey-link > b { color: #e7a642; font-size: 18px; } .experience-preview { width: 100%; max-width: none; padding: 38px max(32px, calc((100vw - 1400px) / 2)) 52px; background: radial-gradient(circle at 80% 0%, rgba(198,129,38,.16), transparent 30%), var(--navy); color: #fff; } .experience-preview .section-heading { margin-bottom: 28px; } .experience-preview .section-heading > p:last-child { margin-top: 14px; color: rgba(255,255,255,.68); } .experience-preview .section-heading h2 { color: #fff; } .image-card-grid { display: grid; gap: 20px; } .image-card-grid.five { grid-template-columns: repeat(5, 1fr); } .image-card-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .image-card-grid.four { grid-template-columns: repeat(4, 1fr); } .image-card { min-height: 275px; position: relative; overflow: hidden; border: 1px solid rgba(203,136,44,.78); background: var(--navy); color: #fff; box-shadow: 0 10px 35px rgba(0,18,29,.16); } .image-card-media { position: absolute; inset: 0; display: block; overflow: hidden; background: #031b29; } .image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .image-card-fit-contain img { object-fit: contain; } .image-card:hover img { transform: scale(1.04); } .image-card-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1,22,35,.99), rgba(1,22,35,.05) 62%); } .image-card-copy { position: absolute; inset: auto 22px 22px; display: grid; gap: 7px; } .image-card-tag { width: fit-content; padding: 4px 8px; border: 1px solid var(--gold); color: #f4bd68; background: rgba(2,24,38,.78); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; } .image-card-copy strong { font: 23px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .04em; } .image-card-description { font-size: 12px; color: rgba(255,255,255,.72); } .image-card-action { margin-top: 9px; padding-top: 10px; display: flex; justify-content: space-between; color: #efb965; border-top: 1px solid rgba(231,166,66,.25); text-transform: uppercase; letter-spacing: .08em; font-size: 9px !important; font-weight: 800; } .image-card-action b { font-size: 14px; } .image-card-brand { display: none; align-items: center; gap: 10px; color: #efb965; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 700; } .image-card-brand > span:not(.mountain-mark) { display: grid; line-height: 1; } .image-card-brand small { margin-top: 3px; color: rgba(239,185,101,.7); font-size: 7px; letter-spacing: .18em; } .image-card-editorial { min-height: 0; display: grid; grid-template-rows: auto 1fr; } .image-card-editorial .image-card-media { position: relative; inset: auto; aspect-ratio: 16 / 9; } .image-card-editorial .image-card-media img { object-position: center; } .image-card-editorial .image-card-copy { position: relative; inset: auto; min-height: 168px; padding: 20px 24px 24px; align-content: start; background: linear-gradient(135deg, #062a3b, #031b29); border-top: 1px solid rgba(203,136,44,.5); } .image-card-editorial .image-card-brand { display: flex; } .image-card-editorial .image-card-tag { position: absolute; top: 20px; right: 24px; } .image-card-editorial .image-card-copy strong { margin-top: 6px; padding-right: 8px; font-size: clamp(22px, 1.75vw, 31px); } .image-card-editorial .image-card-description { max-width: 60ch; font-size: 14px; line-height: 1.45; } .image-card-multi .image-card-copy { min-height: 230px; } .image-card-paths { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .image-card-paths a { min-height: 44px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f2c17b; border: 1px solid rgba(231,166,66,.46); background: rgba(255,255,255,.035); font-size: 11px; font-weight: 700; letter-spacing: .035em; transition: background .2s ease, border-color .2s ease; } .image-card-paths a:hover { background: rgba(231,166,66,.12); border-color: #e7a642; } .catalog-grid .image-card { min-height: 300px; } .experiences-page main { background: radial-gradient(circle at 86% 9%, rgba(213,142,48,.16), transparent 30%), repeating-radial-gradient(ellipse at 15% 4%, transparent 0 42px, rgba(223,160,66,.04) 43px 44px), linear-gradient(145deg, #00131e 0%, var(--navy) 52%, #021c2b 100%); } .experiences-page .hero-shade { background: linear-gradient(90deg, rgba(0,14,23,.98) 0%, rgba(2,25,38,.86) 40%, rgba(2,25,38,.36) 74%, rgba(1,16,25,.18) 100%), linear-gradient(0deg, rgba(0,13,21,.68), transparent 56%); } .experiences-page #core-experiences { width: 100%; max-width: none; padding-inline: max(32px, calc((100vw - 1400px) / 2)); color: #fff; background: radial-gradient(circle at 14% 10%, rgba(223,160,66,.14), transparent 28%), repeating-radial-gradient(ellipse at 90% 8%, transparent 0 46px, rgba(255,255,255,.022) 47px 48px), linear-gradient(145deg, rgba(0,19,30,.99), rgba(1,25,37,.98)); border-block: 1px solid rgba(231,166,66,.42); } .experiences-page #core-experiences .section-heading h2 { color: #fff; } .experiences-page #core-experiences .section-heading > p:last-child { color: rgba(255,255,255,.76); } .experiences-page .experiences-catalog-grid .image-card { box-shadow: 0 24px 55px rgba(0,8,14,.38); } .self-guided-band { padding-block: 48px; color: #fff; background: radial-gradient(circle at 82% 12%, rgba(223,160,66,.2), transparent 28%), repeating-radial-gradient(ellipse at 10% 18%, transparent 0 36px, rgba(231,166,66,.035) 37px 38px), linear-gradient(135deg, #062a3b, #011925 70%); border-block: 1px solid rgba(231,166,66,.52); } .self-guided-inner { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 32px; } .self-guided-mark { width: 74px; height: 74px; display: grid; place-items: center; color: #efb965; border: 1px solid rgba(231,166,66,.7); background: rgba(231,166,66,.07); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); } .self-guided-mark .mountain-mark { --mountain-size: 48px; } .self-guided-copy { max-width: 860px; } .self-guided-copy .eyebrow { margin-bottom: 8px; color: #e7a642; } .self-guided-copy h2 { margin: 0; color: #fff; font: clamp(32px, 3.2vw, 48px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: .035em; } .self-guided-copy p:not(.eyebrow) { max-width: 820px; margin: 15px 0 0; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.6; } .self-guided-copy p:last-child { color: rgba(255,255,255,.9); font-weight: 700; } .self-guided-inner > .button { min-width: 270px; } .steps { position: relative; isolation: isolate; padding-block: clamp(48px, 5.5vw, 78px); overflow: hidden; color: #fff; background: linear-gradient(90deg, rgba(1, 23, 36, .94) 0%, rgba(2, 31, 46, .84) 48%, rgba(2, 28, 43, .76) 100%), url("/images/home-four-cs-livermore-hills-v1.jpg") center 48% / cover no-repeat; border-block: 1px solid rgba(231,166,66,.48); } .steps::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(1,18,29,.36), transparent 48%); } .steps-intro { margin-bottom: 28px; } .steps-intro .eyebrow { margin-bottom: 5px; } .steps-intro > p:last-child { max-width: 52rem; margin: 4px 0 0; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(2,25,39,.54); border: 1px solid rgba(231,166,66,.35); backdrop-filter: blur(4px); } .step { min-height: 150px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 18px; border-right: 1px solid rgba(231,166,66,.32); } .step:last-child { border: 0; } .step > span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: #f3bd6e; background: radial-gradient(circle, rgba(231,166,66,.18), rgba(2,28,43,.22) 65%); border: 1px solid rgba(231,166,66,.64); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); box-shadow: 0 8px 20px rgba(0,0,0,.2); } .step-medallion .mountain-mark { transform: scale(.62); } .step h3 { margin: 0 0 7px; color: #fff; font: 20px var(--serif); text-transform: uppercase; letter-spacing: .08em; } .step p { margin: 0; color: rgba(255,255,255,.75); font-size: 12px; } .split-story { width: 100%; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr); gap: 0; align-items: stretch; overflow: hidden; color: #fff; background: radial-gradient(circle at 90% 15%, rgba(194,122,32,.2), transparent 32%), var(--navy); border-block: 1px solid rgba(231,166,66,.42); } .split-photo { min-height: 0; overflow: hidden; display: flex; align-items: center; background: #011722; box-shadow: none; } .split-photo img { display: block; width: 100%; height: auto; object-fit: contain; } .split-copy { padding: clamp(42px, 5.5vw, 84px); display: flex; flex-direction: column; justify-content: center; } .split-copy > * { width: 100%; max-width: 720px; } .split-copy h2 { font-size: clamp(40px, 4.8vw, 70px); line-height: 1.02; color: #fff; } .split-copy > p:not(.eyebrow) { color: rgba(255,255,255,.73); font-size: 17px; } .mini-stats { margin: 30px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .mini-stats span { padding: 18px 0; border-block: 1px solid rgba(231,166,66,.38); font-size: 11px; color: rgba(255,255,255,.6); } .mini-stats b { display: block; color: #fff; font: 16px var(--serif); } .text-link { color: #99621e; font-weight: 700; } .split-copy .text-link { color: #efb965; } .safety-band { background: #f7f3ed; padding-block: 36px; border-block: 1px solid rgba(11,39,53,.18); } .safety-grid { display: grid; grid-template-columns: auto 1.25fr 1fr auto; align-items: center; gap: 28px; } .safety-seal { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #9d691e; color: #9d691e; clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%); background: rgba(194,122,32,.04); } .safety-seal .mountain-mark { transform: scale(.9); } .safety-grid h2 { font-size: 34px; color: var(--navy); text-transform: none; } .safety-grid p { color: var(--muted); font-size: 13px; } .inquiry-banner { min-height: 255px; display: flex; align-items: center; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(198,129,38,.24), transparent 35%), repeating-radial-gradient(ellipse at 80% 25%, transparent 0 34px, rgba(231,166,66,.04) 35px 36px), linear-gradient(135deg, #06283a, #021a29); } .inquiry-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; } .inquiry-banner-inner > div { max-width: 850px; } .inquiry-banner h2 { font-size: clamp(38px, 4vw, 62px); } .inquiry-banner p:not(.eyebrow) { max-width: 700px; color: rgba(255,255,255,.72); } .cream-section { background: repeating-radial-gradient(ellipse at 18% 10%, transparent 0 34px, rgba(6,46,66,.025) 35px 36px), var(--cream); } .desert-rental-section { position: relative; isolation: isolate; scroll-margin-top: 94px; overflow: hidden; color: #fff; background: radial-gradient(circle at 86% 0%, rgba(194,122,32,.16), transparent 28%), linear-gradient(145deg, #042538, #011925 70%); border-block: 1px solid rgba(231,166,66,.58); } .desert-rental-landscape { width: 100%; max-height: 620px; aspect-ratio: 1672 / 941; display: block; object-fit: cover; object-position: center; border-bottom: 1px solid rgba(231,166,66,.58); } .desert-rental-content { padding-block: clamp(52px, 6vw, 82px); } .desert-rental-intro { margin-bottom: 38px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: end; gap: 40px; } .desert-rental-section .section-heading { margin: 0; } .desert-rental-section .section-heading h2 { color: #fff; } .desert-rental-section .section-heading > p:last-child { color: rgba(255,255,255,.82); } .desert-rental-contact { padding: 26px; background: rgba(2,25,39,.78); border: 1px solid rgba(231,166,66,.54); box-shadow: 0 22px 48px rgba(0,10,16,.28); backdrop-filter: blur(6px); } .desert-rental-contact p { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.58; } .desert-rental-contact p + p { margin-top: 14px; } .desert-rental-contact strong { color: #fff; } .desert-rental-contact .button { margin-top: 22px; } .desert-rental-section .offering-card { background: radial-gradient(circle at 90% 4%, rgba(194,122,32,.22), transparent 31%), linear-gradient(145deg, rgba(7,48,71,.94), rgba(3,27,41,.97)); box-shadow: 0 22px 55px rgba(0,8,14,.38); backdrop-filter: blur(6px); } .dark-section { background: radial-gradient(circle at 86% 8%, rgba(194,122,32,.16), transparent 30%), repeating-radial-gradient(ellipse at 15% 10%, transparent 0 34px, rgba(231,166,66,.035) 35px 36px), var(--navy); color: #fff; } .dark-section .section-heading h2, .dark-section h2 { color: #fff; } .dark-section .section-heading > p:last-child { color: rgba(255,255,255,.68); } .family-safety-standard { padding-block: 34px; color: #fff; background: radial-gradient(circle at 82% 0%, rgba(194,122,32,.18), transparent 30%), linear-gradient(135deg, #062a3b, #021a29); border-block: 1px solid rgba(231,166,66,.42); } .family-safety-standard > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 28px; align-items: center; } .family-safety-standard > div > .mountain-mark { width: 92px; height: 64px; color: #efb965; } .family-safety-standard .eyebrow { margin-bottom: 6px; } .family-safety-standard h2 { margin: 0; color: #fff; font: clamp(28px, 3vw, 42px)/1.05 var(--serif); text-transform: uppercase; } .family-safety-standard p:last-child { max-width: 980px; margin: 10px 0 0; color: rgba(255,255,255,.72); } .offering-grid { display: grid; gap: 18px; } .offering-grid.three { grid-template-columns: repeat(3, 1fr); } .offering-grid.four { grid-template-columns: repeat(4, 1fr); } .offering-grid.five { grid-template-columns: repeat(5, 1fr); } .offering-card { min-height: 390px; position: relative; padding: 28px; display: flex; flex-direction: column; color: #fff; background: radial-gradient(circle at 90% 4%, rgba(194,122,32,.18), transparent 31%), linear-gradient(145deg, #073047, #031b29); border: 1px solid rgba(203,136,44,.72); box-shadow: 0 18px 48px rgba(0,18,29,.17); transition: transform .2s ease, border-color .2s ease; } .offering-card:hover { transform: translateY(-4px); border-color: #e7a642; } .offering-card-brand { margin-bottom: 22px; display: flex; align-items: center; gap: 10px; color: #efb965; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 700; } .offering-card-brand > span { display: grid; line-height: 1; } .offering-card-brand small { margin-top: 3px; color: rgba(239,185,101,.7); font-size: 7px; letter-spacing: .18em; } .offering-card h3 { margin: 0; font: 28px/1.08 var(--serif); text-transform: uppercase; letter-spacing: .05em; color: #fff; } .offering-card .offering-lead { margin: 22px 0 5px; font: 29px var(--serif); color: #efb965; } .offering-card .meta { margin: 0 0 16px; color: rgba(255,255,255,.56); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; } .offering-card > p:not(.offering-lead):not(.meta) { margin-bottom: 0; color: rgba(255,255,255,.68); font-size: 13px; } .card-tag { position: absolute; right: 16px; top: 16px; padding: 5px 8px; color: #f0b75f; background: rgba(2,24,38,.72); border: 1px solid #c38635; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } .card-link { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(231,166,66,.3); color: #efb965; text-transform: uppercase; letter-spacing: .07em; font-size: 10px; font-weight: 800; } .card-link b { font-size: 15px; } .fine-print { margin: 28px 0 0; font-size: 11px; color: var(--muted); } .addon-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .addon-group { min-height: 310px; padding: 30px; border: 1px solid rgba(231,166,66,.44); background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.018)); box-shadow: 0 18px 44px rgba(0,0,0,.16); } .addon-group > .mountain-mark { color: var(--gold); } .addon-group h3 { margin: 25px 0 16px; color: #fff; font: 26px/1.08 var(--serif); text-transform: uppercase; letter-spacing: .04em; } .addon-group ul { margin: 0; padding: 0; list-style: none; } .addon-group li { position: relative; padding: 9px 0 9px 22px; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(231,166,66,.16); font-size: 13px; } .addon-group li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); } .custom-experience-action { margin-top: 28px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid rgba(231,166,66,.34); } .custom-experience-action p { max-width: 760px; margin: 0; color: rgba(255,255,255,.67); } .feature-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .family-activity-grid { align-items: start; } .feature-row article { padding: 30px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,240,230,.92)); } .feature-row article > .mountain-mark, .readiness-item > .mountain-mark, .values-grid .mountain-mark { color: var(--copper); } .feature-row article > span { color: var(--copper); font: 14px var(--serif); } .feature-row h3 { margin: 22px 0 10px; font: 24px var(--serif); text-transform: uppercase; } .feature-row p { margin: 0; color: var(--muted); font-size: 14px; } .popup-showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .field-kit-section { background: radial-gradient(circle at 86% 4%, rgba(194,122,32,.16), transparent 30%), repeating-radial-gradient(ellipse at 14% 8%, transparent 0 34px, rgba(231,166,66,.035) 35px 36px), var(--navy); } .field-kit-section .section-heading h2 { color: #fff; } .field-kit-section .section-heading > p:last-child { color: rgba(255,255,255,.7); } .field-kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field-kit-grid .popup-showcase-card { color: #fff; border-color: rgba(231,166,66,.62); background: linear-gradient(145deg, #073047, #031b29); } .field-kit-grid .popup-showcase-copy > strong { color: #fff; } .field-kit-grid .popup-showcase-copy > span:not(.popup-showcase-brand) { color: rgba(255,255,255,.68); } .field-kit-grid .popup-showcase-copy > small, .field-kit-grid .popup-showcase-copy > b, .field-kit-grid .popup-showcase-brand { color: #efb965; } .field-kit-grid .popup-showcase-copy > b { border-color: rgba(231,166,66,.3); } .fleet-partners-section { background: radial-gradient(circle at 10% 15%, rgba(194,122,32,.1), transparent 30%), repeating-radial-gradient(ellipse at 86% 18%, transparent 0 40px, rgba(2,39,58,.035) 41px 42px), var(--paper); } .fleet-partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .fleet-partner-card { min-width: 0; overflow: hidden; border: 1px solid rgba(156,101,29,.42); background: rgba(255,255,255,.92); box-shadow: 0 20px 48px rgba(10,31,43,.1); } .fleet-partner-logo { position: relative; height: 210px; overflow: hidden; border-bottom: 1px solid rgba(156,101,29,.3); } .fleet-partner-logo img { display: block; width: 100%; height: 100%; object-fit: contain; } .fleet-partner-logo-edm { background: #fff; } .fleet-partner-logo-edm img { height: auto; position: absolute; top: 50%; transform: translateY(-50%); } .fleet-partner-logo-left-coast { padding: 18px 22px; background: #fff; } .fleet-partner-logo-left-coast img { transform: scale(1.08); } .fleet-partner-copy { padding: 30px 32px 34px; } .fleet-partner-copy .eyebrow { margin-bottom: 12px; } .fleet-partner-copy h3 { margin: 0; color: var(--navy); font: 30px/1.08 var(--serif); letter-spacing: .04em; text-transform: uppercase; } .fleet-partner-copy > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; } .popup-showcase-card { min-width: 0; padding: 0; overflow: hidden; color: var(--ink); border: 1px solid rgba(156,101,29,.42); background: linear-gradient(150deg, rgba(255,255,255,.99), rgba(246,238,226,.94)); box-shadow: 0 18px 42px rgba(10,31,43,.09); cursor: pointer; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .popup-showcase-card:hover { border-color: #b4701b; box-shadow: 0 24px 58px rgba(10,31,43,.15); transform: translateY(-3px); } .popup-showcase-media { position: relative; height: 190px; display: block; overflow: hidden; background: var(--navy); } .popup-showcase-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,28,43,.52), transparent 62%); pointer-events: none; } .popup-showcase-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .popup-showcase-card:hover .popup-showcase-media > img { transform: scale(1.025); } .popup-showcase-number { position: absolute; z-index: 2; right: 15px; bottom: 13px; color: #fff; font-size: 12px; letter-spacing: .18em; } .popup-showcase-copy { min-height: 250px; padding: 24px; display: flex; flex-direction: column; } .popup-showcase-brand { color: var(--copper); } .popup-showcase-copy > small { margin-top: 14px; color: #9d6318; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .popup-showcase-copy > strong { margin: 5px 0 10px; color: var(--navy); font: 26px/1.05 var(--serif); letter-spacing: .035em; text-transform: uppercase; } .popup-showcase-copy > span:not(.popup-showcase-brand) { color: var(--muted); font-size: 13px; line-height: 1.55; } .popup-showcase-copy > b { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; color: #9d6318; border-top: 1px solid rgba(156,101,29,.24); font-size: 9px; font-style: normal; letter-spacing: .09em; text-transform: uppercase; } .popup-showcase-copy > b i { font: normal 22px/1 var(--sans); } .showcase-dialog { width: min(980px, calc(100vw - 40px)); max-height: min(780px, calc(100dvh - 40px)); margin: auto; padding: 0; overflow: auto; color: var(--ink); border: 1px solid #c88932; background: var(--paper); box-shadow: 0 38px 100px rgba(0,12,20,.55); } .showcase-dialog::backdrop { background: rgba(0,15,24,.76); backdrop-filter: blur(5px); } .showcase-dialog-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); min-height: 520px; } .showcase-dialog-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(231,166,66,.7); background: rgba(2,28,43,.88); cursor: pointer; font-size: 26px; line-height: 1; } .showcase-dialog-media { min-height: 520px; overflow: hidden; background: var(--navy); } .showcase-dialog-media > img { width: 100%; height: 100%; object-fit: cover; } .showcase-dialog-copy { align-content: center; padding: clamp(34px, 5vw, 68px); background: radial-gradient(circle at 100% 0, rgba(231,166,66,.12), transparent 34%), var(--paper); } .showcase-dialog-copy h2 { margin: 0; color: var(--navy); font: clamp(38px, 5vw, 62px)/.98 var(--serif); letter-spacing: .035em; text-transform: uppercase; } .showcase-dialog-copy > p:not(.eyebrow) { margin: 24px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.75; } .showcase-code-visual { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 190px; display: grid; place-items: center; overflow: hidden; color: #f2bd6c; background: radial-gradient(circle at 50% 28%, rgba(231,166,66,.18), transparent 33%), repeating-radial-gradient(ellipse at 18% 10%, transparent 0 26px, rgba(231,166,66,.055) 27px 28px), #032639; } .showcase-code-visual > small { position: absolute; right: 16px; bottom: 13px; color: rgba(255,255,255,.72); font-size: 8px; font-weight: 800; letter-spacing: .14em; } .remote-work-table { position: relative; width: 78%; height: 62%; border-bottom: 6px solid #8d5b24; } .remote-work-screen { position: absolute; left: 18%; bottom: 10px; width: 58%; height: 72%; padding: 15px; display: grid; place-items: center; color: #f3c37b; border: 4px solid #182a32; border-bottom-width: 11px; background: linear-gradient(145deg, #0a3d55, #031c2b); box-shadow: 0 10px 22px rgba(0,0,0,.34); text-align: center; } .remote-work-screen::after { content: ""; position: absolute; left: -9%; right: -9%; bottom: -18px; height: 9px; background: #a9a197; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); } .remote-work-screen i { font: normal 18px/1 var(--serif); letter-spacing: .12em; } .remote-work-screen b { font-size: 6px; letter-spacing: .1em; } .remote-work-map { position: absolute; left: 0; bottom: 11px; width: 22%; height: 34%; background: repeating-linear-gradient(35deg, #d5c4a7 0 5px, #c5b18f 6px 7px); transform: rotate(-7deg); } .remote-work-mug { position: absolute; right: 3%; bottom: 10px; width: 21%; aspect-ratio: 1; display: grid; place-items: center; color: #efb965; border: 3px solid #efb965; border-radius: 0 0 45% 45%; font: 10px var(--serif); } .field-goods-visual { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding-inline: 12%; } .field-goods-hat { position: relative; width: 100%; height: 74px; border-radius: 52% 52% 18% 18%; background: linear-gradient(#8d5e33, #5e3820); transform: rotate(-4deg); } .field-goods-hat::after { content: ""; position: absolute; left: -18%; right: -18%; bottom: -6px; height: 18px; border-radius: 50%; background: #6f4326; } .field-goods-hat i { position: absolute; left: 28%; right: 28%; bottom: 14px; height: 7px; background: #d79a3e; } .field-goods-jacket { position: relative; width: 88%; height: 120px; margin: auto; border-radius: 28% 28% 10% 10%; background: linear-gradient(145deg, #263d3b, #122a2c); clip-path: polygon(26% 0, 42% 11%, 58% 11%, 74% 0, 96% 19%, 82% 100%, 18% 100%, 4% 19%); } .field-goods-jacket i { position: absolute; top: 42%; left: 50%; width: 44px; height: 44px; display: grid; place-items: center; color: #e7a642; border: 1px solid #e7a642; border-radius: 50%; transform: translate(-50%, -50%); } .field-goods-jacket .mountain-mark { transform: scale(.72); } .field-goods-patch { width: 78px; aspect-ratio: 1; margin: auto; display: grid; place-items: center; color: #efb965; border: 4px solid #c88932; background: #073047; clip-path: polygon(50% 0, 95% 23%, 95% 76%, 50% 100%, 5% 76%, 5% 23%); } .field-goods-patch .mountain-mark { transform: scale(1.08); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .two-col h2 { font-size: clamp(38px, 4vw, 58px); line-height: 1.05; } .badge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .adventure-badge { --badge-accent: #e7a642; position: relative; isolation: isolate; min-height: 176px; padding: 24px 15px 26px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #fff; background: linear-gradient(140deg, rgba(255,255,255,.05), transparent 35%), repeating-linear-gradient(4deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,.035) 1px 3px), radial-gradient(circle at 50% 27%, color-mix(in srgb, var(--badge-accent) 34%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--badge-accent) 20%, #173c3d), #031c2b 74%); border: 4px solid var(--badge-accent); box-shadow: inset 0 0 0 3px rgba(2,28,43,.9), inset 0 0 0 5px color-mix(in srgb, var(--badge-accent) 45%, transparent); filter: drop-shadow(0 13px 20px rgba(0,0,0,.24)); } .adventure-badge::before { content: ""; position: absolute; z-index: -1; inset: 10px; border: 2px dashed color-mix(in srgb, var(--badge-accent) 76%, #f4e6d2); opacity: .9; pointer-events: none; } .adventure-badge::after { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .34; background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.04) 3px 4px); pointer-events: none; } .adventure-badge:nth-child(3n + 1) { transform: rotate(-.7deg); } .adventure-badge:nth-child(3n + 2) { transform: rotate(.6deg); } .adventure-badge:nth-child(3n) { transform: rotate(-.25deg); } .adventure-badge:nth-child(1) { --badge-accent: #d4a13f; } .adventure-badge:nth-child(2) { --badge-accent: #6f93a9; } .adventure-badge:nth-child(3) { --badge-accent: #b95e3f; } .adventure-badge:nth-child(4) { --badge-accent: #568d7b; } .adventure-badge:nth-child(5) { --badge-accent: #a67685; } .adventure-badge:nth-child(6) { --badge-accent: #727da6; } .adventure-badge:nth-child(7) { --badge-accent: #bd8145; } .adventure-badge:nth-child(8) { --badge-accent: #c15f43; } .adventure-badge:nth-child(9) { --badge-accent: #5b8d84; } .badge-round, .badge-round::before { border-radius: 50%; } .badge-shield, .badge-shield::before { clip-path: polygon(8% 0, 92% 0, 100% 70%, 50% 100%, 0 70%); } .badge-hex, .badge-hex::before { clip-path: polygon(50% 0, 96% 23%, 96% 77%, 50% 100%, 4% 77%, 4% 23%); } .badge-arch, .badge-arch::before { border-radius: 50% 50% 18% 18% / 35% 35% 15% 15%; } .adventure-badge-icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--badge-accent); } .adventure-badge-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(255,255,255,.28)); } .adventure-badge small { margin-top: 6px; color: color-mix(in srgb, var(--badge-accent) 78%, white); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .adventure-badge strong { max-width: 118px; margin-top: 6px; color: #fff; font: 14px/1.08 var(--serif); letter-spacing: .04em; text-transform: uppercase; } .family-promise img, .camp-table img, .fleet-story img, .marine-details img, .offgrid-feature img { width: 100%; min-height: 460px; object-fit: cover; box-shadow: var(--shadow); } .family-promise img { min-height: 0; aspect-ratio: 16 / 10; object-position: center 60%; } .offgrid-feature img { min-height: 0; aspect-ratio: 16 / 10; object-position: center 62%; } .fleet-story .fleet-story-image { min-height: 0; aspect-ratio: 2 / 1; object-fit: contain; background: var(--navy); } .field-ai-band { padding-block: 54px; color: #fff; background: linear-gradient(120deg, #092f3f, #021c2b 65%); border-block: 1px solid rgba(231,166,66,.48); } .field-ai-inner { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr); gap: clamp(38px, 7vw, 96px); align-items: center; } .field-ai-mark { aspect-ratio: 1; display: grid; place-items: center; align-content: center; color: #efb965; border: 1px solid rgba(231,166,66,.74); background: radial-gradient(circle, rgba(231,166,66,.15), transparent 64%); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); } .field-ai-mark span { font: clamp(58px, 7vw, 104px)/.82 var(--serif); } .field-ai-mark small { margin-top: 12px; font-size: 8px; font-weight: 800; letter-spacing: .2em; } .field-ai-inner h2 { margin: 0; max-width: 920px; color: #fff; font: clamp(34px, 4vw, 56px)/1.03 var(--serif); text-transform: uppercase; letter-spacing: .035em; } .field-ai-inner p:not(.eyebrow) { max-width: 900px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.75; } .field-ai-inner .text-link { display: inline-flex; margin-top: 8px; color: #efb965; } .try-before-buy-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid rgba(231,166,66,.45); box-shadow: var(--shadow); } .try-before-buy-feature > div:first-child > p:not(.eyebrow) { color: rgba(255,255,255,.7); } .check-list { margin: 26px 0 0; padding: 0; list-style: none; } .check-list li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid rgba(156,101,29,.22); } .check-list li::before { content: "✓"; position: absolute; left: 0; color: #a96d21; font-weight: 800; } .trust-strip { background: var(--navy-2); color: #fff; border-block: 1px solid rgba(224,163,69,.35); } .trust-strip > div { display: grid; grid-template-columns: repeat(4,1fr); } .trust-strip div div { padding: 25px; border-right: 1px solid rgba(224,163,69,.25); } .trust-strip strong, .trust-strip span { display: block; } .trust-strip strong { font: 17px var(--serif); text-transform: uppercase; letter-spacing: .04em; } .trust-strip span { margin-top: 6px; color: rgba(255,255,255,.64); font-size: 11px; } .day-flow { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; } .day-flow ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5,1fr); } .day-flow li { padding: 20px; border-left: 1px solid rgba(224,163,69,.35); } .day-flow b, .day-flow span { display: block; } .day-flow b { color: var(--gold); font: 15px var(--serif); text-transform: uppercase; } .day-flow span { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.65); } .price-callout { font: 27px var(--serif); color: #8e581b; } .readiness-grid { display: grid; grid-template-columns: 1.35fr repeat(5, .65fr); gap: 14px; align-items: stretch; } .readiness-item { padding: 24px 16px; border-left: 1px solid rgba(224,163,69,.4); } .readiness-item span { color: var(--gold); font: 14px var(--serif); } .readiness-item p { font: 15px var(--serif); } .road-note { max-width: 1100px; } .occasion-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .occasion-grid article { padding: 30px; border: 1px solid var(--line); } .occasion-grid span { color: var(--copper); } .occasion-grid h3 { margin: 14px 0 8px; font: 23px var(--serif); text-transform: uppercase; } .occasion-grid p { color: var(--muted); font-size: 14px; } .partner-band { padding-block: 24px; background: var(--navy); color: #fff; border-block: 1px solid var(--copper); } .partner-band > div { display: flex; justify-content: center; gap: 24px; text-align: center; } .partner-band strong { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } .partner-band span { font-size: 11px; color: rgba(255,255,255,.7); } .family-story { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 46px; margin-bottom: 18px; padding: 38px 42px; border: 1px solid rgba(224,163,69,.55); background: radial-gradient(circle at 92% 8%, rgba(231,166,66,.16), transparent 28%), linear-gradient(135deg, #081f30, var(--navy-2)); color: #fff; box-shadow: 0 20px 48px rgba(0,18,29,.14); } .family-story-heading > span { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; } .family-story h3 { margin: 18px 0 0; font: clamp(30px, 3.5vw, 48px)/1.08 var(--serif); text-transform: uppercase; letter-spacing: .035em; } .family-story-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-left: 34px; border-left: 1px solid rgba(224,163,69,.35); } .family-story-copy p { margin: 0; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.78; } .team-profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .team-profile { min-height: 330px; position: relative; isolation: isolate; overflow: hidden; padding: 34px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.965), rgba(244,237,226,.92)), url("/images/hero-family-mountains.jpg") center 44% / cover; box-shadow: 0 16px 42px rgba(0,18,29,.07); } .team-profile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-radial-gradient(ellipse at 104% 4%, transparent 0 28px, rgba(6,46,66,.045) 29px 30px), linear-gradient(120deg, transparent 58%, rgba(194,122,32,.09)); } .team-profile::after { content: ""; position: absolute; right: -118px; bottom: -155px; z-index: -1; width: 280px; height: 280px; border: 1px solid rgba(194,122,32,.17); transform: rotate(45deg); } .team-profile:nth-child(4n+2), .team-profile:nth-child(4n+3) { background: linear-gradient(145deg, rgba(248,244,237,.97), rgba(235,239,238,.91)), url("/images/hero-family-mountains.jpg") center 56% / cover; } .team-profile-heading, .team-profile-story { position: relative; z-index: 1; } .team-profile-mark { position: absolute; top: 27px; right: 28px; z-index: 0; color: var(--copper); opacity: .16; transform: scale(1.55); transform-origin: top right; } .team-profile-featured { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.42fr); gap: 50px; padding: 46px; background: radial-gradient(circle at 85% 15%, rgba(231,166,66,.12), transparent 30%), linear-gradient(135deg, var(--navy-2), #082d47); border-color: rgba(224,163,69,.55); color: #fff; box-shadow: 0 24px 58px rgba(0,18,29,.18); } .team-profile h3 { margin: 0 0 16px; font: 38px var(--serif); text-transform: uppercase; } .team-profile p { color: var(--muted); font-size: 14px; line-height: 1.75; } .team-profile-kicker { margin: 0 0 10px; color: var(--copper) !important; font-size: 10px !important; font-weight: 800; letter-spacing: .16em; line-height: 1.35 !important; text-transform: uppercase; } .team-profile-lead { color: var(--ink) !important; font-family: var(--serif); font-size: 19px !important; line-height: 1.45 !important; } .team-profile-story p + p { margin-top: 18px; } .team-profile-featured h3 { font-size: clamp(44px, 6vw, 68px); } .team-profile-featured p { color: rgba(255,255,255,.72); } .team-profile-featured .team-profile-lead { color: #fff !important; } .network-asset { display: grid; grid-template-columns: minmax(220px, .65fr) repeat(2, minmax(0, 1fr)); gap: 34px; margin-top: 18px; padding: 38px 42px; border: 1px solid rgba(224,163,69,.55); background: radial-gradient(circle at 90% 10%, rgba(224,163,69,.13), transparent 30%), linear-gradient(135deg, var(--navy-2), #082d47); color: #fff; box-shadow: 0 24px 58px rgba(0,18,29,.18); } .network-asset .eyebrow { grid-column: 1 / -1; margin: 0; } .network-asset h3 { margin: 0; font: clamp(28px, 3vw, 42px)/1.08 var(--serif); text-transform: uppercase; } .network-asset > p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.78; } .team-legacy { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 46px; margin-top: 18px; padding: 38px 42px; border: 1px solid rgba(224,163,69,.45); background: radial-gradient(circle at 10% 0, rgba(231,166,66,.13), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,243,235,.96)); box-shadow: 0 18px 46px rgba(0,18,29,.08); } .team-legacy h3 { margin: 14px 0 0; font: clamp(28px, 3vw, 42px)/1.08 var(--serif); text-transform: uppercase; } .team-legacy > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-left: 34px; border-left: 1px solid rgba(156,101,29,.3); } .team-legacy > div:last-child p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.78; } .team-fleet-showcase { margin: 22px 0 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); overflow: hidden; color: #fff; background: radial-gradient(circle at 100% 0, rgba(231,166,66,.15), transparent 30%), linear-gradient(145deg, #082d47, var(--navy)); border: 1px solid rgba(224,163,69,.62); box-shadow: 0 24px 58px rgba(0,18,29,.2); } .team-fleet-visual { min-height: 390px; position: relative; overflow: hidden; } .team-fleet-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, rgba(2,28,43,.74)); pointer-events: none; } .team-fleet-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #031b29; } .team-fleet-visual > span { position: absolute; left: 24px; bottom: 22px; z-index: 1; padding: 8px 12px; color: #fff; border: 1px solid rgba(231,166,66,.72); background: rgba(2,28,43,.82); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .team-fleet-showcase figcaption { align-content: center; padding: 36px 38px; } .team-fleet-showcase figcaption .eyebrow { color: #e7a642; } .team-fleet-showcase figcaption h3 { margin: 0; font: clamp(30px, 3.3vw, 48px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: .035em; } .team-fleet-showcase figcaption > p:last-child { margin: 22px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.75; } .values-grid { display: grid; grid-template-columns: 1.2fr repeat(3, .6fr); gap: 18px; } .values-grid > div:not(:first-child) { min-height: 180px; padding: 22px; border: 1px solid rgba(224,163,69,.3); } .values-grid span { color: var(--gold); } .values-grid h3 { font: 18px var(--serif); text-transform: uppercase; } .release-flow { display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; } .release-flow span { padding: 15px 20px; border: 1px solid var(--line); background: #fff; font: 15px var(--serif); text-transform: uppercase; } .release-flow b { color: var(--copper); } .wfo-story { padding: 68px 0; color: #fff; background: radial-gradient(circle at 18% 20%, rgba(223,160,66,.2), transparent 30%), repeating-radial-gradient(ellipse at 75% 20%, transparent 0 38px, rgba(223,160,66,.035) 39px 40px), linear-gradient(145deg, #00131e, var(--navy)); border-block: 1px solid rgba(231,166,66,.42); } .wfo-story-inner { display: grid; grid-template-columns: minmax(180px, .42fr) 1.58fr; gap: clamp(36px, 7vw, 100px); align-items: center; } .wfo-emblem { width: min(100%, 260px); aspect-ratio: 1; position: relative; display: grid; place-content: center; gap: 8px; color: #f0bb68; text-align: center; background: radial-gradient(circle, rgba(223,160,66,.16), rgba(1,25,37,.92) 68%); border: 1px solid rgba(240,187,104,.82); border-radius: 50%; box-shadow: inset 0 0 0 8px #011925, inset 0 0 0 9px rgba(223,160,66,.34), 0 24px 60px rgba(0,0,0,.28); } .wfo-emblem::before, .wfo-emblem::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #d79236, transparent); } .wfo-emblem::before { top: 31%; } .wfo-emblem::after { bottom: 31%; } .wfo-emblem b { font: clamp(54px, 7vw, 92px)/.86 var(--serif); letter-spacing: .03em; text-shadow: 0 3px 16px rgba(223,160,66,.22); } .wfo-emblem span { text-transform: uppercase; letter-spacing: .17em; font-size: 9px; font-weight: 800; } .wfo-story h2 { margin: 8px 0 14px; color: #fff; font: clamp(42px, 6vw, 74px)/.98 var(--serif); text-transform: uppercase; } .wfo-story p:not(.eyebrow) { max-width: 820px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; } .wfo-story strong { display: block; max-width: 820px; margin-top: 22px; color: var(--gold); font: 17px/1.55 var(--serif); letter-spacing: .025em; } .wfo-story-compact { padding-block: 46px; } .wfo-story-compact .wfo-emblem { max-width: 230px; } .customize-next { margin-top: 28px; padding: 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; border: 1px solid rgba(231,166,66,.56); background: linear-gradient(90deg, rgba(0,18,34,.97) 0%, rgba(2,35,61,.92) 58%, rgba(3,43,74,.82) 100%), url("/images/home-four-cs-livermore-hills-v1.jpg") center 58% / cover no-repeat; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 22px 52px rgba(0,9,18,.3); } .customize-next > div { max-width: 780px; } .customize-next .eyebrow { margin: 0 0 8px; } .customize-next h3 { margin: 0; color: #fff; font: 36px/1.05 var(--serif); text-transform: uppercase; } .customize-next p:last-child { margin: 12px 0 0; color: rgba(255,255,255,.7); } .customize-next .button { flex: 0 0 auto; } .bbq-home-feature { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); overflow: hidden; color: #fff; border: 1px solid rgba(231,166,66,.66); background: linear-gradient(145deg, #062a3b, #021a29); box-shadow: 0 22px 52px rgba(0,9,18,.3); } .bbq-home-feature-media { min-height: 320px; position: relative; display: block; overflow: hidden; } .bbq-home-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, rgba(2,26,41,.5)); pointer-events: none; } .bbq-home-feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; transition: transform .5s ease; } .bbq-home-feature:hover .bbq-home-feature-media img { transform: scale(1.025); } .bbq-home-feature-media small { position: absolute; z-index: 1; left: 18px; bottom: 16px; padding: 7px 9px; color: #f2c17b; background: rgba(1,22,35,.86); border: 1px solid rgba(231,166,66,.56); text-transform: uppercase; letter-spacing: .08em; font-size: 8px; font-weight: 800; } .bbq-home-feature-copy { padding: 34px; display: flex; flex-direction: column; justify-content: center; } .bbq-home-feature-copy .eyebrow { margin-bottom: 10px; } .bbq-home-feature-copy > strong { color: #fff; font: clamp(34px, 4vw, 54px)/1 var(--serif); text-transform: uppercase; } .bbq-home-feature-copy > span:not(.eyebrow) { margin-top: 17px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.65; } .bbq-home-feature-copy > b { margin-top: 28px; padding-top: 15px; display: flex; justify-content: space-between; color: #f2c17b; border-top: 1px solid rgba(231,166,66,.34); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; } .bbq-home-feature-copy i { font: normal 18px/1 var(--sans); } .wfo-story-compact .text-link { display: inline-flex; margin-top: 18px; color: #f2c17b; } .bbq-page main { background: radial-gradient(circle at 88% 8%, rgba(194,122,32,.16), transparent 30%), var(--navy); } .bbq-page .hero-shade { background: linear-gradient(90deg, rgba(0,14,23,.97) 0%, rgba(2,25,38,.82) 43%, rgba(2,25,38,.2) 78%), linear-gradient(0deg, rgba(0,13,21,.54), transparent 56%); } .bbq-role-band { border-top: 1px solid rgba(231,166,66,.62); } .bbq-founder-media { position: relative; align-self: stretch; min-height: 440px; margin: 0; overflow: hidden; border: 1px solid rgba(185,111,31,.5); box-shadow: 0 22px 50px rgba(0,18,29,.18); background: #081d27; } .bbq-founder-media > img { width: 100%; height: 100%; min-height: 440px; display: block; object-fit: cover; object-position: center; } .bbq-founder-media figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 9px; color: #f2c17b; background: rgba(1,22,35,.9); border: 1px solid rgba(231,166,66,.54); text-transform: uppercase; letter-spacing: .08em; font-size: 8px; font-weight: 800; } .bbq-founder-story p { color: var(--muted); line-height: 1.75; } .bbq-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .bbq-service-grid article { min-height: 300px; padding: 30px; color: #fff; border: 1px solid rgba(231,166,66,.52); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)); box-shadow: 0 18px 44px rgba(0,0,0,.16); } .bbq-service-grid .mountain-mark { color: var(--gold); } .bbq-service-grid h3 { margin: 34px 0 16px; color: #fff; font: 28px/1.08 var(--serif); text-transform: uppercase; } .bbq-service-grid p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.7; } .bbq-gallery-section { color: #fff; background: radial-gradient(circle at 12% 0%, rgba(231,166,66,.14), transparent 28%), #011925; border-block: 1px solid rgba(231,166,66,.42); } .bbq-gallery-section .section-heading h2 { color: #fff; } .bbq-gallery-section .section-heading > p:last-child { color: rgba(255,255,255,.72); } .bbq-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .bbq-gallery figure { margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(231,166,66,.58); background: #031b29; } .bbq-gallery-wide { grid-column: 1 / -1; } .bbq-gallery img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; } .bbq-gallery-wide img { aspect-ratio: 16 / 8; object-position: center 58%; } .bbq-gallery figcaption { position: absolute; left: 16px; bottom: 14px; padding: 7px 9px; color: #f2c17b; background: rgba(1,22,35,.88); border: 1px solid rgba(231,166,66,.54); text-transform: uppercase; letter-spacing: .08em; font-size: 8px; font-weight: 800; } .bbq-concept-note { margin: 24px 0 0; padding: 16px 18px; color: rgba(255,255,255,.72); border-left: 3px solid var(--gold); background: rgba(255,255,255,.05); font-size: 12px; line-height: 1.65; } .bbq-concept-note strong { color: #fff; } .bbq-food-grid { display: grid; grid-template-columns: 1.45fr .775fr .775fr; gap: 18px; } .bbq-food-grid img { width: 100%; height: 360px; object-fit: cover; border: 1px solid rgba(185,111,31,.46); box-shadow: 0 16px 38px rgba(0,18,29,.12); } .bbq-food-grid img:nth-child(2), .bbq-food-grid img:nth-child(3) { object-position: center 50%; } .bbq-inquiry-note { padding-block: 52px; color: #fff; background: repeating-radial-gradient(ellipse at 82% 10%, transparent 0 38px, rgba(231,166,66,.035) 39px 40px), linear-gradient(135deg, #062a3b, #021a29); border-block: 1px solid rgba(231,166,66,.48); } .bbq-inquiry-note h2 { margin: 6px 0 14px; color: #fff; font: clamp(34px, 4vw, 54px)/1.05 var(--serif); text-transform: uppercase; } .bbq-inquiry-note p:not(.eyebrow) { max-width: 920px; color: rgba(255,255,255,.72); line-height: 1.7; } .bbq-inquiry-note .button { margin-top: 16px; } .plan-layout { display: grid; grid-template-columns: 1.55fr .65fr; gap: 34px; align-items: start; } .inquiry-form { padding: 38px; border: 1px solid rgba(185,111,31,.58); background: rgba(251,247,239,.97); box-shadow: 0 24px 60px rgba(0,18,29,.12); } .form-section { margin: 0 0 28px !important; padding: 24px !important; border: 1px solid rgba(185,111,31,.28) !important; background: rgba(255,255,255,.62); } .form-section > legend { padding: 0 10px; color: #8f5518; font-size: 11px; } .form-reveal-body { padding: 24px; } .planning-form-intro { margin: -10px 0 26px; padding: 18px 20px; color: #fff; background: var(--navy); border-left: 4px solid var(--gold); } .planning-form-intro b { color: var(--gold); font: 19px var(--serif); text-transform: uppercase; letter-spacing: .06em; } .planning-form-intro p { margin: 7px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.55; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .inquiry-form label { display: grid; gap: 7px; margin-bottom: 18px; } .inquiry-form label > span, .inquiry-form legend, .field-label { color: #32434e; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; } .inquiry-form input, .inquiry-form select, .inquiry-form textarea { width: 100%; padding: 13px 14px; border: 1px solid #c8c1b8; background: #fbfaf8; color: var(--ink); border-radius: 0; } .inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { outline: 2px solid rgba(200,132,44,.35); border-color: var(--copper); } .inquiry-form fieldset { margin: 10px 0 22px; padding: 0; border: 0; } .inquiry-form legend { margin-bottom: 12px; } .choice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; } .choice { margin: 0 !important; } .choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .choice span { min-height: 52px; display: grid; place-items: center; padding: 10px; border: 1px solid #c8c1b8; text-align: center; cursor: pointer; } .choice input:checked + span { background: var(--navy); color: #fff; border-color: var(--copper); } .field-help { max-width: 850px; margin: -4px 0 14px; color: var(--muted); font-size: 12px; } .form-notice { margin: -5px 0 20px; padding: 13px 15px; color: #4b5961; background: #f6f0e7; border-left: 3px solid var(--copper); font-size: 12px; line-height: 1.55; } .privacy-notice { margin-top: 2px; } .addon-picker { margin-top: 30px !important; padding: 24px !important; border: 1px solid rgba(194,122,32,.36) !important; background: linear-gradient(145deg, #f8f3eb, #fff); } .addon-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-reveal { margin: 24px 0; border: 1px solid rgba(194,122,32,.48); background: #fbfaf8; } .form-reveal > summary { min-height: 58px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; } .form-reveal > summary::-webkit-details-marker { display: none; } .form-reveal > summary span { color: #32434e; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; } .form-reveal > summary b { color: #a66418; font-size: 11px; } .form-reveal[open] > summary { border-bottom: 1px solid rgba(194,122,32,.36); } .form-reveal .addon-picker { margin: 0 !important; border: 0 !important; } .inquiry-acknowledgment { margin: 20px 0 !important; padding: 16px; display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: 11px !important; background: #f6f0e7; border: 1px solid rgba(194,122,32,.4); } .inquiry-acknowledgment input { width: 18px; height: 18px; margin-top: 1px; } .inquiry-acknowledgment span { color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.5; } .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 22px; border-top: 1px solid var(--line); } .form-footer p { max-width: 520px; margin: 0; color: var(--muted); font-size: 11px; } .what-next { position: sticky; top: 115px; padding: 38px; background: var(--navy); color: #fff; border: 1px solid var(--copper); box-shadow: var(--shadow); } .what-next h2 { font-size: 34px; color: var(--gold); } .what-next ol { list-style: none; padding: 0; margin: 30px 0; } .what-next li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(224,163,69,.25); } .what-next li > span { width: 44px; height: 44px; display: grid; place-items: center; color: #f4bd68; border: 1px solid rgba(231,166,66,.72); background: rgba(231,166,66,.07); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); } .what-next li > span .mountain-mark { transform: scale(.58); } .what-next b { font: 16px var(--serif); text-transform: uppercase; } .what-next p { margin: 5px 0 0; color: rgba(255,255,255,.65); font-size: 12px; } .what-next-story > p:not(.eyebrow) { margin-top: 22px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.75; } .what-next-note { padding: 16px; border: 1px solid rgba(224,163,69,.4); color: #edc889; font-size: 12px; } .form-success { min-height: 480px; padding: 60px; display: grid; place-items: center; align-content: center; text-align: center; background: #fff; border: 1px solid var(--line); } .form-success > span { width: 78px; height: 78px; display: grid; place-items: center; color: var(--gold); background: radial-gradient(circle, rgba(231,166,66,.2), var(--navy) 72%); border: 1px solid var(--gold); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); } .form-success > span .mountain-mark { transform: scale(.92); } .form-success h2 { margin-top: 24px; font-size: 36px; } .form-success p { max-width: 600px; color: var(--muted); } .inquiry-receipt { display: flex; flex-direction: column; align-items: center; } .receipt-reference { margin: 8px 0 18px !important; padding: 10px 14px; color: var(--navy) !important; border: 1px solid var(--gold); background: #fbf4e8; font-size: 13px; letter-spacing: .08em; } .receipt-summary { width: min(760px, 100%); margin: 28px auto; display: grid; grid-template-columns: 1fr 1fr; text-align: left; border: 1px solid var(--line); } .receipt-summary div { padding: 16px; border-bottom: 1px solid var(--line); } .receipt-summary div:nth-child(odd) { border-right: 1px solid var(--line); } .receipt-summary dt { color: #8f5518; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; } .receipt-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; } .receipt-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .faq-accordion { max-width: 980px; } .faq-accordion details { margin-bottom: 12px; border: 1px solid rgba(185,111,31,.38); background: rgba(255,255,255,.76); box-shadow: 0 10px 24px rgba(0,18,29,.05); } .faq-accordion summary { min-height: 62px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; color: var(--navy); font: 19px/1.25 var(--serif); text-transform: uppercase; list-style: none; } .faq-accordion summary::-webkit-details-marker { display: none; } .faq-accordion summary span { color: var(--copper); font: 27px/1 var(--sans); transition: transform .2s ease; } .faq-accordion details[open] summary span { transform: rotate(45deg); } .faq-accordion details p { margin: 0; padding: 0 20px 20px; color: var(--muted); } .availability-field { position: relative; display: grid; gap: 7px; margin-bottom: 18px; } .calendar-trigger { width: 100%; min-height: 50px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; text-align: left; border: 1px solid #c8c1b8; background: #fbfaf8; color: var(--ink); cursor: pointer; } .calendar-trigger:hover, .calendar-trigger[aria-expanded="true"] { border-color: var(--copper); } .calendar-trigger b { color: #a66418; font-size: 20px; } .calendar-popover { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; width: min(440px, calc(100vw - 56px)); padding: 20px; color: var(--ink); background: #fff; border: 1px solid var(--copper); box-shadow: 0 24px 60px rgba(0,18,29,.24); } .calendar-head { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: 15px; } .calendar-head strong { text-align: center; font: 20px var(--serif); text-transform: uppercase; letter-spacing: .07em; color: var(--navy); } .calendar-head button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); cursor: pointer; } .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-weekdays span { padding: 5px; text-align: center; color: var(--muted); font-size: 9px; text-transform: uppercase; } .calendar-day { aspect-ratio: 1; border: 1px solid #ede6dc; background: #fff; color: var(--ink); cursor: pointer; } .calendar-day:hover:not(:disabled) { border-color: var(--copper); } .calendar-day.outside { color: #a8aaab; background: #faf8f4; } .calendar-day.limited { background: #fff1d9; color: #7b4b11; } .calendar-day.unavailable, .calendar-day:disabled { background: #eeeae4; color: #aaa39b; text-decoration: line-through; cursor: not-allowed; } .calendar-day.selected { background: var(--navy); color: #fff; border-color: var(--gold); text-decoration: none; } .calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 15px; font-size: 10px; color: var(--muted); } .calendar-legend span { display: flex; align-items: center; gap: 6px; } .calendar-legend i { width: 10px; height: 10px; border: 1px solid #d8d0c7; } .calendar-legend i.available { background: #fff; } .calendar-legend i.limited { background: #fff1d9; } .calendar-legend i.unavailable { background: #eeeae4; } .calendar-note, .calendar-state { margin: 12px 0 0; color: var(--muted); font-size: 10px; } .calendar-state.error, .form-error, .operator-error { color: #8b2f1f; } .needs-picker { position: relative; margin-bottom: 18px; border: 1px solid #c8c1b8; background: #fbfaf8; } .needs-picker summary { min-height: 50px; padding: 11px 14px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; list-style: none; } .needs-picker summary::-webkit-details-marker { display: none; } .needs-picker summary span { color: #32434e; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; } .needs-picker summary b { color: var(--muted); font-size: 12px; font-weight: 400; } .needs-picker[open] { border-color: var(--copper); } .needs-options { padding: 12px 14px 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #ded6cc; background: #fff; } .needs-options label { margin: 0; display: flex; grid-template-columns: auto 1fr; align-items: flex-start; gap: 8px; } .needs-options input { width: auto; margin-top: 4px; } .needs-options label > span { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; } .access-picker { margin-top: 4px; } .private-followup { margin: 18px 0 !important; display: flex !important; grid-template-columns: auto 1fr !important; align-items: flex-start; gap: 10px !important; padding: 14px; background: #f6f0e7; border-left: 3px solid var(--copper); } .private-followup input { width: auto; margin-top: 3px; } .private-followup span { color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 400 !important; } .honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .form-error { margin: 0 0 15px; padding: 12px; background: #fff0ec; border-left: 3px solid #a74631; font-size: 12px; } .operator-page { min-height: 100vh; padding: 42px max(28px, calc((100vw - 1420px) / 2)) 80px; color: #fff; background: radial-gradient(circle at 82% 5%, rgba(194,122,32,.2), transparent 28%), repeating-radial-gradient(ellipse at 15% 10%, transparent 0 34px, rgba(231,166,66,.04) 35px 36px), var(--navy); } .operator-header { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; padding-bottom: 26px; border-bottom: 1px solid rgba(231,166,66,.42); } .operator-header h1, .operator-access h1 { margin: 0; font: 58px/1 var(--serif); text-transform: uppercase; letter-spacing: .04em; } .operator-header p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.65); } .operator-account { display: grid; text-align: right; font-size: 12px; } .operator-account span { color: rgba(255,255,255,.55); } .operator-account small { max-width: 300px; margin-top: 3px; color: rgba(255,255,255,.58); } .operator-account a { margin-top: 8px; color: var(--gold); } .operator-dashboard { display: grid; gap: 26px; } .operator-tabs { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; padding: 4px; background: #011622; border: 1px solid rgba(231,166,66,.46); box-shadow: 0 14px 38px rgba(0,0,0,.2); } .operator-tabs button { min-height: 46px; padding: 10px 13px; color: rgba(255,255,255,.68); background: transparent; border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; } .operator-tabs button:hover, .operator-tabs button.active { color: #fff; background: rgba(231,166,66,.16); box-shadow: inset 0 -2px var(--gold); } .operator-overview { display: grid; gap: 22px; } .operator-privacy-banner { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; border: 1px solid rgba(231,166,66,.45); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(231,166,66,.08)); } .operator-privacy-banner h2 { margin: 4px 0 8px; color: #fff; font: 32px var(--serif); text-transform: uppercase; } .operator-privacy-banner p:not(.eyebrow) { max-width: 760px; margin: 0; color: rgba(255,255,255,.66); font-size: 12px; } .operator-privacy-banner > b { padding: 10px 14px; color: var(--gold); border: 1px solid rgba(231,166,66,.48); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; } .operator-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .operator-summary article { padding: 22px; border: 1px solid rgba(231,166,66,.42); background: rgba(255,255,255,.06); } .operator-summary button { min-height: 150px; padding: 22px; display: grid; align-content: start; text-align: left; color: #fff; border: 1px solid rgba(231,166,66,.42); background: rgba(255,255,255,.06); cursor: pointer; } .operator-summary button:hover { border-color: var(--gold); background: rgba(231,166,66,.11); transform: translateY(-2px); } .operator-summary span, .operator-summary b { display: block; } .operator-summary span { color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; } .operator-summary b { margin-top: 8px; color: var(--gold); font: 38px var(--serif); } .operator-summary small { margin-top: auto; padding-top: 12px; color: rgba(255,255,255,.7); } .operator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .operator-panel { padding: 28px; color: var(--ink); background: var(--paper); border: 1px solid var(--copper); box-shadow: var(--shadow); } .operator-panel-head { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .operator-panel-head h2 { margin: 0; font: 30px var(--serif); text-transform: uppercase; color: var(--navy); } .operator-panel-head > span { align-self: end; color: var(--muted); font-size: 10px; text-transform: uppercase; } .operator-calendar-export { align-self: end; padding: 10px 13px; border: 1px solid var(--copper); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; } .operator-calendar-export:hover { color: #fff; background: var(--navy); } .operator-panel-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; } .availability-control { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; } .availability-control label { display: grid; gap: 6px; } .availability-control label span, .inquiry-detail label span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; } .availability-control input, .availability-control select, .inquiry-detail select { min-height: 44px; padding: 10px; border: 1px solid #c9c0b5; background: #fff; } .availability-control .wide { grid-column: 1 / -1; } .availability-control .button { align-self: end; } .availability-records { display: grid; gap: 5px; } .availability-records > div { display: grid; grid-template-columns: 100px 90px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #e4ddd3; font-size: 11px; } .availability-records b { text-transform: uppercase; font-size: 9px; } .availability-records b.limited { color: #9a611c; } .availability-records b.unavailable { color: #8b2f1f; } .availability-records span { color: var(--muted); } .event-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; } .event-list article { padding: 14px; background: #fff; border-left: 3px solid var(--copper); } .event-list time { color: #99621e; font-size: 10px; } .event-list h3 { margin: 6px 0; font: 17px var(--serif); text-transform: uppercase; } .event-list p { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; } .inquiry-panel { grid-column: 1 / -1; } .inquiry-records { margin-top: 20px; display: grid; gap: 8px; } .inquiry-records details { border: 1px solid #d8d0c6; background: #fff; } .inquiry-records summary { padding: 14px 16px; display: flex; justify-content: space-between; gap: 20px; cursor: pointer; } .inquiry-records summary span, .inquiry-records summary b { display: block; } .inquiry-records summary span { color: var(--muted); font-size: 11px; } .inquiry-records summary b { color: var(--navy); font: 17px var(--serif); } .inquiry-status { padding: 4px 8px; align-self: center; color: #fff; background: var(--navy); font-style: normal; text-transform: uppercase; font-size: 9px; } .inquiry-status.confirmed { background: #386342; } .inquiry-status.declined, .inquiry-status.closed { background: #6f6f6f; } .inquiry-detail { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid #d8d0c6; background: #faf8f4; } .inquiry-detail > div { display: grid; gap: 5px; } .inquiry-detail b { color: #99621e; text-transform: uppercase; font-size: 9px; } .inquiry-detail span, .inquiry-detail a, .inquiry-detail p { margin: 0; font-size: 12px; } .inquiry-detail .wide { grid-column: 1 / -1; } .privacy-redaction { padding: 16px; background: #f4eee5; border-left: 3px solid var(--copper); } .inquiry-release { padding: 18px; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: end; background: #eef1f1; border: 1px solid #ccd5d8; } .inquiry-release label { display: grid; gap: 6px; } .inquiry-release select { min-height: 44px; padding: 10px; border: 1px solid #c9c0b5; background: #fff; } .inquiry-release .release-check { min-height: 44px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; } .inquiry-release .release-check input { width: 18px; height: 18px; } .inquiry-release .release-check span { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 10px; font-weight: 600; } .member-records, .offering-records { margin-top: 20px; display: grid; gap: 9px; } .member-records details, .offering-records details { border: 1px solid #d8d0c6; background: #fff; } .member-records summary, .offering-records summary { min-height: 62px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; } .member-records summary span, .offering-records summary span { display: grid; color: var(--muted); font-size: 11px; } .member-records summary b, .offering-records summary b { color: var(--navy); font: 18px var(--serif); text-transform: uppercase; } .member-records summary em, .offering-records summary em { padding: 5px 8px; color: #fff; background: #6f6f6f; font-style: normal; text-transform: uppercase; font-size: 9px; white-space: nowrap; } .member-status.active, .offering-status.field_ready { background: #386342 !important; } .member-status.pending, .offering-status.preorder { background: #9a611c !important; } .member-detail { padding: 18px; border-top: 1px solid #d8d0c6; background: #faf8f4; } .member-detail > p { margin-top: 0; color: var(--muted); font-size: 12px; } .member-detail form, .offering-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .member-detail label, .offering-form label { display: grid; gap: 6px; } .member-detail label span, .offering-form label span { color: #32434e; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; } .member-detail input, .member-detail select, .offering-form input, .offering-form select, .offering-form textarea { width: 100%; min-height: 44px; padding: 10px; color: var(--ink); border: 1px solid #c9c0b5; background: #fff; } .member-detail .wide, .offering-form .wide { grid-column: 1 / -1; } .member-detail .button, .offering-form .button { justify-self: start; } .offering-form { padding: 18px; border-top: 1px solid #d8d0c6; background: #faf8f4; } .new-offering > summary { color: var(--navy); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .operator-loading { padding: 40px; color: rgba(255,255,255,.7); border: 1px solid rgba(231,166,66,.4); } .operator-error { padding: 14px; background: #fff0ec; border-left: 3px solid #a74631; } .operator-notice { margin: 0; padding: 14px; color: #e8f4e9; background: rgba(56,99,66,.64); border-left: 3px solid #83bd8e; } .operator-access { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: var(--paper); } .operator-access > div { max-width: 720px; padding: 55px; border: 1px solid var(--copper); } .operator-access p:not(.eyebrow) { color: var(--muted); } .site-footer { padding: 68px 0 24px; background: #021a29; color: #fff; border-top: 1px solid rgba(224,163,69,.32); } .footer-grid { width: min(1400px, calc(100% - 80px)); margin: auto; display: grid; grid-template-columns: 1.45fr repeat(3, .78fr); gap: 54px; } .footer-grid .brand { margin-bottom: 20px; } .footer-grid p { max-width: 400px; color: rgba(255,255,255,.58); font-size: 12px; } .footer-grid h3 { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; } .footer-grid > div > a:not(.brand) { min-height: 36px; display: flex; align-items: center; color: rgba(255,255,255,.65); font-size: 12px; } .footer-grid > div > a:hover { color: #fff; } .footer-domain { display: block; margin-top: 16px; color: #efb965; letter-spacing: .06em; font-size: 10px; text-transform: uppercase; } .footer-bottom { width: min(1400px, calc(100% - 80px)); margin: 55px auto 0; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.46); text-transform: uppercase; letter-spacing: .13em; font-size: 9px; } .footer-legal { display: flex; gap: 18px; } .footer-legal a { min-height: 36px; display: inline-flex; align-items: center; } .footer-legal a:hover { color: #fff; } .footer-disclosure { width: min(1400px, calc(100% - 80px)); max-width: none !important; margin: 20px auto 0; color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.6; } .compact-statement, .compact-promise { padding-block: 64px; } .compact-statement > div, .compact-promise > div { max-width: 1000px; } .compact-statement h2 { margin: 0; font: 46px/1.05 var(--serif); text-transform: uppercase; } .compact-statement p:not(.eyebrow) { max-width: 760px; color: rgba(255,255,255,.72); } .info-hero { min-height: 280px; } .info-shell { max-width: 1120px; } .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .info-card { padding: 30px; border: 1px solid var(--line); background: rgba(255,255,255,.95); box-shadow: 0 16px 38px rgba(0,18,29,.07); } .info-card .mountain-mark { color: var(--copper); } .info-card h3 { margin: 14px 0 8px; color: var(--navy); font: 25px/1.15 var(--serif); text-transform: uppercase; } .info-card p, .info-card li { color: var(--muted); font-size: 14px; } .info-card ul { padding-left: 20px; } .info-prose { max-width: 900px; } .info-prose h2 { margin: 42px 0 10px; color: var(--navy); font: 34px/1.15 var(--serif); text-transform: uppercase; } .info-prose p, .info-prose li { color: var(--muted); } .site-page main.not-found { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 72px 20px; color: #fff; text-align: center; background: linear-gradient(90deg, rgba(1,21,34,.94), rgba(2,23,37,.62)), url("/images/hero-family-mountains.jpg") center / cover; } .not-found > div { max-width: 760px; } .not-found .mountain-mark { width: 96px; height: 62px; margin: 0 auto 24px; color: var(--gold); } .not-found h1 { margin: 0; font: clamp(54px, 9vw, 108px)/.9 var(--serif); text-transform: uppercase; letter-spacing: .035em; } .not-found p { max-width: 640px; margin: 24px auto 30px; color: rgba(255,255,255,.76); font: 19px/1.6 var(--serif); } .not-found-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } @media (max-width: 1280px) { .desktop-nav, .header-cta { display: none; } .mobile-menu { display: block; } .image-card-grid.five { grid-template-columns: repeat(3,1fr); } .image-card-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .image-card-grid.four, .offering-grid.four { grid-template-columns: repeat(2,1fr); } .experiences-catalog-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .offering-grid.five { grid-template-columns: repeat(3,1fr); } .steps-grid { grid-template-columns: repeat(2,1fr); } .step:nth-child(2) { border-right: 0; } .split-story { grid-template-columns: 1fr; } .split-copy { padding: 48px max(36px, calc((100vw - 720px) / 2)); } .safety-grid { grid-template-columns: auto 1fr auto; } .safety-grid p { grid-column: 2; } .readiness-grid { grid-template-columns: repeat(3,1fr); } .readiness-grid > div:first-child { grid-column: 1 / -1; } .values-grid { grid-template-columns: repeat(3,1fr); } .values-grid > div:first-child { grid-column: 1 / -1; } .operator-grid { grid-template-columns: 1fr; } .addon-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journey-rail-inner { grid-template-columns: 1fr; } .journey-rail-intro { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid rgba(231,166,66,.32); } .journey-rail-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .wfo-story-inner { grid-template-columns: 1fr; } .wfo-emblem { width: 170px; } } @media (max-width: 860px) { .page-width, .footer-grid, .footer-bottom { width: min(100% - 36px, 720px); } .section-pad { padding-block: 62px; } .header-inner { width: calc(100% - 28px); height: 82px; } .brand-type { min-width: 130px; } .brand-type strong { font-size: 18px; } .brand-type small { font-size: 8px; } .brand-mark { width: 46px; font-size: 38px; } .brand-mark-mountain .mountain-mark { width: 44px; height: 28px; } .brand-prominent { gap: 12px; } .brand-prominent .brand-mark { width: 66px; height: 50px; } .brand-prominent .brand-mark-mountain .mountain-mark { width: 63px; height: 39px; } .brand-prominent .brand-type { min-width: 166px; } .brand-prominent .brand-type strong { font-size: 21px; } .brand-prominent .brand-type small { margin-top: 6px; font-size: 8px; letter-spacing: .48em; } .mobile-menu-backdrop { inset-block-start: 82px; } .mobile-menu-panel { top: 82px; right: 14px; width: min(380px, calc(100vw - 28px)); max-height: calc(100dvh - 96px); } .hero { min-height: 650px; align-items: flex-end; } .hero-compact { min-height: 520px; } .hero-shade { background: linear-gradient(0deg, rgba(1,20,31,.96) 0%, rgba(1,20,31,.76) 50%, rgba(1,20,31,.2) 100%); } .experiences-page .hero-shade { background: linear-gradient(0deg, rgba(0,12,20,.98) 0%, rgba(1,20,31,.88) 54%, rgba(1,20,31,.34) 100%); } .hero-content { padding-block: 70px; } .hero-content h1 { font-size: clamp(40px, 11vw, 60px); } .popup-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase-dialog-card { grid-template-columns: 1fr; min-height: 0; } .showcase-dialog-media { min-height: 300px; max-height: 42vh; } .field-ai-inner { grid-template-columns: 1fr; } .field-ai-mark { width: min(220px, 55vw); } .journey-rail-inner { padding-block: 28px; } .step p { font-size: 14px; } .experience-preview { width: 100%; max-width: none; margin-inline: 0; padding: 32px 18px 42px; } .experiences-page #core-experiences { padding-inline: 18px; } .image-card-grid.five, .image-card-grid.four, .offering-grid.three, .offering-grid.four, .offering-grid.five, .feature-row, .occasion-grid { grid-template-columns: 1fr 1fr; } .image-card-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col, .day-flow, .plan-layout { grid-template-columns: 1fr; gap: 42px; } .day-flow ol { grid-template-columns: 1fr 1fr; } .trust-strip > div { grid-template-columns: 1fr 1fr; } .trust-strip div div:nth-child(2) { border-right: 0; } .safety-grid { grid-template-columns: auto 1fr; } .safety-grid .button { grid-column: 1 / -1; } .inquiry-banner-inner { align-items: flex-start; flex-direction: column; } .partner-band > div { flex-direction: column; } .fleet-partner-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1.35fr 1fr 1fr; } .footer-grid > div:last-child { grid-column: 2 / -1; } .what-next { position: static; } .choice-grid { grid-template-columns: 1fr 1fr; } .addon-choice-grid { grid-template-columns: 1fr 1fr; } .custom-experience-action { align-items: flex-start; flex-direction: column; } .desert-rental-intro { grid-template-columns: 1fr; align-items: start; gap: 28px; } .desert-rental-section { scroll-margin-top: 82px; } .self-guided-inner { grid-template-columns: 74px minmax(0, 1fr); align-items: start; } .self-guided-inner > .button { grid-column: 1 / -1; justify-self: start; } .customize-next { align-items: flex-start; flex-direction: column; } .bbq-home-feature { grid-template-columns: 1fr; } .bbq-home-feature-media { min-height: 360px; } .bbq-service-grid { grid-template-columns: 1fr; } .bbq-food-grid { grid-template-columns: 1fr 1fr; } .bbq-food-grid img:first-child { grid-column: 1 / -1; } .operator-header { align-items: flex-start; flex-direction: column; } .operator-account { text-align: left; } .operator-summary { grid-template-columns: 1fr 1fr 1fr; } .operator-panel-head { align-items: flex-start; flex-direction: column; } .operator-panel-head > span { align-self: auto; } .inquiry-release { grid-template-columns: 1fr; } .operator-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .brand-type strong { font-size: 15px; } .brand-type small { letter-spacing: .3em; } .header-inner { height: 74px; } .brand-prominent { gap: 9px; } .brand-prominent .brand-mark { width: 50px; height: 39px; } .brand-prominent .brand-mark-mountain .mountain-mark { width: 48px; height: 30px; } .brand-prominent .brand-type { min-width: 132px; } .brand-prominent .brand-type strong { font-size: 16px; letter-spacing: .12em; } .brand-prominent .brand-type small { margin-top: 5px; font-size: 7px; letter-spacing: .36em; } .mobile-menu-trigger { min-width: 82px; min-height: 48px; padding: 10px 11px; gap: 8px; } .mobile-menu-backdrop { inset-block-start: 74px; } .mobile-menu-panel { top: 74px; right: 0; width: 100%; max-height: calc(100dvh - 74px); padding: 16px 18px 20px; border-inline: 0; transform-origin: top center; } .status-pill { font-size: 9px; } .hero-compact { min-height: 500px; } .hero-actions { display: grid; } .popup-showcase { grid-template-columns: 1fr; } .fleet-partner-logo { height: 170px; } .fleet-partner-logo-left-coast { padding: 14px 16px; } .fleet-partner-copy { padding: 26px 24px 30px; } .popup-showcase-copy { min-height: 220px; } .showcase-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); } .showcase-dialog-media { min-height: 240px; max-height: 34vh; } .showcase-dialog-copy { padding: 30px 24px 34px; } .showcase-dialog-copy h2 { font-size: 38px; } .showcase-code-visual { min-height: 240px; } .field-ai-mark { width: min(190px, 62vw); margin-inline: auto; } .field-ai-inner { text-align: center; } .field-ai-inner .text-link { justify-content: center; } .image-card-grid.five, .image-card-grid.six, .image-card-grid.four, .offering-grid.three, .offering-grid.four, .offering-grid.five, .feature-row, .occasion-grid, .steps-grid, .badge-grid, .trust-strip > div, .values-grid, .readiness-grid, .field-grid, .info-grid { grid-template-columns: 1fr; } .self-guided-band { padding-block: 40px; } .self-guided-inner { grid-template-columns: 1fr; gap: 22px; } .self-guided-mark { width: 64px; height: 64px; } .self-guided-inner > .button { grid-column: auto; width: 100%; min-width: 0; } .desert-rental-section { scroll-margin-top: 74px; } .desert-rental-contact { padding: 22px 20px; } .desert-rental-contact .button { width: 100%; } .team-profiles { grid-template-columns: 1fr; } .family-story { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px; } .family-story-copy { grid-template-columns: 1fr; gap: 18px; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(224,163,69,.35); } .team-profile-featured { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; } .network-asset { grid-template-columns: 1fr; gap: 18px; padding: 30px 24px; } .network-asset .eyebrow { grid-column: auto; } .team-legacy { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px; } .team-legacy > div:last-child { grid-template-columns: 1fr; gap: 18px; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(156,101,29,.3); } .team-profile { min-height: 0; padding: 28px 24px; } .team-profile h3 { font-size: 32px; } .team-profile-featured h3 { font-size: 45px; } .team-profile-mark { top: 24px; right: 24px; transform: scale(1.25); } .team-fleet-showcase { grid-template-columns: 1fr; } .team-fleet-visual { min-height: 0; aspect-ratio: 16 / 9; } .team-fleet-visual::after { background: linear-gradient(0deg, rgba(2,28,43,.72), transparent 48%); } .team-fleet-showcase figcaption { padding: 30px 24px 34px; } .popup-showcase-media { height: 210px; } .adventure-badge { flex: 0 0 min(60vw, 210px); min-height: 210px; } .image-card { min-height: 390px; } .image-card-editorial { min-height: 0; } .image-card-editorial .image-card-copy { min-height: 170px; padding: 18px; } .image-card-multi .image-card-copy { min-height: 0; } .image-card-paths { grid-template-columns: 1fr; } .image-card-editorial .image-card-tag { top: 18px; right: 18px; } .image-card-copy strong { font-size: 26px; } .image-card-copy span { font-size: 14px; } .steps { background-position: 60% center; } .steps-grid { backdrop-filter: none; } .step { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(231,166,66,.32); } .split-copy { padding: 42px 18px 50px; } .family-safety-standard > div { grid-template-columns: 1fr; gap: 16px; text-align: center; } .family-safety-standard > div > .mountain-mark { margin: auto; } .family-safety-standard p:last-child { font-size: 14px; } .mini-stats { grid-template-columns: 1fr; } .safety-grid { grid-template-columns: 1fr; text-align: center; } .safety-seal { margin: auto; } .safety-grid p { grid-column: auto; } .day-flow ol { grid-template-columns: 1fr; } .form-footer { align-items: stretch; flex-direction: column; } .choice-grid { grid-template-columns: 1fr; } .addon-choice-grid { grid-template-columns: 1fr; } .addon-picker { padding: 18px !important; } .journey-rail-track, .journey-collection, .catalog-grid, .addon-groups, .offering-grid, .feature-row, .occasion-grid, .badge-grid { display: flex; width: calc(100vw - 18px); margin-right: -18px; padding-right: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; } .experiences-catalog-grid > :last-child:nth-child(odd) { grid-column: auto; } .journey-rail-track { width: calc(100vw - 36px); margin-right: 0; padding: 0 14px 12px 0; } .journey-link { min-height: 126px; } .journey-rail-track > *, .journey-collection > *, .catalog-grid > *, .addon-groups > *, .offering-grid > *, .feature-row > *, .occasion-grid > *, .badge-grid > * { flex: 0 0 min(86vw, 370px); scroll-snap-align: start; } .badge-grid > .adventure-badge { flex-basis: min(62vw, 230px); min-height: 230px; } .journey-rail-track > * { flex-basis: min(82vw, 350px); } .offering-card { min-height: 390px; } .inquiry-form { padding: 22px; } .form-section { padding: 18px !important; } .receipt-summary { grid-template-columns: 1fr; } .receipt-summary div:nth-child(odd) { border-right: 0; } .bbq-home-feature-media { min-height: 260px; } .bbq-home-feature-copy { padding: 26px 22px; } .bbq-gallery { grid-template-columns: 1fr; } .bbq-gallery-wide { grid-column: auto; } .bbq-gallery-wide img, .bbq-gallery img { aspect-ratio: 4 / 3; } .bbq-founder-media { min-height: 390px; } .bbq-founder-media > img { min-height: 390px; } .bbq-food-grid { grid-template-columns: 1fr; } .bbq-food-grid img:first-child { grid-column: auto; } .bbq-food-grid img { height: 300px; } .family-promise img, .camp-table img, .fleet-story img, .marine-details img, .offgrid-feature img { min-height: 280px; } .footer-grid { grid-template-columns: 1fr; } .footer-grid > div:last-child { grid-column: auto; } .footer-bottom { align-items: flex-start; flex-direction: column; } .calendar-popover { position: fixed; inset: 92px 16px auto; width: auto; max-height: calc(100vh - 112px); overflow-y: auto; } .needs-options { grid-template-columns: 1fr; } .operator-page { padding-inline: 16px; } .operator-header h1, .operator-access h1 { font-size: 42px; } .operator-summary { grid-template-columns: 1fr; } .operator-tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .operator-tabs button:last-child { grid-column: 1 / -1; } .operator-privacy-banner { align-items: flex-start; flex-direction: column; } .operator-panel { padding: 20px; } .availability-control, .event-list, .inquiry-detail { grid-template-columns: 1fr; } .availability-records > div { grid-template-columns: 1fr auto; } .availability-records > div span { grid-column: 1 / -1; } .inquiry-records summary { align-items: flex-start; flex-direction: column; } .member-records summary, .offering-records summary { align-items: flex-start; flex-direction: column; } .member-detail form, .offering-form { grid-template-columns: 1fr; } .member-detail .wide, .offering-form .wide { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } } @media print { .site-header, .site-footer, .hero, .what-next, .receipt-actions { display: none !important; } .site-page main, .plan-layout, .inquiry-receipt { display: block; background: #fff; } .plan-layout { width: 100%; padding: 0; } .plan-layout > div > .section-heading { display: none; } .inquiry-receipt { min-height: 0; padding: 24px; border: 0; } .receipt-summary { break-inside: avoid; } } /* Local September 2026 usability pass; existing mountain geometry retained. */ html { scroll-padding-top: 110px; } .header-inner { gap: 22px; } .brand-prominent { gap: 12px; } .brand-prominent::after { display: none; } .brand-prominent .brand-mark { width: 72px; height: 54px; filter: none; } .brand-prominent .brand-mark-mountain .mountain-mark { width: 70px; height: auto; aspect-ratio: 96 / 58; } .brand-prominent .brand-type { min-width: 190px; } .brand-prominent .brand-type strong { font-size: 24px; letter-spacing: .1em; } .brand-type small, .brand-prominent .brand-type small { font-size: 12px; letter-spacing: .3em; } .desktop-nav { gap: 20px; } .desktop-nav a { font-size: 14px; letter-spacing: .025em; text-transform: none; } .header-cta { min-width: 132px; } .button { font-size: 14px; letter-spacing: .065em; } .button-gold { color: #10202b; background: #e8ac53; border-color: #e8ac53; text-shadow: none; } .mobile-menu-trigger { font-size: 12px; } .contact-status { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 24px; font-size: 16px; border-bottom: 1px solid #d5c6af; } .contact-status > span { font-weight: 700; } .contact-status > a { margin-left: auto; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .contact-address { font-size: 20px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; } .home-page .hero { min-height: 520px; } .home-page .hero-copy { max-width: 630px; } .home-page .wfo-story { margin-top: 0; } @media (max-width: 860px) { .header-inner { gap: 12px; } .brand-prominent .brand-mark { width: 52px; height: 42px; } .brand-prominent .brand-mark-mountain .mountain-mark { width: 50px; height: auto; } .brand-prominent .brand-type { min-width: 0; } .brand-prominent .brand-type strong { font-size: 20px; } .brand-prominent .brand-type small { font-size: 12px; letter-spacing: .2em; } .home-page .hero { min-height: 570px; } .home-page .hero-content { padding-block: 40px; } .home-page .hero-content h1 { font-size: clamp(36px, 9vw, 56px); line-height: 1.05; } .contact-status > a { margin-left: 0; flex-basis: 100%; } } @media (max-width: 380px) { .brand-prominent { gap: 6px; } .brand-prominent .brand-mark { width: 36px; } .brand-prominent .brand-mark-mountain .mountain-mark { width: 36px; } .brand-prominent .brand-type strong { font-size: 16px; } .mobile-menu-trigger { min-width: 72px; padding-inline: 8px; } } .home-page .bbq-home-feature-media img { position: absolute; inset: 0; } .home-page .bbq-home-feature-media { min-height: 360px; } .home-page .image-card-copy p, .home-page .bbq-home-feature-copy > span:not(.eyebrow) { font-size: 16px; } @media (max-width: 560px) { .home-page .journey-collection { display: grid; grid-template-columns: 1fr; overflow: visible; padding: 0; margin: 0; } .home-page .journey-collection > * { width: auto; min-width: 0; } .home-page .bbq-home-feature-media { min-height: 240px; } }