/* ================================================================
SALT — styles.css
An editorial hospitality house in Saint Vincent & the Grenadines.
Structure of this file:
1. CSS variables (master palette, experience accents, type, spacing)
2. Reset & base
3. Typography
4. Layout helpers
5. Header & navigation
6. Hero
7. Section commons + reveal animation
8. Philosophy
9. The SALT World
10. Signature Experiences (+ accent system)
11. Hospitality Partners
12. Passport
13. Journal
14. Founder's note
15. Contact
16. Footer
17. Image placeholder system
18. Responsive breakpoints
19. Reduced motion
================================================================ */
/* ----------------------------------------------------------------
1. CSS VARIABLES
To restyle SALT, change values here. Every colour used in the
site is defined once below — nothing is hard-coded elsewhere.
---------------------------------------------------------------- */
:root {
/* Master palette — limestone and basalt carry the site: a warm light
stone neutral for most backgrounds, near-black ink for text and dark
sections. --salt-white and --warm-ivory remain as slightly lighter/
warmer siblings of limestone, used for gentle section-to-section
variation (the way the reference lookbook alternates cream / cream-soft
/ coconut) rather than one flat colour everywhere. */
--salt-white: #FAF8F4;
--limestone: #E2DAC5; /* darkened slightly from #E7E1D2 for a touch more presence */
--warm-ivory: #F4F0E8;
--parchment: #EFE6D4;
--sand: #D9C7A8;
--soft-stone-grey: #8C8579;
--basalt-charcoal: #17140F;
--deep-ink: #0A0A0A;
--aged-brass: #B9915C;
/* Signature accents — turquoise (sea) and lime green (land) are SALT's
own two recurring accent colours, used site-wide for underlines,
illustrated line art and full-bleed "separating block" sections —
not confined to one experience card. Both are genuinely saturated by
design: the restraint comes from how little surface area they cover
(a line, a label, one full-bleed interlude), not from muting the hue
itself — the same principle Bulgari uses a single saturated gem
against black rather than colouring the whole piece. */
--turquoise: #0FA3A3; /* sea and sky */
--lime-green: #8FD400; /* land and garden */
/* Experience accent library — each signature experience still draws ONE
colour as its own accent (an underline, an eyebrow label) — see the
.accent-* classes further down. SALT Air and SALT Studio use the two
signature accents above directly, since "sea" and "land" are their
literal subjects; Salt & Sorrel, After Dark and Private each keep a
distinct sibling tone from the same rich, warm, Caribbean-editorial
family. Layout and typography stay identical across all five; only
this one colour changes. */
--sorrel-wine: #6B1E2E; /* retained for reference, no longer used as an accent */
--mango-gold: #D98F3B; /* retained for reference, no longer used as an accent */
/* Revised per-experience palette — every gradient below used to open on
a near-black stop for editorial moodiness, but across five experiences
that read as "everything is just black plus one colour" rather than
each experience having its own real hue. Rebuilt so each one is a
genuine, non-black colour family, and picked so the accent tone also
passes WCAG AA (>=3:1) as text on the limestone background. */
/* SALT Air — a rich, deep sea blue into a genuinely light, bright
turquoise (not the darker teal used for text contrast below). */
--bequia-turquoise: #0A7975; /* text/underline use — passes AA on limestone */
--deep-sea-blue: #123F63; /* gradient — rich, dark, but a real blue, not black */
--bright-turquoise: #2FD4C9; /* gradient — light, vivid turquoise */
--pale-aqua: #A8F0E6; /* gradient — shallow-water highlight */
/* Salt & Sorrel — an obviously brown cocoa (not near-black) into a true
hibiscus red, replacing the muddier tamarind/mango-gold pairing. */
--sorrel-brown: #6B4226;
--hibiscus-red: #C81E4A;
--hibiscus-pink: #E85C7B; /* gradient highlight */
/* SALT After Dark — a night-sky nebula gradient (indigo/plum/magenta)
standing in for an actual astrophotography image, which isn't
something I can generate here. Editorial plum, not a flat cartoon
purple, and no orange. */
--nebula-indigo: #150C33;
--nebula-plum: #5C2A7D;
--nebula-magenta: #A8477E;
--nebula-fade: #3A2A52;
/* SALT Studio — indigo dye, clay and bone. Indigo is an actual
traditional craft/dye colour (batik, weaving), paired with terracotta
clay and a warm cream — materials-driven rather than "orange craft"
or a cold black-and-white treatment. */
--studio-indigo: #2E3A70;
--studio-clay: #A8552E;
--studio-cream: #E3D3A8;
/* SALT Private keeps --aged-brass; only its gradient's darkest stop
changes below, from near-black to --chocolate. */
/* SALT Kitchen — fire, spice and harvest. Terracotta and saffron keep it
distinct from Sorrel's wine-red/cocoa and Private's neutral chocolate-
tan; olive is a genuinely new hue in the house palette (garden herbs,
callaloo), used as this experience's --accent-strong. */
--kitchen-terracotta: #7A2E12;
--kitchen-saffron: #D98A2E;
--kitchen-gold-light: #F0C878;
--kitchen-olive: #4B5320;
/* Body-text colour variants — the master site now varies reading-copy
colour by section (basalt, chocolate or deep blue) instead of one flat
ink everywhere. Still dark enough for comfortable reading contrast on
limestone; the variation itself is the point, not the darkness. */
--deep-blue: #14304A;
--chocolate: #3B2415;
/* Typography — a single editorial serif (Bodoni Moda) carries the whole
site: wordmark, headlines, navigation and body copy. No secondary
sans-serif is used. Bodoni Moda is a variable font with an optical-size
axis, so the browser automatically softens its contrast at small sizes
(captions, nav) and heightens it at display sizes (the SALT wordmark) —
that's why body text stays legible even though the same family is used
throughout. See the README for the full rationale. */
/* Logo only — the SALT wordmark and nothing else. Bodoni Moda's dramatic
thick-thin contrast gives a four-letter word real presence, but that
same contrast makes it tiring as a running headline or body face, so
its use is deliberately restricted to the wordmark itself. */
--font-serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
/* Everything functional: navigation, buttons, eyebrows, captions, card
copy, partner-facing paragraphs, footer, forms. Plus Jakarta Sans is
softer and less geometric than Instrument Sans or Inter — it reads as
warm rather than "product UI," while staying legible and compact for
the site's genuinely functional text (nav, buttons, tables, footer). */
--font-sans: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
/* The editorial voice: section headings, pull-quotes, Philosophy,
Founder's Note, the chapter-line transitions, and any other evocative,
brand-defining copy. Cormorant Garamond now also carries section
headings (h2/h3/h4) — Italiana has been retired so the site runs on
two typefaces instead of three, plus the Bodoni logotype. */
--font-statement: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
/* Spacing scale */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 7rem;
/* Layout */
--max-width: 1200px;
--max-width-narrow: 760px;
--border-hairline: 1px solid rgba(28, 27, 24, 0.12);
/* Motion */
--transition-standard: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
/* Fine paper grain, overlaid on every illustrated scene panel at very low
opacity — the same technique used in the Salt & Sorrel lookbook. */
--grain: url('data:image/svg+xml;utf8,');
}
/* ----------------------------------------------------------------
2. RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 84px;
font-size: 112.5%;
}
body {
margin: 0;
background-color: var(--limestone);
color: var(--basalt-charcoal);
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
}
body::before {
/* A quiet stone grain across the whole limestone ground, so the base
colour reads as an actual quarried surface rather than a flat tint. */
content: "";
position: fixed;
inset: 0;
background-image: var(--grain);
opacity: 0.05;
mix-blend-mode: multiply;
pointer-events: none;
z-index: -1;
}
img, svg { max-width: 100%; display: block; }
a {
color: inherit;
text-decoration: none;
}
ul { list-style: none; margin: 0; padding: 0; }
button {
font-family: inherit;
cursor: pointer;
background: none;
border: none;
padding: 0;
}
/* Accessible skip link */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--deep-ink);
color: var(--salt-white);
padding: 0.75rem 1.25rem;
z-index: 1000;
}
.skip-link:focus {
left: var(--space-sm);
top: var(--space-sm);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
:focus-visible {
outline: 2px solid var(--aged-brass);
outline-offset: 3px;
}
/* ----------------------------------------------------------------
3. TYPOGRAPHY
---------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-serif);
/* A lighter base weight than earlier — 500 plus the coloured hairline
outlines that used to sit on every h2 and card title compounded into
a heavier, less premium feel across the page. 400 matches the weight
already used on the SALT wordmark and nav, which read as the right
level of refinement. */
font-weight: 400;
line-height: 1.15;
margin: 0 0 var(--space-sm);
color: var(--deep-ink);
text-transform: uppercase;
letter-spacing: 0.02em;
}
h1 {
/* SALT is the only word this ever renders (every hero across the site),
so pushed as large as the viewport reasonably allows — a dramatic,
full-bleed wordmark rather than a conventional headline size. */
font-size: clamp(4rem, 16vw, 13rem);
font-weight: 400;
/* Pulled down further from 80 — still a genuinely high-contrast
Didone, but the hairlines needed more weight to read comfortably
at a glance rather than just up close. */
font-variation-settings: 'opsz' 62;
letter-spacing: 0.09em;
}
/* Section titles: plain ink, no outline. A turquoise stroke on every h2
across the page (there are six) was the single biggest contributor to
the site feeling heavy rather than premium — removed. Colour now shows
up in fewer, larger moments (the hero, the philosophy statement) instead
of on every heading. */
/* Cormorant Garamond carries every heading except h1 (h1 stays Bodoni
Moda at max optical size — the wordmark/page-title treatment). Light,
not regular — Cormorant Garamond's charm is in its lighter weights, and
luxury type generally reads best thinner than instinct suggests. */
h2, h3, h4 {
font-family: var(--font-statement);
font-weight: 300;
letter-spacing: 0.01em;
}
/* Pulled down from clamp(1.9rem, 4vw, 2.75rem) and given more tracking —
section headings are structural labels ("Kitchen", "The Vision"), not
the site's voice. Quieting them creates real contrast against the
pull-quote / statement moments below, which now carry the emphasis
headings used to compete with. */
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: 0.04em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
p { margin: 0 0 var(--space-sm); }
.eyebrow {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--soft-stone-grey);
margin-bottom: var(--space-sm);
}
.section-title { max-width: 40rem; }
.section-intro {
max-width: 42rem;
color: var(--basalt-charcoal);
/* Plus Jakarta Sans, not Cormorant — this is running body copy, and the
serif read as heavier and less minimal than intended for continuous
reading text. Serif now reserved for headings and true display/pull-
quote moments (Philosophy statement, quote interludes, chapter lines).
Sized down from 1.18rem — sans reads clearly smaller than serif did,
and quieter, smaller body copy suits an UHNWI-facing site better than
large-print text. */
font-family: var(--font-sans);
font-weight: 200;
font-size: 1rem;
line-height: 1.85;
/* A touch more room between paragraphs than the site-wide default
(1rem), so multi-paragraph blocks like this one get real separation
between thoughts rather than reading as one dense block. */
margin-bottom: 1.4rem;
}
/* A single large standalone line, used to open a section without a
supporting paragraph underneath (e.g. the question before the
Collection grid). Deliberately roomier than .section-intro, with
nothing following it. */
.section-question {
max-width: 34rem;
/* Widened from --space-lg (4rem) to --space-xl (7rem) — this is one of
the site's few standalone statement lines, and needs enough air
around it to actually register as a pause rather than just another
paragraph in the flow. */
margin: var(--space-xl) 0;
color: var(--basalt-charcoal);
font-family: var(--font-statement);
font-weight: 300;
font-style: italic;
font-size: clamp(1.6rem, 3.4vw, 2.3rem);
line-height: 1.4;
}
.pull-line {
/* Cormorant Garamond light italic, in ink rather than a bright accent —
a quiet magazine deck line under the pull-quote above it, not a bold
uppercase banner. */
font-family: var(--font-statement);
font-weight: 300;
font-style: italic;
font-size: clamp(1.3rem, 2.6vw, 1.75rem);
color: var(--chocolate);
text-align: center;
max-width: 34rem;
margin: var(--space-xl) auto 0;
}
.note-flag {
font-size: 0.85rem;
color: var(--soft-stone-grey);
font-style: italic;
}
/* ----------------------------------------------------------------
4. LAYOUT HELPERS
---------------------------------------------------------------- */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
.container.narrow {
max-width: var(--max-width-narrow);
}
.section {
padding: var(--space-xl) 0;
position: relative;
}
/* A short, centred rule rather than a full-width hairline — reads as a
deliberate break between sections without cutting the page into visible
blocks, which matters now that several adjacent sections share the same
limestone background. */
.section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 2px;
background-color: rgba(28, 27, 24, 0.28);
}
.cta {
display: inline-block;
padding: 0.9rem 1.9rem;
font-family: var(--font-sans);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid currentColor;
transition: background-color var(--transition-standard), color var(--transition-standard);
}
.cta-light {
color: var(--salt-white);
border-color: rgba(250, 248, 244, 0.7);
}
.cta-light:hover {
background-color: var(--salt-white);
color: var(--deep-ink);
}
.cta-dark {
color: var(--deep-ink);
border-color: var(--deep-ink);
margin-top: var(--space-sm);
}
.cta-dark:hover {
background-color: var(--deep-ink);
color: var(--salt-white);
}
/* ----------------------------------------------------------------
5. HEADER & NAVIGATION
---------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background-color: rgba(250, 248, 244, 0.92);
backdrop-filter: saturate(140%) blur(6px);
border-bottom: var(--border-hairline);
transition: background-color var(--transition-standard);
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 1.1rem var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
}
.wordmark {
font-family: var(--font-serif);
font-size: 1.5rem;
letter-spacing: 0.12em;
color: var(--deep-ink);
}
.primary-nav ul {
display: flex;
gap: var(--space-md);
}
.primary-nav a {
font-size: 0.8rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--basalt-charcoal);
position: relative;
padding-bottom: 4px;
}
.primary-nav a::after {
content: "";
position: absolute;
left: 0; right: 100%;
bottom: 0;
height: 1px;
background-color: var(--aged-brass);
transition: right var(--transition-standard);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
right: 0;
}
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 26px;
}
.menu-toggle-line {
display: block;
height: 1px;
width: 100%;
background-color: var(--deep-ink);
transition: transform var(--transition-standard), opacity var(--transition-standard);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(2) {
opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.mobile-nav {
border-top: var(--border-hairline);
background-color: var(--salt-white);
}
.mobile-nav ul {
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.mobile-nav a {
display: block;
padding: 0.9rem 0;
font-size: 1rem;
font-family: var(--font-sans);
border-bottom: var(--border-hairline);
}
/* ----------------------------------------------------------------
6. HERO
---------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero .hero-media {
/* Qualified with .hero to out-specificity the later .scene-panel rule
(position: relative), which was silently turning this into a normal
half-width column instead of a full-bleed background layer. */
position: absolute;
inset: 0;
z-index: 0;
aspect-ratio: auto;
}
/* A full-bleed breathing image between the hero and Philosophy — no text,
no container, just room to look at a photograph before the copy starts.
Swap the background-image out for real photography; the gradient below
is a placeholder only. */
.section-bleed {
height: 62vh;
min-height: 380px;
max-height: 640px;
background: linear-gradient(150deg, #12160D 0%, #33401C 55%, #8A7A3F 130%);
background-size: cover;
background-position: center;
}
.hero .hero-media::after {
/* Qualified with .hero for the same reason as the rule above — the later
.scene-panel::after rule (grain, background-image: var(--grain)) was
silently winning the background-image sub-property and replacing this
scrim outright, at equal specificity. Also self-contained (explicit
opacity/blend-mode) so it can't inherit that rule's 0.06 opacity and
overlay blend, which would make the scrim nearly invisible. */
content: "";
position: absolute;
inset: 0;
opacity: 1;
mix-blend-mode: normal;
pointer-events: none;
/* A soft bottom scrim so hero text reads clearly over real photography
regardless of what's tonally happening in each shot — darkest right
behind the text, fading to nothing higher up the frame. */
background: linear-gradient(to top, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.2) 40%, rgba(10,10,10,0) 65%);
}
.hero-media::before {
/* Real film-grain texture over the hero photo — pushed up hard from the
original quiet stone-grain opacity now that this is always a real
photograph rather than a flat illustrated gradient, matching the
heavier grain now used on every other real photo on the site. */
content: "";
position: absolute;
inset: 0;
background-image: var(--grain), var(--grain);
background-position: 0 0, 50% 50%;
background-size: 200px 200px, 160px 160px;
opacity: 0.5;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
}
.hero-content {
position: relative;
z-index: 1;
color: var(--salt-white);
padding: 0 var(--space-md) var(--space-xl);
max-width: 46rem;
}
.hero-content .eyebrow {
color: rgba(250, 248, 244, 0.9);
}
/* The homepage hero now carries a real full-bleed photo with the same
bottom scrim as every other page, so it no longer needs its own
chocolate-text exception — white reads correctly here too. */
.hero-title {
color: var(--salt-white);
text-shadow: none;
filter: none;
/* Extra breathing room below the wordmark, now that it's the dominant
element in the hero and needs to feel separated from the line under
it rather than crowding into it. */
margin-bottom: var(--space-md);
}
.hero-tagline {
font-family: var(--font-sans);
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
max-width: 32rem;
}
.hero-subline {
font-size: 0.95rem;
color: rgba(250, 248, 244, 0.92);
margin-bottom: var(--space-md);
}
/* SALT Air only: its gradient stays light/turquoise throughout the hero
crop, which previously made white text hard to read, so this used to
switch the whole hero to chocolate ink instead. That left Air as the one
experience page with dark hero text while the other five stayed white —
an inconsistency of its own. Fixed at the root instead: a scrim gradient
behind the text, darkest at the bottom where the copy sits and fading to
nothing higher up, so the hero stays light and bright everywhere else
but white text reads safely — restoring the same white hero treatment
used on every other experience page. */
.accent-air .hero-media::after {
background: linear-gradient(to top, rgba(10, 42, 69, 0.8) 0%, rgba(10, 42, 69, 0.4) 32%, rgba(10, 42, 69, 0) 62%);
}
/* ----------------------------------------------------------------
7. SECTION COMMONS + REVEAL ANIMATION
---------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ----------------------------------------------------------------
8. PHILOSOPHY
---------------------------------------------------------------- */
.philosophy {
background-color: var(--warm-ivory);
text-align: center;
}
.philosophy .statement {
/* Widened from --space-lg (4rem) to --space-xl (7rem) — this is the
site's single biggest statement moment, and needed more room to
breathe before the supporting copy beneath it starts. */
margin: 0 auto var(--space-xl);
max-width: 42rem;
border: none;
padding: 0;
}
.philosophy .statement p {
/* Cormorant Garamond, light — a second, classic serif used only for this
statement, deliberately thinner and quieter than Bodoni Moda so it
reads as a considered pull-quote rather than a headline. Sized up
slightly and set in italic so it reads as a distinct, larger "voice"
moment against the now-quieter, upright section headings elsewhere
on the page — the contrast between the two is the point. */
font-family: var(--font-statement);
font-weight: 300;
font-style: italic;
font-size: clamp(2.1rem, 5vw, 3.3rem);
line-height: 1.5;
color: var(--basalt-charcoal);
margin: 0;
}
.philosophy-copy {
max-width: 38rem;
margin: 0 auto;
text-align: left;
color: var(--chocolate);
/* Plus Jakarta Sans — running body copy, kept separate from the serif
pull-quote above it, which stays display/heading territory. Sized
down from 1.32rem for the same reason as .section-intro. */
font-family: var(--font-sans);
font-weight: 200;
font-size: 1.05rem;
line-height: 1.85;
}
.philosophy-copy p {
/* This block runs three separate paragraphs — extra room between them
so each reads as its own thought rather than one dense stack. */
margin-bottom: 1.4rem;
}
.philosophy-copy p:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------------
9. THE SALT WORLD
---------------------------------------------------------------- */
.world-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-lg);
align-items: center;
}
.world-text p {
color: var(--deep-blue);
/* Matches .section-intro / .philosophy-copy — running body copy, sans. */
font-family: var(--font-sans);
font-weight: 200;
font-size: 1rem;
line-height: 1.85;
margin-bottom: 1.4rem;
}
.world-text p:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------------
10. SIGNATURE EXPERIENCES + ACCENT SYSTEM
---------------------------------------------------------------- */
.experiences {
background-color: var(--salt-white);
}
/* Alternating rows — image and copy side by side, flipping left-right
every other card. */
.experience-list {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.experience-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
border-top: var(--border-hairline);
padding-top: var(--space-lg);
}
.experience-card:nth-child(even) .experience-media {
order: 2;
}
.experience-eyebrow {
/* Cormorant Garamond — kept for the label's small caps character.
Colour dropped from the per-experience accent down to a quiet
charcoal/grey: this card used to also carry a .chapter-line directly
above it, also serif and also accent-coloured, so two labels were
competing for attention before the heading even loaded. The eyebrow
now does that identity-label job alone, quietly — the accent colour
is reserved for the single hairline underline below, the one
deliberate colour touch per card. */
font-family: var(--font-statement);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft-stone-grey);
margin-bottom: var(--space-xs);
}
.experience-copy h3 {
/* Plain ink, no outline — the coloured underline alone is enough to
signal each experience's own accent without adding weight to the
letterforms themselves. Extra margin-bottom now that the heading
sits directly above the lead paragraph (the redundant .chapter-line
that used to separate them has been removed from this card). */
color: var(--deep-ink);
border-bottom: 2px solid var(--accent-strong, var(--aged-brass));
display: inline-block;
padding-bottom: 0.2rem;
margin-bottom: 1.4rem;
}
.experience-copy > p {
/* The card's lead/body paragraph — narrowed and given more line-height
so it reads as a considered editorial sentence rather than a caption,
now that it's the card's only remaining prose voice. */
max-width: 32rem;
line-height: 1.75;
}
.experience-note {
font-size: 0.9rem;
color: var(--soft-stone-grey);
font-style: italic;
}
.experience-more {
display: inline-block;
margin-top: 0.9rem;
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--deep-ink);
border-bottom: 1px solid var(--accent-strong, var(--aged-brass));
padding-bottom: 2px;
transition: color var(--transition-standard);
}
.experience-more:hover { color: var(--accent-strong, var(--aged-brass)); }
/* Accent colour assignments — one colour per experience, drawn from the
library declared in :root. To retune any single experience, just change
its line below — nothing else about the layout or type needs to change. */
.accent-air { --accent-strong: var(--bequia-turquoise); }
.accent-sorrel { --accent-strong: var(--hibiscus-red); }
.accent-afterdark { --accent-strong: var(--nebula-plum); }
.accent-studio { --accent-strong: var(--studio-indigo); }
.accent-kitchen { --accent-strong: var(--kitchen-olive); }
.accent-private { --accent-strong: var(--aged-brass); }
/* ----------------------------------------------------------------
11. HOSPITALITY PARTNERS
---------------------------------------------------------------- */
.partners {
/* Limestone rather than chocolate — with the Closing CTA already carrying
the site's one deliberate dark moment near the end of each page, a
second dark block here read as a stack rather than an accent. Plain
limestone keeps this section flowing into Passport/Journal/Founder's
Note as one continuous page. */
background-color: var(--limestone);
color: var(--basalt-charcoal);
}
.partners-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-lg);
align-items: center;
}
.partners-subhead {
margin-top: var(--space-md);
font-size: 1rem;
}
/* Instrument Sans rather than Cormorant Garamond — these paragraphs explain how a
partnership actually works, an operational and reassuring register
aimed at a business reader rather than an evocative one, so they sit
with the rest of the site's functional text. :not(.eyebrow) keeps the
small-caps label above untouched. */
.partners-text p:not(.eyebrow) {
font-family: var(--font-sans);
font-size: 1.05rem;
line-height: 1.7;
}
.partners-list li {
padding: 0.55rem 0;
border-bottom: var(--border-hairline);
font-family: var(--font-sans);
font-size: 0.98rem;
}
/* ----------------------------------------------------------------
12. PASSPORT
---------------------------------------------------------------- */
.passport {
background-color: var(--parchment);
}
.passport-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: var(--space-lg);
align-items: center;
}
.passport-list li {
padding: 0.4rem 0;
color: var(--basalt-charcoal);
font-size: 0.95rem;
}
.passport-list li::before {
content: "— ";
color: var(--aged-brass);
}
/* ----------------------------------------------------------------
13. JOURNAL
---------------------------------------------------------------- */
.journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.journal-card .scene-panel {
aspect-ratio: 4 / 3;
margin-bottom: var(--space-sm);
}
.journal-label {
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--soft-stone-grey);
}
.journal-card p:last-child {
font-size: 0.95rem;
color: var(--basalt-charcoal);
}
/* ----------------------------------------------------------------
14. FOUNDER'S NOTE
---------------------------------------------------------------- */
.founder {
/* Limestone rather than chocolate — matches the Partners section above it
and keeps the page reading as one continuous, editorial surface rather
than a run of stacked dark panels before the footer. */
background-color: var(--limestone);
color: var(--basalt-charcoal);
}
.founder-copy p {
font-family: var(--font-sans);
font-weight: 200;
font-size: clamp(0.92rem, 1.3vw, 1.04rem);
line-height: 1.85;
margin-bottom: 1.4rem;
}
.founder-copy p:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------------
15. CONTACT
---------------------------------------------------------------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.contact-card {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: var(--space-md);
border: var(--border-hairline);
transition: border-color var(--transition-standard), background-color var(--transition-standard);
}
.contact-card:hover, .contact-card:focus-visible {
border-color: var(--aged-brass);
background-color: var(--warm-ivory);
}
.contact-label {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--soft-stone-grey);
}
.contact-value {
font-family: var(--font-sans);
font-size: 1.15rem;
color: var(--deep-ink);
}
.social-line {
margin-top: var(--space-md);
font-size: 0.9rem;
color: var(--soft-stone-grey);
}
/* ----------------------------------------------------------------
16. FOOTER
---------------------------------------------------------------- */
.site-footer {
/* Limestone rather than chocolate — the last dark panel on the page,
now brought into the same continuous surface as everything above it. */
background-color: var(--limestone);
color: var(--basalt-charcoal);
padding: var(--space-lg) 0 var(--space-md);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: var(--space-md);
padding-bottom: var(--space-lg);
border-bottom: var(--border-hairline);
}
/* Plus Jakarta Sans, matching the nav — the wordmark keeps the site's
Bodoni Moda identity type via :not(). */
.footer-brand p:not(.footer-wordmark) {
margin: 0 0 0.3rem;
font-family: var(--font-sans);
font-size: 1.05rem;
color: rgba(23, 20, 15, 0.75);
}
.footer-wordmark {
font-size: 1.4rem;
color: var(--deep-ink);
margin-bottom: var(--space-xs);
letter-spacing: 0.12em;
}
.footer-nav ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-nav a {
font-family: var(--font-sans);
font-size: 1rem;
color: rgba(23, 20, 15, 0.8);
}
.footer-nav a:hover { color: var(--aged-brass); }
.footer-contact a {
display: inline-block;
margin-bottom: 0.4rem;
font-family: var(--font-sans);
font-size: 1.05rem;
color: var(--chocolate);
}
.footer-contact p { color: rgba(23, 20, 15, 0.7); font-size: 0.9rem; }
.footer-base {
padding-top: var(--space-md);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-xs);
font-family: var(--font-sans);
font-size: 0.92rem;
color: rgba(23, 20, 15, 0.6);
}
/* ----------------------------------------------------------------
17. ILLUSTRATED SCENE PANELS
Stand-ins for photography that has not yet been produced. Rather than a
plain textured box, each panel is an original illustrated composition —
a gradient in the section's own colour, a thin line-art motif, and a
fine grain overlay — in the same spirit as the Salt & Sorrel lookbook.
Nothing here is a photograph or attempts to look like one.
To bring in real photography later: delete the inner