(archives, destination
archives, search, 404, etc.) was rendering flush-left because this rule
never loaded. Moving the base rule here fixes all non-home pages.
Scoped overrides further down the file (e.g. .sr-intro .sr-wrap,
.sr-section-lead .sr-wrap, .sr-dest-note .sr-wrap) still narrow the
container per context.
========================================================================== */
.sr-wrap {
max-width: var(--sr-container);
margin: 0 auto;
padding: 0 var(--sr-space-6);
}
/* Task 4e — homepage intro block + section leads */
.sr-intro {
padding: var(--sr-space-16) 0 var(--sr-space-8);
text-align: center;
}
.sr-intro .sr-wrap {
max-width: 780px;
margin: 0 auto;
padding: 0 var(--sr-space-6);
}
.sr-intro__kicker {
font-size: var(--sr-fs-small);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--sr-muted);
margin: 0 0 var(--sr-space-4);
}
.sr-intro__lead {
font-family: var(--sr-font-display);
font-size: clamp(1.375rem, 2vw, 1.75rem);
line-height: 1.35;
color: var(--sr-ink);
margin: 0 0 var(--sr-space-6);
}
.sr-intro__body {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--sr-ink-soft);
max-width: 640px;
margin: 0 auto;
}
.sr-section-lead {
padding: var(--sr-space-12) 0 0;
}
.sr-section-lead .sr-wrap { max-width: var(--sr-container); padding: 0 var(--sr-space-6); }
.sr-section-lead__title {
font-size: var(--sr-fs-h2);
margin: 0 0 var(--sr-space-2);
}
.sr-section-lead__desc {
font-size: 1.0625rem;
color: var(--sr-ink-soft);
max-width: 640px;
margin: 0 0 var(--sr-space-2);
}
/* Carousel title override: the template still renders an h2 when title is "",
but it's empty. Hide any empty .sr-section__title to keep spacing right. */
.sr-section__title:empty { display: none; }
/* Task 4f — section lead kicker line + destinations postscript note */
.sr-section-lead__kicker {
font-size: var(--sr-fs-small);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--sr-muted);
margin: 0 0 var(--sr-space-2);
}
.sr-dest-note {
padding: var(--sr-space-8) 0 var(--sr-space-4);
text-align: center;
color: var(--sr-muted);
font-size: 0.9375rem;
font-style: italic;
}
.sr-dest-note .sr-wrap { max-width: 640px; padding: 0 var(--sr-space-6); margin: 0 auto; }
/* ==========================================================================
TASK 7 — NEWSLETTER
========================================================================== */
.sr-newsletter {
padding: var(--sr-space-16) 0;
background: var(--sr-canvas);
}
.sr-newsletter--inline { padding: var(--sr-space-12) 0; }
.sr-newsletter__card {
background: var(--sr-ink);
color: var(--sr-paper);
border-radius: var(--sr-radius-lg);
padding: var(--sr-space-12) var(--sr-space-8);
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.sr-newsletter__title {
font-family: var(--sr-font-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 0 0 var(--sr-space-3);
color: var(--sr-paper);
}
.sr-newsletter__desc {
font-size: 1rem;
opacity: 0.85;
margin: 0 auto var(--sr-space-6);
max-width: 520px;
line-height: 1.5;
}
.sr-newsletter__form {
display: flex;
flex-direction: column;
gap: var(--sr-space-3);
max-width: 560px;
margin: 0 auto;
}
.sr-newsletter__row {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--sr-space-3);
}
.sr-newsletter__form input[type="text"],
.sr-newsletter__form input[type="email"] {
padding: 0.875rem 1rem;
border-radius: var(--sr-radius-sm);
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.06);
color: var(--sr-paper);
font-family: inherit;
font-size: 0.9375rem;
}
.sr-newsletter__form input::placeholder { color: rgba(255,255,255,0.55); }
.sr-newsletter__form input:focus {
outline: none;
border-color: var(--sr-sun);
background: rgba(255,255,255,0.12);
}
.sr-newsletter__submit {
padding: 0.9rem 2rem;
background: var(--sr-sun);
color: var(--sr-ink);
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 0;
border-radius: var(--sr-radius-pill);
cursor: pointer;
transition: background var(--sr-dur-fast) var(--sr-ease);
}
.sr-newsletter__submit:hover { background: var(--sr-sun-deep); }
.sr-newsletter__submit[disabled] { opacity: 0.6; cursor: wait; }
.sr-newsletter__legal {
margin: var(--sr-space-3) 0 0;
font-size: 0.75rem;
opacity: 0.6;
line-height: 1.5;
}
.sr-newsletter__legal a { color: var(--sr-sun); text-decoration: underline; }
.sr-newsletter__result {
min-height: 1.25rem;
margin-top: var(--sr-space-3);
font-size: 0.9375rem;
}
.sr-newsletter__result--ok { color: var(--sr-sun); }
.sr-newsletter__result--err { color: #ff9a9a; }
.sr-honeypot {
position: absolute;
left: -9999px;
height: 0;
width: 0;
opacity: 0;
tab-index: -1;
}
@media (max-width: 600px) {
.sr-newsletter__row { grid-template-columns: 1fr; }
.sr-newsletter__card { padding: var(--sr-space-8) var(--sr-space-4); }
}
/* ==========================================================================
TASK 11 — HEADER SCROLL STATE
========================================================================== */
.sr-header.is-scrolled {
background: rgba(245, 240, 230, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--sr-line);
}
/* 22f: removed transparent-bg + cream-text overrides on over-hero state */
/* ==========================================================================
TASK 11 — MOTION SYSTEM
Micro-animations used throughout. Respects prefers-reduced-motion.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Reveal on scroll — class toggled by JS (Task 15: tightened to 480ms) */
.sr-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.sr-reveal--stagger-1 { transition-delay: 80ms; }
.sr-reveal--stagger-2 { transition-delay: 160ms; }
.sr-reveal--stagger-3 { transition-delay: 240ms; }
.sr-reveal--stagger-4 { transition-delay: 320ms; }
.sr-reveal--stagger-5 { transition-delay: 400ms; }
/* Card hover — subtle lift + image zoom (Task 15: tightened to 280ms) */
.sr-hover-lift {
transition: transform 280ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sr-hover-lift:hover {
transform: translateY(-6px);
}
.sr-hover-lift__image {
transition: transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: transform;
}
.sr-hover-lift:hover .sr-hover-lift__image {
transform: scale(1.05);
}
/* Link underline draw-in */
.sr-link {
position: relative;
display: inline-block;
text-decoration: none;
color: var(--sr-ink);
}
.sr-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sr-link:hover::after,
.sr-link:focus::after {
transform: scaleX(1);
transform-origin: left;
}
/* Magnetic button hover */
.sr-btn--magnetic {
position: relative;
transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Cursor shift on button hover (Task 15: tightened to 200ms) */
.sr-btn--shift {
transition: transform 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sr-btn--shift:hover {
transform: translateX(4px);
}
/* Ken Burns on hero background */
@keyframes sr-ken-burns {
0% { transform: scale(1.05) translate(0, 0); }
50% { transform: scale(1.15) translate(-1%, 1%); }
100% { transform: scale(1.05) translate(0, 0); }
}
.sr-ken-burns {
animation: sr-ken-burns 28s ease-in-out infinite;
will-change: transform;
}
/* Number counter base (JS animates :data-target) */
.sr-counter {
font-variant-numeric: tabular-nums;
display: inline-block;
min-width: 2ch;
}
/* Scroll indicator */
@keyframes sr-bounce-subtle {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(6px); opacity: 1; }
}
.sr-scroll-hint {
animation: sr-bounce-subtle 2s ease-in-out infinite;
}
/* ==========================================================================
TASK 13 — ADVANCED MOTION LIBRARY
Six primitives, all gated by prefers-reduced-motion at the JS layer.
Sprinkled in via [data-*] attributes or .sr-* classes.
========================================================================== */
/* --- Cursor spotlight ----------------------------------------------------- */
[data-cursor-spotlight] {
position: relative;
overflow: hidden;
isolation: isolate;
}
[data-cursor-spotlight] .sr-cursor-spotlight {
pointer-events: none;
position: absolute;
width: 420px;
height: 420px;
top: 0;
left: 0;
transform: translate3d(-9999px, -9999px, 0);
background: radial-gradient(circle at center,
rgba(184,137,74,0.22) 0%,
rgba(184,137,74,0.08) 35%,
transparent 70%);
mix-blend-mode: screen;
opacity: 0;
transition: opacity 400ms ease;
z-index: 0;
}
[data-cursor-spotlight].is-active .sr-cursor-spotlight { opacity: 1; }
/* --- Text reveal by word (Task 15: is-revealed parent pattern) ----------- */
[data-text-reveal] .sr-word {
display: inline-block;
opacity: 0;
transform: translateY(12px);
transition:
opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
[data-text-reveal].is-revealed .sr-word {
opacity: 1;
transform: translateY(0);
}
/* Backwards-compat: per-word is-visible still works for any legacy markup. */
[data-text-reveal] .sr-word.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- Image unmask on scroll ----------------------------------------------- */
.sr-image-unmask {
position: relative;
overflow: hidden;
}
.sr-image-unmask::after {
content: "";
position: absolute;
inset: 0;
background: var(--sr-gold);
transform-origin: right center;
transform: scaleX(1);
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 2;
pointer-events: none;
}
.sr-image-unmask.is-unmasked::after { transform: scaleX(0); }
/* --- Scroll-linked parallax ----------------------------------------------- */
[data-parallax] {
will-change: transform;
}
/* --- Draw-in SVG lines ---------------------------------------------------- */
.sr-svg-draw path {
stroke-dasharray: var(--sr-path-length, 1000);
stroke-dashoffset: var(--sr-path-length, 1000);
transition: stroke-dashoffset 1600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sr-svg-draw.is-drawn path { stroke-dashoffset: 0; }
/* --- Reduced motion override --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
[data-cursor-spotlight] .sr-cursor-spotlight { display: none; }
[data-text-reveal] .sr-word {
opacity: 1 !important;
transform: none !important;
}
.sr-image-unmask::after { transform: scaleX(0) !important; }
.sr-svg-draw path { stroke-dashoffset: 0 !important; }
[data-parallax] { transform: none !important; }
}
/* ==========================================================================
TASK 20 — Mobile responsive (v1.7.0)
Hamburger nav, global typography clamps, body scroll-lock
========================================================================== */
/* --- Hamburger toggle button (hidden on desktop, shown on mobile) ------ */
.sr-nav-toggle {
display: none;
background: transparent;
border: 0;
padding: 10px;
cursor: pointer;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
z-index: 1001;
}
.sr-nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
background: currentColor; /* inherits header text color (light over hero, dark on inner) */
color: var(--sr-ink);
border-radius: 1px;
transition: transform 280ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 180ms ease;
}
/* 22f: removed cream nav-toggle bar override for over-hero state */
.sr-header.is-scrolled .sr-nav-toggle__bar { background: var(--sr-ink); }
.sr-nav-toggle[aria-expanded="true"] .sr-nav-toggle__bar { background: var(--sr-ink); }
.sr-nav-toggle[aria-expanded="true"] .sr-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sr-nav-toggle[aria-expanded="true"] .sr-nav-toggle__bar:nth-child(2) { opacity: 0; }
.sr-nav-toggle[aria-expanded="true"] .sr-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
.sr-nav-toggle { display: flex; }
/* Mobile menu — full-screen drop panel under the header */
#sr-nav-menu.sr-nav-menu {
display: none;
position: fixed;
top: var(--sr-header-h, 64px);
left: 0;
right: 0;
bottom: 0;
background: var(--sr-paper);
padding: var(--sr-space-6);
overflow-y: auto;
z-index: 1000;
flex-direction: column;
gap: var(--sr-space-4);
margin: 0;
list-style: none;
}
#sr-nav-menu.sr-nav-menu.is-open {
display: flex !important;
animation: sr-nav-fade-in 200ms ease-out;
}
@keyframes sr-nav-fade-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
#sr-nav-menu.sr-nav-menu > li {
width: 100%;
border-bottom: 1px solid var(--sr-line);
padding: var(--sr-space-3) 0;
list-style: none;
}
#sr-nav-menu.sr-nav-menu a {
font-size: 1.125rem;
color: var(--sr-ink);
padding: 8px 0;
display: block;
text-decoration: none;
}
#sr-nav-menu.sr-nav-menu .sub-menu {
padding-left: var(--sr-space-4);
padding-top: var(--sr-space-2);
display: block;
position: static;
background: transparent;
list-style: none;
}
#sr-nav-menu.sr-nav-menu .sub-menu a {
font-size: 1rem;
color: var(--sr-muted);
}
body.sr-nav-is-open { overflow: hidden; }
}
/* --- Global mobile typography (Part 5) --------------------------------- */
@media (max-width: 600px) {
body { font-size: 0.9375rem; } /* 15px on small phones */
.sr-section-display { font-size: clamp(1.75rem, 6vw, 3rem); }
.sr-section-kicker { font-size: 0.75rem; }
.sr-kicker-mini { font-size: 0.7rem; }
/* Default global headings — only apply where rules don't override */
h1 { font-size: clamp(1.875rem, 7vw, 3rem); }
h2 { font-size: clamp(1.375rem, 5vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 3.5vw, 1.5rem); }
}
/* =========================================================================
TASK 20c — Mobile menu visibility hard-override (v1.7.2)
Diagnosed root cause: a legacy rule earlier in this file —
@media (max-width: 900px) { .sr-header .sr-nav { display: none !important } }
— was hiding the entire