/* ========================================================================== Rolex Tours: design system + components One stylesheet for both directions: only logical properties are used, so mirrors the layout without overrides. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { --sunset-orange: #F89050; --orange-ink: #B4501C; /* orange for text on light (5.1:1) */ --orange-soft: #FDE3D1; --sun-yellow: #FEE161; --sea-blue: #1F8EC5; --sea-ink: #17709C; /* blue for text / buttons with white text (5.5:1) */ --sea-soft: #DDF0FA; --deep-navy: #0E2A47; --navy-2: #163A5F; --lagoon: #2EC4C9; --lagoon-soft: #D9F5F5; --sand: #FFF6EC; --sand-2: #FBE9D4; --ink: #1B1B1F; --ink-2: #4A5261; /* secondary text (7.4:1 on white) */ --muted: #5B6472; --line: #E8E1D8; --white: #FFFFFF; --wa-green: #25D366; --wa-ink: #0B2E1C; --radius-sm: 12px; --radius: 20px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(14 42 71 / .06), 0 2px 8px rgb(14 42 71 / .06); --shadow: 0 6px 24px rgb(14 42 71 / .10); --shadow-lg: 0 18px 50px rgb(14 42 71 / .18); --container: 1240px; --gutter: clamp(16px, 4vw, 32px); --section-y: clamp(56px, 8vw, 112px); --header-h: 76px; --font-display: "Fredoka", "Plus Jakarta Sans", "Readex Pro", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; --lh-body: 1.6; --step--1: clamp(.8rem, .78rem + .1vw, .875rem); --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem); --step-1: clamp(1.125rem, 1.07rem + .3vw, 1.3rem); --step-2: clamp(1.35rem, 1.22rem + .6vw, 1.75rem); --step-3: clamp(1.7rem, 1.45rem + 1.2vw, 2.5rem); --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); --step-5: clamp(2.5rem, 1.7rem + 3.6vw, 4.6rem); --ease: cubic-bezier(.2, .7, .2, 1); } :root:lang(ar) { --font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif; --font-body: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif; --lh-body: 1.8; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } picture { display: contents; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--deep-navy); letter-spacing: -.01em; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { letter-spacing: 0; line-height: 1.35; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } [hidden] { display: none !important; } .ltr-num { direction: ltr; unicode-bidi: isolate; display: inline-block; } :focus-visible { outline: 3px solid var(--sea-blue); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 1000; background: var(--deep-navy); color: var(--white); padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; } .skip-link:focus { inset-block-start: 12px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 3. Layout ---------- */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .section { padding-block: var(--section-y); position: relative; } .section--sand { background: var(--sand); } .section--navy { background: var(--deep-navy); color: var(--white); } .section--navy h2, .section--navy h3 { color: var(--white); } .section--tight { padding-block: calc(var(--section-y) * .6); } .grid { display: grid; gap: clamp(16px, 2.4vw, 28px); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .stack > * + * { margin-block-start: var(--stack, 1rem); } /* Wave divider sits at the top edge of a section */ .wave { position: absolute; inset-inline: 0; inset-block-start: -1px; height: clamp(28px, 4vw, 56px); width: 100%; color: var(--white); pointer-events: none; } .wave--bottom { inset-block-start: auto; inset-block-end: -1px; transform: scaleY(-1); } .wave path { fill: currentColor; } /* ---------- 4. Typography helpers ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); margin-block-end: 12px; } :lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--step-0); } .eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sunset-orange); box-shadow: 0 0 0 4px var(--orange-soft); } .section--navy .eyebrow { color: var(--sun-yellow); } .section--navy .eyebrow::before { box-shadow: 0 0 0 4px rgb(248 144 80 / .25); } .section-head { max-width: 720px; margin-block-end: clamp(28px, 4vw, 48px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: var(--step-4); } .section-head p { font-size: var(--step-1); color: var(--ink-2); margin: 0; } .section--navy .section-head p { color: rgb(255 255 255 / .82); } .section-head__row { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block-end: clamp(24px, 3vw, 40px); } .section-head__row .section-head { margin-block-end: 0; } .lead { font-size: var(--step-1); color: var(--ink-2); } /* ---------- 5. Icons ---------- */ .icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon--fill { fill: currentColor; stroke: none; } [dir="rtl"] .icon--flip { transform: scaleX(-1); } /* ---------- 6. Buttons ---------- */ .btn { --btn-bg: var(--sunset-orange); --btn-fg: var(--deep-navy); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: var(--step-0); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn--primary:hover { --btn-bg: #FA9D62; } .btn--secondary { --btn-bg: var(--deep-navy); --btn-fg: var(--white); } .btn--sea { --btn-bg: var(--sea-ink); --btn-fg: var(--white); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--deep-navy); border-color: currentColor; } .btn--ghost-light { --btn-bg: rgb(255 255 255 / .12); --btn-fg: var(--white); border-color: rgb(255 255 255 / .6); backdrop-filter: blur(8px); } .btn--wa { --btn-bg: var(--wa-green); --btn-fg: var(--wa-ink); } .btn--wa:hover { --btn-bg: #3BE07A; } .btn--sm { min-height: 40px; padding: 8px 16px; font-size: var(--step--1); gap: 6px; } .btn--lg { min-height: 56px; padding: 14px 30px; font-size: var(--step-1); } .btn--block { width: 100%; } .btn--icon { padding: 0; width: 48px; aspect-ratio: 1; } .btn--icon.btn--sm { width: 40px; } .btn .icon { width: 1.2em; height: 1.2em; } /* ---------- 7. Chips & badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 600; background: var(--sea-soft); color: var(--sea-ink); line-height: 1.3; } .chip--safari { background: var(--orange-soft); color: #9A4315; } .chip--hotel { background: var(--lagoon-soft); color: #0F6E72; } .chip--navy { background: var(--deep-navy); color: var(--white); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700; letter-spacing: .02em; background: var(--sun-yellow); color: var(--deep-navy); box-shadow: var(--shadow-sm); } :lang(ar) .badge { font-size: .8125rem; letter-spacing: 0; } .badge--offer { background: var(--sunset-orange); } .badge--vip { background: var(--deep-navy); color: var(--sun-yellow); } .badge--new { background: var(--lagoon); } /* ---------- 8. Announcement bar (optional, off by default) ---------- */ .announce { background: var(--deep-navy); color: rgb(255 255 255 / .9); font-size: var(--step--1); text-align: center; font-weight: 600; padding: 8px var(--gutter); } /* ---------- 9. Header ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgb(255 255 255 / .97); backdrop-filter: saturate(1.4) blur(14px); border-block-end: 1px solid rgb(14 42 71 / .07); transition: box-shadow .3s var(--ease); } .admin-bar .site-header { inset-block-start: 32px; } @media (max-width: 782px) { .admin-bar .site-header { inset-block-start: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { inset-block-start: 0; } } .site-header.is-scrolled { box-shadow: 0 6px 24px rgb(14 42 71 / .08); } .site-header__inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; color: var(--deep-navy); } .brand picture { display: block; } .brand__icon { width: 46px; height: 46px; object-fit: contain; } .brand__text { display: grid; line-height: 1.15; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; } .brand__tag { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; } :lang(ar) .brand__name { font-size: 1.15rem; letter-spacing: 0; } .nav { flex: 1; display: flex; justify-content: center; } .nav__list { list-style: none; display: flex; align-items: center; gap: 2px; } .nav__link { position: relative; display: block; padding: 10px 12px; font-weight: 600; font-size: .95rem; color: var(--ink-2); text-decoration: none; border-radius: 10px; transition: color .2s, background-color .2s; } .nav__link::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 3px; height: 2px; border-radius: 2px; background: var(--sunset-orange); transform: scaleX(0); transition: transform .25s var(--ease); } .nav__link:hover { color: var(--deep-navy); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--deep-navy); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-weight: 700; font-size: .85rem; color: var(--deep-navy); text-decoration: none; transition: background-color .2s, border-color .2s; } .lang-link:hover { background: var(--sand); border-color: var(--sand-2); } .lang-link .icon { width: 17px; height: 17px; color: var(--sea-ink); } .header-wa { min-height: 40px; } .menu-toggle { display: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); color: var(--deep-navy); align-items: center; justify-content: center; transition: background-color .2s; } .menu-toggle:hover { background: var(--sand); } .menu-toggle__bars { display: grid; gap: 4px; width: 18px; } .menu-toggle__bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; } .menu-toggle__bars span:nth-child(2) { width: 70%; justify-self: end; } .lang-switch { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--sand); font-weight: 700; font-size: .85rem; } .lang-switch a, .lang-switch > span { min-width: 44px; text-align: center; padding: 6px 12px; border-radius: var(--radius-pill); text-decoration: none; color: var(--ink-2); line-height: 1.2; } .lang-switch [aria-current="true"] { background: var(--white); color: var(--deep-navy); box-shadow: var(--shadow-sm); } @media (max-width: 1200px) { .nav { display: none; } .menu-toggle { display: inline-flex; } .header-actions { margin-inline-start: auto; } } @media (max-width: 760px) { :root { --header-h: 64px; } .header-wa { display: none; } .brand__icon { width: 40px; height: 40px; } .brand__name { font-size: 1.05rem; } .brand__tag { font-size: .68rem; } .lang-link { height: 40px; padding: 0 10px; } } @media (max-width: 360px) { .brand__tag { display: none; } } /* Side drawer menu */ .drawer-backdrop { position: fixed; inset: 0; z-index: 99; background: rgb(9 24 42 / .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s var(--ease); } .drawer-backdrop.is-open { opacity: 1; } .drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 100; width: min(86vw, 400px); background: var(--white); display: flex; flex-direction: column; border-start-start-radius: 26px; border-end-start-radius: 26px; box-shadow: -24px 0 70px rgb(9 24 42 / .25); transform: translateX(105%); visibility: hidden; transition: transform .4s cubic-bezier(.22, .8, .2, 1), visibility 0s .4s; overflow: hidden; } [dir="rtl"] .drawer { transform: translateX(-105%); box-shadow: 24px 0 70px rgb(9 24 42 / .25); } .drawer.is-open { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.22, .8, .2, 1); } .admin-bar .drawer, .admin-bar .drawer-backdrop { inset-block-start: var(--wp-admin--admin-bar--height, 32px); } .drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; } .drawer__top .brand__icon { width: 42px; height: 42px; } .drawer__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sand); color: var(--deep-navy); display: grid; place-items: center; transition: background-color .2s, transform .2s var(--ease); } .drawer__close:hover { background: var(--sand-2); transform: rotate(90deg); } .drawer__close .icon { width: 20px; height: 20px; } .drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; } .drawer__nav { list-style: none; margin: 0; padding: 0; } .drawer__nav li { border-block-end: 1px solid #F1ECE5; } .drawer__nav li:last-child { border: 0; } .drawer__nav a { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 4px; text-decoration: none; color: var(--deep-navy); font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; transition: color .2s, padding .25s var(--ease); } .drawer__nav a:hover { color: var(--orange-ink); padding-inline-start: 10px; } .drawer__ico { width: 20px; height: 20px; color: #9AA3AF; flex: none; transition: color .2s; } .drawer__nav a:hover .drawer__ico { color: var(--orange-ink); } .drawer__nav a[aria-current="page"] { color: var(--orange-ink); } .drawer__nav a[aria-current="page"] .drawer__ico { color: var(--sunset-orange); } .drawer__nav a[aria-current="page"]::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--sunset-orange); box-shadow: 0 0 0 4px var(--orange-soft); } /* Items slide in one after another */ .drawer .drawer__nav li { opacity: 0; transform: translateX(14px); transition: opacity .35s var(--ease), transform .35s var(--ease); } [dir="rtl"] .drawer .drawer__nav li { transform: translateX(-14px); } .drawer.is-open .drawer__nav li { opacity: 1; transform: none; transition-delay: calc(.06s + var(--i) * .04s); } .drawer__promo { position: relative; display: flex; align-items: flex-end; gap: 12px; margin-block-start: 18px; min-height: 120px; padding: 16px; border-radius: 20px; overflow: hidden; isolation: isolate; color: var(--white); text-decoration: none; background: var(--sea-ink); } .drawer__promo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .drawer__promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(9 24 42 / .85), rgb(9 24 42 / .15)); } .drawer__promo:hover img { transform: scale(1.05); } .drawer__promo-text { flex: 1; display: grid; gap: 2px; } .drawer__promo-text strong { font-family: var(--font-display); font-size: 1.08rem; } .drawer__promo-text small { font-size: .8rem; opacity: .88; } .drawer__promo-go { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sunset-orange); color: var(--deep-navy); } .drawer__promo-go .icon { width: 18px; height: 18px; } .drawer__foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-block-start: 1px solid #F1ECE5; display: grid; gap: 10px; background: var(--white); } .drawer__call { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: var(--deep-navy); font-weight: 700; } .drawer__call:hover { background: var(--sand); } .drawer__call > .icon { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink); } .drawer__call small { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); } .drawer__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 4px; } .drawer__socials { display: flex; gap: 6px; } .drawer__socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--deep-navy); background: var(--sand); } .drawer__socials a:hover { background: var(--sunset-orange); } .drawer__socials .icon { width: 17px; height: 17px; } body.no-scroll { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .drawer .drawer__nav li { opacity: 1; transform: none; } } /* Mobile bottom action bar: slides in after the hero */ .action-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: none; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .97); backdrop-filter: blur(12px); box-shadow: 0 -8px 30px rgb(14 42 71 / .12); transform: translateY(110%); transition: transform .35s var(--ease); } .action-bar.is-visible, .no-js .action-bar { transform: none; } .action-bar .btn { min-height: 46px; padding: 8px 10px; font-size: .9rem; gap: 6px; } .action-bar .btn .icon { width: 1.1em; height: 1.1em; } /* Floating WhatsApp (desktop only) */ .wa-float { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 45; display: flex; flex-direction: column; align-items: end; gap: 12px; } .wa-float__btn { width: 60px; height: 60px; border-radius: 50%; background: var(--wa-green); color: var(--white); display: grid; place-items: center; box-shadow: 0 10px 30px rgb(37 211 102 / .4); transition: transform .2s var(--ease); } .wa-float__btn:hover { transform: scale(1.06); } .wa-float__btn .icon { width: 30px; height: 30px; } .wa-bubble { position: relative; max-width: 270px; background: var(--white); color: var(--ink); border-radius: 18px 18px 6px 18px; padding: 14px 40px 14px 16px; padding-inline: 16px 40px; box-shadow: var(--shadow-lg); font-size: .88rem; line-height: 1.5; animation: pop .35s var(--ease); } [dir="rtl"] .wa-bubble { border-radius: 18px 18px 18px 6px; } .wa-bubble strong { display: block; color: var(--deep-navy); } .wa-bubble__close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } } @media (max-width: 760px) { .action-bar { display: grid; } .wa-float { display: none; } body { padding-block-end: 74px; } } /* ---------- 10. Home hero ---------- */ .hero { padding-block: 16px 0; } .hero__wrap { position: relative; } .hero__card { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(520px, 74vh, 680px); display: flex; align-items: flex-end; border-radius: 32px; background: var(--deep-navy); color: var(--white); } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; } .hero__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(9 24 42 / .9) 0%, rgb(9 24 42 / .55) 38%, rgb(9 24 42 / 0) 72%), linear-gradient(to var(--hero-dir, right), rgb(9 24 42 / .72) 0%, rgb(9 24 42 / .35) 45%, rgb(9 24 42 / 0) 70%); } [dir="rtl"] .hero__card { --hero-dir: left; } .hero__content { position: relative; padding: clamp(28px, 5vw, 64px); padding-block-end: calc(clamp(28px, 5vw, 56px) + 56px); max-width: 760px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .14); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .22); font-size: .85rem; font-weight: 700; } .hero__eyebrow .icon { color: var(--sun-yellow); width: 16px; height: 16px; } .hero h1 { color: var(--white); font-size: var(--step-5); line-height: 1.08; margin: 0 0 .35em; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .25); } :lang(ar) .hero h1 { line-height: 1.25; } .hero h1 em { font-style: normal; color: var(--sun-yellow); } .hero__sub { font-size: var(--step-1); max-width: 34em; color: rgb(255 255 255 / .92); margin: 0; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 26px 22px; } .hero__ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; font-size: .92rem; color: rgb(255 255 255 / .92); } .hero__ticks li { display: flex; align-items: center; gap: 8px; } .hero__ticks .icon { color: var(--sun-yellow); } /* Phone frame (safari band, safari hero) */ .phone { position: relative; width: clamp(220px, 22vw, 300px); aspect-ratio: 9 / 19; border-radius: 40px; padding: 9px; background: #0b1220; box-shadow: 0 30px 80px rgb(0 0 0 / .4), inset 0 0 0 2px rgb(255 255 255 / .08); } .phone::before { content: ""; position: absolute; inset-block-start: 18px; inset-inline-start: 50%; translate: -50% 0; width: 30%; height: 20px; border-radius: 20px; background: #0b1220; z-index: 2; } [dir="rtl"] .phone::before { translate: 50% 0; } .phone video, .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; background: var(--navy-2); } /* ---------- 11. Trip finder (sits on the hero's bottom edge) ---------- */ .finder { position: relative; z-index: 3; width: min(100% - 48px, 1060px); margin: -48px auto 0; background: var(--white); border-radius: 22px; box-shadow: 0 18px 50px rgb(14 42 71 / .16); padding: 10px; display: grid; grid-template-columns: 1.35fr 1fr 1fr auto; gap: 4px; align-items: stretch; } .finder__field { display: grid; align-content: center; gap: 2px; padding: 8px 16px; border-radius: 16px; position: relative; transition: background-color .2s; } .finder__field:hover, .finder__field:focus-within { background: var(--sand); } .finder__field + .finder__field::before { content: ""; position: absolute; inset-inline-start: -2px; inset-block: 16px; width: 1px; background: var(--line); } .finder label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } :lang(ar) .finder label { text-transform: none; letter-spacing: 0; font-size: .8rem; } .finder__control { display: flex; align-items: center; gap: 8px; } .finder__control .icon { color: var(--orange-ink); width: 18px; height: 18px; flex: none; } .finder select, .finder input { border: 0; background: transparent; padding: 0; font-weight: 700; color: var(--deep-navy); min-height: 30px; width: 100%; appearance: none; -webkit-appearance: none; font-size: .98rem; } .finder select:focus, .finder input:focus { outline: none; } .finder__go { min-height: 62px; padding-inline: 30px; border-radius: 16px; } @media (max-width: 860px) { .finder { width: calc(100% - 24px); margin-block-start: -36px; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: 20px; } .finder__field { background: var(--sand); padding: 8px 12px; } .finder__field:first-child, .finder__go { grid-column: 1 / -1; } .finder__field + .finder__field::before { display: none; } .finder__go { min-height: 52px; } } @media (max-width: 700px) { .hero { padding-block-start: 10px; } .hero__card { min-height: min(78svh, 640px); border-radius: 24px; } .hero__card::after { background: linear-gradient(to top, rgb(9 24 42 / .94) 0%, rgb(9 24 42 / .62) 45%, rgb(9 24 42 / .1) 80%); } .hero__content { padding: 22px 20px 64px; } .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .hero__sub { font-size: 1rem; } .hero__ctas { margin-block: 20px 16px; } .hero__ctas .btn { flex: 1 1 100%; min-height: 52px; } .hero__ticks { font-size: .82rem; gap: 6px 14px; } } /* ---------- 12. Trust strip ---------- */ .trust { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .trust__item { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--deep-navy); line-height: 1.3; } .trust__item small { display: block; font-weight: 500; color: var(--muted); font-size: .8125rem; } .trust__ico { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--sand); color: var(--orange-ink); } .trust__ico .icon { width: 24px; height: 24px; } @media (max-width: 1000px) { .trust { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } /* ---------- 13. Category cards ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 270px; gap: clamp(12px, 1.6vw, 20px); } .cat-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); color: var(--white); text-decoration: none; isolation: isolate; display: flex; align-items: end; padding: 22px; } .cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); } .cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 42 71 / .85), rgb(14 42 71 / .1) 60%); } .cat-card:hover img { transform: scale(1.06); } .cat-card h3, .cat-card__title { display: block; color: var(--white); font-family: var(--font-display); font-weight: 700; line-height: 1.2; font-size: var(--step-2); margin: 0; } .cat-card__count { font-size: .875rem; font-weight: 600; opacity: .9; } .cat-card__arrow { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .2); backdrop-filter: blur(6px); transition: background-color .3s, color .3s; } .cat-card:hover .cat-card__arrow { background: var(--sunset-orange); color: var(--deep-navy); } @media (max-width: 1000px) { .cat-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; } } @media (max-width: 520px) { .cat-grid { grid-auto-rows: 170px; } .cat-card { padding: 16px; } .cat-card h3, .cat-card__title { font-size: var(--step-1); } } /* ---------- 14. Trip card ---------- */ .trip-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); height: 100%; } .trip-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .trip-card:focus-within { outline: 3px solid var(--sea-blue); outline-offset: 3px; } .trip-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sea-soft); } .trip-card--wide .trip-card__media { aspect-ratio: 4 / 3; } .trip-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .trip-card:hover .trip-card__media img { transform: scale(1.06); } .trip-card__badges { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; display: flex; gap: 6px; flex-wrap: wrap; } .trip-card__media .chip { position: absolute; inset-block-end: 14px; inset-inline-start: 14px; background: rgb(255 255 255 / .94); } .trip-card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; } .trip-card__title { font-size: var(--step-1); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .trip-card__title a { text-decoration: none; } .trip-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */ .trip-card__title a:focus-visible { outline: none; } .trip-card__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--ink-2); } .trip-card__facts li { display: flex; align-items: center; gap: 6px; } .trip-card__facts .icon { color: var(--sea-ink); width: 1.1em; height: 1.1em; } .trip-card__foot { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block-start: 14px; border-block-start: 1px dashed var(--line); } .price { line-height: 1.2; } .price small { display: block; font-size: .75rem; color: var(--muted); font-weight: 500; } .price strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--deep-navy); } .price del { color: var(--muted); font-size: .875rem; margin-inline-start: 6px; } .price--ask strong { font-size: var(--step-0); color: var(--orange-ink); } .trip-card__actions { display: flex; gap: 6px; position: relative; z-index: 2; } /* ---------- 15. Carousel (scroll-snap, RTL aware) ---------- */ .carousel { position: relative; } .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 24px; margin-block: -8px -24px; padding-inline: 2px; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; } .carousel__nav { display: flex; gap: 10px; } .carousel__btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); color: var(--deep-navy); display: grid; place-items: center; transition: background-color .2s, border-color .2s, opacity .2s; } .carousel__btn:hover:not(:disabled) { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); } .carousel__btn:disabled { opacity: .35; cursor: default; } .section--navy .carousel__btn { background: transparent; color: var(--white); border-color: rgb(255 255 255 / .3); } @media (max-width: 1100px) { .carousel__track { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; } } @media (max-width: 800px) { .carousel__track { grid-auto-columns: 72%; gap: 16px; } } @media (max-width: 480px) { .carousel__track { grid-auto-columns: 84%; } } /* ---------- 16. Why us ---------- */ .why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 120px; gap: 16px; } .collage > picture:nth-of-type(1) img { grid-row: 1 / 3; } .collage > picture:nth-of-type(2) img { grid-row: 1 / 2; } .collage > picture:nth-of-type(3) img { grid-row: 2 / 4; } .collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); } .collage__stamp { position: absolute; inset-block-end: 6px; inset-inline-start: 6%; width: 130px; height: 130px; border-radius: 50%; background: var(--sunset-orange); color: var(--deep-navy); display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-weight: 700; line-height: 1.15; font-size: 1rem; box-shadow: var(--shadow-lg); border: 6px solid var(--white); padding: 12px; } .benefits { list-style: none; display: grid; gap: 22px; margin-block: 28px 32px; } .benefit { display: flex; gap: 16px; } .benefit__ico { width: 54px; height: 54px; flex: none; border-radius: 18px; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea-ink); } .benefit:nth-child(2n) .benefit__ico { background: var(--orange-soft); color: var(--orange-ink); } .benefit__ico .icon { width: 26px; height: 26px; } .benefit h3 { font-size: var(--step-1); margin-block-end: 4px; } .benefit p { margin: 0; color: var(--ink-2); } @media (max-width: 900px) { .why { grid-template-columns: 1fr; } .collage { grid-template-rows: 150px 150px 90px; } } /* ---------- 17. Safari band ---------- */ .safari-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #3A1A0B 0%, #7A3311 45%, #C2571D 100%); color: var(--white); } .safari-band__bg { position: absolute; inset: 0; z-index: -1; opacity: .35; } .safari-band__bg img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; } .safari-band__inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 96px); align-items: center; } .safari-band h2 { color: var(--white); font-size: var(--step-4); } .safari-band .eyebrow { color: var(--sun-yellow); } .safari-band p { color: rgb(255 255 255 / .88); font-size: var(--step-1); } .spotlight { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-block: 24px 32px; } .spotlight li { display: flex; gap: 10px; align-items: center; font-weight: 600; } .spotlight .icon { color: var(--sun-yellow); } .safari-band .phone { transform: rotate(3deg); } [dir="rtl"] .safari-band .phone { transform: rotate(-3deg); } @media (max-width: 860px) { .safari-band__inner { grid-template-columns: 1fr; } .safari-band .phone { margin-inline: auto; width: 230px; } .spotlight { grid-template-columns: 1fr; } } /* ---------- 18. Reels ---------- */ .reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 6px 12px; } .reels::-webkit-scrollbar { display: none; } .reel { position: relative; scroll-snap-align: start; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: var(--navy-2); border: 0; padding: 0; color: var(--white); box-shadow: var(--shadow); text-align: start; } .reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 42 71 / .8), transparent 45%); } .reel__label { position: absolute; inset-inline: 16px; inset-block-end: 16px; z-index: 1; font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 10px; } .reel__play { width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .25); backdrop-filter: blur(6px); display: grid; place-items: center; flex: none; } .reel__play .icon { width: 18px; height: 18px; } @media (max-width: 800px) { .reels { grid-auto-columns: 46%; } } /* ---------- 19. Offer & apartment cards ---------- */ .offer-card { display: grid; grid-template-rows: auto 1fr; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .offer-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--lagoon-soft); } .offer-card__media img { width: 100%; height: 100%; object-fit: cover; } .offer-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .offer-card__body h3 { font-size: var(--step-1); margin: 0; } .offer-card__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .875rem; color: var(--ink-2); } .offer-card__meta span { display: inline-flex; gap: 6px; align-items: center; } .stars { color: #E0A800; letter-spacing: 1px; } .placeholder { display: grid; place-items: center; text-align: center; padding: 20px; width: 100%; height: 100%; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #0E4F63 0%, #1F8EC5 62%, #2EC4C9 100%); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; } .placeholder::before { content: ""; position: absolute; z-index: -1; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .14); inset-block-start: -12%; inset-inline-end: -8%; } .placeholder .icon { width: 56px; height: 56px; stroke-width: 1.4; opacity: .95; } .placeholder::after { content: ""; position: absolute; z-index: -1; inset-inline: -10%; inset-block-end: -30%; height: 60%; border-radius: 50%; background: rgb(255 255 255 / .12); } .apt-teaser { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .apt-mosaic { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(320px, 38vw, 480px); } .apt-mosaic > picture:first-child img { grid-row: span 2; } .apt-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); } .amenities { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-block: 24px 28px; } .amenities li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--deep-navy); } .amenities .icon { color: var(--sea-ink); } @media (max-width: 860px) { .apt-teaser { grid-template-columns: 1fr; } } /* ---------- 20. Social strip ---------- */ .social-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .social-strip a { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; } .social-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .social-strip a:hover img { transform: scale(1.08); } .social-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-block-start: 28px; } @media (max-width: 760px) { .social-strip { grid-template-columns: repeat(3, 1fr); } } /* ---------- 21. CTA band ---------- */ .cta-band { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); background: var(--sunset-orange); color: var(--deep-navy); padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; } .cta-band::before { content: ""; position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; border-radius: 50%; background: rgb(254 225 97 / .55); inset-block-start: -260px; inset-inline-end: -120px; } .cta-band h2 { font-size: var(--step-4); margin-block-end: .3em; } .cta-band p { font-size: var(--step-1); margin: 0; } .cta-band__actions { display: grid; gap: 12px; } .phone-link { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--radius); background: rgb(255 255 255 / .55); text-decoration: none; font-weight: 700; font-size: var(--step-1); } .phone-link small { display: block; font-size: .8rem; font-weight: 500; } @media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } } /* ---------- 22. Footer ---------- */ .site-footer { background: var(--deep-navy); color: rgb(255 255 255 / .82); padding-block: 88px 28px; position: relative; margin-block-start: 40px; } .site-footer .wave { color: var(--deep-navy); inset-block-start: auto; inset-block-end: calc(100% - 1px); transform: scaleY(-1); } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { color: var(--white); text-decoration: underline; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; } .site-footer h2 { font-size: 1rem; color: var(--white); font-family: var(--font-body); font-weight: 700; margin-block-end: 16px; letter-spacing: .04em; } .footer-links { list-style: none; display: grid; gap: 10px; font-size: .95rem; } .footer-contact li { display: flex; gap: 10px; align-items: start; } .footer-contact .icon { color: var(--sunset-orange); margin-block-start: 3px; } .footer-brand img { height: 92px; width: auto; margin-block-end: 16px; } .socials { display: flex; gap: 10px; margin-block-start: 20px; } .socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .08); } .socials a:hover { background: var(--sunset-orange); color: var(--deep-navy); text-decoration: none; } .footer-bottom { margin-block-start: 56px; padding-block-start: 24px; border-block-start: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: .875rem; } .footer-bottom ul { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- 23. Page hero (inner pages) + breadcrumb ---------- */ .breadcrumb { font-size: .875rem; color: var(--muted); margin-block-end: 16px; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .breadcrumb li + li::before { content: "›"; margin-inline-end: 6px; color: var(--muted); } [dir="rtl"] .breadcrumb li + li::before { content: "‹"; } .breadcrumb a { text-decoration: none; color: var(--ink-2); } .breadcrumb a:hover { color: var(--orange-ink); } /* ---------- 24. Single trip ---------- */ .trip-top { padding-block: 28px 0; } .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 12px; border-radius: var(--radius-lg); overflow: hidden; } .gallery__item { position: relative; border: 0; padding: 0; background: var(--sea-soft); overflow: hidden; } .gallery__item:first-child { grid-row: span 2; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .gallery__item:hover img { transform: scale(1.04); } .gallery__more { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; display: inline-flex; gap: 8px; align-items: center; background: var(--white); color: var(--deep-navy); padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: .875rem; box-shadow: var(--shadow); } @media (max-width: 760px) { .gallery { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius); scrollbar-width: none; } .gallery__item, .gallery__item:first-child { grid-row: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: var(--radius); } } .trip-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: end; margin-block: 28px 20px; } .trip-head h1 { font-size: var(--step-4); margin: 8px 0 8px; } .trip-head .lead { margin: 0; max-width: 46em; } .trip-head__badges { display: flex; gap: 8px; flex-wrap: wrap; } .facts { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sand); border-radius: var(--radius-lg); padding: 8px; } .fact { display: flex; gap: 12px; align-items: center; padding: 14px 16px; } .fact + .fact { border-inline-start: 1px solid var(--sand-2); } .fact__ico { width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--white); color: var(--orange-ink); display: grid; place-items: center; } .fact small { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; } .fact strong { font-size: .95rem; color: var(--deep-navy); line-height: 1.35; display: block; } @media (max-width: 1000px) { .facts { grid-template-columns: 1fr 1fr; } .fact + .fact { border: 0; } } @media (max-width: 480px) { .facts { grid-template-columns: 1fr; } } .trip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: 40px var(--section-y); } .trip-main > section { padding-block: 32px; border-block-end: 1px solid var(--line); } .trip-main > section:first-child { padding-block-start: 0; } .trip-main > section:last-child { border: 0; } .trip-main h2 { font-size: var(--step-3); } .tabs-nav { position: sticky; inset-block-start: 64px; z-index: 10; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: rgb(255 255 255 / .96); backdrop-filter: blur(8px); padding-block: 10px; margin-block-end: 24px; border-block-end: 1px solid var(--line); } .tabs-nav a { flex: none; padding: 8px 16px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--ink-2); } .tabs-nav a:hover { background: var(--sand); } .tabs-nav a.is-active { background: var(--deep-navy); color: var(--white); } .icon-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .icon-list li { display: flex; gap: 12px; align-items: start; } .icon-list__ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea-ink); } .icon-list li > span:last-child { padding-block-start: 8px; line-height: 1.45; } .icon-list--x .icon-list__ico { background: #F6E8E4; color: #A33A1C; } @media (max-width: 600px) { .icon-list { grid-template-columns: 1fr; } } .timeline { list-style: none; position: relative; padding-inline-start: 34px; } .timeline::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 11px; width: 2px; background: repeating-linear-gradient(to bottom, var(--lagoon) 0 6px, transparent 6px 12px); } .timeline li { position: relative; padding-block-end: 22px; } .timeline li::before { content: ""; position: absolute; inset-inline-start: -34px; inset-block-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 5px solid var(--lagoon); box-sizing: border-box; } .timeline li:first-child::before, .timeline li:last-child::before { border-color: var(--sunset-orange); } .timeline time { font-weight: 700; color: var(--orange-ink); font-size: .875rem; display: block; } .timeline strong { color: var(--deep-navy); } .note { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: #FFF8DB; border: 1px solid #F4E2A0; color: #5A4300; } .note .icon { color: #A87F00; margin-block-start: 2px; } .note + .note { margin-block-start: 12px; } /* Accordion (native details) */ .accordion { display: grid; gap: 10px; } .accordion details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: box-shadow .2s; } .accordion details[open] { box-shadow: var(--shadow-sm); } .accordion summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; color: var(--deep-navy); display: flex; justify-content: space-between; gap: 12px; align-items: center; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary .icon { transition: transform .25s var(--ease); color: var(--orange-ink); } .accordion details[open] summary .icon { transform: rotate(45deg); } .accordion details > div { padding: 0 20px 18px; color: var(--ink-2); } /* Booking card */ .booking { position: sticky; inset-block-start: calc(64px + 16px); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 24px; } .booking__price { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding-block-end: 18px; margin-block-end: 18px; border-block-end: 1px dashed var(--line); } .booking__price .price strong { font-size: var(--step-3); } .booking__note { font-size: .8rem; color: var(--muted); } .field { display: grid; gap: 6px; margin-block-end: 14px; } .field label, .field .label { font-weight: 700; font-size: .875rem; color: var(--deep-navy); } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); transition: border-color .2s, box-shadow .2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sea-blue); box-shadow: 0 0 0 4px rgb(31 142 197 / .15); } .field input[type="date"] { direction: ltr; text-align: start; } [dir="rtl"] .field input[type="date"] { text-align: end; } .field__error { color: #B42318; font-size: .8125rem; font-weight: 600; } .field[aria-invalid="true"] input { border-color: #B42318; } .stepper-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; } .stepper-row + .stepper-row { border-block-start: 1px solid var(--line); } .stepper-row small { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; } .stepper-row .label { font-weight: 700; color: var(--deep-navy); } .stepper { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 4px; } .stepper button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sand); color: var(--deep-navy); display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; } .stepper button:hover:not(:disabled) { background: var(--sunset-orange); } .stepper button:disabled { opacity: .4; cursor: default; } .stepper output { min-width: 28px; text-align: center; font-weight: 700; } .booking__total { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; margin-block: 12px 18px; border-radius: var(--radius-sm); background: var(--sand); font-weight: 700; color: var(--deep-navy); } .booking__total strong { font-family: var(--font-display); font-size: var(--step-2); } .booking__fee { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px 0; font-size: .9rem; font-weight: 600; color: var(--ink-2); } .booking__fee small { font-weight: 500; color: var(--muted); } .booking__fee strong { color: var(--deep-navy); white-space: nowrap; } .booking__actions { display: grid; gap: 10px; } .pickup-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .pickup-link:hover { text-decoration-style: solid; } .fact .fact__more { margin-block-start: 2px; font-weight: 500; } .price-options { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 12px 16px; background: var(--sand); border-radius: var(--radius-sm); } .fees-table { width: 100%; max-width: 480px; border-collapse: collapse; margin-block: 8px 0; font-size: .95rem; } .fees-table th, .fees-table td { padding: 8px 12px; border-block-end: 1px solid rgb(9 24 42 / .1); text-align: start; } .fees-table th { font-size: .8rem; color: var(--muted); font-weight: 700; } .fees-table small { color: var(--muted); } #transfer-fees { scroll-margin-top: 90px; } .announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .booking__assure { list-style: none; display: grid; gap: 8px; margin-block-start: 18px; font-size: .85rem; color: var(--ink-2); } .booking__assure li { display: flex; gap: 8px; align-items: center; } .booking__assure .icon { color: #12924A; } .booking-sheet-toggle { display: none; } @media (max-width: 1000px) { .trip-layout { grid-template-columns: 1fr; } .booking { position: static; } /* Mobile: compact sticky bar opens the booking card as a bottom sheet */ .booking-sheet-toggle { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 41; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -6px 24px rgb(14 42 71 / .14); } .is-trip .action-bar { display: none; } .booking-wrap { position: fixed; inset: 0; z-index: 90; background: rgb(14 42 71 / .5); display: flex; align-items: end; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .booking-wrap.is-open { opacity: 1; visibility: visible; transition: opacity .3s; } .booking-wrap .booking { width: 100%; max-height: 92svh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); transition: transform .35s var(--ease); padding-block-end: calc(24px + env(safe-area-inset-bottom)); } .booking-wrap.is-open .booking { transform: none; } .booking__grab { display: block; width: 44px; height: 5px; border-radius: 4px; background: var(--line); margin: -8px auto 14px; } } @media (min-width: 1001px) { .booking__grab, .booking__close { display: none; } } .booking__close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; border: 0; background: var(--sand); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; } /* Success state */ .success { text-align: center; padding: 12px 0; } .success__ico { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: #DDF7E7; color: #12924A; } .success__ico .icon { width: 36px; height: 36px; } /* ---------- 25. Safari landing ---------- */ .is-safari { --page-accent: var(--sunset-orange); } .safari-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: #3A1A0B; padding-block: calc(var(--section-y) * .9) calc(var(--section-y) * 1.2); } .safari-hero__bg { position: absolute; inset: 0; z-index: -2; } .safari-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } .safari-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--hero-dir, right), rgb(42 16 4 / .95) 0%, rgb(122 51 17 / .78) 50%, rgb(194 87 29 / .25) 100%); } [dir="rtl"] .safari-hero { --hero-dir: left; } .safari-hero__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; } .safari-hero h1 { color: var(--white); font-size: var(--step-5); } .safari-hero p { color: rgb(255 255 255 / .9); font-size: var(--step-1); max-width: 34em; } .safari-hero .breadcrumb, .safari-hero .breadcrumb a { color: rgb(255 255 255 / .8); } .safari-hero .eyebrow { color: var(--sun-yellow); } .safari-hero__stats { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 28px; } .safari-hero__stats div { padding: 12px 18px; border-radius: var(--radius); background: rgb(255 255 255 / .1); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .18); font-weight: 600; font-size: .9rem; } .safari-hero__stats strong { display: block; font-family: var(--font-display); font-size: var(--step-2); color: var(--sun-yellow); } @media (max-width: 860px) { .safari-hero__inner { grid-template-columns: 1fr; } .safari-hero .phone { display: none; } } .compare-wrap { position: relative; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); font-size: .95rem; } .compare th, .compare td { padding: 14px 12px; text-align: center; border-block-end: 1px solid var(--line); } .compare thead th { background: var(--sand); vertical-align: bottom; padding-block: 22px 18px; } .compare thead th:first-child { background: var(--white); } .compare tbody th { text-align: start; font-weight: 600; color: var(--deep-navy); white-space: nowrap; } .compare tbody th .icon { display: inline-block; vertical-align: -4px; margin-inline-end: 8px; color: var(--orange-ink); } .compare tbody tr:hover { background: #FFFBF6; } .compare tfoot td { padding-block: 18px; border: 0; } .compare__pkg { display: grid; gap: 6px; justify-items: center; } .compare__pkg strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--deep-navy); line-height: 1.2; } .compare__pkg small { color: var(--muted); font-weight: 600; font-size: .78rem; } .compare .is-featured { background: #FFF1E6; } .compare thead .is-featured { background: var(--sunset-orange); } .compare thead .is-featured strong, .compare thead .is-featured small { color: var(--deep-navy); } .yes { color: #12924A; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #DDF7E7; } .no { color: #6B7280; font-weight: 700; } .yes .icon { width: 18px; height: 18px; } .compare__detail { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; margin-block-start: 2px; } .pkg-cards { display: none; } @media (max-width: 980px) { .compare-wrap .compare { display: none; } .pkg-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px 16px; } .pkg-cards::-webkit-scrollbar { display: none; } } .pkg-card { scroll-snap-align: start; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; gap: 12px; } .pkg-card.is-featured { border: 2px solid var(--sunset-orange); } .pkg-card h3 { margin: 0; font-size: var(--step-2); } .pkg-card ul { list-style: none; display: grid; gap: 8px; font-size: .92rem; } .pkg-card li { display: flex; gap: 10px; align-items: center; } .pkg-card li.is-no { color: #6B7280; text-decoration: line-through; } .pkg-card li .icon { width: 18px; height: 18px; } .pkg-card li:not(.is-no) .icon { color: #12924A; } .pkg-card .btn { margin-block-start: auto; } .swipe-hint { display: none; font-size: .85rem; color: var(--muted); align-items: center; gap: 6px; margin-block-end: 12px; } @media (max-width: 980px) { .swipe-hint { display: flex; } } .stars-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .stars-feature__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; } .stars-feature__media img { width: 100%; height: 100%; object-fit: cover; } .night { background: radial-gradient(ellipse at top, #1C3B66 0%, var(--deep-navy) 60%); color: var(--white); position: relative; overflow: hidden; } .night::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 10% 85%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 45%, #fff 50%, transparent 51%); background-size: 380px 380px; opacity: .6; pointer-events: none; } .night h2, .night h3 { color: var(--white); } .night .timeline strong { color: var(--white); } .night .timeline time { color: var(--sun-yellow); } .night .timeline li::before { background: var(--deep-navy); } @media (max-width: 860px) { .stars-feature { grid-template-columns: 1fr; } .stars-feature__media { aspect-ratio: 4 / 3; } } /* ---------- 26. Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgb(6 16 28 / .94); display: grid; place-items: center; padding: 56px 16px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; } .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .25s; } .lightbox__stage { max-width: min(1100px, 100%); max-height: 100%; display: grid; place-items: center; } .lightbox__stage img { max-height: calc(100svh - 140px); width: auto; border-radius: var(--radius); } .lightbox__stage video { max-height: calc(100svh - 120px); width: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); background: #000; } .lightbox__btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .12); color: var(--white); display: grid; place-items: center; } .lightbox__btn:hover { background: rgb(255 255 255 / .25); } .lightbox__close { inset-block-start: 16px; inset-inline-end: 16px; } .lightbox__prev { inset-inline-start: 16px; inset-block-start: 50%; translate: 0 -50%; } .lightbox__next { inset-inline-end: 16px; inset-block-start: 50%; translate: 0 -50%; } .lightbox__count { position: absolute; inset-block-end: 18px; inset-inline-start: 50%; translate: -50% 0; color: rgb(255 255 255 / .8); font-size: .9rem; } /* ---------- 27. Cookie consent ---------- */ .consent { position: fixed; inset-inline-start: 16px; inset-block-end: 16px; z-index: 60; max-width: 400px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px 20px; font-size: .875rem; border: 1px solid var(--line); } .consent p { margin-block-end: 12px; color: var(--ink-2); } .consent__actions { display: flex; gap: 8px; } @media (max-width: 760px) { .consent { inset-inline: 12px; inset-block-end: 88px; max-width: none; } } /* ---------- 28. Motion ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== 29. WordPress theme additions (inner pages, forms, utilities) ========================================================================== */ .container--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; } .section--flush-top { padding-block-start: 0; } .center-cta { text-align: center; margin-block-start: 40px; } .h-xl { font-size: var(--step-4); } .h-sub { margin-block: 28px 14px; font-size: var(--step-1); } .muted { color: var(--ink-2); } .muted-light { color: rgb(255 255 255 / .75); } .small-note { text-align: center; margin-block-start: 28px; color: var(--ink-2); font-size: .9rem; display: flex; gap: 8px; justify-content: center; align-items: center; } .lead--light { color: rgb(255 255 255 / .85); } .eyebrow--sun { color: var(--sun-yellow); } .hero__ctas--flush { margin: 0; } .hero__ctas--center { justify-content: center; } .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; } .offer-card { position: relative; } .offer-card h3 a { text-decoration: none; } .offer-card .btn { position: relative; z-index: 2; } .offer-card__type { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; } .offer-card__sum { margin: 0; color: var(--ink-2); font-size: .92rem; } .offer-card__valid { margin: 0; font-size: .8rem; color: var(--orange-ink); font-weight: 600; } .offer-meta-lg { font-size: 1rem; margin-block-end: 18px; } .price__unit { font-size: .78rem; color: var(--muted); font-weight: 500; } .price__alt { display: block; font-size: .78rem; color: var(--muted); } .vip-note { display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: var(--sand); border-radius: var(--radius-sm); } /* Prose (page / trip content from the editor) */ .prose { font-size: var(--step-0); } .prose > * + * { margin-block-start: 1em; } .prose h2 { font-size: var(--step-3); margin-block-start: 1.6em; } .prose h3 { font-size: var(--step-2); margin-block-start: 1.4em; } .prose ul, .prose ol { padding-inline-start: 1.3em; } .prose li + li { margin-block-start: .4em; } .prose a { color: var(--sea-ink); } .prose img { border-radius: var(--radius); } .prose blockquote { margin: 0; padding: 12px 20px; border-inline-start: 4px solid var(--sunset-orange); background: var(--sand); border-radius: var(--radius-sm); } /* Inner page hero */ .page-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, var(--deep-navy), #17507A); color: var(--white); padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px); margin-block-end: clamp(24px, 4vw, 48px); } .page-hero--safari { background: linear-gradient(135deg, #3A1A0B, #C2571D); } .page-hero--hotel { background: linear-gradient(135deg, #0F5F6B, var(--lagoon)); } .page-hero--navy { background: var(--deep-navy); } .page-hero__bg { position: absolute; inset: 0; z-index: -2; } .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--hero-dir, right), rgb(14 42 71 / .9), rgb(14 42 71 / .45)); } [dir="rtl"] .page-hero { --hero-dir: left; } .page-hero h1 { color: var(--white); font-size: var(--step-5); margin: 0 0 .25em; max-width: 18ch; } .page-hero .lead { color: rgb(255 255 255 / .88); max-width: 40em; margin: 0; } .page-hero .breadcrumb, .page-hero .breadcrumb a, .page-hero .breadcrumb li + li::before { color: rgb(255 255 255 / .78); } .page-hero .wave { color: var(--white); } /* Category chips + filters */ .cat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px 16px; } .cat-chips::-webkit-scrollbar { display: none; } .chip-link { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 9px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--deep-navy); background: var(--white); transition: background-color .2s, border-color .2s; } .chip-link span { font-size: .75rem; color: var(--muted); } .chip-link:hover { border-color: var(--deep-navy); } .chip-link[aria-current="page"] { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); } .chip-link[aria-current="page"] span { color: rgb(255 255 255 / .7); } .filters { position: sticky; inset-block-start: 64px; z-index: 20; display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 14px 16px; margin-block-end: 18px; background: rgb(255 255 255 / .97); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .filters__field { display: grid; gap: 4px; min-width: 140px; border: 0; padding: 0; margin: 0; } .filters__field label, .filters__field legend { font-size: .75rem; font-weight: 700; color: var(--orange-ink); text-transform: uppercase; letter-spacing: .05em; padding: 0; } :lang(ar) .filters__field label, :lang(ar) .filters__field legend { text-transform: none; letter-spacing: 0; font-size: .82rem; } .filters select, .filters input[type="number"] { min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-weight: 600; color: var(--deep-navy); } .filters__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .filters__price legend { width: 100%; } .filters__price input { width: 92px; } .filters__check { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; min-height: 42px; } .filters__check input { width: 18px; height: 18px; accent-color: var(--sunset-orange); } .filters__sort { margin-inline-start: auto; } @media (max-width: 760px) { .filters { position: static; } .filters__field { flex: 1 1 calc(50% - 8px); min-width: 0; } .filters__sort { margin: 0; } } .results-count { color: var(--ink-2); margin-block-end: 16px; } .trip-grid[aria-busy="true"] { opacity: .45; transition: opacity .2s; pointer-events: none; } .empty-state { text-align: center; padding: clamp(32px, 6vw, 64px) 20px; background: var(--sand); border-radius: var(--radius-lg); margin-block: 12px 40px; } .empty-state__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--deep-navy); font-weight: 700; } .pagination { display: flex; justify-content: center; gap: 6px; margin-block: 36px; flex-wrap: wrap; } .pagination .page-numbers { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); text-decoration: none; font-weight: 700; color: var(--deep-navy); } .pagination .page-numbers.current { background: var(--deep-navy); color: var(--white); border-color: var(--deep-navy); } .pagination .page-numbers:hover:not(.current) { border-color: var(--deep-navy); } /* Forms */ .hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; margin-block-end: 14px; } .alert--error { background: #FDECEA; color: #8A1C12; border: 1px solid #F5C2BC; } .alert--warn { background: #FFF8DB; color: #5A4300; border: 1px solid #F4E2A0; } .field--mt { margin-block-start: 10px; } .stepper__input { width: 44px; text-align: center; border: 0; background: transparent; font-weight: 700; -moz-appearance: textfield; appearance: textfield; padding: 0; min-height: 36px; } .stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .no-js .stepper button { display: none; } .no-js .stepper__input { width: 72px; -moz-appearance: auto; appearance: auto; } .no-js .js-only { display: none !important; } .js .booking__request:not(.is-open) { display: none; } .booking__request { padding-block-start: 6px; } .booking .success h2 { font-size: var(--step-2); } .booking .success p { color: var(--ink-2); } .booking--simple { position: sticky; inset-block-start: calc(64px + 16px); } .btn[aria-busy="true"] { opacity: .7; pointer-events: none; } /* Facts variants */ .facts--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 600px) { .facts--3 { grid-template-columns: 1fr; } } .gallery--few { grid-template-columns: 1fr 1fr; grid-template-rows: 340px; } .gallery--few .gallery__item:first-child { grid-row: auto; } @media (max-width: 760px) { .gallery--few { grid-template-columns: none; grid-template-rows: none; } } /* Reviews */ .review-card { margin: 0; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); } .review-card blockquote { margin: 0; color: var(--ink); } .review-card figcaption { margin-block-start: auto; color: var(--ink-2); font-size: .9rem; } .review-card figcaption small { display: block; color: var(--muted); } /* Contact */ .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin-block-end: clamp(32px, 5vw, 56px); } .contact-card { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; } .contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .contact-card small { display: block; color: var(--muted); font-weight: 600; font-size: .8rem; } .contact-card strong { color: var(--deep-navy); font-size: 1.05rem; word-break: break-word; } .contact-card__ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--sand); color: var(--orange-ink); } .contact-card__ico .icon { width: 24px; height: 24px; } .contact-card--wa .contact-card__ico { background: #DDF7E7; color: #12924A; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .contact-grid h2 { font-size: var(--step-3); } .contact-list { list-style: none; display: grid; gap: 12px; margin-block-end: 20px; } .contact-list li { display: flex; gap: 10px; align-items: start; } .contact-list .icon { color: var(--orange-ink); margin-block-start: 3px; } .map { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-end: 24px; } .map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-lg); } .map__note { width: 100%; margin: 0; font-size: .8rem; color: var(--muted); order: 3; } .contact-form { position: static; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } /* Gallery page */ .masonry { columns: 4 240px; column-gap: 14px; } .masonry__item { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: var(--sea-soft); border-radius: var(--radius); overflow: hidden; break-inside: avoid; cursor: zoom-in; } .masonry__item[hidden] { display: none; } .masonry__item img { width: 100%; height: auto; transition: transform .5s var(--ease); } .masonry__item:hover img { transform: scale(1.04); } .reels--grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); overflow: visible; } /* About values */ .values { list-style: none; } .value-card { background: var(--white); border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--line); } .value-card h3 { font-size: var(--step-1); margin-block: 14px 6px; } .value-card p { margin: 0; color: var(--ink-2); } /* Fallback list */ .post-list { list-style: none; display: grid; gap: 20px; } .post-list a { text-decoration: none; font-size: var(--step-1); color: var(--deep-navy); } /* 404 */ .nf__inner { text-align: center; padding-block: calc(var(--header-h) + 24px) var(--section-y); max-width: 720px; } .nf__art { width: min(320px, 80%); margin: 0 auto 12px; } .nf h1 { font-size: var(--step-5); } .nf__boat { animation: rock 4s ease-in-out infinite; transform-origin: 148px 140px; } .nf__wave { animation: drift 6s ease-in-out infinite alternate; } .nf__wave--2 { animation-duration: 4.5s; } @keyframes rock { 50% { transform: rotate(-6deg) translateY(4px); } } @keyframes drift { to { transform: translateX(-14px); } } /* ========================================================================== 30. UI polish (v2): photo stack, mobile layouts ========================================================================== */ .photo-stack { position: relative; width: clamp(240px, 26vw, 340px); aspect-ratio: 4 / 5; justify-self: center; } .photo-stack__item { position: absolute; overflow: hidden; border-radius: 28px; box-shadow: 0 24px 60px rgb(0 0 0 / .35); } .photo-stack__item img { width: 100%; height: 100%; object-fit: cover; } .photo-stack__item--1 { inset: 0; transform: rotate(3deg); } .photo-stack__item--2 { width: 52%; aspect-ratio: 1; inset-block-end: -18px; inset-inline-start: -34px; border: 6px solid var(--white); border-radius: 22px; transform: rotate(-6deg); } [dir="rtl"] .photo-stack__item--1 { transform: rotate(-3deg); } [dir="rtl"] .photo-stack__item--2 { transform: rotate(6deg); } @media (max-width: 860px) { .photo-stack { width: min(78%, 300px); margin-block: 12px 24px; } .photo-stack__item--2 { inset-inline-start: -16px; } .safari-hero .photo-stack { display: none; } } @media (max-width: 800px) { .section-head__row .carousel__nav { display: none; } .section-head h2 { font-size: var(--step-3); } .h-xl { font-size: var(--step-3); } } @media (max-width: 700px) { /* Trust points: swipeable row instead of a long list */ .trust { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .trust::-webkit-scrollbar { display: none; } .trust__item { scroll-snap-align: start; background: var(--sand); border-radius: 18px; padding: 14px; font-size: .92rem; } .trust__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--white); } /* Categories: tidy 2-column grid */ .cat-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; } .cat-card, .cat-card:nth-child(n) { grid-column: auto; grid-row: auto; padding: 14px; border-radius: 20px; } .cat-card__arrow { width: 34px; height: 34px; inset-block-start: 10px; inset-inline-end: 10px; } .cat-card__arrow .icon { width: 16px; height: 16px; } .cat-card__title { font-size: 1rem; } .cat-card__count { font-size: .78rem; } /* Why us: simple 2-image collage */ .collage { grid-template-rows: 150px 150px; gap: 10px; } .collage > picture:nth-of-type(1) img { grid-row: 1 / 3; } .collage > picture:nth-of-type(3) img { grid-row: 2 / 3; } .collage img { border-radius: 20px; } .collage__stamp { display: none; } .benefits { gap: 16px; } .benefit__ico { width: 46px; height: 46px; border-radius: 14px; } .section { padding-block: 56px; } .section--tight { padding-block: 28px; } .cta-band { padding: 28px 22px; border-radius: 24px; } .cta-band h2 { font-size: var(--step-3); } .safari-band__inner { text-align: start; } .reels { grid-auto-columns: 44%; gap: 12px; } .reel { border-radius: 22px; } } @media (max-width: 700px) { /* Hotel offers on the home page: swipeable row */ #hotels .grid--4 { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block-end: 8px; } #hotels .grid--4::-webkit-scrollbar { display: none; } #hotels .offer-card { scroll-snap-align: start; } #hotels .section-head__row .btn { width: 100%; } } /* Archive filters: collapsible on phones */ .filters__panel { display: contents; } .filters__toggle { display: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--white); font-weight: 700; color: var(--deep-navy); } .filters__toggle .icon { color: var(--orange-ink); width: 18px; height: 18px; } .filters__toggle[aria-expanded="true"] { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); } .filters__toggle[aria-expanded="true"] .icon { color: var(--sun-yellow); } @media (max-width: 760px) { .js .filters { flex-direction: row; align-items: center; gap: 10px; padding: 10px; } .js .filters__toggle { display: inline-flex; flex: none; } .js .filters__sort { flex: 1; min-width: 0; margin: 0; } .js .filters__sort label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .js .filters__panel { display: none; order: 3; width: 100%; flex-wrap: wrap; gap: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--line); } .js .filters.is-open .filters__panel { display: flex; } .trip-grid .trip-card__media { aspect-ratio: 4 / 3; } } /* Safari packages on phones: keep the swipe row inside the screen (RTL overflow fix) */ @media (max-width: 980px) { .compare-wrap { min-width: 0; max-width: 100%; overflow: hidden; } .pkg-cards { width: 100%; min-width: 0; grid-auto-columns: 84%; padding-inline: 2px; } .pkg-card { min-width: 0; } } .pkg-card h3 a, .compare__pkg { text-decoration: none; color: inherit; } @media (max-width: 700px) { .safari-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .safari-hero__stats div { padding: 10px; font-size: .78rem; text-align: center; } .safari-hero__stats strong { font-size: 1.1rem; } .safari-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .safari-hero .hero__ctas .btn { flex: 1 1 100%; } } a.chip { text-decoration: none; } a.chip:hover { filter: brightness(.96); } @media (min-width: 1001px) { .booking__close, .booking__grab { display: none !important; } } /* ========================================================================== 31. UI v3: hero video + text hierarchy, compact footer on phones ========================================================================== */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; background: var(--deep-navy); } .hero__card::after { background: linear-gradient(to top, rgb(7 20 36 / .92) 0%, rgb(7 20 36 / .6) 40%, rgb(7 20 36 / .15) 70%, rgb(7 20 36 / .25) 100%), linear-gradient(to var(--hero-dir, right), rgb(7 20 36 / .6) 0%, rgb(7 20 36 / 0) 65%); } .hero__eyebrow { font-size: .8rem; padding: 6px 12px; margin-block-end: 16px; letter-spacing: .01em; } .hero h1 { letter-spacing: -.015em; max-width: 15ch; } :lang(ar) .hero h1 { letter-spacing: 0; max-width: 13ch; } .hero__sub { font-weight: 400; line-height: 1.7; color: rgb(255 255 255 / .86); max-width: 32em; } .hero__ticks { gap: 8px; } .hero__ticks li { padding: 6px 12px 6px 10px; padding-inline: 10px 12px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(8px); font-size: .82rem; } .hero__ticks .icon { width: 15px; height: 15px; } @media (max-width: 700px) { .hero__card { min-height: min(82svh, 680px); } .hero__content { padding: 20px 18px 60px; } .hero h1 { font-size: clamp(2rem, 8.6vw, 2.45rem); margin-block-end: .4em; } :lang(ar) .hero h1 { line-height: 1.32; } .hero__sub { font-size: .98rem; line-height: 1.75; } .hero__ctas { gap: 10px; margin-block: 18px 14px; } .hero__ctas .btn { min-height: 50px; font-size: 1rem; } .hero__ticks { gap: 6px; } .hero__ticks li { font-size: .74rem; padding: 5px 9px; } } /* Footer v3 */ .footer-brand .brand { margin-block-end: 14px; } .footer-brand .brand__icon { width: 46px; height: 46px; margin: 0; } .brand--light .brand__name { color: var(--white); } .brand--light .brand__tag { color: rgb(255 255 255 / .6); } .footer-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px 4px; } .footer-quick .btn { min-height: 40px; } .footer-col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .footer-col summary::-webkit-details-marker { display: none; } .footer-col summary .icon { display: none; } .footer-col summary h2 { margin-block-end: 16px; } @media (min-width: 761px) { .footer-col summary { pointer-events: none; } } @media (max-width: 760px) { .site-footer { padding-block: 56px 18px; margin-block-start: 24px; } .footer-grid { grid-template-columns: 1fr; gap: 0; } .footer-brand { padding-block-end: 18px; border-block-end: 1px solid rgb(255 255 255 / .1); } .footer-brand p { font-size: .9rem; margin: 0; } .footer-brand .socials { margin-block-start: 14px; } .footer-col { border-block-end: 1px solid rgb(255 255 255 / .1); } .footer-col summary { padding-block: 16px; cursor: pointer; } .footer-col summary h2 { margin: 0; font-size: .95rem; } .footer-col summary .icon { display: block; width: 18px; height: 18px; color: var(--sunset-orange); transition: transform .25s var(--ease); } .footer-col[open] summary .icon { transform: rotate(45deg); } .footer-col .footer-links { padding-block-end: 16px; gap: 12px; } .footer-bottom { margin-block-start: 18px; padding-block-start: 16px; flex-direction: column; align-items: flex-start; gap: 12px; font-size: .8rem; border: 0; } .footer-bottom p { margin: 0; } .footer-bottom ul { gap: 8px 16px; align-items: center; } } .site-footer .lang-switch a { color: var(--ink-2); } .site-footer .lang-switch a:hover { color: var(--deep-navy); text-decoration: none; } .faq-group + .faq-group { margin-block-start: 36px; } .faq-group h2 { font-size: var(--step-2); margin-block-end: 14px; } /* ========================================================================== 32. UI v4: button palette, header, hero CTAs, trip finder ========================================================================== */ /* Buttons: richer fills, white text, soft coloured shadows */ .btn { font-weight: 700; letter-spacing: -.005em; box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset; } :lang(ar) .btn { letter-spacing: 0; } .btn--primary, .btn:not([class*="btn--"]) { --btn-fg: var(--white); background: linear-gradient(180deg, #F4874A 0%, #DC5F22 100%); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 6px 16px -6px rgb(220 95 34 / .55); } .btn--primary:hover { background: linear-gradient(180deg, #F79158 0%, #E0682C 100%); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 10px 22px -8px rgb(220 95 34 / .6); } .btn--wa { --btn-fg: var(--white); background: linear-gradient(180deg, #2BCB66 0%, #149A4A 100%); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 6px 16px -6px rgb(20 154 74 / .55); } .btn--wa:hover { background: linear-gradient(180deg, #33D46F 0%, #18A452 100%); } .btn--secondary { background: linear-gradient(180deg, #1B416A 0%, var(--deep-navy) 100%); box-shadow: 0 6px 16px -8px rgb(14 42 71 / .6); } .btn--ghost { border-width: 1.5px; border-color: rgb(14 42 71 / .18); box-shadow: none; } .btn--ghost:hover { border-color: var(--deep-navy); background: var(--white); } .btn--light { --btn-bg: var(--white); --btn-fg: var(--deep-navy); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .45); } .btn--light .icon { color: var(--orange-ink); } .btn--light:hover { --btn-bg: #FFF8F1; } .btn--ghost-light { box-shadow: none; } /* Header: lighter bar, compact controls */ .site-header { background: rgb(255 255 255 / .92); border-block-end-color: rgb(14 42 71 / .06); } .lang-link { height: 38px; padding: 0 12px; border: 0; background: var(--sand); color: var(--deep-navy); font-size: .82rem; } .lang-link:hover { background: var(--sand-2); } .header-wa-ico { display: none; } .menu-toggle { border: 0; background: var(--deep-navy); color: var(--white); border-radius: 12px; box-shadow: 0 6px 14px -6px rgb(14 42 71 / .55); } .menu-toggle:hover { background: var(--navy-2); } .menu-toggle__bars { width: 18px; gap: 4px; } @media (max-width: 760px) { :root { --header-h: 60px; } .site-header__inner { gap: 10px; } .brand { gap: 8px; } .brand__icon { width: 38px; height: 38px; } .brand__name { font-size: 1.02rem; } :lang(ar) .brand__name { font-size: 1.05rem; } .brand__tag { font-size: .66rem; font-weight: 500; } .header-actions { gap: 6px; } .lang-link { height: 38px; padding: 0 11px; } .lang-link .icon { display: none; } .header-wa-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #E7F8EE; color: #128C43; } .header-wa-ico .icon { width: 21px; height: 21px; } .menu-toggle { width: 40px; height: 40px; } } /* Hero CTAs: compact pills, side by side */ .hero__ctas .btn { min-height: 50px; padding-inline: 24px; font-size: 1rem; } .hero__ctas .btn--wa { box-shadow: 0 8px 20px -8px rgb(0 0 0 / .45); } @media (max-width: 700px) { .hero__ctas { flex-wrap: nowrap; gap: 8px; } .hero__ctas .btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding-inline: 10px; font-size: .9rem; gap: 6px; } .hero__ctas .btn .icon { width: 1.1em; height: 1.1em; } .hero__ctas .btn--light .icon { display: none; } } @media (max-width: 340px) { .hero__ctas { flex-wrap: wrap; } } /* Trip finder: title, category chips, then date / people / search */ .finder { display: block; padding: 18px 20px 16px; border-radius: 24px; box-shadow: 0 24px 60px -20px rgb(14 42 71 / .3), 0 0 0 1px rgb(14 42 71 / .04); } .finder__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; } .finder__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; color: var(--deep-navy); } .finder__title .icon { width: 18px; height: 18px; color: var(--orange-ink); } .finder__cats { border: 0; margin: 0 0 14px; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .finder__cats::-webkit-scrollbar { display: none; } .finder__cat { flex: none; scroll-snap-align: start; cursor: pointer; } .finder__cat input { position: absolute; opacity: 0; pointer-events: none; } .finder__cat span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding-inline: 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--white); font-size: .88rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; } .finder__cat .icon { width: 17px; height: 17px; color: var(--sea-ink); } .finder__cat:hover span { border-color: rgb(14 42 71 / .3); } .finder__cat input:checked + span { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); } .finder__cat input:checked + span .icon { color: var(--sun-yellow); } .finder__cat input:focus-visible + span { outline: 3px solid var(--sea-blue); outline-offset: 2px; } .finder__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; } .finder__field { background: var(--sand); padding: 8px 14px; border-radius: 14px; border: 1.5px solid transparent; } .finder__field:hover, .finder__field:focus-within { background: var(--sand); border-color: var(--sand-2); } .finder__field + .finder__field::before { display: none; } .finder__go { min-height: 56px; padding-inline: 28px; border-radius: 14px; } @media (max-width: 860px) { .finder { width: calc(100% - 24px); margin-block-start: -36px; padding: 16px 14px 14px; border-radius: 22px; } .finder__cats { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; } .finder__row { grid-template-columns: 1fr 1fr; gap: 8px; } .finder__field:first-child { grid-column: auto; } .finder__field { padding: 7px 12px; } .finder select, .finder input { font-size: .92rem; } .finder__go { grid-column: 1 / -1; min-height: 50px; } } .finder__cats { min-width: 0; min-inline-size: 0; } .finder .finder__cat { text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; } .finder__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .finder__field, .finder input, .finder select { min-width: 0; } @media (max-width: 860px) { .finder__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .finder__cat { position: relative; } .finder__cat input { inset: 0; width: 100%; height: 100%; margin: 0; } @media (max-width: 860px) { .finder input[type="date"] { font-size: .85rem; } } /* Client logo (wordmark) in header, drawer and footer */ .brand__logo { display: block; width: auto; height: 58px; } .drawer__top .brand__logo { height: 46px; } .footer-brand .brand { background: var(--white); padding: 10px 16px; border-radius: 18px; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .5); } .footer-brand .brand__logo { height: 58px; } @media (max-width: 760px) { .brand__logo { height: 50px; } .footer-brand .brand__logo { height: 52px; } } @media (max-width: 360px) { .brand__logo { height: 38px; } } @media (max-width: 560px) { .nf__inner .btn { flex: 1 1 100%; } } @media (max-width: 700px) { .hero__ctas--center { flex-wrap: wrap; } } /* ========================================================================== 33. UI v5: language button, trip finder fields ========================================================================== */ .lang-link { height: 44px; min-width: 44px; padding: 0 12px; justify-content: center; border-radius: 12px; border: 1.5px solid rgb(14 42 71 / .14); background: var(--white); color: var(--deep-navy); font-weight: 700; font-size: .85rem; letter-spacing: .02em; box-shadow: 0 4px 12px -6px rgb(14 42 71 / .25); } .lang-link:hover { background: var(--white); border-color: var(--deep-navy); } @media (max-width: 1200px) { .lang-link { height: 44px; } } @media (max-width: 760px) { .lang-link { height: 40px; min-width: 40px; padding: 0 10px; } .lang-link .icon { display: none; } } /* Finder: trip type / date / people fields + search */ .finder { padding: 18px 18px 16px; } .finder__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; } .finder__field { background: #FBF7F2; border: 1.5px solid #EFE6DA; border-radius: 14px; padding: 9px 14px; transition: border-color .2s, box-shadow .2s, background-color .2s; } .finder__field:hover { background: #FBF7F2; border-color: #E2D3C0; } .finder__field:focus-within { background: var(--white); border-color: var(--sea-blue); box-shadow: 0 0 0 3px rgb(31 142 197 / .15); } .finder label { color: var(--muted); } .finder__control { position: relative; min-height: 30px; } .finder__control .icon { color: var(--orange-ink); } .finder select { padding-inline-end: 22px; cursor: pointer; text-overflow: ellipsis; } .finder .finder__chev { position: absolute; inset-inline-end: 0; width: 16px; height: 16px; color: var(--muted); pointer-events: none; transform: rotate(90deg) !important; } .finder__control--date input { cursor: pointer; } .finder__control--date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .finder__control--date:not(.has-value) input { color: transparent; } .finder__control--date:not(.has-value) input::-webkit-datetime-edit { color: transparent; } .finder__ph { position: absolute; inset-inline-start: 26px; inset-block: 0; display: flex; align-items: center; font-weight: 700; color: var(--deep-navy); pointer-events: none; font-size: .98rem; } .finder__control--date.has-value .finder__ph { display: none; } @media (max-width: 860px) { .finder__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .finder__field--type, .finder__go { grid-column: 1 / -1; } .finder__ph { font-size: .92rem; } } @media (max-width: 860px) { .finder__row .finder__field--type { grid-column: 1 / -1; } } /* ========================================================================== 34. UI v6: no sideways pan on iOS, booking sheet, floating WhatsApp ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overflow-x: clip; } /* iOS zooms into any field under 16px and the page then slides sideways */ @media (max-width: 1000px) { input, select, textarea, .finder select, .finder input, .finder__ph { font-size: 16px !important; } } /* Section tabs: soft fade where the row scrolls */ @media (max-width: 1000px) { .tabs-nav { -webkit-mask-image: linear-gradient(to var(--fade-dir, left), #000 85%, transparent); mask-image: linear-gradient(to var(--fade-dir, left), #000 85%, transparent); } [dir="ltr"] .tabs-nav { --fade-dir: right; } } /* Date field with a friendly placeholder */ .date-input { position: relative; display: flex; align-items: center; } .date-input > .icon { position: absolute; inset-inline-start: 14px; width: 20px; height: 20px; color: var(--orange-ink); pointer-events: none; } .field .date-input input { padding-inline-start: 44px; text-align: start; cursor: pointer; font-weight: 600; color: var(--deep-navy); } [dir="rtl"] .field .date-input input { text-align: right; } .date-input input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .date-input:not(.has-value) input, .date-input:not(.has-value) input::-webkit-datetime-edit { color: transparent; } .date-input__ph { position: absolute; inset-inline-start: 44px; pointer-events: none; font-weight: 600; color: var(--muted); } .date-input.has-value .date-input__ph { display: none; } /* Booking card polish */ .booking__head { display: none; } .booking .field input, .booking .field textarea { background: #FBF7F2; border-color: #EFE6DA; border-radius: 14px; } .booking .field input:focus, .booking .field textarea:focus { background: var(--white); } .stepper-row { padding-block: 14px; } .stepper { border: 0; background: #FBF7F2; padding: 4px; gap: 2px; } .stepper button { width: 38px; height: 38px; background: var(--white); box-shadow: 0 1px 3px rgb(14 42 71 / .12); } .stepper button:hover:not(:disabled) { background: var(--deep-navy); color: var(--white); } .stepper__input { width: 36px; border: 0; background: transparent; text-align: center; font-weight: 700; color: var(--deep-navy); -moz-appearance: textfield; padding: 0; } .stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .booking__total { background: var(--deep-navy); color: var(--white); border-radius: 14px; } .booking__total strong { color: var(--sun-yellow); } @media (max-width: 1000px) { .booking-wrap { background: rgb(9 24 42 / .55); backdrop-filter: blur(2px); } .booking-wrap .booking { position: relative; padding: 0 18px calc(20px + env(safe-area-inset-bottom)); max-height: 88svh; overscroll-behavior: contain; border: 0; border-radius: 26px 26px 0 0; touch-action: pan-y; } .booking__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; position: sticky; inset-block-start: 0; z-index: 2; margin-inline: -18px; padding: 10px 18px 12px; background: var(--white); border-block-end: 1px solid var(--line); margin-block-end: 16px; } .booking__head .booking__grab { grid-column: 1 / -1; margin: 0 auto 4px; } .booking__title { display: grid; line-height: 1.3; min-width: 0; } .booking__title strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--deep-navy); } .booking__title small { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .booking-wrap .booking__close { position: static; width: 40px; height: 40px; background: var(--sand); color: var(--deep-navy); } .booking__price { padding-block-end: 14px; margin-block-end: 14px; } /* Sticky bar: price + one clear button */ .booking-sheet-toggle { gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; } .booking-sheet-toggle .btn { flex: 1; max-width: 230px; min-height: 50px; font-size: 1rem; } .booking-sheet-toggle .price { line-height: 1.2; } } /* Floating WhatsApp: on every page and every screen */ .wa-float { inset-block-end: calc(24px + env(safe-area-inset-bottom)); } .wa-float__btn { background: linear-gradient(180deg, #2BCB66, #149A4A); box-shadow: 0 10px 26px -6px rgb(20 154 74 / .6); position: relative; } .wa-float__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2BCB66; animation: wa-ring 2.4s ease-out infinite; } @keyframes wa-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wa-float__btn::after { animation: none; display: none; } } @media (max-width: 760px) { .wa-float { display: flex; inset-inline-end: 16px; inset-block-end: calc(88px + env(safe-area-inset-bottom)); } .wa-float__btn { width: 54px; height: 54px; } .wa-float__btn .icon { width: 28px; height: 28px; } } @media (min-width: 761px) and (max-width: 1000px) { .is-trip .wa-float, .single-apartment .wa-float { inset-block-end: calc(96px + env(safe-area-inset-bottom)); } } .no-scroll .wa-float { display: none; }