/* ============================================================ Vows By The Sea — shared design system Loaded LAST in so it harmonises the per-page inline CSS that every template still carries. Mostly token-driven: the pages already consume --primary/--dark/etc., so redefining the tokens re-skins the whole site at once. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Coastal palette — burnished amber on deep-harbour navy */ --vbts-ink: #10202e; --vbts-ink-2: #1b3346; --vbts-ink-soft: #3d4e5c; --vbts-muted: #5f6f7b; /* AA on white (5.20:1) */ --vbts-gold: #a85e1b; /* AA on white (4.66:1) */ --vbts-gold-600: #8a4d14; --vbts-gold-300: #e9a94e; /* for use on dark surfaces */ --vbts-sand: #fbf7f1; --vbts-sand-2: #f3eadf; --vbts-seafoam: #dcebea; --vbts-line: #e7dfd5; --vbts-shadow-sm: 0 1px 2px rgba(16,32,46,.06), 0 2px 8px rgba(16,32,46,.05); --vbts-shadow: 0 4px 12px rgba(16,32,46,.07), 0 14px 34px rgba(16,32,46,.08); --vbts-shadow-lg: 0 8px 20px rgba(16,32,46,.09), 0 28px 60px rgba(16,32,46,.13); --vbts-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --vbts-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* --- Re-map the legacy per-page variables onto the new palette --- DO NOT remap --text, --muted, --bg, --card or --chip here. blog.html owns those as theme tokens and redefines them under @media (prefers-color-scheme: dark) and .dark — both at :root, i.e. the same specificity as this block. A media query adds no specificity, so anything set here wins in BOTH themes and pins dark-mode text to a near-black value on a near-black background (measured 1.14:1). Their light-mode defaults (#111/#222 and #666/#667085/#6b7280) already clear AA on white, so leaving them alone costs nothing. */ --primary: var(--vbts-gold); --dark: var(--vbts-ink); --ink: var(--vbts-ink); --text-dark: var(--vbts-ink); --text-muted: var(--vbts-muted); --border: var(--vbts-line); --border-light: var(--vbts-line); --line: var(--vbts-line); --font-family: var(--vbts-body); --font: var(--vbts-body); --ff: var(--vbts-body); --shadow: var(--vbts-shadow); --link: var(--vbts-gold); /* blog.html shipped #0d6efd: 4.2:1 */ /* add-ons.html token set */ --vbts-bg: var(--vbts-sand); --vbts-text: var(--vbts-ink); --vbts-accent: var(--vbts-gold); --vbts-accent-dark: var(--vbts-gold-600); --vbts-card: #fff; --vbts-gradient: linear-gradient(180deg, #10202e 0%, #1b3346 100%); } /* ---------- 2. Base ---------- */ html { scroll-behavior: smooth; /* keep anchor targets clear of the sticky navigation bar */ scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; } /* No `color` here on purpose. Every template already sets its own body colour, and blog.html drives its from --text so the value flips with the theme. Hardcoding ink here beat that rule (same specificity, later file) and pinned dark-mode body text to #10202e on #0f1115 — 1.14:1. */ body { font-family: var(--vbts-body); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; } img { height: auto; } ::selection { background: var(--vbts-gold-300); color: var(--vbts-ink); } /* Visible keyboard focus everywhere — the templates had none. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--vbts-gold-300); outline-offset: 3px; border-radius: 4px; } .vbts-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--vbts-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; } .vbts-skip:focus { left: 0; } /* ---------- 3. Typography ---------- */ /* NOTE: deliberately no `color` on the bare heading/paragraph selectors. Several pages place these classes on dark surfaces (.footer-cta, hero bands) and rely on inheriting #fff — forcing a colour here would make that text invisible. Colour stays with each page's own rules. */ h1, h2, header h1, header h2, header.hero h1 { font-family: var(--vbts-display); font-weight: 700; letter-spacing: .005em; line-height: 1.14; } h1, header h1, header.hero h1 { font-size: clamp(2.35rem, 1.35rem + 3.4vw, 4rem); margin: 0 0 .28em; } h2 { font-size: clamp(1.85rem, 1.2rem + 1.9vw, 2.65rem); margin: 0 0 .55em; } h3, h4, h5 { font-family: var(--vbts-body); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } /* Section eyebrow / kicker. Selector is doubled so it outranks the `header p` / `.hero p` rules that the page templates (and section 5 below) apply to every paragraph. */ .vbts-kicker, p.vbts-kicker, header p.vbts-kicker, header[role="banner"] p.vbts-kicker, header.hero p.vbts-kicker, .vbts-cta-band p.vbts-kicker { display: inline-block; font-family: var(--vbts-body); font-size: .78rem; font-weight: 700; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--vbts-gold); margin: 0 0 .7em; text-shadow: none; } .vbts-kicker--light, p.vbts-kicker--light, header p.vbts-kicker--light, header[role="banner"] p.vbts-kicker--light, header.hero p.vbts-kicker--light, .vbts-cta-band p.vbts-kicker--light { color: var(--vbts-gold-300); } /* Thin rule used under section headings */ .vbts-rule { width: 68px; height: 2px; border: 0; margin: 0 auto 26px; background: linear-gradient(90deg, transparent, var(--vbts-gold), transparent); } /* ---------- 4. Buttons ---------- */ .btn, a.btn, button.btn { font-family: var(--vbts-body); font-weight: 700; font-size: .98rem; letter-spacing: .01em; background: var(--vbts-gold); color: #fff; border: 1px solid transparent; border-radius: 999px; padding: 13px 28px; box-shadow: 0 6px 18px rgba(168,94,27,.26); text-decoration: none; display: inline-block; transition: background-color .2s ease, transform .18s ease, box-shadow .2s ease; } .btn:hover, .btn:focus, a.btn:hover, a.btn:focus { background: var(--vbts-gold-600); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(168,94,27,.34); } .btn:active { transform: translateY(0); } /* Outline button for CTA rows sitting on a dark photographic surface. Scoped: add-ons.html already ships its own light .btn-ghost on white cards, and a white-on-white outline there would be invisible. */ header .btn.btn-ghost, header[role="banner"] .btn.btn-ghost, header.hero .btn.btn-ghost, .vbts-cta-band .btn.btn-ghost, .vbts-band--ink .btn.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } header .btn.btn-ghost:hover, header .btn.btn-ghost:focus, header[role="banner"] .btn.btn-ghost:hover, header[role="banner"] .btn.btn-ghost:focus, header.hero .btn.btn-ghost:hover, header.hero .btn.btn-ghost:focus, .vbts-cta-band .btn.btn-ghost:hover, .vbts-cta-band .btn.btn-ghost:focus { background: rgba(255,255,255,.16); border-color: #fff; box-shadow: none; } .btn.btn-quiet { background: #fff; color: var(--vbts-gold); border-color: var(--vbts-line); box-shadow: var(--vbts-shadow-sm); } .btn.btn-quiet:hover, .btn.btn-quiet:focus { background: var(--vbts-sand); color: var(--vbts-gold-600); } /* ---------- 5. Heroes ---------- Only `header.hero` / the banner header. A bare `.hero` would also match add-ons.html, where .hero is a white card — white text on white. */ header[role="banner"], header.hero { position: relative; color: #fff; } header[role="banner"] h1, header.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(8,18,28,.42); } header[role="banner"] p, header.hero p { color: rgba(255,255,255,.94); font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); text-shadow: 0 1px 14px rgba(8,18,28,.4); } /* Soft vignette so overlaid type always has a floor to sit on */ header[role="banner"]::after, header.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,22,34,.30) 0%, rgba(10,22,34,0) 32%, rgba(10,22,34,.52) 100%); } header[role="banner"] > *, header.hero > * { position: relative; z-index: 1; } /* ---------- 6. Cards ---------- `.card` gets finish only (radius/shadow/lift) — never a background or border colour. locations/clearwater-area.html and on-site-venues.html define .card as a DARK card with white text; painting it white here made that text invisible. */ .card { border-radius: 16px; box-shadow: var(--vbts-shadow-sm); transition: transform .22s ease, box-shadow .22s ease; } /* These two only ever appear on the white package/beach grids. */ .package, .beach-card { background: #fff; border: 1px solid var(--vbts-line); border-radius: 16px; box-shadow: var(--vbts-shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card:hover, .package:hover, .package:focus-within, .beach-card:hover, .beach-card:focus-within { transform: translateY(-4px); box-shadow: var(--vbts-shadow); } .package:hover, .package:focus-within, .beach-card:hover, .beach-card:focus-within { border-color: var(--vbts-sand-2); } .package h3 { color: var(--vbts-ink); font-size: 1.3rem; } /* Scoped to package cards: add-ons.html uses .price for a small pill badge. */ .package .price, .packages .price { font-family: var(--vbts-display); font-size: 1.6rem; font-weight: 700; color: var(--vbts-gold); letter-spacing: .01em; } .package img, .beach-card img { border-radius: 12px; } .beach-card { overflow: hidden; } .beach-card img { border-radius: 0; } .package ul { color: var(--vbts-ink-soft); } .package summary.readmore { color: var(--vbts-gold); } /* ---------- 7. Shared navigation ---------- Nav styling lives in locations/shared-menu/menu.html, NOT here. That file is injected with innerHTML at runtime, so its