/* ============================================================ BRAND TOKENS — CoolestCarib.com, 2026 homepage redesign Colours: real brand orange (#FA6501) + Caribbean sea/sunset palette Fonts: Platypi (display, matches the logo) / Karla (UI + body, same pairing already loaded sitewide via include/font.inc.php) ============================================================ */ :root{ --ink:#05303B; /* deepest sea — headings, header, footer */ --sea:#0B6A78; /* deep teal */ --lagoon:#06B6C7; /* turquoise — primary brand accent */ --aqua:#7FDBD4; /* pale aqua — tints */ --coral:#FA6501; /* brand orange — CTAs / accent */ --coral-dk:#D9530C; --coral-lt:#FB8434; /* lighter orange tint — kept for small/label text on dark-navy backgrounds, where full --coral reads a little low-contrast */ --sky:#1C8AD9; /* the hero photo's own sky blue — reused to tie sections visually back to the hero image */ --navy:#0B3E61; /* same solid navy as the navbar — reused for full-bleed dark sections so they bookend the page instead of a mismatched teal-black */ --sky-mist:#EDF6FC; /* pale tint of --sky — a light section wash tied to the hero photo's blue, used in place of the old unrelated teal --mist */ --sun-mist:#FFF6F0; /* pale tint of --coral — the warm counterpart to --sky-mist, so light section washes alternate cool/warm instead of repeating the same tint */ --gold:#FFC24B; /* retired — kept only so nothing breaks if still referenced; every use below now maps to a shade of brand orange instead */ --sand:#FBF5E9; /* warm paper — page background */ --shell:#FFFFFF; /* cards */ --mist:#EAF5F3; /* soft section tint */ --line:#DEE9E7; /* hairlines */ --muted:#5E7079; /* secondary text */ --font-display:"Platypi",Georgia,serif; --font-ui:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --r:18px; /* card radius */ --r-sm:12px; --shadow:0 1px 2px rgba(5,48,59,.06),0 10px 30px rgba(5,48,59,.08); --shadow-lift:0 6px 14px rgba(5,48,59,.10),0 22px 50px rgba(5,48,59,.16); --wrap:1200px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-ui); background:var(--sky-mist); color:var(--ink); line-height:1.55; font-size:17px; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--coral);color:#fff} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px} .eyebrow{ font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--lagoon);display:inline-flex;align-items:center;gap:.6em; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--coral);border-radius:2px} h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.01em} :focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.5em;justify-content:center; font-family:var(--font-ui);font-weight:700;font-size:1rem;white-space:nowrap; padding:.85em 1.4em;border-radius:999px;border:0;cursor:pointer; transition:transform .15s ease,box-shadow .2s ease,background .2s ease; } .btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(255,106,61,.35)} .btn-coral:hover{background:var(--coral-dk);transform:translateY(-2px)} .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)} .btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)} .btn-ink{background:var(--navy);color:#fff} .btn-ink:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} /* ============================================================ HEADER ============================================================ */ .site-head{ position:sticky;top:0;z-index:60; /* Solid dark blue — the darker stop from the previous gradient. */ background:rgba(11,62,97,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.12); } .site-head .wrap{display:flex;align-items:center;gap:20px;height:68px} .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.18rem;letter-spacing:-.02em} .brand .brand-logo{ width:auto;height:34px;flex:none;display:block; } .brand b{color:var(--coral)} .nav{margin-left:auto;display:flex;align-items:center;gap:26px} .nav a{color:rgba(255,255,255,.88);font-weight:600;font-size:.95rem;position:relative} .nav a:hover{color:#fff} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--coral);transform:scaleX(0);transition:transform .2s;transform-origin:left} .nav a:hover::after{transform:scaleX(1)} /* "More" nav dropdown -- island pages only (2026-08-03). Replaces the old single "About" link (which jumped straight to #network) with a trigger that reveals a menu of every other in-page anchor section, "About" (#network) included as the last item so nothing that used to be reachable from the nav is lost. Not used on the homepage -- its own nav markup was never changed, this CSS just never matches anything there. CSS-only hover/focus-within toggle, no JS, consistent with this navbar having no other JS-driven interaction already. The trigger itself is a plain like every other .nav link (inherits .nav a's existing white/underline-on-hover look unchanged) so clicking it directly (not just hovering into the menu) still goes somewhere useful, same destination "About" used to. */ .nav-more{position:relative} .nav-more-caret{display:inline-block;font-size:.65em;margin-left:3px;transition:transform .2s} .nav-more:hover .nav-more-caret, .nav-more:focus-within .nav-more-caret{transform:rotate(180deg)} .nav-more-menu{ position:absolute;top:100%;left:0; margin-top:16px; background:var(--shell); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-lift); padding:8px; min-width:210px; display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden; transform:translateY(-6px); transition:opacity .18s,transform .18s,visibility .18s; z-index:70; } .nav .nav-more-menu a{ color:var(--ink);font-weight:600;font-size:.9rem; padding:9px 12px;border-radius:8px;white-space:nowrap; } .nav .nav-more-menu a::after{content:none} .nav .nav-more-menu a:hover{background:var(--sky-mist);color:var(--sea)} .nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu{ opacity:1;visibility:visible;transform:translateY(0); } .head-cta{padding:.6em 1.1em;font-size:.92rem} .burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;color:#fff;overflow:hidden; /* Pull the hero up underneath the sticky header (69px tall) so the photo itself — not the page background — shows through the header's translucent white gradient at the very top of the page. */ margin-top:-69px; /* CoolestCarib's own signature beach/umbrella photo (already used sitewide as the body background). Bright-summer pass: the scrim is much lighter and fades to fully transparent well before the right edge, so the umbrella, the couple and the white sand read clearly as photo rather than being muted under a dark tint — only the left side (behind the headline) keeps enough of a scrim for text contrast. The photo is deliberately sized WIDER than a strict "cover" fit (which would force a tight zoom and push the couple in under the text) — that leaves it slightly short of the hero's height, so it's bottom- anchored (sand stays put at the bottom) and the small gap this opens at the very top is filled with the photo's own sky blue as a solid fallback, invisible behind the navbar. Net effect: the couple clears the text column, the umbrella sits fully in frame, and the scene reads a little higher/airier than a hard vertical crop would allow. */ background-color:#1c8ad9; /* Scrim tuned for text legibility: the original light --sky-blue tint (max 50% opacity) measured as low as 1.6-2.7:1 contrast for white hero body text against bright photo areas (sand/water/sky) — well under WCAG AA's 4.5:1 for normal text. A fully-compliant fix (near-black, fading out at 82% width) tested clean but read as too dark/"rainy day" overall. This is the negotiated middle ground: back to the site's own --navy (11,62,97) rather than near-black or the lighter --sky blue, at roughly the midpoint opacity between the original and the dark test, and fading out earlier (76% vs 82%) so more of the photo on the right stays untouched/vivid. Most sampled points now clear 4.5:1; the trailing edge of the longest wrapped lines can dip to ~3-3.5:1 (still clears the 3:1 "large text" threshold) — an accepted tradeoff for a lighter, airier feel. Same shape/stops reused by both island pages' inline $islandHeroStyle so it's one shared look. */ background-image: linear-gradient(100deg,rgba(11,62,97,.69) 0%,rgba(11,62,97,.52) 33%,rgba(11,62,97,.275) 57%,rgba(11,62,97,0) 76%), url("images/background/2017/bg-coolestcarib-caribbean-island-info-travel-directory.jpg"); background-size: 100% 100%, 140% auto; /* Vertical value uses calc(100% + Npx) rather than a bigger raw percentage: a pure-percentage push (e.g. 130%) flips direction depending on whether this photo renders taller or shorter than the hero box, which itself flips with browser window width — that's why an earlier attempt at this went the wrong way on a wider screen than the one it was tested on. calc(100% + Npx) always nudges the image down by exactly Npx from the bottom-anchored baseline, regardless of window size. Landed on 70px (~0.73in) as the amount that reads right on the real page. */ background-position: 0 0, 85% calc(100% + 70px); background-repeat: no-repeat, no-repeat; } /* padding-top trimmed back down — just enough to clear the header (69px) plus a little breathing room, not the old wide gap. Bottom padding cut hard (150->55) since that's where the excess empty space was (the gap between the trust badges and the wave); top padding trimmed more lightly (104->80) since it still has to clear the 69px sticky header. Net effect: overall hero height down ~15%, wave SVG itself untouched. */ .hero .wrap{position:relative;z-index:2;padding:80px 24px 55px;max-width:1080px} .hero .eyebrow{color:var(--coral)} .hero .eyebrow::before{background:var(--coral)} .hero h1{ font-size:clamp(2.7rem,7vw,5rem);font-weight:600;margin:18px 0 0;max-width:14ch; text-shadow:0 2px 30px rgba(0,0,0,.18); } .hero h1 em{font-style:italic;color:var(--coral)} .hero .lede{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:52ch;margin-top:20px;color:rgba(255,255,255,.92)} /* search / island picker */ .finder{ margin-top:34px;display:flex;gap:10px;flex-wrap:wrap;align-items:center; background:rgba(255,255,255,.96);padding:10px;border-radius:999px; max-width:480px;box-shadow:var(--shadow-lift); } .finder input{ flex:1;min-width:140px;border:0;background:transparent;font:inherit;font-size:1.05rem; color:var(--ink);padding:.65em 1em; } .finder input::placeholder{color:#90a2a8} .finder input:focus{outline:none} .finder .btn{padding:.78em 1.5em} .trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.9)} .trust span{display:inline-flex;align-items:center;gap:.5em} .trust b{font-family:var(--font-display);font-size:1.35rem;color:var(--coral);font-weight:600} /* wave divider */ .hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0} .hero-wave svg{width:100%;height:90px;display:block} /* The hero's floating "sun" is the actual brand mark (palm + wordmark), set on a warm glowing disc so it still reads as a sun from a distance, and set adrift with a slow bob + gentle sway — like it's floating on the water, not just bobbing in place. */ /* The hero's floating "sun" is CoolestCarib's own palm/starburst icon (images/icons/coolestcarib-icon.png — used freely across the live site) rather than the full wordmark: its radiating-frond shape already reads as a sun from a distance, and it sits far more naturally inside a round glow than the wide logo lockup did. */ .float-sun{ position:absolute;top:8%;right:6%;width:150px;z-index:1; display:flex;align-items:center;justify-content:center; animation:bob 8s ease-in-out infinite; } .float-sun::before{ content:"";position:absolute;inset:-24px;z-index:-1;border-radius:50%; /* All-orange grades only, so the glow disc and the orange icon sitting on it differ purely in shade — no gold/yellow to fight the icon's own orange. */ background:radial-gradient(circle at 38% 38%,#ffb27a,var(--coral) 55%,var(--coral-dk) 90%,transparent 100%); filter:blur(.3px);box-shadow:0 0 90px rgba(250,101,1,.5);opacity:.92; } .float-sun img{ width:100%;height:auto;display:block; filter:drop-shadow(0 6px 18px rgba(5,48,59,.25)); } @keyframes bob{ 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-8px,-16px) rotate(-2deg)} 100%{transform:translate(0,0) rotate(0deg)} } /* ============================================================ SECTION SCAFFOLD ============================================================ */ section{padding:84px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px} .sec-head h2{font-size:clamp(2rem,4.4vw,2.9rem);margin-top:12px} .sec-head p{color:var(--muted);max-width:46ch;margin-top:8px} .link-more{font-weight:700;color:var(--sea);display:inline-flex;align-items:center;gap:.4em;white-space:nowrap} .link-more:hover{color:var(--coral)} .link-more::after{content:"→";transition:transform .2s} .link-more:hover::after{transform:translateX(4px)} .sec-head .link-more{margin-left:auto} /* ============================================================ DESTINATIONS (the signature: live-filtered island mosaic) ============================================================ */ /* Pure white — matches the hero photo's own sand (sampled #fff at the bottom of the image) exactly, so the seam at the wave divider disappears instead of stepping from photo-white to the sitewide warm cream (--sand). */ .destinations{background:#fff} .destinations .eyebrow{color:var(--coral)} .destinations .eyebrow::before{background:var(--coral)} .destinations .link-more{color:var(--sky)} .destinations .link-more:hover{color:var(--coral)} .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px} .chip{ font:inherit;font-weight:600;font-size:.9rem;cursor:pointer; padding:.5em 1.05em;border-radius:999px;border:1.5px solid var(--line); background:var(--shell);color:var(--sky);transition:.18s; } .chip:hover{border-color:var(--sky);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:#fff} .count{color:var(--muted);font-size:.92rem;font-weight:600;margin:16px 2px 22px} .count b{color:var(--coral)} .island-grid{ display:grid;gap:14px; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); } .island{ position:relative;border-radius:var(--r);overflow:hidden;min-height:160px; display:flex;flex-direction:column;justify-content:flex-end; padding:14px 16px;color:#fff;isolation:isolate; box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease; } .island::before{ content:"";position:absolute;inset:0;z-index:-2; background:var(--g,linear-gradient(150deg,#0B3E61,#05303B)); } .island::after{ /* sea sheen + readability scrim */ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(3,30,37,.62) 100%), radial-gradient(120% 60% at 80% 0%,rgba(255,255,255,.22),transparent 60%); } .island:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} /* Flag is now the tile's main graphic instead of a small corner icon — a large, low-opacity watermark filling the empty space, sitting behind the name/fact text (which comes later in the DOM, so it naturally paints on top). Fixes the "looks very empty" problem without needing per-island photography. */ .island .flag{ font-size:4.6rem;line-height:1;position:absolute;top:50%;right:-8px; transform:translateY(-50%);opacity:.32;pointer-events:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); } .island .region-tag{ position:absolute;top:14px;right:14px;font-size:.64rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;background:rgba(255,255,255,.18);padding:.32em .7em;border-radius:999px; backdrop-filter:blur(3px); } .island h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:#fff;position:relative} .island .fact{ font-size:.9rem;color:rgba(255,255,255,.9);margin-top:4px;line-height:1.4;position:relative; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } /* Was reserving its own layout space even while hidden (opacity:0 still takes up room in the flex column) — that invisible strip is what was pushing the name/fact block up away from the card's true bottom edge. Collapsed via max-height instead, so the name now sits right against the bottom padding, and the "Explore guide" link only claims space when it actually reveals on hover. */ .island .go{ margin-top:0;max-height:0;overflow:hidden; font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.4em; color:#fff;opacity:0;transition:.22s; } .island:hover .go,.island:focus-within .go{opacity:1;max-height:26px;margin-top:10px} .island .go::after{content:"→"} .island.hide{display:none} .gem.hide{display:none} .no-results{display:none;color:var(--muted);padding:30px 4px;font-weight:600} /* tiny wave motif top-left of each tile */ .island .wavelet{position:absolute;left:14px;bottom:56px;width:42px;height:10px;opacity:.5;z-index:-1} /* ============================================================ "ON EVERY ISLAND" feature strip ============================================================ */ /* Same solid navy as the navbar (rather than the sitewide teal --ink), so this band bookends the page with the header instead of introducing a third dark color. */ .feature{background:var(--navy);color:#fff} .feature .eyebrow{color:var(--coral-lt)}.feature .eyebrow::before{background:var(--coral)} .feature h2{color:#fff;font-size:clamp(2rem,4.4vw,2.9rem);margin-top:10px;max-width:18ch} .feature .lede{color:rgba(255,255,255,.78);max-width:54ch;margin-top:14px} .feat-grid{ display:grid;gap:14px;margin-top:40px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } /* Desktop: force exactly 4 columns (2 rows of 4 for the current 8 items) instead of letting auto-fill pack in as many ~180px columns as fit (6 on a 1200px wrap). Wider columns, so the card's vertical padding is trimmed to keep the blocks from looking too tall/square at that width. Below 861px the original auto-fill behavior is left alone. */ @media(min-width:861px){ .feat-grid{grid-template-columns:repeat(4,1fr)} .feat{padding:16px 20px} /* Island pages (Anguilla/Antigua/Aruba, etc.) show 5 fun facts, not the homepage's 8 — one row of 5 instead of 4, scoped via body.island-page so the homepage's 4-column/2-row layout is untouched. */ body.island-page .feat-grid{grid-template-columns:repeat(5,1fr)} } .feat{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); border-radius:var(--r-sm);padding:20px;transition:.2s; } .feat:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)} .feat .ic{font-size:1.5rem;display:block;margin-bottom:10px} .feat h4{font-size:1.02rem;font-weight:700;margin-bottom:3px} .feat p{font-size:.85rem;color:rgba(255,255,255,.66);line-height:1.4} /* ============================================================ SERVICES — handpicked gems w/ Cool Factor ============================================================ */ .gems{background:var(--navy)} /* Section chrome (eyebrow/heading/lede/link) sits directly on the dark navy background, so it needs the same light-text treatment as .snack.on-ink — the .gem cards themselves stay white and don't need it. */ .gems .eyebrow{color:var(--coral-lt)} .gems .eyebrow::before{background:var(--coral)} .gems .sec-head h2{color:#fff} .gems .sec-head p{color:rgba(255,255,255,.78)} .gems .link-more{color:#fff} .gems .link-more:hover{color:var(--coral-lt)} /* Every alternating business card blends into the section's own navy background instead of standing out as a solid light-blue card — but at solid navy the card is literally invisible against the section, so the old --sky-mist light blue is layered back in at ~5% opacity (95% transparent) as a faint wash over the navy, giving it a slightly different appeal from the flat section background rather than a perfect, undetectable match. Needs its own text-color pass since the card is now dark instead of white. Higher specificity than the plain .gem-grid .gem:nth-child(even) rule below, so this wins for #gems only; Tours keeps its normal solid light-blue alternation untouched. */ /* :not(.gem-cta) excludes the "Run an island business?" CTA card at the end of the grid — it always keeps its own light-blue background and dark text regardless of which position (odd/even) it lands on, since that position shifts with however many real businesses come back from the database. */ #gems .gem-grid .gem:nth-child(even):not(.gem-cta){ background:rgba(237,246,252,.05);border-color:rgba(255,255,255,.14);box-shadow:none; } #gems .gem-grid .gem:nth-child(even):not(.gem-cta) h3{color:#fff} #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p{color:rgba(255,255,255,.78)} /* The live Description field's opening words come from the database with the dark blue baked in as an inline style="color:..." attribute on whatever tag wraps them — not just a link/bold tag, an actual inline style, which beats any plain CSS rule regardless of selector specificity. Needs !important to override it, and [style] to catch it whatever the wrapping tag turns out to be, on top of the plain-tag fallbacks. Recolored to match --lagoon, the same turquoise used by the location line (.place) above the business name. */ #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p a, #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p strong, #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p b, #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p span, #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p font, #gems .gem-grid .gem:nth-child(even):not(.gem-cta) p [style]{color:var(--lagoon) !important} #gems .gem-grid .gem:nth-child(even):not(.gem-cta) .cool{ background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22); } #gems .gem-grid .gem:nth-child(even):not(.gem-cta) .cool .star{color:var(--coral-lt)} #gems .gem-grid .gem:nth-child(even):not(.gem-cta) .more{color:#fff} #gems .gem-grid .gem:nth-child(even):not(.gem-cta) .more:hover{color:var(--coral-lt)} /* Tours mock-up — light wash on purpose, so it doesn't repeat the dark navy of the Gems section directly above it. Everything else (cards, heading, eyebrow) is unstyled here because it reuses the same generic .sec-head / .gem-grid / .gem rules, which already read fine on a light background with no overrides needed. */ .tours{background:var(--sky-mist)} /* tours-2026-anguilla.php's own #catalog section (the full tour-catalog page, not the homepage/island-page teaser) -- scoped to the id rather than touching the shared .tours rule above, so the teaser's light-blue wash on caribbean-island-2026-anguilla.php's #tours is untouched. Same ID-scoping convention used elsewhere (e.g. #tipofday.on-sun). */ #catalog{background:var(--shell)} /* Rows, not a grid — each business is a single horizontal card: a fixed 1:1 square for the photo (or the color-tile placeholder, until real photos are wired up) on the left, copy on the right. */ .gem-grid{display:flex;flex-direction:column;gap:34px} .gem{ background:var(--shell);border-radius:var(--r); box-shadow:var(--shadow);display:flex;flex-direction:row;align-items:center;transition:.22s; border:1px solid var(--line); padding:16px;gap:28px; } /* Alternate sides row by row — image left on odd rows, right on even rows — and alternate the card background too: white, then light blue, repeating. */ .gem-grid .gem:nth-child(even){flex-direction:row-reverse;background:var(--sky-mist)} .gem:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)} .gem-top{ position:relative;flex:0 0 360px;width:360px;aspect-ratio:1/1;align-self:center; border-radius:var(--r);overflow:hidden; background:var(--g,linear-gradient(135deg,#0a7d8c,#063a47)); } .gem-top::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 10%,rgba(255,255,255,.25),transparent 55%)} /* Real business photo, when the /directory/ path resolves — the gradient above stays as the background, so a missing/broken photo just falls back to it via the onerror handler on the in the markup. */ .gem-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* Now sits in .gem-body, above the business name, instead of overlaid on the photo — legible against the card background instead of fighting with whatever's in the image underneath it. */ .gem .place{ color:var(--lagoon);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; display:flex;align-items:center;gap:.45em;margin-bottom:8px; } .gem-body{padding:32px 36px;display:flex;flex-direction:column;flex:1;min-width:0} .gem-body h3{font-size:1.92rem;font-weight:600;line-height:1.15} .gem-body p{font-size:1.3rem;color:var(--muted);margin-top:14px;line-height:1.45} .cool{ display:inline-flex;align-items:center;gap:.5em;margin-top:14px; background:#FFF1E6;color:#AE420A;border:1px solid #FBD3B8; font-weight:700;font-size:.8rem;padding:.5em .85em;border-radius:999px;align-self:flex-start; } .cool .star{color:var(--coral)} .gem .more{margin-top:14px;font-weight:700;color:var(--sea);display:inline-flex;gap:.4em} .gem .more:hover{color:var(--coral)}.gem .more::after{content:"↗"} /* ============================================================ STORIES ============================================================ */ .stories{background:#fff} .story-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .story{ background:var(--shell);border-radius:var(--r);overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow);transition:.22s;display:flex;flex-direction:column; } .story:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)} .story .cover{height:160px;position:relative;background:var(--g)} .story .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,30,37,.25))} .story .tag{position:absolute;top:12px;left:12px;background:var(--shell);color:var(--sea);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.35em .7em;border-radius:999px;z-index:2} .story-body{padding:20px;display:flex;flex-direction:column;flex:1} .story-body h3{font-size:1.2rem;font-weight:600;line-height:1.2} .story-body p{font-size:.9rem;color:var(--muted);margin-top:8px;flex:1} .story .read{margin-top:14px;font-weight:700;color:var(--coral);display:inline-flex;gap:.4em} .story .read::after{content:"→";transition:transform .2s} .story:hover .read::after{transform:translateX(4px)} /* ============================================================ NEWSLETTER ============================================================ */ .signup{ background:var(--navy);color:#fff; border-radius:28px;padding:54px;display:flex;gap:40px;align-items:center; justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow-lift); position:relative;overflow:hidden; } /* Decorative coral glow orb removed per request — was overlapping the Notify me button and muddying its contrast. */ .signup .txt{position:relative;z-index:1;max-width:32ch} .signup h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem)} .signup p{color:rgba(255,255,255,.9);margin-top:10px} .signup form{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.96);padding:8px;border-radius:999px} .signup input{border:0;background:transparent;font:inherit;font-size:1rem;padding:.7em 1.1em;color:var(--ink);min-width:220px;flex:1} .signup input:focus{outline:none} /* Was inheriting only the base .btn size, which read as undersized next to the input in this pill-shaped form — sized up and pinned so it can't get squeezed by flex-shrink when the form wraps on narrow widths. */ .signup .btn{padding:1em 1.9em;font-size:1.05rem;flex:none} /* The real cause of the invisible input pill and the cramped button: a-coolestCarib.css (pulled in sitewide through a-a-main.css's @import chain) carries decades-old rules for these exact same MailChimp-required ids — #mc-embedded-subscribe-form{background-color: rgba(255,255,255,0)} and #mc-embedded-subscribe{width:50%;padding:15px 5px;border:1px solid gray;color:gray;...}. IDs outrank our .signup form / .signup .btn class selectors, so those legacy rules were winning regardless of anything set above. Restated here at matching ID specificity — and this file loads after a-coolestCarib.css in the page , so these win the tie. Don't remove the ids themselves; MailChimp's own embed script depends on them. */ #mc-embedded-subscribe-form{background-color:rgba(255,255,255,.96);text-align:left} #mc-embedded-subscribe{width:auto;padding:1em 1.9em;font-size:1.05rem;border:0;color:#fff;border-radius:999px;margin-bottom:0} /* ============================================================ FOOTER ============================================================ */ .foot{background:var(--navy);color:rgba(255,255,255,.75);padding:70px 0 30px} .foot a:hover{color:var(--aqua)} .foot-top{display:grid;gap:40px;grid-template-columns:1.4fr 2fr;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)} .foot .brand{color:#fff;margin-bottom:16px} .foot .blurb{font-size:.95rem;max-width:40ch} .socials{display:flex;gap:12px;margin-top:20px} .socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-weight:700;transition:.2s} .socials a:hover{background:var(--coral);transform:translateY(-3px)} .foot-cols{display:grid;gap:30px;grid-template-columns:repeat(4,1fr)} .foot-cols h5{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px} .foot-cols ul{list-style:none} .foot-cols li{margin-bottom:9px;font-size:.92rem} .foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:.85rem;color:rgba(255,255,255,.5)} .foot-bottom .coffee{display:inline-flex;align-items:center;gap:.5em;background:var(--coral);color:var(--ink);font-weight:700;padding:.5em 1em;border-radius:999px} .foot-bottom .coffee:hover{transform:translateY(-2px)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:860px){ .nav{display:none} .burger{display:block} /* 2026-08-08: mobile nav toggle. The burger button used to call scrollIntoView() on .nav -- a no-op, since .nav is display:none right above this rule, so tapping it never did anything site-wide. Now the burger's onclick toggles this .nav-open class instead, and this block turns the hidden .nav into a dropdown panel anchored under the sticky header. The desktop "More" submenu (.nav-more-menu, island pages + homepage only) is hover/focus-within only, which doesn't work well on touch, so inside .nav-open it's forced permanently expanded/static instead of requiring a second tap to reveal it. */ .nav.nav-open{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;top:100%;left:0;right:0; /* Solid (not translucent) on purpose: this panel sits directly over page content rather than at the very top of the viewport like .site-head, so it needs to fully hide what's behind it -- relying on backdrop-filter blur alone left hero text/imagery bleeding through legibly in testing. */ background:#0b3e61; border-bottom:1px solid rgba(255,255,255,.12); padding:8px 24px 20px; } .nav.nav-open a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)} .nav.nav-open a::after{content:none} .nav.nav-open .nav-more{position:static} .nav.nav-open .nav-more-menu{ position:static;opacity:1;visibility:visible;transform:none; background:transparent;border:0;box-shadow:none; padding:0 0 0 16px;margin-top:0;min-width:0; } .nav.nav-open .nav-more-menu a{color:rgba(255,255,255,.82);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)} .nav.nav-open .nav-more-menu a:hover{background:transparent;color:#fff} .nav.nav-open .nav-more-caret{display:none} .foot-top{grid-template-columns:1fr} .foot-cols{grid-template-columns:repeat(2,1fr)} /* 2026-08-08: on mobile, the auto-fill/minmax(196px,1fr) sizing on .island-grid only leaves room for 1 column (2 x 196px + gap doesn't fit under ~430px), so island cards stacked one-per-row. Forced to a fixed 2-column grid instead, same fixed-repeat(2,1fr) pattern already used by .foot-cols right above, at this same breakpoint. */ .island-grid{grid-template-columns:repeat(2,1fr)} .signup{padding:36px} section{padding:64px 0} .hero .wrap{padding:74px 24px 44px} .gem{padding:14px;gap:20px} .gem-top{flex-basis:270px;width:270px} .gem-body{padding:22px 26px} .gem-body h3{font-size:1.5rem} .gem-body p{font-size:1.05rem} } @media(max-width:640px){ .gem,.gem-grid .gem:nth-child(even){flex-direction:column;align-items:stretch;padding:14px} .gem-top{flex-basis:auto;width:100%;aspect-ratio:1/1} .gem-body{padding:22px 18px} } @media(max-width:520px){ body{font-size:16px} .foot-cols{grid-template-columns:1fr} .trust{gap:18px} .float-sun{width:90px;top:4%;right:4%} .gem{padding:12px;gap:14px} .gem-body{padding:18px 14px} .gem-body h3{font-size:1.2rem} .gem-body p{font-size:.86rem;margin-top:8px} .cool{font-size:.7rem;padding:.4em .7em;margin-top:10px} .gem .more{margin-top:10px;font-size:.9rem} } /* reveal-on-load + reduced motion */ .reveal{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards} .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s} @keyframes rise{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} .reveal{opacity:1;transform:none} } /* ============================================================ SNACK BANDS — Radio / Tip of the day / Video of the day / Social feed. These wrap CoolestCarib's existing live PHP data (WA_MySQLi_RS recordsets) and Elfsight widget embeds — the data and embed logic are untouched, only the presentation is new. ============================================================ */ .snack{padding:64px 0} /* Radio, Tip of the day, Videos, Social and About all share this .snack class but never had their own h2 size — they were falling back to the browser default (2em), which is why they read as a different size than #gems and the other .sec-head sections. Matched to that same size here. */ .snack h2{font-size:clamp(2rem,4.4vw,2.9rem);margin-top:12px} .snack.on-mist{background:var(--sky-mist)} .snack.on-sun{background:var(--sun-mist)} /* Anguilla page's "Anguilla Social Pics" section only — kept white instead of the shared .on-sun tint. Scoped to this one section's id so the homepage's own Social section and every "Tip of the Day" section (both also .snack.on-sun) are unaffected. */ #socialPics.on-sun{background:var(--shell)} /* "Find Flights" (#flights, shared include) on white instead of the shared .on-mist tint — but only on the island pages (marked with the .island-page body class); the homepage's own Find Flights section, which uses the same shared include/markup, keeps its current mist background. */ body.island-page #flights.on-mist{background:var(--shell)} .snack.on-ink{background:var(--navy);color:#fff} .snack.on-ink .eyebrow{color:var(--coral-lt)} .snack.on-ink .eyebrow::before{background:var(--coral)} .snack.on-ink h2{color:#fff} .snack.on-ink .lede{color:rgba(255,255,255,.78)} .snack-card{ background:var(--shell);border-radius:var(--r);border:1px solid var(--line); box-shadow:var(--shadow);padding:34px 38px;margin-top:30px; } .snack.on-ink .snack-card{ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12); box-shadow:none; } /* Tip of the Day: drop the white card chrome entirely — the tip text sits directly on the section's own background instead — and size the tip up since it's no longer competing with a boxed-in card for attention. */ #tipofday .snack-card{ background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-top:24px; } #tipofday .snack-card .body{font-size:1.4rem;line-height:1.6} .snack-card .kicker{ display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; color:var(--coral);margin-bottom:10px; } .snack.on-ink .snack-card .kicker{color:var(--coral-lt)} .snack-card .body{font-size:1.02rem;line-height:1.65} .snack-card .body p{margin-bottom:.9em} .snack-card .body img{border-radius:var(--r-sm);margin:10px 0} .snack-attrib{margin-top:16px;font-size:.85rem;color:var(--muted)} .snack.on-ink .snack-attrib{color:rgba(255,255,255,.6)} .snack-attrib a{color:inherit;text-decoration:underline} .snack-embed{ margin-top:30px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line); background:var(--shell);min-height:220px; } .snack.on-ink .snack-embed{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)} .snack-embed-pad{padding:20px} /* ============================================================ ABOUT band (folds in the legacy "about network" copy) ============================================================ */ .about-band{background:var(--shell)} .about-grid{display:grid;gap:40px;grid-template-columns:1.1fr .9fr;margin-top:30px;align-items:start} /* The "Get to know it" headline now lives inside the grid's left column (moved 2026-07-28, per user request) instead of sitting full-width above the grid — so it only spans the text column's width, not the whole page, and the flag/support-card in the right column shifts up to align with it instead of starting below a full-width heading. Zeroes out the generic .snack h2 top margin, which existed only to space the heading away from the eyebrow above it; .about-grid's own margin-top:30px already provides that separation now that the heading is inside the grid. margin-bottom (added same day, follow-up request) gives the heading some breathing room above the body copy instead of the paragraph text crowding right up against it. */ .about-grid h2{margin-top:0;margin-bottom:20px} .about-grid p{color:var(--muted);margin-bottom:14px;line-height:1.7} .about-grid ul{margin:14px 0 14px 1.2em;color:var(--muted);line-height:1.9} .about-grid .about-links{margin-top:18px;display:flex;flex-direction:column;gap:8px;font-weight:700} .about-grid .about-links a{color:var(--sea)} .about-grid .about-links a:hover{color:var(--coral)} /* #about ("Get to know it") links styled as solid orange blocks with white text (2026-08-03), same treatment already applied to #network's own .about-links in include/about.incl.php, per an example screenshot. Scoped to #about specifically -- not a further edit to the shared .about-grid .about-links rule above -- so this doesn't ripple into any other section that might reuse .about-links in the future. #about's id is identical across all 25 island pages (verified), so this single rule here in the shared stylesheet covers all of them at once -- no per-page edits needed, unlike #network which lives in a per-page include and needed its own