/* ========================================================================== JCA marketing site — layout layer for the 7 public pages only (index, visit, calendar, giving, community, about, contact). Loads on top of styles.css and uses its tokens (:root) and shared primitives (.btn, .pill, .tag, .panel, .grid, .cause-card, .chip-amt, .panchang-card, .timeline, .medallion, .navkar, .field, .tbl, .chat-toggle/.chat-panel) without modifying any of them — those are load-bearing in app.html / admin.html / phone.html / login.html too. Every selector here is prefixed `site-` so nothing collides with the shared layer or the `.cms-` Payload shell in admin.html. Scoped to `.site` (the class every marketing page sets) so nothing here reaches the console, member app or phone mockup. ========================================================================== */ .site { font-size:16px; line-height:1.6; } .site h1, .site h2, .site h3 { color:var(--ink); letter-spacing:-0.01em; } .site p { color:var(--ink-soft); line-height:1.7; max-width:68ch; } .site img { display:block; } .site-wrap { max-width:1160px; margin:0 auto; padding:0 24px; } @media (max-width:700px) { .site-wrap { padding:0 20px; } } /* skip link */ .site-skip { position:absolute; left:-999px; top:auto; background:var(--indigo); color:#fff; padding:11px 18px; border-radius:8px; z-index:100; font-size:13px; font-weight:600; } .site-skip:focus { left:16px; top:16px; } /* ===== TOP NAV ===== */ .site-nav { position:sticky; top:0; z-index:40; background:rgba(250,246,239,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background .25s ease, border-color .25s ease; } .site-nav.site-nav--on-hero { background:transparent; backdrop-filter:none; border-bottom-color:transparent; } .site-nav--on-hero .site-logo .bt { color:var(--ink); text-shadow:0 1px 4px rgba(255,255,255,0.55); } .site-nav--on-hero .site-logo .bs { color:var(--ink-soft); text-shadow:0 1px 4px rgba(255,255,255,0.55); } .site-nav-inner { max-width:1160px; margin:0 auto; padding:0 24px; height:76px; display:flex; align-items:center; gap:6px; } .site-logo { display:flex; align-items:center; gap:11px; margin-right:auto; } .site-logo img { width:38px; height:38px; border-radius:50%; } .site-logo .bt { display:block; font-family:var(--font-main); font-size:16px; font-weight:600; color:var(--ink); line-height:1.15; } .site-logo .bs { display:block; font-size:10.5px; color:var(--muted); margin-top:1px; } .site-links { display:flex; gap:6px; margin-right:20px; } .site-links a { font-size:14px; font-weight:600; padding:9px 14px; border-radius:var(--r-sm); } .site-cta { display:flex; gap:10px; align-items:center; } /* Every nav-bar control except "Become a member": same tint as the nav bar itself (no border) so each one visually merges with the bar once scrolled solid, and reads as a soft glass chip while the bar is transparent over the hero photo — one rule covers both states because the colour never changes. */ .site-nav .btn-ghost, .site-nav .site-phone-link, .site-nav .site-nav-toggle, .site-nav .site-links a { background:rgba(250,246,239,0.65); border-color:transparent; color:var(--ink); backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); transition:background .25s ease; } .site-nav .btn-ghost:hover, .site-nav .site-phone-link:hover, .site-nav .site-nav-toggle:hover, .site-nav .site-links a:hover { background:rgba(250,246,239,0.92); } .site-nav .site-links a.on { color:var(--indigo); } /* Temp dev/demo switcher to the phone mockup — mirrors phone.html's own "Desktop app" / "Marketing site" links back to this site, and app.html's sidebar "Phone App" link, so all three surfaces can reach one another. */ .site-phone-link { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--muted); background:var(--paper); flex-shrink:0; } .site-phone-link svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; } .site-nav-toggle { display:none; width:40px; height:40px; align-items:center; justify-content:center; color:var(--ink); border-radius:8px; flex-shrink:0; transition:background .25s ease, box-shadow .25s ease; } .site-nav-toggle svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; } @media (max-width:900px) { .site-links { display:none; } .site-cta .btn-ghost { display:none; } .site-cta .site-phone-link { display:none; } /* the drawer's own "Phone app (temp)" link covers mobile */ .site-nav-toggle { display:flex; } } .site-drawer { position:fixed; inset:76px 0 0 0; background:var(--paper); z-index:39; padding:8px 24px 32px; display:flex; flex-direction:column; overflow-y:auto; transform:translateY(-10px); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; } .site-drawer.open { opacity:1; transform:translateY(0); pointer-events:auto; } .site-drawer a { padding:16px 2px; font-size:17px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-soft); } .site-drawer a.on { color:var(--indigo); } .site-drawer-cta { display:flex; flex-direction:column; gap:10px; margin-top:22px; } @media (min-width:901px) { .site-drawer { display:none; } } /* ===== SECTION RHYTHM (the four archetypes) ===== */ .site-section { padding:88px 0; } .site-section.tight { padding:52px 0; } .site-section.alt { background:var(--stone); } @media (max-width:700px) { .site-section { padding:56px 0; } .site-section.tight { padding:36px 0; } } .site-eyebrow { font-family:var(--font-main); font-size:15px; color:var(--brass); margin-bottom:10px; } .site-h2 { font-family:var(--font-main); font-size:clamp(27px,3.4vw,36px); font-weight:600; margin-bottom:14px; max-width:20ch; } .site-standfirst { font-size:18px; color:var(--ink-soft); line-height:1.65; max-width:42ch; } /* B — asymmetric split: narrow head, wide content */ .site-split { display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; } .site-split.rev { grid-template-columns:7fr 5fr; } .site-split .head { position:sticky; top:100px; } @media (max-width:860px) { .site-split, .site-split.rev { grid-template-columns:1fr; gap:26px; } .site-split .head { position:static; } } /* C — single reading column */ .site-measure { max-width:70ch; margin:0 auto; } .site-measure.left { margin:0; } /* page hero (interior pages) */ .site-pagehero { padding:60px 0 46px; border-bottom:1px solid var(--line); } .site-pagehero .site-eyebrow { margin-bottom:14px; } .site-pagehero h1 { font-family:var(--font-main); font-weight:600; font-size:clamp(32px,4.6vw,46px); line-height:1.1; margin-bottom:16px; max-width:17ch; } /* home hero — full-bleed photo, runs from behind the nav to the bottom of the first screen */ .site-hero-home { position:relative; margin-top:-76px; height:calc(100vh - 38px); min-height:480px; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:64px; } .site-hero-home-media { position:absolute; inset:0; z-index:0; } .site-hero-home-media img { width:100%; height:100%; object-fit:cover; } .site-hero-home-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,18,28,0.05) 0%,rgba(16,18,28,0.28) 55%,rgba(12,14,22,0.72) 100%); } .site-hero-home .site-wrap { position:relative; z-index:1; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:48px; } .site-hero-home-content { max-width:620px; } .site-hero-home .navkar { font-family:var(--font-quote); font-style:italic; font-size:clamp(17px,2vw,21px); color:rgba(255,255,255,0.88); line-height:1.7; margin-bottom:28px; } .site-hero-home .cta-row { display:flex; gap:12px; flex-wrap:wrap; } @media (max-width:700px) { .site-hero-home { padding-bottom:44px; } } /* home hero — right-side "wing" panchang card (vertical timeline variant of .panchang-card) */ .site-hero-panchang { flex-shrink:0; width:300px; background:rgba(20,24,38,0.56); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.16); border-radius:var(--r-lg); padding:26px 28px 28px; color:#fff; box-shadow:var(--shadow-lg); } .site-hero-panchang-eyebrow { font-size:10.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--saffron-light); } .site-hero-panchang-date { font-family:var(--font-main); font-size:20px; font-weight:600; margin-top:8px; } .site-hero-panchang-day { font-size:12.5px; color:rgba(255,255,255,0.62); margin-top:3px; margin-bottom:22px; } .site-hero-panchang-rail { position:relative; padding-left:44px; } .site-hero-panchang-rail::before { content:''; position:absolute; left:17px; top:4px; bottom:4px; width:1px; background:rgba(255,255,255,0.2); } .site-hero-panchang-row { position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 0; } .site-hero-panchang-row .ic { position:absolute; left:-44px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; } .site-hero-panchang-row .ic svg { width:16px; height:16px; stroke:var(--saffron-light); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .site-hero-panchang-row .lb { font-size:13px; color:rgba(255,255,255,0.76); } .site-hero-panchang-row .tm { font-family:var(--font-main); font-size:16px; font-weight:600; white-space:nowrap; } @media (max-width:900px) { .site-hero-home .site-wrap { flex-wrap:wrap; } .site-hero-panchang { width:100%; max-width:340px; } } @media (max-width:700px) { .site-hero-panchang { display:none; } } /* home hero logo lockup — shrinks and fades into the nav's own logo as the page scrolls (--hlp, 0→1, set in app.js) */ .site-hero-logo { display:flex; align-items:center; gap:18px; margin-bottom:26px; transform-origin:left center; opacity:calc(1 - var(--hlp,0)); transform:scale(calc(1 - 0.3*var(--hlp,0))) translateY(calc(-16px*var(--hlp,0))); transition:opacity .12s linear, transform .12s linear; } .site-hero-logo img { width:72px; height:72px; border-radius:50%; box-shadow:0 4px 18px rgba(0,0,0,0.28); flex-shrink:0; } .site-hero-logo h1 { font-family:var(--font-main); font-weight:600; color:#fff; font-size:clamp(28px,4.2vw,42px); line-height:1.15; margin:0; text-shadow:0 2px 20px rgba(0,0,0,0.3); } .site-hero-logo h1 span { display:block; font-family:var(--font-main); font-size:0.4em; font-weight:500; letter-spacing:0.01em; color:rgba(255,255,255,0.82); margin-top:5px; } .site-logo { opacity:var(--hlp,1); transition:opacity .12s linear; } /* ===== BUILDING ELEVATION — the site's organising device ===== */ .site-elevation { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-md); overflow:hidden; display:grid; grid-template-rows:3800fr 3800fr 4000fr 2350fr 2350fr; height:480px; } .site-elevation.compact { height:320px; } .site-elevation-cap { display:flex; justify-content:center; padding:14px 0 0; } .site-elevation-cap svg { width:24px; height:24px; color:var(--brass); stroke:currentColor; fill:none; stroke-width:1.4; } .site-elevation .floor { display:grid; grid-template-columns:112px 1fr; gap:18px; align-items:center; padding:0 24px; border-bottom:1px solid var(--rule); color:inherit; text-align:left; } .site-elevation .floor:last-child { border-bottom:none; } .site-elevation .floor:hover, .site-elevation .floor:focus-visible { background:var(--info-bg); } .site-elevation .floor .fl-meta { font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.45; } .site-elevation .floor .fl-meta b { display:block; color:var(--ink-soft); font-weight:700; font-size:12.5px; } .site-elevation .floor .fl-name { font-family:var(--font-main); font-weight:600; font-size:16px; color:var(--ink); line-height:1.35; } .site-elevation .floor .fl-name em { display:block; font-style:normal; font-family:var(--font-main); font-weight:400; font-size:12.5px; color:var(--muted); margin-top:2px; } .site-elevation.compact .floor .fl-name { font-size:14px; } .site-elevation.compact .floor .fl-name em { display:none; } @media (max-width:700px) { .site-elevation, .site-elevation.compact { height:auto; } .site-elevation .floor { grid-template-columns:1fr; gap:3px; padding:15px 20px; } .site-elevation.compact .floor .fl-name em { display:block; } } /* ===== FACTS / FIGURES STRIP ===== */ .site-figures { display:flex; flex-wrap:wrap; gap:36px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .site-figures .it .v { font-family:var(--font-main); font-weight:600; font-size:23px; color:var(--ink); } .site-figures .it .l { font-size:12.5px; color:var(--muted); margin-top:2px; } /* ===== DAY MEASURE (Today at JCA) ===== */ .site-daymeasure { position:relative; height:4px; background:var(--sand-warm); border-radius:4px; margin:34px 12px 16px; } .site-daymeasure .mark { position:absolute; top:-9px; transform:translateX(-50%); text-align:center; } .site-daymeasure .mark .dot { width:11px; height:11px; border-radius:50%; background:var(--indigo); margin:0 auto 9px; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line); } .site-daymeasure .mark .t { font-size:11.5px; font-weight:700; color:var(--ink-soft); white-space:nowrap; } .site-daymeasure .mark .l { font-size:10.5px; color:var(--muted); white-space:nowrap; margin-top:1px; } /* ===== ROSTER (board / committee) ===== */ .site-roster { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; } .site-roster .person { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-soft); } .site-roster .person .nm { font-weight:600; color:var(--ink); font-size:14.5px; } .site-roster .person .rl { font-size:12.5px; color:var(--muted); text-align:right; flex-shrink:0; } @media (max-width:700px) { .site-roster { grid-template-columns:1fr; } } /* ===== EVENT LIST ===== */ .site-eventlist { display:flex; flex-direction:column; } .site-event { display:grid; grid-template-columns:128px 1fr; gap:20px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line-soft); } .site-event:last-child { border-bottom:none; } .site-event .dt { font-family:var(--font-main); font-weight:600; font-size:16px; color:var(--indigo); line-height:1.3; } .site-event .dt span { display:block; font-family:var(--font-main); font-weight:600; font-size:11px; color:var(--muted); letter-spacing:0.02em; } .site-event .nm { font-weight:600; font-size:15px; } .site-event .ds { font-size:13px; color:var(--muted); margin-top:4px; } @media (max-width:700px) { .site-event { grid-template-columns:1fr; gap:6px; } } /* ===== STEPS (genuinely sequential content only) ===== */ .site-steps { counter-reset:step; display:flex; flex-direction:column; gap:24px; } /* grid-column is set explicitly on every child below — with 3 real/generated items (::before, h4, p) across a 2-column track, auto-placement would wrap the 3rd item (p) into column 1 instead of stacking it under h4. */ .site-step { display:grid; grid-template-columns:44px 1fr; gap:4px 18px; } .site-step::before { grid-column:1; grid-row:1 / span 2; counter-increment:step; content:counter(step); font-family:var(--font-main); font-weight:600; font-size:17px; color:var(--brass); width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; display:flex; align-items:center; justify-content:center; } .site-step h4 { grid-column:2; font-size:14.5px; font-weight:700; color:var(--ink); } .site-step p { grid-column:2; font-size:13.5px; color:var(--muted); margin:0; } /* ===== FAQ (native

, no JS) ===== */ .site-faq-group { margin-bottom:34px; } .site-faq-group:last-child { margin-bottom:0; } .site-faq-group h3 { font-size:14.5px; font-weight:700; color:var(--muted); margin-bottom:2px; } .site-faq details { border-bottom:1px solid var(--line-soft); padding:16px 0; } .site-faq summary { cursor:pointer; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:16px; } .site-faq summary::-webkit-details-marker { display:none; } .site-faq summary::after { content:'+'; color:var(--muted); font-weight:400; font-size:21px; flex-shrink:0; line-height:1; transition:transform .15s; } .site-faq details[open] summary::after { transform:rotate(45deg); } .site-faq .a { font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-top:10px; max-width:64ch; } /* ===== ROUTING LIST (contact) ===== */ .site-routing .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-soft); } .site-routing .row .q { font-weight:600; font-size:14px; } .site-routing .row .a { color:var(--muted); font-size:13.5px; } @media (max-width:600px) { .site-routing .row { grid-template-columns:1fr; gap:4px; } } /* ===== PULL QUOTE ===== */ .site-quote { border-left:3px solid var(--brass); padding:2px 0 2px 26px; margin:30px 0; } .site-quote p { font-family:var(--font-quote); font-style:italic; font-size:20px; line-height:1.6; color:var(--ink); } .site-quote cite { display:block; margin-top:14px; font-style:normal; font-size:13px; color:var(--muted); font-weight:600; } /* ===== SUBSCRIBE / SIMPLE FORM ROW ===== */ .site-subscribe { display:flex; gap:10px; flex-wrap:wrap; } .site-input { padding:12px 16px; border:1px solid var(--line); border-radius:100px; font-size:14px; font-family:inherit; background:var(--paper); color:var(--ink); min-width:230px; } .site-input:focus { outline:none; border-color:var(--indigo-soft); box-shadow:0 0 0 3px rgba(46,58,89,0.10); } /* ===== NEWSLETTER — tall centred card, not a thin bar ===== */ .site-newsletter { background:linear-gradient(135deg,var(--indigo-deep),var(--indigo)); border-radius:var(--r-lg); padding:76px 40px; text-align:center; } .site-newsletter .site-eyebrow { color:var(--saffron-light); justify-content:center; } .site-newsletter .site-h2 { color:#fff; max-width:24ch; margin:0 auto 14px; } .site-newsletter p { color:rgba(246,241,231,0.82); max-width:46ch; margin:0 auto 32px; } .site-newsletter .site-subscribe { flex-direction:column; align-items:stretch; max-width:340px; margin:0 auto; gap:12px; } .site-newsletter .site-input { width:100%; background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.25); color:#fff; } .site-newsletter .site-input::placeholder { color:rgba(246,241,231,0.55); } .site-newsletter .btn-primary { width:100%; background:var(--saffron); color:var(--indigo-deep); } .site-newsletter .btn-primary:hover { background:var(--saffron-light); } .site-newsletter-note { color:rgba(246,241,231,0.55) !important; font-size:12px; max-width:none !important; margin:16px auto 0 !important; } @media (max-width:700px) { .site-newsletter { padding:56px 24px; } } /* ===== SHRINE / FLOOR ROW (photo + description, alternating) ===== */ .site-shrine { display:grid; grid-template-columns:320px 1fr; gap:40px; align-items:start; } .site-shrine.rev { grid-template-columns:1fr 320px; } .site-shrine.rev .art { order:2; } .site-shrine .art { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-md); background:var(--sand-warm); } .site-shrine .art img { width:100%; height:100%; object-fit:cover; } .site-shrine .fl { font-size:12.5px; font-weight:700; color:var(--brass); margin-bottom:8px; } @media (max-width:800px) { .site-shrine, .site-shrine.rev { grid-template-columns:1fr; gap:20px; } .site-shrine.rev .art { order:0; } } /* ===== JOURNEY — scrollytelling through the five shrines (index.html only). A true semicircle sits flush against the actual left edge of the browser (.journey-arc-outer, absolutely positioned against the full-bleed .journey section rather than the centred .site-wrap, so it reaches the real screen edge on any viewport width) and opens toward the page — mirror image of a "(" — bulging right so its midpoint runs well into the photo. The photo (.journey-wrap, higher z-index) paints IN FRONT of the arc, so the line appears to run *through* it, threading in and out from behind. Track and fill are the same path with the same dot pattern (.journey-arc-track is the always-visible muted dots; .journey-arc-fill is an identical dotted line, same colour family but brighter, revealed top-down through a clipPath rect as scroll progresses) so only one dotted line is ever on screen — the "revealed" dots simply recolour in place rather than a second line drawing over the first. Both the arc rail and the photo are position:sticky within same-height containers so they release in sync as the five "steps" on the right scroll past (state driven by app.js via IntersectionObserver: .active toggled on .journey-photo/.journey-dot, and the clip rect's height animated on scroll to reveal .journey-arc-fill). */ .journey { position:relative; } .journey-arc-outer { position:absolute; inset:0; left:0; width:min(48vw,760px); z-index:0; pointer-events:none; } .journey { --jh:min(600px, calc(100vh - 170px)); } .journey { --joff:calc(50vh - var(--jh) / 2); } .journey-arc-rail { margin-top:var(--joff); position:sticky; top:calc(50vh - var(--jh) / 2); height:var(--jh); } .journey-arc-rail svg { width:100%; height:100%; display:block; overflow:visible; } .journey-arc-track { fill:none; stroke:var(--rule); stroke-width:2.5; stroke-dasharray:1 9; stroke-linecap:round; } .journey-arc-fill { fill:none; stroke:var(--brass); stroke-width:2.5; stroke-dasharray:1 9; stroke-linecap:round; } .journey-arc-clip-rect { transition:height .6s ease; } .journey-dot { fill:var(--paper); stroke:var(--rule); stroke-width:2.5; transition:fill .35s ease, stroke .35s ease; } .journey-dot.active { fill:var(--brass-light); stroke:var(--brass); } .journey-dot.current { fill:var(--brass); stroke:var(--brass); } .journey-wrap { position:relative; z-index:1; display:grid; grid-template-columns:minmax(320px,460px) 1fr; gap:56px; align-items:start; } .journey-media { margin-top:var(--joff); position:sticky; top:calc(50vh - var(--jh) / 2); height:var(--jh); display:flex; align-items:center; justify-content:center; } .journey-frame { position:relative; width:100%; max-width:460px; height:var(--jh); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--sand-warm); margin:0 auto; } .journey-photo { position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .8s ease, transform 1s ease; } .journey-photo.active { opacity:1; transform:scale(1); z-index:1; } .journey-photo img { width:100%; height:100%; object-fit:cover; } .journey-photo .cap { position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:#fff; font-size:14px; background:linear-gradient(180deg,transparent,rgba(20,25,40,0.8)); } .journey-photo .cap em { display:block; font-style:normal; opacity:0.78; font-size:11.5px; margin-top:2px; } .journey-steps { display:flex; flex-direction:column; } .journey-steps { padding-top:var(--joff); } /* cards stack directly under each other (one photo-height each, small gap) so a card is always beside the sticky photo */ .journey-step { display:flex; align-items:flex-start; padding:0 0 48px; } .journey-step:last-child { padding-bottom:0; } .journey-step-card { max-width:640px; width:100%; height:var(--jh); overflow:hidden; display:flex; flex-direction:column; justify-content:center; } .journey-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 40px; box-shadow:var(--shadow-sm); } .journey-panel .site-event { padding:14px 0; } .journey-step-dark { background:linear-gradient(120deg,var(--indigo-deep),var(--indigo)); color:#fff; border-radius:var(--r-lg); padding:44px 40px; } .journey-gallery { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:10px; margin-top:20px; flex:1; min-height:0; } .journey-gallery a { position:relative; border-radius:var(--r-md,12px); overflow:hidden; background:var(--sand-warm); } .journey-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .journey-gallery a:hover img { transform:scale(1.06); } .journey-gallery .more { display:flex; align-items:center; justify-content:center; background:var(--indigo); color:#fff; font-weight:600; font-size:14px; } .journey-gallery .more:hover { background:var(--indigo-deep); } .journey-step-dark .site-eyebrow { color:var(--saffron-light); } @media (max-width:860px) { .journey-arc-outer { display:none; } .journey-wrap { grid-template-columns:1fr; gap:8px; } .journey { --jh:auto; } .journey-media { margin-top:0; position:static; height:320px; margin-bottom:8px; } .journey-frame { max-width:260px; height:320px; } .journey-steps { padding-top:0; } .journey-step, .journey-step:last-child { min-height:auto; padding:36px 0; } .journey-step-card { height:auto; } .journey-gallery { grid-auto-rows:110px; } .journey-panel { padding:28px 26px; } } @media (max-width:520px) { .journey-media { height:280px; } .journey-frame { max-width:220px; } } /* ===== GALLERY PAGE ===== */ .gal-layout { display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:start; } .gal-tabs { position:sticky; top:100px; display:flex; flex-direction:column; gap:6px; } .gal-tab { text-align:left; padding:13px 18px; border-radius:var(--r-sm); font-size:15px; font-weight:600; color:var(--ink-soft); border:1px solid transparent; } .gal-tab:hover { background:var(--stone); } .gal-tab.on { background:var(--indigo); color:#fff; } .gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; } .gal-grid figure { position:relative; margin:0; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .gal-grid img { width:100%; height:100%; object-fit:cover; } .gal-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; color:#fff; font-size:13px; font-weight:600; background:linear-gradient(180deg,transparent,rgba(20,25,40,0.78)); } .gal-album { position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .gal-album div { position:absolute; left:0; right:0; bottom:0; padding:28px 16px 14px; color:#fff; background:linear-gradient(180deg,transparent,rgba(20,25,40,0.85)); } .gal-album b { display:block; font-family:var(--font-main); font-size:17px; } .gal-album span { font-size:12px; opacity:.8; } .gal-tour { display:grid; grid-template-columns:1fr 260px; gap:20px; } .gal-tour-view { position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--sand-warm); } .gal-tour-view img { width:100%; height:100%; object-fit:cover; } .gal-tour-badge { position:absolute; left:14px; top:14px; background:rgba(20,25,40,0.7); color:#fff; font-size:12px; font-weight:600; padding:6px 12px; border-radius:100px; } .gal-tour-list { display:flex; flex-direction:column; gap:8px; } .gal-tour-list button { text-align:left; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13.5px; font-weight:600; background:var(--panel); } .gal-tour-list button.on { border-color:var(--indigo); color:var(--indigo); } @media (max-width:860px) { .gal-layout { grid-template-columns:1fr; gap:20px; } .gal-tabs { position:static; flex-direction:row; } .gal-tour { grid-template-columns:1fr; } } /* ===== ANNOUNCEMENT TICKER ===== */ .site-ticker { background:var(--indigo-deep); color:#fff; } .site-ticker-rail { max-width:1160px; margin:0 auto; padding:0 24px; height:38px; display:flex; align-items:center; gap:14px; } .site-ticker-icon { font-size:13px; flex-shrink:0; } .site-ticker-viewport { position:relative; flex:1; height:100%; overflow:hidden; } .site-ticker .site-ticker-item { position:absolute; inset:0; display:flex; align-items:center; gap:6px; font-size:12.5px; color:#fff; max-width:none; opacity:0; transform:translateY(6px); transition:opacity .4s ease,transform .4s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; } .site-ticker-item.on { opacity:1; transform:translateY(0); pointer-events:auto; } .site-ticker-item a { color:var(--saffron-light); font-weight:600; } .site-ticker-dots { display:flex; gap:6px; flex-shrink:0; } .site-ticker-dots span { width:5px; height:5px; border-radius:50%; background:rgba(246,241,231,0.3); cursor:pointer; } .site-ticker-dots span.on { background:var(--saffron-light); } @media (max-width:700px) { .site-ticker-dots { display:none; } } /* ===== REVEAL-ON-SCROLL — applied selectively (gallery + app preview only), never on every section: one deliberate entrance beats a scattered default. */ .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .reveal.in { opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; } } /* ===== APP PROMOTION ===== */ .site-appband { background:var(--stone); } .site-applist { list-style:none; margin:22px 0 28px; display:flex; flex-direction:column; gap:11px; } .site-applist li { position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-soft); } .site-applist li::before { content:''; position:absolute; left:0; top:5px; width:15px; height:15px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px var(--rule); } .site-applist li::after { content:''; position:absolute; left:5.5px; top:8px; width:4px; height:7px; border-right:2px solid var(--brass); border-bottom:2px solid var(--brass); transform:rotate(45deg); } .site-storebadges { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .store-badge { display:flex; align-items:center; gap:10px; padding:9px 18px 9px 14px; background:var(--ink); color:#fff; border-radius:10px; border:1px solid var(--ink); } .store-badge:hover, .store-badge:focus-visible { background:var(--indigo-deep); } .store-badge .ic { width:21px; height:21px; flex-shrink:0; fill:currentColor; } .store-badge .tx { display:flex; flex-direction:column; line-height:1.18; } .store-badge .tx em { font-style:normal; font-size:9.5px; color:rgba(255,255,255,0.72); } .store-badge .tx b { font-family:var(--font-main); font-size:15px; font-weight:600; } .site-appnote { font-size:12.5px; color:var(--muted); max-width:44ch; } .site-appnote a { color:var(--indigo); font-weight:600; } .site-phone-preview { position:relative; display:flex; justify-content:center; } .site-phone-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(176,141,79,0.28),transparent 70%); filter:blur(6px); z-index:0; } .site-phone-frame { position:relative; z-index:1; width:230px; height:498px; border-radius:34px; overflow:hidden; background:#050505; box-shadow:0 0 0 2px #384265, 0 0 0 9px #14192b, 0 0 0 10px #384265, 0 40px 70px rgba(20,25,43,0.35); } .site-phone-notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:74px; height:20px; background:#050505; border-radius:12px; z-index:2; } .site-phone-frame iframe { display:block; width:390px; height:844px; border:0; transform:scale(0.59); transform-origin:top left; pointer-events:none; } @media (max-width:960px) { .site-phone-frame { width:200px; height:433px; } .site-phone-frame iframe { transform:scale(0.5128); } .site-phone-notch { width:64px; height:17px; } } /* ===== FOOTER ===== */ .site-footer { background:var(--indigo-deep); color:rgba(246,241,231,0.78); padding:64px 0 28px; margin-top:0; } .site-footer h4 { font-family:var(--font-main); font-weight:600; color:#fff; font-size:15px; margin-bottom:14px; } .site-footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; } .site-footer a, .site-footer p { display:block; font-size:13px; color:rgba(246,241,231,0.72); margin-bottom:9px; } .site-footer a:hover { color:#fff; } .site-footer-fine { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11.5px; color:rgba(246,241,231,0.42); padding-top:24px; border-top:1px solid rgba(246,241,231,0.12); } @media (max-width:900px) { .site-footer-grid { grid-template-columns:1fr 1fr 1fr; } } @media (max-width:600px) { .site-footer-grid { grid-template-columns:1fr 1fr; } } .site-footer-social { display:flex; gap:10px; margin-top:16px; } .site-footer-social a { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(246,241,231,0.08); border:1px solid rgba(246,241,231,0.14); margin:0; flex-shrink:0; transition:background .15s, border-color .15s; } .site-footer-social a:hover { background:rgba(246,241,231,0.16); border-color:rgba(246,241,231,0.3); } .site-footer-social svg { width:15px; height:15px; fill:rgba(246,241,231,0.85); }