/* ========================================================================= THE SPARK EXPERIENCE — Cinematic light theme design system Group travel for companies & small crews. Modern, slick, tactile. ========================================================================= */ /* ----- Fonts (self-referenced via in ) ----- */ :root { /* Palette — warm, premium, LIGHT */ --paper: #FDFBF7; /* warm ivory base */ --paper-2: #F5EFE4; /* sand */ --paper-3: #ECE3D4; /* deeper sand */ --ink: #191410; /* near-black warm */ --ink-soft: #5A534B; --ink-faint: #8A8177; --line: rgba(25,20,16,.12); --line-strong:rgba(25,20,16,.22); --ember: #E4571B; /* spark orange — energy / CTA */ --ember-2: #F17A2B; --gold: #C7972F; /* premium crest gold */ --gold-2: #E4B84B; --teal: #0E3B3C; /* deep contrast blocks / footer */ --teal-2: #16585A; --cream-on-teal:#F3ECDD; --grad-ember: linear-gradient(120deg, var(--ember) 0%, var(--gold) 100%); --grad-ember-hot: linear-gradient(120deg, #FF6A2B 0%, #E4571B 55%, #C7972F 100%); --grad-teal: linear-gradient(160deg, #124748 0%, #0B2E2F 100%); --shadow-sm: 0 2px 10px rgba(25,20,16,.08); --shadow-md: 0 14px 40px -12px rgba(25,20,16,.28); --shadow-lg: 0 40px 90px -30px rgba(25,20,16,.45); --shadow-ember: 0 16px 40px -12px rgba(228,87,27,.5); --font-display: "Fraunces", "Playfair Display", ui-serif, Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --container: 1240px; --radius: 18px; --radius-lg: 26px; --radius-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--ember); color: #fff; } /* ----- Typography ----- */ h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; margin: 0 0 .4em; letter-spacing: -.015em; } .h-display { font-size: clamp(2.9rem, 8vw, 6.6rem); font-weight: 600; letter-spacing: -.03em; } h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); } h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); } p { margin: 0 0 1.1em; } .eyebrow { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1rem; } .eyebrow::before { content:""; width: 26px; height: 2px; background: var(--grad-ember); border-radius: 2px; } .eyebrow.center::after { content:""; width: 26px; height: 2px; background: var(--grad-ember); border-radius: 2px; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); } .serif-accent { font-family: var(--font-display); font-style: italic; } /* ----- Layout ----- */ .container { width: min(100% - 2.6rem, var(--container)); margin-inline: auto; } .container-wide { width: min(100% - 2.6rem, 1500px); margin-inline: auto; } section { position: relative; } .section-pad { padding: clamp(4.5rem, 9vw, 8rem) 0; } .center { text-align: center; } .max-60 { max-width: 60ch; } .mx-auto { margin-inline: auto; } /* ============================ BUTTONS (big, tactile, gamified) ========= */ .btn { --btn-bg: var(--ink); --btn-fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; padding: 1.05em 2.1em; font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; color: var(--btn-fg); background: var(--btn-bg); border: none; border-radius: var(--radius-pill); cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .3s ease; will-change: transform; box-shadow: var(--shadow-md); } .btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-lg); } .btn:active { transform: translateY(-1px) scale(.99); } .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .btn .btn-arrow { transition: transform .35s var(--ease-out); } .btn:hover .btn-arrow { transform: translateX(5px); } .btn-primary { --btn-fg:#fff; background: var(--grad-ember-hot); background-size: 160% 160%; box-shadow: var(--shadow-ember); animation: btnFlow 6s ease infinite; } @keyframes btnFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } .btn-primary::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); transform: translateX(-130%); transition: transform .7s var(--ease-out); } .btn-primary:hover::after { transform: translateX(130%); } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); } .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); background: var(--ink); color:#fff; } .btn-light { background:#fff; color: var(--ink); } .btn-light:hover { background: var(--paper-2); } .btn-lg { padding: 1.25em 2.6em; font-size: 1.1rem; } .btn-block { display: flex; width: 100%; } /* ============================ HEADER / NAV ============================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.1rem 0; transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; } /* Clean, uniform translucent bar over the hero — logo + CTA read as centred, and it blends into the hero (no fade seam / thin line). */ .site-header:not([data-nav="light"]):not(.scrolled) { background: rgba(16,12,10,.5); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); } .site-header.scrolled { background: rgba(253,251,247,.86); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 8px 30px -20px rgba(25,20,16,.5); border-bottom: 1px solid var(--line); padding: .7rem 0; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: center; z-index: 2; } .brand-logo { height: 38px; width: auto; display: block; transition: height .4s var(--ease), filter .4s; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); } .scrolled .brand-logo { height: 32px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.14)); } @media (max-width: 560px){ .brand-logo { height: 30px; } .scrolled .brand-logo { height: 28px; } } .nav-links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; padding: .55rem .95rem; font-weight: 600; font-size: .95rem; color: var(--nav-fg, #fff); border-radius: var(--radius-pill); transition: color .3s, background .3s; } .nav-links a::after { content:""; position:absolute; left:.95rem; right:.95rem; bottom:.35rem; height:2px; background: var(--grad-ember); border-radius:2px; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-cta { margin-left: .4rem; } .nav-cta .btn { padding: .7em 1.4em; font-size: .92rem; box-shadow: var(--shadow-sm); } /* Nav colour: white over the hero, ink once the bar turns ivory (scrolled) or on light-topped pages (team / videos / legal). */ .site-header { --nav-fg: #fff; } .site-header[data-nav="light"] { --nav-fg: var(--ink); } .site-header.scrolled { --nav-fg: var(--ink); } /* Mobile nav */ .nav-toggle { display:none; flex-direction: column; gap: 5px; width: 46px; height: 46px; align-items: center; justify-content: center; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; backdrop-filter: blur(6px); z-index: 2; } .scrolled .nav-toggle { background: var(--paper-2); border-color: var(--line); } .nav-toggle span { width: 20px; height: 2px; background: var(--nav-fg,#fff); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; } .nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2){ opacity:0; } .nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (max-width: 940px) { .nav-toggle { display: flex; } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); flex-direction: column; align-items: stretch; justify-content: center; gap: .4rem; background: var(--grad-teal); padding: 2rem; transform: translateX(100%); transition: transform .5s var(--ease-out); box-shadow: var(--shadow-lg); } .nav-open .nav-links { transform: translateX(0); } .nav-links a { --nav-fg: var(--cream-on-teal); color: var(--cream-on-teal); font-size: 1.5rem; font-family: var(--font-display); padding: .7rem 1rem; } .nav-links a::after { display:none; } .nav-cta { margin: 1rem 0 0; } .nav-cta .btn { width: 100%; } } /* ============================ HERO ==================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img, .hero-media video, .hero-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } /* Vimeo background needs oversizing to cover */ .hero-video-wrap { position:absolute; inset:0; overflow:hidden; } .hero-video-wrap iframe { position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.77svh; transform: translate(-50%,-50%); } .hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(15,12,10,.45) 0%, rgba(15,12,10,.05) 30%, rgba(15,12,10,.25) 62%, rgba(15,12,10,.86) 100%); } .hero-inner { position: relative; z-index: 2; width: min(100% - 2.6rem, var(--container)); margin-inline: auto; padding-bottom: clamp(3.5rem, 8vh, 7rem); padding-top: 8rem; } .hero h1 { color:#fff; text-shadow: 0 4px 40px rgba(0,0,0,.35); } .hero .eyebrow { color: var(--gold-2); } .hero .eyebrow::before { background: var(--gold-2); } .hero-sub { max-width: 46ch; font-size: clamp(1.05rem,1.7vw,1.35rem); color: rgba(255,255,255,.92); text-shadow: 0 2px 20px rgba(0,0,0,.5); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .scroll-cue { position:absolute; bottom: 1.4rem; left:50%; transform: translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.8); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; } .scroll-cue .mouse { width:24px; height:38px; border:2px solid rgba(255,255,255,.6); border-radius:14px; position:relative; } .scroll-cue .mouse::after { content:""; position:absolute; top:7px; left:50%; width:4px; height:7px; background:#fff; border-radius:3px; transform:translateX(-50%); animation: wheel 1.6s var(--ease) infinite; } @keyframes wheel { 0%{opacity:1; top:7px} 70%{opacity:0; top:18px} 100%{opacity:0} } /* Floating stat chips on hero (gamified) */ .hero-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; } .chip { display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.05em; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius: var(--radius-pill); backdrop-filter: blur(10px); font-size:.88rem; font-weight:600; } .chip .dot { width:8px; height:8px; border-radius:50%; background: var(--gold-2); box-shadow:0 0 12px var(--gold-2); } /* ============================ MARQUEE ================================= */ .marquee { background: var(--ink); color: var(--paper); padding: .95rem 0; overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; gap: 2.5rem; animation: marq 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee span { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; opacity:.85; display:inline-flex; align-items:center; gap:2.5rem; } .marquee span::after { content:"✦"; color: var(--gold-2); font-style: normal; } @keyframes marq { to { transform: translateX(-50%); } } /* ============================ SECTION HEADINGS ======================== */ .section-head { max-width: 62ch; } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 span { color: var(--ember); } /* ============================ EXPERIENCE GRID ========================= */ .exp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; } .exp-card { position: relative; grid-column: span 4; min-height: 440px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; isolation: isolate; box-shadow: var(--shadow-md); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); display: flex; flex-direction: column; justify-content: flex-end; } .exp-card.feature { grid-column: span 8; min-height: 520px; } .exp-card.wide { grid-column: span 6; } .exp-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .exp-card__img { position:absolute; inset:0; z-index:-2; background-size: cover; background-position: center; transition: transform .8s var(--ease-out); } .exp-card:hover .exp-card__img { transform: scale(1.08); } .exp-card::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(10,8,6,0) 30%, rgba(10,8,6,.35) 60%, rgba(10,8,6,.9) 100%); } .exp-card__body { padding: 1.8rem; transform: translateY(6px); transition: transform .5s var(--ease-out); } .exp-card:hover .exp-card__body { transform: translateY(0); } .exp-card__tag { display:inline-flex; align-items:center; gap:.45em; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-2); margin-bottom:.7rem; } .exp-card h3 { color:#fff; font-size: clamp(1.5rem, 2.2vw, 2.1rem); margin-bottom:.3rem; } .exp-card__meta { font-size:.92rem; color: rgba(255,255,255,.82); display:flex; gap:1rem; flex-wrap:wrap; } .exp-card__reveal { max-height:0; opacity:0; overflow:hidden; transition: max-height .5s var(--ease-out), opacity .4s, margin .5s; } .exp-card:hover .exp-card__reveal { max-height:120px; opacity:1; margin-top:.9rem; } .exp-card__cta { display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:#fff; } .exp-card__cta .btn-arrow { transition: transform .35s var(--ease-out); } .exp-card:hover .exp-card__cta .btn-arrow { transform: translateX(6px); } @media (max-width: 1000px){ .exp-card, .exp-card.feature, .exp-card.wide { grid-column: span 6; min-height: 400px; } } @media (max-width: 640px){ .exp-card, .exp-card.feature, .exp-card.wide { grid-column: span 12; min-height: 380px; } } /* ============================ SPLIT / STORY =========================== */ .split { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,5rem); align-items:center; } .split.reverse { direction: rtl; } .split.reverse > * { direction: ltr; } .split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; } .split-media img { width:100%; height:100%; object-fit: cover; } .split-media .badge { position:absolute; bottom:1.2rem; left:1.2rem; right:1.2rem; padding:1rem 1.2rem; background: rgba(253,251,247,.9); backdrop-filter: blur(10px); border-radius: var(--radius); display:flex; align-items:center; gap:.9rem; box-shadow: var(--shadow-sm); } .badge .badge-num { font-family: var(--font-display); font-size: 2rem; color: var(--ember); line-height:1; } @media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split-media { aspect-ratio: 16/11; } } /* ============================ STATS =================================== */ .stats { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .stat { text-align:center; padding: 1.5rem 1rem; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); border:1px solid var(--line); } .stat .num { font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.4rem); line-height:1; background: var(--grad-ember); -webkit-background-clip:text; background-clip:text; color: transparent; } .stat .label { font-size:.85rem; font-weight:600; letter-spacing:.06em; color: var(--ink-soft); text-transform: uppercase; margin-top:.5rem; } @media (max-width:700px){ .stats{ grid-template-columns: repeat(2,1fr); } } /* ============================ TEAM =================================== */ .team-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 1.4rem; } .team-card { position:relative; border-radius: var(--radius); overflow:hidden; background: var(--paper-2); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease-out), box-shadow .4s; } .team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .team-card .photo { aspect-ratio: 3/3.4; overflow:hidden; background: var(--paper-3); } .team-card .photo img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease-out); filter: saturate(1.02); } .team-card:hover .photo img { transform: scale(1.06); } .team-card .info { padding: 1rem 1.1rem 1.3rem; } .team-card .info h4 { margin:0 0 .1em; font-size:1.25rem; } .team-card .role { font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--ember); } .team-card .bio { font-size:.9rem; color: var(--ink-soft); margin:.6rem 0 0; } /* ============================ GET INVOLVED =========================== */ .involve-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; } .involve-card { position:relative; padding: 2.2rem 2rem; border-radius: var(--radius-lg); background: var(--paper); border:1px solid var(--line); overflow:hidden; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s; } .involve-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .involve-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--grad-ember); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-out); } .involve-card:hover::before { transform: scaleY(1); } .involve-card .ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background: var(--paper-2); margin-bottom:1.2rem; font-size:1.6rem; } .involve-card h3 { font-size:1.5rem; } .involve-card p { color: var(--ink-soft); font-size:.98rem; } .involve-card .go { margin-top:1.2rem; font-weight:700; color: var(--ember); display:inline-flex; gap:.4em; align-items:center; } @media (max-width:860px){ .involve-grid{ grid-template-columns:1fr; } } /* ============================ DARK FEATURE BLOCK ===================== */ .feature-dark { background: var(--grad-teal); color: var(--cream-on-teal); } .feature-dark h2 { color:#fff; } .feature-dark .eyebrow { color: var(--gold-2); } .feature-dark .lead { color: rgba(243,236,221,.82); } /* ============================ CONTACT / FORMS ======================== */ .form-card { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.6rem); box-shadow: var(--shadow-md); border:1px solid var(--line); } .field { margin-bottom: 1.15rem; } .field label { display:block; font-weight:700; font-size:.9rem; margin-bottom:.45rem; letter-spacing:.01em; } .field .req { color: var(--ember); } .field .hint { font-weight:500; color: var(--ink-faint); font-size:.82rem; } .field input, .field textarea, .field select { width:100%; padding: .95em 1.05em; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--paper-2); border: 1.5px solid transparent; border-radius: 12px; transition: border-color .25s, background .25s, box-shadow .25s; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ember); background:#fff; box-shadow: 0 0 0 4px rgba(228,87,27,.12); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } @media (max-width:600px){ .grid-2 { grid-template-columns: 1fr; gap:0; } } /* choice chips (radio group, gamified) */ .choice-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem; } @media (max-width:600px){ .choice-grid{ grid-template-columns:1fr; } } .choice { position:relative; display:flex; align-items:center; gap:.7em; padding:.85em 1em; border:1.5px solid var(--line-strong); border-radius:12px; cursor:pointer; font-weight:600; font-size:.95rem; transition: border-color .2s, background .2s, transform .15s; } .choice:hover { border-color: var(--ember); } .choice input { position:absolute; opacity:0; } .choice .tick { width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; transition: border-color .2s, background .2s; flex:0 0 auto; } .choice .tick::after { content:""; width:8px; height:8px; border-radius:50%; background:#fff; transform:scale(0); transition: transform .2s var(--ease-out); } .choice input:checked ~ .tick { border-color: var(--ember); background: var(--ember); } .choice input:checked ~ .tick::after { transform: scale(1); } .choice:has(input:checked){ border-color: var(--ember); background: rgba(228,87,27,.06); } .choice input:focus-visible ~ .tick { box-shadow:0 0 0 4px rgba(228,87,27,.2); } .form-note { font-size:.82rem; color: var(--ink-faint); margin-top:1rem; } .form-status { margin-top:1rem; padding:.9rem 1.1rem; border-radius:12px; font-weight:600; display:none; } .form-status.show { display:block; } .form-status.ok { background: rgba(16,90,60,.1); color:#0e5a3c; } .form-status.err { background: rgba(228,87,27,.12); color: #b23c10; } .hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Success confirmation (replaces the form on submit) */ .form-done { text-align:center; padding: clamp(2.2rem,5vw,3.6rem) 1.2rem; animation: fadeIn .5s var(--ease-out); } .form-done__check { width:74px; height:74px; margin:0 auto 1.3rem; border-radius:50%; background: rgba(23,121,90,.12); color:#17795a; display:grid; place-items:center; font-size:2.3rem; font-weight:700; box-shadow: 0 0 0 8px rgba(23,121,90,.06); } .form-done h3 { font-size: clamp(1.6rem,3vw,2.3rem); margin:0 0 .5rem; } .form-done p { color: var(--ink-soft); max-width: 42ch; margin:0 auto; font-size:1.05rem; } .conditional { display:none; } .conditional.show { display:block; animation: fadeIn .4s var(--ease-out); } @keyframes fadeIn { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} } /* ============================ COUNTDOWN (gamified) =================== */ .countdown-band { background: var(--ink); color: #fff; border-radius: var(--radius-lg); overflow:hidden; position: relative; padding: clamp(1.8rem,4vw,2.8rem); box-shadow: var(--shadow-lg); } .countdown-band::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 140% at 100% 0%, rgba(228,87,27,.5), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(199,151,47,.35), transparent 50%); } .countdown-band > * { position: relative; z-index:1; } .countdown-flex { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; } .countdown-copy { max-width: 46ch; } .countdown-copy h3 { color:#fff; font-size: clamp(1.4rem,2.4vw,2rem); margin-bottom:.5rem; } .countdown-copy p { color: rgba(255,255,255,.8); margin:0; font-size:.98rem; } .countdown-copy .small { font-size:.85rem; color: rgba(255,255,255,.62); margin-top:.6rem; } .timer { display:flex; gap:.7rem; } .timer .unit { min-width: 78px; text-align:center; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:.9rem .7rem; backdrop-filter: blur(6px); } .timer .unit .n { font-family: var(--font-display); font-size: clamp(1.9rem,3vw,2.6rem); line-height:1; color: var(--gold-2); font-variant-numeric: tabular-nums; } .timer .unit .l { font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.6); margin-top:.4rem; } @media (max-width:560px){ .timer .unit{ min-width:64px; } } /* ============================ INCLUDED ITEMS ========================= */ .included-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; } @media (max-width:900px){ .included-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:600px){ .included-grid{ grid-template-columns: 1fr; } } .inc-card { background: var(--paper); border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; transition: transform .4s var(--ease-out), box-shadow .4s; } .inc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .inc-card__head { padding: 1.3rem 1.4rem .9rem; display:flex; align-items:flex-start; gap:.8rem; } .inc-card__num { font-family: var(--font-display); font-size: 1.5rem; line-height:1; background: var(--grad-ember); -webkit-background-clip:text; background-clip:text; color:transparent; flex:0 0 auto; } .inc-card__head h4 { margin:0; font-size:1.18rem; line-height:1.15; } .inc-card__img { aspect-ratio: 16/10; overflow:hidden; background: var(--paper-3); } .inc-card__img img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease-out); } .inc-card:hover .inc-card__img img { transform: scale(1.06); } .inc-card__text { padding: 1.1rem 1.4rem 1.5rem; color: var(--ink-soft); font-size:.96rem; margin:0; } /* text-only variant (no per-item image) */ .inc-card.no-img { position: relative; padding-top: .4rem; } .inc-card.no-img .inc-card__text { padding-top:.2rem; } /* ============================ HOSTED SCOPE (ticket) ================= */ .scope { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem,4vw,3rem); box-shadow: var(--shadow-md); position:relative; overflow:hidden; } .scope::before { content:""; position:absolute; inset:0 auto 0 0; width:6px; background: var(--grad-ember); } .scope__head { text-align:center; margin-bottom:2.2rem; } .scope__head h2 { font-size: clamp(1.7rem,3vw,2.6rem); } .scope__grid { display:grid; grid-template-columns:1fr 1fr; gap:0; position:relative; max-width:820px; margin-inline:auto; } .scope__grid::before { content:""; position:absolute; left:50%; top:4%; bottom:4%; border-left:2px dashed var(--line-strong); } .scope__col { padding: 0 clamp(1rem,3vw,2.4rem); } .scope__label { font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem; } .scope__col.covered .scope__label { color:#17795a; } .scope__col.byo .scope__label { color: var(--ink-faint); } .scope__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; } .scope__col li { display:flex; align-items:center; gap:.7em; font-weight:600; font-size:1.04rem; } .scope__col.covered li::before { content:"✓"; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background: rgba(23,121,90,.13); color:#17795a; font-size:.82rem; flex:0 0 auto; } .scope__col.byo li { color: var(--ink-soft); } .scope__col.byo li::before { content:"✈"; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background: var(--paper-2); color:var(--ink-faint); font-size:.8rem; flex:0 0 auto; } .scope__foot { text-align:center; max-width:60ch; margin:2rem auto 0; color: var(--ink-soft); font-style:italic; font-family: var(--font-display); font-size:1.05rem; } @media (max-width:640px){ .scope__grid { grid-template-columns:1fr; gap:1.5rem; } .scope__grid::before { display:none; } .scope__col { padding:0; } .scope__col.byo { border-top:2px dashed var(--line-strong); padding-top:1.5rem; } } /* ============================ SHARE BAND ============================ */ .share-band { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(2.4rem,5vw,3.6rem) 0; } .share-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.8rem; flex-wrap: wrap; } .share-copy .eyebrow { margin-bottom: .5rem; } .share-copy h3 { margin: 0; font-size: clamp(1.35rem,2.4vw,2rem); } .share-btns { display: flex; gap: 1rem; flex-wrap: wrap; } .share-btn { display: inline-flex; align-items: center; gap: .6em; padding: 1em 1.7em; border-radius: var(--radius-pill); font-weight: 700; font-size: 1.05rem; color: #fff; box-shadow: var(--shadow-md); transition: transform .3s var(--ease-out), box-shadow .3s, filter .3s; } .share-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); filter: brightness(1.07); } .share-btn:active { transform: translateY(-1px); } .share-btn svg { width: 22px; height: 22px; fill: currentColor; } .share-btn.fb { background: #1877F2; } .share-btn.x { background: #14100E; } .share-btn.li { background: #0A66C2; } @media (max-width: 640px){ .share-inner { flex-direction: column; align-items: flex-start; } .share-btns { width: 100%; } .share-btn { flex: 1; justify-content: center; } } /* ============================ TRIP VIDEO ============================= */ .trip-video { position: relative; max-width: 980px; margin: 2.4rem auto 0; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; } .trip-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .footer-logo { height: 54px; width: auto; margin-bottom: 1.3rem; } /* ============================ EXPERIENCE PAGE BITS =================== */ .trip-facts { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; } @media (max-width:760px){ .trip-facts{ grid-template-columns:1fr; } } .fact { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding:1.4rem 1.5rem; box-shadow: var(--shadow-sm); } .fact .k { font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--ember); margin-bottom:.5rem; } .fact .v { font-size:1rem; color: var(--ink-soft); } .fact .v strong { color: var(--ink); } .pill-row { display:flex; flex-wrap:wrap; gap:.55rem; margin: 1.4rem 0 0; } .pill { padding:.5em 1em; border-radius: var(--radius-pill); background: var(--paper-2); border:1px solid var(--line); font-size:.85rem; font-weight:600; } /* ============================ FOOTER ================================= */ .site-footer { background: var(--grad-teal); color: var(--cream-on-teal); padding: clamp(3.5rem,6vw,5.5rem) 0 2.5rem; } .footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; } .footer-brand img { height: 56px; margin-bottom:1.2rem; } .footer-brand p { color: rgba(243,236,221,.7); font-size:.95rem; max-width: 34ch; } .footer-col h5 { font-family: var(--font-sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-2); margin:0 0 1.1rem; } .footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; } .footer-col a { color: rgba(243,236,221,.82); font-size:.95rem; transition: color .25s, padding .25s; } .footer-col a:hover { color:#fff; padding-left:.25rem; } .footer-social { display:flex; gap:.6rem; margin-top:1.2rem; } .footer-social a { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); transition: background .25s, transform .25s; } .footer-social a:hover { background: var(--ember); transform: translateY(-3px); } .footer-social svg { width:18px; height:18px; fill: currentColor; } .footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color: rgba(243,236,221,.6); } .footer-bottom a:hover { color:#fff; } @media (max-width:860px){ .footer-top{ grid-template-columns: 1fr 1fr; gap:2rem; } .footer-brand{ grid-column:1/-1; } } @media (max-width:520px){ .footer-top{ grid-template-columns: 1fr; } } /* ============================ REVEAL ANIMATIONS ====================== */ [data-reveal] { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } [data-reveal].in { opacity:1; transform:none; } [data-reveal][data-delay="1"]{ transition-delay:.08s; } [data-reveal][data-delay="2"]{ transition-delay:.16s; } [data-reveal][data-delay="3"]{ transition-delay:.24s; } [data-reveal][data-delay="4"]{ transition-delay:.32s; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal]{ opacity:1; transform:none; } html { scroll-behavior: auto; } } /* ============================ UTIL =================================== */ .subhero { padding: 10rem 0 3.5rem; background: var(--paper-2); border-bottom:1px solid var(--line); } .subhero.center { text-align:center; } .breadcrumb { font-size:.82rem; color: var(--ink-faint); margin-bottom:1rem; letter-spacing:.04em; } .breadcrumb a:hover { color: var(--ember); } .divider-spark { display:flex; align-items:center; justify-content:center; gap:1rem; color: var(--gold); margin: 1rem 0; } .divider-spark::before, .divider-spark::after { content:""; height:1px; width:60px; background: var(--line-strong); } .text-ember { color: var(--ember); } .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem} .mb-0{margin-bottom:0} .anchor { scroll-margin-top: 90px; }