/* ==========================================================================
Traville Travel — global.css
Variables, reset, base typography, layout utilities
========================================================================== */
/* ---- Design tokens ---- */
:root {
--teal: #0B6E6E;
--teal-light: #1A9090;
--teal-pale: #E6F4F4;
--gold: #C49A3C;
--gold-light: #EAD08A;
/* Text-safe gold. --gold is a surface/accent colour: as small text on a light
ground it only reaches 2.6:1, well under the 4.5:1 AA needs. This is the
lightest shade of the same hue that clears 4.5:1 on all three light grounds
the site uses — white 5.26:1, --teal-pale 4.66:1, --sand 4.64:1. Use it for
gold TEXT on light; keep --gold for fills, rules, borders and focus rings. */
--gold-ink: #8A6612;
--sand: #F5F0E8;
--charcoal: #1C1C1C;
--text: #2E2E2E;
--muted: #6B6B6B;
--white: #FFFFFF;
--border: rgba(0,0,0,0.10);
--green-wa: #25D366;
--maxw: 1200px;
--radius-card: 14px;
--radius-pill: 30px;
/* The teal-to-gold accent rule that tops a card. Introduced on the quote
cards ("Four ways to get pricing") and now shared with the mega-menu tiles,
so the two stay in step from one place. */
--accent-rule: linear-gradient(90deg, var(--teal), var(--gold));
--shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
--shadow-md: 0 12px 30px rgba(0,0,0,0.10);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.25);
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--header-h: 70px;
/* Band rhythm — ONE responsive scale for the vertical padding of full-width
bands, so content sections, the CTA strip and footer bands share a single
rhythm at every breakpoint instead of ad-hoc 44/38/40/80/84px values. The
values below are the desktop tier; the media queries further down step them
down for tablet/phone. --band-py = large bands (sections + CTA strip);
--band-py-sm = compact bands (footer sub-strips). */
--band-py: 84px; /* large band — desktop */
--band-py-sm: 40px; /* compact band — desktop */
}
/* ---- Skip link ----
Off-screen until it receives keyboard focus, then it slides into the top-left
as the first tab stop so keyboard and screen-reader users can jump straight to
the content instead of tabbing through the whole nav on every page. */
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 1000;
transform: translateY(-160%);
background: var(--teal);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
padding: 11px 18px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
transition: transform 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid var(--gold-light);
outline-offset: 2px;
}
/* ---- Modern reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* ---- Mobile overscroll / rubber-band background ---------------------------
On iOS Safari, pulling past the top or bottom of the page exposes the canvas
behind . With body:white that gap flashed a jarring white band. Giving
the root a dark background (the same charcoal as the footer, the site's dark
anchor) means the exposed area now reads as an intentional black surround
instead. body keeps its own white/section backgrounds and fully covers the
root during normal scrolling, so no dark edge or gap appears mid-page — the
dark only shows during the browser's native overscroll bounce. Scoped to the
mobile breakpoint so desktop is unchanged; pull-to-refresh is NOT disabled.
overscroll-behavior-x:none is a cheap guard against sideways rubber-banding. */
@media (max-width: 1023px) {
html {
background: var(--charcoal);
overscroll-behavior-x: none;
}
}
body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
a {
color: var(--teal);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover { color: var(--teal-light); }
ul, ol { list-style: none; padding: 0; }
/* ---- Typography ---- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 300;
line-height: 1.12;
color: var(--teal);
}
/* Lower clamp floor (42→32) so long hero titles scale DOWN on small phones
instead of pinning at 42px; ≥~700px is unchanged (6vw already exceeds 32). */
h1 { font-size: clamp(32px, 6vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 22px; font-weight: 400; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--teal); }
p { color: var(--text); }
strong { font-weight: 600; }
/* ---- Orphan control (house rule, site-wide) -------------------------------
No line of copy should be left carrying a stranded one- or two-word fragment.
This is done in CSS, not with or
, for three reasons: the break
re-balances at every viewport instead of freezing one that only suits a
single width; the HTML keeps the exact words that were written, so nothing
changes for search engines, copy-paste or a screen reader; and it applies to
copy added later without anyone having to remember to hand-tune it.
balance -> short blocks (headings, intros, labels). Evens the line lengths
so a heading never drops its last word onto a line alone.
pretty -> running text. Specifically prevents a lone word on the final
line, which is the common case in paragraphs.
Browsers without support simply wrap as they always did — the copy is never
dependent on this, it is only improved by it. .lead / .page-hero__intro are
elements but read as short intros, so their class beats the bare `p`
selector on specificity and they balance instead. */
h1, h2, h3, h4, h5, h6,
.section-title, .lead, .page-hero__intro, .eyebrow,
.mega-panel__intro, .form-note, .btn-note, .btn,
figcaption, caption, th, blockquote {
text-wrap: balance;
}
p, li, dd, .mega-card__sub {
text-wrap: pretty;
}
/* A phone number must never be split across two lines. */
a[href^="tel:"] { white-space: nowrap; }
/* ---- Layout helpers ---- */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: 24px;
}
.section { padding: var(--band-py) 0; }
.section--sand { background: var(--sand); }
.section--white { background: var(--white); }
.section--pale { background: var(--teal-pale); }
.section--dark { background: var(--charcoal); color: #d8d8d8; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--teal);
margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--gold-light); }
.section-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(30px, 4vw, 44px);
color: var(--teal);
}
.section-title em { font-style: italic; color: var(--teal); }
.section--dark .section-title { color: var(--white); }
.section--dark .section-title em { color: var(--gold-light); }
.lead {
font-size: 18px;
color: var(--muted);
margin-top: 14px;
}
.section--dark .lead { color: #b9b9b9; }
/* ---- Utilities ---- */
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }
.mb-2 { margin-bottom: 20px; }
.hidden { display: none !important; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ---- Responsive base ---- */
@media (max-width: 900px) {
/* Step the band scale down for tablet; .section (and .cta-banner) follow the
token, so they stay in one rhythm. */
:root { --band-py: 64px; }
body { font-size: 15px; }
}
@media (max-width: 600px) {
:root { --band-py: 52px; --band-py-sm: 34px; }
.container { padding-inline: 18px; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}