.elementor-kit-5995{--e-global-color-primary:#000000;--e-global-color-secondary:#1B263B;--e-global-color-text:#000000;--e-global-color-accent:#FFFFFF;--e-global-color-3e25106e:#111111;--e-global-color-6194dd9:#1B263B;--e-global-color-7981c676:#415A77;--e-global-color-37865f7f:#778DA9;--e-global-color-2902c71f:#E0E1DD;--e-global-color-83a22cb:#FFFFFF;--e-global-color-651bd03:#00218A;--e-global-color-d76d048:#000000;--e-global-color-b4f6d20:#FFECE1;--e-global-color-c940a6e:#535FEA;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:32px;--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:600;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:800;--e-global-typography-bf02e41-font-size:24px;--e-global-typography-bf02e41-font-weight:600;--e-global-typography-5ca3ddd-font-family:"Helvetica Neue";--e-global-typography-5ca3ddd-font-weight:400;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:300;}.elementor-kit-5995 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5995 a{color:var( --e-global-color-7981c676 );font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-kit-5995 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-5995 h1{color:var( --e-global-color-3e25106e );font-family:"Poppins", Sans-serif;font-size:57px;font-weight:900;}.elementor-kit-5995 h2{color:var( --e-global-color-3e25106e );font-family:"Poppins", Sans-serif;font-weight:800;}.elementor-kit-5995 h3{font-family:"Poppins", Sans-serif;font-weight:700;}.elementor-kit-5995 h5{color:var( --e-global-color-7981c676 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1920px;}.e-con{--container-max-width:1920px;--container-default-padding-top:0px;--container-default-padding-right:40px;--container-default-padding-bottom:0px;--container-default-padding-left:40px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1760px){.e-con{--container-default-padding-top:0px;--container-default-padding-right:30px;--container-default-padding-bottom:0px;--container-default-padding-left:30px;}}@media(max-width:1300px){.elementor-kit-5995{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:600px){.elementor-kit-5995{--e-global-typography-text-font-size:18px;font-size:18px;}.elementor-kit-5995 h1{font-size:50px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:60rem;}.e-con{--container-max-width:60rem;--container-default-padding-top:0px;--container-default-padding-right:15px;--container-default-padding-bottom:0px;--container-default-padding-left:15px;}} /* Start custom CSS *//* ════════════════════════════════════════════════════════════════════ TAYA — SITE CSS ──────────────────────────────────────────────────────────────────── CONTENTS 01 Design tokens .............. brand colors + hero overlay 02 Base ....................... body, links, base text color 03 Hebrew / RTL ............... font + direction for Hebrew pages 04 Section backgrounds ........ light/dark background per section 05 Section padding ............ spacing per section (edit here) 06 Headlines .................. global + per-section heading styles 07 Text roles ................. kickers, labels, light/dark text 08 Breadcrumbs ................ Rank Math breadcrumb bar 09 Opening section ............ intro block 10 Divider sections ........... thin horizontal rules 11 Opening headline row ....... small label + line row 12 Buttons .................... all .btn-* variants 13 Arrows ..................... generic svg arrow colors 14 Hotel carousel (LEGACY) .... old slick-based slider 15 Responsive (global) ........ breakpoints for the above 16 Comparison section ......... .s-comparison table + cards 17 FAQ section ................ .taya-faq accordion 18 Info accordion ............. .taya-panel 19 Map widget ................. #tlm-map-widget 20 Mexico guide ............... .tl-* long-form guide page 21 Hotel cards carousel (NEW) . .thc clean-HTML carousel 22 Destination carousel (NEW) . .tdc clean-HTML carousel (section class: .destinations-carousel) 26 Forms ..................... autocomplete + date picker 27 Start-planning page ........ .tsp landing page 28 Destination carousel ........ scroll + arrows patches 29 Patches .................... corner hover + comparison text ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ 01 · DESIGN TOKENS Brand color palette. Change a value here and it updates site-wide. ════════════════════════════════════════════════════════════════════ */ :root { --light: #F8F8F7; --dark: #1A1A19; --accent: #00218A; --warm: #D6C3A3; --gray: #A6A6A6; --soft: #F0F0EF; --hero-overlay: rgba(0, 0, 0, 0.75); /* dark scrim over the hero image */ --divider-dark-line: rgba(26, 26, 25, 0.14); /* shared dark divider line color */ } /* ════════════════════════════════════════════════════════════════════ 02 · BASE Page-wide defaults: no horizontal scroll, base bg + text colors. ════════════════════════════════════════════════════════════════════ */ html, body { overflow-x: hidden; } body { background-color: var(--light) !important; color: var(--dark) !important; } body a:not([class*="button"]) { color: var(--accent); } body p, body span, body li { color: inherit; } /* ════════════════════════════════════════════════════════════════════ 03 · HEBREW / RTL Applied only to pages with the .custom-hebrew-page body class. ════════════════════════════════════════════════════════════════════ */ body.custom-hebrew-page, body.custom-hebrew-page * { font-family: "Ploni", sans-serif !important; } body.custom-hebrew-page input, body.custom-hebrew-page textarea { direction: rtl; } /* ════════════════════════════════════════════════════════════════════ 04 · SECTION BACKGROUNDS Every section needs the .ts class. Each section maps to a bg color. ════════════════════════════════════════════════════════════════════ */ .ts, .ts.e-con, .ts.elementor-element { background-color: var(--section-bg, transparent) !important; } /* Light-background sections */ .ts.s-opening, .ts.s-cta, .ts.s-info-map, .ts.s-hotels, .ts.s-comparison { --section-bg: var(--light); } /* Dark-background sections */ .ts.faq, .ts.destinations-carousel, .ts.s-steps { --section-bg: var(--dark); } /* Hero — self-contained: dark overlay + centered flex column. Works on BOTH classic sections and Atomic Flexbox elements. (class order doesn't matter: .ts.s-hero == "ts s-hero" == "s-hero ts") */ .ts.s-hero { --section-bg: transparent; position: relative !important; display: flex !important; flex-direction: column !important; /* stack: heading → paragraph → next element … */ align-items: center !important; /* horizontal centering */ justify-content: center !important; /* vertical centering */ text-align: center !important; gap: 50px !important; /* ← space between hero elements. Change this number. */ /* Dark scrim over the bg image. Inset box-shadow paints ABOVE the background but BELOW all text/content — no z-index / nesting issues. Change the color/opacity via the --hero-overlay token (section 01). */ box-shadow: inset 0 0 0 2000px var(--hero-overlay) !important; } /* Fix: inner carousel bg must match its parent section */ .ts.s-hotels .hotel-carousel, .ts.s-hotels .hotel-carousel.e-con { background-color: var(--light) !important; } /* ════════════════════════════════════════════════════════════════════ 05 · SECTION PADDING Central place to control top/bottom/side spacing of each section. ════════════════════════════════════════════════════════════════════ */ .ts.s-hero { padding-top: 120px !important; padding-bottom: 120px !important; } .ts.s-opening { padding-top: 50px !important; padding-bottom: 20px !important; } .ts.s-cta { padding-top: 0px !important; padding-bottom: 100px !important; } .ts.s-info-map { padding-top: 100px !important; padding-right: 150px !important; padding-bottom: 100px !important; padding-left: 150px !important; } .ts.s-info-map .two-boxes-map { gap: 32px !important; } /* info-map inner column gap */ .ts.s-hotels { padding-top: 100px !important; padding-bottom: 100px !important; } .ts.faq { padding-top: 100px !important; padding-bottom: 100px !important; padding-left: 200px !important; padding-right: 200px !important; } .ts.destinations-carousel { padding-top: 40px !important; padding-bottom: 100px !important; } .ts.s-comparison { padding-top: 100px !important; padding-bottom: 100px !important; padding-left: 200px !important; padding-right: 200px !important; } /* +50px מעל כותרת קרוסלת הערים בלבד */ .ts.destinations-carousel > h2 { margin-top: 50px !important; } .ts.s-steps { padding-top: 100px !important; padding-bottom: 100px !important; } .ts.s-contact { padding-top: 100px !important; padding-bottom: 100px !important; } .ts.hotel-carousel { padding-top: 100px !important; padding-bottom: 30px !important; } .ts.hotel-carousel-section { padding-bottom: 100px !important; } /* ════════════════════════════════════════════════════════════════════ 06 · HEADLINES Global heading defaults, then hero + per-section overrides. ════════════════════════════════════════════════════════════════════ */ /* Global defaults */ .ts h1, .ts h2, .ts h3, .ts [class*="heading-title"], .ts [class*="e-n-heading"] { font-size: 36px !important; line-height: 1.1 !important; text-align: center !important; font-weight: 800 !important; margin: 0 !important; text-transform: none !important; padding-bottom: 30px; } /* Hero — large light headline */ .ts.s-hero h1, .ts.s-hero h2, .ts.s-hero h3, .ts.s-hero [class*="heading-title"] { font-size: clamp(40px, 6vw, 80px) !important; color: var(--light) !important; } /* Hero — white paragraph text */ .ts.s-hero p, .ts.s-hero p * { color: var(--light) !important; } /* Light sections — dark headlines */ .ts.s-opening [class*="heading-title"], .ts.s-cta [class*="heading-title"], .ts.s-info-map [class*="heading-title"], .ts.s-hotels [class*="heading-title"], .ts.s-comparison [class*="heading-title"] { color: var(--dark) !important; } /* Dark sections — light headlines */ .ts.destinations-carousel [class*="heading-title"], .ts.destinations-carousel h1, .ts.destinations-carousel h2, .ts.destinations-carousel h3, .ts.s-steps [class*="heading-title"], .ts.s-steps h1, .ts.s-steps h2, .ts.s-steps h3, .ts.s-contact [class*="heading-title"], .ts.s-contact h1, .ts.s-contact h2, .ts.s-contact h3 { color: var(--light) !important; } /* Per-section headline spacing */ .ts.s-info-map [class*="heading-title"] { padding-top: 50px !important; padding-bottom: 20px !important; } .ts.s-hotels [class*="heading-title"] { padding-top: 50px !important; padding-bottom: 20px !important; } .ts.faq [class*="heading-title"] { padding-bottom: 20px !important; } .ts.destinations-carousel [class*="heading-title"] { padding-top: 50px !important; padding-bottom: 20px !important; } .ts.faq [class*="heading-title"], .ts.faq h1, .ts.faq h2, .ts.faq h3 { color: var(--faq-heading-color) !important; text-align: center !important; } /* ════════════════════════════════════════════════════════════════════ 07 · TEXT ROLES Reusable text styles applied via helper classes on any section. ════════════════════════════════════════════════════════════════════ */ .ts .kicker-dark [class*="heading-title"] { color: var(--dark) !important; } .ts .kicker-light [class*="heading-title"] { color: var(--warm) !important; } .ts .kicker-gray, .ts .kicker-gray [class*="heading-title"] { color: var(--gray) !important; text-align: center !important; font-size: 10px !important; } .ts .kicker-first, .ts .kicker-first [class*="heading-title"] { color: var(--dark) !important; text-align: center !important; font-size: 12px !important; text-transform: uppercase !important; } .ts .text-dark, .ts .text-dark p, .ts .text-dark li, .ts .text-dark span, .ts .text-dark strong { color: var(--gray) !important; text-align: center !important; } .ts .text-light, .ts .text-light p, .ts .text-light li, .ts .text-light span, .ts .text-light strong { color: var(--light) !important; } .ts .label-sm [class*="heading-title"], .ts .label-sm h1, .ts .label-sm h2, .ts .label-sm h3 { font-size: 7px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ════════════════════════════════════════════════════════════════════ 08 · BREADCRUMBS (Rank Math) Full-bleed, minimalist breadcrumb bar. ════════════════════════════════════════════════════════════════════ */ .rank-math-breadcrumb { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-color: transparent; border: none; padding: 12px 0 12px 195px; text-align: left; font-family: 'Assistant', sans-serif; font-size: 12px; } /* Links + text — uniform color and weight */ .rank-math-breadcrumb *, .rank-math-breadcrumb a, .rank-math-breadcrumb > a, .rank-math-breadcrumb span, .rank-math-breadcrumb span a, .rank-math-breadcrumb [href] { color: #666 !important; font-weight: 700 !important; text-decoration: none !important; padding: 2px 6px !important; transition: color 0.15s ease !important; } .rank-math-breadcrumb a:hover, .rank-math-breadcrumb [href]:hover { color: #000 !important; } .rank-math-breadcrumb .separator { color: #bbb !important; font-weight: 400 !important; padding: 0 !important; } @media (max-width: 768px) { .rank-math-breadcrumb { font-size: 13px; padding: 10px 0 10px 16px; } } /* ════════════════════════════════════════════════════════════════════ 09 · OPENING SECTION Narrow, centered intro block with a small uppercase heading. ════════════════════════════════════════════════════════════════════ */ .ts.s-opening { padding-left: 500px !important; padding-right: 500px !important; text-align: center !important; } .ts.s-opening.e-con { flex-direction: column !important; align-items: center !important; } .ts.s-opening > .e-con-inner { flex-direction: column !important; align-items: center !important; } .ts.s-opening h1, .ts.s-opening h2, .ts.s-opening h3, .ts.s-opening [class*="heading-title"] { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding-top: 0 !important; padding-bottom: 0 !important; } .ts.s-opening p { font-size: 15px !important; } /* ════════════════════════════════════════════════════════════════════ 10 · DIVIDER SECTIONS Thin full-width horizontal rules (light on dark / dark on light). Targets ANY divider inside the section — no need for a divider-light / divider-dark class on the widget itself. ════════════════════════════════════════════════════════════════════ */ .ts.divider-section-light { background-color: var(--dark) !important; } .ts.divider-section-dark { background-color: var(--light) !important; } /* ── LIGHT divider line (inside a .divider-section-light) ──────────── */ .ts.divider-section-light .elementor-divider, .ts.divider-section-light .elementor-divider-separator, .ts.divider-section-light .elementor-divider-separator::before, .ts.divider-section-light .elementor-divider-separator::after, .ts.divider-section-light .divider-light .elementor-divider-separator::after { --divider-color: var(--light) !important; border-top-color: var(--light) !important; border-block-start-color: var(--light) !important; border-color: var(--light) !important; background: var(--light) !important; color: var(--light) !important; opacity: 1 !important; } /* ── DARK divider line (inside a .divider-section-dark) — hero color ─ KEY FIX: Elementor reads the line color from --divider-color set on the WIDGET WRAPPER (.elementor-widget-divider), so we override it there — plus on the separator + :after that actually paints the line. Works even when the widget has NO divider-dark class. ─────────────────── */ .ts.divider-section-dark .elementor-widget-divider, .ts.divider-section-dark .elementor-divider, .ts.divider-section-dark .elementor-divider-separator, .ts.divider-section-dark .elementor-divider-separator::before, .ts.divider-section-dark .elementor-divider-separator::after, .ts.divider-section-dark .divider-dark .elementor-divider-separator::after { --divider-color: var(--divider-dark-line) !important; --e-divider-color: var(--divider-dark-line) !important; border-top-color: var(--divider-dark-line) !important; border-block-start-color: var(--divider-dark-line) !important; border-color: var(--divider-dark-line) !important; background: var(--divider-dark-line) !important; color: var(--divider-dark-line) !important; opacity: 1 !important; } /* ── Plain
dividers ──────────────────────────────────────────── */ hr.divider-light { width: min(100%, 1300px) !important; max-width: 1300px !important; height: 1px !important; border: none !important; border-top: 1px solid var(--light) !important; background: var(--light) !important; opacity: 1 !important; margin: 0 auto !important; } hr.divider-dark, .ts.divider-section-dark hr { width: min(100%, 1300px) !important; max-width: 1300px !important; height: 1px !important; border: none !important; border-top: 1px solid var(--divider-dark-line) !important; background: var(--divider-dark-line) !important; opacity: 1 !important; margin: 0 auto !important; } /* ── Elementor divider-dark widgets anywhere, kept in sync ─────────── */ .ts .divider-dark .elementor-divider, .ts .divider-dark .elementor-divider-separator, .ts .divider-dark .elementor-divider-separator::before, .ts .divider-dark .elementor-divider-separator::after { --divider-color: var(--divider-dark-line) !important; border-top-color: var(--divider-dark-line) !important; border-block-start-color: var(--divider-dark-line) !important; border-color: var(--divider-dark-line) !important; background: var(--divider-dark-line) !important; color: var(--divider-dark-line) !important; } /* ════════════════════════════════════════════════════════════════════ 11 · OPENING HEADLINE ROW A small label on the left + a horizontal line filling the rest. ════════════════════════════════════════════════════════════════════ */ .ts.s-opening-headline { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; } .ts.s-opening-headline > *:first-child { width: 5% !important; flex: 0 0 5% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } .ts.s-opening-headline > *:last-child { width: 95% !important; flex: 0 0 95% !important; text-align: left !important; } .ts.s-opening-headline [class*="heading-title"], .ts.s-opening-headline h1, .ts.s-opening-headline h2, .ts.s-opening-headline h3 { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; text-align: left !important; color: var(--dark) !important; margin: 0 !important; } .ts.s-opening-headline [class*="divider-separator"], .ts.s-opening-headline hr { border-color: var(--divider-dark-line) !important; background-color: var(--divider-dark-line) !important; width: 100% !important; } /* ════════════════════════════════════════════════════════════════════ 12 · BUTTONS Shared button shape, then color variants: dark / light / accent + outlines. ════════════════════════════════════════════════════════════════════ */ .ts .btn-dark [class*="button"], .ts .btn-dark a[class*="button"], .ts .btn-dark-outline [class*="button"], .ts .btn-dark-outline a[class*="button"], .ts .btn-light [class*="button"], .ts .btn-light a[class*="button"], .ts .btn-light-outline [class*="button"], .ts .btn-light-outline a[class*="button"], .ts .btn-accent [class*="button"], .ts .btn-accent a[class*="button"] { border-radius: 100px !important; padding: 15px 23px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important; } .ts .btn-dark [class*="button"], .ts .btn-dark a[class*="button"] { background: var(--dark) !important; color: var(--light) !important; border: 1px solid var(--dark) !important; } .ts .btn-dark [class*="button"]:hover, .ts .btn-dark a[class*="button"]:hover { background: #2A2A2A !important; border-color: #2A2A2A !important; } .ts .btn-dark-outline [class*="button"], .ts .btn-dark-outline a[class*="button"] { background: transparent !important; color: var(--dark) !important; border: 1px solid var(--dark) !important; } .ts .btn-light [class*="button"], .ts .btn-light a[class*="button"] { background: var(--light) !important; color: var(--dark) !important; border: 1px solid var(--light) !important; } .ts .btn-light-outline [class*="button"], .ts .btn-light-outline a[class*="button"] { background: transparent !important; color: var(--light) !important; border: 1px solid var(--light) !important; } .ts .btn-accent [class*="button"], .ts .btn-accent a[class*="button"] { background: var(--accent) !important; color: var(--light) !important; border: 1px solid var(--accent) !important; } /* ════════════════════════════════════════════════════════════════════ 13 · ARROWS Generic svg arrow icon colors (dark / light variants). ════════════════════════════════════════════════════════════════════ */ .ts .arrow-dark svg rect, .ts .arrow-dark svg circle { stroke: rgba(26,26,25,.25) !important; } .ts .arrow-dark svg path { stroke: var(--dark) !important; fill: var(--dark) !important; } .ts .arrow-light svg rect, .ts .arrow-light svg circle { stroke: rgba(248,248,247,.25) !important; } .ts .arrow-light svg path { stroke: var(--light) !important; fill: var(--light) !important; } /* ════════════════════════════════════════════════════════════════════ 14 · HOTEL CAROUSEL — LEGACY (slick-based) The OLD hotel slider (.hotel-*, .slick-*). Superseded by the new .thc carousel (section 21) but kept for any page still using it. ════════════════════════════════════════════════════════════════════ */ /* Top CTA pill */ .ts .hotel-top-cta [class*="button"], .ts .hotel-top-cta a { background: var(--light) !important; color: var(--dark) !important; border-radius: 100px !important; padding: 4px 12px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important; outline: none !important; white-space: nowrap !important; } .ts .hotel-top-cta svg { width: 9px !important; } .ts .hotel-top-cta svg path { fill: transparent !important; stroke: var(--dark) !important; } .ts .hotel-top-cta:hover svg path { fill: transparent !important; stroke: var(--dark) !important; } /* Prev / next arrows */ .ts .hotel-arrow-prev, .ts .hotel-arrow-next { cursor: pointer; } .ts .hotel-arrow-prev [class*="icon"], .ts .hotel-arrow-next [class*="icon"] { border-radius: 50%; display: flex; align-items: center; } .ts .hotel-arrow-prev:hover [class*="icon"] svg, .ts .hotel-arrow-next:hover [class*="icon"] svg { background: var(--accent) !important; border-radius: 50%; } /* Card corner button + title + price */ .ts .hotel-card-corner-btn [class*="icon"] svg, .ts .hotel-card-corner-btn [class*="icon"] svg * { fill: var(--dark) !important; transition: fill .1s ease !important; } .ts .hotel-card-corner-btn [class*="icon"]:hover svg * { fill: #444 !important; } .ts .hotel-card-title [class*="heading-title"] { font-family: "Helvetica Neue", sans-serif !important; font-size: 4.8rem !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -.04em !important; color: var(--light) !important; margin: 0 !important; text-transform: none !important; } .ts .hotel-card-price, .ts .hotel-card-price [class*="heading-title"], .ts .hotel-card-price span { font-family: "Helvetica Neue", sans-serif !important; font-size: 2.8rem !important; font-weight: 700 !important; line-height: 3rem !important; color: var(--light) !important; } .ts .hotel-card-price s { font-size: 1.6rem !important; font-weight: 500 !important; color: var(--light) !important; opacity: .8 !important; } .ts .hotel-card-price span { font-size: 16px !important; line-height: 16px !important; vertical-align: middle !important; } .ts.hotel-carousel .hotel-card-price, .ts.hotel-carousel .hotel-card-price [class*="heading-title"] { width: 100% !important; text-align: left !important; align-self: flex-start !important; } /* Slide image + overlays */ .ts .hotel-slide-img { position: relative !important; } .ts .hotel-slide-img::before, .ts .hotel-slide-img::after { content: ""; position: absolute; width: 100%; left: 0; background: linear-gradient(179.27deg, #000 16.88%, rgba(102,102,102,0) 68.66%); opacity: .65; border-radius: 4rem; z-index: 1; pointer-events: none; } .ts .hotel-slide-img::before { height: 369px; top: -20px; } .ts .hotel-slide-img::after { height: calc(100% + 72px); bottom: -20px; transform: rotate(180deg); } .ts .hotel-slide-img img { width: 100% !important; height: 65.8rem !important; object-fit: cover !important; opacity: .65 !important; border-radius: 4rem !important; display: block !important; } /* Slick track + dots */ .ts .hotel-carousel-track { position: relative; } .ts .hotel-carousel-track .slick-slide { width: 48rem !important; margin: 0 2rem !important; } .ts .hotel-carousel-track .slick-list { margin: 0 -2rem !important; overflow: visible !important; } .ts .hotel-carousel-track .slick-prev, .ts .hotel-carousel-track .slick-next { background: rgba(0,0,0,.5); border-radius: 50%; width: 47px; height: 47px; padding: 11px; border: 1px solid #000; z-index: 1000; top: -85px; } .ts .hotel-carousel-track .slick-prev { right: 67px !important; left: auto !important; } .ts .hotel-carousel-track .slick-next { right: 0 !important; } .ts .hotel-carousel-track .slick-slide > a { padding: 0 !important; } .ts .hotel-carousel-track .hotel-slide-img { clip-path: url(#hotel-offers-cp); } .ts .hotel-carousel-track li.slick-active { width: 28px !important; height: 12px !important; background: #000 !important; border-radius: 16px; transition: .35s all ease; } .ts .hotel-carousel-track .slick-dots li { width: 12px; height: 12px; background: rgba(0,0,0,.25); border-radius: 16px; } .ts .hotel-carousel-track .slick-dots li button { padding: 0 !important; height: 12px !important; } .ts .hotel-carousel-track .slick-dots li button:before { line-height: 12px; color: transparent; } .ts .hotel-carousel-track ul.slick-dots { bottom: -44px; } .ts .hotel-carousel-track .slick-dots { display: none !important; } /* ════════════════════════════════════════════════════════════════════ 15 · RESPONSIVE (global) Breakpoints for everything above. Card carousels (.thc / .tdc) have their own responsive rules in sections 21–22. ════════════════════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .ts.s-opening { padding-left: 200px !important; padding-right: 200px !important; } } @media (max-width: 1000px) { .ts .hotel-carousel-track .slick-slide { width: 440px !important; margin-right: 30px !important; } } @media (max-width: 767px) { /* Side padding */ .ts { padding-left: 10px !important; padding-right: 10px !important; } .ts.s-opening { padding-left: 20px !important; padding-right: 20px !important; } .ts.s-info-map { padding-top: 40px !important; padding-left: 10px !important; padding-right: 10px !important; } .ts.s-info-map [class*="heading-title"] { padding-top: 20px !important; } .ts.s-comparison { padding-left: 16px !important; padding-right: 16px !important; } .ts.faq { padding-left: 16px !important; padding-right: 16px !important; } .ts.s-hero .form-button { padding-left: 20px !important; padding-right: 20px !important; } .ts .hotel-card-price span { font-size: 1.6rem !important; } /* CTA + carousel submit buttons: full-width */ .ts.s-cta .cta-submit-button, .ts.hotel-carousel-section .hotel-carousel-button { width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; display: block !important; } .ts.s-cta .cta-submit-button .elementor-widget-container, .ts.hotel-carousel-section .hotel-carousel-button .elementor-widget-container { width: 100% !important; margin: 0 !important; padding: 0 !important; } .ts.s-cta .cta-submit-button .elementor-button, .ts.hotel-carousel-section .hotel-carousel-button .elementor-button { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 15px 23px !important; border-radius: 100px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; } } @media (max-width: 600px) { .ts .hotel-carousel-track .slick-slide { width: 365px !important; max-width: calc(100vw - 12px); margin: 0 5px !important; } .ts .hotel-carousel-track .slick-list { margin: 0 -5px !important; } } /* Legacy hotel carousel: mobile section hidden on desktop, desktop padding */ @media (min-width: 768px) { .ts.hotel-carousel-section, .ts.hotel-carousel-section.e-con, .ts.hotel-carousel-section.elementor-element { display: none !important; } .ts.hotel-carousel, .ts.hotel-carousel.e-con, .ts.hotel-carousel.elementor-element { padding-bottom: 100px !important; } } /* ════════════════════════════════════════════════════════════════════ 16 · COMPARISON SECTION Table + verdict/decision cards. Restyle via the --comp-* tokens. ════════════════════════════════════════════════════════════════════ */ .ts.s-comparison { --comp-border: rgba(17,17,17,.09); --comp-row-hover: rgba(17,17,17,.02); --comp-eyebrow-size: 10px; --comp-heading-size: 36px; --comp-intro-size: 15px; --comp-th-size: 10px; --comp-td-size: 13px; --comp-factor-size: 10px; --comp-block-label-size: 11px; --comp-dest-size: 9px; --comp-verdict-size: 12px; --comp-decision-dest-size: 18px; --comp-decision-size: 12px; --comp-eyebrow-color: var(--gray); --comp-heading-color: var(--dark); --comp-intro-color: var(--gray); --comp-th-color: var(--gray); --comp-th-main-color: var(--dark); --comp-td-color: var(--gray); --comp-td-main-color: var(--dark); --comp-factor-color: var(--gray); --comp-dest-color: var(--dark); --comp-dest-bg: rgba(17,17,17,.06); --comp-dest-border: rgba(17,17,17,.16); --comp-card-bg: var(--light); --comp-card-main-bg: var(--soft); --comp-card-main-border: var(--dark); } /* Legacy comparison-table helpers (centered layout) */ .ts.s-comparison .subheadline-dark, .ts.s-comparison .subheadline-dark [class*="heading-title"], .ts.s-comparison .subheadline-dark h1, .ts.s-comparison .subheadline-dark h2, .ts.s-comparison .subheadline-dark h3 { color: var(--gray) !important; font-size: 15px !important; font-weight: 500 !important; text-align: center !important; } .ts.s-comparison .comparison-table, .ts.s-comparison .comparison-table * { text-align: center !important; } .ts.s-comparison .comparison-table.e-con, .ts.s-comparison .comparison-table .e-con { justify-content: center !important; } /* Header + intro */ .ts.s-comparison .comparison-inner { width: min(100%, 960px); margin-inline: auto; } .ts.s-comparison .comp-eyebrow { font-size: var(--comp-eyebrow-size); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--comp-eyebrow-color); text-align: center; margin: 0 0 14px; } .ts.s-comparison .comp-heading { font-size: var(--comp-heading-size) !important; color: var(--comp-heading-color) !important; text-align: center !important; margin: 0 0 16px !important; padding-bottom: 0 !important; } .ts.s-comparison .comp-intro { font-size: var(--comp-intro-size); line-height: 1.7; color: var(--comp-intro-color); text-align: center; max-width: 620px; margin: 0 auto 48px; } .ts.s-comparison .comp-block-label { font-size: var(--comp-block-label-size); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--comp-factor-color); text-align: center; margin: 0 0 16px; } /* Table */ .ts.s-comparison .comp-table-wrap { border: 1px solid var(--comp-border); border-radius: 16px; overflow: hidden; margin-bottom: 48px; width: 100%; } .ts.s-comparison .comp-table { width: 100%; border-collapse: collapse; } .ts.s-comparison .comp-table thead tr { background: rgba(17,17,17,.025); border-bottom: 1px solid var(--comp-border); } .ts.s-comparison .comp-table th { padding: 14px 16px; font-size: var(--comp-th-size); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--comp-th-color); text-align: center; } .ts.s-comparison .comp-table th.col-main { color: var(--comp-th-main-color); } .ts.s-comparison .comp-table th.col-factor { text-align: left; } .ts.s-comparison .comp-table td { padding: 13px 16px; vertical-align: top; line-height: 1.55; border-bottom: 1px solid var(--comp-border); color: var(--comp-td-color); font-size: var(--comp-td-size); text-align: center; } .ts.s-comparison .comp-table tr:last-child td { border-bottom: none; } .ts.s-comparison .comp-table tbody tr:hover td { background: var(--comp-row-hover); } .ts.s-comparison .comp-table td.col-factor { font-size: var(--comp-factor-size); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--comp-factor-color); white-space: nowrap; text-align: left; width: 120px; } .ts.s-comparison .comp-table td.col-main { color: var(--comp-td-main-color); font-weight: 500; } /* Table → stacked cards on mobile */ @media (max-width: 767px) { .ts.s-comparison .comp-table-wrap { border: none; border-radius: 0; background: transparent; overflow: visible; } .ts.s-comparison .comp-table thead { display: none; } .ts.s-comparison .comp-table, .ts.s-comparison .comp-table tbody, .ts.s-comparison .comp-table tr, .ts.s-comparison .comp-table td { display: block; width: 100%; } .ts.s-comparison .comp-table tbody tr { border: 1px solid var(--comp-border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: var(--comp-card-bg); } .ts.s-comparison .comp-table td.col-factor { display: block; width: 100%; background: rgba(17,17,17,.04); border-bottom: 1px solid var(--comp-border); padding: 11px 16px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--comp-heading-color); text-align: left; white-space: normal; } .ts.s-comparison .comp-table td.col-factor::before { content: none; } .ts.s-comparison .comp-table td:not(.col-factor) { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--comp-border); } .ts.s-comparison .comp-table td:not(.col-factor):last-child { border-bottom: none; } .ts.s-comparison .comp-table td:not(.col-factor)::before { content: attr(data-label); flex-shrink: 0; width: 92px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--comp-factor-color); padding-top: 2px; } } /* Verdict cards */ .ts.s-comparison .verdict-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 48px; } @media (min-width: 480px) { .ts.s-comparison .verdict-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .ts.s-comparison .verdict-grid { grid-template-columns: repeat(4, 1fr); } } .ts.s-comparison .verdict-card { border: 1px solid var(--comp-border); border-radius: 14px; padding: 18px 16px 20px; background: var(--comp-card-bg); text-align: center; } .ts.s-comparison .verdict-label { font-size: var(--comp-block-label-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--comp-factor-color); margin: 0 0 8px; } .ts.s-comparison .verdict-dest { display: inline-block; font-size: var(--comp-dest-size); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--comp-dest-color); background: var(--comp-dest-bg); border: 1px solid var(--comp-dest-border); border-radius: 100px; padding: 3px 10px; margin-bottom: 10px; } .ts.s-comparison .verdict-text { font-size: var(--comp-verdict-size); line-height: 1.65; color: var(--comp-td-color); margin: 0; } /* Decision cards */ .ts.s-comparison .decision-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 600px) { .ts.s-comparison .decision-grid { grid-template-columns: repeat(3, 1fr); } } .ts.s-comparison .decision-card { border: 1px solid var(--comp-border); border-radius: 14px; padding: 20px 18px 22px; background: var(--comp-card-bg); text-align: center; } .ts.s-comparison .decision-card--main { border-color: var(--comp-card-main-border); background: var(--comp-card-main-bg); } .ts.s-comparison .decision-prompt { font-size: var(--comp-factor-size); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--comp-factor-color); margin: 0 0 4px; } .ts.s-comparison .decision-dest { font-size: var(--comp-decision-dest-size); font-weight: 800; letter-spacing: -.01em; color: var(--comp-heading-color); margin: 0 0 10px; line-height: 1.2; } .ts.s-comparison .decision-text { font-size: var(--comp-decision-size); line-height: 1.65; color: var(--comp-td-color); margin: 0; } /* ════════════════════════════════════════════════════════════════════ 17 · FAQ SECTION (.taya-faq) Accordion list + sidebar CTA. Restyle via the --faq-* tokens. ════════════════════════════════════════════════════════════════════ */ .ts.faq { --faq-cta-image: url('https://i.imghippo.com/files/fQL8308xEg.png'); --faq-q-size: 13px; --faq-q-size-md: 14px; --faq-a-size: 13px; --faq-check-title-size: 10px; --faq-check-item-size: 12px; --faq-glass-title-size: 14px; --faq-btn-size: 13px; --faq-item-bg: #1A1A1A; --faq-item-border: rgba(248,248,247,.1); --faq-item-bg-hover: #222222; --faq-item-border-hover: rgba(248,248,247,.2); --faq-open-bg: #F8F8F7; --faq-open-border: rgba(248,248,247,.3); --faq-open-shadow: 0 4px 20px rgba(0,0,0,.25); --faq-q-color: #F8F8F7; --faq-q-color-open: #1A1A19; --faq-icon-border: rgba(248,248,247,.2); --faq-icon-bg-open: #1A1A19; --faq-icon-stroke: rgba(248,248,247,.5); --faq-icon-stroke-open: #F8F8F7; --faq-a-border: rgba(26,26,25,.1); --faq-a-color: rgba(26,26,25,.65); --faq-a-strong: #1A1A19; --faq-check-bg: #1A1A1A; --faq-check-border: rgba(248,248,247,.1); --faq-check-title-color: rgba(248,248,247,.35); --faq-check-item-color: #F8F8F7; --faq-dot-bg: rgba(26,26,25,.35); --faq-dot-stroke: #F0F0EF; --faq-heading-color: var(--light); --faq-glass-bg: rgba(26,26,25,.6); --faq-glass-border: rgba(248,248,247,.15); --faq-glass-title-color: #F8F8F7; --faq-btn-bg: #EDE8DF; --faq-btn-color: #1A1A19; --faq-gap: 6px; --faq-sidebar-width: 300px; --faq-sidebar-width-lg: 340px; --faq-item-radius: 12px; --faq-icon-size: 24px; } .taya-faq { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; width: 100%; } .taya-faq *, .taya-faq *::before, .taya-faq *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Layout: list + sidebar */ .taya-faq .tf-wrap { width: 100%; max-width: 1280px; margin: 0 auto; } .taya-faq .tf-body { display: flex; flex-direction: column; gap: 20px; width: 100%; } @media (min-width: 768px) { .taya-faq .tf-body { flex-direction: row; gap: 32px; align-items: flex-start; } } .taya-faq .tf-list { display: flex; flex-direction: column; gap: var(--faq-gap); width: 100%; } @media (min-width: 768px) { .taya-faq .tf-list { flex: 1; min-width: 0; } } .taya-faq .tf-sidebar { display: flex; flex-direction: column; gap: 12px; width: 100%; } @media (min-width: 768px) { .taya-faq .tf-sidebar { width: var(--faq-sidebar-width); flex-shrink: 0; position: sticky; top: 24px; } } @media (min-width: 1024px) { .taya-faq .tf-sidebar { width: var(--faq-sidebar-width-lg); } } /* Accordion item */ .taya-faq .tf-item { background: var(--faq-item-bg); border: 1px solid var(--faq-item-border); border-radius: var(--faq-item-radius); overflow: hidden; transition: background .18s, border-color .18s, box-shadow .18s; width: 100%; } .taya-faq .tf-item:not(.tf-open):hover { background: var(--faq-item-bg-hover); border-color: var(--faq-item-border-hover); } .taya-faq .tf-item.tf-open { background: var(--faq-open-bg); border-color: var(--faq-open-border); box-shadow: var(--faq-open-shadow); } .taya-faq .tf-q { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; background: none; border: none; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; outline: none; -webkit-tap-highlight-color: transparent; } @media (min-width: 768px) { .taya-faq .tf-q { padding: 18px 20px; } } .taya-faq .tf-q-text { font-size: var(--faq-q-size); font-weight: 500; color: var(--faq-q-color); line-height: 1.5; flex: 1 1 auto; min-width: 0; transition: color .18s; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } .taya-faq .tf-icon { flex: 0 0 auto; } /* icon never shrinks or overlaps the text */ @media (min-width: 768px) { .taya-faq .tf-q-text { font-size: var(--faq-q-size-md); } } .taya-faq .tf-item.tf-open .tf-q-text { color: var(--faq-q-color-open); } .taya-faq .tf-icon { width: var(--faq-icon-size); height: var(--faq-icon-size); flex-shrink: 0; margin-top: 2px; border-radius: 50%; border: 1px solid var(--faq-icon-border); display: flex; align-items: center; justify-content: center; background: transparent; transition: background .25s, border-color .25s, transform .3s ease; } .taya-faq .tf-item.tf-open .tf-icon { background: var(--faq-icon-bg-open); border-color: var(--faq-icon-bg-open); transform: rotate(45deg); } .taya-faq .tf-icon svg { width: 10px; height: 10px; stroke: var(--faq-icon-stroke); transition: stroke .18s; display: block; } .taya-faq .tf-item.tf-open .tf-icon svg { stroke: var(--faq-icon-stroke-open); } .taya-faq .tf-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); } .taya-faq .tf-item.tf-open .tf-answer { grid-template-rows: 1fr; } .taya-faq .tf-answer-inner { overflow: hidden; } .taya-faq .tf-body-text { padding: 10px 14px 16px; border-top: 1px solid var(--faq-a-border); font-size: var(--faq-a-size); line-height: 1.8; color: var(--faq-a-color); text-align: left !important; } @media (min-width: 768px) { .taya-faq .tf-body-text { padding: 12px 20px 18px; } } .taya-faq .tf-body-text strong { color: var(--faq-a-strong); font-weight: 600; } /* Sidebar CTA card */ .taya-faq .tf-cta { border-radius: var(--faq-item-radius); overflow: hidden; position: relative; display: block; width: 100%; } .taya-faq .tf-cta-img { width: 100%; aspect-ratio: 16 / 9; background-image: var(--faq-cta-image); background-size: cover; background-position: center; display: block; } @media (min-width: 768px) { .taya-faq .tf-cta-img { aspect-ratio: 4 / 3; } } .taya-faq .tf-glass { position: absolute; bottom: 12px; left: 12px; right: 12px; background: var(--faq-glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--faq-glass-border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .taya-faq .tf-glass-title { font-size: var(--faq-glass-title-size); font-weight: 700; color: var(--faq-glass-title-color); text-align: center; } .taya-faq .tf-btn { display: block; width: 100%; text-align: center; background: var(--faq-btn-bg); color: var(--faq-btn-color) !important; font-family: inherit; font-size: var(--faq-btn-size); font-weight: 600; padding: 11px 16px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none !important; transition: opacity .18s; } .taya-faq .tf-btn:hover { opacity: .85; } /* Sidebar checklist */ .taya-faq .tf-check { background: var(--faq-check-bg); border: 1px solid var(--faq-check-border); border-radius: var(--faq-item-radius); padding: 18px 16px; width: 100%; } .taya-faq .tf-check-title { font-size: var(--faq-check-title-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faq-check-title-color); margin-bottom: 12px; } .taya-faq .tf-check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .taya-faq .tf-check-list li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--faq-check-item-size); color: var(--faq-check-item-color); line-height: 1.5; } .taya-faq .tf-dot { flex-shrink: 0; margin-top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--faq-dot-bg); display: flex; align-items: center; justify-content: center; } .taya-faq .tf-dot svg { width: 9px; height: 9px; stroke: var(--faq-dot-stroke); stroke-width: 2.2; } /* Bottom alignment (desktop): make the sidebar match the questions-list height and stretch the checklist card down so both columns end level. Note: this replaces the sticky sidebar with a full-height one. */ @media (min-width: 768px) { .taya-faq .tf-body { align-items: stretch; } .taya-faq .tf-sidebar { position: static; } .taya-faq .tf-check { flex: 1 1 auto; } } /* ════════════════════════════════════════════════════════════════════ 18 · INFO ACCORDION (.taya-panel) The tabbed accordion in the left column of the info-map section. Restyle via the --info-* tokens. ════════════════════════════════════════════════════════════════════ */ .taya-panel { --info-tab-bar-bg: #111111; --info-tab-bar-radius: 999px; --info-tab-bar-padding: 6px; --info-pill-bg: #f4f1ec; --info-btn-color: rgba(244,241,236,.42); --info-btn-color-hover: rgba(244,241,236,.7); --info-btn-color-active: #1a1a1a; --info-btn-size: 13px; --info-btn-size-sm: 11px; --info-desc-color: #3c3936; --info-desc-size: 15px; --info-item-bg: #111111; --info-item-radius: 14px; --info-item-margin: 8px; --info-title-color: #f4f1ec; --info-title-size: 15px; --info-title-size-sm: 14px; --info-icon-opacity: 0.3; --info-icon-opacity-open: 0.7; --info-body-color: #777777; --info-body-size: 14px; --info-body-size-sm: 13px; --info-toggle-color: #f4f1ec; } .taya-panel, .taya-panel * { box-sizing: border-box; } .taya-panel { width: 100%; } .taya-panel .tdw-inner { width: 100%; max-width: none; margin: 0 auto; } /* Tab bar + sliding pill */ .taya-panel .tdw-tab-bar { position: relative; display: flex; align-items: stretch; width: 100%; background: var(--info-tab-bar-bg); border-radius: var(--info-tab-bar-radius); padding: var(--info-tab-bar-padding); overflow: hidden; margin-bottom: 36px; } .taya-panel .tdw-pill { position: absolute; top: var(--info-tab-bar-padding); left: var(--info-tab-bar-padding); height: calc(100% - (var(--info-tab-bar-padding) * 2)); width: calc((100% - (var(--info-tab-bar-padding) * 2)) / var(--tdw-n, 2)); border-radius: var(--info-tab-bar-radius); background: var(--info-pill-bg); z-index: 0; pointer-events: none; transform: translateX(calc(var(--tdw-i, 0) * 100%)); transition: transform .32s cubic-bezier(.4,0,.2,1); } .taya-panel .tdw-tab-btn { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; appearance: none; border: none; background: transparent; border-radius: var(--info-tab-bar-radius); cursor: pointer; padding: 11px 14px; font-family: inherit; font-size: var(--info-btn-size); font-weight: 700; line-height: 1.15; color: var(--info-btn-color); text-align: center; transition: color .22s ease; white-space: nowrap; } .taya-panel .tdw-tab-btn:hover { color: var(--info-btn-color-hover); } .taya-panel .tdw-tab-btn.is-active { color: var(--info-btn-color-active); } .taya-panel .tdw-tab-panel { display: none; } .taya-panel .tdw-tab-panel.is-active { display: block; } .taya-panel .tdw-description { max-width: 460px; margin: 0 auto 20px; padding: 0 4px; text-align: center; font-size: var(--info-desc-size); font-weight: 400; line-height: 1.84; color: var(--info-desc-color); } /* Accordion items */ .taya-panel .tdw-accordion-item { background: var(--info-item-bg); border-radius: var(--info-item-radius); overflow: hidden; margin-bottom: var(--info-item-margin); } .taya-panel .tdw-accordion-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: transparent; border: none; cursor: pointer; text-align: left; } .taya-panel .tdw-accordion-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .taya-panel .tdw-accordion-icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: var(--info-icon-opacity); transition: opacity .25s ease; } .taya-panel .tdw-accordion-item.is-open .tdw-accordion-icon { opacity: var(--info-icon-opacity-open); } .taya-panel .tdw-accordion-title { font-size: var(--info-title-size); font-weight: 700; line-height: 1.3; letter-spacing: .01em; color: var(--info-title-color); } .taya-panel .tdw-accordion-toggle { width: 20px; height: 20px; flex: 0 0 20px; position: relative; } .taya-panel .tdw-accordion-toggle::before, .taya-panel .tdw-accordion-toggle::after { content: ""; position: absolute; background: var(--info-toggle-color); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .taya-panel .tdw-accordion-toggle::before { width: 12px; height: 2px; top: 9px; left: 4px; } .taya-panel .tdw-accordion-toggle::after { width: 2px; height: 12px; top: 4px; left: 9px; } .taya-panel .tdw-accordion-item.is-open .tdw-accordion-toggle::after { opacity: 0; transform: rotate(90deg); } .taya-panel .tdw-accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .taya-panel .tdw-accordion-item.is-open .tdw-accordion-body { grid-template-rows: 1fr; } .taya-panel .tdw-accordion-body-inner { overflow: hidden; } .taya-panel .tdw-accordion-body p { margin: 0; padding: 0 20px 22px; font-size: var(--info-body-size); line-height: 1.75; color: var(--info-body-color); } @media (max-width: 767px) { .taya-panel .tdw-tab-bar { --info-tab-bar-padding: 5px; margin-bottom: 28px; } .taya-panel .tdw-tab-btn { padding: 10px 8px; font-size: var(--info-btn-size-sm); } .taya-panel .tdw-description { font-size: var(--info-desc-size); margin-bottom: 16px; } .taya-panel .tdw-accordion-header { padding: 16px; } .taya-panel .tdw-accordion-title { font-size: var(--info-title-size-sm); } .taya-panel .tdw-accordion-body p { padding: 0 16px 18px; font-size: var(--info-body-size-sm); line-height: 1.7; } } /* Accordion title — wrap cleanly + keep a gap before the + toggle */ .taya-panel .tdw-accordion-header{ align-items: flex-start; /* אייקון + פלוס מיושרים לשורה הראשונה */ gap: 14px; /* ← המרווח הקבוע בין הטקסט לפלוס */ } .taya-panel .tdw-accordion-header-left{ flex: 1 1 auto !important; min-width: 0 !important; /* מאפשר לטקסט להתכווץ ולרדת שורה */ } .taya-panel .tdw-accordion-title{ min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .taya-panel .tdw-accordion-icon, .taya-panel .tdw-accordion-toggle{ flex: 0 0 20px !important; margin-top: 2px; /* יישור לשורה הראשונה כשיש שתי שורות */ } /* Country panel — 3 main destination rows + "more" button */ .taya-panel.is-country .tdw-dest-row{ display:flex; align-items:center; gap:12px; background: var(--info-item-bg, #111); border-radius: var(--info-item-radius, 14px); margin-bottom: var(--info-item-margin, 8px); padding:16px 18px; text-decoration:none !important; color:#F4F1EC !important; transition:background .18s ease, transform .18s ease; } .taya-panel.is-country .tdw-dest-row:hover{ background:#1c1c1c; transform:translateX(2px); } .taya-panel.is-country .tdw-dest-pin{ width:18px; height:18px; flex:0 0 18px; color:var(--warm,#D6C3A3); } .taya-panel.is-country .tdw-dest-name{ font-size:15px; font-weight:700; flex:1; } .taya-panel.is-country .tdw-dest-region{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8a8681; } .taya-panel.is-country .tdw-dest-arrow{ color:var(--warm,#D6C3A3); flex:0 0 16px; } .taya-panel.is-country .tdw-more{ display:grid; grid-template-columns:18px minmax(0,1fr) 18px; align-items:center; justify-items:start; gap:12px; margin-top:14px; padding:16px 18px; border-radius:var(--info-item-radius, 14px); background:var(--info-item-bg, #111111); color:var(--info-title-color,#f4f1ec) !important; font-size:14px; font-weight:700; line-height:1.3; text-align:left; text-decoration:none !important; cursor:pointer; transition:background .18s ease, transform .18s ease; } .taya-panel.is-country .tdw-more::before{ content:""; width:18px; height:18px; grid-column:1; justify-self:center; background:var(--warm,#D6C3A3); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E") center/contain no-repeat; } .taya-panel.is-country .tdw-more:hover{ background:#2A2A2A; transform:translateY(-1px); } .taya-panel.is-country .tdw-more > svg, .taya-panel.is-country .tdw-more .tdw-more-arrow, .taya-panel.is-country .tdw-more .tdw-arrow{ grid-column:3; justify-self:end; width:18px; height:18px; color:var(--warm,#D6C3A3) !important; stroke:currentColor !important; } .taya-panel.is-country .tdw-more svg *{ stroke:currentColor !important; } .taya-panel.is-country .tdw-tab-bar { --tdw-n: 2; } .taya-panel.is-city .tdw-tab-bar { --tdw-n: 3; } /* ════════════════════════════════════════════════════════════════════ 19 · MAP WIDGET (#tlm-map-widget) The Mapbox card in the right column of the info-map section. Restyle via the --map-* tokens. ════════════════════════════════════════════════════════════════════ */ #tlm-map-widget { --map-card-border: #e8e4de; --map-card-radius: 16px; --map-card-bg: #ffffff; --map-stats-border: #e8e4de; --map-stat-padding: 28px 24px; --map-val-font: 'Cormorant Garamond', Georgia, serif; --map-val-size: 24px; --map-val-weight: 300; --map-val-color: #1a1814; --map-lbl-size: 11px; --map-lbl-spacing: 0.04em; --map-lbl-color: #a09b94; --map-dot-color: #1a1814; --map-ring-color: rgba(26,24,20,.35); --map-ring2-color: rgba(26,24,20,.15); --map-label-bg: rgba(255,255,255,.95); --map-label-border: rgba(26,24,20,.14); --map-label-color: #1a1814; --map-label-size: 11px; --map-label-spacing: 0.09em; } #tlm-map-widget, #tlm-map-widget * { box-sizing: border-box; margin: 0; padding: 0; } #tlm-map-widget { width: 100%; display: flex; } /* Card + map area */ #tlm-map-card { width: 100%; display: flex; flex-direction: column; border: 1px solid var(--map-card-border); border-radius: var(--map-card-radius); overflow: hidden; background: var(--map-card-bg); } #tlm-map-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } #tlm-map { position: absolute; inset: 0; width: 100%; height: 100%; } #tlm-map-card .mapboxgl-canvas, #tlm-map-card .mapboxgl-canvas-container { width: 100% !important; height: 100% !important; } #tlm-map-card .mapboxgl-ctrl-bottom-left, #tlm-map-card .mapboxgl-ctrl-bottom-right { display: none !important; } /* Stats row */ #tlm-map-stats { display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; background: var(--map-card-bg); border-top: 1px solid var(--map-stats-border); } .tlm-stat { padding: var(--map-stat-padding); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .tlm-stat + .tlm-stat { border-left: 1px solid var(--map-stats-border); } .tlm-stat-val { display: block; font-family: var(--map-val-font); font-size: var(--map-val-size); font-weight: var(--map-val-weight); line-height: 1.05; color: var(--map-val-color); } .tlm-stat-lbl { display: block; margin-top: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: var(--map-lbl-size); letter-spacing: var(--map-lbl-spacing); color: var(--map-lbl-color); } /* Animated marker + label */ .tlm-marker { display: flex; align-items: center; gap: 8px; pointer-events: none; } .tlm-dot-wrap { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .tlm-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--map-dot-color); } .tlm-ring { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--map-ring-color); animation: tlmPulse 2.4s ease-out infinite; } .tlm-ring2 { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--map-ring2-color); animation: tlmPulse 2.4s ease-out infinite .7s; } @keyframes tlmPulse { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.65); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); } } .tlm-label { background: var(--map-label-bg); border: 1px solid var(--map-label-border); border-radius: 6px; padding: 4px 9px; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: var(--map-label-size); font-weight: 500; letter-spacing: var(--map-label-spacing); color: var(--map-label-color); } /* ════════════════════════════════════════════════════════════════════ 20 · MEXICO GUIDE (.tl-*) Standalone long-form guide page: hero, nav tabs, destination blocks, hotel/activity cards, tools, CTA and FAQ. ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* Hero */ .tl-hero{background: #1A1A19!important;padding:100px 20px 56px!important;text-align:center!important;position:relative!important;overflow:hidden!important;} .tl-hero::before{content:'MX'!important;position:absolute!important;left:-12px!important;top:50%!important;transform:translateY(-50%)!important;font-family:'IBM Plex Mono',monospace!important;font-size:180px!important;font-weight:500!important;color:rgba(255,255,255,0.03)!important;line-height:1!important;pointer-events:none!important;user-select:none!important;} .tl-hero::after{content:''!important;position:absolute!important;top:20%!important;left:50%!important;transform:translateX(-50%)!important;width:400px!important;height:200px!important;background:radial-gradient(ellipse,rgba(0,33,138,0.2) 0%,transparent 70%)!important;pointer-events:none!important;filter:blur(40px)!important;} .tl-hero-title{font-family:'Heebo',sans-serif!important;font-size:clamp(36px,10vw,68px)!important;font-weight:900!important;color:#fff!important;line-height:1.02!important;letter-spacing:-.025em!important;margin-bottom:10px!important;position:relative!important;z-index:1!important;} .tl-hero-sub{font-size:15px!important;font-weight:300!important;letter-spacing:.06em!important;color:rgba(255,255,255,.45)!important;margin-bottom:36px!important;display:block!important;position:relative!important;z-index:1!important;} /* Sticky nav tabs */ .tl-nav{position:-webkit-sticky!important;position:sticky!important;top:0!important;z-index:8000!important;background:#fff!important;border-bottom:1.5px solid #E2DDD6!important;border-top:none!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;width:100%!important;margin:0!important;padding:0!important;} .tl-nav::-webkit-scrollbar{display:none!important;} .tl-nav.tl-fixed{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:8000!important;} .tl-nav-inner{display:flex!important;flex-direction:row!important;justify-content:center!important;min-width:100%!important;width:max-content!important;margin:0 auto!important;padding:0 6px!important;} .tl-tab{display:flex!important;flex-direction:column!important;align-items:center!important;gap:1px!important;padding:11px 14px 9px!important;cursor:pointer!important;border-bottom:3px solid transparent!important;border-top:none!important;border-left:none!important;border-right:none!important;background:none!important;margin:0 0 -1.5px 0!important;transition:all .18s!important;white-space:nowrap!important;user-select:none!important;} .tl-tab-num{font-family:'IBM Plex Mono',monospace!important;font-size:9px!important;letter-spacing:.1em!important;color: #A6A6A6!important;display:block!important;} .tl-tab-label{font-size:13px!important;font-weight:600!important;color:#555!important;display:block!important;} .tl-tab:hover .tl-tab-label,.tl-tab:hover .tl-tab-num,.tl-tab.tl-active .tl-tab-num,.tl-tab.tl-active .tl-tab-label{color: #00218A!important;} .tl-tab.tl-active .tl-tab-label{font-weight:700!important;} .tl-tab.tl-active{border-bottom-color: #00218A!important;} /* Destination headers + labels */ .tl-dest{padding-bottom:8px!important;} .tl-dh{padding:44px 20px 38px!important;text-align:center!important;position:relative!important;overflow:hidden!important;border-radius:0!important;} .tl-dh.c01{background:linear-gradient(135deg, #EDF4FF, #DBEAFE)!important;border-bottom:1px solid #BFDBFE!important;} .tl-dh.c02{background:linear-gradient(135deg, #ECFDF5, #CCFBF1)!important;border-bottom:1px solid #99F6E4!important;} .tl-dh.c03{background:linear-gradient(135deg, #F0FDF4, #DCFCE7)!important;border-bottom:1px solid #BBF7D0!important;} .tl-dh.c04{background:linear-gradient(135deg, #ECFEFF, #CFFAFE)!important;border-bottom:1px solid #A5F3FC!important;} .tl-dh.c05{background:linear-gradient(135deg, #F5F3FF, #EDE9FE)!important;border-bottom:1px solid #DDD6FE!important;} .tl-dh.c06{background:linear-gradient(135deg, #FFFBEB, #FEF3C7)!important;border-bottom:1px solid #FDE68A!important;} .tl-dh.c07{background:linear-gradient(135deg, #FFF5F5, #FEE2E2)!important;border-bottom:1px solid #FECACA!important;} .tl-dh-num{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;font-family:'IBM Plex Mono',monospace!important;font-size:130px!important;font-weight:500!important;line-height:1!important;opacity:.05!important;color: #1A1A19!important;pointer-events:none!important;user-select:none!important;} .tl-dh-meta{font-family:'IBM Plex Mono',monospace!important;font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color: #A6A6A6!important;margin-bottom:10px!important;display:block!important;text-align:center!important;} .tl-dh-name{font-family:'Heebo',sans-serif!important;font-size:clamp(30px,8vw,48px)!important;font-weight:900!important;color: #1A1A19!important;line-height:1.05!important;letter-spacing:-.02em!important;margin-bottom:4px!important;text-align:center!important;display:block!important;} .tl-dh-en{font-family:'IBM Plex Mono',monospace!important;font-size:11px!important;color: #A6A6A6!important;letter-spacing:.08em!important;margin-bottom:14px!important;display:block!important;text-align:center!important;} .tl-dh-desc,.tl-guide .tl-dh .tl-dh-desc,.tl-guide .tl-dh-desc{font-size:15px!important;font-weight:400!important;line-height:1.8!important;color:#555!important;max-width:560px!important;margin:0 auto!important;text-align:center!important;display:block!important;width:100%!important;} .tl-label{display:flex!important;align-items:center!important;gap:12px!important;padding:24px 16px 12px!important;max-width:700px!important;margin:0 auto!important;background:none!important;border:none!important;} .tl-label-line{flex:1!important;height:1px!important;background: #E2DDD6!important;display:block!important;} .tl-label-text{font-family:'IBM Plex Mono',monospace!important;font-size:10px!important;font-weight:500!important;letter-spacing:.15em!important;text-transform:uppercase!important;color: #A6A6A6!important;white-space:nowrap!important;} .tl-sep{max-width:700px!important;margin:28px auto 0!important;padding:0 16px!important;} .tl-sep-line{height:1px!important;background: #E8E4DC!important;display:block!important;} .tl-rv{opacity:1!important;transform:none!important;} .tl-rv.tl-in{opacity:1!important;transform:none!important;} /* Hotel rows */ .tl-hotels{display:flex!important;flex-direction:column!important;gap:10px!important;max-width:700px!important;margin:0 auto!important;padding:0 16px!important;} .tl-hotel,.tl-hotel:link,.tl-hotel:visited{display:flex!important;align-items:center!important;gap:0!important;padding:0!important;background:#fff!important;border:1px solid #E8E4DC!important;border-radius:14px!important;color: #1A1A19!important;margin:0!important;overflow:hidden!important;transition:border-color .2s,box-shadow .2s,transform .2s!important;} .tl-hotel:hover,.tl-hotel:active{border-color:rgba(0,33,138,0.3)!important;box-shadow:0 6px 24px rgba(0,33,138,.08)!important;transform:translateY(-2px)!important;color: #1A1A19!important;} .tl-hotel-accent{width:4px!important;align-self:stretch!important;background:linear-gradient(180deg, #00218A, #3B5FD4)!important;flex-shrink:0!important;display:block!important;} .tl-hotel-info{display:flex!important;flex-direction:column!important;gap:5px!important;flex:1!important;min-width:0!important;padding:16px 18px!important;} .tl-hotel-name{font-size:15px!important;font-weight:700!important;color: #1A1A19!important;line-height:1.25!important;margin:0!important;padding:0!important;} .tl-hotel-meta{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;} .tl-stars{font-size:11px!important;color: #C8A84B!important;letter-spacing:1px!important;} .tl-tag{font-size:9px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;padding:2px 8px!important;border-radius:100px!important;background:rgba(0,33,138,0.06)!important;color: #00218A!important;display:inline-block!important;} .tl-book,.tl-book:link,.tl-book:visited,.tl-book:hover,.tl-book:active{flex-shrink:0!important;display:flex!important;align-items:center!important;gap:6px!important;padding:14px 18px!important;background:transparent!important;color: #00218A!important;border-right:none!important;border-left:1px solid #E8E4DC!important;font-size:12px!important;font-weight:700!important;font-family:'Heebo',sans-serif!important;white-space:nowrap!important;border-top:none!important;border-bottom:none!important;text-decoration:none!important;align-self:stretch!important;transition:background .18s,color .18s!important;} .tl-book svg{width:13px!important;height:13px!important;flex-shrink:0!important;} .tl-hotel:hover .tl-book{background:rgba(0,33,138,0.05)!important;color: #001670!important;} /* Activity + place cards */ .tl-ext-icon{display:inline-block!important;vertical-align:middle!important;flex-shrink:0!important;transform:scaleX(-1)!important;} .tl-acts-wrap{max-width:700px!important;margin:0 auto!important;padding:0 16px!important;} .tl-acts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;} .tl-act,.tl-act:link,.tl-act:visited{display:flex!important;flex-direction:column!important;gap:6px!important;padding:14px 12px!important;background:#fff!important;border:1px solid #E8E4DC!important;border-radius:10px!important;color: #1A1A19!important;margin:0!important;transition:border-color .18s,box-shadow .18s!important;} .tl-act-maps,.tl-act-maps:link,.tl-act-maps:visited{background:#fff!important;border-color: #E8E4DC!important;} .tl-act:hover,.tl-act:active,.tl-act-maps:hover,.tl-act-maps:active{border-color:rgba(0,33,138,0.22)!important;box-shadow:0 2px 12px rgba(0,33,138,.06)!important;color: #1A1A19!important;} .tl-act-icon{font-size:20px!important;line-height:1!important;display:block!important;} .tl-act-name{font-size:12px!important;font-weight:600!important;color: #1A1A19!important;line-height:1.3!important;flex:1!important;margin:0!important;} .tl-act-arrow{display:flex!important;align-items:center!important;color: #00218A!important;align-self:flex-end!important;margin-top:auto!important;opacity:.7!important;} .tl-act-maps .tl-act-arrow{color: #16A34A!important;} /* Tools + CTA */ .tl-eyebrow{font-family:'IBM Plex Mono',monospace!important;font-size:10px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color: #D6C3A3!important;margin-bottom:14px!important;display:block!important;position:relative!important;z-index:1!important;} .tl-tools{display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:center!important;position:relative!important;z-index:1!important;} .tl-pill,.tl-pill:link,.tl-pill:visited,.tl-pill:hover,.tl-pill:active{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:10px 16px!important;border-radius:100px!important;border:1px solid rgba(255,255,255,0.15)!important;background:rgba(255,255,255,0.07)!important;font-size:13px!important;font-weight:500!important;color:#fff!important;cursor:pointer!important;} .tl-pill:hover,.tl-pill:active{background:rgba(0,33,138,.35)!important;border-color:rgba(0,33,138,.6)!important;} .tl-cta{max-width:520px!important;margin:0 auto!important;padding:44px 16px 24px!important;display:flex!important;flex-direction:column!important;gap:12px!important;text-align:center!important;} .tl-cta-title{font-family:'Heebo',sans-serif!important;font-size:22px!important;font-weight:900!important;color: #1A1A19!important;letter-spacing:-.01em!important;line-height:1.2!important;} .tl-cta-sub{font-size:14px!important;font-weight:400!important;color:#666!important;line-height:1.65!important;margin-bottom:4px!important;} .tl-cta-heading{font-family:'IBM Plex Mono',monospace!important;font-size:10px!important;font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase!important;color: #A6A6A6!important;margin-bottom:4px!important;display:block!important;} .tl-cta-btn,.tl-cta-btn:link,.tl-cta-btn:visited{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;gap:10px!important;padding:15px 24px!important;border-radius:12px!important;font-family:'Heebo',sans-serif!important;font-size:15px!important;font-weight:700!important;border:none!important;cursor:pointer!important;} .tl-btn-emoji{flex-shrink:0!important;} .tl-btn-text{flex:1!important;text-align:center!important;} .tl-cta-wa,.tl-cta-wa:link,.tl-cta-wa:visited,.tl-cta-wa:hover,.tl-cta-wa:active{background: #25D366!important;color:#fff!important;} .tl-cta-fb,.tl-cta-fb:link,.tl-cta-fb:visited{background:#fff!important;color: #1A1A19!important;border:1.5px solid #D4CEC4!important;} .tl-cta-fb:hover,.tl-cta-fb:active{border-color:rgba(0,33,138,0.25)!important;background:rgba(0,33,138,0.04)!important;color: #00218A!important;} /* FAQ accordion (guide-page version, RTL) */ .tl-faq{max-width:700px!important;margin:0 auto!important;padding:40px 16px 48px!important;direction:rtl!important;text-align:right!important;} .tl-faq *{direction:rtl!important;text-align:right!important;} .tl-faq-heading{font-size:18px!important;font-weight:800!important;color: #1A1A19!important;margin-bottom:20px!important;text-align:center!important;letter-spacing:-.01em!important;direction:rtl!important;} .tl-faq-item{background:#fff!important;border:1px solid #E8E4DC!important;border-radius:12px!important;margin-bottom:8px!important;overflow:hidden!important;transition:border-color .18s!important;} .tl-faq-item[open]{border-color:rgba(0,33,138,0.2)!important;} .tl-faq-q{list-style:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:16px 20px!important;font-size:14px!important;font-weight:700!important;color: #1A1A19!important;cursor:pointer!important;user-select:none!important;direction:rtl!important;text-align:right!important;} .tl-faq-q::-webkit-details-marker{display:none!important;} .tl-faq-q::after{content:''!important;display:inline-block!important;width:8px!important;height:8px!important;border-right:2px solid #00218A!important;border-bottom:2px solid #00218A!important;transform:rotate(45deg)!important;flex-shrink:0!important;margin-left:0!important;margin-right:auto!important;transition:transform .2s!important;} .tl-faq-item[open] .tl-faq-q::after{transform:rotate(-135deg)!important;} .tl-faq-a{padding:0 20px 18px!important;font-size:14px!important;font-weight:400!important;color:#555!important;line-height:1.75!important;direction:rtl!important;text-align:right!important;} /* Misc guide resets */ .tl-guide h2,.tl-guide h3{margin:0!important;padding:0!important;border:none!important;background:none!important;} .tl-guide p{margin:0!important;padding:0!important;} /* Guide responsive */ @media(min-width:600px){.tl-acts{grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;}.tl-act{align-items:center!important;text-align:center!important;}.tl-act-arrow{align-self:center!important;}} @media(min-width:768px){.tl-hotel-name{font-size:16px!important;}.tl-book{padding:16px 22px!important;font-size:13px!important;}.tl-hero{padding:110px 32px 64px!important;}.tl-hotels,.tl-acts-wrap,.tl-faq{padding-right:20px!important;padding-left:20px!important;}.tl-label{padding:28px 20px 14px!important;}.tl-dh-desc,.tl-guide .tl-dh .tl-dh-desc{max-width:620px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;}.tl-faq-heading{font-size:22px!important;}.tl-faq{direction:rtl!important;text-align:right!important;}} /* ════════════════════════════════════════════════════════════════════ 21 · HOTEL CARDS CAROUSEL (.thc) — NEW Clean-HTML carousel. All styling lives here; the HTML stays class-only. Desktop: JS transform carousel (centers the middle of three). Mobile: native scroll-snap (1 full card + right peek). To restyle: edit the --thc-* tokens below. ════════════════════════════════════════════════════════════════════ */ .thc { --thc-card-h: 452px; /* card height */ --thc-card-radius: 24px; /* card corners */ --thc-fab-radius: 22px; /* button corners (rounded SQUARE, not circle) */ --thc-gap-x: 26px; /* space between cards */ --thc-bg: var(--light); /* section bg = notch gap color */ --thc-fab: var(--dark); /* corner button color */ --thc-star: #F7931E; /* rating star color */ --thc-title: var(--light); /* card title / price text */ --thc-fab-size: 56px; /* corner button size */ --thc-notch-r: 20px; /* concave notch radius */ --thc-notch-gap: 12px; /* gap between button and card */ --thc-card-w: min(360px, 86vw); /* FIXED width — never stretches with the section */ --thc-arrow-bg: #EFEBE4; /* arrow idle */ --thc-arrow-hover: #E4DCCE; /* arrow hover */ --thc-arrow-active: #D6CBB6; /* arrow active — same warm hue, a touch deeper */ direction: ltr; width: 100%; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .thc *, .thc *::before, .thc *::after { box-sizing: border-box; } /* Top bar: quote button + arrows */ .thc-head { display: flex; align-items: center; justify-content: flex-end; /* quote + arrows grouped on the right */ gap: 12px; margin-bottom: 30px; padding: 20px 24px 0 4px; /* top space + right space so arrows aren't flush to edge */ } .thc-quote { display: inline-flex; align-items: center; gap: 9px; background: var(--thc-bg); color: #000 !important; /* black text — override the site's blue link color */ border: 1px solid rgba(26,26,25,.14); border-radius: 100px; padding: 13px 22px; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .18s, border-color .18s; } .thc-quote:hover { background: #fff; border-color: rgba(26,26,25,.28); } .thc-quote::after { content: ""; width: 7px; height: 7px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); } .thc-nav { display: flex; gap: 10px; flex-shrink: 0; } .thc-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(26,26,25,.14); background: var(--thc-arrow-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; outline: none; -webkit-tap-highlight-color: transparent; transition: background .18s, border-color .18s; } .thc-arrow:hover { background: var(--thc-arrow-hover); border-color: rgba(26,26,25,.3); } /* keep active/focus in the same warm hue — never the theme's pink/red */ .thc-arrow:active, .thc-arrow:focus, .thc-arrow:focus-visible { background: var(--thc-arrow-active) !important; border-color: rgba(26,26,25,.34) !important; outline: none !important; box-shadow: none !important; color: var(--dark) !important; } .thc-arrow::before { content: ""; width: 8px; height: 8px; border-top: 2px solid var(--dark); border-right: 2px solid var(--dark); } .thc-prev::before { transform: rotate(-135deg); margin-left: 3px; } .thc-next::before { transform: rotate(45deg); margin-right: 3px; } /* Viewport + track */ .thc-viewport { overflow: hidden; width: 100%; padding: 6px 0; } .thc-track { display: flex; gap: var(--thc-gap-x); will-change: transform; } /* Card + image + gradient */ .thc-card { position: relative; flex: 0 0 var(--thc-card-w); height: var(--thc-card-h); border-radius: var(--thc-card-radius); overflow: hidden; color: var(--thc-title); isolation: isolate; background: #3a3f45; } .thc-card-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; z-index: 0; } .thc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,22,26,.12) 0%, rgba(20,22,26,.30) 45%, rgba(20,22,26,.74) 100%); } /* Tags */ .thc-card-tags { position: relative; z-index: 2; display: flex; gap: 8px; justify-content: center; padding-top: 22px; } .thc-tag { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #f2f2f2; font-size: 10px; font-weight: 700; letter-spacing: .16em; padding: 8px 14px; border-radius: 100px; } /* Title / stars / price */ .thc-card-body { position: absolute; left: 26px; bottom: 28px; z-index: 2; max-width: calc(100% - 52px); } .thc-card-title { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1.02; margin: 0 0 16px; text-transform: none; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .thc-stars { width: 110px; height: 20px; margin-bottom: 13px; background-color: var(--thc-star); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26L21 9.27l-4.5 4.14L17.8 21 12 17.27 6.2 21l1.3-7.59L3 9.27l6.1-1.01z'/%3E%3C/svg%3E") repeat-x left center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26L21 9.27l-4.5 4.14L17.8 21 12 17.27 6.2 21l1.3-7.59L3 9.27l6.1-1.01z'/%3E%3C/svg%3E") repeat-x left center; -webkit-mask-size: 22px 20px; mask-size: 22px 20px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); } .thc-card-price { margin: 0; font-size: 13px; font-weight: 700; line-height: 1; } .thc-price-now { font-size: 24px; font-weight: 800; } .thc-card-price s { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.6); margin-left: 7px; } /* Bottom-right notch + corner button */ .thc-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(var(--thc-fab-size) + var(--thc-notch-gap)); height: calc(var(--thc-fab-size) + var(--thc-notch-gap)); background: var(--thc-bg); border-top-left-radius: var(--thc-notch-r); z-index: 3; } .thc-fab { position: absolute; right: 0; bottom: 0; width: var(--thc-fab-size); height: var(--thc-fab-size); background: var(--thc-fab); /* rounded square. bottom-right is clipped by the card corner; keep card radius >= fab radius so that corner never looks rounder than the rest. */ border-radius: var(--thc-fab-radius); z-index: 5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; } .thc-fab:hover { background: #000; transform: scale(1.05); } /* concave fillets where the notch meets the card edges */ .thc-fab::before, .thc-fab::after { content: ""; position: absolute; width: var(--thc-notch-r); height: var(--thc-notch-r); z-index: 4; background: radial-gradient(circle at top left, transparent var(--thc-notch-r), var(--thc-bg) 0); } .thc-fab::before { /* rounds junction on the card's right edge */ top: calc(-1 * (var(--thc-notch-gap) + var(--thc-notch-r))); right: 0; } .thc-fab::after { /* rounds junction on the card's bottom edge */ left: calc(-1 * (var(--thc-notch-gap) + var(--thc-notch-r))); bottom: 0; } .thc-fab-icon { width: 23px; height: 23px; background-color: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h10v10h-2.2V9.75L7.4 18.05 6 16.6 14.25 8.2H8z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h10v10h-2.2V9.75L7.4 18.05 6 16.6 14.25 8.2H8z'/%3E%3C/svg%3E") no-repeat center / contain; } /* Hotel carousel — responsive */ @media (max-width: 767px) { .thc { --thc-card-h: 500px; --thc-card-w: 80vw; --thc-gap-x: 16px; } .ts.hotel-carousel-section, .ts.e-con:has(.thc) { padding-bottom: 100px !important; } .thc-card-title { font-size: 34px; } .thc-head { justify-content: center; } } /* Section full width — edge to edge, NO side gaps (desktop + mobile). The side gaps were the section's horizontal padding; it was only being removed on mobile, so it stayed on desktop. Now removed at all widths. */ .e-con:has(.thc) > .e-con-inner { max-width: 100% !important; } .e-con:has(.thc) { padding-left: 0 !important; padding-right: 0 !important; } /* Mobile: native touch scroll. transform:none neutralizes any leftover JS translate so the track is positioned only by native scroll → 1 full card + right peek, small 16px left gap, no left peek. */ @media (max-width: 767px) { .thc-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-left: 16px; scrollbar-width: none; } .thc-viewport::-webkit-scrollbar { display: none; } .thc-track { padding-left: 16px; padding-right: 16px; transform: none !important; } .thc-card { scroll-snap-align: start; } } /* ════════════════════════════════════════════════════════════════════ 22 · DESTINATION CARDS CAROUSEL (.tdc) — NEW Section class: .destinations-carousel (was .s-cities) Same look/size as the hotel cards, but: - corner button in the TOP-RIGHT (white button, dark notch) - region badge top-left, destination name centered - no visible arrows; auto-scrolls one card at a time (via JS) To restyle: edit the --tdc-* tokens below. ════════════════════════════════════════════════════════════════════ */ .tdc { --tdc-card-h: 452px; /* card height (same as hotels) */ --tdc-card-radius: 24px; --tdc-fab-radius: 22px; --tdc-gap-x: 26px; --tdc-bg: #1A1A19; /* dark backing behind the button (the notch effect) */ --tdc-fab: #ffffff; /* button background — white */ --tdc-fab-icon: #1A1A19; /* arrow glyph — black */ --tdc-title: var(--light); --tdc-fab-size: 56px; --tdc-notch-r: 20px; --tdc-notch-gap: 12px; --tdc-card-w: min(360px, 86vw); /* FIXED width — never stretches with the section */ direction: ltr; width: 100%; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .tdc *, .tdc *::before, .tdc *::after { box-sizing: border-box; } /* Viewport + track */ .tdc-viewport { overflow: hidden; width: 100%; padding: 6px 0; } .tdc-track { display: flex; gap: var(--tdc-gap-x); will-change: transform; } /* Card + image + overlay */ .tdc-card { position: relative; flex: 0 0 var(--tdc-card-w); height: var(--tdc-card-h); border-radius: var(--tdc-card-radius); overflow: hidden; color: var(--tdc-title); isolation: isolate; background: #3a3f45; } .tdc-card-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; z-index: 0; } .tdc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 78% at 50% 45%, rgba(0,0,0,.30), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.06) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.20) 100%); } /* Region badge + centered name */ .tdc-badge { position: absolute; top: 22px; left: 22px; z-index: 2; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #f2f2f2; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 8px 15px; border-radius: 100px; } .tdc-card-title { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 26px; margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.04; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0,0,0,.4); } /* Top-right notch + corner button */ .tdc-card::after { content: ""; position: absolute; right: -2px; top: -2px; /* overshoot the edges — the card clips it, killing the seam */ width: calc(var(--tdc-fab-size) + var(--tdc-notch-gap) + 2px); height: calc(var(--tdc-fab-size) + var(--tdc-notch-gap) + 2px); background: var(--tdc-bg); border-bottom-left-radius: var(--tdc-notch-r); z-index: 3; } .tdc-fab { position: absolute; right: 0; top: 0; width: var(--tdc-fab-size); height: var(--tdc-fab-size); background: var(--tdc-fab); border-radius: var(--tdc-fab-radius); z-index: 5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; } .tdc-fab:hover { background: #eeeae2; transform: scale(1.05); } /* concave fillets where the notch meets the card edges */ .tdc-fab::before, .tdc-fab::after { content: ""; position: absolute; width: var(--tdc-notch-r); height: var(--tdc-notch-r); z-index: 4; background: radial-gradient(circle at bottom left, transparent var(--tdc-notch-r), var(--tdc-bg) 0); } .tdc-fab::before { /* rounds junction on the card's right edge (below the notch) */ top: calc(var(--tdc-fab-size) + var(--tdc-notch-gap)); right: -2px; /* overshoot right edge — clipped by the card */ width: calc(var(--tdc-notch-r) + 2px); } .tdc-fab::after { /* rounds junction on the card's top edge (left of the notch) */ right: calc(var(--tdc-fab-size) + var(--tdc-notch-gap)); top: 0; } .tdc-fab-icon { width: 23px; height: 23px; background-color: var(--tdc-fab-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h10v10h-2.2V9.75L7.4 18.05 6 16.6 14.25 8.2H8z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h10v10h-2.2V9.75L7.4 18.05 6 16.6 14.25 8.2H8z'/%3E%3C/svg%3E") no-repeat center / contain; } /* Destination carousel — responsive */ @media (max-width: 767px) { .tdc { --tdc-card-h: 430px; --tdc-gap-x: 16px; } .tdc-card-title { font-size: 34px; } } /* Section full width — without breaking centering */ .ts.destinations-carousel > .e-con-inner { max-width: 100% !important; } @media (max-width: 767px) { .ts.destinations-carousel { padding-left: 0 !important; padding-right: 0 !important; } } /* ── כפתור Get a Quote — גרסה בהירה על רקע כהה ── */ .tdc-head{ display:flex; align-items:center; justify-content:flex-end; padding:0 24px 26px; } .tdc-quote, .tdc-quote:link, .tdc-quote:visited{ display:inline-flex; align-items:center; gap:9px; background:var(--light); color:var(--dark) !important; border:1px solid rgba(248,248,247,.25); border-radius:100px; padding:13px 22px; font-size:15px; font-weight:700; line-height:1; text-decoration:none !important; white-space:nowrap; cursor:pointer; transition:background .18s, border-color .18s, transform .18s; } .tdc-quote:hover{ background:#fff; border-color:rgba(248,248,247,.5); transform:translateY(-1px); } .tdc-quote::after{ content:""; width:7px; height:7px; border-right:2px solid var(--dark); border-bottom:2px solid var(--dark); transform:rotate(-45deg); } @media (max-width:767px){ .tdc-head{ justify-content:center; padding:0 16px 22px; } } /* ════════════════════════════════════════════════════════════════════ 23 · CTA BUTTON (.tcta) — reusable black pill Clean-HTML button used across sections. Pair with .contact-webhook and data-section="..." so every click fires the global webhook. ════════════════════════════════════════════════════════════════════ */ .tcta, .tcta:link, .tcta:visited { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; /* self-centering, no matter the parent */ background: var(--dark) !important; color: var(--light) !important; font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-size: 18px; font-weight: 700; line-height: 1; padding: 20px 40px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .18s ease, transform .18s ease; } .tcta:hover, .tcta:active { background: #2A2A2A !important; transform: translateY(-1px); } .tcta-sm { padding: 14px 28px; font-size: 15px; } /* smaller variant */ /* CTA block at the end of the comparison section */ .ts.s-comparison .comp-cta { text-align: center; margin-top: 8px; } .ts.s-comparison .comp-cta-text { font-size: var(--comp-intro-size); line-height: 1.7; color: var(--comp-td-color); max-width: 560px; margin: 0 auto 20px; } /* ════════════════════════════════════════════════════════════════════ 24 · HERO — DESTINATION (.thero) — modern SaaS, split layout Left = copy (eyebrow, headline w/ rotating word, sub, CTAs). Right = offset "bento" tile cluster (glass, tinted, floating). Background = destination photo + dark overlay (stronger on the left for text legibility). Content lives in the HTML widget; the rotating-word behavior lives in the "Hero" footer snippet. Restyle via --thero-*. ════════════════════════════════════════════════════════════════════ */ .thero { --thero-img: url('https://tayalux.com/wp-content/uploads/2026/03/Untitled-design-scaled.png'); --thero-overlay: linear-gradient(90deg, rgba(18,17,16,.94) 0%, rgba(18,17,16,.80) 46%, rgba(18,17,16,.52) 100%); --thero-eyebrow: #D6C3A3; --thero-title: #F8F8F7; --thero-accent: #D6C3A3; /* rotating word color */ --thero-sub: rgba(248,248,247,.68); --thero-btn-bg: #F8F8F7; --thero-btn-fg: #1A1A19; --thero-ghost-bd: rgba(248,248,247,.28); --thero-ghost-fg: #F8F8F7; --thero-tile-bd: rgba(248,248,247,.18); --thero-tile-val: #F8F8F7; --thero-tile-lbl: rgba(248,248,247,.72); --thero-star: #F7931E; --thero-btn-radius: 100px; direction: ltr; position: relative; overflow: hidden; isolation: isolate; width: 100%; background: var(--thero-overlay), var(--thero-img); background-size: cover, cover; background-position: center, center; padding: clamp(70px, 9vw, 120px) clamp(20px, 6vw, 90px); font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .thero *, .thero *::before, .thero *::after { box-sizing: border-box; } /* Let the hero fill its Elementor section edge-to-edge — no manual full-width / zero-padding settings needed in the editor. */ .e-con:has(.thero) > .e-con-inner { max-width: 100% !important; } .e-con:has(.thero) { padding: 0 !important; } /* Split layout */ .thero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center; } /* LEFT — copy */ .thero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .thero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--thero-eyebrow); border: 1px solid var(--thero-ghost-bd); border-radius: 100px; padding: 8px 16px; margin-bottom: 24px; background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .thero-title { margin: 0 0 22px; font-size: clamp(38px, 4.8vw, 66px); font-weight: 900; line-height: 1.04; letter-spacing: -.03em; color: var(--thero-title); } .thero-rotate { display: inline-block; color: var(--thero-accent); transition: opacity .35s ease, transform .35s ease; } .thero-rotate.is-swap { opacity: 0; transform: translateY(10px); } .thero-sub { margin: 0 0 32px; max-width: 520px; font-size: clamp(15px, 1.4vw, 18px); font-weight: 400; line-height: 1.7; color: var(--thero-sub); } .thero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; } .thero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 30px; border-radius: var(--thero-btn-radius); font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .thero-btn-primary, .thero-btn-primary:link, .thero-btn-primary:visited { background: var(--thero-btn-bg); color: var(--thero-btn-fg) !important; border: 1px solid var(--thero-btn-bg); } .thero-btn-primary:hover { transform: translateY(-2px); } .thero-btn-primary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } .thero-btn-ghost, .thero-btn-ghost:link, .thero-btn-ghost:visited { background: transparent; color: var(--thero-ghost-fg) !important; border: 1px solid var(--thero-ghost-bd); } .thero-btn-ghost:hover { border-color: var(--thero-ghost-fg); transform: translateY(-2px); } /* RIGHT — offset tile cluster */ .thero-cluster { position: relative; width: 100%; min-height: 430px; } .thero-tile { position: absolute; width: 54%; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--thero-tile-bd); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); box-shadow: 0 22px 55px rgba(0,0,0,.38); animation: theroFloat 6s ease-in-out infinite; } .thero-tile-val { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 300; line-height: 1; color: var(--thero-tile-val); } .thero-tile-lbl { font-size: 12px; letter-spacing: .03em; color: var(--thero-tile-lbl); } .thero-tile-stars { font-size: 18px; letter-spacing: 2px; line-height: 1; color: var(--thero-star); } .thero-tile-a { left: 0; top: 0; background: rgba(55,138,221,.26); animation-delay: 0s; } .thero-tile-b { right: 0; top: 19%; background: rgba(214,195,163,.24); animation-delay: .8s; } .thero-tile-c { left: 4%; top: 45%; background: rgba(216,90,48,.24); animation-delay: 1.6s; } .thero-tile-d { right: 3%; top: 63%; background: rgba(248,248,247,.13); animation-delay: 2.4s; } @keyframes theroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Entrance fade-up — pure CSS */ @keyframes theroUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .thero-copy > * { animation: theroUp .7s cubic-bezier(.4,0,.2,1) both; } .thero-copy > *:nth-child(1) { animation-delay: .05s; } .thero-copy > *:nth-child(2) { animation-delay: .15s; } .thero-copy > *:nth-child(3) { animation-delay: .25s; } .thero-copy > *:nth-child(4) { animation-delay: .35s; } .thero-cluster { animation: theroUp .8s cubic-bezier(.4,0,.2,1) both .35s; } @media (prefers-reduced-motion: reduce) { .thero-copy > *, .thero-cluster, .thero-tile { animation: none; } .thero-rotate { transition: none; } } /* Responsive */ @media (max-width: 900px) { .thero-inner { grid-template-columns: 1fr; gap: 44px; } .thero-copy { align-items: center; text-align: center; } .thero-sub { margin-left: auto; margin-right: auto; } .thero-cta-row { justify-content: center; } .thero-cluster { width: 100%; max-width: 400px; margin: 0 auto; min-height: 380px; } } @media (max-width: 480px) { .thero-tile { width: 60%; padding: 14px 16px; } .thero-tile-val { font-size: 28px; } .thero-cta-row { width: 100%; } .thero-btn { flex: 1 1 auto; } } /* ════════════════════════════════════════════════════════════════════ 25 · HERO — TULUM EDITORIAL (.taya / .ty-*) Editorial split hero: big copy (left) + tall image panel (right) with a detached stats card and a floating lead form, followed by the intro block. Markup lives in the page HTML widget; the rotating word + favourite-heart behaviour lives in the "Hero" footer snippet. Uses the site tokens from section 01 (--light/--dark/--warm/--gray/--soft). ════════════════════════════════════════════════════════════════════ */ /* scope the reset locally instead of a global *{} */ .taya, .taya *{ box-sizing:border-box; } .taya{ background:transparent; font-family:'Heebo','Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--dark); -webkit-font-smoothing:antialiased; padding:clamp(80px,9vw,130px) clamp(20px,6vw,90px) clamp(56px,7vw,90px);} .taya-wrap{max-width:1220px;margin:0 auto;} /* ── breadcrumb ──────────────────────────────────────────────────── */ .taya .ty-crumb{margin:0 0 clamp(26px,3.5vw,40px); font-family:'Heebo',sans-serif;font-size:12px;font-weight:700;color:#6b6b68;} .taya .ty-crumb a{color:#6b6b68;text-decoration:none;} .taya .ty-crumb a:hover{color:#000;} .taya .ty-crumb .sep{color:#c7c7c4;padding:0 6px;font-weight:400;} .taya .ty-crumb .last{color:#111;} /* ── HERO GRID ───────────────────────────────────────────────────── */ .taya .ty-hero{display:grid;grid-template-columns:1.08fr 0.92fr; grid-template-areas:"copy stage" "trust stage"; grid-template-rows:auto auto; column-gap:clamp(34px,4.5vw,74px);align-items:center;} .taya .ty-copy{grid-area:copy;align-self:end;max-width:560px;} .taya .ty-trust{grid-area:trust;align-self:start;margin-top:30px;} .taya .ty-stage{grid-area:stage;grid-row:1 / span 2;align-self:center;} /* LEFT — copy */ .taya .ty-eyebrow{display:inline-flex;align-items:center; margin-bottom:26px;border:none; background:#CBB68F;color:var(--dark); font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;line-height:1; padding:4px 12px;border-radius:100px;} .taya .ty-title{margin:0 0 26px;font-weight:900;letter-spacing:-.035em; font-size:clamp(40px,5.6vw,74px);line-height:.98;color:var(--dark);} .taya .ty-title .line2{display:inline;} .taya .ty-rotate{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic; font-weight:400;color:var(--warm);letter-spacing:-.01em; transition:opacity .4s ease,transform .4s ease;display:inline-block;} .taya .ty-rotate.swap{opacity:0;transform:translateY(12px);} .taya .ty-sub{margin:0 0 30px;max-width:470px; font-size:clamp(15px,1.35vw,17px);line-height:1.75;color:#565654;} /* trust row */ .taya .ty-trust{display:flex;align-items:center;gap:14px;} .taya .ty-avatars{display:flex;} .taya .ty-avatars span{width:34px;height:34px;border-radius:50%; border:2px solid var(--light);margin-left:-10px;background-size:cover; background-position:center;box-shadow:0 2px 6px rgba(0,0,0,.12);} .taya .ty-avatars span:first-child{margin-left:0;} .taya .ty-trust p{margin:0;font-size:13px;line-height:1.4;color:#565654;} .taya .ty-trust b{color:var(--dark);font-weight:800;} .taya .ty-stars{color:var(--warm);letter-spacing:1px;font-size:12px;} /* RIGHT — stage = shared positioning context for image + floating cards */ .taya .ty-stage{position:relative;width:100%;max-width:470px;margin:0 auto;} .taya .ty-panel{position:relative;border-radius:26px;overflow:visible; width:100%;aspect-ratio:4/5;min-height:440px;} .taya .ty-panel .frame{position:absolute;inset:0;border-radius:26px;overflow:hidden; box-shadow:0 30px 70px rgba(26,26,25,.16);} .taya .ty-panel img{width:100%;height:100%;object-fit:cover;display:block;} .taya .ty-panel .frame::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 72%,rgba(0,0,0,.14) 100%);} /* glass destination chip (top-left) */ .taya .ty-chip{position:absolute;top:16px;left:16px;z-index:3; display:flex;align-items:center;gap:9px; padding:9px 15px 9px 12px;border-radius:100px;color:#fff; background:rgba(255,255,255,.14);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);} .taya .ty-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--warm); box-shadow:0 0 0 4px rgba(214,195,163,.3);} .taya .ty-chip b{font-size:14px;font-weight:800;letter-spacing:-.01em;} .taya .ty-chip small{font-size:11px;opacity:.82;margin-left:2px;} /* favourite heart (top-right) */ .taya .ty-fav{position:absolute;top:16px;right:16px;z-index:3; width:42px;height:42px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.32); transition:background .18s,transform .18s;} .taya .ty-fav:hover{background:rgba(255,255,255,.28);transform:scale(1.06);} .taya .ty-fav svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;} .taya .ty-fav.on svg{fill:#fff;} /* headline over image bottom */ .taya .ty-panel .cap{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;color:#fff;} .taya .ty-panel .cap h3{margin:0;font-size:34px;font-weight:800;letter-spacing:-.03em; text-shadow:0 2px 18px rgba(0,0,0,.4);} .taya .ty-panel .cap p{margin:5px 0 0;font-size:13px;color:rgba(255,255,255,.86);} /* ── DETACHED STATS CARD (the "counter") ─────────────────────────── */ .taya .ty-stats{position:absolute;z-index:5;right:-104px;top:31%;transform:translateY(-50%); width:168px;background:#fff;border-radius:20px; border:1px solid rgba(26,26,25,.07); box-shadow:0 24px 55px rgba(26,26,25,.20); padding:16px 18px;} .taya .ty-stats .row{display:flex;align-items:center;justify-content:space-between; padding:9px 0;border-bottom:1px solid rgba(26,26,25,.07);} .taya .ty-stats .row:last-child{border-bottom:none;padding-bottom:2px;} .taya .ty-stats .row:first-child{padding-top:2px;} .taya .ty-stats .k{display:flex;align-items:center;gap:8px;font-size:12px;color:#7a7a77;font-weight:500;} .taya .ty-stats .k svg{width:15px;height:15px;stroke:var(--warm);fill:none;stroke-width:1.9;} .taya .ty-stats .v{font-size:15px;font-weight:800;color:var(--dark);letter-spacing:-.01em;} .taya .ty-stats .v small{font-size:11px;font-weight:600;color:#9a9895;} .taya .ty-badge{position:absolute;top:-13px;right:16px; font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:#fff; background:var(--dark);padding:5px 11px;border-radius:100px;} /* ── FLOATING VERTICAL FORM (4 rows) ─────────────────────────────── */ .taya .ty-form{position:absolute;z-index:6;top:61%;left:-46px;transform:translateY(-50%); width:238px;background:#fff;border-radius:22px; border:1px solid rgba(26,26,25,.07); box-shadow:0 28px 64px rgba(26,26,25,.22); padding:20px;color-scheme:light;} .taya .ty-form h4{margin:0 0 3px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--dark);} .taya .ty-form .fsub{margin:0 0 15px;font-size:12px;line-height:1.5;color:#7a7a77;} .taya .ty-row{display:flex;align-items:center;gap:10px; background:#F6F5F3;border:1px solid rgba(26,26,25,.08); border-radius:12px;padding:11px 14px;margin-bottom:9px; transition:border-color .18s,background .18s;} .taya .ty-row:focus-within{border-color:var(--warm);background:#fff;} .taya .ty-row svg{width:17px;height:17px;stroke:#8a7a5c;fill:none;stroke-width:1.8;flex-shrink:0;} .taya .ty-row input{border:none;outline:none;background:transparent;font-family:inherit; font-size:14px;font-weight:500;color:var(--dark);width:100%;min-width:0; -webkit-appearance:none;appearance:none;} .taya .ty-row input::placeholder{color:#a8a6a2;font-weight:500;} .taya .ty-row input[type=date]{color:#a8a6a2;} .taya .ty-row input[type=date]:valid{color:var(--dark);} .taya .ty-row input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;} .taya .ty-submit{width:100%;margin-top:5px;border:none;cursor:pointer; background:var(--dark);color:#fff;border-radius:12px;padding:13px; font-family:inherit;font-size:15px;font-weight:700; display:flex;align-items:center;justify-content:center;gap:9px; transition:background .18s,transform .18s;} .taya .ty-submit:hover{background:#2A2A2A;transform:translateY(-1px);} .taya .ty-submit svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;} /* ── INTRO block ─────────────────────────────────────────────────── */ .taya .ty-divider{width:100%;height:1px;background:var(--divider-dark-line); margin:clamp(52px,7vw,84px) 0 0;border:none;} .taya .ty-intro{max-width:720px;margin:0 auto;padding-top:clamp(48px,6vw,80px);text-align:center;} .taya .ty-intro .kicker{display:block;width:44px;height:3px;border-radius:2px; background:var(--warm);margin:0 auto clamp(24px,3vw,32px);} .taya .ty-intro h2{margin:0 0 16px;font-size:clamp(21px,2.6vw,28px);font-weight:800; line-height:1.2;letter-spacing:-.015em;color:var(--dark);} .taya .ty-intro h2 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic; font-weight:400;color:var(--warm);} .taya .ty-intro p{margin:0 auto 38px;max-width:520px;font-size:16px;line-height:1.85;color:#565654;} .taya .ty-intro .cta{display:inline-flex;align-items:center;gap:10px;background:var(--dark); color:#fff;font-size:16px;font-weight:700;padding:17px 34px;border-radius:100px; border:none;cursor:pointer;text-decoration:none;transition:background .18s,transform .18s;} .taya .ty-intro .cta:hover{background:#2A2A2A;transform:translateY(-1px);} .taya .ty-intro .cta::after{content:"";width:7px;height:7px;border-right:2px solid #fff; border-bottom:2px solid #fff;transform:rotate(-45deg);} /* ── responsive ──────────────────────────────────────────────────── */ /* desktop: nudge the whole right cluster (image + stats + form) up ~8px */ @media(min-width:941px){ .taya .ty-stage{transform:translateY(-30px);} } /* tighten overhangs on mid-desktop so nothing runs off screen */ @media(max-width:1080px) and (min-width:941px){ .taya .ty-form{left:-14px;width:222px;} .taya .ty-stats{right:-60px;width:158px;} .taya .ty-stage{max-width:400px;} } /* ══ TABLET / MOBILE (≤940): single column ══ Image + search form merge into ONE card (image top, form bottom). Stats card + gold eyebrow hidden; trust row moves below the card. */ @media(max-width:940px){ .taya{padding:clamp(96px,22vw,136px) clamp(18px,6vw,48px) 100px;} .taya .ty-hero{display:flex;flex-direction:column;align-items:center;gap:0;} .taya .ty-copy{order:1;align-self:stretch;max-width:none;text-align:center;margin:0 auto 26px;} .taya .ty-eyebrow{display:none;} .taya .ty-sub{margin-left:auto;margin-right:auto;} .taya .ty-trust{order:3;align-self:center;justify-content:center;margin:22px auto 0;} .taya .ty-stage{order:2;align-self:center; width:100%;max-width:420px;background:#fff; border-radius:24px;overflow:hidden; border:1px solid rgba(26,26,25,.06); box-shadow:0 24px 52px rgba(26,26,25,.14);} .taya .ty-panel{aspect-ratio:4/3;min-height:0;border-radius:0;} .taya .ty-panel .frame{border-radius:0;box-shadow:none;} .taya .ty-form{position:static;transform:none;width:100%;max-width:none;margin:0; border-radius:0;box-shadow:none;background:transparent; padding:20px clamp(18px,5vw,24px) 22px;} .taya .ty-stats{display:none;} .taya .ty-trust{margin-bottom:0;} .taya .ty-divider{margin-top:52px;} .taya .ty-intro{padding-top:48px;} } /* ══ SMALL PHONES (≤430) ══ */ @media(max-width:430px){ .taya .ty-title{font-size:clamp(34px,10vw,44px);} .taya .ty-panel{aspect-ratio:5/4;} .taya .ty-intro{padding-top:clamp(40px,10vw,60px);} } /* Divider line inside .divider-section-dark — identical to the hero .ty-divider */ body .elementor .ts.divider-section-dark hr, body .elementor .ts.divider-section-dark hr.e-divider-base, body .elementor .ts.divider-section-dark hr.divider-dark { height: 1px !important; border: 0 !important; border-top: 0 !important; border-block-start: 0 !important; background-color: var(--divider-dark-line) !important; opacity: 1 !important; width: 90% !important; /* ← אורך הקו. קטן יותר = קצר יותר */ max-width: 1100px !important; /* ← תקרה קשיחה לאורך */ margin: 0 auto !important; /* ← ממרכז אותו */ } /* Hide the hero↔intro line at ALL breakpoints + control the gap */ .taya .ty-divider { background: transparent !important; /* מסתיר את הקו */ height: 0 !important; border: 0 !important; margin: 0 !important; /* מאפס את הרווח שלו */ } /* ← זה הרווח בין ה-hero ל-intro. שנה את הערך */ .taya .ty-intro { padding-top: 60px !important; } /* מובייל */ @media (max-width: 940px) { .taya .ty-intro { padding-top: 40px !important; } } .taya .ty-intro { max-width: 620px; margin: 0 auto; text-align: center !important; /* ← המקטע ממורכז */ padding-top: 60px; } .taya .ty-intro .kicker, .taya .ty-intro h2 { display: none !important; } .taya .ty-intro p { font-size: 18px; line-height: 1.9; color: #3c3936; max-width: none !important; margin: 0 0 30px !important; text-align: center !important; /* הטקסט ממורכז */ } .taya .ty-intro p em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: var(--warm); } .taya .ty-intro .cta { margin: 0 auto !important; /* ← הכפתור ממורכז */ } @media (max-width: 940px) { .taya .ty-intro { padding-top: 40px; } .taya .ty-intro p { font-size: 16px; } } .taya .ty-intro { max-width: 620px; margin: 0 auto; text-align: center !important; padding-top: 60px; } .taya .ty-intro h2 { display: none !important; } /* כותרת מוסתרת */ /* קו הזהב הקטן חוזר */ .taya .ty-intro .kicker { display: block !important; width: 44px; height: 3px; border-radius: 2px; background: var(--warm) !important; margin: 0 auto 28px !important; } .taya .ty-intro p { font-size: 18px; line-height: 1.9; color: #3c3936; max-width: none !important; margin: 0 0 30px !important; text-align: center !important; } /* אות פתיחה מורמת — עובדת עם מרכוז (בלי float) */ .taya .ty-intro p::first-letter { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 50px; line-height: 1; color: var(--dark); vertical-align: -7px; margin-right: 1px; } .taya .ty-intro p em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: var(--warm); } .taya .ty-intro .cta { margin: 0 auto !important; } @media (max-width: 940px) { .taya .ty-intro { padding-top: 40px; } .taya .ty-intro p { font-size: 16px; } .taya .ty-intro p::first-letter { font-size: 42px; } } /* Intro CTA — underlined text link (option A) */ .taya .ty-intro .ty-link { display: inline-block; font-family: 'Heebo', sans-serif; font-size: 16px; font-weight: 500; color: var(--dark) !important; text-decoration: none !important; background: none !important; border: none !important; padding: 0 0 3px 0 !important; border-bottom: 1.5px solid var(--warm) !important; cursor: pointer; transition: border-color .18s ease, opacity .18s ease; } .taya .ty-intro .ty-link:hover { opacity: .7; border-bottom-color: var(--dark) !important; } /* ════════════════════════════════════════════════════════════════════ 26 · Forms — autocomplete + date picker (.ty-ac / flatpickr) Destination autocomplete, form header, and themed date picker. ════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ (A) DESTINATIONS AUTOCOMPLETE DROPDOWN (Where to?) Requires the HTML input to have id="ty-dest" — see note below. ══════════════════════════════════════════════════════════════ */ .ty-ac{ position:fixed; z-index:99999; background:#fff; border:1px solid rgba(26,26,25,.1); border-radius:14px; box-shadow:0 18px 44px rgba(26,26,25,.18); padding:6px; max-height:280px; overflow-y:auto; font-family:'Heebo','Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-overflow-scrolling:touch; } .ty-ac-group{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8a7a5c; padding:10px 12px 6px; } .ty-ac-item{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px; font-size:14px; font-weight:500; color:var(--dark); cursor:pointer; } .ty-ac-item:hover, .ty-ac-item.is-active{ background:#F0EEE9; } .ty-ac-item .pin{ width:14px; height:14px; flex-shrink:0; color:#b8a985; } .ty-ac-empty{ padding:14px 12px; font-size:13px; color:#9a9895; text-align:center; } /* ══════════════════════════════════════════════════════════════ (C) FORM HEADER — title + date icon button (Option B) Phone has its own row; the date lives as a dark icon button in the form header. Picking a date reveals it as small text below the sub. ══════════════════════════════════════════════════════════════ */ .taya .ty-form-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:15px; } .taya .ty-form-head-txt{ min-width:0; } .taya .ty-form-head h4{ margin:0 0 3px; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--dark); } .taya .ty-form-head .fsub{ margin:0; font-size:12px; line-height:1.5; color:#7a7a77; } .taya .ty-date-label{ display:none; margin-top:7px; font-size:12px; font-weight:700; color:var(--dark); } .taya .ty-date-label::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--warm); margin-right:7px; vertical-align:1px; } .taya .ty-date-btn{ flex-shrink:0; width:38px; height:38px; border-radius:11px; border:none; cursor:pointer; background:var(--dark); display:flex; align-items:center; justify-content:center; transition:transform .18s ease, box-shadow .18s ease; } .taya .ty-date-btn:hover{ transform:translateY(-1px); } .taya .ty-date-btn svg{ width:18px; height:18px; color:var(--warm); } .taya .ty-date-btn.is-set{ box-shadow:0 0 0 2px var(--warm); } /* hidden flatpickr target — present in the DOM but invisible */ .taya .ty-date-input{ position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0; border:0; opacity:0; pointer-events:none; } /* ══════════════════════════════════════════════════════════════ (B) CUSTOM DATE PICKER (flatpickr) — themed to the site The date field is now a normal text input, so its empty state uses the same grey ::placeholder as every other field automatically. These rules restyle the flatpickr calendar popup: dark selected day, gold hover, rounded corners, Heebo font. (You can delete the two old native-date lines from section 25: .taya .ty-row input[type=date]{color:#a8a6a2;} .taya .ty-row input[type=date]:valid{color:var(--dark);} ) ══════════════════════════════════════════════════════════════ */ .flatpickr-calendar{ border-radius:16px !important; border:1px solid rgba(26,26,25,.1) !important; box-shadow:0 18px 44px rgba(26,26,25,.18) !important; font-family:'Heebo','Helvetica Neue',Helvetica,Arial,sans-serif !important; padding:6px !important; } .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year, .flatpickr-weekday{ color:var(--dark) !important; fill:var(--dark) !important; font-weight:700 !important; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg{ fill:var(--dark) !important; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--warm) !important; } .flatpickr-day{ border-radius:10px !important; color:var(--dark) !important; font-weight:500 !important; } .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover{ background:#F0EEE9 !important; border-color:#F0EEE9 !important; } .flatpickr-day.today{ border-color:var(--warm) !important; } .flatpickr-day.today:hover{ background:var(--warm) !important; border-color:var(--warm) !important; color:var(--dark) !important; } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange{ background:var(--dark) !important; border-color:var(--dark) !important; color:#fff !important; border-radius:10px !important; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:#c7c5c1 !important; } /* ══════════════════════════════════════════════════════════════ 27 · Start-planning page (.tsp) LEFT = about us + benefits box · RIGHT = lead form (static card). ══════════════════════════════════════════════════════════════ */ .taya.tsp{ padding:clamp(80px,9vw,120px) clamp(20px,6vw,90px); } .tsp .tsp-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center; max-width:1180px; margin:0 auto; } /* LEFT — about */ .tsp .tsp-about{ max-width:540px; } .tsp .tsp-about h1{ margin:22px 0 18px; font-size:clamp(32px,3.9vw,52px); font-weight:900; letter-spacing:-.03em; line-height:1.04; color:var(--dark); } .tsp .tsp-about p{ margin:0 0 24px; max-width:450px; font-size:16px; line-height:1.8; color:#565654; } /* trust row — static, left aligned */ .tsp .tsp-trust{ margin-top:8px; } /* RIGHT — reuse .ty-form but as a normal static card (kill hero floating) */ .tsp .tsp-formcol{ display:flex; justify-content:center; width:100%; } .tsp .ty-form{ position:static !important; transform:none !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:400px !important; margin:0 !important; background:#fff !important; border:1px solid rgba(26,26,25,.07) !important; border-radius:22px !important; padding:20px !important; box-shadow:0 28px 64px rgba(26,26,25,.16) !important; } /* responsive: stack, center */ @media(max-width:940px){ .tsp .tsp-grid{ grid-template-columns:1fr; gap:38px; } .tsp .tsp-about{ max-width:none; text-align:center; margin:0 auto; } .tsp .tsp-about p{ margin-left:auto; margin-right:auto; } .tsp .tsp-benefits{ margin-left:auto; margin-right:auto; } .tsp .tsp-trust{ justify-content:center; } .tsp .ty-form{ margin:0 auto !important; } } /* ════════════════════════════════════════════════════════════════════ 28 · Destination carousel — scroll + arrows (.tdc) Native scroll, head/quote layout, and carousel arrow behavior. ════════════════════════════════════════════════════════════════════ */ .tdc-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-padding-left:24px; scrollbar-width:none; cursor:grab; } .tdc-viewport::-webkit-scrollbar{ display:none; height:0; width:0; } .tdc-track{ padding-left:24px; padding-right:24px; transform:none !important; } .tdc-card{ scroll-snap-align:start; } /* head: quote (שמאל) + חיצים (ימין), מקובצים בצד ימין */ .tdc-head{ display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:0 24px 22px; } /* כפתור quote בהיר (על רקע הסקשן הכהה) */ .tdc-quote, .tdc-quote:link, .tdc-quote:visited{ display:inline-flex; align-items:center; gap:9px; background:var(--light,#F8F8F7); color:var(--dark,#1A1A19) !important; border:1px solid rgba(248,248,247,.25); border-radius:100px; padding:13px 22px; font-size:15px; font-weight:700; line-height:1; text-decoration:none !important; white-space:nowrap; cursor:pointer; transition:background .18s, border-color .18s, transform .18s; } .tdc-quote:hover{ background:#fff; border-color:rgba(248,248,247,.5); transform:translateY(-1px); } .tdc-quote::after{ content:""; width:7px; height:7px; border-right:2px solid var(--dark,#1A1A19); border-bottom:2px solid var(--dark,#1A1A19); transform:rotate(-45deg); } /* חיצים (אותה צורה כמו .thc, צבעים בהירים) */ .tdc-nav{ display:flex; gap:10px; flex-shrink:0; } .tdc-arrow{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(248,248,247,.35); background:var(--light,#F8F8F7); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; outline:none; -webkit-tap-highlight-color:transparent; transition:background .18s, border-color .18s, opacity .18s, transform .06s; } .tdc-arrow:hover{ background:#fff; border-color:rgba(248,248,247,.6); } /* מנטרל את הוורוד/אדום של הערכה על focus/active — שומר על המראה הבהיר */ .tdc-arrow:focus, .tdc-arrow:focus-visible, .tdc-arrow:active{ background:var(--light,#F8F8F7) !important; border-color:rgba(248,248,247,.6) !important; color:var(--dark,#1A1A19) !important; outline:none !important; box-shadow:none !important; } .tdc-arrow:active{ transform:scale(.93); } .tdc-arrow:disabled{ opacity:.3; cursor:default; } .tdc-arrow::before{ content:""; width:8px; height:8px; border-top:2px solid var(--dark,#1A1A19); border-right:2px solid var(--dark,#1A1A19); } .tdc-prev::before{ transform:rotate(-135deg); margin-left:3px; } .tdc-next::before{ transform:rotate(45deg); margin-right:3px; } @media (max-width:767px){ .tdc-head{ justify-content:center; padding:0 16px 22px; } } /* ════════════════════════════════════════════════════════════════════ 29 · Patches — corner-button hover + comparison text Corner-button hover fix and darker comparison text overrides. ════════════════════════════════════════════════════════════════════ */ /* Corner-button hover fix */ .tdc-fab, .thc-fab { transition: background .15s ease !important; } .tdc-fab:hover { background:#eeeae2 !important; transform:none !important; } .thc-fab:hover { background:#000 !important; transform:none !important; } .tdc-fab:active, .tdc-fab:focus, .thc-fab:active, .thc-fab:focus { transform:none !important; box-shadow:none !important; } /* Comparison section: darker, more readable text */ .ts.s-comparison{ --comp-td-color: #4a4a47 !important; /* body cell text, verdict + decision text */ --comp-intro-color: #4a4a47 !important; /* intro paragraph under the heading */ --comp-th-color: #6b6b67 !important; /* table column headers */ --comp-factor-color: #6b6b67 !important; /* row labels + small block labels */ --comp-eyebrow-color: #6b6b67 !important; /* top eyebrow */ } /* subheadline helper (if used) — was light gray too */ .ts.s-comparison .subheadline-dark, .ts.s-comparison .subheadline-dark [class*="heading-title"], .ts.s-comparison .subheadline-dark h1, .ts.s-comparison .subheadline-dark h2, .ts.s-comparison .subheadline-dark h3{ color:#4a4a47 !important; } /* Hero — "for + מתחלף" always on its own second line, never a 3rd line */ .taya .ty-title .line2 { display: block; white-space: nowrap; } .taya .ty-rotate { white-space: nowrap; } .taya .ty-stats .row { justify-content: flex-start; } .taya .ty-stats .k { flex: 0 0 72px; } /* פונט Ploni על כל ההירו */ body.custom-hebrew-page .taya, body.custom-hebrew-page .taya * { font-family: "Ploni", "Heebo", sans-serif !important; } /* צ'יפ לימין · לב לשמאל */ body.custom-hebrew-page .ty-chip { left: auto !important; right: 16px !important; } body.custom-hebrew-page .ty-fav { right: auto !important; left: 16px !important; } body.custom-hebrew-page .ty-avatars { direction: ltr; } /* טופס לימין · כרטיס סטטיסטיקות לשמאל · אותו גובה */ @media (min-width:941px){ body.custom-hebrew-page .ty-form { left:auto !important; right:-46px !important; top:20% !important; transform:none !important; } body.custom-hebrew-page .ty-stats { right:auto !important; left:-104px !important; top:12% !important; transform:none !important; } } @media (max-width:1080px) and (min-width:941px){ body.custom-hebrew-page .ty-form { right:-14px !important; left:auto !important; } body.custom-hebrew-page .ty-stats { left:-60px !important; right:auto !important; } } /* ── פאנל מידע (.taya-panel) — RTL ── */ /* הגלולה זזה לצד הנכון (מימין, בכיוון הפוך) */ body.custom-hebrew-page .taya-panel .tdw-pill{ left: auto; right: var(--info-tab-bar-padding); transform: translateX(calc(var(--tdw-i, 0) * -100%)); } /* יישור טקסט לימין */ body.custom-hebrew-page .taya-panel .tdw-accordion-header, body.custom-hebrew-page .taya-panel .tdw-accordion-body p, body.custom-hebrew-page .taya-panel.is-country .tdw-more { text-align: right; } /* חצים פונים החוצה (שמאלה) */ body.custom-hebrew-page .taya-panel .tdw-dest-arrow, body.custom-hebrew-page .taya-panel.is-country .tdw-more svg { transform: scaleX(-1); } /* hover של שורת יעד — לכיוון הנכון */ body.custom-hebrew-page .taya-panel.is-country .tdw-dest-row:hover { transform: translateX(-2px); } /* ── מרווח לפני פסיק · כפתור נפרד לכל סוג (משחקים כאן) ── */ .custom-hebrew-page .he-cg { display: inline-block; width: 0; } /* ברירת מחדל */ .custom-hebrew-page p .he-cg { width: 0; } /* טקסט רגיל — בד"כ לא צריך */ .custom-hebrew-page strong .he-cg, .custom-hebrew-page b .he-cg { width: 0.18em; } /* מודגש */ .custom-hebrew-page h3 .he-cg { width: 0.16em; } /* כותרת קטנה */ .custom-hebrew-page h2 .he-cg { width: 0.20em; } /* כותרת בינונית */ .custom-hebrew-page h1 .he-cg { width: 0.01em; } /* כותרת גדולה */ .custom-hebrew-page h1 { letter-spacing: 0.03em !important; } @media (max-width:940px){ .custom-hebrew-page .ty-title .line2 { text-align: right; padding-right: 0.8em; /* ← מראה־מראה של האנגלית */ } }@media (max-width:940px){ body:not(.custom-hebrew-page) .ty-title .line2 { text-align: left; padding-left: 0.8em; /* ← ההזזה לאמצע. כוונן את הערך */ } } /* ════════════════════════════════════════════════════════════════════ 30 · FAQ (.taya-faq) — RTL / Hebrew Mirrors the accordion for Hebrew pages and right-aligns the text that section 17 hard-codes to the left. ════════════════════════════════════════════════════════════════════ */ body.custom-hebrew-page .taya-faq { direction: rtl; } /* question row + answer text → right-aligned (overrides section 17) */ body.custom-hebrew-page .taya-faq .tf-q { text-align: right; } body.custom-hebrew-page .taya-faq .tf-body-text { text-align: right !important; } /* sidebar checklist → right-aligned */ body.custom-hebrew-page .taya-faq .tf-check-title, body.custom-hebrew-page .taya-faq .tf-check-list li { text-align: right; } /* ════════════════════════════════════════════════════════════════════ 31 · COMPARISON (.s-comparison) — RTL / Hebrew + fully centered Mirrors the section for Hebrew pages and centers the factor column + mobile card labels that section 16 hard-codes to the left. ════════════════════════════════════════════════════════════════════ */ body.custom-hebrew-page .ts.s-comparison { direction: rtl; } /* factor column: left → center (desktop table) */ body.custom-hebrew-page .ts.s-comparison .comp-table th.col-factor, body.custom-hebrew-page .ts.s-comparison .comp-table td.col-factor { text-align: center; } /* mobile stacked cards: left → center */ @media (max-width: 767px) { body.custom-hebrew-page .ts.s-comparison .comp-table td.col-factor { text-align: center; } body.custom-hebrew-page .ts.s-comparison .comp-table td:not(.col-factor) { justify-content: center; text-align: center; } /* the small "column label" before each mobile value */ body.custom-hebrew-page .ts.s-comparison .comp-table td:not(.col-factor)::before { width: auto; } } /* ════════════════════════════════════════════════════════════════════ 32 · DESTINATIONS CAROUSEL (.tdc) — הגרסה העברית בלבד ════════════════════════════════════════════════════════════════════ */ body.custom-hebrew-page .tdc, body.custom-hebrew-page .tdc * { font-family: "Ploni", sans-serif !important; } /* החץ בתוך כפתור הצעת המחיר → מצביע שמאלה */ body.custom-hebrew-page .tdc-quote { flex-direction: row-reverse; } body.custom-hebrew-page .tdc-quote::after { transform: rotate(135deg); } /* דסקטופ: המשפט + החיצים בצד ימין */ @media (min-width: 768px) { body.custom-hebrew-page .tdc-head { justify-content: flex-end; } } /* מובייל: הצעת המחיר בימין, החיצים בשמאל */ @media (max-width: 767px) { body.custom-hebrew-page .tdc-head { flex-direction: row-reverse; justify-content: space-between; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: bold; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-ExtraBold.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-ExtraBold.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-Bold.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-Bold.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-SemiBold.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-Medium.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-Medium.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-Light.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-Light.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-ExtraLight.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2024/09/Poppins-ExtraLight.woff') format('woff'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-display:swap; font-family: 'Helvetica Neue'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Roman.woff2') format('woff2'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Roman.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Roman.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Helvetica Neue'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Medium.woff2') format('woff2'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Medium.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Medium.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Helvetica Neue'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Bold.woff2') format('woff2'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Bold.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Bold.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Helvetica Neue'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Light.woff2') format('woff2'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Light.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Light.ttf') format('truetype'); } @font-face { font-display:swap; font-family: 'Helvetica Neue'; font-style: normal; font-weight: 200; font-display: auto; src: url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Thin.woff2') format('woff2'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Thin.woff') format('woff'), url('https://tayalux.com/wp-content/uploads/2025/08/HelveticaNeue-Thin.ttf') format('truetype'); } /* End Custom Fonts CSS */