/* ========================================================= Chuck's Car Care — three-sided site Theme is driven by ========================================================= */ :root { --font-head: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 30px rgba(0,0,0,.18); --shadow-lg: 0 25px 60px rgba(0,0,0,.35); --ease: cubic-bezier(.22,1,.36,1); --header-h: 72px; --max: 1180px; /* SERVICE side (default): dark navy garage + amber */ --bg: #0f172a; --bg-alt: #111c33; --bg-elev: #172340; --text: #e5e9f2; --muted: #9aa5bd; --accent: #f59e0b; --accent-2: #fbbf24; --accent-ink: #1a1203; --line: rgba(255,255,255,.08); --hero-grad: radial-gradient(1200px 600px at 80% -10%, rgba(245,158,11,.22), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(59,130,246,.18), transparent 60%); } html[data-side="paint"] { --bg: #12080d; --bg-alt: #1a0c12; --bg-elev: #24111a; --text: #f7eef1; --muted: #c2a9b3; --accent: #e11d48; --accent-2: #fb7185; --accent-ink: #ffffff; --line: rgba(255,255,255,.09); --hero-grad: radial-gradient(1100px 600px at 85% -10%, rgba(225,29,72,.30), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(8,145,178,.25), transparent 60%); } html[data-side="lot"] { /* LOT side: obsidian showroom + champagne gold */ --bg: #07090f; --bg-alt: #0c1019; --bg-elev: #121826; --text: #f3f1ea; --muted: #a9a89e; --accent: #d4a531; --accent-2: #f1d27a; --accent-ink: #141005; --line: rgba(255,255,255,.09); --hero-grad: radial-gradient(1200px 700px at 75% -20%, rgba(212,165,49,.22), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(30,64,175,.22), transparent 60%); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .6s var(--ease), color .6s var(--ease); overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.05; margin: 0 0 .5em; letter-spacing: .01em; } h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; text-transform: uppercase; } h3 { font-size: 1.45rem; font-weight: 700; } p { margin: 0 0 1em; } .container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } .eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: var(--accent); font-size: .95rem; margin-bottom: .6rem; } .section { padding: clamp(4rem, 8vw, 6.5rem) 0; position: relative; } .section--alt { background: var(--bg-alt); transition: background-color .6s var(--ease); } .section__head { max-width: 760px; margin-bottom: 3rem; } .section__sub { color: var(--muted); font-size: 1.1rem; } /* Side-specific visibility: an element may carry several side-only--X classes */ html[data-side="service"] .side-only:not(.side-only--service), html[data-side="paint"] .side-only:not(.side-only--paint), html[data-side="lot"] .side-only:not(.side-only--lot) { display: none !important; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .75rem 1.4rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; font-size: 1rem; line-height: 1; transition: transform .25s var(--ease), box-shadow .25s, background .3s, color .3s, border-color .3s, opacity .3s; position: relative; overflow: hidden; white-space: nowrap; } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); } .btn:hover::after { transform: translateX(120%); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.98); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); } html[data-side="lot"] .btn--primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn--ghost:hover, .btn--ghost.is-active { border-color: var(--accent); color: var(--accent); } .btn--lg { padding: 1rem 1.9rem; font-size: 1.1rem; } .btn--sm { padding: .55rem 1rem; font-size: .9rem; } .btn--block { width: 100%; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background .6s var(--ease), box-shadow .3s; } .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.35); } .header__row { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } .brand__badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); position: relative; overflow: hidden; transition: background .5s var(--ease); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent); } .brand__icon { width: 26px; height: 26px; position: absolute; transition: transform .5s var(--ease), opacity .4s; transform: translateY(140%) rotate(40deg); opacity: 0; } html[data-side="service"] .brand__icon--service, html[data-side="paint"] .brand__icon--paint, html[data-side="lot"] .brand__icon--lot { transform: none; opacity: 1; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; } .brand__tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-weight: 600; } /* The 3-way toggle */ .side-toggle { position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); isolation: isolate; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-left: auto; flex-shrink: 0; } .side-toggle__btn { position: relative; z-index: 1; background: none; border: 0; color: var(--muted); cursor: pointer; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; padding: .5rem .95rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: color .3s; } .side-toggle__btn.is-active { color: var(--accent-ink); } .side-toggle__ico { font-size: 1rem; transition: transform .4s var(--ease); } .side-toggle__btn.is-active .side-toggle__ico { transform: rotate(-15deg) scale(1.15); } .side-toggle__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--accent); transition: transform .45s var(--ease), background .5s; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 50%, transparent); transform: translateX(calc(var(--idx, 0) * 100%)); } .nav { display: flex; align-items: center; gap: 1.4rem; } .nav > a:not(.btn) { font-weight: 600; font-size: .98rem; position: relative; color: var(--text); opacity: .9; white-space: nowrap; } .nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--accent); transition: width .3s var(--ease); } .nav > a:not(.btn):hover::after { width: 100%; } .nav__call { margin-left: .5rem; } .nav-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg-elev); border-radius: 10px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-burger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .header__status { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); padding: .3rem 0 .45rem; border-top: 1px solid var(--line); } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; position: relative; } .status-dot.is-open { background: #22c55e; } .status-dot.is-open::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; animation: pulse 1.8s infinite; } .status-dot.is-closed { background: #ef4444; } @keyframes pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } /* ---------- Flip veil (side switch) ---------- */ .flip-veil { position: fixed; inset: 0; z-index: 100; pointer-events: none; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); background: #f59e0b; display: grid; place-items: center; } .flip-veil[data-to="paint"] { background: #e11d48; } .flip-veil[data-to="lot"] { background: linear-gradient(135deg, #f1d27a, #d4a531); } .flip-veil[data-to="service"] { background: #f59e0b; } .flip-veil.is-animating { animation: wipe 1s var(--ease) forwards; pointer-events: auto; } @keyframes wipe { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 40%, 60% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } } .flip-veil__text { font-family: var(--font-head); font-size: clamp(2.5rem, 9vw, 6rem); font-weight: 800; text-transform: uppercase; color: #141005; letter-spacing: .05em; opacity: 0; } .flip-veil[data-to="paint"] .flip-veil__text { color: #fff; } .flip-veil.is-animating .flip-veil__text { animation: veilText 1s var(--ease) forwards; } @keyframes veilText { 0%,25% { opacity: 0; transform: translateY(30px) scale(.9); } 45%,60% { opacity: 1; transform: none; } 80%,100% { opacity: 0; transform: translateY(-30px); } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(2.4rem, 5.2vw, 3.8rem) 0 clamp(2rem, 4vw, 3.2rem); background-image: var(--hero-grad); transition: background .6s var(--ease); } .hero__bg { position: absolute; inset: 0; pointer-events: none; } .hero__bg-service, .hero__bg-paint, .hero__bg-lot { position: absolute; inset: 0; transition: opacity .8s var(--ease); opacity: 0; } html[data-side="service"] .hero__bg-service, html[data-side="paint"] .hero__bg-paint, html[data-side="lot"] .hero__bg-lot { opacity: 1; } .grid-lines { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); } .gauge { position: absolute; right: -4%; top: 8%; width: min(46vw, 560px); opacity: .35; } .gauge__arc { animation: gaugeFill 3s var(--ease) infinite alternate; } @keyframes gaugeFill { from { stroke-dashoffset: 251; } to { stroke-dashoffset: 40; } } .gauge__needle { transform-origin: 100px 100px; animation: needle 3s var(--ease) infinite alternate; } @keyframes needle { from { transform: rotate(-90deg); } to { transform: rotate(62deg); } } .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: screen; animation: float 12s ease-in-out infinite; } .blob--1 { width: 420px; height: 420px; background: #e11d48; top: -10%; right: 5%; } .blob--2 { width: 360px; height: 360px; background: #0891b2; bottom: -20%; left: 10%; animation-delay: -4s; } .blob--3 { width: 260px; height: 260px; background: #f59e0b; top: 40%; left: 45%; animation-delay: -8s; } @keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.1); } 66% { transform: translate(-30px,25px) scale(.95); } } .drips { position: absolute; top: 0; left: 0; right: 0; height: 100%; display: flex; justify-content: space-around; } .drips i { width: 14px; border-radius: 0 0 10px 10px; background: linear-gradient(#e11d48, #fb7185); opacity: .5; height: 0; animation: drip 6s var(--ease) infinite; } .drips i:nth-child(2) { animation-delay: .8s; } .drips i:nth-child(3) { animation-delay: 2.1s; } .drips i:nth-child(4) { animation-delay: 1.2s; } .drips i:nth-child(5) { animation-delay: 3s; } .drips i:nth-child(6) { animation-delay: .4s; } .drips i:nth-child(7) { animation-delay: 2.6s; } @keyframes drip { 0% { height: 0; opacity: .6; } 70% { height: 120px; opacity: .5; } 100% { height: 140px; opacity: 0; } } /* Lot showroom backdrop */ .showroom-floor { position: absolute; left: -30%; right: -30%; bottom: -5%; height: 60%; background-image: linear-gradient(rgba(212,165,49,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(212,165,49,.22) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(500px) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(transparent 5%, #000 60%); animation: floorScroll 6s linear infinite; } @keyframes floorScroll { to { background-position: 0 70px, 0 0; } } .showroom-lights { position: absolute; inset: 0; display: flex; justify-content: space-around; } .showroom-lights i { width: 28%; height: 90%; background: radial-gradient(ellipse at top, rgba(241,210,122,.28), transparent 65%); filter: blur(12px); animation: lightSway 7s ease-in-out infinite alternate; } .showroom-lights i:nth-child(2) { animation-delay: -2.5s; } .showroom-lights i:nth-child(3) { animation-delay: -5s; } @keyframes lightSway { from { transform: skewX(-6deg); opacity: .7; } to { transform: skewX(6deg); opacity: 1; } } .sparkles i { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px 3px rgba(241,210,122,.9); animation: twinkle 3s ease-in-out infinite; opacity: 0; } .sparkles i:nth-child(1) { top: 18%; left: 12%; } .sparkles i:nth-child(2) { top: 30%; left: 80%; animation-delay: .7s; } .sparkles i:nth-child(3) { top: 65%; left: 25%; animation-delay: 1.4s; } .sparkles i:nth-child(4) { top: 12%; left: 55%; animation-delay: 2.1s; } .sparkles i:nth-child(5) { top: 75%; left: 70%; animation-delay: 1s; } .sparkles i:nth-child(6) { top: 45%; left: 92%; animation-delay: 2.6s; } @keyframes twinkle { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } } .hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.4rem; align-items: center; } .hero__title { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; text-transform: uppercase; margin-bottom: .8rem; } .hero__title-accent { color: var(--accent); transition: color .5s; } html[data-side="lot"] .hero__title-accent { background: linear-gradient(90deg, var(--accent-2), var(--accent) 60%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lead { font-size: 1.05rem; color: var(--muted); max-width: 500px; margin-bottom: 1.4rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.8rem; } .hero__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .95rem; color: var(--muted); } .hero__trust li::before { content: "●"; color: var(--accent); margin-right: .45rem; font-size: .6rem; vertical-align: middle; } .hero__visual { position: relative; } .car-stage { position: relative; padding: 1.6rem 0 .8rem; max-width: 80%; margin: 0 auto; } .car { width: 100%; } .carsvg { width: 100%; height: auto; } .carsvg--animate { filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-.4deg); } } .car__paint { transition: fill .5s var(--ease); } .carsvg--animate .car__wheel { transform-origin: var(--cx) var(--cy); animation: spin 1.2s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .carsvg--animate .car__lamp { animation: lamp 3s infinite; } @keyframes lamp { 0%,90%,100% { opacity: 1; } 95% { opacity: .5; } } .carsvg--animate .car__pearl { animation: pearlShift 4s ease-in-out infinite alternate; } @keyframes pearlShift { from { transform: translateX(-14px); } to { transform: translateX(14px); } } .road { position: absolute; left: 4%; right: 4%; bottom: 1.2rem; height: 4px; overflow: hidden; border-radius: 2px; opacity: .55; } .road span { display: block; height: 100%; width: 200%; background: repeating-linear-gradient(90deg, var(--accent) 0 40px, transparent 40px 80px); animation: road 1s linear infinite; } @keyframes road { to { transform: translateX(-80px); } } .speed-lines { position: absolute; left: -4%; top: 40%; width: 20%; } .speed-lines i { display: block; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent)); margin: 12px 0; opacity: .6; animation: dash 1s linear infinite; } .speed-lines i:nth-child(2) { width: 70%; animation-delay: .2s; } .speed-lines i:nth-child(3) { width: 85%; animation-delay: .5s; } .speed-lines i:nth-child(4) { width: 50%; animation-delay: .7s; } @keyframes dash { 0% { transform: translateX(40px); opacity: 0; } 30% { opacity: .7; } 100% { transform: translateX(-40px); opacity: 0; } } .hero__chip { position: absolute; background: var(--bg-elev); border: 1px solid var(--line); padding: .55rem .9rem; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow); animation: chip 5s ease-in-out infinite; } .hero__chip--1 { top: 0; left: 0; } .hero__chip--2 { bottom: 0; right: 0; animation-delay: -2.5s; } @keyframes chip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Spotlight (lot hero) */ .spotlight { position: relative; } .spot__stage { position: relative; padding: 2.5rem 1rem 0; } .spot__beam { position: absolute; left: 20%; right: 20%; top: -40%; bottom: 10%; background: radial-gradient(ellipse at top, rgba(241,210,122,.45), transparent 65%); filter: blur(10px); pointer-events: none; } .spot__car { position: relative; animation: spotIn .8s var(--ease) both, bob 2.4s ease-in-out 0.8s infinite; } @keyframes spotIn { from { opacity: 0; transform: translateX(80px) scale(.92); } to { opacity: 1; transform: none; } } .spot__floor { position: absolute; left: 5%; right: 5%; bottom: -6px; height: 40px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--paint) 55%, transparent), transparent 70%); filter: blur(14px); opacity: .8; } .spot__info { position: relative; background: color-mix(in srgb, var(--bg-elev) 85%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: .6rem; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 20px 50px rgba(0,0,0,.5); animation: spotIn .8s var(--ease) .1s both; } .spot__info .badge { grid-column: 1; justify-self: start; } .spot__info h3 { grid-column: 1; margin: .2rem 0 0; font-size: 1.5rem; } .spot__info p { grid-column: 1; margin: 0; color: var(--muted); font-size: .9rem; } .spot__price { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-head); font-weight: 800; font-size: 2rem; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .spot__info .btn { grid-column: 2; grid-row: 3; justify-self: end; } .spot__dots { display: flex; justify-content: center; gap: .45rem; margin-top: .8rem; } .spot__dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; background: var(--line); padding: 0; cursor: pointer; transition: all .3s; } .spot__dots button.is-active { background: var(--accent); width: 24px; } /* ---------- Stats ---------- */ .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); transition: background .6s var(--ease); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: 1.8rem 1rem; text-align: center; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat__num, .stat__suffix { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; color: var(--accent); line-height: 1; } .stat__label { display: block; color: var(--muted); font-size: .9rem; margin-top: .3rem; text-transform: uppercase; letter-spacing: .08em; } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .cards--3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; transform-style: preserve-3d; will-change: transform; } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%); opacity: 0; transition: opacity .3s; } .card:hover::before { opacity: 1; } .card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--shadow-lg); } .card--gold { border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: linear-gradient(160deg, var(--bg-elev), color-mix(in srgb, var(--bg-elev) 80%, var(--accent) 5%)); } .card__icon { font-size: 2rem; margin-bottom: .8rem; transition: transform .4s var(--ease); } .card:hover .card__icon { transform: scale(1.2) rotate(-8deg); } .card h3 { font-size: 1.35rem; } .card p { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; } .card__link { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--accent); font-size: .85rem; } /* ---------- Estimator ---------- */ .estimator { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; } .estimator__options { display: flex; flex-wrap: wrap; gap: .7rem; } .chip-opt { position: relative; cursor: pointer; } .chip-opt input { position: absolute; opacity: 0; pointer-events: none; } .chip-opt span { display: inline-block; padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); font-weight: 600; transition: all .25s var(--ease); } .chip-opt span::before { content: "+"; margin-right: .5rem; color: var(--accent); font-weight: 800; } .chip-opt input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); } .chip-opt input:checked + span::before { content: "✓"; color: var(--accent-ink); } .chip-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .est-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; position: sticky; top: calc(var(--header-h) + 1.5rem); } .est-card__label { text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; color: var(--muted); font-weight: 600; } .est-card__price { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--accent); margin: .3rem 0; } .est-card__meta { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; } .est-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-bottom: 1.2rem; } .est-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease); } .est-card__note { color: var(--muted); font-size: .82rem; margin: 1rem 0 0; } .est-card.is-bumping .est-card__price { animation: bump .4s var(--ease); } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } /* ---------- Paint Studio ---------- */ .ps { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 1.2rem; align-items: stretch; --glass: rgba(12, 6, 10, .58); --glass-line: rgba(255,255,255,.11); } .ps > *, .ps__panel > * { min-width: 0; } /* Stage */ .ps__stage { position: relative; aspect-ratio: 16 / 10.5; min-height: 520px; border-radius: 22px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: radial-gradient(120% 85% at 50% -5%, #331a27 0%, #180a11 42%, #07030a 100%); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.03); } .ps__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 32% at 50% 64%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(80% 50% at 50% 100%, rgba(0,0,0,.6), transparent 60%); } .ps__stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.55); } .ps__stage.is-full { aspect-ratio: auto; height: 100vh; border-radius: 0; } .ps__viewport, .ps__photo, .ps__rive { position: absolute; inset: 0; z-index: 1; } .ps__viewport canvas, .ps__rive canvas { display: block; width: 100%; height: 100%; } #psCanvas { touch-action: none; cursor: grab; } #psCanvas:active { cursor: grabbing; } .ps__rive { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.06), transparent 70%); } /* Glass HUD */ .ps__hud { position: absolute; z-index: 6; display: flex; align-items: center; gap: .5rem; pointer-events: none; } .ps__hud > * { pointer-events: auto; } .ps__hud--tl { top: 14px; left: 14px; } .ps__hud--tr { top: 14px; right: 14px; } .ps__hud--bl { bottom: 14px; left: 14px; max-width: calc(100% - 28px); } .ps__hud--br { bottom: 14px; right: 14px; } .ps__modes, .ps__group, .ps__icon, .ps__readout, .ps__loading, .ps__status { background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--glass-line); box-shadow: 0 8px 24px rgba(0,0,0,.35); } .ps__modes, .ps__group { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; } .ps__mode, .ps__group button { border: 0; background: transparent; color: #d9cbd2; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; padding: .45rem .85rem; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; white-space: nowrap; } .ps__mode:hover, .ps__group button:hover { color: #fff; background: rgba(255,255,255,.08); } .ps__mode.is-active, .ps__group button.is-active { background: var(--accent); color: var(--accent-ink); } .ps__group--light button.is-active { background: #fff; color: #1a0b12; } .ps__icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #d9cbd2; cursor: pointer; padding: 0; transition: color .25s, background .25s, transform .2s var(--ease); } .ps__icon svg { width: 18px; height: 18px; } .ps__icon:hover { color: #fff; transform: translateY(-1px); } .ps__icon.is-active { color: var(--accent-2); } .ps__icon.is-flash { background: #fff; color: #1a0b12; } .ps__readout { display: flex; align-items: center; gap: .7rem; padding: .45rem .9rem .45rem .5rem; border-radius: 999px; color: #f7eef1; } .ps__readout-main { display: flex; align-items: center; gap: .6rem; white-space: nowrap; margin-right: .2rem; } .ps__readout strong { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; } .ps__code { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); padding: .12rem .5rem; border-radius: 999px; } .ps__meta { color: #c2a9b3; font-size: .85rem; white-space: nowrap; } .ps__meta code { color: #fff; } .ps__dot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 -7px 12px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.4); } .ps__loading { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .7rem 1.1rem; border-radius: 999px; color: #f7eef1; font-weight: 600; display: flex; align-items: center; gap: .6rem; font-size: .9rem; max-width: 80%; text-align: center; } .ps__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--accent-2); animation: spin .9s linear infinite; flex: 0 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } .ps__status { position: absolute; z-index: 6; top: 66px; left: 14px; right: 14px; padding: .6rem .9rem; border-radius: 12px; color: #e9dfe4; font-size: .82rem; line-height: 1.45; } .ps__status code { color: #fff; background: rgba(255,255,255,.1); padding: 0 .3rem; border-radius: 4px; } /* Paint "ball" — shared by readout dot, swatches, finish previews. var(--c) must resolve on the ball itself, so no shared custom property. */ .ps__dot, .ps__swatch-ball, .ps__finish-ball, .ps__mini, .ps__chip i, .ps__group--wide i, .ps__pin i { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.85) 0, rgba(255,255,255,.2) 20%, transparent 42%), radial-gradient(circle at 50% 118%, rgba(255,255,255,.28), transparent 45%), var(--c, var(--paint)); } /* Dock */ .ps__dock { display: flex; flex-direction: column; height: 0; min-height: 100%; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, var(--bg-elev), color-mix(in srgb, var(--bg-elev) 78%, #000)); box-shadow: var(--shadow); overflow: hidden; } .ps__tabs { display: flex; gap: .25rem; padding: .55rem; border-bottom: 1px solid var(--line); } .ps__tab { flex: 1; border: 0; background: transparent; color: var(--muted); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; padding: .55rem .4rem; border-radius: 10px; cursor: pointer; transition: all .25s; } .ps__tab:hover { color: var(--text); background: rgba(255,255,255,.05); } .ps__tab.is-active { background: var(--accent); color: var(--accent-ink); } .ps__panels { flex: 1; min-height: 0; overflow: auto; padding: 1.1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .ps__panel { display: none; } .ps__panel.is-active { display: grid; gap: 1rem; align-content: start; } .ps__note { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; } .ps__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0; } .ps__note.ps__note--tiny { font-size: .72rem; line-height: 1.45; letter-spacing: .02em; } .ps__note code { color: var(--text); background: rgba(255,255,255,.07); padding: 0 .3rem; border-radius: 4px; font-size: .8em; } /* Body */ .ps__bodies { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; } .ps__body { display: grid; gap: .25rem; justify-items: center; padding: .8rem .6rem .65rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; transition: all .25s var(--ease); } .ps__body svg { width: 100%; max-width: 88px; height: auto; color: currentColor; opacity: .85; } .ps__body em { font-style: normal; font-size: .62rem; letter-spacing: .12em; color: var(--accent-2); } .ps__body:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); transform: translateY(-1px); } .ps__body.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); } /* Color */ .ps__filters { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; } .ps__filters select, .ps__filters input { font: inherit; font-size: .88rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; min-width: 0; } .ps__filters input { grid-column: 1 / -1; } .ps__filters select[hidden] + input { grid-column: 1 / -1; } .ps__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem .3rem; } .ps__swatch { display: grid; justify-items: center; gap: .3rem; padding: .5rem .15rem .4rem; border: 1px solid transparent; border-radius: 14px; background: transparent; cursor: pointer; color: var(--muted); transition: background .2s, border-color .2s; } .ps__swatch:hover { background: rgba(255,255,255,.04); } .ps__swatch[aria-pressed="true"] { background: rgba(255,255,255,.05); border-color: var(--line); } .ps__swatch-ball { position: relative; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 -8px 14px rgba(0,0,0,.45), 0 5px 12px rgba(0,0,0,.4); transition: transform .3s var(--ease), box-shadow .3s; overflow: hidden; } .ps__swatch:hover .ps__swatch-ball { transform: scale(1.08) translateY(-2px); } .ps__swatch[aria-pressed="true"] .ps__swatch-ball { box-shadow: inset 0 -8px 14px rgba(0,0,0,.45), 0 5px 12px rgba(0,0,0,.4), 0 0 0 3px var(--bg-elev), 0 0 0 5px var(--accent); } .ps__swatch[data-type="metallic"] .ps__swatch-ball::after, .ps__swatch[data-type="pearl"] .ps__swatch-ball::after, .ps__swatch[data-type="tricoat"] .ps__swatch-ball::after, .ps__finish-ball[data-finish="metallic"]::after, .ps__finish-ball[data-finish="pearl"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: overlay; opacity: .9; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 32px 32px; } .ps__swatch[data-type="pearl"] .ps__swatch-ball::before, .ps__swatch[data-type="tricoat"] .ps__swatch-ball::before, .ps__finish-ball[data-finish="pearl"]::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .45; mix-blend-mode: screen; background: conic-gradient(from 200deg at 60% 40%, #7dd3fc, #f0abfc, #fde68a, #7dd3fc); } .ps__swatch-name { font-size: .66rem; line-height: 1.15; text-align: center; color: var(--text); font-weight: 600; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ps__swatch-code { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps__match { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); } .ps__match-label { flex-basis: 100%; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .ps__chip { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .8rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem .3rem .35rem; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); } .ps__chip:hover { border-color: var(--accent); transform: translateY(-1px); } .ps__chip small { color: var(--muted); } .ps__chip i, .ps__group--wide i, .ps__pin i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 -3px 6px rgba(0,0,0,.4); flex: 0 0 auto; } .ps__custom { border: 1px solid var(--line); border-radius: 12px; padding: 0 .9rem; } .ps__custom summary { cursor: pointer; padding: .7rem 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; list-style: none; display: flex; justify-content: space-between; } .ps__custom summary::after { content: "+"; font-size: 1rem; line-height: 1; } .ps__custom[open] summary::after { content: "–"; } .ps__custom-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; margin-bottom: .8rem; } .ps__custom .hsl { padding-bottom: .9rem; } /* Finish */ .ps__finishes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; } .ps__finish { display: grid; justify-items: center; gap: .4rem; padding: .7rem .2rem .6rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; transition: all .25s var(--ease); } .ps__finish strong { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; } .ps__finish small { display: none; } .ps__finish:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); } .ps__finish.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); } .ps__finish-ball { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 -7px 12px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.4); } .ps__finish-ball[data-finish="satin"] { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.35) 0, rgba(255,255,255,.08) 30%, transparent 55%), var(--paint); } .ps__finish-ball[data-finish="matte"] { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.12), transparent 60%), color-mix(in srgb, var(--paint) 88%, #888); box-shadow: inset 0 -6px 10px rgba(0,0,0,.35); } .ps__slider { display: grid; gap: .4rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .ps__slider > span { display: flex; justify-content: space-between; } .ps__slider output { color: var(--text); } .ps__slider input:disabled { opacity: .35; cursor: not-allowed; } /* Extras */ .ps__extra { display: grid; gap: .6rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); } .ps__extra-body { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ps__minis { display: flex; gap: .35rem; flex-wrap: wrap; } .ps__mini { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 -4px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); transition: transform .2s var(--ease); } .ps__mini:hover { transform: scale(1.15); } .ps__extra input[type=color] { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: none; padding: 0; cursor: pointer; } .ps__rims { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; } .ps__rim { display: grid; justify-items: center; gap: .3rem; padding: .5rem .2rem .45rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; text-align: center; line-height: 1.1; transition: all .25s var(--ease); } .ps__rim svg { width: 30px; height: 30px; } .ps__rim:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); } .ps__rim.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); } .ps__two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .ps__two > div { display: grid; gap: .4rem; align-content: start; min-width: 0; } .ps__group--wide.ps__group--3 { grid-template-columns: repeat(3, 1fr); } .ps__group--wide.ps__group--7 { grid-template-columns: repeat(7, 1fr); } .ps__group--wide.ps__group--7 button { justify-content: center; padding: .45rem .1rem; font-size: .68rem; } .ps__group--wide.ps__group--wrap { grid-template-columns: repeat(4, 1fr); } .ps__group--wide.ps__group--wrap button { justify-content: center; padding: .45rem .2rem; font-size: .66rem; } .ps__extra-body--stack { display: grid; gap: .6rem; } .ps__inline { display: flex; align-items: center; gap: .6rem; } .ps__extra input[type=color] { flex: 0 0 auto; } .ps__group--wide.ps__group--3 button { justify-content: center; padding: .45rem .3rem; } .ps__switches { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; } .ps__minis--pad { padding: .3rem 0; } .ps__mini.is-active { border-color: #fff; transform: scale(1.15); } .ps__opts[data-disabled="true"], .ps__rims[data-disabled="true"] { opacity: .45; pointer-events: none; } .ps__group--wide { border-radius: 14px; display: grid; grid-template-columns: repeat(2, 1fr); background: var(--bg); border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; } .ps__group--wide button { display: flex; align-items: center; gap: .45rem; border-radius: 10px; color: var(--muted); font-size: .72rem; padding: .5rem .6rem; } .ps__group--wide button.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); } /* Tray + actions */ .ps__tray { padding: .8rem 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; } .ps__tray-items { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; } .ps__pin { flex: 0 0 104px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); padding: 0; cursor: pointer; display: grid; transition: border-color .2s, transform .2s var(--ease); } .ps__pin:hover { border-color: var(--accent); transform: translateY(-2px); } .ps__pin img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .ps__pin span { display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem; font-size: .62rem; color: var(--text); white-space: nowrap; overflow: hidden; } .ps__pin i { width: 10px; height: 10px; } .ps__pin small { color: var(--muted); margin-left: auto; } .ps__actions { padding: .8rem 1rem .9rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; } .ps__footnote { margin: .9rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; max-width: 760px; } .ps__actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } /* Photo mode (shared pieces) */ .photo-drop { position: absolute; inset: 0; display: grid; place-items: center; cursor: crosshair; } .photo-drop:not(.has-photo) { cursor: pointer; } .photo-drop canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .photo-drop:not(.has-photo) canvas { display: none; } .photo-drop.has-photo .photo-drop__empty { display: none; } .photo-drop__empty { text-align: center; color: #c2a9b3; display: grid; gap: .3rem; padding: 2rem; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius); margin: 1.5rem; max-width: 420px; transition: all .25s; backdrop-filter: blur(6px); } .photo-drop.is-over .photo-drop__empty { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .photo-drop__empty strong { color: #fff; font-size: 1.15rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; } .photo-drop__icon { font-size: 2.4rem; } .photo-drop__tip { font-size: .8rem; opacity: .8; } .ps__photo[data-seed-mode="exclude"] .photo-drop { cursor: not-allowed; } .compare-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.6); pointer-events: none; z-index: 2; } .compare-line::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #111; font-size: .65rem; padding: .25rem .4rem; border-radius: 999px; white-space: nowrap; } .switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; font-size: .92rem; } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch__track { width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; transition: background .25s; flex: 0 0 auto; } .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); } .switch input:checked + .switch__track { background: var(--accent); } .switch input:checked + .switch__track::after { transform: translateX(18px); } .switch--sm { font-size: .85rem; } .photo-hint { margin: 0; color: var(--text); font-size: .9rem; background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); border-left: 3px solid var(--accent); padding: .6rem .9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .photo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .file-btn { cursor: pointer; } .seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .seg__btn { border: 0; background: transparent; color: var(--muted); font-weight: 600; padding: .4rem .8rem; border-radius: 999px; cursor: pointer; font-size: .85rem; transition: all .2s; } .seg__btn.is-active { background: var(--accent); color: var(--accent-ink); } .photo-status { color: var(--muted); font-size: .85rem; } .photo-sliders { display: grid; gap: .8rem; } .photo-sliders label, .hsl label { display: grid; gap: .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; } .photo-sliders output { float: right; color: var(--text); } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); outline: 0; cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.4); } input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); } .range--hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } .range--sat { background: linear-gradient(90deg, #808080, hsl(var(--hue, 0), 100%, 50%)); } .range--lig { background: linear-gradient(90deg, #000, #808080, #fff); } .hex-field, .picker-field { display: flex; align-items: center; gap: .5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3rem .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; } .hex-field input { flex: 1 1 0; width: 0; min-width: 0; background: none; border: 0; color: var(--text); font: 600 1rem/1 monospace; text-transform: none; letter-spacing: .05em; outline: 0; } .picker-field { cursor: pointer; } .picker-field input { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; } .hsl { display: grid; gap: .6rem; } /* ---------- Used car lot ---------- */ .lot-filters { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: grid; gap: .8rem; margin-bottom: 1.5rem; } .lot-filters__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .lot-filters input[type=search] { flex: 1 1 220px; } .lot-filters__row--chips { gap: .4rem; } .chip { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: .4rem .8rem; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .85rem; transition: all .2s; } .chip b { color: var(--accent); margin-left: .2rem; } .chip:hover { border-color: var(--accent); color: var(--text); } .chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chip.is-active b { color: var(--accent-ink); } .lot-filters__row--ranges { gap: 1.4rem; } .lot-filters__row--ranges label { flex: 1 1 200px; display: grid; gap: .3rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; } .lot-filters__row--ranges output { float: right; color: var(--text); } .lot-count { margin-left: auto; font-family: var(--font-head); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; } .lot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .lot-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; animation: cardIn .5s var(--ease) both; } @keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .lot-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .lot-card--featured { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .lot-card__media { position: relative; padding: 1.6rem 1rem .4rem; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--paint) 28%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.04), transparent); } .lot-card__media .carsvg { transition: transform .5s var(--ease); } .lot-card:hover .lot-card__media .carsvg { transform: translateX(6px) scale(1.03); } .lot-card__badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .3rem; } .badge { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .7rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--text); border: 1px solid var(--line); } .badge--gold { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-color: transparent; background-size: 200% 100%; animation: shimmer 3s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .badge--green { background: #14532d; color: #bbf7d0; border-color: transparent; } .badge--blue { background: #1e3a8a; color: #bfdbfe; border-color: transparent; } .fav { position: absolute; top: .6rem; right: .6rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--muted); cursor: pointer; font-size: 1.1rem; transition: all .25s; } .fav:hover { color: #fb7185; transform: scale(1.1); } .fav.is-on { color: #fff; background: #e11d48; border-color: #e11d48; } .lot-card__body { padding: .6rem 1.2rem 1.2rem; } .lot-card__body h3 { font-size: 1.4rem; margin: 0 0 .1rem; } .lot-card__trim { color: var(--muted); font-size: .88rem; margin: 0 0 .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lot-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; } .lot-card__price strong { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lot-card__price span { color: var(--muted); font-size: .85rem; } .lot-card__specs { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--muted); font-size: .85rem; } .lot-card__specs li::before { content: "•"; color: var(--accent); margin-right: .35rem; } .lot-card__actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .cmp-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); cursor: pointer; } .cmp-check input { accent-color: var(--accent); width: 16px; height: 16px; } .lot-empty { text-align: center; color: var(--muted); padding: 3rem 1rem; } .lot-more { text-align: center; margin-top: 1.8rem; } /* Dialogs */ .dialog { border: 0; padding: 0; background: transparent; max-width: min(96vw, 980px); width: 100%; color: var(--text); } .dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(6px); } .dlg { background: var(--bg-elev); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; position: relative; max-height: 90vh; box-shadow: 0 40px 100px rgba(0,0,0,.6); animation: dlgIn .35s var(--ease); } @keyframes dlgIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } } .dlg--wide { grid-template-columns: 1fr; } .dlg__close { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.4); color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; } .dlg__media { position: relative; padding: 3rem 1.5rem 1.5rem; display: grid; align-content: center; background: radial-gradient(ellipse at 50% 90%, color-mix(in srgb, var(--paint) 35%, transparent), transparent 65%), linear-gradient(160deg, rgba(255,255,255,.05), transparent); } .dlg__body { padding: 1.8rem; overflow-y: auto; } .dlg__body h2 { font-size: 2rem; margin-bottom: .1rem; } .dlg__trim { color: var(--muted); margin-bottom: .6rem; } .dlg__price { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--accent); margin-bottom: 1rem; } .specs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin: 0 0 1.2rem; } .specs div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; } .specs dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .specs dd { margin: 0; font-weight: 600; } .dlg__body h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 .5rem; } .feat { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem; } .feat li { background: rgba(255,255,255,.06); border-radius: 999px; padding: .3rem .7rem; font-size: .85rem; } .calc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.2rem; } .calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; } .calc label { display: grid; gap: .25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; } .calc input { font: inherit; font-size: 1rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; width: 100%; } .calc__terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .8rem; } .calc__terms .finish-btn { padding: .45rem .2rem; font-size: .9rem; } .calc__out { display: flex; justify-content: space-between; align-items: baseline; } .calc__out span { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; } .calc__out strong { font-family: var(--font-head); font-size: 2rem; color: var(--accent); } .dlg__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .fav-btn.is-on { color: #fb7185; border-color: #fb7185; } /* Compare bar + table */ html:not([data-side="lot"]) .cmp-bar { display: none; } .cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 -10px 40px rgba(0,0,0,.5); animation: barIn .4s var(--ease); } @keyframes barIn { from { transform: translateY(100%); } to { transform: none; } } .cmp-bar__row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; } .cmp-bar__items { display: flex; gap: .6rem; flex: 1; overflow-x: auto; } .cmp-bar__item { display: flex; align-items: center; gap: .5rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .6rem .3rem .3rem; font-size: .85rem; white-space: nowrap; } .cmp-bar__item .carsvg { width: 60px; } .cmp-bar__item button { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; } .cmp-bar__actions { display: flex; gap: .5rem; flex-shrink: 0; } .table-wrap { overflow-x: auto; } .cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .cmp-table th, .cmp-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .cmp-table thead th { text-align: center; } .cmp-table thead .carsvg { width: 150px; margin: 0 auto .3rem; } .cmp-table thead small { color: var(--muted); font-weight: 400; } .cmp-table tbody th { color: var(--muted); font-weight: 600; white-space: nowrap; width: 1%; } .toast { position: fixed; bottom: 5.5rem; left: 50%; transform: translate(-50%, 20px); background: var(--accent); color: var(--accent-ink); padding: .7rem 1.2rem; border-radius: 999px; font-weight: 600; z-index: 70; opacity: 0; transition: all .35s var(--ease); box-shadow: var(--shadow-lg); } .toast.is-in { opacity: 1; transform: translate(-50%, 0); } /* ---------- Timeline ---------- */ .timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; } .timeline::before { content: ""; position: absolute; top: 26px; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5; } .timeline__step { position: relative; padding-top: 4.2rem; } .timeline__num { position: absolute; top: 0; left: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--accent); color: var(--accent); font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; transition: all .4s var(--ease); } .timeline__step:hover .timeline__num { background: var(--accent); color: var(--accent-ink); transform: scale(1.1) rotate(-6deg); } .timeline__step p { color: var(--muted); font-size: .97rem; } /* ---------- Carousel ---------- */ .carousel { position: relative; padding: 0 3.5rem; } .carousel__viewport { overflow: hidden; border-radius: var(--radius); } .carousel__track { display: flex; transition: transform .6s var(--ease); } .review { flex: 0 0 100%; margin: 0; padding: 2.2rem 2.5rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; } .review[hidden] { display: none; } .review__stars { color: var(--accent); letter-spacing: .2em; font-size: 1.2rem; margin-bottom: .8rem; } .review blockquote { margin: 0 auto 1rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 500; max-width: 760px; line-height: 1.5; } .review figcaption { color: var(--muted); font-weight: 600; } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font-size: 1.8rem; line-height: 1; cursor: pointer; transition: all .25s; display: grid; place-items: center; padding-bottom: 4px; } .carousel__btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .carousel__btn--prev { left: 0; } .carousel__btn--next { right: 0; } .carousel__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.2rem; } .carousel__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; transition: all .3s; padding: 0; } .carousel__dots button.is-active { background: var(--accent); width: 28px; border-radius: 5px; } /* ---------- Visit ---------- */ .visit__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; } .visit__address { font-style: normal; font-size: 1.25rem; font-weight: 600; margin-bottom: .4rem; } .visit__address a:hover { color: var(--accent); } .visit__phone { display: inline-block; font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; color: var(--accent); margin-bottom: 1.2rem; } .hours { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .98rem; } .hours td { padding: .5rem 0; border-bottom: 1px solid var(--line); } .hours td:last-child { text-align: right; color: var(--muted); } .hours tr.is-today td { color: var(--accent); font-weight: 700; } .hours tr.is-today td:first-child::after { content: " · today"; font-size: .75em; text-transform: uppercase; letter-spacing: .1em; } .visit__actions { display: flex; flex-wrap: wrap; gap: .8rem; } .visit__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .visit__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05); } /* ---------- Contact ---------- */ .section--contact { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); } .contact__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; } .contact__copy p { color: var(--muted); font-size: 1.05rem; } .contact__alt a { color: var(--accent); font-weight: 700; } .form { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: grid; gap: 1rem; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form label { display: grid; gap: .35rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--muted); } .form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; transition: border-color .25s, box-shadow .25s; } .form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .form input.is-invalid { border-color: #ef4444; } .form textarea.is-flash { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); } .form select option { color: #111; } .form__status { margin: 0; font-size: .95rem; color: var(--muted); min-height: 1.4em; } .form__status.is-ok { color: #22c55e; } .form__status.is-err { color: #ef4444; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 3rem 0 1.5rem; background: var(--bg); transition: background .6s var(--ease); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer__grid h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); } .footer__grid p { margin: 0 0 .4rem; color: var(--muted); font-size: .95rem; } .footer__grid a:hover { color: var(--accent); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .85rem; color: var(--muted); flex-wrap: wrap; } .to-top { font-weight: 700; } .to-top:hover { color: var(--accent); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .cards .reveal:nth-child(2), .timeline .reveal:nth-child(2), .stats__grid .reveal:nth-child(2) { transition-delay: .08s; } .cards .reveal:nth-child(3), .timeline .reveal:nth-child(3), .stats__grid .reveal:nth-child(3) { transition-delay: .16s; } .cards .reveal:nth-child(4), .timeline .reveal:nth-child(4), .stats__grid .reveal:nth-child(4) { transition-delay: .24s; } .cards .reveal:nth-child(5) { transition-delay: .32s; } .cards .reveal:nth-child(6) { transition-delay: .4s; } .cards .reveal:nth-child(7) { transition-delay: .48s; } .cards .reveal:nth-child(8) { transition-delay: .56s; } .swap-text { display: inline-block; } h1 .swap-text, h2.swap-text, h3.swap-text, p.swap-text { display: block; } .btn.swap-text, a.swap-text { display: inline-flex; } .nav > a.swap-text, li.swap-text { display: inline-block; } li.swap-text { display: list-item; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .cards, .cards--3 { grid-template-columns: repeat(2, 1fr); } .lot-grid { grid-template-columns: repeat(2, 1fr); } .timeline { grid-template-columns: repeat(2, 1fr); } .timeline::before { display: none; } .footer__grid { grid-template-columns: 1fr 1fr; } .nav > a:not(.btn) { display: none; } .ps { grid-template-columns: 1fr; } .ps__stage { aspect-ratio: 4 / 3; min-height: 400px; } .ps__dock { height: auto; min-height: 0; } .ps__panels { overflow: visible; } .dlg { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; } .dlg__media { padding: 2.5rem 1.5rem .5rem; } } @media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } .hero__visual { max-width: 560px; margin: 0 auto; width: 100%; } .estimator, .visit__grid, .contact__grid { grid-template-columns: 1fr; } .est-card { position: static; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .ps__stage { min-height: 360px; } .ps__hud--tr .ps__group { display: none; } .ps__status { top: 60px; } } @media (max-width: 760px) { .header__row { flex-wrap: wrap; gap: .75rem; } .brand__tag { display: none; } .side-toggle { order: 3; width: 100%; margin: 0 0 .6rem; } .nav-burger { display: flex; margin-left: auto; } .nav { order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; max-height: 0; transition: max-height .4s var(--ease); } .nav.is-open { max-height: 420px; padding-bottom: .8rem; } .nav > a:not(.btn) { display: block; padding: .8rem 0; border-top: 1px solid var(--line); } .nav > a:not(.btn)::after { display: none; } .nav__call { margin: .8rem 0 0; } .carousel { padding: 0; } .carousel__btn { top: auto; bottom: -3.4rem; transform: none; } .carousel__btn--prev { left: calc(50% - 60px); } .carousel__btn--next { right: calc(50% - 60px); } .carousel__dots { margin-top: 4.4rem; } .review { padding: 1.8rem 1.4rem; } .form__row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .hero__chip { font-size: .8rem; } .hero__chip--1 { top: -.5rem; } .hero__chip--2 { bottom: -.5rem; } .car-stage { padding-top: 2.6rem; } .ps__stage { aspect-ratio: 1 / 1; min-height: 320px; border-radius: 16px; } .ps__readout .ps__meta { display: none; } .ps__hud--br { bottom: 62px; right: auto; left: 14px; } .ps__finishes { grid-template-columns: repeat(3, 1fr); } .ps__rims { grid-template-columns: repeat(3, 1fr); } .ps__two { grid-template-columns: 1fr; } .ps__group--wide.ps__group--7 { grid-template-columns: repeat(4, 1fr); } .ps__group--wide.ps__group--wrap { grid-template-columns: repeat(3, 1fr); } .ps__swatches { grid-template-columns: repeat(3, 1fr); } .lot-grid { grid-template-columns: 1fr; } .spot__info { grid-template-columns: 1fr; } .spot__price, .spot__info .btn { grid-column: 1; grid-row: auto; justify-self: start; } .specs { grid-template-columns: 1fr; } .cmp-bar__row { flex-wrap: wrap; } } @media (max-width: 480px) { .cards, .cards--3 { grid-template-columns: 1fr; } .timeline { grid-template-columns: 1fr; } .hero__trust { flex-direction: column; gap: .3rem; } .side-toggle__btn { padding: .5rem .4rem; font-size: .85rem; } .ps__mode { padding: .4rem .55rem; font-size: .66rem; } .ps__hud { gap: .3rem; } .ps__icon { width: 32px; height: 32px; } .ps__icon svg { width: 15px; height: 15px; } .ps__group button { padding: .4rem .6rem; font-size: .7rem; } .ps__bodies { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }