/* ============================================================================ BRODMAN · FIELD NOTES — travel-assistant design system Editorial quiet-luxury. One serif (Fraunces), one grotesque (Hanken), one instrument mono (Space Mono). Warm "Bone & Ink" foundation + per-destination accent theming. Mobile-first, Z Fold 6 + iPhone. No framework, no build step. Self-hostable. ========================================================================== */ /* ---------------------------------------------------------------- 0. FONTS */ /* Self-hosted variable woff2 live in css/fonts.css (loaded before this file). Fallback stacks below keep the layout intact even before the fonts paint. */ /* ---------------------------------------------------------------- 1. RESET */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; } h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; } ul[class],ol[class]{ list-style:none; margin:0; padding:0; } img,picture,svg,video{ display:block; max-width:100%; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; padding:0; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } ::selection{ background:color-mix(in srgb, var(--accent) 26%, transparent); } /* ------------------------------------------------------------- 2. TOKENS */ :root{ /* — warm neutrals (the paper) — */ --bone-50:#FAF7F1; --bone-100:#F4EFE6; --bone-200:#E9E2D5; --line:#E4DCCE; --card:#FCFAF5; /* — ink (warm near-blacks) — */ --ink-900:#151109; --ink-700:#2B2419; --ink-500:#5E5648; --ink-400:#8B8271; --brass:#B08A57; /* — semantic — */ --ok:#3E7A5E; --warn:#B4802E; --bad:#A23B34; /* — accent (brand default: Atlas pine — overridden per [data-dest]) — */ --accent:#2E5D4E; --accent-deep:#1D3E34; --accent-tint:#E3EDE7; --accent-contrast:#F7F4EE; /* — type — */ --sans:"Hanken Grotesk",Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --serif:"Fraunces",Cormorant Garamond,Georgia,"Times New Roman",serif; --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --t-display:clamp(2.75rem,6vw + .5rem,5.5rem); --t-h1:clamp(2.25rem,4vw,3.25rem); --t-h2:clamp(1.75rem,3vw,2.25rem); --t-h3:clamp(1.25rem,2vw,1.5rem); --t-lede:clamp(1.1875rem,1.5vw,1.375rem); --t-body:clamp(1.0625rem,1vw,1.125rem); --t-small:.9375rem; --t-label:.75rem; --t-mono:.8125rem; /* — spacing (8px base) — */ --s-3xs:4px; --s-2xs:8px; --s-xs:12px; --s-sm:16px; --s-md:24px; --s-lg:32px; --s-xl:48px; --s-2xl:64px; --s-3xl:96px; --s-4xl:128px; --s-5xl:160px; /* — radii — */ --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* — shadows (soft, warm, layered) — */ --sh-sm:0 1px 2px rgba(20,17,11,.04),0 1px 3px rgba(20,17,11,.06); --sh-md:0 4px 12px -2px rgba(20,17,11,.08),0 2px 6px -2px rgba(20,17,11,.06); --sh-lg:0 18px 40px -12px rgba(20,17,11,.18),0 8px 16px -8px rgba(20,17,11,.10); --sh-hover:0 24px 60px -16px rgba(20,17,11,.22); /* — motion — */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --d-micro:140ms; --d-fast:220ms; --d-base:320ms; --d-slow:600ms; --d-hero:800ms; /* — containers — */ --w-prose:720px; --w-std:1200px; --w-wide:1440px; --gutter:20px; color-scheme:light; } @media (min-width:768px){ :root{ --gutter:32px; } } @media (min-width:1100px){ :root{ --gutter:48px; } } /* — per-destination accent theming (set data-dest on or a wrapper) — */ [data-dest="atlas"] { --accent:#2E5D4E; --accent-deep:#1D3E34; --accent-tint:#E3EDE7; --accent-contrast:#F7F4EE; } [data-dest="sf"] { --accent:#1E6E7E; --accent-deep:#124651; --accent-tint:#E0EDEF; --accent-contrast:#F7F4EE; } [data-dest="maine"] { --accent:#3A5A6E; --accent-deep:#243B49; --accent-tint:#E6ECEF; --accent-contrast:#F7F4EE; } [data-dest="hawaii"]{ --accent:#B85C38; --accent-deep:#7E3A22; --accent-tint:#F6E7DE; --accent-contrast:#FBF6EF; } [data-dest="vegas"] { --accent:#9A2F4F; --accent-deep:#6E1F39; --accent-tint:#F3E1E7; --accent-contrast:#FBF3F1; } [data-dest="japan"] { --accent:#2C3E63; --accent-deep:#1C2A47; --accent-tint:#E4E7EF; --accent-contrast:#F7F4EE; } [data-dest="korea"] { --accent:#6E3A63; --accent-deep:#4A2643; --accent-tint:#EFE4EE; --accent-contrast:#F8F4F7; } [data-dest="vancouver"]{ --accent:#2B6E6A; --accent-deep:#1A4744; --accent-tint:#E1EDEC; --accent-contrast:#F7F4EE; } /* — dark "After Dark" mode (warm charcoal, never pure black) — */ :root[data-theme="dark"]{ --bone-50:#0E0D0B; --bone-100:#14120E; --bone-200:#1C1914; --card:#1A1712; --line:#2E2A20; --ink-900:#EFE9DD; --ink-700:#D8D0C2; --ink-500:#A79E8D; --ink-400:#857C6C; --brass:#C6A06A; color-scheme:dark; } :root[data-theme="dark"] [data-dest="atlas"] { --accent:#4E8C77; --accent-tint:#16302A; } :root[data-theme="dark"] [data-dest="sf"] { --accent:#3E9AAC; --accent-tint:#0F2E36; } :root[data-theme="dark"] [data-dest="maine"] { --accent:#5E86A0; --accent-tint:#16262F; } :root[data-theme="dark"] [data-dest="hawaii"]{ --accent:#DB7B4F; --accent-tint:#30190E; } :root[data-theme="dark"] [data-dest="vegas"] { --accent:#C85878; --accent-tint:#2C1220; } :root[data-theme="dark"] [data-dest="japan"] { --accent:#5E77AE; --accent-tint:#141C30; } :root[data-theme="dark"] .hero__media img{ filter:grayscale(.15) contrast(1.02) brightness(.9); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .event__card, :root[data-theme="dark"] .spotlight{ box-shadow:var(--sh-sm); } /* ------------------------------------------------------------- 3. BASE */ body{ font-family:var(--sans); font-size:17px; line-height:1.65; font-weight:400; color:var(--ink-700); background:var(--bone-50); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; transition:background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } @media (min-width:768px){ body{ font-size:18px; } } h1,h2,h3{ font-family:var(--serif); color:var(--ink-900); font-weight:400; text-wrap:balance; } p{ text-wrap:pretty; } strong,b{ font-weight:600; color:var(--ink-900); } time,.tabular{ font-variant-numeric:tabular-nums; } .serif{ font-family:var(--serif); } .mono{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.02em; } /* eyebrow / kicker label */ .eyebrow{ font-family:var(--sans); font-weight:600; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-500); display:inline-flex; align-items:center; gap:.6em; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--brass); display:inline-block; } .eyebrow--plain::before{ display:none; } /* prose link with animated underline */ .link{ color:var(--accent); font-weight:500; background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; transition:background-size var(--d-fast) var(--ease-out); padding-bottom:1px; } .link:hover,.link:focus-visible{ background-size:100% 1.5px; } /* ------------------------------------------------------------- 4. LAYOUT */ .container{ width:100%; max-width:var(--w-std); margin-inline:auto; padding-inline:var(--gutter); } .container--wide{ max-width:var(--w-wide); } .container--prose{ max-width:var(--w-prose); } .section{ padding-block:var(--s-2xl); } @media (min-width:768px){ .section{ padding-block:var(--s-3xl); } } @media (min-width:1100px){ .section{ padding-block:clamp(96px,10vw,160px); } } .section--tight{ padding-block:var(--s-xl); } .section--band{ background:var(--bone-100); } .section--sand{ background:var(--bone-200); } .section__head{ max-width:var(--w-prose); margin-bottom:var(--s-xl); } .section__title{ font-size:var(--t-h1); line-height:1.08; letter-spacing:-.015em; margin-top:var(--s-xs); } .section__lede{ font-family:var(--serif); font-style:italic; font-weight:380; font-size:var(--t-lede); line-height:1.5; color:var(--ink-500); margin-top:var(--s-sm); } .rule-brass{ width:44px; height:2px; background:var(--brass); border:0; margin:var(--s-md) 0; } /* scroll-reveal base (only active when ) */ .js .reveal{ opacity:0; transform:translateY(20px); } .js .reveal.is-in{ opacity:1; transform:none; transition:opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); transition-delay:calc(var(--i,0) * 60ms); } /* ------------------------------------------------------------- 5. CHIPS */ .chip{ display:inline-flex; align-items:center; gap:.45em; padding:.34em .7em; border-radius:var(--r-pill); font-size:.8125rem; font-weight:600; line-height:1; background:var(--bone-200); color:var(--ink-700); white-space:nowrap; } .chip svg{ width:1em; height:1em; } .chip--accent{ background:var(--accent-tint); color:var(--accent-deep); } .chip--drive{ background:var(--bone-200); color:var(--ink-700); } .chip--drive .n{ font-family:var(--mono); font-size:.8em; color:var(--accent-deep); } .chip--drive svg,.chip--accent svg{ color:var(--accent); } /* trip status pill (Upcoming / Live now / Complete) */ .status{ display:inline-flex; align-items:center; gap:.5em; padding:.4em .8em; border-radius:var(--r-pill); font-size:var(--t-label); font-weight:700; text-transform:uppercase; letter-spacing:.12em; } .status .dot{ width:.55em; height:.55em; border-radius:50%; background:currentColor; } .status--upcoming{ background:var(--accent-tint); color:var(--accent-deep); } .status--live{ background:var(--bad); color:#fff; } .status--live .dot{ animation:pulse 1.8s var(--ease-in-out) infinite; } .status--past{ background:var(--bone-200); color:var(--ink-500); } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} } /* ------------------------------------------------------------- 6. NAV */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:var(--s-md); padding:var(--s-sm) var(--gutter); transition:transform var(--d-base) var(--ease-out), background var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); border-bottom:1px solid transparent; } .nav__brand{ font-family:var(--serif); font-size:1.15rem; font-weight:500; letter-spacing:-.01em; color:var(--nav-fg,#fff); display:inline-flex; align-items:baseline; gap:.5ch; } .nav__brand .dot{ color:var(--accent); } .nav__links{ display:none; align-items:center; gap:var(--s-lg); } .nav__links a{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.13em; font-weight:600; color:var(--nav-fg,#fff); opacity:.85; transition:opacity var(--d-fast); } .nav__links a:hover{ opacity:1; } .nav__actions{ display:flex; align-items:center; gap:var(--s-xs); } .nav__toggle{ width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--nav-fg,#fff); border:1px solid color-mix(in srgb,currentColor 26%,transparent); } .nav__toggle svg{ width:18px; height:18px; } .nav--solid{ background:color-mix(in srgb,var(--bone-50) 86%,transparent); -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); border-bottom-color:var(--line); box-shadow:var(--sh-sm); --nav-fg:var(--ink-900); } .nav--hidden{ transform:translateY(-100%); } .nav__menu-btn{ display:inline-flex; } @media (min-width:900px){ .nav__links{ display:flex; } .nav__menu-btn{ display:none; } } /* mobile full-screen menu */ .navmenu{ position:fixed; inset:0; z-index:99; background:var(--bone-50); display:flex; flex-direction:column; justify-content:center; gap:var(--s-md); padding:var(--s-4xl) var(--gutter) var(--s-2xl); transform:translateY(-8%); opacity:0; pointer-events:none; transition:opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); } .navmenu.is-open{ transform:none; opacity:1; pointer-events:auto; } .navmenu a{ font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); color:var(--ink-900); line-height:1.1; opacity:0; transform:translateY(12px); } .navmenu.is-open a{ opacity:1; transform:none; transition:opacity var(--d-base) var(--ease-out) calc(var(--i,0)*55ms), transform var(--d-base) var(--ease-out) calc(var(--i,0)*55ms); } .navmenu a .idx{ font-family:var(--mono); font-size:.9rem; color:var(--accent); margin-right:1ch; vertical-align:super; } /* ------------------------------------------------------------- 7. HERO */ .hero{ position:relative; isolation:isolate; min-height:clamp(78vh,88svh,92dvh); display:flex; align-items:flex-end; overflow:hidden; } .hero__media{ position:absolute; inset:0; z-index:-2; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--focal,center); filter:grayscale(.14) contrast(1.05); animation:kenburns 20s var(--ease-in-out) alternate infinite; } @keyframes kenburns{ from{ transform:scale(1);} to{ transform:scale(1.06);} } .hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(21,17,9,.20) 0%, rgba(21,17,9,0) 26%, rgba(21,17,9,.72) 100%), linear-gradient(0deg, color-mix(in srgb,var(--accent-deep) 30%,transparent), transparent 60%); } .hero__content{ position:relative; width:100%; max-width:var(--w-std); margin-inline:auto; padding:var(--gutter); padding-bottom:clamp(var(--s-xl),9vh,var(--s-3xl)); color:#F6F1E7; } .hero__eyebrow{ color:#E8DFCF; } .hero__eyebrow::before{ background:var(--accent-contrast); opacity:.8; } .hero__title{ font-size:var(--t-display); line-height:1.02; letter-spacing:-.02em; color:#FBF7EF; margin:var(--s-sm) 0 var(--s-sm); font-weight:400; font-variation-settings:"opsz" 144; } .hero__title .line{ display:block; overflow:hidden; } .hero__title .line > span{ display:block; transform:translateY(102%); } .js .hero__title .line > span{ animation:linereveal var(--d-hero) var(--ease-out) forwards; animation-delay:calc(var(--i,0)*90ms + 120ms); } @keyframes linereveal{ to{ transform:none; } } .hero__dates{ font-family:var(--mono); font-size:.95rem; letter-spacing:.02em; color:#EDE6D7; display:flex; flex-wrap:wrap; gap:.6ch 1.2ch; align-items:center; } .hero__dates .sep{ opacity:.5; } .hero__sub{ font-family:var(--serif); font-style:italic; font-size:var(--t-lede); color:#EFE9DC; max-width:34ch; margin-top:var(--s-sm); } .hero__meta{ margin-top:var(--s-md); } /* at-a-glance bento (overlaps hero bottom) */ .stats{ position:relative; z-index:2; margin-top:calc(-1 * var(--s-lg)); display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); } .stat{ background:var(--card); padding:var(--s-md) var(--s-md); display:flex; flex-direction:column; gap:.3em; } .stat__k{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-400); font-weight:600; } .stat__v{ font-family:var(--serif); font-size:clamp(1.15rem,3.2vw,1.6rem); color:var(--ink-900); line-height:1.1; } .stat__v small{ font-family:var(--sans); font-size:.62em; color:var(--ink-500); font-weight:500; display:block; margin-top:.2em; letter-spacing:0; } .stat .mono{ font-size:.8em; color:var(--accent-deep); } @media (min-width:720px){ .stats{ grid-template-columns:repeat(4,1fr); } .stat{ padding:var(--s-lg) var(--s-md); } } @media (min-width:1024px){ .stats--6{ grid-template-columns:repeat(6,1fr); } } /* ------------------------------------------------------- 8. ITINERARY */ .itin{ position:relative; } @media (min-width:1024px){ .itin__grid{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--s-2xl); align-items:start; } .itin__grid.itin--map{ grid-template-columns:180px minmax(0,1fr) minmax(300px,.82fr); gap:var(--s-xl); } } /* day-nav: sticky left rail (desktop) / bottom segmented (mobile) */ .daynav{ --thumb-x:0; --thumb-w:0; } .daynav__rail{ display:none; } @media (min-width:1024px){ .daynav__rail{ display:flex; flex-direction:column; gap:2px; position:sticky; top:96px; } .daynav__rail button{ text-align:left; padding:.7em .9em; border-radius:var(--r-sm); color:var(--ink-500); font-weight:600; font-size:.95rem; line-height:1.2; display:flex; gap:.7em; align-items:baseline; transition:background var(--d-fast),color var(--d-fast); } .daynav__rail button .num{ font-family:var(--mono); font-size:.8em; color:var(--ink-400); } .daynav__rail button .dow{ display:block; font-size:.72em; font-weight:500; color:var(--ink-400); letter-spacing:.06em; text-transform:uppercase; } .daynav__rail button:hover{ background:var(--bone-100); color:var(--ink-900); } .daynav__rail button[aria-current="true"]{ background:var(--accent-tint); color:var(--accent-deep); } .daynav__rail button[aria-current="true"] .num{ color:var(--accent); } } /* mobile bottom day switcher (segmented, scroll-snap) */ .daybar{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:var(--s-2xs) var(--s-2xs) calc(var(--s-2xs) + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bone-50) 88%,transparent); -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3); border-top:1px solid var(--line); transform:translateY(120%); transition:transform var(--d-base) var(--ease-out); } .daybar.is-shown{ transform:none; } .daybar__track{ display:flex; gap:var(--s-3xs); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; } .daybar__track::-webkit-scrollbar{ display:none; } .daybar button{ scroll-snap-align:center; flex:0 0 auto; padding:.5em .9em; border-radius:var(--r-pill); font-weight:600; font-size:.85rem; color:var(--ink-500); white-space:nowrap; border:1px solid transparent; transition:background var(--d-fast),color var(--d-fast); } .daybar button .num{ font-family:var(--mono); font-size:.85em; } .daybar button[aria-current="true"]{ background:var(--accent); color:var(--accent-contrast); } .daybar button.is-today[aria-current="true"]{ background:var(--accent); } .daybar button.is-today::after{ content:"·today"; font-family:var(--mono); font-size:.7em; opacity:.7; margin-left:.3ch; } @media (min-width:1024px){ .daybar{ display:none; } } /* timeline */ .timeline{ position:relative; } .day{ padding-block:var(--s-lg) var(--s-md); scroll-margin-top:90px; } .day + .day{ border-top:1px solid var(--line); } .day__head{ display:flex; align-items:baseline; gap:var(--s-md); margin-bottom:var(--s-lg); flex-wrap:wrap; } .day__num{ font-family:var(--serif); font-size:clamp(2.4rem,7vw,3.4rem); line-height:.9; color:var(--accent); font-variation-settings:"opsz" 96; } .day__meta{ display:flex; flex-direction:column; gap:.15em; } .day__dow{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-400); font-weight:600; } .day__date{ font-family:var(--serif); font-size:var(--t-h3); color:var(--ink-900); } .day__summary{ font-family:var(--serif); font-style:italic; color:var(--ink-500); font-size:1.05rem; flex-basis:100%; max-width:60ch; } .day.is-today .day__num{ position:relative; } .day.is-today .day__head::after{ content:"Today"; align-self:center; font-size:var(--t-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-contrast); background:var(--accent); padding:.35em .7em; border-radius:var(--r-pill); } /* events */ .events{ display:flex; flex-direction:column; } .event{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--s-md); padding-left:var(--s-2xs); } .event__spine{ display:flex; flex-direction:column; align-items:center; } .event__time{ font-family:var(--mono); font-size:.8rem; color:var(--ink-500); white-space:nowrap; padding-top:.15em; min-width:5.4ch; text-align:right; } .event__dot{ width:13px; height:13px; border-radius:50%; margin:.5em 0 0; background:var(--accent); box-shadow:0 0 0 4px var(--bone-50); position:relative; z-index:1; } .event__dot--tentative{ background:var(--bone-50); border:2px solid var(--accent); } .event__dot--done{ background:var(--ok); } .event__line{ width:2px; flex:1; background:var(--line); margin-top:4px; } .event:last-child .event__line{ display:none; } .event__body{ padding-bottom:var(--s-lg); min-width:0; } .event__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base); } @media (hover:hover){ .event__card:hover{ transform:translateY(-4px); box-shadow:var(--sh-hover); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); } .event__card:hover .event__thumb img{ transform:scale(1.05); } } .event__card.is-tentative{ border-style:dashed; } .event__grid{ display:grid; grid-template-columns:1fr; } .event__card.has-thumb .event__grid{ grid-template-columns:1fr; } @media (min-width:560px){ .event__card.has-thumb .event__grid{ grid-template-columns:34% 1fr; } } .event__thumb{ overflow:hidden; background:var(--bone-200); aspect-ratio:4/3; } @media (min-width:560px){ .event__card.has-thumb .event__thumb{ aspect-ratio:auto; height:100%; min-height:150px; } } .event__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease-out); } .event__main{ padding:var(--s-md); display:flex; flex-direction:column; gap:.5em; } .event__cat{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--accent-deep); } .event__cat .ico{ font-size:1rem; } .event__title{ font-family:var(--serif); font-size:var(--t-h3); line-height:1.2; color:var(--ink-900); } .event__meta{ display:flex; flex-wrap:wrap; gap:.5em; align-items:center; color:var(--ink-500); font-size:var(--t-small); } .event__meta .loc{ display:inline-flex; align-items:center; gap:.4em; } .event__note{ color:var(--ink-500); font-size:var(--t-small); } .event__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2xs); margin-top:.4em; } .btn-mini{ display:inline-flex; align-items:center; gap:.45em; padding:.45em .8em; border-radius:var(--r-pill); font-size:.8rem; font-weight:600; background:var(--bone-100); color:var(--ink-700); border:1px solid var(--line); transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast); } .btn-mini svg{ width:14px; height:14px; } .btn-mini:hover{ background:var(--accent-tint); color:var(--accent-deep); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); } .btn-mini--conf{ font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; background:transparent; } /* expandable details */ .event__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-base) var(--ease-out); } .event__card.is-open .event__more{ grid-template-rows:1fr; } .event__more > div{ overflow:hidden; } .event__more dl{ display:grid; grid-template-columns:auto 1fr; gap:.35em var(--s-md); margin-top:.6em; font-size:var(--t-small); } .event__more dt{ color:var(--ink-400); font-weight:600; } .event__toggle{ align-self:flex-start; color:var(--accent); font-weight:600; font-size:.85rem; display:inline-flex; align-items:center; gap:.4em; } .event__toggle svg{ transition:transform var(--d-fast); } .event__card.is-open .event__toggle svg{ transform:rotate(180deg); } /* DONE state — done-with-results recap (the "living" payoff) */ .event.is-done .event__card{ border-color:color-mix(in srgb,var(--ok) 30%,var(--line)); } .event__result{ margin-top:.4em; padding:var(--s-sm) var(--s-md); background:color-mix(in srgb,var(--ok) 8%,var(--card)); border-top:1px solid color-mix(in srgb,var(--ok) 22%,var(--line)); display:flex; flex-direction:column; gap:.5em; } .event__result-h{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ok); } .event__result-h svg{ width:15px; height:15px; } .event__result p{ font-size:var(--t-small); color:var(--ink-700); } .event__result-shots{ display:flex; gap:var(--s-2xs); flex-wrap:wrap; } .event__result-shots img{ width:72px; height:72px; object-fit:cover; border-radius:var(--r-sm); cursor:zoom-in; border:1px solid var(--line); } .event.is-done .event__cat{ color:var(--ok); } /* now / next markers when trip is live */ .event.is-now .event__card{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent), var(--sh-md); } .event.is-now .event__cat::after{ content:"Now"; margin-left:.4em; background:var(--accent); color:var(--accent-contrast); padding:.15em .5em; border-radius:var(--r-pill); font-size:.85em; } /* travel leg connector between events */ .leg{ display:flex; align-items:center; gap:.6em; margin:0 0 var(--s-md) calc(5.4ch + var(--s-md) + 6px); color:var(--ink-400); font-size:.8rem; } .leg::before{ content:""; width:2px; height:20px; background:var(--line); margin-left:5px; } .leg .chip--drive{ font-size:.75rem; } /* ------------------------------------------------------- 9. SPOTLIGHT */ .spotlight{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-md); display:grid; grid-template-columns:1fr; } @media (min-width:800px){ .spotlight{ grid-template-columns:1.15fr 1fr; } .spotlight--flip{ grid-template-columns:1fr 1.15fr; } .spotlight--flip .spotlight__media{ order:2; } } .spotlight__media{ position:relative; min-height:220px; background:var(--bone-200); overflow:hidden; } .spotlight__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease-out); } @media (hover:hover){ .spotlight:hover .spotlight__media img{ transform:scale(1.04); } } .spotlight__tag{ position:absolute; top:var(--s-sm); left:var(--s-sm); } .spotlight__body{ padding:var(--s-lg); display:flex; flex-direction:column; gap:var(--s-sm); } .spotlight__name{ font-family:var(--serif); font-size:var(--t-h2); line-height:1.1; color:var(--ink-900); } .spotlight__blurb{ font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.55; color:var(--ink-500); } .spotlight__facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .fact{ background:var(--card); padding:.7em .9em; } .fact__k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-400); font-weight:600; } .fact__v{ font-size:.92rem; color:var(--ink-900); font-weight:500; margin-top:.15em; } .spotlight__cta{ display:flex; flex-wrap:wrap; gap:var(--s-2xs); margin-top:auto; } /* generic card grid (dining, coffee) */ .cardgrid{ display:grid; gap:var(--s-md); grid-template-columns:1fr; } @media (min-width:620px){ .cardgrid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px){ .cardgrid--3{ grid-template-columns:repeat(3,1fr); } } .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-md); display:flex; flex-direction:column; gap:.4em; box-shadow:var(--sh-sm); transition:transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base); } @media (hover:hover){ .card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); } } .card__eyebrow{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-deep); font-weight:600; } .card__title{ font-family:var(--serif); font-size:1.2rem; color:var(--ink-900); line-height:1.2; } .card__title .badge{ font-family:var(--sans); font-size:.6em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); vertical-align:middle; margin-left:.5ch; } .card__body{ font-size:var(--t-small); color:var(--ink-500); } .card__meta{ display:flex; flex-wrap:wrap; gap:.4em; margin-top:auto; padding-top:.4em; } /* ------------------------------------------------------- 10. MAP */ .map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-md); position:relative; background:var(--bone-100); } .map__canvas{ width:100%; height:clamp(300px,52vh,520px); background:var(--bone-100); } @media (min-width:1024px){ .itin__grid.itin--map .map{ position:sticky; top:96px; } .itin__grid.itin--map .map__canvas{ height:min(72vh,640px); } } .map__legend{ position:absolute; left:10px; bottom:10px; z-index:500; background:color-mix(in srgb,var(--bone-50) 90%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r-md); padding:.5em .7em; font-size:.72rem; display:flex; flex-direction:column; gap:.25em; max-width:52%; } .map__legend b{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); } .map__legend .row{ display:flex; align-items:center; gap:.5em; color:var(--ink-700); } .map__legend .pin{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-size:.6rem; font-weight:700; } .leaflet-pin{ display:grid; place-items:center; width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:var(--sh-md); border:2px solid #fff; font-weight:700; color:#fff; } .leaflet-pin span{ transform:rotate(45deg); font-size:.72rem; font-family:var(--mono); } .map__hint{ position:absolute; top:10px; right:10px; z-index:500; background:color-mix(in srgb,var(--bone-50) 90%,transparent); border:1px solid var(--line); border-radius:var(--r-pill); padding:.35em .8em; font-size:.72rem; color:var(--ink-500); pointer-events:none; opacity:1; transition:opacity var(--d-base); } .map.is-live .map__hint{ opacity:0; } /* ------------------------------------------------------- 11. GALLERY */ .gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-2xs); } @media (min-width:700px){ .gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:var(--s-xs); } } .gallery figure{ position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--bone-200); } .gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1; transition:transform var(--d-slow) var(--ease-out), filter var(--d-base); cursor:zoom-in; } .gallery figure.tall{ grid-row:span 2; } .gallery figure.wide{ grid-column:span 2; } .gallery figure.tall img,.gallery figure.wide img{ aspect-ratio:auto; } @media (hover:hover){ .gallery img:hover{ transform:scale(1.05); } } .gallery figcaption{ position:absolute; left:0; right:0; bottom:0; padding:.6em .7em; font-size:.72rem; color:#fff; background:linear-gradient(0deg,rgba(20,17,11,.7),transparent); opacity:0; transition:opacity var(--d-fast); pointer-events:none; } @media (hover:hover){ .gallery figure:hover figcaption{ opacity:1; } } /* lightbox */ .lightbox{ position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:var(--s-md); background:rgba(12,10,7,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .lightbox.is-open{ display:grid; } .lightbox__img{ max-width:min(96vw,1400px); max-height:86vh; object-fit:contain; border-radius:var(--r-sm); box-shadow:var(--sh-lg); } .js .lightbox.is-open .lightbox__img{ animation:lbin var(--d-base) var(--ease-out); } @keyframes lbin{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:none; } } .lightbox__cap{ position:absolute; left:0; right:0; bottom:var(--s-md); text-align:center; color:#EDE6D7; font-size:.85rem; font-family:var(--sans); } .lightbox__count{ font-family:var(--mono); opacity:.7; margin-left:1ch; } .lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); transition:background var(--d-fast); } .lightbox__btn:hover{ background:rgba(255,255,255,.22); } .lightbox__prev{ left:var(--s-md); } .lightbox__next{ right:var(--s-md); } .lightbox__close{ top:var(--s-md); right:var(--s-md); transform:none; } .lightbox__btn svg{ width:22px; height:22px; } /* ------------------------------------------------------- 12. ACCORDION */ .faq{ display:flex; flex-direction:column; } .faq details{ border-bottom:1px solid var(--line); } .faq summary{ list-style:none; cursor:pointer; padding:var(--s-md) 0; display:flex; align-items:center; justify-content:space-between; gap:var(--s-md); font-family:var(--serif); font-size:1.2rem; color:var(--ink-900); transition:color var(--d-fast); } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--accent-deep); } .faq summary .chev{ flex:0 0 auto; transition:transform var(--d-base) var(--ease-out); color:var(--accent); } .faq details[open] summary .chev{ transform:rotate(180deg); } .faq__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-base) var(--ease-out); } .faq details[open] .faq__body{ grid-template-rows:1fr; } .faq__body > div{ overflow:hidden; } .faq__body p{ padding-bottom:var(--s-md); color:var(--ink-500); font-size:var(--t-body); max-width:66ch; } /* ------------------------------------------------------- 13. TRIP CARDS */ .trips-grid{ display:grid; gap:var(--s-lg); grid-template-columns:1fr; } @media (min-width:700px){ .trips-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1080px){ .trips-grid--3{ grid-template-columns:repeat(3,1fr); } } .tcard{ position:relative; display:block; border-radius:var(--r-xl); overflow:hidden; background:var(--ink-900); box-shadow:var(--sh-md); isolation:isolate; min-height:340px; } .tcard__cover{ position:absolute; inset:0; z-index:-2; } .tcard__cover img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease-out); filter:grayscale(.12) contrast(1.04); } .tcard::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,12,7,.05) 0%,rgba(15,12,7,.15) 40%,rgba(15,12,7,.82) 100%); } @media (hover:hover){ .tcard:hover .tcard__cover img{ transform:scale(1.05); } } .tcard__body{ position:relative; height:100%; min-height:inherit; display:flex; flex-direction:column; justify-content:flex-end; gap:.4em; padding:var(--s-lg); color:#F6F1E7; } .tcard__place{ font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.05; color:#FBF7EF; } .tcard__region{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em; color:#E7DECE; font-weight:600; } .tcard__dates{ font-family:var(--mono); font-size:.82rem; color:#EAE2D2; } .tcard__meta{ display:flex; gap:.5em; flex-wrap:wrap; margin-top:.3em; } .tcard__go{ margin-top:.5em; font-size:.85rem; font-weight:600; color:#fff; display:inline-flex; align-items:center; gap:.5em; opacity:.9; } .tcard__go svg{ width:15px; height:15px; transition:transform var(--d-fast); } @media (hover:hover){ .tcard:hover .tcard__go svg{ transform:translateX(4px); } } .tcard__status{ position:absolute; top:var(--s-md); left:var(--s-md); z-index:1; } /* featured hero card w/ countdown */ .tcard--featured{ grid-column:1/-1; min-height:clamp(360px,54vh,520px); } .tcard--featured .tcard__place{ font-size:clamp(2.2rem,6vw,3.6rem); } .countdown{ display:flex; gap:var(--s-md); margin-top:var(--s-sm); } .countdown__u{ display:flex; flex-direction:column; } .countdown__n{ font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.4rem); line-height:1; color:#fff; font-variant-numeric:tabular-nums; } .countdown__l{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:#E7DECE; margin-top:.3em; } /* past archive: denser, desaturated until hover */ .tcard--past{ min-height:260px; } .tcard--past .tcard__cover img{ filter:grayscale(.55) contrast(1.02) brightness(.92); transition:filter var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); } @media (hover:hover){ .tcard--past:hover .tcard__cover img{ filter:grayscale(0) contrast(1.04); } } /* image-less archive tile — rich per-destination accent panel */ .tcard--noimg{ background:linear-gradient(158deg, var(--accent-deep), color-mix(in srgb, var(--accent) 60%, #0d0a05)); min-height:240px; } .tcard--noimg::after{ background:radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.08), transparent 55%), linear-gradient(180deg, rgba(13,10,5,.02), rgba(13,10,5,.30)); } .tcard--noimg .tcard__region{ color:color-mix(in srgb, var(--accent-contrast) 88%, transparent); } @media (hover:hover){ .tcard--noimg:hover{ box-shadow:var(--sh-hover); } } .year-head{ display:flex; align-items:center; gap:var(--s-md); margin:var(--s-2xl) 0 var(--s-lg); } .year-head h3{ font-family:var(--serif); font-size:var(--t-h2); color:var(--ink-900); } .year-head .line{ flex:1; height:1px; background:var(--line); } /* ------------------------------------------------------- 14. SEGMENTED */ .segmented{ display:inline-flex; position:relative; background:var(--bone-200); border-radius:var(--r-pill); padding:3px; gap:2px; } .segmented__thumb{ position:absolute; top:3px; bottom:3px; left:0; width:0; background:var(--accent); border-radius:var(--r-pill); transition:transform var(--d-base) var(--ease-out), width var(--d-base) var(--ease-out); z-index:0; } .segmented button{ position:relative; z-index:1; padding:.5em 1em; border-radius:var(--r-pill); font-weight:600; font-size:.85rem; color:var(--ink-500); transition:color var(--d-base); } .segmented button[aria-selected="true"]{ color:var(--accent-contrast); } /* ------------------------------------------------------- 15. FOOTER */ .footer{ background:var(--bone-100); border-top:2px solid var(--brass); padding-block:var(--s-3xl) var(--s-xl); margin-top:var(--s-2xl); } .footer__mono{ font-family:var(--serif); font-size:clamp(3rem,12vw,7rem); line-height:.9; color:var(--ink-900); letter-spacing:-.03em; } .footer__tag{ font-family:var(--serif); font-style:italic; color:var(--ink-500); font-size:var(--t-lede); margin-top:var(--s-sm); } .footer__grid{ display:flex; flex-wrap:wrap; gap:var(--s-xl); justify-content:space-between; margin-top:var(--s-2xl); align-items:flex-end; } .footer__links{ display:flex; flex-wrap:wrap; gap:var(--s-md) var(--s-lg); } .footer__links a{ font-size:.9rem; color:var(--ink-700); font-weight:500; } .footer__links a:hover{ color:var(--accent-deep); } .footer__coords{ font-family:var(--mono); font-size:.72rem; color:var(--ink-400); letter-spacing:.03em; } .footer__next{ font-size:.85rem; color:var(--ink-500); } .footer__next b{ color:var(--accent-deep); } /* theme toggle */ .themebtn{ width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--nav-fg,#fff); border:1px solid color-mix(in srgb,currentColor 26%,transparent); } .themebtn svg{ width:18px; height:18px; } .themebtn .moon{ display:none; } :root[data-theme="dark"] .themebtn .moon{ display:block; } :root[data-theme="dark"] .themebtn .sun{ display:none; } /* skip link */ .skip{ position:absolute; left:-999px; top:0; z-index:300; background:var(--accent); color:var(--accent-contrast); padding:.6em 1em; border-radius:0 0 var(--r-sm) 0; font-weight:600; } .skip:focus{ left:0; } /* misc utilities */ .center{ text-align:center; } .mx-auto{ margin-inline:auto; } .stack > * + *{ margin-top:var(--s-md); } .muted{ color:var(--ink-500); } [hidden]{ display:none !important; } /* ------------------------------------------------------- 16. FOLDABLE */ /* Z Fold 6 unfolded inner screen ≈ dual viewport segments → treat as small tablet */ @media (horizontal-viewport-segments:2){ .stats{ grid-template-columns:repeat(4,1fr); } .cardgrid{ grid-template-columns:repeat(2,1fr); } .hero__content,.container{ padding-inline:max(var(--gutter),env(viewport-segment-right 0 0)); } } /* ------------------------------------------------- 17. REDUCED MOTION/PRINT */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .js .reveal{ opacity:1 !important; transform:none !important; } .hero__title .line > span{ transform:none !important; } .hero__media img{ animation:none !important; } } @media print{ .nav,.daybar,.map,.lightbox,.footer .themebtn,.navmenu{ display:none !important; } .hero{ min-height:auto; } .hero__media img{ animation:none; } body{ background:#fff; color:#000; } .event__card,.card,.spotlight{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; } }