/* ============================================================ Open Road — custom layer on top of Tailwind utilities. Only things Tailwind utility classes can't express directly: the route-line signature motif, date-input theming, focus rings, reduced-motion, and a couple of keyframes. ============================================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } .font-display { font-family: 'Barlow Condensed', system-ui, sans-serif; } .font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #FFC531; outline-offset: 2px; } /* ---- Route-line signature: a dashed lane-marking line with stop pins ---- */ .route-line { position: relative; } .route-line::before { content: ''; position: absolute; background-image: repeating-linear-gradient(90deg, #FFC531 0 18px, transparent 18px 32px); height: 3px; top: 27px; left: 5%; right: 5%; } @media (max-width: 767px) { .route-line::before { width: 3px; height: auto; top: 32px; bottom: 32px; left: 27px; right: auto; background-image: repeating-linear-gradient(180deg, #FFC531 0 18px, transparent 18px 32px); } } .route-pin { box-shadow: 0 0 0 6px #F6F7F9; } /* Dashed ticket-stub divider (used on the reservation summary / confirmation cards) */ .ticket-divider { border-top: 2px dashed rgba(20, 23, 28, 0.15); } /* Native date input theming to match the mono/ticket aesthetic */ input[type="date"], input[type="time"] { font-family: 'IBM Plex Mono', ui-monospace, monospace; color-scheme: light; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(56%) sepia(78%) saturate(1000%) hue-rotate(360deg) brightness(101%) contrast(101%); cursor: pointer; } /* Hide scrollbar on horizontally-scrolling filter chip rows, keep it functional */ .chip-scroll { scrollbar-width: none; -ms-overflow-style: none; } .chip-scroll::-webkit-scrollbar { display: none; } /* Hero background texture: faint diagonal lane-marking field, pure CSS (no image request) */ .asphalt-texture { background-color: #14171C; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 34px); } /* Marquee-style animated route line used behind the hero headline */ @keyframes drive { from { background-position: 0 0; } to { background-position: 200px 0; } } .route-drive { background-image: repeating-linear-gradient(90deg, #FFC531 0 18px, transparent 18px 40px); height: 3px; animation: drive 3.5s linear infinite; } /* Simple fade-up utility for section reveals (progressive enhancement only). Elements are visible by default; only hidden pre-reveal when JS confirms it's running (via the .js class added to in header.php), so nothing disappears if JS fails to load. */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: translateY(0); }