/* ============================================================================ Tel Aviv Taxi — custom CSS. Design tokens in :root; logical properties and [dir] hooks keep RTL (Hebrew) and LTR (English) equally correct. No framework. Motion is minimal and gated behind prefers-reduced-motion. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ /* Light mode is the default (no attribute). Dark is applied via — set by the toggle or by the OS preference (media query below applies only while no explicit choice is stored). */ :root { color-scheme: light; /* Palette — light */ --bg: #ffffff; /* page canvas */ --bg-2: #eef3f9; /* alternate section canvas */ --bg-elev: #ffffff; /* card / dropdown surface */ --bg-hover: #dde7f3; --border: #d7e0ee; /* visible border */ --border-soft: #e7edf6; /* hairline border */ --text: #0f1d3d; /* primary text */ --text-2: #33415f; /* secondary text */ --text-3: #5a6a8c; /* muted text */ --accent: #f59e0b; /* amber accent */ --accent-deep: #b45309; /* filled accent */ --accent-hover: #92400e; --accent-text: #8a4b00; /* accent used as text/link */ --accent-icon: #b45309; /* accent glyphs on surfaces */ --wa: #15803d; /* WhatsApp green */ --wa-hover: #166534; --danger: #b91c1c; --wash: rgb(15 29 61 / 0.05); /* hover / chip wash on surfaces */ --focus: #92400e; /* visible focus ring */ /* Surfaces derived from the palette */ --bg-top: #e8f0fc; /* hero gradient top */ /* Page-type shells */ --page-wash: transparent; --cta-band-fill: #0b1326; /* near-black band: distinct from amber buttons */ --cta-band-text: #f8fafc; /* Service category tints (used as subtle section washes) */ --cat-airport: rgba(14, 116, 144, 0.07); --cat-city: rgba(217, 119, 6, 0.06); --cat-route: rgba(120, 113, 108, 0.08); --cat-desert: rgba(194, 120, 3, 0.07); --cat-business: rgba(29, 78, 216, 0.07); --cat-hotel: rgba(21, 128, 61, 0.07); } :root[data-theme="dark"] { color-scheme: dark; /* Palette — dark navy (original brand) */ --bg: #0f1d3d; --bg-2: #132448; --bg-elev: #1e293b; --bg-hover: #33415a; --border: #33415a; --border-soft: #223255; --text: #f8fafc; --text-2: #e2e8f0; --text-3: #cbd5e1; --accent: #f59e0b; --accent-deep: #b45309; --accent-hover: #92400e; --accent-text: #fcd34d; --accent-icon: #f59e0b; --wa: #15803d; --wa-hover: #166534; --danger: #ef4444; --wash: rgb(255 255 255 / 0.05); --focus: #f59e0b; --bg-top: #13284f; --page-wash: transparent; --cta-band-fill: #05080f; --cta-band-text: #f1f5f9; --cat-airport: rgba(56, 189, 248, 0.08); --cat-city: rgba(251, 191, 36, 0.07); --cat-route: rgba(148, 163, 184, 0.08); --cat-desert: rgba(251, 146, 60, 0.08); --cat-business: rgba(96, 165, 250, 0.08); --cat-hotel: rgba(74, 222, 128, 0.08); } /* Respect the OS preference until the visitor makes an explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0f1d3d; --bg-2: #132448; --bg-elev: #1e293b; --bg-hover: #33415a; --border: #33415a; --border-soft: #223255; --text: #f8fafc; --text-2: #e2e8f0; --text-3: #cbd5e1; --accent: #f59e0b; --accent-deep: #b45309; --accent-hover: #92400e; --accent-text: #fcd34d; --accent-icon: #f59e0b; --wa: #15803d; --wa-hover: #166534; --danger: #ef4444; --wash: rgb(255 255 255 / 0.05); --focus: #f59e0b; --bg-top: #13284f; --page-wash: transparent; --cta-band-fill: #05080f; --cta-band-text: #f1f5f9; --cat-airport: rgba(56, 189, 248, 0.08); --cat-city: rgba(251, 191, 36, 0.07); --cat-route: rgba(148, 163, 184, 0.08); --cat-desert: rgba(251, 146, 60, 0.08); --cat-business: rgba(96, 165, 250, 0.08); --cat-hotel: rgba(74, 222, 128, 0.08); } } :root { /* Typography — Heebo covers Latin + Hebrew; system fallbacks follow */ --font: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew", "Arial Hebrew", sans-serif; --font-display: "Heebo", system-ui, sans-serif; /* Spacing — 4px / 8px rhythm */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; /* Elevation — named only */ --sh-sm: 0 1px 2px rgb(0 0 0 / 0.08); --sh-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.08); --sh-lg: 0 10px 15px -3px rgb(0 0 0 / 0.14), 0 4px 6px -4px rgb(0 0 0 / 0.1); --sh-up: 0 -4px 12px rgb(0 0 0 / 0.1); /* upward shadow: mobile bottom bar */ /* Theme-independent surfaces */ --bg-footer: #0a1429; /* footer stays navy in both themes */ --on-accent: #ffffff; /* text on filled accent/CTA */ --ink-on-light: #0f1d3d; /* navy ink on white/light fills (btn-light) */ --btn-light-hover: #dbe4f0; --foot-head: #f8fafc; --foot-text: #cbd5e1; --foot-link: #cbd5e1; --foot-link-h: #fcd34d; /* Layout */ --container: 1180px; --header-h: 4.5rem; --radius: var(--r-md); /* Motion */ --t-fast: 150ms; --t-norm: 250ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ----------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--text-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Hebrew reads a touch larger and with relaxed leading */ [lang="he"] { line-height: 1.7; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { color: var(--text); line-height: 1.22; margin: 0 0 0.6em; } h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -0.01em; } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; } h3 { font-size: 1.125rem; font-weight: 700; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-inline-start: 1.25rem; } li { margin-block-end: 0.35rem; } a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent-text); } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--accent-deep); color: var(--on-accent); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); } @media (min-width: 640px) { .container { padding-inline: var(--s-6); } } .muted { color: var(--text-3); } .mt-0 { margin-top: 0; } /* ------------------------------------------------------------ skip link --- */ .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: var(--s-4); background: var(--accent-deep); color: var(--on-accent); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); text-decoration: none; z-index: 200; } .skip-link:focus { inset-block-start: var(--s-3); color: var(--on-accent); } /* ------------------------------------------------------------------- buttons .btn base .btn-primary amber filled .btn-whatsapp green filled .btn-light white surface, navy text (used on the accent CTA band) .btn-ghost outline .btn-lg hero/CTA size --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.25rem; border-radius: var(--r-md); border: 1px solid transparent; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); box-shadow: var(--sh-sm); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--accent-deep); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn-whatsapp { background: var(--wa); color: var(--on-accent); } .btn-whatsapp:hover { background: var(--wa-hover); color: var(--on-accent); } .btn-light { background: var(--on-accent); color: var(--ink-on-light); } .btn-light:hover { background: var(--btn-light-hover); color: var(--ink-on-light); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); } .btn-lg { padding: 0.9rem 1.75rem; font-size: 1.0625rem; } /* ----------------------------------------------------------------- header -- */ .site-header { position: sticky; inset-block-start: 0; z-index: 60; background: var(--bg); border-block-end: 1px solid var(--border-soft); } .header-inner { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--text); flex-shrink: 0; } .brand:hover { color: var(--text); } .brand-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .brand-accent { color: var(--accent); } /* Desktop nav */ .main-nav { margin-inline-start: auto; } .nav-list { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; gap: 0.15rem; } .nav-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; color: var(--text-2); text-decoration: none; border-radius: var(--r-sm); font-weight: 500; white-space: nowrap; } .nav-link:hover { color: var(--accent-text); background: var(--wash); } .nav-link.is-active { color: var(--accent-text); } .nav-link.is-active::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--accent); margin-block-start: 2px; } /* Dropdown (desktop) */ .nav-drop { position: relative; } .nav-drop-btn { background: none; border: 0; font: inherit; cursor: pointer; } .chev { margin-inline-start: 0.15rem; transition: transform var(--t-fast) var(--ease); } [dir="rtl"] .chev { transform: scaleX(-1); } .nav-drop-menu { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 0; min-width: 240px; margin: 0; padding: var(--s-2); list-style: none; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast); } .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-drop-menu .nav-link { display: block; white-space: normal; } /* Language switch */ .lang-switch { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; } .lang-link { color: var(--text-2); text-decoration: none; padding: 0.25rem 0.1rem; } .lang-link:hover { color: var(--accent-text); } .lang-cur { color: var(--accent-text); } .lang-sep { color: var(--border); } .header-actions { display: flex; align-items: center; gap: var(--s-4); margin-inline-start: var(--s-2); } .btn-call { white-space: nowrap; } /* Mobile menu (native
, works without JS) */ .mobile-menu { display: none; position: relative; } .mobile-menu-btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elev); color: var(--text); cursor: pointer; } .mobile-menu-btn::-webkit-details-marker { display: none; } .burger, .burger::before, .burger::after { content: ""; display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform var(--t-fast) var(--ease); } .burger::before { position: absolute; inset-block-start: -6px; } .burger::after { position: absolute; inset-block-start: 6px; } .mobile-menu[open] .burger::before { transform: translateY(6px) rotate(45deg); } .mobile-menu[open] .burger::after { transform: translateY(-6px) rotate(-45deg); } .mobile-menu[open] .burger { background: transparent; } .mobile-menu-panel { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0; width: min(320px, 86vw); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s-4); display: grid; gap: 2px; max-height: 70vh; overflow: auto; } .mobile-sub { margin: var(--s-3) 0 2px; color: var(--text-3); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .mobile-link { display: block; padding: 0.55rem 0.35rem; color: var(--text-2); text-decoration: none; border-radius: var(--r-sm); font-weight: 500; } .mobile-link:hover { color: var(--accent-text); background: var(--wash); } .mobile-link.is-active { color: var(--accent-text); } .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-block-start: var(--s-3); } @media (max-width: 1080px) { .header-actions > .lang-switch { display: none; } /* header switch only — language lives in the menu + footer */ .header-actions { margin-inline-start: auto; } .main-nav { display: none; } /* services live in the mobile menu */ .mobile-menu { display: block; margin-inline-start: var(--s-2); } } /* --------------------------------------------------------------- hero ------- */ .hero { background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%); border-block-end: 1px solid var(--border-soft); padding-block: clamp(2.5rem, 6vw, 4.5rem); } .hero-inner { display: grid; gap: var(--s-8); align-items: center; } @media (min-width: 900px) { .hero-inner { grid-template-columns: 1.15fr 0.85fr; } } .hero h1 { margin-block-end: 0.55rem; } .lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--text-2); max-width: 60ch; } [dir="rtl"] .lead { max-width: none; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-5); } .hero-points { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } .hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-3); font-size: 0.9375rem; margin: 0; } .hero-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .hero-art { width: 100%; height: auto; border-radius: var(--r-xl); } /* ------------------------------------------------------------- sections ---- */ .content-sec { padding-block: clamp(2rem, 5vw, 3.5rem); } .content-sec:nth-of-type(even) { background: var(--bg-2); } .sec-body { max-width: 860px; } .sec-body h2 { margin-block-end: var(--s-4); } .sec-body h2:not(:first-child) { margin-block-start: var(--s-4); } .check-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); } .check-list li { position: relative; padding-inline-start: 1.75rem; margin: 0; } .check-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.45em; width: 0.7rem; height: 0.7rem; transform: rotate(45deg); border-radius: 2px; background: var(--accent); } .sec-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); } /* Related services */ .rel-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .rel-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); text-decoration: none; box-shadow: var(--sh-sm); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .rel-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .rel-name { font-weight: 700; color: var(--text); } .rel-go { color: var(--accent); font-size: 1.25rem; line-height: 1; } /* ---------------------------------------------------------------- FAQ ------ */ .faq-sec { } .faq-item { border-block-end: 1px solid var(--border-soft); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); cursor: pointer; list-style: none; padding: var(--s-4) 0; font-weight: 600; color: var(--text); font-size: 1.0625rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent-text); } .faq-chev { transition: transform var(--t-fast) var(--ease); } [dir="rtl"] .faq-chev { transform: scaleX(-1); } .faq-item[open] .faq-chev { transform: rotate(180deg); } [dir="rtl"] .faq-item[open] .faq-chev { transform: scaleX(-1) rotate(180deg); } .faq-item p { padding-block-end: var(--s-4); color: var(--text-3); max-width: 72ch; } /* contact cards */ .contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-block: var(--s-3); } /* ============================================================================ Design v4 — premium refresh (non-destructive refinements to typography, hero depth, button elevation, and section breathing room) ========================================================================== */ /* ------- page depth & hero refinement -------------------------------------- */ body { /* Add subtle page wash for depth */ position: relative; } .hero { background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg) 100%); border-block-end: 1px solid var(--border-soft); padding-block: clamp(3rem, 7vw, 5rem); position: relative; overflow: clip; } .hero::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 64px; background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, transparent 55%); pointer-events: none; } .hero-inner { display: grid; gap: var(--s-10); align-items: center; } @media (min-width: 900px) { .hero-inner { grid-template-columns: 1.15fr 0.85fr; } } .hero h1 { margin-block-end: 0.55rem; letter-spacing: -0.015em; } .lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--text-2); max-width: 60ch; } .hero-points { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } .hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-3); font-size: 0.9375rem; margin: 0; } .hero-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .hero-art { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: 0 24px 52px rgb(15 29 61 / 0.16); } /* ---- hero actions & points ------------------------------------------------- */ .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-5); } .hero-points { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } .hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-3); font-size: 0.9375rem; } .hero-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ---- sections ---------------------------------------------------------- */ .content-sec { padding-block: clamp(2.75rem, 6vw, 4rem); } .content-sec:nth-of-type(even) { background: var(--bg-2); } .sec-body { max-width: 860px; } .sec-body h2 { margin-block-end: var(--s-4); } .sec-body h2:not(:first-child) { margin-block-start: var(--s-4); } .sec-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); } .rel-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .rel-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-sm); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .rel-card:hover { border-color: var(--accent); transform: translateY(-3px); text-decoration: none; } .rel-card .rel-go { background: var(--accent-deep); color: var(--on-accent); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .rel-card:hover .rel-go { transform: translateX(2px); } /* ---------- FAQ group titles ------------------------------------------------- */ .faq-group-title { color: var(--accent-text); font-size: 0.95rem; font-weight: 700; margin-block: var(--s-5) var(--s-2); padding-block: var(--s-2); border-inline-start: 3px solid var(--accent); padding-inline-start: 0.6rem; } .faq-group-title::before { display: none; } /* ---------- CTA band & actions ------------------------------------------ */ .cta-band { background: var(--cta-band-fill); color: var(--cta-band-text); padding-block: clamp(2.5rem, 6vw, 4rem); } .cta-band h2 { color: var(--cta-band-text); } .cta-band .btn { box-shadow: var(--sh-md); } .cta-band .btn-light { background: var(--on-accent); color: var(--ink-on-light); } .cta-band .btn-light:hover { background: #fff3e0; color: var(--ink-on-light); } /* ------------------------------------------------------------- CTA band ---- */ .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); } .cta-actions .btn { box-shadow: var(--sh-md); } .cta-band .btn-light { background: var(--on-accent); color: var(--ink-on-light); } .cta-band .btn-light:hover { background: #fff3e0; color: var(--ink-on-light); } /* ---------- footer legal links ------------------------------------------ */ .site-footer .lang-switch { margin-block-start: var(--s-3); flex-wrap: wrap; row-gap: 0.2rem; } .site-footer .lang-link { color: var(--foot-link); padding: 0.2rem 0.15rem; } .site-footer .lang-link:hover { color: var(--foot-link-h); } .site-footer .lang-cur { color: var(--foot-link-h); } .site-footer .lang-sep { color: var(--border-soft); } /* --------------------------------------------------------------- footer ---- */ .site-footer { background: var(--bg-footer); border-block-start: 1px solid var(--border-soft); color: var(--foot-text); padding-block: var(--s-12) calc(var(--s-16) + 1rem); } .foot-grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr; } @media (min-width: 720px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .foot-brand p { margin-block: var(--s-3) var(--s-4); max-width: 40ch; } .foot-sister { margin-block-start: var(--s-2); font-size: 0.875rem; } .foot-sister a { color: var(--foot-link-h); text-decoration: none; } .foot-sister a:hover { color: var(--foot-link-h); text-decoration: underline; } .foot-h { color: var(--foot-head); font-weight: 700; margin: 0 0 var(--s-3); } .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .foot-col a { color: var(--foot-link); text-decoration: none; } .foot-col a:hover { color: var(--foot-link-h); } .foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); border-block-start: 1px solid var(--border-soft); margin-block-start: var(--s-8); padding-block-start: var(--s-5); font-size: 0.875rem; } .foot-legal ul { list-style: none; display: flex; gap: var(--s-5); margin: 0; padding: 0; } .foot-legal a { color: var(--foot-link); text-decoration: none; } .foot-legal a:hover { color: var(--foot-link-h); } /* --------------------------------------------------------- mobile CTA bar -- */ .mobile-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; display: none; grid-template-columns: 1fr 1fr 1fr; background: var(--bg-elev); border-block-start: 1px solid var(--border); box-shadow: var(--sh-up); } .mcta { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.65rem 0.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px)); color: var(--text-2); text-decoration: none; font-size: 0.8125rem; font-weight: 600; border-inline-start: 1px solid var(--border-soft); } .mcta:first-child { border-inline-start: 0; } .mcta svg { color: var(--accent-icon); } .mcta:hover { color: var(--accent-text); background: var(--wash); text-decoration: none; } @media (max-width: 760px) { .mobile-cta { display: grid; } body { padding-block-end: calc(3.4rem + env(safe-area-inset-bottom, 0px)); } } /* ---------------------------------------------------------- breadcrumbs ---- */ .crumbs { padding-block: var(--s-4); display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-size: 0.9rem; } .crumb { color: var(--text-3); text-decoration: none; } .crumb:hover { color: var(--accent-text); } .crumb.cur { color: var(--accent-text); } .crumb-sep { color: var(--border); margin-inline: 0.2rem; } /* ------------------------------------------------------------ misc/errors -- */ .err-card { text-align: center; padding-block: var(--s-16); } .err-code { font-size: clamp(3rem, 10vw, 5rem); font-weight: 800; color: var(--accent); } .err-card p { max-width: 52ch; margin-inline: auto; } .err-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-block-start: var(--s-6); } /* ----------------------------------------------------------------- print ---- */ @media print { .site-header, .mobile-cta, .cta-band, .site-footer { display: none; } body { background: var(--on-accent); color: var(--bg); } } /* ------------------------------------------------------------- reduced ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================ Design v2 — typography, depth and detail pass (token-driven, RTL-safe) ========================================================================== */ @font-face{font-family:Heebo;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/heebo-400-latin.woff2) format(woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Heebo;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/heebo-500-latin.woff2) format(woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Heebo;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/heebo-700-latin.woff2) format(woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Heebo;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/heebo-800-latin.woff2) format(woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Heebo;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/heebo-400-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} @font-face{font-family:Heebo;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/heebo-500-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} @font-face{font-family:Heebo;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/heebo-700-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} @font-face{font-family:Heebo;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/heebo-800-hebrew.woff2) format(woff2);unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} :root { /* typography now opens with Heebo (Latin + Hebrew in one family) */ --font: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew", "Arial Hebrew", sans-serif; --font-display: "Heebo", system-ui, sans-serif; /* refined surfaces */ --bg-deep: #0a1429; } html { scrollbar-gutter: stable; } body { letter-spacing: 0.004em; } h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; } [lang="he"] h1, [lang="he"] h2, [lang="he"] h3 { letter-spacing: 0; } /* ---------- header ---------- */ .site-header { background: var(--bg); } .site-header::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; background: linear-gradient(90deg, var(--accent-deep), var(--accent) 55%, var(--accent-text)); } .nav-link { font-weight: 500; } .nav-link.is-active::after { width: auto; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-text)); margin-block-start: 1px; opacity: 1; } .btn-call { border-radius: 999px; box-shadow: var(--sh-sm); } .brand { gap: var(--s-3); } .brand-name { font-weight: 800; letter-spacing: -0.01em; } .lang-switch a, .lang-switch span { padding-block: 0.15rem; } /* ---------- hero ---------- */ .hero { position: relative; overflow: clip; } .hero::after { /* faint end-of-hero fade into page bg */ content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 64px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; } .hero h1 { letter-spacing: -0.015em; } .lead { font-weight: 500; } .hero-points li { background: var(--wash); border: 1px solid var(--border-soft); padding: 0.35rem 0.9rem; border-radius: 999px; } .hero-points li::before { width: 7px; height: 7px; } .hero-art { border-radius: var(--r-xl); box-shadow: var(--sh-md); } /* ---------- sections ---------- */ .content-sec { position: relative; } .sec-body h2 { padding-block-end: 0.4rem; } .sec-body h2::after { content: ""; display: block; width: 46px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-text)); margin-block-start: 0.55rem; } .sec-body h3 { color: var(--text-2); } /* ---------- buttons ---------- */ .btn { border-radius: var(--r-lg); font-weight: 700; } .btn-lg { border-radius: 999px; } .btn-primary { box-shadow: var(--sh-md); } .btn-whatsapp { box-shadow: var(--sh-md); } .btn:active { transform: translateY(1px) scale(0.99); } /* ---------- cards / related ---------- */ .rel-grid { gap: var(--s-4); } .rel-card { border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); box-shadow: var(--sh-sm); background: linear-gradient(180deg, var(--bg-elev), var(--bg-2)); } .rel-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--sh-md); } .rel-card .rel-go { background: var(--accent-deep); color: var(--on-accent); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .rel-card:hover .rel-go { transform: translateX(2px); } [dir="rtl"] .rel-card:hover .rel-go { transform: translateX(-2px); } /* ---------- FAQ ---------- */ .faq-group-title { color: var(--accent-text); font-size: 0.95rem; font-weight: 700; } .faq-group-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-inline-end: 0.5rem; } .faq-item summary { font-weight: 600; } .faq-item summary:hover { color: var(--accent-text); } .faq-item p { color: var(--text-3); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: clip; } .cta-band::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-text)); opacity: 0.85; } .cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); } /* ---------- footer ---------- */ .site-footer { background: var(--bg-footer); } .site-footer a { transition: color var(--t-fast) var(--ease); } .foot-col a { font-size: 0.95rem; } .foot-brand .brand { margin-block-end: 0.25rem; } /* ---------- mobile bar ---------- */ .mcta { transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .mcta:active { background: var(--accent-hover); } /* ---------- touch / focus polish ---------- */ a, button, summary { -webkit-tap-highlight-color: transparent; } :focus-visible { outline-offset: 3px; } /* ---------- print stays clean ---------- */ @media print { .site-header::before, .hero::after, .cta-band::before { display: none; } } /* ============================================================================ Mobile language-switch fix — the switch must stay reachable below 1080px. The header one is hidden; the mobile-menu copy + footer copy stay visible. ========================================================================== */ .mobile-menu-panel .lang-toggle { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.35rem; margin-block-start: var(--s-3); border-block-start: 1px solid var(--border-soft); } .mobile-menu-panel .lang-link { flex: 1; text-align: center; padding: 0.4rem 0.2rem; border-radius: var(--r-sm); } .mobile-menu-panel .lang-link:hover { background: var(--wash); } .mobile-menu-panel .lang-link.lang-cur { color: var(--text); font-weight: 700; background: var(--wash); } .mobile-menu-panel .lang-sep { color: var(--border); } /* Footer copy — the footer stays navy in both themes, so give it footer colours */ .site-footer .lang-switch { margin-block-start: var(--s-3); flex-wrap: wrap; row-gap: 0.2rem; } .site-footer .lang-link { color: var(--foot-link); padding: 0.2rem 0.15rem; } .site-footer .lang-link:hover { color: var(--foot-link-h); } .site-footer .lang-cur { color: var(--foot-link-h); } .site-footer .lang-sep { color: var(--border-soft); } /* ============================================================================ Design v3 — page-type shells, category tints, component refinement ========================================================================== */ /* ---- page-type shells ------------------------------------------------------ */ body[data-page="legal"] .hero-actions { display: none; } body[data-page="legal"] .hero-art, body[data-page="info"] .hero-art { display: none; } body[data-page="legal"] .hero, body[data-page="info"] .hero { background: var(--bg); border-block-end: 0; padding-block: clamp(2rem, 5vw, 3rem); } body[data-page="legal"] .hero-inner, body[data-page="info"] .hero-inner { grid-template-columns: 1fr; } body[data-page="legal"] .hero h1 { margin-block-end: 0.35rem; } body[data-page="legal"] .hero .lead, body[data-page="info"] .hero .lead { max-width: 60ch; margin: 0; } body[data-page="legal"] main, body[data-page="info"] .sec-body, body[data-page="legal"] .sec-body { max-width: 740px; } body[data-page="legal"] .content-sec { background: var(--bg); } /* ---- category tints (service pages) --------------------------------------- */ body[data-cat] .content-sec:nth-of-type(even) { background: var(--page-wash); } body[data-cat="airport"] { --page-wash: var(--cat-airport); } body[data-cat="city"] { --page-wash: var(--cat-city); } body[data-cat="route"] { --page-wash: var(--cat-route); } body[data-cat="desert"] { --page-wash: var(--cat-desert); } body[data-cat="business"]{ --page-wash: var(--cat-business); } body[data-cat="hotel"] { --page-wash: var(--cat-hotel); } /* ---- related service cards ------------------------------------------------- */ .rel-card { border-block-start: 3px solid var(--accent); } .rel-card .rel-go { background: var(--accent-deep); color: var(--on-accent); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .rel-card:hover .rel-go { transform: translateX(2px); } [dir="rtl"] .rel-card:hover .rel-go { transform: translateX(-2px); } /* ---- FAQ group titles ------------------------------------------------------ */ .faq-group-title { color: var(--accent-text); font-size: 0.95rem; font-weight: 700; margin-block: var(--s-5) var(--s-2); padding-block: var(--s-2); border-inline-start: 3px solid var(--accent); padding-inline-start: 0.6rem; } .faq-group-title::before { display: none; } /* ---- header language toggle ------------------------------------------------ */ .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; font-size: 0.875rem; } .lang-toggle a { padding: 0.3rem 0.6rem; color: var(--text-2); text-decoration: none; border-inline-start: 1px solid var(--border-soft); } .lang-toggle a:first-child { border-inline-start: 0; } .lang-toggle a:hover { color: var(--accent-text); background: var(--wash); } .lang-toggle a.lang-cur { color: var(--text); font-weight: 700; background: var(--wash); } .lang-toggle .lang-sep { display: none; } @media (max-width: 1080px) { .header-actions .lang-toggle { display: none; } } /* ---- content fade-in ------------------------------------------------------ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } body:not([data-page="legal"]) main { animation: fadeUp 380ms var(--ease) both; } @media (prefers-reduced-motion: reduce) { body:not([data-page="legal"]) main { animation: none; } }