/* ==========================================================================
Greece Trips — components.css (theme). Ported from the approved Phase-3
designs/shared/shared.css + per-template styles. Loaded on front end AND
editor (functions.php) so editor = live. Consumes assets/css/tokens.css.
========================================================================== */
/* ==========================================================================
Greece Trips — shared chrome + components (Phase 3)
Consumes brand-book/tokens.css exclusively. Owned by gt-design-integrator;
designers USE these classes and never restyle them.
========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--gt-color-bg); color: var(--gt-color-text);
font-family: var(--gt-font-body); font-size: var(--gt-text-base);
line-height: var(--gt-leading-base);
}
h1, h2, h3, h4 { font-family: var(--gt-font-display); color: var(--gt-color-heading); line-height: var(--gt-leading-tight); letter-spacing: var(--gt-tracking-display); }
a { color: var(--gt-color-link); }
a:hover { color: var(--gt-color-link-hover); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--gt-color-focus); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Integrator-owned layout token (not in tokens.css — that is a locked Phase 1
deliverable). Templates derive sticky/scroll offsets from this, so the sticky
header height lives in exactly one place. */
:root { --gt-header-h: 64px; }
.gt-container { max-width: var(--gt-container); margin: 0 auto; padding-left: var(--gt-gutter); padding-right: var(--gt-gutter); }
.gt-section { padding-top: var(--gt-space-8); padding-bottom: var(--gt-space-8); }
.gt-eyebrow { font-size: var(--gt-text-xs); font-weight: var(--gt-weight-semibold); letter-spacing: var(--gt-tracking-caps); text-transform: uppercase; color: var(--gt-color-text-muted); }
.gt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gt-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--gt-color-surface); color: var(--gt-color-link); padding: var(--gt-space-2) var(--gt-space-4); border-radius: var(--gt-radius-sm); }
.gt-skip:focus { left: var(--gt-space-2); }
/* ---------- header ---------- */
.gt-header { position: sticky; top: 0; z-index: 20; background: var(--gt-color-surface); border-bottom: var(--gt-border); }
.gt-header-row { display: flex; align-items: center; gap: var(--gt-space-5); height: var(--gt-header-h); }
.gt-brand { display: inline-flex; align-items: center; gap: var(--gt-space-2); text-decoration: none; }
.gt-brand-word { font-family: var(--gt-font-display); font-size: var(--gt-text-lg); color: var(--gt-color-heading); }
.gt-brand-word .lt { font-weight: var(--gt-weight-regular); }
.gt-brand-word .bd { font-weight: var(--gt-weight-bold); }
.gt-nav { display: none; gap: var(--gt-space-5); margin-left: auto; }
.gt-nav a { font-size: var(--gt-text-sm); font-weight: var(--gt-weight-medium); color: var(--gt-color-text); text-decoration: none; }
.gt-nav a:hover { color: var(--gt-color-link); }
/* .gt-header prefix raises specificity to 0,2,0 so it beats .gt-btn's own
display:inline-flex (0,1,0), which is declared later in this file. */
.gt-header .gt-header-cta { display: none; }
.gt-burger { margin-left: auto; width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: var(--gt-radius-sm); }
.gt-burger span:not(.gt-visually-hidden) { display: block; width: 22px; height: 2.5px; background: var(--gt-color-heading); border-radius: 2px; transition: transform var(--gt-dur-base) var(--gt-ease), opacity var(--gt-dur-base) var(--gt-ease); }
body.gt-nav-open .gt-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.gt-nav-open .gt-burger span:nth-child(2) { opacity: 0; }
body.gt-nav-open .gt-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.gt-nav-open .gt-nav { display: flex; position: fixed; inset: var(--gt-header-h) 0 auto 0; z-index: 19; flex-direction: column; gap: 0; background: var(--gt-color-surface); border-bottom: var(--gt-border); padding: var(--gt-space-3) var(--gt-gutter) var(--gt-space-5); }
body.gt-nav-open .gt-nav a { padding: var(--gt-space-3) 0; border-bottom: var(--gt-border); font-size: var(--gt-text-base); }
@media (min-width: 1080px) {
.gt-nav { display: flex; }
.gt-header .gt-header-cta { display: inline-flex; margin-left: 0; }
.gt-burger { display: none; }
}
/* ---------- footer ---------- */
.gt-footer { background: var(--gt-color-surface-dark); color: var(--gt-aegean-300); margin-top: var(--gt-space-9); }
.gt-footer a { color: var(--gt-aegean-100); text-decoration: none; display: block; padding: var(--gt-space-1) 0; font-size: var(--gt-text-sm); }
.gt-footer a:hover { color: var(--gt-foam); }
.gt-footer h2 { color: var(--gt-foam); font-size: var(--gt-text-xs); letter-spacing: var(--gt-tracking-caps); text-transform: uppercase; font-family: var(--gt-font-body); font-weight: var(--gt-weight-semibold); margin-bottom: var(--gt-space-3); }
.gt-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--gt-space-6); padding-top: var(--gt-space-8); padding-bottom: var(--gt-space-6); }
.gt-footer-tag { font-family: var(--gt-font-display); color: var(--gt-foam); margin-top: var(--gt-space-3); }
.gt-footer-meta { border-top: 1px solid var(--gt-aegean-800); padding-top: var(--gt-space-4); padding-bottom: var(--gt-space-6); font-size: var(--gt-text-xs); }
@media (min-width: 768px) { .gt-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* ---------- buttons ---------- */
.gt-btn { display: inline-flex; align-items: center; gap: var(--gt-space-2); font-family: var(--gt-font-body); font-weight: var(--gt-weight-semibold); font-size: var(--gt-text-sm); padding: 12px 22px; border-radius: var(--gt-radius-md); border: none; cursor: pointer; text-decoration: none; transition: background var(--gt-dur-fast) var(--gt-ease); }
.gt-btn-primary { background: var(--gt-aegean-600); color: var(--gt-white); }
.gt-btn-primary:hover { background: var(--gt-aegean-700); color: var(--gt-white); }
.gt-btn-secondary { background: var(--gt-sun-500); color: var(--gt-aegean-900); }
.gt-btn-secondary:hover { background: var(--gt-sun-600); color: var(--gt-aegean-900); }
.gt-btn-quiet { background: transparent; color: var(--gt-color-link); padding: 12px 10px; }
.gt-btn-quiet:hover { color: var(--gt-color-link-hover); }
/* ---------- badges ---------- */
.gt-badge { display: inline-block; font-size: var(--gt-text-xs); font-weight: var(--gt-weight-semibold); padding: 4px 12px; border-radius: var(--gt-radius-pill); letter-spacing: 0.02em; }
.gt-badge-cat { background: var(--gt-aegean-050); color: var(--gt-aegean-700); }
.gt-badge-sea { background: var(--gt-shallows-100); color: var(--gt-shallows-700); }
.gt-badge-warm { background: var(--gt-terra-100); color: var(--gt-terra-700); }
.gt-badge-success { background: var(--gt-success-bg); color: var(--gt-success); }
.gt-badge-warning { background: var(--gt-warning-bg); color: var(--gt-warning); }
.gt-badge-error { background: var(--gt-error-bg); color: var(--gt-error); }
/* ---------- cards ---------- */
.gt-card { background: var(--gt-color-surface); border: var(--gt-border); border-radius: var(--gt-radius-lg); overflow: hidden; box-shadow: var(--gt-shadow-sm); transition: box-shadow var(--gt-dur-base) var(--gt-ease); }
.gt-card:hover { box-shadow: var(--gt-shadow-md); }
.gt-card .media { height: 170px; position: relative; }
.gt-card .media .gt-badge { position: absolute; top: 12px; left: 12px; background: var(--gt-white); color: var(--gt-aegean-700); }
.gt-card .body { padding: var(--gt-space-4) var(--gt-space-5) var(--gt-space-5); }
.gt-card .body h3, .gt-card .body h4 { font-size: var(--gt-text-xl); margin-bottom: var(--gt-space-1); }
.gt-card .meta { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); margin-bottom: var(--gt-space-3); }
/* ---------- the route (signature) ---------- */
.gt-route-list { list-style: none; }
.gt-route-list li { position: relative; padding: 0 0 var(--gt-space-5) var(--gt-space-6); }
.gt-route-list li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 10px; height: 8px; border-radius: 60% 55% 58% 50%; background: var(--gt-route-color); }
.gt-route-list li::after { content: ""; position: absolute; left: 8.5px; top: 20px; bottom: 2px; width: var(--gt-route-dot-size); background-image: radial-gradient(circle, var(--gt-route-color) 1.5px, transparent 1.6px); background-size: var(--gt-route-dot-size) calc(var(--gt-route-dot-size) + var(--gt-route-gap)); background-repeat: repeat-y; }
.gt-route-list li:last-child { padding-bottom: 0; }
.gt-route-list li:last-child::after { display: none; }
.gt-route-list li:last-child::before { background: var(--gt-sun-500); }
.gt-route-list b { display: block; font-family: var(--gt-font-display); font-weight: var(--gt-weight-semibold); color: var(--gt-color-heading); }
.gt-route-list span { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); }
/* ---------- breadcrumbs ---------- */
.gt-crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gt-space-2); font-size: var(--gt-text-sm); padding: var(--gt-space-4) 0; }
.gt-crumbs li { display: inline-flex; align-items: center; gap: var(--gt-space-2); }
.gt-crumbs li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gt-gray-400); }
.gt-crumbs a { text-decoration: none; color: var(--gt-color-text-muted); }
.gt-crumbs a:hover { color: var(--gt-color-link); }
.gt-crumbs [aria-current] { color: var(--gt-color-heading); font-weight: var(--gt-weight-medium); }
/* ---------- forms ---------- */
.gt-field { margin-bottom: var(--gt-space-4); }
.gt-field label { display: block; font-size: var(--gt-text-sm); font-weight: var(--gt-weight-semibold); color: var(--gt-color-heading); margin-bottom: var(--gt-space-2); }
.gt-field input, .gt-field select, .gt-field textarea { width: 100%; font-family: var(--gt-font-body); font-size: var(--gt-text-base); padding: 11px 14px; border: 1.5px solid var(--gt-color-border); border-radius: var(--gt-radius-sm); background: var(--gt-color-surface); color: var(--gt-color-text); }
.gt-field input:focus, .gt-field select:focus, .gt-field textarea:focus { outline: none; border-color: var(--gt-color-focus); box-shadow: 0 0 0 3px var(--gt-shallows-100); }
.gt-field .help { font-size: var(--gt-text-xs); color: var(--gt-color-text-muted); margin-top: var(--gt-space-1); }
/* ---------- booking slot ---------- */
.gt-booking { border: 2px dashed var(--gt-shallows-500); border-radius: var(--gt-radius-lg); padding: var(--gt-space-5); background: var(--gt-shallows-100); }
.gt-booking .gt-eyebrow { color: var(--gt-shallows-700); display: block; margin-bottom: var(--gt-space-2); }
.gt-booking p { font-size: var(--gt-text-sm); color: var(--gt-gray-800); }
/* ---------- imagery stand-ins (photos arrive in Phase 5) ---------- */
.gt-ph-sea { background: linear-gradient(150deg, var(--gt-shallows-300) 0%, var(--gt-shallows-500) 45%, var(--gt-aegean-600) 100%); }
.gt-ph-stone { background: linear-gradient(150deg, var(--gt-sun-300) 0%, var(--gt-terra-300) 50%, var(--gt-terra-500) 100%); }
.gt-ph-village { background: linear-gradient(150deg, var(--gt-aegean-050) 0%, var(--gt-aegean-100) 40%, var(--gt-aegean-300) 100%); }
.gt-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 31, 44, 0.72), rgba(7, 31, 44, 0.05) 60%); }
/* ==========================================================================
Consolidated components (Phase 3 integration)
Migrated out of individual templates where 2+ designers reinvented the same
pattern. Template-UNIQUE variants (hero route board, verdict panel, key-info
facts card, article TOC) intentionally stay local.
========================================================================== */
/* ---------- FAQ accordion (was: .hub-faq / .faq details / .t-guide .faq) ----
Q
A
(guide) or hold plain text. */
.gt-faq { max-width: var(--gt-container-prose); }
.gt-faq-item { background: var(--gt-color-surface); border: var(--gt-border); border-radius: var(--gt-radius-lg); box-shadow: var(--gt-shadow-sm); }
.gt-faq-item + .gt-faq-item { margin-top: var(--gt-space-3); }
.gt-faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--gt-space-4); padding: var(--gt-space-4) var(--gt-space-5); font-family: var(--gt-font-display); font-weight: var(--gt-weight-semibold); font-size: var(--gt-text-lg); line-height: var(--gt-leading-snug); color: var(--gt-color-heading); }
.gt-faq-item > summary::-webkit-details-marker { display: none; }
.gt-faq-item > summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.gt-faq-item > summary::after { content: "+"; flex: none; font-family: var(--gt-font-display); font-size: var(--gt-text-xl); line-height: 1; color: var(--gt-shallows-700); }
.gt-faq-item[open] > summary::after { content: "\2013"; }
.gt-faq-a { padding: 0 var(--gt-space-5) var(--gt-space-5); }
.gt-faq-a p + p { margin-top: var(--gt-space-3); }
/* ---------- data / comparison table + scroll wrapper ----------------------
(was: .table-wrap/.areas-table, .table-scroll/.routes-table). The wrapper
scrolls sideways so the page never does. Templates keep specifics (sticky
first column, "win" cells, min-width) local. */
.gt-table-wrap { overflow-x: auto; border: var(--gt-border); border-radius: var(--gt-radius-lg); background: var(--gt-color-surface); box-shadow: var(--gt-shadow-sm); }
.gt-table { width: 100%; border-collapse: collapse; font-size: var(--gt-text-sm); }
.gt-table th, .gt-table td { text-align: left; padding: var(--gt-space-3) var(--gt-space-4); vertical-align: top; }
.gt-table thead th { font-family: var(--gt-font-body); font-size: var(--gt-text-xs); font-weight: var(--gt-weight-semibold); letter-spacing: var(--gt-tracking-caps); text-transform: uppercase; color: var(--gt-color-text-muted); background: var(--gt-color-bg-subtle); border-bottom: 2px solid var(--gt-color-border); }
.gt-table tbody th, .gt-table tbody td { border-bottom: var(--gt-border); }
.gt-table tbody th[scope="row"] { color: var(--gt-color-heading); font-weight: var(--gt-weight-semibold); }
.gt-table tbody tr:last-child th, .gt-table tbody tr:last-child td { border-bottom: none; }
/* ---------- section connector: "the port" (was: .port / .depart) ----------
…
Horizontal dotted route + island dot leading into a section label. The
homepage hero route board is a separate, bespoke component and keeps its own. */
.gt-port { display: flex; align-items: center; gap: var(--gt-space-3); margin-bottom: var(--gt-space-3); }
.gt-port .line { width: var(--gt-space-8); height: var(--gt-route-dot-size); background-image: radial-gradient(circle, var(--gt-route-color) 1.5px, transparent 1.6px); background-size: calc(var(--gt-route-dot-size) + var(--gt-route-gap)) var(--gt-route-dot-size); background-repeat: repeat-x; background-position: left center; }
.gt-port .dot { width: var(--gt-space-3); height: var(--gt-space-2); border-radius: 60% 55% 58% 50%; background: var(--gt-shallows-500); }
.gt-port .label { font-size: var(--gt-text-xs); font-weight: var(--gt-weight-semibold); letter-spacing: var(--gt-tracking-caps); text-transform: uppercase; color: var(--gt-color-text-muted); }
.gt-port-invert .line { background-image: radial-gradient(circle, var(--gt-route-color-invert) 1.5px, transparent 1.6px); }
.gt-port-invert .label { color: var(--gt-aegean-300); }
/* ---------- callout / tip box (was: .callout(+warning), .hub-transport-note, .escape)
Left-accent aside for a caveat, a tip, or an alternative. The comparison
"verdict" panel is a different, unique component and stays local. */
.gt-callout { background: var(--gt-info-bg); border-left: var(--gt-space-1) solid var(--gt-info); border-radius: var(--gt-radius-md); padding: var(--gt-space-4) var(--gt-space-5); }
.gt-callout > .gt-callout-label { display: block; color: var(--gt-aegean-700); margin-bottom: var(--gt-space-2); }
.gt-callout p { margin-bottom: 0; }
.gt-callout p + p { margin-top: var(--gt-space-3); }
.gt-callout-warning { background: var(--gt-warning-bg); border-left-color: var(--gt-warning); }
.gt-callout-warning > .gt-callout-label { color: var(--gt-warning); }
.gt-callout-tip { background: var(--gt-color-surface); border-left-color: var(--gt-sun-500); }
/* ---------- "last checked" fact-meta line (was: .last-checked, .hub-facts-note, .checked)
The E-E-A-T freshness line: an optional "Checked {date}" badge + source. */
.gt-last-checked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gt-space-3); font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); }
/* ================= homepage (.t-homepage) ================= */
/* ================= homepage-scoped styles (.t-homepage) ================= */
/* ---- hero ---- */
.t-homepage .hp-hero {
background: linear-gradient(165deg, var(--gt-aegean-950), var(--gt-aegean-900) 60%, var(--gt-aegean-800));
color: var(--gt-color-text-invert);
padding: var(--gt-space-9) 0;
position: relative;
overflow: hidden;
}
.t-homepage .hp-hero::before {
/* noon sun glow, top right — decorative */
content: "";
position: absolute;
top: calc(-1 * var(--gt-space-8));
right: calc(-1 * var(--gt-space-8));
width: calc(var(--gt-space-10) * 2.5);
height: calc(var(--gt-space-10) * 2.5);
background: radial-gradient(circle, var(--gt-sun-500), transparent 70%);
opacity: 0.3;
pointer-events: none;
}
.t-homepage .hp-hero-inner { position: relative; animation: hp-rise calc(var(--gt-dur-base) * 2) var(--gt-ease) both; }
.t-homepage .hp-hero .gt-eyebrow { color: var(--gt-shallows-300); }
.t-homepage .hp-hero h1 {
font-size: var(--gt-text-4xl);
color: var(--gt-foam);
margin-top: var(--gt-space-3);
}
.t-homepage .hp-lead {
font-size: var(--gt-text-lg);
color: var(--gt-aegean-100);
max-width: var(--gt-container-prose);
margin-top: var(--gt-space-4);
}
.t-homepage .hp-cta { display: flex; flex-wrap: wrap; gap: var(--gt-space-3); margin-top: var(--gt-space-6); }
.t-homepage .hp-hero :focus-visible, .t-homepage .hp-map :focus-visible { outline-color: var(--gt-sun-500); }
/* the hero route — the 7-day route drawn as the brand signature, horizontal */
.t-homepage .hp-route { display: block; text-decoration: none; margin-top: var(--gt-space-8); max-width: var(--gt-container-prose); }
.t-homepage .hp-route-row {
display: flex;
align-items: flex-start;
gap: var(--gt-space-2);
animation: hp-draw calc(var(--gt-dur-base) * 4) var(--gt-ease) both;
animation-delay: calc(var(--gt-dur-base) * 2);
}
.t-homepage .hp-route .stop { display: flex; flex-direction: column; gap: var(--gt-space-1); }
.t-homepage .hp-route .isle {
width: var(--gt-space-5);
height: var(--gt-space-4);
background: var(--gt-route-color-invert);
border-radius: 60% 55% 58% 50%; /* signature island blob, shape per shared.css route-list */
}
.t-homepage .hp-route .name {
font-family: var(--gt-font-display);
font-weight: var(--gt-weight-semibold);
color: var(--gt-foam);
font-size: var(--gt-text-base);
}
.t-homepage .hp-route .days { font-size: var(--gt-text-xs); color: var(--gt-aegean-300); }
.t-homepage .hp-route .leg {
flex: 1;
min-width: var(--gt-space-4);
height: var(--gt-route-dot-size);
margin-top: calc(var(--gt-space-2) - (var(--gt-route-dot-size) / 2));
background-image: radial-gradient(circle, var(--gt-route-color-invert) 1.5px, transparent 1.6px);
background-size: calc(var(--gt-route-dot-size) + var(--gt-route-gap)) var(--gt-route-dot-size);
background-repeat: repeat-x;
background-position: left center;
}
.t-homepage .hp-route .sun {
width: var(--gt-space-5);
height: var(--gt-space-5);
border-radius: var(--gt-radius-pill);
background: var(--gt-sun-500);
margin-top: calc(-1 * var(--gt-space-1));
}
.t-homepage .hp-route-cap {
display: block;
margin-top: var(--gt-space-4);
font-size: var(--gt-text-sm);
font-weight: var(--gt-weight-semibold);
color: var(--gt-sun-300);
transition: color var(--gt-dur-fast) var(--gt-ease);
}
.t-homepage .hp-route:hover .hp-route-cap { color: var(--gt-sun-100); text-decoration: underline; }
@keyframes hp-rise { from { opacity: 0; transform: translateY(var(--gt-space-3)); } to { opacity: 1; transform: none; } }
@keyframes hp-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* ---- shared section furniture ---- */
.t-homepage h2 { font-size: var(--gt-text-3xl); }
.t-homepage h3 { font-size: var(--gt-text-xl); }
.t-homepage .hp-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gt-space-4); margin-bottom: var(--gt-space-6); }
.t-homepage .hp-sechead .gt-eyebrow { display: block; margin-bottom: var(--gt-space-2); }
.t-homepage .hp-intro { color: var(--gt-color-text-muted); max-width: var(--gt-container-prose); margin-top: var(--gt-space-2); }
.t-homepage .hp-alt { background: var(--gt-color-bg-subtle); }
/* ---- destinations grid ---- */
.t-homepage .hp-cards { display: grid; grid-template-columns: 1fr; gap: var(--gt-space-5); }
.t-homepage .gt-card .more {
font-size: var(--gt-text-sm);
font-weight: var(--gt-weight-semibold);
text-decoration: none;
}
/* dot-separated inline link rows (popular pages, "also planning for") */
.t-homepage .hp-dotlinks { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gt-space-2); font-size: var(--gt-text-sm); margin-top: var(--gt-space-6); }
.t-homepage .hp-dotlinks li { display: inline-flex; align-items: center; gap: var(--gt-space-2); }
.t-homepage .hp-dotlinks li + li::before { content: ""; width: 4px; height: 4px; border-radius: var(--gt-radius-pill); background: var(--gt-gray-400); }
.t-homepage .hp-dotlinks .lbl { color: var(--gt-color-text-muted); }
.t-homepage .hp-dotlinks a { font-weight: var(--gt-weight-medium); }
/* ---- itineraries strip ---- */
.t-homepage .hp-itins { display: grid; grid-template-columns: 1fr; gap: var(--gt-space-6); }
.t-homepage .hp-itin-panel {
background: var(--gt-color-surface);
border: var(--gt-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-6);
box-shadow: var(--gt-shadow-sm);
}
.t-homepage .hp-itin-panel .gt-eyebrow { display: block; margin-bottom: var(--gt-space-2); }
.t-homepage .hp-itin-panel > p { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); margin: var(--gt-space-2) 0 var(--gt-space-5); }
.t-homepage .hp-itin-panel .gt-btn { margin-top: var(--gt-space-5); }
.t-homepage .hp-more-routes h3 { margin-bottom: var(--gt-space-3); }
.t-homepage .hp-routes-more { list-style: none; }
.t-homepage .hp-routes-more li { position: relative; padding: var(--gt-space-3) 0 var(--gt-space-3) var(--gt-space-5); border-bottom: var(--gt-border); }
.t-homepage .hp-routes-more li::before {
content: "";
position: absolute;
left: 0;
top: calc(var(--gt-space-3) + 0.45em);
width: 10px; /* blob size mirrors shared.css .gt-route-list marker */
height: 8px;
border-radius: 60% 55% 58% 50%;
background: var(--gt-shallows-500);
}
.t-homepage .hp-routes-more a { display: block; text-decoration: none; }
.t-homepage .hp-routes-more b { display: block; font-family: var(--gt-font-display); font-weight: var(--gt-weight-semibold); color: var(--gt-color-heading); }
.t-homepage .hp-routes-more a:hover b { color: var(--gt-color-link); }
.t-homepage .hp-routes-more span { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); }
/* ---- guide + trip-type tiles ---- */
.t-homepage .hp-tiles { display: grid; grid-template-columns: 1fr; gap: var(--gt-space-5); }
.t-homepage .hp-tiles .gt-badge { margin-bottom: var(--gt-space-3); }
.t-homepage .hp-tiles h3 { margin-bottom: var(--gt-space-2); }
.t-homepage .hp-tiles h3 a { color: inherit; text-decoration: none; }
.t-homepage .hp-tiles h3 a:hover { color: var(--gt-color-link); }
.t-homepage .hp-tiles p { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); margin-bottom: var(--gt-space-3); }
/* ---- booking band ---- */
.t-homepage .hp-booking { max-width: var(--gt-container-prose); }
.t-homepage .hp-booking > p { margin: var(--gt-space-3) 0 var(--gt-space-5); }
.t-homepage .gt-booking strong { color: var(--gt-color-heading); }
/* ---- map teaser ---- */
.t-homepage .hp-map {
background: linear-gradient(165deg, var(--gt-aegean-950), var(--gt-aegean-900) 60%, var(--gt-aegean-800));
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-6);
color: var(--gt-aegean-100);
display: grid;
grid-template-columns: 1fr;
gap: var(--gt-space-6);
align-items: center;
overflow: hidden;
}
.t-homepage .hp-map .gt-eyebrow { color: var(--gt-shallows-300); display: block; margin-bottom: var(--gt-space-2); }
.t-homepage .hp-map h2 { color: var(--gt-foam); }
.t-homepage .hp-map p { margin: var(--gt-space-3) 0 var(--gt-space-5); font-size: var(--gt-text-base); }
.t-homepage .hp-map-svg { width: 100%; max-width: calc(var(--gt-container-prose) / 2); height: auto; justify-self: center; }
.t-homepage .hp-map-svg .m-isle { fill: var(--gt-foam); }
.t-homepage .hp-map-svg .m-isle-sea { fill: var(--gt-shallows-500); }
.t-homepage .hp-map-svg .m-sun { fill: var(--gt-sun-500); }
.t-homepage .hp-map-svg .m-dots { stroke: var(--gt-foam); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 6.4; fill: none; }
/* ---- breakpoints (contract: 768 / 1080 only) ---- */
@media (min-width: 768px) {
.t-homepage .hp-route-row { gap: var(--gt-space-3); }
.t-homepage .hp-route .leg { min-width: var(--gt-space-6); }
.t-homepage .hp-cards { grid-template-columns: repeat(2, 1fr); }
.t-homepage .hp-tiles { grid-template-columns: repeat(3, 1fr); }
.t-homepage .hp-map { grid-template-columns: 1.2fr 0.8fr; padding: var(--gt-space-7); }
}
@media (min-width: 1080px) {
.t-homepage .hp-cards { grid-template-columns: repeat(3, 1fr); }
.t-homepage .hp-itins { grid-template-columns: 1.05fr 0.95fr; }
}
/* ================= dark-section overrides (wp.md §8) =================
theme.json sets heading color to Aegean ink via :where() (0 specificity);
inside dark Aegean surfaces that is invisible. These class-level rules win
and make headings/eyebrows legible on dark. Reusable for every dark band. */
.has-aegean-ink-background-color :is(h1,h2,h3,h4,.wp-block-heading),
.gt-hero :is(h1,h2,h3,h4,.wp-block-heading),
.gt-footer :is(h1,h2,h3,h4,.wp-block-heading) { color: var(--gt-foam); }
.has-aegean-ink-background-color .gt-eyebrow,
.gt-hero .gt-eyebrow { color: var(--gt-aegean-300); }
/* ============ Gutenberg bridge (wp.md §4) ============
Core blocks inject a vertical block-gap between siblings that DOUBLES the
design own margins. Zero the gap VARIABLE rather than overriding margins —
overriding margins also kills the design intentional spacing (.hp-lead,
.hp-cta, .hp-route ...). Never use `margin:0` on groups: it would destroy
.gt-container margin-inline:auto centering. */
.t-homepage { --wp--style--block-gap: 0px; }
/* Grid/flex containers must see their cards as direct children. */
.t-homepage .hp-cards > .gt-card,
.t-homepage .hp-tiles > .gt-card { margin: 0; }
/* Cover blocks stand in for the card media strip (client swaps via Replace). */
.t-homepage .gt-card .wp-block-cover.media { min-height: 170px; padding: 0; }
.t-homepage .gt-card .wp-block-cover__inner-container { width: 100%; height: 100%; }
/* ---- core/list emits (not /) and no wrapper span.
Alias the design rules so the block-native lists look identical. ---- */
.t-homepage .gt-route-list li strong,
.t-homepage .hp-routes-more li strong {
display: block;
font-family: var(--gt-font-display);
font-weight: var(--gt-weight-semibold);
color: var(--gt-color-heading);
}
.t-homepage .gt-route-list li,
.t-homepage .hp-routes-more li { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); }
.t-homepage .hp-routes-more li a { text-decoration: none; }
.t-homepage .hp-dotlinks { list-style: none; padding-left: 0; }
/* ======================================================================
destination hub (.t-hub) — ported from designs/destination-hub.
Every selector scoped to .t-hub; values from tokens.css.
====================================================================== */
/* The Gutenberg bridge (CODE-06): zero the block-gap VARIABLE, never the
margins — the design's own margins do the spacing. */
:is(.t-hub,.t-entity,.t-listing) { --wp--style--block-gap: 0px; }
/* ---- hero: a core/cover with useFeaturedImage. One click swaps the photo.
Paint order is photo → ink dim (30%) → bottom scrim → text, which is why the
scrim is an ::after with z-index 0 while the inner container sits at 1. ---- */
:is(.t-hub,.t-entity) .hub-hero.wp-block-cover {
align-items: flex-end;
justify-content: flex-start;
padding: 0;
min-height: 68vh;
overflow: hidden;
}
:is(.t-hub,.t-entity) .hub-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(7, 31, 44, 0.78), rgba(7, 31, 44, 0.06) 62%);
}
:is(.t-hub,.t-entity) .hub-hero .wp-block-cover__inner-container { width: 100%; }
:is(.t-hub,.t-entity) .hub-hero-inner {
position: relative;
z-index: 1;
width: 100%;
padding-top: var(--gt-space-9);
padding-bottom: var(--gt-space-8);
animation: hp-rise calc(var(--gt-dur-base) * 3) var(--gt-ease) both;
}
:is(.t-hub,.t-entity) .hub-hero-eyebrow { color: var(--gt-aegean-050); }
:is(.t-hub,.t-entity) .hub-hero-eyebrow a { color: inherit; text-decoration: none; }
:is(.t-hub,.t-entity) .hub-hero-eyebrow a:hover { color: var(--gt-white); }
:is(.t-hub,.t-entity) .hub-hero h1 { color: var(--gt-foam); font-size: var(--gt-text-4xl); margin-top: var(--gt-space-2); }
:is(.t-hub,.t-entity) .hub-hero-lead {
color: var(--gt-aegean-050);
font-size: var(--gt-text-lg);
max-width: var(--gt-container-prose);
margin-top: var(--gt-space-4);
}
:is(.t-hub,.t-entity) .hub-hero-lead p { margin: 0; }
:is(.t-hub,.t-entity) .hub-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gt-space-4); margin-top: var(--gt-space-6); }
:is(.t-hub,.t-entity) .hub-hero-link { color: var(--gt-foam); font-size: var(--gt-text-sm); font-weight: var(--gt-weight-semibold); padding: var(--gt-space-3) var(--gt-space-2); }
:is(.t-hub,.t-entity) .hub-hero-link:hover { color: var(--gt-white); }
/* ---- quick facts (overlaps the hero) ---- */
.t-hub .hub-facts { position: relative; z-index: 2; margin-top: calc(var(--gt-space-7) * -1); }
.t-hub .hub-facts-card { background: var(--gt-color-surface); border: var(--gt-border); border-radius: var(--gt-radius-lg); box-shadow: var(--gt-shadow-md); padding: var(--gt-space-5); }
/* core/group grid layout stands in for the design's ; block-gap is zeroed
above, so the grid states its own gap. */
.t-hub .hub-facts-grid { gap: var(--gt-space-5); }
.t-hub .hub-fact {
font-weight: var(--gt-weight-semibold);
color: var(--gt-color-heading);
line-height: var(--gt-leading-snug);
margin-top: var(--gt-space-1);
}
.t-hub .hub-facts-card .gt-last-checked { font-size: var(--gt-text-xs); margin-top: var(--gt-space-4); }
/* ---- section headers ---- */
.t-hub .hub-head { max-width: var(--gt-container-prose); }
.t-hub .hub-head .gt-eyebrow { display: block; margin-bottom: var(--gt-space-2); }
.t-hub .hub-head h2 { font-size: var(--gt-text-3xl); }
.t-hub .hub-head p { margin-top: var(--gt-space-3); }
/* ---- category cards ---- */
.t-hub .hub-cat-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--gt-space-5); margin-top: var(--gt-space-6); padding-left: 0; }
.t-hub .hub-cat-card { position: relative; }
.t-hub .hub-cat-card h3 a { color: var(--gt-color-heading); text-decoration: none; }
.t-hub .hub-cat-card h3 a::after { content: ""; position: absolute; inset: 0; }
.t-hub .hub-cat-card:hover h3 a { color: var(--gt-color-link); }
.t-hub .hub-cat-cta { font-size: var(--gt-text-sm); font-weight: var(--gt-weight-semibold); color: var(--gt-color-link); }
/* ---- booking slot ---- */
.t-hub .hub-booking .gt-booking strong { color: var(--gt-color-heading); }
/* ---- breakpoints (contract: 768 and 1080 only) ---- */
@media (min-width: 768px) {
.t-hub .hub-cat-grid { grid-template-columns: repeat(2, 1fr); }
.t-hub .hub-transport-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
:is(.t-hub,.t-entity) .hub-hero-inner { padding-top: var(--gt-space-10); }
.t-hub .hub-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-hub .hub-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ======================================================================
Brand motion. The one moving thing we can show without faking a place:
our own route. Dots travel from island to island; the sun breathes.
The global prefers-reduced-motion rule (top of this file) kills all of it.
====================================================================== */
@keyframes gt-march { to { background-position-x: calc(var(--gt-route-dot-size) + var(--gt-route-gap)); } }
@keyframes gt-sail { to { stroke-dashoffset: -6.5; } }
@keyframes gt-breathe { 50% { transform: scale(1.07); opacity: 0.92; } }
.t-homepage .hp-route .leg { animation: gt-march 1.6s linear infinite; }
.t-homepage .hp-map-svg .m-dots { animation: gt-sail 2.4s linear infinite; }
.t-homepage .hp-map-svg .m-sun,
.t-homepage .hp-route .sun {
transform-box: fill-box;
transform-origin: center;
animation: gt-breathe 4.8s var(--gt-ease) infinite;
}
/* ======================================================================
listings (.t-listing) — destination-scoped category listings and the
generic archives (/destinations/, /islands/{group}/, /trip-types/{x}/).
====================================================================== */
/* block-gap is zeroed on the template root, so the grid states its own gutter. */
.t-listing .listing-grid { gap: var(--gt-space-5); margin-top: var(--gt-space-6); list-style: none; padding-left: 0; }
.t-listing .listing-grid > li { margin: 0; }
.t-listing .listing-card { position: relative; display: flex; flex-direction: column; }
.t-listing .listing-card .media { margin: 0; }
.t-listing .listing-card .media img { width: 100%; height: 170px; object-fit: cover; display: block; }
/* core/post-featured-image renders NOTHING when a post has no thumbnail — there is
no empty element to style. Give the card itself the brand gradient strip instead,
so an image-less card still looks designed. :has() degrades to no strip. */
.t-listing .listing-card:not(:has(.media))::before {
content: "";
display: block;
height: 170px;
background: linear-gradient(150deg, var(--gt-shallows-300) 0%, var(--gt-shallows-500) 45%, var(--gt-aegean-600) 100%);
}
.t-listing .listing-card .body { padding: var(--gt-space-4) var(--gt-space-5) var(--gt-space-5); }
.t-listing .listing-card h2 { font-size: var(--gt-text-xl); margin-bottom: var(--gt-space-1); }
.t-listing .listing-card h2 a { color: var(--gt-color-heading); text-decoration: none; }
.t-listing .listing-card h2 a::after { content: ""; position: absolute; inset: 0; }
.t-listing .listing-card:hover h2 a { color: var(--gt-color-link); }
.t-listing .listing-card .meta { font-size: var(--gt-text-sm); color: var(--gt-color-text-muted); margin: 0; }
.t-listing .listing-card .meta p { margin: 0; }
.t-listing .hub-head h1 { font-size: var(--gt-text-4xl); }
.t-listing .hub-head .gt-eyebrow { display: block; margin-bottom: var(--gt-space-2); }
.t-listing .listing-pagination { margin-top: var(--gt-space-7); font-size: var(--gt-text-sm); }
.t-listing .gt-callout { margin-top: var(--gt-space-6); max-width: var(--gt-container-prose); }
@media (max-width: 767px) {
.t-listing .listing-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1079px) {
.t-listing .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* long-form prose column for entity pages */
.gt-prose > * { max-width: var(--gt-container-prose); }
.gt-prose > p, .gt-prose > ul, .gt-prose > ol, .gt-prose > h2, .gt-prose > h3 { margin-bottom: var(--gt-space-4); }
.gt-prose > h2 { margin-top: var(--gt-space-7); }
.gt-prose > h3 { margin-top: var(--gt-space-5); }
/* ---- page template (guides, comparisons, audience guides, trust pages) ---- */
.t-page .gt-crumbs { padding-top: var(--gt-space-5); }
.t-page h1 { font-size: var(--gt-text-4xl); margin-bottom: var(--gt-space-5); }
.t-page .entry-content > * { max-width: var(--gt-container-prose); }
.t-page .entry-content > p { margin-bottom: var(--gt-space-4); }
.t-page .gt-container { padding-bottom: var(--gt-space-9); }
/* Index pages (/itineraries/, /travel-guide/) embed a listing grid in their content.
`.t-page .entry-content > *` clamps children to the prose column — right for prose,
wrong for a 3-up grid. Let a nested .t-listing out of the column. */
.t-page .entry-content > .t-listing { max-width: none; }
.t-page .entry-content > .t-listing .listing-grid { margin-top: var(--gt-space-2); }
/* Listing prose: the gt_listing article body, above the entity grid. */
.t-listing .listing-intro { margin-top: var(--gt-space-5); }
.t-listing .listing-intro > * { max-width: var(--gt-container-prose); }
.t-listing .listing-intro > p { margin-bottom: var(--gt-space-4); }
.t-listing .listing-intro > h2 { margin-top: var(--gt-space-7); font-size: var(--gt-text-2xl); }
.t-listing .listing-intro > h3 { margin-top: var(--gt-space-5); }
.t-listing .listing-intro > ul,
.t-listing .listing-intro > ol { margin-bottom: var(--gt-space-4); padding-left: var(--gt-space-5); }