/* ============================================================ CRUISE ITINERARIES INDEX Page: Batch 1 of 5 — BASE + HEADER + BREADCRUMB + HERO ============================================================ */ /* ------------------------------------------------------------ 1. PAGE BASE ------------------------------------------------------------ */ .page-cruise-itineraries { font-family: "Inter", system-ui, sans-serif; background: #f8f8f8; color: #222; overflow-x: hidden; } /* ------------------------------------------------------------ 2. FLOATING HEADER + NAV (CRUISE HOME STYLE) ------------------------------------------------------------ */ .page-cruise-itineraries .site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 30; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) ); backdrop-filter: blur(4px); } .page-cruise-itineraries .site-header .container { display: flex; justify-content: center; align-items: center; position: relative; padding: 14px 0; } /* Logo pinned left, like Cruise Home */ .page-cruise-itineraries .logo { position: absolute; left: 40px; color: #ffffff; font-weight: 700; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,0.75); } /* Centered nav */ .page-cruise-itineraries .main-nav { display: flex; gap: 32px; justify-content: center; align-items: center; } .page-cruise-itineraries .main-nav a { color: #ffffff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 18px; padding-bottom: 0; font-size: 0.95rem; line-height: 1.2; text-shadow: 0 2px 6px rgba(0,0,0,0.75); } /* Active link — Itineraries */ .page-cruise-itineraries header.site-header .main-nav a[href="../cruise-itineraries/index.html"] { border-bottom: 4px solid #ffffff; padding-bottom: 4px; } /* ------------------------------------------------------------ 3. BREADCRUMB ------------------------------------------------------------ */ .page-cruise-itineraries .breadcrumb { margin-top: 60px; background: #f5f5f5; padding: 10px 0; font-size: 0.95rem; border-bottom: 1px solid #e0e0e0; position: relative; z-index: 20; } .page-cruise-itineraries .breadcrumb .container { display: flex; align-items: center; gap: 6px; } .page-cruise-itineraries .breadcrumb a { color: #0077cc; text-decoration: none; font-weight: 600; } .page-cruise-itineraries .breadcrumb a:hover { text-decoration: underline; } .page-cruise-itineraries .breadcrumb span { color: #666; } /* ------------------------------------------------------------ 4. HERO — CRUISE HOME STYLE ------------------------------------------------------------ */ .page-cruise-itineraries .hero-itineraries { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; height: 420px; } /* Background image */ .page-cruise-itineraries .hero-itineraries .hero-background { position: absolute; inset: 0; background-image: url("../cruise-images/hero/cruise-itineraries-hero.webp"); background-size: cover; background-position: top center; background-repeat: no-repeat; z-index: 1; } /* Overlay */ .page-cruise-itineraries .hero-itineraries .hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 2; } /* Content */ .page-cruise-itineraries .hero-itineraries .hero-content { position: relative; z-index: 3; text-align: center; padding-top: 120px; /* vertically centers text in 420px hero */ color: #ffffff; } /* Title */ .page-cruise-itineraries .hero-itineraries .hero-title { font-size: 2.6rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 10px; text-shadow: 0 2px 6px rgba(0,0,0,0.45); } /* Subtitle */ .page-cruise-itineraries .hero-itineraries .hero-subtitle { font-size: 1.1rem; max-width: 700px; margin: 0 auto; line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,0.35); } /* ============================================================ 5. SECTION LAYOUT + TITLES (CRUISE HOME STYLE) ============================================================ */ /* Section wrapper */ .page-cruise-itineraries .section { padding: 60px 0; background: #ffffff; } /* Section title */ .page-cruise-itineraries .section .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 12px; text-align: center; color: #0d1b2a; /* deeper navy for premium feel */ letter-spacing: -0.3px; } /* Section subtitle */ .page-cruise-itineraries .section .section-subtitle { font-size: 1.1rem; margin-bottom: 40px; text-align: center; color: #4b5563; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.6; } /* Extra breathing room under the main itineraries grid */ .page-cruise-itineraries .region-list-grid { padding-bottom: 25px; } /* ============================================================ 6. ITINERARY GRID + CARDS (CRUISE HOME PREMIUM STYLE) ============================================================ */ /* Grid wrapper */ .page-cruise-itineraries .region-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 20px; margin-bottom: 60px; padding-bottom: 25px; } /* ------------------------------------------------------------ CARD BASE ------------------------------------------------------------ */ .page-cruise-itineraries .itinerary-card { background: #ffffff; border-radius: 12px; overflow: hidden; /* Premium border + shadow */ border: 1px solid #d5d9e2; box-shadow: 0 4px 14px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Hover lift */ .page-cruise-itineraries .itinerary-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); border-color: #b8c0cc; } /* ------------------------------------------------------------ CARD IMAGE ------------------------------------------------------------ */ .page-cruise-itineraries .itinerary-card-image { width: 100%; height: 170px; overflow: hidden; margin: 0; padding: 0; } .page-cruise-itineraries .itinerary-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ------------------------------------------------------------ CARD CONTENT ------------------------------------------------------------ */ .page-cruise-itineraries .itinerary-card-content { padding: 18px 20px 22px; text-align: center; display: flex; flex-direction: column; flex: 1; } /* Title */ .page-cruise-itineraries .itinerary-card-content .region-list-title { font-size: 1.25rem; font-weight: 700; margin-top: 14px; margin-bottom: 6px; color: #0d1b2a; } /* Description */ .page-cruise-itineraries .itinerary-card-content .region-list-text { color: #4b5563; margin-bottom: 18px; line-height: 1.55; font-size: 0.97rem; } /* Button — pinned to bottom */ .page-cruise-itineraries .itinerary-card-content .btn { margin-top: auto; } /* Primary button style (inherits from global) */ .page-cruise-itineraries .itinerary-card-content .btn-primary { padding: 10px 20px; font-size: 0.9rem; border-radius: 6px; } /* ============================================================ 7. FOOTER — DARK NAVY (CRUISE HOME STYLE) ============================================================ */ .page-cruise-itineraries .site-footer { background: #0d2247; /* deep navy */ padding: 40px 0 25px; /* balanced vertical spacing */ border-top: 1px solid #0b1a33; /* subtle top border */ color: #dbe4f3; /* soft light blue text */ margin-top: 40px; } /* ------------------------------------------------------------ FOOTER GRID — 3 COLUMNS ------------------------------------------------------------ */ .page-cruise-itineraries .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Column titles */ .page-cruise-itineraries .footer-col h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; color: #ffffff; } /* Lists */ .page-cruise-itineraries .footer-col ul { list-style: none; padding: 0; margin: 0; } .page-cruise-itineraries .footer-col ul li { margin-bottom: 8px; } .page-cruise-itineraries .footer-col ul li a { color: #dbe4f3; text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; } .page-cruise-itineraries .footer-col ul li a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ FOOTER BOTTOM — COPYRIGHT + BACK TO TOP ------------------------------------------------------------ */ .page-cruise-itineraries .footer-bottom { text-align: center; padding-top: 18px; border-top: 1px solid #0b1a33; margin-top: 28px; display: flex; flex-direction: column; gap: 8px; align-items: center; } /* Back to top button — Cruise Home pill style */ .page-cruise-itineraries .footer-bottom .back-to-top { background: transparent; border: 1px solid #dbe4f3; color: #dbe4f3; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .page-cruise-itineraries .footer-bottom .back-to-top:hover { background: #dbe4f3; color: #0d2247; } /* Copyright */ .page-cruise-itineraries .footer-bottom p { font-size: 0.9rem; color: #dbe4f3; margin: 0; } /* ------------------------------------------------------------ MOBILE — STACK FOOTER COLUMNS ------------------------------------------------------------ */ @media (max-width: 768px) { .page-cruise-itineraries .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; } } /* ============================================================ 8. MOBILE REFINEMENTS + FINAL POLISH ============================================================ */ /* ------------------------------------------------------------ HERO — RESPONSIVE HEIGHT ------------------------------------------------------------ */ @media (max-width: 900px) { .page-cruise-itineraries .hero-itineraries { height: 340px; } .page-cruise-itineraries .hero-itineraries .hero-content { padding-top: 100px; } } @media (max-width: 600px) { .page-cruise-itineraries .hero-itineraries { height: 260px; } .page-cruise-itineraries .hero-itineraries .hero-content { padding-top: 80px; } .page-cruise-itineraries .hero-itineraries .hero-title { font-size: 1.9rem; } .page-cruise-itineraries .hero-itineraries .hero-subtitle { font-size: 0.95rem; max-width: 90%; } } /* ------------------------------------------------------------ GRID — RESPONSIVE STACKING ------------------------------------------------------------ */ @media (max-width: 768px) { .page-cruise-itineraries .region-list-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } } @media (max-width: 600px) { .page-cruise-itineraries .region-list-grid { grid-template-columns: 1fr; gap: 18px; } .page-cruise-itineraries .itinerary-card-image { height: 150px; } } /* ------------------------------------------------------------ CARD CONTENT — MOBILE TWEAKS ------------------------------------------------------------ */ @media (max-width: 600px) { .page-cruise-itineraries .itinerary-card-content { padding: 16px 18px 20px; } .page-cruise-itineraries .itinerary-card-content .region-list-title { font-size: 1.15rem; } .page-cruise-itineraries .itinerary-card-content .region-list-text { font-size: 0.92rem; } } /* ------------------------------------------------------------ FOOTER — MOBILE STACKING ------------------------------------------------------------ */ @media (max-width: 768px) { .page-cruise-itineraries .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; } } @media (max-width: 600px) { .page-cruise-itineraries .footer-bottom { padding-top: 12px; margin-top: 18px; } .page-cruise-itineraries .footer-bottom .back-to-top { padding: 7px 16px; font-size: 0.85rem; } } /* ------------------------------------------------------------ FINAL CONSISTENCY PASS ------------------------------------------------------------ */ /* Remove any accidental horizontal scroll from full-width hero */ .page-cruise-itineraries body, .page-cruise-itineraries { overflow-x: hidden; } /* Ensure clean spacing under last section */ .page-cruise-itineraries main { padding-bottom: 40px; } /* ============================================================ ITINERARIES MAIN INDEX PAGE FOOTER — MATCH CRUISE HOME FOOTER (Montserrat font, bullets, spacing, colours, layout) ============================================================ */ /* 1. Use Montserrat ONLY inside the footer */ .page-cruise-itineraries .site-footer { font-family: 'Montserrat', sans-serif !important; } /* 2. Match Cruise Home footer spacing + layout */ .page-cruise-itineraries .site-footer { background: #0d2247 !important; padding: 28px 0 18px !important; border-top: 1px solid #0b1a33 !important; margin-top: 0 !important; } .page-cruise-itineraries .footer-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px !important; padding: 0 !important; padding-bottom: 16px !important; border-bottom: 1px solid #0b1a33 !important; } /* 3. Footer headings */ .page-cruise-itineraries .footer-col h4 { font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #ffffff !important; } /* 4. Restore bullet points (•) exactly like Cruise Home */ .page-cruise-itineraries .footer-col ul { list-style: none !important; padding: 0; margin: 0; } .page-cruise-itineraries .footer-col ul li { margin-bottom: 4px !important; } .page-cruise-itineraries .footer-col ul li a { font-size: 0.97rem !important; color: #dbe4f3 !important; text-decoration: none; transition: 0.2s ease; position: relative; padding-left: 14px; /* space for bullet */ } /* Bullet dot */ .page-cruise-itineraries .footer-col ul li a::before { content: "•"; position: absolute; left: 0; top: 1px; color: #9bb0d4 !important; font-size: 0.7rem; } /* Hover behaviour */ .page-cruise-itineraries .footer-col ul li a:hover { color: #ffffff !important; text-decoration: underline; text-underline-offset: 3px; } /* 5. Footer bottom (copyright + back to top) */ .page-cruise-itineraries .footer-bottom { text-align: center; margin-top: 16px !important; padding-top: 12px !important; border-top: 1px solid #0b1a33 !important; } .page-cruise-itineraries .footer-bottom p { font-size: 0.93rem !important; color: #dbe4f3 !important; letter-spacing: 0.25px; }