/* ========================================================================== MR TRANS — Private Transfers Israel ========================================================================== Organisation ------------ 1. Design tokens Colour, type, spacing, radius, shadow, motion 2. Reset and base Normalisation and document defaults 3. Utilities Small single-purpose helpers 4. Accessibility Skip link, focus rings, toolbar preference classes 5. Header Sticky navigation, language switcher, auth controls 6. Buttons All button variants 7. Forms Inputs, selects, checkboxes, field groups 8. Hero Full-bleed image band and the floating booking card 9. Public sections Services, routes, why-us, FAQ 10. Footer 11. Modals 12. Toasts 13. Back-office Sidebar, KPI cards, tables, resource cards 14. Right-to-left 15. Responsive Conventions ----------- Every colour, space and radius comes from a token in section 1 — no raw hex values below that point. Tokens are redefined under `.dark-theme`, which the back-office sets on , so one rule set serves both surfaces. Class names are load-bearing: `static/index.html` and the ES modules in `static/js/modules/` reference them directly. Renaming one requires updating both. `new-*` prefixed names are retained from an earlier revision because the markup still uses them. ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------ Gold is the accent, used for emphasis and interactive affordances. `--gold-ink` is the darker shade that clears 4.5:1 contrast on white, so the bright brand gold is never used for body text. */ --gold: #c59b27; --gold-bright: #e0b53d; --gold-ink: #8a6a10; --gold-wash: rgba(197, 155, 39, 0.12); --gold-edge: rgba(197, 155, 39, 0.34); /* --- Neutral ramp ---------------------------------------------------- */ --slate-950: #0b1220; --slate-900: #111827; --slate-800: #1f2937; --slate-700: #374151; --slate-500: #6b7280; --slate-400: #9ca3af; --slate-300: #d1d5db; --slate-200: #e5e7eb; --slate-100: #f3f4f6; --slate-50: #f9fafb; --white: #ffffff; /* --- Status ---------------------------------------------------------- */ --green: #10b981; --green-deep: #065f46; --amber: #f59e0b; --red: #ef4444; --red-deep: #7f1d1d; --cyan: #06b6d4; --purple: #8b5cf6; /* --- Semantic surfaces (light) --------------------------------------- */ --bg-page: var(--slate-50); --bg-surface: var(--white); --bg-raised: var(--white); --bg-sunken: var(--slate-100); --bg-inverse: var(--slate-900); --text-strong: var(--slate-900); --text-body: var(--slate-800); --text-muted: var(--slate-500); --text-inverse: var(--white); --text-accent: var(--gold-ink); --border: var(--slate-200); --border-strong: var(--slate-300); /* --- Type ------------------------------------------------------------ Sizes are fluid between a 360px and a 1400px viewport, so the scale holds together on a phone without a cascade of breakpoint overrides. */ --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif; --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --text-3xl: clamp(1.9rem, 1.45rem + 2vw, 2.85rem); --text-4xl: clamp(2.3rem, 1.6rem + 3.1vw, 3.9rem); --leading-tight: 1.12; --leading-snug: 1.35; --leading-normal: 1.65; /* --- Spacing (4px base) ---------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3.5rem; --space-9: 5rem; --space-10: 7rem; /* --- Radius ----------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* --- Elevation ------------------------------------------------------- Two-layer shadows: a tight contact shadow plus a wide ambient one. */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05); --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.07), 0 22px 48px rgba(15, 23, 42, 0.12); --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.09), 0 40px 80px rgba(15, 23, 42, 0.18); --ring: 0 0 0 3px var(--gold-edge); /* --- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 140ms; --duration: 240ms; --duration-slow: 420ms; /* --- Layout ----------------------------------------------------------- */ --page-max: 1240px; --page-gutter: clamp(1rem, 4vw, 2.5rem); --header-height: 72px; } /* Back-office surface. `modules/ui.js` sets `.dark-theme` on — one level above the elements that consume these tokens, because an element that both defines a custom property and uses it in its own declarations is not reliably restyled when the defining class is toggled. Every component below inherits the new palette unchanged. */ .dark-theme { --bg-page: var(--slate-950); --bg-surface: rgba(31, 41, 55, 0.62); --bg-raised: var(--slate-800); --bg-sunken: var(--slate-900); --text-strong: #f8fafc; --text-body: var(--slate-300); --text-muted: var(--slate-400); --text-accent: var(--gold-bright); --border: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.6); } /* ========================================================================== 2. RESET AND BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); /* Matches so overscroll does not reveal a mismatched colour. */ background: var(--bg-page); } body { min-height: 100vh; /* No background here on purpose: paints the page surface. Having both elements paint it meant two places to keep in sync, and resolved a stale value when the theme class changed. */ color: var(--text-body); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text-strong); line-height: var(--leading-tight); font-weight: 700; text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } img, picture, svg { display: block; max-width: 100%; } /* Width/height attributes reserve layout space before an image loads, but they also act as presentational hints that beat `aspect-ratio`. Opting every image into `height: auto` keeps the reservation and lets CSS govern the shape; the hero opts back out because it fills a fixed band. */ img[width][height] { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } table { border-collapse: collapse; width: 100%; } ul { list-style: none; padding: 0; } /* ========================================================================== 3. UTILITIES ========================================================================== */ .main-wrapper, .new-wrapper { width: 100%; } .section { max-width: var(--page-max); margin-inline: auto; padding: var(--space-9) var(--page-gutter); } .section-title { font-size: var(--text-3xl); text-align: center; margin-bottom: var(--space-3); letter-spacing: -0.02em; } /* A short gold rule beneath every section heading. */ .section-title::after { content: ''; display: block; width: 56px; height: 3px; margin: var(--space-4) auto 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), var(--gold-bright)); } .text-gold { color: var(--text-accent); } .muted { color: var(--text-muted); } .margin-top-20 { margin-top: var(--space-5); } .view-section { display: none; } .view-section.active { display: block; } /* ========================================================================== 4. ACCESSIBILITY ========================================================================== */ .skip-link { position: absolute; /* Logical, not physical: `left: -9999px` in a right-to-left document does not reliably park the element off the *visual* left edge — in Chrome it instead extends the page's scrollable area by ~9999px in the opposite direction, producing a permanent horizontal scrollbar the moment Hebrew is active. `inset-inline-start` tracks the reading direction instead, so it stays off-screen (before the content start) in both directions. */ inset-inline-start: -9999px; top: 0; z-index: 400; padding: var(--space-3) var(--space-5); background: var(--slate-900); color: var(--white); border-radius: 0 0 var(--radius-md) 0; font-weight: 600; } .skip-link:focus { inset-inline-start: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* One consistent focus ring for every interactive element. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); } /* --- Toolbar preference classes, applied to by modules/a11y.js --- */ .a11y-contrast { filter: contrast(1.3); } .a11y-dyslexia, .a11y-dyslexia * { font-family: 'Comic Sans MS', Verdana, sans-serif !important; letter-spacing: 0.04em; word-spacing: 0.14em; line-height: 1.8; } .a11y-grayscale { filter: grayscale(1); } .a11y-links a, .a11y-links .link-button { text-decoration: underline !important; text-underline-offset: 3px; background: #ffff00 !important; color: #000000 !important; } .a11y-reduce-motion, .a11y-reduce-motion *, .a11y-reduce-motion *::before, .a11y-reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Accessibility toolbar ------------------------------------------------ */ .a11y-widget-btn { position: fixed; inset-inline-end: var(--space-5); bottom: var(--space-5); z-index: 260; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--slate-900); color: var(--gold-bright); font-size: 1.35rem; box-shadow: var(--shadow-lg); transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease); } .a11y-widget-btn:hover { transform: scale(1.08); background: var(--slate-800); } .a11y-drawer { position: fixed; inset-inline-end: var(--space-5); bottom: calc(var(--space-5) + 66px); z-index: 260; width: min(320px, calc(100vw - 2 * var(--space-5))); background: var(--white); color: var(--slate-900); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; /* Hidden by default; `.open` is toggled by modules/a11y.js. */ opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.97); transform-origin: bottom right; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration); } .a11y-drawer.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .a11y-drawer-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--slate-200); background: var(--slate-50); } .a11y-drawer-header h3 { font-size: var(--text-base); color: var(--slate-900); } .a11y-drawer-body { padding: var(--space-5); display: grid; gap: var(--space-5); } .a11y-group { display: grid; gap: var(--space-2); } .a11y-group > label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-500); } .a11y-btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .a11y-opt-btn, .a11y-toggle-btn, .a11y-reset-btn { padding: var(--space-2) var(--space-3); border: 1px solid var(--slate-200); border-radius: var(--radius-sm); background: var(--white); color: var(--slate-800); font-size: var(--text-xs); font-weight: 600; text-align: center; transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } .a11y-toggle-btn { display: flex; align-items: center; gap: var(--space-2); text-align: start; width: 100%; } .a11y-opt-btn:hover, .a11y-toggle-btn:hover, .a11y-reset-btn:hover { background: var(--slate-50); border-color: var(--slate-300); } .a11y-toggle-btn.active { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-ink); } .a11y-reset-btn { background: var(--slate-100); } .a11y-statement-link { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--gold-ink); text-decoration: underline; } /* ========================================================================== 5. HEADER ========================================================================== */ .app-header, .new-header { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--bg-surface) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); transition: background-color var(--duration) var(--ease); } .header-container { max-width: var(--page-max); min-height: var(--header-height); margin-inline: auto; padding: var(--space-3) var(--page-gutter); display: flex; align-items: center; /* Wrapping is the safety valve: a signed-in session adds four more controls to this row, and without it the header pushed the whole page wider than the viewport and produced a horizontal scrollbar. */ flex-wrap: wrap; gap: var(--space-3) var(--space-4); } .brand-logo { display: flex; align-items: center; flex-shrink: 0; } .logo-gold-mr { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: 0.1em; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .main-nav, .new-nav { display: flex; align-items: center; gap: var(--space-1); margin-inline-end: auto; min-width: 0; } .main-nav a { padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .main-nav a:hover { color: var(--text-strong); background: var(--bg-sunken); } .header-right, .new-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-width: 0; } .lang-switcher { display: flex; padding: 3px; gap: 2px; background: var(--bg-sunken); border-radius: var(--radius-pill); } .lang-btn { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .lang-btn:hover { color: var(--text-strong); } .lang-btn.active { background: var(--bg-surface); color: var(--text-accent); box-shadow: var(--shadow-sm); } .contact-pill, .new-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--slate-900); color: var(--white); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: transform var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .contact-pill:hover { transform: translateY(-1px); background: var(--slate-800); } /* --- Session controls ----------------------------------------------------- */ .auth-nav { display: flex; align-items: center; gap: var(--space-2); } .user-pill { display: flex; flex-direction: column; line-height: 1.25; padding-inline-end: var(--space-2); } /* Capped so a long display name cannot widen the header enough to wrap it. The full name is shown in the back-office sidebar. */ .user-pill strong, .user-pill small { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-pill strong { font-size: var(--text-sm); color: var(--text-strong); } .user-pill small { font-size: var(--text-xs); color: var(--text-muted); } /* ========================================================================== 6. BUTTONS ========================================================================== */ .btn-primary, .gold-btn, .btn-submit-booking, .new-btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: var(--slate-950); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.01em; box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), filter var(--duration-fast) var(--ease); } .btn-primary:hover, .gold-btn:hover, .btn-submit-booking:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.05); } .btn-primary:active, .btn-submit-booking:active { transform: translateY(0); } .btn-primary:disabled, .btn-submit-booking:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-submit-booking, .new-btn-submit { width: 100%; padding-block: var(--space-4); font-size: var(--text-base); } .btn-ghost { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text-body); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .btn-ghost:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--text-accent); } /* Square sibling of .btn-ghost for controls that carry only an icon. Their accessible name comes from aria-label on the element. */ .btn-icon-ghost { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .btn-icon-ghost:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--text-accent); } .btn-secondary-sm, .btn-assign-sm, .btn-danger-sm { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease); } .btn-secondary-sm { background: var(--bg-sunken); color: var(--text-body); border: 1px solid var(--border); } .btn-secondary-sm:hover { background: var(--border); } .btn-assign-sm { background: var(--gold-wash); color: var(--text-accent); } .btn-assign-sm:hover { background: var(--gold-edge); } .btn-danger-sm { background: rgba(239, 68, 68, 0.14); color: var(--red); } .btn-danger-sm:hover { background: rgba(239, 68, 68, 0.26); } .btn-excel { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-3); border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.32); color: var(--green); font-size: var(--text-sm); font-weight: 600; transition: background-color var(--duration-fast) var(--ease); } .btn-excel:hover { background: rgba(16, 185, 129, 0.24); } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .icon-btn:hover { background: var(--bg-sunken); color: var(--text-strong); } .link-button { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== 7. FORMS ========================================================================== */ .input-field-group { display: grid; gap: var(--space-2); } .input-field-group label, .form-group-pair label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } input[type='text'], input[type='tel'], input[type='email'], input[type='password'], input[type='number'], input[type='date'], select, textarea { width: 100%; padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-strong); font-size: var(--text-sm); transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } input:hover, select:hover, textarea:hover { border-color: var(--slate-400); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); } input::placeholder, textarea::placeholder { color: var(--text-muted); } select { appearance: none; /* Chevron drawn as an inline SVG so it needs no extra network request. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; background-size: 12px; padding-inline-end: var(--space-7); } [dir='rtl'] select { background-position: left var(--space-4) center; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } .date-time-row { grid-template-columns: 2fr 1fr 1fr; } .form-group-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } .form-checkbox-group { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); } .checkbox-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--duration-fast) var(--ease); } .checkbox-row:hover { background: var(--bg-sunken); } .checkbox-row input[type='checkbox'] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; } .form-hint { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); margin-top: var(--space-3); } .estimate-box { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border: 1px solid var(--gold-edge); border-radius: var(--radius-md); background: var(--gold-wash); font-size: var(--text-sm); text-align: center; color: var(--text-strong); animation: fade-up var(--duration) var(--ease); } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 8. HERO -------------------------------------------------------------------------- A full-bleed photographic band with a gradient scrim, the headline reversed out over it, and the booking card floating on top. The image is a real rather than a CSS background so it can carry `srcset` and be prioritised by the preload scanner. ========================================================================== */ .hero-section, .new-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(560px, 78vh, 820px); padding-block: var(--space-9); overflow: hidden; } /* Layer 1: the photograph, covering the whole band. The wrapper is removed from the box tree so it cannot occupy space of its own; the inside positions against .hero-section. */ .hero-section > picture { display: contents; } .hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; /* Overrides the img[width][height] rule above: this image is sized by the band it fills, not by its own aspect ratio. */ height: 100%; object-fit: cover; object-position: center 42%; } /* Layer 2: a scrim that guarantees text contrast over any part of the photo. Opaque on the leading edge where the headline sits, clearing towards the trailing edge so the image stays visible behind the booking card. */ .hero-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(11, 18, 32, 0.94) 0%, rgba(11, 18, 32, 0.86) 34%, rgba(11, 18, 32, 0.58) 62%, rgba(11, 18, 32, 0.42) 100% ); } .new-hero-inner { position: relative; width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--space-8); } .hero-content, .new-hero-content { color: var(--white); max-width: 34rem; } .hero-content h1 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.03em; color: var(--white); margin-bottom: var(--space-4); } .hero-content > p { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.82); margin-bottom: var(--space-6); max-width: 32rem; } .hero-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-2); margin: 0; } .hero-features li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: var(--text-sm); font-weight: 600; color: rgba(255, 255, 255, 0.94); } .hero-features i { color: var(--gold-bright); font-size: 1rem; flex-shrink: 0; } /* --- The floating booking card ------------------------------------------- */ .booking-card { padding: var(--space-6); background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); color: var(--slate-800); } .booking-card h2 { font-size: var(--text-xl); color: var(--slate-900); margin-bottom: var(--space-1); } .booking-sub { font-size: var(--text-sm); color: var(--slate-500); margin-bottom: var(--space-5); } /* ========================================================================== 9. PUBLIC SECTIONS ========================================================================== */ .services-section, .why-section { background: var(--bg-page); } .routes-section, .faq-section { background: var(--bg-surface); max-width: none; } .routes-section > *, .faq-section > * { max-width: var(--page-max); margin-inline: auto; } .services-grid, .new-grid, .why-grid, .new-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-5); margin-top: var(--space-7); } .service-card, .why-card, .new-card { padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); } .service-card:hover, .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-edge); } .service-card > i, .why-card > i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--gold-wash); color: var(--text-accent); font-size: 1.25rem; } .service-card h3, .why-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); } .service-card p, .why-card p { font-size: var(--text-sm); color: var(--text-muted); } /* --- Route cards, rendered from GET /api/v1/routes ----------------------- */ .routes-grid, .new-routes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); margin-top: var(--space-7); } .route-card { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .route-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .route-card img { width: 100%; /* `height: auto` is required: the markup sets width/height attributes so the browser can reserve space before the image loads, and those become presentational hints that would otherwise win over `aspect-ratio` and render the photo at its full intrinsic height. */ height: auto; /* 4:3 matches the `-card-*` derivatives, so the photo fills the frame without letterboxing and without a layout shift while it loads. */ aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .route-card:hover img { transform: scale(1.045); } .route-card-body { padding: var(--space-5); display: grid; gap: var(--space-2); } .route-card-body h3 { font-size: var(--text-lg); } .route-card-body p { font-size: var(--text-sm); color: var(--text-muted); } .route-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-accent); } /* --- FAQ ------------------------------------------------------------------ */ .faq-grid, .new-faq-grid { display: grid; gap: var(--space-3); max-width: 780px; margin: var(--space-7) auto 0; } .faq-item, .new-faq-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .faq-item:hover { border-color: var(--gold-edge); background: var(--gold-wash); } /* The question is a real