/* ============================================================
Nostromo Tours Krk — Design Tokens
Color + Type foundations. Import this file first.
============================================================ */
/* ============================================================
FONTS
----
Inter upright + Fraunces are loaded via +
in the HTML (faster than a CSS @import,
which is render-blocking and serialises the request chain).
Inter Italic — self-hosted (uploaded by client) via @font-face below.
============================================================ */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
url('/fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}
:root {
/* ---------- Color: brand ---------- */
--ink: #0F1F33; /* Deep Adriatic navy — headings, primary CTAs, footer */
--ink-hover: #1C3554; /* Lifted navy for hover/pressed */
--sand: #D4A656; /* Warm gold-sand accent — numerals, check icons, CTA underline. NEVER a button fill. */
/* ---------- Color: surface ---------- */
--surface: #FFFFFF; /* Default page bg */
--surface-band: #F6F1E8; /* Warm linen for alternating sections */
--hairline: #E5DED1; /* Section dividers, input borders */
/* ---------- Color: text ---------- */
--text: #2A3340; /* Body — dark slate, slightly warmer */
--text-muted: #6B7280; /* Captions, meta, timestamps */
--text-on-ink: #FFFFFF;
/* ---------- Color: utility (widget only) ---------- */
--available: #2F6B4F; /* Booking widget date pills only — not a brand color */
/* ---------- Type families ---------- */
--font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* ---------- Type scale (desktop) ---------- */
--fs-h1: 64px; --lh-h1: 68px; --tr-h1: -0.01em;
--fs-h2: 40px; --lh-h2: 44px; --tr-h2: -0.01em;
--fs-h3: 24px; --lh-h3: 30px; --tr-h3: 0;
--fs-body: 16px; --lh-body: 26px; --tr-body: 0;
--fs-cap: 13px; --lh-cap: 20px; --tr-cap: 0;
--fs-eyebrow: 13px;
/* ---------- Radii ---------- */
--radius-input: 8px;
--radius-card: 12px; /* image cards, CTAs */
--radius-pill: 999px; /* WhatsApp float + language pills only */
/* ---------- Shadows (very restrained) ---------- */
--shadow-card-hover: 0 1px 2px rgba(15, 31, 51, 0.04), 0 2px 8px rgba(15, 31, 51, 0.05);
/* ---------- Spacing ---------- */
--space-section: 128px; /* desktop section padding */
--space-section-sm: 96px;
--space-section-mobile: 64px;
--measure: 70ch; /* body line-length cap */
/* ---------- Motion ---------- */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--dur-fast: 120ms;
--dur: 200ms;
--dur-slow: 320ms;
}
/* ============================================================
Semantic element styles
============================================================ */
html { color: var(--text); background: var(--surface); }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, .h1 {
font-family: var(--font-display);
font-variation-settings: 'opsz' 144, 'wght' 500, 'SOFT' 30, 'WONK' 0;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
letter-spacing: var(--tr-h1);
color: var(--ink);
margin: 0;
}
h2, .h2 {
font-family: var(--font-display);
font-variation-settings: 'opsz' 96, 'wght' 500, 'SOFT' 20, 'WONK' 0;
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--tr-h2);
color: var(--ink);
margin: 0;
}
h3, .h3 {
font-family: var(--font-display);
font-variation-settings: 'opsz' 36, 'wght' 500, 'SOFT' 0, 'WONK' 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
color: var(--ink);
margin: 0;
}
p { margin: 0 0 1em 0; max-width: var(--measure); }
.eyebrow {
font-family: var(--font-body);
font-feature-settings: 'smcp' on, 'c2sc' on; /* small caps OK on eyebrows */
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text-muted);
text-transform: lowercase; /* small-caps will uppercase visually */
}
.caption {
font-family: var(--font-body);
font-size: var(--fs-cap);
line-height: var(--lh-cap);
color: var(--text-muted);
}
/* ============================================================
Buttons (canonical primary + secondary)
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body); font-weight: 600; font-size: 15px;
padding: 14px 22px; border-radius: var(--radius-card);
border: 1px solid transparent; cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
position: relative;
}
.btn--primary { background: var(--sand); color: var(--ink); }
.btn--primary:hover { background: #c2933f; }
.btn--primary::after {
content: ""; position: absolute; left: 22px; right: 22px; bottom: 10px;
height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-slow) var(--ease);
}
.btn--primary:hover::after { transform: scaleX(1); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--text-on-ink); }
/* ============================================================
Inputs
============================================================ */
.input {
font-family: var(--font-body); font-size: 15px; color: var(--text);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-input);
padding: 12px 14px;
outline: none;
transition: border-color var(--dur) var(--ease);
}
.input:focus { border-color: var(--ink); }
/* ============================================================
Hairlines + cards
============================================================ */
.hairline { border-top: 1px solid var(--hairline); }
.card {
background: var(--surface);
border-radius: var(--radius-card);
overflow: hidden;
transition: box-shadow var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-card-hover); }
/* ============================================================
Bands
============================================================ */
.band--linen { background: var(--surface-band); }
.band--ink { background: var(--ink); color: var(--text-on-ink); }