.preset-root{--theme-primary: 38 78% 58%;--theme-primary-fg: 30 18% 8%;--theme-secondary: 220 10% 16%;--theme-secondary-fg: 35 28% 92%;--theme-accent: 42 74% 66%;--theme-accent-fg: 30 18% 8%;--theme-bg: 225 16% 5%;--theme-fg: 36 24% 94%;--theme-card: 225 14% 9%;--theme-card-fg: 36 24% 94%;--theme-muted: 225 12% 13%;--theme-muted-fg: 36 12% 68%;--theme-border: 38 18% 24%;--theme-destructive: 0 78% 56%;--theme-font-heading: "Manrope", system-ui, sans-serif;--theme-font-body: "Inter", system-ui, sans-serif;--theme-heading-weight: 800;--theme-body-weight: 400;--theme-heading-tracking: -0.018em;--theme-radius: 6px;--theme-radius-sm: 3px;--theme-radius-lg: 10px;--theme-card-style: border;--theme-button-style: solid;--theme-motion-speed: 220ms;--theme-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);--theme-shadow-card: 0 1px 2px hsl(var(--theme-fg) / 0.03), 0 16px 46px hsl(var(--theme-fg) / 0.08);--theme-shadow-pop: 0 28px 90px hsl(var(--theme-fg) / 0.16);--theme-border-strong: 38 18% 24%;--theme-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--status-available-bg: 142 76% 36% / 0.14;--status-available-fg: 142 72% 29%;--status-reserved-bg: 32 95% 44% / 0.14;--status-reserved-fg: 32 95% 44%;--status-sold-bg: 0 0% 45% / 0.12;--status-sold-fg: 0 0% 38%;--status-coming-bg: 217 91% 60% / 0.14;--status-coming-fg: 217 91% 50%;background:hsl(var(--theme-bg));color:hsl(var(--theme-fg));font-family:var(--theme-font-body);font-weight:var(--theme-body-weight);} .preset-root h1,.preset-root h2,.preset-root h3{font-family:var(--theme-font-heading);font-weight:var(--theme-heading-weight);letter-spacing:var(--theme-heading-tracking);} :where(.preset-root) :where(a:not([class*="text-"]):not([class*="hover:text-"])){color:hsl(var(--theme-primary));} .preset-root .tx{transition:all var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root details[open] summary .chev{transform:rotate(45deg);} .preset-root summary .chev{display:inline-block;transition:transform var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-range-input{-webkit-appearance:none;appearance:none;background:transparent;} .preset-root .dh-range-input::-webkit-slider-runnable-track{background:transparent;height:28px;border:none;} .preset-root .dh-range-input::-moz-range-track{background:transparent;height:28px;border:none;} .preset-root .dh-range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:999px;background:hsl(var(--theme-primary));border:2px solid hsl(var(--theme-bg));box-shadow:0 1px 4px rgba(0,0,0,0.4);cursor:grab;margin-top:5px;pointer-events:auto;} .preset-root .dh-range-input::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:hsl(var(--theme-primary));border:2px solid hsl(var(--theme-bg));box-shadow:0 1px 4px rgba(0,0,0,0.4);cursor:grab;pointer-events:auto;} .preset-root .dh-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid hsl(var(--theme-border));background:transparent;color:hsl(var(--theme-fg));font-size:13px;font-weight:500;cursor:pointer;transition:all var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-chip:hover{border-color:hsl(var(--theme-primary)/0.5);} .preset-root .dh-chip-active{background:hsl(var(--theme-primary));color:hsl(var(--theme-primary-fg));border-color:hsl(var(--theme-primary));} /* ============== comp1-comp6 decorative cascade — ports the visual =============== personality from the design HTMLs into the live preset-root scope. Without these, variant components are empty skeletons — ALL the polish (grain textures, hero radial backdrops, glass blur, photo placeholder gradients, button glow hovers, reveal scroll-in, drop-cap typography, marquee anim) lives inside these classes. Each variant just opts in by className. */ .preset-root .h{font-family:var(--theme-font-heading);font-weight:var(--theme-heading-weight);letter-spacing:var(--theme-heading-tracking);} .preset-root .b{font-family:var(--theme-font-body);} .preset-root .text-muted{color:hsl(var(--theme-muted-fg));} .preset-root .text-primary{color:hsl(var(--theme-primary));} .preset-root .pill{border-radius:999px;} .preset-root .surface-card{background:linear-gradient(180deg,color-mix(in srgb, hsl(var(--theme-card)) 98%, transparent),color-mix(in srgb, hsl(var(--theme-muted)) 99%, transparent));border:1px solid hsl(var(--theme-border));border-radius:var(--theme-radius);box-shadow:var(--theme-shadow-card);} .preset-root .grain{background-image:url("data:image/svg+xml;utf8,");background-size:160px 160px;} .preset-root .hero-abstract{background:radial-gradient(60% 80% at 80% 20%, hsl(var(--theme-primary) / 0.35), transparent 60%),radial-gradient(60% 70% at 10% 90%, hsl(var(--theme-fg) / 0.15), transparent 60%),linear-gradient(135deg, hsl(var(--theme-card)) 0%, hsl(var(--theme-bg)) 100%);} .preset-root .glass{background:hsl(var(--theme-card) / 0.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid hsl(var(--theme-fg) / 0.12);} .preset-root .photo{position:relative;overflow:hidden;background:linear-gradient(135deg, hsl(var(--theme-primary) / 0.35), hsl(var(--theme-fg) / 0.08) 40%, hsl(var(--theme-card) / 1) 100%);} .preset-root .photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:overlay;pointer-events:none;} .preset-root .photo .silhouette{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:86%;height:60%;background:radial-gradient(ellipse at 30% 80%, hsl(0 0% 0% / 0.45), transparent 60%),radial-gradient(ellipse at 70% 80%, hsl(0 0% 0% / 0.45), transparent 60%);} .preset-root .photo .label{position:absolute;left:14px;bottom:12px;padding:4px 8px;border-radius:4px;font-size:11px;letter-spacing:0.06em;background:hsl(0 0% 0% / 0.45);color:hsl(0 0% 100% / 0.92);backdrop-filter:blur(6px);} .preset-root .btn-primary{background:linear-gradient(180deg,hsl(var(--theme-primary)),hsl(var(--theme-primary) / 0.92));color:hsl(var(--theme-primary-fg));border-radius:var(--theme-radius);box-shadow:0 20px 42px -24px hsl(var(--theme-primary) / 0.9);transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing),filter var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 26px 54px -22px hsl(var(--theme-primary) / 0.72);} .preset-root .btn-ghost{border:1px solid hsl(var(--theme-border));background:color-mix(in srgb, hsl(var(--theme-card)) 88%, transparent);color:hsl(var(--theme-fg));border-radius:var(--theme-radius);transition:all var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .btn-ghost:hover{background:hsl(var(--theme-fg) / 0.06);border-color:hsl(var(--theme-primary) / 0.45);} .preset-root .reveal{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--theme-motion-easing), transform 700ms var(--theme-motion-easing);} .preset-root .reveal.in{opacity:1;transform:none;} .preset-root .dropcap::first-letter{font-family:var(--theme-font-heading);font-size:5.6em;line-height:0.85;float:left;padding:0.05em 0.12em 0 0;color:hsl(var(--theme-primary));font-weight:700;} .preset-root .diag-clip-top{clip-path:polygon(0 0, 100% 0, 100% 55%, 0 95%);} .preset-root .diag-clip-bottom{clip-path:polygon(0 95%, 100% 55%, 100% 100%, 0 100%);} @media (max-width:768px){.preset-root .diag-clip-top,.preset-root .diag-clip-bottom{clip-path:none;}} @keyframes preset-root-marquee-x{from{transform:translateX(0);}to{transform:translateX(-50%);}} .preset-root .marquee-track{animation:preset-root-marquee-x 60s linear infinite;} .preset-root a:focus-visible,.preset-root button:focus-visible,.preset-root [tabindex]:focus-visible{outline:2px solid hsl(var(--theme-primary));outline-offset:3px;border-radius:4px;} .preset-root input:focus-visible,.preset-root select:focus-visible,.preset-root textarea:focus-visible{outline:2px solid hsl(var(--theme-primary));outline-offset:2px;border-radius:4px;} .preset-root ::-webkit-scrollbar{width:10px;height:10px;} .preset-root ::-webkit-scrollbar-track{background:hsl(var(--theme-bg));} .preset-root ::-webkit-scrollbar-thumb{background:hsl(var(--theme-border));border-radius:999px;} /* ============== comp2 — card hover micro-interactions ============== */ .preset-root .card-link{color:inherit;text-decoration:none;} .preset-root .card-link:focus-visible{outline:2px solid hsl(var(--theme-primary));outline-offset:3px;} .preset-root .v1-card{transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .v1-card:hover{transform:scale(1.02);box-shadow:0 24px 60px -20px rgba(0,0,0,.35);} .preset-root .v2-card{transition:transform var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .v2-card:hover{transform:translateY(-3px);} .preset-root .v3-row{transition:background-color var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .v3-row:hover{background-color:color-mix(in srgb, hsl(var(--theme-primary)) 4%, transparent);} .preset-root .v4-specs{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--theme-motion-speed) var(--theme-motion-easing),opacity var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .v4-card:hover .v4-specs,.preset-root .v4-card:focus-within .v4-specs{max-height:60px;opacity:1;} .preset-root .v5-card{transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .v5-card:hover{transform:translateY(-2px);box-shadow:0 16px 40px -16px rgba(0,0,0,.25);} .preset-root .v6-card{border:1px solid transparent;transition:border-color var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .v6-card:hover{border-color:hsl(var(--theme-primary));} .preset-root .v6-card:hover .v6-img{filter:saturate(1.1);} .preset-root .v6-img{transition:filter var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .no-scrollbar::-webkit-scrollbar{display:none;} .preset-root .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;} .preset-root .theme-bar{backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);background:linear-gradient(180deg,color-mix(in srgb, hsl(var(--theme-bg)) 90%, transparent),color-mix(in srgb, hsl(var(--theme-card)) 74%, transparent));border-bottom:1px solid hsl(var(--theme-border));box-shadow:0 10px 34px -28px rgba(0,0,0,.55);} /* ============== comp5 — listing decoratives ============== */ .preset-root .dh-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;font-family:var(--theme-font-body);} .preset-root .dh-status.available{background:hsl(var(--status-available-bg));color:hsl(var(--status-available-fg));} .preset-root .dh-status.reserved{background:hsl(var(--status-reserved-bg));color:hsl(var(--status-reserved-fg));} .preset-root .dh-status.sold{background:hsl(var(--status-sold-bg));color:hsl(var(--status-sold-fg));} .preset-root .dh-status.coming{background:hsl(var(--status-coming-bg));color:hsl(var(--status-coming-fg));} .preset-root .dh-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} .preset-root .dh-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .preset-root .dh-img-fallback{position:relative;width:100%;height:100%;background:radial-gradient(120% 80% at 70% 0%, color-mix(in srgb, hsl(var(--theme-primary)) 22%, transparent) 0%, transparent 60%),linear-gradient(135deg, hsl(var(--theme-muted)) 0%, color-mix(in srgb, hsl(var(--theme-muted)) 70%, hsl(var(--theme-fg))) 100%);} .preset-root .dh-img-fallback::before{content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);background:url("data:image/svg+xml;utf8,") center/contain no-repeat;color:hsl(var(--theme-fg) / 0.18);opacity:0.55;pointer-events:none;} .preset-root .dh-img-fallback::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:overlay;opacity:0.5;pointer-events:none;} .preset-root .dh-scroll::-webkit-scrollbar{width:8px;height:8px;} .preset-root .dh-scroll::-webkit-scrollbar-thumb{background:hsl(var(--theme-border-strong));border-radius:999px;} .preset-root .dh-scroll::-webkit-scrollbar-track{background:transparent;} /* ============== comp6 — detail page CSS-only lightbox + theme-surface ============== */ .preset-root .theme-surface{min-height:100%;background:hsl(var(--theme-bg));color:hsl(var(--theme-fg));font-family:var(--theme-font-body);font-size:15px;line-height:1.55;} .preset-root .theme-surface *{box-sizing:border-box;} .preset-root .theme-surface h1,.preset-root .theme-surface h2,.preset-root .theme-surface h3,.preset-root .theme-surface h4{font-family:var(--theme-font-heading);letter-spacing:-.01em;margin:0;} .preset-root .lightbox-pane{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .lightbox-pane:target{opacity:1;pointer-events:auto;} .preset-root .lightbox-pane img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);} .preset-root .lightbox-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:20px;border:1px solid rgba(255,255,255,.16);} .preset-root .lightbox-counter{position:absolute;top:32px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.1em;} .preset-root .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:24px;border:1px solid rgba(255,255,255,.16);} .preset-root .lightbox-nav.prev{left:24px;} .preset-root .lightbox-nav.next{right:24px;} /* ============== comp3 — premium hero CTA glow + entrance fade ============== */ @keyframes preset-root-cta-spin{to{transform:rotate(360deg);}} @keyframes preset-root-hero-fade{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:translateY(0);}} .preset-root .hero-cta--glow{position:relative;} .preset-root .hero-cta--glow::before{content:"";position:absolute;inset:-3px;border-radius:999px;background:conic-gradient(from 0deg, hsl(var(--theme-primary)), transparent 35%, hsl(var(--theme-primary)) 70%, transparent);z-index:-1;opacity:0.55;filter:blur(4px);animation:preset-root-cta-spin 6s linear infinite;} .preset-root .hero-fade-in{animation:preset-root-hero-fade 700ms cubic-bezier(.2,.8,.2,1) both;} @media (prefers-reduced-motion: reduce){.preset-root .hero-fade-in{animation:none;}.preset-root .hero-cta--glow::before{animation:none;}} /* ============== comp5 — card hover variants + skeleton/drawer keyframes ============== */ @keyframes preset-root-shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}} @keyframes preset-root-slidein{from{transform:translateX(100%);}to{transform:translateX(0);}} .preset-root .dh-card-editorial{transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing),border-color var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-card-editorial:hover{transform:translateY(-4px);box-shadow:var(--theme-shadow-pop);border-color:hsl(var(--theme-primary) / 0.32);} .preset-root .dh-card-glass img{transition:transform var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-card-glass:hover img{transform:scale(1.04);} .preset-root .dh-card-row{transition:border-color var(--theme-motion-speed) var(--theme-motion-easing),background-color var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-card-row:hover{border-color:hsl(var(--theme-primary) / 0.24);background:color-mix(in srgb, hsl(var(--theme-card)) 94%, hsl(var(--theme-primary)) 6%);box-shadow:var(--theme-shadow-card);} .preset-root .dh-card-tech{transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-card-tech:hover{transform:translateY(-3px);box-shadow:var(--theme-shadow-pop);} .preset-root .dh-shimmer{position:relative;overflow:hidden;} .preset-root .dh-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsl(var(--theme-fg) / 0.06),transparent);animation:preset-root-shimmer 1.4s linear infinite;} .preset-root .dh-slidein{animation:preset-root-slidein 280ms var(--theme-motion-easing) forwards;} /* ============== ultra-premium editorial pass — opt-in utility classes ============== Variants opt into these by className — NOT applied automatically. They provide the magazine-grade signatures (eyebrow with hairline rule, issue marker with large numeral, vertical-rail list, ambient hover glow on "vitrine" cards, drop-cap headlines) that elevate any variant from "functional" to "signature premium". */ .preset-root .dh-eyebrow-rule{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--theme-font-heading);font-size:10.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:hsl(var(--theme-primary));white-space:nowrap;} .preset-root .dh-eyebrow-rule::before{content:"";display:inline-block;width:24px;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--theme-primary)));flex-shrink:0;} .preset-root .dh-eyebrow-rule.center{justify-content:center;} .preset-root .dh-eyebrow-rule.center::before{background:linear-gradient(90deg,transparent,hsl(var(--theme-primary)),transparent);width:36px;} .preset-root .dh-issue-marker{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--theme-font-heading);} .preset-root .dh-issue-marker .label{font-size:9.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));line-height:1;} .preset-root .dh-issue-marker .num{font-size:34px;font-weight:200;line-height:1;letter-spacing:-.04em;color:hsl(var(--theme-fg));font-variant-numeric:tabular-nums;} .preset-root .dh-issue-marker .num em{font-style:normal;color:hsl(var(--theme-primary));} .preset-root .dh-rail-list{position:relative;list-style:none;padding-left:1.5rem;margin:0;} .preset-root .dh-rail-list::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,hsl(var(--theme-primary) / .55),hsl(var(--theme-border)) 80%,transparent);} .preset-root .dh-rail-list > li{position:relative;padding:.55rem 0;font-size:13px;line-height:1.5;color:hsl(var(--theme-fg));} .preset-root .dh-rail-list > li::before{content:"";position:absolute;left:-1.5rem;top:1.05rem;width:14px;height:1px;background:hsl(var(--theme-primary) / .65);} .preset-root .dh-rail-list > li > strong{font-family:var(--theme-font-heading);font-weight:600;letter-spacing:-.005em;display:block;color:hsl(var(--theme-fg));font-size:13.5px;} .preset-root .dh-rail-list > li > span{display:block;color:hsl(var(--theme-muted-fg));font-size:12.5px;line-height:1.55;margin-top:2px;} .preset-root .dh-vitrine{position:relative;isolation:isolate;transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing),border-color var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-vitrine::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(80% 100% at 50% -10%,hsl(var(--theme-primary) / .22),transparent 70%);opacity:0;transition:opacity var(--theme-motion-speed) var(--theme-motion-easing);pointer-events:none;} .preset-root .dh-vitrine::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--theme-primary) / .55),transparent);opacity:0;transition:opacity var(--theme-motion-speed) var(--theme-motion-easing);pointer-events:none;} .preset-root .dh-vitrine:hover{transform:translateY(-2px);} .preset-root .dh-vitrine:hover::before,.preset-root .dh-vitrine:hover::after{opacity:1;} .preset-root .dh-headline-display{font-family:var(--theme-font-heading);font-weight:var(--theme-heading-weight);letter-spacing:-.022em;line-height:.96;text-wrap:balance;} .preset-root .dh-headline-display em{font-style:normal;color:hsl(var(--theme-primary));} .preset-root .dh-pad-tool{position:relative;background:linear-gradient(180deg,color-mix(in srgb,hsl(var(--theme-card)) 96%,transparent),color-mix(in srgb,hsl(var(--theme-muted)) 78%,transparent));border:1px solid hsl(var(--theme-border));border-radius:calc(var(--theme-radius) + 8px);box-shadow:inset 0 1px 0 hsl(var(--theme-fg) / .045),0 22px 60px -28px hsl(0 0% 0% / .55),var(--theme-shadow-card);} .preset-root .dh-pad-tool::before{content:"";position:absolute;inset:1px;border-radius:inherit;border:1px solid hsl(var(--theme-fg) / .04);pointer-events:none;} .preset-root .dh-asym-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;} @media (min-width:1024px){.preset-root .dh-asym-grid{grid-template-columns:0.78fr 1.22fr;align-items:start;}.preset-root .dh-asym-grid > :first-child{padding-top:1.25rem;}} .preset-root .dh-cta-primary-safe{background:hsl(var(--theme-primary));color:hsl(var(--theme-primary-fg));border:1px solid hsl(var(--theme-primary));} .preset-root .dh-cta-primary-safe:hover{filter:brightness(1.06);} /* Cover-grade typography: the masthead rule above + below a centred title */ .preset-root .dh-masthead{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;padding:1rem 0;font-family:var(--theme-font-heading);font-size:10.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));} .preset-root .dh-masthead .center{justify-self:center;color:hsl(var(--theme-fg));font-weight:700;letter-spacing:.42em;font-size:11.5px;} .preset-root .dh-masthead::before,.preset-root .dh-masthead::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,hsl(var(--theme-border)) 12%,hsl(var(--theme-border)) 88%,transparent 100%);} .preset-root .dh-masthead::before{top:0;} .preset-root .dh-masthead::after{bottom:0;} @media (max-width:720px){.preset-root .dh-masthead{grid-template-columns:1fr auto;gap:.5rem;font-size:9.5px;letter-spacing:.24em;}.preset-root .dh-masthead .center{display:none;}} /* Drop-cap quote — first letter of a paragraph rises into a serif initial */ .preset-root .dh-quote-cap > p:first-child::first-letter{font-family:var(--theme-font-heading);font-size:5.4em;line-height:.82;float:left;padding:.05em .14em 0 0;color:hsl(var(--theme-primary));font-weight:300;letter-spacing:-.02em;} /* Slow horizontal marquee for cover-strip data row */ @keyframes preset-root-soft-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} .preset-root .dh-marquee-soft{display:flex;width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .preset-root .dh-marquee-soft > .track{display:inline-flex;flex:0 0 auto;gap:3.5rem;padding-right:3.5rem;white-space:nowrap;animation:preset-root-soft-marquee 50s linear infinite;} .preset-root .dh-marquee-soft .item{font-family:var(--theme-font-heading);font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));} .preset-root .dh-marquee-soft .item .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:hsl(var(--theme-primary));margin:0 1.5rem;vertical-align:middle;} @media (prefers-reduced-motion: reduce){.preset-root .dh-marquee-soft > .track{animation:none;}} /* Spec band — horizontal data row with hairline separators */ .preset-root .dh-spec-band{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;border-top:1px solid hsl(var(--theme-border));border-bottom:1px solid hsl(var(--theme-border));padding:1.25rem 0;} .preset-root .dh-spec-band > .cell{position:relative;padding:0 1rem;text-align:center;} .preset-root .dh-spec-band > .cell + .cell::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:hsl(var(--theme-border));} .preset-root .dh-spec-band .num{font-family:var(--theme-font-heading);font-size:1.65rem;font-weight:300;line-height:1;letter-spacing:-.02em;color:hsl(var(--theme-fg));font-variant-numeric:tabular-nums;display:block;} .preset-root .dh-spec-band .num em{font-style:normal;color:hsl(var(--theme-primary));} .preset-root .dh-spec-band .lab{display:block;margin-top:.45rem;font-family:var(--theme-font-heading);font-size:9.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));} @media (max-width:720px){.preset-root .dh-spec-band{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,1fr);gap:1rem 0;padding:1rem 0;}.preset-root .dh-spec-band > .cell + .cell::before{display:none;}.preset-root .dh-spec-band .num{font-size:1.35rem;}} /* Form luxury — hairline underline inputs, no boxes */ .preset-root .dh-form-luxury{display:grid;gap:1.5rem;} .preset-root .dh-form-luxury .field{position:relative;} .preset-root .dh-form-luxury label{display:block;font-family:var(--theme-font-heading);font-size:9.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));margin-bottom:.55rem;} .preset-root .dh-form-luxury input,.preset-root .dh-form-luxury textarea{width:100%;background:transparent;border:0;border-bottom:1px solid hsl(var(--theme-border));padding:.65rem 0;font-family:var(--theme-font-body);font-size:14.5px;color:hsl(var(--theme-fg));outline:none;transition:border-color var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-form-luxury input::placeholder,.preset-root .dh-form-luxury textarea::placeholder{color:hsl(var(--theme-muted-fg) / .55);} .preset-root .dh-form-luxury input:focus,.preset-root .dh-form-luxury textarea:focus{border-color:hsl(var(--theme-primary));} .preset-root .dh-form-luxury textarea{resize:none;min-height:96px;} /* Editorial caption — tiny serif italic for image credits / cover lines */ .preset-root .dh-caption{font-family:var(--theme-font-heading);font-style:italic;font-size:11.5px;letter-spacing:.04em;color:hsl(var(--theme-muted-fg));line-height:1.5;} .preset-root .dh-caption::before{content:"— ";color:hsl(var(--theme-primary));} /* Foil stamp — used for primary words in dark-luxury "Salon" variants. Gives display text a subtle metallic sheen without resorting to gradients-on-text (which fail on Cyrillic in some browsers). */ .preset-root .dh-foil-stamp{position:relative;color:hsl(var(--theme-primary));text-shadow:0 1px 0 hsl(var(--theme-primary) / .6),0 0 28px hsl(var(--theme-primary) / .25);} .preset-root .dh-foil-stamp em{font-style:italic;letter-spacing:0;} /* Vellum — soft paper-texture overlay for boutique-light surfaces. */ .preset-root .dh-vellum{position:relative;} .preset-root .dh-vellum::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:overlay;opacity:.18;} /* Monogram — calligraphic flourish before/after key text */ .preset-root .dh-monogram{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--theme-font-heading);font-size:9.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));} .preset-root .dh-monogram::before,.preset-root .dh-monogram::after{content:"";display:inline-block;width:24px;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--theme-primary) / .6),transparent);} /* Double rule — paired hairlines for masthead-style separators */ .preset-root .dh-rule-double{position:relative;height:5px;} .preset-root .dh-rule-double::before,.preset-root .dh-rule-double::after{content:"";position:absolute;left:0;right:0;height:1px;background:hsl(var(--theme-border));} .preset-root .dh-rule-double::before{top:0;} .preset-root .dh-rule-double::after{top:4px;background:hsl(var(--theme-primary) / .55);} /* Frame box — thin double-border frame used for image plates in salon */ .preset-root .dh-frame-box{position:relative;} .preset-root .dh-frame-box::after{content:"";position:absolute;inset:6px;border:1px solid hsl(var(--theme-primary) / .35);pointer-events:none;} /* ============== modern premium "Aperture Studio" utilities ============== */ /* Glass panel — frosted floating card with thin accent rule on top. Used by hero.aperture / card.aperture overlays. Picks up the theme's primary as the rule color so directions tint it. */ .preset-root .dh-glass-panel{position:relative;background:color-mix(in srgb, hsl(var(--theme-card)) 72%, transparent);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);border:1px solid hsl(var(--theme-fg) / .14);border-radius:calc(var(--theme-radius) + 2px);box-shadow:0 22px 50px -28px hsl(0 0% 0% / .55), inset 0 1px 0 hsl(var(--theme-fg) / .06);} .preset-root .dh-glass-panel::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--theme-primary)),transparent);} /* Gradient mesh — subtle multi-radial backdrop for modern surfaces. Two soft primary-tinted blobs + a deep base, layered. Cheap to render and reads as "atmosphere" without committing to imagery. */ .preset-root .dh-mesh-bg{position:relative;background:radial-gradient(60% 50% at 18% 12%, hsl(var(--theme-primary) / .14) 0%, transparent 65%),radial-gradient(50% 60% at 88% 78%, hsl(var(--theme-primary) / .10) 0%, transparent 60%),radial-gradient(120% 80% at 50% 110%, hsl(var(--theme-fg) / .04) 0%, transparent 70%),hsl(var(--theme-bg));} /* Precision rule — pixel-perfect hairline with a tiny accent dot inside, used to break editorial blocks in modern compositions. */ .preset-root .dh-precision-rule{position:relative;height:1px;background:hsl(var(--theme-border));margin:1.25rem 0;} .preset-root .dh-precision-rule::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:hsl(var(--theme-primary));box-shadow:0 0 0 4px hsl(var(--theme-bg));} /* Tabular spec micro — modern data row with monospaced numbers. Pairs well with the glass panel for floating data overlays. */ .preset-root .dh-data-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.75rem;font-family:var(--theme-font-body);} .preset-root .dh-data-row > .item{display:inline-flex;align-items:baseline;gap:.4rem;} .preset-root .dh-data-row > .item > .lab{font-family:var(--theme-font-heading);font-size:9.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:hsl(var(--theme-muted-fg));} .preset-root .dh-data-row > .item > .val{font-family:var(--theme-font-mono, ui-monospace, "SF Mono", Menlo, monospace);font-size:13px;font-weight:600;color:hsl(var(--theme-fg));font-variant-numeric:tabular-nums;letter-spacing:-.005em;} /* Kinetic underline — animated underline that draws on hover, used as a deliberate "modern" affordance for inline links / chips. */ .preset-root .dh-kinetic-link{position:relative;display:inline-flex;align-items:center;gap:.4rem;color:hsl(var(--theme-fg));text-decoration:none;font-weight:600;} .preset-root .dh-kinetic-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:hsl(var(--theme-primary));transform:scaleX(0);transform-origin:left center;transition:transform var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .dh-kinetic-link:hover::after,.preset-root .dh-kinetic-link:focus-visible::after{transform:scaleX(1);} /* Tilt — subtle 3D lean on hover for modern image cards */ .preset-root .dh-tilt{transition:transform var(--theme-motion-speed) var(--theme-motion-easing),box-shadow var(--theme-motion-speed) var(--theme-motion-easing);transform-style:preserve-3d;} .preset-root .dh-tilt:hover{transform:translateY(-3px) rotateX(1.5deg) rotateY(-1.5deg);box-shadow:0 36px 72px -28px hsl(0 0% 0% / .42);} @media (prefers-reduced-motion: reduce){.preset-root .dh-tilt:hover{transform:none;}} /* ============== final premium pass - responsive composition guards ============== */ .preset-root .preset-nav-link{position:relative;text-decoration:none;transition:color var(--theme-motion-speed) var(--theme-motion-easing),background-color var(--theme-motion-speed) var(--theme-motion-easing),transform var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .preset-nav-link:hover{background:color-mix(in srgb, hsl(var(--theme-primary)) 9%, transparent);color:hsl(var(--theme-primary))!important;transform:translateY(-1px);} .preset-root .preset-icon-button{transition:transform var(--theme-motion-speed) var(--theme-motion-easing),border-color var(--theme-motion-speed) var(--theme-motion-easing),background-color var(--theme-motion-speed) var(--theme-motion-easing);} .preset-root .preset-icon-button:hover{transform:translateY(-1px);border-color:hsl(var(--theme-primary) / .42)!important;background:color-mix(in srgb, hsl(var(--theme-primary)) 8%, transparent)!important;} .preset-root .preset-thumb-strip{grid-template-columns:repeat(8,minmax(0,1fr));} .preset-root .preset-matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} .preset-root .preset-matrix-mobile{display:none;} .preset-root :where(a,button,summary,input,select,textarea){touch-action:manipulation;} .preset-root :where(a,button,summary){-webkit-tap-highlight-color:transparent;} .preset-root .theme-bar details[open] > div{max-width:calc(100vw - 32px);} @media (max-width:1100px){ .preset-root .preset-listing-layout,.preset-root .preset-compare-layout,.preset-root .preset-detail-layout,.preset-root .preset-detail-two{grid-template-columns:1fr!important;} .preset-root .preset-feature-card{grid-template-columns:1fr!important;} .preset-root .preset-sticky-panel{position:static!important;top:auto!important;max-height:none!important;} .preset-root .preset-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .preset-root .preset-stat-row,.preset-root .preset-detail-three{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .preset-root .preset-gallery-split{grid-template-columns:1fr!important;height:auto!important;} .preset-root .preset-gallery-split > :last-child{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto!important;} .preset-root .preset-compare-gallery{height:auto!important;grid-template-rows:auto!important;} .preset-root .preset-compare-gallery > *{min-height:180px;} .preset-root .preset-compare-drawer-grid{grid-template-columns:1fr!important;} } @media (max-width:720px){ .preset-root :where(h1){font-size:2.4rem!important;line-height:1.04!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere;text-wrap:balance;} .preset-root :where(h2,h3,.font-heading){letter-spacing:0!important;} .preset-root .hero-fade-in{animation-duration:480ms;} .preset-root .hero-cta--glow::before{display:none;} .preset-root .theme-bar > div{gap:10px!important;padding-top:10px!important;padding-bottom:10px!important;} .preset-root .theme-bar summary{display:flex;min-height:44px;align-items:center;} .preset-root .theme-bar .preset-nav-link{display:flex;min-height:44px;align-items:center;} .preset-root .theme-bar details[open] > div{right:0;width:min(17rem, calc(100vw - 32px))!important;} .preset-root .w-\[320px\]{width:min(82vw,320px)!important;} .preset-root .min-h-\[460px\]{min-height:320px!important;} .preset-root .min-h-\[222px\]{min-height:170px!important;} .preset-root .h-\[500px\]{height:360px!important;} .preset-root .diag-hero{min-height:auto!important;} .preset-root .preset-listing-shell,.preset-root .preset-detail-shell{padding-left:16px!important;padding-right:16px!important;} .preset-root .preset-filter-grid,.preset-root .preset-stat-grid,.preset-root .preset-stat-row,.preset-root .preset-detail-three,.preset-root .preset-cta-grid{grid-template-columns:1fr!important;} .preset-root .preset-feature-list{grid-template-columns:1fr!important;} .preset-root .preset-thumb-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important;} .preset-root .preset-card-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:8px!important;} .preset-root .v3-row{grid-template-columns:1fr!important;} .preset-root .v3-row > :last-child{align-items:flex-start!important;border-left:0!important;border-top:1px solid hsl(var(--theme-border));} .preset-root .v3-row h3,.preset-root .v3-row p{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;} .preset-root .v4-specs{max-height:96px!important;opacity:1!important;} .preset-root .v6-card{aspect-ratio:auto!important;min-height:0!important;} .preset-root .v6-card > div:first-child{flex-basis:230px!important;} .preset-root .preset-gallery-wide{aspect-ratio:4/3!important;} .preset-root .preset-gallery-mosaic{grid-template-columns:1fr!important;height:auto!important;} .preset-root .preset-gallery-mosaic > *{grid-column:auto!important;grid-row:auto!important;min-height:170px;} .preset-root .preset-gallery-mosaic > :first-child{min-height:260px;} .preset-root .preset-gallery-split > :first-child{aspect-ratio:4/3;} .preset-root .preset-detail-cinematic-hero{min-height:560px!important;} .preset-root .preset-detail-hero-price{font-size:2.5rem!important;letter-spacing:0!important;} .preset-root .preset-editorial-gallery{grid-template-columns:1fr!important;grid-template-rows:auto!important;} .preset-root .preset-editorial-gallery > *{grid-column:auto!important;grid-row:auto!important;min-height:220px;} .preset-root .preset-bar-row{grid-template-columns:1fr!important;gap:8px!important;} .preset-root .preset-matrix-desktop{display:none!important;} .preset-root .preset-matrix-mobile{display:grid!important;} .preset-root .preset-matrix-scroll{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;} .preset-root .preset-matrix-scroll > *{min-width:720px;} .preset-root .lightbox-close{top:16px;right:16px;width:42px;height:42px;} .preset-root .lightbox-nav{display:none;} } @media (max-width:480px){ .preset-root :where(h1){font-size:2.05rem!important;line-height:1.06!important;} .preset-root .min-h-\[460px\]{min-height:280px!important;} .preset-root .min-h-\[222px\]{min-height:150px!important;} .preset-root .h-\[500px\]{height:320px!important;} .preset-root .preset-thumb-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .preset-root .preset-detail-cinematic-hero{min-height:520px!important;} .preset-root .preset-detail-hero-price{font-size:2.15rem!important;} .preset-root .preset-gallery-mosaic > :first-child{min-height:220px;} .preset-root .preset-matrix-scroll > *{min-width:640px;} }

Брз одговор за возило, замена или лизинг.

Испрати прашање