/* ============================================================================ rtl.css — Hebrew / RTL override sheet for YourKrakow ---------------------------------------------------------------------------- ADDITIVE, SCOPED, LTR-SAFE. Every rule in this file is prefixed with [dir="rtl"] or html[lang="he"], so it is a guaranteed no-op for every LTR language. It contains ZERO edits to the hand-written static sheets (site.css, tour.css, melex.css, guide.css, day-trips.css, transfers.css, landing.css, blog*.css, about/privacy/terms). It MUST be loaded AFTER all other CSS. Method: for every physical-direction declaration in the base sheets that breaks under RTL (margin/padding-left|right, absolute left|right offsets, text-align, border-left|right, mirrored radii, float, translateX, auto margins, background-position, directional glyphs/SVGs) we emit a mirrored [dir="rtl"] override. Neutral / centered / vertical rules are left alone. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ 1. TYPOGRAPHY (Hebrew face + no tracking + slightly larger/looser body) ══════════════════════════════════════════════════════════════════════════ */ /* Heebo is a first-class Hebrew face; falls back to Poppins for stray Latin. (Load the Heebo webfont in ; if absent the browser default Hebrew face is used — this rule still neutralises Poppins' Latin-only metrics.) */ html[lang="he"], html[lang="he"] body, [dir="rtl"] { font-family: 'Heebo', 'Poppins', sans-serif; letter-spacing: normal; } /* Hebrew needs a touch more size and leading to read comfortably. */ [dir="rtl"] body { font-size: 1.02em; line-height: 1.65; text-align: right; } /* Hebrew must NEVER be letter-tracked. The base sheets track headings, buttons, eyebrows, tags, badges and the logo — reset them all to normal. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .nav-logo, [dir="rtl"] .footer-logo, [dir="rtl"] .hero h1, [dir="rtl"] .hero-badge, [dir="rtl"] .section-tag, [dir="rtl"] .section-header h2, [dir="rtl"] .stat-label, [dir="rtl"] .badge-tickets, [dir="rtl"] .badge-live, [dir="rtl"] .ride-card-ribbon, [dir="rtl"] .ride-stops-label, [dir="rtl"] .tour-hero h1, [dir="rtl"] .tour-hero h2.tour-hero, [dir="rtl"] .tour-hero-eyebrow, [dir="rtl"] .modal h3, [dir="rtl"] .modal-form h3, [dir="rtl"] .home-links-col h3, [dir="rtl"] .home-links-inner > h2, [dir="rtl"] .cro-block > h2, [dir="rtl"] .cro-glance-k, [dir="rtl"] .tab-btn, [dir="rtl"] .btn-primary, [dir="rtl"] .btn-secondary, [dir="rtl"] .btn-book-now, [dir="rtl"] .btn-submit, [dir="rtl"] .route-card-new-badge, [dir="rtl"] .route-card-duration-badge { letter-spacing: normal; } /* ══════════════════════════════════════════════════════════════════════════ 2. LAYOUT / POSITIONING (absolute & fixed offsets, hero gradients) ══════════════════════════════════════════════════════════════════════════ */ /* ── Language dropdown menu — base opens flush to the RIGHT edge (right:0). In RTL the button sits on the LEFT of the bar, so the menu must open from the left edge instead. (site, tour, melex, guide, landing, blog, blog-post, about, day-trips, transfers) ── */ [dir="rtl"] .lang-menu { right: auto; left: 0; } [dir="rtl"] .lang-option { text-align: right; } [dir="rtl"] .lang-btn-arrow { margin-left: 0; margin-right: 2px; } /* ── Mobile-menu close "X" — base fixed top-right → top-left ── */ [dir="rtl"] .mobile-close { right: auto; left: 24px; } /* ── Modal close "X" — base absolute top-right → top-left; and the h3 keeps its reserved gutter on the correct (start) side ── */ [dir="rtl"] .modal-close { right: auto; left: 18px; } [dir="rtl"] .modal h3, [dir="rtl"] .modal-form h3 { padding-right: 0; padding-left: 30px; } /* ── HERO (home) — the base uses a 90deg gradient darkest on the LEFT plus a right-anchored photo, with left-aligned copy. In RTL the copy flips to the right, so mirror the gradient (270deg) and the photo (left center) to keep the headline readable over the dark side. ── */ [dir="rtl"] .hero { text-align: right; background: linear-gradient(270deg, rgba(8,12,24,0.92) 0%, rgba(8,12,24,0.72) 34%, rgba(8,12,24,0.28) 62%, rgba(8,12,24,0.12) 100%), linear-gradient(180deg, rgba(8,12,24,0.4) 0%, transparent 28%, transparent 70%, rgba(8,12,24,0.65) 100%), url('/images/yourkrakow-hero-rtl.webp') left center / cover no-repeat; } /* RTL mobile home hero: portrait, horizontally-flipped shot */ @media (max-width: 768px) { [dir="rtl"] .hero { background: linear-gradient(180deg, rgba(8,12,24,0.85) 0%, rgba(8,12,24,0.5) 40%, rgba(8,12,24,0.45) 70%, rgba(8,12,24,0.8) 100%), url('/images/yourkrakow-hero-mobile-rtl.webp') center / cover no-repeat; } } /* RTL melex hub hero (#hero): flipped photo so the cart sits away from the right-aligned Hebrew copy; overlay gradients kept as-is for legibility. */ [dir="rtl"] #hero { background: linear-gradient(270deg, rgba(5,8,15,0.5) 0%, rgba(5,8,15,0.18) 25%, transparent 48%), radial-gradient(ellipse 80% 60% at 60% 40%, rgba(245,158,11,0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 70%, rgba(34,197,94,0.05) 0%, transparent 60%), linear-gradient(to bottom, rgba(7,11,19,0.72) 0%, rgba(7,11,19,0.55) 50%, rgba(7,11,19,0.82) 100%), url('/images/krakow-melex-hero-rtl.webp') center center / cover no-repeat; } @media (max-width: 768px) { [dir="rtl"] #hero { background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(245,158,11,0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 70%, rgba(34,197,94,0.05) 0%, transparent 60%), linear-gradient(to bottom, rgba(7,11,19,0.55) 0%, rgba(7,11,19,0.78) 50%, rgba(7,11,19,0.92) 100%), url('/images/krakow-melex-hero-mobile-rtl.webp') center center / cover no-repeat; } } [dir="rtl"] .hero-btns { justify-content: flex-start; } /* Hero feature strip — the thin vertical separator sits on the left of each item; move it to the right (start) and swap the first-item padding reset. */ [dir="rtl"] .hero-feat::before { left: auto; right: 0; } [dir="rtl"] .hero-feat:first-child { padding-left: 18px; padding-right: 0; } /* ── TOUR HERO overlay — same left-dark 90deg gradient → 270deg ── */ [dir="rtl"] .tour-hero-content { text-align: right; } [dir="rtl"] .tour-hero-overlay { background: linear-gradient(270deg, rgba(8,12,24,0.9) 0%, rgba(8,12,24,0.62) 42%, rgba(8,12,24,0.16) 76%, rgba(8,12,24,0) 100%), linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.75) 100%); } /* ── Card badges (absolute corners) — mirror left↔right ── */ /* "Skip the line" tickets badge: top-right → top-left (site, tour) */ [dir="rtl"] .badge-tickets { right: auto; left: 14px; } /* Duration badge on tour image: bottom-left → bottom-right (site) */ [dir="rtl"] .tour-dur-badge { left: auto; right: 12px; } /* "Available now" overlay badge: bottom-left → bottom-right (site) */ [dir="rtl"] .badge-live-img { left: auto; right: 12px; } /* Step number bubble: top-right → top-left (site) */ [dir="rtl"] .step-number { right: auto; left: -6px; } /* Ride diagonal ribbon: right corner → left corner, angle negated (site) */ [dir="rtl"] .ride-card-ribbon { right: auto; left: -28px; transform: rotate(-35deg); } /* ── melex route-card badges ── */ [dir="rtl"] .route-card-new-badge { right: auto; left: 14px; } /* top-right → top-left */ [dir="rtl"] .route-card-duration-badge { left: auto; right: 14px; } /* top-left → top-right */ [dir="rtl"] .mosaic-badge { right: auto; left: 12px; } /* bottom-right → bottom-left */ [dir="rtl"] .melex-cart-badge { right: auto; left: -32px; } /* cart badge (melex, guide) */ /* ── day-trips absolute badges ── */ [dir="rtl"] .dt-card-dur { left: auto; right: 12px; } /* bottom-left → bottom-right */ [dir="rtl"] .dt-card-pop { right: auto; left: 12px; } /* top-right → top-left */ [dir="rtl"] .dt-hero-widget { margin-left: 0; margin-right: auto; } /* pushed to right edge → left edge */ /* ── transfers step arrow between vehicle cards ── */ [dir="rtl"] .t-step .t-arrow { right: auto; left: -7px; } /* ── WhatsApp float button — fixed bottom-right → bottom-left. (site, tour, transfers, landing, blog, blog-post, melex) Base offset is 24–28px; 28px chosen as the common value. ── */ [dir="rtl"] .wa-float { right: auto; left: 28px; } /* ── Guide/knowledge carousel scroll arrow (right edge → left edge) ── */ [dir="rtl"] .knowledge-arrow, [dir="rtl"] .recommended-arrow { right: auto; left: -8px; } [dir="rtl"] .recommended-grid { padding-right: 0; padding-left: 16px; } /* ── Lightbox prev/next controls — swap edges so navigation reads RTL ── */ [dir="rtl"] .lightbox-prev { left: auto; right: -56px; } [dir="rtl"] .lightbox-next { right: auto; left: -56px; } @media (max-width: 960px) { [dir="rtl"] .lightbox-prev { left: auto; right: 4px; } [dir="rtl"] .lightbox-next { right: auto; left: 4px; } } /* ══════════════════════════════════════════════════════════════════════════ 3. FLOATS, AUTO-MARGINS & BUTTON ORDER ══════════════════════════════════════════════════════════════════════════ */ /* Push-to-end auto margins flip side. */ [dir="rtl"] .tour-footer .btn-book { margin-left: 0; margin-right: auto; } /* site */ [dir="rtl"] .review-stars { margin-left: 0; margin-right: auto; } /* tour */ [dir="rtl"] .contact-chevron { margin-left: 0; margin-right: auto; } /* site */ [dir="rtl"] .dt-info-price { margin-left: 0; margin-right: auto; } /* day-trips */ /* Icon that overlaps the card top uses a physical left margin. */ [dir="rtl"] .transfer-icon { margin: -28px 20px 0 0; } /* site */ /* translateX hover nudges point toward the reading direction → negate. */ [dir="rtl"] .contact-item:hover .contact-chevron { transform: translateX(-2px); } [dir="rtl"] .tour-widget-btn:hover { transform: translateX(-3px); } /* landing */ [dir="rtl"] .dt-fcard:hover { transform: translateX(-2px); } /* day-trips */ [dir="rtl"] .dt-info-row:hover { transform: translateX(-3px); } /* day-trips */ [dir="rtl"] .xsell-cta:hover::after { transform: translateX(-3px); } /* melex */ /* ══════════════════════════════════════════════════════════════════════════ 4. BORDERS, ACCENTS & MIRRORED RADII ══════════════════════════════════════════════════════════════════════════ */ /* Left accent bars → right. */ [dir="rtl"] .info-card { border-left: none; border-right: 4px solid var(--accent); } /* tour */ [dir="rtl"] .info-card.cancel-card { border-right-color: #22c55e; } [dir="rtl"] .itin-item { border-left: none; border-right: 3px solid var(--accent); padding-left: 0; padding-right: 18px; } /* guide */ [dir="rtl"] .airport-row-highlight { border-left: none; border-right: 3px solid var(--accent); } /* guide */ [dir="rtl"] .gd-tnote { border-left: none; border-right: 3px solid var(--accent); } /* guide */ [dir="rtl"] .gd-qf-foot > p { border-left: none; border-right: 1px solid #d5dae6; padding-left: 0; padding-right: 22px; } /* guide */ /* Accent bar + mirrored rounded corner (radius:0 x x 0 → x 0 0 x). */ [dir="rtl"] .cro-byg-card { border-left: none; border-right: 3px solid var(--accent); border-radius: 12px 0 0 12px; } /* tour */ [dir="rtl"] .cro-respect { border-left: none; border-right: 3px solid #94a3b8; border-radius: 12px 0 0 12px; } /* tour */ [dir="rtl"] .landing-content blockquote, [dir="rtl"] .article-content blockquote { border-left: none; border-right: 4px solid var(--accent); border-radius: 8px 0 0 8px; } /* landing, blog-post */ /* Trust-strip vertical dividers (melex). */ [dir="rtl"] .trust-item { border-right: none; border-left: 1px solid rgba(255,255,255,0.08); } [dir="rtl"] .trust-item:last-child { border-left: none; } [dir="rtl"] .widget-trust__guests { border-left: none; border-right: 1px solid rgba(255,255,255,0.18); padding-left: 0; padding-right: 18px; } /* Contact perks vertical divider (site, desktop only). */ @media (min-width: 1001px) { [dir="rtl"] .contact-perks .transfer-perk + .transfer-perk { border-left: none; border-right: 1px solid #f1f5f9; padding-left: 0; padding-right: 18px; } } /* ══════════════════════════════════════════════════════════════════════════ 5. TEXT-ALIGN FLIPS (explicit left→right / right→left in base sheets) ══════════════════════════════════════════════════════════════════════════ */ /* Base sets text-align:left explicitly → becomes right in RTL. */ [dir="rtl"] .yk-select-btn, [dir="rtl"] .faq-question, [dir="rtl"] .faq-q, [dir="rtl"] .gd-oneday h2, [dir="rtl"] .gd-apps, [dir="rtl"] .dt-table th, [dir="rtl"] .article-content th, [dir="rtl"] .article-content td, [dir="rtl"] .ab-rating-meta, [dir="rtl"] .ab-review-grid, [dir="rtl"] .t-cta-text h2 { text-align: right; } /* Base sets text-align:right for end-aligned values → becomes left in RTL. */ [dir="rtl"] .widget-price-val small, [dir="rtl"] .dt-sum-v, [dir="rtl"] .airport-row > div:nth-child(3) { text-align: left; } /* ══════════════════════════════════════════════════════════════════════════ 6. LIST INDENTATION & DIRECTIONAL PADDING ══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .privacy-content ul, [dir="rtl"] .terms-content ul, [dir="rtl"] .landing-content ul, [dir="rtl"] .landing-content ol, [dir="rtl"] .article-content ul, [dir="rtl"] .article-content ol, [dir="rtl"] .tour-ssr-body ul { padding-left: 0; padding-right: 20px; } /* cro-timeline (tour) — vertical rail + dots hang off the left; move right. */ [dir="rtl"] .cro-timeline { padding-left: 0; padding-right: 4px; } [dir="rtl"] .cro-timeline li { padding: 0 30px 22px 0; } [dir="rtl"] .cro-timeline li::before { left: auto; right: 6px; } [dir="rtl"] .cro-tl-dot { left: auto; right: 0; } /* cro compare lists (tour) — check/dash marker hangs off the left. */ [dir="rtl"] .cro-right-col li { padding-left: 0; padding-right: 24px; } [dir="rtl"] .cro-right-yes li::before, [dir="rtl"] .cro-right-no li::before { left: auto; right: 0; } /* cro "good to know" list (tour) — icon marker off the left. */ [dir="rtl"] .cro-good li { padding-left: 0; padding-right: 28px; } [dir="rtl"] .cro-good li::before { left: auto; right: 0; } /* Custom select dropdown chevron gutter + glyph position (site). */ [dir="rtl"] .form-group select { padding-right: 14px; padding-left: 42px; background-position: left 14px center; } [dir="rtl"] .yk-select-btn { padding: 12px 16px 12px 42px; background-position: left 14px center; } /* FAQ caret on blog-post articles (rotated-square chevron) — right → left. */ [dir="rtl"] .article-content .faq-question { padding: 18px 0 18px 36px; } [dir="rtl"] .article-content .faq-question::after { right: auto; left: 6px; border-right: none; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); } [dir="rtl"] .article-content .faq-answer { padding: 0 0 22px 36px; } @media (max-width: 640px) { [dir="rtl"] .article-content .faq-question { padding: 16px 0 16px 30px; } [dir="rtl"] .article-content .faq-answer { padding-right: 0; padding-left: 0; } } /* ══════════════════════════════════════════════════════════════════════════ 7. ICONS & DIRECTIONAL ARROWS ══════════════════════════════════════════════════════════════════════════ */ /* Inline SVG arrows inside CTAs point "forward" (right). Mirror them so they point in the reading direction. Scoped to CTA/arrow containers only — this deliberately does NOT touch the logo, the video/play button, the search magnifier, checkmark bullets, or feature icons. */ [dir="rtl"] .btn-primary > svg, [dir="rtl"] .cro-cta-btn > svg, [dir="rtl"] .btn-ride-later > svg, [dir="rtl"] .dt-fcard > svg, [dir="rtl"] .dt-info-row > svg { transform: scaleX(-1); } /* Arrow-glyph elements whose entire content is a → / › — mirror to ← / ‹. */ [dir="rtl"] .cro-route-arrow, [dir="rtl"] .cro-link-arrow, [dir="rtl"] .tour-google-arrow { display: inline-block; transform: scaleX(-1); } /* Pseudo-element arrow bullets/markers use a hard-coded → glyph — flip to ←. */ [dir="rtl"] .ride-features li::before, [dir="rtl"] .ride-stops li::before { content: '\2190'; } /* site: → → ← */ [dir="rtl"] .info-card ul li::before { content: '\2190\00a0'; } /* tour: "→ " → "← " */ [dir="rtl"] .xsell-cta::after { content: '\2190'; } /* melex: → → ← */ /* ══════════════════════════════════════════════════════════════════════════ 8. FORMS (LTR-lock fields that always hold Latin/numeric data) ══════════════════════════════════════════════════════════════════════════ */ /* Email / phone / URL / number stay LTR but align to the RTL start (right). */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: right; } /* Native date value alignment (site sets it to left explicitly). */ [dir="rtl"] .form-group input[type="date"]::-webkit-date-and-time-value { text-align: right; } /* ══════════════════════════════════════════════════════════════════════════ 9. FLATPICKR (CDN date picker on the tour page — force RTL layout) ══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .flatpickr-calendar { direction: rtl; text-align: right; } [dir="rtl"] .flatpickr-days, [dir="rtl"] .dayContainer { direction: rtl; } [dir="rtl"] span.flatpickr-weekday { direction: rtl; } /* Month-label spacing (base uses margin-right). */ [dir="rtl"] .fp-month-label { margin-right: 0; margin-left: 4px; } /* Prev/next month chevrons: flatpickr keeps them at the physical corners; in an RTL calendar the visual arrows should mirror. */ [dir="rtl"] .flatpickr-prev-month, [dir="rtl"] .flatpickr-next-month { transform: scaleX(-1); } /* ══════════════════════════════════════════════════════════════════════════ 10. COMPONENT-SPECIFIC ODDS & ENDS ══════════════════════════════════════════════════════════════════════════ */ /* Ride note is centred via auto margins — symmetric, no change needed. */ /* Transfers CTA small print centres via auto margins — symmetric. */ /* Breadcrumb & nav are flex rows and reflow automatically under dir=rtl. The logo (justify-content:space-between) moves to the right edge and the nav-links/lang to the left edge — correct RTL behaviour, no override. */ /* ============================================================================ POST-LAUNCH RTL FIXES (reported by user, verified against rendered pages) ============================================================================ */ /* Booking modal / success close button (melex .cb-card, inline-styled) — was top-right, must be top-left in RTL. */ [dir="rtl"] .cb-card__close, [dir="rtl"] .cb-success__close { right: auto; left: 14px; } /* Transfer hero: the dark gradient darkens the side the copy sits on. Copy moves to the right in RTL, so mirror the 90deg horizontal gradient to 270deg. */ [dir="rtl"] .t-hero::after { background: linear-gradient(270deg, rgba(6,9,18,0.94) 0%, rgba(6,9,18,0.8) 26%, rgba(6,9,18,0.45) 44%, rgba(6,9,18,0.12) 60%, transparent 76%), linear-gradient(180deg, transparent 55%, rgba(6,9,18,0.4) 100%); } /* Day-trips hero: same horizontal-gradient mirror. */ [dir="rtl"] .dt-hero::before { background: linear-gradient(180deg,rgba(8,12,23,.55) 0%,rgba(8,12,23,.35) 35%,rgba(8,12,23,.82) 78%,var(--bg) 100%), linear-gradient(270deg,rgba(8,12,23,.7) 0%,rgba(8,12,23,.1) 60%), url('/images/Tatra-Mountains-border-Slovakia-Poland.webp') center/cover no-repeat; } /* Transfer vehicle cards: the car photo is absolutely positioned on the right (right:-3%). In RTL the text column moves to the right and collides with it — move the photo to the left. */ [dir="rtl"] .t-vcard-photo { right: auto; left: 0; background-position: center center; background-size: 44%; } /* Vehicle price "250 PLN / vehicle": keep the number+unit as an LTR run so the slash and unit sit correctly. */ [dir="rtl"] .t-vprice { direction: ltr; justify-content: flex-end; } /* Transfer "how it works" step connector arrows: on the right & pointing right; in RTL move to the left edge and mirror the glyph. */ [dir="rtl"] .t-step .t-arrow { right: auto; left: -7px; transform: scaleX(-1); } /* Mobile hero: the LTR layout centers the column (align-items:center + auto margins). Under RTL the inherited right-alignment pushed the large H1 past the right viewport edge (clipped). Center the hero text on mobile like LTR does. */ @media (max-width: 768px) { [dir="rtl"] .hero-content, [dir="rtl"] .hero h1, [dir="rtl"] .hero p { text-align: center; } } /* Recommended/popular/value badge on melex route cards (top-right in LTR) — was NOT flipped, so it collided with the duration badge (which flips to top-right). Move it to top-left so the two badges sit in opposite corners. */ [dir="rtl"] .route-rec-badge { right: auto; left: 14px; } /* Guide attraction-card recommended badge (bottom-right → bottom-left). */ [dir="rtl"] .rec-badge { right: auto; left: 10px; } /* Gallery lightbox close "X": top-right → top-left. */ [dir="rtl"] .lightbox-close { right: auto; left: 0; } /* Custom select (group size) trigger text: left-aligned → right in RTL. */ [dir="rtl"] .yk-select-trigger { text-align: right; } /* ── Per-route melex landing pages (melex-route.blade) ── */ /* Hero overlay gradient darkens the LEFT (105deg); in RTL the text column sits on the right, so mirror it to 255deg to keep the dark side under the text. */ [dir="rtl"] .mr-hero__overlay { background: linear-gradient(255deg, rgba(7,11,19,0.94) 0%, rgba(7,11,19,0.78) 44%, rgba(7,11,19,0.42) 78%, rgba(7,11,19,0.28) 100%), linear-gradient(to top, rgba(7,11,19,0.86) 0%, rgba(7,11,19,0.10) 55%); } /* Booking-modal dropdown / date field: left-aligned → right in RTL. */ [dir="rtl"] .cb-dd__toggle { text-align: right; }