/* ===== Design tokens (brief §2 + stitch-export/expedition_journal/DESIGN.md) ===== */ :root { --color-primary: #0E2A3D; /* ink-navy */ --color-primary-dark: #071620; --color-bg-ice: #E7F1F5; /* icy pale blue */ --color-bg: #FFFFFF; --color-accent: #D97A3E; /* burnt-orange */ --color-accent-dark: #B85F28; --color-text: #1B2529; /* graphite */ --color-text-muted: #4C5D66; --color-border: #C9D8DE; --color-border-soft: rgba(27, 37, 41, 0.1); --max-width: 1160px; --radius: 6px; --radius-sm: 4px; --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Public Sans', -apple-system, Segoe UI, Arial, sans-serif; --section-gap: 4rem; /* 64px, tightened from journal's 80px for mobile-first economy */ --gutter: 1.5rem; } @media (min-width: 768px) { :root { --section-gap: 5rem; } } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.6em; } h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; } a { color: var(--color-primary); text-decoration: none; } @media (min-width: 768px) { h1 { font-size: 3.25rem; } h2 { font-size: 2.25rem; } } .container { /* Prevents a last child's own margin-bottom from collapsing through this box and adding stray extra space below the section (e.g. a trailing

's margin-bottom leaking past the section boundary) — keeps section-to-section gaps pixel-exact instead of off by whatever the last child's margin happens to be. */ display: flow-root; max-width: var(--max-width); /* margin-left/right only, not the "margin: 0 auto" shorthand — that shorthand also zeroes margin-top, which beat the sitewide "section + section" spacing rule on every plain

(this class's specificity is higher than 3 type selectors) and was the real cause of the inconsistent section-to-section gaps reported in Round 3. */ margin-left: auto; margin-right: auto; padding: 0 var(--gutter); } /* A trailing

's own margin-bottom (grid/flex children never have this problem) otherwise adds an extra ~16px to some sections and not others, which is exactly the inconsistent-gap symptom reported in Round 3. */ .container > *:last-child { margin-bottom: 0; } /* Section-to-section rhythm: every top-level section contributes HALF a section-gap as its own top+bottom padding (not external margin). Two adjacent sections' padding then sums to one full section-gap, and — because it's padding, not margin — a background-color section's own content always has breathing room before its color boundary (Round 4 fix #1: cards/buttons were sitting flush against the color transition line when spacing was margin-based instead). This replaces the old margin-based approach, which also had a second, separate bug (Round 4 fix #2): a stray "main > .container > * + *" rule added an unwanted extra 80px between an H2 and the very next element specifically on sections where the section itself carried the .container class (Ships & Fleet, Price & Value, etc.) but not on section-tint sections (whose .container is one level deeper) — producing exactly the "some headings have a huge gap, others don't" inconsistency reported. Removed rather than scoped, since default heading margins already provide the right amount of heading-to-content spacing. */ main > section.container, main > .hero { padding-top: calc(var(--section-gap) / 2); padding-bottom: calc(var(--section-gap) / 2); } /* ===== Links & focus/hover states (sitewide) ===== */ a, button, summary, .btn { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } /* Inline body links (inside prose, not nav/footer/buttons/cards) need a visible resting state — the base ink-navy link color reads as almost identical to the graphite body text color with no underline, making these links invisible until hovered. */ main p a:not(.btn), main li a:not(.btn) { text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; } a:not(.btn):hover { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent-dark); } a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ===== Buttons / CTA vocabulary (brief §9.2 — exactly these 3 strings sitewide) ===== */ .btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.95em 1.9em; border-radius: 8px; cursor: pointer; border: 1px solid transparent; } .btn:active { transform: translateY(0); box-shadow: none; } /* Small arrow glyph marking a button as an outbound link (Visit Website, Visit Swan Hellenic, etc.) — never applied to internal "Read Full Review" or "Compare" buttons. */ .btn--external::after { content: '\2197'; margin-left: 0.5em; font-size: 1.1em; line-height: 1; } .btn-primary { background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); color: #fff; box-shadow: 0 4px 14px rgba(217, 122, 62, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:hover { background: linear-gradient(180deg, #E28648 0%, var(--color-accent-dark) 100%); box-shadow: 0 8px 20px rgba(217, 122, 62, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .btn-primary:active { background: var(--color-accent-dark); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); } .btn-secondary { background: #fff; color: var(--color-primary); border-color: var(--color-border); box-shadow: 0 2px 8px rgba(14, 42, 61, 0.08); } .btn-secondary:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 6px 16px rgba(14, 42, 61, 0.22); transform: translateY(-2px); } .btn-secondary:active { background: var(--color-primary-dark); box-shadow: none; } /* ===== Header ===== */ .site-header { background: var(--color-primary); position: sticky; top: 0; z-index: 50; } .site-header .container { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .site-logo { display: flex; align-items: center; } .site-logo__img { height: 48px; width: auto; display: block; } @media (min-width: 768px) { .site-logo__img { height: 60px; } .site-header .container { height: 96px; } } .site-nav { display: none; } /* Child selector, not descendant — a plain ".site-nav ul" would also match the nested .nav-dropdown__menu