/* ============================================================ ASIA CRUISE GUIDE SUB-PAGE Applies ONLY to: ============================================================ */ /* --------------------------------------------- 1. HERO BACKGROUND (Asia hero image) --------------------------------------------- */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/asia-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .hero-region { min-height: 480px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /*--------------------------------------------- SECTION 4 — Overview (Asia) ---------------------------------------------*/ .section-overview { text-align: center; } .section-overview .section-title { font-size: 2rem; font-weight: 700; color: #1A237E; /* Asia Deep Indigo */ margin-bottom: 20px; text-align: center; width: 100%; } .section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #1A237E; /* Asia Deep Indigo */ max-width: 820px; margin: 0 auto 32px; } .overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .overview-highlights .highlight-item { background: #F7E9EF; /* Asia Soft Lotus Pink */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #1A237E; /* Asia Deep Indigo */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .highlight-icon { color: #CFAE4F; /* Asia Royal Gold */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Asia) --------------------------------------------- */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #FDF7F3; width: 100%; } /* Inner wrapper */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #2A1F4F; text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #4B3F72; max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #F3E6FF 0%, #FFFFFF 100%); border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #2A1F4F; text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #5A4E7A; text-align: center; } /* TAGS */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .tag { background: #CFAE4F; color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #2A1F4F; display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .highlight-icon { color: #CFAE4F; font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-link { background: #8E44AD; color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .secondary-btn { background: #2A1F4F; color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #7A3797; transform: translateY(-2px); } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .secondary-btn:hover { background: #21163A; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.asia-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #CFAE4F; border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — East Asia Cruise Experience Overview */ /* ========================================================= */ .asia-east-experience-section { width: 100%; padding: 80px 0; background: #FDF7F3; /* Silk Cream */ color: #2A1F4F; /* Deep Indigo Plum */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-east-experience-section.revealed { opacity: 1; transform: translateY(0); } .asia-east-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-east-experience-header { text-align: center; margin-bottom: 40px; } .asia-east-experience-title { font-size: 2.4rem; /* medium, balanced */ font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-east-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* List layout */ .asia-east-experience-list { list-style: none; margin: 0; padding: 0; } .asia-east-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; /* medium spacing */ font-size: 1.1rem; line-height: 1.7; color: #2A1F4F; } /* Emoji icon */ .asia-east-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .asia-east-text { display: inline-block; } /* Country name styling (bold + coloured) */ .asia-east-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .asia-country-japan { color: #C62828; /* Red */ } .asia-country-korea { color: #1565C0; /* Blue */ } .asia-country-china { color: #D32F2F; /* Deep Red */ } .asia-country-taiwan { color: #00897B; /* Teal */ } .asia-country-atmosphere { color: #6A1B9A; /* Purple */ } .asia-country-scenic { color: #2E7D32; /* Green */ } /* ========================================================= */ /* SECTION 7 — Southeast Asia Cruise Experience Overview */ /* ========================================================= */ .asia-southeast-experience-section { width: 100%; padding: 80px 0; background: #FDF7F3; /* Silk Cream */ color: #2A1F4F; /* Deep Indigo Plum */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-southeast-experience-section.revealed { opacity: 1; transform: translateY(0); } .asia-southeast-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-southeast-experience-header { text-align: center; margin-bottom: 40px; } .asia-southeast-experience-title { font-size: 2.4rem; /* medium, balanced */ font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-southeast-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* List layout */ .asia-southeast-experience-list { list-style: none; margin: 0; padding: 0; } .asia-southeast-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; /* medium spacing */ font-size: 1.1rem; line-height: 1.7; color: #2A1F4F; } /* Emoji icon */ .asia-se-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .asia-se-text { display: inline-block; } /* Country name styling (bold + coloured) */ .asia-se-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .asia-se-thailand { color: #D84315; /* Warm Orange */ } .asia-se-singapore { color: #283593; /* Deep Indigo */ } .asia-se-malaysia { color: #2E7D32; /* Green */ } .asia-se-indonesia { color: #6A1B9A; /* Purple */ } .asia-se-vietnam { color: #C62828; /* Red */ } .asia-se-philippines { color: #0277BD; /* Ocean Blue */ } .asia-se-atmosphere { color: #F57C00; /* Sunset Orange */ } /* ========================================================= */ /* SECTION 8 — South Asia Cruise Experience Overview */ /* ========================================================= */ .asia-south-experience-section { width: 100%; padding: 80px 0; background: #FDF7F3; /* Silk Cream */ color: #2A1F4F; /* Deep Indigo Plum */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-south-experience-section.revealed { opacity: 1; transform: translateY(0); } .asia-south-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-south-experience-header { text-align: center; margin-bottom: 40px; } .asia-south-experience-title { font-size: 2.4rem; /* medium, balanced */ font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-south-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* List layout */ .asia-south-experience-list { list-style: none; margin: 0; padding: 0; } .asia-south-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; /* medium spacing */ font-size: 1.1rem; line-height: 1.7; color: #2A1F4F; } /* Emoji icon */ .asia-south-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .asia-south-text { display: inline-block; } /* Country name styling (bold + coloured) */ .asia-south-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .asia-south-india { color: #C62828; /* Red */ } .asia-south-srilanka { color: #2E7D32; /* Green */ } .asia-south-maldives { color: #00838F; /* Teal Blue */ } .asia-south-bangladesh { color: #1565C0; /* Blue */ } .asia-south-pakistan { color: #6A1B9A; /* Purple */ } .asia-south-atmosphere { color: #F57C00; /* Sunset Orange */ } /* ========================================================= */ /* SECTION 9 — Asia Seasonal Cruise Guide */ /* ========================================================= */ .asia-seasonal-guide-section { width: 100%; padding: 80px 0; background: #FDF7F3; /* Silk Cream */ color: #2A1F4F; /* Deep Indigo Plum */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .asia-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .asia-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* List layout */ .asia-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .asia-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; /* medium spacing */ font-size: 1.1rem; line-height: 1.7; color: #2A1F4F; } /* Emoji icon */ .asia-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .asia-season-text { display: inline-block; } /* Season name styling (bold + coloured) */ .asia-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .asia-season-eastasia { color: #C62828; /* Red */ } .asia-season-southeastasia { color: #F57C00; /* Orange */ } .asia-season-southasia { color: #2E7D32; /* Green */ } .asia-season-monsoon { color: #1565C0; /* Blue */ } .asia-season-festivals { color: #6A1B9A; /* Purple */ } .asia-season-scenic { color: #00838F; /* Teal */ } /* ========================================================= */ /* SECTION 10 — Asia Best Cruise Months Chart */ /* ========================================================= */ .asia-best-months-section { width: 100%; padding: 80px 0; background: #FDF7F3; /* Silk Cream */ color: #2A1F4F; /* Deep Indigo Plum */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-best-months-section.revealed { opacity: 1; transform: translateY(0); } .asia-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-best-months-header { text-align: center; margin-bottom: 40px; } .asia-best-months-title { font-size: 2.4rem; font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* Chart container */ .asia-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header (months row) */ .asia-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #1A237E; margin-bottom: 12px; text-align: center; } .asia-months-chart-header span { font-size: 0.85rem; } /* Chart label for each region */ .asia-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #2A1F4F; } /* Chart rows (bars) */ .asia-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Region-scoped bar styles */ .asia-best { background: linear-gradient(135deg, #2E7D32, #66BB6A); border-radius: 4px; height: 18px; } .asia-good { background: linear-gradient(135deg, #F9A825, #FFEB3B); border-radius: 4px; height: 18px; } .asia-avoid { background: linear-gradient(135deg, #C62828, #EF5350); border-radius: 4px; height: 18px; } /* Legend */ .asia-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .asia-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .asia-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .asia-best-months-list { list-style: none; margin: 0; padding: 0; } .asia-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2A1F4F; } .asia-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .asia-best-text { display: inline-block; } .asia-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks for labels */ .asia-best-eastasia { color: #C62828; } .asia-best-southeastasia { color: #F57C00; } .asia-best-southasia { color: #2E7D32; } .asia-best-blossom { color: #6A1B9A; } .asia-best-dryseason { color: #0277BD; } .asia-best-monsoon { color: #C62828; } /* ========================================================= */ /* SECTION 11 — Asia Cruise Tips & Planning Guide */ /* ========================================================= */ .asia-tips-section { width: 100%; padding: 80px 0; background: #FDF7F3; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-tips-section.revealed { opacity: 1; transform: translateY(0); } .asia-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-tips-header { text-align: center; margin-bottom: 40px; } .asia-tips-title { font-size: 2.4rem; font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* Icons Row */ .asia-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #2A1F4F; } /* Gradient Divider */ .asia-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #1A237E, #66BB6A, #1A237E); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .asia-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .asia-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .asia-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .asia-tip-planning { color: #1A237E; } .asia-tip-packing { color: #2E7D32; } .asia-tip-docs { color: #6A1B9A; } .asia-tip-weather { color: #0277BD; } .asia-tip-port { color: #F57C00; } /* Do's & Don'ts */ .asia-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .asia-tips-dos, .asia-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .asia-tips-dos h3, .asia-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #1A237E; } .asia-tips-dos ul, .asia-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .asia-insider-tips { margin-top: 40px; } .asia-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #1A237E; } .asia-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising in Asia */ /* ========================================================= */ .asia-boutique-section { width: 100%; padding: 80px 0; background: #FDF7F3; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-boutique-section.revealed { opacity: 1; transform: translateY(0); } .asia-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-boutique-header { text-align: center; margin-bottom: 40px; } .asia-boutique-title { font-size: 2.4rem; font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* Colourful icon row */ .asia-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #2A1F4F; } /* Cards container */ .asia-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .asia-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .asia-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .asia-boutique-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .asia-boutique-card-purple { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } .asia-boutique-card-blue { background: linear-gradient(135deg, #0277BD, #29B6F6); } .asia-boutique-card-gold { background: linear-gradient(135deg, #F9A825, #FFB300); } .asia-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .asia-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .asia-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Colourful divider */ .asia-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #1A237E, #66BB6A, #6A1B9A, #F9A825); border-radius: 3px; margin: 40px 0; } /* List section */ .asia-boutique-list-wrapper { margin-top: 10px; } .asia-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #1A237E; } .asia-boutique-list { list-style: none; margin: 0; padding: 0; } .asia-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2A1F4F; } .asia-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .asia-boutique-list-text { display: inline-block; } /* Colour labels */ .asia-boutique-label-green { color: #2E7D32; } .asia-boutique-label-purple { color: #6A1B9A; } .asia-boutique-label-blue { color: #0277BD; } .asia-boutique-label-gold { color: #F9A825; } /* Responsive */ @media (max-width: 900px) { .asia-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — Asia Port Profiles (Sub‑Page Edition) */ /* ========================================================= */ .asia-port-section { width: 100%; padding: 80px 0; background: #FDF7F3; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-port-section.revealed { opacity: 1; transform: translateY(0); } .asia-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .asia-port-header { text-align: center; margin-bottom: 40px; } .asia-port-title { font-size: 2.4rem; font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-port-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; margin-bottom: 14px; } /* Icon Row */ .asia-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #2A1F4F; } /* Cards container */ .asia-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .asia-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .asia-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card Body Layout */ .asia-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants */ .asia-port-card-teal { background: linear-gradient(135deg, #00897B, #4DB6AC); } .asia-port-card-coral { background: linear-gradient(135deg, #D84315, #FF7043); } .asia-port-card-indigo { background: linear-gradient(135deg, #283593, #5C6BC0); } .asia-port-card-cyan { background: linear-gradient(135deg, #0097A7, #4DD0E1); } .asia-port-card-amber { background: linear-gradient(135deg, #FF8F00, #FFB74D); } /* ⭐ NEW — Port Klang Purple Variant */ .asia-port-card-purple { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } .asia-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .asia-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .asia-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal Animation for Asia Port Cards */ .asia-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Colourful divider */ .asia-port-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #00897B, #D84315, #283593, #0097A7, #FF8F00); border-radius: 3px; margin: 40px 0; } /* List section */ .asia-port-list-wrapper { margin-top: 10px; } .asia-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #1A237E; } .asia-port-list { list-style: none; margin: 0; padding: 0; } .asia-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2A1F4F; } .asia-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .asia-port-label-teal { color: #00897B; } .asia-port-label-coral { color: #D84315; } .asia-port-label-indigo { color: #283593; } .asia-port-label-cyan { color: #0097A7; } .asia-port-label-amber { color: #FF8F00; } /* Responsive */ @media (max-width: 900px) { .asia-port-cards { grid-template-columns: 1fr; } } .asia-port-section.revealed { opacity: 1 !important; } /* ========================================================= */ /* SECTION 14 — Asia Cruise Port Comparison Grid */ /* ========================================================= */ .asia-port-compare-section { width: 100%; padding: 80px 0; background: #FAF7FF; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .asia-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .asia-port-compare-header { text-align: center; margin-bottom: 50px; } .asia-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #1A237E; margin-bottom: 20px; } .asia-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #4B3F72; max-width: 800px; margin: 0 auto; } /* Grid container */ .asia-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header { background: #EDE7F6; font-weight: 700; color: #1A237E; } /* Left colour accent */ .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-teal::before { background: #00897B; } .compare-row-coral::before { background: #D84315; } .compare-row-indigo::before { background: #283593; } .compare-row-cyan::before { background: #0097A7; } .compare-row-amber::before { background: #FF8F00; } .compare-row-purple::before { background: #6A1B9A; } .compare-row-blue::before { background: #1E88E5; } .compare-row-red::before { background: #C62828; } /* Alternating row backgrounds */ .compare-grid-row:nth-child(even) { background: #F9F7FC; } /* ⭐ Colour‑tinted hover (premium regional glow) */ .compare-row-teal:hover { background: rgba(0, 137, 123, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-coral:hover { background: rgba(216, 67, 21, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-indigo:hover { background: rgba(40, 53, 147, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-cyan:hover { background: rgba(0, 151, 167, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-amber:hover { background: rgba(255, 143, 0, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-purple:hover { background: rgba(106, 27, 154, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-blue:hover { background: rgba(30, 136, 229, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-red:hover { background: rgba(198, 40, 40, 0.10); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .asia-port-compare-insights { margin-top: 40px; padding: 30px; background: #F3E9FF; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #1A237E; margin-bottom: 14px; } .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #4B3F72; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header { display: none; } .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — Asia Embarkation vs Destination Ports (CSS) */ /* ========================================================= */ .asia-port-usage-section { padding: 80px 0; background: #f7f9fc; } .asia-port-usage-inner { max-width: 1300px; margin: 0 auto; } .asia-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .asia-port-usage-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 20px; } /* GRID */ .asia-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .asia-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* REGION-SCOPED BACKGROUND IMAGES */ .asia-image-embarkation { background-image: url('../cruise-images/cruise-region-subpages-images/asia-embarkation-ports.webp'); } .asia-image-destination { background-image: url('../cruise-images/cruise-region-subpages-images/asia-destination-ports.webp'); } .asia-image-debarkation { background-image: url('../cruise-images/cruise-region-subpages-images/asia-debarkation-ports.webp'); } /* TEXT */ .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #fff; } .usage-card-text { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #fff; opacity: 0.95; } .usage-card-note { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #fff; opacity: 0.95; } /* GRADIENTS */ .usage-card-embarkation { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .usage-card-destination { background: linear-gradient(135deg, #66bb6a, #43a047); } .usage-card-debarkation { background: linear-gradient(135deg, #ab47bc, #8e24aa); } /* HOVER */ .asia-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .asia-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .asia-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — Asia Cruise Lines Overview Grid */ /* ========================================================= */ .asia-cruise-lines-overview { width: 100%; padding: 90px 0; background: #F7F4FF; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .asia-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .asia-cruise-lines-header { text-align: center; margin-bottom: 60px; } .asia-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #1A237E; margin-bottom: 16px; } /* Cinematic gradient underline */ .asia-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #6A1B9A, #283593, #00897B); } .asia-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #4B3F72; max-width: 850px; margin: 0 auto; } /* Grid */ .asia-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .asia-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .asia-cruise-line-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .asia-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-teal::before { background: #00897B; } .card-coral::before { background: #D84315; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #0097A7; } .card-amber::before { background: #FF8F00; } .card-purple::before { background: #6A1B9A; } .card-blue::before { background: #1E88E5; } .card-red::before { background: #C62828; } /* Icon */ .asia-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .asia-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #1A237E; margin-bottom: 12px; } /* Summary */ .asia-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #4B3F72; margin-bottom: 18px; } /* Points */ .asia-cruise-line-points { list-style: none; padding: 0; margin: 0; } .asia-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #2A1F4F; padding-left: 14px; position: relative; } .asia-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #6A1B9A; font-size: 0.9rem; } /* ⭐ Colour‑Tinted Hover (Premium Glow) */ .card-teal:hover { background: rgba(0, 137, 123, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-coral:hover { background: rgba(216, 67, 21, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-indigo:hover { background: rgba(40, 53, 147, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-cyan:hover { background: rgba(0, 151, 167, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-amber:hover { background: rgba(255, 143, 0, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-purple:hover { background: rgba(106, 27, 154, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-blue:hover { background: rgba(30, 136, 229, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-red:hover { background: rgba(198, 40, 40, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .asia-cruise-lines-title { font-size: 2.2rem; } .asia-cruise-lines-intro { font-size: 1.1rem; } .asia-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 16 — Asia Cruise Ship Types Overview */ /* ========================================================= */ .asia-ship-types-overview { width: 100%; padding: 90px 0; background: #F7F4FF; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .asia-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .asia-ship-types-header { text-align: center; margin-bottom: 60px; } .asia-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #1A237E; margin-bottom: 16px; } /* Cinematic gradient underline */ .asia-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #6A1B9A, #283593, #00897B); } .asia-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #4B3F72; max-width: 850px; margin: 0 auto; } /* Grid */ .asia-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Ship Type Cards */ .asia-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .asia-ship-type-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .asia-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-teal::before { background: #00897B; } .card-coral::before { background: #D84315; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #0097A7; } .card-amber::before { background: #FF8F00; } .card-purple::before { background: #6A1B9A; } /* Icon */ .asia-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .asia-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #1A237E; margin-bottom: 12px; } /* Summary */ .asia-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #4B3F72; margin-bottom: 18px; } /* Points */ .asia-ship-type-points { list-style: none; padding: 0; margin: 0; } .asia-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #2A1F4F; padding-left: 14px; position: relative; } .asia-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #6A1B9A; font-size: 0.9rem; } /* ⭐ Colour‑Tinted Hover (Premium Glow) */ .card-teal:hover { background: rgba(0, 137, 123, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-coral:hover { background: rgba(216, 67, 21, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-indigo:hover { background: rgba(40, 53, 147, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-cyan:hover { background: rgba(0, 151, 167, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-amber:hover { background: rgba(255, 143, 0, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-purple:hover { background: rgba(106, 27, 154, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .asia-ship-types-title { font-size: 2.2rem; } .asia-ship-types-intro { font-size: 1.1rem; } .asia-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 17 — Asia Cruise Duration Overview */ /* ========================================================= */ .asia-cruise-duration-overview { width: 100%; padding: 90px 0; background: #F7F4FF; color: #2A1F4F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .asia-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .asia-cruise-duration-header { text-align: center; margin-bottom: 60px; } .asia-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #1A237E; margin-bottom: 16px; } /* Cinematic gradient underline */ .asia-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #6A1B9A, #283593, #00897B); } .asia-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #4B3F72; max-width: 850px; margin: 0 auto; } /* Grid */ .asia-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .asia-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .asia-cruise-duration-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .asia-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-teal::before { background: #00897B; } .card-coral::before { background: #D84315; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #0097A7; } .card-amber::before { background: #FF8F00; } .card-purple::before { background: #6A1B9A; } /* Icon */ .asia-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .asia-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #1A237E; margin-bottom: 12px; } /* Summary */ .asia-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #4B3F72; margin-bottom: 18px; } /* Points */ .asia-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .asia-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #2A1F4F; padding-left: 14px; position: relative; } .asia-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #6A1B9A; font-size: 0.9rem; } /* ⭐ Colour‑Tinted Hover (Premium Glow) */ .card-teal:hover { background: rgba(0, 137, 123, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-coral:hover { background: rgba(216, 67, 21, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-indigo:hover { background: rgba(40, 53, 147, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-cyan:hover { background: rgba(0, 151, 167, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-amber:hover { background: rgba(255, 143, 0, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-purple:hover { background: rgba(106, 27, 154, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .asia-cruise-duration-title { font-size: 2.2rem; } .asia-cruise-duration-intro { font-size: 1.1rem; } .asia-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — Asia Cruise Price Range Overview (12 cards) */ /* ========================================================= */ .asia-cruise-price-overview { width: 100%; padding: 90px 0; background: #F8FAFF; color: #1F2A44; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .asia-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .asia-cruise-price-header { text-align: center; margin-bottom: 60px; } .asia-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #1A237E; margin-bottom: 16px; } .asia-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #B0BEC5, #7986CB, #CE93D8, #80CBC4); } .asia-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #3A4561; max-width: 850px; margin: 0 auto; } /* Grid */ .asia-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .asia-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .asia-cruise-price-card.visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .asia-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* ========================================================= */ /* NEW 12‑COLOUR PALETTE */ /* ========================================================= */ .card-platinum::before { background: #C0C0C0; } .card-sapphire::before { background: #0F52BA; } .card-amethyst::before { background: #9966CC; } .card-jade::before { background: #00A36C; } .card-topaz::before { background: #FFC85B; } .card-pearl::before { background: #E8E8E8; } .card-onyx::before { background: #353839; } .card-citrine::before { background: #E4D00A; } .card-coral::before { background: #FF7F50; } .card-glacier::before { background: #71A6D2; } .card-sandstone::before { background: #D2B48C; } .card-royalviolet::before { background: #6A0DAD; } /* ========================================================= */ /* ICON + TITLES */ /* ========================================================= */ .asia-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .asia-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #1A237E; margin-bottom: 18px; } /* Layer Titles */ .asia-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .asia-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #3A4561; margin-bottom: 10px; } .asia-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .asia-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .asia-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #1F2A44; padding-left: 14px; position: relative; } .asia-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #1A237E; font-size: 0.9rem; } /* ========================================================= */ /* PREMIUM HOVER EFFECTS (12 colours) */ /* ========================================================= */ .card-platinum:hover { background: rgba(192, 192, 192, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-sapphire:hover { background: rgba(15, 82, 186, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-amethyst:hover { background: rgba(153, 102, 204, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-jade:hover { background: rgba(0, 163, 108, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-topaz:hover { background: rgba(255, 200, 91, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-pearl:hover { background: rgba(232, 232, 232, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-onyx:hover { background: rgba(53, 56, 57, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-citrine:hover { background: rgba(228, 208, 10, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-coral:hover { background: rgba(255, 127, 80, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-glacier:hover { background: rgba(113, 166, 210, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-sandstone:hover { background: rgba(210, 180, 140, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-royalviolet:hover { background: rgba(106, 13, 173, 0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } /* Responsive */ @media (max-width: 700px) { .asia-cruise-price-title { font-size: 2.2rem; } .asia-cruise-price-intro { font-size: 1.1rem; } .asia-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — ASIA CRUISE BEST VALUE TIPS */ /* ========================================================= */ .section-19 { padding: 80px 0; background: #f8fafc; } .section-19-wrapper { max-width: 1300px; margin: 0 auto; } .section-19 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-19 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — UNIQUE TO SECTION 19 */ /* ========================================================= */ .card-19-1 { background: linear-gradient(135deg, #ff7a7a, #ff5252); } .card-19-2 { background: linear-gradient(135deg, #ff9f43, #ff7f00); } .card-19-3 { background: linear-gradient(135deg, #ffd93d, #ffbf00); } .card-19-4 { background: linear-gradient(135deg, #6dd47e, #4caf50); } .card-19-5 { background: linear-gradient(135deg, #1abc9c, #16a085); } .card-19-6 { background: linear-gradient(135deg, #3498db, #2c82c9); } .card-19-7 { background: linear-gradient(135deg, #9b59b6, #8e44ad); } .card-19-8 { background: linear-gradient(135deg, #e84393, #d63073); } .card-19-9 { background: linear-gradient(135deg, #fdcb6e, #e1a84c); } .card-19-10 { background: linear-gradient(135deg, #00cec9, #00b4b0); } .card-19-11 { background: linear-gradient(135deg, #6c5ce7, #5a4bd6); } .card-19-12 { background: linear-gradient(135deg, #ff7675, #e66767); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-19:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 20 — Asia Cultural Immersion Experiences (CSS) */ /* ========================================================= */ .section-20 { padding: 80px 0; background: #f7f9fc; } .section-20-wrapper { max-width: 1300px; margin: 0 auto; } .section-20 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-20 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — UNIQUE TO SECTION 20 */ /* ========================================================= */ .card-20-1 { background: linear-gradient(135deg, #ff6f61, #ff3b2f); } .card-20-2 { background: linear-gradient(135deg, #ff9f1a, #ff7a00); } .card-20-3 { background: linear-gradient(135deg, #ffd93d, #ffbf00); } .card-20-4 { background: linear-gradient(135deg, #6dd47e, #4caf50); } .card-20-5 { background: linear-gradient(135deg, #1abc9c, #16a085); } .card-20-6 { background: linear-gradient(135deg, #3498db, #2c82c9); } .card-20-7 { background: linear-gradient(135deg, #9b59b6, #8e44ad); } .card-20-8 { background: linear-gradient(135deg, #e84393, #d63073); } .card-20-9 { background: linear-gradient(135deg, #fdcb6e, #e1a84c); } .card-20-10 { background: linear-gradient(135deg, #00cec9, #00b4b0); } .card-20-11 { background: linear-gradient(135deg, #6c5ce7, #5a4bd6); } .card-20-12 { background: linear-gradient(135deg, #ff7675, #e66767); } /* ========================================================= */ /* HOVER EFFECTS — COLOUR CHANGE + LIFT */ /* ========================================================= */ .hover-20:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* Colour shift on hover */ .card-20-1:hover { background: linear-gradient(135deg, #ff3b2f, #ff6f61); } .card-20-2:hover { background: linear-gradient(135deg, #ff7a00, #ff9f1a); } .card-20-3:hover { background: linear-gradient(135deg, #ffbf00, #ffd93d); } .card-20-4:hover { background: linear-gradient(135deg, #4caf50, #6dd47e); } .card-20-5:hover { background: linear-gradient(135deg, #16a085, #1abc9c); } .card-20-6:hover { background: linear-gradient(135deg, #2c82c9, #3498db); } .card-20-7:hover { background: linear-gradient(135deg, #8e44ad, #9b59b6); } .card-20-8:hover { background: linear-gradient(135deg, #d63073, #e84393); } .card-20-9:hover { background: linear-gradient(135deg, #e1a84c, #fdcb6e); } .card-20-10:hover { background: linear-gradient(135deg, #00b4b0, #00cec9); } .card-20-11:hover { background: linear-gradient(135deg, #5a4bd6, #6c5ce7); } .card-20-12:hover { background: linear-gradient(135deg, #e66767, #ff7675); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 21 — Asia Wildlife & Nature Encounters (CSS) */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #f7f9fc; } .section-21-wrapper { max-width: 1300px; margin: 0 auto; } .section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .asia-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .asia-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — ASIA WILDLIFE */ .wildlife-image-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/asia-dolphins.webp'); } .wildlife-image-sea-turtle { background-image: url('../cruise-images/cruise-region-subpages-images/asia-sea-turtle.webp'); } .wildlife-image-coral-reef { background-image: url('../cruise-images/cruise-region-subpages-images/asia-coral-reef.webp'); } .wildlife-image-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/asia-rainforest.webp'); } .wildlife-image-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/asia-national-park.webp'); } .wildlife-image-birdwatching { background-image: url('../cruise-images/cruise-region-subpages-images/asia-birdwatching.webp'); } .wildlife-image-island-ecosystem { background-image: url('../cruise-images/cruise-region-subpages-images/asia-island-ecosystem.webp'); } .wildlife-image-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/asia-mangrove.webp'); } .wildlife-image-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/asia-mountains.webp'); } .wildlife-image-wildlife-encounter { background-image: url('../cruise-images/cruise-region-subpages-images/asia-wildlife-encounter.webp'); } .wildlife-image-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/asia-eco-tour.webp'); } .wildlife-image-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/asia-nature-photography.webp'); } /* GRADIENTS */ .card-21-1 { background: linear-gradient(135deg, #00bcd4, #0097a7); } .card-21-2 { background: linear-gradient(135deg, #4caf50, #2e7d32); } .card-21-3 { background: linear-gradient(135deg, #ff7043, #f4511e); } .card-21-4 { background: linear-gradient(135deg, #8bc34a, #689f38); } .card-21-5 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .card-21-6 { background: linear-gradient(135deg, #ab47bc, #8e24aa); } .card-21-7 { background: linear-gradient(135deg, #26c6da, #00acc1); } .card-21-8 { background: linear-gradient(135deg, #66bb6a, #43a047); } .card-21-9 { background: linear-gradient(135deg, #ffa726, #fb8c00); } .card-21-10 { background: linear-gradient(135deg, #ec407a, #d81b60); } .card-21-11 { background: linear-gradient(135deg, #29b6f6, #039be5); } .card-21-12 { background: linear-gradient(135deg, #7e57c2, #5e35b1); } /* HOVER */ .hover-21:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Asia Cultural Experiences & Traditions (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #f7f9fc; } .section-22-wrapper { max-width: 1300px; margin: 0 auto; } .section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .asia-cultural-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .asia-cultural-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — CULTURAL */ .culture-image-ceremonies { background-image: url('../cruise-images/cruise-region-subpages-images/asia-ceremonies.webp'); } .culture-image-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/asia-handicrafts.webp'); } .culture-image-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/asia-street-food.webp'); } .culture-image-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/asia-architecture.webp'); } .culture-image-performances { background-image: url('../cruise-images/cruise-region-subpages-images/asia-performances.webp'); } .culture-image-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/asia-festivals.webp'); } .culture-image-markets { background-image: url('../cruise-images/cruise-region-subpages-images/asia-markets.webp'); } .culture-image-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/asia-clothing.webp'); } .culture-image-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/asia-workshops.webp'); } .culture-image-temples { background-image: url('../cruise-images/cruise-region-subpages-images/asia-temples.webp'); } .culture-image-villages { background-image: url('../cruise-images/cruise-region-subpages-images/asia-villages.webp'); } .culture-image-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/asia-storytelling.webp'); } /* GRADIENTS */ .card-22-1 { background: linear-gradient(135deg, #8e24aa, #6a1b9a); } .card-22-2 { background: linear-gradient(135deg, #ff7043, #f4511e); } .card-22-3 { background: linear-gradient(135deg, #ffa726, #fb8c00); } .card-22-4 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .card-22-5 { background: linear-gradient(135deg, #ec407a, #d81b60); } .card-22-6 { background: linear-gradient(135deg, #66bb6a, #43a047); } .card-22-7 { background: linear-gradient(135deg, #26c6da, #00acc1); } .card-22-8 { background: linear-gradient(135deg, #ab47bc, #8e24aa); } .card-22-9 { background: linear-gradient(135deg, #4caf50, #2e7d32); } .card-22-10 { background: linear-gradient(135deg, #7e57c2, #5e35b1); } .card-22-11 { background: linear-gradient(135deg, #29b6f6, #039be5); } .card-22-12 { background: linear-gradient(135deg, #ef5350, #e53935); } /* HOVER */ .hover-22:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Asia Festivals & Seasonal Events (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #f7f9fc; } .section-23-wrapper { max-width: 1300px; margin: 0 auto; } .section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .asia-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .asia-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — FESTIVALS */ .festival-image-lunar-new-year { background-image: url('../cruise-images/cruise-region-subpages-images/asia-lunar-new-year.webp'); } .festival-image-cherry-blossom { background-image: url('../cruise-images/cruise-region-subpages-images/asia-cherry-blossom.webp'); } .festival-image-diwali { background-image: url('../cruise-images/cruise-region-subpages-images/asia-diwali.webp'); } .festival-image-mid-autumn { background-image: url('../cruise-images/cruise-region-subpages-images/asia-mid-autumn.webp'); } .festival-image-songkran { background-image: url('../cruise-images/cruise-region-subpages-images/asia-songkran.webp'); } .festival-image-ice-festival { background-image: url('../cruise-images/cruise-region-subpages-images/asia-ice-festival.webp'); } .festival-image-lantern-festival { background-image: url('../cruise-images/cruise-region-subpages-images/asia-lantern-festival.webp'); } .festival-image-harvest-festival { background-image: url('../cruise-images/cruise-region-subpages-images/asia-harvest-festival.webp'); } .festival-image-new-year-fireworks { background-image: url('../cruise-images/cruise-region-subpages-images/asia-new-year-fireworks.webp'); } .festival-image-temple-festival { background-image: url('../cruise-images/cruise-region-subpages-images/asia-temple-festival.webp'); } .festival-image-flower-festival { background-image: url('../cruise-images/cruise-region-subpages-images/asia-flower-festival.webp'); } .festival-image-parade { background-image: url('../cruise-images/cruise-region-subpages-images/asia-parade.webp'); } /* GRADIENTS */ .card-23-1 { background: linear-gradient(135deg, #ef5350, #e53935); } .card-23-2 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .card-23-3 { background: linear-gradient(135deg, #ff7043, #f4511e); } .card-23-4 { background: linear-gradient(135deg, #ab47bc, #8e24aa); } .card-23-5 { background: linear-gradient(135deg, #26c6da, #00acc1); } .card-23-6 { background: linear-gradient(135deg, #7e57c2, #5e35b1); } .card-23-7 { background: linear-gradient(135deg, #ffa726, #fb8c00); } .card-23-8 { background: linear-gradient(135deg, #66bb6a, #43a047); } .card-23-9 { background: linear-gradient(135deg, #29b6f6, #039be5); } .card-23-10 { background: linear-gradient(135deg, #8bc34a, #689f38); } .card-23-11 { background: linear-gradient(135deg, #ec407a, #d81b60); } .card-23-12 { background: linear-gradient(135deg, #ef6c00, #e65100); } /* HOVER */ .hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Asia Cruise Cuisine & Dining Highlights (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #f7f9fc; } .section-24-wrapper { max-width: 1300px; margin: 0 auto; } .section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .asia-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .asia-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — CUISINE */ .cuisine-image-japanese { background-image: url('../cruise-images/cruise-region-subpages-images/asia-japanese-cuisine.webp'); } .cuisine-image-chinese { background-image: url('../cruise-images/cruise-region-subpages-images/asia-chinese-cuisine.webp'); } .cuisine-image-korean { background-image: url('../cruise-images/cruise-region-subpages-images/asia-korean-cuisine.webp'); } .cuisine-image-thai { background-image: url('../cruise-images/cruise-region-subpages-images/asia-thai-cuisine.webp'); } .cuisine-image-vietnamese { background-image: url('../cruise-images/cruise-region-subpages-images/asia-vietnamese-cuisine.webp'); } .cuisine-image-indian { background-image: url('../cruise-images/cruise-region-subpages-images/asia-indian-cuisine.webp'); } .cuisine-image-sri-lankan { background-image: url('../cruise-images/cruise-region-subpages-images/asia-sri-lankan-cuisine.webp'); } .cuisine-image-malaysian { background-image: url('../cruise-images/cruise-region-subpages-images/asia-malaysian-cuisine.webp'); } .cuisine-image-singaporean { background-image: url('../cruise-images/cruise-region-subpages-images/asia-singaporean-cuisine.webp'); } .cuisine-image-indonesian { background-image: url('../cruise-images/cruise-region-subpages-images/asia-indonesian-cuisine.webp'); } .cuisine-image-fusion { background-image: url('../cruise-images/cruise-region-subpages-images/asia-fusion-dining.webp'); } .cuisine-image-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/asia-asian-desserts.webp'); } /* GRADIENTS */ .card-24-1 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .card-24-2 { background: linear-gradient(135deg, #ff7043, #f4511e); } .card-24-3 { background: linear-gradient(135deg, #8e24aa, #6a1b9a); } .card-24-4 { background: linear-gradient(135deg, #66bb6a, #43a047); } .card-24-5 { background: linear-gradient(135deg, #26c6da, #00acc1); } .card-24-6 { background: linear-gradient(135deg, #ffa726, #fb8c00); } .card-24-7 { background: linear-gradient(135deg, #7e57c2, #5e35b1); } .card-24-8 { background: linear-gradient(135deg, #ab47bc, #8e24aa); } .card-24-9 { background: linear-gradient(135deg, #29b6f6, #039be5); } .card-24-10 { background: linear-gradient(135deg, #8bc34a, #689f38); } .card-24-11 { background: linear-gradient(135deg, #ec407a, #d81b60); } .card-24-12 { background: linear-gradient(135deg, #ef6c00, #e65100); } /* HOVER */ .hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 ASIA SHORE EXCURSIONS — REGION-SCOPED (CSS) */ /* ========================================================= */ .asia { padding: 80px 0; background: #f7f9fc; } .asia-wrapper { max-width: 1300px; margin: 0 auto; } .asia .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .asia .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .asia .excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .asia .excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); /* ⭐ FULL BLEED FIX — remove inset spacing */ padding: 0; border: none; } /* IMAGE BLOCK */ .asia .excursion-image { display: block; /* ⭐ removes inline spacing */ width: 100%; /* ⭐ full width */ height: 220px; /* your existing height */ margin: 0; /* ⭐ no gaps */ padding: 0; /* ⭐ no gaps */ border: none; /* ⭐ no border */ background-size: cover; background-position: center; position: relative; z-index: 10; } /* TEXT — ⭐ CENTERED FIX */ .asia-excursion-card h3, .asia-excursion-card p { position: relative; z-index: 20; text-align: center; /* ⭐ center text */ margin-left: 0; /* ⭐ remove left padding */ margin-right: 0; /* ⭐ remove right padding */ width: 100%; /* ⭐ full width text block */ } /* REVEAL */ .asia.region-reveal-active .excursion-card.asia-card-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — ASIA */ .excursion-image-temple-heritage { background-image: url('../cruise-images/cruise-region-subpages-images/asia-temple-heritage.webp'); } .excursion-image-city-highlights { background-image: url('../cruise-images/cruise-region-subpages-images/asia-city-highlights.webp'); } .excursion-image-island-beach { background-image: url('../cruise-images/cruise-region-subpages-images/asia-island-beach.webp'); } .excursion-image-food-market { background-image: url('../cruise-images/cruise-region-subpages-images/asia-food-market.webp'); } .excursion-image-nature-scenic { background-image: url('../cruise-images/cruise-region-subpages-images/asia-nature-scenic.webp'); } .excursion-image-cultural-workshop { background-image: url('../cruise-images/cruise-region-subpages-images/asia-cultural-workshop.webp'); } .excursion-image-wildlife-encounter{ background-image: url('../cruise-images/cruise-region-subpages-images/asia-wildlife-encounters.webp'); } .excursion-image-boat-river { background-image: url('../cruise-images/cruise-region-subpages-images/asia-boat-river.webp'); } .excursion-image-adventure { background-image: url('../cruise-images/cruise-region-subpages-images/asia-adventure.webp'); } .excursion-image-historical-walk { background-image: url('../cruise-images/cruise-region-subpages-images/asia-historical-walk.webp'); } .excursion-image-village-visit { background-image: url('../cruise-images/cruise-region-subpages-images/asia-village-visit.webp'); } .excursion-image-private-tour { background-image: url('../cruise-images/cruise-region-subpages-images/asia-private-tour.webp'); } /* GRADIENTS — ASIA */ .card-asia-1 { background: linear-gradient(135deg, #8e24aa, #6a1b9a); } .card-asia-2 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .card-asia-3 { background: linear-gradient(135deg, #26c6da, #00acc1); } .card-asia-4 { background: linear-gradient(135deg, #ff7043, #f4511e); } .card-asia-5 { background: linear-gradient(135deg, #66bb6a, #43a047); } .card-asia-6 { background: linear-gradient(135deg, #ab47bc, #8e24aa); } .card-asia-7 { background: linear-gradient(135deg, #7e57c2, #5e35b1); } .card-asia-8 { background: linear-gradient(135deg, #29b6f6, #039be5); } .card-asia-9 { background: linear-gradient(135deg, #ffa726, #fb8c00); } .card-asia-10 { background: linear-gradient(135deg, #8bc34a, #689f38); } .card-asia-11 { background: linear-gradient(135deg, #ec407a, #d81b60); } .card-asia-12 { background: linear-gradient(135deg, #ef6c00, #e65100); } /* HOVER */ .hover-asia:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .asia .excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .asia .excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .asia .excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Asia Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .asia-transfers-section { padding: 80px 0; background: #f7f9fc; } .asia-transfers-inner { max-width: 1300px; margin: 0 auto; } .asia-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .asia-transfers-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 20px; } /* GRID */ .asia-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .asia-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #1a1a1a; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #444; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; } /* GRADIENTS */ .transfer-card-city { background: linear-gradient(135deg, #42a5f5, #1e88e5); color: #fff; } .transfer-card-airport { background: linear-gradient(135deg, #66bb6a, #43a047); color: #fff; } .transfer-card-cruiseline { background: linear-gradient(135deg, #ce93d8, #ba68c8); color: #fff; } .transfer-card-local { background: linear-gradient(135deg, #ffa726, #fb8c00); color: #fff; } .transfer-card-access { background: linear-gradient(135deg, #29b6f6, #039be5); color: #fff; } /* Card 6 — Planning Tips (lighter gradient for readability) */ .transfer-card-planning { background: linear-gradient(135deg, #d7ccc8, #a1887f); color: #fff; } /* HOVER */ .asia-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .asia-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .asia-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Asia Cruise FAQ (CSS) */ /* ========================================================= */ .asia-faq-section { padding: 80px 0; background: #ffffff; } .asia-faq-inner { max-width: 1100px; margin: 0 auto; } .asia-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .asia-faq-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 40px; } /* Accordion Container */ .asia-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .asia-faq-item { background: #f7f9fc; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .asia-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #1a1a1a; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .asia-faq-question:hover { background: #eef2f7; } /* Arrow Icon */ .asia-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .asia-faq-item.active .asia-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .asia-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .asia-faq-answer p { font-size: 1rem; color: #444; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .asia-faq-item.active .asia-faq-answer { max-height: 300px; } /* Responsive */ @media (max-width: 800px) { .asia-faq-title { font-size: 2rem; } .asia-faq-question { font-size: 1.05rem; } } /* ========================================================================================================== AFRICA CRUISE GUIDE SUB-PAGE Applies ONLY to: ============================================================================================================ */ /* SECTION 3. HERO BACKGROUND (Africa hero image) */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/africa-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .hero-region { min-height: 480px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /* ----------------------------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Africa) Applies ONLY to: ---------------------------------------------------------------------- */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #E8DCC2; /* Soft Sand Beige */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #3B2F2F; /* Deep Earth Brown */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #2E4F3F; /* Forest Green */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #F7F2E8 0%, #FFFFFF 100%); /* Africa warm gradient */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #3B2F2F; /* Deep Earth Brown */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #2E4F3F; /* Forest Green */ text-align: center; } /* TAGS */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .tag { background: #D98E04; /* Sunset Amber */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #3B2F2F; /* Deep Earth Brown */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .highlight-icon { color: #C45A2C; /* Terracotta Clay */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-link { background: #2E4F3F; /* Forest Green */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .secondary-btn { background: #3B2F2F; /* Deep Earth Brown */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #244033; /* Darker Forest Green */ transform: translateY(-2px); } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .secondary-btn:hover { background: #2A2626; /* Darker Earth Brown */ transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.africa-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #D98E04; /* Sunset Amber */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — North Africa Cruise Experience Overview */ /* ========================================================= */ .africa-north-experience-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-north-experience-section.revealed { opacity: 1; transform: translateY(0); } .africa-north-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-north-experience-header { text-align: center; margin-bottom: 40px; } .africa-north-experience-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; /* Deep Earth Brown */ margin-bottom: 20px; } .africa-north-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .africa-north-experience-list { list-style: none; margin: 0; padding: 0; } .africa-north-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #3B2F2F; /* Deep Earth Brown */ } /* Emoji icon */ .africa-north-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .africa-north-text { display: inline-block; } /* Country name styling */ .africa-north-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .africa-north-morocco { color: #C45A2C; /* Terracotta Clay */ } .africa-north-tunisia { color: #2E4F3F; /* Forest Green */ } .africa-north-egypt { color: #D98E04; /* Sunset Amber */ } .africa-north-atmosphere { color: #3B2F2F; /* Deep Earth Brown */ } .africa-north-scenic { color: #2E4F3F; /* Forest Green */ } /* ========================================================= */ /* SECTION 7 — West Africa Cruise Experience Overview */ /* ========================================================= */ .africa-west-experience-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-west-experience-section.revealed { opacity: 1; transform: translateY(0); } .africa-west-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-west-experience-header { text-align: center; margin-bottom: 40px; } .africa-west-experience-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; /* Deep Earth Brown */ margin-bottom: 20px; } .africa-west-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .africa-west-experience-list { list-style: none; margin: 0; padding: 0; } .africa-west-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #3B2F2F; /* Deep Earth Brown */ } /* Emoji icon */ .africa-west-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .africa-west-text { display: inline-block; } /* Country name styling */ .africa-west-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .africa-west-senegal { color: #C45A2C; /* Terracotta Clay */ } .africa-west-capeverde { color: #D98E04; /* Sunset Amber */ } .africa-west-ghana { color: #2E4F3F; /* Forest Green */ } .africa-west-canary { color: #3B2F2F; /* Deep Earth Brown */ } .africa-west-atmosphere { color: #C45A2C; /* Terracotta Clay */ } .africa-west-scenic { color: #2E4F3F; /* Forest Green */ } /* ========================================================= */ /* SECTION 8 — East & Southern Africa Cruise Experience */ /* ========================================================= */ .africa-southeast-experience-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-southeast-experience-section.revealed { opacity: 1; transform: translateY(0); } .africa-southeast-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-southeast-experience-header { text-align: center; margin-bottom: 40px; } .africa-southeast-experience-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; /* Deep Earth Brown */ margin-bottom: 20px; } .africa-southeast-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .africa-southeast-experience-list { list-style: none; margin: 0; padding: 0; } .africa-southeast-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #3B2F2F; /* Deep Earth Brown */ } /* Emoji icon */ .africa-southeast-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .africa-southeast-text { display: inline-block; } /* Country name styling */ .africa-southeast-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .africa-southeast-kenya { color: #C45A2C; /* Terracotta Clay */ } .africa-southeast-tanzania { color: #2E4F3F; /* Forest Green */ } .africa-southeast-mozambique { color: #D98E04; /* Sunset Amber */ } .africa-southeast-southafrica { color: #3B2F2F; /* Deep Earth Brown */ } .africa-southeast-namibia { color: #C45A2C; /* Terracotta Clay */ } .africa-southeast-atmosphere { color: #2E4F3F; /* Forest Green */ } /* ========================================================= */ /* SECTION 9 — Africa Seasonal Cruise Guide */ /* ========================================================= */ .africa-seasonal-guide-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .africa-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .africa-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; /* Deep Earth Brown */ margin-bottom: 20px; } .africa-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .africa-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .africa-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #3B2F2F; /* Deep Earth Brown */ } /* Emoji icon */ .africa-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .africa-season-text { display: inline-block; } /* Season name styling */ .africa-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .africa-season-northafrica { color: #C45A2C; /* Terracotta Clay */ } .africa-season-westafrica { color: #D98E04; /* Sunset Amber */ } .africa-season-eastafrica { color: #2E4F3F; /* Forest Green */ } .africa-season-southafrica { color: #3B2F2F; /* Deep Earth Brown */ } .africa-season-rainy { color: #1565C0; /* Rainy Season Blue */ } .africa-season-festivals { color: #C45A2C; /* Terracotta Clay */ } .africa-season-scenic { color: #2E4F3F; /* Forest Green */ } /* ========================================================= */ /* SECTION 10 — Africa Best Cruise Months Chart */ /* ========================================================= */ .africa-best-months-section { width: 100%; padding: 80px 0; background: #E8DCC2; color: #3B2F2F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-best-months-section.revealed { opacity: 1; transform: translateY(0); } .africa-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-best-months-header { text-align: center; margin-bottom: 40px; } .africa-best-months-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 20px; } .africa-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; margin-bottom: 14px; } /* Chart container */ .africa-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header */ .africa-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #3B2F2F; margin-bottom: 12px; text-align: center; } .africa-months-chart-header span { font-size: 0.85rem; } /* Chart label */ .africa-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #3B2F2F; } /* Chart rows */ .africa-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* REGION-SCOPED BAR STYLES */ .africa-best { background: linear-gradient(135deg, #2E4F3F, #4F7F63); border-radius: 4px; height: 18px; } .africa-good { background: linear-gradient(135deg, #D98E04, #F3C45A); border-radius: 4px; height: 18px; } .africa-avoid { background: linear-gradient(135deg, #C45A2C, #E07A52); border-radius: 4px; height: 18px; } /* Legend */ .africa-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .africa-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .africa-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .africa-best-months-list { list-style: none; margin: 0; padding: 0; } .africa-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #3B2F2F; } .africa-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .africa-best-text { display: inline-block; } .africa-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .africa-best-northafrica { color: #C45A2C; } .africa-best-westafrica { color: #D98E04; } .africa-best-eastafrica { color: #2E4F3F; } .africa-best-southafrica { color: #3B2F2F; } .africa-best-rainy { color: #1565C0; } .africa-best-festivals { color: #C45A2C; } /* ========================================================= */ /* SECTION 11 — Africa Cruise Tips & Planning Guide */ /* ========================================================= */ .africa-tips-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-tips-section.revealed { opacity: 1; transform: translateY(0); } .africa-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-tips-header { text-align: center; margin-bottom: 40px; } .africa-tips-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; /* Deep Earth Brown */ margin-bottom: 20px; } .africa-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; /* Forest Green */ margin-bottom: 14px; } /* Icons Row */ .africa-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #3B2F2F; } /* Gradient Divider */ .africa-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #3B2F2F, #D98E04, #3B2F2F); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .africa-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .africa-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .africa-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .africa-tip-planning { color: #3B2F2F; } .africa-tip-packing { color: #2E4F3F; } .africa-tip-docs { color: #C45A2C; } .africa-tip-weather { color: #D98E04; } .africa-tip-port { color: #2E4F3F; } /* Do's & Don'ts */ .africa-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .africa-tips-dos, .africa-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .africa-tips-dos h3, .africa-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #3B2F2F; } .africa-tips-dos ul, .africa-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .africa-insider-tips { margin-top: 40px; } .africa-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #3B2F2F; } .africa-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising in Africa */ /* ========================================================= */ .africa-boutique-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-boutique-section.revealed { opacity: 1; transform: translateY(0); } .africa-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-boutique-header { text-align: center; margin-bottom: 40px; } .africa-boutique-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 20px; } .africa-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; margin-bottom: 14px; } /* Colourful icon row */ .africa-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #3B2F2F; } /* Cards container */ .africa-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .africa-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .africa-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .africa-boutique-card-green { background: linear-gradient(135deg, #2E4F3F, #4F7F63); } .africa-boutique-card-purple { background: linear-gradient(135deg, #C45A2C, #E07A52); } .africa-boutique-card-blue { background: linear-gradient(135deg, #1565C0, #42A5F5); } .africa-boutique-card-gold { background: linear-gradient(135deg, #D98E04, #F3C45A); } .africa-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .africa-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .africa-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Colourful divider */ .africa-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #3B2F2F, #D98E04, #C45A2C, #2E4F3F); border-radius: 3px; margin: 40px 0; } /* List section */ .africa-boutique-list-wrapper { margin-top: 10px; } .africa-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #3B2F2F; } .africa-boutique-list { list-style: none; margin: 0; padding: 0; } .africa-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #3B2F2F; } .africa-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .africa-boutique-list-text { display: inline-block; } /* Colour labels */ .africa-boutique-label-green { color: #2E4F3F; } .africa-boutique-label-purple { color: #C45A2C; } .africa-boutique-label-blue { color: #1565C0; } .africa-boutique-label-gold { color: #D98E04; } /* Responsive */ @media (max-width: 900px) { .africa-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — Africa Port Profiles (Sub‑Page Edition) */ /* ========================================================= */ .africa-port-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-port-section.revealed { opacity: 1; transform: translateY(0); } .africa-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .africa-port-header { text-align: center; margin-bottom: 40px; } .africa-port-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 20px; } .africa-port-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; margin-bottom: 14px; } /* Icon Row */ .africa-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #3B2F2F; } /* Cards container */ .africa-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .africa-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .africa-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card Body Layout */ .africa-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants */ .africa-port-card-green { background: linear-gradient(135deg, #2E4F3F, #4F7F63); } .africa-port-card-amber { background: linear-gradient(135deg, #D98E04, #F3C45A); } .africa-port-card-coral { background: linear-gradient(135deg, #C45A2C, #E07A52); } .africa-port-card-blue { background: linear-gradient(135deg, #1565C0, #42A5F5); } .africa-port-card-purple { background: linear-gradient(135deg, #3B2F2F, #5A4747); } .africa-port-card-sunset { background: linear-gradient(135deg, #D98E04, #E8B45A); } .africa-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .africa-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .africa-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal Animation for Africa Port Cards */ .africa-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Colourful divider */ .africa-port-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #2E4F3F, #C45A2C, #1565C0, #D98E04); border-radius: 3px; margin: 40px 0; } /* List section */ .africa-port-list-wrapper { margin-top: 10px; } .africa-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #3B2F2F; } .africa-port-list { list-style: none; margin: 0; padding: 0; } .africa-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #3B2F2F; } .africa-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .africa-port-label-green { color: #2E4F3F; } .africa-port-label-coral { color: #C45A2C; } .africa-port-label-blue { color: #1565C0; } .africa-port-label-sunset { color: #D98E04; } /* Responsive */ @media (max-width: 900px) { .africa-port-cards { grid-template-columns: 1fr; } } .africa-port-section.revealed { opacity: 1 !important; } /* ========================================================= */ /* SECTION 14 — Africa Cruise Port Comparison Grid */ /* ========================================================= */ .africa-port-compare-section { width: 100%; padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; /* Deep Earth Brown */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .africa-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .africa-port-compare-header { text-align: center; margin-bottom: 50px; } .africa-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 20px; } .africa-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #2E4F3F; max-width: 800px; margin: 0 auto; } /* Grid container */ .africa-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header { background: #E8DCC2; font-weight: 700; color: #3B2F2F; } /* Left colour accent */ .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-green::before { background: #2E4F3F; } .compare-row-amber::before { background: #D98E04; } .compare-row-coral::before { background: #C45A2C; } .compare-row-blue::before { background: #1565C0; } .compare-row-purple::before { background: #3B2F2F; } .compare-row-sunset::before { background: #E8B45A; } .compare-row-teal::before { background: #4F7F63; } .compare-row-red::before { background: #A63A2C; } /* Alternating row backgrounds */ .compare-grid-row:nth-child(even) { background: #F3EFE6; } /* Hover glow */ .compare-grid-row:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .africa-port-compare-insights { margin-top: 40px; padding: 30px; background: #F3EFE6; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #3B2F2F; margin-bottom: 14px; } .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #2E4F3F; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header { display: none; } .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — Africa Embarkation vs Destination Ports */ /* ========================================================= */ .africa-port-usage-section { padding: 80px 0; background: #E8DCC2; /* Soft Sand Beige */ } .africa-port-usage-inner { max-width: 1300px; margin: 0 auto; } .africa-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; /* Deep Earth Brown */ } .africa-port-usage-intro { font-size: 1.15rem; text-align: center; color: #2E4F3F; /* Forest Green */ margin-bottom: 20px; } /* GRID */ .africa-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .africa-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* REGION-SCOPED BACKGROUND IMAGES */ .africa-image-embarkation { background-image: url('../cruise-images/cruise-region-subpages-images/africa-embarkation-ports.webp'); } .africa-image-destination { background-image: url('../cruise-images/cruise-region-subpages-images/africa-destination-ports.webp'); } .africa-image-debarkation { background-image: url('../cruise-images/cruise-region-subpages-images/africa-debarkation-ports.webp'); } /* TEXT */ .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #FFFFFF; } .usage-card-text { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } .usage-card-note { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } /* GRADIENTS */ .usage-card-embarkation { background: linear-gradient(135deg, #1565C0, #42A5F5); } .usage-card-destination { background: linear-gradient(135deg, #2E4F3F, #4F7F63); } .usage-card-debarkation { background: linear-gradient(135deg, #D98E04, #F3C45A); } /* HOVER */ .africa-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .africa-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .africa-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — Africa Cruise Lines Overview Grid */ /* ========================================================= */ .africa-cruise-lines-overview { width: 100%; padding: 90px 0; background: #E8DCC2; /* Soft Sand Beige */ color: #3B2F2F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .africa-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .africa-cruise-lines-header { text-align: center; margin-bottom: 60px; } .africa-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #3B2F2F; margin-bottom: 16px; } /* Cinematic gradient underline */ .africa-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E4F3F, #C45A2C, #D98E04); } .africa-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #2E4F3F; max-width: 850px; margin: 0 auto; } /* Grid */ .africa-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .africa-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .africa-cruise-line-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .africa-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-green::before { background: #2E4F3F; } .card-amber::before { background: #D98E04; } .card-purple::before { background: #C45A2C; } .card-blue::before { background: #1565C0; } .card-coral::before { background: #E07A52; } .card-teal::before { background: #4F7F63; } .card-sunset::before { background: #E8B45A; } .card-red::before { background: #A63A2C; } /* Icon */ .africa-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .africa-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 12px; } /* Summary */ .africa-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #2E4F3F; margin-bottom: 18px; } /* Points */ .africa-cruise-line-points { list-style: none; padding: 0; margin: 0; } .africa-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #3B2F2F; padding-left: 14px; position: relative; } .africa-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #C45A2C; font-size: 0.9rem; } /* Hover Glow */ .africa-cruise-line-card:hover { background: rgba(0,0,0,0.03); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .africa-cruise-lines-title { font-size: 2.2rem; } .africa-cruise-lines-intro { font-size: 1.1rem; } .africa-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 16 — Africa Cruise Ship Types Overview */ /* ========================================================= */ .africa-ship-types-overview { width: 100%; padding: 90px 0; background: #E8DCC2; color: #3B2F2F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .africa-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .africa-ship-types-header { text-align: center; margin-bottom: 60px; } .africa-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #3B2F2F; margin-bottom: 16px; } .africa-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E4F3F, #C45A2C, #D98E04); } .africa-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #2E4F3F; max-width: 850px; margin: 0 auto; } /* Grid */ .africa-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .africa-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .africa-ship-type-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .africa-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-green::before { background: #2E4F3F; } .card-amber::before { background: #D98E04; } .card-purple::before { background: #C45A2C; } .card-coral::before { background: #E07A52; } .card-blue::before { background: #1565C0; } .card-teal::before { background: #4F7F63; } .card-sunset::before { background: #E8B45A; } .card-red::before { background: #A63A2C; } /* Icons */ .africa-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .africa-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 12px; } /* Summary */ .africa-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #2E4F3F; margin-bottom: 18px; } /* Points */ .africa-ship-type-points { list-style: none; padding: 0; margin: 0; } .africa-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #3B2F2F; padding-left: 14px; position: relative; } .africa-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #C45A2C; font-size: 0.9rem; } /* ========================================================= */ /* ⭐ FIXED — LIGHT HOVER COLOURS (text stays readable) */ /* ========================================================= */ .card-green:hover { background: #F3E3C2; /* Light Sand Gold */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(243,227,194,0.55); } .card-amber:hover { background: #E9F2E6; /* Light Forest Mist */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(233,242,230,0.55); } .card-purple:hover { background: #E3ECF8; /* Light Ocean Blue */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(227,236,248,0.55); } .card-coral:hover { background: #F8E7E1; /* Light Coral Peach */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(248,231,225,0.55); } .card-blue:hover { background: #FFF2D6; /* Light Sunset Yellow */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(255,242,214,0.55); } .card-teal:hover { background: #F4E4E4; /* Light Soft Red Mist */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(244,228,228,0.55); } .card-sunset:hover { background: #ECE8F6; /* Light Indigo Mist */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(236,232,246,0.55); } .card-red:hover { background: #FCE9E3; /* Light Warm Coral */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(252,233,227,0.55); } /* Responsive */ @media (max-width: 700px) { .africa-ship-types-title { font-size: 2.2rem; } .africa-ship-types-intro { font-size: 1.1rem; } .africa-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 17 — Africa Cruise Duration Overview */ /* ========================================================= */ .africa-cruise-duration-overview { width: 100%; padding: 90px 0; background: #E8DCC2; color: #3B2F2F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .africa-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .africa-cruise-duration-header { text-align: center; margin-bottom: 60px; } .africa-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #3B2F2F; margin-bottom: 16px; } /* Cinematic gradient underline */ .africa-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E4F3F, #C45A2C, #D98E04); } .africa-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #2E4F3F; max-width: 850px; margin: 0 auto; } /* Grid */ .africa-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .africa-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .africa-cruise-duration-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .africa-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-green::before { background: #2E4F3F; } .card-amber::before { background: #D98E04; } .card-purple::before { background: #C45A2C; } .card-coral::before { background: #E07A52; } .card-blue::before { background: #1565C0; } .card-teal::before { background: #4F7F63; } .card-sunset::before { background: #E8B45A; } .card-red::before { background: #A63A2C; } /* Icon */ .africa-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .africa-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 12px; } /* Summary */ .africa-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #2E4F3F; margin-bottom: 18px; } /* Points */ .africa-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .africa-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #3B2F2F; padding-left: 14px; position: relative; } .africa-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #C45A2C; font-size: 0.9rem; } /* ========================================================= */ /* ⭐ LIGHT HOVER COLOURS — TEXT REMAINS READABLE */ /* ========================================================= */ .card-green:hover { background: #F3E3C2; /* Light Sand Gold */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(243,227,194,0.55); } .card-amber:hover { background: #E9F2E6; /* Light Forest Mist */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(233,242,230,0.55); } .card-purple:hover { background: #E3ECF8; /* Light Ocean Blue */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(227,236,248,0.55); } .card-coral:hover { background: #F8E7E1; /* Light Coral Peach */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(248,231,225,0.55); } .card-blue:hover { background: #FFF2D6; /* Light Sunset Yellow */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(255,242,214,0.55); } .card-teal:hover { background: #F4E4E4; /* Light Soft Red Mist */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(244,228,228,0.55); } .card-sunset:hover { background: #ECE8F6; /* Light Indigo Mist */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(236,232,246,0.55); } .card-red:hover { background: #FCE9E3; /* Light Warm Coral */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(252,233,227,0.55); } /* Responsive */ @media (max-width: 700px) { .africa-cruise-duration-title { font-size: 2.2rem; } .africa-cruise-duration-intro { font-size: 1.1rem; } .africa-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — Africa Cruise Price Range Overview (12 cards) */ /* ========================================================= */ .africa-cruise-price-overview { width: 100%; padding: 90px 0; background: #F8F4EC; /* Light Africa Sand */ color: #3B2F2F; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .africa-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .africa-cruise-price-header { text-align: center; margin-bottom: 60px; } .africa-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #3B2F2F; margin-bottom: 16px; } .africa-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E4F3F, #C45A2C, #D98E04, #4F7F63); } .africa-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #2E4F3F; max-width: 850px; margin: 0 auto; } /* Grid */ .africa-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .africa-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .africa-cruise-price-card.visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .africa-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* ========================================================= */ /* 12‑COLOUR AFRICA PALETTE */ /* ========================================================= */ .card-green::before { background: #2E4F3F; } .card-amber::before { background: #D98E04; } .card-purple::before { background: #C45A2C; } .card-coral::before { background: #E07A52; } .card-blue::before { background: #1565C0; } .card-teal::before { background: #4F7F63; } .card-sunset::before { background: #E8B45A; } .card-red::before { background: #A63A2C; } .card-sand::before { background: #E8DCC2; } .card-stone::before { background: #BFAF9B; } .card-forest::before { background: #3E5F4A; } .card-gold::before { background: #D9A441; } /* ========================================================= */ /* ICON + TITLES */ /* ========================================================= */ .africa-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .africa-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #3B2F2F; margin-bottom: 18px; } /* Layer Titles */ .africa-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #3B2F2F; margin-bottom: 10px; } /* Layer Text */ .africa-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #2E4F3F; margin-bottom: 10px; } .africa-cruise-price-layer-note { font-size: 0.95rem; color: #4F7F63; margin-bottom: 18px; } /* Cabin List */ .africa-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .africa-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #3B2F2F; padding-left: 14px; position: relative; } .africa-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #C45A2C; font-size: 0.9rem; } /* ========================================================= */ /* ⭐ LIGHT HOVER COLOURS — TEXT REMAINS READABLE */ /* ========================================================= */ .card-green:hover { background: #F3E3C2; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(243,227,194,0.55); } .card-amber:hover { background: #E9F2E6; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(233,242,230,0.55); } .card-purple:hover { background: #E3ECF8; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(227,236,248,0.55); } .card-coral:hover { background: #F8E7E1; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(248,231,225,0.55); } .card-blue:hover { background: #FFF2D6; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(255,242,214,0.55); } .card-teal:hover { background: #F4E4E4; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(244,228,228,0.55); } .card-sunset:hover { background: #ECE8F6; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(236,232,246,0.55); } .card-red:hover { background: #FCE9E3; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(252,233,227,0.55); } .card-sand:hover { background: #FAF3E4; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(250,243,228,0.55); } .card-stone:hover { background: #EFE8DD; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(239,232,221,0.55); } .card-forest:hover { background: #E7EFEA; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(231,239,234,0.55); } .card-gold:hover { background: #FFF4D8; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(255,244,216,0.55); } /* Responsive */ @media (max-width: 700px) { .africa-cruise-price-title { font-size: 2.2rem; } .africa-cruise-price-intro { font-size: 1.1rem; } .africa-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — AFRICA CRUISE BEST VALUE TIPS (CSS) */ /* ========================================================= */ .section-19 { padding: 80px 0; background: #F8F4EC; /* Africa sand */ } .section-19-wrapper { max-width: 1300px; margin: 0 auto; } .section-19 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-19 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR AFRICA GRADIENT PALETTE */ /* ========================================================= */ .card-19-1 { background: linear-gradient(135deg, #C45A2C, #E07A52); } .card-19-2 { background: linear-gradient(135deg, #D98E04, #E8B45A); } .card-19-3 { background: linear-gradient(135deg, #4F7F63, #2E4F3F); } .card-19-4 { background: linear-gradient(135deg, #1565C0, #4F7F63); } .card-19-5 { background: linear-gradient(135deg, #A63A2C, #C45A2C); } .card-19-6 { background: linear-gradient(135deg, #E8B45A, #D98E04); } .card-19-7 { background: linear-gradient(135deg, #3E5F4A, #4F7F63); } .card-19-8 { background: linear-gradient(135deg, #E07A52, #C45A2C); } .card-19-9 { background: linear-gradient(135deg, #E8DCC2, #D9A441); } .card-19-10 { background: linear-gradient(135deg, #4F7F63, #3E5F4A); } .card-19-11 { background: linear-gradient(135deg, #1565C0, #283593); } .card-19-12 { background: linear-gradient(135deg, #D98E04, #E8B45A); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-19:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* RESPONSIVE */ @media (max-width: 1200px) { .value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 20 — Africa Cultural Immersion Experiences (CSS) */ /* ========================================================= */ .section-20 { padding: 80px 0; background: #F8F4EC; /* Africa sand */ } .section-20-wrapper { max-width: 1300px; margin: 0 auto; } .section-20 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-20 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR AFRICA GRADIENT PALETTE */ /* ========================================================= */ .card-20-1 { background: linear-gradient(135deg, #C45A2C, #E07A52); } .card-20-2 { background: linear-gradient(135deg, #D98E04, #E8B45A); } .card-20-3 { background: linear-gradient(135deg, #4F7F63, #2E4F3F); } .card-20-4 { background: linear-gradient(135deg, #1565C0, #4F7F63); } .card-20-5 { background: linear-gradient(135deg, #A63A2C, #C45A2C); } .card-20-6 { background: linear-gradient(135deg, #E8B45A, #D98E04); } .card-20-7 { background: linear-gradient(135deg, #3E5F4A, #4F7F63); } .card-20-8 { background: linear-gradient(135deg, #E07A52, #C45A2C); } .card-20-9 { background: linear-gradient(135deg, #E8DCC2, #D9A441); } .card-20-10 { background: linear-gradient(135deg, #4F7F63, #3E5F4A); } .card-20-11 { background: linear-gradient(135deg, #1565C0, #283593); } .card-20-12 { background: linear-gradient(135deg, #D98E04, #E8B45A); } /* ========================================================= */ /* HOVER EFFECTS — COLOUR SHIFT + LIFT */ /* ========================================================= */ .hover-20:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* Colour shift on hover */ .card-20-1:hover { background: linear-gradient(135deg, #E07A52, #C45A2C); } .card-20-2:hover { background: linear-gradient(135deg, #E8B45A, #D98E04); } .card-20-3:hover { background: linear-gradient(135deg, #2E4F3F, #4F7F63); } .card-20-4:hover { background: linear-gradient(135deg, #4F7F63, #1565C0); } .card-20-5:hover { background: linear-gradient(135deg, #C45A2C, #A63A2C); } .card-20-6:hover { background: linear-gradient(135deg, #D98E04, #E8B45A); } .card-20-7:hover { background: linear-gradient(135deg, #4F7F63, #3E5F4A); } .card-20-8:hover { background: linear-gradient(135deg, #C45A2C, #E07A52); } .card-20-9:hover { background: linear-gradient(135deg, #D9A441, #E8DCC2); } .card-20-10:hover { background: linear-gradient(135deg, #3E5F4A, #4F7F63); } .card-20-11:hover { background: linear-gradient(135deg, #283593, #1565C0); } .card-20-12:hover { background: linear-gradient(135deg, #E8B45A, #D98E04); } /* RESPONSIVE */ @media (max-width: 1200px) { .immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 21 — Africa Wildlife & Nature Encounters (CSS) */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #F8F4EC; } .section-21-wrapper { max-width: 1300px; margin: 0 auto; } .section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .africa-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #3B2F2F; } .africa-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E4F3F; opacity: 0.95; } /* IMAGE BLOCK */ .wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — AFRICA WILDLIFE */ .wildlife-image-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/africa-dolphins.webp'); } .wildlife-image-sea-turtle { background-image: url('../cruise-images/cruise-region-subpages-images/africa-sea-turtle.webp'); } .wildlife-image-coral-reef { background-image: url('../cruise-images/cruise-region-subpages-images/africa-coral-reef.webp'); } .wildlife-image-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/africa-rainforest.webp'); } .wildlife-image-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/africa-national-park.webp'); } .wildlife-image-birdwatching { background-image: url('../cruise-images/cruise-region-subpages-images/africa-birdwatching.webp'); } .wildlife-image-island-ecosystem { background-image: url('../cruise-images/cruise-region-subpages-images/africa-island-ecosystem.webp'); } .wildlife-image-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/africa-mangrove.webp'); } .wildlife-image-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/africa-mountains.webp'); } .wildlife-image-wildlife-encounter { background-image: url('../cruise-images/cruise-region-subpages-images/africa-wildlife-encounter.webp'); } .wildlife-image-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/africa-eco-tour.webp'); } .wildlife-image-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/africa-nature-photography.webp'); } /* GRADIENTS — AFRICA PALETTE */ .card-21-1 { background: linear-gradient(135deg, #C45A2C, #E07A52); } .card-21-2 { background: linear-gradient(135deg, #D98E04, #E8B45A); } .card-21-3 { background: linear-gradient(135deg, #A8D5BA, #CFE8D9); } .card-21-4 { background: linear-gradient(135deg, #9EC7F5, #C9E1FF); } .card-21-5 { background: linear-gradient(135deg, #F3C59A, #F8E0C4); } .card-21-6 { background: linear-gradient(135deg, #E8B45A, #D98E04); } .card-21-7 { background: linear-gradient(135deg, #B7E4D8, #D9F3EC); } .card-21-8 { background: linear-gradient(135deg, #E07A52, #C45A2C); } .card-21-9 { background: linear-gradient(135deg, #E8DCC2, #D9A441); } .card-21-10 { background: linear-gradient(135deg, #F5B7C8, #FAD9E4); } .card-21-11 { background: linear-gradient(135deg, #A9D8F5, #D4ECFF); } .card-21-12 { background: linear-gradient(135deg, #D98E04, #E8B45A); } /* HOVER */ .hover-21:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Africa Cultural Experiences & Traditions (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #F8F4EC; } .section-22-wrapper { max-width: 1300px; margin: 0 auto; } .section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .africa-cultural-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #3B2F2F; } .africa-cultural-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E4F3F; opacity: 0.95; } /* IMAGE BLOCK */ .culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — AFRICA CULTURE */ .culture-image-ceremonies { background-image: url('../cruise-images/cruise-region-subpages-images/africa-ceremonies.webp'); } .culture-image-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/africa-handicrafts.webp'); } .culture-image-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/africa-street-food.webp'); } .culture-image-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/africa-architecture.webp'); } .culture-image-performances { background-image: url('../cruise-images/cruise-region-subpages-images/africa-performances.webp'); } .culture-image-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/africa-festivals.webp'); } .culture-image-markets { background-image: url('../cruise-images/cruise-region-subpages-images/africa-markets.webp'); } .culture-image-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/africa-clothing.webp'); } .culture-image-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/africa-workshops.webp'); } .culture-image-temples { background-image: url('../cruise-images/cruise-region-subpages-images/africa-temples.webp'); } .culture-image-villages { background-image: url('../cruise-images/cruise-region-subpages-images/africa-villages.webp'); } .culture-image-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/africa-storytelling.webp'); } /* GRADIENTS — LIGHT AFRICA PALETTE */ .card-22-1 { background: linear-gradient(135deg, #E8C6E8, #F4DDF4); } .card-22-2 { background: linear-gradient(135deg, #F7D1B1, #FBE5D4); } .card-22-3 { background: linear-gradient(135deg, #F9E3B0, #FFF2D2); } .card-22-4 { background: linear-gradient(135deg, #C9E1FF, #E4F0FF); } .card-22-5 { background: linear-gradient(135deg, #FAD1DC, #FCE4EB); } .card-22-6 { background: linear-gradient(135deg, #D9F3EC, #ECFFF9); } .card-22-7 { background: linear-gradient(135deg, #F8E8C8, #FFF4DF); } .card-22-8 { background: linear-gradient(135deg, #EBD4F8, #F7E9FF); } .card-22-9 { background: linear-gradient(135deg, #D8F5D8, #ECFFEC); } .card-22-10 { background: linear-gradient(135deg, #D4E3F8, #EAF2FF); } .card-22-11 { background: linear-gradient(135deg, #F6E4C8, #FFF3DF); } .card-22-12 { background: linear-gradient(135deg, #F9D6C8, #FFE8DF); } /* HOVER */ .hover-22:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Africa Festivals & Seasonal Events (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #F8F4EC; } .section-23-wrapper { max-width: 1300px; margin: 0 auto; } .section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .africa-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #3B2F2F; } .africa-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E4F3F; opacity: 0.95; } /* IMAGE BLOCK */ .festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — AFRICA FESTIVALS */ .festival-image-new-year { background-image: url('../cruise-images/cruise-region-subpages-images/africa-new-year.webp'); } .festival-image-beach-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-beach-festival.webp'); } .festival-image-dance-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-dance-festival.webp'); } .festival-image-lantern-display { background-image: url('../cruise-images/cruise-region-subpages-images/africa-lantern-display.webp'); } .festival-image-harvest { background-image: url('../cruise-images/cruise-region-subpages-images/africa-harvest.webp'); } .festival-image-music-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-music-festival.webp'); } .festival-image-parade { background-image: url('../cruise-images/cruise-region-subpages-images/africa-parade.webp'); } .festival-image-flower-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-flower-festival.webp'); } .festival-image-heritage-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-heritage-festival.webp'); } .festival-image-food-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-food-festival.webp'); } .festival-image-art-festival { background-image: url('../cruise-images/cruise-region-subpages-images/africa-art-festival.webp'); } .festival-image-community-celebration { background-image: url('../cruise-images/cruise-region-subpages-images/africa-community-celebration.webp'); } /* GRADIENTS — LIGHT AFRICA PALETTE */ .card-23-1 { background: linear-gradient(135deg, #F9D6C8, #FFE8DF); } .card-23-2 { background: linear-gradient(135deg, #F8E4C4, #FFF3DF); } .card-23-3 { background: linear-gradient(135deg, #FAD1DC, #FCE4EB); } .card-23-4 { background: linear-gradient(135deg, #D4E3F8, #EAF2FF); } .card-23-5 { background: linear-gradient(135deg, #F6E4C8, #FFF3DF); } .card-23-6 { background: linear-gradient(135deg, #D9F3EC, #ECFFF9); } .card-23-7 { background: linear-gradient(135deg, #F8E8C8, #FFF4DF); } .card-23-8 { background: linear-gradient(135deg, #EBD4F8, #F7E9FF); } .card-23-9 { background: linear-gradient(135deg, #F9E3B0, #FFF2D2); } .card-23-10 { background: linear-gradient(135deg, #F7D1B1, #FBE5D4); } .card-23-11 { background: linear-gradient(135deg, #D8F5D8, #ECFFEC); } .card-23-12 { background: linear-gradient(135deg, #E8C6E8, #F4DDF4); } /* HOVER */ .hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Africa Cruise Cuisine & Dining Highlights */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #F8F4EC; } .section-24-wrapper { max-width: 1300px; margin: 0 auto; } .section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .africa-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #3B2F2F; } .africa-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E4F3F; opacity: 0.95; } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — AFRICA CUISINE */ .cuisine-image-south-african { background-image: url('../cruise-images/cruise-region-subpages-images/africa-south-african-cuisine.webp'); } .cuisine-image-mozambican { background-image: url('../cruise-images/cruise-region-subpages-images/africa-mozambican-cuisine.webp'); } .cuisine-image-swahili { background-image: url('../cruise-images/cruise-region-subpages-images/africa-swahili-cuisine.webp'); } .cuisine-image-malagasy { background-image: url('../cruise-images/cruise-region-subpages-images/africa-malagasy-cuisine.webp'); } .cuisine-image-mauritian { background-image: url('../cruise-images/cruise-region-subpages-images/africa-mauritian-cuisine.webp'); } .cuisine-image-seychellois { background-image: url('../cruise-images/cruise-region-subpages-images/africa-seychellois-cuisine.webp'); } .cuisine-image-coastal-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/africa-coastal-seafood.webp'); } .cuisine-image-fusion { background-image: url('../cruise-images/cruise-region-subpages-images/africa-fusion-dining.webp'); } /* GRADIENTS — LIGHT AFRICA PALETTE */ .card-24-1 { background: linear-gradient(135deg, #F8E4C4, #FFF3DF); } .card-24-2 { background: linear-gradient(135deg, #F9D6C8, #FFE8DF); } .card-24-3 { background: linear-gradient(135deg, #FAD1DC, #FCE4EB); } .card-24-4 { background: linear-gradient(135deg, #D9F3EC, #ECFFF9); } .card-24-5 { background: linear-gradient(135deg, #F7D1B1, #FBE5D4); } .card-24-6 { background: linear-gradient(135deg, #EBD4F8, #F7E9FF); } .card-24-7 { background: linear-gradient(135deg, #F8E8C8, #FFF4DF); } .card-24-8 { background: linear-gradient(135deg, #D8F5D8, #ECFFEC); } /* HOVER */ .hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Africa Shore Excursions (CSS) */ /* ========================================================= */ .section-25 { padding: 80px 0; background: #F8F4EC; } .section-25-wrapper { max-width: 1300px; margin: 0 auto; } .section-25 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .section-25 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4F7F63; margin-bottom: 50px; } /* GRID */ .section-25 .excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .section-25 .excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; opacity: 0; transform: translateY(20px); /* FULL BLEED FIX */ padding: 0; border: none; } /* IMAGE BLOCK — FULL BLEED */ .section-25 .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; } /* TEXT — CENTERED */ .section-25 .excursion-card h3, .section-25 .excursion-card p { text-align: center; width: 100%; margin-left: 0; margin-right: 0; position: relative; z-index: 20; } .section-25 .excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 0 10px 0; color: #3B2F2F; } .section-25 .excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 0 20px 0; color: #2E4F3F; opacity: 0.95; } /* REVEAL ANIMATION */ .section-25.region-reveal-active .excursion-card.card-25-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — AFRICA */ .excursion-image-wildlife-nature { background-image: url('../cruise-images/cruise-region-subpages-images/africa-wildlife-nature-tour.webp'); } .excursion-image-coastal-city { background-image: url('../cruise-images/cruise-region-subpages-images/africa-coastal-city-highlights.webp'); } .excursion-image-island-beach { background-image: url('../cruise-images/cruise-region-subpages-images/africa-island-beach-excursion.webp'); } .excursion-image-cultural-heritage { background-image: url('../cruise-images/cruise-region-subpages-images/africa-cultural-heritage-tour.webp'); } .excursion-image-food-market { background-image: url('../cruise-images/cruise-region-subpages-images/africa-food-market-tour.webp'); } .excursion-image-boat-lagoon { background-image: url('../cruise-images/cruise-region-subpages-images/africa-boat-lagoon-cruise.webp'); } .excursion-image-adventure { background-image: url('../cruise-images/cruise-region-subpages-images/africa-adventure-excursion.webp'); } .excursion-image-village-visit { background-image: url('../cruise-images/cruise-region-subpages-images/africa-village-visit.webp'); } /* HOVER */ .hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .section-25 .excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .section-25 .excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .section-25 .excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Africa Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .africa-transfers-section { padding: 80px 0; background: #F8F4EC; } .africa-transfers-inner { max-width: 1300px; margin: 0 auto; } .africa-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .africa-transfers-intro { font-size: 1.15rem; text-align: center; color: #4F7F63; margin-bottom: 20px; } /* GRID */ .africa-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .africa-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #1a1a1a; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #444; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; } /* GRADIENTS — Africa Palette */ .transfer-card-city { background: linear-gradient(135deg, #42a5f5, #1e88e5); color: #fff; } .transfer-card-airport { background: linear-gradient(135deg, #66bb6a, #43a047); color: #fff; } .transfer-card-cruiseline { background: linear-gradient(135deg, #ce93d8, #ba68c8); color: #fff; } .transfer-card-local { background: linear-gradient(135deg, #ffa726, #fb8c00); color: #fff; } .transfer-card-access { background: linear-gradient(135deg, #29b6f6, #039be5); color: #fff; } .transfer-card-planning { background: linear-gradient(135deg, #d7ccc8, #a1887f); color: #fff; } /* HOVER */ .africa-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .africa-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .africa-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Africa Cruise FAQ (CSS) */ /* ========================================================= */ .africa-faq-section { padding: 80px 0; background: #ffffff; } .africa-faq-inner { max-width: 1100px; margin: 0 auto; } .africa-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #3B2F2F; } .africa-faq-intro { font-size: 1.15rem; text-align: center; color: #4F7F63; margin-bottom: 40px; } /* Accordion Container */ .africa-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .africa-faq-item { background: #F8F4EC; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .africa-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #3B2F2F; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .africa-faq-question:hover { background: #EFE8D9; } /* Arrow Icon */ .africa-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .africa-faq-item.active .africa-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .africa-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .africa-faq-answer p { font-size: 1rem; color: #444; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .africa-faq-item.active .africa-faq-answer { max-height: 300px; } /* Responsive */ @media (max-width: 800px) { .africa-faq-title { font-size: 2rem; } .africa-faq-question { font-size: 1.05rem; } } /* ===================================================================== MIDDLE‑EAST CRUISE GUIDE SUB-PAGE Applies ONLY to: ======================================================================= */ /* --------------------------------------------- 1. HERO BACKGROUND (Middle‑East hero image) --------------------------------------------- */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/middle-east-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .hero-region { min-height: 480px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /*--------------------------------------------- SECTION 4 — Overview (Middle‑East) ---------------------------------------------*/ .section-overview { text-align: center; } .section-overview .section-title { font-size: 2rem; font-weight: 700; color: #0E3A5D; /* Deep Oasis Blue */ margin-bottom: 20px; text-align: center; width: 100%; } .section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #0E3A5D; /* Deep Oasis Blue */ max-width: 820px; margin: 0 auto 32px; } .overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .overview-highlights .highlight-item { background: #F2E6D8; /* Sandstone Beige */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #0E3A5D; /* Deep Oasis Blue */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .highlight-icon { color: #D4A056; /* Desert Gold */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Middle‑East) --------------------------------------------- */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #F2E6D8; /* Sandstone Beige */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #0E3A5D; /* Deep Oasis Blue */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #0E3A5D; /* Deep Oasis Blue */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE — FIX APPLIED HERE */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-card { background: #F2E6D8; /* Sandstone Beige — FIXED */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #0E3A5D; /* Deep Oasis Blue */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #3A2C1F; /* Warm neutral text */ text-align: center; } /* TAGS */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .tag { background: #D4A056; /* Desert Gold */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #0E3A5D; /* Deep Oasis Blue */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .highlight-icon { color: #D4A056; /* Desert Gold */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-link { background: #0E3A5D; /* Deep Oasis Blue */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .secondary-btn { background: #B46C3A; /* Copper Ember */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #08263A; transform: translateY(-2px); } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .secondary-btn:hover { background: #8A4F29; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.middle-east-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #D4A056; /* Desert Gold */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — Middle‑East Cruise Experience Overview */ /* ========================================================= */ .me-experience-section { width: 100%; padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-experience-section.revealed { opacity: 1; transform: translateY(0); } .me-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .me-experience-header { text-align: center; margin-bottom: 40px; } .me-experience-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; /* Deep Oasis Blue */ margin-bottom: 20px; } .me-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; /* Warm Neutral */ margin-bottom: 14px; } /* List layout */ .me-experience-list { list-style: none; margin: 0; padding: 0; } .me-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0E3A5D; /* Deep Oasis Blue */ } /* Emoji icon */ .me-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .me-text { display: inline-block; } /* Country name styling */ .me-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .me-country-uae { color: #B46C3A; /* Copper Ember */ } .me-country-qatar { color: #0E3A5D; /* Deep Oasis Blue */ } .me-country-oman { color: #D4A056; /* Desert Gold */ } .me-country-bahrain { color: #8A4F29; /* Warm Brown */ } .me-country-saudi { color: #6A3E2E; /* Desert Clay */ } .me-country-atmosphere { color: #0E3A5D; /* Deep Oasis Blue */ } .me-country-scenic { color: #2E7D32; /* Scenic Green */ } /* ========================================================= */ /* SECTION 7 — Middle‑East Seasonal Cruise Guide */ /* ========================================================= */ .me-seasonal-guide-section { width: 100%; padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .me-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .me-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .me-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; /* Deep Oasis Blue */ margin-bottom: 20px; } .me-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; /* Warm Neutral */ margin-bottom: 14px; } /* List layout */ .me-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .me-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0E3A5D; /* Deep Oasis Blue */ } /* Emoji icon */ .me-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .me-season-text { display: inline-block; } /* Season name styling */ .me-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .me-season-winter { color: #D4A056; /* Desert Gold */ } .me-season-spring { color: #2E7D32; /* Green */ } .me-season-summer { color: #C62828; /* Heat Red */ } .me-season-autumn { color: #8A4F29; /* Warm Brown */ } .me-season-festivals { color: #6A3E2E; /* Desert Clay */ } .me-season-scenic { color: #00838F; /* Gulf Teal */ } /* ========================================================= */ /* SECTION 8 — Middle‑East Best Cruise Months Chart */ /* ========================================================= */ .me-best-months-section { width: 100%; padding: 80px 0; background: #F2E6D8; color: #0E3A5D; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-best-months-section.revealed { opacity: 1; transform: translateY(0); } .me-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .me-best-months-header { text-align: center; margin-bottom: 40px; } .me-best-months-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 20px; } .me-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; margin-bottom: 14px; } /* Chart container */ .me-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header */ .me-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #0E3A5D; margin-bottom: 12px; text-align: center; } .me-months-chart-header span { font-size: 0.85rem; } /* Chart label */ .me-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #0E3A5D; } /* Chart rows */ .me-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* REGION-SCOPED BAR STYLES */ .me-best { background: linear-gradient(135deg, #2E7D32, #66BB6A); border-radius: 4px; height: 18px; } .me-good { background: linear-gradient(135deg, #D4A056, #F2E6D8); border-radius: 4px; height: 18px; } .me-avoid { background: linear-gradient(135deg, #C62828, #EF5350); border-radius: 4px; height: 18px; } /* Legend */ .me-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .me-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .me-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .me-best-months-list { list-style: none; margin: 0; padding: 0; } .me-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0E3A5D; } .me-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .me-best-text { display: inline-block; } .me-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .me-best-winter { color: #D4A056; } .me-best-spring { color: #2E7D32; } .me-best-summer { color: #C62828; } .me-best-autumn { color: #8A4F29; } .me-best-festivals { color: #6A3E2E; } .me-best-scenic { color: #00838F; } /* ========================================================= */ /* SECTION 9 — Middle‑East Cruise Tips & Planning Guide */ /* ========================================================= */ .me-tips-section { width: 100%; padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-tips-section.revealed { opacity: 1; transform: translateY(0); } .me-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .me-tips-header { text-align: center; margin-bottom: 40px; } .me-tips-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 20px; } .me-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; margin-bottom: 14px; } /* Icons Row */ .me-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #0E3A5D; } /* Gradient Divider */ .me-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0E3A5D, #D4A056, #0E3A5D); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .me-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .me-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .me-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .me-tip-planning { color: #0E3A5D; } .me-tip-packing { color: #B46C3A; } .me-tip-docs { color: #6A3E2E; } .me-tip-weather { color: #D4A056; } .me-tip-port { color: #2E7D32; } /* Do's & Don'ts */ .me-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .me-tips-dos, .me-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .me-tips-dos h3, .me-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #0E3A5D; } .me-tips-dos ul, .me-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .me-insider-tips { margin-top: 40px; } .me-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #0E3A5D; } .me-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 10 — Small‑Ship & Boutique Cruising (Middle‑East) */ /* ========================================================= */ .me-boutique-section { width: 100%; padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-boutique-section.revealed { opacity: 1; transform: translateY(0); } .me-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .me-boutique-header { text-align: center; margin-bottom: 40px; } .me-boutique-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 20px; } .me-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; margin-bottom: 14px; } /* Icon Row */ .me-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0E3A5D; } /* Cards container */ .me-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .me-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .me-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .me-boutique-card-gold { background: linear-gradient(135deg, #D4A056, #F2E6D8); } .me-boutique-card-blue { background: linear-gradient(135deg, #0E3A5D, #1F5C85); } .me-boutique-card-copper { background: linear-gradient(135deg, #B46C3A, #8A4F29); } .me-boutique-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .me-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .me-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .me-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Colourful divider */ .me-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0E3A5D, #D4A056, #B46C3A, #2E7D32); border-radius: 3px; margin: 40px 0; } /* List section */ .me-boutique-list-wrapper { margin-top: 10px; } .me-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0E3A5D; } .me-boutique-list { list-style: none; margin: 0; padding: 0; } .me-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #0E3A5D; } .me-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .me-boutique-list-text { display: inline-block; } /* Colour labels */ .me-boutique-label-gold { color: #D4A056; } .me-boutique-label-blue { color: #0E3A5D; } .me-boutique-label-copper { color: #B46C3A; } .me-boutique-label-green { color: #2E7D32; } /* Responsive */ @media (max-width: 900px) { .me-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 11 — Middle‑East Port Profiles */ /* ========================================================= */ .me-port-section { width: 100%; padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-port-section.revealed { opacity: 1; transform: translateY(0); } .me-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .me-port-header { text-align: center; margin-bottom: 40px; } .me-port-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 20px; } .me-port-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; margin-bottom: 14px; } /* Icon Row */ .me-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0E3A5D; } /* Cards container */ .me-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .me-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .me-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card Body Layout */ .me-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants */ .me-port-card-blue { background: linear-gradient(135deg, #0E3A5D, #1F5C85); } .me-port-card-gold { background: linear-gradient(135deg, #D4A056, #F2E6D8); } .me-port-card-copper { background: linear-gradient(135deg, #B46C3A, #8A4F29); } .me-port-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .me-port-card-purple { background: linear-gradient(135deg, #6A3E2E, #8A4F29); } .me-port-card-teal { background: linear-gradient(135deg, #00838F, #4DB6AC); } .me-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .me-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .me-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal Animation */ .me-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Colourful divider */ .me-port-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0E3A5D, #D4A056, #B46C3A, #2E7D32, #00838F); border-radius: 3px; margin: 40px 0; } /* List section */ .me-port-list-wrapper { margin-top: 10px; } .me-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0E3A5D; } .me-port-list { list-style: none; margin: 0; padding: 0; } .me-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #0E3A5D; } .me-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .me-port-label-blue { color: #0E3A5D; } .me-port-label-gold { color: #D4A056; } .me-port-label-green { color: #2E7D32; } .me-port-label-copper { color: #B46C3A; } /* Responsive */ @media (max-width: 900px) { .me-port-cards { grid-template-columns: 1fr; } } .me-port-section.revealed { opacity: 1 !important; } /* ========================================================= */ /* SECTION 12 — Middle‑East Cruise Port Comparison Grid */ /* ========================================================= */ .me-port-compare-section { width: 100%; padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .me-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .me-port-compare-header { text-align: center; margin-bottom: 50px; } .me-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 20px; } .me-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #3A2C1F; max-width: 800px; margin: 0 auto; } /* Grid container */ .me-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header { background: #E3D6C4; font-weight: 700; color: #0E3A5D; } /* Left colour accent */ .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-blue::before { background: #0E3A5D; } .compare-row-gold::before { background: #D4A056; } .compare-row-copper::before { background: #B46C3A; } .compare-row-green::before { background: #2E7D32; } .compare-row-purple::before { background: #6A3E2E; } .compare-row-teal::before { background: #00838F; } .compare-row-amber::before { background: #FF8F00; } .compare-row-red::before { background: #C62828; } /* Alternating row backgrounds */ .compare-grid-row:nth-child(even) { background: #F8F2E8; } /* Hover effects */ .compare-row-blue:hover, .compare-row-gold:hover, .compare-row-copper:hover, .compare-row-green:hover, .compare-row-purple:hover, .compare-row-teal:hover, .compare-row-amber:hover, .compare-row-red:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-blue:hover { background: rgba(14, 58, 93, 0.10); } .compare-row-gold:hover { background: rgba(212, 160, 86, 0.10); } .compare-row-copper:hover { background: rgba(180, 108, 58, 0.10); } .compare-row-green:hover { background: rgba(46, 125, 50, 0.10); } .compare-row-purple:hover { background: rgba(106, 62, 46, 0.10); } .compare-row-teal:hover { background: rgba(0, 131, 143, 0.10); } .compare-row-amber:hover { background: rgba(255, 143, 0, 0.10); } .compare-row-red:hover { background: rgba(198, 40, 40, 0.10); } /* Reveal animation */ .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .me-port-compare-insights { margin-top: 40px; padding: 30px; background: #EBDCC6; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #0E3A5D; margin-bottom: 14px; } .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #3A2C1F; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header { display: none; } .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 13 — Middle‑East Embarkation vs Destination Ports */ /* ========================================================= */ .me-port-usage-section { padding: 80px 0; background: #F2E6D8; /* Sandstone Beige */ } .me-port-usage-inner { max-width: 1300px; margin: 0 auto; } .me-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0E3A5D; /* Deep Oasis Blue */ } .me-port-usage-intro { font-size: 1.15rem; text-align: center; color: #3A2C1F; /* Warm Neutral */ margin-bottom: 20px; } /* GRID */ .me-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .me-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* REGION-SCOPED BACKGROUND IMAGES */ .me-image-embarkation { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-embarkation-ports.webp'); } .me-image-destination { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-destination-ports.webp'); } .me-image-debarkation { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-debarkation-ports.webp'); } /* TEXT */ .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #FFFFFF; } .usage-card-text { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } .usage-card-note { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } /* GRADIENTS */ .usage-card-embarkation { background: linear-gradient(135deg, #0E3A5D, #1F5C85); /* Deep Oasis Blue */ } .usage-card-destination { background: linear-gradient(135deg, #2E7D32, #66BB6A); /* Scenic Green */ } .usage-card-debarkation { background: linear-gradient(135deg, #B46C3A, #8A4F29); /* Copper Ember */ } /* HOVER */ .me-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .me-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .me-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — Middle‑East Cruise Lines Overview Grid */ /* ========================================================= */ .me-cruise-lines-overview { width: 100%; padding: 90px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .me-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .me-cruise-lines-header { text-align: center; margin-bottom: 60px; } .me-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #0E3A5D; margin-bottom: 16px; } /* Cinematic gradient underline */ .me-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #0E3A5D, #B46C3A, #2E7D32); } .me-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #3A2C1F; max-width: 850px; margin: 0 auto; } /* Grid */ .me-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .me-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .me-cruise-line-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .me-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-blue::before { background: #0E3A5D; } .card-gold::before { background: #D4A056; } .card-teal::before { background: #00838F; } .card-green::before { background: #2E7D32; } .card-copper::before { background: #B46C3A; } .card-purple::before { background: #6A3E2E; } .card-indigo::before { background: #1F5C85; } .card-cyan::before { background: #4DB6AC; } .card-amber::before { background: #FF8F00; } .card-red::before { background: #C62828; } .card-brown::before { background: #8A4F29; } .card-overview::before { background: #6A3E2E; } /* Icon */ .me-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .me-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 12px; } /* Summary */ .me-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #3A2C1F; margin-bottom: 18px; } /* Points */ .me-cruise-line-points { list-style: none; padding: 0; margin: 0; } .me-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #0E3A5D; padding-left: 14px; position: relative; } .me-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #B46C3A; font-size: 0.9rem; } /* Hover */ .me-cruise-line-card:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .me-cruise-lines-title { font-size: 2.2rem; } .me-cruise-lines-intro { font-size: 1.1rem; } .me-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 15 — Middle‑East Cruise Ship Types Overview */ /* ========================================================= */ .me-ship-types-overview { width: 100%; padding: 90px 0; background: #F2E6D8; /* Sandstone Beige */ color: #0E3A5D; /* Deep Oasis Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .me-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .me-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .me-ship-types-header { text-align: center; margin-bottom: 60px; } .me-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #0E3A5D; margin-bottom: 16px; } /* Cinematic gradient underline */ .me-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #0E3A5D, #B46C3A, #2E7D32); } .me-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #3A2C1F; max-width: 850px; margin: 0 auto; } /* Grid */ .me-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Ship Type Cards */ .me-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .me-ship-type-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .me-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-blue::before { background: #0E3A5D; } .card-teal::before { background: #00838F; } .card-gold::before { background: #D4A056; } .card-green::before { background: #2E7D32; } .card-copper::before { background: #B46C3A; } .card-purple::before { background: #6A3E2E; } .card-amber::before { background: #FF8F00; } .card-red::before { background: #C62828; } /* Icon */ .me-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .me-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #0E3A5D; margin-bottom: 12px; } /* Summary */ .me-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #3A2C1F; margin-bottom: 18px; } /* Points */ .me-ship-type-points { list-style: none; padding: 0; margin: 0; } .me-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #0E3A5D; padding-left: 14px; position: relative; } .me-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #B46C3A; font-size: 0.9rem; } /* Hover (premium glow) */ .me-ship-type-card:hover { background: rgba(242, 230, 216, 0.20); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .me-ship-types-title { font-size: 2.2rem; } .me-ship-types-intro { font-size: 1.1rem; } .me-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 16 — Middle‑East Cruise Duration Overview */ /* ========================================================= */ .middleeast-cruise-duration-overview { width: 100%; padding: 90px 0; background: #F4E8D2; /* Sandstone Beige */ color: #0A1A2F; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .middleeast-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .middleeast-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .middleeast-cruise-duration-header { text-align: center; margin-bottom: 60px; } .middleeast-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #0A1A2F; /* Deep Navy */ margin-bottom: 16px; } /* Cinematic gradient underline (Middle‑East palette) */ .middleeast-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #C9A34E, #0A1A2F, #1E6FAE); /* Desert Gold → Deep Navy → Oasis Blue */ } .middleeast-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #3A3A3A; max-width: 850px; margin: 0 auto; } /* Grid */ .middleeast-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .middleeast-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .middleeast-cruise-duration-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .middleeast-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets — Middle‑East palette */ .card-gold::before { background: #C9A34E; } /* Desert Gold */ .card-sand::before { background: #D9C7A3; } /* Soft Sand */ .card-navy::before { background: #0A1A2F; } /* Deep Navy */ .card-oasis::before { background: #1E6FAE; } /* Oasis Blue */ .card-bronze::before { background: #8C6B3F; } /* Warm Bronze */ .card-desert::before { background: #B58A4A; } /* Desert Tone */ .card-deepblue::before{ background: #12385A; } /* Deep Blue Accent */ .card-festival::before{ background: #C96B3E; } /* Warm Festive Accent */ /* Icon */ .middleeast-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .middleeast-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 12px; } /* Summary */ .middleeast-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #3A3A3A; margin-bottom: 18px; } /* Points */ .middleeast-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .middleeast-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #0A1A2F; padding-left: 14px; position: relative; } .middleeast-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #C9A34E; /* Desert Gold accent */ font-size: 0.9rem; } /* ⭐ Colour‑Tinted Hover (Premium Glow — Middle‑East, lighter colours) */ .card-gold:hover { background: #FFF3D6; /* Light desert gold */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-sand:hover { background: #FBF4E8; /* Very light sand */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-navy:hover { background: #E3E8F0; /* Soft navy wash */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-oasis:hover { background: #E4F1FB; /* Light oasis blue */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-bronze:hover { background: #F6EBDD; /* Pale bronze tone */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-desert:hover { background: #F8EAD6; /* Soft desert wash */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-deepblue:hover { background: #E1EDF7; /* Light deep‑blue tint */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-festival:hover { background: #FFE8DC; /* Warm festive pastel */ transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .middleeast-cruise-duration-title { font-size: 2.2rem; } .middleeast-cruise-duration-intro { font-size: 1.1rem; } .middleeast-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 17 — Middle‑East Cruise Price Range Overview */ /* ========================================================= */ .middleeast-cruise-price-overview { width: 100%; padding: 90px 0; background: #F4E8D2; /* Sandstone Beige */ color: #0A1A2F; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .middleeast-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .middleeast-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .middleeast-cruise-price-header { text-align: center; margin-bottom: 60px; } .middleeast-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #0A1A2F; margin-bottom: 16px; } .middleeast-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #C9A34E, #0A1A2F, #1E6FAE, #8C6B3F); } .middleeast-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #3A3A3A; max-width: 850px; margin: 0 auto; } /* Grid */ .middleeast-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .middleeast-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .middleeast-cruise-price-card.visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .middleeast-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* 12‑colour Middle‑East palette */ .card-gold::before { background: #C9A34E; } /* Desert Gold */ .card-sand::before { background: #D9C7A3; } /* Soft Sand */ .card-navy::before { background: #0A1A2F; } /* Deep Navy */ .card-oasis::before { background: #1E6FAE; } /* Oasis Blue */ .card-bronze::before { background: #8C6B3F; } /* Warm Bronze */ .card-desert::before { background: #B58A4A; } /* Desert Tone */ .card-deepblue::before { background: #12385A; } /* Deep Blue Accent */ .card-festival::before { background: #C96B3E; } /* Warm Festive Accent */ .card-coral::before { background: #FF7F50; } /* Coral Accent */ .card-glacier::before { background: #71A6D2; } /* Cool Blue */ .card-sandstone::before { background: #D2B48C; } /* Sandstone */ .card-royalviolet::before{ background: #6A0DAD; } /* Royal Violet */ /* Icon + Titles */ .middleeast-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .middleeast-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 18px; } /* Layer Titles */ .middleeast-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .middleeast-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #3A3A3A; margin-bottom: 10px; } .middleeast-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .middleeast-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .middleeast-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #1F2A44; padding-left: 14px; position: relative; } .middleeast-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0A1A2F; font-size: 0.9rem; } /* Premium Hover Effects — lighter fills */ .card-gold:hover { background: #FFF3D6; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-sand:hover { background: #FBF4E8; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-navy:hover { background: #E3E8F0; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-oasis:hover { background: #E4F1FB; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-bronze:hover { background: #F6EBDD; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-desert:hover { background: #F8EAD6; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-deepblue:hover { background: #E1EDF7; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-festival:hover { background: #FFE8DC; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-coral:hover { background: #FFE5DB; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-glacier:hover { background: #E4F0FA; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-sandstone:hover { background: #F7E9D6; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } .card-royalviolet:hover { background: #EFE3FF; transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .middleeast-cruise-price-title { font-size: 2.2rem; } .middleeast-cruise-price-intro { font-size: 1.1rem; } .middleeast-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — Middle‑East Cruise Best Value Tips (CSS) */ /* ========================================================= */ .section-18 { padding: 80px 0; background: #F4E8D2; /* Sandstone Beige */ } .section-18-wrapper { max-width: 1300px; margin: 0 auto; } .section-18 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Navy */ } .section-18 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — MIDDLE‑EAST VERSION */ /* ========================================================= */ .me-card-18-1 { background: linear-gradient(135deg, #C9A34E, #D9C7A3); } /* Gold → Sand */ .me-card-18-2 { background: linear-gradient(135deg, #8C6B3F, #C9A34E); } /* Bronze → Gold */ .me-card-18-3 { background: linear-gradient(135deg, #1E6FAE, #8CC0E3); } /* Oasis Blue */ .me-card-18-4 { background: linear-gradient(135deg, #0A1A2F, #12385A); } /* Deep Navy */ .me-card-18-5 { background: linear-gradient(135deg, #B58A4A, #D9C7A3); } /* Desert Tone */ .me-card-18-6 { background: linear-gradient(135deg, #C96B3E, #E89A6C); } /* Warm Festive */ .me-card-18-7 { background: linear-gradient(135deg, #6A0DAD, #9D4EDD); } /* Royal Violet */ .me-card-18-8 { background: linear-gradient(135deg, #71A6D2, #A8CCE8); } /* Glacier Blue */ .me-card-18-9 { background: linear-gradient(135deg, #D2B48C, #E8D8B8); } /* Sandstone */ .me-card-18-10 { background: linear-gradient(135deg, #00B4B0, #4ED1CF); } /* Gulf Aqua */ .me-card-18-11 { background: linear-gradient(135deg, #5A4BD6, #7C6FF0); } /* Gulf Indigo */ .me-card-18-12 { background: linear-gradient(135deg, #E66767, #FF8A8A); } /* Warm Coral */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .me-hover-18:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 19 — Middle‑East Cultural Immersion (CSS) */ /* ========================================================= */ .section-19 { padding: 80px 0; background: #F4E8D2; /* Sandstone Beige */ } .section-19-wrapper { max-width: 1300px; margin: 0 auto; } .section-19 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Navy */ } .section-19 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — MIDDLE‑EAST VERSION */ /* ========================================================= */ .me-card-19-1 { background: linear-gradient(135deg, #C9A34E, #D9C7A3); } .me-card-19-2 { background: linear-gradient(135deg, #8C6B3F, #C9A34E); } .me-card-19-3 { background: linear-gradient(135deg, #1E6FAE, #8CC0E3); } .me-card-19-4 { background: linear-gradient(135deg, #0A1A2F, #12385A); } .me-card-19-5 { background: linear-gradient(135deg, #B58A4A, #D9C7A3); } .me-card-19-6 { background: linear-gradient(135deg, #C96B3E, #E89A6C); } .me-card-19-7 { background: linear-gradient(135deg, #6A0DAD, #9D4EDD); } .me-card-19-8 { background: linear-gradient(135deg, #71A6D2, #A8CCE8); } .me-card-19-9 { background: linear-gradient(135deg, #D2B48C, #E8D8B8); } .me-card-19-10 { background: linear-gradient(135deg, #00B4B0, #4ED1CF); } .me-card-19-11 { background: linear-gradient(135deg, #5A4BD6, #7C6FF0); } .me-card-19-12 { background: linear-gradient(135deg, #E66767, #FF8A8A); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .me-hover-19:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 20 — Middle‑East Wildlife & Nature Encounters */ /* ========================================================= */ .section-20 { padding: 80px 0; background: #F4E8D2; } .section-20-wrapper { max-width: 1300px; margin: 0 auto; } .section-20 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; } .section-20 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .wildlife-card { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .middle-east-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; } .middle-east-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #3A3A3A; opacity: 0.95; } /* IMAGE BLOCK */ .wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — MIDDLE‑EAST */ .wildlife-image-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-dolphins.webp'); } .wildlife-image-sea-turtle { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-sea-turtle.webp'); } .wildlife-image-coral-reef { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-coral-reef.webp'); } .wildlife-image-wadi { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-wadi-landscape.webp'); } .wildlife-image-desert-park { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-desert-park.webp'); } .wildlife-image-birdwatching { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-birdwatching.webp'); } .wildlife-image-island-ecosystem { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-island-ecosystem.webp'); } .wildlife-image-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-mangrove.webp'); } .wildlife-image-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-mountains.webp'); } .wildlife-image-wildlife-oryx { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-wildlife-oryx.webp'); } .wildlife-image-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-eco-tour.webp'); } .wildlife-image-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-nature-photography.webp'); } /* GRADIENTS */ .me-card-20-1 { background: linear-gradient(135deg, #1E6FAE, #8CC0E3); } .me-card-20-2 { background: linear-gradient(135deg, #C9A34E, #D9C7A3); } .me-card-20-3 { background: linear-gradient(135deg, #0097A7, #4ED1CF); } .me-card-20-4 { background: linear-gradient(135deg, #B58A4A, #E8D8B8); } .me-card-20-5 { background: linear-gradient(135deg, #8C6B3F, #C9A34E); } .me-card-20-6 { background: linear-gradient(135deg, #71A6D2, #A8CCE8); } .me-card-20-7 { background: linear-gradient(135deg, #D2B48C, #F4E8D2); } .me-card-20-8 { background: linear-gradient(135deg, #00B4B0, #4ED1CF); } .me-card-20-9 { background: linear-gradient(135deg, #5A4BD6, #7C6FF0); } .me-card-20-10 { background: linear-gradient(135deg, #6A0DAD, #9D4EDD); } .me-card-20-11 { background: linear-gradient(135deg, #C96B3E, #E89A6C); } .me-card-20-12 { background: linear-gradient(135deg, #E66767, #FF8A8A); } /* HOVER */ .me-hover-20:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 21 — Middle‑East Cultural Experiences (CSS) */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #F4E8D2; /* Sandstone Beige */ } .section-21-wrapper { max-width: 1300px; margin: 0 auto; } .section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Navy */ } .section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .culture-card { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .middle-east-cultural-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; } .middle-east-cultural-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #3A3A3A; opacity: 0.95; } /* IMAGE BLOCK */ .culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — MIDDLE‑EAST CULTURAL */ .culture-image-ceremonies { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-ceremonies.webp'); } .culture-image-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-handicrafts.webp'); } .culture-image-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-street-food.webp'); } .culture-image-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-architecture.webp'); } .culture-image-performances { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-performances.webp'); } .culture-image-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-festivals.webp'); } .culture-image-markets { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-markets.webp'); } .culture-image-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-clothing.webp'); } .culture-image-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-workshops.webp'); } .culture-image-temples { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-temples.webp'); } .culture-image-villages { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-villages.webp'); } .culture-image-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-storytelling.webp'); } /* GRADIENTS — MIDDLE‑EAST PALETTE */ .me-card-21-1 { background: linear-gradient(135deg, #C9A34E, #D9C7A3); } .me-card-21-2 { background: linear-gradient(135deg, #8C6B3F, #C9A34E); } .me-card-21-3 { background: linear-gradient(135deg, #0097A7, #4ED1CF); } .me-card-21-4 { background: linear-gradient(135deg, #1E6FAE, #8CC0E3); } .me-card-21-5 { background: linear-gradient(135deg, #6A0DAD, #9D4EDD); } .me-card-21-6 { background: linear-gradient(135deg, #C96B3E, #E89A6C); } .me-card-21-7 { background: linear-gradient(135deg, #D2B48C, #F4E8D2); } .me-card-21-8 { background: linear-gradient(135deg, #00B4B0, #4ED1CF); } .me-card-21-9 { background: linear-gradient(135deg, #5A4BD6, #7C6FF0); } .me-card-21-10 { background: linear-gradient(135deg, #B58A4A, #E8D8B8); } .me-card-21-11 { background: linear-gradient(135deg, #71A6D2, #A8CCE8); } .me-card-21-12 { background: linear-gradient(135deg, #E66767, #FF8A8A); } /* HOVER */ .me-hover-21:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Middle‑East Festivals & Seasonal Events (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #F4E8D2; } .section-22-wrapper { max-width: 1300px; margin: 0 auto; } .section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; } .section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .festival-card { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .middle-east-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; } .middle-east-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #3A3A3A; opacity: 0.95; } /* IMAGE BLOCK */ .festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — MIDDLE‑EAST FESTIVALS */ .festival-image-ramadan-evenings { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-ramadan-evenings.webp'); } .festival-image-eid-al-fitr { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-eid-al-fitr.webp'); } .festival-image-eid-al-adha { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-eid-al-adha.webp'); } .festival-image-hijri-new-year { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-hijri-new-year.webp'); } .festival-image-uae-national-day { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-uae-national-day.webp'); } .festival-image-saudi-national-day { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-saudi-national-day.webp'); } .festival-image-gcc-national-day { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-gcc-national-day.webp'); } .festival-image-red-sea-winter-season { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-red-sea-winter-season.webp'); } .festival-image-dubai-shopping-festival{ background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-dubai-shopping-festival.webp'); } .festival-image-souk-cultural-weeks { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-souk-cultural-weeks.webp'); } .festival-image-heritage-village { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-heritage-village.webp'); } .festival-image-falconry-camel-racing { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-falconry-camel-racing.webp'); } /* GRADIENTS — MIDDLE‑EAST PALETTE */ .me-card-22-1 { background: linear-gradient(135deg, #C9A34E, #D9C7A3); } .me-card-22-2 { background: linear-gradient(135deg, #8C6B3F, #C9A34E); } .me-card-22-3 { background: linear-gradient(135deg, #0097A7, #4ED1CF); } .me-card-22-4 { background: linear-gradient(135deg, #1E6FAE, #8CC0E3); } .me-card-22-5 { background: linear-gradient(135deg, #6A0DAD, #9D4EDD); } .me-card-22-6 { background: linear-gradient(135deg, #C96B3E, #E89A6C); } .me-card-22-7 { background: linear-gradient(135deg, #D2B48C, #F4E8D2); } .me-card-22-8 { background: linear-gradient(135deg, #00B4B0, #4ED1CF); } .me-card-22-9 { background: linear-gradient(135deg, #5A4BD6, #7C6FF0); } .me-card-22-10 { background: linear-gradient(135deg, #B58A4A, #E8D8B8); } .me-card-22-11 { background: linear-gradient(135deg, #71A6D2, #A8CCE8); } .me-card-22-12 { background: linear-gradient(135deg, #E66767, #FF8A8A); } /* HOVER */ .me-hover-22:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Middle‑East Cruise Cuisine (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #F4E8D2; } .section-23-wrapper { max-width: 1300px; margin: 0 auto; } .section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; } .section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .cuisine-card { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .middle-east-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; } .middle-east-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #3A3A3A; opacity: 0.95; } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES — MIDDLE‑EAST CUISINE */ .cuisine-image-gulf { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-gulf.webp'); } .cuisine-image-saudi { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-saudi.webp'); } .cuisine-image-omani { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-omani.webp'); } .cuisine-image-yemeni { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-yemeni.webp'); } .cuisine-image-levant { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-levant.webp'); } .cuisine-image-turkish { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-turkish.webp'); } .cuisine-image-iraqi { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-iraqi.webp'); } .cuisine-image-persian { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-persian.webp'); } .cuisine-image-north-african { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-north-african.webp'); } .cuisine-image-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-street-food.webp'); } .cuisine-image-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-seafood.webp'); } .cuisine-image-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-desserts.webp'); } /* GRADIENTS — MIDDLE‑EAST PALETTE */ .me-card-23-1 { background: linear-gradient(135deg, #C9A34E, #D9C7A3); } .me-card-23-2 { background: linear-gradient(135deg, #8C6B3F, #C9A34E); } .me-card-23-3 { background: linear-gradient(135deg, #0097A7, #4ED1CF); } .me-card-23-4 { background: linear-gradient(135deg, #1E6FAE, #8CC0E3); } .me-card-23-5 { background: linear-gradient(135deg, #6A0DAD, #9D4EDD); } .me-card-23-6 { background: linear-gradient(135deg, #C96B3E, #E89A6C); } .me-card-23-7 { background: linear-gradient(135deg, #D2B48C, #F4E8D2); } .me-card-23-8 { background: linear-gradient(135deg, #00B4B0, #4ED1CF); } .me-card-23-9 { background: linear-gradient(135deg, #5A4BD6, #7C6FF0); } .me-card-23-10 { background: linear-gradient(135deg, #B58A4A, #E8D8B8); } .me-card-23-11 { background: linear-gradient(135deg, #71A6D2, #A8CCE8); } .me-card-23-12 { background: linear-gradient(135deg, #E66767, #FF8A8A); } /* HOVER */ .me-hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Middle‑East Shore Excursions (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #F4E8D2; } .section-24-wrapper { max-width: 1300px; margin: 0 auto; } .section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; } .section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #3A3A3A; margin-bottom: 50px; } /* GRID */ .section-24 .excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .section-24 .excursion-card { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; opacity: 0; transform: translateY(20px); /* FULL BLEED FIX */ padding: 0; border: none; } /* IMAGE BLOCK — FULL BLEED */ .section-24 .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; } /* TEXT — CENTERED */ .section-24 .excursion-card h3, .section-24 .excursion-card p { text-align: center; width: 100%; margin-left: 0; margin-right: 0; position: relative; z-index: 20; } .section-24 .excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 0 10px 0; color: #0A1A2F; } .section-24 .excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 0 20px 0; color: #3A3A3A; opacity: 0.95; } /* REVEAL ANIMATION */ .section-24.region-reveal-active .excursion-card.card-24-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — MIDDLE‑EAST */ .excursion-image-heritage-tours { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-heritage-tours.webp'); } .excursion-image-city-highlights { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-city-highlights.webp'); } .excursion-image-desert-adventures { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-desert-adventures.webp'); } .excursion-image-coastal-beach { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-coastal-beach.webp'); } .excursion-image-souk-market { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-souk-market.webp'); } .excursion-image-mountain-wadi { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-mountain-wadi.webp'); } .excursion-image-wildlife-nature { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-wildlife-nature.webp'); } .excursion-image-boat-dhow { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-boat-dhow.webp'); } .excursion-image-food-experience { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-food-experience.webp'); } .excursion-image-historical-walk { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-historical-walk.webp'); } .excursion-image-village-visit { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-village-visit.webp'); } .excursion-image-private-tours { background-image: url('../cruise-images/cruise-region-subpages-images/middle-east-private-tours.webp'); } /* HOVER */ .me-hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .section-24 .excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .section-24 .excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .section-24 .excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Middle‑East Cruise Transportation & Transfers */ /* ========================================================= */ .middleeast-transfers-section { padding: 80px 0; background: #F4E8D2; /* Sandstone Beige */ } .middleeast-transfers-inner { max-width: 1300px; margin: 0 auto; } .middleeast-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Navy */ } .middleeast-transfers-intro { font-size: 1.15rem; text-align: center; color: #3A3A3A; margin-bottom: 20px; } /* GRID */ .middleeast-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .middleeast-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #0A1A2F; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #3A3A3A; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #3A3A3A; opacity: 0.9; } /* GRADIENTS — Middle‑East Colour Scheme */ .transfer-card-city { background: linear-gradient(135deg, #C9A34E, #D9C7A3); color: #0A1A2F; } .transfer-card-airport { background: linear-gradient(135deg, #0097A7, #4ED1CF); color: #0A1A2F; } .transfer-card-cruiseline { background: linear-gradient(135deg, #A8CCE8, #71A6D2); /* Light Gulf Blue */ color: #0A1A2F; /* Dark text stays readable */ } .transfer-card-local { background: linear-gradient(135deg, #C96B3E, #E89A6C); color: #FFFFFF; } .transfer-card-access { background: linear-gradient(135deg, #71A6D2, #A8CCE8); color: #0A1A2F; } .transfer-card-planning { background: linear-gradient(135deg, #D2B48C, #F4E8D2); color: #0A1A2F; } /* HOVER */ .middleeast-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .middleeast-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .middleeast-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Middle‑East Cruise FAQ (CSS) */ /* ========================================================= */ .middleeast-faq-section { padding: 80px 0; background: #F4E8D2; /* Sandstone Beige */ } .middleeast-faq-inner { max-width: 1100px; margin: 0 auto; } .middleeast-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Navy */ } .middleeast-faq-intro { font-size: 1.15rem; text-align: center; color: #3A3A3A; margin-bottom: 40px; } /* Accordion Container */ .middleeast-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .middleeast-faq-item { background: #FFF7E6; /* Light Desert Sand */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .middleeast-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #0A1A2F; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .middleeast-faq-question:hover { background: #F0E2C8; /* Soft Sand Hover */ } /* Arrow Icon */ .middleeast-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .middleeast-faq-item.active .middleeast-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .middleeast-faq-answer { max-height: 0; overflow: hidden; background: #FFFFFF; padding: 0 24px; transition: max-height 0.35s ease; } .middleeast-faq-answer p { font-size: 1rem; color: #3A3A3A; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .middleeast-faq-item.active .middleeast-faq-answer { max-height: 300px; } /* Responsive */ @media (max-width: 800px) { .middleeast-faq-title { font-size: 2rem; } .middleeast-faq-question { font-size: 1.05rem; } } /* ============================================================ ALASKA CRUISE GUIDE SUB-PAGE Applies ONLY to: ============================================================ */ /* --------------------------------------------- section 3. HERO BACKGROUND (Alaska hero image) --------------------------------------------- */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/alaska-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .hero-region { min-height: 480px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #F5F8FC; /* Glacier White */ } /*--------------------------------------------- SECTION 4 — Overview (Alaska) ---------------------------------------------*/ .section-overview { text-align: center; } .section-overview .section-title { font-size: 2rem; font-weight: 700; color: #0A2A43; /* Deep Fjord Blue */ margin-bottom: 20px; text-align: center; width: 100%; } .section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #0A2A43; /* Deep Fjord Blue */ max-width: 820px; margin: 0 auto 32px; } .overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .overview-highlights .highlight-item { background: #A9CBE8; /* Ice Blue */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #0A2A43; /* Deep Fjord Blue */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .highlight-icon { color: #2F5D3A; /* Forest Green */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Alaska) --------------------------------------------- */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #F5F8FC; /* Glacier White */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #0A2A43; /* Deep Fjord Blue */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #2F5D3A; /* Forest Green */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #A9CBE8 0%, #FFFFFF 100%); /* Ice Blue → White */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #0A2A43; /* Deep Fjord Blue */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #2F5D3A; /* Forest Green */ text-align: center; } /* TAGS */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .tag { background: #0A2A43; /* Deep Fjord Blue */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #0A2A43; /* Deep Fjord Blue */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .highlight-icon { color: #2F5D3A; /* Forest Green */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-link { background: #2F5D3A; /* Forest Green */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .secondary-btn { background: #0A2A43; /* Deep Fjord Blue */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #244C2E; /* Darker Forest Green */ transform: translateY(-2px); } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .secondary-btn:hover { background: #071D31; /* Darker Fjord Blue */ transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.alaska-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #2F5D3A; /* Forest Green */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — Inside Passage Cruise Experience (Alaska) */ /* ========================================================= */ .alaska-inside-experience-section { width: 100%; padding: 80px 0; background: #F5F8FC; /* Glacier White */ color: #0A2A43; /* Deep Fjord Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-inside-experience-section.revealed { opacity: 1; transform: translateY(0); } .alaska-inside-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-inside-experience-header { text-align: center; margin-bottom: 40px; } .alaska-inside-experience-title { font-size: 2.4rem; font-weight: 700; color: #0A2A43; /* Deep Fjord Blue */ margin-bottom: 20px; } .alaska-inside-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2F5D3A; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .alaska-inside-experience-list { list-style: none; margin: 0; padding: 0; } .alaska-inside-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Deep Fjord Blue */ } /* Emoji icon */ .alaska-inside-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .alaska-inside-text { display: inline-block; } /* Region name styling */ .alaska-inside-text strong { font-weight: 700; margin-right: 4px; color: #2F5D3A; /* Forest Green */ } /* ========================================================= */ /* SECTION 7 — Gulf of Alaska Cruise Experience (Alaska) */ /* ========================================================= */ .alaska-gulf-experience-section { width: 100%; padding: 80px 0; background: #F5F8FC; /* Glacier White */ color: #0A2A43; /* Deep Fjord Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-gulf-experience-section.revealed { opacity: 1; transform: translateY(0); } .alaska-gulf-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-gulf-experience-header { text-align: center; margin-bottom: 40px; } .alaska-gulf-experience-title { font-size: 2.4rem; font-weight: 700; color: #0A2A43; /* Deep Fjord Blue */ margin-bottom: 20px; } .alaska-gulf-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2F5D3A; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .alaska-gulf-experience-list { list-style: none; margin: 0; padding: 0; } .alaska-gulf-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Deep Fjord Blue */ } /* Emoji icon */ .alaska-gulf-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .alaska-gulf-text { display: inline-block; } /* Region name styling */ .alaska-gulf-text strong { font-weight: 700; margin-right: 4px; color: #2F5D3A; /* Forest Green */ } /* ========================================================= */ /* SECTION 8 — Arctic Alaska Cruise Experience (Alaska) */ /* ========================================================= */ .alaska-arctic-experience-section { width: 100%; padding: 80px 0; background: #F5F8FC; /* Glacier White */ color: #0A2A43; /* Deep Fjord Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-arctic-experience-section.revealed { opacity: 1; transform: translateY(0); } .alaska-arctic-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-arctic-experience-header { text-align: center; margin-bottom: 40px; } .alaska-arctic-experience-title { font-size: 2.4rem; font-weight: 700; color: #0A2A43; /* Deep Fjord Blue */ margin-bottom: 20px; } .alaska-arctic-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2F5D3A; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .alaska-arctic-experience-list { list-style: none; margin: 0; padding: 0; } .alaska-arctic-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Deep Fjord Blue */ } /* Emoji icon */ .alaska-arctic-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .alaska-arctic-text { display: inline-block; } /* Region name styling */ .alaska-arctic-text strong { font-weight: 700; margin-right: 4px; color: #2F5D3A; /* Forest Green */ } /* ========================================================= */ /* SECTION 9 — Aleutian Islands Cruise Experience (Alaska) */ /* ========================================================= */ .alaska-aleutian-experience-section { width: 100%; padding: 80px 0; background: #F5F8FC; /* Glacier White */ color: #0A2A43; /* Deep Fjord Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-aleutian-experience-section.revealed { opacity: 1; transform: translateY(0); } .alaska-aleutian-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-aleutian-experience-header { text-align: center; margin-bottom: 40px; } .alaska-aleutian-experience-title { font-size: 2.4rem; font-weight: 700; color: #0A2A43; /* Deep Fjord Blue */ margin-bottom: 20px; } .alaska-aleutian-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #2F5D3A; /* Forest Green */ margin-bottom: 14px; } /* List layout */ .alaska-aleutian-experience-list { list-style: none; margin: 0; padding: 0; } .alaska-aleutian-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Deep Fjord Blue */ } /* Emoji icon */ .alaska-aleutian-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .alaska-aleutian-text { display: inline-block; } /* Region name styling */ .alaska-aleutian-text strong { font-weight: 700; margin-right: 4px; color: #2F5D3A; /* Forest Green */ } /* ========================================================= */ /* SECTION 10 — Alaska Seasonal Cruise Guide */ /* ========================================================= */ .alaska-seasonal-guide-section { width: 100%; padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .alaska-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .alaska-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 20px; } .alaska-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ margin-bottom: 14px; } /* List layout */ .alaska-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .alaska-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A1A2F; /* Deep Fjord Navy */ } /* Emoji icon */ .alaska-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .alaska-season-text { display: inline-block; } /* Season name styling (bold + coloured) */ .alaska-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .alaska-season-spring { color: #4A8FBF; /* Whale Blue */ } .alaska-season-summer { color: #2E6F95; /* Glacial Blue */ } .alaska-season-autumn { color: #A3C9E2; /* Snow Mist Blue */ } .alaska-season-winter { color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-season-festivals { color: #4A8FBF; /* Whale Blue */ } .alaska-season-scenic { color: #2E6F95; /* Glacial Blue */ } /* ========================================================= */ /* SECTION 11 — Alaska Best Cruise Months Chart */ /* ========================================================= */ .alaska-best-months-section { width: 100%; padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-best-months-section.revealed { opacity: 1; transform: translateY(0); } .alaska-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-best-months-header { text-align: center; margin-bottom: 40px; } .alaska-best-months-title { font-size: 2.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 20px; } .alaska-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #2E6F95; margin-bottom: 14px; } /* Chart container */ .alaska-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header */ .alaska-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #0A1A2F; margin-bottom: 12px; text-align: center; } .alaska-months-chart-header span { font-size: 0.85rem; } /* Chart label */ .alaska-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #0A1A2F; } /* Chart rows */ .alaska-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* REGION-SCOPED BAR STYLES */ .alaska-best { background: linear-gradient(135deg, #2E6F95, #4A8FBF); border-radius: 4px; height: 18px; } .alaska-good { background: linear-gradient(135deg, #A3C9E2, #4A8FBF); border-radius: 4px; height: 18px; } .alaska-avoid { background: linear-gradient(135deg, #0A1A2F, #2E6F95); border-radius: 4px; height: 18px; } /* Legend */ .alaska-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .alaska-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .alaska-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .alaska-best-months-list { list-style: none; margin: 0; padding: 0; } .alaska-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A1A2F; } .alaska-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .alaska-best-text { display: inline-block; } .alaska-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .alaska-best-spring { color: #4A8FBF; } .alaska-best-summer { color: #2E6F95; } .alaska-best-autumn { color: #A3C9E2; } .alaska-best-winter { color: #0A1A2F; } .alaska-best-wildlife { color: #4A8FBF; } .alaska-best-scenic { color: #2E6F95; } /* ========================================================= */ /* SECTION 12 — Alaska Cruise Tips & Planning Guide */ /* ========================================================= */ .alaska-tips-section { width: 100%; padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-tips-section.revealed { opacity: 1; transform: translateY(0); } .alaska-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-tips-header { text-align: center; margin-bottom: 40px; } .alaska-tips-title { font-size: 2.4rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 20px; } .alaska-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ margin-bottom: 14px; } /* Icons Row */ .alaska-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #0A1A2F; /* Deep Fjord Navy */ } /* Gradient Divider */ .alaska-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0A1A2F, #4A8FBF, #0A1A2F); /* Navy → Whale Blue → Navy */ border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .alaska-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .alaska-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .alaska-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .alaska-tip-planning { color: #0A1A2F; } /* Deep Fjord Navy */ .alaska-tip-packing { color: #2E6F95; } /* Glacial Blue */ .alaska-tip-docs { color: #4A8FBF; } /* Whale Blue */ .alaska-tip-weather { color: #A3C9E2; } /* Snow Mist Blue */ .alaska-tip-port { color: #2E6F95; } /* Glacial Blue */ /* Do's & Don'ts */ .alaska-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .alaska-tips-dos, .alaska-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .alaska-tips-dos h3, .alaska-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-tips-dos ul, .alaska-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .alaska-insider-tips { margin-top: 40px; } .alaska-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 13 — Small‑Ship & Boutique Cruising in Alaska */ /* ========================================================= */ .alaska-boutique-section { width: 100%; padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-boutique-section.revealed { opacity: 1; transform: translateY(0); } .alaska-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-boutique-header { text-align: center; margin-bottom: 40px; } .alaska-boutique-title { font-size: 2.4rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 20px; } .alaska-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ margin-bottom: 14px; } /* Icon Row */ .alaska-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A1A2F; /* Deep Fjord Navy */ } /* Cards container */ .alaska-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .alaska-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .alaska-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants — Alaska glacier palette */ .alaska-boutique-card-green { background: linear-gradient(135deg, #2E6F95, #4A8FBF); /* Glacial Blue → Whale Blue */ } .alaska-boutique-card-purple { background: linear-gradient(135deg, #4A5FA8, #7C8CD0); /* Arctic Twilight Purple */ } .alaska-boutique-card-blue { background: linear-gradient(135deg, #0A1A2F, #2E6F95); /* Deep Fjord Navy → Glacial Blue */ } .alaska-boutique-card-gold { background: linear-gradient(135deg, #A3C9E2, #4A8FBF); /* Snow Mist Blue → Whale Blue */ } .alaska-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .alaska-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .alaska-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Colourful divider */ .alaska-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0A1A2F, #2E6F95, #4A8FBF, #A3C9E2); border-radius: 3px; margin: 40px 0; } /* List section */ .alaska-boutique-list-wrapper { margin-top: 10px; } .alaska-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-boutique-list { list-style: none; margin: 0; padding: 0; } .alaska-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .alaska-boutique-list-text { display: inline-block; } /* Colour labels */ .alaska-boutique-label-green { color: #2E6F95; } /* Glacial Blue */ .alaska-boutique-label-purple { color: #4A5FA8; } /* Arctic Twilight Purple */ .alaska-boutique-label-blue { color: #0A1A2F; } /* Deep Fjord Navy */ .alaska-boutique-label-gold { color: #4A8FBF; } /* Whale Blue */ /* Responsive */ @media (max-width: 900px) { .alaska-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — Alaska Port Profiles (Sub‑Page Edition) */ /* ========================================================= */ .alaska-port-section { width: 100%; padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-port-section.revealed { opacity: 1; transform: translateY(0); } .alaska-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .alaska-port-header { text-align: center; margin-bottom: 40px; } .alaska-port-title { font-size: 2.4rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 20px; } .alaska-port-intro { font-size: 1.15rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ margin-bottom: 14px; } /* Icon Row */ .alaska-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A1A2F; /* Deep Fjord Navy */ } /* Cards container */ .alaska-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .alaska-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .alaska-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card Body Layout */ .alaska-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Alaska colour variants */ .alaska-port-card-teal { background: linear-gradient(135deg, #2E6F95, #4DB0D9); /* Glacial Blue → Icewater Teal */ } .alaska-port-card-coral { background: linear-gradient(135deg, #A63F2B, #D96F5A); /* Rustic Copper → Warm Coastal Coral */ } .alaska-port-card-indigo { background: linear-gradient(135deg, #0A1A2F, #2E6F95); /* Deep Fjord Navy → Glacial Blue */ } .alaska-port-card-cyan { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); /* Whale Blue → Arctic Sky Cyan */ } .alaska-port-card-amber { background: linear-gradient(135deg, #A3C9E2, #4A8FBF); /* Snow Mist Blue → Whale Blue */ } .alaska-port-card-purple { background: linear-gradient(135deg, #4A5FA8, #7C8CD0); /* Arctic Twilight Purple */ } .alaska-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .alaska-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .alaska-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal Animation for Alaska Port Cards */ .alaska-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Colourful divider */ .alaska-port-divider { height: 3px; width: 100%; background: linear-gradient( 90deg, #0A1A2F, #2E6F95, #4A8FBF, #A3C9E2, #7CC4E4 ); border-radius: 3px; margin: 40px 0; } /* List section */ .alaska-port-list-wrapper { margin-top: 10px; } .alaska-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-port-list { list-style: none; margin: 0; padding: 0; } .alaska-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .alaska-port-list-text { display: inline-block; } /* Colour labels */ .alaska-port-label-teal { color: #2E6F95; } /* Glacial Blue */ .alaska-port-label-coral { color: #A63F2B; } /* Rustic Copper */ .alaska-port-label-indigo { color: #0A1A2F; } /* Deep Fjord Navy */ .alaska-port-label-cyan { color: #4A8FBF; } /* Whale Blue */ /* Responsive */ @media (max-width: 900px) { .alaska-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — Alaska Cruise Port Comparison Grid */ /* ========================================================= */ .alaska-port-compare-section { width: 100%; padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .alaska-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .alaska-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .alaska-port-compare-header { text-align: center; margin-bottom: 50px; } .alaska-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 20px; } .alaska-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ max-width: 800px; margin: 0 auto; } /* Grid container */ .alaska-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header { background: #E6F1FA; /* Light Glacier Tint */ font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ } /* Left colour accent */ .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Alaska colour accents */ .compare-row-teal::before { background: #2E6F95; } /* Glacial Blue */ .compare-row-coral::before { background: #A63F2B; } /* Rustic Copper */ .compare-row-indigo::before { background: #0A1A2F; } /* Deep Fjord Navy */ .compare-row-cyan::before { background: #4A8FBF; } /* Whale Blue */ .compare-row-amber::before { background: #A3C9E2; } /* Snow Mist Blue */ .compare-row-purple::before { background: #4A5FA8; } /* Arctic Twilight Purple */ .compare-row-blue::before { background: #7CC4E4; } /* Arctic Sky Blue */ .compare-row-red::before { background: #D96F5A; } /* Warm Coastal Coral */ /* Alternating row backgrounds */ .compare-grid-row:nth-child(even) { background: #F7FBFF; /* Very Light Glacier */ } /* Premium hover glow */ .compare-row-teal:hover, .compare-row-coral:hover, .compare-row-indigo:hover, .compare-row-cyan:hover, .compare-row-amber:hover, .compare-row-purple:hover, .compare-row-blue:hover, .compare-row-red:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-teal:hover { background: rgba(46, 111, 149, 0.10); } .compare-row-coral:hover { background: rgba(166, 63, 43, 0.10); } .compare-row-indigo:hover { background: rgba(10, 26, 47, 0.10); } .compare-row-cyan:hover { background: rgba(74, 143, 191, 0.10); } .compare-row-amber:hover { background: rgba(163, 201, 226, 0.10); } .compare-row-purple:hover { background: rgba(74, 95, 168, 0.10); } .compare-row-blue:hover { background: rgba(124, 196, 228, 0.10); } .compare-row-red:hover { background: rgba(217, 111, 90, 0.10); } /* Reveal animation */ .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .alaska-port-compare-insights { margin-top: 40px; padding: 30px; background: #E6F1FA; /* Light Glacier Tint */ border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 14px; } .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header { display: none; } .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 16 — Alaska Embarkation vs Destination Ports (CSS) */ /* ========================================================= */ .alaska-port-usage-section { padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ } .alaska-port-usage-inner { max-width: 1300px; margin: 0 auto; } /* HEADER */ .alaska-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; } .alaska-port-usage-intro { font-size: 1.15rem; text-align: center; color: #2E6F95; margin-bottom: 20px; } /* GRID */ .alaska-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .alaska-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* REGION-SCOPED BACKGROUND IMAGES */ .alaska-image-embarkation { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-embarkation-ports.webp'); } .alaska-image-destination { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-destination-ports.webp'); } .alaska-image-debarkation { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-debarkation-ports.webp'); } /* TEXT */ .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #FFFFFF; } .usage-card-text, .usage-card-note { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } /* ALASKA GRADIENTS */ .usage-card-embarkation { background: linear-gradient(135deg, #2E6F95, #4A8FBF); } .usage-card-destination { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); } .usage-card-debarkation { background: linear-gradient(135deg, #0A1A2F, #2E6F95); } /* FIXED — ISOLATED REVEAL CLASSES */ .section16-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .section16-reveal-active { opacity: 1; transform: translateY(0); } .section16-card { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .section16-card-reveal { opacity: 1 !important; transform: translateY(0) !important; } .section16-card-hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .alaska-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .alaska-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 17 — Alaska Cruise Lines Overview Grid (CSS) */ /* ========================================================= */ .alaska-cruise-lines-overview { width: 100%; padding: 90px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .section17-reveal.section17-reveal-active { opacity: 1; transform: translateY(0); } .alaska-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .alaska-cruise-lines-header { text-align: center; margin-bottom: 60px; } .alaska-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ margin-bottom: 16px; } /* Cinematic gradient underline — Alaska colours */ .alaska-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E6F95, #4A8FBF, #7CC4E4); /* Glacial Blue → Whale Blue → Arctic Sky Blue */ } .alaska-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #2E6F95; /* Glacial Blue */ max-width: 850px; margin: 0 auto; } /* Grid */ .alaska-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .alaska-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .section17-card.section17-card-visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) — Alaska palette */ .alaska-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Alaska colour sets */ .card-glacier::before { background: #7CC4E4; } /* Arctic Sky Blue */ .card-fjord::before { background: #2E6F95; } /* Glacial Blue */ .card-whale::before { background: #4A8FBF; } /* Whale Blue */ .card-sky::before { background: #A3C9E2; } /* Snow Mist Blue */ .card-midnight::before { background: #0A1A2F; } /* Deep Fjord Navy */ .card-luxury::before { background: #C0C6D9; } /* Frosted Silver */ .card-elite::before { background: #D9B76F; } /* Arctic Gold */ .card-historic::before { background: #A63F2B; } /* Rustic Copper */ /* Icon */ .alaska-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .alaska-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 12px; } /* Summary */ .alaska-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #2E6F95; margin-bottom: 18px; } /* Points */ .alaska-cruise-line-points { list-style: none; padding: 0; margin: 0; } .alaska-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #0A1A2F; padding-left: 14px; position: relative; } .alaska-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #4A8FBF; /* Whale Blue */ font-size: 0.9rem; } /* Hover Glow — Alaska tinted */ .card-glacier:hover, .card-fjord:hover, .card-whale:hover, .card-sky:hover, .card-midnight:hover, .card-luxury:hover, .card-elite:hover, .card-historic:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-glacier:hover { background: rgba(124, 196, 228, 0.10); } .card-fjord:hover { background: rgba(46, 111, 149, 0.10); } .card-whale:hover { background: rgba(74, 143, 191, 0.10); } .card-sky:hover { background: rgba(163, 201, 226, 0.10); } .card-midnight:hover { background: rgba(10, 26, 47, 0.10); } .card-luxury:hover { background: rgba(192, 198, 217, 0.10); } .card-elite:hover { background: rgba(217, 183, 111, 0.10); } .card-historic:hover { background: rgba(166, 63, 43, 0.10); } /* Responsive */ @media (max-width: 700px) { .alaska-cruise-lines-title { font-size: 2.2rem; } .alaska-cruise-lines-intro { font-size: 1.1rem; } .alaska-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — Alaska Cruise Ship Types Overview (CSS) */ /* ========================================================= */ .alaska-ship-types-overview { width: 100%; padding: 90px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .section18-reveal.section18-reveal-active { opacity: 1; transform: translateY(0); } .alaska-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .alaska-ship-types-header { text-align: center; margin-bottom: 60px; } .alaska-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #0A1A2F; margin-bottom: 16px; } /* Cinematic gradient underline — Alaska colours */ .alaska-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E6F95, #4A8FBF, #7CC4E4); /* Glacial → Whale → Arctic Sky Blue */ } .alaska-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #2E6F95; max-width: 850px; margin: 0 auto; } /* Grid */ .alaska-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Ship Type Cards */ .alaska-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .section18-card.section18-card-visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) — Alaska palette */ .alaska-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Alaska colour sets */ .card-glacier::before { background: #7CC4E4; } /* Arctic Sky Blue */ .card-fjord::before { background: #2E6F95; } /* Glacial Blue */ .card-luxury::before { background: #C0C6D9; } /* Frosted Silver */ .card-whale::before { background: #4A8FBF; } /* Whale Blue */ .card-expedition::before { background: #A3C9E2; } /* Snow Mist Blue */ .card-seasonal::before { background: #A63F2B; } /* Rustic Copper */ .card-cultural::before { background: #D9B76F; } /* Arctic Gold */ .card-scenic::before { background: #0A1A2F; } /* Deep Fjord Navy */ /* Icon */ .alaska-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .alaska-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 12px; } /* Summary */ .alaska-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #2E6F95; margin-bottom: 18px; } /* Points */ .alaska-ship-type-points { list-style: none; padding: 0; margin: 0; } .alaska-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #0A1A2F; padding-left: 14px; position: relative; } .alaska-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #4A8FBF; /* Whale Blue */ font-size: 0.9rem; } /* Hover Glow — Alaska tinted */ .card-glacier:hover, .card-fjord:hover, .card-luxury:hover, .card-whale:hover, .card-expedition:hover, .card-seasonal:hover, .card-cultural:hover, .card-scenic:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-glacier:hover { background: rgba(124, 196, 228, 0.10); } .card-fjord:hover { background: rgba(46, 111, 149, 0.10); } .card-luxury:hover { background: rgba(192, 198, 217, 0.10); } .card-whale:hover { background: rgba(74, 143, 191, 0.10); } .card-expedition:hover { background: rgba(163, 201, 226, 0.10); } .card-seasonal:hover { background: rgba(166, 63, 43, 0.10); } .card-cultural:hover { background: rgba(217, 183, 111, 0.10); } .card-scenic:hover { background: rgba(10, 26, 47, 0.10); } /* Responsive */ @media (max-width: 700px) { .alaska-ship-types-title { font-size: 2.2rem; } .alaska-ship-types-intro { font-size: 1.1rem; } .alaska-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — Alaska Cruise Duration Overview (CSS) */ /* ========================================================= */ .alaska-cruise-duration-overview { width: 100%; padding: 90px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .section19-reveal.section19-reveal-active { opacity: 1; transform: translateY(0); } .alaska-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .alaska-cruise-duration-header { text-align: center; margin-bottom: 60px; } .alaska-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #0A1A2F; margin-bottom: 16px; } /* Cinematic gradient underline — Alaska colours */ .alaska-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E6F95, #4A8FBF, #7CC4E4); /* Glacial → Whale → Arctic Sky Blue */ } .alaska-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #2E6F95; max-width: 850px; margin: 0 auto; } /* Grid */ .alaska-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .alaska-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .section19-card.section19-card-visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) — Alaska palette */ .alaska-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Alaska colour sets */ .card-glacier::before { background: #7CC4E4; } /* Arctic Sky Blue */ .card-fjord::before { background: #2E6F95; } /* Glacial Blue */ .card-whale::before { background: #4A8FBF; } /* Whale Blue */ .card-sky::before { background: #A3C9E2; } /* Snow Mist Blue */ .card-copper::before { background: #A63F2B; } /* Rustic Copper */ .card-expedition::before { background: #C0C6D9; } /* Frosted Silver */ .card-midnight::before { background: #0A1A2F; } /* Deep Fjord Navy */ .card-sampler::before { background: #D9B76F; } /* Arctic Gold */ /* Icon */ .alaska-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .alaska-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 12px; } /* Summary */ .alaska-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #2E6F95; margin-bottom: 18px; } /* Points */ .alaska-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .alaska-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #0A1A2F; padding-left: 14px; position: relative; } .alaska-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #4A8FBF; /* Whale Blue */ font-size: 0.9rem; } /* Hover Glow — Alaska tinted */ .card-glacier:hover, .card-fjord:hover, .card-whale:hover, .card-sky:hover, .card-copper:hover, .card-expedition:hover, .card-midnight:hover, .card-sampler:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } .card-glacier:hover { background: rgba(124, 196, 228, 0.10); } .card-fjord:hover { background: rgba(46, 111, 149, 0.10); } .card-whale:hover { background: rgba(74, 143, 191, 0.10); } .card-sky:hover { background: rgba(163, 201, 226, 0.10); } .card-copper:hover { background: rgba(166, 63, 43, 0.10); } .card-expedition:hover { background: rgba(192, 198, 217, 0.10); } .card-midnight:hover { background: rgba(10, 26, 47, 0.10); } .card-sampler:hover { background: rgba(217, 183, 111, 0.10); } /* Responsive */ @media (max-width: 700px) { .alaska-cruise-duration-title { font-size: 2.2rem; } .alaska-cruise-duration-intro { font-size: 1.1rem; } .alaska-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 20 — Alaska Cruise Price Range Overview (CSS) */ /* ========================================================= */ .alaska-cruise-price-overview { width: 100%; padding: 90px 0; background: #F4FAFF; /* Glacier Ice Blue */ color: #0A1A2F; /* Deep Fjord Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .section20-reveal.section20-reveal-active { opacity: 1; transform: translateY(0); } .alaska-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .alaska-cruise-price-header { text-align: center; margin-bottom: 60px; } .alaska-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #0A1A2F; margin-bottom: 16px; } /* Cinematic gradient underline — Alaska colours */ .alaska-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E6F95, #4A8FBF, #7CC4E4); /* Glacial → Whale → Arctic Sky */ } .alaska-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #2E6F95; max-width: 850px; margin: 0 auto; } /* Grid */ .alaska-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .alaska-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .section20-card.section20-card-visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .alaska-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* ========================================================= */ /* ALASKA 12‑COLOUR PALETTE */ /* ========================================================= */ .card-glacier::before { background: #7CC4E4; } /* Arctic Sky Blue */ .card-fjord::before { background: #2E6F95; } /* Glacial Blue */ .card-whale::before { background: #4A8FBF; } /* Whale Blue */ .card-midnight::before { background: #0A1A2F; } /* Deep Fjord Navy */ .card-copper::before { background: #A63F2B; } /* Rustic Copper */ .card-expedition::before { background: #C0C6D9; } /* Frosted Silver */ .card-midnightdeep::before { background: #081423; } /* Midnight Deep */ .card-sampler::before { background: #D9B76F; } /* Arctic Gold */ .card-package::before { background: #A3C9E2; } /* Snow Mist Blue */ .card-promo::before { background: #4A8FBF; } /* Whale Blue */ .card-upgrade::before { background: #C0C6D9; } /* Frosted Silver */ .card-family::before { background: #7CC4E4; } /* Arctic Sky Blue */ /* Icon */ .alaska-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .alaska-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #0A1A2F; margin-bottom: 18px; } /* Layer Titles */ .alaska-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .alaska-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #2E6F95; margin-bottom: 10px; } .alaska-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .alaska-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .alaska-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #0A1A2F; padding-left: 14px; position: relative; } .alaska-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #4A8FBF; /* Whale Blue */ font-size: 0.9rem; } /* ========================================================= */ /* PREMIUM HOVER EFFECTS (12 colours) */ /* ========================================================= */ .card-glacier:hover { background: rgba(124,196,228,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-fjord:hover { background: rgba(46,111,149,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-whale:hover { background: rgba(74,143,191,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-midnight:hover { background: rgba(10,26,47,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-copper:hover { background: rgba(166,63,43,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-expedition:hover { background: rgba(192,198,217,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-midnightdeep:hover { background: rgba(8,20,35,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-sampler:hover { background: rgba(217,183,111,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-package:hover { background: rgba(163,201,226,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-promo:hover { background: rgba(74,143,191,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-upgrade:hover { background: rgba(192,198,217,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-family:hover { background: rgba(124,196,228,0.12); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } /* Responsive */ @media (max-width: 700px) { .alaska-cruise-price-title { font-size: 2.2rem; } .alaska-cruise-price-intro { font-size: 1.1rem; } .alaska-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 21 — Alaska Cruise Best Value Tips (CSS) */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ } .section-21-wrapper { max-width: 1300px; margin: 0 auto; } .section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 50px; } /* GRID */ .value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — ALASKA GRADIENTS */ /* ========================================================= */ .card-21-1 { background: linear-gradient(135deg, #7CC4E4, #4A8FBF); } /* Glacier → Whale */ .card-21-2 { background: linear-gradient(135deg, #2E6F95, #0A1A2F); } /* Glacial → Deep Fjord */ .card-21-3 { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); } /* Snow Mist → Arctic Sky */ .card-21-4 { background: linear-gradient(135deg, #4A8FBF, #2E6F95); } /* Whale → Glacial */ .card-21-5 { background: linear-gradient(135deg, #A63F2B, #7A2E20); } /* Rustic Copper → Dark Copper */ .card-21-6 { background: linear-gradient(135deg, #C0C6D9, #8F96A8); } /* Frosted Silver → Cold Steel */ .card-21-7 { background: linear-gradient(135deg, #D9B76F, #B89A52); } /* Arctic Gold → Warm Gold */ .card-21-8 { background: linear-gradient(135deg, #081423, #0A1A2F); } /* Midnight Deep → Fjord Navy */ .card-21-9 { background: linear-gradient(135deg, #7CC4E4, #A3C9E2); } /* Arctic Sky → Snow Mist */ .card-21-10 { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); } /* Whale → Glacier */ .card-21-11 { background: linear-gradient(135deg, #2E6F95, #4A8FBF); } /* Glacial → Whale */ card-21-12 { background: linear-gradient(135deg, #D9B76F, #C0C6D9); } /* Gold → Silver */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-21:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Alaska Cultural Immersion Experiences (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ } .section-22-wrapper { max-width: 1300px; margin: 0 auto; } .section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 50px; } /* GRID */ .immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — ALASKA GRADIENTS */ /* ========================================================= */ .card-22-1 { background: linear-gradient(135deg, #7CC4E4, #4A8FBF); } /* Glacier → Whale */ .card-22-2 { background: linear-gradient(135deg, #2E6F95, #0A1A2F); } /* Glacial → Deep Fjord */ .card-22-3 { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); } /* Snow Mist → Arctic Sky */ .card-22-4 { background: linear-gradient(135deg, #4A8FBF, #2E6F95); } /* Whale → Glacial */ .card-22-5 { background: linear-gradient(135deg, #A63F2B, #7A2E20); } /* Rustic Copper → Dark Copper */ .card-22-6 { background: linear-gradient(135deg, #C0C6D9, #8F96A8); } /* Frosted Silver → Cold Steel */ .card-22-7 { background: linear-gradient(135deg, #D9B76F, #B89A52); } /* Arctic Gold → Warm Gold */ .card-22-8 { background: linear-gradient(135deg, #081423, #0A1A2F); } /* Midnight Deep → Fjord Navy */ .card-22-9 { background: linear-gradient(135deg, #7CC4E4, #A3C9E2); } /* Arctic Sky → Snow Mist */ .card-22-10 { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); } /* Whale → Glacier */ .card-22-11 { background: linear-gradient(135deg, #2E6F95, #4A8FBF); } /* Glacial → Whale */ .card-22-12 { background: linear-gradient(135deg, #D9B76F, #C0C6D9); } /* Gold → Silver */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-22:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Alaska Wildlife & Nature Encounters (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ } .section-23-wrapper { max-width: 1300px; margin: 0 auto; } .section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 50px; } /* GRID */ .wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD */ .wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* IMAGE BLOCK */ .wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* ========================================================= */ /* BACKGROUND IMAGES — ALASKA WILDLIFE */ /* ========================================================= */ .wildlife-image-humpback-whales { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-humpback-whales.webp'); } .wildlife-image-sea-otters { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-sea-otters.webp'); } .wildlife-image-bald-eagle { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-bald-eagle.webp'); } .wildlife-image-brown-bear { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-brown-bear.webp'); } .wildlife-image-glacier-bay { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-glacier-bay.webp'); } .wildlife-image-puffins { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-puffins.webp'); } .wildlife-image-orcas { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-orcas.webp'); } .wildlife-image-tongass-forest { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-tongass-forest.webp'); } .wildlife-image-mountain-landscape { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-mountain-landscape.webp'); } .wildlife-image-moose { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-moose.webp'); } .wildlife-image-kayaking-eco { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-kayaking-eco.webp'); } .wildlife-image-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-nature-photography.webp'); } /* ========================================================= */ /* TEXT — REGION‑SCOPED (FIX TO PREVENT OVERRIDES) */ /* ========================================================= */ .alaska-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E6F95; /* Glacial Blue */ opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — ALASKA GRADIENTS */ /* ========================================================= */ /* OVERRIDE the white background ONLY for Card 23-1 */ .card-23-1 { background: linear-gradient(135deg, #e9f6ff, #cfe9ff) !important; } .card-23-2 { background: linear-gradient(135deg, #2E6F95, #0A1A2F); } /* Glacial → Deep Fjord */ .card-23-3 { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); } /* Snow Mist → Arctic Sky */ .card-23-4 { background: linear-gradient(135deg, #e9f6ff, #d8efff) !important; } .card-23-5 { background: linear-gradient(135deg, #7CC4E4, #A3C9E2); } /* Glacier → Snow Mist */ .card-23-6 { background: linear-gradient(135deg, #C0C6D9, #8F96A8); } /* Frosted Silver → Cold Steel */ .card-23-7 { background: linear-gradient(135deg, #fff6d6, #fbe9b0) !important; } .card-23-8 { background: linear-gradient(135deg, #eef8ff, #dff1ff) !important; } .card-23-9 { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); } /* Whale → Glacier */ .card-23-10 { background: linear-gradient(135deg, #ffe7df, #ffd4c9) !important; } .card-23-11 { background: linear-gradient(135deg, #2E6F95, #4A8FBF); } /* Glacial → Whale */ .card-23-12 { background: linear-gradient(135deg, #D9B76F, #C0C6D9); } /* Gold → Silver */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Alaska Cultural Experiences & Traditions (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #F4FAFF; /* Glacier Ice Blue */ } .section-24-wrapper { max-width: 1300px; margin: 0 auto; } .section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 50px; } /* GRID */ .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD */ .culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* IMAGE BLOCK */ .culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* ========================================================= */ /* BACKGROUND IMAGES — ALASKA CULTURAL */ /* ========================================================= */ .culture-image-indigenous-traditions { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-indigenous-traditions.webp'); } .culture-image-totem-carving { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-totem-carving.webp'); } .culture-image-native-art { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-native-art.webp'); } .culture-image-traditional-food { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-traditional-food.webp'); } .culture-image-gold-rush { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-gold-rush.webp'); } .culture-image-cultural-festival { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-cultural-festival.webp'); } .culture-image-community-market { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-community-market.webp'); } .culture-image-traditional-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-traditional-clothing.webp'); } .culture-image-cultural-workshop { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-cultural-workshop.webp'); } .culture-image-heritage-site { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-heritage-site.webp'); } .culture-image-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-storytelling.webp'); } .culture-image-nature-traditions { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-nature-traditions.webp'); } /* ========================================================= */ /* TEXT — REGION‑SCOPED (FIX APPLIED) */ /* ========================================================= */ .alaska-cultural-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-cultural-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E6F95; /* Glacial Blue */ opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — ALASKA GRADIENTS */ /* ========================================================= */ .card-24-1 { background: linear-gradient(135deg, #e9f6ff, #d4ecff) !important; } .card-24-2 { background: linear-gradient(135deg, #2E6F95, #0A1A2F); } .card-24-3 { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); } .card-24-4 { background: linear-gradient(135deg, #e8f5ff, #d3eaff) !important; } .card-24-5 { background: linear-gradient(135deg, #7CC4E4, #A3C9E2); } .card-24-6 { background: linear-gradient(135deg, #f4f7fb, #e3e7ef) !important; } .card-24-7 { background: linear-gradient(135deg, #D9B76F, #B89A52); } .card-24-8 { background: linear-gradient(135deg, #f7faff, #e9f0ff) !important; } .card-24-9 { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); } .card-24-10 { background: linear-gradient(135deg, #ffe9e6, #ffd8d3) !important; } .card-24-11 { background: linear-gradient(135deg, #2E6F95, #4A8FBF); } .card-24-12 { background: linear-gradient(135deg, #D9B76F, #C0C6D9); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Alaska Festivals & Seasonal Events (CSS) */ /* ========================================================= */ .section-25 { padding: 80px 0; background: #F2F8FF; /* Arctic Sky Blue */ } .section-25-wrapper { max-width: 1300px; margin: 0 auto; } .section-25 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .section-25 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 50px; } /* GRID */ .festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD */ .festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* IMAGE BLOCK */ .festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* ========================================================= */ /* BACKGROUND IMAGES — ALASKA FESTIVALS */ /* ========================================================= */ .festival-image-alaska-day { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-day-festival.webp'); } .festival-image-fur-rendezvous { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-fur-rendezvous.webp'); } .festival-image-iditarod { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-iditarod-start.webp'); } .festival-image-solstice { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-summer-solstice.webp'); } .festival-image-whale-festival { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-whale-festival.webp'); } .festival-image-salmon-festival { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-salmon-festival.webp'); } .festival-image-cultural-gathering { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-cultural-gathering.webp'); } .festival-image-state-fair { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-state-fair.webp'); } .festival-image-aurora-season { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-aurora-season.webp'); } .festival-image-glacier-bay-summer { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-glacier-bay-summer.webp'); } .festival-image-bird-migration { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-bird-migration.webp'); } .festival-image-winter-ice { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-winter-ice-season.webp'); } /* ========================================================= */ /* TEXT — REGION‑SCOPED (FIX APPLIED) */ /* ========================================================= */ .alaska-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E6F95; /* Glacial Blue */ opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — ALASKA FESTIVAL GRADIENTS */ /* ========================================================= */ .card-25-1 { background: linear-gradient(135deg, #7CC4E4, #4A8FBF); } .card-25-2 { background: linear-gradient(135deg, #2E6F95, #0A1A2F); } .card-25-3 { background: linear-gradient(135deg, #C0C6D9, #8F96A8); } .card-25-4 { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); } .card-25-5 { background: linear-gradient(135deg, #4A8FBF, #2E6F95); } .card-25-6 { background: linear-gradient(135deg, #D9B76F, #B89A52); } .card-25-7 { background: linear-gradient(135deg, #081423, #0A1A2F); } .card-25-8 { background: linear-gradient(135deg, #7CC4E4, #A3C9E2); } .card-25-9 { background: linear-gradient(135deg, #5EB1FF, #2E6F95); } .card-25-10 { background: linear-gradient(135deg, #4A8FBF, #7CC4E4); } .card-25-11 { background: linear-gradient(135deg, #A6D8A8, #6FAF72); } .card-25-12 { background: linear-gradient(135deg, #C0C6D9, #A3C9E2); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Alaska Cruise Cuisine & Dining Highlights (CSS) */ /* ========================================================= */ .section-26 { padding: 80px 0; background: #F3F9FF; /* Arctic Mist Blue */ } .section-26-wrapper { max-width: 1300px; margin: 0 auto; } .section-26 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .section-26 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 50px; } /* GRID */ .cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD */ .cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* ========================================================= */ /* BACKGROUND IMAGES — ALASKA CUISINE */ /* ========================================================= */ .cuisine-image-seafood-classics { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-seafood-classics.webp'); } .cuisine-image-king-crab { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-king-crab.webp'); } .cuisine-image-indigenous-flavours { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-indigenous-flavours.webp'); } .cuisine-image-reindeer-dining { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-reindeer-dining.webp'); } .cuisine-image-glacier-dessert { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-glacier-dessert.webp'); } .cuisine-image-coastal-chowder { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-coastal-chowder.webp'); } .cuisine-image-wild-berry { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-wild-berry-desserts.webp'); } .cuisine-image-smoked-specialities { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-smoked-specialities.webp'); } .cuisine-image-comfort-food { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-comfort-food.webp'); } .cuisine-image-sustainable-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-sustainable-seafood.webp'); } .cuisine-image-steakhouse { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-steakhouse-cut.webp'); } .cuisine-image-international { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-cruise-international.webp'); } /* ========================================================= */ /* TEXT — REGION‑SCOPED (FIX APPLIED) */ /* ========================================================= */ .alaska-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2E6F95; /* Glacial Blue */ opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — ALASKA CUISINE GRADIENTS */ /* ========================================================= */ .card-26-1 { background: linear-gradient(135deg, #7CC4E4, #4A8FBF); } .card-26-2 { background: linear-gradient(135deg, #D9B76F, #B89A52); } .card-26-3 { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); } .card-26-4 { background: linear-gradient(135deg, #8F96A8, #5E6470); } .card-26-5 { background: linear-gradient(135deg, #C0E6FF, #8AC9F0); } .card-26-6 { background: linear-gradient(135deg, #4A8FBF, #2E6F95); } .card-26-7 { background: linear-gradient(135deg, #D97FB0, #B65A8A); } .card-26-8 { background: linear-gradient(135deg, #081423, #0A1A2F); } .card-26-9 { background: linear-gradient(135deg, #B89A52, #8F7740); } .card-26-10 { background: linear-gradient(135deg, #7CC4E4, #A3C9E2); } .card-26-11 { background: linear-gradient(135deg, #6FAF72, #4E8F55); } .card-26-12 { background: linear-gradient(135deg, #5EB1FF, #2E6F95); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-26:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Alaska Shore Excursions (CSS) */ /* ========================================================= */ .section-27 { padding: 80px 0; background: #F1F7FF; } .section-27-wrapper { max-width: 1300px; margin: 0 auto; } .section-27 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; } .section-27 .section-subtitle { font-size: 1.2rem; text-align: center; color: #2E6F95; margin-bottom: 50px; } /* GRID */ .section-27 .excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .section-27 .excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; opacity: 0; transform: translateY(20px); /* FULL BLEED FIX */ padding: 0; border: none; } /* IMAGE BLOCK — FULL BLEED */ .section-27 .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; } /* TEXT — CENTERED + PURE BLACK */ .section-27 .excursion-card h3, .section-27 .excursion-card p { text-align: center; width: 100%; margin-left: 0; margin-right: 0; position: relative; z-index: 20; color: #000000; /* PURE BLACK */ } .section-27 .excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 0 10px 0; } .section-27 .excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 0 20px 0; opacity: 0.95; } /* REVEAL ANIMATION */ .section-27.section27-reveal-active .excursion-card.card-27-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — ALASKA */ .excursion-image-glacier-icefield { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-glacier-icefield-tour.webp'); } .excursion-image-wildlife-excursion { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-wildlife-excursion.webp'); } .excursion-image-scenic-fjord-cruise { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-scenic-fjord-cruise.webp'); } .excursion-image-gold-rush-walk { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-gold-rush-walk.webp'); } .excursion-image-indigenous-excursion { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-indigenous-excursion.webp'); } .excursion-image-coastal-hike { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-coastal-hike.webp'); } .excursion-image-kayaking-excursion { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-kayaking-excursion.webp'); } .excursion-image-seafood-tasting { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-seafood-tasting.webp'); } .excursion-image-whale-watching-tour { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-whale-watching-tour.webp'); } .excursion-image-mountain-tram { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-mountain-tram.webp'); } .excursion-image-port-market { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-port-market.webp'); } .excursion-image-private-excursion { background-image: url('../cruise-images/cruise-region-subpages-images/alaska-private-excursion.webp'); } /* HOVER */ .hover-27:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .section-27 .excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .section-27 .excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .section-27 .excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 28 — Alaska Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .alaska-transfers-section { padding: 80px 0; background: #F0F6FF; /* Polar Frost Blue */ } .alaska-transfers-inner { max-width: 1300px; margin: 0 auto; } .alaska-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-transfers-intro { font-size: 1.15rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 20px; } /* GRID */ .alaska-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .alaska-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #fff; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #fff; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #fff; opacity: 0.95; } /* ========================================================= */ /* GRADIENTS — ALASKA TRANSFER CARDS */ /* ========================================================= */ .transfer-card-town { background: linear-gradient(135deg, #7CC4E4, #4A8FBF); /* Glacier → Whale */ } .transfer-card-airport { background: linear-gradient(135deg, #8AC9F0, #2E6F95); /* Soft Blue → Glacial */ } .transfer-card-cruiseline { background: linear-gradient(135deg, #A3C9E2, #7CC4E4); /* Snow Mist → Arctic Sky */ } .transfer-card-local { background: linear-gradient(135deg, #6FAF72, #4E8F55); /* Forest Green → Deep Forest */ } .transfer-card-access { background: linear-gradient(135deg, #D9B76F, #B89A52); /* Arctic Gold → Warm Gold */ } .transfer-card-planning { background: linear-gradient(135deg, #C0C6D9, #8F96A8); /* Frosted Silver → Cold Steel */ } /* HOVER */ .alaska-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .alaska-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .alaska-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 29 — Alaska Cruise FAQ (CSS) */ /* ========================================================= */ .alaska-faq-section { padding: 80px 0; background: #F4F8FF; /* Arctic Mist White‑Blue */ } .alaska-faq-inner { max-width: 1100px; margin: 0 auto; } .alaska-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A1A2F; /* Deep Fjord Navy */ } .alaska-faq-intro { font-size: 1.15rem; text-align: center; color: #2E6F95; /* Glacial Blue */ margin-bottom: 40px; } /* Accordion Container */ .alaska-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .alaska-faq-item { background: #EAF2FB; /* Polar Ice Blue */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .alaska-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #0A1A2F; /* Deep Fjord Navy */ text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .alaska-faq-question:hover { background: #DCE8F5; /* Soft Arctic Hover */ } /* Arrow Icon */ .alaska-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .alaska-faq-item.active .alaska-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .alaska-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .alaska-faq-answer p { font-size: 1rem; color: #2E3A45; /* Glacier Rock Grey */ line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .alaska-faq-item.active .alaska-faq-answer { max-height: 300px; } /* Responsive */ @media (max-width: 800px) { .alaska-faq-title { font-size: 2rem; } .alaska-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- SECTION 3 — HERO BACKGROUND (AU/NZ hero image) --------------------------------------------- */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/australia-new-zealand-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .hero-region { min-height: 480px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (AU/NZ) --------------------------------------------- */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #FDF4EC; /* Soft coastal sand */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #006D77; /* Tasman Deep Teal */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #004B52; /* Deeper Tasman tone */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — 3×5 LAYOUT */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #E8F7F8 0%, #FFFFFF 100%); /* Tasman blue‑tinted gradient */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #004B52; text-align: center; } /* TAGS */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .tag { background: #00A8B5; /* Tasman Turquoise */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #004B52; display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .highlight-icon { color: #FF7F50; /* Coral Coast accent */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-link { background: #006D77; /* Tasman Deep Teal */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .secondary-btn { background: #004B52; /* Deeper Tasman tone */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #005862; transform: translateY(-2px); } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .secondary-btn:hover { background: #00363C; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.australia-nz-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #FF7F50; /* Coral Coast accent */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — Australia Cruise Experience Overview */ /* ========================================================= */ .anz-australia-experience-section { width: 100%; padding: 80px 0; background: #FDF4EC; /* Coastal Sand */ color: #004B52; /* Deep Tasman Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-australia-experience-section.revealed { opacity: 1; transform: translateY(0); } .anz-australia-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-australia-experience-header { text-align: center; margin-bottom: 40px; } .anz-australia-experience-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-australia-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; /* Deeper Tasman tone */ margin-bottom: 14px; } /* List layout */ .anz-australia-experience-list { list-style: none; margin: 0; padding: 0; } .anz-australia-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #004B52; } /* Emoji icon */ .anz-australia-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .anz-australia-text { display: inline-block; } /* Country / region name styling */ .anz-australia-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .anz-region-queensland { color: #00A8B5; /* Reef Turquoise */ } .anz-region-nsw { color: #006D77; /* Tasman Deep Teal */ } .anz-region-victoria { color: #FF7F50; /* Coral Coast Orange */ } .anz-region-tasmania { color: #2E7D32; /* Forest Green */ } .anz-region-wa { color: #8E44AD; /* Indian Ocean Purple */ } .anz-region-nt { color: #D35400; /* Outback Sunset */ } .anz-region-atmosphere { color: #006D77; /* Tasman Deep Teal */ } .anz-region-scenic { color: #FF7F50; /* Coral Coast Orange */ } /* ========================================================= */ /* SECTION 7 — New Zealand Cruise Experience Overview */ /* ========================================================= */ .anz-nz-experience-section { width: 100%; padding: 80px 0; background: #F0F8FA; /* Cool Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-nz-experience-section.revealed { opacity: 1; transform: translateY(0); } .anz-nz-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-nz-experience-header { text-align: center; margin-bottom: 40px; } .anz-nz-experience-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-nz-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; /* Deeper Tasman tone */ margin-bottom: 14px; } /* List layout */ .anz-nz-experience-list { list-style: none; margin: 0; padding: 0; } .anz-nz-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #003B44; } /* Emoji icon */ .anz-nz-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .anz-nz-text { display: inline-block; } /* Region name styling */ .anz-nz-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .anz-nz-north-island { color: #00A8B5; /* Coastal Turquoise */ } .anz-nz-south-island { color: #2E7D32; /* Alpine Green */ } .anz-nz-fjordland { color: #1565C0; /* Fjord Blue */ } .anz-nz-wildlife { color: #6A1B9A; /* Wildlife Purple */ } .anz-nz-atmosphere { color: #006D77; /* Tasman Deep Teal */ } .anz-nz-scenic { color: #FF7F50; /* Coral Coast Orange */ } /* ========================================================= */ /* SECTION 8 — South Pacific Extensions (AU/NZ‑Linked) */ /* ========================================================= */ .anz-sp-experience-section { width: 100%; padding: 80px 0; background: #FFF6EF; /* Coral Coast Soft Peach Sand */ color: #004B52; /* Deep Tasman Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-sp-experience-section.revealed { opacity: 1; transform: translateY(0); } .anz-sp-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-sp-experience-header { text-align: center; margin-bottom: 40px; } .anz-sp-experience-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-sp-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; /* Deeper Tasman tone */ margin-bottom: 14px; } /* List layout */ .anz-sp-experience-list { list-style: none; margin: 0; padding: 0; } .anz-sp-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #004B52; } /* Emoji icon */ .anz-sp-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .anz-sp-text { display: inline-block; } /* Region name styling */ .anz-sp-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .anz-sp-fiji { color: #00A8B5; /* Lagoon Turquoise */ } .anz-sp-vanuatu { color: #D35400; /* Volcanic Sunset Orange */ } .anz-sp-new-caledonia { color: #1565C0; /* Lagoon Blue */ } .anz-sp-tonga { color: #6A1B9A; /* Cultural Purple */ } .anz-sp-samoa { color: #2E7D32; /* Tropical Green */ } .anz-sp-atmosphere { color: #006D77; /* Tasman Deep Teal */ } .anz-sp-scenic { color: #FF7F50; /* Coral Coast Orange */ } /* ========================================================= */ /* SECTION 9 — Australia & New Zealand Seasonal Cruise Guide */ /* ========================================================= */ .anz-seasonal-guide-section { width: 100%; padding: 80px 0; background: #F0F8FA; /* Cool Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .anz-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .anz-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; /* Deeper Tasman tone */ margin-bottom: 14px; } /* List layout */ .anz-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .anz-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #003B44; } /* Emoji icon */ .anz-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .anz-season-text { display: inline-block; } /* Season name styling */ .anz-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .anz-season-australia { color: #FF7F50; /* Coral Coast Orange */ } .anz-season-newzealand { color: #1565C0; /* Fjord Blue */ } .anz-season-southpacific { color: #00A8B5; /* Lagoon Turquoise */ } .anz-season-cyclone { color: #D35400; /* Cyclone Sunset Orange */ } .anz-season-festivals { color: #6A1B9A; /* Festival Purple */ } .anz-season-scenic { color: #2E7D32; /* Scenic Green */ } /* ========================================================= */ /* SECTION 10 — Australia & New Zealand Best Cruise Months Chart */ /* ========================================================= */ .anz-best-months-section { width: 100%; padding: 80px 0; background: #FDF4EC; /* Coastal Sand */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-best-months-section.revealed { opacity: 1; transform: translateY(0); } .anz-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-best-months-header { text-align: center; margin-bottom: 40px; } .anz-best-months-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; /* Deeper Tasman tone */ margin-bottom: 14px; } /* Chart container */ .anz-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header (months row) */ .anz-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #006D77; margin-bottom: 12px; text-align: center; } .anz-months-chart-header span { font-size: 0.85rem; } /* Chart label for each region */ .anz-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #003B44; } /* Chart rows */ .anz-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles */ .best { background: linear-gradient(135deg, #2E7D32, #66BB6A); /* Scenic Green */ border-radius: 4px; height: 18px; } .good { background: linear-gradient(135deg, #00A8B5, #4DD0E1); /* Lagoon Turquoise */ border-radius: 4px; height: 18px; } .avoid { background: linear-gradient(135deg, #C62828, #EF5350); /* Cyclone Red */ border-radius: 4px; height: 18px; } /* Legend */ .anz-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .anz-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .anz-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .anz-best-months-list { list-style: none; margin: 0; padding: 0; } .anz-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #003B44; } .anz-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .anz-best-text { display: inline-block; } .anz-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .anz-best-australia { color: #FF7F50; /* Coral Coast Orange */ } .anz-best-newzealand { color: #1565C0; /* Fjord Blue */ } .anz-best-southpacific { color: #00A8B5; /* Lagoon Turquoise */ } .anz-best-cyclone { color: #C62828; /* Cyclone Red */ } .anz-best-festivals { color: #6A1B9A; /* Festival Purple */ } .anz-best-scenic { color: #2E7D32; /* Scenic Green */ } /* ========================================================= */ /* SECTION 11 — Australia & New Zealand Cruise Tips & Planning Guide */ /* ========================================================= */ .anz-tips-section { width: 100%; padding: 80px 0; background: #F0F8FA; /* Cool Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-tips-section.revealed { opacity: 1; transform: translateY(0); } .anz-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-tips-header { text-align: center; margin-bottom: 40px; } .anz-tips-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; /* Deeper Tasman tone */ margin-bottom: 14px; } /* Icons Row */ .anz-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #003B44; } /* Gradient Divider */ .anz-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #006D77, #00A8B5, #006D77); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .anz-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .anz-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .anz-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .anz-tip-planning { color: #006D77; } .anz-tip-packing { color: #2E7D32; } .anz-tip-docs { color: #6A1B9A; } .anz-tip-weather { color: #0277BD; } .anz-tip-port { color: #FF7F50; } /* Do's & Don'ts */ .anz-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .anz-tips-dos, .anz-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .anz-tips-dos h3, .anz-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #006D77; } .anz-tips-dos ul, .anz-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .anz-insider-tips { margin-top: 40px; } .anz-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #006D77; } .anz-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising in AU/NZ */ /* ========================================================= */ .anz-boutique-section { width: 100%; padding: 80px 0; background: #FDF4EC; /* Coastal Sand */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-boutique-section.revealed { opacity: 1; transform: translateY(0); } .anz-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-boutique-header { text-align: center; margin-bottom: 40px; } .anz-boutique-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; margin-bottom: 14px; } /* Icon row */ .anz-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #003B44; } /* Cards container */ .anz-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .anz-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .anz-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .anz-boutique-card-teal { background: linear-gradient(135deg, #006D77, #00A8B5); } .anz-boutique-card-coral { background: linear-gradient(135deg, #FF7F50, #FF9E80); } .anz-boutique-card-blue { background: linear-gradient(135deg, #1565C0, #42A5F5); } .anz-boutique-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .anz-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .anz-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .anz-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Colourful divider */ .anz-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #006D77, #00A8B5, #FF7F50, #2E7D32); border-radius: 3px; margin: 40px 0; } /* List section */ .anz-boutique-list-wrapper { margin-top: 10px; } .anz-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #006D77; } .anz-boutique-list { list-style: none; margin: 0; padding: 0; } .anz-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #003B44; } .anz-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .anz-boutique-list-text { display: inline-block; } /* Colour labels */ .anz-boutique-label-teal { color: #006D77; } .anz-boutique-label-coral { color: #FF7F50; } .anz-boutique-label-blue { color: #1565C0; } .anz-boutique-label-green { color: #2E7D32; } /* Responsive */ @media (max-width: 900px) { .anz-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — AU/NZ Port Profiles */ /* ========================================================= */ .anz-port-section { width: 100%; padding: 80px 0; background: #F0F8FA; /* Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-port-section.revealed { opacity: 1; transform: translateY(0); } .anz-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .anz-port-header { text-align: center; margin-bottom: 40px; } .anz-port-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-port-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; margin-bottom: 14px; } /* Icon Row */ .anz-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #003B44; } /* Cards container */ .anz-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .anz-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .anz-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .anz-port-card-teal { background: linear-gradient(135deg, #006D77, #00A8B5); } .anz-port-card-coral { background: linear-gradient(135deg, #FF7F50, #FF9E80); } .anz-port-card-blue { background: linear-gradient(135deg, #1565C0, #42A5F5); } .anz-port-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .anz-port-card-coral-light { background: linear-gradient(135deg, #FF9E80, #FFC4A3); } .anz-port-card-purple { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } .anz-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .anz-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .anz-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal animation */ .anz-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Colourful divider */ .anz-port-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #006D77, #00A8B5, #FF7F50, #2E7D32, #6A1B9A); border-radius: 3px; margin: 40px 0; } /* List section */ .anz-port-list-wrapper { margin-top: 10px; } .anz-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #006D77; } .anz-port-list { list-style: none; margin: 0; padding: 0; } .anz-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #003B44; } .anz-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .anz-port-label-teal { color: #006D77; } .anz-port-label-coral { color: #FF7F50; } .anz-port-label-blue { color: #1565C0; } .anz-port-label-green { color: #2E7D32; } /* Responsive */ @media (max-width: 900px) { .anz-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — AU/NZ Cruise Port Comparison Grid */ /* ========================================================= */ .anz-port-compare-section { width: 100%; padding: 80px 0; background: #FDF4EC; /* Coastal Sand */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .anz-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .anz-port-compare-header { text-align: center; margin-bottom: 50px; } .anz-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 20px; } .anz-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #005862; max-width: 800px; margin: 0 auto; } /* Grid container */ .anz-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header { background: #E0F3F7; /* Light Tasman Mist */ font-weight: 700; color: #006D77; } /* Left colour accent */ .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-teal::before { background: #006D77; } .compare-row-coral::before { background: #FF7F50; } .compare-row-blue::before { background: #1565C0; } .compare-row-green::before { background: #2E7D32; } .compare-row-coral-light::before { background: #FF9E80; } .compare-row-purple::before { background: #6A1B9A; } .compare-row-indigo::before { background: #283593; } .compare-row-blue-light::before { background: #42A5F5; } /* Alternating row backgrounds */ .compare-grid-row:nth-child(even) { background: #F7FBFC; } /* Hover glow */ .compare-grid-row:hover { background: rgba(0, 109, 119, 0.08); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .anz-port-compare-insights { margin-top: 40px; padding: 30px; background: #E0F3F7; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #006D77; margin-bottom: 14px; } .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #005862; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header { display: none; } .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — AU/NZ Embarkation vs Destination Ports (CSS) */ /* ========================================================= */ .anz-port-usage-section { padding: 80px 0; background: #F0F8FA; /* Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-port-usage-section.revealed { opacity: 1; transform: translateY(0); } .anz-port-usage-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; } /* Header */ .anz-port-usage-header { text-align: center; margin-bottom: 40px; } .anz-port-usage-title { font-size: 2.4rem; font-weight: 800; margin-bottom: 10px; color: #006D77; /* Tasman Deep Teal */ } .anz-port-usage-intro { font-size: 1.15rem; text-align: center; color: #005862; margin-bottom: 20px; max-width: 900px; margin-left: auto; margin-right: auto; } /* GRID */ .anz-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .anz-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; opacity: 0; } /* IMAGE BLOCK */ .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES (AU/NZ‑specific) */ .usage-image-embarkation-anz { background-image: url('../cruise-images/cruise-region-subpages-images/anz-embarkation-ports.webp'); } .usage-image-destination-anz { background-image: url('../cruise-images/cruise-region-subpages-images/anz-destination-ports.webp'); } .usage-image-debarkation-anz { background-image: url('../cruise-images/cruise-region-subpages-images/anz-debarkation-ports.webp'); } /* TEXT */ .usage-card-body { background: transparent; } .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #FFFFFF; } .usage-card-text { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } .usage-card-note { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } /* GRADIENTS (AU/NZ colour scheme) */ .usage-card-embarkation-anz { background: linear-gradient(135deg, #006D77, #00A8B5); } .usage-card-destination-anz { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .usage-card-debarkation-anz { background: linear-gradient(135deg, #FF7F50, #FF9E80); } /* Reveal animation */ .anz-port-usage-card.usage-card-revealed { opacity: 1; transform: translateY(0); } .anz-port-usage-card.usage-card-hovered { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .anz-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .anz-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — AU/NZ Cruise Lines Overview Grid */ /* ========================================================= */ .anz-cruise-lines-overview { width: 100%; padding: 90px 0; background: #F0F8FA; /* Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .anz-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .anz-cruise-lines-header { text-align: center; margin-bottom: 60px; } .anz-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #006D77; /* Tasman Deep Teal */ margin-bottom: 16px; } /* Cinematic gradient underline */ .anz-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #006D77, #00A8B5, #FF7F50); } .anz-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #005862; max-width: 850px; margin: 0 auto; } /* Grid */ .anz-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .anz-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .anz-cruise-line-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .anz-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-teal::before { background: #006D77; } .card-coral::before { background: #FF7F50; } .card-blue::before { background: #1565C0; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #00A8B5; } .card-green::before { background: #2E7D32; } .card-purple::before { background: #6A1B9A; } .card-coral-light::before { background: #FF9E80; } /* Icon */ .anz-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .anz-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #006D77; margin-bottom: 12px; } /* Summary */ .anz-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #005862; margin-bottom: 18px; } /* Points */ .anz-cruise-line-points { list-style: none; padding: 0; margin: 0; } .anz-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #003B44; padding-left: 14px; position: relative; } .anz-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #006D77; font-size: 0.9rem; } /* Hover glow */ .anz-cruise-line-card:hover { background: rgba(0, 109, 119, 0.08); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .anz-cruise-lines-title { font-size: 2.2rem; } .anz-cruise-lines-intro { font-size: 1.1rem; } .anz-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 16 — AU/NZ Cruise Ship Types Overview */ /* ========================================================= */ .anz-ship-types-overview { width: 100%; padding: 90px 0; background: #F0F8FA; /* Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .anz-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .anz-ship-types-header { text-align: center; margin-bottom: 60px; } .anz-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #006D77; margin-bottom: 16px; } /* Cinematic gradient underline */ .anz-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #006D77, #00A8B5, #FF7F50); } .anz-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #005862; max-width: 850px; margin: 0 auto; } /* Grid */ .anz-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Ship Type Cards */ .anz-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .anz-ship-type-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .anz-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-teal::before { background: #006D77; } .card-coral::before { background: #FF7F50; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #00A8B5; } .card-amber::before { background: #FF9E80; } .card-purple::before { background: #6A1B9A; } .card-blue::before { background: #1565C0; } .card-red::before { background: #C62828; } /* Icon */ .anz-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .anz-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #006D77; margin-bottom: 12px; } /* Summary */ .anz-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #005862; margin-bottom: 18px; } /* Points */ .anz-ship-type-points { list-style: none; padding: 0; margin: 0; } .anz-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #003B44; padding-left: 14px; position: relative; } .anz-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #006D77; font-size: 0.9rem; } /* Hover glow */ .anz-ship-type-card:hover { background: rgba(0, 109, 119, 0.08); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .anz-ship-types-title { font-size: 2.2rem; } .anz-ship-types-intro { font-size: 1.1rem; } .anz-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 17 — AU/NZ Cruise Duration Overview */ /* ========================================================= */ .anz-cruise-duration-overview { width: 100%; padding: 90px 0; background: #F0F8FA; /* Fjord Mist Blue */ color: #003B44; /* Deep Fjord Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .anz-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .anz-cruise-duration-header { text-align: center; margin-bottom: 60px; } .anz-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #006D77; margin-bottom: 16px; } /* Cinematic gradient underline */ .anz-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #006D77, #00A8B5, #FF7F50); } .anz-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #005862; max-width: 850px; margin: 0 auto; } /* Grid */ .anz-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .anz-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .anz-cruise-duration-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .anz-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-teal::before { background: #006D77; } .card-coral::before { background: #FF7F50; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #00A8B5; } .card-amber::before { background: #FF9E80; } .card-purple::before { background: #6A1B9A; } .card-blue::before { background: #1565C0; } .card-red::before { background: #C62828; } /* Icon */ .anz-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .anz-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #006D77; margin-bottom: 12px; } /* Summary */ .anz-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #005862; margin-bottom: 18px; } /* Points */ .anz-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .anz-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #003B44; padding-left: 14px; position: relative; } .anz-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #006D77; font-size: 0.9rem; } /* Hover glow */ .anz-cruise-duration-card:hover { background: rgba(0, 109, 119, 0.08); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .anz-cruise-duration-title { font-size: 2.2rem; } .anz-cruise-duration-intro { font-size: 1.1rem; } .anz-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — ANZ Cruise Price Range Overview (12 cards) */ /* ========================================================= */ .anz-cruise-price-overview { width: 100%; padding: 90px 0; background: #F4FBFF; /* Soft Tasman Sea Blue */ color: #0B1E3B; /* Deep Harbour Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .anz-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .anz-cruise-price-header { text-align: center; margin-bottom: 60px; } .anz-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #0B1E3B; margin-bottom: 16px; } .anz-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #0077B6, #00B4D8, #48CAE4, #ADE8F4); } .anz-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #27415F; max-width: 850px; margin: 0 auto; } /* Grid */ .anz-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .anz-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .anz-cruise-price-card.visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .anz-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* ========================================================= */ /* NEW 12‑COLOUR PALETTE — AUSTRALIA & NEW ZEALAND */ /* ========================================================= */ .anz-card-coralreef::before { background: #FF6F61; } /* Coral Reef */ .anz-card-pacificblue::before { background: #0077B6; } /* Pacific Blue */ .anz-card-fern::before { background: #2E7D32; } /* NZ Fern Green */ .anz-card-sunrise::before { background: #FFB74D; } /* Coastal Sunrise */ .anz-card-sand::before { background: #D2A679; } /* Beach Sand */ .anz-card-outback::before { background: #8D6E63; } /* Outback Earth */ .anz-card-deepsea::before { background: #003049; } /* Deep Tasman Sea */ .anz-card-harbour::before { background: #4E73B8; } /* Harbour Blue */ .anz-card-eucalypt::before { background: #558B2F; } /* Eucalyptus Green */ .anz-card-southernsun::before { background: #F9A825; } /* Southern Sun Gold */ .anz-card-coast::before { background: #00A8E8; } /* Coastal Aqua */ .anz-card-kiwi::before { background: #6A1B9A; } /* Kiwi Twilight Violet */ /* ICON + TITLES */ .anz-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .anz-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #0B1E3B; margin-bottom: 18px; } /* Layer Titles */ .anz-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .anz-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #27415F; margin-bottom: 10px; } .anz-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .anz-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .anz-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #0B1E3B; padding-left: 14px; position: relative; } .anz-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0077B6; font-size: 0.9rem; } /* PREMIUM HOVER EFFECTS (12 colours) */ .anz-card-coralreef:hover { background: rgba(255, 111, 97, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-pacificblue:hover { background: rgba(0, 119, 182, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-fern:hover { background: rgba(46, 125, 50, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-sunrise:hover { background: rgba(255, 183, 77, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-sand:hover { background: rgba(210, 166, 121, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-outback:hover { background: rgba(141, 110, 99, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-deepsea:hover { background: rgba(0, 48, 73, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-harbour:hover { background: rgba(78, 115, 184, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-eucalypt:hover { background: rgba(85, 139, 47, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-southernsun:hover { background: rgba(249, 168, 37, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-coast:hover { background: rgba(0, 168, 232, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .anz-card-kiwi:hover { background: rgba(106, 27, 154, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } /* Responsive */ @media (max-width: 700px) { .anz-cruise-price-title { font-size: 2.2rem; } .anz-cruise-price-intro { font-size: 1.1rem; } .anz-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — AUSTRALIA & NEW ZEALAND CRUISE BEST VALUE TIPS */ /* ========================================================= */ .section-19-anz { padding: 80px 0; background: #f4fbff; } .anz-section-19-wrapper { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .anz-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f1b2e; } .anz-section-subtitle { font-size: 1.2rem; text-align: center; color: #4b5a6b; margin-bottom: 50px; } /* GRID */ .anz-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .anz-value-card { padding: 28px; border-radius: 14px; color: #ffffff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .anz-value-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .anz-value-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — UNIQUE TO AU/NZ SECTION 19 */ /* ========================================================= */ .card-19-anz-1 { background: linear-gradient(135deg, #1b98e0, #247ba0); } /* ocean blue */ .card-19-anz-2 { background: linear-gradient(135deg, #ff9f1c, #ff7f11); } /* sunset orange */ .card-19-anz-3 { background: linear-gradient(135deg, #2ec4b6, #1aa39a); } /* teal coastal */ .card-19-anz-4 { background: linear-gradient(135deg, #3cb371, #2e8b57); } /* green hinterland */ .card-19-anz-5 { background: linear-gradient(135deg, #ff6b6b, #ee5253); } /* coral reef */ .card-19-anz-6 { background: linear-gradient(135deg, #4b7bec, #3867d6); } /* Tasman blue */ .card-19-anz-7 { background: linear-gradient(135deg, #9b59b6, #8e44ad); } /* violet premium */ .card-19-anz-8 { background: linear-gradient(135deg, #f368e0, #e84393); } /* festival pink */ .card-19-anz-9 { background: linear-gradient(135deg, #feca57, #f6b93b); } /* golden coast */ .card-19-anz-10 { background: linear-gradient(135deg, #00cec9, #01a3a4); } /* turquoise surf */ .card-19-anz-11 { background: linear-gradient(135deg, #5f27cd, #341f97); } /* harbour night */ .card-19-anz-12 { background: linear-gradient(135deg, #ff7675, #e66767); } /* warm family */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-19-anz:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .anz-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .anz-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .anz-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 20 — Australia & New Zealand Cultural Immersion */ /* ========================================================= */ .anz-cultural-immersion.section-20-au { padding: 80px 0; background: #f4f8fb; } .section-20-au-wrapper { max-width: 1300px; margin: 0 auto; } .section-20-au .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #12212f; } .section-20-au .section-subtitle { font-size: 1.2rem; text-align: center; color: #4b5a68; margin-bottom: 50px; } /* GRID */ .immersion-grid-au { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .immersion-card-au { padding: 28px; border-radius: 14px; color: #ffffff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .immersion-card-au h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .immersion-card-au p { font-size: 1rem; line-height: 1.55; opacity: 0.96; } /* ========================================================================================================= */ /* 12‑COLOUR PALETTE — AUSTRALIA & NEW ZEALAND Coastal blues, bush greens, sunset tones, harbour violets */ /* ========================================================================================================== */ .card-20-au-1 { background: linear-gradient(135deg, #1b5e20, #4caf50); } /* First Nations – earth & bush */ .card-20-au-2 { background: linear-gradient(135deg, #004d40, #26a69a); } /* Māori – deep green/teal */ .card-20-au-3 { background: linear-gradient(135deg, #0277bd, #4fc3f7); } /* Coastal markets – harbour blues */ .card-20-au-4 { background: linear-gradient(135deg, #6a1b9a, #ab47bc); } /* Wine regions – rich purple */ .card-20-au-5 {background: linear-gradient(135deg, #6d4c41, #8d6e63); color: #ffffff; } .card-20-au-6 { background: linear-gradient(135deg, #2e7d32, #66bb6a); } /* Coastal walks – bush greens */ .card-20-au-7 { background: linear-gradient(135deg, #f57c00, #ffb74d); } /* Wildlife – sunset orange */ .card-20-au-8 { background: linear-gradient(135deg, #c62828, #ef5350); } /* Cuisine – vibrant red */ .card-20-au-9 { background: linear-gradient(135deg, #283593, #5c6bc0); } /* Festivals – event blues */ .card-20-au-10 { background: linear-gradient(135deg, #01579b, #03a9f4); } /* Harbours & fiords – deep sea */ .card-20-au-11 { background: linear-gradient(135deg, #bf360c, #ff7043); } /* Outback – red earth */ .card-20-au-12 { background: linear-gradient(135deg, #4527a0, #7e57c2); } /* Art & street culture – violet */ /* ========================================================= */ /* HOVER EFFECTS — LIFT + SUBTLE BRIGHTEN */ /* ========================================================= */ .hover-20-au:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; filter: brightness(1.06); } /* RESPONSIVE */ @media (max-width: 1200px) { .immersion-grid-au { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .immersion-grid-au { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .immersion-grid-au { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 21 — Australia–New Zealand Wildlife & Nature Encounters (CSS) */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #f4f7fb; /* slightly different, soft AU/NZ neutral */ } .section-21-wrapper { max-width: 1300px; margin: 0 auto; } .section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4f5b6a; margin-bottom: 50px; } /* GRID */ .wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION-SCOPED TEXT FIX */ .anz-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102030; } .anz-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2f3b4a; opacity: 0.96; } /* IMAGE BLOCK */ .wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE BLOCK */ .wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — AUSTRALIA–NEW ZEALAND SECTION 21 */ .wildlife-image { transition: transform 0.35s ease; } .wildlife-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — AUSTRALIA & NEW ZEALAND WILDLIFE */ .wildlife-image-anz-marine-wildlife { background-image: url('../cruise-images/cruise-region-subpages-images/anz-marine-wildlife.webp'); } .wildlife-image-anz-reef { background-image: url('../cruise-images/cruise-region-subpages-images/anz-reef.webp'); } .wildlife-image-anz-koala-kangaroo { background-image: url('../cruise-images/cruise-region-subpages-images/anz-koala-kangaroo.webp'); } .wildlife-image-anz-penguins { background-image: url('../cruise-images/cruise-region-subpages-images/anz-penguins.webp'); } .wildlife-image-anz-kiwi-bird { background-image: url('../cruise-images/cruise-region-subpages-images/anz-kiwi-bird.webp'); } .wildlife-image-anz-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/anz-national-park.webp'); } .wildlife-image-anz-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/anz-rainforest.webp'); } .wildlife-image-anz-fjords { background-image: url('../cruise-images/cruise-region-subpages-images/anz-fjords.webp'); } .wildlife-image-anz-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/anz-mountains.webp'); } .wildlife-image-anz-outback { background-image: url('../cruise-images/cruise-region-subpages-images/anz-outback.webp'); } .wildlife-image-anz-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/anz-eco-tour.webp'); } .wildlife-image-anz-nature-photography{ background-image: url('../cruise-images/cruise-region-subpages-images/anz-nature-photography.webp'); } /* GRADIENTS — AU/NZ-SPECIFIC, LIGHTER PALETTE */ .card-21-1 { background: linear-gradient(135deg, #4fd2ff, #2aa9d8); } .card-21-2 { background: linear-gradient(135deg, #6ad8b5, #3fb48c); } .card-21-3 { background: linear-gradient(135deg, #ffd27a, #ffb347); } .card-21-4 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-21-5 { background: linear-gradient(135deg, #ffe28f, #ffc857); } .card-21-6 { background: linear-gradient(135deg, #b6e3c6, #7ac29b); } .card-21-7 { background: linear-gradient(135deg, #a8e6ff, #6bc4e8); } .card-21-8 { background: linear-gradient(135deg, #c9ddff, #8fb3ff); } .card-21-9 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } .card-21-10 { background: linear-gradient(135deg, #f7b3a8, #f28c7b); } .card-21-11 { background: linear-gradient(135deg, #b8f2e6, #7fd3c5); } .card-21-12 { background: linear-gradient(135deg, #d6c9ff, #b29bff); } /* HOVER */ .hover-21:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* RESPONSIVE */ @media (max-width: 1200px) { .wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Australia–New Zealand Cultural Experiences & Traditions (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #f3f6fb; /* new AU/NZ neutral, not copied from Asia */ } .section-22-wrapper { max-width: 1300px; margin: 0 auto; } .section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4f5b6a; margin-bottom: 50px; } /* GRID */ .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .anz-cultural-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102030; } .anz-cultural-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2f3b4a; opacity: 0.96; } /* IMAGE BLOCK */ .culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — AUSTRALIA–NEW ZEALAND SECTION 22 */ .culture-image { transition: transform 0.35s ease; } .culture-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — AU/NZ CULTURAL */ .culture-image-anz-aboriginal-traditions { background-image: url('../cruise-images/cruise-region-subpages-images/anz-aboriginal-traditions.webp'); } .culture-image-anz-maori-heritage { background-image: url('../cruise-images/cruise-region-subpages-images/anz-maori-heritage.webp'); } .culture-image-anz-indigenous-art { background-image: url('../cruise-images/cruise-region-subpages-images/anz-indigenous-art.webp'); } .culture-image-anz-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/anz-storytelling.webp'); } .culture-image-anz-food-culture { background-image: url('../cruise-images/cruise-region-subpages-images/anz-food-culture.webp'); } .culture-image-anz-historic-towns { background-image: url('../cruise-images/cruise-region-subpages-images/anz-historic-towns.webp'); } .culture-image-anz-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/anz-festivals.webp'); } .culture-image-anz-traditional-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/anz-traditional-clothing.webp'); } .culture-image-anz-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/anz-workshops.webp'); } .culture-image-anz-music-dance { background-image: url('../cruise-images/cruise-region-subpages-images/anz-music-dance.webp'); } .culture-image-anz-heritage-centres { background-image: url('../cruise-images/cruise-region-subpages-images/anz-heritage-centres.webp'); } .culture-image-anz-nature-practices { background-image: url('../cruise-images/cruise-region-subpages-images/anz-nature-practices.webp'); } /* GRADIENTS — AU/NZ‑SPECIFIC PALETTE */ .card-22-1 { background: linear-gradient(135deg, #f7c48b, #f29b4c); } .card-22-2 { background: linear-gradient(135deg, #8fd3ff, #4fa9e6); } .card-22-3 { background: linear-gradient(135deg, #f5b6e6, #e28fd0); } .card-22-4 { background: linear-gradient(135deg, #c9ddff, #8fb3ff); } .card-22-5 { background: linear-gradient(135deg, #ffe28f, #ffc857); } .card-22-6 { background: linear-gradient(135deg, #b6e3c6, #7ac29b); } .card-22-7 { background: linear-gradient(135deg, #f7b3a8, #f28c7b); } .card-22-8 { background: linear-gradient(135deg, #d6c9ff, #b29bff); } .card-22-9 { background: linear-gradient(135deg, #b8f2e6, #7fd3c5); } .card-22-10 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } .card-22-11 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-22-12 { background: linear-gradient(135deg, #cfe6b8, #9fc47f); } /* HOVER */ .hover-22:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* RESPONSIVE */ @media (max-width: 1200px) { .culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Australia–New Zealand Festivals & Seasonal Events (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #f2f6fb; /* AU/NZ-specific neutral */ } .section-23-wrapper { max-width: 1300px; margin: 0 auto; } .section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4f5b6a; margin-bottom: 50px; } /* GRID */ .festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION-SCOPED TEXT FIX */ .anz-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102030; } .anz-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2f3b4a; opacity: 0.96; } /* IMAGE BLOCK */ .festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — AUSTRALIA–NEW ZEALAND SECTION 23 */ .festival-image { transition: transform 0.35s ease; } .festival-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — AU/NZ FESTIVALS */ .festival-image-anz-aboriginal-festival { background-image: url('../cruise-images/cruise-region-subpages-images/anz-aboriginal-festival.webp'); } .festival-image-anz-maori-celebration { background-image: url('../cruise-images/cruise-region-subpages-images/anz-maori-celebration.webp'); } .festival-image-anz-summer-coastal { background-image: url('../cruise-images/cruise-region-subpages-images/anz-summer-coastal.webp'); } .festival-image-anz-winter-alpine { background-image: url('../cruise-images/cruise-region-subpages-images/anz-winter-alpine.webp'); } .festival-image-anz-food-wine { background-image: url('../cruise-images/cruise-region-subpages-images/anz-food-wine.webp'); } .festival-image-anz-harbour-events { background-image: url('../cruise-images/cruise-region-subpages-images/anz-harbour-events.webp'); } .festival-image-anz-flower-garden { background-image: url('../cruise-images/cruise-region-subpages-images/anz-flower-garden.webp'); } .festival-image-anz-light-lantern { background-image: url('../cruise-images/cruise-region-subpages-images/anz-light-lantern.webp'); } .festival-image-anz-national-holiday { background-image: url('../cruise-images/cruise-region-subpages-images/anz-national-holiday.webp'); } .festival-image-anz-music-arts { background-image: url('../cruise-images/cruise-region-subpages-images/anz-music-arts.webp'); } .festival-image-anz-wildlife-seasonal { background-image: url('../cruise-images/cruise-region-subpages-images/anz-wildlife-seasonal.webp'); } .festival-image-anz-parade-route { background-image: url('../cruise-images/cruise-region-subpages-images/anz-parade-route.webp'); } /* GRADIENTS — AU/NZ-SPECIFIC */ .card-23-1 { background: linear-gradient(135deg, #ffd59e, #f7a84c); } .card-23-2 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-23-3 { background: linear-gradient(135deg, #ffe28f, #ffc857); } .card-23-4 { background: linear-gradient(135deg, #c9ddff, #8fb3ff); } .card-23-5 { background: linear-gradient(135deg, #b6e3c6, #7ac29b); } .card-23-6 { background: linear-gradient(135deg, #f7b3a8, #f28c7b); } .card-23-7 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } .card-23-8 { background: linear-gradient(135deg, #d6c9ff, #b29bff); } .card-23-9 { background: linear-gradient(135deg, #b8f2e6, #7fd3c5); } .card-23-10 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-23-11 { background: linear-gradient(135deg, #cfe6b8, #9fc47f); } .card-23-12 { background: linear-gradient(135deg, #f7c48b, #f29b4c); } /* HOVER */ .hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* RESPONSIVE */ @media (max-width: 1200px) { .festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Australia–New Zealand Cruise Cuisine & Dining Highlights (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #f1f6fb; /* AU/NZ-specific neutral */ } .section-24-wrapper { max-width: 1300px; margin: 0 auto; } .section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4f5b6a; margin-bottom: 50px; } /* GRID */ .cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION-SCOPED TEXT FIX */ .anz-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102030; } .anz-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2f3b4a; opacity: 0.96; } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — AUSTRALIA–NEW ZEALAND SECTION 24 */ .cuisine-image { transition: transform 0.35s ease; } .cuisine-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — AU/NZ CUISINE */ .cuisine-image-anz-australian-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/anz-australian-seafood.webp'); } .cuisine-image-anz-nz-seafood-produce { background-image: url('../cruise-images/cruise-region-subpages-images/anz-nz-seafood-produce.webp'); } .cuisine-image-anz-indigenous-flavours { background-image: url('../cruise-images/cruise-region-subpages-images/anz-indigenous-flavours.webp'); } .cuisine-image-anz-grill-steakhouse { background-image: url('../cruise-images/cruise-region-subpages-images/anz-grill-steakhouse.webp'); } .cuisine-image-anz-modern-australian { background-image: url('../cruise-images/cruise-region-subpages-images/anz-modern-australian.webp'); } .cuisine-image-anz-nz-farm-table { background-image: url('../cruise-images/cruise-region-subpages-images/anz-nz-farm-table.webp'); } .cuisine-image-anz-pacific-dishes { background-image: url('../cruise-images/cruise-region-subpages-images/anz-pacific-dishes.webp'); } .cuisine-image-anz-comfort-classics { background-image: url('../cruise-images/cruise-region-subpages-images/anz-comfort-classics.webp'); } .cuisine-image-anz-sustainable-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/anz-sustainable-seafood.webp'); } .cuisine-image-anz-wine-pairings { background-image: url('../cruise-images/cruise-region-subpages-images/anz-wine-pairings.webp'); } .cuisine-image-anz-international-dining { background-image: url('../cruise-images/cruise-region-subpages-images/anz-international-dining.webp'); } .cuisine-image-anz-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/anz-desserts.webp'); } /* GRADIENTS — AU/NZ-SPECIFIC */ .card-24-1 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-24-2 { background: linear-gradient(135deg, #b6e3c6, #7ac29b); } .card-24-3 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } .card-24-4 { background: linear-gradient(135deg, #f7c48b, #f29b4c); } .card-24-5 { background: linear-gradient(135deg, #ffe28f, #ffc857); } .card-24-6 { background: linear-gradient(135deg, #cfe6b8, #9fc47f); } .card-24-7 { background: linear-gradient(135deg, #b8f2e6, #7fd3c5); } .card-24-8 { background: linear-gradient(135deg, #f7b3a8, #f28c7b); } .card-24-9 { background: linear-gradient(135deg, #c9ddff, #8fb3ff); } .card-24-10 { background: linear-gradient(135deg, #d6c9ff, #b29bff); } .card-24-11 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-24-12 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } /* HOVER */ .hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* RESPONSIVE */ @media (max-width: 1200px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Australia–New Zealand Shore Excursions (CSS) */ /* ========================================================= */ .section-25 { padding: 80px 0; background: #eef5fb; } .section-25-wrapper { max-width: 1300px; margin: 0 auto; } .section-25 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .section-25 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4f5b6a; margin-bottom: 50px; } /* GRID */ .excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION-SCOPED TEXT FIX */ .anz-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102030; } .anz-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2f3b4a; opacity: 0.96; } /* IMAGE BLOCK */ .excursion-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — AUSTRALIA–NEW ZEALAND SECTION 25 */ .excursion-image { transition: transform 0.35s ease; } .excursion-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — NEW UNIQUE FILENAMES */ .excursion-image-anz-excursion-25-coastal-city { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-coastal-city.webp'); } .excursion-image-anz-excursion-25-harbour-bay { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-harbour-bay.webp'); } .excursion-image-anz-excursion-25-beach-island { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-beach-island.webp'); } .excursion-image-anz-excursion-25-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-national-park.webp'); } .excursion-image-anz-excursion-25-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-rainforest.webp'); } .excursion-image-anz-excursion-25-wildlife { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-wildlife.webp'); } .excursion-image-anz-excursion-25-maori { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-maori.webp'); } .excursion-image-anz-excursion-25-aboriginal { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-aboriginal.webp'); } .excursion-image-anz-excursion-25-wine-region { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-wine-region.webp'); } .excursion-image-anz-excursion-25-adventure { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-adventure.webp'); } .excursion-image-anz-excursion-25-historic-town { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-historic-town.webp'); } .excursion-image-anz-excursion-25-private-tour { background-image: url('../cruise-images/cruise-region-subpages-images/anz-excursion-25-private-tour.webp'); } /* GRADIENTS — AU/NZ-SPECIFIC */ .card-25-1 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-25-2 { background: linear-gradient(135deg, #b6e3c6, #7ac29b); } .card-25-3 { background: linear-gradient(135deg, #ffe28f, #ffc857); } .card-25-4 { background: linear-gradient(135deg, #c9ddff, #8fb3ff); } .card-25-5 { background: linear-gradient(135deg, #f7c48b, #f29b4c); } .card-25-6 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } .card-25-7 { background: linear-gradient(135deg, #d6c9ff, #b29bff); } .card-25-8 { background: linear-gradient(135deg, #b8f2e6, #7fd3c5); } .card-25-9 { background: linear-gradient(135deg, #cfe6b8, #9fc47f); } .card-25-10 { background: linear-gradient(135deg, #f7b3a8, #f28c7b); } .card-25-11 { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); } .card-25-12 { background: linear-gradient(135deg, #f5c6ff, #e29bff); } /* HOVER */ .hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* RESPONSIVE */ @media (max-width: 1200px) { .excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Australia–New Zealand Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .anz-transfers-section { padding: 80px 0; background: #eef4f9; /* AU/NZ-specific neutral */ } .anz-transfers-inner { max-width: 1300px; margin: 0 auto; } .anz-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .anz-transfers-intro { font-size: 1.15rem; text-align: center; color: #4f5b6a; margin-bottom: 20px; } /* GRID */ .anz-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .anz-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #102030; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #2f3b4a; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #2f3b4a; opacity: 0.9; } /* GRADIENTS — AU/NZ-SPECIFIC */ .transfer-card-city-anz { background: linear-gradient(135deg, #9fd3ff, #5fa8e8); color: #fff; } .transfer-card-airport-anz { background: linear-gradient(135deg, #b6e3c6, #7ac29b); color: #fff; } .transfer-card-cruiseline-anz { background: linear-gradient(135deg, #f7c48b, #f29b4c); color: #fff; } .transfer-card-local-anz { background: linear-gradient(135deg, #c9ddff, #8fb3ff); color: #fff; } .transfer-card-access-anz { background: linear-gradient(135deg, #f5c6ff, #e29bff); color: #fff; } .transfer-card-planning-anz { background: linear-gradient(135deg, #d6c9ff, #b29bff); color: #fff; } /* HOVER */ .anz-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .anz-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .anz-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Australia–New Zealand Cruise FAQ (CSS) */ /* ========================================================= */ .anz-faq-section { padding: 80px 0; background: #f2f6fb; /* AU/NZ-specific, not copied from Asia */ } .anz-faq-inner { max-width: 1100px; margin: 0 auto; } .anz-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102030; } .anz-faq-intro { font-size: 1.15rem; text-align: center; color: #4f5b6a; margin-bottom: 40px; } /* Accordion Container */ .anz-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .anz-faq-item { background: #e8f0fb; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .anz-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #102030; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .anz-faq-question:hover { background: #dbe6f7; } /* Arrow Icon */ .anz-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .anz-faq-item.active .anz-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .anz-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .anz-faq-answer p { font-size: 1rem; color: #2f3b4a; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .anz-faq-item.active .anz-faq-answer { max-height: 300px; } /* Responsive */ @media (max-width: 800px) { .anz-faq-title { font-size: 2rem; } .anz-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- SECTION 3 CARIBBEAN HERO BACKGROUND (Caribbean hero image) --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/caribbean-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .hero-region { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /* --------------------------------------------- SECTION 4 — Overview (Caribbean) ---------------------------------------------*/ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-overview { text-align: center; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-overview .section-title { font-size: 2rem; font-weight: 700; color: #0A2A43; /* Caribbean Deep Navy */ margin-bottom: 20px; text-align: center; width: 100%; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #0A2A43; /* Caribbean Deep Navy */ max-width: 820px; margin: 0 auto 32px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .overview-highlights .highlight-item { background: #F7F3EC; /* Caribbean Soft Sand */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #007A8A; /* Caribbean Deep Aqua */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .highlight-icon { color: #FF7F6E; /* Caribbean Sunset Coral */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Caribbean) --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #F7F3EC; /* Caribbean Soft Sand */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #0A2A43; /* Caribbean Deep Navy */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #333843; /* Caribbean Charcoal */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #E0FAFF 0%, #FFFFFF 100%); /* Caribbean Aqua Mist → White */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #0A2A43; /* Caribbean Deep Navy */ text-align: center; } /* TAGS */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .tag { background: #FF7F6E; /* Caribbean Sunset Coral */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #007A8A; /* Caribbean Deep Aqua */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .highlight-icon { color: #00C6D4; /* Caribbean Turquoise */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-link { background: #007A8A; /* Caribbean Deep Aqua */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .secondary-btn { background: #0A2A43; /* Caribbean Deep Navy */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #006473; transform: translateY(-2px); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .secondary-btn:hover { background: #062033; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #00C6D4; /* Caribbean Turquoise */ border-radius: 2px; } /* --------------------------------------------- SECTION 6 — Eastern Caribbean Cruise Experience Overview --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* List layout */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Caribbean Deep Navy */ } /* Emoji icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-text { display: inline-block; } /* Country name styling */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-east-text strong { font-weight: 700; margin-right: 4px; color: #007A8A; /* Caribbean Deep Aqua */ } /* --------------------------------------------- SECTION 7 — Western Caribbean Cruise Experience Overview --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* List layout */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Caribbean Deep Navy */ } /* Emoji icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-text { display: inline-block; } /* Country name styling */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-west-text strong { font-weight: 700; margin-right: 4px; color: #007A8A; /* Caribbean Deep Aqua */ } /* --------------------------------------------- SECTION 8 — Southern Caribbean Cruise Experience Overview --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* List layout */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Caribbean Deep Navy */ } /* Emoji icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-text { display: inline-block; } /* Country name styling */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-south-text strong { font-weight: 700; margin-right: 4px; color: #007A8A; /* Caribbean Deep Aqua */ } /* --------------------------------------------- SECTION 9 — Caribbean Seasonal Cruise Guide --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* List layout */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Caribbean Deep Navy */ } /* Emoji icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-season-text { display: inline-block; } /* Season name styling */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-season-text strong { font-weight: 700; margin-right: 4px; color: #007A8A; /* Caribbean Deep Aqua */ } /* --------------------------------------------- SECTION 10 — Caribbean Best Cruise Months Chart --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* Chart container */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 12px; text-align: center; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-header span { font-size: 0.85rem; } /* Chart label */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #0A2A43; /* Caribbean Deep Navy */ } /* Chart rows */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .best { background: linear-gradient(135deg, #007A8A, #00C6D4); /* Aqua → Turquoise */ border-radius: 4px; height: 18px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .good { background: linear-gradient(135deg, #F9A825, #FFEB3B); /* Warm Yellow */ border-radius: 4px; height: 18px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .avoid { background: linear-gradient(135deg, #C62828, #EF5350); /* Tropical Storm Red */ border-radius: 4px; height: 18px; } /* Legend */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A2A43; /* Caribbean Deep Navy */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-text { display: inline-block; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-best-text strong { font-weight: 700; margin-right: 4px; color: #007A8A; /* Caribbean Deep Aqua */ } /* --------------------------------------------- SECTION 11 — Caribbean Cruise Tips & Planning Guide --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* Icons Row */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #0A2A43; /* Caribbean Deep Navy */ } /* Gradient Divider */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #007A8A, #00C6D4, #007A8A); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-planning { color: #0A2A43; } /* Deep Navy */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-packing { color: #FF7F6E; } /* Sunset Coral */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-docs { color: #007A8A; } /* Deep Aqua */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-weather { color: #00C6D4; } /* Turquoise */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tip-port { color: #333843; } /* Charcoal */ /* Do's & Don'ts */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-dos, .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-dos h3, .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #0A2A43; /* Deep Navy */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-dos ul, .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-insider-tips { margin-top: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #0A2A43; /* Deep Navy */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* --------------------------------------------- SECTION 12 — Small‑Ship & Boutique Cruising in Caribbean --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Caribbean Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Caribbean Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Caribbean Charcoal */ margin-bottom: 14px; } /* Colourful icon row */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A2A43; /* Deep Navy */ } /* Cards container */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-teal { background: linear-gradient(135deg, #007A8A, #00C6D4); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-coral { background: linear-gradient(135deg, #FF7F6E, #FFB199); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-gold { background: linear-gradient(135deg, #F9A825, #FFB300); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-blue { background: linear-gradient(135deg, #0277BD, #29B6F6); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Colourful divider */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #007A8A, #00C6D4, #FF7F6E, #F9A825); border-radius: 3px; margin: 40px 0; } /* List section */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-list-wrapper { margin-top: 10px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A2A43; /* Deep Navy */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #0A2A43; /* Deep Navy */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-list-text { display: inline-block; } /* Colour labels */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-label-teal { color: #007A8A; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-label-coral { color: #FF7F6E; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-label-blue { color: #0277BD; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-label-gold { color: #F9A825; } /* Responsive */ @media (max-width: 900px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-boutique-cards { grid-template-columns: 1fr; } } /* --------------------------------------------- SECTION 13 — Caribbean Port Profiles --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; /* Charcoal */ margin-bottom: 14px; } /* Icon Row */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A2A43; } /* Cards */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card.visible { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colours */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-teal { background: linear-gradient(135deg, #007A8A, #00C6D4); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-coral { background: linear-gradient(135deg, #FF7F6E, #FFB199); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-blue { background: linear-gradient(135deg, #0277BD, #29B6F6); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-gold { background: linear-gradient(135deg, #F9A825, #FFB300); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-indigo { background: linear-gradient(135deg, #283593, #5C6BC0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-cyan { background: linear-gradient(135deg, #0097A7, #4DD0E1); } /* Card text */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #007A8A, #FF7F6E, #0277BD, #F9A825); border-radius: 3px; margin: 40px 0; } /* List */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A2A43; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #0A2A43; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-label-teal { color: #007A8A; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-label-coral { color: #FF7F6E; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-label-blue { color: #0277BD; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-label-gold { color: #F9A825; } /* Responsive */ @media (max-width: 900px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-cards { grid-template-columns: 1fr; } } /* --------------------------------------------- SECTION 14 — Caribbean Cruise Port Comparison Grid --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-section { width: 100%; padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-header { text-align: center; margin-bottom: 50px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #007A8A; /* Deep Aqua */ margin-bottom: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #333843; max-width: 800px; margin: 0 auto; } /* Grid container */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-header { background: #E0FAFF; /* Aqua Mist */ font-weight: 700; color: #007A8A; } /* Left colour accent */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-teal::before { background: #007A8A; } .compare-row-coral::before { background: #FF7F6E; } .compare-row-blue::before { background: #0277BD; } .compare-row-gold::before { background: #F9A825; } .compare-row-cyan::before { background: #00C6D4; } .compare-row-indigo::before { background: #283593; } .compare-row-sunset::before { background: #FFB300; } /* Alternating row backgrounds */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row:nth-child(even) { background: #F7F3EC; } /* Hover glow */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-compare-insights { margin-top: 40px; padding: 30px; background: #E0FAFF; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #007A8A; margin-bottom: 14px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #333843; } /* Responsive */ @media (max-width: 1100px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-grid-header { display: none; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* --------------------------------------------- SECTION 14.5 — Caribbean Embarkation vs Destination Ports --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-section { padding: 80px 0; background: #F7F3EC; /* Caribbean Soft Sand */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-inner { max-width: 1300px; margin: 0 auto; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #007A8A; /* Caribbean Deep Aqua */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-intro { font-size: 1.15rem; text-align: center; color: #333843; /* Caribbean Charcoal */ margin-bottom: 20px; } /* GRID */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; opacity: 0; transform: translateY(30px); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-card.usage-card-revealed { opacity: 1; transform: translateY(0); } /* IMAGE BLOCK */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-image-embarkation { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-embarkation-ports.webp'); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-image-destination { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-destination-ports.webp'); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-image-debarkation { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-debarkation-ports.webp'); } /* TEXT */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #FFFFFF; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-card-text { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-card-note { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #FFFFFF; opacity: 0.95; } /* GRADIENTS */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-card-embarkation { background: linear-gradient(135deg, #007A8A, #00C6D4); /* Aqua → Turquoise */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-card-destination { background: linear-gradient(135deg, #FF7F6E, #FFB199); /* Sunset Coral */ } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .usage-card-debarkation { background: linear-gradient(135deg, #F9A825, #FFB300); /* Caribbean Gold */ } /* HOVER */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-port-usage-grid { grid-template-columns: 1fr; } } /* --------------------------------------------- SECTION 15 — Caribbean Cruise Lines Overview Grid --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-overview { width: 100%; padding: 90px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-header { text-align: center; margin-bottom: 60px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #007A8A; /* Deep Aqua */ margin-bottom: 16px; } /* Cinematic gradient underline */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00C6D4, #007A8A, #FF7F6E); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #333843; max-width: 850px; margin: 0 auto; } /* Grid */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-teal::before { background: #007A8A; } .card-coral::before { background: #FF7F6E; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #00C6D4; } .card-amber::before { background: #F9A825; } .card-purple::before { background: #8E24AA; } .card-blue::before { background: #0277BD; } .card-red::before { background: #C62828; } /* Icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #0A2A43; margin-bottom: 12px; } /* Summary */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #333843; margin-bottom: 18px; } /* Points */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-points { list-style: none; padding: 0; margin: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #0A2A43; padding-left: 14px; position: relative; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #007A8A; font-size: 0.9rem; } /* Hover Glow */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-card:hover { background: rgba(0, 137, 138, 0.08); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-title { font-size: 2.2rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-lines-intro { font-size: 1.1rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-line-card { padding: 24px; } } /* --------------------------------------------- SECTION 16 — Caribbean Cruise Ship Types Overview --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-overview { width: 100%; padding: 90px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-header { text-align: center; margin-bottom: 60px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #007A8A; /* Deep Aqua */ margin-bottom: 16px; } /* Cinematic gradient underline */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00C6D4, #007A8A, #FF7F6E); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #333843; max-width: 850px; margin: 0 auto; } /* Grid */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Ship Type Cards */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .card-teal::before { background: #007A8A; } .card-coral::before { background: #FF7F6E; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #00C6D4; } .card-amber::before { background: #F9A825; } .card-purple::before { background: #8E24AA; } .card-blue::before { background: #0277BD; } .card-red::before { background: #C62828; } /* Icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #0A2A43; margin-bottom: 12px; } /* Summary */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #333843; margin-bottom: 18px; } /* Points */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-points { list-style: none; padding: 0; margin: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #0A2A43; padding-left: 14px; position: relative; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #007A8A; font-size: 0.9rem; } /* Hover Glow */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-card:hover { background: rgba(0, 137, 138, 0.08); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-title { font-size: 2.2rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-types-intro { font-size: 1.1rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-ship-type-card { padding: 24px; } } /* --------------------------------------------- SECTION 17 — Caribbean Cruise Duration Overview --------------------------------------------- */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-overview { width: 100%; padding: 90px 0; background: #F7F3EC; /* Caribbean Soft Sand */ color: #0A2A43; /* Deep Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-header { text-align: center; margin-bottom: 60px; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #007A8A; /* Deep Aqua */ margin-bottom: 16px; } /* Underline */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00C6D4, #007A8A, #FF7F6E); } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #333843; max-width: 850px; margin: 0 auto; } /* Grid */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-teal::before { background: #007A8A; } .card-coral::before { background: #FF7F6E; } .card-indigo::before { background: #283593; } .card-cyan::before { background: #00C6D4; } .card-amber::before { background: #F9A825; } .card-purple::before { background: #8E24AA; } .card-blue::before { background: #0277BD; } .card-red::before { background: #C62828; } /* Icon */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #0A2A43; margin-bottom: 12px; } /* Summary */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #333843; margin-bottom: 18px; } /* Points */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #0A2A43; padding-left: 14px; position: relative; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #007A8A; font-size: 0.9rem; } /* Hover Glow */ .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-card:hover { background: rgba(0, 137, 138, 0.08); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-title { font-size: 2.2rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-intro { font-size: 1.1rem; } .page-cruise-subpage.caribbean-subpage.cruise-lines-subpage .caribbean-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — Caribbean Cruise Price Range Overview (12 cards) */ /* ========================================================= */ .caribbean-cruise-price-overview { width: 100%; padding: 90px 0; background: #F3FBFF; /* Soft Caribbean Aqua */ color: #123047; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .caribbean-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .caribbean-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .caribbean-cruise-price-header { text-align: center; margin-bottom: 60px; } .caribbean-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #0B2740; margin-bottom: 16px; } .caribbean-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00B8D4, #FF8A65, #FFD54F, #4DB6AC); /* Caribbean teal, coral, sun, sea */ } .caribbean-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #2E3F5A; max-width: 850px; margin: 0 auto; } /* Grid */ .caribbean-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .caribbean-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .caribbean-cruise-price-card.visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .caribbean-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* ========================================================= */ /* 12‑COLOUR CARIBBEAN PALETTE */ /* ========================================================= */ .caribbean-card-lagoon::before { background: #00ACC1; } /* Lagoon teal */ .caribbean-card-coral::before { background: #FF7043; } /* Coral orange */ .caribbean-card-sunset::before { background: #FFB74D; } /* Sunset gold */ .caribbean-card-gold::before { background: #FBC02D; } /* Tropical sun */ .caribbean-card-deepsea::before { background: #1E88E5; } /* Deep sea blue */ .caribbean-card-reef::before { background: #26A69A; } /* Reef green */ .caribbean-card-midnight::before { background: #283593; } /* Midnight indigo */ .caribbean-card-sunrise::before { background: #FF8A65; } /* Sunrise coral */ .caribbean-card-amber::before { background: #FFA000; } /* Amber glow */ .caribbean-card-aqua::before { background: #4FC3F7; } /* Bright aqua */ .caribbean-card-sand::before { background: #D7CCC8; } /* Sand beige */ .caribbean-card-violet::before { background: #8E24AA; } /* Tropical violet */ /* Icon + Titles */ .caribbean-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .caribbean-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #0B2740; margin-bottom: 18px; } /* Layer Titles */ .caribbean-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .caribbean-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #2E3F5A; margin-bottom: 10px; } .caribbean-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .caribbean-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .caribbean-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #123047; padding-left: 14px; position: relative; } .caribbean-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0B2740; font-size: 0.9rem; } /* ========================================================= */ /* PREMIUM HOVER EFFECTS (Caribbean glow) */ /* ========================================================= */ .caribbean-card-lagoon:hover { background: rgba(0, 172, 193, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-coral:hover { background: rgba(255, 112, 67, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-sunset:hover { background: rgba(255, 183, 77, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-gold:hover { background: rgba(251, 192, 45, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-deepsea:hover { background: rgba(30, 136, 229, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-reef:hover { background: rgba(38, 166, 154, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-midnight:hover { background: rgba(40, 53, 147, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-sunrise:hover { background: rgba(255, 138, 101, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-amber:hover { background: rgba(255, 160, 0, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-aqua:hover { background: rgba(79, 195, 247, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-sand:hover { background: rgba(215, 204, 200, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .caribbean-card-violet:hover { background: rgba(142, 36, 170, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } /* Responsive */ @media (max-width: 700px) { .caribbean-cruise-price-title { font-size: 2.2rem; } .caribbean-cruise-price-intro { font-size: 1.1rem; } .caribbean-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — Caribbean Cruise Best Value Tips (CSS) */ /* ========================================================= */ .caribbean-section-19 { padding: 80px 0; background: #f5fbff; /* NEW Caribbean‑style soft blue background */ } .caribbean-section-19-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102a43; } .caribbean-section-subtitle { font-size: 1.2rem; text-align: center; color: #4b6478; margin-bottom: 50px; } /* GRID */ .caribbean-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .caribbean-value-tip-card { padding: 28px; border-radius: 14px; color: #ffffff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .caribbean-value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .caribbean-value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — UNIQUE TO CARIBBEAN SECTION 19 */ /* (Beach, sea, sunset, tropical tones) */ /* ========================================================= */ .caribbean-card-19-1 { background: linear-gradient(135deg, #ff9e80, #ff6e40); } /* sunset orange */ .caribbean-card-19-2 { background: linear-gradient(135deg, #ffd180, #ffb74d); } /* warm gold */ .caribbean-card-19-3 { background: linear-gradient(135deg, #ffe082, #ffca28); } /* sunny yellow */ .caribbean-card-19-4 { background: linear-gradient(135deg, #81c784, #43a047); } /* palm green */ .caribbean-card-19-5 { background: linear-gradient(135deg, #4db6ac, #00897b); } /* turquoise sea */ .caribbean-card-19-6 { background: linear-gradient(135deg, #4fc3f7, #0288d1); } /* clear blue water */ .caribbean-card-19-7 { background: linear-gradient(135deg, #ba68c8, #8e24aa); } /* tropical purple */ .caribbean-card-19-8 { background: linear-gradient(135deg, #f06292, #d81b60); } /* coral pink */ .caribbean-card-19-9 { background: linear-gradient(135deg, #ffcc80, #fb8c00); } /* beach sand + sun */ .caribbean-card-19-10 { background: linear-gradient(135deg, #80deea, #00acc1); } /* lagoon blue */ .caribbean-card-19-11 { background: linear-gradient(135deg, #7986cb, #3949ab); } /* twilight sky */ .caribbean-card-19-12 { background: linear-gradient(135deg, #ffab91, #ff7043); } /* family‑friendly warm */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .caribbean-hover-19:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .caribbean-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 20 — Caribbean Cultural Immersion Experiences */ /* ========================================================= */ .caribbean-section-20 { padding: 80px 0; background: #f4fbff; /* NEW Caribbean‑style soft aqua background */ } .caribbean-section-20-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-20 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102a43; } .caribbean-section-20 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4b5b70; margin-bottom: 50px; } /* GRID */ .caribbean-immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .caribbean-immersion-card { padding: 28px; border-radius: 14px; color: #ffffff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .caribbean-immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .caribbean-immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — UNIQUE TO CARIBBEAN SECTION 20 */ /* ========================================================= */ .caribbean-card-20-1 { background: linear-gradient(135deg, #00bcd4, #008c9e); } /* turquoise sea */ .caribbean-card-20-2 { background: linear-gradient(135deg, #ffb74d, #ff9800); } /* sunset gold */ .caribbean-card-20-3 { background: linear-gradient(135deg, #ff6f61, #e53935); } /* coral dusk */ .caribbean-card-20-4 { background: linear-gradient(135deg, #66bb6a, #2e7d32); } /* palm green */ .caribbean-card-20-5 { background: linear-gradient(135deg, #7e57c2, #5e35b1); } /* festival violet */ .caribbean-card-20-6 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } /* deep blue bay */ .caribbean-card-20-7 { background: linear-gradient(135deg, #ff8a80, #ff5252); } /* beach sunset */ .caribbean-card-20-8 { background: linear-gradient(135deg, #f06292, #d81b60); } /* carnival pink */ .caribbean-card-20-9 { background: linear-gradient(135deg, #a5d6a7, #43a047); } /* island hills */ .caribbean-card-20-10 { background: linear-gradient(135deg, #4dd0e1, #00acc1); } /* lagoon aqua */ .caribbean-card-20-11 { background: linear-gradient(135deg, #9575cd, #673ab7); } /* twilight purple */ .caribbean-card-20-12 { background: linear-gradient(135deg, #ffcc80, #fb8c00); } /* market glow */ /* ========================================================= */ /* HOVER EFFECTS — LIFT + SOFT GLOW */ /* ========================================================= */ .caribbean-hover-20:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.20); opacity: 1; } /* subtle brightness shift on hover */ .caribbean-card-20-1:hover { filter: brightness(1.08); } .caribbean-card-20-2:hover { filter: brightness(1.08); } .caribbean-card-20-3:hover { filter: brightness(1.08); } .caribbean-card-20-4:hover { filter: brightness(1.08); } .caribbean-card-20-5:hover { filter: brightness(1.08); } .caribbean-card-20-6:hover { filter: brightness(1.08); } .caribbean-card-20-7:hover { filter: brightness(1.08); } .caribbean-card-20-8:hover { filter: brightness(1.08); } .caribbean-card-20-9:hover { filter: brightness(1.08); } .caribbean-card-20-10:hover { filter: brightness(1.08); } .caribbean-card-20-11:hover { filter: brightness(1.08); } .caribbean-card-20-12:hover { filter: brightness(1.08); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .caribbean-immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 21 — Caribbean Wildlife & Nature Encounters */ /* ========================================================= */ .caribbean-section-21 { padding: 80px 0; background: #f4fcff; /* Bright Caribbean aqua */ } .caribbean-section-21-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; } .caribbean-section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; margin-bottom: 50px; } /* GRID */ .caribbean-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .caribbean-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .caribbean-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0f2e45; } .caribbean-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2e3f50; opacity: 0.95; } /* IMAGE BLOCK */ .caribbean-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — CARIBBEAN SECTION 21 */ .caribbean-wildlife-image { transition: transform 0.35s ease; } .caribbean-wildlife-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — CARIBBEAN */ .caribbean-image-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-dolphins.webp'); } .caribbean-image-sea-turtle { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-sea-turtle.webp'); } .caribbean-image-coral-reef { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-coral-reef.webp'); } .caribbean-image-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-rainforest.webp'); } .caribbean-image-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-national-park.webp'); } .caribbean-image-birdwatching { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-birdwatching.webp'); } .caribbean-image-island-ecosystem { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-island-ecosystem.webp'); } .caribbean-image-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-mangrove.webp'); } .caribbean-image-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-mountains.webp'); } .caribbean-image-wildlife { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-wildlife.webp'); } .caribbean-image-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-eco-tour.webp'); } .caribbean-image-photography { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-photography.webp'); } /* GRADIENTS — PURPLE REMOVED, ALL REPLACED */ .caribbean-card-21-1 { background: linear-gradient(135deg, #00d2e8, #00a4b5); } .caribbean-card-21-2 { background: linear-gradient(135deg, #4cd964, #2e8b42); } .caribbean-card-21-3 { background: linear-gradient(135deg, #ff8a65, #ff7043); } .caribbean-card-21-4 { background: linear-gradient(135deg, #9ccc65, #7cb342); } .caribbean-card-21-5 { background: linear-gradient(135deg, #42a5f5, #2196f3); } /* PURPLE REMOVED — REPLACED WITH AQUA + TEAL */ .caribbean-card-21-6 { background: linear-gradient(135deg, #00c8d2, #0097a7); } .caribbean-card-21-7 { background: linear-gradient(135deg, #26c6da, #00acc1); } .caribbean-card-21-8 { background: linear-gradient(135deg, #5ed1c8, #2bb8a6); } .caribbean-card-21-9 { background: linear-gradient(135deg, #ffd27f, #ffb74d); } .caribbean-card-21-10 { background: linear-gradient(135deg, #ffab91, #ff8a65); } .caribbean-card-21-11 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } /* PURPLE REMOVED — REPLACED WITH BRIGHT BLUE */ .caribbean-card-21-12 { background: linear-gradient(135deg, #4bb8ff, #2196f3); } /* HOVER */ .caribbean-hover-21:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.18); } /* RESPONSIVE */ @media (max-width: 1200px) { .caribbean-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Caribbean Cultural Experiences & Traditions */ /* ========================================================= */ .caribbean-section-22 { padding: 80px 0; background: #f3fbff; /* Bright Caribbean backdrop */ } .caribbean-section-22-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; /* Deep Caribbean navy */ } .caribbean-section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; margin-bottom: 50px; } /* GRID */ .caribbean-culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .caribbean-culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT */ .caribbean-cultural-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0f2e45; } .caribbean-cultural-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2e3f50; opacity: 0.95; } /* IMAGE BLOCK */ .caribbean-culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — CARIBBEAN SECTION 22 */ .caribbean-culture-image { transition: transform 0.35s ease; } .caribbean-culture-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — CARIBBEAN CULTURE (ALL NEW, NO DUPLICATES) */ .caribbean-image-music-dance { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-music-dance.webp'); } .caribbean-image-carnival { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-carnival.webp'); } .caribbean-image-folklore { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-folklore.webp'); } .caribbean-image-cuisine { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-cuisine.webp'); } .caribbean-image-crafts { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-crafts.webp'); } .caribbean-image-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-architecture.webp'); } .caribbean-image-rum-heritage { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-rum-heritage.webp'); } .caribbean-image-maritime { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-maritime.webp'); } .caribbean-image-indigenous { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-indigenous-heritage.webp'); } .caribbean-image-markets { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-markets.webp'); } .caribbean-image-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-cultural-workshops.webp'); } .caribbean-image-spiritual { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-spiritual-traditions.webp'); } /* GRADIENTS — CARIBBEAN COLOUR SCHEME (NO ASIA COPY) */ .caribbean-card-22-1 { background: linear-gradient(135deg, #00c6e8, #0097b3); } .caribbean-card-22-2 { background: linear-gradient(135deg, #ffb74d, #fb8c00); } .caribbean-card-22-3 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-22-4 { background: linear-gradient(135deg, #ff8a65, #ff7043); } .caribbean-card-22-5 { background: linear-gradient(135deg, #81c784, #4caf50); } .caribbean-card-22-6 { background: linear-gradient(135deg, #4db6ac, #26a69a); } .caribbean-card-22-7 { background: linear-gradient(135deg, #ffd180, #ffb74d); } .caribbean-card-22-8 { background: linear-gradient(135deg, #26c6da, #00acc1); } .caribbean-card-22-9 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-22-10 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .caribbean-card-22-11 { background: linear-gradient(135deg, #66bb6a, #43a047); } .caribbean-card-22-12 { background: linear-gradient(135deg, #ef5350, #e53935); } /* HOVER */ .caribbean-hover-22:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .caribbean-culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Caribbean Festivals & Seasonal Events (CSS) */ /* ========================================================= */ .caribbean-section-23 { padding: 80px 0; background: #f2fbff; /* Bright Caribbean aqua */ } .caribbean-section-23-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; } .caribbean-section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; margin-bottom: 50px; } /* GRID */ .caribbean-festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .caribbean-festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT */ .caribbean-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0f2e45; } .caribbean-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2e3f50; opacity: 0.95; } /* IMAGE BLOCK */ .caribbean-festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — CARIBBEAN SECTION 23 */ .caribbean-festival-image { transition: transform 0.35s ease; } .caribbean-festival-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — ALL BRAND NEW (NO DUPLICATES) */ .caribbean-image-trinidad-carnival { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-trinidad-carnival.webp'); } .caribbean-image-crop-over { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-crop-over.webp'); } .caribbean-image-junkanoo { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-junkanoo.webp'); } .caribbean-image-st-lucia-carnival { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-st-lucia-carnival.webp'); } .caribbean-image-maroon-stringband { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-maroon-stringband.webp'); } .caribbean-image-seafood-festival { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-seafood-festival.webp'); } .caribbean-image-spicemas { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-spicemas.webp'); } .caribbean-image-creole-music { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-creole-music.webp'); } .caribbean-image-san-sebastian { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-san-sebastian.webp'); } .caribbean-image-st-kitts-music { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-st-kitts-music.webp'); } .caribbean-image-caribbean-christmas { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-christmas.webp'); } .caribbean-image-regattas { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-regattas.webp'); } /* GRADIENTS — BRIGHT CARIBBEAN COLOURS ONLY */ .caribbean-card-23-1 { background: linear-gradient(135deg, #ffb74d, #ffa726); } .caribbean-card-23-2 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-23-3 { background: linear-gradient(135deg, #26c6da, #00acc1); } .caribbean-card-23-4 { background: linear-gradient(135deg, #ff8a65, #ff7043); } .caribbean-card-23-5 { background: linear-gradient(135deg, #81c784, #4caf50); } .caribbean-card-23-6 { background: linear-gradient(135deg, #ffd180, #ffb74d); } .caribbean-card-23-7 { background: linear-gradient(135deg, #ffcc80, #ffb74d); } .caribbean-card-23-8 { background: linear-gradient(135deg, #4db6ac, #26a69a); } .caribbean-card-23-9 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .caribbean-card-23-10 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-23-11 { background: linear-gradient(135deg, #ffab91, #ff8a65); } .caribbean-card-23-12 { background: linear-gradient(135deg, #26c6da, #00acc1); } /* HOVER */ .caribbean-hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .caribbean-festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Caribbean Cruise Cuisine & Dining Highlights */ /* ========================================================= */ .caribbean-section-24 { padding: 80px 0; background: #f2fbff; /* Bright Caribbean aqua */ } .caribbean-section-24-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; } .caribbean-section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; margin-bottom: 50px; } /* GRID */ .caribbean-cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .caribbean-cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT */ .caribbean-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #0f2e45; } .caribbean-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #2e3f50; opacity: 0.95; } /* IMAGE BLOCK */ .caribbean-cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — CARIBBEAN SECTION 24 */ .caribbean-cuisine-image { transition: transform 0.35s ease; } .caribbean-cuisine-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — ALL BRAND NEW (NO DUPLICATES) */ .caribbean-image-jamaican { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-jamaican.webp'); } .caribbean-image-bajan { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-bajan.webp'); } .caribbean-image-trinidad { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-trinidad.webp'); } .caribbean-image-bahamas { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-bahamas.webp'); } .caribbean-image-cuban { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-cuban.webp'); } .caribbean-image-puerto-rico { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-puerto-rico.webp'); } .caribbean-image-dominican { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-dominican.webp'); } .caribbean-image-haitian { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-haitian.webp'); } .caribbean-image-eastern-caribbean { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-eastern-caribbean.webp'); } .caribbean-image-grenadian { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-grenadian.webp'); } .caribbean-image-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-seafood.webp'); } .caribbean-image-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-desserts.webp'); } /* GRADIENTS — BRIGHT CARIBBEAN COLOURS ONLY */ .caribbean-card-24-1 { background: linear-gradient(135deg, #ffb74d, #ffa726); } .caribbean-card-24-2 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-24-3 { background: linear-gradient(135deg, #26c6da, #00acc1); } .caribbean-card-24-4 { background: linear-gradient(135deg, #ff8a65, #ff7043); } .caribbean-card-24-5 { background: linear-gradient(135deg, #81c784, #4caf50); } .caribbean-card-24-6 { background: linear-gradient(135deg, #ffd180, #ffb74d); } .caribbean-card-24-7 { background: linear-gradient(135deg, #4db6ac, #26a69a); } .caribbean-card-24-8 { background: linear-gradient(135deg, #ffcc80, #ffb74d); } .caribbean-card-24-9 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .caribbean-card-24-10 { background: linear-gradient(135deg, #66bb6a, #43a047); } .caribbean-card-24-11 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-24-12 { background: linear-gradient(135deg, #ffab91, #ff8a65); } /* HOVER */ .caribbean-hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .caribbean-cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Caribbean Shore Excursions (CSS) */ /* ========================================================= */ .caribbean-section-25 { padding: 80px 0; background: #f2fbff; /* Bright Caribbean aqua */ } .caribbean-section-25-wrapper { max-width: 1300px; margin: 0 auto; } .caribbean-section-25 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; } .caribbean-section-25 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; margin-bottom: 50px; } /* GRID */ .caribbean-excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .caribbean-excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); padding: 0; border: none; } /* IMAGE BLOCK */ .caribbean-excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; position: relative; z-index: 10; } /* IMAGE ZOOM — CARIBBEAN SECTION 25 */ .caribbean-excursion-image { transition: transform 0.35s ease; } .caribbean-excursion-image:hover { transform: scale(1.15); } /* TEXT */ .caribbean-excursion-card h3, .caribbean-excursion-card p { position: relative; z-index: 20; text-align: center; margin-left: 0; margin-right: 0; width: 100%; color: #0f2e45; } .caribbean-excursion-card p { color: #2e3f50; } /* REVEAL */ .caribbean-region-reveal-active .caribbean-excursion-card.caribbean-card-25-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — ALL BRAND NEW (NO DUPLICATES) */ .caribbean-image-beach-island { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-beach-island.webp'); } .caribbean-image-historic-town { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-historic-town.webp'); } .caribbean-image-waterfalls-nature { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-waterfalls-nature.webp'); } .caribbean-image-snorkel-reef { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-snorkel-reef.webp'); } .caribbean-image-catamaran-sailing { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-catamaran-sailing.webp'); } .caribbean-image-food-market { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-food-market.webp'); } .caribbean-image-cultural-workshop { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-cultural-workshop.webp'); } .caribbean-image-wildlife-encounter { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-wildlife-encounter.webp'); } .caribbean-image-rum-distillery { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-rum-distillery.webp'); } .caribbean-image-adventure-activities{ background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-adventure-activities.webp'); } .caribbean-image-village-visit { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-village-visit.webp'); } .caribbean-image-private-tour { background-image: url('../cruise-images/cruise-region-subpages-images/caribbean-private-tour.webp'); } /* GRADIENTS — BRIGHT CARIBBEAN COLOURS ONLY */ .caribbean-card-25-1 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-25-2 { background: linear-gradient(135deg, #ffb74d, #ffa726); } .caribbean-card-25-3 { background: linear-gradient(135deg, #81c784, #4caf50); } .caribbean-card-25-4 { background: linear-gradient(135deg, #26c6da, #00acc1); } .caribbean-card-25-5 { background: linear-gradient(135deg, #ffd180, #ffb74d); } .caribbean-card-25-6 { background: linear-gradient(135deg, #ffcc80, #ffb74d); } .caribbean-card-25-7 { background: linear-gradient(135deg, #4db6ac, #26a69a); } .caribbean-card-25-8 { background: linear-gradient(135deg, #66bb6a, #43a047); } .caribbean-card-25-9 { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .caribbean-card-25-10 { background: linear-gradient(135deg, #ffab91, #ff8a65); } .caribbean-card-25-11 { background: linear-gradient(135deg, #4fc3f7, #29b6f6); } .caribbean-card-25-12 { background: linear-gradient(135deg, #ffd54f, #ffb300); } /* HOVER */ .caribbean-hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .caribbean-excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caribbean-excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .caribbean-excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Caribbean Cruise Transportation & Transfers */ /* ========================================================= */ .caribbean-transfers-section { padding: 80px 0; background: #e9f8ff; /* New bright Caribbean‑style aqua */ } .caribbean-transfers-inner { max-width: 1300px; margin: 0 auto; } .caribbean-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; } .caribbean-transfers-intro { font-size: 1.15rem; text-align: center; color: #456079; margin-bottom: 20px; } /* GRID */ .caribbean-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .caribbean-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .caribbean-transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #0f2e45; } .caribbean-transfer-card-text { font-size: 1rem; line-height: 1.55; color: #2e3f50; margin-bottom: 16px; } .caribbean-transfer-card-note { font-size: 0.95rem; color: #2e3f50; opacity: 0.9; } /* GRADIENTS — NEW CARIBBEAN COLOUR SCHEME */ .caribbean-transfer-card-city { background: linear-gradient(135deg, #4fc3f7, #29b6f6); color: #ffffff; } .caribbean-transfer-card-airport { background: linear-gradient(135deg, #81c784, #4caf50); color: #ffffff; } .caribbean-transfer-card-cruiseline { background: linear-gradient(135deg, #ffb74d, #ffa726); color: #ffffff; } .caribbean-transfer-card-local { background: linear-gradient(135deg, #26c6da, #00acc1); color: #ffffff; } .caribbean-transfer-card-access { background: linear-gradient(135deg, #4db6ac, #26a69a); color: #ffffff; } /* Card 6 — Planning Tips (lighter for readability) */ .caribbean-transfer-card-planning { background: linear-gradient(135deg, #ffe082, #ffca28); color: #ffffff; } /* HOVER */ .caribbean-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .caribbean-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .caribbean-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Caribbean Cruise FAQ (CSS) */ /* ========================================================= */ .caribbean-faq-section { padding: 80px 0; background: #f2fbff; /* Bright Caribbean aqua */ } .caribbean-faq-inner { max-width: 1100px; margin: 0 auto; } .caribbean-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0f2e45; } .caribbean-faq-intro { font-size: 1.15rem; text-align: center; color: #456079; margin-bottom: 40px; } /* Accordion Container */ .caribbean-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .caribbean-faq-item { background: #e9f8ff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .caribbean-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #0f2e45; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .caribbean-faq-question:hover { background: #dff3ff; } /* Arrow Icon */ .caribbean-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .caribbean-faq-item.active .caribbean-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .caribbean-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .caribbean-faq-answer p { font-size: 1rem; color: #2e3f50; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .caribbean-faq-item.active .caribbean-faq-answer { max-height: 300px; } /* Responsive */ @media (max-width: 800px) { .caribbean-faq-title { font-size: 2rem; } .caribbean-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- Section 3 HERO BACKGROUND (Mediterranean hero image) --------------------------------------------- */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/mediterranean-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .hero-region { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /*--------------------------------------------- SECTION 4 — Overview (Mediterranean) ---------------------------------------------*/ .section-overview { text-align: center; } .section-overview .section-title { font-size: 2rem; font-weight: 700; color: #2d6f8e; /* Mediterranean Coastal Blue */ margin-bottom: 20px; text-align: center; width: 100%; } .section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #2d6f8e; /* Mediterranean Coastal Blue */ max-width: 820px; margin: 0 auto 32px; } .overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .overview-highlights .highlight-item { background: #f3e2c5; /* Mediterranean Warm Coastal Sand */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #2d6f8e; /* Mediterranean Coastal Blue */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .highlight-icon { color: #f4c45a; /* Mediterranean Sunlit Gold */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Mediterranean) --------------------------------------------- */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #f7f5f0; /* Mediterranean soft stone */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #2d6f8e; /* Mediterranean Coastal Blue */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #456079; /* Mediterranean muted navy */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #eef3f7 0%, #ffffff 100%); /* Mediterranean mist to white */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #ffffff; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #2d6f8e; /* Mediterranean Coastal Blue */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #456079; /* Mediterranean muted navy */ text-align: center; } /* TAGS */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .tag { background: #2f8f9d; /* Mediterranean sea teal */ color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #2d6f8e; /* Mediterranean Coastal Blue */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .highlight-icon { color: #f4c45a; /* Mediterranean Sunlit Gold */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-link { background: #2d6f8e; /* Mediterranean Coastal Blue */ color: #ffffff; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .secondary-btn { background: #c76b4a; /* Mediterranean terracotta */ color: #ffffff; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #255a72; transform: translateY(-2px); } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .secondary-btn:hover { background: #a3563a; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.mediterranean-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #f4c45a; /* Mediterranean Sunlit Gold */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — Western Mediterranean */ /* ========================================================= */ .med-west-experience-section { width: 100%; padding: 80px 0; background: #f7f5f0; /* Mediterranean Soft Stone */ color: #2d6f8e; /* Mediterranean Coastal Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-west-experience-section.revealed { opacity: 1; transform: translateY(0); } .med-west-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-west-experience-header { text-align: center; margin-bottom: 40px; } .med-west-experience-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-west-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; /* Mediterranean Muted Navy */ margin-bottom: 14px; } .med-west-experience-list { list-style: none; margin: 0; padding: 0; } .med-west-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-west-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-west-text strong { font-weight: 700; margin-right: 4px; color: #c76b4a; /* Mediterranean Terracotta */ } /* ========================================================= */ /* SECTION 7 — Eastern Mediterranean */ /* ========================================================= */ .med-east-experience-section { width: 100%; padding: 80px 0; background: #eef3f7; /* Mediterranean Mist */ color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-east-experience-section.revealed { opacity: 1; transform: translateY(0); } .med-east-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-east-experience-header { text-align: center; margin-bottom: 40px; } .med-east-experience-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-east-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } .med-east-experience-list { list-style: none; margin: 0; padding: 0; } .med-east-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-east-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-east-text strong { font-weight: 700; margin-right: 4px; color: #2f8f9d; /* Mediterranean Sea Teal */ } /* ========================================================= */ /* SECTION 8 — Adriatic & Balkan */ /* ========================================================= */ .med-adriatic-experience-section { width: 100%; padding: 80px 0; background: #f7f5f0; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-adriatic-experience-section.revealed { opacity: 1; transform: translateY(0); } .med-adriatic-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-adriatic-experience-header { text-align: center; margin-bottom: 40px; } .med-adriatic-experience-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-adriatic-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } .med-adriatic-experience-list { list-style: none; margin: 0; padding: 0; } .med-adriatic-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-adriatic-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-adriatic-text strong { font-weight: 700; margin-right: 4px; color: #f4c45a; /* Mediterranean Sunlit Gold */ } /* ========================================================= */ /* SECTION 6 — Western Mediterranean */ /* ========================================================= */ .med-west-experience-section { width: 100%; padding: 80px 0; background: #f7f5f0; /* Mediterranean Soft Stone */ color: #2d6f8e; /* Mediterranean Coastal Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-west-experience-section.revealed { opacity: 1; transform: translateY(0); } .med-west-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-west-experience-header { text-align: center; margin-bottom: 40px; } .med-west-experience-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-west-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; /* Mediterranean Muted Navy */ margin-bottom: 14px; } .med-west-experience-list { list-style: none; margin: 0; padding: 0; } .med-west-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-west-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-west-text strong { font-weight: 700; margin-right: 4px; color: #c76b4a; /* Mediterranean Terracotta */ } /* ========================================================= */ /* SECTION 7 — Eastern Mediterranean */ /* ========================================================= */ .med-east-experience-section { width: 100%; padding: 80px 0; background: #eef3f7; /* Mediterranean Mist */ color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-east-experience-section.revealed { opacity: 1; transform: translateY(0); } .med-east-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-east-experience-header { text-align: center; margin-bottom: 40px; } .med-east-experience-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-east-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } .med-east-experience-list { list-style: none; margin: 0; padding: 0; } .med-east-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-east-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-east-text strong { font-weight: 700; margin-right: 4px; color: #2f8f9d; /* Mediterranean Sea Teal */ } /* ========================================================= */ /* SECTION 8 — Adriatic & Balkan */ /* ========================================================= */ .med-adriatic-experience-section { width: 100%; padding: 80px 0; background: #f7f5f0; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-adriatic-experience-section.revealed { opacity: 1; transform: translateY(0); } .med-adriatic-experience-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-adriatic-experience-header { text-align: center; margin-bottom: 40px; } .med-adriatic-experience-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-adriatic-experience-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } .med-adriatic-experience-list { list-style: none; margin: 0; padding: 0; } .med-adriatic-experience-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-adriatic-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-adriatic-text strong { font-weight: 700; margin-right: 4px; color: #f4c45a; /* Mediterranean Sunlit Gold */ } /* ========================================================= */ /* SECTION 9 — Mediterranean Seasonal Cruise Guide */ /* ========================================================= */ .med-seasonal-guide-section { width: 100%; padding: 80px 0; background: #f7f5f0; /* Mediterranean Soft Stone */ color: #2d6f8e; /* Mediterranean Coastal Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .med-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .med-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; /* Mediterranean Muted Navy */ margin-bottom: 14px; } .med-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .med-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-season-text strong { font-weight: 700; margin-right: 4px; color: #f4c45a; /* Mediterranean Sunlit Gold */ } /* ========================================================= */ /* SECTION 10 — Mediterranean Best Cruise Months Chart */ /* ========================================================= */ .med-best-months-section { width: 100%; padding: 80px 0; background: #f7f5f0; /* Mediterranean Soft Stone */ color: #2d6f8e; /* Mediterranean Coastal Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-best-months-section.revealed { opacity: 1; transform: translateY(0); } .med-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .med-best-months-header { text-align: center; margin-bottom: 40px; } .med-best-months-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } /* Chart container */ .med-months-chart { background: #ffffff; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header */ .med-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #2d6f8e; margin-bottom: 12px; text-align: center; } .med-months-chart-header span { font-size: 0.85rem; } /* Chart label */ .med-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #2d6f8e; } /* Chart rows */ .med-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles */ .best { background: linear-gradient(135deg, #2f8f9d, #66c3d1); /* Mediterranean teal gradient */ border-radius: 4px; height: 18px; } .good { background: linear-gradient(135deg, #f4c45a, #ffe39a); /* Mediterranean gold gradient */ border-radius: 4px; height: 18px; } .avoid { background: linear-gradient(135deg, #c76b4a, #e89a7a); /* Mediterranean terracotta gradient */ border-radius: 4px; height: 18px; } /* Legend */ .med-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .med-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .med-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .med-best-months-list { list-style: none; margin: 0; padding: 0; } .med-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2d6f8e; } .med-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .med-best-text strong { font-weight: 700; margin-right: 4px; color: #f4c45a; /* Mediterranean Sunlit Gold */ } /* ========================================================= */ /* SECTION 11 — Mediterranean Cruise Tips & Planning Guide */ /* ========================================================= */ .med-tips-section { width: 100%; padding: 80px 0; background: #f7f5f0; /* Mediterranean Soft Stone */ color: #2d6f8e; /* Mediterranean Coastal Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-tips-section.revealed { opacity: 1; transform: translateY(0); } .med-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .med-tips-header { text-align: center; margin-bottom: 40px; } .med-tips-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; /* Mediterranean Muted Navy */ margin-bottom: 14px; } /* Icons Row */ .med-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #2d6f8e; } /* Gradient Divider */ .med-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #2d6f8e, #2f8f9d, #f4c45a); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .med-tip-card { background: #ffffff; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .med-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .med-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .med-tip-planning { color: #2d6f8e; } .med-tip-packing { color: #c76b4a; } .med-tip-docs { color: #2f8f9d; } .med-tip-weather { color: #456079; } .med-tip-port { color: #f4c45a; } /* Do's & Don'ts */ .med-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .med-tips-dos, .med-tips-donts { flex: 1; background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .med-tips-dos h3, .med-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #2d6f8e; } .med-tips-dos ul, .med-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .med-insider-tips { margin-top: 40px; } .med-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #2d6f8e; } .med-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Mediterranean Boutique Cruising */ /* ========================================================= */ .med-boutique-section { width: 100%; padding: 80px 0; background: #f7f5f0; /* Mediterranean Soft Stone */ color: #2d6f8e; /* Mediterranean Coastal Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-boutique-section.revealed { opacity: 1; transform: translateY(0); } .med-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .med-boutique-header { text-align: center; margin-bottom: 40px; } .med-boutique-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } /* Icon Row */ .med-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #2d6f8e; } /* Cards container */ .med-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .med-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .med-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Mediterranean colour variants */ .med-boutique-card-blue { background: linear-gradient(135deg, #2d6f8e, #5fa3c4); } .med-boutique-card-teal { background: linear-gradient(135deg, #2f8f9d, #66c3d1); } .med-boutique-card-gold { background: linear-gradient(135deg, #f4c45a, #ffe39a); } .med-boutique-card-terracotta { background: linear-gradient(135deg, #c76b4a, #e89a7a); } .med-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .med-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .med-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .med-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #2d6f8e, #2f8f9d, #f4c45a, #c76b4a); border-radius: 3px; margin: 40px 0; } /* List section */ .med-boutique-list-wrapper { margin-top: 10px; } .med-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #2d6f8e; } .med-boutique-list { list-style: none; margin: 0; padding: 0; } .med-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2d6f8e; } .med-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .med-boutique-label-blue { color: #2d6f8e; } .med-boutique-label-teal { color: #2f8f9d; } .med-boutique-label-gold { color: #f4c45a; } .med-boutique-label-terracotta { color: #c76b4a; } /* Responsive */ @media (max-width: 900px) { .med-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — Mediterranean Port Profiles */ /* ========================================================= */ .med-port-section { width: 100%; padding: 80px 0; background: #f7f5f0; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-port-section.revealed { opacity: 1; transform: translateY(0); } .med-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .med-port-header { text-align: center; margin-bottom: 40px; } .med-port-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-port-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; margin-bottom: 14px; } /* Icon Row */ .med-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #2d6f8e; } /* Cards container */ .med-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .med-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .med-port-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Mediterranean colour variants */ .med-port-card-blue { background: linear-gradient(135deg, #2d6f8e, #5fa3c4); } .med-port-card-teal { background: linear-gradient(135deg, #2f8f9d, #66c3d1); } .med-port-card-gold { background: linear-gradient(135deg, #f4c45a, #ffe39a); } .med-port-card-terracotta { background: linear-gradient(135deg, #c76b4a, #e89a7a); } .med-port-card-sand { background: linear-gradient(135deg, #456079, #6c87a3); /* Mediterranean deep navy gradient */ color: #ffffff; /* Ensures perfect readability */ } .med-port-card-indigo { background: linear-gradient(135deg, #456079, #6c87a3); } .med-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .med-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .med-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal animation */ .med-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Divider */ .med-port-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #2d6f8e, #2f8f9d, #f4c45a, #c76b4a); border-radius: 3px; margin: 40px 0; } /* List section */ .med-port-list-wrapper { margin-top: 10px; } .med-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #2d6f8e; } .med-port-list { list-style: none; margin: 0; padding: 0; } .med-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2d6f8e; } .med-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Colour labels */ .med-port-label-blue { color: #2d6f8e; } .med-port-label-teal { color: #2f8f9d; } .med-port-label-gold { color: #f4c45a; } .med-port-label-terracotta { color: #c76b4a; } /* Responsive */ @media (max-width: 900px) { .med-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — Mediterranean Cruise Port Comparison Grid */ /* ========================================================= */ .med-port-compare-section { width: 100%; padding: 80px 0; background: #eef3f7; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .med-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .med-port-compare-header { text-align: center; margin-bottom: 50px; } .med-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 20px; } .med-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #456079; max-width: 800px; margin: 0 auto; } /* Grid container */ .med-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #ffffff; position: relative; } /* Header row */ .compare-grid-header { background: #dce7f0; font-weight: 700; color: #2d6f8e; } /* Left colour accent */ .compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Mediterranean colour accents */ .compare-row-blue::before { background: #2d6f8e; } .compare-row-teal::before { background: #2f8f9d; } .compare-row-gold::before { background: #f4c45a; } .compare-row-terracotta::before { background: #c76b4a; } .compare-row-indigo::before { background: #456079; } .compare-row-sand::before { background: #f3e2c5; } /* Alternating row backgrounds */ .compare-grid-row:nth-child(even) { background: #f7f5f0; } /* Hover effects */ .compare-grid-row:hover { background: rgba(45, 111, 142, 0.08); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .compare-grid-row.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Insights footer */ .med-port-compare-insights { margin-top: 40px; padding: 30px; background: #eef3f7; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title { font-size: 1.6rem; font-weight: 700; color: #2d6f8e; margin-bottom: 14px; } .compare-insights-text { font-size: 1.1rem; line-height: 1.8; color: #456079; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header { display: none; } .compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — Mediterranean Embarkation vs Destination Ports */ /* ========================================================= */ .med-port-usage-section { padding: 80px 0; background: #eef3f7; /* Mediterranean Mist */ } .med-port-usage-inner { max-width: 1300px; margin: 0 auto; } .med-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #2d6f8e; /* Coastal Blue */ } .med-port-usage-intro { font-size: 1.15rem; text-align: center; color: #456079; /* Muted Navy */ margin-bottom: 20px; } /* GRID */ .med-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .med-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES */ .usage-image-embarkation { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-embarkation-ports.webp'); } .usage-image-destination { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-destination-ports.webp'); } .usage-image-debarkation { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-debarkation-ports.webp'); } /* TEXT */ .usage-card-title { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #ffffff; } .usage-card-text { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #ffffff; opacity: 0.95; } .usage-card-note { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #ffffff; opacity: 0.95; } /* GRADIENTS — Mediterranean */ .usage-card-embarkation { background: linear-gradient(135deg, #2d6f8e, #5fa3c4); /* Coastal Blue */ } .usage-card-destination { background: linear-gradient(135deg, #2f8f9d, #66c3d1); /* Sea Teal */ } .usage-card-debarkation { background: linear-gradient(135deg, #c76b4a, #e89a7a); /* Terracotta */ } /* HOVER */ .med-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .med-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .med-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — Mediterranean Cruise Lines Overview Grid */ /* ========================================================= */ .med-cruise-lines-overview { width: 100%; padding: 90px 0; background: #eef3f7; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .med-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .med-cruise-lines-header { text-align: center; margin-bottom: 60px; } .med-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #2d6f8e; margin-bottom: 16px; } /* Cinematic underline */ .med-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2d6f8e, #2f8f9d, #f4c45a); } .med-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #456079; max-width: 850px; margin: 0 auto; } /* Grid */ .med-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .med-cruise-line-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .med-cruise-line-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .med-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Mediterranean colour sets */ .card-blue::before { background: #2d6f8e; } .card-teal::before { background: #2f8f9d; } .card-gold::before { background: #f4c45a; } .card-terracotta::before { background: #c76b4a; } .card-indigo::before { background: #456079; } .card-cyan::before { background: #66c3d1; } .card-purple::before { background: #6c87a3; } .card-sand::before { background: #f3e2c5; } /* Icon */ .med-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .med-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 12px; } /* Summary */ .med-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #456079; margin-bottom: 18px; } /* Points */ .med-cruise-line-points { list-style: none; padding: 0; margin: 0; } .med-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #2d6f8e; padding-left: 14px; position: relative; } .med-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #f4c45a; font-size: 0.9rem; } /* Hover */ .med-cruise-line-card:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .med-cruise-lines-title { font-size: 2.2rem; } .med-cruise-lines-intro { font-size: 1.1rem; } .med-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 16 — Mediterranean Ship Types Overview */ /* ========================================================= */ .med-ship-types-overview { width: 100%; padding: 90px 0; background: #eef3f7; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .med-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .med-ship-types-header { text-align: center; margin-bottom: 60px; } .med-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #2d6f8e; margin-bottom: 16px; } .med-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2d6f8e, #2f8f9d, #f4c45a); } .med-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #456079; max-width: 850px; margin: 0 auto; } /* Grid */ .med-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .med-ship-type-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-ship-type-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .med-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-blue::before { background: #2d6f8e; } .card-teal::before { background: #2f8f9d; } .card-gold::before { background: #f4c45a; } .card-terracotta::before { background: #c76b4a; } .card-indigo::before { background: #456079; } .card-cyan::before { background: #66c3d1; } .card-purple::before { background: #6c87a3; } .card-sand::before { background: #f3e2c5; } /* Icon */ .med-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .med-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 12px; } /* Summary */ .med-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #456079; margin-bottom: 18px; } /* Points */ .med-ship-type-points { list-style: none; padding: 0; margin: 0; } .med-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #2d6f8e; padding-left: 14px; position: relative; } .med-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #f4c45a; font-size: 0.9rem; } /* Hover */ .med-ship-type-card:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* ========================================================= */ /* SECTION 17 — Mediterranean Cruise Duration Overview */ /* ========================================================= */ .med-cruise-duration-overview { width: 100%; padding: 90px 0; background: #eef3f7; color: #2d6f8e; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .med-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .med-cruise-duration-header { text-align: center; margin-bottom: 60px; } .med-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #2d6f8e; margin-bottom: 16px; } .med-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2d6f8e, #2f8f9d, #f4c45a); } .med-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #456079; max-width: 850px; margin: 0 auto; } /* Grid */ .med-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .med-cruise-duration-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-cruise-duration-card.visible { opacity: 1; transform: translateY(0); } /* Colour accents */ .med-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } .card-blue::before { background: #2d6f8e; } .card-teal::before { background: #2f8f9d; } .card-gold::before { background: #f4c45a; } .card-terracotta::before { background: #c76b4a; } .card-indigo::before { background: #456079; } .card-cyan::before { background: #66c3d1; } .card-purple::before { background: #6c87a3; } .card-sand::before { background: #f3e2c5; } /* Icon */ .med-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .med-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #2d6f8e; margin-bottom: 12px; } /* Summary */ .med-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #456079; margin-bottom: 18px; } /* Points */ .med-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .med-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #2d6f8e; padding-left: 14px; position: relative; } .med-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #f4c45a; font-size: 0.9rem; } /* Hover */ .med-cruise-duration-card:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* ========================================================= */ /* SECTION 18 — Mediterranean Cruise Price Range Overview */ /* ========================================================= */ .med-cruise-price-overview { width: 100%; padding: 90px 0; background: #F5F8FF; color: #1F2A44; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .med-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .med-cruise-price-header { text-align: center; margin-bottom: 60px; } .med-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #123262; margin-bottom: 16px; } .med-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2E86DE, #38ADA9, #F6B93B, #6D214F); } .med-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #3A4561; max-width: 850px; margin: 0 auto; } /* Grid */ .med-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .med-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .med-cruise-price-card.visible { opacity: 1; transform: translateY(0); } /* Top border glow */ .med-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* 12‑colour palette tuned for Mediterranean */ .card-platinum::before { background: #C0C0C0; } .card-sapphire::before { background: #1B4F9C; } .card-amethyst::before { background: #8E44AD; } .card-jade::before { background: #1E8449; } .card-topaz::before { background: #F5B041; } .card-pearl::before { background: #E8E8E8; } .card-onyx::before { background: #2C3E50; } .card-citrine::before { background: #D4AC0D; } .card-coral::before { background: #FF7F50; } .card-glacier::before { background: #5DADE2; } .card-sandstone::before { background: #D2B48C; } .card-royalviolet::before { background: #6C3483; } /* Icon + Titles */ .med-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .med-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #123262; margin-bottom: 18px; } /* Layer Titles */ .med-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .med-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #3A4561; margin-bottom: 10px; } .med-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .med-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .med-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #1F2A44; padding-left: 14px; position: relative; } .med-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #123262; font-size: 0.9rem; } /* Premium hover effects */ .card-platinum:hover { background: rgba(192, 192, 192, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-sapphire:hover { background: rgba(27, 79, 156, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-amethyst:hover { background: rgba(142, 68, 173, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-jade:hover { background: rgba(30, 132, 73, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-topaz:hover { background: rgba(245, 176, 65, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-pearl:hover { background: rgba(232, 232, 232, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-onyx:hover { background: rgba(44, 62, 80, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-citrine:hover { background: rgba(212, 172, 13, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-coral:hover { background: rgba(255, 127, 80, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-glacier:hover { background: rgba(93, 173, 226, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-sandstone:hover { background: rgba(210, 180, 140, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } .card-royalviolet:hover { background: rgba(108, 52, 131, 0.10); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); } /* Responsive */ @media (max-width: 700px) { .med-cruise-price-title { font-size: 2.2rem; } .med-cruise-price-intro { font-size: 1.1rem; } .med-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — Mediterranean Cruise Best Value Tips */ /* ========================================================= */ .section-19 { padding: 80px 0; background: #f3f6fa; /* Mediterranean Mist */ } .section-19-wrapper { max-width: 1300px; margin: 0 auto; } .section-19 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #2d6f8e; /* Coastal Blue */ } .section-19 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; /* Muted Navy */ margin-bottom: 50px; } /* GRID */ .value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — MEDITERRANEAN */ /* ========================================================= */ .card-19-1 { background: linear-gradient(135deg, #e67e22, #d35400); } /* Terracotta Orange */ .card-19-2 { background: linear-gradient(135deg, #2d6f8e, #5fa3c4); } /* Coastal Blue */ .card-19-3 { background: linear-gradient(135deg, #2f8f9d, #66c3d1); } /* Sea Teal */ .card-19-4 { background: linear-gradient(135deg, #c76b4a, #e89a7a); } /* Mediterranean Clay */ .card-19-5 { background: linear-gradient(135deg, #6c87a3, #8aa6c2); } /* Harbor Steel */ .card-19-6 { background: linear-gradient(135deg, #f4c45a, #e8b23c); } /* Sunlit Gold */ .card-19-7 { background: linear-gradient(135deg, #8e44ad, #9b59b6); } /* Royal Purple */ .card-19-8 { background: linear-gradient(135deg, #d63031, #e74c3c); } /* Mediterranean Red */ .card-19-9 { background: linear-gradient(135deg, #27ae60, #2ecc71); } /* Olive Green */ .card-19-10 { background: linear-gradient(135deg, #3498db, #5dade2); } /* Aegean Blue */ .card-19-11 { background: linear-gradient(135deg, #1abc9c, #48c9b0); } /* Turquoise Coast */ .card-19-12 { background: linear-gradient(135deg, #e67e22, #f39c12); } /* Warm Sunset */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-19:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 20 — Mediterranean Cultural Immersion (CSS) */ /* ========================================================= */ .section-20 { padding: 80px 0; background: #eef3f7; /* Mediterranean Mist */ } .section-20-wrapper { max-width: 1300px; margin: 0 auto; } .section-20 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #2d6f8e; /* Coastal Blue */ } .section-20 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; /* Muted Navy */ margin-bottom: 50px; } /* GRID */ .immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PALETTE — MEDITERRANEAN */ /* ========================================================= */ .card-20-1 { background: linear-gradient(135deg, #e67e22, #d35400); } /* Terracotta Orange */ .card-20-2 { background: linear-gradient(135deg, #2d6f8e, #5fa3c4); } /* Coastal Blue */ .card-20-3 { background: linear-gradient(135deg, #2f8f9d, #66c3d1); } /* Sea Teal */ .card-20-4 { background: linear-gradient(135deg, #c76b4a, #e89a7a); } /* Mediterranean Clay */ .card-20-5 { background: linear-gradient(135deg, #6c87a3, #8aa6c2); } /* Harbor Steel */ .card-20-6 { background: linear-gradient(135deg, #f4c45a, #e8b23c); } /* Sunlit Gold */ .card-20-7 { background: linear-gradient(135deg, #8e44ad, #9b59b6); } /* Royal Purple */ .card-20-8 { background: linear-gradient(135deg, #d63031, #e74c3c); } /* Mediterranean Red */ .card-20-9 { background: linear-gradient(135deg, #27ae60, #2ecc71); } /* Olive Green */ .card-20-10 { background: linear-gradient(135deg, #3498db, #5dade2); } /* Aegean Blue */ .card-20-11 { background: linear-gradient(135deg, #1abc9c, #48c9b0); } /* Turquoise Coast */ .card-20-12 { background: linear-gradient(135deg, #e67e22, #f39c12); } /* Warm Sunset */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .hover-20:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* Colour shift on hover */ .card-20-1:hover { background: linear-gradient(135deg, #d35400, #e67e22); } .card-20-2:hover { background: linear-gradient(135deg, #5fa3c4, #2d6f8e); } .card-20-3:hover { background: linear-gradient(135deg, #66c3d1, #2f8f9d); } .card-20-4:hover { background: linear-gradient(135deg, #e89a7a, #c76b4a); } .card-20-5:hover { background: linear-gradient(135deg, #8aa6c2, #6c87a3); } .card-20-6:hover { background: linear-gradient(135deg, #e8b23c, #f4c45a); } .card-20-7:hover { background: linear-gradient(135deg, #9b59b6, #8e44ad); } .card-20-8:hover { background: linear-gradient(135deg, #e74c3c, #d63031); } .card-20-9:hover { background: linear-gradient(135deg, #2ecc71, #27ae60); } .card-20-10:hover { background: linear-gradient(135deg, #5dade2, #3498db); } .card-20-11:hover { background: linear-gradient(135deg, #48c9b0, #1abc9c); } .card-20-12:hover { background: linear-gradient(135deg, #f39c12, #e67e22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 21 — Mediterranean Wildlife & Nature (CSS) */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #eef3f7; } .section-21-wrapper { max-width: 1300px; margin: 0 auto; } .section-21 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #2d6f8e; } .section-21 .section-subtitle { font-size: 1.2rem; text-align: center; color: #456079; margin-bottom: 50px; } /* GRID */ .med-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .med-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .med-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .med-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .med-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — MEDITERRANEAN SECTION 21 */ .med-wildlife-image { transition: transform 0.35s ease; } .med-wildlife-image:hover { transform: scale(1.15); } /* ========================================================= */ /* MEDITERRANEAN IMAGE PATHS — CORRECT & SAFE */ /* ========================================================= */ .med-wildlife-image-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-dolphins.webp'); } .med-wildlife-image-sea-turtle { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-sea-turtle.webp'); } .med-wildlife-image-coral-reef { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-coral-reef.webp'); } .med-wildlife-image-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-rainforest.webp'); } .med-wildlife-image-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-national-park.webp'); } .med-wildlife-image-birdwatching { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-birdwatching.webp'); } .med-wildlife-image-island-ecosystem { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-island-ecosystem.webp'); } .med-wildlife-image-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-mangrove.webp'); } .med-wildlife-image-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-mountains.webp'); } .med-wildlife-image-wildlife-encounter { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-wildlife-encounter.webp'); } .med-wildlife-image-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-eco-tour.webp'); } .med-wildlife-image-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-nature-photography.webp'); } /* ========================================================= */ /* MEDITERRANEAN GRADIENTS */ /* ========================================================= */ .card-21-1 { background: linear-gradient(135deg, #2d6f8e, #5fa3c4); } .card-21-2 { background: linear-gradient(135deg, #2f8f9d, #66c3d1); } .card-21-3 { background: linear-gradient(135deg, #3498db, #5dade2); } .card-21-4 { background: linear-gradient(135deg, #27ae60, #2ecc71); } .card-21-5 { background: linear-gradient(135deg, #f4c45a, #e8b23c); } .card-21-6 { background: linear-gradient(135deg, #c76b4a, #e89a7a); } .card-21-7 { background: linear-gradient(135deg, #6ec9ff, #3aa8e8); } .card-21-8 { background: linear-gradient(135deg, #d63031, #e74c3c); } .card-21-9 { background: linear-gradient(135deg, #6c87a3, #8aa6c2); } .card-21-10 { background: linear-gradient(135deg, #1abc9c, #48c9b0); } .card-21-11 { background: linear-gradient(135deg, #e67e22, #f39c12); } .card-21-12 { background: linear-gradient(135deg, #ffb88c, #ff9f5a); } /* HOVER */ .hover-21:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .med-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .med-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .med-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Mediterranean Cultural Experiences & Traditions (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #eef5f9; /* Mediterranean light coastal tone */ } .section-22-wrapper { max-width: 1300px; margin: 0 auto; } .section-22 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #2a5d7a; /* Deep Mediterranean blue */ } .section-22 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4a6075; margin-bottom: 50px; } /* GRID */ .med-culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .med-culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .med-culture-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .med-culture-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .med-culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — MEDITERRANEAN SECTION 22 */ .med-culture-image { transition: transform 0.35s ease; } .med-culture-image:hover { transform: scale(1.15); } /* ========================================================= */ /* MEDITERRANEAN CULTURE IMAGE PATHS */ /* ========================================================= */ .med-culture-image-ceremonies { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-ceremonies.webp'); } .med-culture-image-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-handicrafts.webp'); } .med-culture-image-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-street-food.webp'); } .med-culture-image-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-architecture.webp'); } .med-culture-image-performances { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-performances.webp'); } .med-culture-image-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-festivals.webp'); } .med-culture-image-markets { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-markets.webp'); } .med-culture-image-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-clothing.webp'); } .med-culture-image-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-workshops.webp'); } .med-culture-image-temples { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-temples.webp'); } .med-culture-image-villages { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-villages.webp'); } .med-culture-image-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-storytelling.webp'); } /* ========================================================= */ /* MEDITERRANEAN GRADIENTS — UNIQUE TO SECTION 22 */ /* ========================================================= */ .card-22-1 { background: linear-gradient(135deg, #2a5d7a, #4f8fb0); } .card-22-2 { background: linear-gradient(135deg, #c97b3a, #f0a45a); } .card-22-3 { background: linear-gradient(135deg, #f2a93b, #f7c76a); } .card-22-4 { background: linear-gradient(135deg, #3f7fb8, #6fa9d6); } .card-22-5 { background: linear-gradient(135deg, #d85b7a, #f08aa3); } .card-22-6 { background: linear-gradient(135deg, #5fa86b, #8bcf8f); } .card-22-7 { background: linear-gradient(135deg, #3c8f8f, #6fc3c3); } .card-22-8 { background: linear-gradient(135deg, #6ec9ff, #3aa8e8); } .card-22-9 { background: linear-gradient(135deg, #b58b4a, #d4aa6a); } .card-22-10 { background: linear-gradient(135deg, #4f6fa8, #7f96cf); } .card-22-11 { background: linear-gradient(135deg, #6f8fb0, #9bb5cf); } .card-22-12 { background: linear-gradient(135deg, #a85f6f, #cf8796); } /* HOVER */ .hover-22:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .med-culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .med-culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .med-culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Mediterranean Festivals & Seasonal Events */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #f8fafc; /* Bright, clean Mediterranean-friendly background */ } .section-23-wrapper { max-width: 1300px; margin: 0 auto; } .section-23 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-23 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION-SCOPED TEXT FIX */ .med-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .med-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — MEDITERRANEAN SECTION 23 */ .festival-image { transition: transform 0.35s ease; } .festival-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — MEDITERRANEAN */ .med-image-santorini-summer-festival { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-santorini-summer-festival.webp'); } .med-image-venice-carnival { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-venice-carnival.webp'); } .med-image-mallorca-sant-joan { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-mallorca-sant-joan.webp'); } .med-image-nice-flower-battle { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-nice-flower-battle.webp'); } .med-image-malta-festa-season { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-malta-festa-season.webp'); } .med-image-sicily-almond-blossom { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-sicily-almond-blossom.webp'); } .med-image-barcelona-la-merce { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-barcelona-la-merce.webp'); } .med-image-corsica-music-arts { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-corsica-music-arts.webp'); } .med-image-dubrovnik-summer-festival { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-dubrovnik-summer-festival.webp'); } .med-image-provence-lavender-season { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-provence-lavender-season.webp'); } .med-image-madeira-flower-festival { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-madeira-flower-festival.webp'); } .med-image-greek-orthodox-easter { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-greek-orthodox-easter.webp'); } /* ========================================================= */ /* MEDITERRANEAN GRADIENTS — NEW COLOUR SCHEME (NOT ASIA) */ /* ========================================================= */ .card-23-1 { background: linear-gradient(135deg, #4db6e3, #2196c9); } /* Santorini blues */ .card-23-2 { background: linear-gradient(135deg, #f7c46a, #e8a63b); } /* Venetian warm gold */ .card-23-3 { background: linear-gradient(135deg, #ffb36b, #ff8a3d); } /* Mallorca summer orange */ .card-23-4 { background: linear-gradient(135deg, #e96fa9, #d64b86); } /* Nice flower pink */ .card-23-5 { background: linear-gradient(135deg, #f2d06b, #e0b63a); } /* Malta festa yellow */ .card-23-6 { background: linear-gradient(135deg, #b7d47a, #9cc45a); } /* Sicily almond green */ .card-23-7 { background: linear-gradient(135deg, #4fa8e0, #2c7fc0); } /* Barcelona blue */ .card-23-8 { background: linear-gradient(135deg, #8ac6b1, #5fae96); } /* Corsica coastal green */ .card-23-9 { background: linear-gradient(135deg, #f48b6c, #e66a48); } /* Dubrovnik terracotta */ .card-23-10 { background: linear-gradient(135deg, #c38be3, #a463d0); } /* Provence lavender purple */ .card-23-11 { background: linear-gradient(135deg, #ff9ec6, #ff6fa8); } /* Madeira flower pink */ .card-23-12 { background: linear-gradient(135deg, #ffd27f, #ffb74d); } /* Greek Easter warm tones */ /* HOVER */ .hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Mediterranean Cruise Cuisine & Dining Highlights (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #f5f7fb; /* lighter, Mediterranean-friendly, not copied from Asia */ } .section-24-wrapper { max-width: 1300px; margin: 0 auto; } .section-24 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #12375b; /* Deep Mediterranean blue */ } .section-24 .section-subtitle { font-size: 1.2rem; text-align: center; color: #4b5563; margin-bottom: 50px; } /* GRID */ .cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION-SCOPED TEXT FIX */ .med-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .med-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #374151; opacity: 0.96; } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — MEDITERRANEAN SECTION 24 */ .cuisine-image { transition: transform 0.35s ease; } .cuisine-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — MEDITERRANEAN CUISINE */ .cuisine-image-greek { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-greek-cuisine.webp'); } .cuisine-image-italian { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-italian-cuisine.webp'); } .cuisine-image-spanish { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-spanish-cuisine.webp'); } .cuisine-image-french { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-french-provencal-cuisine.webp'); } .cuisine-image-turkish { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-turkish-cuisine.webp'); } .cuisine-image-lebanese { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-lebanese-cuisine.webp'); } .cuisine-image-moroccan { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-moroccan-cuisine.webp'); } .cuisine-image-cypriot { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-cypriot-cuisine.webp'); } .cuisine-image-maltese { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-maltese-cuisine.webp'); } .cuisine-image-croatian { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-croatian-cuisine.webp'); } .cuisine-image-sicilian { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-sicilian-cuisine.webp'); } .cuisine-image-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-desserts.webp'); } /* GRADIENTS — MEDITERRANEAN PALETTE (BRIGHT, NON-ASIA) */ .card-24-1 { background: linear-gradient(135deg, #3fa9f5, #1c7ed6); } /* Greek – Aegean blues */ .card-24-2 { background: linear-gradient(135deg, #ffb347, #ff7e5f); } /* Italian – warm citrus */ .card-24-3 { background: linear-gradient(135deg, #ff6b6b, #f06595); } /* Spanish – vibrant coral */ .card-24-4 { background: linear-gradient(135deg, #7bdcb5, #28a745); } /* French Provençal – herb green */ .card-24-5 { background: linear-gradient(135deg, #f9a825, #ff7043); } /* Turkish – warm spice */ .card-24-6 { background: linear-gradient(135deg, #34d399, #059669); } /* Lebanese – fresh green */ .card-24-7 { background: linear-gradient(135deg, #f97316, #ea580c); } /* Moroccan – amber spice */ .card-24-8 { background: linear-gradient(135deg, #38bdf8, #0ea5e9); } /* Cypriot – island blue */ .card-24-9 { background: linear-gradient(135deg, #facc15, #fbbf24); } /* Maltese – sunlit gold */ .card-24-10 { background: linear-gradient(135deg, #22c55e, #16a34a); } /* Croatian – coastal green */ .card-24-11 { background: linear-gradient(135deg, #fb7185, #e11d48); } /* Sicilian – citrus pink/red */ .card-24-12 { background: linear-gradient(135deg, #ffd48a, #fcb564); } .hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* REVEAL + HOVER STATE (OPTIONAL EXTRA CLASSES) */ .section-24.region-reveal-active .cuisine-card { opacity: 1; transform: translateY(0); } .card-24-revealed { opacity: 1; transform: translateY(0); } .card-24-hovered { transform: translateY(-8px); } /* RESPONSIVE */ @media (max-width: 1200px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Mediterranean Shore Excursions (CSS) */ /* ========================================================= */ .mediterranean { padding: 80px 0; background: #f4f7fa; /* Bright Mediterranean-friendly tone */ } .mediterranean-wrapper { max-width: 1300px; margin: 0 auto; } .mediterranean .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #12375b; /* Deep Mediterranean blue */ } .mediterranean .section-subtitle { font-size: 1.2rem; text-align: center; color: #4b5563; margin-bottom: 50px; } /* GRID */ .mediterranean .excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .mediterranean .excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); padding: 0; border: none; } /* IMAGE BLOCK */ .mediterranean .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; background-size: cover; background-position: center; position: relative; z-index: 10; } /* IMAGE ZOOM — MEDITERRANEAN SECTION 25 */ .mediterranean .excursion-image { transition: transform 0.35s ease; } .mediterranean .excursion-image:hover { transform: scale(1.15); } /* TEXT — FULL-WIDTH CENTERED (MATCHES YOUR SCREENSHOT) */ .med-excursion-card h3, .med-excursion-card p { text-align: center; width: 100%; margin-left: 0; margin-right: 0; } .med-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 0 10px 0; color: #102a43; } .med-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 0 20px 0; color: #374151; opacity: 0.96; } /* BACKGROUND IMAGES — MEDITERRANEAN */ .excursion-image-historical-city-walks { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-historical-city-walks.webp'); } .excursion-image-coastal-scenic-tours { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-coastal-scenic-tours.webp'); } .excursion-image-island-beach-excursions { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-island-beach-excursions.webp'); } .excursion-image-food-market-tours { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-food-market-tours.webp'); } .excursion-image-ancient-ruins-archaeology { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-ancient-ruins-archaeology.webp'); } .excursion-image-cultural-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-cultural-workshops.webp'); } .excursion-image-wine-vineyard-tours { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-wine-vineyard-tours.webp'); } .excursion-image-boat-coastal-cruises { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-boat-coastal-cruises.webp'); } .excursion-image-adventure-activities { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-adventure-activities.webp'); } .excursion-image-village-countryside-visits { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-village-countryside-visits.webp'); } .excursion-image-religious-heritage-sites { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-religious-heritage-sites.webp'); } .excursion-image-premium-private-tours { background-image: url('../cruise-images/cruise-region-subpages-images/mediterranean-premium-private-tours.webp'); } /* GRADIENTS — MEDITERRANEAN PALETTE */ .card-med-25-1 { background: linear-gradient(135deg, #3fa9f5, #1c7ed6); } .card-med-25-2 { background: linear-gradient(135deg, #7bdcb5, #28a745); } .card-med-25-3 { background: linear-gradient(135deg, #38bdf8, #0ea5e9); } .card-med-25-4 { background: linear-gradient(135deg, #ffb347, #ff7e5f); } .card-med-25-5 { background: linear-gradient(135deg, #f97316, #ea580c); } .card-med-25-6 { background: linear-gradient(135deg, #34d399, #059669); } .card-med-25-7 { background: linear-gradient(135deg, #facc15, #fbbf24); } .card-med-25-8 { background: linear-gradient(135deg, #22c55e, #16a34a); } .card-med-25-9 { background: linear-gradient(135deg, #fb7185, #e11d48); } .card-med-25-10 { background: linear-gradient(135deg, #a855f7, #6366f1); } .card-med-25-11 { background: linear-gradient(135deg, #8ecae6, #219ebc); } .card-med-25-12 { background: linear-gradient(135deg, #ffd166, #fca311); } /* REVEAL */ .mediterranean.region-reveal-active .excursion-card.card-med-revealed { opacity: 1; transform: translateY(0); } /* HOVER */ .hover-med-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.20); } /* RESPONSIVE */ @media (max-width: 1200px) { .mediterranean .excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .mediterranean .excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mediterranean .excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Mediterranean Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .med-transfers-section { padding: 80px 0; background: #f3f6fa; /* Bright Mediterranean-friendly tone */ } .med-transfers-inner { max-width: 1300px; margin: 0 auto; } .med-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #12375b; /* Deep Mediterranean blue */ } .med-transfers-intro { font-size: 1.15rem; text-align: center; color: #4b5563; margin-bottom: 20px; } /* GRID */ .med-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD BASE */ .med-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; opacity: 0; transform: translateY(20px); } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #102a43; text-align: center; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #374151; margin-bottom: 16px; text-align: center; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; text-align: center; } /* ========================================================= */ /* GRADIENTS — Mediterranean Colour Scheme (NOT Asia) */ /* ========================================================= */ .transfer-card-city { background: linear-gradient(135deg, #3fa9f5, #1c7ed6); /* Aegean blues */ color: #fff; } .transfer-card-airport { background: linear-gradient(135deg, #7bdcb5, #28a745); /* Mediterranean greens */ color: #fff; } .transfer-card-cruiseline { background: linear-gradient(135deg, #ffb347, #ff7e5f); /* Warm coastal orange/coral */ color: #fff; } .transfer-card-local { background: linear-gradient(135deg, #38bdf8, #0ea5e9); /* Bright island blue */ color: #fff; } .transfer-card-access { background: linear-gradient(135deg, #facc15, #fbbf24); /* Sunlit gold */ color: #fff; } .transfer-card-planning { background: linear-gradient(135deg, #ffd48a, #fcb564); /* Mediterranean warm gold + coral */ color: #102a43; /* readable dark text */ } /* ========================================================= */ /* HOVER */ /* ========================================================= */ .med-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* REVEAL */ /* ========================================================= */ .med-transfers-section.region-reveal-active .med-transfer-card.transfer-card-revealed { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .med-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .med-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Mediterranean Cruise FAQ (CSS) */ /* ========================================================= */ .med-faq-section { padding: 80px 0; background: #f5f7fa; /* Bright Mediterranean-friendly tone */ } .med-faq-inner { max-width: 1100px; margin: 0 auto; } .med-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #12375b; /* Deep Mediterranean blue */ } .med-faq-intro { font-size: 1.15rem; text-align: center; color: #4b5563; margin-bottom: 40px; } /* ========================================================= */ /* Accordion Container */ /* ========================================================= */ .med-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* ========================================================= */ /* FAQ Item */ /* ========================================================= */ .med-faq-item { background: #eef3f8; /* Mediterranean soft blue-grey */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* ========================================================= */ /* FAQ Question Button */ /* ========================================================= */ .med-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #102a43; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .med-faq-question:hover { background: #e3e9f1; } /* Arrow Icon */ .med-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .med-faq-item.active .med-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* ========================================================= */ /* FAQ Answer */ /* ========================================================= */ .med-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .med-faq-answer p { font-size: 1rem; color: #374151; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .med-faq-item.active .med-faq-answer { max-height: 300px; } /* ========================================================= */ /* Responsive */ /* ========================================================= */ @media (max-width: 800px) { .med-faq-title { font-size: 2rem; } .med-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- section 3 HERO BACKGROUND (North America hero image) --------------------------------------------- */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/north-america-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .hero-region { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (North America) --------------------------------------------- */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #E9F4FF; /* North America light Atlantic/Pacific backdrop */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #0A3A5E; /* Atlantic Deep Blue */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #2F3A45; /* Urban Slate */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #DFF1FF 0%, #FFFFFF 100%); /* Great Lakes Blue → White */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #0A3A5E; /* Atlantic Deep Blue */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #2F3A45; /* Urban Slate */ text-align: center; } /* TAGS */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .tag { background: #D9A441; /* Canyon Sand Gold */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #0A3A5E; /* Atlantic Deep Blue */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .highlight-icon { color: #D9A441; /* Canyon Sand Gold */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-link { background: #4FA3B0; /* Pacific Horizon Blue */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .secondary-btn { background: #0A3A5E; /* Atlantic Deep Blue */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #3A8A97; transform: translateY(-2px); } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .secondary-btn:hover { background: #06263C; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.north-america-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #D9A441; /* Canyon Sand Gold */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — Alaska Cruise Experience Overview */ /* ========================================================= */ .north-america-alaska-section { width: 100%; padding: 80px 0; background: #E9F4FF; /* North America light Atlantic/Pacific backdrop */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-alaska-section.revealed { opacity: 1; transform: translateY(0); } .north-america-alaska-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-alaska-header { text-align: center; margin-bottom: 40px; } .north-america-alaska-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-alaska-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; /* Urban Slate */ margin-bottom: 14px; } /* List layout */ .north-america-alaska-list { list-style: none; margin: 0; padding: 0; } .north-america-alaska-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A3A5E; } /* Emoji icon */ .na-alaska-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .na-alaska-text { display: inline-block; } /* Country / region name styling */ .na-alaska-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .na-alaska-glacierbay { color: #2E7D32; /* Scenic Green */ } .na-alaska-insidepassage { color: #0277BD; /* Ocean Blue */ } .na-alaska-juneau { color: #6A1B9A; /* Deep Purple Accent */ } .na-alaska-skagway { color: #D84315; /* Warm Orange */ } .na-alaska-hubbard { color: #00838F; /* Glacier Teal */ } .na-alaska-wildlife { color: #C62828; /* Deep Red Accent */ } .na-alaska-scenic { color: #F57C00; /* Sunset Orange */ } /* ========================================================= */ /* SECTION 7 — Caribbean Cruise Experience Overview */ /* ========================================================= */ .north-america-caribbean-section { width: 100%; padding: 80px 0; background: #FFF7E9; /* Warm tropical cream */ color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-caribbean-section.revealed { opacity: 1; transform: translateY(0); } .north-america-caribbean-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-caribbean-header { text-align: center; margin-bottom: 40px; } .north-america-caribbean-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-caribbean-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; margin-bottom: 14px; } /* List layout */ .north-america-caribbean-list { list-style: none; margin: 0; padding: 0; } .north-america-caribbean-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A3A5E; } /* Emoji icon */ .na-caribbean-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .na-caribbean-text { display: inline-block; } /* Country / region name styling */ .na-caribbean-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .na-caribbean-bahamas { color: #0277BD; /* Ocean Blue */ } .na-caribbean-jamaica { color: #2E7D32; /* Tropical Green */ } .na-caribbean-puertorico { color: #6A1B9A; /* Cultural Purple */ } .na-caribbean-stthomas { color: #F57C00; /* Sunset Orange */ } .na-caribbean-cozumel { color: #00838F; /* Reef Teal */ } .na-caribbean-barbados { color: #C62828; /* Warm Red Accent */ } .na-caribbean-aruba { color: #D84315; /* Desert Orange */ } .na-caribbean-atmosphere { color: #4FA3B0; /* Pacific Horizon Blue */ } /* ========================================================= */ /* SECTION 8 — Canada & New England + Pacific Coast Overview */ /* ========================================================= */ .north-america-eastwest-section { width: 100%; padding: 80px 0; background: #F2F4F6; /* Glacier Silver neutral */ color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-eastwest-section.revealed { opacity: 1; transform: translateY(0); } .north-america-eastwest-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-eastwest-header { text-align: center; margin-bottom: 40px; } .north-america-eastwest-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-eastwest-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; margin-bottom: 14px; } /* List layout */ .north-america-eastwest-list { list-style: none; margin: 0; padding: 0; } .north-america-eastwest-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A3A5E; } /* Emoji icon */ .na-eastwest-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .na-eastwest-text { display: inline-block; } /* Country / region name styling */ .na-eastwest-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .na-eastwest-halifax { color: #0277BD; /* Maritime Blue */ } .na-eastwest-quebec { color: #6A1B9A; /* Heritage Purple */ } .na-eastwest-boston { color: #C62828; /* Historic Red */ } .na-eastwest-barharbor { color: #2E7D32; /* Forest Green */ } .na-eastwest-vancouver { color: #00838F; /* Pacific Teal */ } .na-eastwest-seattle { color: #4FA3B0; /* Pacific Horizon Blue */ } .na-eastwest-sanfrancisco { color: #F57C00; /* Sunset Orange */ } .na-eastwest-losangeles { color: #D84315; /* Warm Coast Orange */ } .na-eastwest-atmosphere { color: #0A3A5E; /* Atlantic Deep Blue */ } /* ========================================================= */ /* SECTION 9 — North America Seasonal Cruise Guide */ /* ========================================================= */ .north-america-seasonal-guide-section { width: 100%; padding: 80px 0; background: #E9F4FF; /* North America light Atlantic/Pacific backdrop */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .north-america-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .north-america-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; /* Urban Slate */ margin-bottom: 14px; } /* List layout */ .north-america-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .north-america-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A3A5E; } /* Emoji icon */ .na-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .na-season-text { display: inline-block; } /* Season name styling */ .na-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .na-season-alaska { color: #0277BD; /* Glacier Blue */ } .na-season-caribbean { color: #2E7D32; /* Tropical Green */ } .na-season-newengland { color: #C62828; /* Autumn Red */ } .na-season-pacific { color: #4FA3B0; /* Pacific Horizon Blue */ } .na-season-weather { color: #6A1B9A; /* Purple Accent */ } .na-season-festivals { color: #F57C00; /* Sunset Orange */ } .na-season-scenic { color: #00838F; /* Teal Scenic */ } /* ========================================================= */ /* SECTION 10 — North America Best Cruise Months Chart */ /* ========================================================= */ .north-america-best-months-section { width: 100%; padding: 80px 0; background: #F2F4F6; /* Neutral North America backdrop */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-best-months-section.revealed { opacity: 1; transform: translateY(0); } .north-america-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-best-months-header { text-align: center; margin-bottom: 40px; } .north-america-best-months-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; /* Urban Slate */ margin-bottom: 14px; } /* Chart container */ .north-america-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header (months row) */ .north-america-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #0A3A5E; margin-bottom: 12px; text-align: center; } .north-america-months-chart-header span { font-size: 0.85rem; } /* Chart label for each region */ .north-america-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #0A3A5E; } /* Chart rows (bars) */ .north-america-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles (shared classes, but visually North America) */ .best { background: linear-gradient(135deg, #2E7D32, #66BB6A); /* Best: Scenic Green */ border-radius: 4px; height: 18px; } .good { background: linear-gradient(135deg, #0288D1, #4FC3F7); /* Good: Ocean Blue */ border-radius: 4px; height: 18px; } .avoid { background: linear-gradient(135deg, #C62828, #EF5350); /* Avoid: Warning Red */ border-radius: 4px; height: 18px; } /* Legend */ .north-america-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .north-america-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .north-america-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .north-america-best-months-list { list-style: none; margin: 0; padding: 0; } .north-america-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A3A5E; } .na-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .na-best-text { display: inline-block; } .na-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks for labels */ .na-best-alaska { color: #0277BD; /* Glacier Blue */ } .na-best-caribbean { color: #2E7D32; /* Tropical Green */ } .na-best-newengland { color: #C62828; /* Autumn Red */ } .na-best-pacific { color: #4FA3B0; /* Pacific Horizon Blue */ } .na-best-weather { color: #6A1B9A; /* Weather Awareness Purple */ } .na-best-scenic { color: #F57C00; /* Scenic Sunset Orange */ } /* ========================================================= */ /* SECTION 11 — North America Cruise Tips & Planning Guide */ /* ========================================================= */ .north-america-tips-section { width: 100%; padding: 80px 0; background: #E9F4FF; /* Light North America backdrop */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-tips-section.revealed { opacity: 1; transform: translateY(0); } .north-america-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-tips-header { text-align: center; margin-bottom: 40px; } .north-america-tips-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; /* Urban Slate */ margin-bottom: 14px; } /* Icons Row */ .north-america-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #0A3A5E; } /* Gradient Divider */ .north-america-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0A3A5E, #4FA3B0, #0A3A5E); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .north-america-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .north-america-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .north-america-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .na-tip-planning { color: #0A3A5E; } .na-tip-packing { color: #2E7D32; } .na-tip-docs { color: #6A1B9A; } .na-tip-weather { color: #0277BD; } .na-tip-port { color: #F57C00; } /* Do's & Don'ts */ .north-america-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .north-america-tips-dos, .north-america-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .north-america-tips-dos h3, .north-america-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #0A3A5E; } .north-america-tips-dos ul, .north-america-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .north-america-insider-tips { margin-top: 40px; } .north-america-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #0A3A5E; } .north-america-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising (North America) */ /* ========================================================= */ .north-america-boutique-section { width: 100%; padding: 80px 0; background: #F2F4F6; /* Glacier Silver */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-boutique-section.revealed { opacity: 1; transform: translateY(0); } .north-america-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-boutique-header { text-align: center; margin-bottom: 40px; } .north-america-boutique-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; margin-bottom: 14px; } /* Icon Row */ .north-america-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A3A5E; } /* Cards container */ .north-america-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .north-america-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .north-america-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .na-boutique-card-blue { background: linear-gradient(135deg, #0277BD, #4FA3B0); } .na-boutique-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .na-boutique-card-teal { background: linear-gradient(135deg, #00838F, #4FC3F7); } .na-boutique-card-gold { background: linear-gradient(135deg, #D9A441, #F2C76E); } .north-america-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .north-america-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .north-america-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .north-america-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0A3A5E, #4FA3B0, #2E7D32, #D9A441); border-radius: 3px; margin: 40px 0; } /* List section */ .north-america-boutique-list-wrapper { margin-top: 10px; } .north-america-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A3A5E; } .north-america-boutique-list { list-style: none; margin: 0; padding: 0; } .north-america-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2F3A45; } .north-america-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .north-america-boutique-list-text { display: inline-block; } /* Colour labels */ .na-boutique-label-blue { color: #0277BD; } .na-boutique-label-green { color: #2E7D32; } .na-boutique-label-teal { color: #00838F; } .na-boutique-label-gold { color: #D9A441; } /* Responsive */ @media (max-width: 900px) { .north-america-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — North America Port Profiles (Sub‑Page Edition) */ /* ========================================================= */ .north-america-port-section { width: 100%; padding: 80px 0; background: #F2F4F6; /* Glacier Silver */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-port-section.revealed { opacity: 1; transform: translateY(0); } .north-america-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .north-america-port-header { text-align: center; margin-bottom: 40px; } .north-america-port-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-port-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; margin-bottom: 14px; } /* Icon Row */ .north-america-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A3A5E; } /* Cards container */ .north-america-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .north-america-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .north-america-port-card-icon { font-size: 1.9rem; margin-top: 4px; } .north-america-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants */ .na-port-card-blue { background: linear-gradient(135deg, #0277BD, #4FA3B0); } .na-port-card-teal { background: linear-gradient(135deg, #00838F, #4FC3F7); } .na-port-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .na-port-card-indigo { background: linear-gradient(135deg, #283593, #5C6BC0); } .na-port-card-gold { background: linear-gradient(135deg, #D9A441, #F2C76E); } .na-port-card-purple { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } .na-port-card-coral { background: linear-gradient(135deg, #D84315, #FF7043); } .na-port-card-amber { background: linear-gradient(135deg, #FF8F00, #FFB74D); } .north-america-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .north-america-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .north-america-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal animation for cards */ .north-america-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Divider */ .north-america-port-divider { height: 3px; width: 100%; background: linear-gradient( 90deg, #0277BD, #2E7D32, #283593, #00838F, #D9A441 ); border-radius: 3px; margin: 40px 0; } /* List section */ .north-america-port-list-wrapper { margin-top: 10px; } .north-america-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A3A5E; } .north-america-port-list { list-style: none; margin: 0; padding: 0; } .north-america-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2F3A45; } .north-america-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .north-america-port-list-text { display: inline-block; } /* Colour labels */ .na-port-label-indigo { color: #283593; } .na-port-label-red { color: #C62828; } .na-port-label-blue { color: #0277BD; } .na-port-label-teal { color: #00838F; } .na-port-label-gold { color: #D9A441; } .na-port-label-green { color: #2E7D32; } /* Responsive */ @media (max-width: 900px) { .north-america-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — North America Cruise Port Comparison Grid */ /* ========================================================= */ .north-america-port-compare-section { width: 100%; padding: 80px 0; background: #F1F5F9; /* North America Soft Sky */ color: #0A3A5E; /* Atlantic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .north-america-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-port-compare-header { text-align: center; margin-bottom: 50px; } .north-america-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 20px; } .north-america-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #2F3A45; max-width: 800px; margin: 0 auto; } /* Grid container */ .north-america-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row-na { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header-na { background: #E2ECF7; font-weight: 700; color: #0A3A5E; } /* Left colour accent */ .compare-grid-row-na::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-blue-na::before { background: #1E88E5; } .compare-row-teal-na::before { background: #00838F; } .compare-row-green-na::before { background: #2E7D32; } .compare-row-indigo-na::before { background: #283593; } .compare-row-gold-na::before { background: #D9A441; } .compare-row-purple-na::before { background: #6A1B9A; } .compare-row-coral-na::before { background: #D84315; } .compare-row-amber-na::before { background: #FF8F00; } /* Alternating row backgrounds */ .compare-grid-row-na:nth-child(even) { background: #F6F8FC; } /* Hover effects (premium glow) */ .compare-row-blue-na:hover, .compare-row-teal-na:hover, .compare-row-green-na:hover, .compare-row-indigo-na:hover, .compare-row-gold-na:hover, .compare-row-purple-na:hover, .compare-row-coral-na:hover, .compare-row-amber-na:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-blue-na:hover { background: rgba(30, 136, 229, 0.10); } .compare-row-teal-na:hover { background: rgba(0, 131, 143, 0.10); } .compare-row-green-na:hover { background: rgba(46, 125, 50, 0.10); } .compare-row-indigo-na:hover { background: rgba(40, 53, 147, 0.10); } .compare-row-gold-na:hover { background: rgba(217, 164, 65, 0.10); } .compare-row-purple-na:hover { background: rgba(106, 27, 154, 0.10); } .compare-row-coral-na:hover { background: rgba(216, 67, 21, 0.10); } .compare-row-amber-na:hover { background: rgba(255, 143, 0, 0.10); } /* Reveal animation */ .compare-grid-row-na.region-reveal-na { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row-na.region-reveal-na.visible-na { opacity: 1; transform: translateY(0); } /* Insights footer */ .north-america-port-compare-insights { margin-top: 40px; padding: 30px; background: #E3EDF7; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title-na { font-size: 1.6rem; font-weight: 700; color: #0A3A5E; margin-bottom: 14px; } .compare-insights-text-na { font-size: 1.1rem; line-height: 1.8; color: #2F3A45; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row-na { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header-na { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row-na { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header-na { display: none; } .compare-col-na { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — North America Embarkation vs Destination Ports */ /* ========================================================= */ .north-america-port-usage-section { padding: 80px 0; background: #E9F4FF; /* North America Light Sky */ } .north-america-port-usage-inner { max-width: 1300px; margin: 0 auto; } .north-america-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .north-america-port-usage-intro { font-size: 1.15rem; text-align: center; color: #2F3A45; margin-bottom: 20px; } /* GRID */ .north-america-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .north-america-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image-na { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES */ .usage-image-embarkation-na { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-embarkation-ports.webp'); } .usage-image-destination-na { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-destination-ports.webp'); } .usage-image-debarkation-na { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-debarkation-ports.webp'); } /* TEXT */ .usage-card-title-na { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #fff; } .usage-card-text-na { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #fff; opacity: 0.95; } .usage-card-note-na { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #fff; opacity: 0.95; } /* GRADIENTS */ .usage-card-embarkation-na { background: linear-gradient(135deg, #0277BD, #4FA3B0); } .usage-card-destination-na { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .usage-card-debarkation-na { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } /* HOVER */ .north-america-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .north-america-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .north-america-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — North America Cruise Line Fleet Size Comparison */ /* ========================================================= */ .north-america-fleet-section { width: 100%; padding: 80px 0; background: #EDF4FB; color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-fleet-section.revealed { opacity: 1; transform: translateY(0); } .north-america-fleet-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-fleet-header { text-align: center; margin-bottom: 40px; } .north-america-fleet-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .north-america-fleet-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #0277BD, #2E7D32, #D9A441); } .north-america-fleet-intro { font-size: 1.1rem; line-height: 1.8; color: #2F3A45; max-width: 850px; margin: 0 auto 12px; } /* Grid container */ .north-america-fleet-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); background: #FFFFFF; margin-top: 40px; } /* Grid rows */ .fleet-grid-row-na { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 16px 20px; font-size: 0.98rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; } /* Header row */ .fleet-grid-header-na { background: #E3EDF7; font-weight: 700; color: #0A3A5E; } /* Left colour accent */ .fleet-grid-row-na::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .fleet-row-coral-na::before { background: #D84315; } .fleet-row-blue-na::before { background: #1E88E5; } .fleet-row-teal-na::before { background: #00838F; } .fleet-row-indigo-na::before { background: #283593; } .fleet-row-green-na::before { background: #2E7D32; } .fleet-row-purple-na::before { background: #6A1B9A; } .fleet-row-gold-na::before { background: #D9A441; } .fleet-row-cyan-na::before { background: #0097A7; } .fleet-row-red-na::before { background: #C62828; } .fleet-row-amber-na::before { background: #FF8F00; } /* Alternating row backgrounds */ .fleet-grid-row-na:nth-child(even) { background: #F7FAFE; } /* Hover effects */ .fleet-row-coral-na:hover, .fleet-row-blue-na:hover, .fleet-row-teal-na:hover, .fleet-row-indigo-na:hover, .fleet-row-green-na:hover, .fleet-row-purple-na:hover, .fleet-row-gold-na:hover, .fleet-row-cyan-na:hover, .fleet-row-red-na:hover, .fleet-row-amber-na:hover { background: rgba(2, 119, 189, 0.04); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .fleet-grid-row-na.region-reveal-na { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .fleet-grid-row-na.region-reveal-na.visible-na { opacity: 1; transform: translateY(0); } /* Columns */ .fleet-col-na { padding: 4px 8px; } /* Fleet Bars Visual */ .north-america-fleet-bars { margin-top: 40px; padding: 26px 24px 20px; border-radius: 14px; background: #E3EDF7; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .north-america-fleet-bars-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A3A5E; } /* TWO-COLUMN BAR LAYOUT */ .fleet-bars-row-na { display: grid; grid-template-columns: 190px 1fr; column-gap: 20px; margin-bottom: 24px; } /* Left column — ship name */ .fleet-bars-col-left-na { font-size: 1rem; font-weight: 700; color: #0A3A5E; display: flex; align-items: center; } /* Right column — bar + paragraph */ .fleet-bars-col-right-na { display: flex; flex-direction: column; gap: 10px; } /* Bar */ .fleet-bar-na { height: 12px; border-radius: 999px; } /* Bar colours */ .fleet-bar-coral-na { width: 88%; background: linear-gradient(90deg, #D84315, #FF7043); } .fleet-bar-blue-na { width: 92%; background: linear-gradient(90deg, #1E88E5, #64B5F6); } .fleet-bar-teal-na { width: 78%; background: linear-gradient(90deg, #00838F, #4FC3F7); } .fleet-bar-indigo-na { width: 74%; background: linear-gradient(90deg, #283593, #5C6BC0); } .fleet-bar-green-na { width: 68%; background: linear-gradient(90deg, #2E7D32, #66BB6A); } .fleet-bar-purple-na { width: 74%; background: linear-gradient(90deg, #6A1B9A, #AB47BC); } .fleet-bar-gold-na { width: 52%; background: linear-gradient(90deg, #D9A441, #F2C76E); } .fleet-bar-cyan-na { width: 86%; background: linear-gradient(90deg, #0097A7, #4DD0E1); } .fleet-bar-red-na { width: 46%; background: linear-gradient(90deg, #C62828, #EF5350); } .fleet-bar-amber-na { width: 64%; background: linear-gradient(90deg, #FF8F00, #FFB74D); } /* Paragraph under bar */ .fleet-bars-detail-na { font-size: 0.95rem; line-height: 1.7; color: #2F3A45; max-width: 780px; } /* Responsive */ @media (max-width: 700px) { .fleet-bars-row-na { grid-template-columns: 1fr; } .fleet-bars-col-left-na { margin-bottom: 6px; } } /* ========================================================= */ /* SECTION 16 — North America Port Logistics & Passenger Flow Guide */ /* ========================================================= */ .north-america-logistics-section { width: 100%; padding: 80px 0; background: #E7F0F9; /* Light terminal sky */ color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-logistics-section.revealed { opacity: 1; transform: translateY(0); } .north-america-logistics-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-logistics-header { text-align: center; margin-bottom: 40px; } .north-america-logistics-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .north-america-logistics-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #0277BD, #2E7D32, #FF8F00); } .north-america-logistics-intro { font-size: 1.1rem; line-height: 1.8; color: #2F3A45; max-width: 850px; margin: 0 auto 12px; } /* Logistics Grid */ .north-america-logistics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; } .na-logistics-card { border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); color: #FFFFFF; position: relative; overflow: hidden; } .na-logistics-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; } .na-logistics-card-text { font-size: 0.98rem; line-height: 1.7; margin-bottom: 14px; } /* Card gradients */ .na-logistics-card-embarkation { background: linear-gradient(135deg, #0277BD, #4FA3B0); } .na-logistics-card-disembarkation { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .na-logistics-card-transfers { background: linear-gradient(135deg, #FF8F00, #FFB74D); } /* List inside cards */ .na-logistics-list { list-style: none; margin: 0; padding: 0; } .na-logistics-list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.95rem; } .na-logistics-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Reveal animation for cards */ .na-logistics-card.region-reveal-na { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; } .na-logistics-card.region-reveal-na.visible-na { opacity: 1; transform: translateY(0); } /* Comparison strip */ .na-logistics-compare { margin-top: 40px; padding: 26px 24px; border-radius: 16px; background: #F0F5FC; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .na-logistics-compare-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A3A5E; } .na-logistics-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .na-logistics-compare-item { background: #FFFFFF; border-radius: 12px; padding: 16px 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); font-size: 0.96rem; line-height: 1.7; color: #2F3A45; } .na-logistics-compare-item h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } /* Comparison accents */ .na-compare-caribbean { border-left: 4px solid #0277BD; } .na-compare-alaska { border-left: 4px solid #2E7D32; } .na-compare-canada { border-left: 4px solid #FF8F00; } /* Tips section */ .na-logistics-tips { margin-top: 40px; } .na-logistics-tips-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #0A3A5E; } .na-logistics-tips-list { list-style: none; margin: 0; padding: 0; } .na-logistics-tips-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.98rem; color: #2F3A45; } .na-logistics-tips-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Responsive */ @media (max-width: 1100px) { .north-america-logistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .na-logistics-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .north-america-logistics-grid { grid-template-columns: 1fr; } .na-logistics-compare-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 17 — North America Cruise Lines Overview Grid */ /* ========================================================= */ .north-america-cruise-lines-overview { width: 100%; padding: 90px 0; background: #EAF3FB; /* North America soft backdrop */ color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .north-america-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-cruise-lines-header { text-align: center; margin-bottom: 60px; } .north-america-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #0A3A5E; margin-bottom: 16px; } /* Cinematic gradient underline */ .north-america-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #0277BD, #2E7D32, #D9A441); } .north-america-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #2F3A45; max-width: 850px; margin: 0 auto; } /* Grid */ .north-america-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .na-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .na-cruise-line-card.visible-na { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .na-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets (North America palette) */ .na-card-teal::before { background: #00838F; } .na-card-coral::before { background: #D84315; } .na-card-indigo::before { background: #283593; } .na-card-cyan::before { background: #0097A7; } .na-card-amber::before { background: #FF8F00; } .na-card-purple::before { background: #6A1B9A; } .na-card-blue::before { background: #1E88E5; } .na-card-red::before { background: #C62828; } .na-card-green::before { background: #2E7D32; } .na-card-gold::before { background: #D9A441; } /* Icon */ .na-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .na-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 12px; } /* Summary */ .na-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #2F3A45; margin-bottom: 18px; } /* Points */ .na-cruise-line-points { list-style: none; padding: 0; margin: 0; } .na-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #0A3A5E; padding-left: 14px; position: relative; } .na-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0277BD; font-size: 0.9rem; } /* Hover (premium glow) */ .na-card-teal:hover, .na-card-coral:hover, .na-card-indigo:hover, .na-card-cyan:hover, .na-card-amber:hover, .na-card-purple:hover, .na-card-blue:hover, .na-card-red:hover, .na-card-green:hover, .na-card-gold:hover { background: rgba(2, 119, 189, 0.04); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .north-america-cruise-lines-title { font-size: 2.2rem; } .north-america-cruise-lines-intro { font-size: 1.1rem; } .na-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — North America Ship Types Overview */ /* ========================================================= */ .north-america-ship-types-overview { width: 100%; padding: 90px 0; background: #EAF3FB; color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .north-america-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-ship-types-header { text-align: center; margin-bottom: 60px; } .north-america-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #0A3A5E; margin-bottom: 16px; } .north-america-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #0277BD, #2E7D32, #D9A441); } .north-america-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #2F3A45; max-width: 850px; margin: 0 auto; } /* Grid */ .north-america-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .na-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .na-ship-type-card.visible-na { opacity: 1; transform: translateY(0); } /* Colour accents */ .na-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* North America colour palette */ .na-card-blue::before { background: #1E88E5; } .na-card-green::before { background: #2E7D32; } .na-card-indigo::before { background: #283593; } .na-card-gold::before { background: #D9A441; } .na-card-teal::before { background: #00838F; } .na-card-purple::before { background: #6A1B9A; } .na-card-coral::before { background: #D84315; } .na-card-cyan::before { background: #0097A7; } .na-card-amber::before { background: #FF8F00; } .na-card-red::before { background: #C62828; } .na-card-sky::before { background: #4FA3B0; } .na-card-silver::before { background: #B0BEC5; } /* Icon */ .na-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .na-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 12px; } /* Summary */ .na-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #2F3A45; margin-bottom: 18px; } /* Points */ .na-ship-type-points { list-style: none; padding: 0; margin: 0; } .na-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #0A3A5E; padding-left: 14px; position: relative; } .na-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0277BD; font-size: 0.9rem; } /* Hover */ .na-card-blue:hover, .na-card-green:hover, .na-card-indigo:hover, .na-card-gold:hover, .na-card-teal:hover, .na-card-purple:hover, .na-card-coral:hover, .na-card-cyan:hover, .na-card-amber:hover, .na-card-red:hover, .na-card-sky:hover, .na-card-silver:hover { background: rgba(2, 119, 189, 0.04); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .north-america-ship-types-title { font-size: 2.2rem; } .north-america-ship-types-intro { font-size: 1.1rem; } .na-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — North America Cruise Duration Overview */ /* ========================================================= */ .north-america-cruise-duration-overview { width: 100%; padding: 90px 0; background: #EAF3FB; color: #0A3A5E; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .north-america-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-cruise-duration-header { text-align: center; margin-bottom: 60px; } .north-america-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #0A3A5E; margin-bottom: 16px; } /* Cinematic gradient underline */ .north-america-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #0277BD, #2E7D32, #D9A441); } .north-america-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #2F3A45; max-width: 850px; margin: 0 auto; } /* Grid */ .north-america-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .na-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .na-cruise-duration-card.visible-na { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .na-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets — North America palette */ .na-card-teal::before { background: #00838F; } .na-card-coral::before { background: #D84315; } .na-card-indigo::before { background: #283593; } .na-card-cyan::before { background: #0097A7; } .na-card-amber::before { background: #FF8F00; } .na-card-purple::before { background: #6A1B9A; } .na-card-blue::before { background: #1E88E5; } .na-card-red::before { background: #C62828; } /* Icon */ .na-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .na-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 12px; } /* Summary */ .na-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #2F3A45; margin-bottom: 18px; } /* Points */ .na-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .na-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #0A3A5E; padding-left: 14px; position: relative; } .na-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0277BD; font-size: 0.9rem; } /* Hover (premium glow) */ .na-card-teal:hover, .na-card-coral:hover, .na-card-indigo:hover, .na-card-cyan:hover, .na-card-amber:hover, .na-card-purple:hover, .na-card-blue:hover, .na-card-red:hover { background: rgba(2, 119, 189, 0.04); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .north-america-cruise-duration-title { font-size: 2.2rem; } .north-america-cruise-duration-intro { font-size: 1.1rem; } .na-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 20 — North America Cruise Price Range Overview */ /* ========================================================= */ .north-america-cruise-price-overview { width: 100%; padding: 90px 0; background: #E9F3FF; color: #1F2A44; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .north-america-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .north-america-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .north-america-cruise-price-header { text-align: center; margin-bottom: 60px; } .north-america-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #0A3A5E; margin-bottom: 16px; } .north-america-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #1E88E5, #2E7D32, #D9A441, #4FA3B0); } .north-america-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #3A4561; max-width: 850px; margin: 0 auto; } /* Grid */ .north-america-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .na-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .na-cruise-price-card.visible-na { opacity: 1; transform: translateY(0); } /* Top border glow */ .na-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* 12‑colour North America palette */ .na-card-platinum::before { background: #C0C0C0; } .na-card-sapphire::before { background: #0F52BA; } .na-card-amethyst::before { background: #9966CC; } .na-card-jade::before { background: #00A36C; } .na-card-topaz::before { background: #FFC85B; } .na-card-pearl::before { background: #E8E8E8; } .na-card-onyx::before { background: #353839; } .na-card-citrine::before { background: #E4D00A; } .na-card-coral::before { background: #FF7F50; } .na-card-glacier::before { background: #71A6D2; } .na-card-sandstone::before { background: #D2B48C; } .na-card-royalviolet::before{ background: #6A0DAD; } /* Icon + Titles */ .na-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .na-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #0A3A5E; margin-bottom: 18px; } /* Layer Titles */ .na-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .na-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #3A4561; margin-bottom: 10px; } .na-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .na-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .na-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #1F2A44; padding-left: 14px; position: relative; } .na-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #0A3A5E; font-size: 0.9rem; } /* Premium hover effects */ .na-card-platinum:hover, .na-card-sapphire:hover, .na-card-amethyst:hover, .na-card-jade:hover, .na-card-topaz:hover, .na-card-pearl:hover, .na-card-onyx:hover, .na-card-citrine:hover, .na-card-coral:hover, .na-card-glacier:hover, .na-card-sandstone:hover, .na-card-royalviolet:hover { background: rgba(30, 136, 229, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .north-america-cruise-price-title { font-size: 2.2rem; } .north-america-cruise-price-intro { font-size: 1.1rem; } .na-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 21 — North America Cruise Best Value Tips */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #F0F6FF; } .na-section-21-wrapper { max-width: 1300px; margin: 0 auto; } .na-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .na-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .na-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .na-value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .na-value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .na-value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR NORTH AMERICA PALETTE */ /* ========================================================= */ .na-card-21-1 { background: linear-gradient(135deg, #1E88E5, #1565C0); } .na-card-21-2 { background: linear-gradient(135deg, #2E7D32, #1B5E20); } .na-card-21-3 { background: linear-gradient(135deg, #D84315, #BF360C); } .na-card-21-4 { background: linear-gradient(135deg, #00838F, #006064); } .na-card-21-5 { background: linear-gradient(135deg, #4FA3B0, #2A7C8C); } .na-card-21-6 { background: linear-gradient(135deg, #283593, #1A237E); } .na-card-21-7 { background: linear-gradient(135deg, #D9A441, #B8860B); } .na-card-21-8 { background: linear-gradient(135deg, #6A1B9A, #4A148C); } .na-card-21-9 { background: linear-gradient(135deg, #C62828, #8E0000); } .na-card-21-10 { background: linear-gradient(135deg, #00ACC1, #00838F); } .na-card-21-11 { background: linear-gradient(135deg, #5C6BC0, #3949AB); } .na-card-21-12 { background: linear-gradient(135deg, #8D6E63, #6D4C41); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .na-hover-21:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .na-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .na-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .na-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — North America Cultural Immersion (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #F2F7FF; } .na-section-22-wrapper { max-width: 1300px; margin: 0 auto; } .na-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .na-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .na-immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .na-immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .na-immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .na-immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR NORTH AMERICA PALETTE */ /* ========================================================= */ .na-card-22-1 { background: linear-gradient(135deg, #1E88E5, #1565C0); } .na-card-22-2 { background: linear-gradient(135deg, #2E7D32, #1B5E20); } .na-card-22-3 { background: linear-gradient(135deg, #D84315, #BF360C); } .na-card-22-4 { background: linear-gradient(135deg, #00838F, #006064); } .na-card-22-5 { background: linear-gradient(135deg, #4FA3B0, #2A7C8C); } .na-card-22-6 { background: linear-gradient(135deg, #283593, #1A237E); } .na-card-22-7 { background: linear-gradient(135deg, #D9A441, #B8860B); } .na-card-22-8 { background: linear-gradient(135deg, #6A1B9A, #4A148C); } .na-card-22-9 { background: linear-gradient(135deg, #C62828, #8E0000); } .na-card-22-10 { background: linear-gradient(135deg, #00ACC1, #00838F); } .na-card-22-11 { background: linear-gradient(135deg, #5C6BC0, #3949AB); } .na-card-22-12 { background: linear-gradient(135deg, #8D6E63, #6D4C41); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .na-hover-22:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .na-immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .na-immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .na-immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — North America Wildlife & Nature (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #F3F8FF; } .na-section-23-wrapper { max-width: 1300px; margin: 0 auto; } .na-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .na-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .na-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .na-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .na-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .na-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .na-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTH AMERICA SECTION 23 */ .na-wildlife-image { transition: transform 0.35s ease; } .na-wildlife-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTH AMERICA WILDLIFE */ /* ========================================================= */ .na-img-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/na-dolphins.webp'); } .na-img-sea-turtle { background-image: url('../cruise-images/cruise-region-subpages-images/na-sea-turtle.webp'); } .na-img-coral-reef { background-image: url('../cruise-images/cruise-region-subpages-images/na-coral-reef.webp'); } .na-img-rainforest { background-image: url('../cruise-images/cruise-region-subpages-images/na-rainforest.webp'); } .na-img-national-park { background-image: url('../cruise-images/cruise-region-subpages-images/na-national-park.webp'); } .na-img-birdwatching { background-image: url('../cruise-images/cruise-region-subpages-images/na-birdwatching.webp'); } .na-img-island-ecosystem { background-image: url('../cruise-images/cruise-region-subpages-images/na-island-ecosystem.webp'); } .na-img-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/na-mangrove.webp'); } .na-img-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/na-mountains.webp'); } .na-img-wildlife-encounter { background-image: url('../cruise-images/cruise-region-subpages-images/na-wildlife-encounter.webp'); } .na-img-eco-tour { background-image: url('../cruise-images/cruise-region-subpages-images/na-eco-tour.webp'); } .na-img-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/na-nature-photography.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTH AMERICA GRADIENT PALETTE */ /* ========================================================= */ .na-card-23-1 { background: linear-gradient(135deg, #A7D8F5, #7CC4EB); } .na-card-23-2 { background: linear-gradient(135deg, #B2E3C0, #8CCF9E); } .na-card-23-3 { background: linear-gradient(135deg, #FFD9A6, #FFC47A); } .na-card-23-4 { background: linear-gradient(135deg, #C8E6C9, #A5D6A7); } .na-card-23-5 { background: linear-gradient(135deg, #DCE7F8, #BFD4EE); } .na-card-23-6 { background: linear-gradient(135deg, #F5E1A4, #E8C874); } .na-card-23-7 { background: linear-gradient(135deg, #F2C1C1, #E89A9A); } .na-card-23-8 { background: linear-gradient(135deg, #CDEAF2, #A8DCE8); } .na-card-23-9 { background: linear-gradient(135deg, #E6D4B8, #D4C0A2); } .na-card-23-10 { background: linear-gradient(135deg, #C8D7E8, #A9C3D8); } .na-card-23-11 { background: linear-gradient(135deg, #D9E8D4, #C2D9BC); } .na-card-23-12 { background: linear-gradient(135deg, #F5E7D8, #E8D3BC); } /* HOVER */ .na-hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .na-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .na-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .na-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — North America Cultural Experiences (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #F4F8FF; } .na-section-24-wrapper { max-width: 1300px; margin: 0 auto; } .na-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .na-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .na-culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .na-culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .na-culture-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .na-culture-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .na-culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTH AMERICA SECTION 24 */ .na-culture-image { transition: transform 0.35s ease; } .na-culture-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTH AMERICA CULTURAL */ /* ========================================================= */ .na-img-ceremonies { background-image: url('../cruise-images/cruise-region-subpages-images/na-ceremonies.webp'); } .na-img-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/na-handicrafts.webp'); } .na-img-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/na-street-food.webp'); } .na-img-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/na-architecture.webp'); } .na-img-performances { background-image: url('../cruise-images/cruise-region-subpages-images/na-performances.webp'); } .na-img-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/na-festivals.webp'); } .na-img-markets { background-image: url('../cruise-images/cruise-region-subpages-images/na-markets.webp'); } .na-img-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/na-clothing.webp'); } .na-img-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/na-workshops.webp'); } .na-img-landmarks { background-image: url('../cruise-images/cruise-region-subpages-images/na-landmarks.webp'); } .na-img-villages { background-image: url('../cruise-images/cruise-region-subpages-images/na-villages.webp'); } .na-img-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/na-storytelling.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTH AMERICA GRADIENT PALETTE */ /* ========================================================= */ .na-card-24-1 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } .na-card-24-2 { background: linear-gradient(135deg, #DCEEDC, #BEE3BE); } .na-card-24-3 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } .na-card-24-4 { background: linear-gradient(135deg, #E3F2FD, #C5E1F7); } .na-card-24-5 { background: linear-gradient(135deg, #F8DCE3, #F2B8C8); } .na-card-24-6 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } .na-card-24-7 { background: linear-gradient(135deg, #F2D4D4, #E8B1B1); } .na-card-24-8 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .na-card-24-9 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .na-card-24-10 { background: linear-gradient(135deg, #DCE7F8, #C2D4EE); } .na-card-24-11 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } .na-card-24-12 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } /* HOVER */ .na-hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .na-culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .na-culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .na-culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — North America Festivals & Seasonal Events */ /* ========================================================= */ .section-25 { padding: 80px 0; background: #F4F8FF; } .na-section-25-wrapper { max-width: 1300px; margin: 0 auto; } .na-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .na-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .na-festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .na-festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .na-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .na-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .na-festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTH AMERICA SECTION 25 */ .na-festival-image { transition: transform 0.35s ease; } .na-festival-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTH AMERICA FESTIVALS */ /* (filenames from your prompts) */ /* ========================================================= */ .na-img-coastal-parade { background-image: url('../cruise-images/cruise-region-subpages-images/na-coastal-parade.webp'); } .na-img-caribbean-carnival { background-image: url('../cruise-images/cruise-region-subpages-images/na-caribbean-carnival.webp'); } .na-img-summer-music-festival { background-image: url('../cruise-images/cruise-region-subpages-images/na-summer-music-festival.webp'); } .na-img-harvest-celebration { background-image: url('../cruise-images/cruise-region-subpages-images/na-harvest-celebration.webp'); } .na-img-cultural-street-festival{ background-image: url('../cruise-images/cruise-region-subpages-images/na-cultural-street-festival.webp'); } .na-img-coastal-fireworks-prep { background-image: url('../cruise-images/cruise-region-subpages-images/na-coastal-fireworks-prep.webp'); } .na-img-community-parks-festival{ background-image: url('../cruise-images/cruise-region-subpages-images/na-community-parks-festival.webp'); } .na-img-food-and-market-fair { background-image: url('../cruise-images/cruise-region-subpages-images/na-food-and-market-fair.webp'); } .na-img-coastal-holiday-season { background-image: url('../cruise-images/cruise-region-subpages-images/na-coastal-holiday-season.webp'); } .na-img-cultural-center-events { background-image: url('../cruise-images/cruise-region-subpages-images/na-cultural-center-events.webp'); } .na-img-floral-seasonal-displays{ background-image: url('../cruise-images/cruise-region-subpages-images/na-floral-seasonal-displays.webp'); } .na-img-festival-parade-routes { background-image: url('../cruise-images/cruise-region-subpages-images/na-festival-parade-routes.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTH AMERICA GRADIENT PALETTE */ /* (no deep purple / no heavy navy / no near‑black) */ /* ========================================================= */ .na-festival-card-25-1 { background: linear-gradient(135deg, #FDE2C8, #F9CFA0); } .na-festival-card-25-2 { background: linear-gradient(135deg, #F8D4D4, #F1B1B1); } .na-festival-card-25-3 { background: linear-gradient(135deg, #DCE7F8, #C2D4EE); } .na-festival-card-25-4 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } .na-festival-card-25-5 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } .na-festival-card-25-6 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } .na-festival-card-25-7 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } .na-festival-card-25-8 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .na-festival-card-25-9 { background: linear-gradient(135deg, #F5D9D0, #EFBFAF); } .na-festival-card-25-10 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .na-festival-card-25-11 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } .na-festival-card-25-12 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } /* HOVER */ .na-hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .na-festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .na-festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .na-festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — North America Cruise Cuisine & Dining Highlights (CSS) */ /* ========================================================= */ .section-26 { padding: 80px 0; background: #f8fbff; /* brighter, clean North America colour scheme */ } .section-26-wrapper { max-width: 1300px; margin: 0 auto; } .section-26 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-26 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .north-america-cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .north-america-cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* REGION‑SCOPED TEXT FIX */ .north-america-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #1a1a1a; } .north-america-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* IMAGE BLOCK */ .cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTH AMERICA SECTION 26 */ .cuisine-image { transition: transform 0.35s ease; } .cuisine-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — NORTH AMERICA CUISINE */ .na-image-classic-diner { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-classic-american-diner-cuisine.webp'); } .na-image-southern-comfort { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-southern-comfort-soul-food.webp'); } .na-image-texas-bbq { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-texas-bbq-smokehouse.webp'); } .na-image-cajun-creole { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-cajun-creole-cuisine.webp'); } .na-image-new-england-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-new-england-seafood-lobster.webp'); } .na-image-pacific-northwest { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-pacific-northwest-farm-to-table.webp'); } .na-image-hawaiian-flavours { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-hawaiian-island-cuisine.webp'); } .na-image-canadian-comfort { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-canadian-comfort-poutine.webp'); } .na-image-alaska-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-alaska-seafood-wild-catch.webp'); } .na-image-brunch-coffee { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-brunch-coffee-culture.webp'); } .na-image-modern-fusion { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-modern-fusion-dining.webp'); } .na-image-desserts-bakes { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-desserts-bakes.webp'); } /* NEW NORTH AMERICA COLOUR SCHEME — BRIGHTER, CLEANER */ .na-card-26-1 { background: linear-gradient(135deg, #4da3ff, #1e6fe8); } .na-card-26-2 { background: linear-gradient(135deg, #ff9f50, #ff7a1e); } .na-card-26-3 { background: linear-gradient(135deg, #c04b3f, #a63a2f); } .na-card-26-4 { background: linear-gradient(135deg, #7cc46b, #4ea64a); } .na-card-26-5 { background: linear-gradient(135deg, #3ec6e0, #1aa9c4); } .na-card-26-6 { background: linear-gradient(135deg, #8bcf5a, #6aa93f); } .na-card-26-7 { background: linear-gradient(135deg, #f4b840, #e89a1e); } .na-card-26-8 { background: linear-gradient(135deg, #6f9edb, #4a7fc2); } .na-card-26-9 { background: linear-gradient(135deg, #5ac0e8, #2a9bc7); } .na-card-26-10 { background: linear-gradient(135deg, #f2a8c6, #e07aa4); } .na-card-26-11 { background: linear-gradient(135deg, #9e7df2, #7a5bd4); } .na-card-26-12 { background: linear-gradient(135deg, #ff8c4b, #e66a2a); } /* HOVER */ .na-hover-26:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .north-america-cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .north-america-cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .north-america-cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — North America Shore Excursions (CSS) */ /* ========================================================= */ .section-27 { padding: 80px 0; background: #f5f8ff; /* light, clean background */ } .section-27-wrapper { max-width: 1300px; margin: 0 auto; } .section-27 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-27 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .north-america-excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .north-america-excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); padding: 0; border: none; } /* IMAGE BLOCK */ .north-america-excursion-card .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; position: relative; z-index: 10; } /* IMAGE ZOOM — NORTH AMERICA SECTION 27 */ .north-america-excursion-card .excursion-image { transition: transform 0.35s ease; } .north-america-excursion-card .excursion-image:hover { transform: scale(1.15); } /* TEXT */ .north-america-excursion-card h3, .north-america-excursion-card p { position: relative; z-index: 20; text-align: center; margin-left: 0; margin-right: 0; width: 100%; } .north-america-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .north-america-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* REVEAL */ .section-27.region-reveal-active .north-america-excursion-card.na-card-27-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — NORTH AMERICA */ .na-image-city-skyline-tours { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-city-skyline-tours.webp'); } .na-image-historic-landmarks { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-historic-landmarks-heritage-routes.webp'); } .na-image-coastal-beach { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-coastal-beach-excursions.webp'); } .na-image-food-markets { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-food-markets-local-flavours.webp'); } .na-image-nature-scenic { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-nature-trails-scenic-viewpoints.webp'); } .na-image-cultural-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-cultural-workshops-experiences.webp'); } .na-image-wildlife-encounters { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-wildlife-coastal-encounters.webp'); } .na-image-river-lake-cruises { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-river-lake-harbour-cruises.webp'); } .na-image-soft-adventure { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-soft-adventure-outdoor-activities.webp'); } .na-image-historic-districts { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-historic-districts-walking-tours.webp'); } .na-image-small-towns { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-small-towns-coastal-communities.webp'); } .na-image-premium-private-tours { background-image: url('../cruise-images/cruise-region-subpages-images/north-america-premium-private-small-group-tours.webp'); } /* GRADIENTS — LIGHT–MEDIUM, NO DEEP PURPLE/NAVY */ .na-card-27-1 { background: linear-gradient(135deg, #6fb8ff, #3f8fe0); } .na-card-27-2 { background: linear-gradient(135deg, #ffd27a, #ffac3f); } .na-card-27-3 { background: linear-gradient(135deg, #7fd6e5, #45b7cf); } .na-card-27-4 { background: linear-gradient(135deg, #f7a6a6, #f27c7c); } .na-card-27-5 { background: linear-gradient(135deg, #9bd58a, #6fbf5a); } .na-card-27-6 { background: linear-gradient(135deg, #f4c58b, #e9a45a); } .na-card-27-7 { background: linear-gradient(135deg, #8fd0f2, #5bb3de); } .na-card-27-8 { background: linear-gradient(135deg, #b3c7ff, #7f9ef0); } .na-card-27-9 { background: linear-gradient(135deg, #f9b68f, #f28a5a); } .na-card-27-10 { background: linear-gradient(135deg, #c6e3a8, #93c676); } .na-card-27-11 { background: linear-gradient(135deg, #f5c0d4, #e89ab8); } .na-card-27-12 { background: linear-gradient(135deg, #ffe29a, #ffc46b); } /* HOVER */ .na-hover-27:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .north-america-excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .north-america-excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .north-america-excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 28 — North America Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .section-28 { padding: 80px 0; background: #f5f8ff; /* light, clean North America background */ } .north-america-transfers-inner { max-width: 1300px; margin: 0 auto; } .north-america-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .north-america-transfers-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 20px; } /* GRID */ .north-america-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD BASE */ .north-america-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #102a43; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #444; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; } /* NEW NORTH AMERICA GRADIENTS — LIGHT–MEDIUM ONLY */ .transfer-card-city-na { background: linear-gradient(135deg, #6fb8ff, #3f8fe0); color: #fff; } .transfer-card-airport-na { background: linear-gradient(135deg, #8ed28a, #5fbf5a); color: #fff; } .transfer-card-cruiseline-na { background: linear-gradient(135deg, #f7b27a, #e98c3f); color: #fff; } .transfer-card-local-na { background: linear-gradient(135deg, #7fd6e5, #45b7cf); color: #fff; } .transfer-card-access-na { background: linear-gradient(135deg, #b3c7ff, #7f9ef0); color: #fff; } .transfer-card-planning-na { background: linear-gradient(135deg, #ffe29a, #ffc46b); color: #fff; } /* HOVER */ .north-america-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .north-america-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .north-america-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 29 — North America Cruise FAQ (CSS) */ /* ========================================================= */ .section-29 { padding: 80px 0; background: #f5f8ff; /* light, clean background */ } .north-america-faq-inner { max-width: 1100px; margin: 0 auto; } .north-america-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .north-america-faq-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 40px; } /* Accordion Container */ .north-america-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .north-america-faq-item { background: #f7fbff; /* light–medium, high contrast for dark text */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .north-america-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #102a43; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .north-america-faq-question:hover { background: #e9f1ff; } /* Arrow Icon */ .north-america-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .north-america-faq-item.active .north-america-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .north-america-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .north-america-faq-answer p { font-size: 1rem; color: #444; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .north-america-faq-item.active .north-america-faq-answer { max-height: 320px; } /* Responsive */ @media (max-width: 800px) { .north-america-faq-title { font-size: 2rem; } .north-america-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- SECTION 3 — HERO BACKGROUND (Northern Europe) --------------------------------------------- */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/northern-europe-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .hero-region { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #FFFFFF; /* Deep Nordic Blue (Option A palette) */ } /*--------------------------------------------- SECTION 4 — Overview (Northern Europe) ---------------------------------------------*/ .section-overview-northern-europe { text-align: center; } /* Heading */ .section-title-northern-europe { font-size: 2rem; font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ margin-bottom: 20px; width: 100%; text-align: center; } /* Intro Paragraph */ .section-intro-northern-europe { font-size: 1.15rem; line-height: 1.7; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ max-width: 820px; margin: 0 auto 32px; } /* Highlights Row */ .overview-highlights-northern-europe { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } /* Highlight Item */ .highlight-item-northern-europe { background: #eef6fc; /* Light Nordic Mist Blue — region accurate */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* Highlight Icon */ .highlight-icon-northern-europe { color: #7fb3e8; /* Scandinavian Ice Blue — locked */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Northern Europe) --------------------------------------------- */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .section-featured-cruise-lines-northern-europe { padding: 60px 0; background: #e9f4ff; /* Light Nordic sea backdrop */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .section-inner-northern-europe { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .section-title-northern-europe-5 { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .section-intro-northern-europe-5 { font-size: 1.1rem; line-height: 1.6; color: #4a627c; /* Cool Nordic Slate */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×5 LAYOUT */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-lines-grid-northern-europe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-card-northern-europe { background: linear-gradient(180deg, #dff1ff 0%, #ffffff 100%); /* Nordic Glacier Blue → White */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-logo-banner-northern-europe { width: 230px; height: 110px; margin: 0 auto 16px; background: #ffffff; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-logo-northern-europe { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-name-northern-europe { font-size: 1.35rem; font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-description-northern-europe { font-size: 1rem; line-height: 1.6; color: #4a627c; /* Cool Nordic Slate */ text-align: center; } /* TAGS */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-tags-northern-europe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .tag-northern-europe { background: #5fa8d3; /* Baltic Sky Blue */ color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-highlights-northern-europe { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-highlights-northern-europe li { font-size: 0.95rem; font-weight: 600; color: #2f4a73; /* Deep Nordic Fjord Blue */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .highlight-icon-northern-europe { color: #7fb3e8; /* Scandinavian Ice Blue */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-link-northern-europe { background: #4fa3b0; /* Cool Nordic Teal */ color: #ffffff; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; margin-top: 6px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .secondary-btn-northern-europe { background: #2f4a73; /* Deep Nordic Fjord Blue */ color: #ffffff; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; margin-top: 6px; } /* HOVER EFFECTS */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-card-northern-europe:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-link-northern-europe:hover { background: #3a8a97; transform: translateY(-2px); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .secondary-btn-northern-europe:hover { background: #223552; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-header-northern-europe { position: relative; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .cruise-line-header-northern-europe::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #7fb3e8; /* Scandinavian Ice Blue accent */ border-radius: 2px; } /* --------------------------------------------- SECTION 6 — Norwegian Fjords Cruise Experience (Northern Europe) --------------------------------------------- */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-section { padding: 60px 0; background: #e9f4ff; /* Light Nordic fjord backdrop */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; } /* Header block */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-header { margin-bottom: 26px; } /* Title */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-title { font-size: 2.2rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ text-align: center; margin-bottom: 18px; } /* Intro paragraphs */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-intro { font-size: 1.05rem; line-height: 1.7; color: #4a627c; /* Cool Nordic Slate */ max-width: 900px; margin: 0 auto 14px; text-align: center; } /* Region / Atmosphere list */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; } /* List items */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-fjords-list li { display: flex; align-items: flex-start; gap: 10px; background: #eef6fc; /* Glacier Mist */ border-radius: 10px; padding: 10px 14px; } /* Icon */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-fjords-icon { font-size: 1.3rem; color: #7fb3e8; /* Scandinavian Ice Blue */ flex-shrink: 0; margin-top: 2px; } /* Text */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-fjords-text { font-size: 0.98rem; line-height: 1.6; color: #2f4a73; /* Deep Nordic Fjord Blue */ } /* Strong labels inside text */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-fjords-text strong { font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue */ } /* --------------------------------------------- SECTION 7 — Baltic Sea Cruise Experience (Northern Europe) --------------------------------------------- */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-section { padding: 60px 0; background: #e9f4ff; /* Light Nordic Baltic backdrop */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; } /* Header block */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-header { margin-bottom: 26px; } /* Title */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-title { font-size: 2.2rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ text-align: center; margin-bottom: 18px; } /* Intro paragraphs */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-intro { font-size: 1.05rem; line-height: 1.7; color: #4a627c; /* Cool Nordic Slate */ max-width: 900px; margin: 0 auto 14px; text-align: center; } /* Region / Atmosphere list */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; } /* List items */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-baltic-list li { display: flex; align-items: flex-start; gap: 10px; background: #eef6fc; /* Glacier Mist */ border-radius: 10px; padding: 10px 14px; } /* Icon */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-baltic-icon { font-size: 1.3rem; color: #7fb3e8; /* Scandinavian Ice Blue */ flex-shrink: 0; margin-top: 2px; } /* Text */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-baltic-text { font-size: 0.98rem; line-height: 1.6; color: #2f4a73; /* Deep Nordic Fjord Blue */ } /* Strong labels inside text */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-baltic-text strong { font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue */ } /* --------------------------------------------- SECTION 8 — Iceland + Arctic Circle Cruise Experience (Northern Europe) --------------------------------------------- */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-section { padding: 60px 0; background: #e9f4ff; /* Light Nordic Arctic backdrop */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; } /* Header block */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-header { margin-bottom: 26px; } /* Title */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-title { font-size: 2.2rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #7fb3e8; /* Scandinavian Ice Blue — locked */ text-align: center; margin-bottom: 18px; } /* Intro paragraphs */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-intro { font-size: 1.05rem; line-height: 1.7; color: #4a627c; /* Cool Nordic Slate */ max-width: 900px; margin: 0 auto 14px; text-align: center; } /* Region / Atmosphere list */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; } /* List items */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-icelandarctic-list li { display: flex; align-items: flex-start; gap: 10px; background: #eef6fc; /* Glacier Mist */ border-radius: 10px; padding: 10px 14px; } /* Icon */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-icelandarctic-icon { font-size: 1.3rem; color: #7fb3e8; /* Scandinavian Ice Blue */ flex-shrink: 0; margin-top: 2px; } /* Text */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-icelandarctic-text { font-size: 0.98rem; line-height: 1.6; color: #2f4a73; /* Deep Nordic Fjord Blue */ } /* Strong labels inside text */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-icelandarctic-text strong { font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue */ } /* ========================================================= */ /* SECTION 9 — Northern Europe Seasonal Cruise Guide */ /* ========================================================= */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-section { width: 100%; padding: 80px 0; background: #eef6fc; /* Arctic Mist */ color: #2f4a73; /* Nordic Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue */ margin-bottom: 20px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #4a627c; /* Nordic Slate */ margin-bottom: 14px; } /* List layout */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #2f4a73; /* Nordic Deep Blue */ } /* Emoji icon */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; color: #7fb3e8; /* Scandinavian Ice Blue */ } /* Text block */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-text { display: inline-block; } /* Season name styling */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks — Northern Europe ONLY */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-fjords { color: #6aa9d8; /* Glacier Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-baltic { color: #c89f3d; /* Nordic Gold */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-iceland { color: #d47f2a; /* Volcanic Amber */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-arctic { color: #8ec7e8; /* Polar Ice */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-weather { color: #6c7a89; /* Storm Grey */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-festivals { color: #d45fa6; /* Aurora Pink */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-season-scenic { color: #1f355a; /* Midnight Blue */ } /* ========================================================= */ /* SECTION 10 — Northern Europe Best Cruise Months Chart */ /* ========================================================= */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-section { width: 100%; padding: 80px 0; background: #f3f8ff; /* Arctic Frost — NEW Northern Europe backdrop */ color: #1f355a; /* Midnight Fjord Blue — NEW primary text */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-title { font-size: 2.4rem; font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue — locked Northern Europe title colour */ margin-bottom: 20px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #4a627c; /* Nordic Slate — NEW intro colour */ margin-bottom: 14px; } /* Chart container */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart { background: #ffffff; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); /* Softer Arctic shadow */ } /* Chart header (months row) */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #1f355a; /* Midnight Fjord Blue */ margin-bottom: 12px; text-align: center; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-header span { font-size: 0.85rem; } /* Chart label for each region */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #1f355a; /* Midnight Fjord Blue */ } /* Chart rows (bars) */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles — NEW Northern Europe colours */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .best { background: linear-gradient(135deg, #7fb3e8, #a8cff5); /* BEST: Scandinavian Ice Blue gradient */ border-radius: 4px; height: 18px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .good { background: linear-gradient(135deg, #4a627c, #6f88a3); /* GOOD: Nordic Slate gradient */ border-radius: 4px; height: 18px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .avoid { background: linear-gradient(135deg, #b4c3d1, #d0d9e2); /* AVOID: Arctic Grey gradient */ border-radius: 4px; height: 18px; } /* Legend */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-list { list-style: none; margin: 0; padding: 0; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #1f355a; /* Midnight Fjord Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; color: #7fb3e8; /* Scandinavian Ice Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-text { display: inline-block; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks — NEW Northern Europe palette */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-fjords { color: #6aa9d8; /* Glacier Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-baltic { color: #c89f3d; /* Nordic Gold */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-iceland { color: #d47f2a; /* Volcanic Amber */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-arctic { color: #8ec7e8; /* Polar Ice */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-weather { color: #6c7a89; /* Storm Grey */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-best-scenic { color: #1f355a; /* Midnight Fjord Blue */ } /* ========================================================= */ /* SECTION 11 — Northern Europe Cruise Tips & Planning Guide */ /* ========================================================= */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-section { width: 100%; padding: 80px 0; background: #f4f7ff; /* Soft Arctic Mist */ color: #1f355a; /* Midnight Fjord Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-section.revealed { opacity: 1; transform: translateY(0); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-header { text-align: center; margin-bottom: 40px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-title { font-size: 2.4rem; font-weight: 700; color: #7fb3e8; /* Scandinavian Ice Blue */ margin-bottom: 20px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-intro { font-size: 1.15rem; line-height: 1.85; color: #4a627c; /* Nordic Slate */ margin-bottom: 16px; } /* Icons Row */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #1f355a; } /* Gradient Divider */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #7fb3e8, #4a627c, #7fb3e8); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tip-card { background: #ffffff; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels — Northern Europe palette */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-tip-planning { color: #1f355a; /* Planning — Midnight Fjord Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-tip-packing { color: #4a627c; /* Packing — Nordic Slate */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-tip-docs { color: #7b8fb0; /* Documentation — Arctic Steel Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-tip-weather { color: #6aa9d8; /* Weather — Glacier Blue */ } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .ne-tip-port { color: #c89f3d; /* Port — Nordic Gold */ } /* Do's & Don'ts */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-dos, .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-donts { flex: 1; background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-dos h3, .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #1f355a; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-dos ul, .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-insider-tips { margin-top: 40px; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #1f355a; } .page-cruise-subpage.northern-europe-subpage.cruise-lines-subpage .northern-europe-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising (Northern Europe) */ /* ========================================================= */ .northern-europe-boutique-section { width: 100%; padding: 80px 0; background: #e9f3fb; /* Light Nordic Mist */ color: #0a2e4d; /* Deep Nordic Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-boutique-section.revealed { opacity: 1; transform: translateY(0); } .northern-europe-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .northern-europe-boutique-header { text-align: center; margin-bottom: 40px; } .northern-europe-boutique-title { font-size: 2.4rem; font-weight: 700; color: #0a2e4d; margin-bottom: 20px; } .northern-europe-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #2f3a45; margin-bottom: 14px; } /* Icon Row */ .northern-europe-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0a2e4d; } /* Cards container */ .northern-europe-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .northern-europe-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .northern-europe-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants — Northern Europe palette */ .ne-boutique-card-nordic { background: linear-gradient(135deg, #0a2e4d, #7fb3e8); } .ne-boutique-card-fjord { background: linear-gradient(135deg, #1b4f72, #85c1e9); } .ne-boutique-card-baltic { background: linear-gradient(135deg, #154360, #5dade2); } .ne-boutique-card-aurora { background: linear-gradient(135deg, #0e3a53, #a3c9f9); } .northern-europe-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .northern-europe-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .northern-europe-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .northern-europe-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0a2e4d, #7fb3e8, #1b4f72, #a3c9f9); border-radius: 3px; margin: 40px 0; } /* List section */ .northern-europe-boutique-list-wrapper { margin-top: 10px; } .northern-europe-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0a2e4d; } .northern-europe-boutique-list { list-style: none; margin: 0; padding: 0; } .northern-europe-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2f3a45; } .northern-europe-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .northern-europe-boutique-list-text { display: inline-block; } /* Colour labels */ .ne-boutique-label-nordic { color: #0a2e4d; } .ne-boutique-label-baltic { color: #154360; } .ne-boutique-label-islands { color: #1b4f72; } .ne-boutique-label-aurora { color: #7fb3e8; } /* Responsive */ @media (max-width: 900px) { .northern-europe-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — Northern Europe Port Profiles (Sub‑Page Edition) */ /* ========================================================= */ .northern-europe-port-section { width: 100%; padding: 80px 0; background: #e9f3fb; /* Nordic Mist */ color: #0a2e4d; /* Deep Nordic Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-port-section.revealed { opacity: 1; transform: translateY(0); } .northern-europe-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .northern-europe-port-header { text-align: center; margin-bottom: 40px; } .northern-europe-port-title { font-size: 2.4rem; font-weight: 700; color: #0a2e4d; margin-bottom: 20px; } .northern-europe-port-intro { font-size: 1.15rem; line-height: 1.8; color: #2f3a45; margin-bottom: 14px; } /* Icon Row */ .northern-europe-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0a2e4d; } /* Cards container */ .northern-europe-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .northern-europe-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.12); opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-port-card.visible { opacity: 1; transform: translateY(0); } .northern-europe-port-card-icon { font-size: 1.9rem; margin-top: 4px; } .northern-europe-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants — Northern Europe palette */ .ne-port-card-nordic { background: linear-gradient(135deg, #0a2e4d, #7fb3e8); } .ne-port-card-fjord { background: linear-gradient(135deg, #1b4f72, #85c1e9); } .ne-port-card-baltic { background: linear-gradient(135deg, #154360, #5dade2); } .ne-port-card-archipelago { background: linear-gradient(135deg, #0e3a53, #a3c9f9); } .ne-port-card-capital { background: linear-gradient(135deg, #0a3a5e, #7fb3e8); } .ne-port-card-volcanic { background: linear-gradient(135deg, #4b4b4b, #9bb8d3); } .ne-port-card-harbour { background: linear-gradient(135deg, #1f3a4d, #7fb3e8); } .ne-port-card-highlands { background: linear-gradient(135deg, #2e4053, #9cc4e4); } .northern-europe-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .northern-europe-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .northern-europe-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .northern-europe-port-divider { height: 3px; width: 100%; background: linear-gradient( 90deg, #0a2e4d, #7fb3e8, #1b4f72, #154360, #a3c9f9 ); border-radius: 3px; margin: 40px 0; } /* List section */ .northern-europe-port-list-wrapper { margin-top: 10px; } .northern-europe-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0a2e4d; } .northern-europe-port-list { list-style: none; margin: 0; padding: 0; } .northern-europe-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2f3a45; } .northern-europe-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .northern-europe-port-list-text { display: inline-block; } /* Colour labels */ .ne-port-label-nordic { color: #0a2e4d; } .ne-port-label-fjord { color: #1b4f72; } .ne-port-label-highlands { color: #2e4053; } .ne-port-label-emerald { color: #2e7d32; } .ne-port-label-harbour { color: #154360; } .ne-port-label-baltic { color: #5dade2; } /* Responsive */ @media (max-width: 900px) { .northern-europe-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — Northern Europe Cruise Port Comparison Grid */ /* ========================================================= */ .northern-europe-port-compare-section { width: 100%; padding: 80px 0; background: #e9f3fb; /* Nordic Mist */ color: #0a2e4d; /* Deep Nordic Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .northern-europe-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-port-compare-header { text-align: center; margin-bottom: 50px; } .northern-europe-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #0a2e4d; margin-bottom: 20px; } .northern-europe-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #2f3a45; max-width: 800px; margin: 0 auto; } /* Grid container */ .northern-europe-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Base grid row — always visible unless marked region-reveal-ne */ .compare-grid-row-ne { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #ffffff; position: relative; } /* Header row */ .compare-grid-header-ne { background: #dceaf7; font-weight: 700; color: #0a2e4d; } /* Reveal animation ONLY for rows marked region-reveal-ne */ .compare-grid-row-ne.region-reveal-ne { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row-ne.region-reveal-ne.visible-ne { opacity: 1; transform: translateY(0); } /* Left colour accent */ .compare-grid-row-ne::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents — Northern Europe palette */ .compare-row-nordic-ne::before { background: #0a2e4d; } .compare-row-fjord-ne::before { background: #1b4f72; } .compare-row-baltic-ne::before { background: #154360; } .compare-row-archipelago-ne::before { background: #0e3a53; } .compare-row-capital-ne::before { background: #7fb3e8; } .compare-row-volcanic-ne::before { background: #4b4b4b; } .compare-row-harbour-ne::before { background: #1f3a4d; } .compare-row-highlands-ne::before { background: #2e4053; } /* Alternating row backgrounds */ .compare-grid-row-ne:nth-child(even) { background: #f6f8fc; } /* Hover effects */ .compare-row-nordic-ne:hover, .compare-row-fjord-ne:hover, .compare-row-baltic-ne:hover, .compare-row-archipelago-ne:hover, .compare-row-capital-ne:hover, .compare-row-volcanic-ne:hover, .compare-row-harbour-ne:hover, .compare-row-highlands-ne:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-nordic-ne:hover { background: rgba(10,46,77,0.10); } .compare-row-fjord-ne:hover { background: rgba(27,79,114,0.10); } .compare-row-baltic-ne:hover { background: rgba(21,67,96,0.10); } .compare-row-archipelago-ne:hover { background: rgba(14,58,83,0.10); } .compare-row-capital-ne:hover { background: rgba(127,179,232,0.10); } .compare-row-volcanic-ne:hover { background: rgba(75,75,75,0.10); } .compare-row-harbour-ne:hover { background: rgba(31,58,77,0.10); } .compare-row-highlands-ne:hover { background: rgba(46,64,83,0.10); } /* Insights footer */ .northern-europe-port-compare-insights { margin-top: 40px; padding: 30px; background: #dceaf7; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title-ne { font-size: 1.6rem; font-weight: 700; color: #0a2e4d; margin-bottom: 14px; } .compare-insights-text-ne { font-size: 1.1rem; line-height: 1.8; color: #2f3a45; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row-ne { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header-ne { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row-ne { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header-ne { display: none; } .compare-col-ne { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — Northern Europe Embarkation vs Destination Ports */ /* ========================================================= */ .northern-europe-port-usage-section { padding: 80px 0; background: #f2f7fc; /* Light Nordic Sky */ } .northern-europe-port-usage-inner { max-width: 1300px; margin: 0 auto; } .northern-europe-port-usage-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102a43; } .northern-europe-port-usage-intro { font-size: 1.15rem; text-align: center; color: #1a1a1a; margin-bottom: 20px; } /* GRID */ .northern-europe-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .northern-europe-port-usage-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image-ne { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES */ .usage-image-embarkation-ne { background-image: url('../cruise-images/cruise-region-subpages-images/northern-europe-embarkation.webp'); } .usage-image-destination-ne { background-image: url('../cruise-images/cruise-region-subpages-images/northern-europe-destination.webp'); } .usage-image-debarkation-ne { background-image: url('../cruise-images/cruise-region-subpages-images/northern-europe-debarkation.webp'); } /* TEXT */ .usage-card-title-ne { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .usage-card-text-ne { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } .usage-card-note-ne { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* LIGHT–MEDIUM GRADIENTS (NO DARK PURPLE / NAVY) */ .usage-card-embarkation-ne { background: linear-gradient(135deg, #bcd9f1, #7fb3e8); } .usage-card-destination-ne { background: linear-gradient(135deg, #c7e6d4, #8fcfa8); } .usage-card-debarkation-ne { background: linear-gradient(135deg, #d9e2ec, #bcd9f1); } /* HOVER */ .northern-europe-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .northern-europe-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .northern-europe-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — Northern Europe Cruise Line Fleet Size Comparison */ /* ========================================================= */ .northern-europe-fleet-section { width: 100%; padding: 80px 0; background: #edf3fb; color: #102a43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-fleet-section.revealed { opacity: 1; transform: translateY(0); } .northern-europe-fleet-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-fleet-header { text-align: center; margin-bottom: 40px; } .northern-europe-fleet-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .northern-europe-fleet-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #7fb3e8, #8fcfa8, #f2c76e); } .northern-europe-fleet-intro { font-size: 1.1rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto 12px; } /* Grid container */ .northern-europe-fleet-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); background: #ffffff; margin-top: 40px; } /* Grid rows */ .fleet-grid-row-ne { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 16px 20px; font-size: 0.98rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; } /* Header row */ .fleet-grid-header-ne { background: #e3edf7; font-weight: 700; color: #102a43; } /* Reveal animation */ .fleet-grid-row-ne.region-reveal-ne { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .fleet-grid-row-ne.region-reveal-ne.visible-ne { opacity: 1; transform: translateY(0); } /* Left colour accent */ .fleet-grid-row-ne::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents — Northern Europe palette */ .fleet-row-fjord-ne::before { background: #4f8fb8; } .fleet-row-viking-ne::before { background: #7fb3e8; } .fleet-row-msc-ne::before { background: #5aa9c9; } .fleet-row-po-ne::before { background: #8fcfa8; } .fleet-row-cunard-ne::before { background: #c9b27a; } .fleet-row-aida-ne::before { background: #7fb3e8; } .fleet-row-costa-ne::before { background: #9cc4e4; } .fleet-row-fred-ne::before { background: #6fa3c1; } .fleet-row-silver-ne::before { background: #bcd9f1; } .fleet-row-hal-ne::before { background: #8fb0c9; } /* Alternating row backgrounds */ .fleet-grid-row-ne:nth-child(even) { background: #f7fafc; } /* Hover effects */ .fleet-row-fjord-ne:hover, .fleet-row-viking-ne:hover, .fleet-row-msc-ne:hover, .fleet-row-po-ne:hover, .fleet-row-cunard-ne:hover, .fleet-row-aida-ne:hover, .fleet-row-costa-ne:hover, .fleet-row-fred-ne:hover, .fleet-row-silver-ne:hover, .fleet-row-hal-ne:hover { background: rgba(127,179,232,0.08); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Columns */ .fleet-col-ne { padding: 4px 8px; } /* Fleet Bars Visual */ .northern-europe-fleet-bars { margin-top: 40px; padding: 26px 24px 20px; border-radius: 14px; background: #e3edf7; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .northern-europe-fleet-bars-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #102a43; } /* TWO-COLUMN BAR LAYOUT */ .fleet-bars-row-ne { display: grid; grid-template-columns: 190px 1fr; column-gap: 20px; margin-bottom: 24px; } /* Left column — ship name */ .fleet-bars-col-left-ne { font-size: 1rem; font-weight: 700; color: #102a43; display: flex; align-items: center; } /* Right column — bar + paragraph */ .fleet-bars-col-right-ne { display: flex; flex-direction: column; gap: 10px; } /* Bar */ .fleet-bar-ne { height: 12px; border-radius: 999px; } /* Bar colours */ .fleet-bar-fjord-ne { width: 82%; background: linear-gradient(90deg, #4f8fb8, #7fb3e8); } .fleet-bar-viking-ne { width: 76%; background: linear-gradient(90deg, #7fb3e8, #bcd9f1); } .fleet-bar-msc-ne { width: 90%; background: linear-gradient(90deg, #5aa9c9, #9cc4e4); } .fleet-bar-po-ne { width: 70%; background: linear-gradient(90deg, #8fcfa8, #c7e6d4); } .fleet-bar-cunard-ne { width: 52%; background: linear-gradient(90deg, #c9b27a, #f2c76e); } .fleet-bar-aida-ne { width: 78%; background: linear-gradient(90deg, #7fb3e8, #bcd9f1); } .fleet-bar-costa-ne { width: 64%; background: linear-gradient(90deg, #9cc4e4, #c5d4e6); } .fleet-bar-fred-ne { width: 48%; background: linear-gradient(90deg, #6fa3c1, #bcd9f1); } .fleet-bar-silver-ne { width: 68%; background: linear-gradient(90deg, #bcd9f1, #e3edf7); } .fleet-bar-hal-ne { width: 72%; background: linear-gradient(90deg, #8fb0c9, #c5d4e6); } /* Paragraph under bar */ .fleet-bars-detail-ne { font-size: 0.95rem; line-height: 1.7; color: #1a1a1a; max-width: 780px; } /* Responsive */ @media (max-width: 700px) { .fleet-bars-row-ne { grid-template-columns: 1fr; } .fleet-bars-col-left-ne { margin-bottom: 6px; } } /* ========================================================= */ /* SECTION 16 — Northern Europe Port Logistics & Passenger Flow Guide */ /* ========================================================= */ .northern-europe-logistics-section { width: 100%; padding: 80px 0; background: #E8F2FB; /* Scandinavian Ice Blue */ color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-logistics-section.revealed { opacity: 1; transform: translateY(0); } .northern-europe-logistics-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-logistics-header { text-align: center; margin-bottom: 40px; } .northern-europe-logistics-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .northern-europe-logistics-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #7FB3E8, #8FCFA8, #F2C76E); } .northern-europe-logistics-intro { font-size: 1.1rem; line-height: 1.8; color: #1A1A1A; max-width: 850px; margin: 0 auto 12px; } /* Logistics Grid */ .northern-europe-logistics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; } .ne-logistics-card { border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); color: #FFFFFF; position: relative; overflow: hidden; } .ne-logistics-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; } .ne-logistics-card-text { font-size: 0.98rem; line-height: 1.7; margin-bottom: 14px; } /* Card gradients — Northern Europe palette */ .ne-logistics-card-embarkation { background: linear-gradient(135deg, #4F8FB8, #7FB3E8); } .ne-logistics-card-disembarkation { background: linear-gradient(135deg, #8FCFA8, #A8E4C4); } .ne-logistics-card-transfers { background: linear-gradient(135deg, #F2C76E, #F7DFA3); } /* List inside cards */ .ne-logistics-list { list-style: none; margin: 0; padding: 0; } .ne-logistics-list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.95rem; } .ne-logistics-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Reveal animation for cards */ .ne-logistics-card.region-reveal-ne { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-logistics-card.region-reveal-ne.visible-ne { opacity: 1; transform: translateY(0); } /* Comparison strip */ .ne-logistics-compare { margin-top: 40px; padding: 26px 24px; border-radius: 16px; background: #F0F6FC; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .ne-logistics-compare-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #102A43; } .ne-logistics-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ne-logistics-compare-item { background: #FFFFFF; border-radius: 12px; padding: 16px 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); font-size: 0.96rem; line-height: 1.7; color: #1A1A1A; } .ne-logistics-compare-item h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } /* Comparison accents */ .ne-compare-baltic { border-left: 4px solid #7FB3E8; } .ne-compare-fjords { border-left: 4px solid #8FCFA8; } .ne-compare-iceland { border-left: 4px solid #F2C76E; } /* Tips section */ .ne-logistics-tips { margin-top: 40px; } .ne-logistics-tips-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #102A43; } .ne-logistics-tips-list { list-style: none; margin: 0; padding: 0; } .ne-logistics-tips-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.98rem; color: #1A1A1A; } .ne-logistics-tips-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Responsive */ @media (max-width: 1100px) { .northern-europe-logistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ne-logistics-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .northern-europe-logistics-grid { grid-template-columns: 1fr; } .ne-logistics-compare-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 17 — Northern Europe Cruise Lines Overview Grid */ /* ========================================================= */ .northern-europe-cruise-lines-overview { width: 100%; padding: 90px 0; background: #E8F2FB; color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .northern-europe-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-cruise-lines-header { text-align: center; margin-bottom: 60px; } .northern-europe-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } .northern-europe-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #7FB3E8, #8FCFA8, #F2C76E); } .northern-europe-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #1A1A1A; max-width: 850px; margin: 0 auto; } /* Grid */ .northern-europe-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .ne-cruise-line-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-cruise-line-card.visible-ne { opacity: 1; transform: translateY(0); } /* Top border accent */ .ne-cruise-line-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .ne-card-fjord::before { background: #4F8FB8; } .ne-card-viking::before { background: #7FB3E8; } .ne-card-msc::before { background: #5AA9C9; } .ne-card-po::before { background: #8FCFA8; } .ne-card-cunard::before { background: #C9B27A; } .ne-card-aida::before { background: #7FB3E8; } .ne-card-costa::before { background: #9CC4E4; } .ne-card-fred::before { background: #6FA3C1; } .ne-card-silver::before { background: #BCD9F1; } .ne-card-hal::before { background: #8FB0C9; } .ne-card-saga::before { background: #A8C8E8; } .ne-card-ponant::before { background: #DCEAF5; } /* Icon */ .ne-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .ne-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 12px; } /* Summary */ .ne-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #1A1A1A; margin-bottom: 18px; } /* Points */ .ne-cruise-line-points { list-style: none; padding: 0; margin: 0; } .ne-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .ne-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #7FB3E8; font-size: 0.9rem; } /* Hover */ .ne-card-fjord:hover, .ne-card-viking:hover, .ne-card-msc:hover, .ne-card-po:hover, .ne-card-cunard:hover, .ne-card-aida:hover, .ne-card-costa:hover, .ne-card-fred:hover, .ne-card-silver:hover, .ne-card-hal:hover, .ne-card-saga:hover, .ne-card-ponant:hover { background: rgba(127, 179, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .northern-europe-cruise-lines-title { font-size: 2.2rem; } .northern-europe-cruise-lines-intro { font-size: 1.1rem; } .ne-cruise-line-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — Northern Europe Ship Types Overview */ /* ========================================================= */ .northern-europe-ship-types-overview { width: 100%; padding: 90px 0; background: #E8F2FB; color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .northern-europe-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-ship-types-header { text-align: center; margin-bottom: 60px; } .northern-europe-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } .northern-europe-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #7FB3E8, #8FCFA8, #F2C76E); } .northern-europe-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #1A1A1A; max-width: 850px; margin: 0 auto; } /* Grid */ .northern-europe-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .ne-ship-type-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-ship-type-card.visible-ne { opacity: 1; transform: translateY(0); } /* Top border accent */ .ne-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Northern Europe colour palette */ .ne-card-coastal::before { background: #4F8FB8; } .ne-card-fjord::before { background: #7FB3E8; } .ne-card-baltic::before { background: #5AA9C9; } .ne-card-arctic::before { background: #8FCFA8; } .ne-card-ice::before { background: #F2C76E; } .ne-card-lux::before { background: #C9B27A; } .ne-card-uk::before { background: #6FA3C1; } .ne-card-german::before { background: #7FB3E8; } .ne-card-int::before { background: #9CC4E4; } .ne-card-brit::before { background: #8FB0C9; } .ne-card-repo::before { background: #A8C8E8; } .ne-card-northsea::before { background: #BCD9F1; } /* Icon */ .ne-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .ne-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 12px; } /* Summary */ .ne-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #1A1A1A; margin-bottom: 18px; } /* Points */ .ne-ship-type-points { list-style: none; padding: 0; margin: 0; } .ne-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .ne-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #7FB3E8; font-size: 0.9rem; } /* Hover */ .ne-card-coastal:hover, .ne-card-fjord:hover, .ne-card-baltic:hover, .ne-card-arctic:hover, .ne-card-ice:hover, .ne-card-lux:hover, .ne-card-uk:hover, .ne-card-german:hover, .ne-card-int:hover, .ne-card-brit:hover, .ne-card-repo:hover, .ne-card-northsea:hover { background: rgba(127, 179, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .northern-europe-ship-types-title { font-size: 2.2rem; } .northern-europe-ship-types-intro { font-size: 1.1rem; } .ne-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — Northern Europe Cruise Duration Overview */ /* ========================================================= */ .northern-europe-cruise-duration-overview { width: 100%; padding: 90px 0; background: #E8F2FB; color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .northern-europe-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-cruise-duration-header { text-align: center; margin-bottom: 60px; } .northern-europe-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } .northern-europe-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #7FB3E8, #8FCFA8, #F2C76E); } .northern-europe-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #1A1A1A; max-width: 850px; margin: 0 auto; } /* Grid */ .northern-europe-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .ne-cruise-duration-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-cruise-duration-card.visible-ne { opacity: 1; transform: translateY(0); } /* Top border accent */ .ne-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Northern Europe colour palette */ .ne-card-short::before { background: #7FB3E8; } .ne-card-medium::before { background: #8FCFA8; } .ne-card-extended::before { background: #5AA9C9; } .ne-card-grand::before { background: #C9B27A; } .ne-card-repo::before { background: #F2C76E; } .ne-card-expedition::before{ background: #BCD9F1; } .ne-card-ultra::before { background: #9CC4E4; } .ne-card-sampler::before { background: #6FA3C1; } /* Icon */ .ne-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .ne-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 12px; } /* Summary */ .ne-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #1A1A1A; margin-bottom: 18px; } /* Points */ .ne-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .ne-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .ne-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #7FB3E8; font-size: 0.9rem; } /* Hover */ .ne-card-short:hover, .ne-card-medium:hover, .ne-card-extended:hover, .ne-card-grand:hover, .ne-card-repo:hover, .ne-card-expedition:hover, .ne-card-ultra:hover, .ne-card-sampler:hover { background: rgba(127, 179, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .northern-europe-cruise-duration-title { font-size: 2.2rem; } .northern-europe-cruise-duration-intro { font-size: 1.1rem; } .ne-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 20 — Northern Europe Cruise Price Range Overview */ /* ========================================================= */ .northern-europe-cruise-price-overview { width: 100%; padding: 90px 0; background: #E8F2FB; /* Scandinavian Ice Blue */ color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .northern-europe-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .northern-europe-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .northern-europe-cruise-price-header { text-align: center; margin-bottom: 60px; } .northern-europe-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } .northern-europe-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #7FB3E8, #8FCFA8, #F2C76E, #A8C8E8); } .northern-europe-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #1A1A1A; max-width: 850px; margin: 0 auto; } /* Grid */ .northern-europe-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .ne-cruise-price-card { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-cruise-price-card.visible-ne { opacity: 1; transform: translateY(0); } /* Top border glow */ .ne-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* 12‑colour Northern Europe palette */ .ne-card-glacier::before { background: #BCD9F1; } .ne-card-fjord::before { background: #7FB3E8; } .ne-card-ice::before { background: #9CC4E4; } .ne-card-lux::before { background: #C9B27A; } .ne-card-repo::before { background: #F2C76E; } .ne-card-arctic::before { background: #8FCFA8; } .ne-card-northsea::before { background: #A8C8E8; } .ne-card-sampler::before { background: #6FA3C1; } .ne-card-packages::before { background: #8FB0C9; } .ne-card-promo::before { background: #7FB3E8; } .ne-card-upgrades::before { background: #D2DCE8; } .ne-card-family::before { background: #B7C9E2; } /* Icon + Titles */ .ne-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .ne-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 18px; } /* Layer Titles */ .ne-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .ne-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #1A1A1A; margin-bottom: 10px; } .ne-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .ne-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .ne-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .ne-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #7FB3E8; font-size: 0.9rem; } /* Premium hover effects */ .ne-card-glacier:hover, .ne-card-fjord:hover, .ne-card-ice:hover, .ne-card-lux:hover, .ne-card-repo:hover, .ne-card-arctic:hover, .ne-card-northsea:hover, .ne-card-sampler:hover, .ne-card-packages:hover, .ne-card-promo:hover, .ne-card-upgrades:hover, .ne-card-family:hover { background: rgba(127, 179, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .northern-europe-cruise-price-title { font-size: 2.2rem; } .northern-europe-cruise-price-intro { font-size: 1.1rem; } .ne-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 21 — Northern Europe Cruise Best Value Tips */ /* ========================================================= */ .ne-section-21 { padding: 80px 0; background: #E7F0FA; /* Nordic Pale Ice Blue */ } .ne-section-21-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #12324A; /* Deep Fjord Navy */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE — ALWAYS VISIBLE (MATCHES TEMPLATE) */ .ne-value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .ne-value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .ne-value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR NORTHERN EUROPE PALETTE */ /* ========================================================= */ .ne-card-21-1 { background: linear-gradient(135deg, #7FB3E8, #5A8CC2); } .ne-card-21-2 { background: linear-gradient(135deg, #6FAF7A, #4F8C5F); } .ne-card-21-3 { background: linear-gradient(135deg, #A6C4E1, #7FA7C4); } .ne-card-21-4 { background: linear-gradient(135deg, #8FB0C9, #5A7F99); } .ne-card-21-5 { background: linear-gradient(135deg, #B4D1E6, #8FBAD1); } .ne-card-21-6 { background: linear-gradient(135deg, #4A6273, #2F3E4A); } .ne-card-21-7 { background: linear-gradient(135deg, #D9C27A, #B89F4F); } .ne-card-21-8 { background: linear-gradient(135deg, #A8C8E8, #7FA7C4); } .ne-card-21-9 { background: linear-gradient(135deg, #7FA3C1, #5A7F99); } .ne-card-21-10 { background: linear-gradient(135deg, #C4D9E8, #9FBAC9); } .ne-card-21-11 { background: linear-gradient(135deg, #8FCFA8, #5FAF7A); } .ne-card-21-12 { background: linear-gradient(135deg, #B7C9E2, #8FA7C4); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .ne-hover-21:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION REVEAL — MATCHES TEMPLATE EXACTLY */ /* ========================================================= */ .ne-section-21.region-reveal-ne { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-section-21.region-reveal-ne.region-reveal-active { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* CARD REVEAL — TEMPLATE DOES NOT USE THIS */ /* (Neutralised to avoid hiding cards) */ /* ========================================================= */ .ne-card-21-revealed { } /* Hover micro‑interaction class */ .ne-card-21-hovered { transform: translateY(-8px); } /* ========================================================= */ /* SECTION 22 — Northern Europe Cultural Immersion (CSS) */ /* ========================================================= */ .ne-section-22 { padding: 80px 0; background: #EEF4FA; /* Nordic Mist Blue */ } .ne-section-22-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .ne-immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .ne-immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .ne-immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR NORTHERN EUROPE PALETTE */ /* ========================================================= */ /* Inspired by fjords, Baltic coasts, Nordic forests, Arctic skies */ .ne-card-22-1 { background: linear-gradient(135deg, #6FA7D9, #4F7FB3); } /* Fjord Blue */ .ne-card-22-2 { background: linear-gradient(135deg, #7FB38A, #5A8C63); } /* Nordic Forest Green */ .ne-card-22-3 { background: linear-gradient(135deg, #C9A46F, #A8844F); } /* Baltic Amber */ .ne-card-22-4 { background: linear-gradient(135deg, #8FAEC4, #5A7F99); } /* Copenhagen Steel Blue */ .ne-card-22-5 { background: linear-gradient(135deg, #A8C8E8, #7FA7C4); } /* Glacier Blue */ .ne-card-22-6 { background: linear-gradient(135deg, #4A6273, #2F3E4A); } /* Arctic Night */ .ne-card-22-7 { background: linear-gradient(135deg, #D9C27A, #B89F4F); } /* Nordic Gold */ .ne-card-22-8 { background: linear-gradient(135deg, #B4D1E6, #8FBAD1); } /* Scandinavian Sky */ .ne-card-22-9 { background: linear-gradient(135deg, #7FA3C1, #5A7F99); } /* North Sea Blue */ .ne-card-22-10 { background: linear-gradient(135deg, #C4D9E8, #9FBAC9); } /* Iceland Ice Grey */ .ne-card-22-11 { background: linear-gradient(135deg, #8FCFA8, #5FAF7A); } /* Baltic Forest Green */ .ne-card-22-12 { background: linear-gradient(135deg, #B7C9E2, #8FA7C4); } /* Oslo Cloud Blue */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .ne-hover-22:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION REVEAL — TEMPLATE EXACT BEHAVIOUR */ /* ========================================================= */ .ne-section-22.region-reveal-ne { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-section-22.region-reveal-ne.region-reveal-active { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* CARD REVEAL — NEUTRAL (TEMPLATE DOES NOT USE IT) */ /* ========================================================= */ .ne-card-22-revealed { } /* Hover micro‑interaction class */ .ne-card-22-hovered { transform: translateY(-8px); } /* ========================================================= */ /* SECTION 23 — Northern Europe Wildlife & Nature (CSS) */ /* ========================================================= */ .ne-section-23 { padding: 80px 0; background: #F4F8FC; /* Light Nordic Mist */ } .ne-section-23-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy (allowed: not heavy, not near-black) */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ne-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ne-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; /* Dark text rule */ } .ne-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; /* Dark text rule */ opacity: 0.95; } /* IMAGE BLOCK */ .ne-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTHERN EUROPE SECTION 23 */ .ne-wildlife-image { transition: transform 0.35s ease; } .ne-wildlife-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTHERN EUROPE WILDLIFE */ /* (Descriptive filenames — Option B) */ /* ========================================================= */ .ne-img-puffins { background-image: url('../cruise-images/cruise-region-subpages-images/ne-puffins.webp'); } .ne-img-fjord-seals { background-image: url('../cruise-images/cruise-region-subpages-images/ne-fjord-seals.webp'); } .ne-img-iceland-waterfalls { background-image: url('../cruise-images/cruise-region-subpages-images/ne-iceland-waterfalls.webp'); } .ne-img-baltic-forest { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-forest.webp'); } .ne-img-arctic-fox { background-image: url('../cruise-images/cruise-region-subpages-images/ne-arctic-fox.webp'); } .ne-img-fjord-hiking { background-image: url('../cruise-images/cruise-region-subpages-images/ne-fjord-hiking.webp'); } .ne-img-baltic-coast { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-coast.webp'); } .ne-img-reindeer { background-image: url('../cruise-images/cruise-region-subpages-images/ne-reindeer.webp'); } .ne-img-glacier-lagoon { background-image: url('../cruise-images/cruise-region-subpages-images/ne-glacier-lagoon.webp'); } .ne-img-whale-watching { background-image: url('../cruise-images/cruise-region-subpages-images/ne-whale-watching.webp'); } .ne-img-arctic-birdlife { background-image: url('../cruise-images/cruise-region-subpages-images/ne-arctic-birdlife.webp'); } .ne-img-nature-photography-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nature-photography.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTHERN EUROPE GRADIENT PALETTE */ /* (Bright, clean, no dark tones — perfect for daylight) */ /* ========================================================= */ .ne-card-23-1 { background: linear-gradient(135deg, #CDE7F6, #A8D2EB); } /* Arctic Sky Blue */ .ne-card-23-2 { background: linear-gradient(135deg, #D4F0F2, #B3E3E6); } /* Fjord Mist Aqua */ .ne-card-23-3 { background: linear-gradient(135deg, #E8F4D9, #D3E8C2); } /* Iceland Meadow Green */ .ne-card-23-4 { background: linear-gradient(135deg, #F6EBD2, #EBD7B8); } /* Baltic Sandstone */ .ne-card-23-5 { background: linear-gradient(135deg, #E3F2FD, #C9E4F7); } /* Nordic Glacier Blue */ .ne-card-23-6 { background: linear-gradient(135deg, #F7F3D9, #EDE7C2); } /* Scandinavian Pale Gold */ .ne-card-23-7 { background: linear-gradient(135deg, #D9F0E2, #BEE4CE); } /* Coastal Mint Green */ .ne-card-23-8 { background: linear-gradient(135deg, #E8F7FA, #CDECF2); } /* Baltic Breeze Blue */ .ne-card-23-9 { background: linear-gradient(135deg, #F2E8D9, #E6D7C4); } /* Nordic Driftwood */ .ne-card-23-10 { background: linear-gradient(135deg, #DCEAF7, #C2D8EB); } /* Arctic Ice Blue */ .ne-card-23-11 { background: linear-gradient(135deg, #E7F4E8, #D1E8D2); } /* Tundra Moss Green */ .ne-card-23-12 { background: linear-gradient(135deg, #F9F1E4, #EEDDCB); } /* Scandinavian Cream */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .ne-hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION REVEAL — TEMPLATE EXACT BEHAVIOUR */ /* ========================================================= */ .ne-section-23.region-reveal-ne { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-section-23.region-reveal-ne.region-reveal-active { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* CARD REVEAL — NEUTRAL (TEMPLATE DOES NOT USE IT) */ /* ========================================================= */ .ne-card-23-revealed { } /* Hover micro‑interaction class */ .ne-card-23-hovered { transform: translateY(-8px); } /* ========================================================= */ /* SECTION 24 — Northern Europe Cultural Experiences (CSS) */ /* ========================================================= */ .ne-section-24 { padding: 80px 0; background: #F5F8FC; /* Light Nordic Mist */ } .ne-section-24-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy (allowed: not heavy, not near-black) */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ne-culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ne-culture-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; /* Dark text rule */ } .ne-culture-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; /* Dark text rule */ opacity: 0.95; } /* IMAGE BLOCK */ .ne-culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTHERN EUROPE SECTION 24 */ .ne-culture-image { transition: transform 0.35s ease; } .ne-culture-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTHERN EUROPE CULTURAL */ /* ========================================================= */ .ne-img-nordic-ceremony { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-ceremony.webp'); } .ne-img-baltic-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-handicrafts.webp'); } .ne-img-nordic-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-street-food.webp'); } .ne-img-nordic-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-architecture.webp'); } .ne-img-nordic-performances { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-performances.webp'); } .ne-img-nordic-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-festivals.webp'); } .ne-img-nordic-markets { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-markets.webp'); } .ne-img-traditional-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/ne-traditional-clothing.webp'); } .ne-img-nordic-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-workshops.webp'); } .ne-img-nordic-landmarks { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-landmarks.webp'); } .ne-img-nordic-villages { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-villages.webp'); } .ne-img-nordic-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-storytelling.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTHERN EUROPE GRADIENT PALETTE */ /* (Bright, clean, no dark tones — perfect for daylight) */ /* ========================================================= */ .ne-card-24-1 { background: linear-gradient(135deg, #E3F2FD, #C9E4F7); } /* Nordic Glacier Blue */ .ne-card-24-2 { background: linear-gradient(135deg, #E8F4D9, #D3E8C2); } /* Baltic Meadow Green */ .ne-card-24-3 { background: linear-gradient(135deg, #F6EBD2, #EBD7B8); } /* Scandinavian Sandstone */ .ne-card-24-4 { background: linear-gradient(135deg, #DCEAF7, #C2D8EB); } /* Arctic Ice Blue */ .ne-card-24-5 { background: linear-gradient(135deg, #F8DCE3, #F2B8C8); } /* Nordic Rose Mist */ .ne-card-24-6 { background: linear-gradient(135deg, #FFF4D9, #F9E9B8); } /* Midsummer Gold */ .ne-card-24-7 { background: linear-gradient(135deg, #E8F7FA, #CDECF2); } /* Baltic Breeze Blue */ .ne-card-24-8 { background: linear-gradient(135deg, #E7F4E8, #D1E8D2); } /* Tundra Moss Green */ .ne-card-24-9 { background: linear-gradient(135deg, #F9F1E4, #EEDDCB); } /* Scandinavian Cream */ .ne-card-24-10 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } /* Nordic Cloud Blue */ .ne-card-24-11 { background: linear-gradient(135deg, #F2E8D9, #E6D7C4); } /* Driftwood Beige */ .ne-card-24-12 { background: linear-gradient(135deg, #E3F7F5, #C8ECE8); } /* Coastal Aqua Mist */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .ne-hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION REVEAL — TEMPLATE EXACT BEHAVIOUR */ /* ========================================================= */ .ne-section-24.region-reveal-ne { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-section-24.region-reveal-ne.region-reveal-active { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* CARD REVEAL — NEUTRAL (TEMPLATE DOES NOT USE IT) */ /* ========================================================= */ .ne-card-24-revealed { } /* Hover micro‑interaction class */ .ne-card-24-hovered { transform: translateY(-8px); } /* ========================================================= */ /* SECTION 25 — Northern Europe Festivals & Seasonal Events */ /* ========================================================= */ .ne-section-25 { padding: 80px 0; background: #F5F8FC; /* Light Nordic Mist */ } .ne-section-25-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy (allowed: not heavy, not near-black) */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ne-festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ne-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; /* Dark text rule */ } .ne-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; /* Dark text rule */ opacity: 0.95; } /* IMAGE BLOCK */ .ne-festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTHERN EUROPE SECTION 25 */ .ne-festival-image { transition: transform 0.35s ease; } .ne-festival-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTHERN EUROPE FESTIVALS */ /* ========================================================= */ .ne-img-midsummer { background-image: url('../cruise-images/cruise-region-subpages-images/ne-midsummer.webp'); } .ne-img-baltic-song-dance { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-song-dance.webp'); } .ne-img-nordic-music-festival { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-music-festival.webp'); } .ne-img-harvest-festival { background-image: url('../cruise-images/cruise-region-subpages-images/ne-harvest-festival.webp'); } .ne-img-coastal-harbour-festival { background-image: url('../cruise-images/cruise-region-subpages-images/ne-coastal-harbour-festival.webp'); } .ne-img-winter-lights { background-image: url('../cruise-images/cruise-region-subpages-images/ne-winter-lights.webp'); } .ne-img-community-park-day { background-image: url('../cruise-images/cruise-region-subpages-images/ne-community-park-day.webp'); } .ne-img-nordic-food-market { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-food-market.webp'); } .ne-img-holiday-coastal-town { background-image: url('../cruise-images/cruise-region-subpages-images/ne-holiday-coastal-town.webp'); } .ne-img-cultural-center-day { background-image: url('../cruise-images/cruise-region-subpages-images/ne-cultural-center-day.webp'); } .ne-img-floral-seasonal { background-image: url('../cruise-images/cruise-region-subpages-images/ne-floral-seasonal.webp'); } .ne-img-parade-routes-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-parade-routes-ne.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTHERN EUROPE GRADIENT PALETTE */ /* ========================================================= */ .ne-card-25-1 { background: linear-gradient(135deg, #E3F2FD, #C9E4F7); } /* Nordic Glacier Blue */ .ne-card-25-2 { background: linear-gradient(135deg, #E8F4D9, #D3E8C2); } /* Baltic Meadow Green */ .ne-card-25-3 { background: linear-gradient(135deg, #F6EBD2, #EBD7B8); } /* Scandinavian Sandstone */ .ne-card-25-4 { background: linear-gradient(135deg, #FFF4D9, #F9E9B8); } /* Midsummer Gold */ .ne-card-25-5 { background: linear-gradient(135deg, #E8F7FA, #CDECF2); } /* Baltic Breeze Blue */ .ne-card-25-6 { background: linear-gradient(135deg, #DCEAF7, #C2D8EB); } /* Arctic Ice Blue */ .ne-card-25-7 { background: linear-gradient(135deg, #E7F4E8, #D1E8D2); } /* Tundra Moss Green */ .ne-card-25-8 { background: linear-gradient(135deg, #F9F1E4, #EEDDCB); } /* Scandinavian Cream */ .ne-card-25-9 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } /* Nordic Cloud Blue */ .ne-card-25-10 { background: linear-gradient(135deg, #F2E8D9, #E6D7C4); } /* Driftwood Beige */ .ne-card-25-11 { background: linear-gradient(135deg, #F8DCE3, #F2B8C8); } /* Nordic Rose Mist */ .ne-card-25-12 { background: linear-gradient(135deg, #E3F7F5, #C8ECE8); } /* Coastal Aqua Mist */ /* ========================================================= */ /* HOVER EFFECTS */ /* ========================================================= */ .ne-hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION REVEAL */ /* ========================================================= */ .ne-section-25.region-reveal-ne { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-section-25.region-reveal-ne.region-reveal-active { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* CARD REVEAL — TEMPLATE NEUTRAL */ /* ========================================================= */ .ne-card-25-revealed { } .ne-card-25-hovered { transform: translateY(-8px); } /* ========================================================= */ /* SECTION 26 — Northern Europe Cruise Cuisine & Dining */ /* ========================================================= */ .ne-section-26 { padding: 80px 0; background: #F6FAFF; /* Light Arctic Mist */ } .ne-section-26-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy (allowed: not heavy, not near-black) */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ne-cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ne-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; /* Dark text rule */ } .ne-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; /* Dark text rule */ opacity: 0.95; } /* IMAGE BLOCK */ .ne-cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — NORTHERN EUROPE SECTION 26 */ .ne-cuisine-image { transition: transform 0.35s ease; } .ne-cuisine-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTHERN EUROPE CUISINE */ /* ========================================================= */ .ne-img-scandi-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/ne-scandi-seafood.webp'); } .ne-img-baltic-comfort { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-comfort.webp'); } .ne-img-nordic-breads { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-breads.webp'); } .ne-img-arctic-specialities { background-image: url('../cruise-images/cruise-region-subpages-images/ne-arctic-specialities.webp'); } .ne-img-nordic-soups { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-soups.webp'); } .ne-img-coastal-salads { background-image: url('../cruise-images/cruise-region-subpages-images/ne-coastal-salads.webp'); } .ne-img-nordic-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-desserts.webp'); } .ne-img-icelandic-dairy { background-image: url('../cruise-images/cruise-region-subpages-images/ne-icelandic-dairy.webp'); } .ne-img-baltic-fish { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-fish.webp'); } .ne-img-nordic-brunch { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-brunch.webp'); } .ne-img-modern-nordic-fusion { background-image: url('../cruise-images/cruise-region-subpages-images/ne-modern-nordic-fusion.webp'); } .ne-img-nordic-dessert-table { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-dessert-table.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTHERN EUROPE GRADIENT PALETTE */ /* ========================================================= */ .ne-card-26-1 { background: linear-gradient(135deg, #E3F2FD, #C9E4F7); } /* Nordic Glacier Blue */ .ne-card-26-2 { background: linear-gradient(135deg, #E8F4D9, #D3E8C2); } /* Baltic Meadow Green */ .ne-card-26-3 { background: linear-gradient(135deg, #F6EBD2, #EBD7B8); } /* Scandinavian Sandstone */ .ne-card-26-4 { background: linear-gradient(135deg, #DCEAF7, #C2D8EB); } /* Arctic Ice Blue */ .ne-card-26-5 { background: linear-gradient(135deg, #FFF4D9, #F9E9B8); } /* Midsummer Gold */ .ne-card-26-6 { background: linear-gradient(135deg, #E8F7FA, #CDECF2); } /* Baltic Breeze Blue */ .ne-card-26-7 { background: linear-gradient(135deg, #E7F4E8, #D1E8D2); } /* Tundra Moss Green */ .ne-card-26-8 { background: linear-gradient(135deg, #F9F1E4, #EEDDCB); } /* Scandinavian Cream */ .ne-card-26-9 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } /* Nordic Cloud Blue */ .ne-card-26-10 { background: linear-gradient(135deg, #F2E8D9, #E6D7C4); } /* Driftwood Beige */ .ne-card-26-11 { background: linear-gradient(135deg, #F8DCE3, #F2B8C8); } /* Nordic Rose Mist */ .ne-card-26-12 { background: linear-gradient(135deg, #E3F7F5, #C8ECE8); } /* Coastal Aqua Mist */ /* ========================================================= */ /* HOVER EFFECTS */ /* ========================================================= */ .ne-hover-26:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION REVEAL */ /* ========================================================= */ .ne-section-26.region-reveal-ne { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .ne-section-26.region-reveal-ne.region-reveal-active { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* CARD REVEAL — TEMPLATE NEUTRAL */ /* ========================================================= */ .ne-card-26-revealed { } .ne-card-26-hovered { transform: translateY(-8px); } /* ========================================================= */ /* SECTION 27 — Northern Europe Shore Excursions */ /* ========================================================= */ .ne-section-27 { padding: 80px 0; background: #F4F8FC; /* Light Nordic Sky */ } .ne-section-27-wrapper { max-width: 1300px; margin: 0 auto; } .ne-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy (allowed: not heavy, not near-black) */ } .ne-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 50px; } /* GRID */ .ne-excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ne-excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); padding: 0; border: none; } /* IMAGE BLOCK */ .ne-excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; position: relative; z-index: 10; } /* IMAGE ZOOM — NORTHERN EUROPE SECTION 27 */ .ne-excursion-image { transition: transform 0.35s ease; } .ne-excursion-image:hover { transform: scale(1.15); } /* TEXT */ .ne-excursion-card h3, .ne-excursion-card p { position: relative; z-index: 20; text-align: center; margin-left: 0; margin-right: 0; width: 100%; } .ne-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; /* Dark text rule */ } .ne-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; /* Dark text rule */ opacity: 0.95; } /* ========================================================= */ /* REVEAL */ /* ========================================================= */ .ne-section-27.region-reveal-active .ne-excursion-card.ne-card-27-revealed { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* BACKGROUND IMAGES — NORTHERN EUROPE EXCURSIONS */ /* ========================================================= */ .ne-img-old-town-tours { background-image: url('../cruise-images/cruise-region-subpages-images/ne-old-town-tours.webp'); } .ne-img-fjord-viewpoints { background-image: url('../cruise-images/cruise-region-subpages-images/ne-fjord-viewpoints.webp'); } .ne-img-baltic-coastal-walks { background-image: url('../cruise-images/cruise-region-subpages-images/ne-baltic-coastal-walks.webp'); } .ne-img-nordic-food-markets { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nordic-food-markets.webp'); } .ne-img-nature-trails-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-nature-trails.webp'); } .ne-img-cultural-workshops-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-cultural-workshops.webp'); } .ne-img-wildlife-encounters-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-wildlife-encounters.webp'); } .ne-img-harbour-cruises-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-harbour-cruises.webp'); } .ne-img-soft-adventure-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-soft-adventure.webp'); } .ne-img-historic-districts-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-historic-districts.webp'); } .ne-img-coastal-villages-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-coastal-villages.webp'); } .ne-img-premium-small-group-ne { background-image: url('../cruise-images/cruise-region-subpages-images/ne-premium-small-group.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM NORTHERN EUROPE GRADIENT PALETTE */ /* ========================================================= */ .ne-card-27-1 { background: linear-gradient(135deg, #E3F2FD, #C9E4F7); } /* Nordic Glacier Blue */ .ne-card-27-2 { background: linear-gradient(135deg, #E8F4D9, #D3E8C2); } /* Baltic Meadow Green */ .ne-card-27-3 { background: linear-gradient(135deg, #F6EBD2, #EBD7B8); } /* Scandinavian Sandstone */ .ne-card-27-4 { background: linear-gradient(135deg, #FFF4D9, #F9E9B8); } /* Midsummer Gold */ .ne-card-27-5 { background: linear-gradient(135deg, #E8F7FA, #CDECF2); } /* Baltic Breeze Blue */ .ne-card-27-6 { background: linear-gradient(135deg, #DCEAF7, #C2D8EB); } /* Arctic Ice Blue */ .ne-card-27-7 { background: linear-gradient(135deg, #E7F4E8, #D1E8D2); } /* Tundra Moss Green */ .ne-card-27-8 { background: linear-gradient(135deg, #F9F1E4, #EEDDCB); } /* Scandinavian Cream */ .ne-card-27-9 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } /* Nordic Cloud Blue */ .ne-card-27-10 { background: linear-gradient(135deg, #F2E8D9, #E6D7C4); } /* Driftwood Beige */ .ne-card-27-11 { background: linear-gradient(135deg, #F8DCE3, #F2B8C8); } /* Nordic Rose Mist */ .ne-card-27-12 { background: linear-gradient(135deg, #E3F7F5, #C8ECE8); } /* Coastal Aqua Mist */ /* ========================================================= */ /* HOVER EFFECTS */ /* ========================================================= */ .ne-hover-27:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ne-excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ne-excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ne-excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 28 — Northern Europe Cruise Transportation & Transfers */ /* ========================================================= */ .ne-section-28 { padding: 80px 0; background: #F4F8FC; /* Light Nordic Sky */ } .ne-transfers-inner { max-width: 1300px; margin: 0 auto; } .ne-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy */ } .ne-transfers-intro { font-size: 1.15rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 20px; } /* GRID */ .ne-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD BASE */ .ne-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .ne-transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #102a43; } .ne-transfer-card-text { font-size: 1rem; line-height: 1.55; color: #1a1a1a; margin-bottom: 16px; } .ne-transfer-card-note { font-size: 0.95rem; color: #1a1a1a; opacity: 0.9; } /* ========================================================= */ /* NEW NORTHERN EUROPE GRADIENTS — LIGHT–MEDIUM ONLY */ /* ========================================================= */ .ne-card-28-1 { background: linear-gradient(135deg, #DCEAF7, #C2D8EB); /* Arctic Ice Blue */ color: #fff; } .ne-card-28-2 { background: linear-gradient(135deg, #E3F2FD, #C9E4F7); /* Nordic Glacier Blue */ color: #fff; } .ne-card-28-3 { background: linear-gradient(135deg, #F6EBD2, #EBD7B8); /* Scandinavian Sandstone */ color: #fff; } .ne-card-28-4 { background: linear-gradient(135deg, #E8F7FA, #CDECF2); /* Baltic Breeze Blue */ color: #fff; } .ne-card-28-5 { background: linear-gradient(135deg, #E7F4E8, #D1E8D2); /* Tundra Moss Green */ color: #fff; } .ne-card-28-6 { background: linear-gradient(135deg, #F9F1E4, #EEDDCB); /* Scandinavian Cream */ color: #fff; } /* HOVER */ .ne-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .ne-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .ne-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 29 — Northern Europe Cruise FAQ (CSS) */ /* ========================================================= */ .ne-section-29 { padding: 80px 0; background: #F4F8FC; /* Light Nordic Sky */ } .ne-faq-inner { max-width: 1100px; margin: 0 auto; } .ne-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0F2F4A; /* Deep Nordic Navy */ } .ne-faq-intro { font-size: 1.15rem; text-align: center; color: #3A4A63; /* Baltic Slate */ margin-bottom: 40px; } /* Accordion Container */ .ne-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .ne-faq-item { background: #E9F2FB; /* Light–medium Nordic panel */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .ne-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #102a43; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .ne-faq-question:hover { background: #D7E6F7; } /* Arrow Icon */ .ne-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .ne-faq-item.active .ne-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .ne-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .ne-faq-answer p { font-size: 1rem; color: #1a1a1a; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .ne-faq-item.active .ne-faq-answer { max-height: 320px; } /* Responsive */ @media (max-width: 800px) { .ne-faq-title { font-size: 2rem; } .ne-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- SECTION 3 HERO BACKGROUND (South America hero image) --------------------------------------------- */ .page-cruise-subpage.south-america-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/south-america-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.south-america-subpage.cruise-lines-subpage .hero-region { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.south-america-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #e8b84f; /* Amazon Gold — South America primary text colour */ } /*--------------------------------------------- SECTION 4 — Overview (South America) ---------------------------------------------*/ .sa-section-overview { text-align: center; } .sa-section-title { font-size: 2rem; font-weight: 700; color: #D9480F; /* Tropical Sunrise — Deep Sunrise Orange */ margin-bottom: 20px; text-align: center; width: 100%; } .sa-section-intro { font-size: 1.15rem; line-height: 1.7; color: #B23A0E; /* Tropical Sunrise — Warm Sunset Amber */ max-width: 820px; margin: 0 auto 32px; } .sa-overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .sa-highlight-item { background: #FFE9C7; /* Tropical Sunrise — Soft Mango Cream */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #B23A0E; /* Warm Sunset Amber */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .sa-highlight-icon { color: #FF7F32; /* Tropical Sunrise — Bright Coral Orange */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (South America) --------------------------------------------- */ .sa-section-featured-cruise-lines { padding: 60px 0; background: #FFE9C7; /* Tropical Sunrise — Soft Mango Cream */ width: 100%; } .sa-section-featured-cruise-lines .sa-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .sa-section-featured-cruise-lines .sa-section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #D9480F; /* Deep Sunrise Orange */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .sa-section-featured-cruise-lines .sa-section-intro { font-size: 1.1rem; line-height: 1.6; color: #B23A0E; /* Warm Sunset Amber */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — 3×6 layout (18 cards) */ .sa-cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD BASE */ .sa-cruise-line-card { background: linear-gradient(180deg, #FFF4E6 0%, #FFFFFF 100%); /* Sunrise Cream → White */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .sa-cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sa-cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* INFO CARD BANNER */ .sa-info-banner { background: #FFD7A3; /* Tropical Sunrise — Soft Peach */ display: flex; align-items: center; justify-content: center; } .sa-info-icon { font-size: 3rem; color: #FF7F32; /* Bright Coral Orange */ } /* CRUISE LINE NAME */ .sa-cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #D9480F; /* Deep Sunrise Orange */ text-align: center; } /* DESCRIPTION */ .sa-cruise-line-description { font-size: 1rem; line-height: 1.6; color: #B23A0E; /* Warm Sunset Amber */ text-align: center; } /* TAGS */ .sa-cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .sa-tag { background: #FF7F32; /* Bright Coral Orange */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .sa-cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .sa-cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #D9480F; /* Deep Sunrise Orange */ display: flex; align-items: center; gap: 8px; } .sa-highlight-icon { color: #FF7F32; /* Bright Coral Orange */ font-weight: 700; } /* HOVER EFFECTS */ .sa-cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } /* HEADER UNDERLINE */ .sa-cruise-line-header { position: relative; } .sa-cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #FF7F32; /* Bright Coral Orange */ border-radius: 2px; } /* CTA BUTTON — PRIMARY */ .sa-cruise-line-link { display: block; width: 100%; text-align: center; background: #FF7F32; /* Bright Coral Orange */ color: #FFFFFF; font-weight: 700; padding: 12px 0; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 8px; transition: background 0.25s ease; } .sa-cruise-line-link:hover { background: #D9480F; /* Deep Sunrise Orange */ } /* CTA BUTTON — SECONDARY */ .sa-secondary-btn { display: block; width: 100%; text-align: center; background: #FFFFFF; color: #D9480F; /* Deep Sunrise Orange */ font-weight: 700; padding: 12px 0; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.03em; border: 2px solid #D9480F; margin-top: 10px; transition: background 0.25s ease, color 0.25s ease; } .sa-secondary-btn:hover { background: #D9480F; color: #FFFFFF; } /* ========================================================= */ /* SECTION 6 — Patagonia & Chilean Fjords Experience */ /* ========================================================= */ .sa-region-overview-1 { width: 100%; padding: 80px 0; background: #FFE9C7; /* Soft Mango Cream */ color: #B23A0E; /* Warm Sunset Amber */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-region-overview-1.revealed { opacity: 1; transform: translateY(0); } .sa-region-overview-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .sa-region-overview-header { text-align: center; margin-bottom: 40px; } .sa-region-overview-title { font-size: 2.4rem; font-weight: 700; color: #D9480F; /* Deep Sunrise Orange */ margin-bottom: 20px; } .sa-region-overview-intro { font-size: 1.15rem; line-height: 1.8; color: #5A3A28; /* Earthy Cocoa */ margin-bottom: 14px; } /* List layout */ .sa-region-overview-list { list-style: none; margin: 0; padding: 0; } .sa-region-overview-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #B23A0E; } /* Emoji icon */ .sa-region-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .sa-region-text { display: inline-block; } /* Country / region name styling */ .sa-region-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sa-region-magellan { color: #D9480F; } .sa-region-beagle { color: #FF7F32; } .sa-region-amalia { color: #00838F; } .sa-region-pia { color: #6A1B9A; } .sa-region-garibaldi { color: #2E7D32; } .sa-region-wildlife { color: #C62828; } .sa-region-andean { color: #4FA3B0; } .sa-region-scenic { color: #F57C00; } /* ========================================================= */ /* SECTION 7 — Brazil & Tropical Atlantic Experience */ /* ========================================================= */ .sa-region-overview-2 { width: 100%; padding: 80px 0; background: #FFF3E0; /* Warm Tropical Cream */ color: #D9480F; /* Deep Sunrise Orange */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-region-overview-2.revealed { opacity: 1; transform: translateY(0); } .sa-region-overview-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .sa-region-overview-header { text-align: center; margin-bottom: 40px; } .sa-region-overview-title { font-size: 2.4rem; font-weight: 700; color: #FF7F32; /* Bright Coral Orange */ margin-bottom: 20px; } .sa-region-overview-intro { font-size: 1.15rem; line-height: 1.8; color: #5A3A28; margin-bottom: 14px; } /* List layout */ .sa-region-overview-list { list-style: none; margin: 0; padding: 0; } .sa-region-overview-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #D9480F; } /* Emoji icon */ .sa-region-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .sa-region-text { display: inline-block; } /* Country / region name styling */ .sa-region-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sa-region-rio { color: #FF7F32; } .sa-region-bahia { color: #D9480F; } .sa-region-pernambuco { color: #00838F; } .sa-region-marajo { color: #6A1B9A; } .sa-region-ilhabela { color: #2E7D32; } .sa-region-wildlife { color: #C62828; } .sa-region-coastal { color: #4FA3B0; } .sa-region-scenic { color: #F57C00; } /* ========================================================= */ /* SECTION 8 — Argentina Pampas, Wine Country & Culture */ /* ========================================================= */ .sa-region-overview-3 { width: 100%; padding: 80px 0; background: #FFF8E6; /* Soft Golden Cream */ color: #B23A0E; /* Warm Sunset Amber */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-region-overview-3.revealed { opacity: 1; transform: translateY(0); } .sa-region-overview-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .sa-region-overview-header { text-align: center; margin-bottom: 40px; } .sa-region-overview-title { font-size: 2.4rem; font-weight: 700; color: #D9480F; /* Deep Sunrise Orange */ margin-bottom: 20px; } .sa-region-overview-intro { font-size: 1.15rem; line-height: 1.8; color: #5A3A28; /* Earthy Cocoa */ margin-bottom: 14px; } /* List layout */ .sa-region-overview-list { list-style: none; margin: 0; padding: 0; } .sa-region-overview-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #B23A0E; } /* Emoji icon */ .sa-region-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .sa-region-text { display: inline-block; } /* Country / region name styling */ .sa-region-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sa-region-buenosaires { color: #D9480F; } .sa-region-mendoza { color: #B23A0E; } .sa-region-patagonia { color: #00838F; } .sa-region-cordoba { color: #6A1B9A; } .sa-region-salta { color: #2E7D32; } .sa-region-wildlife { color: #C62828; } .sa-region-culture { color: #4FA3B0; } .sa-region-scenic { color: #F57C00; } /* ========================================================= */ /* SECTION 9 — South America Seasonal Cruise Guide */ /* ========================================================= */ .south-america-seasonal-guide-section { width: 100%; padding: 80px 0; background: #FFE4C4; /* Sunrise Mango Mist */ color: #0A4A6E; /* Andean Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-seasonal-guide-section.revealed { opacity: 1; transform: translateY(0); } .south-america-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .south-america-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .south-america-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #0A4A6E; /* Andean Deep Blue */ margin-bottom: 20px; } .south-america-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #2E3F35; /* Rainforest Slate */ margin-bottom: 14px; } /* List layout */ .south-america-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .south-america-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A4A6E; } /* Emoji icon */ .sa-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .sa-season-text { display: inline-block; } /* Season name styling */ .sa-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sa-season-patagonia { color: #0288D1; /* Patagonia Sky Blue */ } .sa-season-brazilcoast { color: #FF7A3D; /* Tropical Coral Orange */ } .sa-season-amazon { color: #1B5E20; /* Amazon Deep Green */ } .sa-season-winecountry { color: #F4B400; /* Sunset Gold */ } .sa-season-uruguay { color: #0097A7; /* Glacier Teal */ } .sa-season-wildlife { color: #2E7D32; /* Forest Green */ } .sa-season-heat { color: #C62828; /* Warm Andes Red */ } /* ========================================================= */ /* SECTION 10 — South America Best Cruise Months Chart */ /* ========================================================= */ .south-america-best-months-section { width: 100%; padding: 80px 0; background: #FFF1DC; /* Warm South America neutral backdrop */ color: #0A4A6E; /* Andean Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-best-months-section.revealed { opacity: 1; transform: translateY(0); } .south-america-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .south-america-best-months-header { text-align: center; margin-bottom: 40px; } .south-america-best-months-title { font-size: 2.4rem; font-weight: 700; color: #0A4A6E; margin-bottom: 20px; } .south-america-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #2E3F35; /* Rainforest Slate */ margin-bottom: 14px; } /* Chart container */ .south-america-months-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header (months row) */ .south-america-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #0A4A6E; margin-bottom: 12px; text-align: center; } .south-america-months-chart-header span { font-size: 0.85rem; } /* Chart label for each region */ .south-america-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #0A4A6E; } /* Chart rows (bars) */ .south-america-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles (South America‑specific classes) */ .sa-best { background: linear-gradient(135deg, #2E7D32, #F4B400); /* Forest Green to Sunset Gold */ border-radius: 4px; height: 18px; } .sa-good { background: linear-gradient(135deg, #0097A7, #0288D1); /* Glacier Teal to Sky Blue */ border-radius: 4px; height: 18px; } .sa-avoid { background: linear-gradient(135deg, #C62828, #FF7A3D); /* Warm Andes Red to Coral Orange */ border-radius: 4px; height: 18px; } /* Legend */ .south-america-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .south-america-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .south-america-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .south-america-best-months-list { list-style: none; margin: 0; padding: 0; } .south-america-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0A4A6E; } .sa-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sa-best-text { display: inline-block; } .sa-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks for labels */ .sa-best-patagonia { color: #0288D1; /* Patagonia Sky Blue */ } .sa-best-brazilcoast { color: #FF7A3D; /* Tropical Coral Orange */ } .sa-best-amazon { color: #1B5E20; /* Amazon Deep Green */ } .sa-best-winecountry { color: #F4B400; /* Sunset Gold */ } .sa-best-uruguay { color: #0097A7; /* Glacier Teal */ } .sa-best-scenic { color: #2E7D32; /* Forest Green Scenic */ } /* ========================================================= */ /* SECTION 11 — South America Cruise Tips & Planning Guide */ /* ========================================================= */ .south-america-tips-section { width: 100%; padding: 80px 0; background: #FFE9D6; /* Warm South America backdrop */ color: #0A4A6E; /* Andean Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-tips-section.revealed { opacity: 1; transform: translateY(0); } .south-america-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .south-america-tips-header { text-align: center; margin-bottom: 40px; } .south-america-tips-title { font-size: 2.4rem; font-weight: 700; color: #0A4A6E; margin-bottom: 20px; } .south-america-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #2E3F35; /* Rainforest Slate */ margin-bottom: 14px; } /* Icons Row */ .south-america-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #0A4A6E; } /* Gradient Divider */ .south-america-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0A4A6E, #FF7A3D, #2E7D32); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .south-america-tip-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .south-america-tip-card-icon { font-size: 1.8rem; margin-top: 4px; } .south-america-tip-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels (South America palette) */ .sa-tip-planning { color: #0A4A6E; } /* Andean Deep Blue */ .sa-tip-packing { color: #2E7D32; } /* Forest Green */ .sa-tip-docs { color: #6A1B9A; } /* Documentation Purple */ .sa-tip-weather { color: #0288D1; } /* Climate Sky Blue */ .sa-tip-port { color: #FF7A3D; } /* Coastal Coral Orange */ /* Do's & Don'ts */ .south-america-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .south-america-tips-dos, .south-america-tips-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .south-america-tips-dos h3, .south-america-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #0A4A6E; } .south-america-tips-dos ul, .south-america-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .south-america-insider-tips { margin-top: 40px; } .south-america-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #0A4A6E; } .south-america-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising (South America) */ /* ========================================================= */ .south-america-boutique-section { width: 100%; padding: 80px 0; background: #FFF3E3; /* Warm Andes Cream */ color: #0A4A6E; /* Andean Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-boutique-section.revealed { opacity: 1; transform: translateY(0); } .south-america-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .south-america-boutique-header { text-align: center; margin-bottom: 40px; } .south-america-boutique-title { font-size: 2.4rem; font-weight: 700; color: #0A4A6E; margin-bottom: 20px; } .south-america-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #2E3F35; /* Rainforest Slate */ margin-bottom: 14px; } /* Icon Row */ .south-america-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A4A6E; } /* Cards container */ .south-america-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .south-america-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .south-america-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants (South America palette) */ .sa-boutique-card-blue { background: linear-gradient(135deg, #0288D1, #4FC3F7); /* Patagonia Sky Blue */ } .sa-boutique-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); /* Amazon Forest Green */ } .sa-boutique-card-teal { background: linear-gradient(135deg, #0097A7, #4FC3F7); /* Glacier Teal */ } .sa-boutique-card-gold { background: linear-gradient(135deg, #F4B400, #F2C76E); /* Sunset Gold */ } .south-america-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .south-america-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .south-america-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .south-america-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #0A4A6E, #FF7A3D, #2E7D32, #F4B400); border-radius: 3px; margin: 40px 0; } /* List section */ .south-america-boutique-list-wrapper { margin-top: 10px; } .south-america-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A4A6E; } .south-america-boutique-list { list-style: none; margin: 0; padding: 0; } .south-america-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2E3F35; } .south-america-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .south-america-boutique-list-text { display: inline-block; } /* Colour labels */ .sa-boutique-label-blue { color: #0288D1; } .sa-boutique-label-green { color: #2E7D32; } .sa-boutique-label-teal { color: #0097A7; } .sa-boutique-label-gold { color: #F4B400; } /* Responsive */ @media (max-width: 900px) { .south-america-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — South America Port Profiles (Sub‑Page Edition) */ /* ========================================================= */ .south-america-port-section { width: 100%; padding: 80px 0; background: #FFF3E3; /* Warm Andes Cream */ color: #0A4A6E; /* Andean Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-port-section.revealed { opacity: 1; transform: translateY(0); } .south-america-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .south-america-port-header { text-align: center; margin-bottom: 40px; } .south-america-port-title { font-size: 2.4rem; font-weight: 700; color: #0A4A6E; margin-bottom: 20px; } .south-america-port-intro { font-size: 1.15rem; line-height: 1.8; color: #2E3F35; margin-bottom: 14px; } /* Icon Row */ .south-america-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0A4A6E; } /* Cards container */ .south-america-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .south-america-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .south-america-port-card-icon { font-size: 1.9rem; margin-top: 4px; } .south-america-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants (South America palette) */ .sa-port-card-blue { background: linear-gradient(135deg, #0288D1, #4FC3F7); } .sa-port-card-teal { background: linear-gradient(135deg, #0097A7, #4FC3F7); } .sa-port-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .sa-port-card-indigo { background: linear-gradient(135deg, #283593, #5C6BC0); } .sa-port-card-gold { background: linear-gradient(135deg, #F4B400, #F2C76E); } .sa-port-card-purple { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } .sa-port-card-coral { background: linear-gradient(135deg, #D84315, #FF7043); } .sa-port-card-amber { background: linear-gradient(135deg, #FF8F00, #FFB74D); } .south-america-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .south-america-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .south-america-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal animation for cards */ .south-america-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Divider */ .south-america-port-divider { height: 3px; width: 100%; background: linear-gradient( 90deg, #0288D1, #2E7D32, #283593, #0097A7, #F4B400 ); border-radius: 3px; margin: 40px 0; } /* List section */ .south-america-port-list-wrapper { margin-top: 10px; } .south-america-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0A4A6E; } .south-america-port-list { list-style: none; margin: 0; padding: 0; } .south-america-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #2E3F35; } .south-america-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .south-america-port-list-text { display: inline-block; } /* Colour labels */ .sa-port-label-indigo { color: #283593; } .sa-port-label-red { color: #C62828; } .sa-port-label-blue { color: #0288D1; } .sa-port-label-teal { color: #0097A7; } .sa-port-label-gold { color: #F4B400; } .sa-port-label-green { color: #2E7D32; } /* Responsive */ @media (max-width: 900px) { .south-america-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — South America Cruise Port Comparison Grid */ /* ========================================================= */ .south-america-port-compare-section { width: 100%; padding: 80px 0; background: #FFF4EA; /* Warm South America Sky */ color: #0A4A6E; /* Andean Deep Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-port-compare-section.revealed { opacity: 1; transform: translateY(0); } .south-america-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-port-compare-header { text-align: center; margin-bottom: 50px; } .south-america-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #0A4A6E; margin-bottom: 20px; } .south-america-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #2E3F35; max-width: 800px; margin: 0 auto; } /* Grid container */ .south-america-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row-sa { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header-sa { background: #FCEEDC; font-weight: 700; color: #0A4A6E; } /* Left colour accent */ .compare-grid-row-sa::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents (South America palette) */ .compare-row-blue-sa::before { background: #0288D1; } .compare-row-teal-sa::before { background: #0097A7; } .compare-row-green-sa::before { background: #2E7D32; } .compare-row-indigo-sa::before { background: #283593; } .compare-row-gold-sa::before { background: #F4B400; } .compare-row-purple-sa::before { background: #6A1B9A; } .compare-row-coral-sa::before { background: #D84315; } .compare-row-amber-sa::before { background: #FF8F00; } .compare-row-red-sa::before { background: #C62828; } /* Alternating row backgrounds */ .compare-grid-row-sa:nth-child(even) { background: #FFF9F2; } /* Hover effects */ .compare-row-blue-sa:hover, .compare-row-teal-sa:hover, .compare-row-green-sa:hover, .compare-row-indigo-sa:hover, .compare-row-gold-sa:hover, .compare-row-purple-sa:hover, .compare-row-coral-sa:hover, .compare-row-amber-sa:hover, .compare-row-red-sa:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-blue-sa:hover { background: rgba(2, 136, 209, 0.10); } .compare-row-teal-sa:hover { background: rgba(0, 151, 167, 0.10); } .compare-row-green-sa:hover { background: rgba(46, 125, 50, 0.10); } .compare-row-indigo-sa:hover { background: rgba(40, 53, 147, 0.10); } .compare-row-gold-sa:hover { background: rgba(244, 180, 0, 0.10); } .compare-row-purple-sa:hover { background: rgba(106, 27, 154, 0.10); } .compare-row-coral-sa:hover { background: rgba(216, 67, 21, 0.10); } .compare-row-amber-sa:hover { background: rgba(255, 143, 0, 0.10); } .compare-row-red-sa:hover { background: rgba(198, 40, 40, 0.10); } /* Reveal animation */ .compare-grid-row-sa.region-reveal-sa { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row-sa.region-reveal-sa.visible-sa { opacity: 1; transform: translateY(0); } /* Insights footer */ .south-america-port-compare-insights { margin-top: 40px; padding: 30px; background: #FFF0E0; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title-sa { font-size: 1.6rem; font-weight: 700; color: #0A4A6E; margin-bottom: 14px; } .compare-insights-text-sa { font-size: 1.1rem; line-height: 1.8; color: #2E3F35; } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row-sa { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header-sa { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row-sa { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header-sa { display: none; } .compare-col-sa { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — South America Embarkation vs Destination Ports */ /* ========================================================= */ .south-america-port-usage-section { padding: 80px 0; background: #FFF5EB; /* Light South America backdrop */ } .south-america-port-usage-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .south-america-port-usage-header { text-align: center; } .south-america-port-usage-title { font-size: 2.4rem; font-weight: 800; margin-bottom: 10px; color: #102A43; /* Dark readable text */ } .south-america-port-usage-intro { font-size: 1.15rem; color: #334E68; margin-bottom: 20px; } /* GRID */ .south-america-port-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .south-america-port-usage-card { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image-sa { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES */ .usage-image-embarkation-sa { background-image: url('../cruise-images/cruise-region-subpages-images/south-america-embarkation-ports.webp'); } .usage-image-destination-sa { background-image: url('../cruise-images/cruise-region-subpages-images/south-america-destination-ports.webp'); } .usage-image-debarkation-sa { background-image: url('../cruise-images/cruise-region-subpages-images/south-america-debarkation-ports.webp'); } /* TEXT */ .usage-card-body-sa { padding: 18px 20px 20px 20px; } .usage-card-title-sa { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; color: #102A43; } .usage-card-text-sa { font-size: 1rem; line-height: 1.6; margin-bottom: 12px; color: #334E68; } .usage-card-note-sa { font-size: 0.95rem; color: #334E68; } /* LIGHT–MEDIUM BACKGROUNDS (NO DARK GRADIENTS) */ .usage-card-embarkation-sa { background: linear-gradient(135deg, #FFE3C2, #FFD8A8); /* Tropical Sunrise light */ } .usage-card-destination-sa { background: linear-gradient(135deg, #E3F9E5, #C7F5D9); /* Amazon greens light */ } .usage-card-debarkation-sa { background: linear-gradient(135deg, #E0F4FF, #C8E9FF); /* Patagonia cool light */ } /* Ensure text contrast on gradients */ .usage-card-embarkation-sa .usage-card-title-sa, .usage-card-embarkation-sa .usage-card-text-sa, .usage-card-embarkation-sa .usage-card-note-sa, .usage-card-destination-sa .usage-card-title-sa, .usage-card-destination-sa .usage-card-text-sa, .usage-card-destination-sa .usage-card-note-sa, .usage-card-debarkation-sa .usage-card-title-sa, .usage-card-debarkation-sa .usage-card-text-sa, .usage-card-debarkation-sa .usage-card-note-sa { color: #102A43; } /* HOVER */ .south-america-port-usage-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.18); } /* Reveal classes */ .south-america-port-usage-card.region-reveal-sa { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-port-usage-card.region-reveal-sa.usage-card-revealed-sa { opacity: 1; transform: translateY(0); } /* RESPONSIVE */ @media (max-width: 1200px) { .south-america-port-usage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .south-america-port-usage-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — South America Cruise Line Fleet Size Comparison */ /* ========================================================= */ .south-america-fleet-section { width: 100%; padding: 80px 0; background: #f2f8f3; /* Light tropical green */ color: #1a2e1f; /* Deep jungle green */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-fleet-section.revealed { opacity: 1; transform: translateY(0); } .south-america-fleet-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-fleet-header { text-align: center; margin-bottom: 40px; } .south-america-fleet-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .south-america-fleet-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #4fae6f, #7cd4a3, #f2c76e); } .south-america-fleet-intro { font-size: 1.1rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto 12px; } /* Grid container */ .south-america-fleet-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); background: #ffffff; margin-top: 40px; } /* Grid rows */ .fleet-grid-row-sa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 16px 20px; font-size: 0.98rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; } /* Header row */ .fleet-grid-header-sa { background: #e8f4ea; font-weight: 700; color: #1a2e1f; } /* Reveal animation */ .fleet-grid-row-sa.region-reveal-sa { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .fleet-grid-row-sa.region-reveal-sa.visible-sa { opacity: 1; transform: translateY(0); } /* Left colour accent */ .fleet-grid-row-sa::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents — South America palette */ .fleet-row-msc-sa::before { background: #2e8b57; } /* Amazon green */ .fleet-row-costa-sa::before { background: #3fa7d6; } /* Atlantic blue */ .fleet-row-princess-sa::before { background: #f2c76e; } /* Golden Andes */ .fleet-row-hal-sa::before { background: #6b8e23; } /* Olive Patagonia */ .fleet-row-celebrity-sa::before { background: #7cd4a3; } /* Tropical mint */ .fleet-row-ncl-sa::before { background: #4fae6f; } /* Jungle green */ .fleet-row-rc-sa::before { background: #00a8e8; } /* Coastal aqua */ .fleet-row-azamara-sa::before { background: #8f6bb3; } /* Deep purple Andes */ .fleet-row-viking-sa::before { background: #5aa9c9; } /* Fjord blue */ .fleet-row-silversea-sa::before { background: #bcd9f1; } /* Silver glacier */ .fleet-row-seabourn-sa::before { background: #e3c07b; } /* Sunset gold */ .fleet-row-hurt-sa::before { background: #4f7f9c; } /* Patagonia steel blue */ .fleet-row-aqua-sa::before { background: #3c8d5a; } /* Amazon river green */ .fleet-row-australis-sa::before { background: #c49a6c; } /* Tierra del Fuego earth */ .fleet-grid-row-sa:nth-child(even) { background: #f7fafc; } /* Hover effects */ .fleet-row-msc-sa:hover, .fleet-row-costa-sa:hover, .fleet-row-princess-sa:hover, .fleet-row-hal-sa:hover, .fleet-row-celebrity-sa:hover, .fleet-row-ncl-sa:hover, .fleet-row-rc-sa:hover, .fleet-row-azamara-sa:hover, .fleet-row-viking-sa:hover, .fleet-row-silversea-sa:hover, .fleet-row-seabourn-sa:hover, .fleet-row-hurt-sa:hover, .fleet-row-aqua-sa:hover, .fleet-row-australis-sa:hover { background: rgba(79,174,111,0.08); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Columns */ .fleet-col-sa { padding: 4px 8px; } /* Fleet Bars Visual */ .south-america-fleet-bars { margin-top: 40px; padding: 26px 24px 20px; border-radius: 14px; background: #e8f4ea; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .south-america-fleet-bars-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #1a2e1f; } /* TWO-COLUMN BAR LAYOUT */ .fleet-bars-row-sa { display: grid; grid-template-columns: 190px 1fr; column-gap: 20px; margin-bottom: 24px; } /* Left column — ship name */ .fleet-bars-col-left-sa { font-size: 1rem; font-weight: 700; color: #1a2e1f; display: flex; align-items: center; } /* Right column — bar + paragraph */ .fleet-bars-col-right-sa { display: flex; flex-direction: column; gap: 10px; } /* Bar */ .fleet-bar-sa { height: 12px; border-radius: 999px; } /* Bar colours */ .fleet-bar-msc-sa { width: 90%; background: linear-gradient(90deg, #2e8b57, #4fae6f); } .fleet-bar-costa-sa { width: 70%; background: linear-gradient(90deg, #3fa7d6, #7cd4a3); } .fleet-bar-princess-sa { width: 76%; background: linear-gradient(90deg, #f2c76e, #f7e3b3); } .fleet-bar-hal-sa { width: 72%; background: linear-gradient(90deg, #6b8e23, #a3c46b); } .fleet-bar-celebrity-sa { width: 78%; background: linear-gradient(90deg, #7cd4a3, #b9e8cf); } .fleet-bar-ncl-sa { width: 82%; background: linear-gradient(90deg, #4fae6f, #7cd4a3); } .fleet-bar-rc-sa { width: 88%; background: linear-gradient(90deg, #00a8e8, #7cd4a3); } .fleet-bar-azamara-sa { width: 60%; background: linear-gradient(90deg, #8f6bb3, #c7b4e3); } .fleet-bar-viking-sa { width: 68%; background: linear-gradient(90deg, #5aa9c9, #bcd9f1); } .fleet-bar-silversea-sa { width: 64%; background: linear-gradient(90deg, #bcd9f1, #e3edf7); } .fleet-bar-seabourn-sa { width: 58%; background: linear-gradient(90deg, #e3c07b, #f7e3b3); } .fleet-bar-hurt-sa { width: 66%; background: linear-gradient(90deg, #4f7f9c, #bcd9f1); } .fleet-bar-aqua-sa { width: 52%; background: linear-gradient(90deg, #3c8d5a, #7cd4a3); } .fleet-bar-australis-sa { width: 48%; background: linear-gradient(90deg, #c49a6c, #e3c07b); } /* Paragraph under bar */ .fleet-bars-detail-sa { font-size: 0.95rem; line-height: 1.7; color: #1a1a1a; max-width: 780px; } /* Responsive */ @media (max-width: 700px) { .fleet-bars-row-sa { grid-template-columns: 1fr; } .fleet-bars-col-left-sa { margin-bottom: 6px; } } /* ========================================================= */ /* SECTION 16 — South America Port Logistics & Passenger Flow Guide */ /* ========================================================= */ .south-america-logistics-section { width: 100%; padding: 80px 0; background: #f2f8f3; /* Light tropical backdrop */ color: #163524; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-logistics-section.revealed { opacity: 1; transform: translateY(0); } .south-america-logistics-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-logistics-header { text-align: center; margin-bottom: 40px; } .south-america-logistics-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .south-america-logistics-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #2e8b57, #00a8e8, #f2c76e); } .south-america-logistics-intro { font-size: 1.1rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto 12px; } /* Logistics Grid */ .south-america-logistics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; } .sa-logistics-card { border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); color: #ffffff; position: relative; overflow: hidden; } .sa-logistics-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; } .sa-logistics-card-text { font-size: 0.98rem; line-height: 1.7; margin-bottom: 14px; } /* Card gradients — South America palette */ .sa-logistics-card-embarkation { background: linear-gradient(135deg, #2e8b57, #4fae6f); /* Amazon green */ } .sa-logistics-card-disembarkation { background: linear-gradient(135deg, #00a8e8, #5aa9c9); /* Coastal aqua */ } .sa-logistics-card-transfers { background: linear-gradient(135deg, #f2c76e, #ffb74d); /* Andes gold */ } /* List inside cards */ .sa-logistics-list { list-style: none; margin: 0; padding: 0; } .sa-logistics-list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.95rem; } .sa-logistics-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Reveal animation for cards */ .sa-logistics-card.region-reveal-sa { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-logistics-card.region-reveal-sa.visible-sa { opacity: 1; transform: translateY(0); } /* Comparison strip */ .sa-logistics-compare { margin-top: 40px; padding: 26px 24px; border-radius: 16px; background: #e8f4ea; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .sa-logistics-compare-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #163524; } .sa-logistics-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sa-logistics-compare-item { background: #ffffff; border-radius: 12px; padding: 16px 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); font-size: 0.96rem; line-height: 1.7; color: #2f3a45; } .sa-logistics-compare-item h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } /* Comparison accents */ .sa-compare-brazil { border-left: 4px solid #2e8b57; /* Brazil green */ } .sa-compare-argentina { border-left: 4px solid #00a8e8; /* Coastal blue */ } .sa-compare-chile { border-left: 4px solid #f2c76e; /* Andes gold */ } /* Tips section */ .sa-logistics-tips { margin-top: 40px; } .sa-logistics-tips-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #163524; } .sa-logistics-tips-list { list-style: none; margin: 0; padding: 0; } .sa-logistics-tips-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.98rem; color: #2f3a45; } .sa-logistics-tips-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Responsive */ @media (max-width: 1100px) { .south-america-logistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sa-logistics-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .south-america-logistics-grid { grid-template-columns: 1fr; } .sa-logistics-compare-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 17 — South America Cruise Lines Overview Grid */ /* ========================================================= */ .south-america-cruise-lines-overview { width: 100%; padding: 90px 0; background: #f2f8f3; /* Tropical soft backdrop */ color: #163524; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-cruise-lines-overview.revealed { opacity: 1; transform: translateY(0); } .south-america-cruise-lines-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-cruise-lines-header { text-align: center; margin-bottom: 60px; } .south-america-cruise-lines-title { font-size: 2.6rem; font-weight: 700; color: #163524; margin-bottom: 16px; } /* Cinematic gradient underline — South America palette */ .south-america-cruise-lines-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2e8b57, #00a8e8, #f2c76e); } .south-america-cruise-lines-intro { font-size: 1.2rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto; } /* Grid */ .south-america-cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .sa-cruise-line-card.sa17-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .sa-cruise-line-card.sa17-card.visible-sa { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) — South America palette */ .sa-cruise-line-card.sa17-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* Colour sets */ .sa-card-amazon::before { background: #2e8b57; } /* Amazon green */ .sa-card-coastal::before { background: #00a8e8; } /* Coastal aqua */ .sa-card-andes::before { background: #f2c76e; } /* Andes gold */ .sa-card-patagonia::before { background: #4f7f9c; } /* Patagonia steel blue */ .sa-card-tropical::before { background: #7cd4a3; } /* Tropical mint */ .sa-card-jungle::before { background: #3c8d5a; } /* Deep jungle green */ .sa-card-ocean::before { background: #5aa9c9; } /* South Atlantic blue */ .sa-card-purple-andes::before { background: #8f6bb3; } /* Andes purple */ .sa-card-fjord::before { background: #bcd9f1; } /* Fjord glacier blue */ .sa-card-silver-expedition::before { background: #e3edf7; } /* Expedition silver */ .sa-card-gold-lux::before { background: #e3c07b; } /* Luxury gold */ .sa-card-glacier::before { background: #4f7f9c; } /* Glacier steel */ .sa-card-river::before { background: #3c8d5a; } /* Amazon river green */ .sa-card-earth::before { background: #c49a6c; } /* Tierra del Fuego earth */ .sa-card-hanseatic::before { background: #5f7fa8; } /* Expedition steel blue */ .sa-card-ponant::before { background: #d4b48c; } /* Luxury French sand-gold */ /* Icon */ .sa-cruise-line-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sa-cruise-line-name { font-size: 1.4rem; font-weight: 700; color: #163524; margin-bottom: 12px; } /* Summary */ .sa-cruise-line-summary { font-size: 1.05rem; line-height: 1.7; color: #2f3a45; margin-bottom: 18px; } /* Points */ .sa-cruise-line-points { list-style: none; padding: 0; margin: 0; } .sa-cruise-line-points li { margin-bottom: 8px; font-size: 1rem; color: #163524; padding-left: 14px; position: relative; } .sa-cruise-line-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #2e8b57; font-size: 0.9rem; } /* Hover (premium glow) */ .sa-card-amazon:hover, .sa-card-coastal:hover, .sa-card-andes:hover, .sa-card-patagonia:hover, .sa-card-tropical:hover, .sa-card-jungle:hover, .sa-card-ocean:hover, .sa-card-purple-andes:hover, .sa-card-fjord:hover, .sa-card-silver-expedition:hover, .sa-card-gold-lux:hover, .sa-card-glacier:hover, .sa-card-river:hover, .sa-card-earth:hover, .sa-card-hanseatic:hover, .sa-card-ponant:hover { background: rgba(46, 139, 87, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .south-america-cruise-lines-title { font-size: 2.2rem; } .south-america-cruise-lines-intro { font-size: 1.1rem; } .sa-cruise-line-card.sa17-card { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — South America Ship Types Overview */ /* ========================================================= */ .south-america-ship-types-overview { width: 100%; padding: 90px 0; background: #f2f8f3; /* Tropical soft backdrop */ color: #163524; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-ship-types-overview.revealed { opacity: 1; transform: translateY(0); } .south-america-ship-types-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-ship-types-header { text-align: center; margin-bottom: 60px; } .south-america-ship-types-title { font-size: 2.6rem; font-weight: 700; color: #163524; margin-bottom: 16px; } /* Cinematic gradient underline — South America palette */ .south-america-ship-types-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2e8b57, #00a8e8, #f2c76e); } .south-america-ship-types-intro { font-size: 1.2rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto; } /* Grid */ .south-america-ship-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .sa-ship-type-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-ship-type-card.visible-sa { opacity: 1; transform: translateY(0); } /* Colour accents */ .sa-ship-type-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* South America colour palette */ .sa-card-amazon::before { background: #2e8b57; } /* Brazil coastal green */ .sa-card-patagonia::before { background: #4f7f9c; } /* Patagonia steel blue */ .sa-card-river::before { background: #3c8d5a; } /* Amazon river green */ .sa-card-gold-lux::before { background: #e3c07b; } /* Luxury gold */ .sa-card-tropical::before { background: #7cd4a3; } /* Tropical mint */ .sa-card-jungle::before { background: #3c8d5a; } /* Jungle green */ .sa-card-glacier::before { background: #e3edf7; } /* Glacier silver */ .sa-card-ocean::before { background: #5aa9c9; } /* South Atlantic blue */ .sa-card-earth::before { background: #c49a6c; } /* Tierra del Fuego earth */ .sa-card-riverlux::before { background: #7cd4a3; } /* Luxury river mint */ .sa-card-fjord::before { background: #bcd9f1; } /* Fjord glacier blue */ .sa-card-culture::before { background: #8f6bb3; } /* Andes cultural purple */ /* Icon */ .sa-ship-type-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sa-ship-type-name { font-size: 1.4rem; font-weight: 700; color: #163524; margin-bottom: 12px; } /* Summary */ .sa-ship-type-summary { font-size: 1.05rem; line-height: 1.7; color: #2f3a45; margin-bottom: 18px; } /* Points */ .sa-ship-type-points { list-style: none; padding: 0; margin: 0; } .sa-ship-type-points li { margin-bottom: 8px; font-size: 1rem; color: #163524; padding-left: 14px; position: relative; } .sa-ship-type-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #2e8b57; font-size: 0.9rem; } /* Hover */ .sa-card-amazon:hover, .sa-card-patagonia:hover, .sa-card-river:hover, .sa-card-gold-lux:hover, .sa-card-tropical:hover, .sa-card-jungle:hover, .sa-card-glacier:hover, .sa-card-ocean:hover, .sa-card-earth:hover, .sa-card-riverlux:hover, .sa-card-fjord:hover, .sa-card-culture:hover { background: rgba(46, 139, 87, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .south-america-ship-types-title { font-size: 2.2rem; } .south-america-ship-types-intro { font-size: 1.1rem; } .sa-ship-type-card { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — South America Cruise Duration Overview */ /* ========================================================= */ .south-america-cruise-duration-overview { width: 100%; padding: 90px 0; background: #f2f8f3; /* Tropical soft backdrop */ color: #163524; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-cruise-duration-overview.revealed { opacity: 1; transform: translateY(0); } .south-america-cruise-duration-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-cruise-duration-header { text-align: center; margin-bottom: 60px; } .south-america-cruise-duration-title { font-size: 2.6rem; font-weight: 700; color: #163524; margin-bottom: 16px; } /* Cinematic gradient underline — South America palette */ .south-america-cruise-duration-underline { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2e8b57, #00a8e8, #f2c76e); } .south-america-cruise-duration-intro { font-size: 1.2rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto; } /* Grid */ .south-america-cruise-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .sa-cruise-duration-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-cruise-duration-card.visible-sa { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .sa-cruise-duration-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* South America colour palette */ .sa-card-amazon::before { background: #2e8b57; } /* Brazil coastal green */ .sa-card-coastal::before { background: #00a8e8; } /* Coastal aqua */ .sa-card-patagonia::before { background: #4f7f9c; } /* Patagonia steel blue */ .sa-card-river::before { background: #3c8d5a; } /* Amazon river green */ .sa-card-andes::before { background: #f2c76e; } /* Andes gold */ .sa-card-gold-lux::before { background: #e3c07b; } /* Luxury gold */ .sa-card-glacier::before { background: #e3edf7; } /* Glacier silver */ .sa-card-ocean::before { background: #5aa9c9; } /* South Atlantic blue */ .sa-card-earth::before { background: #c49a6c; } /* Tierra del Fuego earth */ .sa-card-riverlux::before { background: #7cd4a3; } /* Luxury river mint */ .sa-card-fjord::before { background: #bcd9f1; } /* Fjord glacier blue */ .sa-card-culture::before { background: #8f6bb3; } /* Andes cultural purple */ /* Icon */ .sa-cruise-duration-icon { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sa-cruise-duration-name { font-size: 1.4rem; font-weight: 700; color: #163524; margin-bottom: 12px; } /* Summary */ .sa-cruise-duration-summary { font-size: 1.05rem; line-height: 1.7; color: #2f3a45; margin-bottom: 18px; } /* Points */ .sa-cruise-duration-points { list-style: none; padding: 0; margin: 0; } .sa-cruise-duration-points li { margin-bottom: 8px; font-size: 1rem; color: #163524; padding-left: 14px; position: relative; } .sa-cruise-duration-points li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #2e8b57; font-size: 0.9rem; } /* Hover (premium glow) */ .sa-card-amazon:hover, .sa-card-coastal:hover, .sa-card-patagonia:hover, .sa-card-river:hover, .sa-card-andes:hover, .sa-card-gold-lux:hover, .sa-card-glacier:hover, .sa-card-ocean:hover, .sa-card-earth:hover, .sa-card-riverlux:hover, .sa-card-fjord:hover, .sa-card-culture:hover { background: rgba(46, 139, 87, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .south-america-cruise-duration-title { font-size: 2.2rem; } .south-america-cruise-duration-intro { font-size: 1.1rem; } .sa-cruise-duration-card { padding: 24px; } } /* ========================================================= */ /* SECTION 20 — South America Cruise Price Range Overview */ /* ========================================================= */ .south-america-cruise-price-overview { width: 100%; padding: 90px 0; background: #f3faf4; /* Soft tropical mint backdrop */ color: #163524; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .south-america-cruise-price-overview.revealed { opacity: 1; transform: translateY(0); } .south-america-cruise-price-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .south-america-cruise-price-header { text-align: center; margin-bottom: 60px; } .south-america-cruise-price-title { font-size: 2.6rem; font-weight: 700; color: #163524; margin-bottom: 16px; } /* Cinematic gradient underline — South America palette */ .south-america-cruise-price-underline { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #2e8b57, #00a8e8, #f2c76e, #4f7f9c); } .south-america-cruise-price-intro { font-size: 1.2rem; line-height: 1.8; color: #1a1a1a; max-width: 850px; margin: 0 auto; } /* Grid */ .south-america-cruise-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .sa-cruise-price-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sa-cruise-price-card.visible-sa { opacity: 1; transform: translateY(0); } /* Top border glow */ .sa-cruise-price-card::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* 12‑colour South America palette */ .sa-card-amazon::before { background: #2e8b57; } /* Amazon green */ .sa-card-coastal::before { background: #00a8e8; } /* Coastal aqua */ .sa-card-patagonia::before { background: #4f7f9c; } /* Patagonia blue */ .sa-card-river::before { background: #3c8d5a; } /* River emerald */ .sa-card-andes::before { background: #f2c76e; } /* Andes gold */ .sa-card-gold-lux::before { background: #e3c07b; } /* Luxury gold */ .sa-card-glacier::before { background: #e3edf7; } /* Glacier silver */ .sa-card-ocean::before { background: #5aa9c9; } /* South Atlantic blue */ .sa-card-earth::before { background: #c49a6c; } /* Tierra del Fuego earth */ .sa-card-riverlux::before { background: #7cd4a3; } /* Tropical mint */ .sa-card-fjord::before { background: #bcd9f1; } /* Fjord glacier blue */ .sa-card-culture::before { background: #8f6bb3; } /* Cultural Andes purple */ /* Icon + Titles */ .sa-cruise-price-icon { font-size: 2.4rem; margin-bottom: 14px; } .sa-cruise-price-name { font-size: 1.4rem; font-weight: 700; color: #163524; margin-bottom: 18px; } /* Layer Titles */ .sa-cruise-price-layer-title { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .sa-cruise-price-layer-text { font-size: 1.05rem; line-height: 1.7; color: #2f3a45; margin-bottom: 10px; } .sa-cruise-price-layer-note { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .sa-cruise-price-cabins { list-style: none; padding: 0; margin: 0; } .sa-cruise-price-cabins li { margin-bottom: 8px; font-size: 1rem; color: #1F2A44; padding-left: 14px; position: relative; } .sa-cruise-price-cabins li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #2e8b57; font-size: 0.9rem; } /* Premium hover effects */ .sa-card-amazon:hover, .sa-card-coastal:hover, .sa-card-patagonia:hover, .sa-card-river:hover, .sa-card-andes:hover, .sa-card-gold-lux:hover, .sa-card-glacier:hover, .sa-card-ocean:hover, .sa-card-earth:hover, .sa-card-riverlux:hover, .sa-card-fjord:hover, .sa-card-culture:hover { background: rgba(46, 139, 87, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .south-america-cruise-price-title { font-size: 2.2rem; } .south-america-cruise-price-intro { font-size: 1.1rem; } .sa-cruise-price-card { padding: 24px; } } /* ========================================================= */ /* SECTION 21 — South America Cruise Best Value Tips */ /* ========================================================= */ .section-21-sa { padding: 80px 0; background: #F4FBF6; /* Soft tropical mint backdrop */ } .sa-section-21-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #163524; /* Deep Amazon forest green */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2f3a45; margin-bottom: 50px; } /* GRID */ .sa-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .sa-value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .sa-value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .sa-value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR SOUTH AMERICA PALETTE */ /* ========================================================= */ .sa-card-21-1 { background: linear-gradient(135deg, #2e8b57, #1f5f3c); } /* Amazon green */ .sa-card-21-2 { background: linear-gradient(135deg, #00a8e8, #007aa8); } /* Coastal aqua */ .sa-card-21-3 { background: linear-gradient(135deg, #4f7f9c, #355a6b); } /* Patagonia blue */ .sa-card-21-4 { background: linear-gradient(135deg, #3c8d5a, #2a6a43); } /* River emerald */ .sa-card-21-5 { background: linear-gradient(135deg, #f2c76e, #c9a24f); } /* Andes gold */ .sa-card-21-6 { background: linear-gradient(135deg, #e3c07b, #bfa062); } /* Luxury gold */ .sa-card-21-7 { background: linear-gradient(135deg, #5aa9c9, #3f7e99); } /* South Atlantic blue */ .sa-card-21-8 { background: linear-gradient(135deg, #8f6bb3, #6c4f8a); } /* Cultural Andes purple */ .sa-card-21-9 { background: linear-gradient(135deg, #c49a6c, #9e7a55); } /* Tierra del Fuego earth */ .sa-card-21-10 { background: linear-gradient(135deg, #7cd4a3, #5aa87d); } /* Tropical mint */ .sa-card-21-11 { background: linear-gradient(135deg, #bcd9f1, #8fb3cc); } /* Fjord glacier blue */ .sa-card-21-12 { background: linear-gradient(135deg, #e3edf7, #c5d4e0); } /* Glacier silver */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .sa-hover-21-sa:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .sa-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — South America Cultural Immersion (CSS) */ /* ========================================================= */ .section-22-sa { padding: 80px 0; background: #F5FBF7; /* Soft tropical mint backdrop */ } .sa-section-22-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #163524; /* Deep Amazon forest green */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2f3a45; margin-bottom: 50px; } /* GRID */ .sa-immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .sa-immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .sa-immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .sa-immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR SOUTH AMERICA PALETTE */ /* ========================================================= */ .sa-card-22-1 { background: linear-gradient(135deg, #2e8b57, #1f5f3c); } /* Amazon green */ .sa-card-22-2 { background: linear-gradient(135deg, #00a8e8, #007aa8); } /* Coastal aqua */ .sa-card-22-3 { background: linear-gradient(135deg, #4f7f9c, #355a6b); } /* Patagonia blue */ .sa-card-22-4 { background: linear-gradient(135deg, #3c8d5a, #2a6a43); } /* River emerald */ .sa-card-22-5 { background: linear-gradient(135deg, #f2c76e, #c9a24f); } /* Andes gold */ .sa-card-22-6 { background: linear-gradient(135deg, #e3c07b, #bfa062); } /* Luxury gold */ .sa-card-22-7 { background: linear-gradient(135deg, #5aa9c9, #3f7e99); } /* South Atlantic blue */ .sa-card-22-8 { background: linear-gradient(135deg, #8f6bb3, #6c4f8a); } /* Cultural Andes purple */ .sa-card-22-9 { background: linear-gradient(135deg, #c49a6c, #9e7a55); } /* Tierra del Fuego earth */ .sa-card-22-10 { background: linear-gradient(135deg, #7cd4a3, #5aa87d); } /* Tropical mint */ .sa-card-22-11 { background: linear-gradient(135deg, #bcd9f1, #8fb3cc); } /* Fjord glacier blue */ .sa-card-22-12 { background: linear-gradient(135deg, #e3edf7, #c5d4e0); } /* Glacier silver */ /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .sa-hover-22-sa:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .sa-immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — South America Wildlife & Nature (CSS) */ /* ========================================================= */ .section-23-sa { padding: 80px 0; background: #F4FBF7; /* Light tropical mint */ } .sa-section-23-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #163524; /* Deep Amazon green */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2f3a45; margin-bottom: 50px; } /* GRID */ .sa-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .sa-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .sa-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .sa-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .sa-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — SECTION 23 */ .sa-wildlife-image { transition: transform 0.35s ease; } .sa-wildlife-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH AMERICA WILDLIFE */ /* ========================================================= */ .sa-img-amazon-dolphins { background-image: url('../cruise-images/cruise-region-subpages-images/sa-amazon-dolphins.webp'); } .sa-img-amazon-macaws { background-image: url('../cruise-images/cruise-region-subpages-images/sa-amazon-macaws.webp'); } .sa-img-iguazu-falls { background-image: url('../cruise-images/cruise-region-subpages-images/sa-iguazu-falls.webp'); } .sa-img-galapagos-sea-lions { background-image: url('../cruise-images/cruise-region-subpages-images/sa-galapagos-sea-lions.webp'); } .sa-img-patagonia-glacier { background-image: url('../cruise-images/cruise-region-subpages-images/sa-patagonia-glacier.webp'); } .sa-img-andes-mountains { background-image: url('../cruise-images/cruise-region-subpages-images/sa-andes-mountains.webp'); } .sa-img-amazon-mangrove { background-image: url('../cruise-images/cruise-region-subpages-images/sa-amazon-mangrove.webp'); } .sa-img-brazil-coast { background-image: url('../cruise-images/cruise-region-subpages-images/sa-brazil-coast.webp'); } .sa-img-amazon-riverboat { background-image: url('../cruise-images/cruise-region-subpages-images/sa-amazon-riverboat.webp'); } .sa-img-pantanal-capybara { background-image: url('../cruise-images/cruise-region-subpages-images/sa-pantanal-capybara.webp'); } .sa-img-coastal-frigatebirds { background-image: url('../cruise-images/cruise-region-subpages-images/sa-coastal-frigatebirds.webp'); } .sa-img-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/sa-nature-photography.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM SOUTH AMERICA PALETTE */ /* ========================================================= */ .sa-card-23-1 { background: linear-gradient(135deg, #CDEEDB, #B4E3C7); } .sa-card-23-2 { background: linear-gradient(135deg, #D4F2F8, #B9E6EF); } .sa-card-23-3 { background: linear-gradient(135deg, #F6E9C8, #EED9A4); } .sa-card-23-4 { background: linear-gradient(135deg, #E8F7FF, #CDEBFA); } .sa-card-23-5 { background: linear-gradient(135deg, #DCE7F8, #C5D6EB); } .sa-card-23-6 { background: linear-gradient(135deg, #E6F2D9, #D2E6C1); } .sa-card-23-7 { background: linear-gradient(135deg, #D9F4E6, #C2EAD4); } .sa-card-23-8 { background: linear-gradient(135deg, #F2F8E8, #E4F2D3); } .sa-card-23-9 { background: linear-gradient(135deg, #F7EAD9, #EBD7C2); } .sa-card-23-10 { background: linear-gradient(135deg, #E9F7F4, #D3EFE8); } .sa-card-23-11 { background: linear-gradient(135deg, #E6F0FA, #D2E1F0); } .sa-card-23-12 { background: linear-gradient(135deg, #FFF4E3, #F7E6C9); } /* HOVER */ .sa-hover-23-sa:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .sa-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — South America Cultural Experiences (CSS) */ /* ========================================================= */ .sa-section-24 { padding: 80px 0; background: #FFF6E8; /* Light tropical cream */ } .sa-section-24-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #14523A; /* Deep tropical green */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A3A; margin-bottom: 50px; } /* GRID */ .sa-culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .sa-culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .sa-culture-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .sa-culture-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .sa-culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — SECTION 24 */ .sa-culture-image { transition: transform 0.35s ease; } .sa-culture-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH AMERICA CULTURAL */ /* ========================================================= */ .sa-img-andean-ceremonies { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-andean-ceremonies.webp'); } .sa-img-amazon-crafts { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-amazon-crafts.webp'); } .sa-img-street-food-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-street-food.webp'); } .sa-img-colonial-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-colonial-architecture.webp'); } .sa-img-music-dance { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-music-dance.webp'); } .sa-img-festivals-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-festivals.webp'); } .sa-img-local-markets-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-local-markets.webp'); } .sa-img-traditional-clothing-sa{ background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-traditional-clothing.webp'); } .sa-img-cultural-workshops-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-cultural-workshops.webp'); } .sa-img-historic-landmarks-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-historic-landmarks.webp'); } .sa-img-heritage-villages-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-heritage-villages.webp'); } .sa-img-storytelling-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section24-storytelling.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM SOUTH AMERICA GRADIENT PALETTE */ /* ========================================================= */ .sa-card-24-1 { background: linear-gradient(135deg, #DFF3E4, #C4E6D0); } /* Andean green mist */ .sa-card-24-2 { background: linear-gradient(135deg, #E6F5DF, #CFE8C4); } /* Amazon soft foliage */ .sa-card-24-3 { background: linear-gradient(135deg, #FFE7C4, #FFD39A); } /* Coastal food warm gold */ .sa-card-24-4 { background: linear-gradient(135deg, #E9F2F8, #CFE0F0); } /* Colonial sky blue */ .sa-card-24-5 { background: linear-gradient(135deg, #FFE0D0, #FFC7B0); } /* Music & dance coral */ .sa-card-24-6 { background: linear-gradient(135deg, #FFF3C9, #FFE59A); } /* Festival sunlight */ .sa-card-24-7 { background: linear-gradient(135deg, #F3E4D4, #E4CBB3); } /* Market earth tones */ .sa-card-24-8 { background: linear-gradient(135deg, #E4F0F2, #C9E0E4); } /* Textile cool breeze */ .sa-card-24-9 { background: linear-gradient(135deg, #E8F3E8, #D1E6D1); } /* Workshop soft green */ .sa-card-24-10 { background: linear-gradient(135deg, #F0E6D8, #E0D0BC); } /* Landmark sandstone */ .sa-card-24-11 { background: linear-gradient(135deg, #EAF4E2, #D4E6C8); } /* Village hillside */ .sa-card-24-12 { background: linear-gradient(135deg, #FFEAD6, #F5D4B8); } /* Storytelling warm glow */ /* HOVER */ .sa-hover-24:hover, .sa-card-24-hovered-sa { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* REVEAL STATE */ .sa-section-24.region-reveal-active-sa .sa-culture-card.sa-card-24-revealed-sa { /* optional subtle emphasis if needed later */ } /* RESPONSIVE */ @media (max-width: 1200px) { .sa-culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — South America Festivals & Seasonal Events */ /* ========================================================= */ .sa-section-25 { padding: 80px 0; background: #FFF4E6; /* Light warm tropical cream */ } .sa-section-25-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #14523A; /* Deep tropical green */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A3A; margin-bottom: 50px; } /* GRID */ .sa-festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .sa-festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .sa-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .sa-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .sa-festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — SECTION 25 */ .sa-festival-image { transition: transform 0.35s ease; } .sa-festival-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH AMERICA FESTIVALS */ /* (FILENAMES WILL MATCH YOUR WEBP PROMPTS) */ /* ========================================================= */ .sa-img-coastal-parade-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-coastal-parade.webp'); } .sa-img-carnival-brazil-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-carnival-brazil.webp'); } .sa-img-summer-music-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-summer-music.webp'); } .sa-img-harvest-celebration-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-harvest-celebration.webp'); } .sa-img-cultural-street-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-cultural-street.webp'); } .sa-img-coastal-fireworks-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-coastal-fireworks.webp'); } .sa-img-community-parks-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-community-parks.webp'); } .sa-img-food-market-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-food-market.webp'); } .sa-img-coastal-holiday-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-coastal-holiday.webp'); } .sa-img-cultural-center-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-cultural-center.webp'); } .sa-img-floral-season-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-floral-season.webp'); } .sa-img-parade-routes-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section25-parade-routes.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM SOUTH AMERICA GRADIENT PALETTE */ /* ========================================================= */ .sa-festival-card-25-1 { background: linear-gradient(135deg, #FFE7C4, #FFD39A); } /* Coastal parade warm gold */ .sa-festival-card-25-2 { background: linear-gradient(135deg, #F8D4D4, #F1B1B1); } /* Carnival soft coral */ .sa-festival-card-25-3 { background: linear-gradient(135deg, #DCEFF7, #C4E2F0); } /* Summer music sky blue */ .sa-festival-card-25-4 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } /* Harvest green */ .sa-festival-card-25-5 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } /* Cultural street warm amber */ .sa-festival-card-25-6 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } /* Fireworks prep light blue */ .sa-festival-card-25-7 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } /* Community parks soft sand */ .sa-festival-card-25-8 { background: linear-gradient(135deg, #E9F4E2, #D4E6C8); } /* Food & market fresh green */ .sa-festival-card-25-9 { background: linear-gradient(135deg, #F5D9D0, #EFBFAF); } /* Coastal holiday peach */ .sa-festival-card-25-10 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } /* Cultural center stone */ .sa-festival-card-25-11 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } /* Floral seasonal pink */ .sa-festival-card-25-12 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } /* Parade routes sunlight */ /* HOVER */ .sa-hover-25:hover, .sa-card-25-hovered-sa { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .sa-festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — South America Cruise Cuisine & Dining (CSS) */ /* ========================================================= */ .sa-section-26 { padding: 80px 0; background: #FFF5EB; /* Light warm background */ } .sa-section-26-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #154734; /* Deep green, not navy/purple */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A3A; margin-bottom: 50px; } /* GRID */ .sa-cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .sa-cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .sa-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .sa-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .sa-cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — SECTION 26 */ .sa-cuisine-image { transition: transform 0.35s ease; } .sa-cuisine-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — SOUTH AMERICA CUISINE */ .sa-image-brazilian-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-brazilian-seafood.webp'); } .sa-image-churrasco-grill { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-churrasco-grill.webp'); } .sa-image-peruvian-ceviche { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-peruvian-ceviche.webp'); } .sa-image-argentine-steak { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-argentine-steak.webp'); } .sa-image-chilean-wine-cuisine { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-chilean-wine-cuisine.webp'); } .sa-image-amazon-flavours { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-amazon-flavours.webp'); } .sa-image-coastal-street-food { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-coastal-street-food.webp'); } .sa-image-regional-comfort { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-regional-comfort.webp'); } .sa-image-brunch-coffee-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-brunch-coffee.webp'); } .sa-image-modern-fusion-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-modern-fusion.webp'); } .sa-image-desserts-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-desserts.webp'); } .sa-image-fruit-salads-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section26-fruit-salads.webp'); } /* LIGHT–MEDIUM GRADIENT PALETTE (NO PURPLE / NO NAVY / NO NEAR‑BLACK) */ .sa-card-26-1 { background: linear-gradient(135deg, #FFE3C4, #FFD19A); } /* Brazilian seafood warm gold */ .sa-card-26-2 { background: linear-gradient(135deg, #F8D4C4, #F1B39A); } /* Churrasco soft ember */ .sa-card-26-3 { background: linear-gradient(135deg, #DCEFF7, #C4E2F0); } /* Ceviche cool blue */ .sa-card-26-4 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } /* Steakhouse fresh green */ .sa-card-26-5 { background: linear-gradient(135deg, #FFEAD6, #F5D4B8); } /* Wine‑region soft amber */ .sa-card-26-6 { background: linear-gradient(135deg, #E9F4E2, #D4E6C8); } /* Amazonian green mist */ .sa-card-26-7 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } /* Street food sunlight */ .sa-card-26-8 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } /* Comfort plates warm sand */ .sa-card-26-9 { background: linear-gradient(135deg, #E4F0F2, #C9E0E4); } /* Brunch & coffee cool breeze */ .sa-card-26-10 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } /* Fusion dining soft pink */ .sa-card-26-11 { background: linear-gradient(135deg, #FFE7D6, #F5CBB4); } /* Desserts caramel glow */ .sa-card-26-12 { background: linear-gradient(135deg, #E9F7E4, #D1EACD); } /* Fruit salads fresh green */ /* HOVER */ .sa-hover-26:hover, .sa-card-26-hovered-sa { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .sa-cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — South America Shore Excursions (CSS) */ /* ========================================================= */ .sa-section-27 { padding: 80px 0; background: #FFF6EC; /* Light warm cream */ } .sa-section-27-wrapper { max-width: 1300px; margin: 0 auto; } .sa-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #14523A; /* Deep tropical green */ } .sa-section-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A3A; margin-bottom: 50px; } /* GRID */ .sa-excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .sa-excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; opacity: 0; transform: translateY(20px); } .sa-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .sa-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .sa-excursion-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — SECTION 27 */ .sa-excursion-image { transition: transform 0.35s ease; } .sa-excursion-image:hover { transform: scale(1.15); } /* BACKGROUND IMAGES — SOUTH AMERICA SHORE EXCURSIONS */ .sa-image-city-skyline-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-city-skyline.webp'); } .sa-image-historic-heritage-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-historic-heritage.webp'); } .sa-image-coastal-beach-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-coastal-beach.webp'); } .sa-image-food-markets-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-food-markets.webp'); } .sa-image-nature-scenic-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-nature-scenic.webp'); } .sa-image-cultural-workshops-sa{ background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-cultural-workshops.webp'); } .sa-image-wildlife-encounters-sa{ background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-wildlife-encounters.webp'); } .sa-image-river-cruises-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-river-cruises.webp'); } .sa-image-soft-adventure-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-soft-adventure.webp'); } .sa-image-historic-districts-sa{ background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-historic-districts.webp'); } .sa-image-small-towns-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-small-towns.webp'); } .sa-image-premium-private-sa { background-image: url('../cruise-images/cruise-region-subpages-images/sa-section27-premium-private.webp'); } /* LIGHT–MEDIUM SOUTH AMERICA GRADIENT PALETTE */ .sa-card-27-1 { background: linear-gradient(135deg, #E8F4E2, #D4E6C8); } .sa-card-27-2 { background: linear-gradient(135deg, #FFE7C4, #FFD39A); } .sa-card-27-3 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } .sa-card-27-4 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } .sa-card-27-5 { background: linear-gradient(135deg, #DCEFF7, #C4E2F0); } .sa-card-27-6 { background: linear-gradient(135deg, #E9F4E2, #D4E6C8); } .sa-card-27-7 { background: linear-gradient(135deg, #FFEAD6, #F5D4B8); } .sa-card-27-8 { background: linear-gradient(135deg, #E4F0F2, #C9E0E4); } .sa-card-27-9 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } .sa-card-27-10 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .sa-card-27-11 { background: linear-gradient(135deg, #F5D9D0, #EFBFAF); } .sa-card-27-12 { background: linear-gradient(135deg, #E9F7E4, #D1EACD); } /* REVEAL */ .sa-section-27.region-reveal-active-sa27 .sa-excursion-card { opacity: 1; transform: translateY(0); } /* HOVER */ .sa-hover-27:hover, .sa-card-27-hovered-sa { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .sa-excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sa-excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sa-excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 28 — South America Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .section-28 { padding: 80px 0; background: #f3f9ff; /* fresh South America tone */ } .south-america-transfers-inner { max-width: 1300px; margin: 0 auto; } .south-america-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #10324a; /* deep Andean blue */ } .south-america-transfers-intro { font-size: 1.15rem; text-align: center; color: #4a5563; margin-bottom: 20px; } /* GRID */ .south-america-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD BASE */ .south-america-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #10324a; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #444; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; } /* SOUTH AMERICA GRADIENTS — NEW, REGION-SPECIFIC */ .transfer-card-city-sa { background: linear-gradient(135deg, #4fc3f7, #0284c7); /* coastal blue */ color: #fff; } .transfer-card-airport-sa { background: linear-gradient(135deg, #7dd3fc, #0ea5e9); /* sky blue */ color: #fff; } .transfer-card-cruiseline-sa { background: linear-gradient(135deg, #fbbf24, #f59e0b); /* Amazon gold */ color: #fff; } .transfer-card-local-sa { background: linear-gradient(135deg, #34d399, #059669); /* rainforest green */ color: #fff; } .transfer-card-access-sa { background: linear-gradient(135deg, #a5b4fc, #6366f1); /* Andes lavender */ color: #fff; } .transfer-card-planning-sa { background: linear-gradient(135deg, #fca5a5, #f87171); /* warm coral */ color: #fff; } /* HOVER */ .south-america-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .south-america-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .south-america-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 29 — South America Cruise FAQ (CSS) */ /* ========================================================= */ .section-29 { padding: 80px 0; background: #f2f9ff; /* fresh South America tone */ } .south-america-faq-inner { max-width: 1100px; margin: 0 auto; } .south-america-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #10324a; /* deep Andean blue */ } .south-america-faq-intro { font-size: 1.15rem; text-align: center; color: #4a5563; margin-bottom: 40px; } /* Accordion Container */ .south-america-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .south-america-faq-item { background: #f4fbff; /* light South America tone */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .south-america-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #10324a; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .south-america-faq-question:hover { background: #e6f3ff; } /* Arrow Icon */ .south-america-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .south-america-faq-item.active .south-america-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .south-america-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .south-america-faq-answer p { font-size: 1rem; color: #444; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .south-america-faq-item.active .south-america-faq-answer { max-height: 320px; } /* Responsive */ @media (max-width: 800px) { .south-america-faq-title { font-size: 2rem; } .south-america-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- SECTION 3 HERO BACKGROUND (South Pacific hero image) --------------------------------------------- */ .page-cruise-subpage.south-pacific-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/south-pacific-cruise-guide-subpage-hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.south-pacific-subpage.cruise-lines-subpage .hero-region { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.south-pacific-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; } /*--------------------------------------------- SECTION 4 — Overview (South Pacific) ---------------------------------------------*/ .sp-section-overview { text-align: center; } .sp-section-overview .section-title { font-size: 2rem; font-weight: 700; color: #005A63; /* South Pacific Deep Teal */ margin-bottom: 20px; text-align: center; width: 100%; } .sp-section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #005A63; /* South Pacific Deep Teal */ max-width: 820px; margin: 0 auto 32px; } .sp-overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .sp-overview-highlights .sp-highlight-item { background: #FFB7A2; /* South Pacific Coral */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #005A63; /* South Pacific Deep Teal */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .sp-highlight-icon { color: #007F9E; /* South Pacific Aqua */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (South Pacific) --------------------------------------------- */ .sp-section-featured-cruise-lines { padding: 60px 0; background: #FFE4D6; /* South Pacific Coral Mist */ width: 100%; } .sp-section-featured-cruise-lines .sp-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .sp-section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #004F56; /* South Pacific Deep Ocean */ text-align: center; margin-bottom: 18px; } .sp-section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #004F56; /* Deep Ocean */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID */ .sp-cruise-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; } /* CARD */ .sp-cruise-line-card { background: linear-gradient(180deg, #FFF5EE 0%, #FFFFFF 100%); border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .sp-cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sp-cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .sp-cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #004F56; /* Deep Ocean */ text-align: center; } /* DESCRIPTION */ .sp-cruise-line-description { font-size: 1rem; line-height: 1.6; color: #004F56; text-align: center; } /* TAGS */ .sp-cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .sp-tag { background: #E8C27A; /* Sand Gold */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .sp-cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .sp-cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #004F56; display: flex; align-items: center; gap: 8px; } .sp-highlight-icon { color: #007A8A; /* Reef Blue */ font-weight: 700; } /* BUTTONS */ .sp-cruise-line-link { background: #007A8A; /* Reef Blue */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .sp-secondary-btn { background: #004F56; /* Deep Ocean */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .sp-cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .sp-cruise-line-link:hover { background: #006878; transform: translateY(-2px); } .sp-secondary-btn:hover { background: #003A40; transform: translateY(-2px); } /* HEADER UNDERLINE */ .sp-cruise-line-header { position: relative; } .sp-cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #E8C27A; /* Sand Gold */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — South Pacific Cruise Experience Overview */ /* ========================================================= */ .sp-experience-6-section { width: 100%; padding: 80px 0; background: #F3D9A4; /* Island Sand */ color: #004F5A; /* Deep Reef Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-experience-6-section.revealed { opacity: 1; transform: translateY(0); } .sp-experience-6-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .sp-experience-6-header { text-align: center; margin-bottom: 40px; } .sp-experience-6-title { font-size: 2.4rem; font-weight: 700; color: #004F5A; margin-bottom: 20px; } .sp-experience-6-intro { font-size: 1.15rem; line-height: 1.8; color: #004F5A; margin-bottom: 14px; } .sp-experience-6-list { list-style: none; margin: 0; padding: 0; } .sp-experience-6-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #004F5A; } .sp-experience-6-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-experience-6-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sp-experience-6-fiji { color: #0097A7; /* Lagoon Aqua */ } .sp-experience-6-tahiti { color: #FFB8A8; /* Coral Bloom */ } .sp-experience-6-samoa { color: #00796B; /* Tropical Teal */ } .sp-experience-6-vanuatu { color: #8E24AA; /* Deep Island Purple */ } .sp-experience-6-tonga { color: #C62828; /* Warm Coral Red */ } .sp-experience-6-polynesia { color: #F57C00; /* Sunset Orange */ } .sp-experience-6-atmosphere { color: #004F5A; /* Deep Reef Blue */ } /* ========================================================= */ /* SECTION 7 — Polynesia & French Polynesia Overview */ /* ========================================================= */ .sp-experience-7-section { width: 100%; padding: 80px 0; background: #DFF7F5; /* Lagoon Pearl */ color: #00545A; /* Deep Lagoon Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-experience-7-section.revealed { opacity: 1; transform: translateY(0); } .sp-experience-7-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .sp-experience-7-header { text-align: center; margin-bottom: 40px; } .sp-experience-7-title { font-size: 2.4rem; font-weight: 700; color: #00545A; margin-bottom: 20px; } .sp-experience-7-intro { font-size: 1.15rem; line-height: 1.8; color: #00545A; margin-bottom: 14px; } .sp-experience-7-list { list-style: none; margin: 0; padding: 0; } .sp-experience-7-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #00545A; } .sp-experience-7-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-experience-7-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sp-experience-7-tahiti { color: #007C82; /* Reef Teal */ } .sp-experience-7-borabora { color: #FFB4A2; /* Coral Rose */ } .sp-experience-7-moorea { color: #00838F; /* Lagoon Teal */ } .sp-experience-7-tuamotu { color: #6A1B9A; /* Deep Island Purple */ } .sp-experience-7-marquesas { color: #C62828; /* Warm Coral Red */ } .sp-experience-7-austral { color: #F57C00; /* Sunset Orange */ } .sp-experience-7-atmosphere { color: #00545A; /* Deep Lagoon Blue */ } /* ========================================================= */ /* SECTION 8 — Melanesia & Micronesia Overview */ /* ========================================================= */ .sp-experience-8-section { width: 100%; padding: 80px 0; background: #E3F4F8; /* Ocean Mist */ color: #00454A; /* Deep Ocean Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-experience-8-section.revealed { opacity: 1; transform: translateY(0); } .sp-experience-8-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .sp-experience-8-header { text-align: center; margin-bottom: 40px; } .sp-experience-8-title { font-size: 2.4rem; font-weight: 700; color: #00454A; margin-bottom: 20px; } .sp-experience-8-intro { font-size: 1.15rem; line-height: 1.8; color: #00454A; margin-bottom: 14px; } .sp-experience-8-list { list-style: none; margin: 0; padding: 0; } .sp-experience-8-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #00454A; } .sp-experience-8-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-experience-8-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sp-experience-8-fiji { color: #006D77; /* Reef Blue */ } .sp-experience-8-vanuatu { color: #FFBCB3; /* Island Coral */ } .sp-experience-8-solomon { color: #6A1B9A; /* Deep Island Purple */ } .sp-experience-8-png { color: #C62828; /* Warm Coral Red */ } .sp-experience-8-kiribati { color: #00838F; /* Lagoon Teal */ } .sp-experience-8-palau { color: #F57C00; /* Sunset Orange */ } .sp-experience-8-guam { color: #D84315; /* Warm Coast Orange */ } .sp-experience-8-atmosphere { color: #00454A; /* Deep Ocean Teal */ } /* ========================================================= */ /* SECTION 9 — South Pacific Seasonal Cruise Guide */ /* ========================================================= */ .sp-seasonal-9-section { width: 100%; padding: 80px 0; background: #E8FFF4; /* Tropical Breeze */ color: #006A73; /* Lagoon Deep */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-seasonal-9-section.revealed { opacity: 1; transform: translateY(0); } .sp-seasonal-9-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .sp-seasonal-9-header { text-align: center; margin-bottom: 40px; } .sp-seasonal-9-title { font-size: 2.4rem; font-weight: 700; color: #006A73; margin-bottom: 20px; } .sp-seasonal-9-intro { font-size: 1.15rem; line-height: 1.8; color: #006A73; margin-bottom: 14px; } .sp-seasonal-9-list { list-style: none; margin: 0; padding: 0; } .sp-seasonal-9-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #006A73; } .sp-seasonal-9-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-seasonal-9-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sp-seasonal-9-fiji { color: #008C8F; /* Island Teal */ } .sp-seasonal-9-polynesia { color: #FF9F8E; /* Coral Sunset */ } .sp-seasonal-9-vanuatu { color: #6A1B9A; /* Deep Island Purple */ } .sp-seasonal-9-tonga { color: #C62828; /* Warm Coral Red */ } .sp-seasonal-9-micronesia { color: #0277BD; /* Ocean Blue */ } .sp-seasonal-9-festivals { color: #F57C00; /* Sunset Orange */ } .sp-seasonal-9-scenic { color: #006A73; /* Lagoon Deep */ } /* ========================================================= */ /* SECTION 10 — South Pacific Best Cruise Months Chart */ /* ========================================================= */ .sp-best-months-10-section { width: 100%; padding: 80px 0; background: #E9FFFB; /* Lagoon Mist */ color: #005A63; /* Deep Ocean */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-best-months-10-section.revealed { opacity: 1; transform: translateY(0); } .sp-best-months-10-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .sp-best-months-10-header { text-align: center; margin-bottom: 40px; } .sp-best-months-10-title { font-size: 2.4rem; font-weight: 700; color: #005A63; margin-bottom: 20px; } .sp-best-months-10-intro { font-size: 1.15rem; line-height: 1.8; color: #005A63; margin-bottom: 14px; } /* Chart container */ .sp-best-months-10-chart { background: #FFFFFF; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header */ .sp-best-months-10-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #005A63; margin-bottom: 12px; text-align: center; } .sp-best-months-10-chart-header span { font-size: 0.85rem; } /* Chart label */ .sp-best-months-10-chart-label { font-weight: 700; margin: 12px 0 6px; color: #005A63; } /* Chart rows */ .sp-best-months-10-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles */ .best { background: linear-gradient(135deg, #2E7D32, #66BB6A); border-radius: 4px; height: 18px; } .good { background: linear-gradient(135deg, #0288D1, #4FC3F7); border-radius: 4px; height: 18px; } .avoid { background: linear-gradient(135deg, #C62828, #EF5350); border-radius: 4px; height: 18px; } /* Legend */ .sp-best-months-10-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .sp-best-months-10-chart-legend div { display: flex; align-items: center; gap: 6px; } .sp-best-months-10-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .sp-best-months-10-list { list-style: none; margin: 0; padding: 0; } .sp-best-months-10-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #005A63; } .sp-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-best-text { display: inline-block; } .sp-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .sp-best-fiji { color: #00838F; } .sp-best-polynesia { color: #FFB3A7; } .sp-best-vanuatu { color: #6A1B9A; } .sp-best-tonga { color: #C62828; } .sp-best-micronesia { color: #0277BD; } .sp-best-scenic { color: #005A63; } /* ========================================================= */ /* SECTION 11 — South Pacific Cruise Tips & Planning Guide */ /* ========================================================= */ .sp-tips-11-section { width: 100%; padding: 80px 0; background: #E6FFF8; /* Lagoon Breeze */ color: #004F54; /* Deep Island Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-tips-11-section.revealed { opacity: 1; transform: translateY(0); } .sp-tips-11-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } .sp-tips-11-header { text-align: center; margin-bottom: 40px; } .sp-tips-11-title { font-size: 2.4rem; font-weight: 700; color: #004F54; margin-bottom: 20px; } .sp-tips-11-intro { font-size: 1.15rem; line-height: 1.8; color: #004F54; margin-bottom: 14px; } /* Icons Row */ .sp-tips-11-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #004F54; } /* Gradient Divider */ .sp-tips-11-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #004F54, #007A7E, #004F54); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .sp-tips-11-card { background: #FFFFFF; border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .sp-tips-11-card-icon { font-size: 1.8rem; margin-top: 4px; } .sp-tips-11-card-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .sp-tip-planning { color: #004F54; } .sp-tip-packing { color: #2E7D32; } .sp-tip-docs { color: #6A1B9A; } .sp-tip-weather { color: #0277BD; } .sp-tip-port { color: #F57C00; } /* Do's & Don'ts */ .sp-tips-11-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .sp-tips-11-dos, .sp-tips-11-donts { flex: 1; background: #FFFFFF; padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .sp-tips-11-dos h3, .sp-tips-11-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #004F54; } .sp-tips-11-dos ul, .sp-tips-11-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .sp-tips-11-insider { margin-top: 40px; } .sp-tips-11-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #004F54; } .sp-tips-11-insider ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising (South Pacific) */ /* ========================================================= */ .sp-boutique-12-section { width: 100%; padding: 80px 0; background: #E9FFF9; /* Lagoon Pearl */ color: #004F56; /* Deep Ocean Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-boutique-12-section.revealed { opacity: 1; transform: translateY(0); } .sp-boutique-12-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } .sp-boutique-12-header { text-align: center; margin-bottom: 40px; } .sp-boutique-12-title { font-size: 2.4rem; font-weight: 700; color: #004F56; margin-bottom: 20px; } .sp-boutique-12-intro { font-size: 1.15rem; line-height: 1.8; color: #004F56; margin-bottom: 14px; } /* Icon Row */ .sp-boutique-12-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #004F56; } /* Cards container */ .sp-boutique-12-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .sp-boutique-12-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .sp-boutique-12-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants */ .sp-boutique-card-blue { background: linear-gradient(135deg, #00838F, #4FC3F7); } .sp-boutique-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .sp-boutique-card-teal { background: linear-gradient(135deg, #007A7E, #4FC3F7); } .sp-boutique-card-gold { background: linear-gradient(135deg, #D9A441, #F2C76E); } .sp-boutique-12-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .sp-boutique-12-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .sp-boutique-12-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .sp-boutique-12-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #004F56, #008A8F, #2E7D32, #D9A441); border-radius: 3px; margin: 40px 0; } /* List section */ .sp-boutique-12-list-wrapper { margin-top: 10px; } .sp-boutique-12-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #004F56; } .sp-boutique-12-list { list-style: none; margin: 0; padding: 0; } .sp-boutique-12-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #004F56; } .sp-boutique-12-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-boutique-12-list-text { display: inline-block; } /* Colour labels */ .sp-boutique-label-blue { color: #0277BD; } .sp-boutique-label-green { color: #2E7D32; } .sp-boutique-label-teal { color: #00838F; } .sp-boutique-label-gold { color: #D9A441; } /* Responsive */ @media (max-width: 900px) { .sp-boutique-12-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — South Pacific Port Profiles (Expanded Edition) */ /* ========================================================= */ .sp-port-13-section { width: 100%; padding: 80px 0; background: #E8FFF7; /* Lagoon Mist */ color: #00545A; /* Deep Ocean Teal */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-port-13-section.revealed { opacity: 1; transform: translateY(0); } .sp-port-13-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } .sp-port-13-header { text-align: center; margin-bottom: 40px; } .sp-port-13-title { font-size: 2.4rem; font-weight: 700; color: #00545A; margin-bottom: 20px; } .sp-port-13-intro { font-size: 1.15rem; line-height: 1.8; color: #00545A; margin-bottom: 14px; } /* Icon Row */ .sp-port-13-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #00545A; } /* Cards container */ .sp-port-13-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .sp-port-13-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .sp-port-13-card-icon { font-size: 1.9rem; margin-top: 4px; } .sp-port-13-card-body { display: flex; flex-direction: column; flex: 1; } /* Colour variants */ .sp-port-card-blue { background: linear-gradient(135deg, #0097A7, #4FC3F7); } .sp-port-card-teal { background: linear-gradient(135deg, #008A8F, #4FC3F7); } .sp-port-card-green { background: linear-gradient(135deg, #2E7D32, #66BB6A); } .sp-port-card-indigo { background: linear-gradient(135deg, #283593, #5C6BC0); } .sp-port-card-gold { background: linear-gradient(135deg, #D9A441, #F2C76E); } .sp-port-card-purple { background: linear-gradient(135deg, #6A1B9A, #AB47BC); } .sp-port-card-coral { background: linear-gradient(135deg, #D84315, #FF7043); } .sp-port-card-amber { background: linear-gradient(135deg, #FF8F00, #FFB74D); } .sp-port-13-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .sp-port-13-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .sp-port-13-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal animation for cards */ .sp-port-13-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-port-13-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Divider */ .sp-port-13-divider { height: 3px; width: 100%; background: linear-gradient( 90deg, #0097A7, #2E7D32, #283593, #008A8F, #D9A441 ); border-radius: 3px; margin: 40px 0; } /* List section */ .sp-port-13-list-wrapper { margin-top: 10px; } .sp-port-13-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #00545A; } .sp-port-13-list { list-style: none; margin: 0; padding: 0; } .sp-port-13-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #00545A; } .sp-port-13-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .sp-port-13-list-text { display: inline-block; } /* Colour labels */ .sp-port-label-indigo { color: #283593; } .sp-port-label-red { color: #C62828; } .sp-port-label-blue { color: #0277BD; } .sp-port-label-teal { color: #00838F; } .sp-port-label-gold { color: #D9A441; } .sp-port-label-green { color: #2E7D32; } /* Responsive */ @media (max-width: 900px) { .sp-port-13-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — South Pacific Cruise Port Comparison Grid */ /* ========================================================= */ .sp-port-compare-14-section { width: 100%; padding: 80px 0; background: #E6FFFA; /* Lagoon Ice */ color: #00545A; /* Deep Ocean Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-port-compare-14-section.revealed { opacity: 1; transform: translateY(0); } .sp-port-compare-14-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-port-compare-14-header { text-align: center; margin-bottom: 50px; } .sp-port-compare-14-title { font-size: 2.4rem; font-weight: 700; color: #00545A; margin-bottom: 20px; } .sp-port-compare-14-intro { font-size: 1.15rem; line-height: 1.8; color: #00545A; max-width: 800px; margin: 0 auto; } /* Grid container */ .sp-port-compare-14-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .sp-compare-grid-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .sp-compare-grid-header { background: #DFF7F5; font-weight: 700; color: #00545A; } /* Left colour accent */ .sp-compare-grid-row::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .compare-row-teal-sp::before { background: #0097A7; } .compare-row-blue-sp::before { background: #0277BD; } .compare-row-green-sp::before { background: #2E7D32; } .compare-row-indigo-sp::before { background: #283593; } .compare-row-gold-sp::before { background: #D9A441; } .compare-row-purple-sp::before { background: #6A1B9A; } .compare-row-coral-sp::before { background: #D84315; } .compare-row-amber-sp::before { background: #FF8F00; } /* Alternating row backgrounds */ .sp-compare-grid-row:nth-child(even) { background: #F6F8FC; } /* Hover effects */ .compare-row-teal-sp:hover, .compare-row-blue-sp:hover, .compare-row-green-sp:hover, .compare-row-indigo-sp:hover, .compare-row-gold-sp:hover, .compare-row-purple-sp:hover, .compare-row-coral-sp:hover, .compare-row-amber-sp:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .sp-compare-grid-row.region-reveal-sp { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-compare-grid-row.region-reveal-sp.visible-sp { opacity: 1; transform: translateY(0); } /* Insights footer */ .sp-port-compare-14-insights { margin-top: 40px; padding: 30px; background: #DFF7F5; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .sp-port-compare-14-insights-title { font-size: 1.6rem; font-weight: 700; color: #00545A; margin-bottom: 14px; } .sp-port-compare-14-insights-text { font-size: 1.1rem; line-height: 1.8; color: #00545A; } /* Responsive */ @media (max-width: 1100px) { .sp-compare-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .sp-compare-grid-header { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .sp-compare-grid-row { grid-template-columns: 1fr; padding: 20px; } .sp-compare-grid-header { display: none; } .sp-compare-col { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — South Pacific Embarkation vs Destination Ports */ /* ========================================================= */ .sp-port-usage-145-section { padding: 80px 0; background: #EFFFF9; /* Light Lagoon Sky */ } .sp-port-usage-145-inner { max-width: 1300px; margin: 0 auto; } .sp-port-usage-145-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102A43; /* Deep Slate */ } .sp-port-usage-145-intro { font-size: 1.15rem; text-align: center; color: #334E68; margin-bottom: 20px; } /* GRID */ .sp-port-usage-145-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD */ .sp-port-usage-145-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; } /* IMAGE BLOCK */ .usage-image-sp { width: 100%; height: 220px; background-size: cover; background-position: center; } /* BACKGROUND IMAGES */ .usage-image-embarkation-sp { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-embarkation-ports.webp'); } .usage-image-destination-sp { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-destination-ports.webp'); } .usage-image-debarkation-sp { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-debarkation-ports.webp'); } /* TEXT — FIXED TO DARK FOR READABILITY */ .usage-card-title-sp { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102A43; /* Dark readable text */ } .usage-card-text-sp { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1A1A1A; /* Dark readable text */ opacity: 0.95; } .usage-card-note-sp { font-size: 0.95rem; margin: 0 20px 20px 20px; color: #1A1A1A; /* Dark readable text */ opacity: 0.95; } /* REMOVE INNER GRADIENT (TEMPLATE DOES NOT USE IT) */ .usage-card-body-sp { background: none; } /* LIGHT–MEDIUM GRADIENTS (NO DARK PURPLE / NAVY) */ .usage-card-embarkation-sp { background: linear-gradient(135deg, #4CC9F0, #A6EFFF); /* Lagoon Blue */ } .usage-card-destination-sp { background: linear-gradient(135deg, #5BCB8A, #CFFFE0); /* Reef Green */ } .usage-card-debarkation-sp { background: linear-gradient(135deg, #FFD59E, #FFF4D6); /* Coral Sand */ } /* HOVER */ .sp-port-usage-145-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .sp-port-usage-145-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .sp-port-usage-145-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 15 — South Pacific Cruise Line Fleet Size Comparison */ /* ========================================================= */ .sp-fleet-15-section { width: 100%; padding: 80px 0; background: #F3FBFF; /* Soft South Pacific Sky */ color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-fleet-15-section.revealed { opacity: 1; transform: translateY(0); } .sp-fleet-15-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-fleet-15-header { text-align: center; margin-bottom: 40px; } .sp-fleet-15-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .sp-fleet-15-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #00A8E8, #2BB673, #F6B352); /* Lagoon, island, coral */ } .sp-fleet-15-intro { font-size: 1.1rem; line-height: 1.8; color: #334E68; max-width: 850px; margin: 0 auto 12px; } /* Grid container */ .sp-fleet-15-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); background: #FFFFFF; margin-top: 40px; } /* Grid rows */ .sp-fleet-grid-row-15 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 16px 20px; font-size: 0.98rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; } /* Header row */ .sp-fleet-grid-header-15 { background: #E4F3FB; font-weight: 700; color: #102A43; } /* Left colour accent */ .sp-fleet-grid-row-15::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents */ .sp-fleet-row-lagoon-15::before { background: #00B3C6; } .sp-fleet-row-coral-15::before { background: #FF7A59; } .sp-fleet-row-blue-15::before { background: #1E88E5; } .sp-fleet-row-teal-15::before { background: #2BB673; } .sp-fleet-row-indigo-15::before { background: #3F51B5; } .sp-fleet-row-green-15::before { background: #43A047; } .sp-fleet-row-cyan-15::before { background: #00ACC1; } .sp-fleet-row-violet-15::before { background: #7E57C2; } .sp-fleet-row-sand-15::before { background: #F6B352; } .sp-fleet-row-gold-15::before { background: #FFC107; } /* Alternating row backgrounds */ .sp-fleet-grid-row-15:nth-child(even) { background: #F7FBFF; } /* Hover effects */ .sp-fleet-row-lagoon-15:hover, .sp-fleet-row-coral-15:hover, .sp-fleet-row-blue-15:hover, .sp-fleet-row-teal-15:hover, .sp-fleet-row-indigo-15:hover, .sp-fleet-row-green-15:hover, .sp-fleet-row-cyan-15:hover, .sp-fleet-row-violet-15:hover, .sp-fleet-row-sand-15:hover, .sp-fleet-row-gold-15:hover { background: rgba(0, 168, 232, 0.06); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } /* Reveal animation */ .sp-fleet-grid-row-15.region-reveal-sp-15 { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-fleet-grid-row-15.region-reveal-sp-15.visible-sp-15 { opacity: 1; transform: translateY(0); } /* Columns */ .sp-fleet-col-15 { padding: 4px 8px; } /* Fleet Bars Visual */ .sp-fleet-15-bars { margin-top: 40px; padding: 26px 24px 20px; border-radius: 14px; background: #E4F3FB; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .sp-fleet-15-bars-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #102A43; } /* TWO-COLUMN BAR LAYOUT */ .sp-fleet-bars-row-15 { display: grid; grid-template-columns: 190px 1fr; column-gap: 20px; margin-bottom: 24px; } /* Left column — ship name */ .sp-fleet-bars-col-left-15 { font-size: 1rem; font-weight: 700; color: #102A43; display: flex; align-items: center; } /* Right column — bar + paragraph */ .sp-fleet-bars-col-right-15 { display: flex; flex-direction: column; gap: 10px; } /* Bar */ .sp-fleet-bar-15 { height: 12px; border-radius: 999px; } /* Bar colours and relative widths */ .sp-fleet-bar-lagoon-15 { width: 52%; background: linear-gradient(90deg, #00B3C6, #7EE7F7); } .sp-fleet-bar-coral-15 { width: 82%; background: linear-gradient(90deg, #FF7A59, #FFB199); } .sp-fleet-bar-blue-15 { width: 88%; background: linear-gradient(90deg, #1E88E5, #64B5F6); } .sp-fleet-bar-teal-15 { width: 74%; background: linear-gradient(90deg, #2BB673, #A5E6B5); } .sp-fleet-bar-indigo-15 { width: 74%; background: linear-gradient(90deg, #3F51B5, #9FA8DA); } .sp-fleet-bar-green-15 { width: 68%; background: linear-gradient(90deg, #43A047, #A5D6A7); } .sp-fleet-bar-cyan-15 { width: 80%; background: linear-gradient(90deg, #00ACC1, #4DD0E1); } .sp-fleet-bar-violet-15 { width: 70%; background: linear-gradient(90deg, #7E57C2, #B39DDB); } .sp-fleet-bar-sand-15 { width: 60%; background: linear-gradient(90deg, #F6B352, #FFE0A3); } .sp-fleet-bar-gold-15 { width: 56%; background: linear-gradient(90deg, #FFC107, #FFE082); } /* Paragraph under bar */ .sp-fleet-bars-detail-15 { font-size: 0.95rem; line-height: 1.7; color: #334E68; max-width: 780px; } /* Responsive */ @media (max-width: 700px) { .sp-fleet-bars-row-15 { grid-template-columns: 1fr; } .sp-fleet-bars-col-left-15 { margin-bottom: 6px; } } /* ========================================================= */ /* SECTION 16 — South Pacific Port Logistics & Passenger Flow Guide */ /* ========================================================= */ .sp-logistics-16-section { width: 100%; padding: 80px 0; background: #F3FBFF; /* Light lagoon sky */ color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-logistics-16-section.revealed { opacity: 1; transform: translateY(0); } .sp-logistics-16-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-logistics-16-header { text-align: center; margin-bottom: 40px; } .sp-logistics-16-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 12px; } .sp-logistics-16-underline { width: 80px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: linear-gradient(90deg, #25A9E0, #35B67A, #F4B23A); /* South Pacific tones */ } .sp-logistics-16-intro { font-size: 1.1rem; line-height: 1.8; color: #334E68; max-width: 850px; margin: 0 auto 12px; } /* Logistics Grid */ .sp-logistics-16-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; } .sp-logistics-card-16 { border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; background: #FFFFFF; } /* Card titles & text */ .sp-logistics-card-16-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: #102A43; } .sp-logistics-card-16-text { font-size: 0.98rem; line-height: 1.7; margin-bottom: 14px; color: #1A1A1A; } /* Card gradients (light–medium, no deep purple/navy) */ .sp-logistics-card-embarkation-16 { background: linear-gradient(135deg, #C8F3FF, #E8FFF7); } .sp-logistics-card-disembarkation-16 { background: linear-gradient(135deg, #D4F8D2, #F4FFF0); } .sp-logistics-card-transfers-16 { background: linear-gradient(135deg, #FFE9C4, #FFF9E8); } /* List inside cards */ .sp-logistics-16-list { list-style: none; margin: 0; padding: 0; } .sp-logistics-16-list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.95rem; color: #1A1A1A; } .sp-logistics-16-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Reveal animation for cards */ .sp-logistics-card-16.region-reveal-sp { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-logistics-card-16.region-reveal-sp.visible-sp { opacity: 1; transform: translateY(0); } /* Comparison strip */ .sp-logistics-16-compare { margin-top: 40px; padding: 26px 24px; border-radius: 16px; background: #E7F4FF; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .sp-logistics-16-compare-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #102A43; } .sp-logistics-16-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sp-logistics-16-compare-item { background: #FFFFFF; border-radius: 12px; padding: 16px 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); font-size: 0.96rem; line-height: 1.7; color: #334E68; } .sp-logistics-16-compare-item h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } /* Comparison accents */ .sp-compare-ausnz-16 { border-left: 4px solid #25A9E0; } .sp-compare-polynesia-16 { border-left: 4px solid #35B67A; } .sp-compare-melanesia-16 { border-left: 4px solid #F4B23A; } /* Tips section */ .sp-logistics-16-tips { margin-top: 40px; } .sp-logistics-16-tips-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #102A43; } .sp-logistics-16-tips-list { list-style: none; margin: 0; padding: 0; } .sp-logistics-16-tips-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.98rem; color: #334E68; } .sp-logistics-16-tips-list li span:first-child { font-size: 1.2rem; margin-top: 2px; } /* Responsive */ @media (max-width: 1100px) { .sp-logistics-16-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-logistics-16-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .sp-logistics-16-grid { grid-template-columns: 1fr; } .sp-logistics-16-compare-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 17 — South Pacific Cruise Lines Overview Grid */ /* ========================================================= */ .sp-cruise-lines-overview-17 { width: 100%; padding: 90px 0; background: #F2FBFF; /* Soft South Pacific backdrop */ color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-cruise-lines-overview-17.revealed { opacity: 1; transform: translateY(0); } .sp-cruise-lines-inner-17 { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-cruise-lines-header-17 { text-align: center; margin-bottom: 60px; } .sp-cruise-lines-title-17 { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } /* Cinematic gradient underline */ .sp-cruise-lines-underline-17 { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00A8E8, #2BB673, #F6B352); } .sp-cruise-lines-intro-17 { font-size: 1.2rem; line-height: 1.8; color: #334E68; max-width: 850px; margin: 0 auto; } /* Grid */ .sp-cruise-lines-grid-17 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cruise Line Cards */ .sp-cruise-line-card-17 { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .sp-cruise-line-card-17.visible-sp { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .sp-cruise-line-card-17::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* South Pacific colour sets */ .sp-card-lagoon-17::before { background: #00C2D6; } .sp-card-coral-17::before { background: #FF7A59; } .sp-card-blue-17::before { background: #1E88E5; } .sp-card-teal-17::before { background: #2BB673; } .sp-card-indigo-17::before { background: #5C7CE2; } .sp-card-green-17::before { background: #43A047; } .sp-card-cyan-17::before { background: #00ACC1; } .sp-card-sand-17::before { background: #F6B352; } .sp-card-gold-17::before { background: #FFC107; } .sp-card-lagoondeep-17::before { background: #009FB3; } .sp-card-ocean-17::before { background: #009FB3; } /* Deep lagoon blue */ .sp-card-reef-17::before { background: #3EC9A7; } /* Reef turquoise */ /* Icon */ .sp-cruise-line-icon-17 { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sp-cruise-line-name-17 { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 12px; } /* Summary */ .sp-cruise-line-summary-17 { font-size: 1.05rem; line-height: 1.7; color: #334E68; margin-bottom: 18px; } /* Points */ .sp-cruise-line-points-17 { list-style: none; padding: 0; margin: 0; } .sp-cruise-line-points-17 li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .sp-cruise-line-points-17 li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #00A8E8; font-size: 0.9rem; } /* Hover (premium glow) */ .sp-card-lagoon-17:hover, .sp-card-coral-17:hover, .sp-card-blue-17:hover, .sp-card-teal-17:hover, .sp-card-indigo-17:hover, .sp-card-green-17:hover, .sp-card-cyan-17:hover, .sp-card-sand-17:hover, .sp-card-gold-17:hover, .sp-card-lagoondeep-17:hover, .sp-card-ocean-17:hover, .sp-card-reef-17:hover { background: rgba(0, 168, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .sp-cruise-lines-title-17 { font-size: 2.2rem; } .sp-cruise-lines-intro-17 { font-size: 1.1rem; } .sp-cruise-line-card-17 { padding: 24px; } } /* ========================================================= */ /* SECTION 18 — South Pacific Ship Types Overview */ /* ========================================================= */ .sp-ship-types-overview-18 { width: 100%; padding: 90px 0; background: #F2FBFF; color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-ship-types-overview-18.revealed { opacity: 1; transform: translateY(0); } .sp-ship-types-inner-18 { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-ship-types-header-18 { text-align: center; margin-bottom: 60px; } .sp-ship-types-title-18 { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } .sp-ship-types-underline-18 { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00A8E8, #2BB673, #F6B352); } .sp-ship-types-intro-18 { font-size: 1.2rem; line-height: 1.8; color: #334E68; max-width: 850px; margin: 0 auto; } /* Grid */ .sp-ship-types-grid-18 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Cards */ .sp-ship-type-card-18 { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-ship-type-card-18.visible-sp { opacity: 1; transform: translateY(0); } /* Colour accents */ .sp-ship-type-card-18::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* 16 South Pacific colour accents */ .sp-card-lagoon-18::before { background: #00C2D6; } .sp-card-coral-18::before { background: #FF7A59; } .sp-card-blue-18::before { background: #1E88E5; } .sp-card-teal-18::before { background: #2BB673; } .sp-card-indigo-18::before { background: #5C7CE2; } .sp-card-green-18::before { background: #43A047; } .sp-card-cyan-18::before { background: #00ACC1; } .sp-card-sand-18::before { background: #F6B352; } .sp-card-gold-18::before { background: #FFC107; } .sp-card-lagoondeep-18::before { background: #009FB3; } .sp-card-ocean-18::before { background: #009FB3; } .sp-card-reef-18::before { background: #3EC9A7; } .sp-card-sky-18::before { background: #4FA3B0; } .sp-card-silver-18::before { background: #B0BEC5; } .sp-card-amber-18::before { background: #FFB74D; } .sp-card-red-18::before { background: #E57373; } /* Icon */ .sp-ship-type-icon-18 { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sp-ship-type-name-18 { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 12px; } /* Summary */ .sp-ship-type-summary-18 { font-size: 1.05rem; line-height: 1.7; color: #334E68; margin-bottom: 18px; } /* Points */ .sp-ship-type-points-18 { list-style: none; padding: 0; margin: 0; } .sp-ship-type-points-18 li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .sp-ship-type-points-18 li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #00A8E8; font-size: 0.9rem; } /* Hover (premium glow) — ALL 16 CARDS INCLUDED */ .sp-card-lagoon-18:hover, .sp-card-coral-18:hover, .sp-card-blue-18:hover, .sp-card-teal-18:hover, .sp-card-indigo-18:hover, .sp-card-green-18:hover, .sp-card-cyan-18:hover, .sp-card-sand-18:hover, .sp-card-gold-18:hover, .sp-card-lagoondeep-18:hover, .sp-card-ocean-18:hover, .sp-card-reef-18:hover, .sp-card-sky-18:hover, .sp-card-silver-18:hover, .sp-card-amber-18:hover, .sp-card-red-18:hover { background: rgba(0, 168, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .sp-ship-types-title-18 { font-size: 2.2rem; } .sp-ship-types-intro-18 { font-size: 1.1rem; } .sp-ship-type-card-18 { padding: 24px; } } /* ========================================================= */ /* SECTION 19 — South Pacific Cruise Duration Overview */ /* ========================================================= */ .sp-cruise-duration-overview-19 { width: 100%; padding: 90px 0; background: #F1FBFF; color: #102A43; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-cruise-duration-overview-19.revealed { opacity: 1; transform: translateY(0); } .sp-cruise-duration-inner-19 { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-cruise-duration-header-19 { text-align: center; margin-bottom: 60px; } .sp-cruise-duration-title-19 { font-size: 2.6rem; font-weight: 700; color: #102A43; margin-bottom: 16px; } /* Cinematic gradient underline */ .sp-cruise-duration-underline-19 { width: 120px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient(90deg, #00A8E8, #2BB673, #F6B352); } .sp-cruise-duration-intro-19 { font-size: 1.2rem; line-height: 1.8; color: #334E68; max-width: 850px; margin: 0 auto; } /* Grid */ .sp-cruise-duration-grid-19 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } /* Duration Cards */ .sp-cruise-duration-card-19 { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } /* Reveal */ .sp-cruise-duration-card-19.visible-sp { opacity: 1; transform: translateY(0); } /* Colour accents (top border glow) */ .sp-cruise-duration-card-19::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* South Pacific colour palette (16 cards) */ .sp-card-lagoon-19::before { background: #00C2D6; } .sp-card-coral-19::before { background: #FF7A59; } .sp-card-blue-19::before { background: #1E88E5; } .sp-card-teal-19::before { background: #2BB673; } .sp-card-indigo-19::before { background: #5C7CE2; } .sp-card-green-19::before { background: #43A047; } .sp-card-cyan-19::before { background: #00ACC1; } .sp-card-sand-19::before { background: #F6B352; } .sp-card-gold-19::before { background: #FFC107; } .sp-card-lagoondeep-19::before { background: #009FB3; } .sp-card-ocean-19::before { background: #009FB3; } .sp-card-reef-19::before { background: #3EC9A7; } .sp-card-sky-19::before { background: #4FA3B0; } .sp-card-silver-19::before { background: #B0BEC5; } .sp-card-amber-19::before { background: #FFB74D; } .sp-card-red-19::before { background: #E57373; } /* Icon */ .sp-cruise-duration-icon-19 { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sp-cruise-duration-name-19 { font-size: 1.4rem; font-weight: 700; color: #102A43; margin-bottom: 12px; } /* Summary */ .sp-cruise-duration-summary-19 { font-size: 1.05rem; line-height: 1.7; color: #334E68; margin-bottom: 18px; } /* Points */ .sp-cruise-duration-points-19 { list-style: none; padding: 0; margin: 0; } .sp-cruise-duration-points-19 li { margin-bottom: 8px; font-size: 1rem; color: #102A43; padding-left: 14px; position: relative; } .sp-cruise-duration-points-19 li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #00A8E8; font-size: 0.9rem; } /* Hover (premium glow) — all 16 cards */ .sp-card-lagoon-19:hover, .sp-card-coral-19:hover, .sp-card-blue-19:hover, .sp-card-teal-19:hover, .sp-card-indigo-19:hover, .sp-card-green-19:hover, .sp-card-cyan-19:hover, .sp-card-sand-19:hover, .sp-card-gold-19:hover, .sp-card-lagoondeep-19:hover, .sp-card-ocean-19:hover, .sp-card-reef-19:hover, .sp-card-sky-19:hover, .sp-card-silver-19:hover, .sp-card-amber-19:hover, .sp-card-red-19:hover { background: rgba(0, 168, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .sp-cruise-duration-title-19 { font-size: 2.2rem; } .sp-cruise-duration-intro-19 { font-size: 1.1rem; } .sp-cruise-duration-card-19 { padding: 24px; } } /* ========================================================= */ /* SECTION 20 — South Pacific Cruise Price Range Overview */ /* ========================================================= */ .sp-cruise-price-overview-20 { width: 100%; padding: 90px 0; background: #EAFBFF; /* South Pacific light lagoon tone */ color: #12354A; /* FIX: Section visible by default */ opacity: 1; transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; } .sp-cruise-price-overview-20.revealed { /* Animation only */ opacity: 1; transform: translateY(0); } .sp-cruise-price-inner-20 { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .sp-cruise-price-header-20 { text-align: center; margin-bottom: 60px; } .sp-cruise-price-title-20 { font-size: 2.6rem; font-weight: 700; color: #0A3A4A; margin-bottom: 16px; } /* Cinematic gradient underline */ .sp-cruise-price-underline-20 { width: 140px; height: 6px; margin: 0 auto 25px auto; border-radius: 6px; background: linear-gradient( 90deg, #00C2D6, #2BB673, #F6B352, #4FA3B0 ); } .sp-cruise-price-intro-20 { font-size: 1.2rem; line-height: 1.8; color: #345268; max-width: 850px; margin: 0 auto; } /* Grid */ .sp-cruise-price-grid-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } /* Price Cards */ .sp-cruise-price-card-20 { background: #FFFFFF; border-radius: 18px; padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); position: relative; overflow: hidden; /* FIX: Cards visible by default */ opacity: 1; transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; } /* Animation only */ .sp-cruise-price-card-20.visible-sp { opacity: 1; transform: translateY(0); } /* Top border glow */ .sp-cruise-price-card-20::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 6px 6px 0 0; } /* ========================================================= */ /* 18‑colour South Pacific palette (ALL CARDS) */ /* ========================================================= */ .sp-card-lagoon-20::before { background: #00C2D6; } .sp-card-coral-20::before { background: #FF7A59; } .sp-card-blue-20::before { background: #1E88E5; } .sp-card-teal-20::before { background: #2BB673; } .sp-card-indigo-20::before { background: #5C7CE2; } .sp-card-green-20::before { background: #43A047; } .sp-card-cyan-20::before { background: #00ACC1; } .sp-card-sand-20::before { background: #F6B352; } .sp-card-gold-20::before { background: #FFC107; } .sp-card-lagoondeep-20::before { background: #009FB3; } .sp-card-ocean-20::before { background: #4FA3B0; } .sp-card-reef-20::before { background: #3EC9A7; } .sp-card-sky-20::before { background: #4FA3B0; } .sp-card-silver-20::before { background: #B0BEC5; } .sp-card-amber-20::before { background: #FFB74D; } .sp-card-red-20::before { background: #E57373; } /* NEW CARD 17 */ .sp-card-luxury-20::before { background: #C49BFF; } /* NEW CARD 18 */ .sp-card-inclusive-20::before { background: #FFCC66; } /* Icon */ .sp-cruise-price-icon-20 { font-size: 2.4rem; margin-bottom: 14px; } /* Name */ .sp-cruise-price-name-20 { font-size: 1.4rem; font-weight: 700; color: #0A3A4A; margin-bottom: 18px; } /* Layer Titles */ .sp-cruise-price-layer-title-20 { font-size: 1.15rem; font-weight: 700; color: #263238; margin-bottom: 10px; } /* Layer Text */ .sp-cruise-price-layer-text-20 { font-size: 1.05rem; line-height: 1.7; color: #345268; margin-bottom: 10px; } .sp-cruise-price-layer-note-20 { font-size: 0.95rem; color: #546E7A; margin-bottom: 18px; } /* Cabin List */ .sp-cruise-price-cabins-20 { list-style: none; padding: 0; margin: 0; } .sp-cruise-price-cabins-20 li { margin-bottom: 8px; font-size: 1rem; color: #12354A; padding-left: 14px; position: relative; } .sp-cruise-price-cabins-20 li::before { content: "◆"; position: absolute; left: 0; top: 0; color: #00A8E8; font-size: 0.9rem; } /* ========================================================= */ /* Hover effects — ALL 18 cards */ /* ========================================================= */ .sp-card-lagoon-20:hover, .sp-card-coral-20:hover, .sp-card-blue-20:hover, .sp-card-teal-20:hover, .sp-card-indigo-20:hover, .sp-card-green-20:hover, .sp-card-cyan-20:hover, .sp-card-sand-20:hover, .sp-card-gold-20:hover, .sp-card-lagoondeep-20:hover, .sp-card-ocean-20:hover, .sp-card-reef-20:hover, .sp-card-sky-20:hover, .sp-card-silver-20:hover, .sp-card-amber-20:hover, .sp-card-red-20:hover, .sp-card-luxury-20:hover, .sp-card-inclusive-20:hover { background: rgba(0, 168, 232, 0.06); transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: all 0.25s ease; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .sp-cruise-price-title-20 { font-size: 2.2rem; } .sp-cruise-price-intro-20 { font-size: 1.1rem; } .sp-cruise-price-card-20 { padding: 24px; } } /* ========================================================= */ /* SECTION 21 — South Pacific Cruise Best Value Tips */ /* ========================================================= */ .section-21-southpac { padding: 80px 0; background: #EAFBFF; /* light lagoon backdrop, different from Section 20 */ } .southpac-section-21-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A4A; } .southpac-section-subtitle { font-size: 1.2rem; text-align: center; color: #345268; margin-bottom: 50px; } /* GRID */ .southpac-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .southpac-value-tip-card { padding: 28px; border-radius: 14px; color: #FFFFFF; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .southpac-value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .southpac-value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR LAGOON & CORAL SOUTH PACIFIC PALETTE */ /* ========================================================= */ /* 1 — Lagoon Turquoise */ .sp-card-21-1 { background: linear-gradient(135deg, #00C7D9, #4FA3B0); } /* 2 — Coral Orange */ .sp-card-21-2 { background: linear-gradient(135deg, #FF7A4F, #E85C4A); } /* 3 — Reef Green */ .sp-card-21-3 { background: linear-gradient(135deg, #2BB673, #4DD4A3); } /* 4 — Lagoon Blue */ .sp-card-21-4 { background: linear-gradient(135deg, #1E88E5, #4FA3B0); } /* 5 — Sand Gold */ .sp-card-21-5 { background: linear-gradient(135deg, #F6C65B, #FFC36A); } /* 6 — Hibiscus Pink */ .sp-card-21-6 { background: linear-gradient(135deg, #FF5E9A, #FF9F7F); } /* 7 — Aqua Mist */ .sp-card-21-7 { background: linear-gradient(135deg, #7FE8D6, #4DD4A3); } /* 8 — Sunset Peach */ .sp-card-21-8 { background: linear-gradient(135deg, #FF9F7F, #FF7A4F); } /* 9 — Reef Mint */ .sp-card-21-9 { background: linear-gradient(135deg, #4DD4A3, #00C7D9); } /* 10 — Ocean Sky */ .sp-card-21-10 { background: linear-gradient(135deg, #4FA3B0, #1E88E5); } /* 11 — Deep Coral Red */ .sp-card-21-11 { background: linear-gradient(135deg, #E85C4A, #C62828); } /* 12 — Tropical Amber */ .sp-card-21-12 { background: linear-gradient(135deg, #FFC36A, #F6C65B); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .southpac-hover-21:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .southpac-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — South Pacific Cultural Immersion (CSS) */ /* ========================================================= */ .section-22-southpac { padding: 80px 0; background: #F7FBFF; /* soft pastel backdrop, distinct from Section 21 */ } .southpac-section-22-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A4A; } .southpac-section-subtitle { font-size: 1.2rem; text-align: center; color: #345268; margin-bottom: 50px; } /* GRID */ .southpac-immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .southpac-immersion-card { padding: 28px; border-radius: 14px; color: #000000; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .southpac-immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #000000; } .southpac-immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR PACIFIC ISLANDS PASTEL HERITAGE PALETTE */ /* ========================================================= */ /* 1 — Pastel Sand */ .sp-immersion-22-1 { background: linear-gradient(135deg, #F3E2C5, #E4C9A1); } /* 2 — Soft Coral */ .sp-immersion-22-2 { background: linear-gradient(135deg, #FFB3A7, #FF8F80); } /* 3 — Mint Reef */ .sp-immersion-22-3 { background: linear-gradient(135deg, #A8E6CF, #7FD8B8); } /* 4 — Sky Aqua */ .sp-immersion-22-4 { background: linear-gradient(135deg, #A0E4FF, #6FC9F5); } /* 5 — Pearl Shell */ .sp-immersion-22-5 { background: linear-gradient(135deg, #E8E2DD, #D6CCC4); } /* 6 — Warm Peach */ .sp-immersion-22-6 { background: linear-gradient(135deg, #FFC9A6, #FFAA7F); } /* 7 — Soft Sand & Mint */ .sp-immersion-22-7 { background: linear-gradient(135deg, #F3E2C5, #A8E6CF); } /* 8 — Coral & Peach */ .sp-immersion-22-8 { background: linear-gradient(135deg, #FFB3A7, #FFC9A6); } /* 9 — Reef Mint & Aqua */ .sp-immersion-22-9 { background: linear-gradient(135deg, #A8E6CF, #A0E4FF); } /* 10 — Aqua & Pearl */ .sp-immersion-22-10 { background: linear-gradient(135deg, #A0E4FF, #E8E2DD); } /* 11 — Warm Peach & Coral */ .sp-immersion-22-11 { background: linear-gradient(135deg, #FFC9A6, #FF8F80); } /* 12 — Sand & Shell */ .sp-immersion-22-12 { background: linear-gradient(135deg, #F3E2C5, #D6CCC4); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .southpac-hover-22:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .southpac-immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — South Pacific Wildlife & Nature (CSS) */ /* ========================================================= */ .section-23-southpac { padding: 80px 0; background: #F6FCFF; /* crystal-clear pastel aqua */ } .southpac-section-23-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A4A; } .southpac-section-subtitle { font-size: 1.2rem; text-align: center; color: #345268; margin-bottom: 50px; } /* GRID */ .southpac-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .southpac-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } /* TEXT */ .southpac-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .southpac-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .southpac-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; transition: transform 0.35s ease; } .southpac-wildlife-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH PACIFIC (NEW SET) */ /* ========================================================= */ .sp-img-reef-shallows { background-image: url('../cruise-images/cruise-region-subpages-images/sp-reef-shallows.webp'); } .sp-img-ray-garden { background-image: url('../cruise-images/cruise-region-subpages-images/sp-ray-garden.webp'); } .sp-img-volcanic-coast { background-image: url('../cruise-images/cruise-region-subpages-images/sp-volcanic-coast.webp'); } .sp-img-tropical-forest { background-image: url('../cruise-images/cruise-region-subpages-images/sp-tropical-forest.webp'); } .sp-img-waterfall-pool { background-image: url('../cruise-images/cruise-region-subpages-images/sp-waterfall-pool.webp'); } .sp-img-frigatebird { background-image: url('../cruise-images/cruise-region-subpages-images/sp-frigatebird.webp'); } .sp-img-lagoon-sandbar { background-image: url('../cruise-images/cruise-region-subpages-images/sp-lagoon-sandbar.webp'); } .sp-img-mangrove-clear { background-image: url('../cruise-images/cruise-region-subpages-images/sp-mangrove-clear.webp'); } .sp-img-coastal-view { background-image: url('../cruise-images/cruise-region-subpages-images/sp-coastal-view.webp'); } .sp-img-humpback-season { background-image: url('../cruise-images/cruise-region-subpages-images/sp-humpback-season.webp'); } .sp-img-eco-walk { background-image: url('../cruise-images/cruise-region-subpages-images/sp-eco-walk.webp'); } .sp-img-nature-photo { background-image: url('../cruise-images/cruise-region-subpages-images/sp-nature-photo.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM GRADIENT PALETTE (NEW) */ /* ========================================================= */ .sp-card-23-1 { background: linear-gradient(135deg, #CFF6FF, #A8E8F5); } .sp-card-23-2 { background: linear-gradient(135deg, #D8FFF2, #B2F5DE); } .sp-card-23-3 { background: linear-gradient(135deg, #FFE9C7, #FFD9A3); } .sp-card-23-4 { background: linear-gradient(135deg, #E3F8E8, #C4EED0); } .sp-card-23-5 { background: linear-gradient(135deg, #F9F3E1, #F2E4C7); } .sp-card-23-6 { background: linear-gradient(135deg, #E8F7FF, #CDEBFA); } .sp-card-23-7 { background: linear-gradient(135deg, #FFF2D6, #FFE3B3); } .sp-card-23-8 { background: linear-gradient(135deg, #DFFAF5, #C3F0E8); } .sp-card-23-9 { background: linear-gradient(135deg, #F2E8D8, #E4D4C0); } .sp-card-23-10 { background: linear-gradient(135deg, #E3F1FF, #C9E0F5); } .sp-card-23-11 { background: linear-gradient(135deg, #EAF7E6, #D4EACF); } .sp-card-23-12 { background: linear-gradient(135deg, #FFF4E6, #F7E6D2); } /* HOVER */ .southpac-hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .southpac-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — South Pacific Cultural Immersion (CSS) */ /* ========================================================= */ .southpac-cultural-immersion-section-24.section-24 { padding: 80px 0; background: #F3FBFF; /* light lagoon sky */ } .southpac-cultural-immersion-24-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-cultural-immersion-24-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0C3A4A; /* deep lagoon teal, not navy */ } .southpac-cultural-immersion-24-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A5A; margin-bottom: 50px; } /* GRID */ .southpac-cultural-immersion-24-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .southpac-cultural-immersion-24-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .southpac-cultural-immersion-24-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .southpac-cultural-immersion-24-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.96; } /* IMAGE BLOCK */ .southpac-cultural-immersion-24-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE BLOCK */ .southpac-cultural-immersion-24-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — SOUTH PACIFIC SECTION 24 */ .southpac-cultural-immersion-24-image { transition: transform 0.35s ease; } .southpac-cultural-immersion-24-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH PACIFIC CULTURAL IMMERSION */ /* ========================================================= */ .southpac-cultural-immersion-img-kava-ceremony { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-kava-ceremony.webp'); } .southpac-cultural-immersion-img-tapa-cloth { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-tapa-cloth.webp'); } .southpac-cultural-immersion-img-wood-carving { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-wood-carving.webp'); } .southpac-cultural-immersion-img-weaving-mats { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-weaving-mats.webp'); } .southpac-cultural-immersion-img-fale-village { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-fale-village.webp'); } .southpac-cultural-immersion-img-canoe-building { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-canoe-building.webp'); } .southpac-cultural-immersion-img-oral-storytelling { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-oral-storytelling.webp'); } .southpac-cultural-immersion-img-shell-jewellery { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-shell-jewellery.webp'); } .southpac-cultural-immersion-img-coconut-preparation { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-coconut-preparation.webp'); } .southpac-cultural-immersion-img-island-cooking { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-island-cooking.webp'); } .southpac-cultural-immersion-img-navigation-stars { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-navigation-stars.webp'); } .southpac-cultural-immersion-img-community-life { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cultural-community-life.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM SOUTH PACIFIC GRADIENT PALETTE */ /* (No deep purple, no near-black, no heavy navy) */ /* ========================================================= */ .southpac-cultural-immersion-24-card-1 { background: linear-gradient(135deg, #D6F0FF, #B8E4F7); /* lagoon sky */ } .southpac-cultural-immersion-24-card-2 { background: linear-gradient(135deg, #FFE9CC, #FFD3A3); /* warm sand & tapa tones */ } .southpac-cultural-immersion-24-card-3 { background: linear-gradient(135deg, #E8F3E0, #CDE6C4); /* soft reef greens */ } .southpac-cultural-immersion-24-card-4 { background: linear-gradient(135deg, #FFF1DD, #FFE0B8); /* woven mat warmth */ } .southpac-cultural-immersion-24-card-5 { background: linear-gradient(135deg, #E9F7FF, #CFE8F5); /* coastal village haze */ } .southpac-cultural-immersion-24-card-6 { background: linear-gradient(135deg, #FDE6E0, #F9C9BC); /* coral canoe tones */ } .southpac-cultural-immersion-24-card-7 { background: linear-gradient(135deg, #F7F0E4, #E6D7C4); /* storytelling evening‑free daylight */ } .southpac-cultural-immersion-24-card-8 { background: linear-gradient(135deg, #FFEAF2, #F9CFE0); /* shell jewellery blush */ } .southpac-cultural-immersion-24-card-9 { background: linear-gradient(135deg, #FFF4DD, #FFE4B5); /* coconut cream & husk */ } .southpac-cultural-immersion-24-card-10 { background: linear-gradient(135deg, #E9F5FF, #CDE3F5); /* clear cooking daylight */ } .southpac-cultural-immersion-24-card-11 { background: linear-gradient(135deg, #E6F5F7, #C8E5EA); /* soft navigation blues */ } .southpac-cultural-immersion-24-card-12 { background: linear-gradient(135deg, #F3F0E8, #E1D7C7); /* warm community tones */ } /* REVEAL & HOVER STATES */ .southpac-cultural-immersion-24-card.southpac-cultural-immersion-24-revealed { opacity: 1; transform: translateY(0); } .southpac-cultural-immersion-24-card { opacity: 0; } .southpac-cultural-immersion-24-hover:hover, .southpac-cultural-immersion-24-card.southpac-cultural-immersion-24-hovered { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .southpac-cultural-immersion-24-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-cultural-immersion-24-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-cultural-immersion-24-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — South Pacific Festivals & Seasonal Events */ /* ========================================================= */ .section-25.southpac-festivals { padding: 80px 0; background: #F3FBFF; /* light lagoon sky */ } .southpac-section-25-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0C3A4A; /* lagoon teal */ } .southpac-section-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A5A; margin-bottom: 50px; } /* GRID */ .southpac-festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .southpac-festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .southpac-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .southpac-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.96; } /* IMAGE BLOCK */ .southpac-festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; transition: transform 0.35s ease; } .southpac-festival-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH PACIFIC FESTIVALS */ /* ========================================================= */ .southpac-img-heiva-festival { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-heiva.webp'); } .southpac-img-fire-knife-dance { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-fire-knife.webp'); } .southpac-img-island-parade { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-island-parade.webp'); } .southpac-img-community-feast { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-community-feast.webp'); } .southpac-img-floral-festival { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-floral.webp'); } .southpac-img-canoe-regatta { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-canoe-regatta.webp'); } .southpac-img-cultural-street-day { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-cultural-street.webp'); } .southpac-img-harvest-day { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-harvest-day.webp'); } .southpac-img-coastal-decorations { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-coastal-decorations.webp'); } .southpac-img-cultural-center-day { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-cultural-center.webp'); } .southpac-img-flower-garland-market { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-flower-garland-market.webp'); } .southpac-img-festival-route { background-image: url('../cruise-images/cruise-region-subpages-images/sp-festival-route.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM SOUTH PACIFIC GRADIENT PALETTE */ /* ========================================================= */ .southpac-festival-card-25-1 { background: linear-gradient(135deg, #FFE9CC, #FFD3A3); } .southpac-festival-card-25-2 { background: linear-gradient(135deg, #F8D4D4, #F1B1B1); } .southpac-festival-card-25-3 { background: linear-gradient(135deg, #D6F0FF, #B8E4F7); } .southpac-festival-card-25-4 { background: linear-gradient(135deg, #FFF4DD, #FFE4B5); } .southpac-festival-card-25-5 { background: linear-gradient(135deg, #FFEAF2, #F9CFE0); } .southpac-festival-card-25-6 { background: linear-gradient(135deg, #E8F3E0, #CDE6C4); } .southpac-festival-card-25-7 { background: linear-gradient(135deg, #F7F0E4, #E6D7C4); } .southpac-festival-card-25-8 { background: linear-gradient(135deg, #FDE6E0, #F9C9BC); } .southpac-festival-card-25-9 { background: linear-gradient(135deg, #E9F7FF, #CFE8F5); } .southpac-festival-card-25-10 { background: linear-gradient(135deg, #E6F5F7, #C8E5EA); } .southpac-festival-card-25-11 { background: linear-gradient(135deg, #F3F0E8, #E1D7C7); } .southpac-festival-card-25-12 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } /* HOVER */ .southpac-hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .southpac-festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — South Pacific Cruise Cuisine (CSS) */ /* ========================================================= */ .section-26.southpac-cuisine { padding: 80px 0; background: #F3FBFF; /* bright lagoon sky */ } .southpac-section-26-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0C3A4A; /* lagoon teal */ } .southpac-section-subtitle { font-size: 1.2rem; text-align: center; color: #2F4A5A; margin-bottom: 50px; } /* GRID */ .southpac-cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .southpac-cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .southpac-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .southpac-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.96; } /* IMAGE BLOCK */ .southpac-cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; transition: transform 0.35s ease; } .southpac-cuisine-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — SOUTH PACIFIC CUISINE */ /* ========================================================= */ .sp-img-polynesian-poke { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-polynesian-poke.webp'); } .sp-img-fijian-kokoda { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-fijian-kokoda.webp'); } .sp-img-samoan-umu { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-samoan-umu.webp'); } .sp-img-tongan-lu-pulu { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-tongan-lu-pulu.webp'); } .sp-img-cookislands-ika-mata { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-cookislands-ika-mata.webp'); } .sp-img-breadfruit-taro { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-breadfruit-taro.webp'); } .sp-img-lovo-earth-oven { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-lovo-earth-oven.webp'); } .sp-img-island-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-island-seafood.webp'); } .sp-img-coconut-cream-dishes { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-coconut-cream-dishes.webp'); } .sp-img-tropical-salads { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-tropical-salads.webp'); } .sp-img-pacific-fusion { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-pacific-fusion.webp'); } .sp-img-coconut-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/sp-cuisine-coconut-desserts.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM SOUTH PACIFIC GRADIENT PALETTE */ /* ========================================================= */ .sp-card-26-1 { background: linear-gradient(135deg, #D6F0FF, #B8E4F7); } .sp-card-26-2 { background: linear-gradient(135deg, #FFE9CC, #FFD3A3); } .sp-card-26-3 { background: linear-gradient(135deg, #E8F3E0, #CDE6C4); } .sp-card-26-4 { background: linear-gradient(135deg, #FFF4DD, #FFE4B5); } .sp-card-26-5 { background: linear-gradient(135deg, #FFEAF2, #F9CFE0); } .sp-card-26-6 { background: linear-gradient(135deg, #F7F0E4, #E6D7C4); } .sp-card-26-7 { background: linear-gradient(135deg, #FDE6E0, #F9C9BC); } .sp-card-26-8 { background: linear-gradient(135deg, #E9F7FF, #CFE8F5); } .sp-card-26-9 { background: linear-gradient(135deg, #E6F5F7, #C8E5EA); } .sp-card-26-10 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } .sp-card-26-11 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .sp-card-26-12 { background: linear-gradient(135deg, #F3F0E8, #E1D7C7); } /* HOVER */ .sp-hover-26:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .southpac-cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — South Pacific Shore Excursions (CSS) */ /* ========================================================= */ .southpac-section-27 { padding: 80px 0; background: #f3fbff; /* light, clean, South Pacific‑style background */ } .southpac-section-27-wrapper { max-width: 1300px; margin: 0 auto; } .southpac-section-27 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .southpac-section-27 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .southpac-excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .southpac-excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); padding: 0; border: none; } /* IMAGE BLOCK */ .southpac-excursion-card .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; position: relative; z-index: 10; } /* IMAGE ZOOM — SOUTH PACIFIC SECTION 27 */ .southpac-excursion-card .excursion-image { transition: transform 0.35s ease; } .southpac-excursion-card .excursion-image:hover { transform: scale(1.15); } /* TEXT */ .southpac-excursion-card h3, .southpac-excursion-card p { position: relative; z-index: 20; text-align: center; margin-left: 0; margin-right: 0; width: 100%; } .southpac-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; /* dark text with strong contrast */ } .southpac-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #333; opacity: 0.95; } /* REVEAL */ .southpac-section-27.region-reveal-active .southpac-excursion-card.sp-card-27-revealed { opacity: 1; transform: translateY(0); } /* BACKGROUND IMAGES — SOUTH PACIFIC */ .sp-image-lagoon-reef-snorkel { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-lagoon-reef-snorkel-excursion.webp'); } .sp-image-island-hopping-boat-trips { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-island-hopping-boat-trips.webp'); } .sp-image-rainforest-walks { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-rainforest-walks-viewpoints.webp'); } .sp-image-waterfall-hikes { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-waterfall-hikes-excursions.webp'); } .sp-image-coastal-markets { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-coastal-markets-food-stops.webp'); } .sp-image-cultural-village-experiences { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-cultural-village-experiences.webp'); } .sp-image-marine-wildlife-cruises { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-marine-wildlife-cruises.webp'); } .sp-image-volcanic-landscape-tours { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-volcanic-landscape-tours.webp'); } .sp-image-lagoon-cruises-sandbars { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-lagoon-cruises-sandbars.webp'); } .sp-image-sacred-sites-heritage { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-sacred-sites-heritage-walks.webp'); } .sp-image-coastal-relaxation-beach-days { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-coastal-relaxation-beach-days.webp'); } .sp-image-private-motu-experiences { background-image: url('../cruise-images/cruise-region-subpages-images/south-pacific-private-motu-small-group-experiences.webp'); } /* GRADIENTS — LIGHT–MEDIUM, NO DEEP PURPLE/NAVY */ .sp-card-27-1 { background: linear-gradient(135deg, #7fd6e5, #45b7cf); } .sp-card-27-2 { background: linear-gradient(135deg, #ffe29a, #ffc46b); } .sp-card-27-3 { background: linear-gradient(135deg, #c6e3a8, #93c676); } .sp-card-27-4 { background: linear-gradient(135deg, #f9b68f, #f28a5a); } .sp-card-27-5 { background: linear-gradient(135deg, #f7c9a6, #f29a6b); } .sp-card-27-6 { background: linear-gradient(135deg, #f5c0d4, #e89ab8); } .sp-card-27-7 { background: linear-gradient(135deg, #8fd0f2, #5bb3de); } .sp-card-27-8 { background: linear-gradient(135deg, #ffd27a, #ffac3f); } .sp-card-27-9 { background: linear-gradient(135deg, #b3e6ff, #7fcaf0); } .sp-card-27-10 { background: linear-gradient(135deg, #e8e3b8, #cfc47f); } .sp-card-27-11 { background: linear-gradient(135deg, #ffddb0, #ffb97a); } .sp-card-27-12 { background: linear-gradient(135deg, #b8f0d4, #7fd6a8); } /* HOVER */ .sp-hover-27:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .southpac-excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .southpac-excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .southpac-excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 28 — South Pacific Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .southpac-section-28 { padding: 80px 0; background: #f2fcff; /* clean, light aqua South Pacific background */ } .southpac-transfers-inner { max-width: 1300px; margin: 0 auto; } .southpac-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .southpac-transfers-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 20px; } /* GRID */ .southpac-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD BASE */ .southpac-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #102a43; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #444; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; } /* SOUTH PACIFIC GRADIENTS — LIGHT–MEDIUM ONLY */ .sp-transfer-card-town { background: linear-gradient(135deg, #7fd6e5, #45b7cf); color: #fff; } .sp-transfer-card-airport { background: linear-gradient(135deg, #ffe29a, #ffc46b); color: #fff; } .sp-transfer-card-cruiseline { background: linear-gradient(135deg, #9bd58a, #6fbf5a); color: #fff; } .sp-transfer-card-local { background: linear-gradient(135deg, #b3c7ff, #7f9ef0); color: #fff; } .sp-transfer-card-access { background: linear-gradient(135deg, #f5c0d4, #e89ab8); color: #fff; } .sp-transfer-card-planning { background: linear-gradient(135deg, #f9b68f, #f28a5a); color: #fff; } /* HOVER */ .southpac-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .southpac-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .southpac-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 29 — South Pacific Cruise FAQ (CSS) */ /* ========================================================= */ .sp-section-29 { padding: 80px 0; background: #f2fcff; /* light aqua South Pacific background */ } .southpac-faq-inner { max-width: 1100px; margin: 0 auto; } .southpac-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .southpac-faq-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 40px; } /* Accordion Container */ .southpac-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .southpac-faq-item { background: #f7fffe; /* light–medium, high contrast */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .southpac-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #102a43; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .southpac-faq-question:hover { background: #e4f8ff; } /* Arrow Icon */ .southpac-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .southpac-faq-item.active .southpac-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .southpac-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .southpac-faq-answer p { font-size: 1rem; color: #444; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .southpac-faq-item.active .southpac-faq-answer { max-height: 320px; } /* Responsive */ @media (max-width: 800px) { .southpac-faq-title { font-size: 2rem; } .southpac-faq-question { font-size: 1.05rem; } } /* --------------------------------------------- section 3 HERO BACKGROUND (Transatlantic hero image) --------------------------------------------- */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .hero-region .hero-background { background-image: url('../cruise-images/hero/transatlantic-cruise-guide-subpage-hero.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Hero height */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .hero-region { min-height: 500px; position: relative; display: flex; align-items: center; justify-content: center; } /* Hero content */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .hero-region .hero-content { position: relative; z-index: 2; text-align: center; color: #ffffff; margin-top: -180px; /* moves heading + paragraph UP */ } /*--------------------------------------------- SECTION 4 — Overview (Transatlantic) Option B — Ocean Teal + Soft Sky Blue ---------------------------------------------*/ .page-cruise-subpage.transatlantic-subpage .section-overview { text-align: center; } /* Heading */ .page-cruise-subpage.transatlantic-subpage .section-overview .section-title { font-size: 2rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 20px; text-align: center; width: 100%; } /* Intro paragraph */ .page-cruise-subpage.transatlantic-subpage .section-overview .section-intro { font-size: 1.15rem; line-height: 1.7; color: #1C6E73; /* Ocean Teal */ max-width: 820px; margin: 0 auto 32px; } /* Highlight row */ .page-cruise-subpage.transatlantic-subpage .overview-highlights { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } /* Highlight items */ .page-cruise-subpage.transatlantic-subpage .overview-highlights .highlight-item { background: #DFF7F9; /* Seafoam Light */ padding: 14px 20px; border-radius: 10px; font-weight: 600; color: #0F4C5C; /* Deep Aqua */ display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* Highlight icons */ .page-cruise-subpage.transatlantic-subpage .highlight-icon { color: #1C6E73; /* Ocean Teal */ font-weight: 700; } /* --------------------------------------------- SECTION 5 — Featured Cruise Lines Grid (Transatlantic) Option B — Ocean Teal + Soft Sky Blue --------------------------------------------- */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .section-featured-cruise-lines { padding: 60px 0; background: #DFF7F9; /* Seafoam Light backdrop */ width: 100%; } /* Inner wrapper */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* Section Title */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-title { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #0F4C5C; /* Deep Aqua */ text-align: center; margin-bottom: 18px; } /* Section Intro */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .section-featured-cruise-lines .section-intro { font-size: 1.1rem; line-height: 1.6; color: #1C6E73; /* Ocean Teal */ max-width: 820px; margin: 0 auto 34px; text-align: center; font-weight: 500; } /* GRID — EXACT 3×3 LAYOUT */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; width: 100%; box-sizing: border-box; } /* CARD BASE */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-card { background: linear-gradient(180deg, #A7D9F5 0%, #FFFFFF 100%); /* Soft Sky Blue → White */ border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; transition: transform 0.30s ease, box-shadow 0.30s ease; } /* LOGO BANNER */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-logo-banner { width: 230px; height: 110px; margin: 0 auto 16px; background: #FFFFFF; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-logo { max-width: 100%; max-height: 100%; object-fit: contain; } /* CRUISE LINE NAME */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-name { font-size: 1.35rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ text-align: center; } /* DESCRIPTION */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-description { font-size: 1rem; line-height: 1.6; color: #1C6E73; /* Ocean Teal */ text-align: center; } /* TAGS */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-tags { display: flex; gap: 8px; justify-content: center; } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .tag { background: #0F4C5C; /* Deep Aqua */ color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* HIGHLIGHTS */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-highlights li { font-size: 0.95rem; font-weight: 600; color: #0F4C5C; /* Deep Aqua */ display: flex; align-items: center; gap: 8px; } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .highlight-icon { color: #1C6E73; /* Ocean Teal */ font-weight: 700; } /* BUTTONS */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-link { background: #1C6E73; /* Ocean Teal */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .secondary-btn { background: #0F4C5C; /* Deep Aqua */ color: #FFFFFF; padding: 10px 18px; border-radius: 10px; text-align: center; font-weight: 700; display: block; transition: transform 0.25s ease, background 0.25s ease; } /* HOVER EFFECTS */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-link:hover { background: #0F4C5C; transform: translateY(-2px); } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .secondary-btn:hover { background: #083341; transform: translateY(-2px); } /* HEADER UNDERLINE */ .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-header { position: relative; } .page-cruise-subpage.transatlantic-subpage.cruise-lines-subpage .cruise-line-header::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 38px; height: 2px; background-color: #1C6E73; /* Ocean Teal */ border-radius: 2px; } /* ========================================================= */ /* SECTION 6 — Transatlantic Cruise Experience Overview */ /* ========================================================= */ .transatlantic-experiences-and-overview-section-6 { width: 100%; padding: 80px 0; background: #DFF7F9; /* Seafoam Light */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-experiences-and-overview-section-6.revealed { opacity: 1; transform: translateY(0); } .transatlantic-experiences-and-overview-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-experiences-and-overview-header { text-align: center; margin-bottom: 40px; } .transatlantic-experiences-and-overview-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 20px; } .transatlantic-experiences-and-overview-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Ocean Teal */ margin-bottom: 14px; } /* List layout */ .transatlantic-experiences-and-overview-list { list-style: none; margin: 0; padding: 0; } .transatlantic-experiences-and-overview-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0F4C5C; /* Deep Aqua */ } /* Emoji icon */ .ta-experience-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .ta-experience-text { display: inline-block; } /* Region / theme name styling */ .ta-experience-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .ta-experience-classicliner { color: #1C6E73; /* Ocean Teal */ } .ta-experience-opensea { color: #0F4C5C; /* Deep Aqua */ } .ta-experience-eastwest { color: #A7D9F5; /* Soft Sky Blue */ } .ta-experience-ports { color: #083341; /* Deep Atlantic Navy */ } .ta-experience-scenic { color: #F57C00; /* Sunset Orange */ } .ta-experience-seadays { color: #4FA3B0; /* Horizon Blue */ } /* ========================================================= */ /* SECTION 7 — Transatlantic Route Atmosphere Overview */ /* ========================================================= */ .transatlantic-experiences-and-overview-section-7 { width: 100%; padding: 80px 0; background: #A7D9F5; /* Soft Sky Blue */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-experiences-and-overview-section-7.revealed { opacity: 1; transform: translateY(0); } .transatlantic-experiences-and-overview-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-experiences-and-overview-header { text-align: center; margin-bottom: 40px; } .transatlantic-experiences-and-overview-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; margin-bottom: 20px; } .transatlantic-experiences-and-overview-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Ocean Teal */ margin-bottom: 14px; } /* List layout */ .transatlantic-experiences-and-overview-list { list-style: none; margin: 0; padding: 0; } .transatlantic-experiences-and-overview-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0F4C5C; } /* Emoji icon */ .ta-experience-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .ta-experience-text { display: inline-block; } /* Region / theme name styling */ .ta-experience-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .ta-route-europeports { color: #083341; /* Deep Atlantic Navy */ } .ta-route-atlantic { color: #0F4C5C; /* Deep Aqua */ } .ta-route-weather { color: #1C6E73; /* Ocean Teal */ } .ta-route-repositioning { color: #4FA3B0; /* Horizon Blue */ } .ta-route-navigation { color: #0F4C5C; /* Soft Sky Blue */ } .ta-route-scenic { color: #F57C00; /* Sunset Orange */ } .ta-route-usports { color: #00838F; /* Atlantic Port Teal */ } /* ========================================================= */ /* SECTION 8 — Transatlantic Port & Crossing Styles Overview */ /* ========================================================= */ .transatlantic-experiences-and-overview-section-8 { width: 100%; padding: 80px 0; background: #DFF7F9; /* Seafoam Light */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-experiences-and-overview-section-8.revealed { opacity: 1; transform: translateY(0); } .transatlantic-experiences-and-overview-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-experiences-and-overview-header { text-align: center; margin-bottom: 40px; } .transatlantic-experiences-and-overview-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; margin-bottom: 20px; } .transatlantic-experiences-and-overview-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Ocean Teal */ margin-bottom: 14px; } /* List layout */ .transatlantic-experiences-and-overview-list { list-style: none; margin: 0; padding: 0; } .transatlantic-experiences-and-overview-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0F4C5C; } /* Emoji icon */ .ta-experience-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .ta-experience-text { display: inline-block; } /* Region / theme name styling */ .ta-experience-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .ta-port-southampton { color: #083341; /* Deep Atlantic Navy */ } .ta-port-hamburg { color: #0F4C5C; /* Deep Aqua */ } .ta-port-lisbon { color: #1C6E73; /* Ocean Teal */ } .ta-port-barcelona { color: #4FA3B0; /* Horizon Blue */ } .ta-crossing-classic { color: #00838F; /* Atlantic Port Teal */ } .ta-crossing-repositioning { color: #A7D9F5; /* Soft Sky Blue */ } .ta-crossing-styles { color: #F57C00; /* Sunset Orange */ } .ta-port-newyork { color: #C62828; /* Skyline Red Accent */ } .ta-port-miami { color: #D84315; /* Warm Coast Orange */ } .ta-port-fortlauderdale { color: #FBC02D; /* Tropical Gold */ } /* ========================================================= */ /* SECTION 9 — Transatlantic Seasonal Cruise Guide */ /* ========================================================= */ .transatlantic-seasonal-guide-section-9 { width: 100%; padding: 80px 0; background: #A7D9F5; /* Soft Sky Blue */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-seasonal-guide-section-9.revealed { opacity: 1; transform: translateY(0); } .transatlantic-seasonal-guide-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-seasonal-guide-header { text-align: center; margin-bottom: 40px; } .transatlantic-seasonal-guide-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 20px; } .transatlantic-seasonal-guide-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Ocean Teal */ margin-bottom: 14px; } /* List layout */ .transatlantic-seasonal-guide-list { list-style: none; margin: 0; padding: 0; } .transatlantic-seasonal-guide-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0F4C5C; /* Deep Aqua */ } /* Emoji icon */ .ta-season-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } /* Text block */ .ta-season-text { display: inline-block; } /* Season name styling */ .ta-season-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks */ .ta-season-spring { color: #1C6E73; /* Ocean Teal */ } .ta-season-autumn { color: #F57C00; /* Sunset Orange */ } .ta-season-repositioning { color: #4FA3B0; /* Horizon Blue */ } .ta-season-eastwest { color: #0F4C5C; /* Deep Aqua */ } .ta-season-weather { color: #083341; /* Deep Atlantic Navy */ } .ta-season-ports { color: #00838F; /* Atlantic Port Teal */ } .ta-season-scenic { color: #0F4C5C; /* Soft Sky Blue Accent */ } /* ========================================================= */ /* SECTION 10 — Transatlantic Best Cruise Months Chart */ /* ========================================================= */ .transatlantic-best-months-section-10 { width: 100%; padding: 80px 0; background: #A7D9F5; /* Open‑Sky Blue */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-best-months-section-10.revealed { opacity: 1; transform: translateY(0); } .transatlantic-best-months-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-best-months-header { text-align: center; margin-bottom: 40px; } .transatlantic-best-months-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 20px; } .transatlantic-best-months-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Ocean Teal */ margin-bottom: 14px; } /* Chart container */ .transatlantic-months-chart { background: #FFFFFF; /* Whitecaps */ border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } /* Chart header (months row) */ .transatlantic-months-chart-header { display: grid; grid-template-columns: repeat(12, 1fr); font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 12px; text-align: center; } .transatlantic-months-chart-header span { font-size: 0.85rem; } /* Chart label for each category */ .transatlantic-months-chart-label { font-weight: 700; margin: 12px 0 6px; color: #0F4C5C; /* Deep Aqua */ } /* Chart rows (bars) */ .transatlantic-months-chart-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 10px; } /* Bar styles */ .best { background: linear-gradient(135deg, #2E7D32, #66BB6A); /* Emerald Sea */ border-radius: 4px; height: 18px; } .good { background: linear-gradient(135deg, #4FA3B0, #81C9D6); /* Horizon Blue */ border-radius: 4px; height: 18px; } .avoid { background: linear-gradient(135deg, #C62828, #EF5350); /* Atlantic Red */ border-radius: 4px; height: 18px; } /* Legend */ .transatlantic-months-chart-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.95rem; } .transatlantic-months-chart-legend div { display: flex; align-items: center; gap: 6px; } .transatlantic-months-chart-legend span { width: 22px; height: 14px; border-radius: 4px; } /* Seasonal list */ .transatlantic-best-months-list { list-style: none; margin: 0; padding: 0; } .transatlantic-best-months-list li { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 1.1rem; line-height: 1.7; color: #0F4C5C; /* Deep Aqua */ } .ta-best-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .ta-best-text { display: inline-block; } .ta-best-text strong { font-weight: 700; margin-right: 4px; } /* Colour hooks for labels */ .ta-best-spring { color: #1C6E73; /* Ocean Teal */ } .ta-best-autumn { color: #F57C00; /* Sunset Orange */ } .ta-best-repositioning { color: #4FA3B0; /* Horizon Blue */ } .ta-best-eastwest { color: #0F4C5C; /* Deep Aqua */ } .ta-best-weather { color: #083341; /* Deep Atlantic Navy */ } .ta-best-ports { color: #00838F; /* Atlantic Port Teal */ } .ta-best-scenic { color: #0F4C5C; /* Deep Aqua (high contrast fix) */ } /* ========================================================= */ /* SECTION 11 — Transatlantic Cruise Tips & Planning Guide */ /* ========================================================= */ .transatlantic-tips-section-11 { width: 100%; padding: 80px 0; background: #DDE5EA; /* Silver Wake */ color: #083341; /* Deep Atlantic Navy */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-tips-section-11.revealed { opacity: 1; transform: translateY(0); } .transatlantic-tips-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-tips-header { text-align: center; margin-bottom: 40px; } .transatlantic-tips-title { font-size: 2.4rem; font-weight: 700; color: #083341; /* Deep Atlantic Navy */ margin-bottom: 20px; } .transatlantic-tips-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Ocean Teal */ margin-bottom: 14px; } /* Icons Row */ .transatlantic-tips-icons-row { display: flex; justify-content: center; gap: 24px; font-size: 1.05rem; margin: 30px 0; color: #083341; /* Deep Atlantic Navy */ } /* Gradient Divider */ .transatlantic-tips-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #083341, #1C6E73, #4FA3B0, #083341); border-radius: 3px; margin: 40px 0; } /* Tip Cards */ .transatlantic-tip-card { background: #FFFFFF; /* Whitecaps */ border-radius: 12px; padding: 24px; margin-bottom: 24px; display: flex; gap: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .ta-tip-icon { font-size: 1.8rem; margin-top: 4px; } .ta-tip-content strong { font-weight: 700; display: block; margin-bottom: 6px; } /* Colour-coded labels */ .ta-tip-planning { color: #083341; /* Deep Atlantic Navy */ } .ta-tip-packing { color: #1C6E73; /* Ocean Teal */ } .ta-tip-docs { color: #4FA3B0; /* Horizon Blue */ } .ta-tip-ocean { color: #00838F; /* Atlantic Port Teal */ } .ta-tip-port { color: #FBC02D; /* Gold Accent */ } /* Do's & Don'ts */ .transatlantic-tips-dos-donts { display: flex; gap: 40px; margin: 40px 0; } .transatlantic-tips-dos, .transatlantic-tips-donts { flex: 1; background: #FFFFFF; /* Whitecaps */ padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .transatlantic-tips-dos h3, .transatlantic-tips-donts h3 { font-size: 1.3rem; margin-bottom: 12px; color: #083341; /* Deep Atlantic Navy */ } .transatlantic-tips-dos ul, .transatlantic-tips-donts ul { padding-left: 18px; line-height: 1.7; } /* Insider Tips */ .transatlantic-insider-tips { margin-top: 40px; } .transatlantic-insider-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: #083341; /* Deep Atlantic Navy */ } .transatlantic-insider-tips ul { padding-left: 18px; line-height: 1.7; } /* ========================================================= */ /* SECTION 12 — Small‑Ship & Boutique Cruising (Transatlantic) */ /* ========================================================= */ .transatlantic-boutique-section-12 { width: 100%; padding: 80px 0; background: #A7D9F5; /* Ocean‑Sky Blue */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-boutique-section-12.revealed { opacity: 1; transform: translateY(0); } .transatlantic-boutique-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-boutique-header { text-align: center; margin-bottom: 40px; } .transatlantic-boutique-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 20px; } .transatlantic-boutique-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Atlantic Teal */ margin-bottom: 14px; } /* Icon Row */ .transatlantic-boutique-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0F4C5C; /* Deep Aqua */ } /* Cards container */ .transatlantic-boutique-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .transatlantic-boutique-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .ta-boutique-card-icon { font-size: 1.9rem; margin-top: 4px; } /* Card colour variants (Option C palette) */ .ta-boutique-card-blue { background: linear-gradient(135deg, #4F6D7A, #1C6E73); /* Steel → Atlantic Teal */ } .ta-boutique-card-teal { background: linear-gradient(135deg, #1C6E73, #4FA3B0); /* Atlantic Teal → Horizon Blue */ } .ta-boutique-card-steel { background: linear-gradient(135deg, #4F6D7A, #A7D9F5); /* Steel → Ocean‑Sky Blue */ } .ta-boutique-card-gold { background: linear-gradient(135deg, #F57C00, #F2C76E); /* Sunset Orange → Soft Gold */ } .ta-boutique-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .ta-boutique-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .ta-boutique-card-ships { font-size: 0.95rem; opacity: 0.95; } /* Divider */ .transatlantic-boutique-divider { height: 3px; width: 100%; background: linear-gradient(90deg, #4F6D7A, #1C6E73, #4FA3B0, #F57C00); border-radius: 3px; margin: 40px 0; } /* List section */ .transatlantic-boutique-list-wrapper { margin-top: 10px; } .transatlantic-boutique-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0F4C5C; /* Deep Aqua */ } .transatlantic-boutique-list { list-style: none; margin: 0; padding: 0; } .transatlantic-boutique-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #1C6E73; /* Atlantic Teal */ } .transatlantic-boutique-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .transatlantic-boutique-list-text { display: inline-block; } /* Colour labels */ .ta-boutique-label-blue { color: #4F6D7A; /* Steel Blue */ } .ta-boutique-label-teal { color: #1C6E73; /* Atlantic Teal */ } .ta-boutique-label-steel { color: #4FA3B0; /* Horizon Blue */ } .ta-boutique-label-gold { color: #F57C00; /* Sunset Orange */ } /* Responsive */ @media (max-width: 900px) { .transatlantic-boutique-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 13 — Transatlantic Port Profiles (Expanded Edition) */ /* ========================================================= */ .transatlantic-port-section-13 { width: 100%; padding: 80px 0; background: #A7D9F5; /* Ocean‑Sky Blue */ color: #0F4C5C; /* Deep Aqua */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-port-section-13.revealed { opacity: 1; transform: translateY(0); } .transatlantic-port-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* Heading + intro */ .transatlantic-port-header { text-align: center; margin-bottom: 40px; } .transatlantic-port-title { font-size: 2.4rem; font-weight: 700; color: #0F4C5C; /* Deep Aqua */ margin-bottom: 20px; } .transatlantic-port-intro { font-size: 1.15rem; line-height: 1.8; color: #1C6E73; /* Atlantic Teal */ margin-bottom: 14px; } /* Icon Row */ .transatlantic-port-icons-row { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 30px 0 40px; color: #0F4C5C; /* Deep Aqua */ } /* Cards container */ .transatlantic-port-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; } /* Base card style */ .transatlantic-port-card { border-radius: 14px; padding: 22px; display: flex; gap: 14px; color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .transatlantic-port-card-icon { font-size: 1.9rem; margin-top: 4px; } .transatlantic-port-card-body { display: flex; flex-direction: column; flex: 1; } /* Card colour variants (Option C palette) */ .ta-port-card-blue { background: linear-gradient(135deg, #4F6D7A, #1C6E73); /* Steel → Atlantic Teal */ } .ta-port-card-teal { background: linear-gradient(135deg, #1C6E73, #4FA3B0); /* Atlantic Teal → Horizon Blue */ } .ta-port-card-green { background: linear-gradient(135deg, #4FA3B0, #A7D9F5); /* Horizon Blue → Ocean‑Sky Blue */ } .ta-port-card-indigo { background: linear-gradient(135deg, #4F6D7A, #0F4C5C); /* Steel → Deep Aqua */ } .ta-port-card-gold { background: linear-gradient(135deg, #F57C00, #F2C76E); /* Sunset Orange → Soft Gold */ } .ta-port-card-purple { background: linear-gradient(135deg, #0F4C5C, #1C6E73); /* Deep Aqua → Atlantic Teal */ } .ta-port-card-coral { background: linear-gradient(135deg, #F57C00, #FF7043); /* Sunset Orange → Coral */ } .ta-port-card-amber { background: linear-gradient(135deg, #FF8F00, #FFB74D); /* Amber → Soft Amber */ } .transatlantic-port-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; } .transatlantic-port-card-text { font-size: 1rem; line-height: 1.7; margin-bottom: 6px; } .transatlantic-port-card-note { font-size: 0.95rem; opacity: 0.95; } /* Reveal animation for cards */ .transatlantic-port-card.region-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-port-card.region-reveal.visible { opacity: 1; transform: translateY(0); } /* Divider */ .transatlantic-port-divider { height: 3px; width: 100%; background: linear-gradient( 90deg, #4F6D7A, #1C6E73, #4FA3B0, #F57C00 ); border-radius: 3px; margin: 40px 0; } /* List section */ .transatlantic-port-list-wrapper { margin-top: 10px; } .transatlantic-port-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #0F4C5C; /* Deep Aqua */ } .transatlantic-port-list { list-style: none; margin: 0; padding: 0; } .transatlantic-port-list li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: #1C6E73; /* Atlantic Teal */ } .transatlantic-port-list-icon { font-size: 1.4rem; margin-right: 10px; margin-top: 2px; } .transatlantic-port-list-text { display: inline-block; } /* Colour labels */ .ta-port-label-indigo { color: #4F6D7A; /* Steel Blue */ } .ta-port-label-blue { color: #0F4C5C; /* Deep Aqua */ } .ta-port-label-teal { color: #1C6E73; /* Atlantic Teal */ } .ta-port-label-gold { color: #F57C00; /* Sunset Orange */ } /* Responsive */ @media (max-width: 900px) { .transatlantic-port-cards { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 14 — Transatlantic Cruise Port Comparison Grid */ /* ========================================================= */ .transatlantic-port-compare-section-14 { width: 100%; padding: 80px 0; background: #F7FBFC; /* Pearl White */ color: #3A4F63; /* Slate Blue */ opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .transatlantic-port-compare-section-14.revealed { opacity: 1; transform: translateY(0); } .transatlantic-port-compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .transatlantic-port-compare-header { text-align: center; margin-bottom: 50px; } .transatlantic-port-compare-title { font-size: 2.4rem; font-weight: 700; color: #0E6F73; /* Port Teal */ margin-bottom: 20px; } .transatlantic-port-compare-intro { font-size: 1.15rem; line-height: 1.8; color: #3A4F63; /* Slate Blue */ max-width: 800px; margin: 0 auto; } /* Grid container */ .transatlantic-port-compare-grid { width: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } /* Grid rows */ .compare-grid-row-ta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 22px; font-size: 1rem; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); background: #FFFFFF; position: relative; } /* Header row */ .compare-grid-header-ta { background: #C9D6DE; /* Atlantic Mist */ font-weight: 700; color: #0E6F73; /* Port Teal */ } /* Left colour accent */ .compare-grid-row-ta::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; border-radius: 0 4px 4px 0; } /* Colour accents (Option B palette) */ .compare-row-slate-ta::before { background: #3A4F63; } /* Slate Blue */ .compare-row-teal-ta::before { background: #0E6F73; } /* Port Teal */ .compare-row-mist-ta::before { background: #C9D6DE; } /* Atlantic Mist */ .compare-row-gold-ta::before { background: #FBC02D; } /* Gold Accent */ .compare-row-pearl-ta::before { background: #F7FBFC; } /* Pearl White */ /* Alternating row backgrounds */ .compare-grid-row-ta:nth-child(even) { background: #F1F5F7; } /* Hover effects */ .compare-row-slate-ta:hover, .compare-row-teal-ta:hover, .compare-row-mist-ta:hover, .compare-row-gold-ta:hover, .compare-row-pearl-ta:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transition: all 0.25s ease; cursor: pointer; } .compare-row-slate-ta:hover { background: rgba(58,79,99,0.10); } .compare-row-teal-ta:hover { background: rgba(14,111,115,0.10); } .compare-row-mist-ta:hover { background: rgba(201,214,222,0.20); } .compare-row-gold-ta:hover { background: rgba(251,192,45,0.15); } .compare-row-pearl-ta:hover { background: rgba(247,251,252,0.40); } /* Reveal animation */ .compare-grid-row-ta.region-reveal-ta { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .compare-grid-row-ta.region-reveal-ta.visible-ta { opacity: 1; transform: translateY(0); } /* Insights footer */ .transatlantic-port-compare-insights { margin-top: 40px; padding: 30px; background: #C9D6DE; /* Atlantic Mist */ border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .compare-insights-title-ta { font-size: 1.6rem; font-weight: 700; color: #0E6F73; /* Port Teal */ margin-bottom: 14px; } .compare-insights-text-ta { font-size: 1.1rem; line-height: 1.8; color: #3A4F63; /* Slate Blue */ } /* Responsive */ @media (max-width: 1100px) { .compare-grid-row-ta { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: 12px; } .compare-grid-header-ta { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .compare-grid-row-ta { grid-template-columns: 1fr; padding: 20px; } .compare-grid-header-ta { display: none; } .compare-col-ta { padding: 6px 0; font-size: 1.05rem; } } /* ========================================================= */ /* SECTION 14.5 — Transatlantic Embarkation vs Destination vs Debarkation Ports */ /* ========================================================= */ .transatlantic-port-usage-section-145{ padding:80px 0; background:#F7FBFC; } .transatlantic-port-usage-inner-145{ max-width:1300px; margin:0 auto; } .transatlantic-port-usage-title-145{ font-size:2.4rem; font-weight:800; text-align:center; margin-bottom:10px; color:#0A3A5A; } .transatlantic-port-usage-intro-145{ font-size:1.15rem; text-align:center; color:#5F6F7A; margin-bottom:20px; } /* GRID */ .transatlantic-port-usage-grid-145{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:50px; } /* CARD */ .transatlantic-port-usage-card-145{ border-radius:14px; overflow:hidden; background:#ffffff; box-shadow:0 6px 18px rgba(0,0,0,0.12); transition:all 0.35s ease; transform:translateY(0); cursor:pointer; } /* IMAGE BLOCK */ .usage-image-ta{ width:100%; height:220px; background-size:cover; background-position:center; } /* BACKGROUND IMAGES — CORRECT, TEMPLATE‑MIRRORED */ .usage-image-embarkation-ta{ background-image:url('../cruise-images/cruise-region-subpages-images/transatlantic-embarkation-ports.webp'); } .usage-image-destination-ta{ background-image:url('../cruise-images/cruise-region-subpages-images/transatlantic-destination-ports.webp'); } .usage-image-debarkation-ta{ background-image:url('../cruise-images/cruise-region-subpages-images/transatlantic-debarkation-ports.webp'); } /* TEXT */ .usage-card-title-ta{ font-size:1.25rem; font-weight:700; margin:18px 20px 10px 20px; color:#102a43; } .usage-card-text-ta{ font-size:1rem; line-height:1.55; margin:0 20px 20px 20px; color:#1a1a1a; opacity:0.95; } .usage-card-note-ta{ font-size:0.95rem; margin:0 20px 20px 20px; color:#1a1a1a; opacity:0.95; } /* GRADIENTS — LIGHT, CLEAN, NO PURPLE, NO NAVY */ .usage-card-embarkation-ta{ background:linear-gradient(135deg,#B7D8E8,#D9EEF7); } .usage-card-destination-ta{ background:linear-gradient(135deg,#C9E4F2,#E8F6FC); } .usage-card-debarkation-ta{ background:linear-gradient(135deg,#D3EAF5,#F2FAFE); } /* HOVER */ .transatlantic-port-usage-card-145:hover{ transform:translateY(-8px); box-shadow:0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media(max-width:1200px){ .transatlantic-port-usage-grid-145{ grid-template-columns:repeat(2,1fr); } } @media(max-width:800px){ .transatlantic-port-usage-grid-145{ grid-template-columns:1fr; } } /* ========================================================= */ /* SECTION 15 — Transatlantic Cruise Line Fleet Size Comparison */ /* ========================================================= */ .transatlantic-fleet-section{ width:100%; padding:80px 0; background:#e8f3fa; color:#102a43; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; } .transatlantic-fleet-section.revealed{ opacity:1; transform:translateY(0); } .transatlantic-fleet-inner{ max-width:1200px; margin:0 auto; padding:0 40px; } /* Header */ .transatlantic-fleet-header{ text-align:center; margin-bottom:40px; } .transatlantic-fleet-title{ font-size:2.4rem; font-weight:700; margin-bottom:12px; } .transatlantic-fleet-underline{ width:80px; height:4px; margin:0 auto 20px; border-radius:999px; background:linear-gradient(90deg,#7fb3e8,#8fcfa8,#f2c76e); } .transatlantic-fleet-intro{ font-size:1.1rem; line-height:1.8; color:#1a1a1a; max-width:850px; margin:0 auto 12px; } /* Grid container */ .transatlantic-fleet-grid{ width:100%; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.10); background:#ffffff; margin-top:40px; } /* Grid rows */ .fleet-grid-row-ta{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:16px 20px; font-size:0.98rem; align-items:center; border-bottom:1px solid rgba(0,0,0,0.06); position:relative; } /* Header row */ .fleet-grid-header-ta{ background:#e3edf7; font-weight:700; color:#102a43; } /* Reveal animation */ .fleet-grid-row-ta.region-reveal-ta{ opacity:0; transform:translateY(24px); transition:opacity 0.8s ease,transform 0.8s ease; } .fleet-grid-row-ta.region-reveal-ta.visible-ta{ opacity:1; transform:translateY(0); } /* Left colour accent */ .fleet-grid-row-ta::before{ content:""; position:absolute; left:0; top:0; width:6px; height:100%; border-radius:0 4px 4px 0; } /* Colour accents — Transatlantic palette */ .fleet-row-cunard-ta::before{background:#4f8fb8;} .fleet-row-rc-ta::before{background:#7fb3e8;} .fleet-row-msc-ta::before{background:#5aa9c9;} .fleet-row-ncl-ta::before{background:#8fcfa8;} .fleet-row-celebrity-ta::before{background:#c9b27a;} .fleet-row-hal-ta::before{background:#9cc4e4;} .fleet-row-princess-ta::before{background:#6fa3c1;} .fleet-row-azamara-ta::before{background:#bcd9f1;} .fleet-row-viking-ta::before{background:#8fb0c9;} .fleet-row-oceania-ta::before{background:#c5d4e6;} /* Alternating row backgrounds */ .fleet-grid-row-ta:nth-child(even){ background:#f7fafc; } /* Hover effects */ .fleet-row-cunard-ta:hover, .fleet-row-rc-ta:hover, .fleet-row-msc-ta:hover, .fleet-row-ncl-ta:hover, .fleet-row-celebrity-ta:hover, .fleet-row-hal-ta:hover, .fleet-row-princess-ta:hover, .fleet-row-azamara-ta:hover, .fleet-row-viking-ta:hover, .fleet-row-oceania-ta:hover{ background:rgba(127,179,232,0.08); transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.10); transition:all 0.25s ease; cursor:pointer; } /* Columns */ .fleet-col-ta{ padding:4px 8px; } /* Fleet Bars Visual */ .transatlantic-fleet-bars{ margin-top:40px; padding:26px 24px 20px; border-radius:14px; background:#e3edf7; box-shadow:0 4px 14px rgba(0,0,0,0.08); } .transatlantic-fleet-bars-title{ font-size:1.4rem; font-weight:700; margin-bottom:18px; color:#102a43; } /* TWO-COLUMN BAR LAYOUT */ .fleet-bars-row-ta{ display:grid; grid-template-columns:190px 1fr; column-gap:20px; margin-bottom:24px; } /* Left column — ship name */ .fleet-bars-col-left-ta{ font-size:1rem; font-weight:700; color:#102a43; display:flex; align-items:center; } /* Right column — bar + paragraph */ .fleet-bars-col-right-ta{ display:flex; flex-direction:column; gap:10px; } /* Bar */ .fleet-bar-ta{ height:12px; border-radius:999px; } /* Bar colours */ .fleet-bar-cunard-ta{width:40%;background:linear-gradient(90deg,#4f8fb8,#7fb3e8);} .fleet-bar-rc-ta{width:92%;background:linear-gradient(90deg,#7fb3e8,#bcd9f1);} .fleet-bar-msc-ta{width:80%;background:linear-gradient(90deg,#5aa9c9,#9cc4e4);} .fleet-bar-ncl-ta{width:70%;background:linear-gradient(90deg,#8fcfa8,#c7e6d4);} .fleet-bar-celebrity-ta{width:65%;background:linear-gradient(90deg,#c9b27a,#f2c76e);} .fleet-bar-hal-ta{width:50%;background:linear-gradient(90deg,#9cc4e4,#c5d4e6);} .fleet-bar-princess-ta{width:68%;background:linear-gradient(90deg,#6fa3c1,#bcd9f1);} .fleet-bar-azamara-ta{width:38%;background:linear-gradient(90deg,#bcd9f1,#e3edf7);} .fleet-bar-viking-ta{width:55%;background:linear-gradient(90deg,#8fb0c9,#c5d4e6);} .fleet-bar-oceania-ta{width:42%;background:linear-gradient(90deg,#c5d4e6,#e3edf7);} /* Paragraph under bar */ .fleet-bars-detail-ta{ font-size:0.95rem; line-height:1.7; color:#1a1a1a; max-width:780px; } /* Responsive */ @media(max-width:700px){ .fleet-bars-row-ta{ grid-template-columns:1fr; } .fleet-bars-col-left-ta{ margin-bottom:6px; } } /* ========================================================= */ /* SECTION 16 — Transatlantic Port Logistics & Passenger Flow Guide */ /* ========================================================= */ .transatlantic-logistics-section-16{ width:100%; padding:80px 0; background:#E6F3FA; /* Light ocean sky */ color:#0A3A5E; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; } .transatlantic-logistics-section-16.revealed{ opacity:1; transform:translateY(0); } .transatlantic-logistics-inner-16{ max-width:1200px; margin:0 auto; padding:0 40px; } /* Header */ .transatlantic-logistics-header-16{ text-align:center; margin-bottom:40px; } .transatlantic-logistics-title-16{ font-size:2.4rem; font-weight:700; margin-bottom:12px; } .transatlantic-logistics-underline-16{ width:80px; height:4px; margin:0 auto 20px; border-radius:999px; background:linear-gradient(90deg,#4FA3D1,#6EC6A8,#F2C76E); } .transatlantic-logistics-intro-16{ font-size:1.1rem; line-height:1.8; color:#2F3A45; max-width:850px; margin:0 auto 12px; } /* Logistics Grid */ .transatlantic-logistics-grid-16{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-top:40px; } .ta-logistics-card-16{ border-radius:16px; padding:22px 20px; box-shadow:0 6px 20px rgba(0,0,0,0.10); color:#FFFFFF; position:relative; overflow:hidden; transition:transform 0.25s ease, box-shadow 0.25s ease; } .ta-logistics-card-title-16{ font-size:1.3rem; font-weight:700; margin-bottom:10px; } .ta-logistics-card-text-16{ font-size:0.98rem; line-height:1.7; margin-bottom:14px; } /* Card gradients — Transatlantic palette */ .ta-logistics-card-embarkation-16{ background:linear-gradient(135deg,#4FA3D1,#7FC8E8); } .ta-logistics-card-disembarkation-16{ background:linear-gradient(135deg,#6EC6A8,#9EDCC0); } .ta-logistics-card-transfers-16{ background:linear-gradient(135deg,#F2C76E,#F7DFA8); } /* List inside cards */ .ta-logistics-list-16{ list-style:none; margin:0; padding:0; } .ta-logistics-list-16 li{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; font-size:0.95rem; } .ta-logistics-list-16 li span:first-child{ font-size:1.2rem; margin-top:2px; } /* Reveal animation for cards */ .ta-logistics-card-16.region-reveal-ta{ opacity:0; transform:translateY(26px); transition:opacity 0.8s ease,transform 0.8s ease; } .ta-logistics-card-16.region-reveal-ta.visible-ta{ opacity:1; transform:translateY(0); } /* ========================================================= */ /* WORKING HOVER EFFECT — TRANSATLANTIC ISOLATED */ /* ========================================================= */ .ta-logistics-card-embarkation-16:hover, .ta-logistics-card-disembarkation-16:hover, .ta-logistics-card-transfers-16:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.22); cursor:pointer; } /* Optional brightened hover gradients */ .ta-logistics-card-embarkation-16:hover{ background:linear-gradient(135deg,#5FB3E1,#8FD2F0); } .ta-logistics-card-disembarkation-16:hover{ background:linear-gradient(135deg,#7ED6B8,#AEE6C8); } .ta-logistics-card-transfers-16:hover{ background:linear-gradient(135deg,#F6CF7E,#F9E4B2); } /* ========================================================= */ .ta-logistics-compare-16{ margin-top:40px; padding:26px 24px; border-radius:16px; background:#F0F7FC; box-shadow:0 4px 14px rgba(0,0,0,0.08); } .ta-logistics-compare-title-16{ font-size:1.4rem; font-weight:700; margin-bottom:18px; color:#0A3A5E; } .ta-logistics-compare-grid-16{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .ta-logistics-compare-item-16{ background:#FFFFFF; border-radius:12px; padding:16px 14px; box-shadow:0 2px 10px rgba(0,0,0,0.06); font-size:0.96rem; line-height:1.7; color:#2F3A45; } .ta-logistics-compare-item-16 h4{ font-size:1.05rem; font-weight:700; margin-bottom:8px; } /* Comparison accents — Transatlantic palette */ .ta-compare-europe-16{ border-left:4px solid #4FA3D1; } .ta-compare-midatlantic-16{ border-left:4px solid #6EC6A8; } .ta-compare-northamerica-16{ border-left:4px solid #F2C76E; } /* Tips section */ .ta-logistics-tips-16{ margin-top:40px; } .ta-logistics-tips-title-16{ font-size:1.4rem; font-weight:700; margin-bottom:16px; color:#0A3A5E; } .ta-logistics-tips-list-16{ list-style:none; margin:0; padding:0; } .ta-logistics-tips-list-16 li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:0.98rem; color:#2F3A45; } .ta-logistics-tips-list-16 li span:first-child{ font-size:1.2rem; margin-top:2px; } /* Responsive */ @media(max-width:1100px){ .transatlantic-logistics-grid-16{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ta-logistics-compare-grid-16{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:800px){ .transatlantic-logistics-grid-16{ grid-template-columns:1fr; } .ta-logistics-compare-grid-16{ grid-template-columns:1fr; } } /* ========================================================= */ /* SECTION 17 — Transatlantic Cruise Lines Overview Grid */ /* ========================================================= */ .transatlantic-cruise-lines-overview-17{ width:100%; padding:90px 0; background:#E6F4FA; /* Soft Transatlantic ocean backdrop */ color:#0A3A5E; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; } .transatlantic-cruise-lines-overview-17.revealed{ opacity:1; transform:translateY(0); } .transatlantic-cruise-lines-inner-17{ max-width:1200px; margin:0 auto; padding:0 40px; } /* Header */ .transatlantic-cruise-lines-header-17{ text-align:center; margin-bottom:60px; } .transatlantic-cruise-lines-title-17{ font-size:2.6rem; font-weight:700; color:#0A3A5E; margin-bottom:16px; } /* Cinematic gradient underline — Transatlantic palette */ .transatlantic-cruise-lines-underline-17{ width:120px; height:6px; margin:0 auto 25px auto; border-radius:6px; background:linear-gradient(90deg,#4FA3D1,#6EC6A8,#F2C76E); } .transatlantic-cruise-lines-intro-17{ font-size:1.2rem; line-height:1.8; color:#2F3A45; max-width:850px; margin:0 auto; } /* Grid */ .transatlantic-cruise-lines-grid-17{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; } /* Cruise Line Cards */ .ta-cruise-line-card-17{ background:#FFFFFF; border-radius:18px; padding:28px; box-shadow:0 6px 20px rgba(0,0,0,0.10); position:relative; overflow:hidden; opacity:0; transform:translateY(30px); transition:opacity 0.8s ease,transform 0.8s ease; } /* Reveal */ .ta-cruise-line-card-17.visible-ta{ opacity:1; transform:translateY(0); } /* Colour accents (top border glow) — Transatlantic palette */ .ta-cruise-line-card-17::before{ content:""; position:absolute; top:0; left:0; height:6px; width:100%; border-radius:6px 6px 0 0; } /* Individual colour sets */ .ta-card-ocean-17::before { background:#4FA3D1; } /* Cunard */ .ta-card-blue-17::before { background:#5AA9C9; } /* Royal Caribbean */ .ta-card-cyan-17::before { background:#7FC8E8; } /* MSC */ .ta-card-teal-17::before { background:#6EC6A8; } /* NCL */ .ta-card-silver-17::before { background:#BFCEDB; } /* Celebrity */ .ta-card-gold-17::before { background:#F2C76E; } /* Princess + Filler Card 12 */ .ta-card-green-17::before { background:#8FCFA8; } /* Holland America */ .ta-card-ice-17::before { background:#D9EAF4; } /* Viking + Filler Card 10 */ .ta-card-azure-17::before { background:#9CC4E4; } /* Azamara + Filler Card 11 */ /* Icon */ .ta-cruise-line-icon-17{ font-size:2.4rem; margin-bottom:14px; } /* Name */ .ta-cruise-line-name-17{ font-size:1.4rem; font-weight:700; color:#0A3A5E; margin-bottom:12px; } /* Summary */ .ta-cruise-line-summary-17{ font-size:1.05rem; line-height:1.7; color:#2F3A45; margin-bottom:18px; } /* Points */ .ta-cruise-line-points-17{ list-style:none; padding:0; margin:0; } .ta-cruise-line-points-17 li{ margin-bottom:8px; font-size:1rem; color:#0A3A5E; padding-left:14px; position:relative; } .ta-cruise-line-points-17 li::before{ content:"◆"; position:absolute; left:0; top:0; color:#4FA3D1; font-size:0.9rem; } /* Hover (Transatlantic premium glow) */ .ta-card-ocean-17:hover, .ta-card-blue-17:hover, .ta-card-cyan-17:hover, .ta-card-teal-17:hover, .ta-card-silver-17:hover, .ta-card-gold-17:hover, .ta-card-green-17:hover, .ta-card-ice-17:hover, .ta-card-azure-17:hover{ background:rgba(79,163,209,0.06); transform:translateY(-6px); box-shadow:0 10px 26px rgba(0,0,0,0.14); transition:all 0.25s ease; cursor:pointer; } /* Responsive */ @media(max-width:700px){ .transatlantic-cruise-lines-title-17{ font-size:2.2rem; } .transatlantic-cruise-lines-intro-17{ font-size:1.1rem; } .ta-cruise-line-card-17{ padding:24px; } } /* ========================================================= */ /* SECTION 18 — Transatlantic Ship Types Overview */ /* ========================================================= */ .transatlantic-ship-types-overview-18{ width:100%; padding:90px 0; background:#E6F4FA; /* Soft Transatlantic ocean backdrop */ color:#0A3A5E; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; } .transatlantic-ship-types-overview-18.revealed{ opacity:1; transform:translateY(0); } .transatlantic-ship-types-inner-18{ max-width:1200px; margin:0 auto; padding:0 40px; } /* Header */ .transatlantic-ship-types-header-18{ text-align:center; margin-bottom:60px; } .transatlantic-ship-types-title-18{ font-size:2.6rem; font-weight:700; color:#0A3A5E; margin-bottom:16px; } /* Cinematic gradient underline — Transatlantic palette */ .transatlantic-ship-types-underline-18{ width:120px; height:6px; margin:0 auto 25px auto; border-radius:6px; background:linear-gradient(90deg,#4FA3D1,#6EC6A8,#F2C76E); } .transatlantic-ship-types-intro-18{ font-size:1.2rem; line-height:1.8; color:#2F3A45; max-width:850px; margin:0 auto; } /* Grid */ .transatlantic-ship-types-grid-18{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; } /* Ship Type Cards */ .ta-ship-type-card-18{ background:#FFFFFF; border-radius:18px; padding:28px; box-shadow:0 6px 20px rgba(0,0,0,0.10); position:relative; overflow:hidden; opacity:0; transform:translateY(30px); transition:opacity 0.8s ease,transform 0.8s ease; } /* Reveal */ .ta-ship-type-card-18.visible-ta{ opacity:1; transform:translateY(0); } /* Colour accents (top border glow) — Transatlantic palette */ .ta-ship-type-card-18::before{ content:""; position:absolute; top:0; left:0; height:6px; width:100%; border-radius:6px 6px 0 0; } /* Individual colour sets — Transatlantic palette */ .ta-card-ocean-18::before { background:#4FA3D1; } /* Ocean Liner Ships */ .ta-card-blue-18::before { background:#5AA9C9; } /* Large Repositioning Ships */ .ta-card-teal-18::before { background:#6EC6A8; } /* Premium Mid‑Size Ships */ .ta-card-cyan-18::before { background:#7FC8E8; } /* European‑Style Large Ships */ .ta-card-silver-18::before { background:#BFCEDB; } /* Contemporary Entertainment Ships */ .ta-card-green-18::before { background:#8FCFA8; } /* Scenic Small‑Ship Voyages */ .ta-card-azure-18::before { background:#9CC4E4; } /* Boutique Ocean Ships */ .ta-card-gold-18::before { background:#F2C76E; } /* Premium Scenic Ships */ .ta-card-ice-18::before { background:#D9EAF4; } /* Modern Global Fleet Ships */ .ta-card-sky-18::before { background:#A7D3E8; } /* Extended Repositioning Ships */ .ta-card-coral-18::before { background:#E8A38F; } /* Scenic Atlantic Cultural Ships */ .ta-card-purple-18::before { background:#C7B4E3; } /* Boutique Repositioning Ships */ /* Icon */ .ta-ship-type-icon-18{ font-size:2.4rem; margin-bottom:14px; } /* Name */ .ta-ship-type-name-18{ font-size:1.4rem; font-weight:700; color:#0A3A5E; margin-bottom:12px; } /* Summary */ .ta-ship-type-summary-18{ font-size:1.05rem; line-height:1.7; color:#2F3A45; margin-bottom:18px; } /* Points */ .ta-ship-type-points-18{ list-style:none; padding:0; margin:0; } .ta-ship-type-points-18 li{ margin-bottom:8px; font-size:1rem; color:#0A3A5E; padding-left:14px; position:relative; } .ta-ship-type-points-18 li::before{ content:"◆"; position:absolute; left:0; top:0; color:#4FA3D1; font-size:0.9rem; } /* Hover (Transatlantic premium glow) */ .ta-card-ocean-18:hover, .ta-card-blue-18:hover, .ta-card-teal-18:hover, .ta-card-cyan-18:hover, .ta-card-silver-18:hover, .ta-card-green-18:hover, .ta-card-azure-18:hover, .ta-card-gold-18:hover, .ta-card-ice-18:hover, .ta-card-sky-18:hover, .ta-card-coral-18:hover, .ta-card-purple-18:hover{ background:rgba(79,163,209,0.06); transform:translateY(-6px); box-shadow:0 10px 26px rgba(0,0,0,0.14); transition:all 0.25s ease; cursor:pointer; } /* Responsive */ @media(max-width:700px){ .transatlantic-ship-types-title-18{ font-size:2.2rem; } .transatlantic-ship-types-intro-18{ font-size:1.1rem; } .ta-ship-type-card-18{ padding:24px; } } /* ========================================================= */ /* SECTION 19 — Transatlantic Cruise Duration Overview */ /* ========================================================= */ .transatlantic-cruise-duration-overview-19{ width:100%; padding:90px 0; background:#E6F4FA; /* Soft Transatlantic ocean backdrop */ color:#0A3A5E; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; } .transatlantic-cruise-duration-overview-19.revealed{ opacity:1; transform:translateY(0); } .transatlantic-cruise-duration-inner-19{ max-width:1200px; margin:0 auto; padding:0 40px; } /* Header */ .transatlantic-cruise-duration-header-19{ text-align:center; margin-bottom:60px; } .transatlantic-cruise-duration-title-19{ font-size:2.6rem; font-weight:700; color:#0A3A5E; margin-bottom:16px; } /* Cinematic gradient underline — Transatlantic palette */ .transatlantic-cruise-duration-underline-19{ width:120px; height:6px; margin:0 auto 25px auto; border-radius:6px; background:linear-gradient(90deg,#4FA3D1,#6EC6A8,#F2C76E); } .transatlantic-cruise-duration-intro-19{ font-size:1.2rem; line-height:1.8; color:#2F3A45; max-width:850px; margin:0 auto; } /* Grid */ .transatlantic-cruise-duration-grid-19{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; } /* Duration Cards */ .ta-cruise-duration-card-19{ background:#FFFFFF; border-radius:18px; padding:28px; box-shadow:0 6px 20px rgba(0,0,0,0.10); position:relative; overflow:hidden; opacity:0; transform:translateY(30px); transition:opacity 0.8s ease,transform 0.8s ease; } /* Reveal */ .ta-cruise-duration-card-19.visible-ta{ opacity:1; transform:translateY(0); } /* Colour accents (top border glow) — Transatlantic palette */ .ta-cruise-duration-card-19::before{ content:""; position:absolute; top:0; left:0; height:6px; width:100%; border-radius:6px 6px 0 0; } /* Individual colour sets — Transatlantic palette */ .ta-card-teal-19::before { background:#6EC6A8; } /* Short Sampler Cruises */ .ta-card-coral-19::before { background:#E8A38F; } /* Mini Repositioning Cruises */ .ta-card-indigo-19::before { background:#9CA8D9; } /* Standard Crossings */ .ta-card-cyan-19::before { background:#7FC8E8; } /* Extended Crossings */ .ta-card-amber-19::before { background:#F2C76E; } /* Grand Voyages */ .ta-card-purple-19::before { background:#C7B4E3; } /* Seasonal Repositioning */ .ta-card-blue-19::before { background:#5AA9C9; } /* Ultra‑Long Voyages */ .ta-card-red-19::before { background:#D98F8F; } /* Expedition & Cultural Voyages */ /* Icon */ .ta-cruise-duration-icon-19{ font-size:2.4rem; margin-bottom:14px; } /* Name */ .ta-cruise-duration-name-19{ font-size:1.4rem; font-weight:700; color:#0A3A5E; margin-bottom:12px; } /* Summary */ .ta-cruise-duration-summary-19{ font-size:1.05rem; line-height:1.7; color:#2F3A45; margin-bottom:18px; } /* Points */ .ta-cruise-duration-points-19{ list-style:none; padding:0; margin:0; } .ta-cruise-duration-points-19 li{ margin-bottom:8px; font-size:1rem; color:#0A3A5E; padding-left:14px; position:relative; } .ta-cruise-duration-points-19 li::before{ content:"◆"; position:absolute; left:0; top:0; color:#4FA3D1; font-size:0.9rem; } /* Hover (Transatlantic premium glow) */ .ta-card-teal-19:hover, .ta-card-coral-19:hover, .ta-card-indigo-19:hover, .ta-card-cyan-19:hover, .ta-card-amber-19:hover, .ta-card-purple-19:hover, .ta-card-blue-19:hover, .ta-card-red-19:hover{ background:rgba(79,163,209,0.06); transform:translateY(-6px); box-shadow:0 10px 26px rgba(0,0,0,0.14); transition:all 0.25s ease; cursor:pointer; } /* Responsive */ @media(max-width:700px){ .transatlantic-cruise-duration-title-19{ font-size:2.2rem; } .transatlantic-cruise-duration-intro-19{ font-size:1.1rem; } .ta-cruise-duration-card-19{ padding:24px; } } /* ========================================================= */ /* SECTION 20 — Transatlantic Cruise Price Range Overview */ /* ========================================================= */ .transatlantic-cruise-price-overview-20{ width:100%; padding:90px 0; background:#E6F4FA; /* Soft Transatlantic ocean backdrop */ color:#1F2A44; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; } .transatlantic-cruise-price-overview-20.revealed{ opacity:1; transform:translateY(0); } .transatlantic-cruise-price-inner-20{ max-width:1200px; margin:0 auto; padding:0 40px; } /* Header */ .transatlantic-cruise-price-header-20{ text-align:center; margin-bottom:60px; } .transatlantic-cruise-price-title-20{ font-size:2.6rem; font-weight:700; color:#0A3A5E; margin-bottom:16px; } /* Cinematic gradient underline — Transatlantic palette */ .transatlantic-cruise-price-underline-20{ width:140px; height:6px; margin:0 auto 25px auto; border-radius:6px; background:linear-gradient(90deg,#4FA3D1,#6EC6A8,#F2C76E,#A7D3E8); } .transatlantic-cruise-price-intro-20{ font-size:1.2rem; line-height:1.8; color:#3A4561; max-width:850px; margin:0 auto; } /* Grid */ .transatlantic-cruise-price-grid-20{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; } /* Price Cards */ .ta-cruise-price-card-20{ background:#FFFFFF; border-radius:18px; padding:28px; box-shadow:0 6px 20px rgba(0,0,0,0.10); position:relative; overflow:hidden; opacity:0; transform:translateY(30px); transition:opacity 0.8s ease,transform 0.8s ease; } .ta-cruise-price-card-20.visible-ta{ opacity:1; transform:translateY(0); } /* Top border glow */ .ta-cruise-price-card-20::before{ content:""; position:absolute; top:0; left:0; height:6px; width:100%; border-radius:6px 6px 0 0; } /* 12‑colour Transatlantic palette */ .ta-card-ice-20::before { background:#D9EAF4; } .ta-card-coral-20::before { background:#E8A38F; } .ta-card-indigo-20::before { background:#9CA8D9; } .ta-card-cyan-20::before { background:#7FC8E8; } .ta-card-amber-20::before { background:#F2C76E; } .ta-card-purple-20::before { background:#C7B4E3; } .ta-card-blue-20::before { background:#5AA9C9; } .ta-card-citrine-20::before { background:#E4D88A; } .ta-card-coral2-20::before { background:#E8B7A8; } .ta-card-glacier-20::before { background:#A7D3E8; } .ta-card-sandstone-20::before { background:#D8C4A3; } .ta-card-royalviolet-20::before{ background:#B9A1E0; } /* Icon + Titles */ .ta-cruise-price-icon-20{ font-size:2.4rem; margin-bottom:14px; } .ta-cruise-price-name-20{ font-size:1.4rem; font-weight:700; color:#0A3A5E; margin-bottom:18px; } /* Layer Titles */ .ta-cruise-price-layer-title-20{ font-size:1.15rem; font-weight:700; color:#263238; margin-bottom:10px; } /* Layer Text */ .ta-cruise-price-layer-text-20{ font-size:1.05rem; line-height:1.7; color:#3A4561; margin-bottom:10px; } .ta-cruise-price-layer-note-20{ font-size:0.95rem; color:#546E7A; margin-bottom:18px; } /* Cabin List */ .ta-cruise-price-cabins-20{ list-style:none; padding:0; margin:0; } .ta-cruise-price-cabins-20 li{ margin-bottom:8px; font-size:1rem; color:#1F2A44; padding-left:14px; position:relative; } .ta-cruise-price-cabins-20 li::before{ content:"◆"; position:absolute; left:0; top:0; color:#0A3A5E; font-size:0.9rem; } /* Premium hover effects */ .ta-card-ice-20:hover, .ta-card-coral-20:hover, .ta-card-indigo-20:hover, .ta-card-cyan-20:hover, .ta-card-amber-20:hover, .ta-card-purple-20:hover, .ta-card-blue-20:hover, .ta-card-citrine-20:hover, .ta-card-coral2-20:hover, .ta-card-glacier-20:hover, .ta-card-sandstone-20:hover, .ta-card-royalviolet-20:hover{ background:rgba(79,163,209,0.06); transform:translateY(-6px); box-shadow:0 10px 26px rgba(0,0,0,0.14); transition:all 0.25s ease; cursor:pointer; } /* Responsive */ @media(max-width:700px){ .transatlantic-cruise-price-title-20{ font-size:2.2rem; } .transatlantic-cruise-price-intro-20{ font-size:1.1rem; } .ta-cruise-price-card-20{ padding:24px; } } /* ========================================================= */ /* SECTION 21 — Transatlantic Cruise Best Value Tips */ /* ========================================================= */ .section-21 { padding: 80px 0; background: #F4FAFF; /* Atlantic Mist */ } .ta-section-21-wrapper { max-width: 1300px; margin: 0 auto; } .ta-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0E3A52; /* Deep Atlantic Blue */ } .ta-section-subtitle { font-size: 1.2rem; text-align: center; color: #3C4F63; /* Ocean Slate */ margin-bottom: 50px; } /* GRID */ .ta-value-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .ta-value-tip-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .ta-value-tip-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .ta-value-tip-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR TRANSATLANTIC PALETTE */ /* ========================================================= */ /* Atlantic Ocean Blues */ .ta-card-21-1 { background: linear-gradient(135deg, #1A6FB2, #0E4A7A); } .ta-card-21-2 { background: linear-gradient(135deg, #0F5C91, #0A3E63); } /* Mid‑Ocean Greens */ .ta-card-21-3 { background: linear-gradient(135deg, #1F7F7A, #14524F); } .ta-card-21-4 { background: linear-gradient(135deg, #2A9C8C, #1C6F63); } /* Azores & Madeira Inspired Teals */ .ta-card-21-5 { background: linear-gradient(135deg, #3FA7B4, #2A7C8C); } .ta-card-21-6 { background: linear-gradient(135deg, #4CB5A2, #2F8577); } /* European Coastal Golds */ .ta-card-21-7 { background: linear-gradient(135deg, #C9A44A, #A07C2F); } .ta-card-21-8 { background: linear-gradient(135deg, #D4B15C, #A8893D); } /* Deep‑Sea Reds & Purples */ .ta-card-21-9 { background: linear-gradient(135deg, #8E2B2B, #5C1A1A); } .ta-card-21-10 { background: linear-gradient(135deg, #5A2D7A, #3C1E52); } /* Atlantic Storm Greys */ .ta-card-21-11 { background: linear-gradient(135deg, #6A7A8C, #4A5563); } .ta-card-21-12 { background: linear-gradient(135deg, #55606D, #3A424C); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .ta-hover-21:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ta-value-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-value-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-value-tips-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 22 — Transatlantic Cultural Immersion (CSS) */ /* ========================================================= */ .section-22 { padding: 80px 0; background: #F5FAFF; /* Atlantic Coastal Mist */ } .ta-section-22-wrapper { max-width: 1300px; margin: 0 auto; } .ta-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0D3A54; /* Deep Maritime Blue */ } .ta-section-subtitle { font-size: 1.2rem; text-align: center; color: #3C4F63; /* Ocean Slate */ margin-bottom: 50px; } /* GRID */ .ta-immersion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* BASE CARD STYLE */ .ta-immersion-card { padding: 28px; border-radius: 14px; color: #fff; transition: all 0.35s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); cursor: pointer; transform: translateY(0); } .ta-immersion-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } .ta-immersion-card p { font-size: 1rem; line-height: 1.55; opacity: 0.95; } /* ========================================================= */ /* 12‑COLOUR TRANSATLANTIC PALETTE */ /* ========================================================= */ /* Atlantic Blues */ .ta-card-22-1 { background: linear-gradient(135deg, #1A6FB2, #0E4A7A); } .ta-card-22-2 { background: linear-gradient(135deg, #0F5C91, #0A3E63); } /* Maritime Greens */ .ta-card-22-3 { background: linear-gradient(135deg, #1F7F7A, #14524F); } .ta-card-22-4 { background: linear-gradient(135deg, #2A9C8C, #1C6F63); } /* Atlantic Island Teals */ .ta-card-22-5 { background: linear-gradient(135deg, #3FA7B4, #2A7C8C); } .ta-card-22-6 { background: linear-gradient(135deg, #4CB5A2, #2F8577); } /* Coastal Golds */ .ta-card-22-7 { background: linear-gradient(135deg, #C9A44A, #A07C2F); } .ta-card-22-8 { background: linear-gradient(135deg, #D4B15C, #A8893D); } /* Deep‑Sea Reds & Purples */ .ta-card-22-9 { background: linear-gradient(135deg, #8E2B2B, #5C1A1A); } .ta-card-22-10 { background: linear-gradient(135deg, #5A2D7A, #3C1E52); } /* Atlantic Storm Greys */ .ta-card-22-11 { background: linear-gradient(135deg, #6A7A8C, #4A5563); } .ta-card-22-12 { background: linear-gradient(135deg, #55606D, #3A424C); } /* ========================================================= */ /* HOVER EFFECTS — PREMIUM MICRO‑INTERACTIONS */ /* ========================================================= */ .ta-hover-22:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); opacity: 1; } /* ========================================================= */ /* RESPONSIVE */ /* ========================================================= */ @media (max-width: 1200px) { .ta-immersion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-immersion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-immersion-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 23 — Transatlantic Wildlife & Nature (CSS) */ /* ========================================================= */ .section-23 { padding: 80px 0; background: #F3FAFF; /* Light Atlantic sky */ } .ta-section-23-wrapper { max-width: 1300px; margin: 0 auto; } .ta-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102a43; /* Dark text */ } .ta-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .ta-wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ta-wildlife-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ta-wildlife-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .ta-wildlife-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .ta-wildlife-image { width: 100%; height: 220px; background-size: cover; background-position: center; transition: transform 0.35s ease; } .ta-wildlife-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — TRANSATLANTIC WILDLIFE & NATURE */ /* ========================================================= */ .ta-img-botanical-garden { background-image: url('../cruise-images/cruise-region-subpages-images/ta-botanical-garden.webp'); } .ta-img-forest-trail { background-image: url('../cruise-images/cruise-region-subpages-images/ta-forest-trail.webp'); } .ta-img-coastal-boardwalk { background-image: url('../cruise-images/cruise-region-subpages-images/ta-coastal-boardwalk.webp'); } .ta-img-rocky-shoreline { background-image: url('../cruise-images/cruise-region-subpages-images/ta-rocky-shoreline.webp'); } .ta-img-seabirds { background-image: url('../cruise-images/cruise-region-subpages-images/ta-seabirds.webp'); } .ta-img-ocean-sunfish { background-image: url('../cruise-images/cruise-region-subpages-images/ta-ocean-sunfish.webp'); } .ta-img-cliff-viewpoint { background-image: url('../cruise-images/cruise-region-subpages-images/ta-cliff-viewpoint.webp'); } .ta-img-coastal-lagoon { background-image: url('../cruise-images/cruise-region-subpages-images/ta-coastal-lagoon.webp'); } .ta-img-nature-photography { background-image: url('../cruise-images/cruise-region-subpages-images/ta-nature-photography.webp'); } .ta-img-coastal-trail { background-image: url('../cruise-images/cruise-region-subpages-images/ta-coastal-trail.webp'); } .ta-img-ocean-landscape { background-image: url('../cruise-images/cruise-region-subpages-images/ta-ocean-landscape.webp'); } .ta-img-volcanic-lake { background-image: url('../cruise-images/cruise-region-subpages-images/ta-volcanic-lake.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM TRANSATLANTIC GRADIENT PALETTE */ /* (Card outer accents, still readable with dark text) */ /* ========================================================= */ .ta-card-23-1 { background: linear-gradient(135deg, #A7D8F5, #7CC4EB); } .ta-card-23-2 { background: linear-gradient(135deg, #B2E3C0, #8CCF9E); } .ta-card-23-3 { background: linear-gradient(135deg, #FFD9A6, #FFC47A); } .ta-card-23-4 { background: linear-gradient(135deg, #C8E6C9, #A5D6A7); } .ta-card-23-5 { background: linear-gradient(135deg, #DCE7F8, #BFD4EE); } .ta-card-23-6 { background: linear-gradient(135deg, #F5E1A4, #E8C874); } .ta-card-23-7 { background: linear-gradient(135deg, #F2C1C1, #E89A9A); } .ta-card-23-8 { background: linear-gradient(135deg, #CDEAF2, #A8DCE8); } .ta-card-23-9 { background: linear-gradient(135deg, #E6D4B8, #D4C0A2); } .ta-card-23-10 { background: linear-gradient(135deg, #C8D7E8, #A9C3D8); } .ta-card-23-11 { background: linear-gradient(135deg, #D9E8D4, #C2D9BC); } .ta-card-23-12 { background: linear-gradient(135deg, #F5E7D8, #E8D3BC); } /* HOVER */ .ta-hover-23:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .ta-wildlife-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-wildlife-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-wildlife-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 24 — Transatlantic Cultural Experiences (CSS) */ /* ========================================================= */ .section-24 { padding: 80px 0; background: #F5FAFF; /* Light Atlantic backdrop */ } .ta-section-24-wrapper { max-width: 1300px; margin: 0 auto; } .ta-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102a43; /* Dark text */ } .ta-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .ta-culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ta-culture-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ta-culture-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .ta-culture-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .ta-culture-image { width: 100%; height: 220px; background-size: cover; background-position: center; transition: transform 0.35s ease; } .ta-culture-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — TRANSATLANTIC CULTURAL */ /* ========================================================= */ .ta-img-portuguese-heritage { background-image: url('../cruise-images/cruise-region-subpages-images/ta-portuguese-heritage.webp'); } .ta-img-madeiran-handicrafts { background-image: url('../cruise-images/cruise-region-subpages-images/ta-madeiran-handicrafts.webp'); } .ta-img-azorean-food { background-image: url('../cruise-images/cruise-region-subpages-images/ta-azorean-food.webp'); } .ta-img-canary-architecture { background-image: url('../cruise-images/cruise-region-subpages-images/ta-canary-architecture.webp'); } .ta-img-cultural-performances { background-image: url('../cruise-images/cruise-region-subpages-images/ta-cultural-performances.webp'); } .ta-img-island-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/ta-island-festivals.webp'); } .ta-img-craft-markets { background-image: url('../cruise-images/cruise-region-subpages-images/ta-craft-markets.webp'); } .ta-img-traditional-clothing { background-image: url('../cruise-images/cruise-region-subpages-images/ta-traditional-clothing.webp'); } .ta-img-cultural-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/ta-cultural-workshops.webp'); } .ta-img-coastal-landmarks { background-image: url('../cruise-images/cruise-region-subpages-images/ta-coastal-landmarks.webp'); } .ta-img-island-villages { background-image: url('../cruise-images/cruise-region-subpages-images/ta-island-villages.webp'); } .ta-img-coastal-lifestyle { background-image: url('../cruise-images/cruise-region-subpages-images/ta-coastal-lifestyle.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM TRANSATLANTIC GRADIENT PALETTE */ /* ========================================================= */ .ta-card-24-1 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } .ta-card-24-2 { background: linear-gradient(135deg, #DCEEDC, #BEE3BE); } .ta-card-24-3 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } .ta-card-24-4 { background: linear-gradient(135deg, #E3F2FD, #C5E1F7); } .ta-card-24-5 { background: linear-gradient(135deg, #F8DCE3, #F2B8C8); } .ta-card-24-6 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } .ta-card-24-7 { background: linear-gradient(135deg, #F2D4D4, #E8B1B1); } .ta-card-24-8 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .ta-card-24-9 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .ta-card-24-10 { background: linear-gradient(135deg, #DCE7F8, #C2D4EE); } .ta-card-24-11 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } .ta-card-24-12 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } /* HOVER */ .ta-hover-24:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .ta-culture-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-culture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-culture-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 25 — Transatlantic Cultural Festivals & Island Events */ /* ========================================================= */ .section-25 { padding: 80px 0; background: #F3F7FB; } .ta-section-25-wrapper { max-width: 1300px; margin: 0 auto; } .ta-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #0A3A5E; } .ta-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .ta-festival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ta-festival-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; transform: translateY(0); } .ta-festival-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .ta-festival-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .ta-festival-image { width: 100%; height: 220px; background-size: cover; background-position: center; } /* IMAGE ZOOM — TRANSATLANTIC SECTION 25 */ .ta-festival-image { transition: transform 0.35s ease; } .ta-festival-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — TRANSATLANTIC FESTIVALS */ /* (filenames from your prompts) */ /* ========================================================= */ .ta-img-madeira-flower-festival { background-image: url('../cruise-images/cruise-region-subpages-images/ta-madeira-flower-festival.webp'); } .ta-img-azores-cultural-celebrations { background-image: url('../cruise-images/cruise-region-subpages-images/ta-azores-cultural-celebrations.webp'); } .ta-img-canary-summer-events { background-image: url('../cruise-images/cruise-region-subpages-images/ta-canary-summer-events.webp'); } .ta-img-atlantic-coastal-parades { background-image: url('../cruise-images/cruise-region-subpages-images/ta-atlantic-coastal-parades.webp'); } .ta-img-island-food-festivals { background-image: url('../cruise-images/cruise-region-subpages-images/ta-island-food-festivals.webp'); } .ta-img-maritime-heritage-events { background-image: url('../cruise-images/cruise-region-subpages-images/ta-maritime-heritage-events.webp'); } .ta-img-atlantic-craft-fairs { background-image: url('../cruise-images/cruise-region-subpages-images/ta-atlantic-craft-fairs.webp'); } .ta-img-madeira-wine-festival { background-image: url('../cruise-images/cruise-region-subpages-images/ta-madeira-wine-festival.webp'); } .ta-img-canary-plaza-celebrations { background-image: url('../cruise-images/cruise-region-subpages-images/ta-canary-plaza-celebrations.webp'); } .ta-img-atlantic-floral-displays { background-image: url('../cruise-images/cruise-region-subpages-images/ta-atlantic-floral-displays.webp'); } .ta-img-coastal-holiday-decorations { background-image: url('../cruise-images/cruise-region-subpages-images/ta-coastal-holiday-decorations.webp'); } .ta-img-island-community-day { background-image: url('../cruise-images/cruise-region-subpages-images/ta-island-community-day.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM TRANSATLANTIC GRADIENT PALETTE */ /* (no deep purple / no heavy navy / no near‑black) */ /* ========================================================= */ .ta-festival-card-25-1 { background: linear-gradient(135deg, #FDE2C8, #F9CFA0); } .ta-festival-card-25-2 { background: linear-gradient(135deg, #F8D4D4, #F1B1B1); } .ta-festival-card-25-3 { background: linear-gradient(135deg, #DCE7F8, #C2D4EE); } .ta-festival-card-25-4 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } .ta-festival-card-25-5 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } .ta-festival-card-25-6 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } .ta-festival-card-25-7 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } .ta-festival-card-25-8 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .ta-festival-card-25-9 { background: linear-gradient(135deg, #F5D9D0, #EFBFAF); } .ta-festival-card-25-10 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .ta-festival-card-25-11 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } .ta-festival-card-25-12 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } /* HOVER */ .ta-hover-25:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .ta-festival-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-festival-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-festival-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 26 — Transatlantic Cruise Cuisine (CSS) */ /* ========================================================= */ .section-26 { padding: 80px 0; background: #F7FCFF; /* Light Atlantic sky tone */ } .ta-section-26-wrapper { max-width: 1300px; margin: 0 auto; } .ta-section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #102a43; } .ta-section-subtitle { font-size: 1.2rem; text-align: center; color: #3A4561; margin-bottom: 50px; } /* GRID */ .ta-cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .ta-cuisine-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; } .ta-cuisine-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .ta-cuisine-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* IMAGE BLOCK */ .ta-cuisine-image { width: 100%; height: 220px; background-size: cover; background-position: center; transition: transform 0.35s ease; } .ta-cuisine-image:hover { transform: scale(1.15); } /* ========================================================= */ /* BACKGROUND IMAGES — TRANSATLANTIC CUISINE */ /* ========================================================= */ .ta-img-portuguese-seafood { background-image: url('../cruise-images/cruise-region-subpages-images/ta-portuguese-seafood.webp'); } .ta-img-madeira-specialities { background-image: url('../cruise-images/cruise-region-subpages-images/ta-madeira-specialities.webp'); } .ta-img-azorean-stews { background-image: url('../cruise-images/cruise-region-subpages-images/ta-azorean-stews.webp'); } .ta-img-canary-flavours { background-image: url('../cruise-images/cruise-region-subpages-images/ta-canary-flavours.webp'); } .ta-img-atlantic-grilled-fish { background-image: url('../cruise-images/cruise-region-subpages-images/ta-atlantic-grilled-fish.webp'); } .ta-img-european-brunch { background-image: url('../cruise-images/cruise-region-subpages-images/ta-european-brunch.webp'); } .ta-img-mediterranean-dining { background-image: url('../cruise-images/cruise-region-subpages-images/ta-mediterranean-dining.webp'); } .ta-img-european-pastries { background-image: url('../cruise-images/cruise-region-subpages-images/ta-european-pastries.webp'); } .ta-img-european-vegetarian { background-image: url('../cruise-images/cruise-region-subpages-images/ta-european-vegetarian.webp'); } .ta-img-european-buffet { background-image: url('../cruise-images/cruise-region-subpages-images/ta-european-buffet.webp'); } .ta-img-european-desserts { background-image: url('../cruise-images/cruise-region-subpages-images/ta-european-desserts.webp'); } .ta-img-al-fresco-dining { background-image: url('../cruise-images/cruise-region-subpages-images/ta-al-fresco-dining.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM GRADIENT PALETTE (NEW, NOT COPIED) */ /* ========================================================= */ .ta-card-26-1 { background: linear-gradient(135deg, #CDEAF7, #A8D4EB); } .ta-card-26-2 { background: linear-gradient(135deg, #F8E2C8, #F3CFA0); } .ta-card-26-3 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } .ta-card-26-4 { background: linear-gradient(135deg, #F7D4D4, #E8B1B1); } .ta-card-26-5 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .ta-card-26-6 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } .ta-card-26-7 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } .ta-card-26-8 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } .ta-card-26-9 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .ta-card-26-10 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } .ta-card-26-11 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } .ta-card-26-12 { background: linear-gradient(135deg, #DCEEDC, #BEE3BE); } /* HOVER */ .ta-hover-26:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .ta-cuisine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-cuisine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-cuisine-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 27 — Transatlantic Island & Coastal Excursions */ /* ========================================================= */ .section-27 { padding: 80px 0; background: #F3F7FF; /* light, clean background (different from NA template) */ } .ta-section-27-wrapper { max-width: 1300px; margin: 0 auto; } .section-27 .section-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .section-27 .section-subtitle { font-size: 1.2rem; text-align: center; color: #555; margin-bottom: 50px; } /* GRID */ .ta-excursions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* CARD BASE */ .transatlantic-excursion-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; cursor: pointer; position: relative; opacity: 0; transform: translateY(20px); padding: 0; border: none; } /* IMAGE BLOCK */ .transatlantic-excursion-card .excursion-image { display: block; width: 100%; height: 220px; margin: 0; padding: 0; border: none; background-size: cover; background-position: center; position: relative; z-index: 10; } /* IMAGE ZOOM — TRANSATLANTIC SECTION 27 */ .transatlantic-excursion-card .excursion-image { transition: transform 0.35s ease; } .transatlantic-excursion-card .excursion-image:hover { transform: scale(1.15); } /* TEXT */ .transatlantic-excursion-card h3, .transatlantic-excursion-card p { position: relative; z-index: 20; text-align: center; margin-left: 0; margin-right: 0; width: 100%; } .transatlantic-excursion-card h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 20px 10px 20px; color: #102a43; } .transatlantic-excursion-card p { font-size: 1rem; line-height: 1.55; margin: 0 20px 20px 20px; color: #1a1a1a; opacity: 0.95; } /* REVEAL */ .section-27.region-reveal-ta .transatlantic-excursion-card.ta-card-27-revealed { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* BACKGROUND IMAGES — TRANSATLANTIC SHORE EXCURSIONS */ /* (filenames from your prompts) */ /* ========================================================= */ .ta-image-city-skyline-tours { background-image: url('../cruise-images/cruise-region-subpages-images/ta-city-skyline-tours.webp'); } .ta-image-atlantic-food-markets { background-image: url('../cruise-images/cruise-region-subpages-images/ta-atlantic-food-markets.webp'); } .ta-image-madeira-levadas { background-image: url('../cruise-images/cruise-region-subpages-images/ta-madeira-levadas.webp'); } .ta-image-azores-whale-watching { background-image: url('../cruise-images/cruise-region-subpages-images/ta-azores-whale-watching.webp'); } .ta-image-canary-workshops { background-image: url('../cruise-images/cruise-region-subpages-images/ta-canary-workshops.webp'); } .ta-image-atlantic-harbour-cruises { background-image: url('../cruise-images/cruise-region-subpages-images/ta-atlantic-harbour-cruises.webp'); } .ta-image-historic-district-walks { background-image: url('../cruise-images/cruise-region-subpages-images/ta-historic-district-walks.webp'); } .ta-image-madeira-gardens { background-image: url('../cruise-images/cruise-region-subpages-images/ta-madeira-gardens.webp'); } .ta-image-island-villages { background-image: url('../cruise-images/cruise-region-subpages-images/ta-island-villages.webp'); } .ta-image-soft-adventure-activities{ background-image: url('../cruise-images/cruise-region-subpages-images/ta-soft-adventure-activities.webp'); } .ta-image-small-towns-visits { background-image: url('../cruise-images/cruise-region-subpages-images/ta-small-towns-visits.webp'); } .ta-image-premium-private-tours { background-image: url('../cruise-images/cruise-region-subpages-images/ta-premium-private-tours.webp'); } /* ========================================================= */ /* LIGHT–MEDIUM TRANSATLANTIC GRADIENT PALETTE */ /* (no deep purple / no heavy navy / no near‑black) */ /* ========================================================= */ .ta-card-27-1 { background: linear-gradient(135deg, #FDE2C8, #F9CFA0); } .ta-card-27-2 { background: linear-gradient(135deg, #F8D4D4, #F1B1B1); } .ta-card-27-3 { background: linear-gradient(135deg, #DCE7F8, #C2D4EE); } .ta-card-27-4 { background: linear-gradient(135deg, #E6F2E6, #CFE5CF); } .ta-card-27-5 { background: linear-gradient(135deg, #FFE3B8, #FFD28A); } .ta-card-27-6 { background: linear-gradient(135deg, #CDE7F5, #A9D4EB); } .ta-card-27-7 { background: linear-gradient(135deg, #F7E8D8, #EAD3BC); } .ta-card-27-8 { background: linear-gradient(135deg, #D9E8F2, #BFD8E8); } .ta-card-27-9 { background: linear-gradient(135deg, #F5D9D0, #EFBFAF); } .ta-card-27-10 { background: linear-gradient(135deg, #E8E2D4, #D6CBB8); } .ta-card-27-11 { background: linear-gradient(135deg, #F2D4E3, #E8B8CF); } .ta-card-27-12 { background: linear-gradient(135deg, #FFF1C9, #FFE29A); } /* HOVER */ .ta-hover-27:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* RESPONSIVE */ @media (max-width: 1200px) { .ta-excursions-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ta-excursions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ta-excursions-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 28 — Transatlantic Cruise Transportation & Transfers (CSS) */ /* ========================================================= */ .section-28 { padding: 80px 0; background: #F2F6FF; /* NEW Transatlantic background — light, clean, not NA */ } .transatlantic-transfers-inner { max-width: 1300px; margin: 0 auto; } .transatlantic-transfers-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .transatlantic-transfers-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 20px; } /* GRID */ .transatlantic-transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } /* CARD BASE */ .transatlantic-transfer-card { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: all 0.35s ease; transform: translateY(0); cursor: pointer; padding: 25px 22px; opacity: 0; transform: translateY(20px); } /* TEXT */ .transfer-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: #102a43; } .transfer-card-text { font-size: 1rem; line-height: 1.55; color: #444; margin-bottom: 16px; } .transfer-card-note { font-size: 0.95rem; color: #333; opacity: 0.9; } /* ========================================================= */ /* TRANSATLANTIC GRADIENTS — LIGHT–MEDIUM ONLY */ /* (No deep purple, no heavy navy, no near‑black) */ /* ========================================================= */ .transfer-card-city-ta { background: linear-gradient(135deg, #A8D8FF, #7BB8F2); /* Atlantic sky blue */ color: #fff; } .transfer-card-airport-ta { background: linear-gradient(135deg, #BEE8C4, #8CCF99); /* Madeira/Azores green */ color: #fff; } .transfer-card-cruiseline-ta { background: linear-gradient(135deg, #F9D6A5, #F2B870); /* warm Atlantic coastal sand */ color: #fff; } .transfer-card-local-ta { background: linear-gradient(135deg, #9ED9E8, #6BBFD4); /* Canary/Azores coastal aqua */ color: #fff; } .transfer-card-access-ta { background: linear-gradient(135deg, #C9CFFF, #9FAEF2); /* soft Atlantic lavender-blue */ color: #fff; } .transfer-card-planning-ta { background: linear-gradient(135deg, #FFE7A8, #FFD27A); /* bright island sunlight */ color: #fff; } /* HOVER */ .transatlantic-transfer-card:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } /* REVEAL */ .section-28.region-reveal-active .transatlantic-transfer-card { opacity: 1; transform: translateY(0); } /* RESPONSIVE */ @media (max-width: 1200px) { .transatlantic-transfers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .transatlantic-transfers-grid { grid-template-columns: 1fr; } } /* ========================================================= */ /* SECTION 29 — Transatlantic Cruise FAQ (CSS) */ /* ========================================================= */ .section-29 { padding: 80px 0; background: #F1F6FF; /* NEW Transatlantic background — soft Atlantic blue */ } .transatlantic-faq-inner { max-width: 1100px; margin: 0 auto; } .transatlantic-faq-title { font-size: 2.4rem; font-weight: 800; text-align: center; margin-bottom: 10px; color: #1a1a1a; } .transatlantic-faq-intro { font-size: 1.15rem; text-align: center; color: #555; margin-bottom: 40px; } /* Accordion Container */ .transatlantic-faq-accordion { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* FAQ Item */ .transatlantic-faq-item { background: #F7FAFF; /* light–medium, clean, high contrast */ border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; } /* FAQ Question Button */ .transatlantic-faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 24px; font-size: 1.15rem; font-weight: 700; color: #102a43; text-align: left; cursor: pointer; position: relative; transition: background 0.25s ease; } /* Hover */ .transatlantic-faq-question:hover { background: #E6F0FF; /* soft Atlantic highlight */ } /* Arrow Icon */ .transatlantic-faq-question::after { content: "▼"; font-size: 1rem; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } /* Active Arrow */ .transatlantic-faq-item.active .transatlantic-faq-question::after { transform: translateY(-50%) rotate(180deg); } /* FAQ Answer */ .transatlantic-faq-answer { max-height: 0; overflow: hidden; background: #ffffff; padding: 0 24px; transition: max-height 0.35s ease; } .transatlantic-faq-answer p { font-size: 1rem; color: #444; line-height: 1.55; padding: 18px 0 22px 0; } /* Active Answer */ .transatlantic-faq-item.active .transatlantic-faq-answer { max-height: 320px; } /* Responsive */ @media (max-width: 800px) { .transatlantic-faq-title { font-size: 2rem; } .transatlantic-faq-question { font-size: 1.05rem; } } /* ============================================================ FIX — Header & Breadcrumb Left/Right Padding (Region Subpages Only) ============================================================ */ .page-cruise-subpage .site-header .container, .page-cruise-subpage .breadcrumb .container { padding-left: 24px !important; padding-right: 24px !important; }