/* ========================================================================= CENTURY AUTO TRAVELS — MAIN STYLESHEET Design language: black / white / gold. Premium automotive, cinematic. ========================================================================= */ /* Fonts are loaded via tags in the of each page (faster than @import — avoids an extra render-blocking round trip). */ /* --------------------------------------------------------------------- 1. THEME TOKENS --------------------------------------------------------------------- */ /* Light mode is the site's one permanent theme — there is no toggle and no dark variant anymore. These were the site's light-mode token values (previously only active via [data-theme="light"]); they're now simply what :root always is. */ :root{ --gold-dark: #93731f; --gold: #a8823f; --gold-light: #c9a34f; --gold-soft: rgba(201,169,98,0.16); --ease-cinematic: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --nav-h: 84px; --container-w: 1320px; color-scheme: light; --bg: #faf8f3; --bg-elevated: #ffffff; --bg-elevated-2: #f2efe6; --text: #16150f; --text-muted: #55523f; --text-faint: #8a8672; --border: rgba(20,18,10,0.10); --border-strong: rgba(20,18,10,0.18); --shadow-ambient: rgba(30,25,10,0.16); --glass-bg: rgba(255,255,255,0.78); --overlay-scrim: rgba(250,248,243,0.6); } /* --------------------------------------------------------------------- 2. RESET --------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } html, body{ height: 100%; } body{ margin: 0; background: var(--bg); color: var(--text); font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .5s var(--ease-out), color .5s var(--ease-out); overflow-x: hidden; } body.no-scroll{ overflow: hidden; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; cursor: pointer; } ul{ list-style: none; margin: 0; padding: 0; } h1,h2,h3,h4,p{ margin: 0; } h1,h2,h3,h4{ font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: .01em; color: var(--text); } ::selection{ background: var(--gold); color: #0a0a0a; } .container{ width: min(92%, var(--container-w)); margin-inline: auto; } .eyebrow{ display: inline-flex; align-items: center; gap: .6em; font-family: 'Montserrat', sans-serif; font-size: .76rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); } .eyebrow::before{ content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .section-head{ max-width: 640px; margin-bottom: 3.2rem; } .section-head h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); margin-top: .7rem; line-height: 1.15; } .section-head p{ margin-top: 1rem; color: var(--text-muted); font-size: 1.02rem; max-width: 52ch; } .section-head.center{ margin-inline: auto; text-align: center; } .section-head.center p{ margin-inline: auto; } .section-head.center .eyebrow::before{ display:none; } section{ position: relative; } /* Buttons ------------------------------------------------------------- */ .btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1.05em 2.4em; font-family: 'Montserrat', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--gold); border-radius: 2px; color: #0a0906; background: linear-gradient(120deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); background-size: 180% 180%; background-position: 0% 50%; overflow: hidden; isolation: isolate; transition: background-position .6s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); box-shadow: 0 8px 24px -12px rgba(201,169,98,0.55); } .btn:hover{ background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(201,169,98,0.65); } .btn:active{ transform: translateY(0); } .btn-ghost{ background: transparent; color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; } .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); background: var(--gold-soft); box-shadow: none; } /* --------------------------------------------------------------------- 3. PRELOADER / CINEMATIC OPENING ANIMATION --------------------------------------------------------------------- */ #preloader{ position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: var(--bg); perspective: 1200px; transition: opacity .9s var(--ease-cinematic), visibility .9s; } #preloader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } /* Intro atmosphere — the live galaxy canvas (js/main.js → initPreloaderGalaxy) starts moving the instant the preloader appears, already visible and animating behind the logo rather than fading in only once the reveal finishes. Sits behind .preloader-logo via DOM order alone, so it can never appear on top of or across the letters. The soft warm glow layered above it still builds in gradually, synchronized to the logo's ~2.9s reveal, as a gentle accent around the mark rather than the galaxy's only presence. */ .preloader-aura{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .preloader-wave{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .preloader-aura-glow{ position: absolute; inset: -20%; background: radial-gradient(42% 38% at 50% 55%, rgba(158,120,32,.26), transparent 70%); filter: blur(34px); opacity: 0; animation: introAuraGlow 2.9s ease-out forwards; } @keyframes introAuraGlow{ 0% { opacity: 0; transform: scale(.9); } 33% { opacity: .25; transform: scale(.94); } 66% { opacity: .5; transform: scale(1); } 100% { opacity: .65; transform: scale(1.03); } } .preloader-logo{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; transform: rotateX(8deg) translateY(6px) scale(.94); filter: blur(6px); opacity: 0; animation: logoAssemble 2.6s var(--ease-cinematic) forwards; } /* Official logo artwork, gold-masked, revealed with a left-to-right wipe plus a 3D settle — the letters themselves are never redrawn or morphed, only clipped, glowed and lit as they arrive. */ .preloader-emblem{ position: relative; width: clamp(240px, 42vw, 420px); aspect-ratio: 902 / 398; background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%); -webkit-mask-image: url('../assets/logo/logo-mark.png'); mask-image: url('../assets/logo/logo-mark.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; animation: emblemReveal 1.5s var(--ease-cinematic) .2s forwards; } .preloader-emblem::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(75deg, transparent 32%, rgba(255,255,255,.85) 48%, transparent 64%); background-size: 250% 100%; background-position: -60% 0; -webkit-mask-image: url('../assets/logo/logo-mark.png'); mask-image: url('../assets/logo/logo-mark.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; mix-blend-mode: overlay; opacity: 0; animation: emblemShine 1s ease-out 1.75s forwards; } .preloader-underline{ width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: lineGrow 1.1s var(--ease-cinematic) forwards; animation-delay: .55s; } @keyframes logoAssemble{ 0% { opacity: 0; filter: blur(8px); transform: rotateX(10deg) translateY(10px) scale(.9); } 45% { opacity: 1; filter: blur(1.5px); } 65% { opacity: 1; filter: blur(0); transform: rotateX(0deg) translateY(0) scale(1); } 100% { opacity: 1; filter: blur(0); transform: rotateX(0deg) translateY(0) scale(1); } } @keyframes emblemReveal{ 0%{ clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 0 rgba(230,199,102,0)); } 70%{ clip-path: inset(0 0% 0 0); filter: drop-shadow(0 0 22px rgba(230,199,102,.45)); } 100%{ clip-path: inset(0 0% 0 0); filter: drop-shadow(0 0 14px rgba(230,199,102,.35)); } } @keyframes emblemShine{ 0%{ opacity: 0; background-position: -60% 0; } 15%{ opacity: 1; } 85%{ opacity: 1; } 100%{ opacity: 0; background-position: 160% 0; } } @keyframes lineGrow{ to{ width: 220px; } } /* --------------------------------------------------------------------- 4. HEADER / NAV --------------------------------------------------------------------- */ .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h); display: flex; align-items: center; background: linear-gradient(to bottom, rgba(4,4,5,.55), transparent); transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s var(--ease-out); } .site-header::after{ content: ''; position: absolute; inset: 0; border-bottom: 1px solid transparent; transition: border-color .4s var(--ease-out); pointer-events: none; } .site-header.is-scrolled{ background: var(--glass-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .site-header.is-scrolled::after{ border-color: var(--border); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; } .brand-mark{ display: flex; align-items: center; } /* Official logo artwork (assets/logo/logo-mark.png), used as a mask so its fill can be styled — the exact same gold gradient as the opening preloader's logo (.preloader-emblem), so it reads as one consistent logo treatment site-wide rather than a different tint in the header. */ .brand-logo{ display: block; width: clamp(92px, 11vw, 124px); aspect-ratio: 902 / 398; background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%); -webkit-mask-image: url('../assets/logo/logo-mark.png'); mask-image: url('../assets/logo/logo-mark.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; } .menu-toggle{ position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-strong); border-radius: 2px; transition: border-color .3s, background-color .3s; } .menu-toggle:hover{ border-color: var(--gold); } .menu-toggle .bars{ position: relative; width: 20px; height: 14px; } .menu-toggle .bars span{ position: absolute; left: 0; right: 0; height: 1.5px; background: var(--text); transition: transform .4s var(--ease-cinematic), opacity .3s, background-color .3s; } .menu-toggle .bars span:nth-child(1){ top: 0; } .menu-toggle .bars span:nth-child(2){ top: 50%; transform: translateY(-50%); } .menu-toggle .bars span:nth-child(3){ bottom: 0; } .menu-toggle[aria-expanded="true"] .bars span{ background: var(--gold); } .menu-toggle[aria-expanded="true"] .bars span:nth-child(1){ transform: translateY(6.25px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity: 0; } .menu-toggle[aria-expanded="true"] .bars span:nth-child(3){ transform: translateY(-6.25px) rotate(-45deg); } /* --------------------------------------------------------------------- 5. SIDE MENU --------------------------------------------------------------------- */ .side-menu-scrim{ position: fixed; inset: 0; background: var(--overlay-scrim); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; z-index: 210; transition: opacity .5s var(--ease-out), visibility .5s; } .side-menu-scrim.is-open{ opacity: 1; visibility: visible; } .side-menu{ position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 88vw); background: var(--bg-elevated); border-left: 1px solid var(--border); z-index: 211; display: flex; flex-direction: column; padding: 2.4rem 2.4rem 2.6rem; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform .6s var(--ease-cinematic), visibility 0s linear .6s; box-shadow: -30px 0 60px -20px var(--shadow-ambient); } .side-menu.is-open{ transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .6s var(--ease-cinematic), visibility 0s linear 0s; } .side-menu-top{ display: flex; justify-content: flex-end; margin-bottom: 3rem; } .side-menu-close{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: transparent; color: var(--text); border-radius: 2px; font-size: 1.1rem; transition: border-color .3s, color .3s, transform .3s; } .side-menu-close:hover{ border-color: var(--gold); color: var(--gold); transform: rotate(90deg); } .side-menu nav{ display: flex; flex-direction: column; gap: .2rem; } .side-menu nav a{ position: relative; padding: 1.05rem 0; font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; transition: color .35s var(--ease-out), padding-left .35s var(--ease-out); } .side-menu nav a .idx{ font-family: 'Montserrat', sans-serif; font-size: .68rem; letter-spacing: .1em; color: var(--text-faint); } .side-menu nav a:hover{ color: var(--gold); padding-left: .5rem; } .side-menu nav a:hover .idx{ color: var(--gold); } /* --------------------------------------------------------------------- 6. HERO SLIDER --------------------------------------------------------------------- */ .hero{ position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #050505; } .hero-slide{ position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1.4s var(--ease-cinematic); } .hero-slide.is-active{ opacity: 1; z-index: 2; } .hero-slide-media{ position: absolute; inset: -4%; overflow: hidden; } .hero-slide-media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; } .hero-slide.is-active .hero-slide-media img{ transform: scale(1.16); } .hero-slide-media::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,3,3,.92) 0%, rgba(3,3,3,.35) 46%, rgba(3,3,3,.55) 100%), linear-gradient(to right, rgba(3,3,3,.55) 0%, transparent 55%); } .hero-content{ position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(4.5rem, 9vw, 7.5rem); } .hero-text{ max-width: 720px; } .hero-eyebrow{ opacity: 0; transform: translateY(16px); } .hero-slide.is-active .hero-eyebrow{ animation: heroRise .9s var(--ease-out) forwards; animation-delay: .3s; } .hero-title{ margin-top: 1rem; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; color: #fff; opacity: 0; transform: translateY(24px); } .hero-slide.is-active .hero-title{ animation: heroRise 1s var(--ease-out) forwards; animation-delay: .45s; } .hero-sub{ margin-top: 1.3rem; max-width: 44ch; font-size: 1.08rem; color: rgba(244,242,236,.82); opacity: 0; transform: translateY(20px); } .hero-slide.is-active .hero-sub{ animation: heroRise 1s var(--ease-out) forwards; animation-delay: .6s; } .hero-cta{ margin-top: 2.2rem; opacity: 0; transform: translateY(20px); } .hero-slide.is-active .hero-cta{ animation: heroRise 1s var(--ease-out) forwards; animation-delay: .75s; } @keyframes heroRise{ to{ opacity: 1; transform: translateY(0); } } .hero-footer-row{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.4rem; } .hero-dots{ display: flex; gap: .7rem; } .hero-dot{ width: 34px; height: 3px; background: rgba(255,255,255,.28); border: none; padding: 0; position: relative; overflow: hidden; } .hero-dot::after{ content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--gold); } .hero-dot.is-active::after{ transform: scaleX(1); transition: transform 6.2s linear; } .hero-scroll-cue{ display: flex; align-items: center; gap: .8rem; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(244,242,236,.65); } .hero-scroll-cue .line{ width: 40px; height: 1px; background: rgba(244,242,236,.5); position: relative; overflow: hidden; } .hero-scroll-cue .line::after{ content:''; position: absolute; inset: 0; background: var(--gold); animation: scanLine 2.2s ease-in-out infinite; } @keyframes scanLine{ 0%{ transform: translateX(-100%); } 50%{ transform: translateX(0%); } 100%{ transform: translateX(100%); } } /* --------------------------------------------------------------------- 7. FEATURED VEHICLES --------------------------------------------------------------------- */ .featured{ padding: clamp(5rem, 9vw, 8rem) 0; background: var(--bg); } .featured-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } @media (max-width: 1080px){ .featured-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .featured-grid{ grid-template-columns: 1fr; } } .car-card{ --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out), border-color .4s, box-shadow .4s; opacity: 0; translate: 0 32px; } .car-card.is-visible{ opacity: 1; translate: 0 0; transition: transform .5s var(--ease-out), border-color .4s, box-shadow .4s, opacity .8s var(--ease-out), translate .8s var(--ease-out); } .car-card:hover{ border-color: var(--border-strong); box-shadow: 0 30px 60px -24px var(--shadow-ambient); } .car-card::before{ content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(230,199,102,.16), transparent 60%); transition: opacity .4s; } .car-card:hover::before{ opacity: 1; } .car-media{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-elevated-2); } .car-media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .7s var(--ease-out); } .car-card:hover .car-media img{ transform: scale(1.12) translateZ(0); } .car-media-tag{ position: absolute; top: .9rem; left: .9rem; padding: .35em .8em; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #0a0906; background: var(--gold); border-radius: 2px; z-index: 2; } .car-body{ padding: 1.5rem 1.4rem 1.7rem; transform: translateZ(30px); } .car-name{ font-size: 1.22rem; line-height: 1.25; } .car-type{ margin-top: .3rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .car-specs{ display: flex; flex-wrap: wrap; gap: .55rem .9rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .car-specs span{ display: flex; align-items: center; gap: .4em; font-size: .76rem; color: var(--text-muted); } .car-specs svg{ width: 14px; height: 14px; stroke: var(--gold); flex-shrink: 0; } .car-desc{ margin-top: .9rem; font-size: .86rem; color: var(--text-muted); line-height: 1.55; } .car-footer{ margin-top: 1.3rem; display: flex; align-items: center; justify-content: space-between; } .car-price{ display: flex; flex-direction: column; } .car-price .amount{ font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--text); } .car-price .amount b{ color: var(--gold); font-weight: 700; } .car-price .unit{ font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .car-link{ font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: .5em; padding-bottom: .2em; border-bottom: 1px solid var(--border-strong); transition: color .3s, border-color .3s, gap .3s; } .car-link:hover{ color: var(--gold); border-color: var(--gold); gap: .8em; } .car-link-disabled{ color: var(--text-faint); border-color: transparent; cursor: default; } .car-link-disabled:hover{ color: var(--text-faint); border-color: transparent; gap: .5em; } .featured-footer{ margin-top: 3.2rem; display: flex; justify-content: center; } /* --------------------------------------------------------------------- 8. CONTACT / SOCIAL --------------------------------------------------------------------- */ .contact{ padding: clamp(5rem, 9vw, 8rem) 0; background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .contact::before{ content:''; position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; background: radial-gradient(circle, var(--gold-soft), transparent 70%); transform: translate(-50%,-50%); pointer-events: none; } .contact-inner{ position: relative; text-align: center; max-width: 680px; margin-inline: auto; } .contact-socials{ margin-top: 2.6rem; display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; } .social-btn{ width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text); transition: border-color .35s, color .35s, transform .35s, background-color .35s; } .social-btn svg{ width: 20px; height: 20px; } .social-btn:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-4px); background: var(--gold-soft); } .contact-location{ margin-top: 2.6rem; display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 1.4rem; border: 1px dashed var(--border-strong); border-radius: 4px; font-size: .84rem; color: var(--text-muted); text-decoration: none; transition: border-color .35s, color .35s; } .contact-location:hover{ border-color: var(--gold); color: var(--gold); } .contact-location svg{ width: 17px; height: 17px; stroke: var(--gold); flex-shrink: 0; } /* --------------------------------------------------------------------- 9. FOOTER --------------------------------------------------------------------- */ .site-footer{ padding: 2.6rem 0; background: var(--bg); } .site-footer .container{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-brand{ font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--text-muted); } .footer-brand .brand-gold{ color: var(--gold); } .footer-meta{ font-size: .74rem; color: var(--text-faint); letter-spacing: .04em; } /* --------------------------------------------------------------------- 10. SCROLL REVEAL (generic) --------------------------------------------------------------------- */ .reveal{ opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); } .reveal.is-visible{ opacity: 1; translate: 0 0; } .reveal-delay-1{ transition-delay: .1s; } .reveal-delay-2{ transition-delay: .2s; } .reveal-delay-3{ transition-delay: .3s; } /* --------------------------------------------------------------------- 11a. PAGE HEADER (used by Rent Now catalogue, FAQ, Information) --------------------------------------------------------------------- */ .page-header{ padding: calc(var(--nav-h) + 3.6rem) 0 3rem; text-align: center; } .page-header .eyebrow{ justify-content: center; } .page-header .eyebrow::before{ display: none; } .page-header h1{ margin-top: .8rem; font-size: clamp(2.2rem, 5vw, 3.2rem); } .page-header p{ margin: 1rem auto 0; max-width: 56ch; color: var(--text-muted); } /* --------------------------------------------------------------------- 11b. FAQ ACCORDION --------------------------------------------------------------------- */ .faq-list{ max-width: 820px; margin: 0 auto; padding: 1rem 0 6rem; } .faq-item{ border-bottom: 1px solid var(--border); } .faq-question{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; background: transparent; border: none; text-align: left; color: var(--text); font-family: 'Playfair Display', serif; font-size: 1.12rem; font-weight: 600; } .faq-question:hover{ color: var(--gold); } .faq-question .faq-icon{ flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; position: relative; transition: transform .4s var(--ease-cinematic), border-color .3s; } .faq-question .faq-icon::before, .faq-question .faq-icon::after{ content: ''; position: absolute; background: var(--gold); transition: transform .3s var(--ease-out), opacity .3s; } .faq-question .faq-icon::before{ width: 10px; height: 1.5px; } .faq-question .faq-icon::after{ width: 1.5px; height: 10px; } .faq-item.is-open .faq-question .faq-icon{ transform: rotate(180deg); border-color: var(--gold); } .faq-item.is-open .faq-question .faq-icon::after{ opacity: 0; } .faq-answer-wrap{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-cinematic); } .faq-item.is-open .faq-answer-wrap{ grid-template-rows: 1fr; } .faq-answer-inner{ overflow: hidden; } .faq-answer{ padding: 0 0 1.8rem; max-width: 68ch; color: var(--text-muted); font-size: .92rem; line-height: 1.7; } .faq-tag{ display: inline-flex; align-items: center; gap: .4em; margin-bottom: .8rem; margin-right: .5rem; padding: .3em .8em; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; } .faq-tag.tag-legal{ color: var(--gold); background: var(--gold-soft); } .faq-tag.tag-policy{ color: var(--text-muted); border: 1px dashed var(--border-strong); } /* --------------------------------------------------------------------- 11c. RENT NOW CATALOGUE --------------------------------------------------------------------- */ .catalogue{ padding-bottom: 6rem; } .catalogue-note{ max-width: 820px; margin: 0 auto 3rem; padding: 1rem 1.4rem; border: 1px dashed var(--border-strong); border-radius: 4px; text-align: center; font-size: .84rem; color: var(--text-muted); } a.catalogue-note{ display: block; text-decoration: none; transition: border-color .35s, color .35s; } a.catalogue-note:hover{ border-color: var(--gold); color: var(--gold); } /* --------------------------------------------------------------------- 11. STUB PAGE (Information placeholder) --------------------------------------------------------------------- */ .stub-page{ min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 4rem) 0 6rem; text-align: center; } .stub-page .container{ max-width: 640px; } .stub-page h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); margin-top: 1rem; } .stub-page p{ margin-top: 1.2rem; color: var(--text-muted); } .stub-page .btn{ margin-top: 2.2rem; } .stub-phase-tag{ display: inline-block; margin-top: 1.6rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); border: 1px dashed var(--border-strong); padding: .5em 1em; border-radius: 3px; } /* --------------------------------------------------------------------- 12. RESPONSIVE Desktop (>1024px) is untouched by everything below — every rule here is scoped to tablet/mobile widths only, layered narrowest-last so a phone picks up the tighter values after the broader tablet ones. --------------------------------------------------------------------- */ /* ---- TABLET + MOBILE (<=1024px): shared hero + logo fit ---- */ @media (max-width: 1024px){ /* All 3 hero photos share one composition (car lower-right-of-centre against the same skyline), so one shared crop works for all of them. object-fit stays `cover` — same as desktop — so there is never any empty/black letterbox space; only the object-position is tuned per breakpoint so the crop window stays centred on the car instead of the frame's literal geometric centre (the default 50% 50% leaves too much empty plaza on the left and crops into the wheels/mirror on the right once the crop narrows on smaller screens). Height/shape of the hero box itself is unchanged from desktop — only which slice of the image fills it. */ .hero-slide-media img{ object-position: 72% center; } /* The logo's desktop sizing is a viewport-width formula (11vw) that doesn't meaningfully taper until well below tablet widths, so an iPad-class screen was rendering it almost as large as desktop — oversized next to this compact hamburger-only header. Same asset (assets/logo/logo-mark.png — its only resolution) at a smaller size; the two breakpoints below taper it further for phones. Scoped to body.page-home only — this task is homepage-only, and every other page keeps its current header exactly as it is. */ body.page-home .brand-logo{ width: clamp(70px, 8vw, 90px); } } @media (max-width: 780px){ :root{ --nav-h: 72px; } .hero-footer-row{ align-items: flex-end; } .hero-scroll-cue span:not(.line){ display: none; } .contact-socials{ gap: .8rem; } .site-footer .container{ flex-direction: column; text-align: center; } .hero-slide-media img{ object-position: 76% center; } /* The 3 titles use to control desktop line breaks (e.g. "Exceptional Freedom" stays on one line) — that glued pair can be wider than a narrow phone screen with no other break point, pushing text past the edge. Lowering the min end of the clamp (only reachable below ~490px; unchanged above that) lets the longest title fit on one line on most phones; overflow-wrap stays as a safety net for the very narrowest screens. Same wording, same desktop size — just a smaller mobile floor. */ .hero-title{ font-size: clamp(2.05rem, 8.5vw, 2.6rem); overflow-wrap: break-word; } body.page-home .brand-logo{ width: clamp(62px, 9vw, 74px); } } @media (max-width: 480px){ .hero-slide-media img{ object-position: 80% center; } /* Original site-wide phone sizing — unchanged, still applies on every other page. body.page-home below overrides it (with a more specific selector) for the homepage only. */ .brand-logo{ width: clamp(78px, 26vw, 100px); } body.page-home .brand-logo{ width: clamp(54px, 18vw, 62px); } } /* --------------------------------------------------------------------- 13. REDUCED MOTION --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hero-slide-media img{ transform: none !important; } .car-card{ transform: none !important; } }