/* ==========================================================================
Jackson Grimm Resort & Casino — style.css
Single stylesheet for the whole site. Plain CSS, no preprocessor.
Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280 px, plus 1152 px
for the header menu (full row from 1152, burger below)
(custom properties cannot be used inside media queries, so the values
are written out literally in each @media rule).
Contents
0. Fonts (self-hosted)
1. Design tokens
2. Reset & base
3. Typography
4. Layout: container, sections, grid
5. Brand details: divider, grain, marble
6. Components: buttons, cards, badges
7. Site header
8. Mobile navigation
9. Site footer
10. Home: hero
11. Home: about & stats
12. Home: rooms & suites (tabs)
13. Home: dining
14. Home: casino
15. Home: spa & pools
16. Home: events
17. Home: gallery & lightbox
18. Home: experiences & location
19. Home: the vision
20. Home: FAQ
21. Home: interest list CTA
22. Contact page & form
23. Legal pages
24. 404 page
25. Scroll effects: reveal, sentinels, back to top
26. Reduced motion
========================================================================== */
/* ==========================================================================
0. Fonts (self-hosted)
The site makes no third-party requests: fonts are served from /fonts.
Both families are variable fonts, so one file per character subset
covers every weight the site uses (300, 400, 500). Shipped subsets:
latin and latin-ext for both families, plus Cyrillic for Inter (the
Ukrainian site-owner block in the footer). unicode-range makes the
browser download a subset only when a page contains its characters.
The two latin files are preloaded in every page .
Licence: SIL Open Font License 1.1 (fonts/OFL-*.txt).
========================================================================== */
/* Cormorant Garamond — headings */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* Inter — body text and UI */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url("../fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url("../fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* Inter, Cyrillic — only for the Ukrainian site-owner block in the footer.
Not preloaded: the footer is never in the first screen. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url("../fonts/inter-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* ==========================================================================
1. Design tokens
========================================================================== */
:root {
/* Palette */
--c-ink: #0B1220; /* main background */
--c-ink-2: #111A2C; /* alternating dark sections */
--c-ink-3: #1A2438; /* cards, borders */
--c-brass: #C9A227; /* accent */
--c-brass-dim: #8B6914; /* gradients, hover */
--c-cream: #F5F1E8; /* light background, main text on dark */
--c-cream-dim: #C8C2B4; /* secondary text */
--c-marble: #FBF9F5; /* light sections */
--c-line: rgba(201, 162, 39, .22);
/* Derived from the palette, for light (marble) surfaces only */
--c-ink-dim: rgba(11, 18, 32, .72); /* secondary text on marble, 7:1 */
--c-line-dark: rgba(139, 105, 20, .28); /* hairlines on marble */
--c-error: #E8836B; /* form errors on dark, 6.5:1 on --c-ink-2 */
/* Surface tokens — components read these, never the raw palette.
Dark surface is the default; .section--marble swaps them (section 4).
Brass on marble is only 2.3:1, so light surfaces use --c-brass-dim (4.8:1). */
--text: var(--c-cream);
--text-dim: var(--c-cream-dim);
--heading: var(--c-cream);
--accent: var(--c-brass);
--accent-contrast: var(--c-ink); /* text colour on an --accent fill */
--line: var(--c-line);
--card-bg: var(--c-ink-3);
--focus: var(--c-brass);
/* Font families */
--ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Fluid type scale (no media queries for typography) */
--fs-h1: clamp(2.6rem, 6vw, 5rem);
--fs-h2: clamp(2rem, 4vw, 3.4rem);
--fs-h3: clamp(1.4rem, 2.4vw, 2rem);
--fs-h4: clamp(1.15rem, 1.6vw, 1.35rem);
--fs-body: clamp(1rem, 1.1vw, 1.125rem);
--fs-lead: clamp(1.1rem, 1.5vw, 1.3rem);
--fs-small: .875rem;
--fs-eyebrow: .72rem;
/* Layout */
--container: 1320px;
--gutter: clamp(1.25rem, 5vw, 4rem);
--section-y: clamp(4.5rem, 9vw, 9rem);
--measure: 760px; /* readable column on legal pages */
--grid-gap: clamp(1.25rem, 2.5vw, 2rem);
--header-h: 5rem; /* fixed header height, used for anchor offsets */
/* Motion */
--ease-out: cubic-bezier(.2, .8, .2, 1);
--dur-fast: .25s;
--dur-base: .45s;
--dur-slow: .7s;
/* Radii: cards are square; only CTA pill buttons are rounded */
--radius-0: 0;
--radius-pill: 999px;
/* Layering */
--z-header: 100; /* the mobile menu overlay lives inside the header */
--z-lightbox: 200;
--z-skip: 1000;
/* ------------------------------------------------------------------------
Textures (SVG data URIs, see section 5)
Grain — 240×240 tile, seamless thanks to stitchTiles:
Marble — 600×600 tile. A light fill with a few thin straight veins is
bent twice by fractal noise: first by a very slow noise (one period per
tile) that curves the veins into broad arcs, then by the main noise
(baseFrequency .012, 3 octaves) that gives them their fine meander.
A slight blur removes any sharp edge. Veins are periodic lines and both
noises are stitched and tiled (feTile), so the tile repeats seamlessly.
All filtering happens inside this 600×600 image; it is rasterised once
and then repeated, no CSS filter is applied to any element.
The encoded strings below are split over several lines with CSS string
line continuations (a backslash before the line break).
------------------------------------------------------------------------ */
--tex-grain: url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E\
%3Cfilter id='g'%3E\
%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E\
%3CfeColorMatrix type='saturate' values='0'/%3E\
%3C/filter%3E\
%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E\
%3C/svg%3E");
--tex-marble: url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E\
%3Cfilter id='m' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse' x='-300' y='-300' width='1200' height='1200' color-interpolation-filters='sRGB'%3E\
%3CfeTurbulence type='fractalNoise' baseFrequency='0.00167' numOctaves='2' seed='5' stitchTiles='stitch' x='0' y='0' width='600' height='600' result='m0'/%3E\
%3CfeTile in='m0' result='macro'/%3E\
%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch' x='0' y='0' width='600' height='600' result='d0'/%3E\
%3CfeTile in='d0' result='detail'/%3E\
%3CfeDisplacementMap in='SourceGraphic' in2='macro' scale='320' xChannelSelector='R' yChannelSelector='G' result='bent'/%3E\
%3CfeDisplacementMap in='bent' in2='detail' scale='80' xChannelSelector='R' yChannelSelector='G'/%3E\
%3CfeGaussianBlur stdDeviation='1.8'/%3E\
%3C/filter%3E\
%3Cg filter='url(%23m)'%3E\
%3Crect x='-300' y='-300' width='1200' height='1200' fill='%23FBF9F5'/%3E\
%3Cg fill='none' stroke='%23A89878' stroke-linecap='round'%3E\
%3Cpath d='M-300 -150L900 -1350M-300 450L900 -750M-300 1050L900 -150M-300 1650L900 450' stroke-width='2.4' stroke-opacity='0.38'/%3E\
%3Cpath d='M-300 -124L900 -1324M-300 476L900 -724M-300 1076L900 -124M-300 1676L900 476' stroke-width='0.9' stroke-opacity='0.26'/%3E\
%3Cpath d='M-300 885L900 1485M-300 585L900 1185M-300 285L900 885M-300 -15L900 585M-300 -315L900 285M-300 -615L900 -15' stroke-width='0.8' stroke-opacity='0.1'/%3E\
%3C/g%3E\
%3C/g%3E\
%3C/svg%3E");
}
/* ==========================================================================
2. Reset & base
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
color-scheme: dark;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-h); /* anchors land below the fixed header */
scrollbar-gutter: stable; /* no jump when an overlay locks scrolling */
}
body {
min-height: 100vh;
background-color: var(--c-ink);
color: var(--text);
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img,
video {
height: auto; /* keeps the aspect ratio reserved by width/height attributes */
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
/* Lists used as UI (menus, grids) carry a class; plain lists in text keep bullets */
ul[class],
ol[class] {
padding: 0;
list-style: none;
}
table {
border-collapse: collapse;
}
address {
font-style: normal;
}
[hidden] {
display: none !important;
}
::selection {
background-color: var(--c-brass);
color: var(--c-ink);
}
/* Visible keyboard focus everywhere: 2px brass outline, 3px offset */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
/* Skip link: off-canvas until it receives keyboard focus */
.skip-link {
position: absolute;
top: 1rem;
left: 1rem;
z-index: var(--z-skip);
padding: .75rem 1.25rem;
background-color: var(--c-brass);
color: var(--c-ink);
font-size: var(--fs-small);
font-weight: 500;
text-decoration: none;
transform: translateY(calc(-100% - 2rem));
transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
transform: none;
}
/* ==========================================================================
3. Typography
========================================================================== */
h1,
h2,
h3,
h4 {
font-family: var(--ff-display);
font-weight: 300;
letter-spacing: .01em;
line-height: 1.12;
color: var(--heading);
text-wrap: balance;
overflow-wrap: break-word;
}
h1 {
font-size: var(--fs-h1);
line-height: 1.04;
}
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
line-height: 1.2;
}
h4 {
font-size: var(--fs-h4);
font-weight: 400;
line-height: 1.3;
}
p {
text-wrap: pretty;
overflow-wrap: break-word;
}
strong,
b {
font-weight: 500;
}
small {
font-size: var(--fs-small);
}
/* Text links: accent colour with a fine underline. UI links (nav, buttons,
logo) reset this in their own blocks. */
a {
color: var(--accent);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
transition: color var(--dur-fast) ease;
}
a:hover {
color: var(--text);
}
/* Eyebrow: small uppercase label above headings */
.eyebrow {
display: block;
margin-bottom: 1.25rem;
font-family: var(--ff-body);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .28em;
line-height: 1.4;
text-transform: uppercase;
color: var(--accent);
}
.lead {
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.6;
color: var(--text-dim);
}
.text-dim {
color: var(--text-dim);
}
/* Vertical rhythm for text blocks: space between siblings only */
.flow > * + * {
margin-top: var(--flow-space, 1.1em);
}
/* ==========================================================================
4. Layout: container, sections, grid
========================================================================== */
/* Footer stays at the bottom of short pages (404, contact) */
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Narrow reading column (legal pages): 760px of text plus gutters */
.container--narrow {
max-width: calc(var(--measure) + 2 * var(--gutter));
}
/* Sections. isolation lets the texture layer (::before, z-index -1) sit
between the section background and its content. */
.section {
position: relative;
isolation: isolate;
padding-block: var(--section-y);
}
.section--ink {
background-color: var(--c-ink);
}
.section--ink-2 {
background-color: var(--c-ink-2);
}
.section--marble {
color-scheme: light;
background-color: var(--c-marble);
color: var(--text);
--text: var(--c-ink);
--text-dim: var(--c-ink-dim);
--heading: var(--c-ink);
--accent: var(--c-brass-dim);
--accent-contrast: var(--c-cream);
--line: var(--c-line-dark);
--card-bg: var(--c-cream);
--focus: var(--c-brass-dim);
}
/* Section heading block: eyebrow + h2 + optional lead */
.section-head {
max-width: 48rem;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head > .lead {
margin-top: 1.25rem;
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
/* Grid: one column on phones, more as space allows */
.grid {
display: grid;
gap: var(--grid-gap);
}
@media (min-width: 480px) {
.grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.grid--2,
.grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ==========================================================================
5. Brand details: divider, grain, marble
========================================================================== */
/* Divider: a hairline in brass that fades out at both ends, with a small
outlined diamond in the middle. Use on
. */
.divider {
position: relative;
width: min(100%, 28rem);
height: 1px;
margin: 0 auto;
overflow: visible;
border: 0;
background-image: linear-gradient(
90deg,
transparent 0,
var(--accent) 30%,
var(--accent) calc(50% - 14px),
transparent calc(50% - 14px),
transparent calc(50% + 14px),
var(--accent) calc(50% + 14px),
var(--accent) 70%,
transparent 100%
);
opacity: .8;
}
/* Outlined diamond */
.divider::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border: 1px solid var(--accent);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Solid dot inside the diamond */
.divider::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 3px;
background-color: var(--accent);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Shared texture layer: sits behind content, above the section background */
.section--ink::before,
.section--ink-2::before,
.section--marble::before,
.grain::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* Grain over dark surfaces. .grain adds it to any other dark block. */
.grain {
position: relative;
isolation: isolate;
}
.section--ink::before,
.section--ink-2::before,
.grain::before {
background-image: var(--tex-grain);
background-size: 240px 240px;
opacity: .035;
}
/* Marble veins over light surfaces */
.section--marble::before {
background-image: var(--tex-marble);
background-size: 600px 600px;
opacity: .6;
}
/* ==========================================================================
6. Components: buttons, cards, badges
========================================================================== */
/* ---- Buttons --------------------------------------------------------------
Pill-shaped: the only rounded elements on the site. Colours come from
local custom properties, so variants only swap variables. */
.btn {
--btn-fg: var(--accent);
--btn-bg: transparent;
--btn-bd: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .75em;
min-height: 3rem;
padding: .9em 1.9em;
font-family: var(--ff-body);
font-size: .78rem;
font-weight: 500;
letter-spacing: .18em;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: var(--btn-fg);
background-color: var(--btn-bg);
border: 1px solid var(--btn-bd);
border-radius: var(--radius-pill);
cursor: pointer;
transition:
color var(--dur-fast) ease,
background-color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
.btn:hover {
color: var(--btn-fg);
}
/* Filled brass */
.btn--solid {
--btn-fg: var(--c-ink);
--btn-bg: var(--c-brass);
--btn-bd: var(--c-brass);
}
.btn--solid:hover {
--btn-fg: var(--c-cream);
--btn-bg: var(--c-brass-dim);
--btn-bd: var(--c-brass-dim);
}
/* Brass outline */
.btn--outline:hover {
--btn-fg: var(--accent-contrast);
--btn-bg: var(--accent);
}
/* Cream outline, for use over photographs */
.btn--light {
--btn-fg: var(--c-cream);
--btn-bd: rgba(245, 241, 232, .6);
}
.btn--light:hover {
--btn-fg: var(--c-ink);
--btn-bg: var(--c-cream);
--btn-bd: var(--c-cream);
}
/* ---- Cards ----------------------------------------------------------------
Square corners. On hover (or keyboard focus inside) the image zooms to
1.04 over 700ms and a brass frame fades in over it. */
.card {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--card-bg);
border-radius: var(--radius-0);
}
.card__media {
position: relative;
overflow: hidden;
aspect-ratio: var(--card-ratio, 4 / 3);
background-color: var(--c-ink-3);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
/* Brass frame, inset over the image */
.card__media::after {
content: "";
position: absolute;
inset: 1.25rem;
border: 1px solid var(--c-brass);
opacity: 0;
pointer-events: none;
transition:
opacity var(--dur-slow) var(--ease-out),
inset var(--dur-slow) var(--ease-out);
}
.card:focus-within .card__media img {
transform: scale(1.04);
}
.card:focus-within .card__media::after {
inset: .75rem;
opacity: 1;
}
@media (hover: hover) {
.card:hover .card__media img {
transform: scale(1.04);
}
.card:hover .card__media::after {
inset: .75rem;
opacity: 1;
}
}
.card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: .75rem;
padding: clamp(1.25rem, 2.5vw, 2rem);
}
.card__title {
font-size: var(--fs-h3);
}
.card__text {
color: var(--text-dim);
}
/* A button at the end of a card keeps its natural width and sits at the
bottom, so buttons line up across a row of cards */
.card__body > .btn:last-child {
align-self: flex-start;
margin-top: auto;
}
/* ---- Badges ---------------------------------------------------------------
18+ age badge: square outline, same rule as cards (no rounding). */
.badge-18 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.6em;
height: 2.6em;
padding-inline: .45em;
font-family: var(--ff-body);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .04em;
line-height: 1;
color: var(--accent);
border: 1px solid var(--accent);
}
/* ---- Tag: square outlined label, e.g. "Subject to licensing" ------------- */
.tag {
display: inline-flex;
align-items: center;
padding: .5em 1em;
font-family: var(--ff-body);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .2em;
line-height: 1.3;
text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
}
/* Small label above a card title, e.g. "Planned" */
.card__label {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
}
/* ---- List with small outlined diamonds as bullets ------------------------ */
.list-diamond {
display: grid;
gap: .55rem;
}
.list-diamond li {
position: relative;
padding-left: 1.2rem;
}
.list-diamond li::before {
content: "";
position: absolute;
top: .62em;
left: .1rem;
width: 5px;
height: 5px;
border: 1px solid var(--accent);
transform: rotate(45deg);
}
/* ---- Split: an image beside a text block (dining, spa) -------------------
One column on phones; from 768px image and text sit side by side.
.split--reverse puts the image on the right. */
.split {
display: grid;
gap: clamp(1.5rem, 4vw, 4.5rem);
align-items: center;
}
.split + .split {
margin-top: clamp(3rem, 7vw, 6rem);
}
.split__media {
position: relative;
overflow: hidden;
aspect-ratio: var(--split-ratio, 3 / 2);
background-color: var(--c-ink-3);
}
.split__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.split__body {
max-width: 34rem;
color: var(--text-dim);
}
.split__body h3 {
color: var(--heading);
}
@media (min-width: 768px) {
.split {
grid-template-columns: 7fr 5fr;
}
.split--reverse {
grid-template-columns: 5fr 7fr;
}
.split--reverse .split__media {
order: 2;
}
}
/* ---- Data table ----------------------------------------------------------
Wide tables scroll inside .table-wrap instead of widening the page. */
.table-wrap {
overflow-x: auto;
}
.table {
width: 100%;
min-width: 34rem;
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
}
.table caption {
padding-bottom: 1rem;
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .28em;
text-align: left;
text-transform: uppercase;
color: var(--accent);
}
.table th,
.table td {
padding: .95rem 1rem;
text-align: right;
border-bottom: 1px solid var(--line);
}
.table th:first-child {
padding-left: 0;
text-align: left;
}
.table thead th {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
}
.table tbody th {
font-family: var(--ff-display);
font-size: 1.2rem;
font-weight: 400;
color: var(--heading);
}
/* ==========================================================================
7. Site header
Fixed to the top. On the home page it starts transparent over the hero,
with a soft ink scrim for legibility, and turns solid ink with a hairline
after 80px of scroll. Inner pages have no hero, so there the header is
solid from the start and is pushed down by the header height.
State hooks, set by main.js (Stage 6):
.site-header.is-scrolled solid background after 80px
.site-nav__link.is-active scroll-spy highlight
========================================================================== */
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: var(--z-header);
color: var(--c-cream);
background-color: rgba(11, 18, 32, 0);
background-image: linear-gradient(to bottom, rgba(11, 18, 32, .65), rgba(11, 18, 32, 0));
background-origin: border-box; /* otherwise the scrim repeats into the 1px border as a dark line */
background-repeat: no-repeat;
border-bottom: 1px solid transparent;
transition:
background-color var(--dur-base) ease,
border-color var(--dur-base) ease;
}
.site-header.is-scrolled,
.page-inner .site-header {
background-color: var(--c-ink);
border-bottom-color: var(--c-line);
}
.page-inner main {
padding-top: var(--header-h);
}
.site-header__inner {
display: flex;
align-items: center;
gap: clamp(1rem, 2vw, 2rem);
height: var(--header-h);
}
/* ---- Logo: JG monogram in a diamond + wide-tracked wordmark --------------- */
.logo {
display: inline-flex;
align-items: center;
gap: .85rem;
color: var(--c-cream);
text-decoration: none;
}
.logo:hover {
color: var(--c-cream);
}
.site-header .logo {
margin-right: auto; /* pushes nav, CTA and burger to the right */
}
.logo__mark {
position: relative;
display: grid;
flex: none;
place-items: center;
width: 2.75rem;
height: 2.75rem;
font-family: var(--ff-display);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: .02em;
line-height: 1;
color: var(--c-brass);
}
.logo__mark::before {
content: "";
position: absolute;
inset: .4rem;
border: 1px solid var(--c-brass);
transform: rotate(45deg);
transition: transform var(--dur-slow) var(--ease-out);
}
.logo:hover .logo__mark::before {
transform: rotate(135deg);
}
.logo__text {
font-family: var(--ff-body);
font-size: .7rem;
font-weight: 500;
letter-spacing: .32em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
/* ---- Menu links (desktop look; the overlay restyles them in section 8) ---- */
.site-nav__link {
position: relative;
display: inline-block;
padding-block: .4rem;
font-size: .72rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
white-space: nowrap;
color: var(--c-cream);
text-decoration: none;
transition: color var(--dur-fast) ease;
}
/* Hairline that draws in under hovered and active items */
.site-nav__link::after {
content: "";
position: absolute;
left: 0;
right: .2em; /* compensates the trailing letter-spacing */
bottom: 0;
height: 1px;
background-color: var(--c-brass);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] {
color: var(--c-brass);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after,
.site-nav__link[aria-current="page"]::after {
transform: scaleX(1);
}
/* ---- Header CTA: brass outline, from 768px up ----------------------------- */
.site-header__cta {
display: none;
flex: none;
min-height: 2.6rem;
padding: .7em 1.4em;
font-size: .7rem;
}
@media (min-width: 768px) {
.site-header__cta {
display: inline-flex;
}
}
/* ---- Burger: three hairlines, the lower one shorter; turns into a cross --- */
.nav-toggle {
display: inline-grid;
flex: none;
place-items: center;
width: 2.75rem;
height: 2.75rem;
margin-right: -.6rem; /* optical alignment with the container edge */
color: var(--c-cream);
}
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
display: block;
width: 1.5rem;
height: 1px;
background-color: currentColor;
transition:
transform var(--dur-base) var(--ease-out),
background-color var(--dur-fast) ease,
width var(--dur-base) var(--ease-out);
}
.nav-toggle__icon {
position: relative;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
content: "";
position: absolute;
right: 0;
}
.nav-toggle__icon::before {
top: -7px;
}
.nav-toggle__icon::after {
top: 7px;
width: 1rem;
}
.nav-toggle:hover {
color: var(--c-brass);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
background-color: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
width: 1.5rem;
transform: translateY(-7px) rotate(-45deg);
}
/* ==========================================================================
8. Mobile navigation
Below 1152px the menu is a full-screen overlay. It sits inside the header
with z-index -1, so it covers the page while the logo and the burger stay
on top of it. Closed, it is hidden with visibility, so its links cannot
receive focus. Items fly in one after another when it opens.
State hooks, set by main.js (Stage 6):
.site-nav.is-open overlay visible
.nav-toggle[aria-expanded="true"] burger shown as a cross
html.is-scroll-locked page behind the overlay does not scroll
Esc and a click on the overlay outside the links close it (main.js).
From 1152px the menu is an ordinary row in the header.
========================================================================== */
html.is-scroll-locked {
overflow: hidden;
}
/* CTA copy inside the overlay: phones only (the header CTA covers 768px+) */
.site-nav__cta {
align-self: flex-start;
}
@media (min-width: 768px) {
.site-nav__cta {
display: none;
}
}
@media (max-width: 1151.98px) {
.site-nav {
position: fixed;
inset: 0;
z-index: -1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2.5rem;
padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--c-ink);
opacity: 0;
visibility: hidden;
transition:
opacity var(--dur-base) var(--ease-out),
visibility 0s linear var(--dur-base);
}
/* Same grain as the dark sections */
.site-nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--tex-grain);
background-size: 240px 240px;
opacity: .035;
pointer-events: none;
}
.site-nav.is-open {
opacity: 1;
visibility: visible;
transition:
opacity var(--dur-base) var(--ease-out),
visibility 0s;
}
.site-nav__list {
display: flex;
flex-direction: column;
gap: .35rem;
}
/* Items and CTA start slightly lower and transparent */
.site-nav__list > li,
.site-nav__cta {
opacity: 0;
transform: translateY(1.25rem);
transition:
opacity .5s var(--ease-out),
transform .5s var(--ease-out);
}
.site-nav.is-open .site-nav__list > li,
.site-nav.is-open .site-nav__cta {
opacity: 1;
transform: none;
}
/* Stagger on open only; closing is immediate */
.site-nav.is-open .site-nav__list > li:nth-child(1) { transition-delay: .10s; }
.site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: .15s; }
.site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: .20s; }
.site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: .25s; }
.site-nav.is-open .site-nav__list > li:nth-child(5) { transition-delay: .30s; }
.site-nav.is-open .site-nav__list > li:nth-child(6) { transition-delay: .35s; }
.site-nav.is-open .site-nav__list > li:nth-child(7) { transition-delay: .40s; }
.site-nav.is-open .site-nav__cta { transition-delay: .48s; }
/* Large serif links in the overlay */
.site-nav__link {
padding-block: .15rem;
font-family: var(--ff-display);
font-size: clamp(2rem, 7vw, 2.75rem);
font-weight: 300;
letter-spacing: .01em;
line-height: 1.25;
text-transform: none;
}
.site-nav__link::after {
right: 0;
}
}
@media (min-width: 1152px) {
.nav-toggle {
display: none;
}
.site-nav__list {
display: flex;
align-items: center;
gap: clamp(1.25rem, 1.8vw, 2rem);
}
}
/* ==========================================================================
9. Site footer
Four columns on desktop, two on tablets. On phones the brand column stays
open and Explore / Legal / Stay in touch become an accordion.
Accordion contract with main.js (Stage 6):
- markup ships with aria-expanded="true", so without JavaScript every
link is visible and reachable;
- below 768px main.js collapses the panels (aria-expanded="false") and
keeps the open/closed state in localStorage (technical storage,
described in the Cookie Policy);
- from 768px up the headings are not interactive and panels are open.
The panel height animates through grid-template-rows (0fr ↔ 1fr).
========================================================================== */
.site-footer {
padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
background-color: var(--c-ink);
border-top: 1px solid var(--c-line);
font-size: var(--fs-small);
line-height: 1.7;
color: var(--c-cream-dim);
}
.site-footer__grid {
display: grid;
}
/* ---- Brand column -------------------------------------------------------- */
.site-footer__col--brand {
padding-bottom: 2.25rem;
}
.site-footer__tagline {
max-width: 22rem;
margin-top: 1.5rem;
font-family: var(--ff-display);
font-size: 1.3rem;
font-weight: 300;
line-height: 1.4;
color: var(--c-cream);
}
.site-footer__address {
margin-top: 1.25rem;
}
/* ---- Column headings / accordion toggles --------------------------------- */
.site-footer__title {
font-family: var(--ff-body);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .28em;
line-height: 1.4;
text-transform: uppercase;
color: var(--c-brass);
}
.site-footer__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding-block: 1.2rem;
letter-spacing: inherit;
text-align: left;
text-transform: inherit;
}
/* Plus sign that turns into a cross when the panel is open */
.site-footer__toggle::after {
content: "";
flex: none;
width: .7rem;
height: .7rem;
background:
linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
transition: transform var(--dur-base) var(--ease-out);
}
.site-footer__toggle[aria-expanded="true"]::after {
transform: rotate(45deg);
}
.site-footer__panel {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.site-footer__panel-inner {
min-height: 0;
overflow: hidden;
}
/* ---- Lists and links ----------------------------------------------------- */
.site-footer__list {
display: grid;
gap: .55rem;
}
.site-footer__list--contacts {
gap: .9rem;
margin-top: 1.25rem;
}
.site-footer__label {
display: block;
font-size: var(--fs-eyebrow);
letter-spacing: .2em;
text-transform: uppercase;
}
.site-footer__list a,
.site-footer__address a {
color: var(--c-cream);
text-decoration: none;
overflow-wrap: anywhere; /* long e-mail addresses on narrow screens */
}
.site-footer__list a:hover,
.site-footer__address a:hover,
.site-footer__list a[aria-current="page"] {
color: var(--c-brass);
}
/* ---- Bottom row: copyright, responsible gaming, site owner --------------- */
.site-footer__bottom {
display: grid;
gap: 1.5rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: 2rem;
border-top: 1px solid var(--c-line);
font-size: .8rem;
}
/* Below 1024px the bottom row stacks and its last line — the publisher's
name and address — ends up under the fixed back-to-top button. Reserve the
button's footprint (3rem + its 1rem offset) so the imprint stays readable. */
@media (max-width: 1023.98px) {
.site-footer__bottom {
padding-bottom: 5rem;
}
}
.site-footer__rg {
display: flex;
align-items: flex-start;
gap: .9rem;
max-width: 40rem;
}
.site-footer__rg .badge-18 {
flex: none;
}
/* ---- Phones: accordion --------------------------------------------------- */
@media (max-width: 767.98px) {
.site-footer__col--collapsible {
border-top: 1px solid var(--c-line);
}
.site-footer__col--collapsible:last-child {
border-bottom: 1px solid var(--c-line);
}
.site-footer__panel-inner > :last-child {
margin-bottom: 1.5rem;
}
.site-footer__title:has(> [aria-expanded="false"]) + .site-footer__panel {
grid-template-rows: 0fr;
}
/* Collapsed links must not be reachable with Tab */
.site-footer__title:has(> [aria-expanded="false"]) + .site-footer__panel > .site-footer__panel-inner {
visibility: hidden;
transition: visibility 0s linear var(--dur-base);
}
}
/* ---- Tablets and up: plain columns --------------------------------------- */
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem 2.5rem;
}
.site-footer__col--brand {
padding-bottom: 0;
}
.site-footer__toggle {
padding-block: 0 1.25rem;
cursor: default;
pointer-events: none;
}
.site-footer__toggle::after {
display: none;
}
}
@media (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
}
.site-footer__bottom {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 2.5rem;
}
}
/* ==========================================================================
10. Home: hero
Full-screen slider. The box height is fixed by the viewport, so slides
changing never shift the layout. Slides are stacked and cross-fade;
main.js (Stage 6) moves .is-active and updates the dots. Without
JavaScript the first slide simply stays in place.
========================================================================== */
/* Two children are in flow — .hero__content and .hero__meta (.hero__slides is
absolute) — so space-between pins the meta row to the bottom edge without
letting it run past it. svh is the collapsed-toolbar height: on phones 100vh
is the *expanded* height, which puts the meta row under the address bar. */
.hero {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
min-height: 100svh;
padding-bottom: 1.5rem;
overflow: hidden;
color: var(--c-cream);
background-color: var(--c-ink);
}
/* Legibility scrim over the images: darker at the bottom, where the text is */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(
to top,
rgba(11, 18, 32, .92) 0%,
rgba(11, 18, 32, .55) 38%,
rgba(11, 18, 32, .15) 68%,
rgba(11, 18, 32, .35) 100%
),
linear-gradient(to right, rgba(11, 18, 32, .6) 0%, rgba(11, 18, 32, 0) 65%);
pointer-events: none;
}
.hero__slides {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.2s ease;
}
.hero__slide.is-active {
opacity: 1;
}
.hero__slide picture,
.hero__slide img {
width: 100%;
height: 100%;
}
.hero__slide img {
object-fit: cover;
}
/* The vertical rhythm is tied to viewport height as well as width, so the hero
shrinks smoothly as the window gets shorter instead of stepping at a
breakpoint and overflowing just above it. */
.hero__content {
padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 3rem));
}
.hero__title {
max-width: 19ch;
margin-top: .25rem;
/* Cap by height too: at 5rem a two-line H1 alone eats half a short screen */
font-size: min(var(--fs-h1), 9vh);
}
.hero__lead {
max-width: 38rem;
margin-top: clamp(.75rem, 2vh, 1.5rem);
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.6;
color: rgba(245, 241, 232, .9);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem 1rem;
margin-top: clamp(1rem, 3vh, 2.25rem);
}
/* Bottom row: artist's impressions note, scroll cue, slider controls */
.hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem 2rem;
margin-top: clamp(1rem, 4vh, 4rem);
padding-block: clamp(.75rem, 2vh, 1.25rem) 0;
border-top: 1px solid rgba(245, 241, 232, .16);
}
.hero__note {
max-width: 26rem;
font-size: .75rem;
line-height: 1.5;
letter-spacing: .02em;
color: rgba(245, 241, 232, .8);
}
/* Scroll cue: a label over a brass hairline that keeps drawing downwards */
.hero__scroll {
display: none;
flex-direction: column;
align-items: center;
gap: .6rem;
font-size: .66rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
text-decoration: none;
color: var(--c-cream);
}
.hero__scroll::after {
content: "";
width: 1px;
height: 2.5rem;
background-image: linear-gradient(var(--c-brass), rgba(201, 162, 39, 0));
transform-origin: top center;
animation: scroll-cue 2.4s var(--ease-out) infinite;
}
@keyframes scroll-cue {
0% { transform: scaleY(0); opacity: 1; }
60% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(1); opacity: 0; }
}
/* ---- Slider controls: square arrows, diamond dots ------------------------ */
.slider__controls {
display: flex;
align-items: center;
gap: 1rem;
}
.slider__arrow {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
color: var(--c-cream);
border: 1px solid rgba(245, 241, 232, .4);
transition:
color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
/* Chevron drawn with two borders */
.slider__arrow::before {
content: "";
width: .55rem;
height: .55rem;
border-top: 1px solid currentColor;
border-left: 1px solid currentColor;
}
.slider__arrow--prev::before {
transform: translateX(2px) rotate(-45deg);
}
.slider__arrow--next::before {
transform: translateX(-2px) rotate(135deg);
}
.slider__arrow:hover {
color: var(--c-brass);
border-color: var(--c-brass);
}
.slider__dots {
display: flex;
}
/* 24px tap target around a small diamond */
.slider__dot {
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
}
.slider__dot::before {
content: "";
width: .5rem;
height: .5rem;
border: 1px solid rgba(245, 241, 232, .75);
transform: rotate(45deg);
transition:
background-color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
.slider__dot[aria-current="true"]::before {
background-color: var(--c-brass);
border-color: var(--c-brass);
}
/* Horizontal swipes go to main.js, vertical ones still scroll the page */
.hero {
touch-action: pan-y;
}
/* Pause / play button, added by main.js when autoplay is possible.
Two bars = pause; a triangle (.is-paused) = play. */
.slider__toggle {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
color: var(--c-cream);
border: 1px solid rgba(245, 241, 232, .4);
transition:
color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
.slider__toggle::before {
content: "";
width: .55rem;
height: .7rem;
border-right: 2px solid currentColor;
border-left: 2px solid currentColor;
}
.slider__toggle.is-paused::before {
width: 0;
height: 0;
margin-left: .2rem;
border-style: solid;
border-width: .38rem 0 .38rem .62rem;
border-color: transparent transparent transparent currentColor;
}
.slider__toggle:hover {
color: var(--c-brass);
border-color: var(--c-brass);
}
@media (min-width: 1024px) {
.hero__meta {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.hero__scroll {
display: flex;
}
.slider__controls {
justify-self: end;
}
}
/* Short viewports (landscape phones, 13" laptops, small windows): the hero
still has to fit one screen, so the vertical rhythm tightens and the scroll
cue goes — of the three things in the meta row it is the one the page can
do without, since the same anchor is on the "Explore the project" button. */
@media (max-height: 700px) {
.hero__scroll {
display: none;
}
.hero__content {
padding-top: calc(var(--header-h) + .5rem);
}
.hero__title {
font-size: clamp(1.9rem, 4.4vw, 2.8rem);
}
.hero__lead {
margin-top: .75rem;
font-size: .9rem;
line-height: 1.45;
}
.hero__actions {
margin-top: 1rem;
}
.hero__actions .btn {
padding-block: .7rem;
}
.hero__meta {
margin-top: 1rem;
padding-block: .75rem 0;
}
}
/* ==========================================================================
11. Home: about & stats
Two columns from 1024px: overlapping images on the left, text on the
right. The strip of planned figures below is animated by main.js.
========================================================================== */
.about__grid {
display: grid;
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
/* The detail image overlaps the bottom-right corner of the main one */
.about__media {
position: relative;
padding: 0 14% 20% 0;
}
.about__main {
width: 100%;
aspect-ratio: 1024 / 728;
object-fit: cover;
}
.about__detail {
position: absolute;
right: 0;
bottom: 0;
width: 40%;
aspect-ratio: 825 / 1024;
object-fit: cover;
border: .5rem solid var(--c-ink);
}
.about__text h2 {
max-width: 20ch;
}
.about__copy {
--flow-space: 1.25em;
margin-top: 1.75rem;
color: var(--text-dim);
}
.stats {
margin-top: clamp(4rem, 8vw, 7rem);
}
.stats__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
.stats__item {
display: flex;
flex-direction: column;
gap: .6rem;
padding: 1.75rem 1rem 0 0;
}
.stats__figure {
font-family: var(--ff-display);
font-size: clamp(2.6rem, 5vw, 4.25rem);
font-weight: 300;
line-height: 1;
color: var(--c-cream);
font-variant-numeric: lining-nums tabular-nums;
}
.stats__unit {
margin-left: .12em;
font-size: .45em;
color: var(--c-brass);
}
.stats__label {
font-size: .75rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
}
@media (min-width: 1024px) {
.about__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.stats__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ==========================================================================
12. Home: rooms & suites (tabs)
Tab list: ARIA tabs (main.js adds the switching and arrow keys). On
narrow screens it scrolls sideways with snap points. Without JavaScript
every panel is shown, one after another.
========================================================================== */
.tabs__list {
display: flex;
gap: 1.75rem;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
box-shadow: inset 0 -1px 0 var(--line); /* baseline the active tab sits on */
}
.tabs__list::-webkit-scrollbar {
display: none;
}
.tabs__tab {
flex: none;
padding: 1rem .15rem .9rem;
font-size: .72rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
color: var(--text-dim);
border-bottom: 2px solid transparent;
scroll-snap-align: start;
transition:
color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
.tabs__tab:hover {
color: var(--text);
}
.tabs__tab[aria-selected="true"] {
color: var(--text);
border-bottom-color: var(--accent);
}
/* The list clips overflow, so the focus ring is drawn inside the tab */
.tabs__tab:focus-visible {
outline-offset: -2px;
}
.tabs__panel + .tabs__panel {
margin-top: clamp(4rem, 8vw, 6rem);
}
/* ---- One room ------------------------------------------------------------ */
.room {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
.room__media {
overflow: hidden;
aspect-ratio: 1024 / 687;
background-color: var(--c-ink-3);
}
.room__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.room__title {
font-size: clamp(1.9rem, 3vw, 2.6rem);
}
.room__desc {
margin-top: 1rem;
color: var(--text-dim);
}
.room__subtitle {
margin-top: 1.75rem;
font-family: var(--ff-body);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
}
.room__features {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem 1.5rem;
margin-top: .9rem;
font-size: var(--fs-small);
}
.room__facts {
display: flex;
flex-wrap: wrap;
gap: 1rem 2.5rem;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.room__facts dt {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-dim);
}
.room__facts dd {
font-family: var(--ff-display);
font-size: 1.6rem;
line-height: 1.3;
color: var(--heading);
}
.room__body > .btn {
margin-top: 1.75rem;
}
/* Mini gallery: three thumbnails that open in the lightbox (main.js) */
.room__gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .6rem;
margin-top: 2rem;
}
.room__thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: var(--c-ink-3);
}
.room__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
/* Same brass frame as the cards */
.room__thumb::after {
content: "";
position: absolute;
inset: .6rem;
border: 1px solid var(--c-brass);
opacity: 0;
pointer-events: none;
transition:
opacity var(--dur-slow) var(--ease-out),
inset var(--dur-slow) var(--ease-out);
}
.room__thumb:focus-visible img {
transform: scale(1.04);
}
.room__thumb:focus-visible::after {
inset: .35rem;
opacity: 1;
}
@media (hover: hover) {
.room__thumb:hover img {
transform: scale(1.04);
}
.room__thumb:hover::after {
inset: .35rem;
opacity: 1;
}
}
@media (min-width: 1024px) {
.room {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
}
/* ==========================================================================
13. Home: dining
Light section directly after Rooms; a divider opens it. Two large
image/text blocks, three dishes as cards, and a narrow "cellar" band.
========================================================================== */
/* Rooms and Dining are both light: no second full section gap between
them, the divider carries the change of subject instead */
.rooms + .dining {
padding-top: 0;
}
.dining__divider {
margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.dining__menu {
margin-top: clamp(4rem, 8vw, 7rem);
}
.dining__menu-title {
margin-bottom: 1.75rem;
}
.dish {
--card-ratio: 1 / 1;
}
/* The cellar: a narrow framed band with text and two images */
.cellar {
display: grid;
gap: 1.5rem;
max-width: 66rem;
margin: clamp(4rem, 8vw, 7rem) auto 0;
padding: clamp(1.5rem, 3.5vw, 3rem);
border: 1px solid var(--line);
}
.cellar__text {
color: var(--text-dim);
}
.cellar__text h3 {
color: var(--heading);
}
.cellar__chef,
.cellar__wine {
width: 100%;
height: 100%;
object-fit: cover;
}
.cellar__chef {
aspect-ratio: 1024 / 687;
}
.cellar__wine {
aspect-ratio: 687 / 1024;
max-height: 26rem;
}
@media (min-width: 768px) {
.cellar {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .6fr);
align-items: center;
}
.cellar__chef,
.cellar__wine {
max-height: none;
}
}
/* ==========================================================================
14. Home: casino — entertainment and gaming lounge (subject to licensing)
========================================================================== */
.casino__tag {
margin-top: 1.25rem;
}
.casino .section-head .lead {
margin-top: 1.5rem;
}
/* Full-bleed image across the whole viewport width */
.casino__hero {
overflow: hidden;
aspect-ratio: 4 / 3;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.casino__hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.casino__notice {
max-width: 48rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
color: var(--text-dim);
}
.casino__cards {
--card-ratio: 3 / 2;
}
.casino__info {
display: grid;
gap: var(--grid-gap);
margin-top: clamp(3rem, 6vw, 5rem);
}
.casino__info-title {
font-size: var(--fs-h4);
font-weight: 400;
}
.casino__rules {
display: grid;
gap: 1.25rem;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--line);
}
.casino__rules .list-diamond {
color: var(--text-dim);
}
/* Responsible gaming: stands out with a brass edge and a darker panel */
.rg-box {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: clamp(1.5rem, 3vw, 2.5rem);
color: var(--text-dim);
background-color: var(--c-ink-3);
border-left: 2px solid var(--c-brass);
}
.rg-box .badge-18 {
flex: none;
}
@media (min-width: 768px) {
.casino__hero {
aspect-ratio: 21 / 9;
}
}
@media (min-width: 1024px) {
.casino__info {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
/* ==========================================================================
15. Home: spa & pools
Four .split blocks (section 6), image on the left and right in turn.
========================================================================== */
.spa .split__body h3 {
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}
/* ==========================================================================
16. Home: events
========================================================================== */
.events__hero {
overflow: hidden;
aspect-ratio: 4 / 3;
margin-bottom: var(--grid-gap);
}
.events__hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.events__cards {
--card-ratio: 3 / 2;
}
.events__capacity {
margin-top: clamp(3rem, 6vw, 5rem);
}
.events__cta {
display: grid;
gap: 1.5rem;
align-items: center;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding: clamp(1.5rem, 3vw, 2.5rem);
color: var(--text-dim);
border: 1px solid var(--line);
}
.events__cta .btn {
justify-self: start;
overflow-wrap: anywhere;
text-transform: none;
letter-spacing: .04em;
}
@media (min-width: 768px) {
.events__hero {
aspect-ratio: 16 / 7;
}
.events__cta {
grid-template-columns: minmax(0, 1fr) auto;
}
}
/* ==========================================================================
17. Home: gallery & lightbox
Masonry with CSS columns: 1 column on phones, 2 from 480px, 3 from
1024px. Each image keeps its own proportions. The lightbox (built by
main.js) is styled at the end of this section.
========================================================================== */
.gallery__grid {
column-count: 1;
column-gap: var(--grid-gap);
}
.gallery__item {
position: relative;
display: block;
margin-bottom: var(--grid-gap);
overflow: hidden;
background-color: var(--c-ink-3);
break-inside: avoid;
}
.gallery__item img {
width: 100%;
transition: transform var(--dur-slow) var(--ease-out);
}
/* Same brass frame as the cards */
.gallery__item::after {
content: "";
position: absolute;
inset: 1rem;
border: 1px solid var(--c-brass);
opacity: 0;
pointer-events: none;
transition:
opacity var(--dur-slow) var(--ease-out),
inset var(--dur-slow) var(--ease-out);
}
.gallery__item:focus-visible img {
transform: scale(1.04);
}
.gallery__item:focus-visible::after {
inset: .6rem;
opacity: 1;
}
@media (hover: hover) {
.gallery__item:hover img {
transform: scale(1.04);
}
.gallery__item:hover::after {
inset: .6rem;
opacity: 1;
}
}
/* "Artist's impressions…" line under the gallery */
.impressions-note {
margin-top: .5rem;
font-size: .8rem;
color: var(--text-dim);
}
@media (min-width: 480px) {
.gallery__grid {
column-count: 2;
}
}
@media (min-width: 1024px) {
.gallery__grid {
column-count: 3;
}
}
/* ---- Lightbox ------------------------------------------------------------
Modal image viewer created by main.js for the gallery and the room
mini-galleries. The image keeps width/height auto and is only limited
by max-width / max-height, so it is shown at most at its natural size
and never upscaled; smaller screens scale it down. */
.lightbox {
position: fixed;
inset: 0;
z-index: var(--z-lightbox);
display: grid;
place-items: center;
padding: 4.5rem clamp(1rem, 7vw, 6rem) 5rem;
color: var(--c-cream);
background-color: rgba(11, 18, 32, .96);
animation: lightbox-in var(--dur-base) var(--ease-out);
}
@keyframes lightbox-in {
from { opacity: 0; }
}
.lightbox__figure {
display: grid;
justify-items: center;
gap: 1rem;
max-width: 100%;
touch-action: pan-y;
}
.lightbox__img {
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 11rem);
max-height: calc(100svh - 11rem);
}
.lightbox__caption {
max-width: 46rem;
font-size: .85rem;
text-align: center;
color: var(--c-cream-dim);
}
.lightbox__counter {
position: absolute;
top: 1.6rem;
left: 50%;
font-size: .75rem;
letter-spacing: .24em;
color: var(--c-cream-dim);
transform: translateX(-50%);
}
.lightbox__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 2.75rem;
height: 2.75rem;
color: var(--c-cream);
border: 1px solid rgba(245, 241, 232, .4);
transition:
color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
/* Cross drawn with two hairlines */
.lightbox__close::before,
.lightbox__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.1rem;
height: 1px;
background-color: currentColor;
transform: translate(-50%, -50%) rotate(45deg);
}
.lightbox__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.lightbox__close:hover {
color: var(--c-brass);
border-color: var(--c-brass);
}
/* Arrows: bottom corners on phones, vertically centred at the sides above */
.lightbox__arrow {
position: absolute;
bottom: 1rem;
}
.lightbox__arrow.slider__arrow--prev {
left: 1rem;
}
.lightbox__arrow.slider__arrow--next {
right: 1rem;
}
@media (min-width: 768px) {
.lightbox__arrow {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
}
/* ==========================================================================
18. Home: experiences & location
The map carries no text of its own: labels are HTML, absolutely
positioned over it at the markers (percentages of the image size).
========================================================================== */
.experiences__cards {
--card-ratio: 4 / 3;
}
.location {
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
margin-top: clamp(4rem, 8vw, 7rem);
}
.map__frame {
position: relative;
}
.map__frame img {
width: 100%;
}
.map__label {
position: absolute;
padding: .3em .6em;
font-size: clamp(.58rem, 1.1vw, .7rem);
font-weight: 500;
letter-spacing: .12em;
line-height: 1.3;
text-transform: uppercase;
white-space: nowrap;
color: var(--c-cream);
background-color: rgba(11, 18, 32, .78);
}
/* Label sits just right of its marker, vertically centred on it */
.map__label--bergen {
top: 70.8%;
left: 37.7%;
transform: translate(.9rem, -50%);
}
.map__label--airport {
top: 81.3%;
left: 27%;
transform: translate(.9rem, -50%);
}
/* Project label: centred above the diamond marker, on two lines (above,
because on small maps the space below is taken by the Bergen label) */
.map__label--project {
top: 49.6%;
left: 49.9%;
display: grid;
gap: .15em;
text-align: center;
color: var(--c-brass);
border: 1px solid var(--c-brass);
transform: translate(-50%, calc(-100% - .9rem));
}
.map__sublabel {
font-size: .85em;
letter-spacing: .06em;
text-transform: none;
color: var(--c-cream);
}
.map__caption {
margin-top: .75rem;
font-size: .8rem;
color: var(--text-dim);
}
.location__intro {
margin-top: .75rem;
color: var(--text-dim);
}
.location__list {
display: grid;
gap: 1.25rem;
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px solid var(--line);
}
.location__list dt {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
}
.location__list dd {
margin-top: .35rem;
color: var(--text-dim);
}
@media (min-width: 1024px) {
.location {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
}
/* ==========================================================================
19. Home: the vision
Text only: no slider, no quotes, no avatars.
========================================================================== */
.vision__grid {
display: grid;
gap: clamp(1.5rem, 4vw, 4rem);
}
.vision__head h2 {
max-width: 14ch;
}
.vision__copy {
--flow-space: 1.25em;
max-width: 40rem;
color: var(--text-dim);
}
@media (min-width: 1024px) {
.vision__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
}
/* ==========================================================================
20. Home: FAQ
Accordion with the same contract as the footer (section 9): markup
ships with aria-expanded="true", main.js collapses the answers; the
height animates through grid-template-rows.
========================================================================== */
.faq__grid {
display: grid;
gap: clamp(1rem, 3vw, 3rem);
}
.faq__list {
border-top: 1px solid var(--line);
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__question {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 400;
line-height: 1.3;
}
.faq__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
padding-block: 1.35rem;
text-align: left;
transition: color var(--dur-fast) ease;
}
.faq__toggle:hover {
color: var(--c-brass);
}
/* Plus sign that turns into a cross when the answer is open */
.faq__toggle::after {
content: "";
flex: none;
width: .8rem;
height: .8rem;
background:
linear-gradient(var(--c-brass), var(--c-brass)) center / 100% 1px no-repeat,
linear-gradient(var(--c-brass), var(--c-brass)) center / 1px 100% no-repeat;
transition: transform var(--dur-base) var(--ease-out);
}
.faq__toggle[aria-expanded="true"]::after {
transform: rotate(45deg);
}
.faq__answer {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__answer-inner {
min-height: 0;
overflow: hidden;
color: var(--text-dim);
}
.faq__answer-inner > :last-child {
max-width: 44rem;
margin-bottom: 1.5rem;
}
.faq__question:has(> [aria-expanded="false"]) + .faq__answer {
grid-template-rows: 0fr;
}
/* Collapsed answers must not be reachable with Tab */
.faq__question:has(> [aria-expanded="false"]) + .faq__answer > .faq__answer-inner {
visibility: hidden;
transition: visibility 0s linear var(--dur-base);
}
@media (min-width: 1024px) {
.faq__grid {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
align-items: start;
}
}
/* ==========================================================================
21. Home: interest list CTA
Wide band over the second hero image, darkened for legibility.
========================================================================== */
.cta-band {
position: relative;
isolation: isolate;
padding-block: clamp(6rem, 12vw, 10rem);
text-align: center;
color: var(--c-cream);
background: var(--c-ink) url("../img/hero-2.webp") center / cover no-repeat;
}
@media (max-width: 767px) {
.cta-band {
background-image: url("../img/hero-2-mobile.webp");
}
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: rgba(11, 18, 32, .74);
}
.cta-band h2 {
max-width: 24ch;
margin-inline: auto;
}
.cta-band p {
max-width: 34rem;
margin: 1.25rem auto 0;
color: rgba(245, 241, 232, .88);
}
.cta-band .btn {
margin-top: 2.25rem;
}
/* ==========================================================================
22. Contact page & form
Interest list form. Square fields on a dark panel; validation states
and error messages are added with main.js in Stage 6.
========================================================================== */
.interest__grid {
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
}
.interest__intro h1 {
font-size: var(--fs-h2);
}
.interest__copy {
margin-top: 1.5rem;
color: var(--text-dim);
}
.interest__form-wrap {
padding: clamp(1.5rem, 4vw, 3rem);
background-color: var(--c-ink-2);
border: 1px solid var(--line);
}
.form {
display: grid;
gap: 1.5rem;
}
.field {
display: grid;
gap: .5rem;
}
.field__label {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--text-dim);
}
.field__input {
width: 100%;
min-height: 3.25rem;
padding: .8rem 1rem;
font-size: 1rem; /* 16px keeps iOS from zooming into the field */
color: var(--c-cream);
background-color: var(--c-ink);
border: 1px solid rgba(201, 162, 39, .35);
border-radius: 0;
transition: border-color var(--dur-fast) ease;
}
.field__input:hover,
.field__input:focus {
border-color: var(--c-brass);
}
/* Custom select arrow: a small brass chevron drawn with two gradients */
.field__select {
padding-right: 2.75rem;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--c-brass) 50%),
linear-gradient(135deg, var(--c-brass) 50%, transparent 50%);
background-position:
right 1.35rem center,
right 1rem center;
background-size: .35rem .35rem;
background-repeat: no-repeat;
}
/* Consent checkbox: square, fills with brass when checked */
.field--check {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: .9rem;
font-size: var(--fs-small);
color: var(--text-dim);
}
.field__check {
width: 1.25rem;
height: 1.25rem;
margin-top: .15rem;
appearance: none;
background-color: var(--c-ink);
border: 1px solid var(--c-brass);
border-radius: 0;
cursor: pointer;
}
.field__check:checked {
background-color: var(--c-brass);
box-shadow: inset 0 0 0 3px var(--c-ink);
}
.form__submit {
justify-self: start;
}
.form__note {
font-size: .8rem;
color: var(--text-dim);
}
.interest__direct {
margin-top: 1.75rem;
padding-top: 1.5rem;
color: var(--text-dim);
border-top: 1px solid var(--line);
}
/* Validation (main.js): coral border and message under the field */
.field__input[aria-invalid="true"],
.field__check[aria-invalid="true"] {
border-color: var(--c-error);
}
.field__error {
font-size: .8rem;
color: var(--c-error);
}
.field--check .field__error {
grid-column: 2;
}
/* Confirmation after the mail app has been opened */
.form__status:not(:empty) {
padding: 1rem 1.25rem;
font-size: var(--fs-small);
color: var(--c-cream);
background-color: var(--c-ink);
border-left: 2px solid var(--c-brass);
}
@media (min-width: 1024px) {
.interest__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
}
}
/* ---- Contact page: departments -------------------------------------------
Four addresses, no reservations desk while reservations are closed. */
.departments__list {
display: grid;
gap: var(--grid-gap);
margin-top: clamp(2.5rem, 5vw, 4rem);
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.department {
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 3vw, 2rem);
background-color: var(--card-bg);
border: 1px solid var(--line);
}
.department__title {
font-family: var(--ff-body);
font-size: var(--fs-h4);
font-weight: 500;
letter-spacing: normal;
}
.department__text {
flex: 1;
margin-top: .75rem;
font-size: var(--fs-small);
color: var(--text-dim);
}
.department__mail {
margin-top: 1.5rem;
overflow-wrap: anywhere;
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.department__mail:hover {
border-bottom-color: var(--accent);
}
/* ==========================================================================
23. Legal pages
Long-form documents in a 760px reading column (--measure). The dark
surface is inherited from the page; only the type and the hairlines
are specific here.
========================================================================== */
/* ---- Breadcrumbs ---------------------------------------------------------
Repeated as BreadcrumbList in JSON-LD on every inner page. */
.crumbs {
font-size: var(--fs-small);
color: var(--text-dim);
}
.crumbs__list {
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: baseline;
list-style: none;
}
/* Separator drawn in CSS so it is never read out by a screen reader */
.crumbs__list li + li::before {
content: "/";
margin-right: .5rem;
color: var(--accent);
}
.crumbs a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.crumbs a:hover {
color: var(--text);
border-bottom-color: var(--accent);
}
.crumbs [aria-current="page"] {
color: var(--text);
}
/* ---- Document head ------------------------------------------------------- */
.legal {
padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-y);
}
.legal-head h1 {
margin-top: 1.25rem;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}
.legal-head__lead {
margin-top: 1.25rem;
font-size: var(--fs-lead);
color: var(--text-dim);
}
.legal-meta {
display: flex;
flex-wrap: wrap;
gap: .5rem 2rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
font-size: var(--fs-small);
color: var(--text-dim);
}
.legal-meta strong {
font-weight: 500;
color: var(--text);
}
/* ---- Table of contents --------------------------------------------------- */
.toc {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
background-color: var(--card-bg);
border: 1px solid var(--line);
}
.toc__title {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
}
.toc__list {
margin-top: 1.25rem;
columns: 2;
column-gap: 2.5rem;
list-style: none;
counter-reset: toc;
}
.toc__list li {
margin-bottom: .6rem;
break-inside: avoid;
counter-increment: toc;
}
.toc__list li::before {
content: counter(toc) ".";
margin-right: .5em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.toc__list a {
color: var(--text-dim);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.toc__list a:hover {
color: var(--text);
border-bottom-color: var(--accent);
}
@media (max-width: 600px) {
.toc__list {
columns: 1;
}
}
/* ---- Document body -------------------------------------------------------
scroll-margin-top keeps anchored headings clear of the fixed header. */
.legal-body {
margin-top: clamp(3rem, 6vw, 5rem);
}
.legal-body section + section {
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.legal-body h2 {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
scroll-margin-top: calc(var(--header-h) + 2rem);
}
.legal-body h3 {
margin-top: 2rem;
font-family: var(--ff-body);
font-size: var(--fs-h4);
font-weight: 500;
letter-spacing: normal;
scroll-margin-top: calc(var(--header-h) + 2rem);
}
.legal-body p,
.legal-body li {
color: var(--text-dim);
}
.legal-body h2 + p,
.legal-body h3 + p {
margin-top: 1rem;
}
.legal-body p + p,
.legal-body p + ul,
.legal-body p + ol,
.legal-body ul + p,
.legal-body ol + p,
.legal-body .table-wrap + p {
margin-top: 1.1rem;
}
.legal-body ul,
.legal-body ol {
margin-left: 1.25rem;
}
.legal-body li + li {
margin-top: .6rem;
}
.legal-body ul {
list-style: none;
margin-left: 0;
}
.legal-body ul > li {
position: relative;
padding-left: 1.5rem;
}
.legal-body ul > li::before {
content: "";
position: absolute;
top: .62em;
left: .25rem;
width: .4rem;
height: .4rem;
background-color: var(--accent);
transform: rotate(45deg);
}
.legal-body a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--accent);
}
.legal-body a:hover {
color: var(--accent);
}
.legal-body .table-wrap {
margin-top: 1.5rem;
}
/* Contact details set as a definition list (controller, publisher, host) */
.legal-dl {
margin-top: 1.25rem;
padding: 1.5rem;
background-color: var(--card-bg);
border-left: 2px solid var(--accent);
}
.legal-dl dt {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
}
.legal-dl dd {
margin-top: .35rem;
color: var(--text-dim);
}
.legal-dl div + div {
margin-top: 1.25rem;
}
/* Callout for the points that must not be missed (no reservations, 18+) */
.legal-note {
margin-top: 1.5rem;
padding: 1.25rem 1.5rem;
background-color: var(--c-ink-2);
border-left: 2px solid var(--accent);
}
.legal-note p {
color: var(--text);
}
/* ---- Cross-links to the other documents ---------------------------------- */
.legal-more {
margin-top: clamp(3.5rem, 7vw, 6rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--line);
}
.legal-more__title {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
}
.legal-more__list {
display: grid;
gap: .75rem 2rem;
margin-top: 1.25rem;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.legal-more__list a {
color: var(--text-dim);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.legal-more__list a:hover {
color: var(--text);
border-bottom-color: var(--accent);
}
/* ==========================================================================
24. 404 page
========================================================================== */
.not-found {
display: grid;
align-items: center;
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
}
.not-found__inner {
max-width: calc(46rem + 2 * var(--gutter));
text-align: center;
}
.not-found__lead {
margin-top: 1.5rem;
}
.not-found__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75rem 1rem;
margin-top: 2.25rem;
}
.not-found__divider {
margin-block: clamp(2.5rem, 5vw, 3.5rem);
}
.not-found__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75rem 2rem;
font-size: var(--fs-small);
letter-spacing: .06em;
}
.not-found__links a {
color: var(--c-cream);
text-decoration: none;
}
.not-found__links a:hover {
color: var(--c-brass);
}
/* ==========================================================================
25. Scroll effects: reveal, sentinels, back to top
All three are driven by IntersectionObserver in main.js.
========================================================================== */
/* Reveal: main.js adds .reveal only to blocks below the first screen and
.is-visible when they scroll into view. Without JS nothing is hidden. */
.reveal {
opacity: 0;
transform: translateY(1.5rem);
transition:
opacity .9s var(--ease-out),
transform .9s var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* Cards in a row arrive one after another */
.card.reveal:nth-child(2) { transition-delay: .08s; }
.card.reveal:nth-child(3) { transition-delay: .16s; }
.card.reveal:nth-child(4) { transition-delay: .24s; }
/* Sentinels: empty markers at the top of the page that main.js observes
instead of listening to scroll events. 80px for the header state, one
screen for the back-to-top button. */
.scroll-sentinel {
position: absolute;
top: 0;
left: 0;
width: 1px;
pointer-events: none;
}
.scroll-sentinel--header {
height: 80px;
}
.scroll-sentinel--screen {
height: 100vh;
}
/* Back to top: square brass-outlined button, bottom right */
.back-to-top {
position: fixed;
right: max(1rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 90; /* under the header and its menu overlay */
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
color: var(--c-brass);
background-color: rgba(11, 18, 32, .88);
border: 1px solid var(--c-brass);
opacity: 0;
visibility: hidden;
transform: translateY(.5rem);
transition:
opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
visibility 0s linear var(--dur-base),
color var(--dur-fast) ease,
background-color var(--dur-fast) ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition:
opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
visibility 0s,
color var(--dur-fast) ease,
background-color var(--dur-fast) ease;
}
/* Upward chevron */
.back-to-top::before {
content: "";
width: .6rem;
height: .6rem;
margin-top: .3rem;
border-top: 1px solid currentColor;
border-left: 1px solid currentColor;
transform: rotate(45deg);
}
.back-to-top:hover {
color: var(--c-ink);
background-color: var(--c-brass);
}
/* ==========================================================================
26. Reduced motion
Turns off smooth scrolling, every transition and animation, and the card
zoom. Slider autoplay is switched off in main.js (Stage 6) via the same
media query. Durations are set to .01ms rather than removed so that any
transitionend listeners still fire.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.card:hover .card__media img,
.card:focus-within .card__media img {
transform: none;
}
}