/* ============================================================= THE SACRED PATHWAYS — style.css One visual language for every page. Edit tokens here and the whole site follows. Sections are labeled in plain language so they are easy to find. ============================================================= */ /* ------------------------------------------------------------- 1. DESIGN TOKENS The only colors and fonts the site is allowed to use. Change a value here to change it everywhere. ------------------------------------------------------------- */ :root { /* Colors */ --tiffany: #81D8D0; /* homepage background, interior masthead + frame */ --ivory: #F6F1E7; /* interior reading surface */ --gold: #C4A265; /* headings, hairline rules, petal glow, hover underline */ --gold-dark: #8C6E3A; /* engraved wordmark edge + topbar hover */ --ink: #2B2723; /* body text */ --stone: #8A8175; /* dates, captions, small labels */ /* Iridescent — the ONE place the flat site allows a gradient, scoped to the Books roadmap. Mother-of-pearl drawn from the palette: tiffany + gold, warmed with a soft rose and cooled with a soft lavender. Used only on the journey spine, waypoint nodes, map frame, and the cover edge. */ --rose: #E4B7C7; --lavender: #B9AEE0; --iridescent: linear-gradient(125deg, var(--tiffany) 0%, var(--gold) 26%, var(--rose) 50%, var(--lavender) 74%, var(--tiffany) 100%); /* Fonts (loaded from Google Fonts in each page's ) */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Mulish", system-ui, -apple-system, sans-serif; /* Vertical rhythm: generous space between sections. 6rem on desktop, reduced on phones in the responsive section. */ --space-section: 6rem; /* Reading column width */ --measure: 640px; /* Motion timing (honored only when motion is allowed) */ --fade-page: 700ms; /* page load + page-to-page crossfade */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* How far a petal blooms outward when chosen, and how long the bloom takes. Values taken from the original lotus artwork. */ --travel: clamp(16px, 2.4vmin, 28px); --petal-dur: 520ms; } /* ------------------------------------------------------------- 2. RESET + BASELINE A small, deliberate reset. Border-box everywhere. ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 300; color: var(--ink); line-height: 1.85; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } ul { list-style: none; } a { color: inherit; } /* Hidden from sight, still read by screen readers (for the homepage title). */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ------------------------------------------------------------- 3. TYPE SCALE Only four roles exist. Do not invent a fifth. ------------------------------------------------------------- */ /* Display — the largest, most spacious heading */ .t-display { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.15; color: var(--gold); } /* Heading — section titles */ .t-heading { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.3; color: var(--gold); } /* Body — reading text. (This is also the default above.) */ .t-body { font-family: var(--font-body); font-weight: 300; font-size: 1.08rem; line-height: 1.85; color: var(--ink); } /* Small — dates, captions, labels, navigation */ .t-small { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--stone); } /* ------------------------------------------------------------- 4. PAGE FADE (load + crossfade between pages) Body starts invisible and fades in once. On navigation JS adds .is-leaving to fade out, then changes the page. Reduced-motion shows everything instantly (see section 11). ------------------------------------------------------------- */ body.fade { opacity: 0; transition: opacity var(--fade-page) var(--ease-soft); } body.fade.is-ready { opacity: 1; } /* fade in on load */ body.fade.is-leaving { opacity: 0; } /* fade out before navigating */ /* ============================================================= 5. HOMEPAGE — the sanctuary One full screen, solid tiffany, the lotus centered, five petals for navigation, and a quiet line of links at the foot. ============================================================= */ body.home { background: url("../../background.png") center / cover no-repeat; min-height: 100vh; min-height: 100svh; /* avoids mobile browser-bar clipping */ margin: 0; display: flex; flex-direction: column; /* top bar, then lotus, then foot */ overflow: hidden; /* the homepage never scrolls */ position: relative; } /* The middle area that centers the lotus (and its hint) between the top bar and foot. */ .home__stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.5rem, 2vmin, 1.25rem); padding: 1rem; } /* A quiet invitation beneath the lotus: it tells visitors the petals are the way in, then fades away the moment a petal is engaged. */ .lotus__cue { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(0.98rem, 2.2vmin, 1.15rem); letter-spacing: 0.04em; color: var(--ink); opacity: 0.5; text-align: center; pointer-events: none; /* never blocks petal interaction */ transition: opacity 500ms var(--ease-soft); } /* Step aside when the visitor hovers or keyboard-focuses the lotus. */ .lotus:hover ~ .lotus__cue, .lotus:focus-within ~ .lotus__cue { opacity: 0; } /* On the homepage the top bar floats over the misty background. */ .topbar--home { background: transparent; } /* The square that holds every lotus layer. Scales to fit any screen with room to spare, so nothing is ever clipped. */ .lotus { position: relative; width: min(72vmin, 620px); max-width: 100%; aspect-ratio: 1 / 1; user-select: none; -webkit-user-select: none; } /* On first load the whole symbol fades in slowly. */ .lotus.intro { opacity: 0; } .lotus.intro.is-ready { opacity: 1; transition: opacity 1400ms var(--ease-soft); } /* Each artwork layer fills the square and stacks. */ .lotus__layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* clicks are handled by the hit layer */ } .lotus__base { z-index: 1; } /* The five petals sit above the base, plus four "full leaf" overlays (one per side petal) that fade in when their petal blooms. */ .lotus__petal { z-index: 2; transform: translate3d(0, 0, 0); transition: transform var(--petal-dur) var(--ease-soft), filter var(--petal-dur) var(--ease-soft), opacity var(--petal-dur) var(--ease-soft); will-change: transform, filter; } /* The fuller-leaf overlays start invisible and crossfade in on bloom. */ .lotus__petal.full { opacity: 0; } /* Outward direction each petal travels when chosen (unit-ish vectors radiating from the base of the lotus, matched to the artwork). */ .lotus__petal[data-id="center"] { --dx: 0; --dy: -1; } .lotus__petal[data-id="ileft"] { --dx: -0.63; --dy: -0.77; } .lotus__petal[data-id="iright"] { --dx: 0.63; --dy: -0.77; } .lotus__petal[data-id="oleft"] { --dx: -0.97; --dy: -0.22; } .lotus__petal[data-id="oright"] { --dx: 0.97; --dy: -0.22; } /* When chosen: the petal blooms outward and brightens with a warm glow. */ .lotus__petal.is-active { transform: translate3d(calc(var(--dx) * var(--travel)), calc(var(--dy) * var(--travel)), 0); filter: brightness(1.1) drop-shadow(0 0 10px rgba(255, 222, 150, 0.45)) drop-shadow(0 0 22px rgba(255, 210, 130, 0.30)); } /* ...and its fuller leaf fills in. */ .lotus__petal.full.is-active { opacity: 1; } /* A single transparent surface on top catches pointer events and maps them to the correct petal by position (see main.js). */ .lotus__hit { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: transparent; } /* The petal labels. Real links, so they are keyboard-focusable and navigate on Enter. Hidden until their petal is chosen. The container must let pointer events fall through to the hit layer below it — otherwise this invisible box would swallow every hover and click. Individual labels re-enable pointer events only when active. */ .lotus__labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .lotus__label { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.14em; color: var(--ivory); text-decoration: none; white-space: nowrap; opacity: 0; transition: opacity 500ms var(--ease-soft); text-shadow: 0 1px 12px rgba(43, 39, 35, 0.25); /* Invisible labels must not catch stray mouse/touch clicks. Keyboard focus and Enter are unaffected by pointer-events, so links stay fully accessible; they only become clickable once revealed. */ pointer-events: none; } .lotus__label.is-active { opacity: 1; pointer-events: auto; } /* A visible focus ring for keyboard users. */ .lotus__label:focus-visible { outline: none; opacity: 1; } .lotus__label:focus-visible::after { content: ""; position: absolute; left: 50%; bottom: -0.45em; transform: translateX(-50%); width: 1.6em; height: 1px; background: var(--gold); } /* Petal label positions, matched to the artwork (left to right). */ .lotus__label[data-id="oleft"] { left: 20%; top: 86%; } /* Art */ .lotus__label[data-id="ileft"] { left: 25.5%; top: 64%; } /* Psychology */ .lotus__label[data-id="center"] { left: 50%; top: 64%; } /* Spirituality */ .lotus__label[data-id="iright"] { left: 74.5%; top: 64%; } /* Pilgrimages */ .lotus__label[data-id="oright"] { left: 80%; top: 86%; } /* Food */ /* The quiet foot of the homepage: just the "next gathering" line now (the page links live in the top bar). */ .home__foot { flex: 0 0 auto; z-index: 6; text-align: center; padding: 0 1.25rem 2rem; } /* "Next gathering" — a soft gold line, fed from latest.json. Wraps (rather than clipping) on narrow screens. */ .home__next { margin: 0; max-width: 34rem; margin-inline: auto; white-space: normal; line-height: 1.6; } .home__next a { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--gold); opacity: 0.85; border-bottom: 1px solid transparent; transition: opacity 300ms var(--ease-soft), border-color 300ms var(--ease-soft); } .home__next a:hover, .home__next a:focus-visible { opacity: 1; border-bottom-color: var(--gold); outline: none; } .home__next .label { color: var(--ivory); opacity: 0.7; } .home__links { text-align: center; } .home__links a { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-decoration: none; color: var(--gold); opacity: 0.45; transition: opacity 400ms var(--ease-soft); } .home__links a:hover, .home__links a:focus-visible { opacity: 1; outline: none; } .home__links .sep { color: var(--gold); opacity: 0.3; margin: 0 0.6rem; } /* ============================================================= 6. INTERIOR PAGES — pathway + content template A slim tiffany masthead over an ivory reading surface. ============================================================= */ body.page { background: var(--ivory); min-height: 100vh; } /* Slim tiffany top bar: the brand wordmark in the center, with About + In Person at the left and Online + Contact at the right. Appears on every interior page; the homepage navigates via the lotus. */ .topbar { background: var(--tiffany); padding: 1.1rem clamp(1.25rem, 5vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; } .topbar__nav { flex: 1 1 0; display: flex; gap: 1.5rem; } .topbar__nav--left { justify-content: flex-start; } .topbar__nav--right { justify-content: flex-end; } .topbar__nav a { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease-soft), color 300ms var(--ease-soft); } .topbar__nav a:hover, .topbar__nav a:focus-visible { border-bottom-color: var(--gold-dark); color: var(--gold-dark); outline: none; } /* The brand wordmark — majestic but restrained: Cormorant in gold with a fine dark-gold engraved edge, generously letter-spaced, and a short dark-gold hairline beneath. Subtle, not overbearing. */ .topbar__brand { flex: 0 0 auto; position: relative; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: 0.22em; text-indent: 0.22em; /* balance the trailing letter-spacing */ text-transform: uppercase; text-decoration: none; color: var(--gold); -webkit-text-stroke: 0.4px var(--gold-dark); padding-bottom: 0.4rem; transition: color 300ms var(--ease-soft); } .topbar__brand::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 38%; height: 1px; background: var(--gold-dark); opacity: 0.6; } .topbar__brand:hover, .topbar__brand:focus-visible { color: #D9B878; outline: none; } /* HERO — a full-width image opening every page except home, with a large white title + intro centered over it. A flat dark tint keeps the white text readable (a solid overlay, not a gradient). */ .hero { position: relative; min-height: clamp(340px, 56vh, 560px); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero__scrim { position: absolute; inset: 0; background: rgba(36, 31, 26, 0.42); z-index: 1; } .hero__content { position: relative; z-index: 2; max-width: var(--measure); padding: 3.5rem clamp(1.5rem, 5vw, 2rem); text-align: center; color: #fff; } .hero__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.12; color: #fff; margin-bottom: 1.25rem; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35); } .hero__intro { font-family: var(--font-body); font-weight: 300; font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.7; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } /* The single centered reading column. */ .reading { max-width: var(--measure); margin: 0 auto; padding: var(--space-section) clamp(1.25rem, 5vw, 2rem); } /* The page's lead heading (Display role). */ .reading__lead { margin-bottom: 1rem; } .reading__intro { font-size: 1.08rem; margin-bottom: var(--space-section); } /* A content section: a heading, then prose, then space. */ .section { margin-bottom: var(--space-section); } .section > .t-heading { margin-bottom: 1.25rem; } .section p + p { margin-top: 1.25rem; } .section p + .t-heading { margin-top: 2.5rem; } /* Links inside reading text: underline appears on hover only. */ .reading a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; transition: color 300ms var(--ease-soft); } .reading a:hover, .reading a:focus-visible { color: var(--gold); outline: none; } /* The single thin gold hairline that separates sections. Used instead of boxes or containers. */ .rule { border: 0; height: 1px; background: var(--gold); opacity: 0.45; max-width: var(--measure); margin: 0 auto var(--space-section) auto; } /* A short centered mark (e.g. a closing line). Only short text is centered. */ .mark { text-align: center; color: var(--stone); } /* Editor placeholders for copy still to be written by Yulia. Subdued so they read as notes, not finished text. */ .todo { color: var(--stone); font-style: italic; } /* A definition-style detail list (e.g. circle options) — no boxes, just indentation and space. */ .detail { margin-top: 1.5rem; } .detail dt { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--gold); margin-bottom: 0.4rem; } .detail dd { margin: 0 0 1.5rem 0; } /* ------------------------------------------------------------- 7. LATEST list (rendered from assets/data/latest.json) A small, subdued list at the foot of interior pages. ------------------------------------------------------------- */ .latest { margin-top: 1rem; } .latest__title { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-bottom: 1.25rem; } .latest__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1rem; } .latest__date { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--stone); flex: 0 0 auto; } .latest__link { font-family: var(--font-body); font-weight: 300; font-size: 1.08rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease-soft); } .latest__link:hover, .latest__link:focus-visible { border-bottom-color: var(--gold); outline: none; } /* ------------------------------------------------------------- 8. EVENTS list (in-person / online pages) A calm list: date, title, description, how to register. ------------------------------------------------------------- */ .event { margin-bottom: var(--space-section); } .event__date { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.5rem; } .event__title { margin-bottom: 0.75rem; } .event__register { margin-top: 1rem; } /* ------------------------------------------------------------- 9. FOOTER — quiet navigation, consistent on every interior page ------------------------------------------------------------- */ .footer { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2rem) 4rem; text-align: center; } .footer__links a { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-decoration: none; color: var(--gold); opacity: 0.7; transition: opacity 300ms var(--ease-soft); } .footer__links a:hover, .footer__links a:focus-visible { opacity: 1; outline: none; } .footer__links .sep { color: var(--gold); opacity: 0.4; margin: 0 0.6rem; } .footer__note { margin-top: 1.25rem; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--stone); } /* ------------------------------------------------------------- 10. RESPONSIVE — phones Less vertical space so reading stays comfortable. ------------------------------------------------------------- */ @media (max-width: 600px) { :root { --space-section: 4rem; } .lotus__label { font-size: 1.3rem; } /* On phones the bar stacks into centered rows so nothing clips: the wordmark, then About · In Person, then Online · Contact. */ .topbar { flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; } .topbar__brand { order: -1; flex: 0 0 auto; margin-bottom: 0.3rem; font-size: 1.1rem; letter-spacing: 0.12em; text-indent: 0; } .topbar__nav { flex: 0 0 auto; justify-content: center; gap: 1.4rem; } .topbar__nav a { font-size: 0.74rem; letter-spacing: 0.08em; } /* Keep the "next gathering" line comfortably within a narrow screen. */ .home__next a, .home__next .label { font-size: 0.72rem; letter-spacing: 0.08em; } .home__foot { padding-bottom: 1.5rem; } } /* ------------------------------------------------------------- 11. REDUCED MOTION If the visitor prefers less motion, show everything instantly and still. Nothing fades, nothing transitions. ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } body.fade { opacity: 1 !important; } .lotus.intro { opacity: 1 !important; } /* The petal still brightens and fills (instantly), but it does not travel outward — the symbol simply appears and lights up. */ .lotus__petal.is-active { transform: translate3d(0, 0, 0) !important; } } /* ============================================================= 13. BOOKS — the book feature + the iridescent journey roadmap The one place the flat site permits a gradient. Everything is scoped under .book / .journey so the rest of the site stays plain: iridescence appears only on the cover edge, the map frame, the route spine, and the waypoint nodes. ============================================================= */ /* A slow shimmer for every iridescent surface. */ @keyframes iri-drift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Reusable captioned figure — the site's first figure/figcaption pattern. Caption type is the intended --stone + .t-small role from the tokens. */ .figure { margin: 0; } .figure img { width: 100%; display: block; } .figure figcaption { margin-top: 0.6rem; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--stone); } /* -------- The featured book: placeholder cover + jacket blurb + CTA -------- */ .book { display: flex; gap: clamp(1.5rem, 5vw, 3rem); align-items: flex-start; flex-wrap: wrap; } .book__cover { flex: 0 0 auto; position: relative; width: clamp(200px, 44vw, 280px); aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; box-shadow: 0 12px 34px rgba(43, 39, 35, 0.24); } /* Iridescent hairline frame drawn only on the border (mask trick). */ .book__cover::after, .vfmap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--iridescent); background-size: 220% 220%; animation: iri-drift 16s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .book__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .book__cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,31,26,0.12) 0%, rgba(36,31,26,0.68) 100%); } .book__cover-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem 1rem 1.4rem; text-align: center; } .book__cover-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 4vw, 1.55rem); line-height: 1.15; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.55); } .book__cover-sub { margin-top: 0.5rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 0.82rem; line-height: 1.25; color: var(--ivory); text-shadow: 0 1px 10px rgba(0,0,0,0.55); } .book__cover-author { margin-top: 0.6rem; font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); } /* Subtitle under the jacket heading — the same display italic the rest of the Books section uses for its accents. */ .book__subtitle { margin-top: -0.4rem; margin-bottom: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--gold-dark); } .book__cover-flag { /* honest little "this is a placeholder" tab */ position: absolute; z-index: 3; top: 0.85rem; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); background: rgba(246,241,231,0.9); padding: 0.2rem 0.55rem; border-radius: 2px; white-space: nowrap; } .book__body { flex: 1 1 320px; min-width: 0; } .book__cta { margin-top: 1.9rem; } .book__status { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); } .book__waitlist { display: inline-block; margin-top: 0.55rem; font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color 300ms var(--ease-soft), border-color 300ms var(--ease-soft); } .book__waitlist:hover, .book__waitlist:focus-visible { color: var(--gold-dark); border-bottom-color: var(--gold-dark); outline: none; } /* -------- The journey roadmap: breaks out wider than the reading column -------- */ .journey { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2rem); } .journey__intro { max-width: var(--measure); margin: 0 auto var(--space-section); text-align: center; color: var(--stone); } .journey__fallback { max-width: var(--measure); margin: 0 auto; text-align: center; color: var(--stone); font-style: italic; } .journey-section { margin-bottom: var(--space-section); } .journey-section__head { text-align: center; margin-bottom: 2.5rem; } .journey-section__part { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); } .journey-section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.5vw, 2.3rem); line-height: 1.2; color: var(--gold); margin-top: 0.35rem; } .journey-section__meta { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--stone); margin-top: 0.5rem; } /* -------- The coloured map: the artwork, with a clickable point on each town. The map keeps its own aspect ratio; points are placed by percentage so they stay put at every screen size. The iridescent hairline frame (above) is drawn on .vfmap::after. -------- */ .vfmap { position: relative; border-radius: 4px; overflow: hidden; margin: 0 auto; max-width: 820px; background: var(--ivory); box-shadow: 0 12px 34px rgba(43, 39, 35, 0.16); } .vfmap__img { display: block; width: 100%; height: auto; } .vfmap__pins { position: absolute; inset: 0; } /* A point sits on a drawn town marker: a soft ring that warms on hover/focus. */ .vfpin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; z-index: 2; transition: border-color 200ms var(--ease-soft), background-color 200ms var(--ease-soft), box-shadow 200ms var(--ease-soft); } .vfpin:hover, .vfpin:focus-visible { border-color: var(--gold); background: rgba(196, 162, 101, 0.18); box-shadow: 0 0 0 3px rgba(246, 241, 231, 0.55); outline: none; } .vfpin--jump:hover, .vfpin--jump:focus-visible { border-color: var(--gold-dark); } /* Added intermediate towns have no printed marker, so they carry their own small dot (gold hairline ring on ivory) that warms on hover like the rest. */ .vfpin--added::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ivory); border: 1.5px solid var(--gold); pointer-events: none; } .vfpin--added:hover::before, .vfpin--added:focus-visible::before { background: var(--gold); } /* The town name, shown only on hover/focus. */ .vfpin__label { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink); background: rgba(246, 241, 231, 0.94); padding: 0.2rem 0.5rem; border-radius: 3px; box-shadow: 0 2px 8px rgba(43, 39, 35, 0.2); opacity: 0; transition: opacity 160ms var(--ease-soft); } .vfpin:hover .vfpin__label, .vfpin:focus-visible .vfpin__label { opacity: 1; } /* -------- The photo lightbox -------- */ body.vflb-lock { overflow: hidden; } .vflb { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 2rem); } .vflb.is-open { display: flex; } .vflb__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 23, 0.86); } .vflb__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 1000px; width: 100%; max-height: 100%; } .vflb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; flex: 1 1 auto; } .vflb__img { max-width: 100%; max-height: 74vh; border-radius: 3px; display: block; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); } .vflb__plate { display: grid; place-items: center; width: min(80vw, 480px); aspect-ratio: 3 / 2; background: var(--ivory); border-radius: 3px; font-family: var(--font-display); font-style: italic; color: var(--stone); } .vflb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(246, 241, 231, 0.9); color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 200ms var(--ease-soft); } .vflb__nav:hover, .vflb__nav:focus-visible { background: #fff; outline: none; } .vflb__nav--prev { left: 0.5rem; } .vflb__nav--next { right: 0.5rem; } .vflb__close { align-self: flex-end; width: 40px; height: 40px; margin-bottom: 0.6rem; border: none; border-radius: 50%; background: rgba(246, 241, 231, 0.9); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; } .vflb__close:hover, .vflb__close:focus-visible { background: #fff; outline: none; } .vflb__caption { text-align: center; color: var(--ivory); margin-top: 1rem; } .vflb__name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: #fff; margin: 0; } .vflb__meta { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.06em; color: rgba(246, 241, 231, 0.85); margin: 0.3rem 0 0; } .vflb__meta--suspect { text-decoration: underline dotted var(--gold); } .vflb__route { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ivory); margin: 0.35rem 0 0; } .vflb__stay { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ivory); margin: 0.4rem 0 0; } .vflb__note { font-family: var(--font-body); font-size: 0.8rem; color: rgba(246, 241, 231, 0.75); margin: 0.5rem auto 0; max-width: 46ch; line-height: 1.5; } .vflb__counter { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 241, 231, 0.7); margin: 0.7rem 0 0; } @media (max-width: 700px) { .book { justify-content: center; } .vfpin { width: 30px; height: 30px; } /* easier to tap */ .vflb__img { max-height: 60vh; } } /* Reduced motion: hold the shimmer and pin transitions still. */ @media (prefers-reduced-motion: reduce) { .book__cover::after, .vfmap::after { animation: none !important; } .vfpin, .vfpin__label, .vflb__nav, .vflb__close { transition: none !important; } }