/* Editorial blog — premium layout; loads after seo.css */ /* RTL scroll-geometry fix. * * Chrome triggers its RTL phantom-scrollWidth behavior from the html[dir] *attribute* at layout * time. On high-DPI Samsung devices where the visual viewport != layout viewport, this produces * html.scrollWidth = 10359px, scrollX = -1080 → content off-screen → white page. * * Fix (applied via inline script in ): remove dir="rtl" from and set data-dir="rtl" * instead before first layout. This makes Chrome use LTR scroll geometry (scrollX = 0). * The still carries dir="rtl" so that all text, flexbox, and layout inside it renders RTL. * All CSS selectors below use [data-dir="rtl"] on html so they still fire correctly. */ html.blog-page { overflow-x: hidden; width: 100%; max-width: 100%; } /* RTL text direction: applied via CSS only (no dir attribute on html or body). * Chrome reads the dir HTML *attribute* at parse time for viewport RTL scroll geometry. * CSS `direction` property does not trigger that — it only affects text/layout rendering. * We apply it to body > * (body's direct children) so body itself stays direction:ltr * for the viewport propagation check, while all content inside renders RTL. */ html[data-dir="rtl"].blog-page body > * { direction: rtl; } .blog-body { --blog-max: 48rem; --blog-serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --blog-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --blog-ink: #0f1419; --blog-ink-soft: #3d4f5f; --blog-line: rgba(15, 20, 25, 0.08); --blog-accent: #c45c2a; --blog-accent-hover: #a34a22; --blog-surface: #faf8f5; background: var(--blog-surface); color: var(--blog-ink); margin: 0; padding: 0; } /* * RTL: html[data-dir="rtl"] already mirrors the flex inline axis. seo.css adds * flex-direction: row-reverse on .header-container / .header-nav > ul — that * reverses again and pushes the header off-screen / breaks layout. Reset for blog only. */ body.blog-body { /* overflow-x: hidden (NOT clip) — hidden creates body as the scroll container, so the browser * manages RTL scroll on body (scrollWidth=360 → scrollLeft=0 → content visible). * clip does NOT create a scroll container, leaving html as the scroll container, which * on high-DPI Samsung devices produces a 10359px RTL scroll geometry → white page. * The landing page (styles.css) uses the same body{overflow-x:hidden} and works correctly. */ overflow-x: hidden; width: auto !important; min-width: 0 !important; max-width: 100%; } body.blog-body, body.blog-body .blog-main { width: auto !important; min-width: 0 !important; max-width: 100%; } html[data-dir='rtl'] body.blog-body { margin: 0 !important; position: static !important; left: auto !important; right: auto !important; } html[data-dir='rtl'] body.blog-body .header-container { flex-direction: row; min-width: 0; } html[data-dir='rtl'] body.blog-body .header-nav > ul { flex-direction: row; } /* Keep editorial reading width constrained like the rest of the site. */ .blog-body .container-narrow { max-width: calc(var(--blog-max) + 2.5rem) !important; margin-left: auto; margin-right: auto; } .blog-body .blog-article-body { max-width: var(--blog-max) !important; margin-left: auto; margin-right: auto; } .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: rgba(15, 20, 25, 0.06); } .reading-progress-bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--blog-accent), #e8a060); transition: width 0.15s ease-out; } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: #fff; border-radius: 6px; z-index: 10000; outline: 2px solid var(--blog-accent); } .blog-main { padding-bottom: 5rem; overflow-x: hidden; max-width: 100%; } /* Hamburger (hidden ≥769px; same pattern as index.html + styles.css) */ .blog-body .hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: var(--spacing-sm, 8px); z-index: 50011; flex-shrink: 0; align-self: center; } .blog-body .hamburger span { width: 24px; height: 2px; background-color: var(--color-text, #fff); transition: all var(--transition-base, 300ms ease); } .blog-body .hamburger:hover span { background-color: var(--color-primary, #00bfa6); } .blog-body .hamburger:focus { outline: 2px solid var(--color-primary, #00bfa6); outline-offset: 2px; } .blog-body .hamburger:focus:not(:focus-visible) { outline: none; } body.blog-nav-open { overflow: hidden; } @media (min-width: 769px) { body.blog-nav-open { overflow: visible; } } /* Mobile: safe-area insets, smaller type, route diagram, sticky CTA, slide-out nav */ @media (max-width: 768px) { body.blog-body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } body.blog-body header { max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); } /* Keep containers shrink-safe without forcing explicit width (matches stable /he/ behavior). */ .blog-body .blog-main, .blog-body .blog-article, .blog-body .blog-hero, .blog-body .blog-hero-media, .blog-body .blog-article-body, .blog-body .blog-index-grid, .blog-body .container-narrow { min-width: 0 !important; box-sizing: border-box; } /* * Mobile header: logo | lang | hamburger via grid areas. * Nav stays in the same markup order as seo/template (logo → nav → lang) while the drawer uses * position:fixed (same sliding strip as landing-page/styles.css). */ .blog-body .header-container { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 'logo lang ham'; align-items: center; gap: 0.5rem 0.65rem; flex-wrap: nowrap !important; justify-content: stretch; justify-items: stretch; max-width: 100%; width: 100%; min-width: 0; margin-inline: auto; box-sizing: border-box; } .blog-body .logo { grid-area: logo; margin: 0 !important; min-width: 0; max-width: 100%; justify-self: start; } .blog-body .seo-lang-switcher-wrap { grid-area: lang; margin-left: 0 !important; margin-right: 0 !important; justify-self: center; position: relative; display: flex; justify-content: center; width: auto; max-width: 100%; } html[data-dir='rtl'] .blog-body .seo-lang-switcher-wrap { justify-self: center; } .blog-body .seo-lang-switcher { display: inline-flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; box-sizing: border-box; position: relative !important; left: auto !important; right: auto !important; transform: none !important; margin: 0 !important; } .blog-body .seo-lang-switcher ul { left: 50%; right: auto; transform: translateX(-50%); min-width: min(220px, calc(100vw - 1.5rem)); max-width: min( 280px, calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) ); z-index: 50020; box-sizing: border-box; } .blog-body .seo-lang-switcher-wrap { position: relative !important; left: auto !important; right: auto !important; transform: none !important; max-width: 100% !important; overflow: visible; } .blog-body .hamburger { display: flex; grid-area: ham; justify-self: end; } /* Slide-out drawer — match landing-page/styles.css (.hamburger targets `nav`): 280px strip + edge slide */ .blog-body .header-nav { grid-column: 1 / -1; grid-row: 1; align-self: start; z-index: 50010; pointer-events: none; position: fixed; top: 0; right: calc(-1 * min(280px, 100vw)); width: min(280px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: calc(var(--spacing-3xl, 64px) + env(safe-area-inset-top, 0px)) var(--spacing-lg, 24px) var(--spacing-lg, 24px); padding-bottom: calc(var(--spacing-lg, 24px) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background-color: var(--color-background, #003f5c); border-left: 1px solid var(--color-border, #2a2a3e); transition: right var(--transition-base, 300ms ease); overflow-y: auto; overflow-x: hidden; flex: unset !important; display: none !important; flex-direction: column; min-width: 0; justify-content: unset !important; direction: ltr; text-align: left; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2); } html[data-dir='rtl'] .blog-body .header-nav { right: auto; left: calc(-1 * min(280px, 100vw)); border-left: none; border-right: 1px solid var(--color-border, #2a2a3e); direction: rtl; text-align: right; transition: left var(--transition-base, 300ms ease); box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2); } .blog-body .header-nav.nav-open { pointer-events: auto; display: flex !important; right: 0; } html[data-dir='rtl'] .blog-body .header-nav.nav-open { display: flex !important; left: 0; right: auto; } .blog-body .header-nav > ul { flex-direction: column !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: var(--spacing-md, 16px) !important; justify-content: flex-start !important; width: 100%; padding: 0; } html[data-dir='rtl'] .blog-body .header-nav > ul { align-items: flex-end !important; } .blog-body .header-nav > ul > li { flex-shrink: 0; width: 100%; white-space: normal; } .blog-body .header-nav > ul > li:not(.nav-dropdown) > a { white-space: normal; line-height: 1.35; text-align: inherit; font-size: var(--font-size-lg, 1.125rem); padding: var(--spacing-sm, 8px) var(--spacing-md, 16px); display: block; width: 100%; } .blog-body .header-nav .nav-dropdown > a { max-width: none; overflow: visible; text-overflow: unset; white-space: normal; font-size: var(--font-size-lg, 1.125rem); justify-content: flex-start; width: 100%; } .blog-body .header-nav a.nav-login, .blog-body .header-nav a.nav-signup { white-space: nowrap; min-height: 40px; max-height: 40px; padding: 0.5rem 1rem !important; display: inline-flex !important; width: auto !important; max-width: 100%; font-size: var(--font-size-sm, 0.875rem) !important; } .blog-body .header-nav .nav-dropdown-menu { position: static !important; display: none; box-shadow: none; border: 0; min-width: 0 !important; width: 100%; max-width: 100%; padding: var(--spacing-xs, 4px) 0 0; margin-top: var(--spacing-xs, 4px); background: transparent; } .blog-body .header-nav .nav-dropdown:hover .nav-dropdown-menu, .blog-body .header-nav .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } /* Hamburger → X when open */ .blog-body .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .blog-body .hamburger.active span:nth-child(2) { opacity: 0; } .blog-body .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .blog-main { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } body.blog-sticky-visible .blog-main { padding-bottom: calc(8.25rem + env(safe-area-inset-bottom, 0px)); } .blog-breadcrumb { padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); } .blog-hero-inner { padding: 1.5rem max(1rem, env(safe-area-inset-left)) 2rem max(1rem, env(safe-area-inset-right)); } .blog-hero-cta-wrap { flex-direction: column; align-items: stretch; } .blog-hero-cta-wrap .blog-btn { width: 100%; } .blog-hero-media { min-height: 42vh; max-height: 62vh; width: 100%; max-width: 100%; overflow-x: clip; } .blog-hero-img { min-height: 42vh; max-height: 62vh; width: 100%; max-width: 100%; } .container-narrow { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .blog-lead { font-size: 1.15rem; line-height: 1.62; } .blog-article-body, .blog-day-body { font-size: 1.0625rem; line-height: 1.72; } .blog-day-heading { font-size: clamp(1.35rem, 6vw, 1.85rem); } .blog-day-label { font-size: 0.6875rem; letter-spacing: 0.1em; } .blog-tip-card { padding: 1.1rem 1rem 1.05rem; } .blog-tip-card h3 { font-size: 0.875rem; line-height: 1.3; word-break: break-word; } .blog-route { padding: 1rem max(0.65rem, env(safe-area-inset-left)) 1rem max(0.65rem, env(safe-area-inset-right)); -webkit-overflow-scrolling: touch; } .blog-route-svg text { font-size: 10.5px; } .blog-route-meta { grid-template-columns: 1fr; } .blog-day-mini-cards { grid-template-columns: 1fr; } .sticky-cta-mobile-link { font-size: 0.875rem; padding: 0.7rem 1.1rem; line-height: 1.25; flex: 0 1 auto; min-width: 0; max-width: 100%; width: auto; box-sizing: border-box; word-break: break-word; } .sticky-cta-mobile { max-width: 100%; width: 100%; margin: 0; box-sizing: border-box; left: 0; right: 0; padding: 0.6rem max(1rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right)); justify-content: center; gap: 0.5rem; } /* RTL mobile hard guard: prevents side-canvas horizontal expansion. */ html[data-dir='rtl'] .blog-body, html[data-dir='rtl'], html[data-dir='rtl'] body, html[data-dir='rtl'] .blog-body .blog-main, html[data-dir='rtl'] .blog-body .blog-article, html[data-dir='rtl'] .blog-body .container-narrow, html[data-dir='rtl'] .blog-body .blog-hero, html[data-dir='rtl'] .blog-body .blog-hero-media { max-width: 100% !important; overflow-x: hidden !important; } html[data-dir='rtl'] .blog-body * { max-inline-size: 100%; } } @media (max-width: 380px) { .blog-route-svg text { font-size: 9.5px; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-svg text { font-size: 12px !important; } } .blog-body header { z-index: 50000 !important; isolation: isolate; } /* Desktop blog nav should look exactly like SEO/main headers; keep only z-index lift for dropdown over hero media. */ @media (min-width: 769px) { .blog-body .header-nav .nav-dropdown-menu { z-index: 50010 !important; } } /* Keep hero/image layer explicitly below header dropdowns */ .blog-body .blog-main, .blog-body .blog-article, .blog-body .blog-hero, .blog-body .blog-hero-media { position: relative; z-index: 1; } .blog-breadcrumb { max-width: calc(var(--blog-max) + 4rem); margin: 0 auto; padding: 1rem 1.25rem 0; font-family: var(--blog-sans); font-size: 0.8125rem; color: var(--blog-ink-soft); } .blog-body .breadcrumb.blog-breadcrumb { /* Override generic SEO glass-pill breadcrumb styling */ background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; text-align: start; margin-bottom: 0.75rem; } .blog-body .breadcrumb.blog-breadcrumb:hover { border-color: transparent; box-shadow: none; } .blog-body .breadcrumb.blog-breadcrumb a { color: var(--blog-ink-soft); font-weight: 500; padding: 0; margin: 0; background: transparent; box-shadow: none; } .blog-body .breadcrumb.blog-breadcrumb a:hover { color: var(--blog-ink); border-bottom-color: rgba(15, 20, 25, 0.25); background: transparent; box-shadow: none; } .blog-body .breadcrumb.blog-breadcrumb span:not(.breadcrumb-sep) { color: var(--blog-ink); text-shadow: none; } .blog-breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .blog-breadcrumb a:hover { border-bottom-color: var(--blog-ink-soft); } .blog-breadcrumb .breadcrumb-list, ol.breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .blog-breadcrumb .breadcrumb-list li, ol.breadcrumb-list li { display: inline; } .blog-breadcrumb .breadcrumb-list li:not(:last-child)::after, ol.breadcrumb-list li:not(:last-child)::after { content: '\203A'; margin-left: 0.35rem; opacity: 0.35; font-size: 0.75rem; font-family: var(--blog-sans); } /* 3-days-in-london hero polish (page scoped) */ body.blog-body[data-article-slug='3-days-in-london'] .blog-breadcrumb { font-size: 0.74rem; opacity: 0.78; padding-top: 0.45rem; margin-bottom: 0.35rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero { margin-top: 0; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-media { min-height: 58vh; max-height: 70vh; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-img { min-height: 58vh; max-height: 70vh; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-gradient { background: linear-gradient( to top, rgba(6, 9, 16, 0.88) 0%, rgba(9, 12, 19, 0.72) 34%, rgba(12, 15, 22, 0.38) 62%, rgba(12, 15, 22, 0.42) 100% ); } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-inner { transform: translateY(5%); padding-top: 1.5rem; padding-bottom: 1.5rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-overlay { align-items: center; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-kicker { font-size: 0.74rem; letter-spacing: 0.14em; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-title { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.02; margin-bottom: 0.9rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-subtitle { max-width: 42.5rem; font-size: clamp(1.03rem, 2vw, 1.32rem); margin-bottom: 1.2rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-meta { font-size: 0.84rem; opacity: 0.88; } @media (max-width: 768px) { body.blog-body[data-article-slug='3-days-in-london'] .blog-breadcrumb { font-size: 0.6rem; padding-top: 0.08rem; margin-bottom: 0; opacity: 0.48; } body.blog-body[data-article-slug='3-days-in-london'] .blog-breadcrumb .breadcrumb-list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } body.blog-body[data-article-slug='3-days-in-london'] .blog-breadcrumb .breadcrumb-list li { display: inline; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-media, body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-img { min-height: 38vh; max-height: 46vh; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-gradient { background: linear-gradient( to top, rgba(3, 5, 10, 0.9) 0%, rgba(6, 9, 15, 0.78) 46%, rgba(9, 12, 18, 0.52) 74%, rgba(11, 14, 20, 0.42) 100% ); } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-inner { transform: none; padding-top: 0.8rem; padding-bottom: 0.85rem; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-overlay { align-items: flex-end; justify-content: flex-start; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-kicker { margin-bottom: 0.45rem; font-size: 0.64rem; letter-spacing: 0.13em; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-title { font-size: clamp(2.25rem, 10.4vw, 2.62rem); line-height: 1.06; margin-bottom: 0.55rem; text-wrap: pretty; max-width: 11ch; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-subtitle { font-size: 0.93rem; line-height: 1.4; margin-bottom: 0.7rem; max-width: 22rem; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-cta-wrap { gap: 0.55rem; justify-content: flex-start; width: 100%; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-cta-wrap .blog-btn { width: auto; min-width: min(15.8rem, 100%); min-height: 44px; font-size: 0.92rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-cta-secondary { display: none; } body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-meta { margin-top: 0.55rem; font-size: 0.69rem; opacity: 0.84; text-align: left; } body.blog-body[data-article-slug='3-days-in-london'] .blog-meta-strip { display: none; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-svg text { font-size: 13.5px !important; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-svg circle { transform-box: fill-box; transform-origin: center; transform: scale(1.5); } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-svg line { stroke-width: 3.2; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-svg marker path { stroke-width: 2.3; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-stops li { font-size: 1.14rem; gap: 0.62rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-stop-index { width: 1.72rem; height: 1.72rem; font-size: 0.88rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-meta { grid-template-columns: 1fr !important; gap: 0.56rem; } body.blog-body[data-article-slug='3-days-in-london'] .blog-route-meta p { font-size: 0.96rem; line-height: 1.48; overflow-wrap: anywhere; word-break: break-word; } html[dir='rtl'] body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-inner { text-align: right; align-items: flex-end; } html[dir='rtl'] body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-subtitle, html[dir='rtl'] body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-meta { text-align: right; } html[dir='rtl'] body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-cta-wrap { justify-content: flex-end; } html[dir='rtl'] body.blog-body[data-article-slug='3-days-in-london'] .blog-hero-overlay { justify-content: flex-end; } } .blog-article { position: relative; max-width: 100%; } /* Hero */ .blog-hero { position: relative; margin-bottom: 2.5rem; } .blog-hero-media { position: relative; min-height: 52vh; max-height: 78vh; overflow: hidden; background: #1a1a1f; } .blog-hero-img { width: 100%; height: 100%; min-height: 52vh; max-height: 78vh; object-fit: cover; display: block; } .blog-hero-gradient { position: absolute; inset: 0; background: linear-gradient( to top, rgba(6, 8, 14, 0.97) 0%, rgba(8, 10, 16, 0.78) 36%, rgba(10, 12, 18, 0.34) 64%, rgba(10, 12, 18, 0.42) 100% ); pointer-events: none; z-index: 1; } .blog-hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } .blog-hero-inner { position: relative; padding: 2rem 1.25rem 2.75rem; text-align: center; color: #f8f6f2; width: 100%; pointer-events: auto; } .blog-hero-kicker { font-family: var(--blog-sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; opacity: 0.92; margin: 0 0 0.85rem; } .container-narrow { max-width: calc(var(--blog-max) + 2.5rem); margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } .blog-hero-title { font-family: var(--blog-serif); font-weight: 500; font-size: clamp(1.85rem, 5.5vw, 3.15rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45); } .blog-hero-subtitle { font-family: var(--blog-sans); font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.55; max-width: 36rem; margin: 0 auto 1.5rem; opacity: 0.94; font-weight: 400; } .blog-hero-cta-wrap { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; } .blog-hero-meta { margin: 1rem 0 0; font-family: var(--blog-sans); font-size: 0.82rem; letter-spacing: 0.01em; opacity: 0.9; } .blog-hero-kicker:empty, .blog-hero-meta:empty, .blog-hero-cta-secondary:empty { display: none; } .blog-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--blog-sans); font-weight: 600; font-size: 0.9375rem; padding: 0.85rem 1.5rem; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .blog-btn-primary { background: var(--blog-accent); color: #fff; box-shadow: 0 4px 20px rgba(196, 92, 42, 0.45); } .blog-btn-primary:hover { background: var(--blog-accent-hover); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(196, 92, 42, 0.5); } .blog-btn-secondary { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } .blog-btn-secondary:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); } /* Meta strip */ .blog-meta-strip { font-family: var(--blog-sans); font-size: 0.875rem; color: var(--blog-ink-soft); padding-bottom: 1.5rem; border-bottom: 1px solid var(--blog-line); margin-bottom: 2.25rem; } .blog-meta-strip time { font-variant-numeric: tabular-nums; } /* Article body typography */ .blog-article-body { font-family: var(--blog-serif); font-size: 1.125rem; line-height: 1.75; color: var(--blog-ink); } .blog-article-body h1, .blog-article-body h2, .blog-article-body h3, .blog-article-body h4 { color: var(--blog-ink); } .blog-article-body > * + * { margin-top: 1.5rem; } .blog-lead { font-size: 1.28rem; line-height: 1.65; color: var(--blog-ink); } .blog-article-body p { margin: 0; } .blog-article-body a { color: var(--blog-accent); text-decoration: underline; text-underline-offset: 0.15em; } .blog-article-body a:hover { color: var(--blog-accent-hover); } .blog-article-body strong { font-weight: 600; } .blog-quick-answer { margin: 1.75rem 0; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid rgba(196, 92, 42, 0.3); background: linear-gradient(180deg, rgba(196, 92, 42, 0.08), rgba(196, 92, 42, 0.03)); } .blog-quick-answer h2 { margin: 0 0 0.45rem; font-family: var(--blog-sans); font-size: 1rem; letter-spacing: 0.01em; } .blog-quick-answer p { margin: 0; font-family: var(--blog-sans); font-size: 0.95rem; line-height: 1.58; color: var(--blog-ink-soft); } /* Reveal animation (desktop/tablet — on mobile opacity:0 stranded if IO/layout glitches → blank RTL page) */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (max-width: 768px) { .blog-body .reveal { opacity: 1; transform: none; transition: none; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .reading-progress-bar { transition: none; } } /* Tip grid */ .blog-tip-grid { display: grid; gap: 1rem; margin: 2.5rem 0; } @media (min-width: 640px) { .blog-tip-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } .blog-tip-card { background: #fff; border: 1px solid var(--blog-line); border-radius: 14px; padding: 1.35rem 1.35rem 1.25rem; box-shadow: 0 12px 40px rgba(15, 20, 25, 0.04); } .blog-tip-card h3 { font-family: var(--blog-sans); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--blog-ink); margin: 0 0 0.75rem; } .blog-tip-card ul { margin: 0; padding-left: 1.1rem; font-family: var(--blog-sans); font-size: 0.9rem; line-height: 1.55; color: var(--blog-ink-soft); } .blog-tip-card li + li { margin-top: 0.45rem; } /* Day section + route */ .blog-day-block { margin: 3.5rem 0; } .blog-day-label { font-family: var(--blog-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blog-accent); margin-bottom: 0.35rem; } .blog-day-heading { font-family: var(--blog-serif); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 500; line-height: 1.2; margin: 0 0 1.25rem; letter-spacing: -0.02em; color: var(--blog-ink); } .blog-route { margin: 1.75rem 0 2rem; padding: 1.25rem 1rem; background: #fff; border: 1px solid var(--blog-line); border-radius: 16px; overflow-x: auto; } .blog-route-svg { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; margin: 0 auto; } .blog-day-body { font-family: var(--blog-serif); font-size: 1.125rem; line-height: 1.75; } .blog-day-body > * + * { margin-top: 1.25rem; } .blog-day-vibe, .blog-day-route-summary, .blog-day-timing { margin: 0 0 0.8rem; font-family: var(--blog-sans); font-size: 0.96rem; line-height: 1.58; color: var(--blog-ink-soft); } .blog-day-route-summary { font-size: 1rem; color: var(--blog-ink); } .blog-route-details { margin-top: 0.85rem; display: grid; gap: 0.7rem; } .blog-route-stops { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; } .blog-route-stops li { display: flex; align-items: center; gap: 0.5rem; font-family: var(--blog-sans); color: var(--blog-ink); font-size: 0.9rem; } .blog-route-stop-index { width: 1.45rem; height: 1.45rem; border-radius: 999px; background: rgba(196, 92, 42, 0.14); border: 1px solid rgba(196, 92, 42, 0.38); display: inline-flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 700; } .blog-route-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .blog-route-meta p { margin: 0; border: 1px solid var(--blog-line); border-radius: 10px; padding: 0.55rem 0.65rem; background: rgba(255, 255, 255, 0.78); font-family: var(--blog-sans); font-size: 0.8rem; line-height: 1.45; color: var(--blog-ink-soft); } .blog-day-mini-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 1rem 0 1.35rem; } .blog-day-mini-card { background: #fff; border: 1px solid var(--blog-line); border-radius: 11px; padding: 0.7rem 0.8rem; } .blog-day-mini-card h3 { margin: 0 0 0.3rem; font-family: var(--blog-sans); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blog-accent); } .blog-day-mini-card p { margin: 0; font-family: var(--blog-sans); font-size: 0.84rem; color: var(--blog-ink-soft); line-height: 1.5; } .blog-day-context-cta { margin: 1.2rem 0 0; font-family: var(--blog-sans); font-size: 0.95rem; color: var(--blog-ink-soft); } .blog-day-context-cta a { color: var(--blog-accent); } /* Keep figures in-content to prevent RTL/mobile horizontal overflow. */ .blog-figure-full { margin: 2rem 0; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; } .blog-figure-full img { width: 100%; max-width: 100%; display: block; max-height: 70vh; object-fit: cover; } .blog-article-body img, .blog-day-body img, .blog-index-card img, .blog-tip-card img { max-width: 100%; height: auto; } .blog-figure-full figcaption { font-family: var(--blog-sans); font-size: 0.8125rem; color: var(--blog-ink-soft); padding: 0.65rem 1.25rem 0; max-width: var(--blog-max); margin: 0 auto; } /* Pull quote */ .blog-pullquote { margin: 2.75rem 0; padding: 1.75rem 1.5rem 1.75rem 1.25rem; border-left: 4px solid var(--blog-accent); background: linear-gradient(90deg, rgba(196, 92, 42, 0.06), transparent); border-radius: 0 12px 12px 0; } .blog-pullquote blockquote { margin: 0; font-family: var(--blog-serif); font-size: 1.35rem; line-height: 1.5; font-style: italic; color: var(--blog-ink); } .blog-pullquote cite { display: block; margin-top: 0.75rem; font-family: var(--blog-sans); font-size: 0.875rem; font-style: normal; color: var(--blog-ink-soft); } /* CTA band */ .blog-cta-band { margin: 3.5rem 0; padding: 2.25rem 1.5rem; border-radius: 18px; background: linear-gradient(135deg, #1a1d24 0%, #2d3340 100%); color: #f2efe9; text-align: center; } .blog-cta-band h2 { font-family: var(--blog-serif); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 500; margin: 0 0 1rem; color: #f2efe9; } .blog-cta-band .blog-cta-body { font-family: var(--blog-sans); font-size: 1rem; line-height: 1.65; max-width: 32rem; margin: 0 auto 1.35rem; opacity: 0.95; } .blog-cta-band .blog-cta-body a { color: #f0c090; } .blog-cta-band .blog-btn-primary { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); color: #fff !important; -webkit-text-fill-color: currentColor; } /* FAQ */ .blog-faq-section { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--blog-line); } .blog-section-title { font-family: var(--blog-serif); font-size: 1.65rem; font-weight: 500; margin: 0 0 1.25rem; letter-spacing: -0.02em; color: var(--blog-ink); } .blog-faq-list { display: flex; flex-direction: column; gap: 0.5rem; } .blog-faq-item { border: 1px solid var(--blog-line); border-radius: 12px; background: #fff; overflow: hidden; } .blog-faq-item summary { font-family: var(--blog-sans); font-weight: 600; font-size: 1rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem; } .blog-faq-item summary::-webkit-details-marker { display: none; } .blog-faq-item summary::after { content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: var(--blog-accent); transition: transform 0.2s ease; } .blog-faq-item[open] summary::after { content: '–'; } .blog-faq-answer { font-family: var(--blog-sans); font-size: 0.9375rem; line-height: 1.6; color: var(--blog-ink-soft); padding: 0 1.1rem 1.1rem; margin: 0; border-top: 1px solid var(--blog-line); padding-top: 0.75rem; } /* Related */ .blog-related-section { margin-top: 2.5rem; } .blog-related-grid { display: grid; gap: 0.75rem; } @media (min-width: 560px) { .blog-related-grid { grid-template-columns: repeat(2, 1fr); } } .blog-related-card { display: block; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--blog-line); background: #fff; text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .blog-related-card:hover { border-color: rgba(196, 92, 42, 0.35); box-shadow: 0 8px 28px rgba(15, 20, 25, 0.06); } .blog-related-card h3 { font-family: var(--blog-sans); font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--blog-ink); } .blog-related-card p { font-family: var(--blog-sans); font-size: 0.8125rem; line-height: 1.45; color: var(--blog-ink-soft); margin: 0; } /* Share rail */ .share-rail { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 0.5rem; } .share-rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--blog-line); background: #fff; color: var(--blog-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: 0 4px 20px rgba(15, 20, 25, 0.08); transition: background 0.2s ease, color 0.2s ease; } .share-rail-btn:hover { background: var(--blog-ink); color: #fff; border-color: var(--blog-ink); } @media (max-width: 1100px) { .share-rail { display: none; } } /* Sticky mobile CTA — stay within viewport width (no horizontal spill) */ .sticky-cta-mobile { position: fixed; left: 0; right: 0; bottom: 0; max-width: 100%; width: 100%; z-index: 100; margin: 0; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(250, 248, 245, 0.98), rgba(250, 248, 245, 0.88)); border-top: 1px solid var(--blog-line); box-shadow: 0 -8px 32px rgba(15, 20, 25, 0.06); display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .sticky-cta-mobile[hidden] { display: none !important; } .sticky-cta-mobile-link { flex: 0 1 auto; min-width: 0; box-sizing: border-box; max-width: min(24rem, 100%); width: auto; } .sticky-cta-dismiss { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--blog-line); background: #fff; color: var(--blog-ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; } @media (min-width: 769px) { .sticky-cta-mobile { display: none !important; } } /* Blog index page */ .blog-index-hero { padding: 3rem 1.25rem 2rem; text-align: center; max-width: 40rem; margin: 0 auto; } .blog-index-hero h1 { font-family: var(--blog-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 500; margin: 0 0 0.75rem; color: var(--blog-ink); } .blog-index-hero p { font-family: var(--blog-sans); color: var(--blog-ink-soft); margin: 0; line-height: 1.55; } .blog-index-grid { display: grid; gap: 1.25rem; max-width: 56rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; } @media (min-width: 640px) { .blog-index-grid { grid-template-columns: repeat(2, 1fr); } } .blog-index-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--blog-line); background: #fff; text-decoration: none; color: inherit; box-shadow: 0 8px 32px rgba(15, 20, 25, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-index-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(15, 20, 25, 0.1); } .blog-index-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .blog-index-card-body { padding: 1.1rem 1.15rem 1.25rem; } .blog-index-card h2 { font-family: var(--blog-serif); font-size: 1.2rem; font-weight: 500; margin: 0 0 0.35rem; color: var(--blog-ink) !important; text-decoration: none; background: none; -webkit-text-fill-color: currentColor; } .blog-index-meta { font-family: var(--blog-sans); font-size: 0.8125rem; color: var(--blog-ink-soft); } /* ========================================================= * RTL mirror of seo.css rules — needed because blog pages * remove dir="rtl" from (to fix Chrome RTL scroll * geometry) and use data-dir="rtl" instead. seo.css rules * like html[dir="rtl"] .header-nav … no longer match, so we * re-declare them here with html[data-dir="rtl"]. * ========================================================= */ html[data-dir="rtl"] .header-container { flex-direction: row-reverse; } html[data-dir="rtl"] .header-nav > ul { flex-direction: row-reverse; } html[data-dir="rtl"] .seo-lang-switcher-wrap { margin-left: 0; margin-right: var(--spacing-md); } html[data-dir="rtl"] .header-nav .nav-dropdown-menu { left: auto; right: 0; } html[data-dir="rtl"] .header-nav .nav-dropdown-submenu { padding-left: 0; padding-right: 20px; } html[data-dir="rtl"] .header-nav .nav-user-menu-dropdown { right: auto; left: 0; } html[data-dir="rtl"] .header-nav .nav-user-menu-trigger { flex-direction: row-reverse; } html[data-dir="rtl"] .header-nav .nav-user-menu-chevron { margin-left: 0; margin-right: 2px; } html[data-dir="rtl"] .header-nav a.nav-user-menu-link { flex-direction: row-reverse; text-align: right; } html[data-dir="rtl"] .header-nav button.nav-user-menu-logout { flex-direction: row-reverse; text-align: right; } @media (max-width: 768px) { html[data-dir="rtl"] .logo { margin-right: 0; margin-left: auto; } }