/* ============================================================================
* GUIDEBOOK VIEWER — 2026 v1 styles
* ============================================================================
* All classes prefixed .hg2026- to avoid clashing with old .gb-* styles.
* Paired with:
* - files/js/guidebook-generator-2026-v1.js
* - files/js/guidebook-viewer-2026-v1.js
* - _includes/guidebook-data-2026-v1.html
*
* Design system:
* - Card-based, generous whitespace, editorial feel
* - Island brand color applied via inline style on cover + CTAs
* - Responsive grid: single-column mobile → 2-col tablet → 3-col desktop
* - Print-friendly stylesheet so readers can save to PDF
*
* Site-wide base CSS: font-size: 62.5% makes 1rem = 10px. New code per
* CLAUDE.md uses px for font sizes, not rem.
* ==========================================================================*/
/* --- Container + typography reset ---------------------------------------- */
.hg2026-container {
--hg-brand: #1866B4; /* fallback — overwritten by JS per island */
--hg-brand-soft: rgba(243, 237, 224, 1);
max-width: 1120px;
margin: 0 auto;
padding: 0 20px 80px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #1a1a1a;
line-height: 1.6;
font-size: 18px !important;
}
/* Defeat any site-level paragraph/list rules that might win against the
* container's font-size via direct p/li selectors (e.g. .article-content p
* at 23px). Forcing inheritance here makes every descendant paragraph and
* list item honor the container's size regardless of the surrounding layout. */
.hg2026-container p,
.hg2026-container li,
.hg2026-container ul,
.hg2026-container ol {
font-size: inherit;
}
.hg2026-container * { box-sizing: border-box; }
.hg2026-container h1,
.hg2026-container h2,
.hg2026-container h3,
.hg2026-container h4,
.hg2026-container h5 {
font-family: Georgia, "Times New Roman", serif;
color: #0e0e0e;
line-height: 1.25;
margin: 0 0 14px;
}
.hg2026-container p { margin: 0 0 14px; }
.hg2026-container ul,
.hg2026-container ol {
margin: 0 0 16px;
padding-left: 22px;
list-style: disc outside;
}
.hg2026-container ol { list-style: decimal outside; }
.hg2026-container li {
margin-bottom: 6px;
display: list-item;
}
.hg2026-container a { color: #1866B4; text-decoration: none; }
.hg2026-container a:hover { text-decoration: underline; }
.hg2026-container img { max-width: 100%; height: auto; display: block; }
.hg2026-container strong { color: #000; }
.hg2026-container em { font-style: italic; color: #333; }
/* --- Cover --------------------------------------------------------------- */
.hg2026-cover {
position: relative;
min-height: 360px;
margin: 0 -20px 20px;
padding: 0;
background-color: #0e0e0e;
background-size: cover;
background-position: center center;
color: #fff;
border-radius: 16px;
overflow: hidden;
}
.hg2026-cover-scrim {
min-height: 360px;
padding: 64px 32px 48px;
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
}
.hg2026-cover-tier {
display: inline-block;
align-self: center;
padding: 6px 14px;
margin-bottom: 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 999px;
color: #fff;
}
.hg2026-container .hg2026-cover .hg2026-cover-title,
.hg2026-container h1.hg2026-cover-title {
font-size: 72px;
color: #fff !important;
margin: 0 0 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.45);
/* al-fresco is the bold script used on the island homepages
(e.g. the big "Maui" / "Oahu" / "Kauai" / "Big Island" display
text over the hero video). Matches the previous-generation
visitor-guide cover art and the site's established island voice. */
font-family: al-fresco, "Brush Script MT", cursive;
font-weight: 700;
line-height: 1.05;
}
.hg2026-cover-tagline {
font-size: 22px;
font-style: italic;
opacity: 0.95;
margin: 0 0 18px;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.hg2026-cover-meta {
font-size: 14px;
opacity: 0.85;
letter-spacing: 0.04em;
}
.hg2026-cover-divider { padding: 0 8px; opacity: 0.6; }
/* --- Table of Contents --------------------------------------------------- */
.hg2026-toc {
background: #faf8f3;
border: 1px solid #eae5d8;
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 48px;
}
.hg2026-toc h3 {
margin: 0 0 12px;
font-size: 20px;
color: #3a3a3a;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.hg2026-toc ol {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 6px 24px;
counter-reset: toc;
}
.hg2026-toc li {
margin: 0;
counter-increment: toc;
font-size: 16px;
}
.hg2026-toc li::before {
content: counter(toc, decimal-leading-zero) ".";
color: #999;
margin-right: 10px;
font-variant-numeric: tabular-nums;
}
.hg2026-toc a { color: #333; }
.hg2026-toc a:hover { color: #1866B4; }
/* --- Section headings ---------------------------------------------------- */
.hg2026-section-heading {
font-size: 32px;
margin: 56px 0 20px;
padding-bottom: 10px;
border-bottom: 3px solid var(--hg-brand, #f3ede0);
display: flex;
align-items: center;
gap: 14px;
scroll-margin-top: 20px;
}
.hg2026-section-icon { font-size: 28px; line-height: 1; }
.hg2026-section-intro {
font-size: 17px;
color: #333;
margin-bottom: 24px;
}
.hg2026-section-intro p:last-child { margin-bottom: 0; }
/* --- Pronunciations + pills --------------------------------------------- */
.hg2026-pronun {
display: inline-block;
margin-left: 10px;
padding: 2px 10px;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-style: italic;
color: #555;
background: #f3ede0;
border-radius: 999px;
vertical-align: middle;
}
.hg2026-pill-row {
margin-top: 12px;
font-size: 13px;
line-height: 1.8;
}
.hg2026-pill-label {
font-weight: 700;
color: #555;
margin-right: 8px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.08em;
}
.hg2026-pill {
display: inline-block;
margin: 2px 6px 2px 0;
padding: 3px 10px;
background: #f3ede0;
border-radius: 999px;
font-size: 13px;
color: #5a4820;
}
/* --- Generic card + cards grids ----------------------------------------- */
.hg2026-card {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
padding: 22px 24px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.hg2026-card h3 {
margin: 0 0 12px;
font-size: 20px;
color: #3a3a3a;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hg2026-bulleted { margin: 0; padding-left: 20px; font-size: 16px; }
.hg2026-bulleted li { margin-bottom: 6px; }
/* --- Entitled-view: full-width read mode (post-purchase / preview) ---- */
/* On the 4 Highlights + 4 Essential sales pages, when the reader holds a
valid unlock signal (preview=hg2026v1, hg2026_unlocked cookie, or
hg2026_unlock_key localStorage), the sales sidebar is noise — they've
already bought or are previewing. Hide the right sidebar and let the
main content column stretch to full width.
Class set by _includes/hg2026-entitled-detect.html inline script.
Uses high specificity + !important to beat Foundation's .columns rules
which use floats and explicit widths. */
html.hg-entitled-view body .article-content .small-12.medium-4.columns,
html.hg-entitled-view body .article-content .medium-4.columns {
display: none !important;
}
html.hg-entitled-view body .article-content .small-12.medium-8.columns,
html.hg-entitled-view body .article-content .medium-8.columns {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- Overview grid ------------------------------------------------------ */
/* Cap at 2 columns max. Quick Facts + Our Top Recommendations share row 1
at 50% each; Flight Times spans the full width on row 2 (see below).
An earlier version used repeat(auto-fit, minmax(280px, 1fr)) which on
wide viewports created a 3-column grid, leaving row 1 with an empty
third cell and the two visible cards squeezed to 33% each. */
.hg2026-overview-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 32px;
}
@media (min-width: 600px) {
.hg2026-overview-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Flight Times (the 3rd card) spans the full row so its 2-column
From/Duration table has horizontal room — leaving it alone in a
half-width cell squeezes the Duration column until trailing notes
wrap word-by-word. */
.hg2026-overview-grid > .hg2026-card:nth-child(3) {
grid-column: 1 / -1;
}
.hg2026-flight-table {
width: 100%;
font-size: 14px;
border-collapse: collapse;
table-layout: auto;
}
.hg2026-flight-table th,
.hg2026-flight-table td {
text-align: left;
padding: 8px 16px 8px 0;
border-bottom: 1px solid #f0eadc;
vertical-align: top;
}
.hg2026-flight-table th { color: #666; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.hg2026-flight-table td:last-child,
.hg2026-flight-table th:last-child { padding-right: 0; }
/* Origin column: comfortable width, allow wrapping for long names like
"Honolulu (OGG from HNL)" but keep it visually the narrower column. */
.hg2026-flight-table td:first-child,
.hg2026-flight-table th:first-child {
font-weight: 600;
color: #2a2a2a;
padding-right: 20px;
width: 38%;
min-width: 140px;
}
.hg2026-flight-table th:first-child { font-weight: 600; }
/* Duration column: the narrative notes can be long — let them wrap on
natural word breaks, not mid-word. */
.hg2026-flight-table td:last-child {
word-break: normal;
overflow-wrap: break-word;
}
.hg2026-flight-note {
display: block;
font-size: 12px;
color: #888;
font-weight: normal;
margin-top: 2px;
font-style: italic;
}
/* --- Fun fact card ----------------------------------------------------- */
/* Softer parchment tone so it doesn't compete visually with amber teasers */
.hg2026-fun-fact {
background: #fbf9f2;
border-left: 3px solid var(--hg-brand, #d4c19a);
padding: 14px 18px;
border-radius: 6px;
margin: 0 0 24px;
font-size: 15px;
color: #3a3628;
}
.hg2026-fun-fact-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7a6c45;
margin-bottom: 4px;
}
/* --- Regions ----------------------------------------------------------- */
.hg2026-region-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
}
.hg2026-region-card {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
display: flex;
flex-direction: column;
}
.hg2026-region-hero {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.4s ease;
}
.hg2026-region-card .hg2026-hero-link {
width: 100%;
height: 200px;
}
.hg2026-region-card .hg2026-hero-link img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.hg2026-region-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.hg2026-region-card p { font-size: 16px; color: #333; }
.hg2026-region-name { font-size: 22px; margin: 0 0 10px; }
.hg2026-region-link {
display: inline-block;
margin-top: 8px;
font-size: 14px;
font-weight: 600;
}
/* --- Weather + when-to-visit ------------------------------------------- */
.hg2026-weather-glance {
background: #fff;
border: 2px solid #eae5d8;
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 24px;
font-size: 16px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px 24px;
}
.hg2026-weather-glance h3 {
grid-column: 1/-1;
margin: 0 0 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #666;
}
.hg2026-weather-bullets {
margin: 16px 0 32px;
padding-left: 24px;
font-size: 16px;
}
/* --- Visitor + climate charts (ported from 2024 viewer) --------------- */
.hg2026-charts-subhead {
font-size: 20px;
margin: 24px 0 14px;
color: #2a2a2a;
}
.hg2026-crowd-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 28px;
}
.hg2026-crowd-card {
background: #faf8f3;
border: 1px solid #eae5d8;
border-radius: 12px;
padding: 16px 14px 18px;
text-align: center;
}
.hg2026-crowd-icon {
display: block;
font-size: 30px;
line-height: 1;
margin-bottom: 8px;
}
.hg2026-crowd-name {
font-weight: 700;
font-size: 15px;
color: #2a2a2a;
margin-bottom: 2px;
}
.hg2026-crowd-months {
font-size: 13px;
color: #777;
margin-bottom: 10px;
}
.hg2026-crowd-rating {
display: inline-block;
padding: 4px 12px;
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hg2026-chart-wrap {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 12px;
padding: 18px 20px 14px;
margin-bottom: 18px;
}
.hg2026-chart-wrap h4 {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #666;
margin: 0 0 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hg2026-chart-svg {
width: 100%;
height: auto;
display: block;
}
.hg2026-chart-note {
margin: 8px 0 0;
font-size: 13px;
color: #777;
font-style: italic;
}
.hg2026-chart-source {
font-size: 12px;
color: #888;
margin: -8px 0 22px;
text-align: right;
}
.hg2026-chart-source a { color: #666; text-decoration: underline; }
.hg2026-season-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.hg2026-season-card {
background: #faf8f3;
border-radius: 10px;
padding: 18px 20px;
}
.hg2026-season-card h4 {
margin: 0 0 8px;
font-size: 18px;
color: #4a4a4a;
}
.hg2026-season-card p { font-size: 15px; color: #444; margin: 0; }
.hg2026-faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
margin-top: 28px;
}
.hg2026-faq-card {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 10px;
padding: 16px 18px;
}
.hg2026-faq-card h5 {
margin: 0 0 6px;
font-size: 15px;
color: #2a2a2a;
}
.hg2026-faq-card p { margin: 0; font-size: 15px; color: #444; }
/* --- Tip boxes --------------------------------------------------------- */
.hg2026-tip {
background: #f6f9f4;
border-left: 4px solid #6ab04c;
padding: 16px 20px;
border-radius: 8px;
margin: 20px 0;
font-size: 16px;
}
.hg2026-tip-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #557a3e;
margin-bottom: 4px;
}
.hg2026-insider-tip {
background: #f1f5f9;
border-left: 4px solid #1866B4;
padding: 12px 16px;
border-radius: 6px;
margin: 12px 0;
font-size: 15px;
color: #2a2a2a;
}
.hg2026-safety-note {
background: #fef3f2;
border-left: 4px solid #d94d40;
padding: 12px 16px;
border-radius: 6px;
margin: 12px 0;
font-size: 15px;
color: #6b1c16;
}
.hg2026-booking-note {
background: #f9f7ef;
border-left: 4px solid #c7a63b;
padding: 12px 16px;
border-radius: 6px;
margin: 12px 0;
font-size: 15px;
}
/* --- Subsection + getting-around -------------------------------------- */
.hg2026-subsection { margin: 24px 0 16px; }
.hg2026-subsection h4 { font-size: 20px; margin-bottom: 10px; }
.hg2026-affiliate-card {
background: #fff7e8;
border: 1px solid #f3d896;
border-radius: 12px;
padding: 20px 24px;
margin: 20px 0;
}
.hg2026-affiliate-card h4 { margin-top: 0; color: #8a6410; }
.hg2026-cta-button {
display: inline-block;
padding: 10px 22px;
background: #1866B4;
color: #fff !important;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.hg2026-cta-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* --- Where to stay (areas + hotels) ----------------------------------- */
.hg2026-area-block {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
padding: 28px;
margin-bottom: 28px;
}
.hg2026-area-name { font-size: 24px; margin: 0 0 12px; }
.hg2026-area-prospros {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 18px 0;
}
@media (max-width: 600px) {
.hg2026-area-prospros { grid-template-columns: 1fr; }
}
.hg2026-pros, .hg2026-cons {
background: #faf8f3;
padding: 14px 18px;
border-radius: 10px;
}
.hg2026-pros { border-left: 3px solid #6ab04c; }
.hg2026-cons { border-left: 3px solid #c17878; }
.hg2026-pros h5, .hg2026-cons h5 {
margin: 0 0 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #555;
}
.hg2026-pros ul, .hg2026-cons ul { margin: 0; padding-left: 18px; font-size: 15px; }
.hg2026-hotel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin-top: 16px;
}
.hg2026-hotel-card {
background: #faf8f3;
border-radius: 10px;
padding: 16px 18px;
font-size: 15px;
}
.hg2026-hotel-name {
font-size: 18px;
margin: 0 0 6px;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.hg2026-hotel-tier {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
background: #4a4a4a;
border-radius: 999px;
}
.hg2026-hotel-pitch { font-size: 15px; color: #5a5a5a; margin-bottom: 8px; }
/* --- Attractions + beaches + activities (shared card grid) ------------ */
.hg2026-attraction-grid,
.hg2026-beach-grid,
.hg2026-activity-grid,
.hg2026-culture-grid,
.hg2026-trail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 32px;
}
.hg2026-attraction-card,
.hg2026-beach-card,
.hg2026-activity-card,
.hg2026-culture-card,
.hg2026-trail-card {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
}
.hg2026-attraction-hero,
.hg2026-beach-hero,
.hg2026-activity-hero,
.hg2026-culture-hero,
.hg2026-trail-hero {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.4s ease;
}
/* Clickable hero wrapper — subtle zoom cue on hover signals interactivity
* without being gimmicky. If no URL, plain ![]()
renders and no hover.
* Locked to the same 220px height as the bare ![]()
so cards line up
* identically whether or not the hero is wrapped in a link. */
.hg2026-hero-link {
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 220px;
}
.hg2026-hero-link img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.hg2026-hero-link:hover img { transform: scale(1.03); }
.hg2026-hero-link::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.25) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.hg2026-hero-link:hover::after { opacity: 1; }
.hg2026-attraction-body,
.hg2026-beach-body,
.hg2026-activity-body,
.hg2026-culture-body,
.hg2026-trail-body {
padding: 20px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.hg2026-attraction-name,
.hg2026-beach-card h3,
.hg2026-activity-card h3,
.hg2026-culture-card h3,
.hg2026-trail-card h3 {
font-size: 22px;
margin: 0 0 6px;
}
.hg2026-attraction-tagline,
.hg2026-beach-tagline,
.hg2026-activity-tagline,
.hg2026-culture-tagline,
.hg2026-trail-tagline {
font-style: italic;
color: #555;
font-size: 16px;
margin: 0 0 14px;
}
.hg2026-activity-meta,
.hg2026-culture-meta,
.hg2026-trail-stats {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin: 0 0 14px;
font-size: 14px;
color: #555;
}
.hg2026-beach-fact {
font-size: 15px;
margin-bottom: 8px;
color: #333;
}
.hg2026-trail-meta {
font-size: 15px;
margin: 8px 0;
color: #2a2a2a;
}
.hg2026-attraction-link,
.hg2026-beach-link {
display: inline-block;
margin-top: auto;
padding-top: 10px;
font-size: 15px;
font-weight: 600;
}
/* --- Sidebar callouts ------------------------------------------------- */
.hg2026-sidebar-callout {
background: #fdfaf3;
border: 1px solid #eadfbd;
border-radius: 10px;
padding: 14px 16px;
margin: 14px 0;
font-size: 15px;
}
.hg2026-callout-fee_info { background: #fff7e8; border-color: #f3d896; }
.hg2026-callout-reservation { background: #feefef; border-color: #f1b7b2; }
.hg2026-callout-our_pick { background: #f3fdf1; border-color: #b4d9a5; }
.hg2026-callout-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
color: #333;
}
/* --- Dining ----------------------------------------------------------- */
.hg2026-dish-block {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 20px;
}
.hg2026-dish-name { font-size: 24px; margin: 0 0 10px; }
.hg2026-places-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 16px 0;
}
.hg2026-place {
background: #faf8f3;
border-radius: 8px;
padding: 14px 16px;
font-size: 15px;
}
.hg2026-place-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.hg2026-place-address { color: #666; font-size: 14px; margin-bottom: 8px; }
.hg2026-place-take { color: #333; font-style: italic; }
.hg2026-our-pick {
margin: 12px 0 0;
padding: 10px 14px;
background: #f3fdf1;
border-left: 3px solid #6ab04c;
border-radius: 6px;
font-size: 15px;
}
/* --- Itineraries ------------------------------------------------------ */
.hg2026-itinerary-plan {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
padding: 28px;
margin-bottom: 28px;
}
.hg2026-itinerary-title { font-size: 24px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hg2026-itinerary-length {
display: inline-block;
padding: 3px 12px;
background: #1866B4;
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.hg2026-day-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin: 20px 0;
}
.hg2026-day-card {
background: #faf8f3;
border-radius: 10px;
padding: 18px 20px;
}
.hg2026-day-header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #e5deca;
}
.hg2026-day-num {
font-size: 11px;
font-weight: 700;
padding: 3px 12px;
background: #4a4a4a;
color: #fff;
border-radius: 999px;
letter-spacing: 0.08em;
white-space: nowrap;
flex-shrink: 0;
}
.hg2026-day-title { font-size: 19px; font-weight: 600; color: #2a2a2a; font-family: Georgia, serif; }
.hg2026-day-slot { font-size: 15px; margin-bottom: 8px; }
.hg2026-drive-time {
font-size: 12px;
color: #777;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #e5deca;
}
.hg2026-skip-note,
.hg2026-alternate {
background: #f1f5f9;
padding: 14px 18px;
border-radius: 8px;
font-size: 15px;
margin-top: 12px;
}
/* --- Practical tips + packing ------------------------------------------ */
.hg2026-tips-group,
.hg2026-pack-group {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 20px;
}
.hg2026-tips-heading,
.hg2026-pack-heading {
font-size: 22px;
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
}
.hg2026-tip-item {
padding: 10px 0;
border-bottom: 1px solid #f4ecd7;
font-size: 16px;
}
.hg2026-tip-item:last-child { border-bottom: 0; }
.hg2026-pack-item {
padding: 8px 0 8px 8px;
border-bottom: 1px solid #f4ecd7;
font-size: 16px;
}
.hg2026-pack-item:last-child { border-bottom: 0; }
.hg2026-pack-name { font-weight: 600; color: #2a2a2a; }
.hg2026-pack-why { font-size: 15px; color: #555; margin-top: 4px; }
/* --- Maps + resources + history --------------------------------------- */
.hg2026-map-list,
.hg2026-res-list { padding-left: 20px; }
.hg2026-map-list li,
.hg2026-res-list li { margin-bottom: 12px; font-size: 16px; }
.hg2026-map-size { color: #777; font-size: 12px; }
.hg2026-map-desc,
.hg2026-res-note { color: #555; font-size: 15px; margin-top: 4px; }
.hg2026-res-addr { color: #666; font-size: 13px; margin-top: 2px; }
.hg2026-res-group { margin-bottom: 24px; }
.hg2026-res-group h3 {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #555;
margin-bottom: 10px;
}
.hg2026-history-body p {
font-size: 17px;
line-height: 1.75;
color: #2a2a2a;
margin-bottom: 18px;
}
.hg2026-history-sources {
margin-top: 28px;
padding: 20px 24px;
background: #faf8f3;
border-radius: 10px;
}
.hg2026-history-sources h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin-bottom: 10px; }
.hg2026-history-sources ul { font-size: 13px; }
/* --- Lite "Full Guide Preview" summary — one consolidated block that
* replaces 10+ per-section amber teasers in lite mode ------------ */
.hg2026-summary-intro {
font-size: 16px;
color: #444;
max-width: 780px;
margin-bottom: 24px;
}
.hg2026-summary-intro p:last-child { margin: 0; }
.hg2026-summary-card {
background: linear-gradient(135deg, #fffcf5 0%, #f7f1e1 100%);
border: 2px solid var(--hg-brand, #e5d5a8);
border-radius: 18px;
padding: 32px 36px 28px;
margin-bottom: 32px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.hg2026-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px 32px;
margin-bottom: 28px;
}
.hg2026-summary-group {
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 14px;
}
.hg2026-summary-title {
font-size: 18px;
margin: 0 0 10px;
color: #2a2a2a;
display: flex;
align-items: center;
gap: 10px;
font-family: Georgia, "Times New Roman", serif;
letter-spacing: -0.01em;
}
.hg2026-summary-icon { font-size: 22px; line-height: 1; }
ul.hg2026-summary-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
color: #3a3a3a;
line-height: 1.55;
}
ul.hg2026-summary-list li {
position: relative;
padding: 4px 0 4px 22px;
margin: 0;
list-style: none;
}
ul.hg2026-summary-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 4px;
color: var(--hg-brand, #b87615);
font-weight: 700;
}
.hg2026-summary-cta-row {
text-align: center;
padding-top: 14px;
border-top: 1px solid rgba(0,0,0,0.08);
}
.hg2026-summary-cta {
padding: 14px 32px;
font-size: 16px;
font-weight: 700;
background: var(--hg-brand, #b87615);
}
/* --- Teasers (lite-tier upsell blocks) -------------------------------- */
.hg2026-teaser {
background: linear-gradient(135deg, #fff7e8 0%, #fcecc7 100%);
border: 2px solid #f3d896;
border-radius: 14px;
padding: 24px 28px;
margin: 24px 0;
box-shadow: 0 2px 8px rgba(195, 150, 50, 0.12);
}
.hg2026-teaser-header {
font-size: 17px;
margin-bottom: 12px;
color: #6a4810;
}
.hg2026-teaser-lock { margin-right: 8px; font-size: 18px; }
ul.hg2026-teaser-list {
list-style: none;
margin: 0 0 16px;
padding: 0;
font-size: 16px;
color: #4a3818;
}
ul.hg2026-teaser-list li {
position: relative;
padding: 4px 0 4px 28px;
margin-bottom: 4px;
list-style: none;
}
ul.hg2026-teaser-list li::before {
content: "✓";
position: absolute;
left: 4px;
top: 4px;
font-weight: 700;
color: #b87615;
}
.hg2026-teaser-cta {
display: inline-block;
padding: 10px 20px;
background: #b87615;
color: #fff !important;
border-radius: 999px;
font-weight: 700;
font-size: 15px;
text-decoration: none !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.hg2026-teaser-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(184, 118, 21, 0.35);
}
/* --- Highlights-tier upsell callout ----------------------------------- */
/* Used inside Highlights-tier sections that are deliberately shallow, to
point readers to the Essential edition where the full version of the
gated content lives. Visually distinct from the lite teaser — softer,
less alarmist, uses the island brand accent so it reads "upgrade"
rather than "locked." */
.hg2026-highlight-upsell {
background: #f7f9fc;
border: 1px solid #dde4ef;
border-left: 4px solid var(--hg-brand, #1a5276);
border-radius: 10px;
padding: 16px 20px;
margin: 20px 0 28px;
}
.hg2026-highlight-upsell-label {
font-size: 15px;
color: var(--hg-brand, #1a5276);
margin-bottom: 6px;
}
.hg2026-highlight-upsell-label span { margin-right: 6px; }
.hg2026-highlight-upsell p {
margin: 0 0 12px;
font-size: 16px;
color: #333;
}
.hg2026-highlight-upsell-cta {
display: inline-block;
padding: 8px 18px;
background: var(--hg-brand, #1a5276);
color: #fff !important;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
text-decoration: none !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.hg2026-highlight-upsell-cta:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
/* --- Maps: optional thumbnail per printable map entry ---------------- */
.hg2026-map-list li { display: flex; gap: 16px; align-items: flex-start; }
.hg2026-map-thumb {
width: 110px;
height: auto;
flex: 0 0 auto;
border-radius: 8px;
border: 1px solid #e3e8ee;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.hg2026-map-body { flex: 1; }
@media (max-width: 600px) {
.hg2026-map-list li { flex-direction: column; gap: 10px; }
.hg2026-map-thumb { width: 100%; max-width: 280px; }
}
/* --- Footer CTA (end of lite preview) --------------------------------- */
.hg2026-footer-cta {
margin-top: 64px;
padding: 48px 32px;
background: #faf8f3;
border-radius: 16px;
text-align: center;
}
.hg2026-footer-cta h2 {
font-size: 32px;
margin: 0 0 14px;
}
.hg2026-footer-cta p {
max-width: 640px;
margin: 0 auto 24px;
font-size: 18px;
color: #444;
}
.hg2026-cta-primary {
background: #b87615;
padding: 14px 32px;
font-size: 17px;
}
/* --- Gated state: hide everything below the email gate until email submitted.
* Cover stays visible (anchors brand). Gate itself is always visible.
* TOC, body sections, and footer CTA are hidden behind the gate. */
.hg2026-gated .hg2026-toc,
.hg2026-gated .hg2026-body,
.hg2026-gated .hg2026-footer-cta {
display: none !important;
}
/* --- Email gate (lite-tier capture overlay) -------------------------- */
.hg2026-gate {
max-width: 780px;
margin: 8px auto 32px;
padding: 0 20px;
}
.hg2026-gate-card {
background: #fff;
border: 1px solid #eae5d8;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
padding: 32px 40px 32px;
text-align: center;
}
.hg2026-gate-badge {
display: inline-block;
padding: 6px 16px;
background: #b87615;
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 14px;
}
.hg2026-gate-card h2 {
font-size: 28px;
margin: 0 0 10px;
color: #0e0e0e;
}
.hg2026-gate-lede {
font-size: 15px;
color: #444;
margin: 0 auto 16px;
max-width: 560px;
line-height: 1.5;
}
ul.hg2026-gate-bullets {
list-style: none;
padding: 0;
margin: 0 auto 20px;
max-width: 480px;
text-align: left;
font-size: 14.5px;
color: #2a2a2a;
}
ul.hg2026-gate-bullets li {
padding: 4px 0 4px 26px;
position: relative;
list-style: none;
}
ul.hg2026-gate-bullets li::before {
content: "✓";
position: absolute;
left: 4px;
top: 6px;
color: #6ab04c;
font-weight: 700;
}
.hg2026-gate-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
max-width: 520px;
margin: 0 auto 14px;
}
.hg2026-gate-input {
flex: 1 1 260px;
padding: 14px 18px;
font-size: 16px;
border: 1.5px solid #d8d2c0;
border-radius: 10px;
box-sizing: border-box;
font-family: inherit;
background: #faf8f3;
}
.hg2026-gate-input:focus {
outline: 2px solid rgba(24, 102, 180, 0.3);
outline-offset: 1px;
border-color: #1866B4;
background: #fff;
}
.hg2026-gate-submit {
flex: 0 0 auto;
padding: 14px 24px;
font-size: 15px;
font-weight: 700;
background: #b87615;
color: #fff;
border: 0;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
transition: transform .12s ease, box-shadow .12s ease;
}
.hg2026-gate-submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(184, 118, 21, 0.4);
}
.hg2026-gate-fine {
font-size: 12px;
color: #888;
margin: 0;
}
.hg2026-gate-fine a { color: #1866B4; }
@media (max-width: 600px) {
.hg2026-gate-card { padding: 28px 22px; }
.hg2026-gate-card h2 { font-size: 24px; }
.hg2026-gate-form { flex-direction: column; }
.hg2026-gate-submit { width: 100%; }
}
/* Hide the email gate entirely in print */
@media print { .hg2026-gate { display: none; } }
/* --- Error state ------------------------------------------------------ */
.hg2026-error {
padding: 32px;
background: #fff7f7;
border: 1px solid #f1c9c4;
border-radius: 10px;
color: #7b1e16;
font-size: 15px;
}
.hg2026-error code {
background: #fff;
padding: 2px 6px;
border-radius: 4px;
font-family: "SFMono-Regular", "Monaco", Consolas, monospace;
}
/* --- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
.hg2026-container { font-size: 16px; padding: 0 16px 60px; }
/* Script fonts read smaller visually than serifs at the same pt
size — bump mobile title up a notch so "Maui" / "Oahu" stays the
hero of the cover. */
.hg2026-cover-title { font-size: 54px; }
.hg2026-cover-tagline { font-size: 18px; }
.hg2026-section-heading { font-size: 28px; margin: 48px 0 18px; }
.hg2026-dish-name { font-size: 22px; }
.hg2026-area-block { padding: 20px; }
.hg2026-itinerary-plan { padding: 20px; }
.hg2026-footer-cta { padding: 36px 20px; }
.hg2026-footer-cta h2 { font-size: 26px; }
}
/* --- "Save as PDF" floating action button ----------------------------- */
/* Primary PDF-delivery mechanism for the 2026 product line. No hosted
* files, no generation pipeline — the reader hits this button, the native
* print dialog opens, they pick "Save as PDF" (or Print to paper).
* Hidden in print output so the button doesn't render on page 1. */
.hg2026-print-fab {
position: fixed;
bottom: 24px;
right: 24px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--hg-brand, #1866B4);
color: #fff;
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,0.22);
/* z-index 9998 (matches Regenerate button) so this stays above any
Leaflet panes (markers ~600, popups ~700). z-index 200 was below
Leaflet markers, so per-day map pins on the custom guidebook
rendered ON TOP OF "Save a copy". */
z-index: 9998;
transition: transform .12s ease, box-shadow .12s ease;
}
.hg2026-print-fab:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.hg2026-print-fab:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.hg2026-print-fab-icon { font-size: 20px; line-height: 1; }
@media (max-width: 600px) {
.hg2026-print-fab { bottom: 16px; right: 16px; padding: 10px 18px; font-size: 14px; }
.hg2026-print-fab-icon { font-size: 18px; }
}
/* --- Print stylesheet — reader clicks "Save as PDF" in the print dialog
* --------------------------------------------------------------------- */
@media print {
/* Page setup: letter, tight margins, no browser chrome */
@page { size: letter; margin: 0.5in 0.4in 0.55in; }
/* Hide everything that isn't guidebook content */
body > header,
body > footer,
body > nav,
.header,
.nav-bar,
.site-header,
.site-nav,
.site-footer,
.sidebar,
.aside,
.hgads-light,
.hgads-dark,
.adthr-content,
[class*="adsbygoogle"],
.hg2026-print-fab,
.hg2026-gate,
.hg2026-toc,
.hg2026-teaser,
.hg2026-footer-cta,
.hg2026-cta-button,
.hg2026-teaser-cta,
.hg2026-hero-link::after { display: none !important; }
/* Container: fill the page, print-safe typography */
.hg2026-container {
font-size: 11pt !important;
line-height: 1.45;
color: #000 !important;
background: #fff !important;
max-width: none;
margin: 0;
padding: 0;
}
.hg2026-container p,
.hg2026-container li { font-size: 11pt; }
/* Cover as page 1 — no image backgrounds (they don't print well by default
* in most browsers unless the user ticks "Background graphics"). We show
* the title, tier, tagline, edition, and author text centered on a clean
* white page. Island brand color stays for the tier pill and title accent. */
.hg2026-cover {
page-break-after: always;
break-after: page;
min-height: 9in;
background: none !important;
color: #000 !important;
padding: 1.5in 0.5in 0.5in !important;
margin: 0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.hg2026-cover-scrim {
background: none !important;
padding: 0 !important;
min-height: auto;
color: #000 !important;
}
.hg2026-container .hg2026-cover-title,
.hg2026-container h1.hg2026-cover-title {
color: #000 !important;
text-shadow: none !important;
font-size: 48pt !important;
line-height: 1.05;
margin: 24pt 0 10pt;
}
.hg2026-cover-tagline {
color: #333 !important;
text-shadow: none !important;
font-size: 16pt;
font-style: italic;
margin-bottom: 18pt;
}
.hg2026-cover-meta { color: #555 !important; font-size: 11pt; }
.hg2026-cover-tier {
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Sections */
.hg2026-section-heading {
page-break-after: avoid;
break-after: avoid;
font-size: 20pt;
margin: 18pt 0 10pt;
padding-bottom: 6pt;
border-bottom: 2pt solid #333;
}
.hg2026-section-intro { font-size: 11pt; color: #333; }
/* Keep card-like blocks together when possible */
.hg2026-attraction-card,
.hg2026-beach-card,
.hg2026-activity-card,
.hg2026-trail-card,
.hg2026-culture-card,
.hg2026-dish-block,
.hg2026-area-block,
.hg2026-region-card,
.hg2026-itinerary-plan,
.hg2026-day-card,
.hg2026-tips-group,
.hg2026-pack-group,
.hg2026-chart-wrap,
.hg2026-fun-fact,
.hg2026-tip,
.hg2026-insider-tip {
page-break-inside: avoid;
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ddd !important;
background: #fff !important;
}
/* Images: keep heroes modest so they don't push content to the next page */
.hg2026-attraction-hero,
.hg2026-beach-hero,
.hg2026-activity-hero,
.hg2026-trail-hero,
.hg2026-culture-hero,
.hg2026-region-hero {
max-height: 1.8in;
object-fit: cover;
}
.hg2026-hero-link,
.hg2026-hero-link img { height: 1.8in !important; }
/* Grids collapse to single column so cards print full-width */
.hg2026-region-grid,
.hg2026-attraction-grid,
.hg2026-beach-grid,
.hg2026-activity-grid,
.hg2026-culture-grid,
.hg2026-trail-grid,
.hg2026-places-grid,
.hg2026-day-grid,
.hg2026-faq-grid,
.hg2026-season-grid,
.hg2026-crowd-grid,
.hg2026-hotel-grid,
.hg2026-overview-grid,
.hg2026-summary-grid { grid-template-columns: 1fr !important; gap: 10pt !important; }
/* Charts render correctly — force background graphics on */
.hg2026-chart-svg { max-width: 100%; height: auto; }
.hg2026-crowd-rating {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Links: black text, print URL only for external (skip internal anchors) */
a { color: #000 !important; text-decoration: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; word-break: break-all; }
a[href^="#"]::after,
a[href^="mailto:"]::after,
a[href^="tel:"]::after { content: ""; }
/* Pronunciation + pills should still print legibly */
.hg2026-pronun,
.hg2026-pill {
background: #f0f0f0 !important;
color: #333 !important;
border: 1px solid #ccc;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Section intros and body paragraphs read cleanly */
.hg2026-history-body p { font-size: 11pt; line-height: 1.55; }
}
/* ============================================================================
* CUSTOM TIER — /my-trip/guidebook
* ============================================================================
* Personal guidebook built from the reader's saved trip state. Loads the
* builder at files/js/guidebook-custom-builder-v1.js. Tier-specific overrides
* to the base hg2026 styles are scoped under .hg2026-tier-custom so they
* never leak into lite/highlight/essential pages.
* ==========================================================================*/
.hg2026-tier-custom {
--hg-brand: #1866B4; /* fallback; overridden by builder via inline style */
}
/* The custom builder wraps cover content in `.hg2026-cover-inner`. The base
2026 viewer's cover content sits inside `.hg2026-cover-scrim` which has
the padding + max-width + centering. Custom builds skip the scrim (uses
inline gradient on `.hg2026-cover--custom` directly) so `-inner` needs
its own padding + max-width or content collapses against the cover edges. */
.hg2026-tier-custom .hg2026-cover-inner {
max-width: 880px;
margin: 0 auto;
padding: 64px 32px 48px;
text-align: center;
position: relative;
z-index: 1;
box-sizing: border-box;
}
@media (max-width: 600px) {
.hg2026-tier-custom .hg2026-cover-inner { padding: 44px 22px 34px; }
}
.hg2026-cover--custom .hg2026-cover-eyebrow {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 18px;
font-weight: 600;
}
.hg2026-cover--custom .hg2026-cover-meta {
display: flex;
flex-wrap: wrap;
gap: 20px 28px;
justify-content: center;
margin-top: 18px;
font-size: 17px;
color: rgba(255, 255, 255, 0.95);
}
.hg2026-cover--custom .hg2026-cover-meta-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hg2026-cover--custom .hg2026-cover-meta-item i {
opacity: 0.85;
font-size: 18px;
}
.hg2026-cover--custom .hg2026-cover-byline {
margin-top: 22px;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
font-style: italic;
}
.hg2026-cover--empty {
background: linear-gradient(135deg, #f5f1ea 0%, #e9e1d2 100%);
color: #2a2a2a;
min-height: 320px;
padding: 60px 28px;
}
.hg2026-cover--empty .hg2026-cover-eyebrow {
background: var(--hg-brand);
color: #fff;
}
/* Base `.hg2026-container .hg2026-cover .hg2026-cover-title` carries
`color: #fff !important` (3 classes specificity). Match it + keep
`!important` so source order picks this override — otherwise the
empty-state title renders white-on-light-parchment (unreadable). */
.hg2026-container .hg2026-cover--empty .hg2026-cover-title {
color: #1a1a1a !important;
text-shadow: none !important;
}
.hg2026-cover-empty-lede {
margin-top: 16px;
font-size: 18px;
color: #4a4a4a;
max-width: 640px;
margin-left: auto;
margin-right: auto;
line-height: 1.55;
}
/* ─── Trip at a Glance grid ─── */
.hg2026-glance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 18px;
}
.hg2026-glance-card {
display: flex;
align-items: flex-start;
gap: 14px;
background: #fafafa;
border: 1px solid #e5e5e5;
border-left: 4px solid var(--hg-brand);
padding: 14px 16px;
border-radius: 6px;
box-sizing: border-box;
}
.hg2026-glance-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
background: var(--hg-brand);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.hg2026-glance-body { flex: 1; min-width: 0; }
.hg2026-glance-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #888;
margin-bottom: 3px;
}
.hg2026-glance-value {
font-size: 16px;
font-weight: 600;
color: #2a2a2a;
line-height: 1.35;
word-break: break-word;
}
.hg2026-glance-sub {
font-size: 13px;
color: #666;
margin-top: 4px;
}
.hg2026-glance-sub a { color: var(--hg-brand); }
.hg2026-glance-notes {
margin-top: 18px;
padding: 12px 16px;
background: #fff8e6;
border-left: 3px solid #f0c14b;
border-radius: 4px;
font-size: 15px;
line-height: 1.5;
color: #5a4400;
}
/* ─── Lodging card ─── */
.hg2026-lodging-card {
background: #fff;
border: 1px solid #e5e5e5;
border-top: 4px solid var(--hg-brand);
border-radius: 6px;
padding: 18px 22px;
margin-top: 14px;
box-sizing: border-box;
}
.hg2026-lodging-name {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 4px;
}
.hg2026-lodging-area {
font-size: 14px;
color: #6b6b6b;
margin-bottom: 10px;
font-style: italic;
}
.hg2026-lodging-desc {
font-size: 15px;
color: #3a3a3a;
line-height: 1.55;
margin-bottom: 12px;
}
.hg2026-lodging-amenities {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.hg2026-lodging-amenity {
display: inline-block;
padding: 3px 10px;
background: #f1f4f7;
color: #3a3a3a;
font-size: 12px;
border-radius: 12px;
font-weight: 500;
}
.hg2026-lodging-address {
font-size: 14px;
color: #444;
line-height: 1.45;
margin: 6px 0 10px;
}
.hg2026-lodging-actions {
font-size: 14px;
margin-top: 10px;
line-height: 1.7;
}
.hg2026-lodging-link-inline {
color: var(--hg-brand);
text-decoration: none;
white-space: nowrap;
}
.hg2026-lodging-link-inline:hover { text-decoration: underline; }
.hg2026-lodging-link {
margin-top: 6px;
font-size: 15px;
}
.hg2026-lodging-link a { color: var(--hg-brand); }
.hg2026-lodging-coords {
margin-top: 8px;
font-size: 12px;
color: #999;
font-family: 'Courier New', monospace;
}
.hg2026-lodging-others {
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed #ddd;
}
.hg2026-lodging-others h3 {
font-size: 15px;
color: #555;
margin: 0 0 8px;
}
.hg2026-lodging-others ul { margin: 0; padding-left: 22px; font-size: 15px; }
/* ─── Soft callout (lodging missing, day-by-day missing) ─── */
.hg2026-callout--soft {
background: #f5f1ea;
border: 1px solid #d8cdb6;
border-radius: 6px;
padding: 14px 18px;
font-size: 15px;
color: #4a3d24;
line-height: 1.55;
margin-top: 12px;
}
.hg2026-callout--soft a { color: var(--hg-brand); }
.hg2026-empty-note {
font-size: 15px;
color: #777;
font-style: italic;
}
/* ─── Day card ─── */
/* IMPORTANT: scope every rule in this section under .hg2026-tier-custom.
The base CSS (lines 880-905) ALSO has rules for .hg2026-day-card,
.hg2026-day-header, .hg2026-day-num for the paid-tier itinerary section.
Without scoping, these later rules win on source order and reshape
paid-tier day cards. Scoping with .hg2026-tier-custom raises our
specificity to (0,2,0) so we win only on the custom page. */
.hg2026-tier-custom .hg2026-day-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 18px 22px 22px;
margin-top: 16px;
box-sizing: border-box;
}
.hg2026-tier-custom .hg2026-day-header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 14px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 2px solid var(--hg-brand);
}
.hg2026-tier-custom .hg2026-day-num {
font-size: 22px;
font-weight: 700;
color: var(--hg-brand);
letter-spacing: 0.5px;
}
.hg2026-tier-custom .hg2026-day-date {
font-size: 16px;
color: #555;
font-weight: 500;
}
.hg2026-tier-custom .hg2026-day-theme {
font-size: 14px;
color: #777;
font-style: italic;
margin-left: auto;
}
/* Stats strip below the day-card header — sunrise / sunset / stop count.
Sized smaller than activity titles so it reads as supporting metadata.
Strong tag bolds the value (time, count); the label stays normal weight,
gives a clean "Sunrise 6:12am" rhythm without icons. */
.hg2026-tier-custom .hg2026-day-stats {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 13px;
color: #555;
padding: 8px 0 12px;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 14px;
}
.hg2026-tier-custom .hg2026-day-stat strong {
color: #1a1a1a;
font-weight: 600;
margin-right: 4px;
}
@media (max-width: 600px) {
.hg2026-tier-custom .hg2026-day-stats {
gap: 12px;
font-size: 12px;
}
}
/* Book These Now — top-of-guidebook reservation roundup. The same amber
accent as the per-day alert below, but framed as a section rather than
an inline callout because it's the cover-level summary readers see on
first page-flip. List of reservation-required activities across the
whole trip, deduped by URL. */
.hg2026-tier-custom .hg2026-section--book-ahead {
background: #fff8e6;
border: 1px solid #ead08a;
border-radius: 8px;
padding: 18px 22px;
margin: 18px 0;
}
.hg2026-tier-custom .hg2026-section--book-ahead h2 {
color: #7a5410;
margin-top: 0;
margin-bottom: 8px;
}
.hg2026-tier-custom .hg2026-book-ahead-intro {
font-size: 14px;
line-height: 1.5;
color: #4a3d24;
margin: 0 0 12px;
}
.hg2026-tier-custom .hg2026-book-ahead-list {
list-style: none;
padding: 0;
margin: 0;
}
.hg2026-tier-custom .hg2026-book-ahead-item {
font-size: 14px;
line-height: 1.5;
color: #1a1a1a;
padding: 6px 0;
border-top: 1px dashed #ead08a;
}
.hg2026-tier-custom .hg2026-book-ahead-item:first-child {
border-top: none;
padding-top: 0;
}
.hg2026-tier-custom .hg2026-book-ahead-name {
font-weight: 600;
}
.hg2026-tier-custom .hg2026-book-ahead-note {
color: #4a3d24;
}
.hg2026-tier-custom .hg2026-book-ahead-link {
color: #b08423;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
margin-left: 6px;
}
.hg2026-tier-custom .hg2026-book-ahead-link:hover {
text-decoration: underline;
}
/* "Book ahead" reservation alert — amber callout placed above the day's
activity list. Loud on purpose: missing a reservation deadline is the
#1 way a Hawaiʻi trip falls apart (Hāʻena, Haleakalā sunrise, helicopter).
Same amber accent as the site's existing alert banners and fees badges. */
.hg2026-tier-custom .hg2026-day-resv-alert {
background: #fff8e6;
border-left: 3px solid #d4a72c;
border-radius: 4px;
padding: 10px 14px;
font-size: 14px;
line-height: 1.5;
color: #4a3d24;
margin: 0 0 14px;
}
.hg2026-tier-custom .hg2026-day-resv-alert strong {
color: #1a1a1a;
}
.hg2026-tier-custom .hg2026-day-resv-link {
color: #b08423;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.hg2026-tier-custom .hg2026-day-resv-link:hover {
text-decoration: underline;
}
.hg2026-tier-custom .hg2026-day-empty {
padding: 14px 0;
font-size: 15px;
color: #888;
line-height: 1.55;
}
.hg2026-tier-custom .hg2026-day-empty a { color: var(--hg-brand); }
.hg2026-tier-custom .hg2026-day-activities {
display: flex;
flex-direction: column;
gap: 12px;
}
.hg2026-act {
display: flex;
gap: 10px;
padding: 12px 14px;
background: #fafafa;
border-radius: 6px;
border-left: 3px solid var(--hg-brand);
box-sizing: border-box;
}
.hg2026-act-main { flex: 1; min-width: 0; }
.hg2026-act-name {
font-size: 17px;
font-weight: 600;
margin-bottom: 4px;
color: #1a1a1a;
line-height: 1.35;
}
.hg2026-act-name a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 1px dotted #aaa;
}
.hg2026-act-name a:hover { color: var(--hg-brand); border-bottom-color: var(--hg-brand); }
.hg2026-act-meta {
font-size: 13px;
color: #777;
margin-bottom: 6px;
}
.hg2026-act-tip {
font-size: 14px;
color: #4a3d24;
padding: 8px 12px;
margin-top: 8px;
background: #fff8e6;
border-left: 2px solid #f0c14b;
border-radius: 4px;
line-height: 1.5;
}
.hg2026-act-fees {
font-size: 13px;
color: #6a4810;
background: #fff7e8;
border: 1px solid #f3d896;
border-radius: 4px;
padding: 8px 12px;
margin-top: 8px;
line-height: 1.5;
}
.hg2026-act-fees i { color: #b88719; margin-right: 4px; }
.hg2026-act-fees a { color: #6a4810; text-decoration: underline; }
.hg2026-act-audio {
margin-top: 10px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: #f5f5f5;
padding: 8px 12px;
}
.hg2026-act-audio summary {
cursor: pointer;
font-size: 14px;
color: #444;
font-weight: 500;
list-style: none;
}
.hg2026-act-audio summary::-webkit-details-marker { display: none; }
.hg2026-act-audio summary::before {
content: "▸ ";
color: var(--hg-brand);
font-weight: 700;
}
.hg2026-act-audio[open] summary::before { content: "▾ "; }
.hg2026-act-audio summary i { margin-right: 6px; color: var(--hg-brand); }
.hg2026-act-audio audio {
display: block;
margin-top: 8px;
width: 100%;
}
.hg2026-tier-custom .hg2026-day-dining {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed #ddd;
}
.hg2026-tier-custom .hg2026-day-dining h4 {
font-size: 14px;
color: #555;
text-transform: uppercase;
letter-spacing: 0.8px;
margin: 0 0 8px;
font-weight: 600;
}
.hg2026-din {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 14px;
padding: 8px 0;
font-size: 15px;
}
.hg2026-din-name { font-weight: 600; }
.hg2026-din-name a { color: #1a1a1a; }
.hg2026-din-meta { font-size: 13px; color: #888; }
/* ─── Saved-places grids ─── */
.hg2026-saves-group { margin-top: 22px; }
.hg2026-saves-title {
font-size: 17px;
font-weight: 600;
color: var(--hg-brand);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.hg2026-saves-title i { font-size: 16px; }
.hg2026-saves-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.hg2026-save-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 12px 14px;
box-sizing: border-box;
}
.hg2026-save-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.hg2026-save-name a { color: #1a1a1a; }
.hg2026-save-name a:hover { color: var(--hg-brand); }
.hg2026-save-sub { font-size: 13px; color: #777; margin-bottom: 4px; }
.hg2026-save-desc {
font-size: 14px;
color: #444;
line-height: 1.5;
margin: 6px 0 8px;
}
.hg2026-save-amenities {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0 0 8px;
}
.hg2026-save-amenity {
display: inline-block;
padding: 2px 8px;
background: #f1f4f7;
color: #3a3a3a;
font-size: 11px;
border-radius: 10px;
font-weight: 500;
}
.hg2026-save-rating {
font-size: 13px;
color: #c89d2a;
font-weight: 600;
margin: 4px 0 6px;
}
.hg2026-save-address {
font-size: 13px;
color: #555;
line-height: 1.4;
margin: 4px 0 6px;
}
.hg2026-save-links {
font-size: 13px;
margin: 4px 0 8px;
}
.hg2026-save-link {
color: var(--hg-brand);
text-decoration: none;
}
.hg2026-save-link:hover {
text-decoration: underline;
}
/* Dining row enrichment on day cards — address + hours + actions */
.hg2026-din-address {
font-size: 13px;
color: #555;
line-height: 1.4;
margin: 3px 0;
}
.hg2026-din-hours {
font-size: 13px;
color: #444;
margin: 3px 0;
font-weight: 500;
}
.hg2026-din-links {
font-size: 13px;
margin: 4px 0 0;
}
.hg2026-din-link {
color: var(--hg-brand);
text-decoration: none;
}
.hg2026-din-link:hover {
text-decoration: underline;
}
.hg2026-other-island-note {
margin-top: 18px;
font-size: 14px;
color: #888;
text-align: center;
padding: 10px;
background: #f8f8f8;
border-radius: 4px;
}
.hg2026-other-island-note a { color: var(--hg-brand); }
/* ─── Recommendations ─── */
.hg2026-recs-lede {
font-size: 15px;
color: #555;
margin: 0 0 14px;
line-height: 1.55;
font-style: italic;
}
.hg2026-recs-group { margin-top: 22px; }
.hg2026-recs-group h3 {
font-size: 18px;
color: #1a1a1a;
margin: 0 0 6px;
}
.hg2026-recs-intro {
font-size: 14px;
color: #666;
margin: 0 0 12px;
line-height: 1.55;
}
.hg2026-recs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.hg2026-rec-card {
background: #f9f7f2;
border: 1px dashed #d0c5a8;
border-radius: 6px;
padding: 14px 16px;
box-sizing: border-box;
}
.hg2026-rec-name {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
.hg2026-rec-name a { color: #1a1a1a; }
.hg2026-rec-name a:hover { color: var(--hg-brand); }
.hg2026-rec-meta { font-size: 13px; color: #888; margin-bottom: 6px; }
.hg2026-rec-desc {
font-size: 14px;
color: #555;
line-height: 1.5;
margin: 0;
}
/* ─── Tips + resources ─── */
.hg2026-tips-list,
.hg2026-resources-list {
list-style: disc;
padding-left: 24px;
font-size: 15px;
line-height: 1.65;
color: #333;
}
.hg2026-tips-list li,
.hg2026-resources-list li { margin-bottom: 6px; }
.hg2026-resources-list a { color: var(--hg-brand); }
/* ─── Empty-state steps ─── */
.hg2026-section--empty-steps {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: 28px;
margin: 22px auto;
max-width: 720px;
box-sizing: border-box;
}
.hg2026-empty-steps {
list-style: decimal;
padding-left: 24px;
font-size: 16px;
line-height: 1.65;
color: #333;
}
.hg2026-empty-steps li { margin-bottom: 12px; }
.hg2026-empty-steps a { color: var(--hg-brand); font-weight: 500; }
.hg2026-empty-explore {
margin-top: 24px;
padding-top: 18px;
border-top: 1px dashed #ddd;
text-align: center;
font-size: 15px;
color: #555;
}
.hg2026-empty-link {
color: var(--hg-brand);
text-decoration: none;
font-weight: 500;
padding: 4px 10px;
border: 1px solid var(--hg-brand);
border-radius: 4px;
margin: 0 4px;
display: inline-block;
}
.hg2026-empty-link:hover { background: var(--hg-brand); color: #fff; }
/* ─── Footer note ─── */
.hg2026-section--note { margin-top: 32px; }
.hg2026-footer-note {
background: #f5f1ea;
border-left: 4px solid var(--hg-brand);
padding: 18px 22px;
border-radius: 4px;
}
.hg2026-footer-note h3 {
font-size: 16px;
margin: 0 0 8px;
color: #1a1a1a;
}
.hg2026-footer-note p {
font-size: 14px;
color: #555;
line-height: 1.55;
margin: 0 0 8px;
}
.hg2026-footer-note a { color: var(--hg-brand); }
.hg2026-footer-fineprint {
font-size: 12px !important;
color: #999 !important;
margin-top: 10px !important;
font-style: italic;
}
/* ─── Custom-tier mobile tweaks ─── */
@media (max-width: 600px) {
.hg2026-tier-custom .hg2026-cover--custom .hg2026-cover-meta { font-size: 15px; gap: 12px 18px; }
.hg2026-tier-custom .hg2026-day-card { padding: 14px 16px 16px; }
.hg2026-tier-custom .hg2026-day-num { font-size: 19px; }
.hg2026-tier-custom .hg2026-day-date { font-size: 14px; }
.hg2026-tier-custom .hg2026-day-theme { margin-left: 0; flex-basis: 100%; }
.hg2026-tier-custom .hg2026-act { padding: 10px 12px; }
.hg2026-tier-custom .hg2026-act-name { font-size: 16px; }
.hg2026-tier-custom .hg2026-glance-grid { grid-template-columns: 1fr; }
.hg2026-tier-custom .hg2026-saves-grid,
.hg2026-tier-custom .hg2026-recs-grid { grid-template-columns: 1fr; }
}
/* ============================================================================
* CUSTOM TIER PRINT RULES
* ============================================================================
* Append-only — extends the existing site-wide @media print block at line 1391.
* Custom-tier output should be PDF-ready. Day cards force a page break before
* Day 3 onward (so the cover + Day 1 + Day 2 fit on the front spread of the
* printed/PDF copy). Audio elements become a "Listen at /url" link footnote
* since printed audio doesn't play.
* ==========================================================================*/
@media print {
/* Hero gets a clean white background, brand color reserved for headings */
.hg2026-tier-custom .hg2026-cover--custom {
background: #fff !important;
color: #1a1a1a !important;
padding: 28pt 0 18pt !important;
min-height: auto !important;
border-bottom: 2pt solid var(--hg-brand);
page-break-after: avoid;
}
.hg2026-tier-custom .hg2026-cover--custom .hg2026-cover-eyebrow {
background: var(--hg-brand) !important;
color: #fff !important;
}
.hg2026-tier-custom .hg2026-cover--custom .hg2026-cover-title {
color: #1a1a1a !important;
font-size: 28pt !important;
}
.hg2026-tier-custom .hg2026-cover--custom .hg2026-cover-meta,
.hg2026-tier-custom .hg2026-cover--custom .hg2026-cover-byline {
color: #444 !important;
}
/* Each day card breaks cleanly — no awkward splits across pages */
.hg2026-tier-custom .hg2026-day-card {
page-break-inside: avoid;
break-inside: avoid;
border: 1pt solid #ccc !important;
box-shadow: none !important;
margin-top: 12pt !important;
}
/* Force a page break before Day 3 onward so the cover + first two days fit
on the front spread of the printed/PDF copy. Beyond that, day cards
still avoid mid-card splits via the rule above. */
.hg2026-tier-custom .hg2026-day-card:nth-of-type(n+3) {
page-break-before: always;
}
/* Audio elements don't render in print — replace with a "listen online" pointer */
.hg2026-tier-custom .hg2026-act-audio audio { display: none !important; }
.hg2026-tier-custom .hg2026-act-audio summary {
cursor: default;
pointer-events: none;
}
.hg2026-tier-custom .hg2026-act-audio summary::after {
content: " — listen online at hawaii-guide.com";
font-style: italic;
color: #777;
font-size: 0.85em;
}
.hg2026-tier-custom .hg2026-act-audio summary::before { content: ""; }
/* Force open in print so readers see the audio summary */
.hg2026-tier-custom .hg2026-act-audio[open],
.hg2026-tier-custom .hg2026-act-audio { display: block; }
/* Glance + lodging cards don't need shadows or thick borders in print */
.hg2026-tier-custom .hg2026-glance-card,
.hg2026-tier-custom .hg2026-lodging-card,
.hg2026-tier-custom .hg2026-act,
.hg2026-tier-custom .hg2026-save-card,
.hg2026-tier-custom .hg2026-rec-card {
box-shadow: none !important;
background: #fff !important;
border: 1pt solid #ccc !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Empty-state page is shown only on screen; print should not include it */
.hg2026-tier-custom .hg2026-cover--empty,
.hg2026-tier-custom .hg2026-section--empty-steps {
display: none;
}
/* CTAs inside the custom tier never render in print */
.hg2026-tier-custom .hg2026-print-fab { display: none !important; }
/* Multi-island action bar (the "Generate your X itinerary →" prompt
above and below the body) is screen-only — readers can't click an
itinerary CTA from the printed PDF, so it's noise there. */
.hg2026-action-bar { display: none !important; }
}
/* ─── Multi-island visual cues ─── */
/* Per-day island marker rendered above each day card on multi-island
trips. Single-island trips never emit this marker. */
.hg2026-day-island-marker {
display: flex;
align-items: center;
gap: 8px;
margin: 18px 0 6px;
padding: 4px 0;
font-size: 13px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.04em;
border-top: 1px dashed rgba(0, 0, 0, 0.12);
padding-top: 12px;
}
.hg2026-day-island-marker:first-of-type { border-top: 0; padding-top: 0; }
.hg2026-day-island-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--hg-brand);
flex: 0 0 10px;
}
.hg2026-day-island-name { color: var(--hg-brand); }
/* Island label above each lodging card on multi-island trips. */
.hg2026-lodging-island-label {
font-size: 12px;
font-weight: 700;
color: #888;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.hg2026-lodging-card--missing { background: #fafafa; border-style: dashed; }
/* Per-island grouping inside Saved Places / Recommendations / Tips /
Resources on multi-island trips. */
.hg2026-saves-island-block,
.hg2026-recs-island-block,
.hg2026-tips-island-block,
.hg2026-resources-island-block {
margin-bottom: 24px;
}
.hg2026-saves-island-heading,
.hg2026-recs-island-heading,
.hg2026-tips-island-heading,
.hg2026-resources-island-heading {
font-size: 22px;
font-weight: 700;
margin: 18px 0 8px;
padding-bottom: 6px;
border-bottom: 2px solid var(--hg-brand);
color: #222;
}
/* ─── Drive-time annotation between activities ─── */
.hg2026-drivetime {
/* Empty state: zero height, no layout shift while fetch is in flight */
font-size: 13px;
color: #777;
line-height: 1.5;
padding: 0;
margin: 0;
transition: padding 0.18s ease;
}
.hg2026-drivetime-empty { display: none; }
/* Once filled by the bind step, the row gets visible padding + a leading
line-glyph that connects it to the surrounding activity rows. */
.hg2026-drivetime--filled {
padding: 6px 0 6px 22px;
margin: 4px 0 4px 12px;
border-left: 2px dashed #d0c5a8;
background: linear-gradient(90deg, transparent 0, transparent 6px, rgba(0,0,0,0) 6px);
color: #6a5a35;
font-size: 13px;
}
.hg2026-drivetime--filled i.fa-car {
color: var(--hg-brand);
margin-right: 6px;
font-size: 14px;
}
.hg2026-drivetime-ctx {
color: #888;
font-style: italic;
margin-right: 4px;
}
.hg2026-drivetime-dist {
color: #888;
font-weight: 400;
}
@media print {
/* In print we want the drive-time annotation visible AND legible —
skip the dashed brand-colored border (often colors don't print well)
and keep the indent + plain monochrome text. */
.hg2026-tier-custom .hg2026-drivetime--filled {
border-left: 1pt solid #999 !important;
color: #444 !important;
background: transparent !important;
padding: 4pt 0 4pt 14pt !important;
margin: 3pt 0 3pt 8pt !important;
}
.hg2026-tier-custom .hg2026-drivetime--filled i.fa-car { color: #444 !important; }
/* Empty (un-filled) drivetime placeholders should never print as a stub */
.hg2026-tier-custom .hg2026-drivetime:not(.hg2026-drivetime--filled) { display: none !important; }
}
/* ─── Beta callout in the footer note ─── */
.hg2026-footer-beta {
margin-top: 14px !important;
padding: 12px 14px;
background: #eef4fb;
border-left: 3px solid #1866B4;
border-radius: 4px;
font-size: 13px;
color: #1d3a5e;
line-height: 1.55;
}
.hg2026-footer-beta strong { color: #0d2540; }
.hg2026-footer-beta a { color: #1866B4; font-weight: 600; }
@media print {
/* In print, the beta callout becomes a discreet monochrome footnote so
it doesn't compete visually with the content on the printed/PDF copy. */
.hg2026-tier-custom .hg2026-footer-beta {
background: transparent !important;
border-left: 1pt solid #888 !important;
color: #555 !important;
font-size: 9pt !important;
padding: 6pt 8pt !important;
}
}
/* ─── Tip + resource group titles (fix #1: nested YAML schema flatten) ─── */
.hg2026-tier-custom .hg2026-tips-intro,
.hg2026-tier-custom .hg2026-resources-intro {
font-size: 15px;
color: #555;
line-height: 1.6;
margin: 0 0 14px;
font-style: italic;
}
.hg2026-tier-custom .hg2026-tips-group-title,
.hg2026-tier-custom .hg2026-resources-group-title {
font-size: 15px;
font-weight: 600;
color: var(--hg-brand);
margin: 16px 0 6px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.hg2026-tier-custom .hg2026-tips-group-title:first-of-type,
.hg2026-tier-custom .hg2026-resources-group-title:first-of-type {
margin-top: 8px;
}
.hg2026-tier-custom .hg2026-resource-contact {
color: #444;
font-weight: 500;
font-family: 'Courier New', monospace;
font-size: 0.92em;
}
.hg2026-tier-custom .hg2026-resource-addr {
color: #888;
font-style: italic;
font-size: 0.92em;
}
/* ============================================================================
* CUSTOM TIER PHOTOS + MAPS (Phase 2)
* ============================================================================
* Thumbnails on day-by-day activity rows (left-of-text, compact), saved-place
* cards (full-width above name, magazine-style), recommendation cards (same).
* Plus the overview island map at the top of the Day by Day section.
*
* All scoped under .hg2026-tier-custom — no leak into paid tiers.
* ==========================================================================*/
/* ─── Activity row thumbnail (left-of-text) ─── */
.hg2026-tier-custom .hg2026-act--has-thumb {
align-items: flex-start;
}
.hg2026-tier-custom .hg2026-act-thumb {
flex-shrink: 0;
width: 140px;
height: 100px;
border-radius: 6px;
overflow: hidden;
margin-right: 14px;
background: #f0f0f0;
box-sizing: border-box;
}
.hg2026-tier-custom .hg2026-act-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Mobile: shrink the activity thumbnail, stack if very narrow */
@media (max-width: 600px) {
.hg2026-tier-custom .hg2026-act-thumb {
width: 100px;
height: 75px;
margin-right: 10px;
}
}
@media (max-width: 420px) {
.hg2026-tier-custom .hg2026-act--has-thumb {
flex-direction: column;
}
.hg2026-tier-custom .hg2026-act-thumb {
width: 100%;
height: 140px;
margin-right: 0;
margin-bottom: 10px;
}
}
/* ─── Saved-place card thumbnail (full-width above) ─── */
.hg2026-tier-custom .hg2026-save-card--has-thumb {
padding: 0;
overflow: hidden;
}
.hg2026-tier-custom .hg2026-save-thumb {
width: 100%;
height: 140px;
background: #f0f0f0;
overflow: hidden;
}
.hg2026-tier-custom .hg2026-save-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hg2026-tier-custom .hg2026-save-card--has-thumb .hg2026-save-body {
padding: 12px 14px;
}
/* ─── Recommendation card thumbnail (full-width above) ─── */
.hg2026-tier-custom .hg2026-rec-card--has-thumb {
padding: 0;
overflow: hidden;
border-style: solid; /* override the dashed look when there's a photo */
border-color: #e5e5e5;
}
.hg2026-tier-custom .hg2026-rec-thumb {
width: 100%;
height: 160px;
background: #f0f0f0;
overflow: hidden;
}
.hg2026-tier-custom .hg2026-rec-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hg2026-tier-custom .hg2026-rec-card--has-thumb .hg2026-rec-body {
padding: 14px 16px;
}
/* ─── Day by Day overview map ─── */
.hg2026-tier-custom .hg2026-day-overview-map {
margin: 14px 0 22px;
padding: 0;
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.hg2026-tier-custom .hg2026-day-overview-map img {
width: 100%;
height: auto;
display: block;
}
.hg2026-tier-custom .hg2026-day-overview-map figcaption {
padding: 10px 14px;
font-size: 13px;
color: #666;
font-style: italic;
line-height: 1.5;
background: #fafafa;
border-top: 1px solid #eee;
}
/* ─── Print rules for photos + map ─── */
@media print {
/* Activity thumbnails — slightly smaller in print so they don't dominate
the page. Keep them visible because the photo is the whole point. */
.hg2026-tier-custom .hg2026-act-thumb {
width: 110pt !important;
height: 80pt !important;
margin-right: 10pt !important;
}
/* Saved-place + recommendation thumbnails — keep but cap height */
.hg2026-tier-custom .hg2026-save-thumb,
.hg2026-tier-custom .hg2026-rec-thumb {
height: 110pt !important;
}
/* Overview map prints clean — no caption-background, no fancy borders */
.hg2026-tier-custom .hg2026-day-overview-map {
border: 1pt solid #888 !important;
page-break-inside: avoid;
}
.hg2026-tier-custom .hg2026-day-overview-map figcaption {
background: transparent !important;
color: #555 !important;
padding: 6pt 8pt !important;
}
/* Force background images / colors to print on supported browsers
(Chrome, Safari) so the map isn't blank in PDF output. */
.hg2026-tier-custom .hg2026-act-thumb,
.hg2026-tier-custom .hg2026-save-thumb,
.hg2026-tier-custom .hg2026-rec-thumb,
.hg2026-tier-custom .hg2026-day-overview-map {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ─── Per-day Leaflet map (top of each day card) ──────────────────────────
Renders inside `.hg2026-day-card` between the header and the activity list.
itinerary-maps-v1.js auto-discovers `.itin-map[data-stops]` and writes a
child `.itin-map-canvas` div which holds the actual Leaflet instance.
Wrapper border + radius live on `.hg2026-day-map` so the map's interactive
tiles fill the box edge-to-edge without a doubled corner. */
.hg2026-tier-custom .hg2026-day-map {
margin: 4px 0 16px;
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
background: #f0f0f0;
}
.hg2026-tier-custom .hg2026-day-map .itin-map,
.hg2026-tier-custom .hg2026-day-map .itin-map-canvas {
width: 100%;
height: 220px;
display: block;
}
@media (max-width: 600px) {
.hg2026-tier-custom .hg2026-day-map .itin-map,
.hg2026-tier-custom .hg2026-day-map .itin-map-canvas {
height: 180px;
}
}
/* Hide the map in print — Leaflet tiles are pulled async from a tile server,
so they're rarely loaded by the time the print dialog renders, and even
when they are the rasterized tiles look noisy in PDF. The static
per-island beach map (`.hg2026-day-overview-map`) is the print-friendly
replacement and is always positioned earlier in the day-by-day section. */
@media print {
.hg2026-tier-custom .hg2026-day-map { display: none !important; }
}
/* ─── Activity thumbnail — clickable + visual pop on hover ───────────────
When the thumbnail is wrapped in (activity has a URL), give it a
subtle hover lift so readers know it's tappable. Keeps the same footprint
in print (the @media print block earlier already overrides size). */
.hg2026-tier-custom a.hg2026-act-thumb {
display: block;
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hg2026-tier-custom a.hg2026-act-thumb img {
transition: transform 0.4s ease;
}
.hg2026-tier-custom a.hg2026-act-thumb:hover,
.hg2026-tier-custom a.hg2026-act-thumb:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
outline: none;
}
.hg2026-tier-custom a.hg2026-act-thumb:hover img,
.hg2026-tier-custom a.hg2026-act-thumb:focus-visible img {
transform: scale(1.04);
}
/* Inline restaurant link in dining row — keep it visually obvious that the
text is tappable (matches how restaurant-link.html appears elsewhere on
the site). The dotted underline + brand color reads as "more info inside"
rather than "external navigation." */
.hg2026-tier-custom .hg2026-din-name a.hg-restaurant-link {
border-bottom: 1px dotted #1866B4;
text-decoration: none;
color: #1866B4;
cursor: pointer;
}
.hg2026-tier-custom .hg2026-din-name a.hg-restaurant-link:hover,
.hg2026-tier-custom .hg2026-din-name a.hg-restaurant-link:focus-visible {
border-bottom-style: solid;
outline: none;
}
@media print {
/* Print: drop the brand-color treatment so dining rows match the rest of
the printed plan visually. Modal-only affordances don't translate to
paper. */
.hg2026-tier-custom .hg2026-din-name a.hg-restaurant-link {
color: inherit !important;
border-bottom: none !important;
}
}
/* ─── Day pill — white text on island-brand pill ─────────────────────────
The base `.hg2026-day-num` rule paints a dark-gray pill with white text;
the custom-tier override at line ~1818 was bumping the text color to
var(--hg-brand), which left brand-green text on dark-gray (low contrast,
reads wrong on screen and ghostly in print). Re-establish the contract:
white text inside, brand-color background. Padding bumped slightly to
look proportionate at the larger 22px font size. */
.hg2026-tier-custom .hg2026-day-num {
color: #fff !important;
background: var(--hg-brand) !important;
padding: 6px 16px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
@media print {
.hg2026-tier-custom .hg2026-day-num {
color: #fff !important;
background: var(--hg-brand) !important;
font-size: 16pt !important;
padding: 4pt 12pt !important;
}
/* Anchor the day header to the top of every day page so "Day N" is the
first thing the reader sees on each printed sheet. */
.hg2026-tier-custom .hg2026-day-header {
border-bottom: 1pt solid #444 !important;
padding-bottom: 8pt !important;
margin-bottom: 10pt !important;
page-break-after: avoid;
}
}
/* ─── Per-day map sizing — narrower + tighter zoom ────────────────────────
Originally rendered full-width at 220px tall, which was mostly ocean.
Two changes: shrink the box (max-width 65% desktop, full on mobile;
height down to 160px / 140px) and bump the fitBounds maxZoom in
itinerary-maps-v1.js so the markers fill the frame instead of floating
in a wide-context view. */
/* Maps are full-width inside the day card and tall enough to actually use.
Earlier iteration shrank these to 65% width / 160px tall to "save space",
but the result was a postage-stamp map where markers clustered into an
unreadable dot. Readers need real estate to pinch-zoom and read road
context. 320px desktop / 240px mobile + full width gives ~3x the canvas
without dominating the day card. */
.hg2026-tier-custom .hg2026-day-map {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.hg2026-tier-custom .hg2026-day-map .itin-map,
.hg2026-tier-custom .hg2026-day-map .itin-map-canvas {
height: 320px;
}
@media (max-width: 600px) {
.hg2026-tier-custom .hg2026-day-map .itin-map,
.hg2026-tier-custom .hg2026-day-map .itin-map-canvas {
height: 240px;
}
}
/* ─── Print: hide page-level chrome that doesn't belong on paper ─────────
/my-trip/guidebook wraps the viewer in `.itin-hero` (logo + h1 + intro
paragraph + Beta badge), a back-button row, and an `.hg-custom-tip-strip`
footer. All three are screen-only affordances and were bleeding into the
PDF cover. Scoping with `:has()` keeps these rules from hiding back
buttons on every other page on the site. */
@media print {
body:has([data-hg2026-viewer][data-tier="custom"]) .itin-hero,
body:has([data-hg2026-viewer][data-tier="custom"]) .hg-custom-tip-strip,
body:has([data-hg2026-viewer][data-tier="custom"]) .wrapper-slim:has(.btn-hawaii.btn-sm) {
display: none !important;
}
/* Cover ends a page; next section starts fresh. The previous rule was
`page-break-after: avoid` (bug — it glued the cover to whatever came
next, which is what produced the Day 12 + chrome bleed-through on
page 1 of the printed PDF). */
.hg2026-tier-custom .hg2026-cover--custom {
page-break-after: always !important;
break-after: page !important;
}
/* Force every day card onto its own page. The old `:nth-of-type(n+3)`
rule assumed cover + Day 1 + Day 2 fit on the front spread, but the
trip-at-a-glance + lodging + static beach map fill that spread by
themselves. Each day on its own page is cleaner and stops day-card
content from getting orphaned at page edges. */
.hg2026-tier-custom .hg2026-day-card {
page-break-before: always !important;
}
/* Whippoorwill audio — the player is hidden by the existing
`audio { display: none }` rule, but the `` summary row
("Listen — Honu · 1 min 9 sec") still rasterizes as a wide pill on
every activity row. On paper it's noise. Hide the entire block. */
.hg2026-tier-custom .hg2026-act-audio { display: none !important; }
}
/* ─── Regenerate button (stacked ABOVE the Print FAB) ────────────────────
Floating affordance the reader can tap when they've changed My Trip in
another tab and the guidebook is showing stale state. Stacked above the
Print FAB at the same right edge — earlier iteration placed it to the
LEFT of the FAB which overlapped on narrower mobile widths. Vertical
stack keeps both visible at any breakpoint. */
.hg-custom-regen-btn {
position: fixed;
bottom: 80px;
right: 24px;
z-index: 9998;
padding: 10px 16px;
background: #fff;
color: #1866B4;
border: 2px solid #1866B4;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.18s ease, box-shadow 0.18s ease;
font-family: inherit;
}
.hg-custom-regen-btn:hover,
.hg-custom-regen-btn:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
outline: none;
}
.hg-custom-regen-btn i { margin-right: 6px; }
.hg-custom-regen-btn[data-busy="1"] { opacity: 0.7; cursor: wait; }
@media (max-width: 600px) {
.hg-custom-regen-btn {
bottom: 72px;
padding: 8px 12px;
font-size: 12px;
}
}
@media print {
.hg-custom-regen-btn { display: none !important; }
}