/* ============================================ CRUISE DETAIL — Shared structural styles Themed via [data-theme="..."] on ============================================ */ /* Theme defaults (Backroads). Override per-theme below. */ [data-cruise-page] { --c-accent: #E8C547; --c-accent-deep: #c4a235; --c-accent-cta: #9B2C2C; --c-accent-cta-deep: #742020; --c-cream: #FDF6E3; --c-warm-white: #FAF5EB; --c-dark: #2C1810; --c-dark-deeper: #1a0f08; --c-dark-warm: #3a1e0a; --c-medium: #5a3a1a; --c-text-dark: #3a2a1a; --c-text-medium: #6b5b4a; --c-supporting: #2D5016; --c-soft: #e8d5b0; --c-muted-light: #c4b89a; --c-muted-mid: #d4c8b0; --c-muted-dim: #b0a58e; --c-supporting-text: #d4e8c4; --f-headline: 'Luckiest Guy', cursive; --f-script: 'Satisfy', cursive; --f-typewriter: 'Special Elite', cursive; --f-body: 'Open Sans', system-ui, sans-serif; } /* ===== Theme: Backroads ===== */ [data-cruise-page][data-theme="backroads"] { /* defaults already match */ } /* ===== Theme: Original Land Cruise (tropical) ===== */ [data-cruise-page][data-theme="original"] { --cruise-hero-bg: url('../images/optimized/cruise-photos/hero-bg-1600.jpg'); --c-accent: #FFD23F; --c-accent-deep: #E8B82D; --c-accent-cta: #1F4E8C; --c-accent-cta-deep: #143866; --c-cream: #FFF8E7; --c-warm-white: #FFFCF0; --c-dark: #0B1E47; --c-dark-deeper: #061334; --c-dark-warm: #102A5C; --c-medium: #3A6FB5; --c-text-dark: #0B1E47; --c-text-medium: #4d5d80; --c-supporting: #2C8C7E; --c-soft: #F5E6B8; --c-muted-light: #b9c8e0; --c-muted-mid: #d5dded; --c-muted-dim: #92a3c0; --c-supporting-text: #b9e5dc; --f-headline: 'Luckiest Guy', cursive; --f-script: 'Satisfy', cursive; --f-typewriter: 'Special Elite', cursive; } /* ===== Theme: Gal's Getaway ===== */ [data-cruise-page][data-theme="gals"] { --c-accent: #F5A6C9; --c-accent-deep: #E07AAB; --c-accent-cta: #B8418A; --c-accent-cta-deep: #8B2A6B; --c-cream: #FFF5F8; --c-warm-white: #FFFAFC; --c-dark: #3A1839; --c-dark-deeper: #240F25; --c-dark-warm: #4A1F46; --c-medium: #7E3D74; --c-text-dark: #3A1839; --c-text-medium: #75556e; --c-supporting: #4FB3A3; --c-soft: #F8DDE6; --c-muted-light: #d8b8d0; --c-muted-mid: #e8d2e0; --c-muted-dim: #b899ad; --c-supporting-text: #d4f0eb; --f-headline: 'Luckiest Guy', cursive; --f-script: 'Satisfy', cursive; --f-typewriter: 'Special Elite', cursive; } /* ============================================ GLOBAL ============================================ */ [data-cruise-page] { background: var(--c-cream); color: var(--c-text-dark); } [data-cruise-page] .cruise-section-title { font-family: var(--f-headline); font-size: 36px; color: var(--c-dark); text-align: center; margin-bottom: 56px; letter-spacing: 1px; } /* ============================================ HERO ============================================ */ .cruise-hero-logo-area { background: var(--cruise-hero-bg, url('../images/cruises/backroads/optimized/scenic_background-1600.jpg')) center / cover no-repeat; text-align: center; position: relative; padding: 40px 24px 24px; } .cruise-hero-badge { position: absolute; top: 92px; left: 20px; width: 130px; z-index: 2; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); } .cruise-hero-logo { width: 100%; max-width: 700px; max-height: min(52vh, 467px); height: auto; object-fit: contain; display: block; margin: 0 auto; position: relative; z-index: 1; } .cruise-presented-by { background: var(--c-dark); text-align: center; padding: 14px 24px; border-top: 2px solid color-mix(in srgb, var(--c-accent) 40%, transparent); } .cruise-presented-by span { font-family: var(--f-typewriter); font-size: 15px; color: var(--c-accent-deep); letter-spacing: 3px; text-transform: uppercase; } .cruise-hero-cta { background: linear-gradient(175deg, var(--c-dark) 0%, var(--c-dark-deeper) 70%, var(--c-dark-warm) 100%); text-align: center; padding: 48px 24px 52px; position: relative; } .cruise-hero-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c-accent) 7%, transparent) 0%, transparent 65%); pointer-events: none; } .cruise-hero-dates { font-family: var(--f-headline); font-size: 52px; color: var(--c-accent); letter-spacing: 3px; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .cruise-hero-subtitle { font-family: var(--f-typewriter); font-size: 24px; color: var(--c-cream); letter-spacing: 2px; margin-bottom: 32px; line-height: 1.4; } .btn-cruise-primary { display: inline-block; background: var(--c-accent-cta); color: #fff; font-family: var(--f-headline); font-size: 22px; letter-spacing: 2px; padding: 18px 52px; border-radius: 999px; text-decoration: none; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 24px rgba(0,0,0,0.35); } .btn-cruise-primary:hover { background: var(--c-accent-cta-deep); transform: translateY(-2px); } .cruise-hero-location { font-size: 13px; color: var(--c-accent-deep); margin-top: 20px; letter-spacing: 3px; text-transform: uppercase; } /* ============================================ PITCH ============================================ */ .cruise-pitch { background: var(--c-warm-white); position: relative; overflow: hidden; } .cruise-pitch-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } .cruise-pitch-photo { position: relative; overflow: hidden; } .cruise-pitch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .cruise-pitch-content { padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; } .cruise-pitch p { font-size: 17px; line-height: 1.8; color: var(--c-text-dark); margin-bottom: 18px; } .cruise-pitch p.cruise-pitch-lead { font-family: var(--f-headline); font-size: 36px; color: var(--c-accent-cta); margin-bottom: 28px; line-height: 1.25; } .cruise-pitch p.closer { font-family: var(--f-headline); font-size: 22px; color: var(--c-dark); margin-top: 28px; line-height: 1.35; padding: 22px 28px; border-left: 4px solid var(--c-accent-cta); background: color-mix(in srgb, var(--c-accent-cta) 5%, transparent); border-radius: 0 8px 8px 0; } /* ============================================ FEATURES (icon row) ============================================ */ .cruise-features { background: var(--c-soft); padding: 52px 24px; text-align: center; } .cruise-features .cruise-section-title { margin-bottom: 12px; color: var(--c-dark); } .cruise-features-subtitle { font-size: 18px; color: var(--c-medium); max-width: 560px; margin: 0 auto 32px; line-height: 1.6; } .cruise-features-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cruise-feature { text-align: center; } .cruise-feature img { width: 180px; height: 180px; object-fit: contain; margin: 0 auto 14px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); transition: transform 0.2s; } .cruise-feature:hover img { transform: scale(1.05); } .cruise-feature-label { font-family: var(--f-headline); font-size: 17px; color: var(--c-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .cruise-feature p { font-size: 14px; line-height: 1.6; color: var(--c-medium); max-width: 180px; margin: 0 auto; } /* ============================================ ITINERARY ============================================ */ .cruise-itinerary { background: var(--c-dark); padding: 90px 24px; } .cruise-itinerary .cruise-section-title { color: var(--c-accent); } .cruise-itinerary-inner { max-width: 860px; margin: 0 auto; } .cruise-steps { position: relative; display: flex; flex-direction: column; gap: 24px; } .cruise-steps::before { content: ''; position: absolute; left: 54px; top: 80px; bottom: 80px; width: 2px; background: linear-gradient(to bottom, var(--c-accent), color-mix(in srgb, var(--c-accent) 10%, transparent)); border-radius: 2px; } .cruise-step { display: flex; align-items: flex-start; position: relative; background: rgba(255,255,255,0.05); border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent); border-radius: 12px; overflow: hidden; } .cruise-step-marker { flex-shrink: 0; width: 108px; background: var(--c-accent-cta); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px; align-self: stretch; } .cruise-step-marker-day { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 4px; } .cruise-step-marker-num { font-family: var(--f-headline); font-size: 42px; color: #fff; line-height: 1; } .cruise-step-body { display: flex; flex: 1; align-items: stretch; } .cruise-step-content { flex: 1; padding: 24px 28px; } .cruise-step-content h3 { font-family: var(--f-headline); font-size: 20px; color: var(--c-accent); margin-bottom: 10px; letter-spacing: 1px; } .cruise-step-content p { font-size: 15px; line-height: 1.8; color: var(--c-muted-light); } .cruise-step-photo { flex-shrink: 0; width: 200px; overflow: hidden; } .cruise-step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.3s; } .cruise-step:hover .cruise-step-photo img { opacity: 1; } /* ============================================ WHO IT'S FOR ============================================ */ .cruise-who { background: var(--c-supporting); padding: 90px 24px; text-align: center; position: relative; overflow: hidden; } .cruise-who::before { content: '"'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--f-headline); font-size: 220px; color: rgba(255,255,255,0.04); line-height: 1; pointer-events: none; } .cruise-who-inner { max-width: 720px; margin: 0 auto; position: relative; } .cruise-who h2 { font-family: var(--f-headline); font-size: 34px; color: var(--c-accent); margin-bottom: 28px; letter-spacing: 1px; line-height: 1.2; } .cruise-who p { font-size: 19px; line-height: 1.85; color: var(--c-supporting-text); } /* ============================================ WHAT'S INCLUDED ============================================ */ .cruise-included { background: var(--c-dark); padding: 72px 40px; } .cruise-included-inner { max-width: 860px; margin: 0 auto; } .cruise-included-header { text-align: center; margin-bottom: 48px; } .cruise-included-header .cruise-section-title { color: var(--c-accent); font-size: 48px; margin-bottom: 10px; } .cruise-included-badge { display: inline-block; font-family: var(--f-headline); font-size: 20px; color: #fff; background: var(--c-accent-cta); padding: 10px 32px; border-radius: 40px; letter-spacing: 1.5px; box-shadow: 0 4px 16px color-mix(in srgb, var(--c-accent-cta) 35%, transparent); } .cruise-included-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .cruise-highlight { display: flex; align-items: center; gap: 22px; background: color-mix(in srgb, var(--c-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent); border-radius: 14px; padding: 28px 28px; } .cruise-highlight-icon { flex-shrink: 0; width: 56px; height: 56px; color: var(--c-accent); } .cruise-highlight h3 { font-family: var(--f-headline); font-size: 22px; color: var(--c-accent); letter-spacing: 0.5px; margin-bottom: 6px; line-height: 1.2; } .cruise-highlight p { font-size: 15px; line-height: 1.55; color: var(--c-muted-mid); } .cruise-highlight .meal-counts { display: flex; gap: 20px; margin-top: 10px; } .cruise-highlight .meal-chip { display: flex; align-items: center; gap: 6px; } .cruise-highlight .meal-chip-num { font-family: var(--f-headline); font-size: 28px; color: var(--c-accent); line-height: 1; } .cruise-highlight .meal-chip-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted-light); line-height: 1.2; } .cruise-included-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .cruise-row { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 8%, transparent); } .cruise-row:nth-last-child(-n+2) { border-bottom: none; } .cruise-row-icon { flex-shrink: 0; width: 32px; height: 32px; color: var(--c-accent); opacity: 0.7; } .cruise-row h4 { font-family: var(--f-headline); font-size: 15px; color: var(--c-accent); letter-spacing: 0.5px; margin-bottom: 2px; } .cruise-row p { font-size: 13px; line-height: 1.5; color: var(--c-muted-dim); } /* ============================================ SAILINGS (BOARDING-PASS CARDS) ============================================ */ .sailings { background: linear-gradient(170deg, #FFFCF0 0%, #FFF8E7 100%); padding: 90px 24px; position: relative; overflow: hidden; } .sailings::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 20%, rgba(255,210,63,0.15) 0%, transparent 35%), radial-gradient(circle at 90% 80%, rgba(31,78,140,0.1) 0%, transparent 40%); pointer-events: none; } .sailings-inner { max-width: 1180px; margin: 0 auto; position: relative; } .sailings .cruise-section-title { color: var(--c-dark); margin-bottom: 6px; } .sailings-subtitle { text-align: center; font-family: var(--f-typewriter); font-size: 16px; color: var(--c-text-medium); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 56px; } .sailings-year-block { margin-bottom: 56px; } .sailings-year-block:last-child { margin-bottom: 0; } .sailings-year-header { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; } .sailings-year-header::before, .sailings-year-header::after { content: ''; flex: 1; height: 2px; background: linear-gradient(to right, transparent, rgba(31,78,140,0.25), transparent); } .sailings-year-label { font-family: var(--f-headline); font-size: 56px; color: var(--c-accent-cta); letter-spacing: 4px; line-height: 1; text-shadow: 0 2px 0 var(--c-accent); } .sailings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; } .sailings-grid:has(> .sail-ticket:only-child) { grid-template-columns: minmax(260px, 320px); justify-content: center; } .sail-ticket { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 6px 24px rgba(11,30,71,0.10), 0 2px 6px rgba(11,30,71,0.06); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid rgba(255,210,63,0.55); } .sail-ticket:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(11,30,71,0.16), 0 4px 10px rgba(11,30,71,0.08); } .sail-ticket-stub { background: linear-gradient(165deg, var(--c-accent-cta) 0%, var(--c-accent-cta-deep) 100%); color: #fff; padding: 14px 20px 12px; text-align: center; position: relative; } .sail-ticket-stub::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 16px; background: radial-gradient(circle at 8px 8px, transparent 6px, #fff 6.5px) 0 0 / 16px 16px repeat-x; } .sail-ticket-eyebrow { font-family: var(--f-typewriter); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.75); } .sail-ticket-title { font-family: var(--f-headline); font-size: 18px; color: var(--c-accent); letter-spacing: 1px; margin-top: 4px; } .sail-ticket-body { padding: 30px 20px 24px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .sail-ticket-month { font-family: var(--f-headline); font-size: 32px; color: var(--c-dark); letter-spacing: 2px; line-height: 1; } .sail-ticket-days { font-family: var(--f-headline); font-size: 56px; color: var(--c-accent-cta); letter-spacing: 1px; line-height: 1; margin-top: 10px; } .sail-ticket-meta { font-family: var(--f-typewriter); font-size: 12px; color: var(--c-text-medium); letter-spacing: 2px; text-transform: uppercase; margin-top: 12px; padding-top: 14px; border-top: 1px dashed rgba(11,30,71,0.18); } .sail-ticket-btn { display: inline-block; background: var(--c-accent); color: var(--c-dark); font-family: var(--f-headline); font-size: 16px; letter-spacing: 1.5px; padding: 12px 24px; border-radius: 999px; text-decoration: none; transition: background 0.2s, transform 0.15s; box-shadow: 0 3px 12px rgba(255,210,63,0.45); } .sail-ticket-btn:hover { background: var(--c-accent-deep); transform: translateY(-2px); } @media (max-width: 640px) { .sailings { padding: 60px 16px; } .sailings-year-label { font-size: 42px; } .sailings-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .sail-ticket-days { font-size: 44px; } .sail-ticket-month { font-size: 26px; } } /* ============================================ CLOSING CTA ============================================ */ .cruise-cta-final { background: linear-gradient(160deg, var(--c-accent-cta) 0%, var(--c-accent-cta-deep) 100%); padding: 90px 24px; text-align: center; } .cruise-cta-final h2 { font-family: var(--f-headline); font-size: 40px; color: #fff; margin-bottom: 18px; letter-spacing: 1px; line-height: 1.15; } .cruise-cta-final .sub { font-size: 19px; color: rgba(255,255,255,0.85); margin: 0 auto 40px; max-width: 480px; line-height: 1.6; } .btn-cruise-gold { display: inline-block; background: var(--c-accent); color: var(--c-dark); font-family: var(--f-headline); font-size: 24px; letter-spacing: 2px; padding: 20px 60px; border-radius: 999px; text-decoration: none; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 24px rgba(0,0,0,0.3); } .btn-cruise-gold:hover { background: var(--c-accent-deep); transform: translateY(-2px); } .cruise-contact-line { font-size: 15px; color: rgba(255,255,255,0.6); margin-top: 28px; letter-spacing: 0.5px; } .cruise-contact-line strong { color: rgba(255,255,255,0.85); } .cruise-contact-line a { color: rgba(255,255,255,0.75); text-decoration: underline; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 960px) { .cruise-pitch-split { grid-template-columns: 1fr; } .cruise-pitch-photo { height: auto; } .cruise-pitch-photo img { height: auto; object-fit: contain; } .cruise-pitch-content { padding: 40px 28px; } .cruise-hero-badge { top: 76px; width: 100px; } } @media (max-width: 768px) { .cruise-steps::before { display: none; } .cruise-step { flex-direction: column; } .cruise-step-marker { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px 20px; gap: 10px; align-self: auto; } .cruise-step-marker-day { margin-bottom: 0; font-size: 10px; } .cruise-step-marker-num { font-size: 28px; } .cruise-step-body { flex-direction: column; } .cruise-step-photo { width: 100%; height: 200px; flex-shrink: 0; } .cruise-step-content { padding: 20px 20px; } .cruise-included-highlights { grid-template-columns: 1fr; } .cruise-included-rows { grid-template-columns: 1fr; } .cruise-row:last-child { border-bottom: none; } .cruise-row:nth-last-child(2) { border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 8%, transparent); } } @media (max-width: 640px) { [data-cruise-page] .cruise-section-title { font-size: 28px; margin-bottom: 28px; } .cruise-hero-badge { display: none; } .cruise-pitch-content { padding: 32px 20px; } .cruise-pitch p { font-size: 16px; } .cruise-pitch p.cruise-pitch-lead { font-size: 22px; } .cruise-pitch p.closer { font-size: 18px; padding: 16px 18px; } .cruise-features { padding: 52px 16px; } .cruise-features-subtitle { font-size: 15px; margin-bottom: 28px; } .cruise-features-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } .cruise-feature img { width: 140px; height: 140px; } .cruise-feature-label { font-size: 14px; } .cruise-feature p { font-size: 13px; } .cruise-itinerary-inner { padding: 0 4px; } .cruise-step-content h3 { font-size: 16px; } .cruise-step-content p { font-size: 14px; } .cruise-step-photo { height: 160px; } .cruise-steps { gap: 16px; } .cruise-included { padding: 56px 20px; } .cruise-included-header .cruise-section-title { font-size: 32px; } .cruise-included-badge { font-size: 16px; padding: 8px 24px; } .cruise-highlight { padding: 22px 20px; gap: 16px; } .cruise-highlight h3 { font-size: 18px; } .cruise-highlight-icon { width: 44px; height: 44px; } .cruise-row { padding: 14px 16px; } .cruise-hero-dates { font-size: 40px; } .cruise-hero-subtitle { font-size: 18px; } .cruise-who { padding: 60px 20px; } .cruise-who h2 { font-size: 24px; } .cruise-who p { font-size: 16px; } .cruise-cta-final { padding: 72px 20px; } .cruise-cta-final h2 { font-size: 28px; } }