/* ========================================================= REDISCOVER JOURNEYS ========================================================= */ /* ========================================================= GOOGLE FONTS ========================================================= */ /* Load these in your HTML : DM Sans League Gothic Bodoni Moda */ /* ========================================================= LUXURY COLOUR SYSTEM ========================================================= */ :root { --black: #0A0A0A; --black-soft: #111111; --gold: #C6A15B; --gold-light: #D8B978; --white: #FFFFFF; --white-soft: rgba(255, 255, 255, 0.84); --white-muted: rgba(255, 255, 255, 0.62); --cream: #F3F0E8; --story-bg: #F3F0E8; --journey-bg: #E9E2D4; --journey-card: #F3EFE6; --journey-text: #171613; --journey-muted: rgba(23, 22, 19, 0.62); --border-dark: rgba(10, 10, 10, 0.12); --border-light: rgba(255, 255, 255, 0.16); --container: 1400px; } /* ========================================================= GLOBAL ELEGANT CURSOR ========================================================= */ html, body { cursor: default; } /* Elegant pointer for normal website areas */ body, body * { cursor: default; } /* Keep the hand pointer for anything clickable */ a, button, input[type="button"], input[type="submit"], input[type="reset"], select, label[for], [role="button"] { cursor: pointer; } /* ========================================================= RESET ========================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: "DM Sans", sans-serif; background: var(--black); color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.menu-open { overflow: hidden; } img, video { max-width: 100%; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } /* ========================================================= GLOBAL TYPOGRAPHY ========================================================= */ h1, h2, h3, h4, h5, h6 { font-family: "League Gothic", sans-serif !important; font-weight: 400; font-style: normal; text-transform: uppercase; } .hero__title, .rediscover-story__title, .rediscover-story__closing, .rediscover-reviews__title, .start-journey__title, .traveller-card__content h3, .popular-card__content h3, .month-card h3, .spotlight-card__content h3 { font-family: "League Gothic", sans-serif !important; font-weight: 400; font-style: normal; text-transform: uppercase; } /* ========================================================= HEADER ========================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%; height: 70px; padding: 0 42px; display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; column-gap: 30px; color: #ffffff; /* Default = BLACK */ background: #000000; border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); pointer-events: auto; transition: background-color 0.45s ease, box-shadow 0.45s ease; } /* ========================================================= HOME PAGE ONLY TRANSPARENT AT THE TOP ========================================================= */ body.home .site-header { background: transparent; box-shadow: none; } /* ========================================================= HOME PAGE — BLACK AFTER SCROLL ========================================================= */ body.home .site-header.is-scrolled { background: #000000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } /* ========================================================= ALL OTHER PAGES ALWAYS BLACK ========================================================= */ body:not(.home) .site-header { background: #000000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } /* ========================================================= NAVIGATION ========================================================= */ .main-nav { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 2.2vw, 38px); height: 100%; transform: translateY(-20px); min-width: 0; } .main-nav a { position: relative; display: inline-flex; align-items: center; height: 100%; transform: translateY(15px); font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); white-space: nowrap; text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .main-nav a:hover { color: var(--gold-light); } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 26px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(.77, 0, .18, 1); } .main-nav a:hover::after { transform: scaleX(1); transform-origin: left; } /* ========================================================= LOGO ========================================================= */ .site-logo { display: flex; align-items: center; justify-content: flex-start; width: 175px; position: relative; z-index: 2; transform: translateY(-2px); } .site-logo img { display: block; width: 100%; height: auto; max-height: 60px; object-fit: contain; } /* ========================================================= HEADER ACTIONS ========================================================= */ .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; white-space: nowrap; transform: translateY(-20px); } /* ========================================================= CONNECT NOW ========================================================= */ .header-plan { position: relative; top: -2px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 6px 10px; background-color: #b89a63 !important; color: #000000 !important; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap; text-decoration: none; border: 1px solid var(--gold) !important; border-radius: 3px; cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } .header-plan span { font-size: 10px; line-height: 1; color: #000000 !important; transition: color 0.35s ease, transform 0.35s ease; } /* HOVER */ .header-plan:hover { background-color: #000000 !important; background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; transform: translateY(-1px); } .header-plan:hover span { color: #ffffff !important; transform: translateX(3px); } /* ========================================================= HAMBURGER ========================================================= */ .menu-toggle { position: relative; width: 32px; height: 32px; padding: 5px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; transform: translateY(14px); } .menu-toggle span { display: block; width: 19px; height: 1px; background: #ffffff; transition: width 0.3s ease, transform 0.35s ease, opacity 0.35s ease; } .menu-toggle span:nth-child(2) { width: 13px; } .menu-toggle:hover span:nth-child(2) { width: 19px; } /* ========================================================= MENU OPEN ========================================================= */ body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; } body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); } /* ========================================================= MENU OVERLAY ========================================================= */ .menu-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.58); opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s ease; } body.menu-open .menu-overlay { opacity: 1; visibility: visible; } /* ========================================================= MOBILE / TABLET NAVIGATION ========================================================= */ .side-menu__mobile-nav { display: none; } .side-menu__mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(10, 10, 10, 0.10); color: #0a0a0a; text-decoration: none; font-family: "Bodoni Moda", Georgia, serif; font-size: 22px; font-weight: 400; transition: color 0.3s ease, padding-left 0.3s ease; } .side-menu__mobile-nav a:hover { color: #b89a5b; padding-left: 8px; } .side-menu__mobile-nav a span:last-child { font-family: "DM Sans", sans-serif; font-size: 15px; transition: transform 0.3s ease; } .side-menu__mobile-nav a:hover span:last-child { transform: translateX(5px); } /* ========================================================= SIDE MENU DESKTOP = FULL SCREEN TABLET / MOBILE = RIGHT SIDEBAR ========================================================= */ /* ========================================================= BASE ========================================================= */ .side-menu { position: fixed; top: 0; right: 0; z-index: 201; width: min(480px, 90vw); height: 100vh; height: 100svh; padding: 40px; background: var(--cream); color: var(--black); transform: translateX(100%); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; transition: transform 0.6s cubic-bezier(.77, 0, .18, 1); } .side-menu *, .side-menu *::before, .side-menu *::after { box-sizing: border-box; } /* ========================================================= OPEN ========================================================= */ body.menu-open .side-menu { transform: translateX(0); } /* ========================================================= HEADER ========================================================= */ .side-menu__top { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding-bottom: 25px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* ========================================================= CLOSE BUTTON ========================================================= */ .menu-close { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--black); font-family: "DM Sans", sans-serif; font-size: 32px; font-weight: 200; line-height: 1; cursor: pointer; transition: color 0.3s ease, transform 0.3s ease; } .menu-close:hover { color: var(--gold); transform: rotate(90deg); } /* ========================================================= DESKTOP MENU WRAPPER ========================================================= */ .side-menu__desktop { display: none; } /* ========================================================= MOBILE / TABLET NAVIGATION ========================================================= */ .side-menu__nav { display: flex; flex-direction: column; margin-top: 35px; } .side-menu__nav a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.10); color: var(--black); text-decoration: none; font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(1.8rem, 7vw, 2.7rem); font-weight: 500; line-height: 1.05; transition: color 0.3s ease, padding-left 0.3s ease; } .side-menu__nav a:hover { padding-left: 8px; color: var(--gold); } /* ========================================================= NAVIGATION ARROW ========================================================= */ .side-menu__arrow { flex-shrink: 0; margin-left: 15px; font-family: "DM Sans", sans-serif; font-size: 18px; color: var(--gold); transition: transform 0.3s ease; } .side-menu__nav a:hover .side-menu__arrow { transform: translateX(6px); } /* ========================================================= MOBILE / TABLET BOTTOM ========================================================= */ .side-menu__bottom { margin-top: auto; padding-top: 35px; flex-shrink: 0; } .side-menu__bottom p { max-width: 290px; margin: 0 0 22px; font-family: "Bodoni Moda", Georgia, serif; font-size: 17px; line-height: 1.5; color: rgba(10, 10, 10, 0.68); } /* ========================================================= CTA BUTTON ========================================================= */ .side-menu__cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 145px; min-height: 40px; padding: 10px 14px; background: var(--gold); border: 1px solid var(--gold); border-radius: 4px; color: #000000; text-decoration: none; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } .side-menu__cta span { color: #000000; font-size: 10px; transition: color 0.35s ease, transform 0.35s ease; } /* ========================================================= CTA HOVER ========================================================= */ .side-menu__cta:hover { background: #000000; border-color: #000000; color: #ffffff; transform: translateY(-2px); } .side-menu__cta:hover span { color: #ffffff; } .side-menu__cta:hover span:last-child { transform: translateX(5px); } /* ========================================================= FAQ PANEL ========================================================= */ .faq-panel { width: 100%; max-width: 900px; margin: 0 auto; padding: 10px 0 50px; } @media (max-width: 900px) { .site-header { height: 72px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; } .site-logo img { height: 44px; } .main-nav { margin-left: auto; margin-right: 0; } .main-nav>a { display: none; } .header-plan { display: none; } /* HAMBURGER */ .menu-toggle { width: 42px; height: 42px; } /* MOBILE DRAWER */ .side-menu { top: 0; right: 0; bottom: 0; left: auto; width: min(390px, 88vw); height: 100vh; transform: translateX(100%); transition: transform 0.55s cubic-bezier(.77, 0, .18, 1), visibility 0s linear 0.55s; } .side-menu.is-open { transform: translateX(0); transition: transform 0.55s cubic-bezier(.77, 0, .18, 1), visibility 0s linear 0s; } /* MENU HEADER */ .side-menu__top { height: 72px; padding: 0 22px; } /* NEW MOBILE LINKS */ .side-menu__mobile-nav { display: flex; flex-direction: column; padding: 15px 22px 0; } /* HIDE DESKTOP MENU CONTENT */ .side-menu__desktop { display: none; } /* BOTTOM CTA */ .side-menu__bottom { position: fixed; left: auto; right: 0; bottom: 0; width: min(390px, 88vw); box-sizing: border-box; padding: 16px 22px; background: #f5f1e8; } .side-menu__bottom p { display: none; } } @media (max-width: 600px) { .site-header { height: 68px; padding: 0 18px; } .site-logo img { height: 40px; } .menu-toggle { width: 38px; height: 38px; } .menu-toggle span { width: 23px; } .menu-toggle span:nth-child(2) { width: 16px; } .side-menu { width: 88vw; } .side-menu__top { height: 68px; padding: 0 18px; } .side-menu__mobile-nav { padding: 12px 18px 0; } .side-menu__mobile-nav a { padding: 14px 0; font-size: 19px; } .side-menu__bottom { width: 88vw; padding: 14px 18px; } } /* ========================================================= FAQ HEADER ========================================================= */ .faq-panel__header { margin-bottom: 30px; } .faq-panel__eyebrow { display: block; margin-bottom: 12px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .faq-panel__header h2 { margin: 0 0 15px; font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 500; line-height: 1.05; color: var(--black); } .faq-panel__header p { max-width: 650px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; color: rgba(10, 10, 10, 0.65); } /* ========================================================= FAQ LIST ========================================================= */ .faq-list { width: 100%; } /* ========================================================= FAQ CATEGORY ========================================================= */ .faq-category { width: 100%; } /* * Hide category headings because * the simplified FAQ only shows * general questions. */ .faq-category__heading { display: none; } /* ========================================================= FAQ ITEM ========================================================= */ .faq-item { width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.12); } .faq-item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } /* ========================================================= FAQ QUESTION ========================================================= */ .faq-question { font-family: "League Gothic", sans-serif !important; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; border: 0; background: transparent; color: var(--black); text-align: left; cursor: pointer; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.45; transition: color 0.3s ease, padding-left 0.3s ease; } .faq-question:hover { color: var(--gold); padding-left: 5px; } /* ========================================================= FAQ QUESTION TEXT ========================================================= */ .faq-question>span:first-child { display: block; max-width: calc(100% - 45px); } /* ========================================================= PLUS ICON ========================================================= */ .faq-plus { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin-left: 15px; font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 300; line-height: 1; color: var(--gold); transition: transform 0.35s ease, color 0.3s ease; } /* ========================================================= FAQ ANSWER ========================================================= */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; } .faq-answer>p { min-height: 0; overflow: hidden; margin: 0; padding: 0; font-family: "DM Sans", sans-serif; font-size: 12px; line-height: 1.65; color: rgba(10, 10, 10, 0.65); transition: padding 0.4s ease; } /* ========================================================= ACTIVE FAQ ========================================================= */ .faq-item.is-open .faq-answer { grid-template-rows: 1fr; } .faq-item.is-open .faq-answer>p { padding: 0 45px 18px 0; } .faq-item.is-open .faq-plus { transform: rotate(45deg); color: var(--black); } .faq-view-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 0; background: transparent; border: 0; color: var(--black); text-decoration: none; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; cursor: pointer; } /* ========================================================= TEXT ========================================================= */ .faq-view-more span:first-child { color: var(--black); text-decoration: none; transition: color 0.3s ease, text-decoration-color 0.3s ease; } /* ========================================================= ARROW ========================================================= */ .faq-view-more span:last-child { color: var(--gold); font-size: 13px; line-height: 1; text-decoration: none !important; transition: transform 0.3s ease; } /* ========================================================= HOVER — GOLD UNDERLINE ONLY ON TEXT ========================================================= */ .faq-view-more:hover span:first-child { color: var(--black); text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; } /* ========================================================= HOVER ARROW ========================================================= */ .faq-view-more:hover span:last-child { transform: translateX(4px); } /* ========================================================= HIDE ALL FAQ CATEGORIES EXCEPT GENERAL ========================================================= */ /* * If you create a dedicated .faq-general section, * use this instead of hiding categories individually. */ .faq-general { display: block; } /* ========================================================= DESKTOP FAQ ========================================================= */ @media (min-width: 1200px) { .faq-panel { max-width: 850px; padding: 5px 0 45px; } .faq-panel__header { margin-bottom: 28px; } .faq-panel__header h2 { font-size: 2.6rem; } .faq-panel__header p { font-size: 12px; max-width: 600px; } .faq-question { padding: 16px 0; font-size: 12px; } .faq-answer>p { font-size: 11px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1199px) { .faq-panel { padding: 10px 0 40px; } .faq-panel__header h2 { font-size: clamp(2rem, 5vw, 2.7rem); } .faq-question { font-size: 13px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .faq-panel { padding: 5px 0 35px; } .faq-panel__header { margin-bottom: 24px; } .faq-panel__eyebrow { font-size: 10px; margin-bottom: 10px; } .faq-panel__header h2 { font-size: clamp(1.8rem, 8vw, 2.3rem); line-height: 1.08; } .faq-panel__header p { font-size: 12px; line-height: 1.55; } .faq-question { padding: 16px 0; font-size: 12px; } .faq-question>span:first-child { max-width: calc(100% - 35px); } .faq-plus { width: 22px; height: 22px; font-size: 16px; } .faq-item.is-open .faq-answer>p { padding: 0 30px 16px 0; } .faq-view-more { width: auto; min-width: 150px; margin-top: 24px; padding: 10px 15px; font-size: 10px; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 380px) { .faq-panel__header h2 { font-size: 1.75rem; } .faq-panel__header p { font-size: 11px; } .faq-question { font-size: 11px; padding: 14px 0; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .faq-panel *, .faq-panel *::before, .faq-panel *::after { transition: none !important; } } /* ========================================================= DESKTOP FULL SCREEN MENU ========================================================= */ @media (min-width: 1200px) { /* ===================================================== FULL SCREEN CONTAINER ===================================================== */ .side-menu { top: 0; right: 0; left: 0; width: 100vw; max-width: none; height: 100vh; height: 100svh; padding: 35px 5vw 40px; transform: translateY(-100%); overflow: hidden; transition: transform 0.65s cubic-bezier(.77, 0, .18, 1); } body.menu-open .side-menu { transform: translateY(0); } /* ===================================================== HEADER ===================================================== */ .side-menu__top { padding-bottom: 22px; } /* ===================================================== DESKTOP BODY ===================================================== */ .side-menu__desktop { display: flex; flex: 1; min-height: 0; width: 100%; } /* ===================================================== LEFT NAVIGATION ===================================================== */ .side-menu__desktop .side-menu__nav { width: 25%; min-width: 25%; margin: 0; padding: 45px 50px 30px 0; border-right: 1px solid rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; justify-content: flex-start; } .side-menu__desktop .side-menu__nav a { padding: 17px 0; border: 0; font-size: 1.25rem; line-height: 1.05; } .side-menu__desktop .side-menu__nav a:hover, .side-menu__desktop .side-menu__nav a.is-active { padding-left: 8px; color: var(--gold); } .side-menu__nav a[data-menu-panel="faq"] { margin-top: 300px; } /* ===================================================== RIGHT PANEL AREA ===================================================== */ .side-menu__panels { position: relative; flex: 1; min-width: 0; min-height: 0; padding: 40px 0 30px 55px; overflow: hidden; } /* ===================================================== INDIVIDUAL PANEL ===================================================== */ .side-menu__panel { position: absolute; top: 40px; right: 0; bottom: 30px; left: 55px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); overflow-y: auto; overflow-x: hidden; padding-bottom: 25px; scrollbar-width: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; } .side-menu__panel::-webkit-scrollbar { display: none; } /* ===================================================== ACTIVE PANEL ===================================================== */ .side-menu__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ===================================================== 3 × 3 PHOTO GRID ===================================================== */ .menu-grid--3x3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 16px; width: 100%; } /* ===================================================== 3 × 4 MONTH GRID ===================================================== */ .menu-grid--3x4 { display: grid; grid-template-columns: repeat(4, minmax(0, 3fr)); grid-template-rows: repeat(4, 170px); gap: 20px; width: 100%; padding-bottom: 20px; } /* ===================================================== PHOTO CARD ===================================================== */ .menu-card { position: relative; display: flex; align-items: flex-end; width: 100%; height: clamp(135px, 17vh, 185px); overflow: hidden; background: #222; color: #fff; text-decoration: none; isolation: isolate; cursor: pointer; } /* ===================================================== IMAGE WRAPPER ===================================================== */ .menu-card__image { position: absolute; inset: 0; z-index: -2; overflow: hidden; } /* ===================================================== CARD IMAGE ===================================================== */ .menu-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1); transition: transform 0.7s cubic-bezier(.22, .61, .36, 1); } /* ===================================================== CARD OVERLAY ===================================================== */ .menu-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.80) 100%); } /* ===================================================== CARD IMAGE HOVER ===================================================== */ .menu-card:hover .menu-card__image img { transform: scale(1.08); } /* ===================================================== CARD LABEL ===================================================== */ .menu-card>span { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 3; margin: 0; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); } /* ===================================================== POPULAR CARD TITLE ===================================================== */ .menu-card>strong { position: absolute; left: 16px; bottom: 13px; z-index: 3; margin: 0; font-family: "Bodoni Moda", Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1; color: #fff; } .menu-card>span+strong { bottom: 12px; } /* ===================================================== MONTH CARD ===================================================== */ .month-card { position: relative; display: block; width: 100%; height: 180px; min-height: 180px; overflow: hidden; background: #222; color: #fff; text-decoration: none; isolation: isolate; cursor: pointer; transition: transform 0.35s ease; } /* ===================================================== MONTH IMAGE ===================================================== */ .month-card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; z-index: -2; transform: scale(1); transition: transform 0.7s cubic-bezier(.22, .61, .36, 1); } /* ===================================================== MONTH OVERLAY ===================================================== */ .month-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 10%, rgba(0, 0, 0, 0.78) 100%); pointer-events: none; } /* ===================================================== MONTH NAME ===================================================== */ .month-card>span { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; margin: 0; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); } /* ===================================================== MONTH HOVER ===================================================== */ .month-card:hover { transform: scale(1.02); } .month-card:hover img { transform: scale(1.08); } /* ===================================================== DESKTOP CTA ===================================================== */ .side-menu>.side-menu__bottom { position: absolute; left: 5vw; bottom: 40px; width: calc(25% - 50px); margin: 0; padding: 0; z-index: 20; } .side-menu>.side-menu__bottom p { max-width: 270px; margin: 0 0 17px; font-size: 16px; } .side-menu>.side-menu__bottom .side-menu__cta { min-width: 145px; min-height: 40px; padding: 10px 14px; gap: 12px; font-size: 10px; } .side-menu>.side-menu__bottom .side-menu__cta span { font-size: 10px; color: #000000; } .side-menu>.side-menu__bottom .side-menu__cta:hover { background: #000000; border-color: #000000; color: #ffffff; } .side-menu>.side-menu__bottom .side-menu__cta:hover span { color: #ffffff; } .side-menu>.side-menu__bottom .side-menu__cta:hover span:last-child { transform: translateX(5px); } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .side-menu { padding-left: 6vw; padding-right: 6vw; } .side-menu__desktop .side-menu__nav { width: 23%; min-width: 23%; padding-right: 60px; } .side-menu__panels { padding-left: 65px; } .side-menu__panel { left: 65px; } .side-menu>.side-menu__bottom { left: 6vw; width: calc(23% - 60px); } .menu-card { height: clamp(145px, 17vh, 200px); } .month-card { height: 175px; min-height: 175px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1199px) { .side-menu { width: min(480px, 88vw); padding: 35px; } } /* ========================================================= TABLET / MOBILE MONTH GRID ========================================================= */ @media (max-width: 1199px) { .menu-grid--3x4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, 90px); gap: 12px; width: 100%; height: auto; padding-bottom: 20px; } .month-card { width: 100%; height: 90px; min-height: 90px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .side-menu { width: 90vw; padding: 28px 24px; } .side-menu__top { padding-bottom: 22px; font-size: 10px; } .side-menu__nav { margin-top: 30px; } .side-menu__nav a { padding: 17px 0; font-size: clamp(1.6rem, 9vw, 2.5rem); } .side-menu__arrow { font-size: 17px; } .side-menu__bottom p { font-size: 16px; } .menu-grid--3x4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, 80px); gap: 10px; } .month-card { height: 80px; min-height: 80px; } .month-card>span { left: 12px; right: 12px; bottom: 11px; font-size: 9.5px; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 380px) { .side-menu { width: 94vw; padding: 25px 20px; } .side-menu__nav a { font-size: 1.55rem; padding: 15px 0; } .menu-grid--3x4 { grid-template-rows: repeat(6, 75px); gap: 9px; } .month-card { height: 75px; min-height: 75px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .side-menu, .side-menu *, .side-menu *::before, .side-menu *::after { transition: none !important; } } /* ========================================================= HIDE HEADER WHEN DESKTOP FULL-SCREEN MENU IS OPEN ========================================================= */ @media (min-width: 1200px) { body.menu-open .site-header { opacity: 0; visibility: hidden; pointer-events: none; } } /* ========================================================= Section 1 - HERO ========================================================= */ .hero { position: relative; width: 100%; height: 100svh; min-height: 680px; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* ========================================================= HERO VIDEO ========================================================= */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; transform: scale(1.02); } /* ========================================================= HERO OVERLAY ========================================================= */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.02) 35%, rgba(0, 0, 0, 0.12) 65%, rgba(0, 0, 0, 0.48) 100%); } /* ========================================================= HERO CONTENT ========================================================= */ .hero__content { position: relative; z-index: 2; width: min(1100px, 100%); min-height: 100%; margin: 0 auto; padding: 96px 40px 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* ========================================================= HERO TITLE ========================================================= */ .hero__title { width: 100%; max-width: 1100px; margin: 0 auto 22px; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; line-height: 0.92; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); text-align: center; } .hero__title span { display: inline; font-family: "League Gothic", sans-serif !important; font-weight: 400; color: var(--white); } /* ========================================================= HERO DESCRIPTION ========================================================= */ .hero__description { width: 100%; max-width: 680px; margin: 0 auto 30px; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1.9; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); text-align: center; } /* ========================================================= HERO ACTIONS ========================================================= */ .hero__actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } /* ========================================================= HERO BUTTON ========================================================= */ .hero__button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 165px; min-height: 42px; padding: 11px 17px; /* DEFAULT — GOLD */ background: #b89a63; border: 1px solid var(--gold); color: var(--black); font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; border-radius: 5px; cursor: pointer; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } /* ========================================================= HOVER — BLACK + WHITE TEXT ========================================================= */ .hero__button:hover { background: #171613; border-color: #171613; color: #ffffff; transform: translateY(-2px); } /* ARROW ALSO BECOMES WHITE */ .hero__button:hover span { color: #ffffff; transform: translateX(4px); } /* ========================================================= HERO ACTIONS ========================================================= */ .hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ========================================================= REDISCOVER JOURNEYS — OUTLINE BUTTON ========================================================= */ .hero__button--outline { background: transparent; color: #ffffffff; border: 2px solid #ffffffff; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } /* ========================================================= HOVER ========================================================= */ .hero__button--outline:hover { background: #000000; color: #ffffff; border-color: #000000; transform: translateY(-2px); } /* ========================================================= HERO SECONDARY LINK ========================================================= */ .hero__link { position: relative; padding-bottom: 6px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--white); transition: color 0.3s ease; } .hero__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform-origin: left; transition: transform 0.35s ease; } .hero__link:hover { color: var(--gold-light); } .hero__link:hover::after { transform: scaleX(0); } /* ========================================================= HERO BOTTOM ========================================================= */ .hero__bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 30px; padding: 0 48px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.70); } .hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollLine 2s ease-in-out infinite; } /* ========================================================= SCROLL ANIMATION ========================================================= */ @keyframes scrollLine { 0%, 100% { opacity: 0.4; transform: scaleY(0.65); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* ========================================================= Section 2- STORY SECTION ========================================================= */ .rediscover-story { position: relative; width: 100%; background: var(--story-bg); color: var(--black); overflow: hidden; } .rediscover-story__inner { width: min(calc(100% - 80px), 1400px); margin: 0 auto; padding: 120px 40px 110px; } .rediscover-story__intro { max-width: 1000px; margin: 0 auto; text-align: center; } .rediscover-story__eyebrow, .rediscover-reviews__eyebrow { margin: 0 0 24px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: #b69a63; } .rediscover-story__title { margin: 0 auto 42px; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; line-height: 0.86; letter-spacing: 0.025em; text-transform: uppercase; color: var(--black); } .rediscover-story__content { max-width: 720px; margin: 0 auto; } .rediscover-story__content p { margin: 0 0 22px; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; color: rgba(10, 10, 10, 0.72); } .rediscover-story__closing { margin: 45px auto 32px; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.1rem, 1.7vw, 1.9rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; color: var(--black); } .rediscover-story__button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-width: 190px; min-height: 48px; padding: 13px 20px; background: #b89a63; color: var(--black); border: 1px solid var(--gold); border-radius: 4px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } .rediscover-story__button span { font-size: 17px; line-height: 1; transition: transform 0.35s ease; } .rediscover-story__button:hover { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-2px); } .rediscover-story__button:hover span { transform: translateX(5px); } /* ========================================================= REVIEWS SECTION ========================================================= */ .rediscover-reviews { width: min(calc(100% - 80px), 1400px); margin: 0 auto; padding: 70px 40px 90px; border-top: 1px solid rgba(10, 10, 10, 0.12); } .rediscover-reviews__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 38px; } .rediscover-reviews__header .rediscover-reviews__eyebrow { margin-bottom: 12px; } .rediscover-reviews__title { margin: 0; font-family: "League Gothic", sans-serif !important; font-size: clamp(2.5rem, 4vw, 4.2rem); font-weight: 400; line-height: 0.88; letter-spacing: 0.03em; text-transform: uppercase; color: var(--black); } .rediscover-reviews__trustpilot { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .trustpilot-stars { font-family: Arial, sans-serif; font-size: 18px; letter-spacing: 2px; color: var(--black); } .trustpilot-label { font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10, 10, 10, 0.65); } .trustpilot-link { position: relative; color: inherit; text-decoration: none; } /* Animated underline */ .trustpilot-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: currentColor; transition: width 0.3s ease; } /* Hover */ .trustpilot-link:hover::after { width: 100%; } /* ========================================================= REVIEW SLIDER ========================================================= */ .reviews-slider { width: 100%; overflow: hidden; position: relative; } .reviews-track { display: flex; gap: 18px; width: 100%; transition: transform 0.6s cubic-bezier(.77, 0, .18, 1); will-change: transform; } .review-card { flex: 0 0 calc((100% - 54px) / 4); width: calc((100% - 54px) / 4); min-width: 0; min-height: 270px; padding: 30px; background: rgba(255, 255, 255, 0.48); border: 1px solid rgba(10, 10, 10, 0.12); display: flex; flex-direction: column; justify-content: space-between; transition: background 0.35s ease, transform 0.35s ease; } .review-card:hover { background: rgba(255, 255, 255, 0.72); transform: translateY(-4px); } .review-card__stars { font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 2px; color: var(--black); margin-bottom: 25px; } .review-card__text { margin: 0; font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.65; color: rgba(10, 10, 10, 0.80); } .review-card__author { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(10, 10, 10, 0.12); } .review-card__author strong { font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .review-card__author span { font-family: "DM Sans", sans-serif; font-size: 10px; color: rgba(10, 10, 10, 0.55); } /* ========================================================= REVIEW CONTROLS ========================================================= */ .reviews-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 34px; } .reviews-arrow { width: 42px; height: 42px; border: 1px solid rgba(10, 10, 10, 0.30); background: transparent; color: var(--black); cursor: pointer; font-size: 16px; transition: background 0.3s ease, color 0.3s ease; } .reviews-arrow:hover { background: var(--black); color: var(--white); } .reviews-dots { display: flex; align-items: center; gap: 8px; } .review-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 10, 10, 0.28); cursor: pointer; transition: transform 0.3s ease, background 0.3s ease; } .review-dot.active { background: var(--black); transform: scale(1.3); } /* ========================================================= Section 3 - START YOUR JOURNEY ========================================================= */ .start-journey { position: relative; width: 100%; background: var(--journey-bg); color: var(--journey-text); overflow: hidden; border-top: 1px solid rgba(10, 10, 10, 0.08); } .start-journey__inner { width: min(calc(100% - 80px), 1320px); margin: 0 auto; padding-top: 120px; padding-bottom: 125px; } /* ========================================================= SECTION HEADER ========================================================= */ .start-journey__header { width: 100%; max-width: 900px; margin: 0 auto 58px; text-align: center; } .start-journey__eyebrow { margin: 0 0 18px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; line-height: 1.2; text-transform: uppercase; color: #b69a63; } .start-journey__title { margin: 0; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; font-style: normal; line-height: 0.82; letter-spacing: 0.015em; text-transform: uppercase; color: var(--journey-text); } /* ========================================================= TABS ========================================================= */ .journey-tabs { width: 100%; display: flex; align-items: stretch; justify-content: center; margin: 0 0 48px; border-bottom: 1px solid rgba(23, 22, 19, 0.18); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .journey-tabs::-webkit-scrollbar { display: none; } .journey-tab { position: relative; flex: 0 0 auto; border: 0; outline: none; background: transparent; padding: 17px 34px 18px; cursor: pointer; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.15em; line-height: 1.2; text-transform: uppercase; color: rgba(23, 22, 19, 0.52); transition: color 0.3s ease; } .journey-tab:hover, .journey-tab:focus-visible { color: var(--black); } .journey-tab::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: center; transition: transform 0.35s cubic-bezier(.77, 0, .18, 1); } .journey-tab:hover::after, .journey-tab:focus-visible::after { transform: scaleX(0.55); } .journey-tab.active { color: var(--black); } .journey-tab.active::after { transform: scaleX(1); } /* ========================================================= PANELS ========================================================= */ .journey-panels { position: relative; width: 100%; } .journey-panel { display: none; width: 100%; } .journey-panel.active { display: block; animation: journeyPanelIn 0.55s cubic-bezier(.77, 0, .18, 1); } @keyframes journeyPanelIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= BY TRAVELLER GRID ========================================================= */ .traveller-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } /* ========================================================= TRAVELLER CARD ========================================================= */ .traveller-card { position: relative; width: 100%; height: 500px; min-height: 500px; overflow: hidden; display: block; background: var(--journey-card); border: 1px solid rgba(23, 22, 19, 0.12); text-decoration: none; transition: transform 0.45s cubic-bezier(.77, 0, .18, 1), border-color 0.35s ease; } .traveller-card:hover { transform: translateY(-6px); border-color: rgba(23, 22, 19, 0.28); } /* ========================================================= TRAVELLER IMAGE ========================================================= */ .traveller-card__image { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .traveller-card__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(.77, 0, .18, 1); } .traveller-card:hover .traveller-card__image img { transform: scale(1.06); } /* ========================================================= TRAVELLER OVERLAY ========================================================= */ .traveller-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.78) 100%); pointer-events: none; } /* ========================================================= TRAVELLER CONTENT ========================================================= */ .traveller-card__content { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; color: var(--white); pointer-events: none; } .traveller-card__number { display: block; margin-bottom: 9px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.17em; color: rgba(255, 255, 255, 0.68); } .traveller-card__content h3 { margin: 0; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.1rem, 1.8vw, 2rem); font-weight: 400; line-height: 0.86; letter-spacing: 0.025em; text-transform: uppercase; color: var(--white); } .traveller-card__arrow { display: inline-block; margin-top: 15px; font-family: "DM Sans", sans-serif; font-size: 15px; color: var(--white); transition: transform 0.3s ease; } .traveller-card:hover .traveller-card__arrow { transform: translateX(5px); } /* ========================================================= MOST POPULAR ========================================================= */ .popular-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .popular-card { position: relative; width: 100%; height: 500px; min-height: 500px; overflow: hidden; display: block; background: var(--journey-card); border: 1px solid rgba(23, 22, 19, 0.12); text-decoration: none; transition: transform 0.45s cubic-bezier(.77, 0, .18, 1), border-color 0.35s ease; } .popular-card:hover { transform: translateY(-6px); border-color: rgba(23, 22, 19, 0.28); } /* ========================================================= POPULAR IMAGE ========================================================= */ .popular-card__image { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .popular-card__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(.77, 0, .18, 1); } .popular-card:hover .popular-card__image img { transform: scale(1.06); } /* ========================================================= POPULAR OVERLAY ========================================================= */ .popular-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.80) 100%); pointer-events: none; } /* ========================================================= POPULAR CONTENT ========================================================= */ .popular-card__content { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; color: var(--white); } .popular-card__content span { display: block; margin-bottom: 8px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); } .popular-card__content h3 { margin: 0; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.1rem, 1.8vw, 2rem); font-weight: 400; line-height: 0.86; letter-spacing: 0.025em; text-transform: uppercase; color: var(--white); } .popular-card__content b { display: inline-block; margin-top: 15px; font-size: 15px; font-weight: 400; transition: transform 0.3s ease; } .popular-card:hover .popular-card__content b { transform: translateX(5px); } /* ========================================================= JOURNEY PANEL FOOTER ========================================================= */ .journey-panel__footer { display: flex; align-items: center; justify-content: center; margin-top: 40px; } /* ========================================================= VIEW MORE ========================================================= */ .journey-view-more { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 175px; min-height: 46px; padding: 12px 22px; background: transparent; color: var(--black); border: 1px solid rgba(23, 22, 19, 0.35); font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } .journey-view-more span { font-size: 16px; transition: transform 0.3s ease; } .journey-view-more:hover { background: var(--black); border-color: var(--black); color: var(--white); transform: translateY(-2px); } .journey-view-more:hover span { transform: translateX(4px); } /* ========================================================= MONTH EDITORIAL GRID ========================================================= */ .months-editorial { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* ========================================================= MONTH CARD ========================================================= */ .month-editorial-card { position: relative; width: 100%; height: 250px; overflow: hidden; display: block; background: #171613; color: var(--white); text-decoration: none; border: none; transition: transform 0.5s cubic-bezier(.77, 0, .18, 1); } .month-editorial-card:hover { transform: translateY(-6px); } /* ========================================================= MONTH IMAGE ========================================================= */ .month-editorial-card__image { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .month-editorial-card__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transition: transform 0.9s cubic-bezier(.77, 0, .18, 1); } .month-editorial-card:hover .month-editorial-card__image img { transform: scale(1.07); } /* ========================================================= MONTH IMAGE OVERLAY ========================================================= */ .month-editorial-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.82) 100%); pointer-events: none; } /* ========================================================= MONTH CONTENT ========================================================= */ .month-editorial-card__content { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; color: var(--white); } /* ========================================================= MONTH NUMBER ========================================================= */ .month-editorial-card__content>span { display: block; margin-bottom: 10px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.68); } /* ========================================================= MONTH NAME ========================================================= */ .month-editorial-card__content h3 { margin: 0; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.1rem, 1.8vw, 2rem); font-weight: 400; line-height: 0.86; letter-spacing: 0.025em; text-transform: uppercase; color: var(--white); } /* ========================================================= MONTH DESCRIPTION ========================================================= */ .month-editorial-card__content p { max-width: 250px; margin: 12px 0 17px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); } /* ========================================================= MONTH EXPLORE LINK ========================================================= */ .month-editorial-card__content b { display: inline-flex; align-items: center; gap: 10px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); transition: color 0.3s ease, transform 0.3s ease; } .month-editorial-card__content b i { font-style: normal; font-size: 14px; font-weight: 400; transition: transform 0.3s ease; } .month-editorial-card:hover .month-editorial-card__content b { color: var(--gold-light); } .month-editorial-card:hover .month-editorial-card__content b i { transform: translateX(5px); } /* ========================================================= IN THE SPOTLIGHT ========================================================= */ .spotlight-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.85fr); grid-template-rows: 520px; gap: 18px; } .spotlight-card { position: relative; width: 100%; height: 100%; overflow: hidden; display: block; background: var(--black); text-decoration: none; } .spotlight-card__image { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .spotlight-card__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(.77, 0, .18, 1); } .spotlight-card:hover .spotlight-card__image img { transform: scale(1.05); } /* ========================================================= SPOTLIGHT OVERLAY ========================================================= */ .spotlight-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 15%, rgba(0, 0, 0, 0.80) 100%); pointer-events: none; } /* ========================================================= SPOTLIGHT CONTENT ========================================================= */ .spotlight-card__content { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 30px; color: var(--white); } .spotlight-card__content>span { display: block; margin-bottom: 12px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .spotlight-card__content h3 { margin: 0 0 15px; font-family: "League Gothic", sans-serif !important; font-size: clamp(1.1rem, 1.8vw, 2rem); font-weight: 400; line-height: 0.84; letter-spacing: 0.025em; text-transform: uppercase; color: var(--white); } .spotlight-card__content b { display: inline-flex; align-items: center; gap: 8px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); transition: transform 0.3s ease; } .spotlight-card:hover .spotlight-card__content b { transform: translateX(5px); } .spotlight-card--large { height: 520px; } /* ========================================================= RESPONSIVE — TABLET 761px - 1100px ========================================================= */ @media (min-width: 761px) and (max-width: 1100px) { /* ----------------------------------------------------- Section spacing ----------------------------------------------------- */ .start-journey__inner { width: calc(100% - 50px); padding-top: 95px; padding-bottom: 100px; } /* ----------------------------------------------------- Header ----------------------------------------------------- */ .start-journey__header { margin-bottom: 48px; } /* ----------------------------------------------------- Tabs ----------------------------------------------------- */ .journey-tabs { margin-bottom: 38px; } .journey-tab { padding-left: 25px; padding-right: 25px; } /* ===================================================== ALL FOUR SECTIONS — 2 COLUMNS ===================================================== */ .traveller-grid, .popular-grid, .months-editorial, .spotlight-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 16px !important; } /* ===================================================== TRAVELLER CARDS ===================================================== */ .traveller-grid .traveller-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 440px; min-height: 440px; } /* ===================================================== POPULAR CARDS ===================================================== */ .popular-grid .popular-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 440px; min-height: 440px; } /* ===================================================== MONTH CARDS ===================================================== */ .months-editorial .month-editorial-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 280px; } /* ===================================================== SPOTLIGHT ===================================================== */ .spotlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: 440px !important; } .spotlight-grid .spotlight-card, .spotlight-grid .spotlight-card--large { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 440px !important; min-height: 440px !important; grid-column: auto !important; grid-row: auto !important; } /* ----------------------------------------------------- Tablet content sizing ----------------------------------------------------- */ .traveller-card__content, .popular-card__content, .month-editorial-card__content { left: 22px; right: 22px; bottom: 22px; } .spotlight-card__content { left: 22px; right: 22px; bottom: 22px; } .traveller-card__content h3, .popular-card__content h3, .month-editorial-card__content h3, .spotlight-card__content h3 { font-size: 30px !important; } } /* ========================================================= RESPONSIVE — MOBILE 320px - 760px ========================================================= */ @media (max-width: 760px) { /* ----------------------------------------------------- Section spacing ----------------------------------------------------- */ .start-journey__inner { width: calc(100% - 32px); padding-top: 70px; padding-bottom: 80px; } /* ----------------------------------------------------- Header ----------------------------------------------------- */ .start-journey__header { max-width: 100%; margin-bottom: 38px; } .start-journey__eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: 0.18em; } .start-journey__title { font-size: clamp(2rem, 8vw, 2.7rem); line-height: 0.85; } /* ----------------------------------------------------- Tabs ----------------------------------------------------- */ .journey-tabs { justify-content: flex-start; margin-bottom: 32px; overflow-x: auto; width: 100%; } .journey-tab { padding: 14px 18px 15px; font-size: 10px; letter-spacing: 0.12em; } .journey-tab::after { left: 14px; right: 14px; } /* ===================================================== ALL FOUR SECTIONS — ALWAYS 2 COLUMNS ===================================================== */ .traveller-grid, .popular-grid, .months-editorial, .spotlight-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto !important; grid-auto-flow: row !important; gap: 12px !important; align-items: stretch; justify-content: stretch; } /* ===================================================== TRAVELLER CARDS — 2 PER ROW ===================================================== */ .traveller-grid .traveller-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 350px !important; min-height: 350px !important; margin: 0 !important; } /* ===================================================== POPULAR CARDS — 2 PER ROW ===================================================== */ .popular-grid .popular-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 350px !important; min-height: 350px !important; margin: 0 !important; } /* ===================================================== MONTH CARDS — 2 PER ROW ===================================================== */ .months-editorial .month-editorial-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 210px !important; margin: 0 !important; } /* ===================================================== SPOTLIGHT — 2 PER ROW ===================================================== */ .spotlight-grid { width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto !important; gap: 12px !important; } .spotlight-grid .spotlight-card, .spotlight-grid .spotlight-card--large { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 350px !important; min-height: 350px !important; margin: 0 !important; grid-column: auto !important; grid-row: auto !important; } /* ===================================================== TRAVELLER CONTENT ===================================================== */ .traveller-card__content { left: 14px; right: 14px; bottom: 15px; } .traveller-card__number { margin-bottom: 6px; font-size: 9.5px; letter-spacing: 0.13em; } .traveller-card__content h3 { font-size: 23px !important; line-height: 0.88; } .traveller-card__arrow { margin-top: 9px; font-size: 13px; } /* ===================================================== POPULAR CONTENT ===================================================== */ .popular-card__content { left: 14px; right: 14px; bottom: 15px; } .popular-card__content span { margin-bottom: 6px; font-size: 9.5px; letter-spacing: 0.13em; } .popular-card__content h3 { font-size: 23px !important; line-height: 0.88; } .popular-card__content b { margin-top: 9px; font-size: 13px; } /* ===================================================== MONTH CONTENT ===================================================== */ .month-editorial-card__content { left: 14px; right: 14px; bottom: 14px; } .month-editorial-card__content>span { margin-bottom: 6px; font-size: 9.5px; letter-spacing: 0.13em; } .month-editorial-card__content h3 { font-size: 22px !important; line-height: 0.88; } .month-editorial-card__content p { max-width: 100%; margin: 7px 0 9px; font-size: 10px; line-height: 1.35; } .month-editorial-card__content b { gap: 6px; font-size: 9.5px; } .month-editorial-card__content b i { font-size: 11px; } /* ===================================================== SPOTLIGHT CONTENT ===================================================== */ .spotlight-card__content { left: 14px; right: 14px; bottom: 15px; } .spotlight-card__content>span { margin-bottom: 7px; font-size: 9.5px; letter-spacing: 0.13em; } .spotlight-card__content h3 { margin-bottom: 9px; font-size: 22px !important; line-height: 0.88; } .spotlight-card__content b { gap: 6px; font-size: 9.5px; } } /* ========================================================= VERY SMALL MOBILE 320px - 399px ========================================================= */ @media (max-width: 399px) { .start-journey__inner { width: calc(100% - 24px); padding-top: 60px; padding-bottom: 70px; } /* ----------------------------------------------------- KEEP ALL FOUR SECTIONS AT 2 COLUMNS ----------------------------------------------------- */ .traveller-grid, .popular-grid, .months-editorial, .spotlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } /* ----------------------------------------------------- Smaller cards ----------------------------------------------------- */ .traveller-grid .traveller-card, .popular-grid .popular-card { height: 320px !important; min-height: 320px !important; } .months-editorial .month-editorial-card { height: 185px !important; } .spotlight-grid .spotlight-card, .spotlight-grid .spotlight-card--large { height: 320px !important; min-height: 320px !important; } /* ----------------------------------------------------- Smaller content ----------------------------------------------------- */ .traveller-card__content, .popular-card__content, .month-editorial-card__content, .spotlight-card__content { left: 11px; right: 11px; bottom: 12px; } .traveller-card__content h3, .popular-card__content h3 { font-size: 20px !important; } .month-editorial-card__content h3, .spotlight-card__content h3 { font-size: 19px !important; } .month-editorial-card__content p { font-size: 9.5px; line-height: 1.3; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .journey-panel.active { animation: none; } .traveller-card, .popular-card, .month-editorial-card, .spotlight-card, .traveller-card__image img, .popular-card__image img, .month-editorial-card__image img, .spotlight-card__image img, .traveller-card__arrow, .popular-card__content b, .month-editorial-card__content b, .month-editorial-card__content b i, .spotlight-card__content b { transition: none !important; } } /* ========================================================= SIGNATURE JOURNEYS ========================================================= */ .signature-journeys { position: relative; width: 100%; background: #F3F0E8; padding: 125px 0 135px; overflow: hidden; } /* --------------------------------------------------------- INNER CONTAINER --------------------------------------------------------- */ .signature-journeys__inner { width: min(1380px, calc(100% - 100px)); margin: 0 auto; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ .signature-journeys__header { max-width: 760px; margin: 0 auto 72px; text-align: center; } .signature-journeys__eyebrow { display: block; margin-bottom: 20px; font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.28em; line-height: 1.4; color: #b69a63; } .signature-journeys__title { margin: 0; font-family: "Cormorant Garamond", "Times New Roman", serif; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.025em; color: #28251f; } .signature-journeys__title em { font-weight: 400; font-style: italic; color: #b69a63; } .signature-journeys__intro { max-width: 610px; margin: 28px auto 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0.01em; color: #665e53; } /* --------------------------------------------------------- CARD GRID --------------------------------------------------------- */ .signature-journeys__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .signature-journey-card { position: relative; background: #f7f3ec; overflow: hidden; min-width: 0; transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.6s ease; } .signature-journey-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(45, 38, 28, 0.12); } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ .signature-journey-card__image-wrap { position: relative; width: 100%; aspect-ratio: 0.86 / 1; overflow: hidden; background: #d9d0c1; } .signature-journey-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 1.2s cubic-bezier( 0.22, 1, 0.36, 1 ); } .signature-journey-card:hover .signature-journey-card__image { transform: scale(1.055); } /* --------------------------------------------------------- IMAGE OVERLAY --------------------------------------------------------- */ .signature-journey-card__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(20, 18, 14, 0.12) 0%, rgba(20, 18, 14, 0) 40%, rgba(20, 18, 14, 0.28) 100% ); pointer-events: none; } /* --------------------------------------------------------- CARD NUMBER --------------------------------------------------------- */ .signature-journey-card__number { position: absolute; top: 24px; left: 26px; font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.92); } /* --------------------------------------------------------- CARD CONTENT --------------------------------------------------------- */ .signature-journey-card__content { padding: 34px 34px 38px; } .signature-journey-card__label { display: block; margin-bottom: 13px; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.24em; color: #9a7d5c; } .signature-journey-card__title { margin: 0; font-family: "Cormorant Garamond", "Times New Roman", serif; font-size: clamp(30px, 2.5vw, 38px); font-weight: 400; line-height: 1; letter-spacing: -0.015em; color: #29251f; } .signature-journey-card__description { margin: 20px 0 29px; max-width: 390px; font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.85; color: #71695e; } /* --------------------------------------------------------- EXPLORE BUTTON --------------------------------------------------------- */ .signature-journey-card__button { display: inline-flex; align-items: center; gap: 14px; position: relative; padding-bottom: 7px; text-decoration: none; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #302c25; } .signature-journey-card__button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8c7459; transform-origin: left center; transform: scaleX(1); transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ); } .signature-journey-card__button:hover::after { transform-origin: right center; transform: scaleX(0); } .signature-journey-card__arrow { display: inline-block; font-size: 15px; line-height: 1; transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ); } .signature-journey-card__button:hover .signature-journey-card__arrow { transform: translateX(5px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .signature-journeys { padding: 100px 0 110px; } .signature-journeys__inner { width: min( 100% - 60px, 900px ); } .signature-journeys__grid { gap: 20px; } .signature-journey-card__content { padding: 28px 25px 32px; } .signature-journey-card__title { font-size: 32px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .signature-journeys { padding: 78px 0 85px; } .signature-journeys__inner { width: calc(100% - 36px); } .signature-journeys__header { margin-bottom: 48px; } .signature-journeys__eyebrow { margin-bottom: 16px; font-size: 9px; } .signature-journeys__title { font-size: clamp( 40px, 11vw, 54px ); line-height: 1.02; } .signature-journeys__intro { margin-top: 22px; font-size: 12px; line-height: 1.8; } .signature-journeys__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .signature-journey-card__image-wrap { aspect-ratio: 1 / 1.08; } .signature-journey-card__content { padding: 28px 25px 32px; } .signature-journey-card__title { font-size: 34px; } .signature-journey-card__description { font-size: 12px; line-height: 1.8; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .signature-journeys { padding: 65px 0 72px; } .signature-journeys__inner { width: calc(100% - 28px); } .signature-journey-card__image-wrap { aspect-ratio: 0.9 / 1; } .signature-journey-card__content { padding: 25px 22px 30px; } .signature-journey-card__title { font-size: 31px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .signature-journey-card, .signature-journey-card__image, .signature-journey-card__button::after, .signature-journey-card__arrow { transition: none !important; } .signature-journey-card:hover { transform: none; } .signature-journey-card:hover .signature-journey-card__image { transform: none; } } /* ========================================================= Section 4 - EXPLORE OUR JOURNEYS REDISCOVER JOURNEYS ========================================================= */ .explore-journeys { position: relative; width: 100%; min-height: 100vh; background-color: #171613 !important; background-image: none !important; display: flex; align-items: stretch; overflow: hidden; box-sizing: border-box; } /* ========================================================= LEFT INTRODUCTION ========================================================= */ .explore-journeys__intro { flex: 0 0 32%; width: 32%; min-width: 32%; min-height: 100vh; padding: 0 40px 0 8%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; position: relative; z-index: 5; } /* ========================================================= EXPLORE OUR JOURNEYS LEAGUE GOTHIC ========================================================= */ .explore-journeys__eyebrow { display: block; margin: 0 0 20px; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1.2; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: #b69a63 !important; } /* ========================================================= INTRO DESCRIPTION DM SANS ========================================================= */ .explore-journeys__intro h2 { max-width: 310px; margin: 0; font-family: "DM Sans", sans-serif; font-size: clamp(26px, 3vw, 46px) !important; line-height: 0.88; font-weight: 400; letter-spacing: 0.01em; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.62); } /* ========================================================= REMOVE SCROLL / ARROW ========================================================= */ .explore-journeys__scroll { display: none !important; } /* ========================================================= EXPLORE JOURNEYS — SCROLL FIX ========================================================= */ .explore-journeys__track { flex: 1 1 auto; width: 68%; min-width: 0; height: 100vh; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 18px; overflow-x: scroll !important; overflow-y: hidden !important; padding: 80px 8% 80px 0; box-sizing: border-box; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x !important; position: relative; z-index: 10; } /* ========================================================= REMOVE SCROLLBAR ========================================================= */ .explore-journeys__track::-webkit-scrollbar { display: none !important; } /* ========================================================= FORCE CARDS TO CREATE HORIZONTAL WIDTH ========================================================= */ .explore-journeys__track>.journey-editorial-card { flex: 0 0 280px !important; width: 280px !important; min-width: 280px !important; max-width: none !important; position: relative; } /* ========================================================= VIEW ALL CARD ========================================================= */ .explore-journeys__track>.journey-editorial-card--view-all { flex: 0 0 350px !important; width: 350px !important; min-width: 350px !important; max-width: none !important; } /* ========================================================= FINAL MOBILE SCROLL FIX ========================================================= */ @media (max-width: 767px) { .explore-journeys { width: 100%; display: block; overflow: hidden !important; } .explore-journeys__track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 480px; padding: 20px 24px 70px; gap: 14px; align-items: stretch; overflow-x: scroll !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; touch-action: pan-x !important; overscroll-behavior-x: contain; scrollbar-width: none; position: relative; z-index: 10; } .explore-journeys__track::-webkit-scrollbar { display: none !important; } .explore-journeys__track>.journey-editorial-card { flex: 0 0 285px !important; width: 285px !important; min-width: 285px !important; max-width: 285px !important; height: 430px; } .explore-journeys__track>.journey-editorial-card--view-all { flex: 0 0 285px !important; width: 285px !important; min-width: 285px !important; max-width: 285px !important; height: 430px; } } /* ========================================================= JOURNEY CARD ========================================================= */ .explore-journeys__track>.journey-editorial-card { flex: 0 0 350px !important; width: 350px !important; min-width: 350px !important; max-width: none !important; position: relative; } .journey-editorial-card { position: relative; flex: 0 0 350px !important; width: 350px !important; min-width: 350px !important; height: 450px; overflow: hidden; background: #25231f; color: #ffffff; box-sizing: border-box; isolation: isolate; scroll-snap-align: start; } /* ========================================================= CARD IMAGE ========================================================= */ .journey-editorial-card__image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; z-index: -3; } /* ========================================================= IMAGE ========================================================= */ .journey-editorial-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 0.9s cubic-bezier(.22, .61, .36, 1); } /* ========================================================= CARD DARK OVERLAY ========================================================= */ .journey-editorial-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 10%, rgba(0, 0, 0, 0.08) 35%, rgba(0, 0, 0, 0.40) 58%, rgba(0, 0, 0, 0.92) 100%); } /* ========================================================= CARD CONTENT ========================================================= */ .journey-editorial-card__content { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; padding: 28px; box-sizing: border-box; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } /* ========================================================= NUMBER ========================================================= */ .journey-editorial-card__number { display: inline-block; margin-right: 8px; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.68); } /* ========================================================= LOCATION ========================================================= */ .journey-editorial-card__location { display: inline-block; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.74); } /* ========================================================= CARD TITLE LEAGUE GOTHIC ========================================================= */ .journey-editorial-card__content h3 { margin: 10px 0 14px; max-width: 260px; font-family: "League Gothic", "Arial Narrow", sans-serif; font-family: "League Gothic", "Arial Narrow", sans-serif !important; font-size: 30px !important; line-height: 1.05 !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #ffffff; } /* ========================================================= DESCRIPTION HIDDEN COMPLETELY BY DEFAULT ========================================================= */ .journey-editorial-card__content p { display: none; width: 100%; max-width: 290px; margin: 0 0 18px; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.82); } /* ========================================================= REVEAL DESCRIPTION ON CARD HOVER ========================================================= */ .journey-editorial-card:hover .journey-editorial-card__content p { display: block; } /* ========================================================= EXPLORE JOURNEY LINK ========================================================= */ .journey-editorial-card__link { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase; color: #ffffff; text-decoration: none; white-space: nowrap; } /* ========================================================= LINK ARROW ========================================================= */ .journey-editorial-card__link span { display: inline-block; font-size: 13px; line-height: 1; transition: transform 0.3s ease; } /* ========================================================= CARD HOVER ========================================================= */ .journey-editorial-card:hover .journey-editorial-card__image img { transform: scale(1.05); } .journey-editorial-card:hover .journey-editorial-card__link span { transform: translateX(5px); } /* ========================================================= VIEW ALL CARD ========================================================= */ .journey-editorial-card--view-all { flex: 0 0 350px; width: 350px; min-width: 350px; height: 500px; background: #211f1b; display: flex; align-items: center; justify-content: center; } /* ========================================================= VIEW ALL LINK ========================================================= */ .journey-editorial-card__view { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #ffffff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.12); box-sizing: border-box; transition: background 0.35s ease, border-color 0.35s ease; } /* ========================================================= VIEW ALL SMALL TEXT ========================================================= */ .journey-editorial-card__view span { font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } /* ========================================================= VIEW ALL TITLE ========================================================= */ .journey-editorial-card__view strong { font-family: "League Gothic", "Arial Narrow", sans-serif; font-size: 42px; font-weight: 400; line-height: 1; letter-spacing: 0.01em; } /* ========================================================= VIEW ALL HOVER ========================================================= */ .journey-editorial-card__view:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.35); } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1400px) { .explore-journeys__intro { flex-basis: 32%; min-width: 32%; padding-left: 9%; } .explore-journeys__track { width: 68%; gap: 22px; padding-right: 8%; } .journey-editorial-card { flex-basis: 380px; width: 380px; min-width: 380px; height: 540px; } .journey-editorial-card--view-all { flex-basis: 380px; width: 380px; min-width: 380px; height: 540px; } .journey-editorial-card__content h3 { font-size: 44px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1199px) { .explore-journeys__intro { flex-basis: 30%; min-width: 30%; padding-left: 6%; padding-right: 25px; } .explore-journeys__track { width: 70%; padding: 70px 5% 70px 0; gap: 16px; } .explore-journeys__eyebrow { font-size: 10px; } .explore-journeys__intro h2 { max-width: 250px; font-size: 12px; } .journey-editorial-card { flex-basis: 300px; width: 300px; min-width: 300px; height: 450px; } .journey-editorial-card--view-all { flex-basis: 300px; width: 300px; min-width: 300px; height: 450px; } .journey-editorial-card__content { padding: 23px; } .journey-editorial-card__content h3 { font-size: 34px; } .journey-editorial-card__content p { font-size: 11px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .explore-journeys { width: 100%; min-height: auto; display: block; overflow: hidden; } /* ----------------------------------------- INTRO ----------------------------------------- */ .explore-journeys__intro { width: 100%; min-width: 100%; min-height: auto; padding: 70px 24px 35px; display: block; box-sizing: border-box; } .explore-journeys__eyebrow { margin-bottom: 16px; font-size: 10px; line-height: 0.9; } .explore-journeys__intro h2 { max-width: 300px; font-size: 12px; line-height: 1.6; } /* ----------------------------------------- MOBILE CARD TRACK ----------------------------------------- */ .explore-journeys__track { width: 100%; height: auto; min-height: 480px; padding: 20px 24px 70px; gap: 14px; align-items: stretch; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; -webkit-user-select: none; } .explore-journeys__track.is-dragging { cursor: grabbing; } /* ----------------------------------------- MOBILE CARDS ----------------------------------------- */ .journey-editorial-card { flex: 0 0 285px; width: 285px; min-width: 285px; height: 430px; } .journey-editorial-card--view-all { flex: 0 0 285px; width: 285px; min-width: 285px; height: 430px; } .journey-editorial-card__content { padding: 22px; } .journey-editorial-card__content h3 { font-size: 34px; } /* On mobile there is no dependable hover. Therefore descriptions remain visible. */ .journey-editorial-card__content p { display: block; max-width: 240px; margin-bottom: 16px; font-size: 11px; line-height: 1.55; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .explore-journeys__track { scroll-behavior: auto; } .journey-editorial-card__image img, .journey-editorial-card__link span { transition: none; } } /* ========================================================= RIGHT SCROLL BUTTON — FIXED TO SECTION ========================================================= */ .explore-journeys__next { position: absolute !important; right: 32px !important; top: 50% !important; width: 54px; height: 54px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: rgba(23, 22, 19, 0.55); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; color: #ffffff; cursor: pointer; z-index: 9999 !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; flex-shrink: 0; pointer-events: auto; } /* ========================================================= SIMPLE ARROW HEAD ========================================================= */ .explore-journeys__next span { display: block; font-family: Arial, sans-serif; font-size: 34px; font-weight: 300; line-height: 1; transform: translateX(2px); transition: transform 0.3s ease; } /* ========================================================= HOVER ========================================================= */ .explore-journeys__next:hover { background: rgba(23, 22, 19, 0.82); border-color: rgba(255, 255, 255, 0.75); transform: translateY(-50%); } .explore-journeys__next:hover span { transform: translateX(5px); } /* ========================================================= ACTIVE ========================================================= */ .explore-journeys__next:active { transform: translateY(-50%) scale(0.96); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .explore-journeys__next { right: 22px !important; width: 50px; height: 50px; } .explore-journeys__next span { font-size: 31px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .explore-journeys__next { right: 18px !important; width: 48px; height: 48px; top: 65% !important; z-index: 9999 !important; } .explore-journeys__next span { font-size: 30px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .explore-journeys__next, .explore-journeys__next span { transition: none; } } /* ========================================================= SUBTLE HOVER ========================================================= */ .explore-journeys__next:hover { background: rgba(23, 22, 19, 0.82); border-color: rgba(255, 255, 255, 0.75); transform: translateY(-50%); } .explore-journeys__next:hover span { transform: translateX(5px); } /* ========================================================= EXPLORE JOURNEYS — FIX ARROW WHILE TRACK SCROLLS ========================================================= */ .explore-journeys { position: relative !important; overflow: hidden !important; } /* Arrow is completely independent from the scroll track */ .explore-journeys__next { position: absolute !important; right: 32px !important; top: 50% !important; z-index: 99999 !important; flex: none !important; pointer-events: auto !important; transform: translateY(-50%) !important; } /* Make sure the scrolling track never contains the arrow */ .explore-journeys__track { position: relative !important; z-index: 10 !important; } /* Mobile */ @media (max-width: 767px) { .explore-journeys__next { position: absolute !important; right: 18px !important; top: 65% !important; z-index: 99999 !important; transform: translateY(-50%) !important; } } /* ========================================================= FIXED ARROW — OUTSIDE SCROLLING TRACK ========================================================= */ .explore-journeys { position: relative !important; } .explore-journeys__next { position: absolute !important; right: 32px !important; top: 50% !important; width: 54px; height: 54px; margin: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center; justify-content: center; background: rgba(23, 22, 19, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; color: #ffffff; cursor: pointer; z-index: 99999 !important; pointer-events: auto !important; flex-shrink: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .explore-journeys__next span { display: block; font-family: Arial, sans-serif; font-size: 34px; font-weight: 300; line-height: 1; transform: translateX(2px); } /* ========================================================= HOVER ========================================================= */ .explore-journeys__next:hover { background: rgba(23, 22, 19, 0.82) !important; border-color: rgba(255, 255, 255, 0.75); transform: translateY(-50%) !important; } .explore-journeys__next:hover span { transform: translateX(5px); } /* ========================================================= CLICK ========================================================= */ .explore-journeys__next:active { transform: translateY(-50%) scale(0.96) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .explore-journeys__next { right: 22px !important; width: 50px; height: 50px; } .explore-journeys__next span { font-size: 31px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .explore-journeys__next { right: 18px !important; top: 65% !important; width: 48px; height: 48px; } .explore-journeys__next span { font-size: 30px; } } /* ========================================================= ACTIVE / CLICK ========================================================= */ .explore-journeys__next:active { transform: translateY(-50%) scale(0.96); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .explore-journeys__next { right: 22px; width: 50px; height: 50px; } .explore-journeys__next span { font-size: 31px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .explore-journeys__next { right: 18px; width: 48px; height: 48px; top: 65%; } .explore-journeys__next span { font-size: 30px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .explore-journeys__next, .explore-journeys__next span { transition: none; } } /* ========================================================= EXPLORE JOURNEYS — FINAL BACKGROUND OVERRIDE ========================================================= */ section.explore-journeys { position: relative !important; width: 100% !important; min-height: 100vh !important; background: #171613 !important; background-color: #171613 !important; background-image: none !important; box-shadow: none !important; } section.explore-journeys > .contact-container, section.explore-journeys > .container, section.explore-journeys > div { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ========================================================= Section 5 REDISCOVER JOURNEYS — BRAND INTRO ========================================================= */ .rediscover-intro { position: relative; width: 100%; overflow: hidden; box-sizing: border-box; background: var(--journey-bg); color: #171613; text-align: center; border-top: 1px solid rgba(23, 22, 19, 0.08); border-bottom: 1px solid rgba(23, 22, 19, 0.08); } /* ========================================================= INNER ========================================================= */ .rediscover-intro__inner { width: min(100% - 40px, 1200px); margin: 0 auto; padding: 55px 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ========================================================= EYEBROW ========================================================= */ .rediscover-intro__eyebrow { display: block; margin: 0 0 18px; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1.2; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: #b69a63; text-align: center; } /* ========================================================= CONTENT ========================================================= */ .rediscover-intro__content { width: 100%; max-width: 1050px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* ========================================================= TITLE ========================================================= */ .rediscover-intro__title { width: 100%; max-width: 1000px; margin: 0 auto; font-family: "League Gothic", "Arial Narrow", sans-serif; font-size: clamp(1.8rem, 3vw, 3.2rem) !important; /* IMPORTANT: Very tight line spacing */ line-height: 0.78; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: #171613 !important; text-align: center; text-wrap: balance; } /* ========================================================= FORCE SECOND LINE ========================================================= */ .rediscover-intro__title span { display: block; margin-top: 0; color: #171613 !important; } /* ========================================================= DIVIDER ========================================================= */ .rediscover-intro__divider { width: 65px; height: 1px; margin: 28px auto 24px; background: rgba(23, 22, 19, 0.25); } /* ========================================================= DESCRIPTION ========================================================= */ .rediscover-intro__description { width: 100%; max-width: 650px; margin: 0 auto; font-family: "DM Sans", sans-serif; font-size: clamp(12px, 0.95vw, 15px); line-height: 1.65; font-weight: 400; letter-spacing: 0.01em; color: rgba(23, 22, 19, 0.68); text-align: center; text-wrap: balance; } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1440px) { .rediscover-intro__inner { width: min(100% - 80px, 1300px); padding: 65px 0 70px; } .rediscover-intro__title { font-size: 92px; line-height: 0.78; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1100px) { .rediscover-intro__inner { width: calc(100% - 60px); padding: 55px 0 60px; } .rediscover-intro__title { font-size: clamp(34px, 5vw, 54px); line-height: 0.8; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .rediscover-intro__inner { width: calc(100% - 44px); padding: 45px 0 50px; } .rediscover-intro__eyebrow { margin-bottom: 16px; font-size: 9.5px; letter-spacing: 0.18em; } .rediscover-intro__title { font-size: clamp(30px, 7vw, 48px); line-height: 0.82; } .rediscover-intro__divider { width: 55px; margin: 24px auto 20px; } .rediscover-intro__description { max-width: 580px; font-size: 13px; line-height: 1.65; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .rediscover-intro__inner { width: calc(100% - 32px); padding: 38px 0 42px; } .rediscover-intro__eyebrow { margin-bottom: 14px; font-size: 9.5px; letter-spacing: 0.16em; } .rediscover-intro__title { font-size: clamp(28px, 9vw, 42px); line-height: 0.84; letter-spacing: 0; } .rediscover-intro__title span { display: block; } .rediscover-intro__divider { width: 50px; margin: 21px auto 19px; } .rediscover-intro__description { font-size: 12px; line-height: 1.65; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .rediscover-intro__inner { width: calc(100% - 28px); padding: 32px 0 36px; } .rediscover-intro__title { font-size: 27px; line-height: 0.84; } .rediscover-intro__description { font-size: 11.5px; line-height: 1.6; } } /* ========================================================= ACCESSIBILITY ========================================================= */ .rediscover-intro__title, .rediscover-intro__description { text-wrap: balance; } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rediscover-intro * { transition: none !important; } } /* ========================================================= HIGH CONTRAST ========================================================= */ @media (forced-colors: active) { .rediscover-intro { border-color: CanvasText; } .rediscover-intro__title, .rediscover-intro__title span, .rediscover-intro__description, .rediscover-intro__eyebrow { color: CanvasText !important; } .rediscover-intro__divider { background: CanvasText; } } /* ========================================================= SECTION 6 REDISCOVER JOURNEYS — EDITORIAL STORY SECTIONS ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .rediscover-values, .rediscover-feeling, .rediscover-guide { position: relative; width: 100%; overflow: hidden; box-sizing: border-box; } .rediscover-values *, .rediscover-feeling *, .rediscover-guide * { box-sizing: border-box; } /* ========================================================= SHARED EDITORIAL LAYOUT ========================================================= */ .rediscover-editorial { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; } /* ========================================================= TEXT CONTENT ========================================================= */ .rediscover-editorial__content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; padding: clamp(60px, 8vw, 120px) clamp(35px, 6vw, 100px); background: #f4f2ed; color: #171613; } /* ========================================================= EYEBROW ========================================================= */ .rediscover-editorial__eyebrow { display: block; margin: 0 0 20px; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1.2; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: #b69a63 !important; } /* ========================================================= TITLES ALL THREE SECTIONS USE THE SAME SIZE ========================================================= */ .rediscover-values .rediscover-editorial__title, .rediscover-feeling .rediscover-editorial__title, .rediscover-guide .rediscover-editorial__title { margin: 0 0 28px; width: 100%; max-width: 600px; font-family: "League Gothic", "Arial Narrow", sans-serif !important; font-size: clamp(26px, 3vw, 46px) !important; line-height: 0.88; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; } /* ========================================================= BODY TEXT ========================================================= */ .rediscover-editorial__text { width: 100%; max-width: 540px; margin: 0 0 30px; font-family: "DM Sans", sans-serif; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.7; font-weight: 400; letter-spacing: 0.01em; color: rgba(23, 22, 19, 0.72); } .rediscover-editorial__text p { margin: 0 0 18px; } .rediscover-editorial__text p:last-child { margin-bottom: 0; } /* ========================================================= QUOTE PURSUIT OF FEELING ========================================================= */ .rediscover-editorial__quote { max-width: 520px; margin: 25px 0 32px; font-family: "League Gothic", "Arial Narrow", sans-serif; font-size: clamp(15px, 1.2vw, 20px); line-height: 0.95; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: #171613; } /* ========================================================= IMAGE ========================================================= */ .rediscover-editorial__image { position: relative; width: 100%; min-height: 620px; overflow: hidden; background: #25231f; } .rediscover-editorial__image img { display: block; width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: center; transform: scale(1); will-change: transform; transition: transform 1.2s cubic-bezier(.77, 0, .18, 1); } /* ========================================================= IMAGE HOVER ========================================================= */ .rediscover-editorial:hover .rediscover-editorial__image img { transform: scale(1.035); } /* ========================================================= IMAGE OVERLAY ========================================================= */ .rediscover-editorial__image::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.38) 100%); } /* ========================================================= BUTTON ========================================================= */ .rediscover-editorial__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 11px 19px; /* DEFAULT — GOLD */ background: #b89a63; border: 1px solid #b89a63; color: #171613; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 4px; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } /* ========================================================= ARROW ========================================================= */ .rediscover-editorial__button span { display: inline-block; font-size: 13px; line-height: 1; color: inherit; transition: transform 0.3s ease; } /* ========================================================= HOVER — BLACK WITH WHITE TEXT ========================================================= */ .rediscover-editorial__button:hover { background: #171613; border-color: #171613; color: #ffffff; transform: translateY(-2px); } /* ARROW HOVER */ .rediscover-editorial__button:hover span { color: #ffffff; transform: translateX(4px); } /* ========================================================= KEYBOARD ACCESSIBILITY ========================================================= */ .rediscover-editorial__button:focus-visible { outline: 2px solid #b89a63; outline-offset: 4px; } /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none) { .rediscover-editorial__button:hover { transform: none; } } /* ========================================================= KEYBOARD ACCESSIBILITY ========================================================= */ .rediscover-editorial__button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; } /* ========================================================= SECTION 1 WHAT WE DO AND WHY WE DO IT TEXT LEFT — IMAGE RIGHT ========================================================= */ .rediscover-values { background: #f4f2ed; color: #171613; } .rediscover-values .rediscover-editorial { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } .rediscover-values .rediscover-editorial__content { order: 1; background: #f4f2ed; color: #171613; } .rediscover-values .rediscover-editorial__image { order: 2; } /* ========================================================= SECTION 2 PURSUIT OF FEELING IMAGE LEFT — TEXT RIGHT ========================================================= */ .rediscover-feeling { background: #f4f2ed; color: #171613; } .rediscover-feeling .rediscover-editorial { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } /* TEXT RIGHT */ .rediscover-feeling .rediscover-editorial__content { order: 2; background: #f4f2ed; color: #171613; } /* IMAGE LEFT */ .rediscover-feeling .rediscover-editorial__image { order: 1; } /* EYEBROW */ .rediscover-feeling .rediscover-editorial__eyebrow { color: rgba(23, 22, 19, 0.52); } /* TITLE */ .rediscover-feeling .rediscover-editorial__title { color: #171613; } /* BODY */ .rediscover-feeling .rediscover-editorial__text { color: rgba(23, 22, 19, 0.72); } /* QUOTE */ .rediscover-feeling .rediscover-editorial__quote { color: #171613; padding-left: 20px; border-left: 1px solid rgba(23, 22, 19, 0.25); } /* ========================================================= SECTION 3 OUR GUIDE TO LUXURY TRAVEL TEXT LEFT — IMAGE RIGHT ========================================================= */ .rediscover-guide { background: #f4f2ed; color: #171613; } .rediscover-guide .rediscover-editorial { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } /* TEXT LEFT */ .rediscover-guide .rediscover-editorial__content { order: 1; background: #f4f2ed; color: #171613; } /* IMAGE RIGHT */ .rediscover-guide .rediscover-editorial__image { order: 2; } /* ========================================================= FORCE CONSISTENT COLOURS ========================================================= */ .rediscover-values .rediscover-editorial__content, .rediscover-feeling .rediscover-editorial__content, .rediscover-guide .rediscover-editorial__content { background: #f4f2ed; color: #171613; } /* TITLES */ .rediscover-values .rediscover-editorial__title, .rediscover-feeling .rediscover-editorial__title, .rediscover-guide .rediscover-editorial__title { color: #171613; } /* BODY TEXT */ .rediscover-values .rediscover-editorial__text, .rediscover-feeling .rediscover-editorial__text, .rediscover-guide .rediscover-editorial__text { color: rgba(23, 22, 19, 0.72); } /* EYEBROWS */ .rediscover-values .rediscover-editorial__eyebrow, .rediscover-feeling .rediscover-editorial__eyebrow, .rediscover-guide .rediscover-editorial__eyebrow { color: rgba(23, 22, 19, 0.52); } /* QUOTE */ .rediscover-feeling .rediscover-editorial__quote { color: #171613; } /* ========================================================= GUIDE SUBTITLE ========================================================= */ .rediscover-guide__subtitle { margin: -10px 0 24px; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1.3; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(23, 22, 19, 0.52); } /* ========================================================= GUIDE BODY ========================================================= */ .rediscover-guide .rediscover-editorial__text { max-width: 560px; } /* ========================================================= SECTION DIVIDERS ========================================================= */ .rediscover-values+.rediscover-feeling, .rediscover-feeling+.rediscover-guide { border-top: 1px solid rgba(23, 22, 19, 0.08); } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1440px) { .rediscover-editorial { min-height: 700px; } .rediscover-editorial__image, .rediscover-editorial__image img { min-height: 700px; } .rediscover-editorial__content { padding-left: clamp(70px, 8vw, 150px); padding-right: clamp(70px, 8vw, 150px); } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1100px) { .rediscover-editorial { min-height: 560px; } .rediscover-editorial__image, .rediscover-editorial__image img { min-height: 560px; } .rediscover-editorial__content { padding: 70px 50px; } /* Keep ALL THREE titles the same size. */ .rediscover-values .rediscover-editorial__title, .rediscover-feeling .rediscover-editorial__title, .rediscover-guide .rediscover-editorial__title { font-size: clamp(26px, 4vw, 42px) !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .rediscover-editorial { grid-template-columns: 1fr !important; min-height: auto; } /* ----------------------------------------- IMAGE ----------------------------------------- */ .rediscover-editorial__image, .rediscover-values .rediscover-editorial__image, .rediscover-feeling .rediscover-editorial__image, .rediscover-guide .rediscover-editorial__image { order: 1; width: 100%; min-height: 480px; aspect-ratio: 4 / 3; } .rediscover-editorial__image img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; } /* ----------------------------------------- TEXT ----------------------------------------- */ .rediscover-editorial__content, .rediscover-values .rediscover-editorial__content, .rediscover-feeling .rediscover-editorial__content, .rediscover-guide .rediscover-editorial__content { order: 2; width: 100%; padding: 65px clamp(28px, 7vw, 65px); } /* ----------------------------------------- ALL TITLES SAME SIZE ----------------------------------------- */ .rediscover-values .rediscover-editorial__title, .rediscover-feeling .rediscover-editorial__title, .rediscover-guide .rediscover-editorial__title { max-width: 700px; font-size: clamp(28px, 6vw, 44px) !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { /* ----------------------------------------- IMAGE ----------------------------------------- */ .rediscover-editorial__image, .rediscover-editorial__image img { min-height: 380px; } /* ----------------------------------------- CONTENT ----------------------------------------- */ .rediscover-editorial__content, .rediscover-values .rediscover-editorial__content, .rediscover-feeling .rediscover-editorial__content, .rediscover-guide .rediscover-editorial__content { padding: 55px 24px; } /* ----------------------------------------- EYEBROW ----------------------------------------- */ .rediscover-editorial__eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: 0.17em; } /* ----------------------------------------- ALL TITLES SAME SIZE ----------------------------------------- */ .rediscover-values .rediscover-editorial__title, .rediscover-feeling .rediscover-editorial__title, .rediscover-guide .rediscover-editorial__title { margin-bottom: 22px; font-size: clamp(27px, 9vw, 38px) !important; line-height: 0.9; } /* ----------------------------------------- BODY ----------------------------------------- */ .rediscover-editorial__text { margin-bottom: 25px; font-size: 13px; line-height: 1.7; } /* ----------------------------------------- QUOTE ----------------------------------------- */ .rediscover-editorial__quote { margin: 23px 0 28px; font-size: clamp(22px, 7vw, 31px); } /* ----------------------------------------- BUTTON ----------------------------------------- */ .rediscover-editorial__button { min-height: 39px; padding: 10px 16px; font-size: 9.5px; } .rediscover-editorial__button span { font-size: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .rediscover-editorial__image, .rediscover-editorial__image img { min-height: 330px; } .rediscover-editorial__content, .rediscover-values .rediscover-editorial__content, .rediscover-feeling .rediscover-editorial__content, .rediscover-guide .rediscover-editorial__content { padding: 48px 20px; } /* ALL THREE REMAIN IDENTICAL */ .rediscover-values .rediscover-editorial__title, .rediscover-feeling .rediscover-editorial__title, .rediscover-guide .rediscover-editorial__title { font-size: 27px !important; } .rediscover-editorial__text { font-size: 12px; } } /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none) { .rediscover-editorial:hover .rediscover-editorial__image img { transform: none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rediscover-editorial__image img, .rediscover-editorial__button, .rediscover-editorial__button span { transition: none !important; } .rediscover-editorial:hover .rediscover-editorial__image img { transform: none; } } /* ========================================================= HIGH CONTRAST ========================================================= */ @media (forced-colors: active) { .rediscover-editorial__button { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; } .rediscover-editorial__button:focus-visible { outline: 2px solid Highlight; outline-offset: 5px; } } /* ========================================================= REDISCOVER JOURNEYS TRUST / WHY BOOK WITH US ========================================================= */ .rediscover-trust { position: relative; width: 100%; background: var(--journey-bg, #f4f2ed); color: #171613; border-top: 1px solid rgba(23, 22, 19, 0.08); border-bottom: 1px solid rgba(23, 22, 19, 0.08); box-sizing: border-box; } /* ========================================================= INNER ========================================================= */ .rediscover-trust__inner { width: min(calc(100% - 80px), 1320px); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; padding: 58px 0; } /* ========================================================= ITEM ========================================================= */ .rediscover-trust__item { position: relative; min-height: 155px; padding: 10px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; transition: transform 0.35s ease; } /* ========================================================= VERTICAL DIVIDERS ========================================================= */ .rediscover-trust__item+.rediscover-trust__item { border-left: 1px solid rgba(23, 22, 19, 0.15); } /* ========================================================= ICON ========================================================= */ .rediscover-trust__icon { width: 54px; height: 54px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: #b89a63; font-size: 42px; line-height: 1; font-weight: 400; flex-shrink: 0; transition: transform 0.4s ease, color 0.4s ease; } /* If using SVG icons */ .rediscover-trust__icon svg { width: 48px; height: 48px; display: block; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= NUMBER / SMALL LABEL ========================================================= */ .rediscover-trust__number { display: block; margin-bottom: 10px; font-family: "DM Sans", sans-serif; font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0.18em; color: rgba(23, 22, 19, 0.48); } /* ========================================================= TITLE ========================================================= */ .rediscover-trust__item h3 { margin: 0; max-width: 220px; font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: 0.045em; text-transform: uppercase; color: #171613; text-wrap: balance; } /* ========================================================= HOVER ========================================================= */ .rediscover-trust__item:hover { transform: translateY(-5px); } .rediscover-trust__item:hover .rediscover-trust__icon { color: #171613; transform: translateY(-4px) scale(1.06); } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1440px) { .rediscover-trust__inner { width: min(calc(100% - 120px), 1440px); padding: 70px 0; } .rediscover-trust__item { min-height: 170px; padding: 10px 35px; } .rediscover-trust__icon { width: 60px; height: 60px; margin-bottom: 22px; font-size: 46px; } .rediscover-trust__icon svg { width: 52px; height: 52px; } .rediscover-trust__number { font-size: 10px; margin-bottom: 11px; } .rediscover-trust__item h3 { font-size: 24px; max-width: 230px; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1100px) { .rediscover-trust__inner { width: calc(100% - 70px); padding: 52px 0; } .rediscover-trust__item { min-height: 145px; padding: 10px 18px; } .rediscover-trust__icon { width: 48px; height: 48px; margin-bottom: 17px; font-size: 38px; } .rediscover-trust__icon svg { width: 44px; height: 44px; } .rediscover-trust__item h3 { font-size: 12px; max-width: 180px; line-height: 1.5; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .rediscover-trust__inner { width: calc(100% - 56px); grid-template-columns: repeat(3, 1fr); row-gap: 30px; padding: 55px 0; } .rediscover-trust__item { min-height: 145px; padding: 10px 20px; } .rediscover-trust__item:nth-child(4) { border-left: none; } .rediscover-trust__item:nth-child(4), .rediscover-trust__item:nth-child(5) { padding-top: 25px; } .rediscover-trust__icon { width: 52px; height: 52px; margin-bottom: 18px; font-size: 40px; } .rediscover-trust__icon svg { width: 46px; height: 46px; } .rediscover-trust__item h3 { font-size: 11px; max-width: 180px; line-height: 1.5; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .rediscover-trust__inner { width: calc(100% - 40px); grid-template-columns: 1fr 1fr; row-gap: 0; padding: 25px 0; } .rediscover-trust__item { min-height: 150px; padding: 22px 15px; } .rediscover-trust__item:nth-child(3), .rediscover-trust__item:nth-child(5) { border-left: none; } .rediscover-trust__item:nth-child(n + 3) { border-top: 1px solid rgba(23, 22, 19, 0.12); } .rediscover-trust__item:last-child { grid-column: 1 / -1; } .rediscover-trust__icon { width: 48px; height: 48px; margin-bottom: 16px; font-size: 38px; } .rediscover-trust__icon svg { width: 44px; height: 44px; } .rediscover-trust__number { margin-bottom: 9px; font-size: 9.5px; } .rediscover-trust__item h3 { font-size: 10px; line-height: 1.5; max-width: 155px; letter-spacing: 0.035em; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .rediscover-trust__inner { width: calc(100% - 32px); } .rediscover-trust__item { min-height: 140px; padding: 18px 10px; } .rediscover-trust__icon { width: 44px; height: 44px; margin-bottom: 14px; font-size: 34px; } .rediscover-trust__icon svg { width: 40px; height: 40px; } .rediscover-trust__item h3 { font-size: 10px; line-height: 1.5; max-width: 145px; } .rediscover-trust__number { font-size: 9px; margin-bottom: 8px; } } /* ========================================================= ACCESSIBILITY ========================================================= */ .rediscover-trust__item h3 { text-wrap: balance; } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rediscover-trust__item, .rediscover-trust__icon { transition: none; } } /* ========================================================= HIGH CONTRAST ========================================================= */ @media (forced-colors: active) { .rediscover-trust { border-color: CanvasText; background: Canvas; color: CanvasText; } .rediscover-trust__item { border-color: CanvasText; } .rediscover-trust__item h3, .rediscover-trust__number, .rediscover-trust__icon { color: CanvasText; } } /* ========================================================= REDISCOVER JOURNEYS LUXURY FOOTER BLACK / GOLD / EDITORIAL ========================================================= */ .rediscover-footer { position: relative; width: 100%; background: #171613; color: #ffffff; overflow: hidden; box-sizing: border-box; font-family: "DM Sans", sans-serif; } /* ========================================================= GLOBAL FOOTER RESET ========================================================= */ .rediscover-footer *, .rediscover-footer *::before, .rediscover-footer *::after { box-sizing: border-box; } /* ========================================================= MAIN FOOTER ========================================================= */ .rediscover-footer__main { width: 100%; } .rediscover-footer__inner { width: min(calc(100% - 100px), 1400px); margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 60px; padding: 100px 0 105px; } /* ========================================================= BRAND COLUMN ========================================================= */ .rediscover-footer__brand { padding-right: 45px; } /* ========================================================= LOGO ========================================================= */ .rediscover-footer__logo { display: inline-flex; flex-direction: column; margin-bottom: 30px; color: #ffffff; font-family: "DM Sans", sans-serif; font-size: 24px; line-height: 0.9; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; transition: color 0.3s ease; } .rediscover-footer__logo span { margin-top: 8px; font-size: 10px; line-height: 1; letter-spacing: 0.45em; color: #b89a63; } /* ========================================================= BRAND DESCRIPTION ========================================================= */ .rediscover-footer__brand-description { max-width: 390px; margin: 0 0 42px; font-size: 15px; line-height: 1.8; font-weight: 400; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.66); } /* ========================================================= SMALL LABELS ========================================================= */ .rediscover-footer__label { display: block; margin-bottom: 16px; font-size: 10px; line-height: 1.2; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #b89a63; } /* ========================================================= CONTACT ========================================================= */ .rediscover-footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 42px; } .rediscover-footer__contact a { color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.55; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; } .rediscover-footer__contact a:hover { color: #b89a63; transform: translateX(3px); } /* ========================================================= SOCIAL ========================================================= */ .rediscover-footer__social { display: block; } .rediscover-footer__social-links { display: flex; flex-wrap: wrap; gap: 10px 22px; } .rediscover-footer__social-links a { position: relative; color: rgba(255, 255, 255, 0.75); font-size: 13px; line-height: 1.5; text-decoration: none; transition: color 0.3s ease; } .rediscover-footer__social-links a:hover { color: #b89a63; } /* ========================================================= NAVIGATION COLUMNS ========================================================= */ .rediscover-footer__column { display: flex; flex-direction: column; align-items: flex-start; } /* ========================================================= COLUMN HEADINGS ========================================================= */ .rediscover-footer__column h3 { margin: 0 0 27px; font-size: 22px; line-height: 1.3; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } /* ========================================================= COLUMN LINKS ========================================================= */ .rediscover-footer__column a { position: relative; display: inline-block; width: fit-content; margin-bottom: 13px; color: rgba(255, 255, 255, 0.62); font-size: 13px; line-height: 1.55; font-weight: 400; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; } .rediscover-footer__column a:hover { color: #ffffff; transform: translateX(4px); } /* ========================================================= LINK UNDERLINE ========================================================= */ .rediscover-footer__column a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #b89a63; transition: width 0.3s ease; } .rediscover-footer__column a:hover::after { width: 100%; } /* ========================================================= LOCATION SECTION ========================================================= */ .rediscover-footer__locations { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .rediscover-footer__locations-inner { width: min(calc(100% - 100px), 1400px); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 70px; padding: 52px 0 55px; } /* ========================================================= LOCATION ITEM ========================================================= */ .rediscover-footer__location { display: flex; flex-direction: column; align-items: flex-start; } /* ========================================================= LOCATION LABEL ========================================================= */ .rediscover-footer__location-label { margin-bottom: 16px; font-size: 10px; line-height: 1.3; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: #b89a63; } /* ========================================================= LOCATION TITLE ========================================================= */ .rediscover-footer__location strong { margin-bottom: 9px; font-size: 14px; line-height: 1.5; font-weight: 600; color: rgba(255, 255, 255, 0.9); } /* ========================================================= LOCATION DETAILS ========================================================= */ .rediscover-footer__location p { margin: 0; font-size: 13px; line-height: 1.75; font-weight: 400; color: rgba(255, 255, 255, 0.55); } /* ========================================================= BOTTOM BAR ========================================================= */ .rediscover-footer__bottom { width: 100%; } .rediscover-footer__bottom-inner { width: min(calc(100% - 100px), 1400px); min-height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 35px; } /* ========================================================= COPYRIGHT ========================================================= */ .rediscover-footer__bottom p { margin: 0; font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.42); } /* ========================================================= LEGAL LINKS ========================================================= */ .rediscover-footer__legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 24px; } .rediscover-footer__legal a { font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.48); text-decoration: none; transition: color 0.3s ease; } .rediscover-footer__legal a:hover { color: #b89a63; } /* ========================================================= CREDIT ========================================================= */ .rediscover-footer__credit { text-align: right; } .rediscover-footer__credit span { color: rgba(255, 255, 255, 0.65); } /* ========================================================= GOLD ACCENT LINE ========================================================= */ .rediscover-footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #b89a63; } /* ========================================================= FOCUS ACCESSIBILITY ========================================================= */ .rediscover-footer a:focus-visible { outline: 2px solid #b89a63; outline-offset: 5px; } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1440px) { .rediscover-footer__inner, .rediscover-footer__locations-inner, .rediscover-footer__bottom-inner { width: min(calc(100% - 140px), 1500px); } .rediscover-footer__inner { gap: 75px; padding: 115px 0 120px; } .rediscover-footer__logo { font-size: 26px; } .rediscover-footer__brand-description { font-size: 16px; max-width: 420px; } .rediscover-footer__column a { font-size: 14px; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1150px) { .rediscover-footer__inner { width: calc(100% - 70px); grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 45px; } .rediscover-footer__brand { grid-column: 1 / -1; padding-right: 0; margin-bottom: 20px; } .rediscover-footer__brand-description { max-width: 520px; } .rediscover-footer__locations-inner { width: calc(100% - 70px); gap: 45px; } .rediscover-footer__bottom-inner { width: calc(100% - 70px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 850px) { .rediscover-footer__inner { width: calc(100% - 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px 40px; padding: 75px 0 80px; } .rediscover-footer__brand { grid-column: 1 / -1; margin-bottom: 10px; } .rediscover-footer__brand-description { font-size: 14px; max-width: 600px; } .rediscover-footer__locations-inner { width: calc(100% - 56px); grid-template-columns: 1fr 1fr; gap: 40px; padding: 45px 0 50px; } .rediscover-footer__location:last-child { grid-column: 1 / -1; } .rediscover-footer__bottom-inner { width: calc(100% - 56px); min-height: auto; padding: 28px 0 32px; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .rediscover-footer__credit { text-align: center; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .rediscover-footer__inner { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 42px; padding: 65px 0 70px; } /* BRAND */ .rediscover-footer__brand { grid-column: auto; margin-bottom: 10px; } .rediscover-footer__logo { font-size: 21px; margin-bottom: 25px; } .rediscover-footer__logo span { font-size: 10px; margin-top: 7px; } .rediscover-footer__brand-description { max-width: 100%; margin-bottom: 35px; font-size: 14px; line-height: 1.75; } /* LABEL */ .rediscover-footer__label { font-size: 10px; margin-bottom: 13px; } /* CONTACT */ .rediscover-footer__contact { margin-bottom: 35px; gap: 6px; } .rediscover-footer__contact a { font-size: 14px; } /* SOCIAL */ .rediscover-footer__social-links { gap: 9px 18px; } .rediscover-footer__social-links a { font-size: 13px; } /* COLUMNS */ .rediscover-footer__column h3 { margin-bottom: 21px; font-size: 11px; letter-spacing: 0.17em; } .rediscover-footer__column a { margin-bottom: 11px; font-size: 14px; line-height: 1.5; } /* LOCATIONS */ .rediscover-footer__locations-inner { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 32px; padding: 42px 0 45px; } .rediscover-footer__location:last-child { grid-column: auto; } .rediscover-footer__location-label { font-size: 10px; margin-bottom: 13px; } .rediscover-footer__location strong { font-size: 14px; } .rediscover-footer__location p { font-size: 13px; line-height: 1.7; } /* BOTTOM */ .rediscover-footer__bottom-inner { width: calc(100% - 40px); padding: 25px 0 30px; gap: 18px; } .rediscover-footer__bottom p { font-size: 10px; line-height: 1.6; } .rediscover-footer__legal { gap: 8px 16px; } .rediscover-footer__legal a { font-size: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .rediscover-footer__inner { width: calc(100% - 32px); padding: 55px 0 60px; gap: 38px; } .rediscover-footer__locations-inner, .rediscover-footer__bottom-inner { width: calc(100% - 32px); } .rediscover-footer__logo { font-size: 19px; } .rediscover-footer__brand-description { font-size: 13px; } .rediscover-footer__column a { font-size: 13px; } .rediscover-footer__location p { font-size: 12px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rediscover-footer *, .rediscover-footer *::before, .rediscover-footer *::after { scroll-behavior: auto !important; transition: none !important; } } /* ========================================================= HIGH CONTRAST ========================================================= */ @media (forced-colors: active) { .rediscover-footer { background: Canvas; color: CanvasText; border-color: CanvasText; } .rediscover-footer a, .rediscover-footer h2, .rediscover-footer h3, .rediscover-footer p, .rediscover-footer span { color: CanvasText !important; } .rediscover-footer::before { background: CanvasText; } } /* ========================================================= REDISCOVER JOURNEYS FLOATING TRIPADVISOR BUTTON ========================================================= */ .floating-tripadvisor { position: fixed; left: 24px; bottom: 24px; width: 58px; height: 58px; display: flex; align-items: center; background: #000000; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; text-decoration: none; z-index: 9999; overflow: hidden; box-sizing: border-box; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30); transition: width 0.35s ease, border-radius 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* ========================================================= LOGO CONTAINER ========================================================= */ .floating-tripadvisor__icon { flex: 0 0 58px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ========================================================= TRIPADVISOR LOGO ========================================================= */ .floating-tripadvisor__icon img { display: block; width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); transition: transform 0.3s ease; } /* ========================================================= TEXT ========================================================= */ .floating-tripadvisor__text { display: block; margin-left: 2px; white-space: nowrap; opacity: 0; transform: translateX(-10px); color: #ffffff; font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.25s ease, transform 0.3s ease; } /* ========================================================= HOVER ========================================================= */ .floating-tripadvisor:hover { width: 165px; background: #171613; color: #ffffff; border-color: rgba(255, 255, 255, 0.35); border-radius: 32px; transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.40); } /* ========================================================= LOGO HOVER ========================================================= */ .floating-tripadvisor:hover .floating-tripadvisor__icon img { transform: scale(0.92); } /* ========================================================= SHOW TEXT ========================================================= */ .floating-tripadvisor:hover .floating-tripadvisor__text { opacity: 1; transform: translateX(0); color: #ffffff; } /* ========================================================= ACTIVE / CLICK ========================================================= */ .floating-tripadvisor:active { transform: translateY(-3px) scale(0.96); } /* ========================================================= KEYBOARD ACCESSIBILITY ========================================================= */ .floating-tripadvisor:focus-visible { outline: 2px solid #b89a63; outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .floating-tripadvisor { left: 20px; bottom: 20px; width: 54px; height: 54px; } .floating-tripadvisor__icon { flex: 0 0 54px; width: 54px; height: 54px; } .floating-tripadvisor__icon img { width: 26px; height: 26px; } .floating-tripadvisor:hover { width: 155px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .floating-tripadvisor { left: 16px; bottom: 16px; width: 50px; height: 50px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30); } .floating-tripadvisor__icon { flex: 0 0 50px; width: 50px; height: 50px; } .floating-tripadvisor__icon img { width: 23px; height: 23px; } .floating-tripadvisor__text { font-size: 10px; letter-spacing: 0.07em; } .floating-tripadvisor:hover { width: 145px; transform: translateY(-2px); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .floating-tripadvisor { left: 12px; bottom: 12px; width: 46px; height: 46px; } .floating-tripadvisor__icon { flex: 0 0 46px; width: 46px; height: 46px; } .floating-tripadvisor__icon img { width: 21px; height: 21px; } .floating-tripadvisor:hover { width: 135px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .floating-tripadvisor, .floating-tripadvisor__icon img, .floating-tripadvisor__text { transition: none; } } /* ===================================================== COOKIE CONSENT POPUP ===================================================== */ .cookie-consent { position: fixed; left: 28px; bottom: 28px; z-index: 99999; width: min(620px, calc(100vw - 56px)); box-sizing: border-box; opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity .45s ease, visibility .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .cookie-consent.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .cookie-consent.is-accepted { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; } /* ===================================================== COOKIE CONTENT ===================================================== */ .cookie-consent__content { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 17px; padding: 24px 25px 22px; background: rgba(248, 245, 238, 0.98); border: 1px solid rgba(138, 111, 61, 0.24); border-radius: 12px; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18), 0 8px 25px rgba(0, 0, 0, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ===================================================== ICON ===================================================== */ .cookie-consent__icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; color: #ffffff; background: #8a6f3d; border-radius: 50%; font-family: "Bodoni Moda", Georgia, serif; font-size: 15px; box-shadow: 0 5px 15px rgba(138, 111, 61, 0.22); } /* ===================================================== TEXT ===================================================== */ .cookie-consent__text { min-width: 0; } .cookie-consent__eyebrow { display: block; margin-bottom: 7px; color: #8a6f3d; font-family: "DM Sans", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; } .cookie-consent__text h2 { margin: 0 0 9px; color: #111111; font-family: "Bodoni Moda", Georgia, serif; font-size: 25px; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; } .cookie-consent__text p { max-width: 520px; margin: 0; color: #4f4a43; font-family: "DM Sans", Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.7; } /* ===================================================== COOKIE POLICY LINK ===================================================== */ .cookie-consent__policy { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; color: #8a6f3d; font-family: "DM Sans", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .10em; line-height: 1.4; text-transform: uppercase; text-decoration: none; transition: color .25s ease; } .cookie-consent__policy span { font-size: 12px; line-height: 1; transition: transform .25s ease; } .cookie-consent__policy:hover { color: #000000; } .cookie-consent__policy:hover span { transform: translateX(3px); } /* ===================================================== ACTIONS ===================================================== */ .cookie-consent__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 19px; padding-top: 16px; border-top: 1px solid rgba(138, 111, 61, 0.14); } /* ===================================================== BUTTONS ===================================================== */ .cookie-consent__button { min-height: 40px; padding: 10px 17px; border-radius: 3px; font-family: "DM Sans", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .10em; line-height: 1.2; text-transform: uppercase; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } /* Reject */ .cookie-consent__button--reject { color: #5f4a22; background: transparent; border: 1px solid rgba(138, 111, 61, 0.32); } .cookie-consent__button--reject:hover { color: #111111; background: #eee6d7; border-color: rgba(138, 111, 61, 0.55); transform: translateY(-1px); } /* Accept */ .cookie-consent__button--accept { color: #ffffff; background: #111111; border: 1px solid #111111; } .cookie-consent__button--accept:hover { color: #ffffff; background: #8a6f3d; border-color: #8a6f3d; transform: translateY(-1px); } /* ===================================================== ACCESSIBILITY ===================================================== */ .cookie-consent__button:focus-visible, .cookie-consent__policy:focus-visible { outline: 1px solid #8a6f3d; outline-offset: 4px; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 768px) { .cookie-consent { left: 18px; bottom: 18px; width: calc(100vw - 36px); } .cookie-consent__content { padding: 21px 20px 19px; border-radius: 11px; } .cookie-consent__eyebrow { font-size: 10px; } .cookie-consent__text h2 { font-size: 23px; } .cookie-consent__text p { font-size: 10px; line-height: 1.65; } .cookie-consent__policy { font-size: 10px; } .cookie-consent__button { font-size: 10px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 520px) { .cookie-consent { left: 12px; bottom: 12px; width: calc(100vw - 24px); } .cookie-consent__content { grid-template-columns: auto 1fr; column-gap: 12px; padding: 18px 17px 16px; } .cookie-consent__icon { width: 30px; height: 30px; font-size: 13px; } .cookie-consent__eyebrow { margin-bottom: 6px; font-size: 10px; letter-spacing: .12em; } .cookie-consent__text h2 { margin-bottom: 8px; font-size: 22px; line-height: 1.1; } .cookie-consent__text p { font-size: 10px; line-height: 1.65; } .cookie-consent__policy { margin-top: 10px; font-size: 10px; letter-spacing: .09em; } .cookie-consent__policy span { font-size: 11px; } .cookie-consent__actions { flex-direction: column-reverse; align-items: stretch; margin-top: 15px; padding-top: 13px; } .cookie-consent__button { width: 100%; min-height: 40px; font-size: 10px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 380px) { .cookie-consent { left: 10px; bottom: 10px; width: calc(100vw - 20px); } .cookie-consent__content { column-gap: 10px; padding: 16px 14px 14px; } .cookie-consent__icon { width: 28px; height: 28px; font-size: 12px; } .cookie-consent__eyebrow { font-size: 9.5px; } .cookie-consent__text h2 { font-size: 20px; } .cookie-consent__text p { font-size: 10px; line-height: 1.6; } .cookie-consent__policy { font-size: 9.5px; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { .cookie-consent { transition: none; } .cookie-consent__button, .cookie-consent__policy, .cookie-consent__policy span { transition: none; } } /* ========================================================= RESPONSIVE SYSTEM REDISCOVER JOURNEYS HERO + STORY + REVIEWS + START YOUR JOURNEY + EXPLORE OUR JOURNEYS ========================================================= */ /* ========================================================= LARGE TABLET / SMALL DESKTOP 1200px ========================================================= */ @media (max-width: 1200px) { /* ===================================================== HEADER ===================================================== */ .site-header { height: 92px; padding: 0 30px; grid-template-columns: 155px minmax(0, 1fr) auto; column-gap: 20px; } .site-logo { width: 145px; } .main-nav { gap: 18px; } .main-nav a { font-size: 10px; letter-spacing: 0.10em; } .header-contact { display: none; } .header-actions { gap: 8px; } /* ===================================================== HERO ===================================================== */ .hero { min-height: 650px; } .hero__content { width: min(100%, 1000px); padding-left: 35px; padding-right: 35px; } .hero__title { font-size: clamp(2rem, 3.2vw, 3rem); } .hero__description { max-width: 620px; font-size: 10px; } /* ===================================================== STORY ===================================================== */ .rediscover-story__inner { padding: 100px 50px 95px; } .rediscover-story__intro { max-width: 900px; } .rediscover-story__title { font-size: clamp(2rem, 3.5vw, 3.4rem); } .rediscover-story__content { max-width: 680px; } /* ===================================================== REVIEWS ===================================================== */ .rediscover-reviews { padding: 65px 50px 80px; } .review-card { flex: 0 0 calc((100% - 36px) / 3); width: calc((100% - 36px) / 3); min-height: 260px; padding: 27px; } /* ===================================================== START YOUR JOURNEY ===================================================== */ .start-journey__inner { width: min(calc(100% - 60px), 1100px); padding-top: 100px; padding-bottom: 105px; } .start-journey__title { font-size: clamp(3.6rem, 6.5vw, 5.8rem); } .journey-tab { padding-left: 25px; padding-right: 25px; } /* ===================================================== TRAVELLER ===================================================== */ .traveller-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .traveller-card { height: 350px; min-height: 350px; } .traveller-card__content { left: 25px; right: 25px; bottom: 25px; } /* ===================================================== POPULAR ===================================================== */ .popular-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .popular-card { height: 350px; min-height: 350px; } .popular-card__content { left: 25px; right: 25px; bottom: 25px; } /* ===================================================== MONTHS ===================================================== */ .months-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .month-card { min-height: 135px; height: 135px; } /* ===================================================== SPOTLIGHT ===================================================== */ .spotlight-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 16px; } .spotlight-card--large { height: 460px; } .spotlight-card { height: 300px; } /* ===================================================== EXPLORE OUR JOURNEYS ===================================================== */ .explore-journeys { padding: 100px 0 105px; } .explore-journeys__inner { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(280px, 25%) minmax(0, 1fr); gap: 50px; padding-left: 7vw; } .explore-journeys__intro { position: sticky; top: 100px; align-self: start; max-width: 320px; } .explore-journeys__title { font-size: clamp(2rem, 3vw, 3.2rem); line-height: 0.95; } .explore-journeys__description { max-width: 280px; font-size: 13px; line-height: 1.7; } .explore-journeys__slider { min-width: 0; overflow: hidden; } .explore-journeys__track { display: flex; gap: 18px; width: max-content; } .explore-journeys__card { flex: 0 0 330px; width: 330px; height: 480px; } .explore-journeys__card-content { left: 25px; right: 25px; bottom: 27px; } .explore-journeys__card-title { font-size: clamp(1.7rem, 2.5vw, 2.5rem); } .explore-journeys__card-description { font-size: 12px; line-height: 1.6; } .explore-journeys__footer { padding-left: 7vw; } } /* ========================================================= START YOUR JOURNEY — RESPONSIVE GRIDS ========================================================= */ @media (max-width: 1100px) { .traveller-grid, .popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .traveller-grid, .popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 520px) { .traveller-grid, .popular-grid { grid-template-columns: 1fr; } } /* ========================================================= TABLET 950px ========================================================= */ @media (max-width: 950px) { /* ===================================================== HEADER ===================================================== */ .site-header { height: 84px; padding: 0 24px; grid-template-columns: 140px minmax(0, 1fr) auto; } .site-logo { width: 130px; transform: translateY(-12px); } .main-nav { gap: 12px; transform: translateY(-12px); } .main-nav a { font-size: 10px; letter-spacing: 0.09em; } .header-actions { transform: translateY(-12px); } .header-plan { display: none; } /* ===================================================== HERO ===================================================== */ .hero { min-height: 620px; } .hero__content { padding: 85px 30px 70px; } .hero__title { max-width: 850px; font-size: clamp(1.8rem, 3.5vw, 2.8rem); } .hero__description { max-width: 600px; font-size: 10px; letter-spacing: 0.15em; } /* ===================================================== STORY ===================================================== */ .rediscover-story__inner { padding: 85px 30px 80px; } .rediscover-story__title { font-size: clamp(1.8rem, 4vw, 3rem); } .rediscover-story__content { max-width: 650px; } .rediscover-story__content p { font-size: 15px; } /* ===================================================== REVIEWS ===================================================== */ .rediscover-reviews { padding: 55px 30px 70px; } .rediscover-reviews__header { align-items: flex-start; } .rediscover-reviews__title { font-size: clamp(2rem, 4.5vw, 3.2rem); } .review-card { flex: 0 0 calc((100% - 18px) / 2); width: calc((100% - 18px) / 2); min-height: 255px; } /* ===================================================== START YOUR JOURNEY ===================================================== */ .start-journey__inner { width: min(calc(100% - 50px), 760px); padding-top: 85px; padding-bottom: 90px; } .start-journey__header { margin-bottom: 42px; } .start-journey__title { font-size: clamp(3rem, 8vw, 5rem); } /* ===================================================== TABS ===================================================== */ .journey-tabs { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .journey-tabs::-webkit-scrollbar { display: none; } .journey-tab { flex: 0 0 auto; min-width: 135px; padding: 14px 20px 16px; font-size: 10px; } /* ===================================================== TRAVELLER ===================================================== */ .traveller-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .traveller-card { height: 320px; min-height: 320px; } .traveller-card__content { left: 22px; right: 22px; bottom: 22px; } .traveller-card__content h3 { font-size: clamp(1.8rem, 4vw, 2.7rem); } /* ===================================================== POPULAR ===================================================== */ .popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .popular-card { height: 320px; min-height: 320px; } .popular-card__content { left: 22px; right: 22px; bottom: 22px; } .popular-card__content h3 { font-size: clamp(2rem, 4.5vw, 3rem); } /* ===================================================== MONTHS ===================================================== */ .months-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; } .month-card { height: 125px; min-height: 125px; } /* ===================================================== SPOTLIGHT ===================================================== */ .spotlight-grid { grid-template-columns: 1fr; gap: 14px; } .spotlight-card--large { height: 430px; } .spotlight-card { height: 280px; } /* ===================================================== EXPLORE OUR JOURNEYS ===================================================== */ .explore-journeys { padding: 80px 0 85px; } .explore-journeys__inner { grid-template-columns: minmax(230px, 28%) minmax(0, 1fr); gap: 30px; padding-left: 5vw; } .explore-journeys__intro { top: 80px; max-width: 240px; } .explore-journeys__title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } .explore-journeys__description { max-width: 230px; font-size: 12px; } .explore-journeys__track { gap: 14px; } .explore-journeys__card { flex-basis: 290px; width: 290px; height: 420px; } .explore-journeys__card-content { left: 21px; right: 21px; bottom: 23px; } .explore-journeys__card-title { font-size: clamp(1.5rem, 3vw, 2.2rem); } .explore-journeys__card-description { font-size: 11px; } .explore-journeys__footer { padding-left: 5vw; margin-top: 35px; } } /* ========================================================= MOBILE 700px ========================================================= */ @media (max-width: 700px) { /* ===================================================== HEADER ===================================================== */ .site-header { position: absolute; width: 100%; height: 72px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; } .site-logo { width: 125px; transform: none; } .site-logo img { max-height: 46px; } .main-nav, .header-contact, .header-plan { display: none; } .header-actions { margin-left: auto; transform: none; gap: 4px; } .menu-toggle { width: 38px; height: 38px; } /* ===================================================== SIDE MENU ===================================================== */ .side-menu { width: 100%; padding: 25px 20px; } .side-menu__top { padding-bottom: 18px; } .side-menu__nav { margin-top: 24px; } .side-menu__nav a { padding: 16px 0; font-size: clamp(1.8rem, 9vw, 2.7rem); } .side-menu__bottom { padding-top: 22px; } .side-menu__bottom p { max-width: 270px; font-size: 15px; } /* ===================================================== HERO ===================================================== */ .hero { height: 100svh; min-height: 580px; } .hero__video { object-position: center center; } .hero__overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.08) 38%, rgba(0, 0, 0, 0.20) 65%, rgba(0, 0, 0, 0.68) 100%); } .hero__content { width: 100%; padding: 80px 20px 65px; } .hero__title { width: 100%; max-width: 600px; margin-bottom: 18px; font-size: clamp(1.8rem, 8vw, 3rem); line-height: 0.9; letter-spacing: 0.025em; white-space: normal; } .hero__title span { display: inline; } .hero__description { width: 100%; max-width: 350px; margin-bottom: 24px; font-size: 9.5px; line-height: 1.8; letter-spacing: 0.12em; } .hero__actions { flex-direction: column; gap: 14px; } .hero__button { min-width: 170px; min-height: 42px; padding: 10px 15px; font-size: 10px; } .hero__link { font-size: 10px; } .hero__bottom { bottom: 18px; padding: 0 18px; } .hero__scroll { font-size: 9.5px; gap: 7px; } .hero__scroll-line { height: 32px; } /* ===================================================== STORY ===================================================== */ .rediscover-story__inner { width: 100%; padding: 70px 20px 65px; } .rediscover-story__eyebrow { font-size: 9.5px; margin-bottom: 16px; } .rediscover-story__title { font-size: clamp(1.7rem, 7vw, 2.7rem); line-height: 0.9; margin-bottom: 27px; } .rediscover-story__content { width: 100%; } .rediscover-story__content p { font-size: 13px; line-height: 1.7; margin-bottom: 17px; } .rediscover-story__closing { font-size: clamp(1.4rem, 5.5vw, 2.1rem); margin-top: 30px; margin-bottom: 25px; } .rediscover-story__button { min-width: 165px; min-height: 44px; padding: 11px 17px; font-size: 10px; } /* ===================================================== REVIEWS ===================================================== */ .rediscover-reviews { width: 100%; padding: 50px 20px 65px; } .rediscover-reviews__header { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 25px; } .rediscover-reviews__eyebrow { font-size: 9.5px; margin-bottom: 9px; } .rediscover-reviews__title { font-size: clamp(1.8rem, 7vw, 2.8rem); } .rediscover-reviews__trustpilot { align-items: flex-start; } .trustpilot-stars { font-size: 15px; } .trustpilot-label { font-size: 9.5px; } .reviews-slider { width: 100%; } .reviews-track { gap: 12px; } .review-card { flex: 0 0 100%; width: 100%; min-height: 235px; padding: 22px; } .review-card__stars { font-size: 12px; margin-bottom: 20px; } .review-card__text { font-size: 12px; line-height: 1.65; } .review-card__author { margin-top: 20px; padding-top: 15px; } .review-card__author strong { font-size: 10px; } .review-card__author span { font-size: 10px; } .reviews-controls { gap: 16px; margin-top: 25px; } .reviews-arrow { width: 36px; height: 36px; } /* ===================================================== START YOUR JOURNEY ===================================================== */ .start-journey__inner { width: calc(100% - 36px); padding-top: 70px; padding-bottom: 75px; } .start-journey__header { margin-bottom: 34px; } .start-journey__eyebrow { font-size: 9.5px; margin-bottom: 13px; } .start-journey__title { font-size: clamp(2.7rem, 12vw, 4rem); line-height: 0.88; } /* ===================================================== TABS ===================================================== */ .journey-tabs { justify-content: flex-start; width: calc(100% + 18px); margin-bottom: 34px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .journey-tabs::-webkit-scrollbar { display: none; } .journey-tab { min-width: auto; flex: 0 0 auto; padding: 12px 15px 14px; font-size: 9.5px; letter-spacing: 0.10em; } .journey-tab::after { left: 10px; right: 10px; } /* ===================================================== TRAVELLER ===================================================== */ .traveller-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .traveller-card { height: 235px; min-height: 235px; } .traveller-card__content { left: 17px; right: 17px; bottom: 17px; } .traveller-card__number { font-size: 9.5px; margin-bottom: 6px; } .traveller-card__content h3 { font-size: clamp(1.55rem, 6.5vw, 2.15rem); line-height: 0.88; } .traveller-card__arrow { margin-top: 8px; font-size: 13px; } /* ===================================================== POPULAR ===================================================== */ .popular-grid { grid-template-columns: 1fr; gap: 10px; } .popular-card { height: 280px; min-height: 280px; } .popular-card__content { left: 19px; right: 19px; bottom: 19px; } .popular-card__content span { font-size: 9.5px; } .popular-card__content h3 { font-size: clamp(2rem, 8vw, 3rem); } /* ===================================================== VIEW MORE ===================================================== */ .journey-panel__footer { margin-top: 27px; } .journey-view-more { min-width: 155px; min-height: 42px; padding: 10px 18px; font-size: 10px; } /* ===================================================== MONTHS ===================================================== */ .months-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; } .month-card { height: 100px; min-height: 100px; padding: 16px; } .month-card>span { font-size: 9.5px; } .month-card h3 { font-size: clamp(1.4rem, 6vw, 1.9rem); } .month-card b { right: 14px; bottom: 14px; font-size: 12px; } /* ===================================================== SPOTLIGHT ===================================================== */ .spotlight-grid { grid-template-columns: 1fr; gap: 10px; } .spotlight-card--large { height: 360px; } .spotlight-card { height: 215px; } .spotlight-card__content { left: 19px; right: 19px; bottom: 20px; } .spotlight-card__content>span { font-size: 9.5px; margin-bottom: 9px; } .spotlight-card__content h3 { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 12px; } .spotlight-card__content b { font-size: 10px; } /* ===================================================== EXPLORE OUR JOURNEYS ===================================================== */ .explore-journeys { padding: 70px 0 70px; overflow: hidden; } /* On mobile the introduction is placed above the horizontal journey cards. */ .explore-journeys__inner { display: block; width: 100%; padding-left: 20px; overflow: visible; } .explore-journeys__intro { position: static; max-width: 340px; margin-bottom: 35px; padding-right: 20px; } .explore-journeys__title { font-size: clamp(1.8rem, 8vw, 2.7rem); line-height: 0.95; margin-bottom: 16px; } .explore-journeys__description { max-width: 320px; font-size: 12px; line-height: 1.7; } /* Horizontal scrolling cards */ .explore-journeys__slider { width: 100%; overflow-x: auto; overflow-y: hidden; padding-right: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .explore-journeys__slider::-webkit-scrollbar { display: none; } .explore-journeys__track { display: flex; width: max-content; gap: 12px; padding-right: 20px; } .explore-journeys__card { flex: 0 0 285px; width: 285px; height: 390px; min-height: 390px; } .explore-journeys__card-content { left: 19px; right: 19px; bottom: 21px; } .explore-journeys__card-title { font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 0.95; margin-bottom: 10px; } .explore-journeys__card-description { max-width: 240px; font-size: 10.5px; line-height: 1.55; margin-bottom: 14px; } .explore-journeys__card-link { font-size: 10px; letter-spacing: 0.12em; } .explore-journeys__footer { padding: 0 20px; margin-top: 30px; } } /* ========================================================= SMALL MOBILE 480px ========================================================= */ @media (max-width: 480px) { /* ===================================================== HEADER ===================================================== */ .site-header { padding-left: 15px; padding-right: 15px; } .site-logo { width: 115px; } .site-logo img { max-height: 43px; } /* ===================================================== HERO ===================================================== */ .hero { min-height: 550px; } .hero__content { padding-left: 17px; padding-right: 17px; } .hero__title { font-size: clamp(1.7rem, 7.5vw, 2.5rem); } .hero__description { max-width: 310px; font-size: 9.5px; letter-spacing: 0.10em; } .hero__button { min-width: 160px; } /* ===================================================== STORY ===================================================== */ .rediscover-story__inner { padding-left: 17px; padding-right: 17px; } .rediscover-story__title { font-size: clamp(1.6rem, 7vw, 2.4rem); } .rediscover-story__content p { font-size: 12.5px; } /* ===================================================== REVIEWS ===================================================== */ .rediscover-reviews { padding-left: 17px; padding-right: 17px; } .review-card { min-height: 225px; padding: 20px; } /* ===================================================== JOURNEY ===================================================== */ .start-journey__inner { width: calc(100% - 30px); } .start-journey__title { font-size: clamp(2.5rem, 11vw, 3.6rem); } /* ===================================================== TRAVELLER ===================================================== */ .traveller-grid { gap: 8px; } .traveller-card { height: 210px; min-height: 210px; } .traveller-card__content { left: 14px; right: 14px; bottom: 14px; } .traveller-card__content h3 { font-size: clamp(1.4rem, 6.5vw, 1.9rem); } /* ===================================================== POPULAR ===================================================== */ .popular-card { height: 255px; min-height: 255px; } .popular-card__content { left: 16px; right: 16px; bottom: 16px; } .popular-card__content h3 { font-size: clamp(1.9rem, 8vw, 2.7rem); } /* ===================================================== MONTHS ===================================================== */ .month-card { height: 92px; min-height: 92px; padding: 14px; } .month-card h3 { font-size: clamp(1.3rem, 6.5vw, 1.7rem); } .month-card b { right: 12px; bottom: 12px; } /* ===================================================== SPOTLIGHT ===================================================== */ .spotlight-card--large { height: 330px; } .spotlight-card { height: 200px; } .spotlight-card__content { left: 17px; right: 17px; bottom: 18px; } .spotlight-card__content h3 { font-size: clamp(1.9rem, 8vw, 2.7rem); } /* ===================================================== EXPLORE OUR JOURNEYS ===================================================== */ .explore-journeys { padding: 60px 0 60px; } .explore-journeys__inner { padding-left: 17px; } .explore-journeys__intro { max-width: 300px; margin-bottom: 30px; padding-right: 17px; } .explore-journeys__title { font-size: clamp(1.7rem, 8vw, 2.4rem); } .explore-journeys__description { font-size: 11px; line-height: 1.65; } .explore-journeys__slider { padding-right: 17px; } .explore-journeys__track { gap: 10px; padding-right: 17px; } .explore-journeys__card { flex-basis: 260px; width: 260px; height: 360px; min-height: 360px; } .explore-journeys__card-content { left: 17px; right: 17px; bottom: 18px; } .explore-journeys__card-title { font-size: clamp(1.4rem, 7vw, 2rem); } .explore-journeys__card-description { font-size: 10px; line-height: 1.5; } .explore-journeys__footer { padding-left: 17px; padding-right: 17px; } } /* ========================================================= VERY SMALL MOBILE 380px ========================================================= */ @media (max-width: 380px) { /* ===================================================== HEADER ===================================================== */ .site-logo { width: 105px; } .menu-toggle { width: 35px; height: 35px; } /* ===================================================== HERO ===================================================== */ .hero { min-height: 530px; } .hero__title { font-size: 1.6rem; } .hero__description { font-size: 9.5px; } .hero__button { min-width: 150px; min-height: 40px; } /* ===================================================== STORY ===================================================== */ .rediscover-story__title { font-size: 1.5rem; } .rediscover-story__content p { font-size: 12px; } /* ===================================================== JOURNEY ===================================================== */ .start-journey__inner { width: calc(100% - 26px); padding-top: 60px; padding-bottom: 65px; } .start-journey__title { font-size: 2.4rem; } /* ===================================================== TABS ===================================================== */ .journey-tab { padding-left: 12px; padding-right: 12px; font-size: 9.5px; } /* ===================================================== TRAVELLER ===================================================== */ .traveller-grid { gap: 7px; } .traveller-card { height: 190px; min-height: 190px; } .traveller-card__content { left: 12px; right: 12px; bottom: 12px; } .traveller-card__content h3 { font-size: 1.3rem; } /* ===================================================== POPULAR ===================================================== */ .popular-card { height: 230px; min-height: 230px; } /* ===================================================== MONTHS ===================================================== */ .month-card { height: 85px; min-height: 85px; padding: 12px; } .month-card h3 { font-size: 1.25rem; } /* ===================================================== SPOTLIGHT ===================================================== */ .spotlight-card--large { height: 300px; } .spotlight-card { height: 185px; } /* ===================================================== EXPLORE OUR JOURNEYS ===================================================== */ .explore-journeys { padding: 50px 0 55px; } .explore-journeys__inner { padding-left: 14px; } .explore-journeys__intro { max-width: 280px; margin-bottom: 25px; padding-right: 14px; } .explore-journeys__title { font-size: 1.65rem; } .explore-journeys__description { font-size: 10.5px; } .explore-journeys__slider { padding-right: 14px; } .explore-journeys__track { gap: 9px; padding-right: 14px; } .explore-journeys__card { flex-basis: 240px; width: 240px; height: 330px; min-height: 330px; } .explore-journeys__card-content { left: 15px; right: 15px; bottom: 16px; } .explore-journeys__card-title { font-size: 1.35rem; } .explore-journeys__card-description { font-size: 9.5px; } .explore-journeys__card-link { font-size: 9.5px; } .explore-journeys__footer { padding-left: 14px; padding-right: 14px; } } /* ========================================================= LANDSCAPE MOBILE ========================================================= */ @media (max-height: 600px) and (orientation: landscape) { /* ===================================================== HERO ===================================================== */ .hero { min-height: 500px; } .hero__content { padding-top: 75px; padding-bottom: 55px; } .hero__title { font-size: clamp(1.7rem, 5vw, 2.7rem); margin-bottom: 10px; } .hero__description { max-width: 600px; margin-bottom: 13px; font-size: 9.5px; } .hero__actions { flex-direction: row; gap: 14px; } .hero__button { min-height: 38px; } .hero__bottom { bottom: 10px; } .hero__scroll-line { height: 22px; } /* ===================================================== SIDE MENU ===================================================== */ .side-menu { padding-top: 18px; padding-bottom: 18px; overflow-y: auto; } .side-menu__nav { margin-top: 12px; } .side-menu__nav a { padding: 8px 0; font-size: 1.6rem; } .side-menu__bottom { padding-top: 18px; } /* ===================================================== EXPLORE OUR JOURNEYS ===================================================== */ .explore-journeys { padding: 55px 0 60px; } .explore-journeys__inner { padding-left: 20px; } .explore-journeys__intro { margin-bottom: 25px; } .explore-journeys__card { height: 300px; min-height: 300px; } } /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none) { .traveller-card:hover, .popular-card:hover, .spotlight-card:hover, .review-card:hover, .explore-journeys__card:hover { transform: none; } .traveller-card:hover .traveller-card__image img, .popular-card:hover .popular-card__image img, .spotlight-card:hover .spotlight-card__image img, .explore-journeys__card:hover img { transform: none; } .month-card b { opacity: 0; } } /* ========================================================= ACCESSIBILITY ========================================================= */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================= PRINT ========================================================= */ @media print { .site-header, .menu-overlay, .side-menu, .hero__video, .hero__overlay, .hero__bottom, .reviews-controls { display: none !important; } body { background: white; color: black; } .hero { min-height: auto; height: auto; padding: 80px 20px; } .hero__content { min-height: auto; } .hero__title, .rediscover-story__title, .rediscover-reviews__title, .start-journey__title { color: black !important; } .traveller-card, .popular-card, .spotlight-card, .explore-journeys__card { break-inside: avoid; } } /* ========================================================= HEADER — ALL DEVICES ========================================================= */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: 82px; z-index: 1000; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px; box-sizing: border-box; background: #0a0a0a; } /* ========================================================= LOGO ========================================================= */ .site-logo { display: flex; align-items: center; justify-self: start; flex-shrink: 0; } .site-logo img { display: block; width: auto; height: 52px; object-fit: contain; } /* ========================================================= DESKTOP NAV ========================================================= */ .main-nav { display: flex; align-items: center; justify-content: center; gap: 32px; margin: 0; justify-self: center; } .main-nav>a { color: #ffffff; text-decoration: none; font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.3s ease; } .main-nav>a:hover { color: #b89a5b; } /* ========================================================= HAMBURGER ========================================================= */ .menu-toggle { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 5px; background: transparent; cursor: pointer; flex-shrink: 0; } .menu-toggle span { display: block; width: 20px; height: 1px; margin: 1px 0; background: #ffffff; transition: transform 0.35s ease, width 0.35s ease; } .menu-toggle span:nth-child(2) { width: 12px; } /* ========================================================= CONNECT NOW ========================================================= */ .header-plan { display: inline-flex; align-items: center; justify-self: end; gap: 9px; padding: 9px 14px; color: #ffffff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 5px; font-family: "DM Sans", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; } .header-plan:hover { background: #b89a5b; border-color: #b89a5b; color: #ffffff; } .header-plan__arrow { font-size: 13px; line-height: 1; } /* ========================================================= TABLET + MOBILE LOGO LEFT / HAMBURGER RIGHT ========================================================= */ @media (max-width: 900px) { .site-header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; } /* Logo stays in the corner */ .site-logo { justify-self: auto; } .site-logo img { height: 44px; } /* Main navigation links disappear from header */ .main-nav { margin: 0; margin-left: auto; } .main-nav>a { display: none; } /* Hamburger stays on right */ .menu-toggle { width: 42px; height: 42px; margin-left: 0; } /* Hide Connect Now on smaller devices */ .header-plan { display: none; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 600px) { .site-header { height: 68px; padding: 0 18px; } .site-logo img { height: 40px; } .menu-toggle { width: 38px; height: 38px; } .menu-toggle span { width: 23px; } .menu-toggle span:nth-child(2) { width: 16px; } } /* ========================================================= UTILITIES ========================================================= */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Cookie modal heading — now a

, keep same visual style */ .cookie-consent__title { font-size: inherit; font-weight: inherit; margin: 0; /* Copy styles from your previous .cookie-consent h2 rule here */ } /* ========================================================= MAIN TITLE SPAN UTILITIES ========================================================= */ /* Hero — inline em for "Sri Lanka", block for "Differently." */ .hero__title-em { display: inline; color: inherit; font-style: normal; } .hero__title-accent { display: block; color: #b69a63; font-style: italic; font-weight: 400; } /* Story H2 — line span + accent */ .rediscover-story__title-line { display: block; } .rediscover-story__title-accent { display: block; color: #b69a63; font-style: italic; font-weight: 400; } /* Start Journey H2 — plain span + accent */ .start-journey__title>span:not([class]) { display: block; } .start-journey__title-accent { display: block; color: #b69a63; font-style: italic; font-weight: 400; } /* Explore H2 — line spans + accent */ .explore-journeys__title-line { display: block; } .explore-journeys__title-accent { display: block; color: #b69a63; font-style: italic; font-weight: 400; } /* Editorial H2 — inline accent */ .rediscover-editorial__title-accent { color: #b69a63; font-style: italic; font-weight: 400; } /* ========================================================= MOBILE — Let line spans collapse to inline so text reflows ========================================================= */ @media (max-width: 600px) { .rediscover-story__title-line, .start-journey__title>span:not([class]), .explore-journeys__title-line { display: inline; } } /* ========================================================= FILM LIGHTBOX ========================================================= */ .film-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 40px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; box-sizing: border-box; } /* ========================================================= OPEN STATE ========================================================= */ .film-lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; } /* ========================================================= BACKDROP ========================================================= */ .film-lightbox__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(8px); } /* ========================================================= DIALOG ========================================================= */ .film-lightbox__dialog { position: relative; width: min(1100px, 92vw); z-index: 2; transform: translateY(20px) scale(0.97); transition: transform 0.4s cubic-bezier(.77, 0, .18, 1); } .film-lightbox.is-open .film-lightbox__dialog { transform: translateY(0) scale(1); } /* ========================================================= VIDEO ========================================================= */ .film-lightbox__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .film-lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ========================================================= CLOSE BUTTON ========================================================= */ .film-lightbox__close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 10; } .film-lightbox__close span { position: absolute; top: 50%; left: 50%; width: 27px; height: 1px; background: #fff; display: block; } .film-lightbox__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .film-lightbox__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .film-lightbox__close:hover span { background: rgba(255, 255, 255, 0.65); } /* ========================================================= YOUTUBE LABEL ========================================================= */ .film-lightbox__youtube { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: rgba(255, 255, 255, 0.75); font-family: "DM Sans", sans-serif; font-size: 12px; letter-spacing: 0.04em; } .film-lightbox__youtube-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 18px; border-radius: 5px; background: #ff0000; color: #fff; font-size: 9px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .film-lightbox { padding: 20px; } .film-lightbox__dialog { width: 100%; } .film-lightbox__close { top: -48px; } }