/* ─── Fonts loaded in via Fontshare + Google Fonts ─── */ /* v2 */ /* ─── Tokens ─── */ :root { --bg: oklch(8% 0.008 295); --surface: oklch(13% 0.012 295); --surface-raised: oklch(19% 0.018 295); --accent: oklch(63% 0.24 295); --accent-dim: oklch(50% 0.2 295); --text-primary: oklch(95% 0.012 80); --text-secondary: oklch(68% 0.01 75); --text-muted: oklch(43% 0.008 75); --font-display: 'Clash Display', 'DM Sans', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --text-hero: clamp(4rem, 8vw + 0.5rem, 10rem); --text-h1: clamp(2.25rem, 3.5vw + 0.5rem, 4rem); --text-h2: clamp(1.6rem, 2.5vw + 0.5rem, 3rem); --text-h3: clamp(1.1rem, 1vw + 0.5rem, 1.4rem); --text-body: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem); --text-small: 0.8125rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 500ms; --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; outline-offset: 2px; } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─── Typography ─── */ .display { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; } .display-italic { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .eyebrow { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo), color 0.3s var(--ease-out-expo), background var(--dur-fast); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn-accent { background: var(--accent); color: var(--bg); } .btn-accent::after { content: ''; position: absolute; inset: 0; background: oklch(100% 0 0 / 0.1); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out-expo); pointer-events: none; } .btn-accent:hover::after { transform: scaleX(1); } .btn-accent:hover { background: var(--accent-dim); box-shadow: 0 8px 28px oklch(63% 0.24 295 / 0.4); } .btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid oklch(35% 0.015 295); z-index: 0; } .btn-ghost::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out-expo); z-index: -1; pointer-events: none; } .btn-ghost:hover { border-color: var(--accent); color: var(--bg); box-shadow: none; } .btn-ghost:hover::after { transform: scaleX(1); } /* ─── Navbar ─── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--dur-normal), box-shadow var(--dur-normal); } .nav.scrolled { background: oklch(13% 0.012 295 / 0.88); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.07); } .nav-inner { display: flex; align-items: center; gap: var(--space-md); max-width: 1200px; margin: 0 auto; padding: 1.25rem var(--space-md); } .nav-logo { display: flex; align-items: center; gap: 10px; line-height: 1; } .nav-logo-img { width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0; } .nav-logo-words { display: flex; flex-direction: column; } .nav-logo-main { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--text-primary); } .nav-logo-sub { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; color: var(--accent); } .nav-links { display: flex; gap: var(--space-md); margin-left: auto; } .nav-links a { font-size: var(--text-small); font-weight: 500; letter-spacing: 0.05em; color: var(--text-secondary); position: relative; transition: color var(--dur-fast); } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.35s var(--ease-out-expo); } .nav-links a:hover { color: var(--text-primary); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-cta { margin-left: var(--space-sm); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; margin-left: auto; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text-primary); transition: transform var(--dur-normal), opacity var(--dur-normal); } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .nav-mobile-menu { display: none; flex-direction: column; background: var(--surface); padding: var(--space-md); } .nav-mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-sm); } .nav-mobile-menu a { font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); padding: 0.5rem 0; border-bottom: 1px solid var(--surface-raised); } .nav-mobile-menu a:hover { color: var(--accent); } .nav-mobile-menu .btn { margin-top: var(--space-sm); width: 100%; justify-content: center; } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } .nav-mobile-menu.open { display: flex; } } .nav-links a:focus-visible, .footer-col a:focus-visible, .footer-socials a:focus-visible, .footer-bottom a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── Footer ─── */ .footer { background: var(--surface); border-top: 1px solid var(--surface-raised); padding: var(--space-lg) var(--space-md) var(--space-md); } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); } .footer-brand .nav-logo-img { width: 52px; height: 52px; } .footer-brand .nav-logo-main { font-size: 1.8rem; } .footer-brand p { margin-top: var(--space-sm); color: var(--text-secondary); max-width: 28ch; line-height: 1.6; } .footer-col h4 { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); } .footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; } .footer-col a { color: var(--text-secondary); font-size: var(--text-small); transition: color var(--dur-fast); } .footer-col a:hover { color: var(--accent); } .footer-socials { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); } .footer-socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--surface-raised); border-radius: var(--radius-sm); color: var(--text-secondary); transition: border-color var(--dur-fast), color var(--dur-fast); } .footer-socials a:hover { border-color: var(--accent); color: var(--accent); } .footer-bottom { max-width: 1200px; margin: var(--space-md) auto 0; padding-top: var(--space-sm); border-top: 1px solid var(--surface-raised); font-size: var(--text-small); color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; } @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: var(--space-md); } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } } /* ─── Scroll animations ─── */ [data-animate] { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo); } [data-animate].visible { opacity: 1; transform: translateY(0); } [data-animate][data-delay="100"] { transition-delay: 100ms; } [data-animate][data-delay="200"] { transition-delay: 200ms; } [data-animate][data-delay="300"] { transition-delay: 300ms; } [data-animate][data-delay="400"] { transition-delay: 400ms; } /* ─── Hero ─── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-logo-mark { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(62vw, 620px); aspect-ratio: 1; background: url('assets/logo.jpg') center / contain no-repeat; opacity: 0.055; pointer-events: none; } .hero-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } @media (max-width: 768px) { .hero-logo-mark { width: 88vw; right: -10%; opacity: 0.035; } } .hero-photo-placeholder { width: 100%; height: 100%; background: oklch(11% 0.012 295); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); } /* ─── Hero video: single on mobile, three-column on desktop ─── */ .hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; display: block; filter: brightness(1.35) contrast(1.05); } .hero-vid-extra { display: none; } @media (min-width: 768px) { .hero-video-wrap { display: flex; } .hero-vid { position: relative; inset: auto; flex: 1; width: auto; height: 100%; object-position: center center; filter: brightness(1.15) contrast(1.05); } .hero-vid-extra { display: block; } } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to right, oklch(8% 0.008 295 / 0.58) 30%, oklch(8% 0.008 295 / 0.12) 100% ); } /* ─── Glass break intro ─── */ .glass-break { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; } .glass-shard { position: absolute; inset: 0; background: oklch(7% 0.012 260); will-change: transform, opacity; transition: transform 1.1s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.9s cubic-bezier(0.55, 0, 1, 0.45); box-shadow: inset 0 0 0 1px oklch(72% 0.02 220 / 0.22); } .glass-break.shatter .glass-shard { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1.1); } .hero-content { position: relative; z-index: 1; padding: calc(5rem + 80px) var(--space-md) var(--space-xl); max-width: 700px; width: 100%; padding-left: clamp(1.5rem, 8vw, 8rem); } .hero-heading { font-size: var(--text-hero); color: var(--text-primary); margin: var(--space-sm) 0 var(--space-md); } .hero-heading em { color: var(--accent); font-style: normal; } .hero-sub { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--text-secondary); max-width: 48ch; margin-bottom: var(--space-md); } .hero-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1; } .hero-scroll-hint span { display: block; width: 1px; height: 48px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollHint 1.5s ease-out infinite; } @keyframes scrollHint { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } } /* ─── Tagline strip ─── */ .tagline-strip { border-top: 1px solid var(--surface-raised); border-bottom: 1px solid var(--surface-raised); padding: var(--space-sm) 0; overflow: hidden; } .tagline-strip p, .tagline-marquee { font-family: var(--font-display); font-style: normal; font-size: clamp(0.9rem, 1.2vw, 1.1rem); font-weight: 400; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; } .tagline-marquee { display: inline-block; white-space: nowrap; animation: marqueeScroll 34s linear infinite; will-change: transform; } .tagline-strip p:not(.tagline-marquee) { text-align: center; padding: 0 var(--space-md); } @media (prefers-reduced-motion: reduce) { .tagline-marquee { animation: none; white-space: normal; } } /* ─── Section shared ─── */ .section-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); } .section-header { margin-bottom: var(--space-lg); } .section-header h2 { font-size: var(--text-h1); margin-top: var(--space-xs); } .section-header h2 em { color: var(--accent); font-style: normal; } /* ─── Services teaser ─── */ .services-teaser { background: var(--bg); } .service-rows { display: flex; flex-direction: column; gap: var(--space-lg); } .service-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; } .service-row-reverse { direction: rtl; } .service-row-reverse > * { direction: ltr; } .service-row-text { display: flex; gap: var(--space-md); align-items: flex-start; } .service-price-block { flex-shrink: 0; line-height: 1; min-width: 5rem; } .service-price-amount { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 400; color: var(--accent); line-height: 0.9; letter-spacing: -0.03em; } .service-price-qualifier { display: block; font-size: var(--text-small); color: var(--text-muted); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; } .service-row-text h3 { font-size: var(--text-h2); margin-bottom: var(--space-xs); } .service-row-text p { color: var(--text-secondary); line-height: 1.7; } .service-row-text strong { color: var(--accent); } .service-row-img .img-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--surface); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); border: 1px solid var(--surface-raised); } .text-link { display: inline-block; margin-top: var(--space-sm); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; color: var(--accent); border-bottom: 1px solid var(--accent-dim); padding-bottom: 2px; transition: color var(--dur-fast), border-color var(--dur-fast); } .text-link:hover { color: var(--text-primary); border-color: var(--text-muted); } .services-teaser-cta { margin-top: var(--space-lg); } @media (max-width: 768px) { .service-row { grid-template-columns: 1fr; } .service-row-reverse { direction: ltr; } } /* ─── Process section ─── */ .process-section { background: var(--surface); } .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .process-step { padding-top: var(--space-md); position: relative; } .process-step::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--surface-raised); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-out-expo); } .process-step.visible::before { transform: scaleX(1); } .process-step[data-delay="100"]::before { transition-delay: 100ms; } .process-step[data-delay="200"]::before { transition-delay: 200ms; } .process-num { display: block; font-family: var(--font-display); font-size: clamp(3rem, 4vw, 4.5rem); font-weight: 400; color: var(--surface-raised); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--space-sm); user-select: none; } .process-step h3 { font-size: var(--text-h3); margin-bottom: var(--space-xs); } .process-step p { color: var(--text-secondary); line-height: 1.65; } @media (max-width: 768px) { .process-steps { grid-template-columns: 1fr; gap: var(--space-md); } } /* ─── Before/After split panels ─── */ .ba-section { background: var(--bg); padding: var(--space-xl) var(--space-md); } .ba-header { max-width: var(--max-w); margin: 0 auto var(--space-lg); } .ba-split { display: grid; grid-template-columns: 1fr 2px 1fr; max-width: 860px; margin: 0 auto; } .ba-panel { position: relative; overflow: hidden; aspect-ratio: 3/4; } .ba-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform 0.8s var(--ease-out); } .ba-panel-before img { object-position: center 40%; } .ba-panel-after img { object-position: center 55%; } .ba-panel:hover img { transform: scale(1.04); } .ba-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(6% 0.008 260 / 0.55) 0%, transparent 45%); pointer-events: none; z-index: 1; } .ba-divider { background: var(--accent); align-self: stretch; } .ba-panel-label { position: absolute; bottom: var(--space-md); left: var(--space-md); z-index: 2; display: flex; flex-direction: column; gap: 0.1em; } .ba-panel-label-right { left: auto; right: var(--space-md); align-items: flex-end; } .ba-panel-num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 6rem); font-weight: 700; line-height: 1; color: oklch(98% 0 0 / 0.1); letter-spacing: -0.03em; } .ba-panel-word { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(98% 0 0 / 0.9); } @media (max-width: 600px) { .ba-split { grid-template-columns: 1fr; max-width: 100%; } .ba-divider { height: 3px; } .ba-panel-label-right { left: var(--space-md); right: auto; align-items: flex-start; } } /* ─── Reviews carousel ─── */ .reviews-section { background: var(--bg); } .reviews-carousel { position: relative; display: flex; align-items: center; gap: var(--space-sm); } .carousel-track-wrap { flex: 1; overflow: hidden; } .carousel-track { display: flex; transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1); } .carousel-slide { min-width: 100%; padding: var(--space-md) var(--space-lg); } .carousel-slide blockquote { max-width: 52ch; margin: 0 auto; text-align: center; } .carousel-stars { color: var(--accent); font-size: 0.75rem; letter-spacing: 4px; margin-bottom: var(--space-sm); } .carousel-quote { font-family: var(--font-body); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 400; line-height: 1.65; color: var(--text-secondary); margin-bottom: var(--space-sm); quotes: "\201C" "\201D"; } .carousel-quote::before { content: open-quote; color: var(--accent); } .carousel-quote::after { content: close-quote; color: var(--accent); } .carousel-author { font-size: var(--text-small); color: var(--text-muted); font-style: normal; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .carousel-progress { width: 100%; height: 2px; background: var(--surface-raised); border-radius: 1px; margin-top: var(--space-md); overflow: hidden; } .carousel-progress-bar { height: 100%; background: var(--accent); width: 0%; } .carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--surface-raised); background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .carousel-btn:hover, .carousel-btn:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--surface-raised); } .carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); } .carousel-dots { display: flex; gap: 6px; align-items: center; } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-raised); transition: background var(--dur-fast) var(--ease-out), width var(--dur-normal) var(--ease-out), border-radius var(--dur-normal) var(--ease-out); } .carousel-dot.active { background: var(--accent); width: 22px; border-radius: 3px; } .reviews-note { text-align: center; margin-top: var(--space-lg); } @media (max-width: 640px) { .carousel-slide { padding: var(--space-md) var(--space-xs); } .carousel-btn { width: 36px; height: 36px; } } /* ─── CTA Banner ─── */ .cta-banner { background: var(--surface); border-top: 1px solid var(--surface-raised); } .cta-banner-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } .cta-banner-left .eyebrow { margin-bottom: var(--space-xs); } .cta-phone-large { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; color: var(--text-primary); line-height: 1.1; margin-bottom: var(--space-xs); transition: color var(--dur-fast) var(--ease-out); } .cta-phone-large:hover { color: var(--accent); } .cta-hours { font-size: var(--text-small); color: var(--text-muted); letter-spacing: 0.05em; } @media (max-width: 640px) { .cta-banner-inner { flex-direction: column; align-items: flex-start; } } /* ─── Footer ─── */ .footer-col-h4-spaced { margin-top: 1rem; } /* ─── Page header (shared across all inner pages) ─── */ .page-header { background: var(--surface); border-bottom: 1px solid var(--surface-raised); padding-top: 120px; padding-bottom: var(--space-lg); } .page-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); } .page-header-inner h1 { font-size: var(--text-hero); margin: var(--space-sm) 0; } .page-header-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-secondary); } /* ─── Packages ─── */ .packages-section { background: var(--bg); } .package-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--surface-raised); } .package-block:last-child { border-bottom: none; } .package-block-reverse { direction: rtl; } .package-block-reverse > * { direction: ltr; } .package-text { display: flex; gap: var(--space-md); align-items: flex-start; } .package-num { font-family: var(--font-display); font-size: 4rem; font-weight: 400; color: var(--surface-raised); line-height: 1; flex-shrink: 0; } .package-header { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-sm); } .package-header h2 { font-size: var(--text-h2); } .package-price { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: var(--accent); } .package-text > div > p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-sm); } .package-includes { list-style: none; margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: 0.375rem; } .package-includes li { font-size: var(--text-small); color: var(--text-secondary); padding-left: 1.25rem; position: relative; } .package-includes li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .package-img .img-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--surface); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); border: 1px solid var(--surface-raised); } .package-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; } @media (max-width: 768px) { .package-block { grid-template-columns: 1fr; gap: var(--space-md); } .package-block-reverse { direction: ltr; } } /* ─── Add-ons ─── */ .addons-section { background: var(--surface); } .addons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .addon-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--space-md); background: var(--surface-raised); border-radius: var(--radius-sm); border: 1px solid oklch(25% 0.02 295); } .addon-name { font-weight: 500; } .addon-price { color: var(--accent); font-weight: 600; } @media (max-width: 640px) { .addons-grid { grid-template-columns: 1fr; } } /* ─── Utility ─── */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ─── Gallery ─── */ .gallery-section { background: var(--bg); } .gallery-filters { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-lg); } .filter-btn { padding: 0.5rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.06em; color: var(--text-secondary); border: 1px solid var(--surface-raised); background: transparent; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .filter-btn:hover { color: var(--text-primary); border-color: var(--text-muted); } .filter-btn.active { color: var(--bg); background: var(--accent); border-color: var(--accent); } .filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .gallery-item { cursor: pointer; } .gallery-img-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--surface); border: 1px solid var(--surface-raised); } .gallery-img { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); transition: transform var(--dur-slow) var(--ease-out); } .gallery-item:hover .gallery-img { transform: scale(1.04); } .gallery-video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); } .gallery-item:hover .gallery-video { transform: scale(1.04); } .gallery-play-overlay { opacity: 1 !important; background: oklch(8% 0.008 295 / 0.38); display: flex; align-items: center; justify-content: center; transition: background var(--dur-normal) var(--ease-out); } .gallery-item-video:hover .gallery-play-overlay { background: oklch(8% 0.008 295 / 0.18); } .gallery-play-btn { width: 64px; height: 64px; border-radius: 50%; background: oklch(98% 0 0 / 0.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 28px oklch(0% 0 0 / 0.55); transition: transform 0.22s var(--ease-out), background 0.22s; color: oklch(12% 0.01 260); } .gallery-item-video:hover .gallery-play-btn { transform: scale(1.12); background: var(--accent); color: oklch(98% 0 0); } .gallery-play-btn svg { margin-left: 4px; } .gallery-overlay { position: absolute; inset: 0; background: oklch(8% 0.008 295 / 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-normal); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay span { font-size: var(--text-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); } .gallery-caption { margin-top: 0.5rem; font-size: var(--text-small); color: var(--text-muted); } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } } /* ─── Lightbox ─── */ #lightbox { position: fixed; inset: 0; z-index: 200; background: oklch(4% 0.005 60 / 0.95); display: flex; align-items: center; justify-content: center; padding: var(--space-md); } #lightbox[hidden] { display: none; } #lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: var(--radius-md); object-fit: contain; } #lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; color: var(--text-primary); line-height: 1; padding: 0.5rem; transition: color var(--dur-fast); } #lightbox-close:hover { color: var(--accent); } #lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* ─── Booking page ─── */ .booking-section { background: var(--bg); } .booking-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); display: grid; grid-template-columns: 380px 1fr; gap: var(--space-xl); align-items: start; } .booking-info h2 { font-size: var(--text-h2); margin-bottom: var(--space-md); } .booking-checklist { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: var(--space-lg); } .booking-checklist li { padding-left: 1.5rem; position: relative; color: var(--text-secondary); } .booking-checklist li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .booking-contact { margin-bottom: var(--space-lg); } .booking-contact p { color: var(--text-secondary); margin-bottom: var(--space-sm); } .booking-hours h3 { font-size: var(--text-h3); margin-bottom: var(--space-sm); } .hours-table { border-collapse: collapse; width: 100%; } .hours-table td { padding: 0.375rem 0; font-size: var(--text-small); color: var(--text-secondary); } .hours-table td:last-child { text-align: right; color: var(--text-muted); } .booking-call { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--surface-raised); padding: var(--space-xl) var(--space-lg); display: flex; align-items: flex-start; } .booking-phone { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 400; color: var(--text-primary); line-height: 1.1; margin: var(--space-xs) 0 var(--space-md); transition: color var(--dur-fast) var(--ease-out); } .booking-phone:hover { color: var(--accent); } .booking-call-note { color: var(--text-secondary); max-width: 36ch; margin-bottom: var(--space-md); line-height: 1.65; } .booking-hours-compact { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-lg); } .booking-hours-compact li { font-size: var(--text-small); color: var(--text-muted); display: flex; justify-content: space-between; max-width: 28ch; } @media (max-width: 900px) { .booking-inner { grid-template-columns: 1fr; } .booking-call { padding: var(--space-md); } } @media (max-width: 900px) { .booking-inner { grid-template-columns: 1fr; } } /* ─── About page ─── */ .about-section { background: var(--bg); } .about-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); display: grid; grid-template-columns: 1fr 380px; gap: var(--space-xl); align-items: start; } .about-text h2 { font-size: var(--text-h1); margin-bottom: var(--space-md); } .about-text p { color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-sm); } .about-img { width: 100%; aspect-ratio: 3/4; background: var(--surface); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); border: 1px solid var(--surface-raised); } .values-section { background: var(--surface); } .values-list { display: flex; flex-direction: column; } .value-item { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) 0; border-bottom: 1px solid var(--surface-raised); } .value-item:last-child { border-bottom: none; } .value-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; color: var(--surface-raised); line-height: 1; flex-shrink: 0; width: 4rem; } .value-item h3 { font-size: var(--text-h3); margin-bottom: var(--space-xs); } .value-item p { color: var(--text-secondary); } @media (max-width: 768px) { .about-inner { grid-template-columns: 1fr; } } /* ─── Contact page ─── */ .contact-section { background: var(--bg); } .contact-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); display: grid; grid-template-columns: 380px 1fr; gap: var(--space-xl); align-items: start; } .contact-block { margin-bottom: var(--space-lg); } .contact-label { font-size: var(--text-small); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); } .contact-phone { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; color: var(--accent); margin-bottom: var(--space-xs); transition: color var(--dur-fast); } .contact-phone:hover { color: var(--text-primary); } .contact-phone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .map-placeholder { margin-top: var(--space-sm); width: 100%; aspect-ratio: 16/9; background: var(--surface); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); border: 1px solid var(--surface-raised); } .contact-form-wrap { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--surface-raised); padding: var(--space-lg); } .contact-form-wrap h2 { font-size: var(--text-h2); margin-bottom: var(--space-md); } .contact-form { display: flex; flex-direction: column; gap: var(--space-sm); } .form-row { display: flex; flex-direction: column; gap: 0.375rem; } .form-row label { font-size: var(--text-small); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; } .form-row input, .form-row select, .form-row textarea { background: var(--surface-raised); border: 1px solid oklch(25% 0.02 295); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); padding: 0.75rem 1rem; transition: border-color var(--dur-fast); outline: none; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent); } .form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-muted); } .form-row select option { background: var(--surface-raised); } .form-row textarea { resize: vertical; min-height: 100px; } .contact-form .btn { margin-top: var(--space-xs); align-self: flex-start; } @media (max-width: 900px) { .contact-inner { grid-template-columns: 1fr; } } /* ─── Cinematic Motion ─── */ /* Hero word-by-word entrance */ @keyframes wordReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .hero-word { display: inline-block; animation: wordReveal 0.85s var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 88ms + 80ms); animation-play-state: paused; } .hero-reveal-active .hero-word { animation-play-state: running; } /* Tagline marquee */ @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Service rows: directional slide reveal (overrides [data-animate]) */ .service-row[data-animate] { opacity: 0; transform: translateX(-44px); transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo); } .service-row-reverse[data-animate] { transform: translateX(44px); } .service-row[data-animate].visible, .service-row-reverse[data-animate].visible { opacity: 1; transform: translateX(0); } /* Section header h2 — larger drop for more drama */ .section-header[data-animate] { opacity: 0; transform: translateY(36px); } /* CTA phone number hover glow */ .cta-phone-large { transition: color var(--dur-fast) var(--ease-out-expo), text-shadow var(--dur-normal) var(--ease-out-expo); } .cta-phone-large:hover { text-shadow: 0 0 40px oklch(63% 0.24 295 / 0.4); } /* Footer social hover spin */ .footer-socials a svg { transition: transform 0.35s var(--ease-out-expo); } .footer-socials a:hover svg { transform: rotate(8deg) scale(1.15); } /* Text link arrow nudge on hover */ .text-link { display: inline-flex; align-items: center; gap: 0.3em; } .text-link::after { content: '→'; display: inline-block; transition: transform 0.3s var(--ease-out-expo); } .text-link:hover::after { transform: translateX(4px); } /* ─── Cinematic Hero ─── */ .hero-cin-content { position: relative; z-index: 1; align-self: stretch; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(80px + var(--space-xl)) clamp(1.5rem, 6vw, 8rem) clamp(3rem, 5vw, 5rem); } .hero-cin-eyebrow { position: absolute; top: calc(80px + var(--space-md)); left: clamp(1.5rem, 6vw, 8rem); font-family: var(--font-display); font-size: var(--text-small); font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); } .hero-cin-main { font-family: var(--font-display); font-size: clamp(5.5rem, 17vw, 22rem); font-weight: 600; line-height: 0.88; letter-spacing: -0.04em; color: var(--text-primary); margin-bottom: var(--space-lg); } .hero-cin-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); } .hero-cin-sub { font-size: clamp(0.9rem, 1.3vw, 1rem); color: var(--text-secondary); max-width: 40ch; line-height: 1.75; } @media (max-width: 640px) { .hero-cin-content { justify-content: flex-start; padding: calc(80px + 2rem) 1.25rem var(--space-lg); gap: var(--space-md); } .hero-cin-eyebrow { position: static; top: auto; left: auto; } .hero-cin-main { font-size: clamp(2.5rem, 14vw, 5rem); white-space: nowrap; margin-bottom: var(--space-md); } .hero-cin-row { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .hero-cin-sub { max-width: none; } } /* Hero character reveal */ @keyframes charReveal { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: translateY(0); } } .hero-char { display: inline-block; animation: charReveal 0.7s var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 50ms + 100ms); animation-play-state: paused; } .hero-reveal-active .hero-char { animation-play-state: running; } /* ─── Service Panels ─── */ .svc-panel { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; background: var(--bg); border-top: 1px solid var(--surface-raised); } .svc-panel.svc-panel-alt { background: var(--surface); } .svc-panel-inner { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--space-xl) clamp(2rem, 5vw, 7rem); overflow: hidden; } .svc-panel-bg-num { position: absolute; bottom: -0.12em; left: -0.05em; font-family: var(--font-display); font-size: clamp(14rem, 24vw, 34rem); font-weight: 600; line-height: 1; letter-spacing: -0.06em; color: oklch(100% 0 0 / 0.022); pointer-events: none; user-select: none; z-index: 0; } .svc-panel-meta { display: flex; align-items: center; gap: var(--space-md); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); position: relative; z-index: 1; } .svc-panel-index { font-family: var(--font-display); font-size: var(--text-small); font-weight: 500; letter-spacing: 0.2em; color: var(--accent); } .svc-panel-price { font-family: var(--font-display); font-size: clamp(5rem, 9vw, 11rem); font-weight: 600; color: var(--accent); line-height: 0.88; letter-spacing: -0.04em; margin-bottom: var(--space-sm); position: relative; z-index: 1; } .svc-panel-qual { font-size: 0.3em; vertical-align: 0.6em; color: var(--accent-dim); font-weight: 400; } .svc-panel-name { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 5rem); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 var(--space-md); position: relative; z-index: 1; } .svc-panel-desc { color: var(--text-secondary); max-width: 40ch; line-height: 1.75; font-size: clamp(0.9rem, 1.1vw, 1.05rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); position: relative; z-index: 1; } .svc-panel-inner .btn { position: relative; z-index: 1; align-self: flex-start; } .svc-panel-img { position: relative; overflow: hidden; } .svc-panel-img .img-placeholder { position: absolute; inset: 0; background: var(--surface-raised); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-small); } .svc-panel-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .svc-panel-flip .svc-panel-inner { order: 2; } .svc-panel-flip .svc-panel-img { order: 1; } .svc-panel-inner[data-animate] { opacity: 0; transform: translateX(-40px); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); } .svc-panel-flip .svc-panel-inner[data-animate] { transform: translateX(40px); } .svc-panel-inner[data-animate].visible { opacity: 1; transform: translateX(0); } @media (max-width: 900px) { .svc-panel { grid-template-columns: 1fr; min-height: auto; } .svc-panel-img { aspect-ratio: 16/9; } .svc-panel-img .img-placeholder { position: static; width: 100%; height: 100%; aspect-ratio: 16/9; } .svc-panel-img img { position: static; width: 100%; height: 100%; aspect-ratio: 16/9; } .svc-panel-flip .svc-panel-inner { order: 0; } .svc-panel-flip .svc-panel-img { order: 0; } .svc-panel-inner { padding: var(--space-lg) var(--space-md); } .svc-panel-price { font-size: clamp(4rem, 14vw, 7rem); } /* Revert to vertical slide on single-column layout */ .svc-panel-inner[data-animate], .svc-panel-flip .svc-panel-inner[data-animate] { transform: translateY(28px); } } @media (max-width: 480px) { .svc-panel-inner { padding: var(--space-md) 1.25rem; } .svc-panel-price { font-size: clamp(3.5rem, 18vw, 5rem); } .svc-panel-name { font-size: clamp(2rem, 10vw, 3rem); } .svc-panel-desc { font-size: 0.9375rem; } .svc-panel-meta { margin-bottom: var(--space-sm); } } /* ─── Review Feature ─── */ .review-feature { background: var(--surface); border-top: 1px solid var(--surface-raised); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(5rem, 10vw, 10rem) var(--space-md); } .review-feature .reviews-carousel { width: 100%; max-width: 860px; } .review-carousel-cin .carousel-slide { padding: 0 var(--space-lg); } .review-feature .carousel-controls { width: 100%; max-width: 860px; } .review-feature .reviews-note { margin-top: var(--space-md); } @media (max-width: 640px) { .review-carousel-cin .carousel-slide { padding: 0 0.5rem; } .review-feature-mark { font-size: 5rem; margin-bottom: var(--space-sm); } .review-feature-quote { font-size: clamp(1.1rem, 4.5vw, 1.5rem); } } .review-feature-mark { font-family: var(--font-display); font-size: clamp(6rem, 12vw, 14rem); font-weight: 600; line-height: 0.7; color: var(--accent); opacity: 0.25; margin-bottom: var(--space-md); user-select: none; } .review-feature-stars { color: var(--accent); font-size: 1rem; letter-spacing: 6px; margin-bottom: var(--space-md); } .review-feature-quote { font-family: var(--font-body); font-style: italic; font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 400; line-height: 1.55; color: var(--text-primary); margin-bottom: var(--space-md); max-width: 56ch; } .review-feature-author { display: block; font-size: var(--text-small); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-style: normal; margin-bottom: var(--space-lg); } /* ─── Cinematic CTA ─── */ .cta-cin { background: var(--bg); border-top: 1px solid var(--surface-raised); display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(5rem, 10vw, 10rem) var(--space-md); } .cta-cin-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .cta-cin-number { display: block; font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 11rem); font-weight: 400; color: var(--text-primary); line-height: 1; letter-spacing: -0.03em; margin: var(--space-xs) 0 var(--space-sm); transition: color var(--dur-fast) var(--ease-out-expo), text-shadow var(--dur-normal) var(--ease-out-expo); } .cta-cin-number:hover { color: var(--accent); text-shadow: 0 0 60px oklch(63% 0.24 295 / 0.3); } .cta-cin-hours { font-size: var(--text-small); color: var(--text-muted); letter-spacing: 0.08em; margin-bottom: var(--space-md); } .cta-cin-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; } @media (max-width: 640px) { .cta-cin { padding: clamp(3.5rem, 10vw, 5rem) 1.25rem; } .cta-cin-number { font-size: clamp(2.2rem, 11vw, 4rem); } } /* ─── Services page additions ─── */ .package-mobile-badge { display: inline-block; background: oklch(63% 0.24 295 / 0.15); border: 1px solid oklch(63% 0.24 295 / 0.35); color: var(--accent); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); margin-bottom: var(--space-sm); } .section-header-sub { color: var(--text-secondary); margin-top: var(--space-xs); } .vehicle-pricing-section { background: var(--bg); } .vehicle-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); } .vehicle-pricing-item { display: flex; flex-direction: column; gap: 0.375rem; padding: var(--space-md); background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--surface-raised); } .vehicle-type-name { font-weight: 600; } .vehicle-type-price { color: var(--accent); font-size: var(--text-small); font-weight: 600; } @media (max-width: 640px) { .vehicle-pricing-grid { grid-template-columns: 1fr; } } /* ─── Booking page (rebuilt) ─── */ .booking-outer { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); display: grid; grid-template-columns: 1fr 320px; gap: var(--space-xl); align-items: start; } .booking-form { display: flex; flex-direction: column; gap: var(--space-lg); } .booking-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .booking-legend { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: var(--space-sm); width: 100%; } .legend-optional { font-size: var(--text-small); font-weight: 400; color: var(--text-muted); font-family: var(--font-body); letter-spacing: 0; } .booking-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .booking-field { display: flex; flex-direction: column; gap: 0.375rem; } .booking-field label { font-size: var(--text-small); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; } .booking-field input, .booking-field textarea { background: var(--surface-raised); border: 1px solid oklch(25% 0.02 295); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); padding: 0.75rem 1rem; transition: border-color var(--dur-fast); outline: none; } .booking-field input:focus, .booking-field textarea:focus { border-color: var(--accent); } .booking-field input::placeholder, .booking-field textarea::placeholder { color: var(--text-muted); } .booking-field textarea { resize: vertical; min-height: 80px; } .field-hint { font-size: var(--text-small); color: var(--text-muted); line-height: 1.55; } .field-hint-warn { color: oklch(75% 0.18 60); } .field-optional { font-size: var(--text-small); color: var(--text-muted); font-weight: 400; } /* Package selector */ .package-selector, .addons-selector, .vehicle-selector { display: flex; flex-direction: column; gap: 0.5rem; } .package-option, .addon-option, .vehicle-option { display: flex; align-items: stretch; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid oklch(25% 0.02 295); background: var(--surface-raised); overflow: hidden; transition: border-color var(--dur-fast), background var(--dur-fast); } .package-option:hover, .addon-option:hover, .vehicle-option:hover { border-color: oklch(40% 0.06 295); } .package-option input, .addon-option input, .vehicle-option input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .package-option:has(input:checked), .addon-option:has(input:checked), .vehicle-option:has(input:checked) { border-color: var(--accent); background: oklch(63% 0.24 295 / 0.07); } .package-option-inner, .addon-option-inner, .vehicle-option-inner { display: flex; align-items: center; gap: var(--space-sm); padding: 0.875rem var(--space-sm); width: 100%; } .package-option-inner { flex-direction: column; align-items: flex-start; padding: 1rem var(--space-sm); } .package-option-name { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .package-option-price { font-weight: 700; color: var(--accent); font-size: var(--text-small); } .package-option-desc { font-size: var(--text-small); color: var(--text-secondary); } .package-badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: oklch(63% 0.24 295 / 0.15); padding: 0.1rem 0.45rem; border-radius: 3px; } .addon-option-name { flex: 1; font-weight: 500; } .addon-option-price { font-size: var(--text-small); font-weight: 700; color: var(--accent); } .vehicle-option-inner { justify-content: space-between; } .vehicle-option-name { font-weight: 600; } .vehicle-option-price { font-size: var(--text-small); color: var(--text-secondary); } /* Booking total bar */ .booking-total-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--surface-raised); flex-wrap: wrap; } .booking-total-label { font-size: var(--text-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .booking-total-amount { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--text-primary); line-height: 1; margin-left: auto; } .booking-total-amount.total-quote { font-size: 1.1rem; font-family: var(--font-body); color: oklch(75% 0.18 60); } .booking-total-note { width: 100%; font-size: var(--text-small); color: var(--text-muted); } /* Booking info notes */ .booking-schedule-note, .booking-payment-note { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem var(--space-sm); background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--surface-raised); } .booking-schedule-note svg, .booking-payment-note svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; } .booking-schedule-note p, .booking-payment-note p { font-size: var(--text-small); color: var(--text-secondary); line-height: 1.55; } .booking-error { color: oklch(65% 0.18 25); font-size: var(--text-small); background: oklch(65% 0.18 25 / 0.1); border: 1px solid oklch(65% 0.18 25 / 0.25); border-radius: var(--radius-sm); padding: 0.75rem 1rem; } .booking-submit-btn { align-self: flex-start; width: 100%; justify-content: center; padding: 1rem; font-size: 1rem; } .booking-submit-btn:disabled { opacity: 0.5; pointer-events: none; } .booking-login-note { font-size: var(--text-small); color: var(--text-muted); } /* Booking sidebar */ .booking-sidebar { display: flex; flex-direction: column; gap: var(--space-md); position: sticky; top: calc(80px + var(--space-md)); } .booking-sidebar-block { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--surface-raised); padding: var(--space-md); } .booking-sidebar-block h3 { font-size: var(--text-h3); margin-bottom: var(--space-sm); } .booking-sidebar-block p { font-size: var(--text-small); color: var(--text-secondary); margin-bottom: var(--space-sm); } .booking-phone-btn { width: 100%; justify-content: center; } .booking-sidebar-hours ul { display: flex; flex-direction: column; gap: 0.35rem; } .booking-sidebar-hours li { display: flex; justify-content: space-between; font-size: var(--text-small); color: var(--text-muted); } /* Booking confirmation */ .booking-confirm { display: flex; align-items: center; justify-content: center; min-height: 50vh; } .booking-confirm-inner { text-align: center; max-width: 480px; } .booking-confirm-icon { margin: 0 auto var(--space-md); width: 72px; height: 72px; border-radius: 50%; background: oklch(63% 0.24 295 / 0.12); border: 1px solid oklch(63% 0.24 295 / 0.3); display: flex; align-items: center; justify-content: center; color: var(--accent); } .booking-confirm-inner h2 { font-size: var(--text-h1); margin-bottom: var(--space-sm); } .booking-confirm-inner p { color: var(--text-secondary); margin-bottom: var(--space-lg); } .booking-confirm-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; } .set-password-form { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-md); } .set-password-form .auth-field { display: flex; flex-direction: column; gap: 6px; text-align: left; } .set-password-form .auth-field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .set-password-form .auth-field input { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 15px; color: var(--text-primary); width: 100%; } .set-password-form .auth-field input:focus { outline: none; border-color: var(--accent); } .set-password-actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; } .set-password-actions .btn { width: 100%; justify-content: center; } @media (max-width: 900px) { .booking-outer { grid-template-columns: 1fr; } .booking-sidebar { position: static; } .booking-fields-row { grid-template-columns: 1fr; } } /* ─── Auth / Login page ─── */ .auth-main { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: calc(80px + var(--space-lg)) var(--space-md) var(--space-xl); background: var(--bg); } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); } .auth-brand { margin-bottom: var(--space-lg); } .auth-heading { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; letter-spacing: -0.025em; margin-bottom: var(--space-xs); } .auth-subhead { color: var(--text-secondary); margin-bottom: var(--space-lg); font-size: 0.9375rem; } .auth-message { background: oklch(63% 0.24 295 / 0.1); border: 1px solid oklch(63% 0.24 295 / 0.25); border-radius: var(--radius-sm); padding: 0.875rem 1rem; color: var(--text-primary); font-size: var(--text-small); margin-bottom: var(--space-md); } .auth-form { display: flex; flex-direction: column; gap: var(--space-sm); } .auth-field { display: flex; flex-direction: column; gap: 0.375rem; } .auth-field label { font-size: var(--text-small); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; } .auth-field input { background: var(--surface-raised); border: 1px solid oklch(25% 0.02 295); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); padding: 0.75rem 1rem; transition: border-color var(--dur-fast); outline: none; } .auth-field input:focus { border-color: var(--accent); } .auth-field input::placeholder { color: var(--text-muted); } .auth-error { color: oklch(65% 0.18 25); font-size: var(--text-small); background: oklch(65% 0.18 25 / 0.1); border: 1px solid oklch(65% 0.18 25 / 0.25); border-radius: var(--radius-sm); padding: 0.75rem 1rem; } .auth-submit-btn { width: 100%; justify-content: center; padding: 0.875rem; margin-top: var(--space-xs); } .auth-switch { text-align: center; margin-top: var(--space-md); font-size: var(--text-small); color: var(--text-muted); } .text-link-btn { background: none; border: none; padding: 0; color: var(--accent); font-family: var(--font-body); font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .text-link-btn:hover { color: var(--text-primary); } .auth-back { text-align: center; margin-top: var(--space-md); font-size: var(--text-small); } /* ─── Dashboard (customer + admin shared) ─── */ .dashboard-main { background: var(--bg); min-height: 100svh; padding-bottom: var(--space-xl); } .dashboard-header { background: var(--surface); border-bottom: 1px solid var(--surface-raised); padding: calc(80px + var(--space-lg)) var(--space-md) var(--space-lg); } .dashboard-header-inner { max-width: 1200px; margin: 0 auto; } .dashboard-layout { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); display: flex; flex-direction: column; gap: var(--space-xl); } .dashboard-section { } .dashboard-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); } .dashboard-section > h2 { margin-bottom: var(--space-lg); font-size: var(--text-h2); } .dashboard-loading { color: var(--text-muted); font-size: var(--text-small); } .dashboard-empty { color: var(--text-secondary); } .btn-sm { padding: 0.5rem 1rem; font-size: var(--text-small); } /* Booking cards (customer) */ .bookings-list { display: flex; flex-direction: column; gap: var(--space-md); } .booking-card { background: var(--surface); border: 1px solid var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); } .booking-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); } .booking-card-pkg { font-size: var(--text-h3); font-weight: 600; margin-bottom: 0.25rem; } .booking-card-date { font-size: var(--text-small); color: var(--text-muted); } .booking-card-addons { font-size: var(--text-small); color: var(--text-secondary); } .booking-card-total { font-size: var(--text-small); color: var(--text-secondary); } .booking-card-notes { font-size: var(--text-small); color: var(--text-muted); font-style: italic; } /* Status badges */ .booking-status { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 99px; flex-shrink: 0; } .booking-status-pending { background: oklch(80% 0.18 80 / 0.15); color: oklch(80% 0.18 80); } .booking-status-confirmed { background: oklch(70% 0.15 200 / 0.15); color: oklch(70% 0.15 200); } .booking-status-completed { background: oklch(70% 0.15 145 / 0.15); color: oklch(70% 0.15 145); } .booking-status-cancelled { background: oklch(60% 0.1 25 / 0.15); color: oklch(60% 0.1 25); } /* Before/after photos */ .booking-photos-pending { font-size: var(--text-small); color: var(--text-muted); font-style: italic; } .booking-photos-loading { font-size: var(--text-small); color: var(--text-muted); } .photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-sm); } .photo-item { position: relative; } .photo-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--surface-raised); } .photo-item figcaption { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.375rem; } .photo-before figcaption { color: oklch(65% 0.18 25); } .photo-after figcaption { color: oklch(70% 0.15 145); } /* Subscription section */ .subscription-active, .subscription-upsell, .subscription-locked { background: var(--surface); border: 1px solid var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-lg); } .subscription-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); } .subscription-header h3 { font-size: var(--text-h3); font-weight: 600; } .subscription-badge { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 99px; background: oklch(70% 0.15 145 / 0.15); color: oklch(70% 0.15 145); flex-shrink: 0; } .subscription-upsell h3, .subscription-locked h3 { font-size: var(--text-h3); font-weight: 600; margin-bottom: var(--space-sm); } .subscription-upsell p, .subscription-locked p { color: var(--text-secondary); margin-bottom: var(--space-sm); } .subscription-price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); letter-spacing: -0.02em; } .subscription-next { font-size: var(--text-small); color: var(--text-muted); margin-bottom: var(--space-md); } .subscription-cancel-btn { margin-top: var(--space-sm); } .subscription-note { font-size: var(--text-small); color: var(--text-muted); margin-top: var(--space-sm); } /* ─── Admin panel ─── */ .nav-admin-label { font-size: var(--text-small); color: var(--text-muted); font-weight: 500; margin-right: auto; margin-left: var(--space-md); } .admin-stats { max-width: 1200px; margin: 0 auto; padding: var(--space-lg) var(--space-md) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } .admin-stat { background: var(--surface); border: 1px solid var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: 0.375rem; } .admin-stat-value { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--accent); } .admin-stat-label { font-size: var(--text-small); color: var(--text-muted); font-weight: 600; } .admin-bookings-list { display: flex; flex-direction: column; gap: var(--space-md); } .admin-booking-card { background: var(--surface); border: 1px solid var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); } .admin-booking-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); } .admin-booking-pkg { font-size: var(--text-h3); font-weight: 600; margin-bottom: 0.25rem; } .admin-booking-customer { font-size: var(--text-small); color: var(--text-secondary); margin-bottom: 0.25rem; } .admin-booking-meta { font-size: var(--text-small); color: var(--text-muted); } .admin-booking-notes { font-size: var(--text-small); color: var(--text-secondary); font-style: italic; margin-top: 0.25rem; } .admin-booking-status-wrap { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; } .admin-status-select { background: var(--surface-raised); border: 1px solid oklch(25% 0.02 295); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-small); padding: 0.5rem 0.75rem; outline: none; cursor: pointer; } .admin-status-select:focus { border-color: var(--accent); } .admin-status-select.booking-status-pending { color: oklch(80% 0.18 80); } .admin-status-select.booking-status-confirmed { color: oklch(70% 0.15 200); } .admin-status-select.booking-status-completed { color: oklch(70% 0.15 145); } .admin-status-select.booking-status-cancelled { color: oklch(60% 0.1 25); } .admin-photos-section { display: flex; flex-direction: column; gap: var(--space-sm); } .admin-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-xs); } .admin-photo-upload { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .upload-status { font-size: var(--text-small); color: var(--accent); } @media (max-width: 640px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-booking-top { flex-direction: column; } .admin-booking-status-wrap { flex-wrap: wrap; } } /* ─── Legal pages (terms / privacy) ─── */ .legal-section { padding: var(--space-xl) var(--space-md); } .legal-inner { max-width: 760px; margin: 0 auto; } .legal-intro { font-size: var(--text-lg); color: var(--text-secondary); margin-bottom: var(--space-lg); line-height: 1.7; } .legal-inner h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin: 2.5rem 0 0.75rem; color: var(--text-primary); } .legal-inner p, .legal-inner address { color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem; font-style: normal; } .legal-inner ul { color: var(--text-secondary); line-height: 1.75; margin: 0.5rem 0 1rem 1.5rem; } .legal-inner ul li { margin-bottom: 0.4rem; } .legal-inner a { color: var(--accent); text-decoration: underline; }