@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* === styles.bundle.css === */ /* Bundled+minified CSS - rebuild: node build.js */ :root{--color-brand:#2b59d1;--color-brand-hover:#2349b0;--color-heading:#000000;--color-text:#242424;--color-body:#4e4d4d;--color-muted:#797776;--color-border:#cecac8;--color-surface:#ffffff;--color-card-accent:#cfdaf5;--color-slate-900:#242424;--catalog-bg:#f6f3f1;--radius-ui:16px;--radius-card:16px;--radius-pill:9999px;--shadow-ui:0 0 10px rgba(0,0,0,0.1);--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-slogan:"Onest",var(--font-sans);--glass-blur:blur(12px) saturate(120%);--glass-blur-nav:blur(32px) saturate(200%);--glass-border:var(--color-border);--glass-border-soft:var(--color-border);--glass-border-nav:rgba(255,255,255,0.72);--glass-bg-nav:rgba(255,255,255,0.76);--glass-panel-fill:linear-gradient( 180deg,rgba(255,255,255,0.86) 0%,rgba(255,255,255,0.74) 55%,rgba(255,255,255,0.64) 100% );--glass-panel-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 2px 8px rgba(15,23,42,0.06),0 8px 24px rgba(15,23,42,0.12);--glass-panel-shadow-hover:inset 0 1px 0 rgba(255,255,255,0.75),0 4px 16px rgba(15,23,42,0.1),0 10px 28px rgba(15,23,42,0.14);--glass-bg-panel:var(--color-surface);--glass-bg-control:var(--color-surface);--glass-bg-card:var(--color-surface);--glass-bg-card-dark:#faf8f6;--glass-bg-pill:var(--color-surface);--glass-bg-pill-dark:#faf8f6;--glass-text:var(--color-text);--glass-text-muted:var(--color-muted);--glass-text-bright:var(--color-heading);--glass-placeholder:var(--color-muted);--glass-hover-bg:rgba(43,89,209,0.08);--glass-hover-border:rgba(43,89,209,0.35);--glass-active-border:var(--color-brand);--glass-shadow:var(--shadow-ui);--glass-shadow-sm:var(--shadow-ui);--glass-shadow-card:var(--shadow-ui);--glass-transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;}html,body.catalog-page{overflow-x:hidden;max-width:100%;}.catalog-page{--site-header-crop:12px;--site-header-pad-y:12.1px;--site-header-logo-h:66.55px;--site-header-offset:calc(87.12px - var(--site-header-crop));--hero-slide-height:clamp(506px,68.2vh,704px);--hero-height:clamp(398.1px,53.65vh,553.8px);--hero-img-width:94.38vw;--hero-img-pos:center;--sort-field-width:calc(20.25rem + 2ch);--sort-field-width-mobile:calc(17.1rem + 2ch);padding-top:0;font-family:var(--font-sans);background-color:var(--catalog-bg);color:var(--color-body);line-height:1.5;-webkit-font-smoothing:antialiased;}.glass-blur{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);}.glass-card{background:var(--glass-bg-card);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-sm);border-radius:var(--radius-card);}.glass-card--dark{background:var(--glass-bg-card-dark);border:1px solid var(--glass-border-soft);box-shadow:var(--glass-shadow-card);border-radius:var(--radius-card);}.glass-interactive{background:var(--glass-bg-control);border:1px solid var(--glass-border);color:var(--glass-text);border-radius:var(--radius-ui);transition:var(--glass-transition);}.glass-interactive:hover,.glass-interactive.is-active{background:var(--glass-hover-bg);border-color:var(--glass-hover-border);color:var(--color-brand);box-shadow:var(--glass-shadow-sm);}.glass-interactive.is-active{border-color:var(--glass-active-border);}[data-tooltip]{position:relative;}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--color-heading);color:var(--catalog-bg);font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.15s ease,transform 0.15s ease;z-index:100;line-height:1.4;}[data-tooltip]::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--color-heading);pointer-events:none;opacity:0;transition:opacity 0.15s ease;z-index:100;}[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1;}.filter-panel{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height 0.35s ease,margin-top 0.35s ease,opacity 0.25s ease;}.filter-panel.open{max-height:800px;opacity:1;margin-top:14px;overflow:visible;}.filter-pill,.year-tag{display:inline-flex;align-items:center;padding:0.375rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);font-size:0.875rem;font-weight:500;color:var(--color-body);cursor:pointer;line-height:1.35;}.year-tag{padding:0.2rem 0.75rem;}.filter-pill{margin:0;}.filter-pill.active,.year-tag.active,.filter-toggle-btn.active{background-color:var(--color-brand);color:#fff;border-color:var(--color-brand);box-shadow:var(--shadow-ui);}.filter-pill.disabled,.year-tag.disabled{opacity:0.35;cursor:default;pointer-events:none;}.color-pill.active{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(43,89,209,0.25);transform:scale(1.08);}.color-pill.disabled{opacity:0.2;cursor:default;pointer-events:none;}#catalog .col-span-full{grid-column:1 / -1;text-align:center;padding:2.5rem 1rem;color:var(--glass-text-muted);}@keyframes spin{to{transform:rotate(360deg);}}.spinner-sm{animation:spin 0.8s linear infinite;}@media (max-width:768px){.catalog-page{--site-header-pad-y:9.9px;--site-header-logo-h:58.07px;--site-header-offset:calc(120px - var(--site-header-crop));--hero-slide-height:clamp(352px,57.2vh,528px);--hero-height:clamp(277px,45vh,415.3px);--hero-img-width:100%;}}.font-sans{font-family:var(--font-sans,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);}.leading-normal{line-height:1.5;}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.flex{display:flex;}.inline-flex{display:inline-flex;}.grid{display:grid;}.hidden{display:none;}.block{display:block;}.shrink-0{flex-shrink:0;}.flex-1{flex:1 1 0%;}.flex-wrap{flex-wrap:wrap;}.items-start{align-items:flex-start;}.items-center{align-items:center;}.justify-center{justify-content:center;}.justify-end{justify-content:flex-end;}.gap-1\.5{gap:0.375rem;}.gap-2{gap:0.5rem;}.gap-5{gap:1.25rem;}.gap-x-5{column-gap:1.25rem;}.gap-y-2\.5{row-gap:0.625rem;}.mb-1{margin-bottom:0.25rem;}.my-2\.5{margin-top:0.625rem;margin-bottom:0.625rem;}.mt-1\.5{margin-top:0.375rem;}.mt-2\.5{margin-top:0.625rem;}.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}.-mt-0\.5{margin-top:-0.125rem;}.min-w-0{min-width:0;}.min-h-\[1\.2em\]{min-height:1.2em;}.whitespace-nowrap{white-space:nowrap;}.w-full{width:100%;}.h-full{height:100%;}.w-7{width:1.75rem;}.h-7{height:1.75rem;}.w-8{width:2rem;}.h-8{height:2rem;}.h-\[180px\]{height:180px;}.max-w-\[1200px\]{max-width:1200px;}.max-w-\[960px\]{max-width:960px;}.max-h-\[92vh\]{max-height:92vh;}.mx-auto{margin-left:auto;margin-right:auto;}.px-5{padding-left:1.25rem;padding-right:1.25rem;}.px-6{padding-left:1.5rem;padding-right:1.5rem;}.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}.pb-2{padding-bottom:0.5rem;}.pb-7{padding-bottom:1.75rem;}.pb-8{padding-bottom:2rem;}.pt-4{padding-top:1rem;}.p-3{padding:0.75rem;}.p-5{padding:1.25rem;}.pl-1{padding-left:0.25rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-\[1\.8rem\]{font-size:1.8rem;}.opacity-55{opacity:0.55;}.bg-canvas{background-color:#f0f0e6;}.bg-white{background-color:#fff;}.bg-slate-50{background-color:#f8fafc;}.text-slate-800{color:#1e293b;}.bg-slate-900\/80{background-color:rgba(15,23,42,0.8);}.rounded-\[10px\]{border-radius:10px;}.rounded-full{border-radius:9999px;}.border-\[3px\]{border-width:3px;}.border-slate-200{border-color:#e2e8f0;}.border-t-brand{border-top-color:var(--color-brand,#2b59d1);}.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}.inset-0{inset:0;}.top-0{top:0;}.left-4{left:1rem;}.right-4{right:1rem;}.bottom-4{bottom:1rem;}.top-1\/2{top:50%;}.left-1\/2{left:50%;}.-translate-y-1\/2{transform:translateY(-50%);}.-translate-x-1\/2{transform:translateX(-50%);}.z-\[5\]{z-index:5;}.z-\[6\]{z-index:6;}.z-30{z-index:30;}.z-\[1000\]{z-index:1000;}.overflow-hidden{overflow:hidden;}.overflow-y-auto{overflow-y:auto;}.overflow-x-hidden{overflow-x:hidden;}.pointer-events-none{pointer-events:none;}.pointer-events-auto{pointer-events:auto;}.cursor-pointer{cursor:pointer;}.cursor-grab{cursor:grab;}.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);}.transition-opacity{transition:opacity 0.2s ease;}.transition-transform{transition:transform 0.25s ease;}.duration-250{transition-duration:250ms;}.ease-out{transition-timing-function:cubic-bezier(0,0,0.2,1);}.object-cover{object-fit:cover;}.grid-cols-\[repeat\(auto-fill\,minmax\(260px\,1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}.col-span-full{grid-column:1 / -1;}@media (max-width:640px){.max-sm\:flex-col{flex-direction:column;}.max-sm\:grid-cols-1{grid-template-columns:1fr;}.max-sm\:left-2{left:0.5rem;}.max-sm\:right-2{right:0.5rem;}}.site-top-nav{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;box-sizing:border-box;min-height:calc(var(--site-header-logo-h) + var(--site-header-pad-y) * 2);padding:var(--site-header-pad-y) clamp(16px,3vw,32px);background:transparent;isolation:isolate;overflow:hidden;}.site-top-nav__bg{position:absolute;top:0;left:50%;width:var(--hero-img-width);max-width:100%;height:100%;transform:translateX(-50%);background-repeat:no-repeat;background-size:100% auto;background-position:center top;pointer-events:none;z-index:0;transition:opacity 0.35s ease;}.site-top-nav__glass{position:absolute;inset:0;z-index:1;background:var(--glass-panel-fill);backdrop-filter:var(--glass-blur-nav);-webkit-backdrop-filter:var(--glass-blur-nav);border-bottom:none;box-shadow:var(--glass-panel-shadow);pointer-events:none;}.site-top-nav .site-logo,.site-top-nav .site-nav,.site-top-nav .site-phone-block,.site-top-nav .site-phone,.site-top-nav .site-phone-hours{position:relative;z-index:2;}.site-top-nav .site-nav-burger{z-index:12;}.site-logo{display:flex;align-items:center;flex-shrink:0;opacity:0.95;transition:opacity 0.25s ease,transform 0.25s ease,filter 0.25s ease;}.site-logo:hover,.site-logo.is-idle-wink{opacity:1;transform:scale(1.03);filter:drop-shadow(0 2px 8px rgba(15,23,42,0.18));}.site-logo img{display:block;height:var(--site-header-logo-h);width:auto;max-width:min(283.14px,43.56vw);object-fit:contain;}.site-nav{display:flex;align-items:center;justify-content:center;flex:1;gap:14px;flex-wrap:wrap;}.site-nav-link{display:inline-block;padding:8px 16px;border-radius:var(--radius-pill);color:var(--glass-text);font-size:0.84rem;font-weight:500;text-decoration:none;letter-spacing:0.01em;cursor:pointer;background:var(--catalog-bg);border:1px solid var(--color-border);box-shadow:var(--glass-shadow-sm);transition:var(--glass-transition),transform 0.22s ease;}.site-nav-link:hover,.site-nav-link:focus-visible,.site-nav-link.is-idle-wink{color:var(--color-brand);background:var(--glass-bg-card-dark);border-color:var(--color-brand);transform:translateY(-2px);box-shadow:var(--glass-shadow-sm);outline:none;}.site-phone-block{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:1px;}.site-phone-hours{font-size:0.68rem;font-weight:500;line-height:1.2;color:var(--glass-text-muted);white-space:nowrap;padding:0 12px;}.site-phone{flex-shrink:0;color:var(--color-heading);font-size:clamp(0.902rem,1.76vw,1.1rem);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;padding:8px 12px 2px;border-radius:var(--radius-pill);border:1px solid transparent;transition:background 0.22s ease,transform 0.22s ease,box-shadow 0.22s ease;}.site-phone:hover,.site-phone:focus-visible,.site-phone.is-idle-wink{background:var(--glass-hover-bg);color:var(--color-brand);transform:translateY(-1px);box-shadow:var(--glass-shadow-sm);outline:none;}.site-header-right{display:contents;}.site-nav-burger{display:none;}@media (min-width:769px){.site-top-nav{--site-header-pad-y:calc((var(--site-header-offset) - var(--site-header-logo-h)) / 2);height:var(--site-header-offset);min-height:var(--site-header-offset);max-height:var(--site-header-offset);padding-block:var(--site-header-pad-y);}.site-nav{flex-wrap:nowrap;}.site-nav-link{line-height:1.2;}.site-phone-block{gap:0;}.site-phone{padding:4px 12px 0;}.site-phone-hours{line-height:1.1;padding:0 12px 1px;}}@media (max-width:768px){.site-top-nav{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;row-gap:2px;min-height:0;padding:6px 12px 8px;position:relative;}.site-top-nav__bg{left:0;width:100%;transform:none;background-size:cover;background-position:center top;}.site-logo{order:1;flex:0 0 auto;width:auto;max-width:calc(100% - 5.5rem);min-width:0;justify-content:center;align-self:center;padding:0;box-sizing:border-box;}.site-logo img{height:var(--site-header-logo-h);max-width:220.22px;}.site-header-right{display:contents;}.site-phone-block{display:contents;}.site-phone{order:2;margin:0;font-size:1.235rem;padding:2px 8px 0;text-align:center;}.site-phone-hours{order:3;font-size:0.68rem;padding:0 8px 2px;text-align:center;}.site-top-nav .site-nav-burger{display:inline-flex;position:absolute;top:8px;right:12px;margin:0;order:unset;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:2.375rem;height:2.375rem;padding:0;border:1px solid var(--glass-border);border-radius:10px;background:rgba(255,255,255,0.66);backdrop-filter:var(--glass-blur-nav);-webkit-backdrop-filter:var(--glass-blur-nav);border-color:var(--glass-border-nav);color:var(--glass-text-bright);cursor:pointer;flex-shrink:0;transition:var(--glass-transition);}.site-nav-burger:hover,.site-nav-burger:focus-visible{background:var(--glass-hover-bg);border-color:var(--glass-hover-border);outline:none;}.site-nav-burger__bar{display:block;width:1.125rem;height:2px;border-radius:1px;background:currentColor;transition:transform 0.22s ease,opacity 0.22s ease;}.site-top-nav.is-nav-open .site-nav-burger__bar:nth-child(1){transform:translateY(6px) rotate(45deg);}.site-top-nav.is-nav-open .site-nav-burger__bar:nth-child(2){opacity:0;}.site-top-nav.is-nav-open .site-nav-burger__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}.site-nav{order:10;display:none;position:absolute;top:100%;left:0;right:0;flex:none;width:100%;box-sizing:border-box !important;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:8px 12px 12px;background:rgba(255,255,255,0.74);backdrop-filter:var(--glass-blur-nav);-webkit-backdrop-filter:var(--glass-blur-nav);border-bottom:1px solid var(--glass-border-nav);box-shadow:0 8px 24px rgba(15,23,42,0.05);overflow:visible;z-index:11;}.site-top-nav.is-nav-open .site-nav{display:flex;}.site-nav-link{flex-shrink:unset;font-size:0.875rem;padding:10px 12px;white-space:normal;text-align:left;border-radius:8px;}.site-nav-link:hover,.site-nav-link:focus-visible{transform:none;}}.catalog-hero{position:relative;min-height:var(--hero-height);padding:calc(var(--site-header-offset) + 24px) clamp(16px,3vw,32px) 14px;overflow:hidden;display:flex;align-items:flex-end;}.catalog-hero-slides{position:absolute;top:0;left:0;right:0;height:var(--hero-slide-height);bottom:auto;z-index:0;background:var(--catalog-bg);overflow:hidden;pointer-events:none;}.catalog-hero-shade{display:none;}.catalog-hero-slide{position:absolute;top:0;bottom:0;left:50%;width:var(--hero-img-width);max-width:100%;background-size:100% auto;background-position:center var(--hero-img-pos);background-repeat:no-repeat;border-radius:0;opacity:0;transition:opacity 2s ease-in-out;transform:translateX(-50%);transform-origin:center center;}.catalog-hero-slide.is-active{opacity:1;transform:translateX(-50%);transition:opacity 2s ease-in-out;}.catalog-hero-slogan{position:fixed;z-index:2;top:calc(var(--site-header-offset) + 12px);left:0;right:0;padding:0 clamp(16px,3vw,32px);text-align:center;pointer-events:none;transition:opacity 0.25s ease;}.catalog-hero-slogan.is-slogan-hidden{opacity:0;pointer-events:none;}.catalog-hero-slogan__title,.catalog-hero-slogan__subtitle{position:relative;display:block;margin:0;font-family:var(--font-slogan);pointer-events:none;user-select:none;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.85),0 2px 10px rgba(0,0,0,0.65);}.catalog-hero-slogan__title{font-size:clamp(1.35rem,2.8vw,2.5rem);font-weight:700;line-height:1.1;letter-spacing:0.02em;}.catalog-hero-slogan__subtitle{margin-top:0.5rem;font-size:clamp(0.875rem,1.45vw,1.125rem);font-weight:500;line-height:1.35;letter-spacing:0.06em;}.catalog-hero:has(.catalog-hero-inner.is-search-expanded) .catalog-hero-slogan{opacity:0;transform:translateY(-8px);}.catalog-hero-inner{position:relative;z-index:2;width:100%;max-width:none;margin:0 0 15px;display:flex;justify-content:center;align-items:flex-end;}.catalog-hero-inner.is-search-expanded{justify-content:center;align-items:flex-end;}@media (max-width:768px){.catalog-page{--hero-img-width:100%;--hero-img-pos:center;}.catalog-hero-slogan{position:relative;top:auto;bottom:auto;grid-column:1;grid-row:1;align-self:end;justify-self:stretch;margin:0;padding:0 0 12px;transform:none;}.catalog-hero:has(.catalog-hero-inner.is-search-expanded) .catalog-hero-slogan{transform:translateY(-8px);}.catalog-hero-slogan__title{font-size:clamp(1.05rem,4.8vw,1.45rem);}.catalog-hero-slogan__subtitle{margin-top:0.35rem;font-size:clamp(0.75rem,3.2vw,0.9rem);}.catalog-hero-slides{top:0;height:var(--hero-slide-height);}.catalog-hero{box-sizing:border-box;min-height:var(--hero-height);padding:0 12px 10px;display:grid;grid-template-rows:1fr auto;align-items:stretch;justify-content:center;}.catalog-hero-inner,.catalog-hero-inner.is-search-expanded{grid-column:1;grid-row:2;justify-content:center;align-items:flex-end;width:100%;max-width:100%;box-sizing:border-box;}.catalog-hero-slide,.catalog-hero-slide.is-active{width:var(--hero-img-width);background-size:cover;background-position:center var(--hero-img-pos);transform:translateX(-50%) translateY(-20%);-webkit-mask-image:none;mask-image:none;}}@media (min-width:769px){@keyframes catalog-enter-from-top{from{opacity:0;transform:translateY(-28px);}to{opacity:1;transform:translateY(0);}}@keyframes catalog-exit-to-top{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-28px);}}@keyframes catalog-enter-from-right{from{opacity:0;transform:translateX(56px);}to{opacity:1;transform:translateX(0);}}@keyframes catalog-exit-to-right{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(56px);}}@keyframes catalog-enter-from-left{from{opacity:0;transform:translateX(-56px);}to{opacity:1;transform:translateX(0);}}@keyframes catalog-exit-to-left{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(-56px);}}@keyframes catalog-enter-from-bottom{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}@keyframes catalog-exit-to-bottom{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(40px);}}.catalog-page.is-hero-intro-enter .site-nav{animation:catalog-enter-from-top 0.7s cubic-bezier(0.22,1,0.36,1) both;animation-delay:0.08s;}.catalog-page.is-hero-intro-exit .site-nav{animation:catalog-exit-to-top 0.55s cubic-bezier(0.4,0,0.2,1) both;animation-delay:0.24s;}.catalog-page.is-hero-intro-enter .catalog-hero-slogan__title{animation:catalog-enter-from-right 0.8s cubic-bezier(0.22,1,0.36,1) both;animation-delay:0.18s;}.catalog-page.is-hero-intro-exit .catalog-hero-slogan__title{animation:catalog-exit-to-right 0.55s cubic-bezier(0.4,0,0.2,1) both;animation-delay:0.16s;}.catalog-page.is-hero-intro-enter .catalog-hero-slogan__subtitle{animation:catalog-enter-from-left 0.8s cubic-bezier(0.22,1,0.36,1) both;animation-delay:0.32s;}.catalog-page.is-hero-intro-exit .catalog-hero-slogan__subtitle{animation:catalog-exit-to-left 0.55s cubic-bezier(0.4,0,0.2,1) both;animation-delay:0.08s;}.catalog-page.is-hero-intro-enter .catalog-search-glass{animation:catalog-enter-from-bottom 0.85s cubic-bezier(0.22,1,0.36,1) both;animation-delay:0.42s;}.catalog-page.is-hero-intro-exit .catalog-search-glass:not(.is-expanded){animation:catalog-exit-to-bottom 0.55s cubic-bezier(0.4,0,0.2,1) both;animation-delay:0s;}}@media (prefers-reduced-motion:reduce){.catalog-page.is-hero-intro-enter .site-nav,.catalog-page.is-hero-intro-enter .catalog-hero-slogan__title,.catalog-page.is-hero-intro-enter .catalog-hero-slogan__subtitle,.catalog-page.is-hero-intro-enter .catalog-search-glass,.catalog-page.is-hero-intro-exit .site-nav,.catalog-page.is-hero-intro-exit .catalog-hero-slogan__title,.catalog-page.is-hero-intro-exit .catalog-hero-slogan__subtitle,.catalog-page.is-hero-intro-exit .catalog-search-glass{animation:none !important;opacity:1;transform:none;}}.catalog-search-glass{display:inline-flex;flex-direction:column;align-items:stretch;position:relative;isolation:isolate;overflow:hidden;width:auto;max-width:calc(100% - 24px);margin-left:auto;margin-right:auto;padding:12px 16px;background:transparent;border:none;border-radius:var(--radius-ui);box-shadow:none;transition:transform 0.25s ease;}.catalog-search-glass:not(.is-expanded) .filter-panel{display:none;}.catalog-search-glass__bg,.catalog-search-glass__glass{display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;}.catalog-search-glass__bg{z-index:0;background-repeat:no-repeat;background-size:cover;background-position:center var(--hero-img-pos);}.catalog-search-glass__glass{z-index:1;background:var(--glass-panel-fill);backdrop-filter:var(--glass-blur-nav);-webkit-backdrop-filter:var(--glass-blur-nav);border:none;box-shadow:var(--glass-panel-shadow);transition:box-shadow 0.25s ease;}.catalog-search-glass>:not(.catalog-search-glass__bg):not(.catalog-search-glass__glass){position:relative;z-index:2;}@media (min-width:769px){.catalog-search-glass:not(.is-expanded){transform-origin:center center;}.catalog-search-glass:not(.is-expanded):hover{transform:scale(1.02);}.catalog-search-glass:not(.is-expanded):hover .catalog-search-glass__glass{box-shadow:var(--glass-panel-shadow-hover);}}.catalog-search-glass.is-expanded{display:flex;width:min(66.667vw,800px);max-width:calc(100% - 24px);margin-left:auto;margin-right:auto;padding:14px 16px;}.catalog-search-glass.is-expanded .filter-panel{display:block;width:100%;}.catalog-search-glass.is-expanded .catalog-toolbar-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%;max-width:100%;align-self:stretch;}.catalog-search-glass.is-expanded .catalog-toolbar-sort{width:var(--sort-field-width);max-width:100%;flex:0 1 auto;field-sizing:fixed;}.catalog-search-glass.is-expanded .catalog-toolbar-actions{display:inline-flex;flex:0 0 auto;width:auto;}.catalog-search-field{display:flex;align-items:stretch;flex:1 1 220px;min-width:0;width:100%;max-width:min(280px,100%);}.catalog-search-field #searchInput{flex:1 1 auto;min-width:0;width:auto;padding:0.5rem 0.875rem;font-size:0.95rem;border-radius:0.5rem 0 0 0.5rem;}.catalog-search-field button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 0.75rem;border-radius:0 0.5rem 0.5rem 0;cursor:pointer;}.catalog-toolbar-row{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;}.catalog-toolbar-row #sortSelect,.catalog-toolbar-row .catalog-toolbar-sort,.catalog-toolbar-row .filter-toggle-btn{padding:0.375rem 0.625rem;font-size:0.875rem;line-height:1.25;border-radius:0.5rem;cursor:pointer;flex:0 0 auto;}.catalog-toolbar-sort{width:auto;min-width:0;max-width:none;field-sizing:content;}.catalog-search-glass:not(.is-expanded) .catalog-toolbar-sort{width:var(--sort-field-width);max-width:min(75.6vw,100%);flex:0 0 auto;}.catalog-toolbar-actions{display:inline-flex;flex-wrap:nowrap;gap:8px;align-items:center;}.catalog-reset-btn{padding:0.375rem 0.875rem;font-size:0.875rem;font-weight:500;border-radius:0.5rem;cursor:pointer;white-space:nowrap;}.catalog-search-glass .filter-toggle-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;padding:0.375rem 0.875rem;font-size:0.875rem;font-weight:500;white-space:nowrap;transition:var(--glass-transition);}.filter-panel>div{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start;}.filter-panel .flex-1{flex:1 1 200px;min-width:0;}.filter-dark-card{background:var(--glass-bg-card-dark);border:1px solid var(--glass-border-soft);border-radius:var(--radius-ui);padding:0.625rem 0.375rem 0.5rem;box-shadow:var(--glass-shadow-card);}.filter-dark-card__title{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--glass-text-muted);padding-left:0.625rem;margin-bottom:0.125rem;}.filter-dark-card .flex,.filter-dark-card>div:last-child{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.625rem 0 0.25rem;}#brandSection{margin-top:1.25rem;}.filter-panel .flex-1.min-w-0:not(.filter-dark-card){background:var(--glass-bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-sm);border-radius:var(--radius-ui);padding:0.625rem 0.375rem 0.5rem;}.filter-dark-card .filter-section-title{padding-left:0;}.filter-dark-card #colorPills,.filter-dark-card #yearCloud{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.625rem 0 0.25rem;}.catalog-search-glass .filter-pill,.catalog-search-glass .year-tag{background:var(--glass-bg-pill);border-color:var(--glass-border);color:var(--glass-text);}.catalog-search-glass .filter-pill:hover:not(.disabled),.catalog-search-glass .year-tag:hover:not(.disabled){background:var(--glass-hover-bg);border-color:var(--glass-hover-border);color:var(--color-brand);}.catalog-search-glass .filter-pill.active,.catalog-search-glass .year-tag.active{background:var(--color-brand);border-color:var(--color-brand);color:#fff;box-shadow:var(--glass-shadow-sm);}.catalog-search-glass .filter-dark-card .filter-pill{background:var(--glass-bg-pill-dark);border-color:var(--glass-border);color:var(--glass-text);}.catalog-search-glass .filter-dark-card .filter-pill:hover:not(.disabled){background:var(--glass-hover-bg);border-color:var(--glass-hover-border);color:var(--color-brand);}.catalog-search-glass .filter-dark-card .filter-pill.active{background:var(--color-brand);border-color:var(--color-brand);color:#fff;}.filter-panel .text-xs,.filter-panel label{color:var(--glass-text);text-shadow:none;}.filter-search-section{display:flex;flex-wrap:nowrap;align-items:center;gap:0.75rem 1rem;width:100%;flex:1 1 100%;margin-bottom:0.75rem;}.filter-available-only{display:inline-flex;align-items:center;align-self:center;justify-content:flex-start;gap:0.5rem;margin:0 1rem 0 0;flex:0 0 auto;min-height:2.375rem;font-size:0.875rem;font-weight:500;cursor:pointer;user-select:none;line-height:1.25;text-align:left;white-space:nowrap;color:var(--glass-text);text-shadow:none;}.filter-available-only input[type="checkbox"]{width:1.125rem;height:1.125rem;margin:0;flex-shrink:0;cursor:pointer;appearance:none;-webkit-appearance:none;box-sizing:border-box;border:1.5px solid rgba(15,23,42,0.25);border-radius:0.25rem;background:#ffffff;position:relative;vertical-align:middle;}.filter-available-only input[type="checkbox"]:checked{background:var(--color-brand);border-color:var(--color-brand);}.filter-available-only input[type="checkbox"]:checked::after{content:"";position:absolute;left:50%;top:44%;width:0.3rem;height:0.55rem;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg);}.filter-available-only input[type="checkbox"]:focus-visible{outline:2px solid rgba(56,189,248,0.55);outline-offset:2px;}.filter-panel .catalog-search-field,.filter-panel .filter-search-field{display:flex;align-items:center;align-self:center;flex:1 1 auto;min-width:0;width:auto;max-width:100%;margin-top:0;}.filter-panel .filter-search-field #searchInput,.filter-panel .filter-search-field button{height:2.375rem;box-sizing:border-box;}.catalog-search-glass #searchInput::placeholder{color:var(--glass-placeholder);opacity:1;}.catalog-search-glass #searchInput,.catalog-search-glass #fuelSelect,.catalog-search-glass #conditionerSelect{background:var(--glass-bg-control);border:1px solid var(--glass-border);color:var(--glass-text-bright);}.catalog-search-glass #searchInput:focus,.catalog-search-glass #fuelSelect:focus,.catalog-search-glass #conditionerSelect:focus{border-color:var(--glass-active-border);box-shadow:var(--glass-shadow-sm);outline:none;}.catalog-search-glass #searchInput + button,.catalog-search-glass #sortSelect,.catalog-search-glass .catalog-toolbar-sort,.catalog-search-glass .filter-toggle-btn,.catalog-search-glass .catalog-reset-btn{background:var(--glass-bg-control);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);color:var(--glass-text);transition:var(--glass-transition);}.catalog-search-glass #searchInput + button:hover,.catalog-search-glass .catalog-toolbar-sort:hover,.catalog-search-glass .filter-toggle-btn:hover,.catalog-search-glass .catalog-reset-btn:hover{background:var(--glass-hover-bg);border-color:var(--glass-hover-border);color:var(--color-brand);box-shadow:var(--glass-shadow-sm);}.catalog-search-glass .filter-toggle-btn.active{background:var(--color-brand);border-color:var(--color-brand);color:#fff;box-shadow:var(--glass-shadow-sm);}.catalog-search-glass .filter-toggle-btn.active{border-color:var(--glass-active-border);}@keyframes filter-btn-shimmer{0%,100%{opacity:0.85;border-color:var(--glass-border);box-shadow:none;color:var(--glass-text-muted);}50%{opacity:1;border-color:rgba(43,89,209,0.45);box-shadow:0 0 14px rgba(43,89,209,0.12),0 0 4px rgba(43,89,209,0.08);color:var(--color-brand);}}.catalog-search-glass .filter-toggle-btn:not(.active){animation:filter-btn-shimmer 2.8s ease-in-out infinite;}.catalog-search-glass .filter-toggle-btn:not(.active):hover{animation-play-state:paused;}.catalog-search-glass .filter-panel.open{max-height:1200px;}.catalog-main{position:relative;z-index:1;background-color:var(--catalog-bg);margin-top:0;padding-top:0.25rem;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem;padding-bottom:2rem;overflow-x:clip;}.catalog-results-count{color:var(--glass-text-muted);margin-top:1.25rem;text-align:center;}#catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;overflow-x:clip;}@keyframes catalog-row-enter-from-right{from{opacity:0;transform:translateX(56px);}to{opacity:1;transform:translateX(0);}}.car-card{position:relative;z-index:0;background:var(--glass-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-ui);transform-origin:center center;transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;cursor:pointer;}.car-card.is-filtered-out{display:none;}.catalog-status-message{grid-column:1 / -1;}.car-card.car-card--await-reveal{opacity:0;transform:translateX(56px);transition:none;}.car-card.car-card--first-row{opacity:0.7;transform:none;transition:opacity 0.45s ease,transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;}.car-card.car-card--first-row.is-first-row-solid,.has-catalog-scrolled .car-card.car-card--first-row{opacity:1;}.car-card.is-row-revealed{animation:catalog-row-enter-from-right 0.72s cubic-bezier(0.22,1,0.36,1) forwards;}.car-card:hover{z-index:2;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12);border-color:var(--color-border);}.car-card__body{padding:1rem;}.car-card-more-link{color:var(--color-brand);font-weight:600;text-decoration:none;transition:color 0.15s ease;}.car-card-more-link:hover{color:var(--color-brand-hover);text-decoration:underline;}.car-card .car-image{background:var(--color-card-accent);}.car-card .car-name{color:var(--glass-text-bright);font-size:1.125rem;font-weight:600;margin-bottom:0.5rem;line-height:1.35;transition:color 0.2s ease;}.car-card .car-meta{font-size:0.75rem;color:var(--glass-text-muted);margin:0.125rem 0 0.375rem;}.car-card__footer{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.25rem;}.car-card__price{font-size:0.75rem;font-weight:600;color:var(--color-body);line-height:1.2;min-width:0;}.car-card-order-btn{flex-shrink:0;padding:0.4rem 0.85rem;font-size:0.75rem;font-weight:600;letter-spacing:0.03em;line-height:1.2;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-brand);color:#fff;cursor:pointer;white-space:nowrap;transform:scale(1);transform-origin:center center;transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.22s ease,box-shadow 0.22s ease;}.car-card-order-btn:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);color:#fff;animation:car-card-order-pulse 1.1s ease-in-out infinite;}@keyframes car-card-order-pulse{0%,100%{transform:scale(1.12);box-shadow:0 2px 10px rgba(43,89,209,0.35),0 0 0 0 rgba(43,89,209,0.4);}50%{transform:scale(1.2);box-shadow:0 4px 18px rgba(43,89,209,0.45),0 0 0 10px rgba(43,89,209,0);}}@media (prefers-reduced-motion:reduce){.car-card-order-btn:hover{animation:none;transform:scale(1.06);}.car-card.car-card--await-reveal{opacity:1;transform:none;transition:none;}.car-card.car-card--first-row{opacity:1;}.car-card.is-row-revealed{animation:none;opacity:1;transform:none;}.catalog-search-glass:not(.is-expanded):hover{transform:none;}.availability-badge-dot{animation:none;opacity:1;transform:none;}.catalog-search-glass .filter-toggle-btn:not(.active){animation:none;opacity:1;}}.catalog-search-glass .filter-section-title{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--glass-text-muted);margin-bottom:0.125rem;padding-left:0.625rem;}.catalog-search-glass .filter-search-field button{background:var(--glass-bg-control);border:1px solid var(--glass-border);border-left:0;color:var(--glass-text);transition:var(--glass-transition);}.catalog-search-glass .filter-search-field button:hover{background:var(--glass-hover-bg);border-color:var(--glass-hover-border);color:var(--color-brand);}.catalog-search-glass .catalog-search-input,.catalog-search-glass #searchInput.catalog-search-input{padding:0.5rem 0.875rem;font-size:0.95rem;border-radius:0.5rem 0 0 0.5rem;border-right:0;}.catalog-search-glass .catalog-search-submit{display:inline-flex;align-items:center;justify-content:center;padding:0 0.75rem;border-radius:0 0.5rem 0.5rem 0;cursor:pointer;}.catalog-search-glass .catalog-filter-select{padding:0.375rem 0.625rem;font-size:0.875rem;line-height:1.25;border-radius:0.5rem;}.catalog-search-glass .color-pill{width:3rem;height:2rem;border-radius:0.375rem;border:2px solid var(--glass-border);cursor:pointer;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;}.catalog-search-glass .color-pill:hover:not(.disabled){transform:scale(1.08);border-color:var(--glass-hover-border);box-shadow:var(--glass-shadow-sm);}.catalog-search-glass .color-pill.active{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(43,89,209,0.25);}.car-image-wrap{position:relative;width:100%;}.car-image-wrap.is-unavailable .car-image{opacity:0.5;}.car-availability-badge-wrap{position:absolute;right:6px;bottom:6px;z-index:2;max-width:calc(100% - 12px);pointer-events:none;}.availability-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--radius-pill);font-size:0.5rem;font-weight:600;line-height:1;white-space:nowrap;background:#f7f7f6;border:1px solid #ebebea;box-shadow:0 1px 4px rgba(15,23,42,0.1);}@keyframes availability-dot-blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.3;transform:scale(0.88);}}.availability-badge-dot{flex-shrink:0;width:0.5625rem;height:0.5625rem;border-radius:50%;animation:availability-dot-blink 1.1s ease-in-out infinite;box-shadow:none;}.availability-available .availability-badge-dot{background:#00e676;box-shadow:0 0 8px rgba(0,230,118,0.95);}.availability-contact .availability-badge-dot{background:#ffea00;box-shadow:0 0 8px rgba(255,234,0,0.95);}.availability-unavailable .availability-badge-dot{background:#ff1744;box-shadow:0 0 8px rgba(255,23,68,0.95);}.availability-badge-text{display:inline;white-space:nowrap;}.availability-available{color:#047857;}.availability-contact{color:#b45309;}.availability-unavailable{color:#b91c1c;}.car-name{overflow:hidden;max-width:100%;min-width:0;}.car-name__text{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top;}.car-name--marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);}.car-name--marquee .car-name__text{max-width:none;overflow:visible;text-overflow:clip;}.car-name__marquee{display:inline-flex;align-items:center;gap:1.5rem;white-space:nowrap;width:max-content;will-change:transform;}.car-name--marquee .car-name__marquee{animation:car-name-marquee var(--marquee-duration,8s) linear infinite;}.car-name--marquee:hover .car-name__marquee{animation-play-state:paused;}@keyframes car-name-marquee{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 0.75rem));}}.car-card:hover .car-image img{transform:scale(1.04);}.car-card:hover .car-name{color:var(--color-brand);}.car-card:hover .car-name--marquee{color:var(--color-brand);}#catalog .col-span-full.is-error{color:#dc2626;}@media (max-width:640px){#catalog{grid-template-columns:1fr;}}@media (max-width:768px){.catalog-main{margin-top:0;}.catalog-search-glass,.catalog-search-glass:not(.is-expanded),.catalog-search-glass.is-expanded{display:flex;width:100%;max-width:100%;margin-left:0;margin-right:0;box-sizing:border-box;padding:12px;border-radius:12px;}.catalog-search-glass .catalog-toolbar-row,.catalog-search-glass:not(.is-expanded) .catalog-toolbar-row,.catalog-search-glass.is-expanded .catalog-toolbar-row{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;width:100%;max-width:100%;}.catalog-search-glass .catalog-toolbar-row #sortSelect,.catalog-search-glass .catalog-toolbar-row .catalog-toolbar-sort,.catalog-search-glass:not(.is-expanded) .catalog-toolbar-sort,.catalog-search-glass.is-expanded .catalog-toolbar-row #sortSelect,.catalog-search-glass.is-expanded .catalog-toolbar-row .catalog-toolbar-sort{width:100%;max-width:100%;box-sizing:border-box;}.catalog-search-glass .catalog-toolbar-actions,.catalog-search-glass.is-expanded .catalog-toolbar-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}.catalog-search-glass .catalog-toolbar-actions .filter-toggle-btn,.catalog-search-glass .catalog-toolbar-actions .catalog-reset-btn,.catalog-search-glass.is-expanded .catalog-toolbar-actions .filter-toggle-btn,.catalog-search-glass.is-expanded .catalog-toolbar-actions .catalog-reset-btn{width:100%;box-sizing:border-box;}.filter-panel>div{flex-direction:column;gap:0.75rem;}.filter-panel .flex-1{flex:1 1 100%;width:100%;}.filter-search-section{flex-direction:column;align-items:stretch;gap:0.5rem;}.filter-available-only{font-size:0.78rem;margin-right:0;width:100%;justify-content:center;white-space:normal;text-align:center;}.filter-panel>.flex{width:100%;max-width:100%;box-sizing:border-box;}.filter-dark-card{box-sizing:border-box;width:100%;max-width:100%;padding:0.625rem 0.375rem 0.5rem;}.filter-dark-card__title,.catalog-search-glass .filter-dark-card .filter-section-title{padding-left:0.625rem;padding-right:0.625rem;}.filter-dark-card .flex,.filter-dark-card>div:last-child,.filter-dark-card #colorPills,.filter-dark-card #yearCloud{padding-left:0.625rem;padding-right:0.625rem;box-sizing:border-box;width:100%;max-width:100%;}}.modal-page-link-wrap{margin-top:20px;padding-top:16px;border-top:1px solid #e8ecf2;text-align:center;}.modal-open-page-link{display:inline-flex;align-items:center;gap:6px;font-size:0.875rem;font-weight:600;color:var(--color-brand,#2b59d1);text-decoration:none;transition:color 0.2s ease,opacity 0.2s ease;}.modal-open-page-link:hover{color:var(--color-brand-hover,#2349b0);text-decoration:underline;}.car-page{min-height:100vh;padding:16px 16px 32px;}.car-page.is-loading .car-page-scroll{visibility:hidden;}.car-page.is-error .car-page-scroll{display:none;}.car-page-topbar{max-width:960px;margin:0 auto 14px;}.car-page-back{display:inline-flex;align-items:center;font-size:0.875rem;font-weight:600;color:var(--color-brand,#2b59d1);text-decoration:none;}.car-page-back:hover{text-decoration:underline;}.car-page-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;color:#64748b;font-size:0.9rem;}.car-page.is-ready .car-page-loader,.car-page.is-error .car-page-loader{display:none;}.car-page-error{max-width:960px;margin:0 auto 16px;padding:14px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#b91c1c;font-size:0.875rem;text-align:center;}.car-page-scroll{border-radius:0;max-height:none;overflow:visible;}.modal.is-detail-page{display:block !important;position:static;padding:0;}.modal.is-detail-page .modal-backdrop{display:none;}.modal.is-detail-page .modal-content{max-width:960px;margin:0 auto;box-shadow:none;border-radius:0;animation:none;}.modal.is-detail-page .modal-close-bar{max-width:960px;margin:0 auto;}.modal{display:none;}.modal.show{display:flex;}@keyframes modalPop{from{transform:scale(0.96) translateY(12px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}.modal-content{animation:modalPop 0.22s cubic-bezier(0.4,0,0.2,1);border-radius:0;}.modal-slider-section{border-radius:0;}.modal-hero{display:flex;flex-direction:column;flex-shrink:0;}.modal-sidebar{display:flex;flex-direction:column;min-width:0;background:#fff;}.modal-sidebar .modal-title{margin-bottom:10px;}.modal-sidebar .modal-quick-specs{margin-bottom:16px;}.modal-sidebar .modal-tariffs-panel{flex:1;min-height:0;margin-bottom:14px;}.modal-sidebar .modal-order-btn{width:100%;max-width:none;margin:auto 0 0;flex-shrink:0;}@media (min-width:641px){.modal-hero{flex-direction:row;align-items:stretch;height:calc(92vh * 0.8);max-height:calc(92vh * 0.8);}.modal-slider-section{width:50%;flex:0 0 50%;height:100%;max-height:100%;}.modal-sidebar{width:50%;flex:0 0 50%;padding:20px 22px 22px;overflow-y:auto;border-left:1px solid #e8ecf2;}.modal-sidebar .modal-title{font-size:1.25rem;}.modal-sidebar .tariff-tab{font-size:0.8rem;padding:9px 10px;}table.tarifs{font-size:0.8125rem;}table.tarifs th,table.tarifs td{padding:10px 4px;}}@media (max-width:640px){.modal-slider-section{width:100%;height:calc(92vh * 0.42);max-height:calc(92vh * 0.42);}.modal-sidebar{padding:16px 18px 20px;}}.modal-slider-section{display:flex;flex-direction:column;background:#fff;flex-shrink:0;}.slider-viewport{position:relative;flex:1;min-height:0;background:#fff;}.slider-stage{position:absolute;inset:0;z-index:1;}.slider-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:1;will-change:opacity,transform,filter;}.slider-slide-img{max-width:94%;max-height:92%;width:auto;height:auto;object-fit:contain;display:block;border-radius:var(--radius-ui,16px);user-select:none;pointer-events:none;transform:scale(1.05) translateX(0);filter:blur(10px) brightness(0.88);opacity:0;transition:opacity 1.05s cubic-bezier(0.22,1,0.36,1),transform 1.15s cubic-bezier(0.22,1,0.36,1),filter 1.05s cubic-bezier(0.22,1,0.36,1);}.slider-stage:not(.is-ready) .slider-slide-img{transition:none;}.slider-stage.is-fast .slider-slide-img{transition:opacity 0.52s cubic-bezier(0.22,1,0.36,1),transform 0.58s cubic-bezier(0.22,1,0.36,1),filter 0.52s cubic-bezier(0.22,1,0.36,1);}.slider-slide.active .slider-slide-img{opacity:1;transform:scale(1) translateX(0);filter:blur(0) brightness(1);}.slider-slide.pre-enter-next .slider-slide-img{opacity:0;transform:scale(1.05) translateX(5%);filter:blur(14px) brightness(0.82);transition:none;}.slider-slide.pre-enter-prev .slider-slide-img{opacity:0;transform:scale(1.05) translateX(-5%);filter:blur(14px) brightness(0.82);transition:none;}.slider-slide.leaving-next .slider-slide-img{opacity:0;transform:scale(0.97) translateX(-4%);filter:blur(10px) brightness(0.75);}.slider-slide.leaving-prev .slider-slide-img{opacity:0;transform:scale(0.97) translateX(4%);filter:blur(10px) brightness(0.75);}.slider-slide.active{opacity:1;z-index:3;pointer-events:auto;}.slider-slide.leaving{opacity:1;z-index:2;}.slider-arrow{width:42px;height:42px;border:1px solid rgba(15,23,42,0.12);border-radius:50%;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);color:#334155;font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.85;box-shadow:0 2px 12px rgba(15,23,42,0.08);transition:opacity 0.15s ease,background 0.15s ease,transform 0.12s ease,border-color 0.15s ease,box-shadow 0.15s ease;}.modal-slider-section:hover .slider-arrow:not(.hidden){opacity:1;}.slider-arrow:hover{transform:translateY(-50%) scale(1.06);background:#fff;border-color:rgba(43,89,209,0.35);color:var(--color-brand,#2b59d1);box-shadow:0 4px 16px rgba(43,89,209,0.15);}.slider-arrow:active{transform:translateY(-50%) scale(0.96);}.slider-arrow.hidden{display:none;}.slider-dots{padding:6px 10px;border-radius:20px;background:rgba(255,255,255,0.88);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(15,23,42,0.08);}.slider-dots.hidden{display:none;}.slider-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(15,23,42,0.22);cursor:pointer;transition:width 0.35s ease,background 0.35s ease,opacity 0.35s ease;}.slider-dot:hover{background:rgba(43,89,209,0.55);}.slider-dot.active{width:22px;background:var(--color-brand,#2b59d1);}.slider-nav{flex-shrink:0;background:#fff;border-top:1px solid #eef0f4;}.slider-thumbs{display:flex;gap:10px;justify-content:center;align-items:center;padding:14px 20px 12px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}.slider-thumbs::-webkit-scrollbar{display:none;}.slider-thumb{flex-shrink:0;width:88px;height:58px;padding:0;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;overflow:hidden;cursor:pointer;opacity:0.5;transform:scale(0.94);transition:opacity 0.4s ease,transform 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease;}.slider-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:7px;pointer-events:none;}.slider-thumb:hover{opacity:0.72;transform:scale(0.97);}.slider-thumb.active{opacity:1;transform:scale(1);border-color:var(--color-brand,#2b59d1);box-shadow:0 4px 14px rgba(43,89,209,0.2);}@media (max-width:640px){.slider-thumb{width:64px;height:42px;}.slider-arrow{width:34px;height:34px;font-size:0.85rem;opacity:1;}}.slider-loader{opacity:0;transition:opacity 0.2s ease;}.slider-loader.visible{opacity:1;}.modal-close-bar{background:transparent;margin-bottom:-36px;}.modal-close-btn{width:24px;height:24px;border:0;background:#dc2626;color:#fff;font-size:15px;font-weight:500;line-height:1;border-radius:6px;cursor:pointer;transition:background 0.2s,transform 0.2s,box-shadow 0.2s;box-shadow:0 2px 6px rgba(220,38,38,0.35);backdrop-filter:blur(4px);}.modal-close-btn:hover{background:#b91c1c;color:#fff;transform:scale(1.06);box-shadow:0 3px 10px rgba(220,38,38,0.45);}.modal-title{font-size:1.5rem;font-weight:600;color:#0f172a;margin:0 0 12px;line-height:1.3;}.modal-quick-specs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:20px;font-size:0.9rem;line-height:1.6;color:#475569;}.quick-spec-item{display:inline;white-space:nowrap;}.quick-spec-label{font-weight:500;color:#64748b;}.quick-spec-value{display:inline-block;padding:3px 9px;margin-left:2px;background:var(--catalog-bg,#f6f3f1);border-radius:6px;font-weight:600;color:#1e293b;}.modal-tariffs-panel{margin-bottom:20px;background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius-ui,16px);overflow:hidden;box-shadow:0 1px 4px rgba(43,89,209,0.07);}.tariff-tabs{display:flex;gap:6px;padding:0;background:var(--catalog-bg,#f6f3f1);border-bottom:1px solid #e2e8f0;margin-bottom:0;}.tariff-tab{flex:1;padding:10px 14px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--color-brand,#2b59d1);font-size:0.875rem;font-weight:600;cursor:pointer;line-height:1.3;text-align:center;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;}.tariff-tab:hover:not(.active){background:rgba(43,89,209,0.1);border-color:rgba(43,89,209,0.2);}.tariff-tab.active{background:var(--color-brand,#2b59d1);color:#fff;border-color:var(--color-brand,#2b59d1);border-radius:8px 8px 0 0;box-shadow:none;margin-bottom:-1px;padding-bottom:11px;position:relative;z-index:1;}@media (max-width:480px){.tariff-tabs{gap:4px;padding:0;}.tariff-tab{font-size:0.75rem;padding:9px 8px;}}.tariff-panel{display:none;padding:0;background:#fff;}.tariff-panel.active{display:block;}table.tarifs{width:100%;table-layout:fixed;border-collapse:collapse;font-size:0.9375rem;color:#1d1d1f;font-weight:400;}table.tarifs th,table.tarifs td{padding:12px 6px;text-align:center;white-space:nowrap;border:0;border-bottom:1px solid #eef0f4;}table.tarifs thead th{font-size:0.9rem;font-weight:600;color:var(--color-brand,#2b59d1);padding:10px 6px 12px;border-bottom:1px solid #d8dee8;background:#f8f9fc;}table.tarifs thead th:first-child{text-align:left;width:12%;}table.tarifs tbody td.tariff-row-label{text-align:left;color:#86868b;font-size:0.75rem;width:12%;}table.tarifs tbody td{font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}table.tarifs tbody td.is-empty{color:#d2d2d7;}table.tarifs tbody tr:last-child td{border-bottom:0;}.tariff-footnote{font-size:0.75rem;color:#000;margin:12px 0 0;padding:10px 12px 12px;border-top:1px solid #eef0f4;background:var(--catalog-bg,#f6f3f1);line-height:1.45;font-weight:400;text-align:center;}.modal-order-btn{display:block;width:100%;max-width:360px;margin:4px 0 0;padding:12px 24px;border:0;border-radius:8px;background:var(--color-brand,#2b59d1);color:#fff;font-size:0.95rem;font-weight:600;cursor:not-allowed;opacity:0.55;transition:opacity 0.2s ease,background 0.2s ease,transform 0.15s ease;}.modal-order-btn.is-active{cursor:pointer;opacity:1;}.modal-order-btn.is-active:hover{background:var(--color-brand-hover,#2349b0);}.modal-order-btn.is-active:active{transform:scale(0.985);}body.order-form-open{overflow:hidden;}.order-overlay{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:16px;overflow-x:hidden;overflow-y:auto;}.order-overlay.is-open{display:flex;}.order-overlay-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.72);backdrop-filter:blur(4px);}.order-modal{position:relative;isolation:isolate;width:100%;max-width:560px;max-height:92vh;overflow-x:hidden;overflow-y:auto;background:transparent;border:none;border-radius:var(--radius-ui,16px);box-shadow:none;padding:20px 18px 22px;box-sizing:border-box;}@media (max-width:768px){.order-overlay{align-items:flex-start;padding:16px 12px;overflow-y:auto;}.order-modal{height:auto !important;max-height:none !important;margin:0 auto;max-width:100%;}.order-form{height:auto !important;min-height:0;}}.order-modal__bg,.order-modal__glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;}.order-modal__bg{z-index:0;}.order-modal__glass{z-index:1;background:var(--glass-panel-fill);backdrop-filter:var(--glass-blur-nav);-webkit-backdrop-filter:var(--glass-blur-nav);border:1px solid var(--glass-border-nav);box-shadow:var(--glass-panel-shadow);}.order-modal>:not(.order-modal__bg):not(.order-modal__glass):not(.order-modal-close){position:relative;z-index:2;}.order-form,.order-form input,.order-form button,.order-form fieldset,.order-summary,.order-actions,.order-captcha-row{box-sizing:border-box;max-width:100%;}.order-form{min-width:0;}.order-modal-close{position:absolute;top:6px;right:8px;width:32px;height:32px;border:0;border-radius:6px;background:#e11d48;color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;z-index:3;}.order-form-title{margin:0 32px 12px 0;font-size:1.2rem;font-weight:700;color:#1e293b;}.order-car-line{margin:0 0 16px;font-size:0.9rem;color:#475569;}.order-car-label{font-weight:600;color:#334155;}.order-fieldset{border:0;margin:0 0 16px;padding:0;}.order-fieldset-title{margin:0 0 8px;font-size:0.9rem;font-weight:600;color:#334155;}.order-label{display:block;margin-bottom:10px;font-size:0.85rem;font-weight:600;color:#475569;}.order-label input[type="text"],.order-label input[type="tel"],.order-label input[type="email"],.order-captcha input[type="text"]{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:0.95rem;color:#1e293b;background:#fff;}.order-label input[type="date"]{display:block;width:100%;min-width:0;margin-top:4px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:1rem;line-height:1.35;color:#1e293b;background:#fff;box-sizing:border-box;transition:border-color 0.15s ease,box-shadow 0.15s ease;}.order-label input[type="date"]:hover{border-color:#94a3b8;}.order-label input[type="date"]:focus{border-color:var(--color-brand,#2b59d1);box-shadow:0 0 0 3px rgba(43,89,209,0.1);outline:none;}.order-label input[type="date"]::-webkit-datetime-edit{padding:1px 4px;}.order-label input[type="date"]::-webkit-datetime-edit-fields-wrapper{padding:0 2px;}.order-label input[type="date"]::-webkit-datetime-edit-text{padding:0 3px;color:#475569;}.order-label input[type="date"]::-webkit-inner-spin-button,.order-label input[type="date"]::-webkit-clear-button{display:none;}.order-label input.is-invalid,.order-captcha input.is-invalid{border-color:#e11d48;}.date-field{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;cursor:pointer;font-size:1rem;color:#1e293b;transition:all 0.15s ease;min-height:42px;box-sizing:border-box;}.date-field:hover{border-color:#94a3b8;}.date-field:focus-within,.date-field.open{border-color:var(--color-brand,#2b59d1);box-shadow:0 0 0 3px rgba(43,89,209,0.12);}.date-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.calendar-icon{font-size:1.1rem;margin-left:8px;opacity:0.65;flex-shrink:0;}.date-picker{position:fixed;z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,0.18);width:320px;padding:14px 12px 12px;font-size:0.9rem;display:none;animation:datePickerPop 0.18s cubic-bezier(0.32,0.72,0,1);}.date-picker.open{display:block;}@keyframes datePickerPop{from{opacity:0;transform:translateY(-6px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px;}.date-picker-header .month{font-weight:600;color:#1e293b;}.date-picker-header button{background:none;border:1px solid transparent;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#64748b;border-radius:6px;cursor:pointer;transition:all 0.1s;}.date-picker-header button:hover{background:#f1f5f9;color:#1e293b;}.date-picker .weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:0.72rem;color:#94a3b8;margin-bottom:4px;font-weight:500;}.date-picker .days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}.date-picker .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:0.92rem;border-radius:8px;cursor:pointer;color:#1e293b;transition:background 0.1s,color 0.1s;}.date-picker .day:hover{background:#f1f5f9;}.date-picker .day.selected{background:var(--color-brand,#2b59d1);color:#fff;font-weight:600;}.date-picker .day.other-month{color:#cbd5e1;}.date-picker .day.disabled{color:#e2e8f0;cursor:default;pointer-events:none;}.order-fieldset.order-dates{margin-bottom:12px;}.order-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-width:0;}.order-dates .order-label{margin-bottom:0;font-size:0.82rem;min-width:0;}.order-dates .order-label>span{display:block;line-height:1.3;margin-bottom:2px;}@media (max-width:480px){.order-dates{grid-template-columns:minmax(0,1fr);gap:6px;}}.order-radio{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;cursor:pointer;font-size:0.88rem;color:#334155;}.order-radio input{margin-top:3px;flex-shrink:0;accent-color:var(--color-brand,#2b59d1);}.order-radio-text small{display:block;margin-top:2px;font-size:0.78rem;font-weight:400;color:#64748b;line-height:1.35;}.order-summary{margin:16px 0;padding:14px 14px 12px;background:var(--catalog-bg,#f6f3f1);border-radius:10px;font-size:0.88rem;color:#1e293b;}.order-summary-title{margin:0 0 8px;font-weight:700;text-align:center;}.order-summary-row{display:flex;justify-content:space-between;gap:12px;margin:0 0 4px;min-width:0;}.order-summary-row>span:last-child{flex-shrink:0;text-align:right;}.order-summary-bail{padding-top:6px;margin-top:6px;border-top:1px solid rgba(30,41,59,0.12);}.order-summary-total{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;padding-top:8px;border-top:1px solid rgba(30,41,59,0.18);font-weight:700;font-size:0.95rem;}.order-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:8px;border:0;font-size:0.92rem;font-weight:600;cursor:pointer;transition:background 0.2s ease,opacity 0.2s ease;}.order-btn-primary{width:100%;background:var(--color-brand,#2b59d1);color:#fff;}.order-btn-primary:hover:not(:disabled){background:var(--color-brand-hover,#2349b0);}.order-btn-primary:disabled{opacity:0.5;cursor:not-allowed;}.order-btn-ghost{background:var(--catalog-bg,#f6f3f1);color:#475569;}.order-btn-ghost:hover{background:#e2e8f0;}.order-btn.is-loading{opacity:0.7;pointer-events:none;}.order-actions{display:flex;gap:10px;margin-top:8px;}.order-actions .order-btn-primary{flex:1;}.order-field-error{margin:8px 0 0;font-size:0.82rem;color:#e11d48;}.order-step-note{margin:0 0 12px;font-size:0.88rem;color:#64748b;}.order-captcha-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;min-width:0;}.order-captcha img{border-radius:6px;border:1px solid #e2e8f0;}.order-required-note,.order-privacy{margin:10px 0 0;font-size:0.78rem;color:#64748b;line-height:1.4;}.order-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}.order-success{padding:24px 8px;text-align:center;}.order-success-title{margin:0 0 8px;font-size:1.15rem;font-weight:700;color:#1e293b;}.required{color:#e11d48;}.order-calc-grid,.order-contacts-grid{min-width:0;}.order-calc-aside{min-width:0;}.order-calc-error{margin:8px 0 0;padding:8px 12px;border:2px solid #dc2626;border-radius:8px;background-color:#fef2f2;color:#dc2626;font-size:0.82rem;font-weight:500;}@media (min-width:769px){.order-overlay{overflow:hidden;padding:16px 24px;}.order-modal{width:min(960px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:hidden;padding:16px 22px 18px;display:flex;flex-direction:column;}.order-form{flex:1;min-height:0;display:flex;flex-direction:column;}.order-form-title{font-size:1.1rem;margin:0 32px 6px 0;}.order-car-line{margin-bottom:10px;font-size:0.85rem;}.order-calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:12px 22px;align-items:start;}.order-calc-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px;min-width:0;}.order-calc-main>.order-fieldset.order-dates{grid-column:1 / -1;}.order-calc-main>.order-fieldset{margin-bottom:0;}.order-calc-aside{display:flex;flex-direction:column;gap:10px;}.order-calc-aside .order-summary{margin:0;padding:10px 12px;font-size:0.82rem;}.order-calc-aside .order-summary-title{margin-bottom:6px;font-size:0.88rem;}.order-calc-aside .order-summary-row{margin-bottom:2px;}.order-calc-aside .order-summary-bail{padding-top:4px;margin-top:4px;}.order-calc-aside .order-summary-total{margin-top:8px;padding-top:6px;font-size:0.9rem;}.order-calc-main .order-fieldset-title{margin-bottom:6px;font-size:0.84rem;}.order-calc-main .order-radio{margin-bottom:5px;font-size:0.82rem;}.order-calc-main .order-radio-text small{font-size:0.74rem;line-height:1.3;}.order-contacts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,280px);gap:12px 22px;align-items:start;}.order-contacts-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px;margin-bottom:0;}.order-contacts-fields .order-label{margin-bottom:0;}#order-step-contacts .order-fieldset{margin-bottom:0;}#order-step-contacts .order-step-note{margin-bottom:8px;}#order-step-contacts .order-actions{margin-top:4px;}#order-step-contacts .order-required-note,#order-step-contacts .order-privacy{margin-top:6px;}}@media (min-width:769px) and (max-height:720px){.order-modal{overflow-y:auto;}}.modal-info-panel{margin-top:8px;}.info-tabs{display:flex;gap:6px;padding:5px;background:var(--catalog-bg,#f6f3f1);border-radius:10px;justify-content:center;align-items:stretch;}.info-tab{flex:1;padding:11px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--color-brand,#2b59d1);font-size:0.9rem;font-weight:600;cursor:pointer;line-height:1.3;text-align:center;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;}@media (max-width:480px){.info-tabs{gap:4px;padding:4px;}.info-tab{font-size:0.8rem;padding:10px 6px;}}.info-tab:hover:not(.active){background:rgba(43,89,209,0.1);border-color:rgba(43,89,209,0.2);}.info-tab.active{background:var(--color-brand,#2b59d1);color:#fff;border-color:var(--color-brand,#2b59d1);box-shadow:0 2px 6px rgba(43,89,209,0.28);}.info-panel{display:none;padding-top:20px;}.info-panel.active{display:block;}.info-content{font-size:0.9rem;line-height:1.55;color:#1d1d1f;}.info-content p{margin:0 0 10px;}#modal-rent-conditions{display:block;}#modal-rent-conditions .rent-conditions-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start;}#modal-rent-conditions .rent-col{display:flex;flex-direction:column;gap:16px;}#modal-rent-conditions .rent-intro{grid-column:1 / -1;margin:0;padding:12px 14px;background:#fff;border-radius:8px;font-size:0.875rem;line-height:1.5;color:#475569;text-align:center;}#modal-rent-conditions .rent_block{margin-bottom:0;padding:14px 16px 12px;background:#f8f9fc;border:1px solid #e8ecf2;border-radius:10px;}#modal-rent-conditions .rent-block-title{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #e2e8f0;font-size:0.875rem;font-weight:600;line-height:1.35;color:var(--color-brand,#2b59d1);letter-spacing:-0.01em;}#modal-rent-conditions .rent-list{margin:0;padding:0;list-style:none;}#modal-rent-conditions .rent-list>li{position:relative;margin:0 0 6px;padding:9px 10px 9px 34px;font-size:0.8125rem;line-height:1.45;color:#424245;background:#fff;border:1px solid #eef0f4;border-radius:6px;}#modal-rent-conditions .rent-list>li:last-child{margin-bottom:0;}#modal-rent-conditions .rent-list>li::before{content:'';position:absolute;top:50%;left:12px;width:4px;height:70%;border-radius:3px;background:var(--color-brand,#2b59d1);transform:translateY(-50%);}@media (max-width:640px){#modal-rent-conditions .rent-conditions-cols{grid-template-columns:1fr;gap:14px;}#modal-rent-conditions .rent-col{gap:14px;}}.info-content ul{margin:0;padding-left:1.1rem;}.info-content li{margin-bottom:5px;color:#424245;}.section-empty,.table-empty{color:#86868b;font-style:normal;font-size:0.875rem;padding:16px 0;text-align:center;}table.data-table{width:100%;border-collapse:collapse;font-size:0.875rem;color:#1d1d1f;}table.data-table th,table.data-table td{padding:11px 12px;text-align:left;vertical-align:top;line-height:1.4;}.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}@media (max-width:640px){.specs-grid{grid-template-columns:1fr;}}.spec-item{display:grid;grid-template-columns:42% 1fr;gap:8px;padding:11px 12px;align-items:start;}.spec-item:nth-child(4n+1),.spec-item:nth-child(4n+4),.complectation-grid-item:nth-child(4n+1),.complectation-grid-item:nth-child(4n+4),.complectation-cols>li:nth-child(4n+1),.complectation-cols>li:nth-child(4n+4){background:#fff;}.spec-item:nth-child(4n+2),.spec-item:nth-child(4n+3),.complectation-grid-item:nth-child(4n+2),.complectation-grid-item:nth-child(4n+3),.complectation-cols>li:nth-child(4n+2),.complectation-cols>li:nth-child(4n+3){background:#f5f5f7;}@media (max-width:640px){.spec-item:nth-child(odd),.complectation-grid-item:nth-child(odd),.complectation-cols>li:nth-child(odd){background:#fff;}.spec-item:nth-child(even),.complectation-grid-item:nth-child(even),.complectation-cols>li:nth-child(even){background:#f5f5f7;}}.spec-label{font-size:0.875rem;font-weight:400;color:#86868b;line-height:1.4;}.spec-value{font-size:0.875rem;font-weight:400;color:#1d1d1f;word-break:break-word;line-height:1.4;}.specs-grid>.table-empty{grid-column:1 / -1;}.info-content table,.complectation table,.content table{width:100%;border-collapse:collapse;font-size:0.875rem;color:#1d1d1f;margin:12px 0;}.info-content table th,.info-content table td,.complectation table th,.complectation table td,.content table th,.content table td{padding:10px 12px;text-align:left;border:1px solid #e5e5e5;vertical-align:top;line-height:1.4;}.info-content table thead th,.complectation table thead th,.content table thead th{background:#fafafa;font-weight:500;color:#86868b;font-size:0.75rem;}.complectation-cols,.complectation-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}.complectation-grid-item{position:relative;padding:10px 12px 10px 34px;color:#424245;line-height:1.4;}.complectation-grid-item.spec-item{padding:11px 12px 11px 34px;}@media (max-width:640px){.complectation-cols,.complectation-grid{grid-template-columns:1fr;}}.content table tbody tr:nth-child(even){background:#fafafa;}.car-colour-swatch{display:inline-flex;align-items:center;gap:6px;margin-right:10px;white-space:nowrap;}.car-colour-swatch>span:first-child{display:inline-block;width:12px;height:12px;border:1px solid #d2d2d7;border-radius:50%;vertical-align:middle;}.complectation ul,.content ul{margin:0;padding:0;list-style:none;}.complectation-cols>li{position:relative;padding:10px 12px 10px 34px;margin:0;color:#424245;line-height:1.4;}.complectation-cols>li::before,.complectation-grid-item::before{content:'';position:absolute;left:14px;top:50%;width:4px;height:80%;border-radius:3px;background:var(--color-brand,#2b59d1);transform:translateY(-50%);}.content ul{padding-left:1.1rem;list-style:disc;}.content li{margin-bottom:5px;color:#424245;}.content h2,.content h3,.content h4{font-size:0.9375rem;font-weight:500;margin:14px 0 8px;color:#1d1d1f;}@media (max-width:480px){.date-picker{width:calc(100vw - 20px) !important;max-width:320px;box-sizing:border-box;padding:10px 8px 8px;}.date-picker .day{font-size:0.82rem;}.date-picker .weekdays{font-size:0.68rem;}}@media (max-width:640px){.modal-close-btn{width:36px !important;height:36px !important;font-size:22px !important;display:flex !important;align-items:center !important;justify-content:center !important;}.order-modal-close{width:38px !important;height:38px !important;font-size:1.5rem !important;display:flex !important;align-items:center !important;justify-content:center !important;top:8px !important;right:10px !important;}.order-form-title{margin-right:44px !important;}} /* === home.css === */ /* Landing */ .home-page { --home-section-pad: clamp(56px, 7vw, 100px) clamp(16px, 3vw, 32px); --home-max: 1140px; /* Слайдер: нижний край выше; зазор РґРѕ CTA */ --hero-slide-height: clamp(392px, 49vh, 512px); /* ещё +ВЅ интервала (~8px) вверх */ --hero-height: clamp(392px, 49vh, 512px); --hero-cta-gap: 5px; /* было 9px, ещё Г—0.5 */ --hero-slogan-top-extra: 40px; /* Общая ширина слогана Рё CTA (РЅРµ уже 22ch заголовка) */ --hero-content-max: min(42rem, 94vw); --hero-img-width: 100%; --hero-img-pos: center calc(50% - 25px); /* Типографика: Inter везде */ --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-slogan: var(--font-heading); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* * Цвета логотипа «Элемент» (заголовки: серый + СЃРёРЅРёР№): * ink / heading-gray — серый тон текста * logo — СЃРёРЅРёР№ силуэт авто / линии */ --color-ink: #1a1a1a; --color-heading-gray: #6b7280; --color-logo: #4567b0; --color-logo-hover: #3a58a0; --color-logo-soft: #e8eef8; --color-logo-mid: #6b86c4; --color-heading: var(--color-heading-gray); --color-brand: var(--color-logo); --color-brand-hover: var(--color-logo-hover); --color-card-accent: var(--color-logo-soft); /* liquid_glass.css .glass-card */ --liquid-glass-bg: rgba(255, 255, 255, 0.1); --liquid-glass-blur: blur(16px); --liquid-glass-border: 1px solid rgba(255, 255, 255, 0.25); --liquid-glass-radius: 20px; /* Более сдержанные тени — «серьёзный» бренд */ --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06); --shadow-lift: 0 4px 8px rgba(26, 26, 26, 0.04), 0 16px 40px rgba(26, 26, 26, 0.1); --border-subtle: 1px solid rgba(26, 26, 26, 0.08); background: #f4f5f7; color: var(--color-body, #3d3d3d); font-family: var(--font-sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Базовый текст и UI — Inter */ .home-page, .home-page button, .home-page input, .home-page select, .home-page textarea, .home-page a, .home-page p, .home-page li, .home-page span, .home-page label { font-family: var(--font-sans); } /* Заголовки: Inter Black, uppercase, двухцветные (серый + СЃРёРЅРёР№) */ .home-page h1, .home-page h2, .home-page h3, .home-page h4, .home-page:not(.catalog-app) .catalog-hero-slogan__title, .home-page .home-section-head h2, .home-page .about-split__content h2, .home-page .services-band h2, .home-page .contacts-card h2 { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; color: var(--color-heading-gray); line-height: 1.08; } /* Двухцветная типографика: серый + СЃРёРЅРёР№ логотипа */ .home-page .t-ink { color: var(--color-heading-gray); } .home-page .t-brand { color: var(--color-logo); } .home-page .t-sep { color: var(--color-logo-mid); margin: 0 0.35em; font-weight: 600; } /* Цены — выровненные цифры */ .home-page .class-card__price, .home-page .deal-card__price, .home-page .trust-bar__value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Общие параметры прозрачности РєРЅРѕРїРѕРє (как «Позвонить» / «Написать») */ .home-page { --btn-glass-bg: linear-gradient( 180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 100% ); --btn-glass-bg-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100% ); --btn-glass-border: rgba(255, 255, 255, 0.5); --btn-glass-border-hover: rgba(255, 255, 255, 0.75); --btn-glass-blur: blur(12px) saturate(140%); --btn-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(15, 23, 42, 0.08); --btn-glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(43, 89, 209, 0.12); --btn-text-color: #ffffff; --btn-text-shadow: none; } /* * Топбар — гармония композиции (как логотип): * [лого: ink+blue] В· [меню: спокойный серый] В· [телефон: СЃРёРЅРёР№ CTA] * РЎРёРЅРёР№ — СЏРєРѕСЂСЏ РїРѕ краям; центр РЅРµ «кричит» шестью заливками. */ /* Меню: светло-СЃРёРЅСЏСЏ заливка, тусклая РѕР±РІРѕРґРєР°, объём */ .home-page .site-nav-link { font-family: var(--font-sans); font-weight: 700; font-size: 0.855rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 7.6px 15.2px; line-height: 1.2; background: linear-gradient( 180deg, #f4f7fc 0%, var(--color-logo-soft) 45%, #dce6f5 100% ); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(69, 103, 176, 0.32); color: var(--color-logo); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(69, 103, 176, 0.08), 0 1px 2px rgba(69, 103, 176, 0.1), 0 3px 8px rgba(69, 103, 176, 0.12); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .home-page .site-nav-link:hover, .home-page .site-nav-link:focus-visible { background: linear-gradient( 180deg, #eef3fb 0%, #d4e0f5 45%, #c5d4ef 100% ); border-color: rgba(69, 103, 176, 0.45); color: var(--color-logo-hover); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(69, 103, 176, 0.12), 0 2px 4px rgba(69, 103, 176, 0.12), 0 6px 14px rgba(69, 103, 176, 0.18); transform: translateY(-1px); } /* Бургер: СЃРёРЅРёР№ акцент (мобильный аналог CTA) */ .home-page .site-nav-burger { background: var(--color-logo) !important; border-color: rgba(69, 103, 176, 0.5) !important; box-shadow: 0 2px 8px rgba(69, 103, 176, 0.2) !important; } .home-page .site-nav-burger:hover, .home-page .site-nav-burger:focus-visible { background: var(--color-logo-hover) !important; border-color: var(--color-logo-hover) !important; } .home-page .site-nav-burger .site-nav-burger__bar { background: #ffffff; } /* Телефон: светлая плашка + dual-color (как заголовки), СЃРёРЅРёР№ контур — СЏРєРѕСЂСЊ справа */ .home-page .site-phone { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1.5px solid rgba(69, 103, 176, 0.45); color: var(--color-heading-gray); text-shadow: none; box-shadow: 0 2px 10px rgba(69, 103, 176, 0.1); padding: 12px 20px !important; line-height: 1.25; } .home-page .site-phone .t-ink { color: var(--color-heading-gray); } .home-page .site-phone .t-brand { color: var(--color-logo); } .home-page .site-phone:hover, .home-page .site-phone:focus-visible { background: var(--color-logo-soft); border-color: var(--color-logo); color: var(--color-heading-gray); text-shadow: none; box-shadow: 0 4px 14px rgba(69, 103, 176, 0.18); transform: translateY(-1px); } .home-page .site-phone:hover .t-ink, .home-page .site-phone:focus-visible .t-ink { color: var(--color-heading-gray); } .home-page .site-phone:hover .t-brand, .home-page .site-phone:focus-visible .t-brand { color: var(--color-logo-hover); } .home-page .site-phone-block { align-items: center; gap: 0; } .home-page .site-phone-hours { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.02em; color: var(--color-heading-gray) !important; opacity: 0.85; text-shadow: none; text-align: center; align-self: center; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 0 4px !important; } /* Текст секций, карточек, футера */ .home-page .home-section-head p, .home-page .class-card__title, .home-page .class-card__price, .home-page .deal-card__title, .home-page .deal-card__price, .home-page .deal-card__more, .home-page .adv-card p, .home-page .review-card, .home-page .promo-card, .home-page .about-split__content p, .home-page .about-steps li, .home-page .service-card h3, .home-page .service-card p, .home-page .news-card, .home-page .contacts-card, .home-page .home-footer, .home-page .btn-primary, .home-page .btn-secondary { font-family: var(--font-sans); } .home-page .class-card__title, .home-page .deal-card__title, .home-page .promo-card__title, .home-page .news-card__title, .home-page .service-card h3, .home-page .review-card__name { font-weight: 700; } .home-page .btn-primary, .home-page .btn-secondary { font-weight: 700; letter-spacing: 0.02em; } .home-page .home-footer h4 { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .home-page .home-footer nav a { font-family: var(--font-sans); font-weight: 500; } .home-page .contacts-list .label { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.08em; } .home-page .contacts-list a, .home-page .contacts-list .value { font-family: var(--font-sans); font-weight: 800; } /* * Адаптив топбара: * ≥1025px — десктоп: лого | меню | телефон * ≤1024px — планшет + смартфон: бургер * ≤768px — смартфон: колонка лого / телефон / график */ .home-page { --site-header-offset: 99.83px; } .home-page .site-top-nav { /* +10% Рє высоте шапки (logo + padding) */ --site-header-logo-h: 73.2px; --site-header-pad-y: 13.31px; --site-header-offset: 99.83px; min-height: calc(var(--site-header-logo-h) + var(--site-header-pad-y) * 2); background: transparent; overflow: visible; } /* ——— Десктоп: полное меню ——— */ @media (min-width: 1025px) { .home-page .site-top-nav { height: var(--site-header-offset); min-height: var(--site-header-offset); max-height: var(--site-header-offset); padding-block: var(--site-header-pad-y); flex-direction: row; flex-wrap: nowrap; align-items: center; } .home-page .site-logo { order: 1; } .home-page .site-nav { order: 2; display: flex !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: auto; padding: 0; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .home-page .site-phone-block { order: 3; margin-left: auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; } .home-page .site-nav-burger { display: none !important; } .home-page .site-phone { padding: 12px 22px !important; } .home-page .site-phone-hours { margin-top: 10px; padding: 0 4px !important; text-align: center; } } /* ——— Планшет + смартфон: бургер ——— */ @media (max-width: 1024px) { .home-page .site-top-nav { position: fixed; overflow: visible; } /* Бургер на планшете и смартфоне */ .home-page .site-nav-burger, .home-page .site-top-nav .site-nav-burger { display: inline-flex !important; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); z-index: 12; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border-radius: 10px; cursor: pointer; touch-action: manipulation; color: #fff; background: var(--color-logo) !important; border: 1px solid rgba(69, 103, 176, 0.5) !important; box-shadow: 0 2px 8px rgba(69, 103, 176, 0.2) !important; } .home-page .site-nav-burger__bar { display: block; width: 1.125rem; height: 2px; border-radius: 1px; background: #fff; } .home-page .site-top-nav.is-nav-open .site-nav-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .home-page .site-top-nav.is-nav-open .site-nav-burger__bar:nth-child(2) { opacity: 0; } .home-page .site-top-nav.is-nav-open .site-nav-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .home-page .site-nav { order: 10; display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100%; flex: none; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 10px 14px 14px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 250, 0.97) 100% ) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border-bottom: 1px solid rgba(69, 103, 176, 0.14) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important; z-index: 11; } .home-page .site-top-nav.is-nav-open .site-nav { display: flex !important; animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .home-page .site-nav-link { width: 100%; text-align: center; justify-content: center; padding: 12px 14px !important; font-size: 0.9rem !important; box-sizing: border-box; } .home-page .site-nav-link:hover, .home-page .site-nav-link:focus-visible { transform: none; } } /* ——— Планшет: горизонтальная шапка лого | телефон | бургер ——— */ @media (min-width: 769px) and (max-width: 1024px) { .home-page { --site-header-offset: 88px; } .home-page .site-top-nav { --site-header-logo-h: 64px; --site-header-pad-y: 12px; --site-header-offset: 88px; height: var(--site-header-offset); min-height: var(--site-header-offset); max-height: none; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: var(--site-header-pad-y) 56px var(--site-header-pad-y) clamp(16px, 3vw, 24px); } .home-page .site-logo { order: 1; flex: 0 0 auto; max-width: 40%; } .home-page .site-header-right { display: block; order: 2; margin-left: auto; margin-right: 8px; } .home-page .site-phone-block { display: flex; flex-direction: column; align-items: center; gap: 0; } .home-page .site-phone { padding: 10px 16px !important; font-size: 1rem !important; } .home-page .site-phone-hours { margin-top: 6px; font-size: 0.68rem; text-align: center; } .home-page .site-nav-burger { top: 50%; right: 14px; transform: translateY(-50%); } } /* ——— Смартфон: колонка ——— */ @media (max-width: 768px) { .home-page { --site-header-offset: 128px; } .home-page .site-top-nav { --site-header-logo-h: 58px; --site-header-pad-y: 8px; --site-header-offset: 128px; height: auto; min-height: 0; max-height: none; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; row-gap: 4px; padding: 8px 48px 10px 12px; } .home-page .site-logo { order: 1; max-width: calc(100% - 3rem); } .home-page .site-header-right { display: contents; } .home-page .site-phone-block { display: contents; } .home-page .site-phone { order: 2; padding: 10px 18px !important; font-size: 1.1rem !important; } .home-page .site-phone-hours { order: 3; color: var(--color-heading-gray) !important; margin-top: 4px; text-align: center; align-self: center; } .home-page .site-nav-burger { top: 10px; right: 12px; transform: none; } } /* Убираем «фейковый» фон hero РІ шапке — blur работает РїРѕ реальному контенту */ .home-page .site-top-nav__bg { display: none; } /* Топбар: нейтральный холст (чуть холодный белый) + тонкая СЃРёРЅСЏСЏ линия бренда */ .home-page .site-top-nav__glass { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 248, 250, 0.95) 100% ); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: none; border-bottom: 1px solid rgba(69, 103, 176, 0.14); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 18px rgba(15, 23, 42, 0.05); border-radius: 0; } /* РЎРёРЅРёР№ «шов» логотипа — связывает края композиции */ .home-page .site-top-nav__glass::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, rgba(69, 103, 176, 0.55) 0%, rgba(69, 103, 176, 0.2) 35%, rgba(69, 103, 176, 0.2) 65%, rgba(69, 103, 176, 0.55) 100% ); pointer-events: none; } /* Логотип — левый СЏРєРѕСЂСЊ, полный контраст */ .home-page .site-logo { opacity: 1; filter: none; } .home-page .site-logo img { opacity: 1; filter: none; } /* Ритм зазоров РІ меню */ .home-page .site-nav { gap: 8px; } /* Мобильное выпадающее меню — та же белая заливка */ @media (max-width: 768px) { .home-page .site-top-nav.is-nav-open .site-nav { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.68) 100% ); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } } /* * Hero full-bleed: отдельный .hero-fullbleed + img object-fit:cover на 100vw */ .home-page.catalog-page:not(.catalog-app), .home-page { --hero-slide-height: clamp(392px, 49vh, 512px); --hero-height: clamp(392px, 49vh, 512px); --hero-cta-gap: 5px; --hero-img-width: 100%; --hero-img-pos: center calc(50% - 25px); --hero-slogan-top-extra: 40px; --hero-content-max: min(42rem, 94vw); } .home-page:not(.catalog-app) .catalog-hero { position: relative; width: 100%; max-width: none; min-height: var(--hero-slide-height); height: var(--hero-slide-height); /* РЅРёР·: зазор CTA ↔ край слайдера (РІ 2 раза меньше прежних 18px) */ padding: calc(var(--site-header-offset) + 24px) 0 var(--hero-cta-gap) !important; margin: 0; overflow: hidden; box-sizing: border-box; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: stretch; } /* На лендинге не используем классы слайдов каталога */ .home-page:not(.catalog-app) .catalog-hero-slides, .home-page:not(.catalog-app) .catalog-hero-slide { display: none !important; } /* Full-bleed hero track (was inline #hero-fullbleed-critical in the prototype) */ .home-page .hero-fullbleed { position: absolute !important; top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; height: var(--hero-slide-height) !important; min-height: 0 !important; max-height: var(--hero-slide-height) !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; z-index: 0 !important; overflow: hidden !important; background: transparent !important; pointer-events: none !important; } .home-page .hero-fullbleed__slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0; transition: opacity 2s ease-in-out; transform: none !important; left: 0 !important; right: 0 !important; max-width: none !important; border-radius: 0 !important; background: none !important; } .home-page .hero-fullbleed__slide.is-active { opacity: 1; z-index: 1; } .home-page .hero-fullbleed__slide img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center calc(50% + 5px) !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } /* * Scrim РІ Р·РѕРЅРµ слогана (вариант 2): * почти прозрачен РїРѕРґ топбаром (логотип), плотнее РІ Р·РѕРЅРµ слогана, РЅРёР· открыт */ .home-page:not(.catalog-app) .catalog-hero-shade { display: block !important; position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; height: var(--hero-slide-height) !important; max-height: var(--hero-slide-height) !important; z-index: 1 !important; pointer-events: none !important; /* 0% — верх (РїРѕРґ шапкой), РїРёРє затемнения — Р·РѕРЅР° слогана, 100% — РЅРёР· */ background: linear-gradient( 180deg, rgba(15, 20, 32, 0.12) 0%, rgba(15, 20, 32, 0.18) 10%, rgba(15, 20, 32, 0.58) 28%, rgba(15, 20, 32, 0.48) 42%, rgba(15, 20, 32, 0.22) 58%, rgba(15, 20, 32, 0.06) 72%, rgba(15, 20, 32, 0) 85% ) !important; } /* Слоган: fixed поверх hero, всегда читаемый */ .home-page:not(.catalog-app) .catalog-hero-slogan { position: fixed !important; top: calc(var(--site-header-offset) + 12px + var(--hero-slogan-top-extra, 40px)) !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100%; max-width: 100vw; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); box-sizing: border-box; z-index: 5 !important; opacity: 1; visibility: visible; pointer-events: none; transform: none; overflow: visible; } .home-page:not(.catalog-app) .catalog-hero-inner { position: relative; /* выше слогана (z-index: 5), чтобы панель мессенджеров была поверх */ z-index: 6; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); box-sizing: border-box; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-top: auto; flex-shrink: 0; } /* Desktop: fixed slogan overlaps the CTA bar — drop the hero bottom */ @media (min-width: 1025px) { .home-page.catalog-page:not(.catalog-app):not(.longterm-page) { --hero-slide-height: clamp(436px, 54vh, 560px); --hero-height: clamp(436px, 54vh, 560px); } } /* Планшет: слоган РІ потоке (РЅРµ fixed), чуть ниже hero */ @media (max-width: 1024px) { .home-page.catalog-page:not(.catalog-app), .home-page { --hero-slide-height: clamp(340px, 46vh, 480px); --hero-height: clamp(340px, 46vh, 480px); --hero-cta-gap: 6px; --hero-slogan-top-extra: 12px; --hero-content-max: min(36rem, 92vw); } .home-page:not(.catalog-app) .catalog-hero { padding: calc(var(--site-header-offset) + 12px) 0 var(--hero-cta-gap) !important; min-height: var(--hero-slide-height); height: auto; display: flex !important; flex-direction: column; justify-content: flex-end; } .home-page:not(.catalog-app) .catalog-hero-slogan { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: 3 !important; margin-top: 8px; margin-bottom: 10px; padding-top: 4px; order: -1; opacity: 1 !important; visibility: visible !important; transform: none !important; } .home-page:not(.catalog-app) .catalog-hero-slogan.is-slogan-hidden { opacity: 1 !important; visibility: visible !important; transform: none !important; } .home-page:not(.catalog-app) .catalog-hero-slogan__title { font-size: clamp(1.5rem, 3.8vw, 2.25rem); width: max-content; max-width: min(100%, 92vw); } .home-page:not(.catalog-app) .catalog-hero-slogan__title .t-ink, .home-page:not(.catalog-app) .catalog-hero-slogan__title .t-brand { white-space: normal; } .home-page:not(.catalog-app) .catalog-hero-shade { background: linear-gradient( 180deg, rgba(15, 20, 32, 0.1) 0%, rgba(15, 20, 32, 0.2) 14%, rgba(15, 20, 32, 0.58) 34%, rgba(15, 20, 32, 0.38) 52%, rgba(15, 20, 32, 0.1) 70%, rgba(15, 20, 32, 0) 82% ) !important; } .home-page:not(.catalog-app) .home-hero-actions { max-width: min(100%, var(--hero-content-max)); } } /* Смартфон: компактнее hero */ @media (max-width: 768px) { .home-page.catalog-page:not(.catalog-app), .home-page { --hero-slide-height: clamp(530px, 70vh, 620px); --hero-height: clamp(530px, 70vh, 620px); --hero-cta-gap: 3px; --hero-slogan-top-extra: 16px; --hero-content-max: min(94vw, 42rem); } .home-page:not(.catalog-app) .catalog-hero { padding: calc(var(--site-header-offset) + 58px) 0 var(--hero-cta-gap) !important; } .home-page:not(.catalog-app) .catalog-hero-slogan { margin-top: 8px; margin-bottom: 8px; } .home-page:not(.catalog-app) .catalog-hero-slogan__title { font-size: clamp(1.35rem, 5.5vw, 1.95rem); } .home-page:not(.catalog-app) .catalog-hero-slogan__subtitle { letter-spacing: 0.12em; font-size: 0.72rem; margin-top: 0.9rem !important; } .home-section-head h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); } } /* Слоган: плавно уезжает вверх РїСЂРё приближении следующего блока */ .home-page:not(.catalog-app) .catalog-hero-slogan { transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .home-page:not(.catalog-app) .catalog-hero-slogan__title, .home-page h1.catalog-hero-slogan__title { display: flex !important; flex-direction: column; align-items: center; gap: 0.22em; margin: 0 !important; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.18; font-size: clamp(1.65rem, 4vw, 2.75rem); /* Полные строки слогана, без обрезки */ width: max-content; max-width: min(100%, 94vw); box-sizing: border-box; overflow: visible; color: #fff; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.32); } /* Hero: светло-серый + СЃРёРЅРёР№ логотипа (читаемо РЅР° scrim) */ .home-page:not(.catalog-app) .catalog-hero-slogan__title .t-ink, .home-page:not(.catalog-app) .catalog-hero-slogan__title .t-brand { display: block; white-space: nowrap; } .home-page:not(.catalog-app) .catalog-hero-slogan__title .t-ink { color: #f0f2f5 !important; } .home-page:not(.catalog-app) .catalog-hero-slogan__title .t-brand { color: #a8c0f0 !important; text-shadow: 0 0 18px rgba(69, 103, 176, 0.4), 0 1px 2px rgba(0, 0, 0, 0.45); } .home-page:not(.catalog-app) .catalog-hero-slogan__subtitle { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; margin: 1.05rem 0 0 !important; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(0.75rem, 1.5vw, 1rem); line-height: 1.4; opacity: 1 !important; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.75), 0 3px 12px rgba(0, 0, 0, 0.55); } .home-page:not(.catalog-app) .catalog-hero-slogan__subtitle .t-ink { color: rgba(232, 234, 238, 0.95) !important; } .home-page:not(.catalog-app) .catalog-hero-slogan__subtitle .t-brand { color: #a8c0f0 !important; } .home-page:not(.catalog-app) .catalog-hero-slogan__subtitle .t-sep { color: rgba(255, 255, 255, 0.45) !important; } .home-page:not(.catalog-app) .catalog-hero-slogan.is-slogan-hidden { opacity: 0 !important; transform: translateY(-18px); pointer-events: none; visibility: hidden; } @media (max-width: 1024px) { /* Планшет/смартфон: слоган РІ потоке — РЅРµ прячем */ .home-page:not(.catalog-app) .catalog-hero-slogan.is-slogan-hidden { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* На лендинге отключаем intro-анимацию слогана, которая могла оставлять opacity:0 */ .home-page.catalog-page:not(.catalog-app).is-hero-intro-enter .catalog-hero-slogan__title, .home-page.catalog-page:not(.catalog-app).is-hero-intro-enter .catalog-hero-slogan__subtitle, .home-page.catalog-page:not(.catalog-app).is-hero-intro-exit .catalog-hero-slogan__title, .home-page.catalog-page:not(.catalog-app).is-hero-intro-exit .catalog-hero-slogan__subtitle { animation: none !important; opacity: 1 !important; transform: none !important; } /* ——— Hero CTA: белая полупрозрачная заливка ——— */ .home-hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; width: 100%; /* ширина близка Рє слогану */ max-width: var(--hero-content-max); width: 100%; box-sizing: border-box; /* margin-bottom 3px = ещё половина прежних 6px (зазор РґРѕ края слайдера) */ margin: 0 auto 3px; padding: 16px 18px; /* без isolation — иначе z-index панели мессенджеров РЅРµ выходит поверх слогана */ overflow: visible; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: none; border-radius: var(--liquid-glass-radius); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1); color: #fff; } /* дополнительный слой РЅРµ нужен — эффект РЅР° самом блоке */ .home-hero-actions__glass { display: none; } .home-hero-actions > a, .home-hero-actions > button { position: relative; z-index: 1; } .home-hero-actions > .msg-menu { position: relative; z-index: 10; } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-pill, 9999px); font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, backdrop-filter 0.2s ease; } /* Hero CTA: без чёткой РѕР±РІРѕРґРєРё — свечение Рё тень */ .home-hero-actions .btn-primary, .home-hero-actions .btn-secondary, .home-hero-actions .msg-menu__trigger { background: linear-gradient( 180deg, #8aa6db 0%, #6b8fd0 28%, #5b7ec4 55%, #4a6db8 100% ); color: #ffffff; border: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(30, 55, 110, 0.3), 0 -2px 10px rgba(255, 255, 255, 0.18), 0 -4px 16px rgba(91, 126, 196, 0.22), 0 2px 6px rgba(30, 50, 100, 0.16), 0 4px 10px rgba(40, 70, 130, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 2px rgba(25, 45, 90, 0.4); font-weight: 700; } .home-hero-actions .btn-primary { font-weight: 800; } .home-hero-actions .btn-primary:hover, .home-hero-actions .btn-secondary:hover, .home-hero-actions .msg-menu:hover .msg-menu__trigger, .home-hero-actions .msg-menu.is-open .msg-menu__trigger, .home-hero-actions .btn-primary:focus-visible, .home-hero-actions .btn-secondary:focus-visible { background: linear-gradient( 180deg, #7a99d4 0%, #5b7ec4 30%, #4567b0 58%, #3a58a0 100% ); border: none; color: #ffffff; text-shadow: 0 1px 2px rgba(25, 45, 90, 0.45); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(30, 55, 110, 0.35), 0 -3px 12px rgba(255, 255, 255, 0.22), 0 -5px 18px rgba(91, 126, 196, 0.28), 0 2px 6px rgba(30, 50, 100, 0.16), 0 4px 12px rgba(40, 70, 130, 0.16); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .home-page .site-top-nav__glass { background: rgba(255, 255, 255, 0.96); } .home-hero-actions { background: rgba(255, 255, 255, 0.4); } .btn-primary, .btn-secondary, .home-page .site-phone { background: rgba(255, 255, 255, 0.42); } .home-page .site-nav-link { background: #e8eef8; border-color: rgba(69, 103, 176, 0.32); color: #4567b0; } } /* ——— Messenger menu (Написать) ——— */ .msg-menu { position: relative; z-index: 10; display: inline-flex; flex-direction: column; align-items: center; } .msg-menu__trigger { min-width: 7.5rem; } .msg-menu__panel { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(8px) scale(0.92); display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--color-border, #cecac8); border-radius: 9999px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06); opacity: 0; visibility: hidden; pointer-events: none; /* закрытие СЃ задержкой ~0.4s — успеть навести РЅР° РёРєРѕРЅРєРё */ transition: opacity 0.2s ease 0.4s, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) 0.4s, visibility 0s linear 0.6s; z-index: 30; } /* Невидимый «мост» между РєРЅРѕРїРєРѕР№ Рё панелью — РєСѓСЂСЃРѕСЂ РЅРµ теряет hover */ .msg-menu__panel::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -16px; width: 100%; min-width: 7.5rem; height: 18px; background: transparent; } .msg-menu__panel::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: rgba(255, 255, 255, 0.96); border-right: 1px solid var(--color-border, #cecac8); border-bottom: 1px solid var(--color-border, #cecac8); transform: translateX(-50%) rotate(45deg); } .msg-menu:hover .msg-menu__panel, .msg-menu:focus-within .msg-menu__panel, .msg-menu.is-open .msg-menu__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); /* открытие сразу, без задержки */ transition-delay: 0s, 0s, 0s; } .msg-menu__item { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; text-decoration: none; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .msg-menu__item:hover, .msg-menu__item:focus-visible { transform: scale(1.1) translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2); outline: none; } .msg-menu__item svg { display: block; } .msg-menu__item--telegram { background: #229ED9; } .msg-menu__item--whatsapp { background: #25D366; } /* Градиент как Сѓ официального лого MAX */ .msg-menu__item--max { background: linear-gradient(135deg, #44ccff 0%, #5533ee 55%, #9933dd 100%); } @media (max-width: 768px) { .home-hero-actions { max-width: 100%; } .msg-menu { width: 100%; } .msg-menu__trigger { width: 100%; } /* РќР° тач-устройствах панель открывается РїРѕ .is-open (клик), hover ненадёжен */ .msg-menu:hover .msg-menu__panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(8px) scale(0.92); } .msg-menu.is-open .msg-menu__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); transition-delay: 0s, 0s, 0s; } } /* ——— Sections ——— */ .home-section { padding: var(--home-section-pad); } .home-section--tight { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); } /* Меньше зазор между «Весь автопарк» Рё «Наши преимущества» */ #deals.home-section { padding-bottom: clamp(20px, 3vw, 36px); } #advantages.home-section { padding-top: clamp(16px, 2.5vw, 28px); padding-bottom: clamp(16px, 2.5vw, 28px); } /* Меньше зазор перед «Отзывы клиентов» */ #reviews.home-section { padding-top: clamp(20px, 3vw, 36px); } /* Меньший отступ перед «Наш автопарк» (сразу после hero) */ #fleet.home-section { padding-top: clamp(12px, 2vw, 20px); } #fleet .home-section-head { margin-bottom: clamp(16px, 2.5vw, 24px); } /* Подзаголовок автопарка — РѕРґРЅР° строка РЅР° десктопе */ @media (min-width: 769px) { #fleet .home-section-head p { max-width: none; white-space: nowrap; } } .home-inner { max-width: var(--home-max); margin: 0 auto; } .home-section-head { text-align: center; margin-bottom: clamp(32px, 4.5vw, 48px); } .home-section-head h2 { position: relative; display: inline-block; margin: 0 0 14px; font-size: clamp(1.75rem, 3.6vw, 2.55rem); color: var(--color-heading-gray); line-height: 1.08; letter-spacing: -0.03em; } /* Акцентная линия РїРѕРґ заголовком секции — СЃРёРЅРёР№ логотипа */ .home-section-head h2::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; background: var(--color-logo); border-radius: 2px; } .home-section-head p { margin: 0 auto; max-width: 520px; font-size: 1.02rem; color: var(--color-muted, #6b6a68); line-height: 1.55; letter-spacing: 0.01em; } .home-section-cta { display: flex; justify-content: center; margin-top: 32px; } #deals .home-section-cta { margin-top: 24px; margin-bottom: 0; } /* CTA РЅР° светлых секциях — солидный brand-button */ .home-section:not(.promo-section):not(.services-band) .btn-primary { background: var(--color-logo); color: #fff; border-color: var(--color-logo); box-shadow: 0 2px 8px rgba(69, 103, 176, 0.28); backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none; } .home-section:not(.promo-section):not(.services-band) .btn-primary:hover, .home-section:not(.promo-section):not(.services-band) .btn-primary:focus-visible { background: var(--color-logo-hover); border-color: var(--color-logo-hover); color: #fff; box-shadow: 0 6px 18px rgba(69, 103, 176, 0.35); } .home-section:not(.promo-section):not(.services-band) .btn-secondary { background: transparent; color: var(--color-heading-gray); border-color: rgba(107, 114, 128, 0.35); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none; } .home-section:not(.promo-section):not(.services-band) .btn-secondary:hover, .home-section:not(.promo-section):not(.services-band) .btn-secondary:focus-visible { background: var(--color-logo-soft); border-color: var(--color-logo); color: var(--color-logo); box-shadow: none; } /* ——— Class cards (премиум, 7 РІ СЂСЏРґ РЅР° десктопе) ——— */ .class-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .class-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 8px 14px; min-width: 0; background: linear-gradient( 165deg, #ffffff 0%, #f7f9fc 50%, #eef3fb 100% ); border: 1px solid rgba(69, 103, 176, 0.12); border-radius: 14px; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 20px rgba(69, 103, 176, 0.05); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .class-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, rgba(69, 103, 176, 0.15) 0%, var(--color-logo) 45%, rgba(69, 103, 176, 0.9) 100% ); } .class-card::after { content: ""; position: absolute; right: -40%; top: -50%; width: 80%; height: 80%; background: radial-gradient( circle, rgba(69, 103, 176, 0.07) 0%, transparent 70% ); pointer-events: none; } .class-card:hover { transform: translateY(-3px); border-color: rgba(69, 103, 176, 0.3); box-shadow: 0 4px 10px rgba(69, 103, 176, 0.1), 0 12px 28px rgba(69, 103, 176, 0.1); } .class-card__num { position: absolute; top: 8px; left: 10px; z-index: 1; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; color: transparent; background: linear-gradient( 180deg, rgba(69, 103, 176, 0.3) 0%, rgba(69, 103, 176, 0.08) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; user-select: none; } .class-card__icon { position: relative; z-index: 1; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 0; background: transparent; border: none; box-shadow: none; } .class-card__icon img { width: 64px; height: 64px; object-fit: contain; } .home-page .class-card__title { position: relative; z-index: 1; margin: 0; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-ink); text-transform: none; } .home-page .class-card__price { position: relative; z-index: 1; margin: 0; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-logo); letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; } .home-page .class-card__price small { display: inline; margin-left: 1px; font-size: 0.62rem; font-weight: 600; color: var(--color-heading-gray); letter-spacing: 0; } .class-card:hover .class-card__title { color: var(--color-logo); } @media (max-width: 1100px) and (min-width: 769px) { .class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .class-card { padding: 20px 10px 16px; } .class-card__icon { width: 64px; height: 64px; } .class-card__icon img { width: 56px; height: 56px; } .home-page .class-card__title { font-size: 0.82rem; } } @media (max-width: 768px) { .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .class-card { padding: 18px 10px 14px; gap: 8px; } .class-card__icon { width: 60px; height: 60px; } .class-card__icon img { width: 52px; height: 52px; } .home-page .class-card__title { font-size: 0.84rem; } .home-page .class-card__price { font-size: 0.8rem; } } @media (max-width: 400px) { .class-grid { grid-template-columns: 1fr; } } /* ——— Trust bar ——— */ .trust-bar { position: relative; z-index: 2; background: #fff; border-top: 1px solid rgba(69, 103, 176, 0.14); border-bottom: var(--border-subtle); box-shadow: 0 4px 16px rgba(26, 26, 26, 0.04); } /* РЎРёРЅСЏСЏ градиентная линия — симметрия нижнему краю топбара */ .trust-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient( 90deg, rgba(69, 103, 176, 0.55) 0%, rgba(69, 103, 176, 0.2) 35%, rgba(69, 103, 176, 0.2) 65%, rgba(69, 103, 176, 0.55) 100% ); pointer-events: none; z-index: 1; } .trust-bar__inner { max-width: var(--home-max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0 clamp(12px, 2vw, 24px); } .trust-bar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; text-align: center; border-right: 1px solid rgba(26, 26, 26, 0.06); } .trust-bar__item:last-child { border-right: 0; } .trust-bar__value { font-family: var(--font-heading); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-logo); line-height: 1.15; } .trust-bar__label { font-size: 0.78rem; font-weight: 500; color: var(--color-heading-gray); letter-spacing: 0.02em; } @media (max-width: 900px) { .trust-bar__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust-bar__item:nth-child(3n) { border-right: 0; } .trust-bar__item:nth-child(-n + 3) { border-bottom: 1px solid rgba(26, 26, 26, 0.06); } } @media (max-width: 560px) { .trust-bar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-bar__item { border-right: 1px solid rgba(26, 26, 26, 0.06); } .trust-bar__item:nth-child(2n) { border-right: 0; } .trust-bar__item:nth-child(3n) { border-right: 1px solid rgba(26, 26, 26, 0.06); } .trust-bar__item:nth-child(-n + 4) { border-bottom: 1px solid rgba(26, 26, 26, 0.06); } .trust-bar__item:nth-child(5) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; } } /* ——— Brand carousel (РѕРґРЅР° строка, автопрокрутка) ——— */ .brand-band { padding: 28px 0 20px; background: transparent; overflow: hidden; } .brand-carousel { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); } .brand-carousel__track { display: flex; width: max-content; align-items: center; gap: 0; animation: brand-marquee 42s linear infinite; } .brand-carousel:hover .brand-carousel__track { animation-play-state: paused; } @keyframes brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brand-strip { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 14px 18px; padding: 8px 12px; flex-shrink: 0; } .brand-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 148px; min-height: 108px; padding: 14px 12px 12px; flex-shrink: 0; background: #fff; border: var(--border-subtle); border-radius: 14px; text-decoration: none; box-sizing: border-box; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .brand-item:hover { border-color: rgba(69, 103, 176, 0.4); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .brand-item__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; } .brand-item__logo img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(0.78); transition: filter 0.2s ease; } .brand-item:hover .brand-item__logo img { filter: grayscale(0) opacity(1); } /* Стилизованное название марки */ .brand-item__name { display: block; width: 100%; margin: 0; padding-top: 8px; border-top: 1px solid rgba(69, 103, 176, 0.12); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; line-height: 1.2; color: var(--color-heading-gray); transition: color 0.2s ease; } .brand-item:hover .brand-item__name { color: var(--color-logo); } @media (max-width: 768px) { .brand-item { width: 128px; min-height: 98px; padding: 12px 10px 10px; } .brand-item__logo { height: 40px; } .brand-item__logo img { max-height: 36px; } .brand-item__name { font-size: 0.66rem; letter-spacing: 0.1em; } .brand-carousel__track { animation-duration: 36s; } } @media (prefers-reduced-motion: reduce) { .brand-carousel__track { animation: none; } .brand-carousel { overflow-x: auto; -webkit-overflow-scrolling: touch; mask-image: none; -webkit-mask-image: none; } .brand-carousel__track .brand-strip[aria-hidden="true"] { display: none; } } /* Лучшие предложения: те же карточки, что в каталоге (.car-card) */ .deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .deal-grid__empty { grid-column: 1 / -1; margin: 0; padding: 1.5rem 0; text-align: center; color: var(--color-muted, #797776); } .home-page .deal-grid .car-card { display: flex; flex-direction: column; background: #fff; height: 100%; } .home-page .deal-grid .car-image { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-card-accent, #cfdaf5); } .home-page .deal-grid .car-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } .home-page .deal-grid .car-card-order-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--color-logo); border-color: var(--color-logo); } .home-page .deal-grid .car-card-order-btn:hover { background: var(--color-logo-hover); border-color: var(--color-logo-hover); color: #fff; animation: none; transform: scale(1.04); } .home-page .car-card .car-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; } .home-page .car-card .car-card__price { margin-left: auto; white-space: nowrap; } .home-page .car-card .car-card__footer { align-items: stretch; } .home-page .car-card .car-card-more-link, .home-page .car-card .car-card-order-btn { flex: 1 1 0; text-align: center; } .home-page .car-card .car-card-more-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.85rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.2; border: 1px solid #d5dae1; border-radius: var(--radius-pill, 9999px); background: #e8ebf0; color: #4e5563; text-decoration: none; white-space: nowrap; } .home-page .car-card .car-card-more-link:hover, .home-page .car-card .car-card-more-link:focus-visible { background: #dde1e7; border-color: #c9ced6; color: #242424; text-decoration: none; } .home-page .deal-grid .car-card:hover .car-name { color: var(--color-logo); } /* ——— Advantages ——— */ .adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .adv-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 28px; background: linear-gradient(165deg, #ffffff 0%, #f7f9fc 55%, #eef3fb 100%); border: 1px solid rgba(69, 103, 176, 0.12); border-radius: 18px; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 10px 28px rgba(69, 103, 176, 0.06); overflow: hidden; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } /* РЎРёРЅРёР№ акцент сверху */ .adv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, rgba(69, 103, 176, 0.15) 0%, var(--color-logo) 40%, rgba(69, 103, 176, 0.85) 100% ); } /* РњСЏРіРєРѕРµ свечение РІ углу */ .adv-card::after { content: ""; position: absolute; right: -30%; top: -40%; width: 70%; height: 70%; background: radial-gradient( circle, rgba(69, 103, 176, 0.09) 0%, transparent 70% ); pointer-events: none; } .adv-card:hover { transform: translateY(-4px); border-color: rgba(69, 103, 176, 0.28); box-shadow: 0 4px 12px rgba(69, 103, 176, 0.1), 0 16px 36px rgba(69, 103, 176, 0.12); } .adv-card__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 56px; } .adv-card__num { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: transparent; background: linear-gradient( 180deg, rgba(69, 103, 176, 0.28) 0%, rgba(69, 103, 176, 0.08) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; user-select: none; } .adv-card__icon { position: relative; z-index: 1; flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient( 145deg, #ffffff 0%, var(--color-logo-soft) 100% ); border: 1px solid rgba(69, 103, 176, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(69, 103, 176, 0.1); display: flex; align-items: center; justify-content: center; } .adv-card__icon img { width: 34px; height: 34px; object-fit: contain; } .home-page .adv-card__title { position: relative; z-index: 1; margin: 4px 0 0; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--color-ink); text-transform: none; } .adv-card__text { position: relative; z-index: 1; margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-heading-gray); } .adv-card__text b { color: var(--color-logo); font-weight: 700; } @media (max-width: 960px) { .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .adv-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .adv-card:hover { transform: none; } } /* ——— Reviews ——— */ .review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .review-more-btn { min-width: 10rem; } @media (max-width: 900px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } } .review-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #fff; border: var(--border-subtle); border-radius: 14px; box-shadow: var(--shadow-soft); } .review-card__head { display: flex; gap: 12px; align-items: center; } .review-card__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; color: #fff; flex-shrink: 0; overflow: hidden; } .review-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .review-card__meta { min-width: 0; } .review-card__name { margin: 0; font-size: 0.92rem; font-weight: 700; color: #374151; } .review-card__date { margin: 2px 0 0; font-size: 0.78rem; color: var(--color-muted, #797776); } .review-card__stars { color: #f5b400; font-size: 0.85rem; letter-spacing: 1px; } .review-card__text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #4a4a4a; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .review-card__source { margin-top: auto; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-logo); opacity: 0.75; } /* ——— Promo cards ——— */ .promo-section { position: relative; overflow: hidden; } .promo-section__bg { position: absolute; inset: 0; background: url("../img/bg_akcii.jpg") center / cover no-repeat; z-index: 0; } .promo-section__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.72) 100%); z-index: 1; } .promo-section .home-inner, .promo-section .home-section-head { position: relative; z-index: 2; } .promo-section .home-section-head h2 { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); } .promo-section .home-section-head h2 .t-ink { color: #ffffff; } .promo-section .home-section-head h2 .t-brand { color: #a8c0f0; } .promo-section .home-section-head h2::after { background: #a8c0f0; } .promo-section .home-section-head p { color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .promo-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } } .promo-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 24px; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.96) 100% ); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(15, 23, 42, 0.14); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, rgba(69, 103, 176, 0.25) 0%, var(--color-logo) 45%, rgba(69, 103, 176, 0.9) 100% ); } .promo-card:hover { transform: translateY(-4px); border-color: rgba(168, 192, 240, 0.65); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 18px 40px rgba(15, 23, 42, 0.2); } .promo-card--accent { background: linear-gradient( 160deg, #ffffff 0%, var(--color-logo-soft) 55%, #dce6f5 100% ); } .promo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .promo-card__tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-logo-soft); color: var(--color-logo); border: 1px solid rgba(69, 103, 176, 0.18); } .promo-card__tag--sale { background: var(--color-logo); color: #fff; border-color: var(--color-logo); box-shadow: 0 2px 8px rgba(69, 103, 176, 0.28); } .promo-card__date { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-heading-gray); opacity: 0.85; } .home-page .promo-card__title { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--color-ink); line-height: 1.3; letter-spacing: -0.02em; text-transform: none; } .promo-card__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-heading-gray); flex: 1; } .promo-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(69, 103, 176, 0.12); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-logo); transition: gap 0.18s ease, color 0.18s ease; } .promo-card:hover .promo-card__more { gap: 10px; color: var(--color-logo-hover); } .promo-section .home-section-cta { position: relative; z-index: 2; } /* РќР° тёмных баннерах — стеклянные РєРЅРѕРїРєРё (РЅРµ solid) */ .promo-section .btn-secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; } .promo-section .btn-secondary:hover, .promo-section .btn-secondary:focus-visible { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.7); color: #fff; } /* ——— About split ——— */ .about-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; } .about-split__content { order: -1; } .about-split__media { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 12px rgba(26, 26, 26, 0.06), 0 16px 40px rgba(69, 103, 176, 0.12); border: 1px solid rgba(69, 103, 176, 0.12); background: var(--color-logo-soft); aspect-ratio: 4 / 3; } .about-split__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 145deg, rgba(69, 103, 176, 0.12) 0%, transparent 42%, rgba(15, 20, 32, 0.18) 100% ); } .about-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .about-split__visual { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .about-split__cta { width: 100%; box-sizing: border-box; } .about-split__content h2 { margin: 0 0 16px; font-size: clamp(1.55rem, 3vw, 2.15rem); color: var(--color-heading-gray); line-height: 1.08; letter-spacing: -0.03em; } .about-split__content h2 .t-ink { display: block; } .about-split__content h2 .t-brand { display: block; } .about-split__content p { margin: 0 0 12px; font-size: 0.98rem; line-height: 1.65; color: var(--color-body, #3d3d3d); } .about-steps { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .about-steps li { position: relative; padding: 14px 16px 14px 52px; background: #fff; border: var(--border-subtle); border-radius: 12px; font-size: 0.92rem; line-height: 1.45; box-shadow: var(--shadow-soft); } .about-steps li::before { content: attr(data-step); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; background: var(--color-logo); color: #fff; font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* ——— Services band ——— */ .services-band { position: relative; overflow: hidden; color: #fff; } .services-band__bg { position: absolute; inset: 0; background: url("../img/serv_bg.jpg") center / cover no-repeat; z-index: 0; } .services-band__shade { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(26, 26, 26, 0.88) 0%, rgba(69, 103, 176, 0.62) 100%); z-index: 1; } .services-band .home-inner { position: relative; z-index: 2; } .services-band h2 { display: block; text-align: center; margin: 0 0 28px; font-size: clamp(1.75rem, 3.6vw, 2.55rem); color: #fff; line-height: 1.08; letter-spacing: -0.03em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } .services-band h2 .t-ink { color: #ffffff; } .services-band h2 .t-brand { color: #a8c0f0; } .services-band h2::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; background: #a8c0f0; border-radius: 2px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .service-card { padding: 26px 22px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; backdrop-filter: blur(12px); transition: background 0.2s ease, border-color 0.2s ease; } .service-card:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(168, 192, 240, 0.35); } .service-card h3 { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .service-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); } /* ——— News (РІ блоке акций) ——— */ .news-block { position: relative; z-index: 2; margin-top: 32px; } .news-block__label { margin: 0 0 14px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(168, 192, 240, 0.95); text-align: center; } .news-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 800px) { .news-row { grid-template-columns: 1fr; } } .news-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; background: #fff; border: var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .news-card:hover { transform: translateY(-3px); border-color: rgba(69, 103, 176, 0.35); box-shadow: var(--shadow-lift); } .news-card--on-dark { position: relative; background: linear-gradient( 160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100% ); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; } .news-card--on-dark::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient( 180deg, #a8c0f0 0%, var(--color-logo) 100% ); opacity: 0.85; } .news-card--on-dark:hover { background: linear-gradient( 160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100% ); border-color: rgba(168, 192, 240, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.16); } .news-card--on-dark .news-card__date { color: #a8c0f0; } .home-page .news-card--on-dark .news-card__title, .home-page .news-card--on-dark .news-card__text { color: #fff; font-weight: 500; text-transform: none; } .news-card--on-dark .news-card__more { color: #a8c0f0; } .news-card--on-dark:hover .news-card__more { color: #fff; } .news-card__date { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-logo); } .home-page .news-card__title, .news-card__text { margin: 0; font-size: 0.95rem; font-weight: 500; color: #374151; line-height: 1.45; letter-spacing: 0; flex: 1; text-transform: none; } .news-card--on-dark .news-card__text { color: #fff; } .news-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-logo); transition: gap 0.18s ease, color 0.18s ease; } .news-card:hover .news-card__more { gap: 10px; } /* ——— FAQ (SEO) ——— */ .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: #fff; border: 1px solid rgba(69, 103, 176, 0.12); border-radius: 14px; box-shadow: var(--shadow-soft); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .faq-item[open] { border-color: rgba(69, 103, 176, 0.28); box-shadow: var(--shadow-lift); } .faq-item summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); position: relative; padding-right: 48px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-item summary::before, .faq-item summary::after { content: ""; position: absolute; top: 50%; } .faq-item summary::before { right: 18px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--color-logo-soft); } .faq-item summary::after { right: 26px; width: 12px; height: 12px; margin-top: -6px; background-image: linear-gradient(var(--color-logo), var(--color-logo)), linear-gradient(var(--color-logo), var(--color-logo)); background-position: center, center; background-repeat: no-repeat, no-repeat; background-size: 12px 2px, 2px 12px; transition: background-size 0.28s ease; } .faq-item[open] summary::after { background-size: 12px 2px, 2px 0; } .faq-item__body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } } .faq-item p { margin: 0; padding: 0 20px 18px; font-size: 0.95rem; line-height: 1.55; color: var(--color-heading-gray); } .faq-item p b { color: var(--color-logo); } .faq-item a { color: var(--color-logo); font-weight: 700; text-decoration: none; } .faq-item a:hover { text-decoration: underline; } /* ——— Contacts ——— */ .contacts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: stretch; } .contacts-grid--triple { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); } .contacts-card { padding: 28px 24px; background: #fff; border: var(--border-subtle); border-radius: 14px; box-shadow: var(--shadow-soft); } .contacts-card h2 { margin: 0 0 18px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--color-heading-gray); line-height: 1.08; letter-spacing: -0.03em; } .contacts-card h2::after { content: ""; display: block; width: 40px; height: 3px; margin: 12px 0 0; background: var(--color-logo); border-radius: 2px; } .contacts-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .contacts-list li { display: flex; flex-direction: column; gap: 3px; } .contacts-list .label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-logo); opacity: 0.85; } .contacts-list a, .contacts-list .value { font-size: 1.02rem; font-weight: 700; color: #374151; text-decoration: none; letter-spacing: -0.01em; } .contacts-list a:hover { color: var(--color-logo); } .contacts-note { font-weight: 500; color: var(--color-muted, #797776); font-size: 0.88rem; } /* Форма обратного Р·РІРѕРЅРєР° */ .contacts-form__lead { margin: -6px 0 18px; font-size: 0.92rem; color: var(--color-heading-gray); line-height: 1.45; } .contacts-form { display: flex; flex-direction: column; gap: 14px; } .contacts-form__field { display: flex; flex-direction: column; gap: 6px; } .contacts-form__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-logo); } .contacts-form input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 10px; font-size: 1rem; font-weight: 500; color: #1f2937; background: #fafbfc; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .contacts-form input::placeholder { color: #9ca3af; font-weight: 400; } .contacts-form input:focus { border-color: var(--color-logo); background: #fff; box-shadow: 0 0 0 3px rgba(69, 103, 176, 0.15); } .contacts-form__submit { width: 100%; margin-top: 4px; border: none; } .contacts-form__note { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--color-muted, #797776); } .contacts-form__success { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--color-logo-soft); color: var(--color-logo); font-size: 0.9rem; font-weight: 600; } .contacts-form.is-sent .contacts-form__success { display: block; } .contacts-card--form { display: flex; flex-direction: column; } #callback { scroll-margin-top: calc(var(--site-header-offset, 88px) + 12px); } .contacts-page .contacts-form__messengers { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; min-height: 72px; } .contacts-map { position: relative; border-radius: 14px; overflow: hidden; border: var(--border-subtle); box-shadow: var(--shadow-soft); min-height: 320px; height: 100%; background: var(--color-logo-soft); } .contacts-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } @media (max-width: 768px) { .contacts-map { min-height: 280px; height: 280px; } } /* ——— Footer ——— */ .home-footer { position: relative; isolation: isolate; overflow: hidden; padding: 48px clamp(16px, 3vw, 32px) 32px; background: linear-gradient(180deg, rgba(214, 226, 248, 0.1) 0%, transparent 18%), #32363d; box-shadow: inset 0 1px 0 rgba(186, 210, 245, 0.34); color: rgba(255, 255, 255, 0.78); } .home-footer::before, .home-footer::after { content: ""; position: absolute; z-index: 0; inset: -35%; pointer-events: none; background-repeat: no-repeat; } .home-footer::before { background-image: radial-gradient(ellipse 38% 46% at 30% 40%, rgba(110, 165, 255, 0.72), transparent 68%), radial-gradient(ellipse 32% 42% at 72% 62%, rgba(52, 92, 220, 0.66), transparent 70%); background-size: 150% 160%, 140% 150%; animation: home-footer-drift-a 17s ease-in-out infinite; } .home-footer::after { background-image: radial-gradient(ellipse 30% 40% at 58% 28%, rgba(196, 216, 255, 0.5), transparent 68%), radial-gradient(ellipse 36% 44% at 18% 74%, rgba(72, 128, 240, 0.58), transparent 70%); background-size: 160% 150%, 135% 170%; animation: home-footer-drift-b 23s ease-in-out infinite; } .home-footer > * { position: relative; z-index: 1; } @keyframes home-footer-drift-a { 0% { transform: translate3d(-6%, -4%, 0) scale(1); background-position: 8% 18%, 78% 82%; } 27% { transform: translate3d(7%, 5%, 0) scale(1.08); background-position: 46% 74%, 18% 24%; } 54% { transform: translate3d(2%, -8%, 0) scale(0.96); background-position: 82% 28%, 64% 88%; } 78% { transform: translate3d(-8%, 6%, 0) scale(1.05); background-position: 22% 86%, 90% 16%; } 100% { transform: translate3d(-6%, -4%, 0) scale(1); background-position: 8% 18%, 78% 82%; } } @keyframes home-footer-drift-b { 0% { transform: translate3d(8%, 3%, 0) scale(1.04); background-position: 72% 8%, 12% 78%; } 33% { transform: translate3d(-9%, 7%, 0) scale(0.94); background-position: 14% 62%, 84% 22%; } 61% { transform: translate3d(5%, -6%, 0) scale(1.1); background-position: 88% 76%, 28% 92%; } 84% { transform: translate3d(-3%, -9%, 0) scale(1); background-position: 36% 14%, 6% 40%; } 100% { transform: translate3d(8%, 3%, 0) scale(1.04); background-position: 72% 8%, 12% 78%; } } @media (prefers-reduced-motion: reduce) { .home-footer::before, .home-footer::after { animation: none; } } .home-footer__inner { max-width: var(--home-max); margin: 0 auto; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 36px; } .home-footer__brand img { height: 48px; width: auto; object-fit: contain; margin-bottom: 14px; opacity: 0.95; } .home-footer__brand p { margin: 0; font-size: 0.9rem; line-height: 1.55; max-width: 300px; color: rgba(255, 255, 255, 0.65); } .home-footer h4 { margin: 0 0 14px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9bb4e8; } .home-footer nav { display: flex; flex-direction: column; gap: 10px; } .home-footer nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.94rem; font-weight: 500; transition: color 0.15s ease; } .home-footer nav a:hover { color: #a8c0f0; } .home-footer__messengers { display: flex; gap: 10px; margin-top: 16px; } .home-footer__messengers a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #a8c0f0; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .home-footer__messengers a:hover { background: rgba(69, 103, 176, 0.35); border-color: rgba(168, 192, 240, 0.45); color: #fff; } .home-footer__bottom { max-width: var(--home-max); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; } .home-footer__legal { max-width: var(--home-max); margin: 16px auto 0; font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.32); } .home-footer__legal p { margin: 0 0 6px; } .home-footer__legal p:last-child { margin-bottom: 0; } /* ——— Планшет / смартфон: сетки Рё блоки ——— */ @media (max-width: 1024px) { .home-page { overflow-x: hidden; } .class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .services-grid { grid-template-columns: 1fr; } .about-split { grid-template-columns: 1fr; gap: 24px; } .about-split__content { order: 0; } .about-split__visual { max-width: 520px; margin: 0 auto; width: 100%; } .about-split__media { max-width: none; margin: 0; width: 100%; } .contacts-grid--triple { grid-template-columns: 1fr 1fr; } .contacts-map { grid-column: 1 / -1; min-height: 300px; height: 300px; } .home-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; } .home-section { padding-left: clamp(14px, 3vw, 24px); padding-right: clamp(14px, 3vw, 24px); } } @media (max-width: 768px) { .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deal-grid { grid-template-columns: 1fr; } .adv-grid { grid-template-columns: 1fr; } .review-grid { grid-template-columns: 1fr; } .promo-grid, .news-row { grid-template-columns: 1fr; } .about-split, .contacts-grid, .contacts-grid--triple, .home-footer__inner { grid-template-columns: 1fr; } .home-hero-actions { max-width: 100%; flex-direction: column; gap: 10px; padding: 14px 14px; box-sizing: border-box !important; } .home-hero-actions .btn-primary, .home-hero-actions .btn-secondary, .home-hero-actions .msg-menu { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; } .home-hero-actions .msg-menu { align-items: stretch !important; } .home-hero-actions .msg-menu__trigger { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; } .btn-primary, .btn-secondary { width: 100% !important; box-sizing: border-box !important; } .home-footer__brand p { max-width: none; } .contacts-map { grid-column: auto; min-height: 260px; height: 260px; } .home-section-head h2 { font-size: clamp(1.45rem, 5.5vw, 1.85rem); } } @media (max-width: 560px) { .trust-bar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Короткие hover-переходы — «серьёзный» бренд */ .deal-card, .class-card, .promo-card, .news-card, .adv-card, .btn-primary, .btn-secondary, .brand-item { transition-duration: 0.18s; } @media (prefers-reduced-motion: reduce) { .deal-card, .class-card, .promo-card, .news-card, .btn-primary, .btn-secondary { transition: none; } .deal-card:hover, .class-card:hover, .promo-card:hover { transform: none; } } /* ========================================================= Premium motion: compact top bar + scroll reveal ========================================================= */ /* —— Top bar: smooth height / logo / chrome on scroll —— */ .home-page .site-top-nav { transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), padding 0.38s cubic-bezier(0.22, 1, 0.36, 1), row-gap 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease; } .home-page .site-top-nav__glass { transition: background 0.38s ease, box-shadow 0.38s ease, backdrop-filter 0.38s ease, -webkit-backdrop-filter 0.38s ease; } .home-page .site-logo img { transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1); } .home-page .site-phone { transition: padding 0.38s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.38s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .home-page .site-phone-hours { transition: opacity 0.28s ease, max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), margin 0.38s ease, transform 0.38s ease; max-height: 2.5rem; overflow: hidden; } .home-page .site-nav-link { transition: padding 0.38s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.38s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, color 0.22s ease; } /* Compact state — desktop */ @media (min-width: 1025px) { .home-page .site-top-nav.is-compact { --site-header-logo-h: 52px; --site-header-pad-y: 7px; --site-header-offset: 66px; height: var(--site-header-offset); min-height: var(--site-header-offset); max-height: var(--site-header-offset); } .home-page .site-top-nav.is-compact .site-phone { padding: 8px 16px !important; font-size: 0.95rem; } .home-page .site-top-nav.is-compact .site-phone-hours { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(-4px); pointer-events: none; } .home-page .site-top-nav.is-compact .site-nav-link { padding: 6px 12px !important; font-size: 0.78rem; } .home-page .site-top-nav.is-compact .site-top-nav__glass { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 250, 0.97) 100% ); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 28px rgba(15, 23, 42, 0.1); } } /* Compact state — tablet */ @media (min-width: 769px) and (max-width: 1024px) { .home-page .site-top-nav.is-compact { --site-header-logo-h: 48px; --site-header-pad-y: 7px; --site-header-offset: 62px; height: var(--site-header-offset); min-height: var(--site-header-offset); } .home-page .site-top-nav.is-compact .site-phone { padding: 7px 14px !important; font-size: 0.92rem !important; } .home-page .site-top-nav.is-compact .site-phone-hours { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(-4px); pointer-events: none; } } /* Compact state — smartphone */ @media (max-width: 768px) { .home-page .site-top-nav.is-compact { --site-header-logo-h: 46px; --site-header-pad-y: 6px; padding: 6px 48px 8px 12px; row-gap: 2px; } .home-page .site-top-nav.is-compact .site-phone { padding: 8px 14px !important; font-size: 1rem !important; } .home-page .site-top-nav.is-compact .site-phone-hours { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(-4px); pointer-events: none; } /* Keep open mobile menu stable while compact */ .home-page .site-top-nav.is-compact.is-nav-open .site-phone-hours { opacity: 0; } } /* —— Scroll reveal: fade + rise (stagger via --reveal-delay) —— Hidden only after JS marks .js-reveal-ready — no FOUC/flicker. .js-reveal-init disables transitions while the initial hidden state is applied. */ .home-page .reveal { --reveal-distance: 28px; } .home-page.js-reveal-ready .reveal { transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .home-page.js-reveal-init .reveal { transition: none !important; transition-delay: 0ms !important; } .home-page.js-reveal-ready .reveal:not(.is-inview) { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); will-change: opacity, transform; } .home-page.js-reveal-ready .reveal.reveal--left:not(.is-inview) { transform: translate3d(calc(var(--reveal-distance) * -0.85), 0, 0); } .home-page.js-reveal-ready .reveal.reveal--right:not(.is-inview) { transform: translate3d(calc(var(--reveal-distance) * 0.85), 0, 0); } .home-page.js-reveal-ready .reveal.reveal--scale:not(.is-inview) { transform: translate3d(0, 16px, 0) scale(0.96); } .home-page .reveal.is-inview { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .home-page .site-top-nav, .home-page .site-top-nav__glass, .home-page .site-logo img, .home-page .site-phone, .home-page .site-phone-hours, .home-page .site-nav-link { transition: none !important; } .home-page.js-reveal-ready .reveal:not(.is-inview), .home-page .reveal { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; } .home-page .back-to-top, .home-page .btn-magnetic, .home-page .site-nav-link.is-active { transition: none !important; } .home-page .btn-magnetic { transform: none !important; } } /* ========================================================= Premium: scroll-spy В· back-to-top В· counters В· magnetic ========================================================= */ /* —— Scroll-spy: active nav item —— */ .home-page .site-nav-link.is-active { background: linear-gradient( 180deg, #6b8fd0 0%, #5b7ec4 40%, #4567b0 100% ); border-color: rgba(58, 88, 160, 0.65); color: #ffffff; text-shadow: 0 1px 1px rgba(25, 45, 90, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(30, 55, 110, 0.2), 0 2px 6px rgba(69, 103, 176, 0.28), 0 6px 16px rgba(69, 103, 176, 0.22); transform: translateY(-1px); } .home-page .site-nav-link.is-active:hover, .home-page .site-nav-link.is-active:focus-visible { background: linear-gradient( 180deg, #5b7ec4 0%, #4567b0 45%, #3a58a0 100% ); border-color: rgba(58, 88, 160, 0.8); color: #ffffff; transform: translateY(-1px); } @media (max-width: 1024px) { .home-page .site-nav-link.is-active { transform: none; } } /* —— Back to top —— */ .home-page .back-to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 280; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: none; border-radius: 50%; color: #fff; background: linear-gradient( 180deg, #6b8fd0 0%, #5b7ec4 45%, #4567b0 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(69, 103, 176, 0.35), 0 10px 28px rgba(15, 23, 42, 0.16); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 12px, 0) scale(0.92); transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease; } .home-page .back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); } .home-page .back-to-top:hover, .home-page .back-to-top:focus-visible { background: linear-gradient( 180deg, #5b7ec4 0%, #4567b0 50%, #3a58a0 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(69, 103, 176, 0.42), 0 14px 32px rgba(15, 23, 42, 0.18); outline: none; } .home-page .back-to-top:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px rgba(69, 103, 176, 0.35), 0 6px 18px rgba(69, 103, 176, 0.42); } .home-page .back-to-top svg { display: block; } @media (max-width: 560px) { .home-page .back-to-top { width: 44px; height: 44px; right: 12px; bottom: 16px; } } /* —— Magnetic buttons (desktop / fine pointer) —— */ @media (hover: hover) and (pointer: fine) { .home-page .btn-magnetic { --mx: 0px; --my: 0px; transform: translate3d(var(--mx), var(--my), 0); transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; will-change: transform; } .home-page .btn-magnetic.is-magnetic-active { transition: transform 0.08s linear, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } /* Override plain hover lift while magnetic is driving transform */ .home-page .btn-magnetic:hover, .home-page .btn-magnetic:focus-visible { transform: translate3d(var(--mx), var(--my), 0); } /* Homepage: no pointer-follow, same slight lift as nav */ .home-page:not(.catalog-app) .btn-magnetic, .home-page:not(.catalog-app) .btn-magnetic:hover, .home-page:not(.catalog-app) .btn-magnetic:focus-visible, .home-page:not(.catalog-app) .btn-magnetic.is-magnetic-active { transform: none; will-change: auto; } .home-page:not(.catalog-app) .home-hero-actions .btn-primary:hover, .home-page:not(.catalog-app) .home-hero-actions .btn-secondary:hover, .home-page:not(.catalog-app) .home-hero-actions .btn-primary:focus-visible, .home-page:not(.catalog-app) .home-hero-actions .btn-secondary:focus-visible, .home-page:not(.catalog-app) .home-hero-actions .msg-menu:hover .msg-menu__trigger, .home-page:not(.catalog-app) .home-hero-actions .msg-menu.is-open .msg-menu__trigger { transform: translateY(-1px); } /* Filter hero controls: lift like nav, never follow the pointer */ .home-page.catalog-app .catalog-search-glass .btn-magnetic, .home-page.catalog-app .catalog-search-glass .btn-magnetic:hover, .home-page.catalog-app .catalog-search-glass .btn-magnetic:focus-visible, .home-page.catalog-app .catalog-search-glass .btn-magnetic.is-magnetic-active { transform: none; will-change: auto; } .home-page.catalog-app .catalog-search-glass .filter-toggle-btn:hover, .home-page.catalog-app .catalog-search-glass .filter-toggle-btn:focus-visible, .home-page.catalog-app .catalog-search-glass .catalog-reset-btn:hover, .home-page.catalog-app .catalog-search-glass .catalog-reset-btn:focus-visible, .home-page.catalog-app .catalog-search-glass .catalog-search-submit:hover, .home-page.catalog-app .catalog-search-glass .catalog-search-submit:focus-visible { transform: translateY(-1px); } } /* === catalog extras === */ /* ========================================================= Catalog — hero/slogan as landing + CTA-style filters ========================================================= */ /* —— Brand tokens —— */ .home-page.catalog-app { --color-brand: #4567b0; --color-brand-hover: #3a58a0; --color-logo: #4567b0; --color-logo-hover: #3a58a0; --color-logo-soft: #e8eef8; --color-logo-mid: #6b86c4; --color-heading-gray: #6b7280; --color-card-accent: #e8eef8; --catalog-bg: #f4f5f7; --color-border: #d5dbe6; --glass-hover-bg: rgba(69, 103, 176, 0.08); --glass-hover-border: rgba(69, 103, 176, 0.35); --glass-active-border: var(--color-brand); /* Hero metrics — exact match with landing (home.css) */ --hero-slide-height: clamp(392px, 49vh, 512px); --hero-height: clamp(392px, 49vh, 512px); --hero-cta-gap: 5px; --hero-img-width: 100%; --hero-img-pos: center calc(50% - 25px); --hero-slogan-top-extra: 40px; --hero-content-max: min(42rem, 94vw); background: var(--catalog-bg); color: var(--color-body, #3d3d3d); font-family: var(--font-sans); } /* —— Hero layout (mirror landing home.css) —— */ .home-page.catalog-app .catalog-hero { position: relative; width: 100%; max-width: none; min-height: var(--hero-slide-height); height: var(--hero-slide-height); padding: calc(var(--site-header-offset) + 24px) 0 var(--hero-cta-gap) !important; margin: 0; overflow: hidden; box-sizing: border-box; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: stretch; } .home-page.catalog-app .catalog-hero-slides, .home-page.catalog-app .catalog-hero-slide { display: none !important; } .home-page.catalog-app .hero-fullbleed { top: 0 !important; bottom: auto !important; height: var(--hero-slide-height) !important; min-height: 0 !important; max-height: var(--hero-slide-height) !important; } .home-page.catalog-app .hero-fullbleed__slide img { object-position: center calc(50% - 25px) !important; } .home-page.catalog-app .catalog-hero-shade { display: block !important; position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; height: var(--hero-slide-height) !important; max-height: var(--hero-slide-height) !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(15, 20, 32, 0.12) 0%, rgba(15, 20, 32, 0.18) 10%, rgba(15, 20, 32, 0.58) 28%, rgba(15, 20, 32, 0.48) 42%, rgba(15, 20, 32, 0.22) 58%, rgba(15, 20, 32, 0.06) 72%, rgba(15, 20, 32, 0) 85% ) !important; } /* Slogan — exact landing style */ .home-page.catalog-app .catalog-hero-slogan { position: fixed !important; top: calc(var(--site-header-offset) + 12px + var(--hero-slogan-top-extra, 40px)) !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100%; max-width: 100vw; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); box-sizing: border-box; z-index: 5 !important; opacity: 1; visibility: visible; pointer-events: none; transform: none; overflow: visible; transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .home-page.catalog-app .catalog-hero-slogan__title, .home-page.catalog-app h1.catalog-hero-slogan__title { display: flex !important; flex-direction: column; align-items: center; gap: 0.22em; margin: 0 !important; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.18; font-size: clamp(1.65rem, 4vw, 2.75rem); width: max-content; max-width: min(100%, 94vw); box-sizing: border-box; overflow: visible; color: #fff; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.32); animation: none !important; transform: none !important; } .home-page.catalog-app .catalog-hero-slogan__title .t-ink, .home-page.catalog-app .catalog-hero-slogan__title .t-brand { display: block; white-space: nowrap; } .home-page.catalog-app .catalog-hero-slogan__title .t-ink { color: #f0f2f5 !important; } .home-page.catalog-app .catalog-hero-slogan__title .t-brand { color: #a8c0f0 !important; text-shadow: 0 0 18px rgba(69, 103, 176, 0.4), 0 1px 2px rgba(0, 0, 0, 0.45); } .home-page.catalog-app .catalog-hero-slogan__subtitle { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; margin: 1.05rem 0 0 !important; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(0.75rem, 1.5vw, 1rem); line-height: 1.4; opacity: 1 !important; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.75), 0 3px 12px rgba(0, 0, 0, 0.55); animation: none !important; transform: none !important; } .home-page.catalog-app .catalog-hero-slogan__subtitle .t-ink { color: rgba(232, 234, 238, 0.95) !important; } .home-page.catalog-app .catalog-hero-slogan__subtitle .t-brand { color: #a8c0f0 !important; } .home-page.catalog-app .catalog-hero-slogan__subtitle .t-sep { color: rgba(255, 255, 255, 0.45) !important; margin: 0 0.35em; } .home-page.catalog-app .catalog-hero-slogan.is-slogan-hidden { opacity: 0 !important; transform: translateY(-18px); pointer-events: none; visibility: hidden; } .home-page.catalog-app .catalog-hero-inner { position: relative; z-index: 6; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); box-sizing: border-box; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-top: auto; flex-shrink: 0; display: flex; justify-content: center; align-items: flex-end; } /* ========================================================= Filter panel — same liquid-glass shell as landing CTA ========================================================= */ .home-page.catalog-app .catalog-search-glass { display: inline-flex; flex-direction: column; align-items: stretch; position: relative; overflow: visible; width: auto; max-width: calc(100% - 24px); margin: 0 auto 3px; padding: 16px 18px; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: none; border-radius: var(--liquid-glass-radius, 20px); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1); color: #fff; transition: transform 0.25s ease, width 0.25s ease, max-width 0.25s ease; } /* Hide layered glass — effect is on the panel itself (like CTA) */ .home-page.catalog-app .catalog-search-glass__bg, .home-page.catalog-app .catalog-search-glass__glass { display: none !important; } .home-page.catalog-app .catalog-search-glass:not(.is-expanded):hover { transform: scale(1.02); } .home-page.catalog-app .catalog-search-glass.is-expanded { display: flex; width: min(66.667vw, 800px); max-width: calc(100% - 24px); padding: 16px 18px; transform: none; } /* Toolbar selects — soft white glass controls */ .home-page.catalog-app .catalog-toolbar-sort, .home-page.catalog-app .catalog-filter-select { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-pill, 9999px); color: var(--color-heading-gray, #6b7280); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(15, 23, 42, 0.08); } .home-page.catalog-app .catalog-toolbar-sort:focus, .home-page.catalog-app .catalog-filter-select:focus { outline: none; border-color: rgba(69, 103, 176, 0.45); box-shadow: 0 0 0 3px rgba(69, 103, 176, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08); } /* «Фильтр»: голубовато-белая объёмная (как пункты меню) */ .home-page.catalog-app .filter-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 12px 22px; border-radius: var(--radius-pill, 9999px); font-size: 0.9rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; color: var(--color-logo, #4567b0); text-shadow: none; background: linear-gradient( 180deg, #ffffff 0%, #f4f7fc 28%, #e8eef8 58%, #dce6f5 100% ); border: 1px solid rgba(69, 103, 176, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 2px 3px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(69, 103, 176, 0.1), inset 0 -2px 4px rgba(69, 103, 176, 0.06), 0 1px 2px rgba(69, 103, 176, 0.1), 0 4px 12px rgba(69, 103, 176, 0.16), 0 8px 20px rgba(69, 103, 176, 0.1); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .home-page.catalog-app .filter-toggle-btn:hover, .home-page.catalog-app .filter-toggle-btn:focus-visible { color: var(--color-logo-hover, #3a58a0); background: linear-gradient( 180deg, #ffffff 0%, #eef3fb 30%, #dce6f5 62%, #cddaf0 100% ); border-color: rgba(69, 103, 176, 0.48); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(69, 103, 176, 0.12), inset 0 -2px 5px rgba(69, 103, 176, 0.08), 0 2px 4px rgba(69, 103, 176, 0.12), 0 6px 16px rgba(69, 103, 176, 0.2), 0 12px 28px rgba(69, 103, 176, 0.12); outline: none; } .home-page.catalog-app .filter-toggle-btn:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(69, 103, 176, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(69, 103, 176, 0.12); } /* CTA-blue: «Сбросить» Рё РїРѕРёСЃРє */ .home-page.catalog-app .catalog-reset-btn, .home-page.catalog-app .catalog-search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 12px 22px; border-radius: var(--radius-pill, 9999px); border: none; font-size: 0.9rem; font-weight: 700; line-height: 1.2; cursor: pointer; color: #ffffff; background: linear-gradient( 180deg, #8aa6db 0%, #6b8fd0 28%, #5b7ec4 55%, #4a6db8 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(30, 55, 110, 0.3), 0 -2px 10px rgba(255, 255, 255, 0.18), 0 -4px 16px rgba(91, 126, 196, 0.22), 0 2px 6px rgba(30, 50, 100, 0.16), 0 4px 10px rgba(40, 70, 130, 0.14); text-shadow: 0 1px 2px rgba(25, 45, 90, 0.4); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .home-page.catalog-app .catalog-reset-btn:hover, .home-page.catalog-app .catalog-reset-btn:focus-visible, .home-page.catalog-app .catalog-search-submit:hover, .home-page.catalog-app .catalog-search-submit:focus-visible { background: linear-gradient( 180deg, #7a99d4 0%, #5b7ec4 30%, #4567b0 58%, #3a58a0 100% ); color: #ffffff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(30, 55, 110, 0.35), 0 -3px 12px rgba(255, 255, 255, 0.22), 0 -5px 18px rgba(91, 126, 196, 0.28), 0 2px 6px rgba(30, 50, 100, 0.16), 0 4px 12px rgba(40, 70, 130, 0.16); } /* Search field inside expanded panel */ .home-page.catalog-app .catalog-search-field { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--radius-pill, 9999px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 10px rgba(15, 23, 42, 0.08); overflow: hidden; } .home-page.catalog-app .catalog-search-input { background: transparent; color: var(--color-ink, #1a1a1a); font-weight: 600; } .home-page.catalog-app .catalog-search-input::placeholder { color: var(--color-heading-gray, #6b7280); opacity: 0.85; } .home-page.catalog-app .filter-available-only { color: rgba(255, 255, 255, 0.95); font-weight: 600; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35); } .home-page.catalog-app .filter-available-only input { accent-color: var(--color-brand); } /* Filter cards — translucent white on glass */ .home-page.catalog-app .filter-dark-card, .home-page.catalog-app .filter-panel .flex-1.min-w-0:not(.filter-dark-card) { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(15, 23, 42, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .home-page.catalog-app .filter-dark-card__title, .home-page.catalog-app .filter-section-title { color: var(--color-heading-gray); font-weight: 700; letter-spacing: 0.04em; } .home-page.catalog-app .filter-pill, .home-page.catalog-app .year-tag, .home-page.catalog-app .filter-dark-card .filter-pill { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(69, 103, 176, 0.22); color: var(--color-logo); font-weight: 600; border-radius: var(--radius-pill, 9999px); } .home-page.catalog-app .filter-pill:hover:not(.disabled), .home-page.catalog-app .year-tag:hover:not(.disabled), .home-page.catalog-app .filter-dark-card .filter-pill:hover:not(.disabled) { background: var(--color-logo-soft); border-color: rgba(69, 103, 176, 0.45); color: var(--color-brand); } .home-page.catalog-app .filter-pill.active, .home-page.catalog-app .year-tag.active, .home-page.catalog-app .filter-dark-card .filter-pill.active { background: linear-gradient( 180deg, #6b8fd0 0%, #5b7ec4 45%, #4567b0 100% ); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(69, 103, 176, 0.28); } /* —— Cards —— */ .home-page.catalog-app .car-card { border: 1px solid rgba(69, 103, 176, 0.1); border-radius: 16px; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 10px 28px rgba(69, 103, 176, 0.06); overflow: hidden; background: #fff; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .home-page.catalog-app .car-card:hover { border-color: rgba(69, 103, 176, 0.22); box-shadow: 0 4px 8px rgba(26, 26, 26, 0.04), 0 16px 36px rgba(69, 103, 176, 0.12); transform: translateY(-2px); } .home-page.catalog-app .car-card:hover .car-name { color: var(--color-brand); } .home-page.catalog-app .car-image { background: var(--color-card-accent); } .home-page.catalog-app .car-card-order-btn { background: var(--color-brand); border-color: var(--color-brand); color: #fff; font-weight: 700; border-radius: var(--radius-pill, 9999px); } .home-page.catalog-app .car-card-order-btn:hover, .home-page.catalog-app .car-card-order-btn:focus-visible { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: #fff; animation: none; transform: scale(1.04); } .home-page .car-card .car-card-order-btn.is-order-loading, .home-page .car-card .car-card-order-btn.is-order-loading:hover, .home-page .car-card .car-card-order-btn.is-order-loading:focus, .home-page .car-card .car-card-order-btn.is-order-loading:focus-visible, .home-page.catalog-app .car-card-order-btn.is-order-loading, .home-page.catalog-app .car-card-order-btn.is-order-loading:hover, .home-page.catalog-app .car-card-order-btn.is-order-loading:focus-visible { position: relative; color: transparent; cursor: progress; opacity: 1; transform: none; animation: none; transition: none; pointer-events: none; } .home-page .car-card .car-card-order-btn.is-order-loading::after, .home-page.catalog-app .car-card-order-btn.is-order-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } @media (prefers-reduced-motion: reduce) { .home-page .car-card .car-card-order-btn.is-order-loading::after, .home-page.catalog-app .car-card-order-btn.is-order-loading::after { animation: none; border-color: rgba(255, 255, 255, 0.9); border-right-color: transparent; } } .home-page.catalog-app .car-card-more-link { background: #e8ebf0; border-color: #d5dae1; color: #4e5563; font-weight: 600; } .home-page.catalog-app .car-card-more-link:hover { background: #dde1e7; border-color: #c9ced6; color: #242424; } .home-page.catalog-app .catalog-results-count { color: var(--color-heading-gray); font-weight: 500; } .home-page.catalog-app .catalog-main { padding-top: 28px; padding-bottom: 48px; transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* —— Modal —— */ .home-page.catalog-app .modal-order-btn, .home-page.catalog-app .modal-order-btn.is-active { background: var(--color-brand); border-color: var(--color-brand); } .home-page.catalog-app .modal-order-btn.is-active:hover { background: var(--color-brand-hover); } /* Catalog: thin preview (photo + tariffs). Full specs live on the product page. */ #car-modal:not(.is-detail-page) .modal-body { display: none; } #car-modal.is-detail-page .modal-page-btn { display: none; } .modal-sidebar-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; flex-shrink: 0; } .modal-sidebar-actions .modal-order-btn, .modal-sidebar-actions .modal-page-btn { width: 100%; max-width: none; } .modal-page-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 12px 16px; border: 1px solid #d5dae1; border-radius: 8px; background: #e8ebf0; color: #4e5563; font-size: 0.95rem; font-weight: 600; text-decoration: none; text-align: center; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .modal-page-btn:hover, .modal-page-btn:focus-visible { background: #dde1e7; color: #242424; border-color: #c9ced6; outline: none; } @media (min-width: 1025px) { #car-modal:not(.is-detail-page) .modal-sidebar-actions { flex-direction: row; align-items: stretch; } #car-modal:not(.is-detail-page) .modal-sidebar-actions .modal-order-btn, #car-modal:not(.is-detail-page) .modal-sidebar-actions .modal-page-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; width: auto; margin: 0; } } #car-modal .modal-content, #car-modal.is-detail-page .modal-content, #car-modal.is-detail-page .modal-close-bar { max-width: 1200px; } .home-page #product-permalink-page { padding-top: calc(var(--site-header-offset, 100px) + 16px); } .grent-breadcrumbs { margin: 0 0 12px; font-size: 0.8125rem; line-height: 1.4; color: #5f5f64; } .grent-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; } .grent-breadcrumbs__item { display: inline-flex; align-items: center; max-width: 100%; } .grent-breadcrumbs__item:not(:last-child)::after { content: "›"; margin: 0 8px; color: #8e8e93; font-weight: 400; } .grent-breadcrumbs__link { color: var(--color-brand, #2b59d1); text-decoration: none; } .grent-breadcrumbs__link:hover, .grent-breadcrumbs__link:focus-visible { text-decoration: underline; } .grent-breadcrumbs__current { color: #5f5f64; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(420px, 100%); } #product-permalink-page .modal-close-bar { display: none; } #car-modal.is-detail-page .modal-content { max-height: none; overflow: visible; overflow-x: hidden; } #car-modal.is-detail-page .modal-close-bar { position: static; top: auto; z-index: auto; justify-content: flex-start; margin-bottom: 0; padding: 0 0 8px; background: transparent; } #car-modal.is-detail-page .modal-close-btn { width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--color-brand, #2b59d1); font-size: 0.875rem; font-weight: 600; line-height: 1.3; box-shadow: none; backdrop-filter: none; } #car-modal.is-detail-page .modal-close-btn:hover { background: none; color: var(--color-brand-hover, #2349b0); transform: none; box-shadow: none; text-decoration: underline; } #car-modal.is-detail-page .modal-title { padding-top: 4px; } @media (max-width: 768px) { .home-page #product-permalink-page { padding-top: calc(var(--site-header-offset, 128px) + 12px); } } .home-page #product-permalink-page, #car-modal.is-detail-page { overflow-x: hidden; } #car-modal .slider-nav { max-width: 100%; overflow: hidden; } #car-modal:not(.is-detail-page) .modal-content { border-radius: var(--radius-ui, 16px); } #car-modal .modal-title { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 4px 56px 6px; text-align: center; } #car-modal .modal-hero { min-width: 0; max-width: 100%; } #car-modal .modal-sidebar { box-sizing: border-box; min-width: 0; padding-left: 5px; padding-right: 5px; } @media (min-width: 641px) { #car-modal .modal-slider-section, #car-modal .modal-sidebar { box-sizing: border-box; min-width: 0; } #car-modal .modal-sidebar { padding-left: 5px !important; padding-right: 5px !important; border-left: none !important; } } #car-modal .modal-tariffs-panel, #car-modal .tariff-panel, #car-modal #modal-tariffs-limited, #car-modal #modal-tariffs-unlimited { min-width: 0; max-width: 100%; } #car-modal .modal-tariffs-panel { overflow-x: auto; border: 0; box-shadow: none; } #car-modal .tariff-footnote { display: flex; flex-direction: column; gap: 6px; } #car-modal .tariff-footnote-insurance { display: block; font-weight: 400; } @media (min-width: 641px) { #car-modal .modal-hero { display: flex; flex-direction: row; align-items: stretch; height: auto; max-height: none; } #car-modal .modal-slider-section { display: flex; flex-direction: column; width: 50%; flex: 0 0 50%; height: auto; max-height: none; overflow: visible; } #car-modal .slider-viewport { flex: 1 1 auto; min-height: 360px; height: auto; touch-action: pan-y; } #car-modal .modal-sidebar { width: 50%; flex: 0 0 50%; height: auto; overflow: visible; } #car-modal .modal-tariffs-panel { flex: 0 0 auto; margin-bottom: 8px; } #car-modal .tariff-footnote { margin-top: 0; padding: 8px 8px; } #car-modal .modal-sidebar-actions { margin-top: 0; } #car-modal .slider-nav { flex: 0 0 auto; width: 100%; } #car-modal .slider-thumbs { width: 100%; box-sizing: border-box; justify-content: flex-start; gap: 8px; padding: 10px 12px 12px; overflow-x: auto; scroll-behavior: smooth; } #car-modal .slider-thumb { flex: 0 0 auto; width: 72px; min-width: 72px; height: 52px; } } #car-modal .slider-viewport { touch-action: pan-y; } #car-modal .modal-quick-specs { font-size: 0.8rem; line-height: 1.45; gap: 6px 8px; } #car-modal .quick-spec-value { padding: 2px 7px; } .quick-spec-value .quick-spec-link { color: var(--color-brand, #2b59d1); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .quick-spec-value .quick-spec-link:hover, .quick-spec-value .quick-spec-link:focus-visible { color: var(--color-brand-hover, #2349b0); } @media (max-width: 640px) { #car-modal .modal-slider-section { height: auto !important; max-height: none !important; overflow: visible; } #car-modal .slider-viewport { flex: 0 0 auto; height: clamp(220px, 42vh, 360px); min-height: 220px; } } #car-modal table.tarifs { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; font-size: 0.75rem; } #car-modal table.tarifs th, #car-modal table.tarifs td { padding: 8px 2px; box-sizing: border-box; border-left: none !important; border-right: none !important; } #car-modal table.tarifs thead th:first-child, #car-modal table.tarifs td.tariff-row-label { width: 2.5rem; padding-left: 0 !important; padding-right: 2px; white-space: normal; line-height: 1.15; font-size: 0.65rem; } #car-modal table.tarifs tbody td:not(.tariff-row-label) { white-space: nowrap; } #car-modal .tariff-hscroll__next { display: none; } #car-modal .tariff-hscroll__chevron { display: block; width: 8px; height: 8px; margin-left: -3px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); } @media (max-width: 768px) { #car-modal .modal-tariffs-panel { overflow-x: hidden; } #car-modal .tariff-hscroll { display: flex; align-items: stretch; min-width: 0; } #car-modal .tariff-hscroll__track { flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } #car-modal .tariff-hscroll__track::-webkit-scrollbar { display: none; } #car-modal .tariff-hscroll__next { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; margin: 0; padding: 0; border: 0; border-left: 1px solid #d8dee8; background: var(--color-brand, #2b59d1); color: #fff; cursor: pointer; } #car-modal .tariff-hscroll__next[hidden] { display: none; } #car-modal .tariff-hscroll__next:hover, #car-modal .tariff-hscroll__next:focus-visible { background: var(--color-brand-hover, #2349b0); outline: none; } #car-modal table.tarifs { width: max-content; min-width: 100%; max-width: none; table-layout: auto; } #car-modal table.tarifs th, #car-modal table.tarifs td { min-width: 22vw; } #car-modal table.tarifs thead th:first-child, #car-modal table.tarifs td.tariff-row-label { position: sticky; left: 0; z-index: 2; width: 3.4rem; min-width: 3.4rem; max-width: 3.4rem; } #car-modal table.tarifs thead th:first-child { z-index: 3; background: #f8f9fc; } #car-modal table.tarifs td.tariff-row-label { background: #fff; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { #car-modal .tariff-hscroll__track { scroll-behavior: auto; } } table.tarifs tbody td.tariff-row-label, .spec-label, .section-empty, .table-empty, .info-content table thead th, .complectation table thead th, .content table thead th { color: #5f5f64; } table.tarifs tbody td.is-empty { color: #8e8e93; } .home-page.catalog-app .tariff-tab.active, .home-page.catalog-app .info-tab.active { color: #fff; border-color: var(--color-brand); } .home-page.catalog-app .catalog-app-footer { margin-top: 24px; } /* —— Responsive (mirror landing) —— */ @media (max-width: 1024px) { .home-page.catalog-app { --hero-slide-height: clamp(340px, 46vh, 480px); --hero-height: clamp(340px, 46vh, 480px); --hero-cta-gap: 6px; --hero-slogan-top-extra: 12px; --hero-content-max: min(36rem, 92vw); } .home-page.catalog-app .catalog-hero { padding: calc(var(--site-header-offset) + 12px) 0 var(--hero-cta-gap) !important; min-height: var(--hero-slide-height); height: auto; display: flex !important; flex-direction: column; justify-content: flex-end; } .home-page.catalog-app .catalog-hero-slogan { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: 3 !important; margin-top: 8px; margin-bottom: 10px; padding-top: 4px; order: -1; opacity: 1 !important; visibility: visible !important; transform: none !important; } .home-page.catalog-app .catalog-hero-slogan.is-slogan-hidden { opacity: 1 !important; visibility: visible !important; transform: none !important; } .home-page.catalog-app .catalog-hero-slogan__title { font-size: clamp(1.5rem, 3.8vw, 2.25rem); width: max-content; max-width: min(100%, 92vw); } .home-page.catalog-app .catalog-hero-slogan__title .t-ink, .home-page.catalog-app .catalog-hero-slogan__title .t-brand { white-space: normal; } .home-page.catalog-app .catalog-hero-shade { background: linear-gradient( 180deg, rgba(15, 20, 32, 0.1) 0%, rgba(15, 20, 32, 0.2) 14%, rgba(15, 20, 32, 0.58) 34%, rgba(15, 20, 32, 0.38) 52%, rgba(15, 20, 32, 0.1) 70%, rgba(15, 20, 32, 0) 82% ) !important; } .home-page.catalog-app .catalog-search-glass { max-width: min(100%, var(--hero-content-max)); } .home-page.catalog-app .catalog-search-glass.is-expanded { width: 100%; max-width: min(100%, 800px); } } @media (max-width: 768px) { .home-page.catalog-app { --hero-slide-height: clamp(530px, 70vh, 620px); --hero-height: clamp(530px, 70vh, 620px); --hero-cta-gap: 3px; --hero-slogan-top-extra: 16px; --hero-content-max: min(94vw, 42rem); } .home-page.catalog-app .catalog-hero { padding: calc(var(--site-header-offset) + 58px) 0 var(--hero-cta-gap) !important; } .home-page.catalog-app .catalog-hero-slogan { margin-top: 8px; margin-bottom: 8px; } .home-page.catalog-app .catalog-hero-slogan__title { font-size: clamp(1.35rem, 5.5vw, 1.95rem); } .home-page.catalog-app .catalog-hero-slogan__subtitle { letter-spacing: 0.12em; font-size: 0.72rem; margin-top: 0.9rem !important; } .home-page.catalog-app .filter-toggle-btn, .home-page.catalog-app .catalog-reset-btn, .home-page.catalog-app .catalog-search-submit { padding: 10px 16px; font-size: 0.85rem; } } @media (min-width: 1025px) { .home-page.catalog-app { --hero-slide-height: clamp(480px, 54vh, 560px); --hero-height: clamp(480px, 54vh, 560px); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .home-page.catalog-app .catalog-search-glass { background: rgba(255, 255, 255, 0.88); } } @media (prefers-reduced-motion: reduce) { .home-page.catalog-app .car-card, .home-page.catalog-app .hero-fullbleed__slide, .home-page.catalog-app .catalog-hero-slogan, .home-page.catalog-app .catalog-search-glass { transition: none !important; } .home-page.catalog-app .car-card:hover, .home-page.catalog-app .catalog-search-glass:not(.is-expanded):hover { transform: none; } } /* Адаптивный стеклянный фильтр СЃ размытым изображением hero (РЅР° всех устройствах) */ /* Показываем фоновые размытые слои для раскрытого фильтра */ .home-page.catalog-app .catalog-search-glass.is-expanded { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: hidden !important; } .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__bg, .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass { display: block !important; } /* Движущаяся подложка фильтра: светлые белый, серебро, графит и синий кузовов */ .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass { overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, transparent 24%), #f4f7fb !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(176, 196, 218, 0.55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 40px rgba(48, 72, 112, 0.08) !important; } .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass::before, .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass::after { content: ""; position: absolute; z-index: 0; inset: -35%; pointer-events: none; background-repeat: no-repeat; } .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass::before { background-image: radial-gradient(ellipse 38% 46% at 30% 40%, rgba(255, 255, 255, 0.92), transparent 68%), radial-gradient(ellipse 34% 42% at 74% 58%, rgba(170, 198, 224, 0.7), transparent 70%), radial-gradient(ellipse 28% 36% at 48% 78%, rgba(214, 210, 186, 0.42), transparent 72%); background-size: 150% 160%, 140% 150%, 130% 140%; animation: home-footer-drift-a 17s ease-in-out infinite; } .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass::after { background-image: radial-gradient(ellipse 30% 40% at 58% 26%, rgba(214, 220, 228, 0.8), transparent 68%), radial-gradient(ellipse 36% 44% at 16% 70%, rgba(188, 196, 208, 0.62), transparent 70%), radial-gradient(ellipse 24% 32% at 86% 18%, rgba(240, 234, 206, 0.36), transparent 72%); background-size: 160% 150%, 135% 170%, 125% 140%; animation: home-footer-drift-b 23s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass::before, .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__glass::after { animation: none; } } /* Пауза, пока блок за экраном, окно свёрнуто или вкладка неактивна */ .home-footer:not(.is-motion-on)::before, .home-footer:not(.is-motion-on)::after, .home-page.catalog-app .catalog-search-glass.is-expanded:not(.is-motion-on) .catalog-search-glass__glass::before, .home-page.catalog-app .catalog-search-glass.is-expanded:not(.is-motion-on) .catalog-search-glass__glass::after { animation-play-state: paused; } /* Делаем внутренние карточки белыми полупрозрачными для эффекта многослойного стекла */ .home-page.catalog-app .filter-dark-card, .home-page.catalog-app .filter-panel .flex-1.min-w-0:not(.filter-dark-card) { background: linear-gradient( 165deg, rgba(255, 255, 255, 0.88) 0%, rgba(220, 232, 244, 0.62) 100% ) !important; border: 1px solid rgba(186, 204, 222, 0.45) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } /* Корректируем цвета текстов для отличной читаемости РЅР° белом стекле */ .home-page.catalog-app .filter-dark-card__title, .home-page.catalog-app .filter-section-title { color: #0f172a !important; /* темный slate */ text-shadow: none !important; } .home-page.catalog-app .filter-available-only { color: #1e293b !important; } /* Ограничение ширины поля "Упорядочить" РІ режиме планшета */ @media (min-width: 769px) and (max-width: 1024px) { .home-page.catalog-app { --sort-field-width: calc(20.25rem - 3ch); } } /* Раскрываем высоту контейнера hero РїРѕ контенту РїСЂРё раскрытии фильтра, чтобы РѕРЅ автоматически отодвигал СЃРїРёСЃРѕРє товаров РІРЅРёР·, РїСЂРё этом размеры фонового слайдера (.hero-fullbleed) остаются фиксированными */ .home-page.catalog-app:has(.catalog-search-glass.is-expanded) .catalog-hero { justify-content: flex-start !important; height: auto !important; min-height: var(--hero-slide-height) !important; max-height: none !important; overflow: visible !important; padding-top: calc(var(--site-header-offset) + 60px) !important; /* Смещаем фильтр ниже РѕС‚ топбара */ padding-bottom: 24px !important; } .home-page.catalog-app:has(.catalog-search-glass.is-expanded) .catalog-hero-inner { justify-content: flex-start !important; margin-top: 0 !important; } /* Сжатие шапки (топбара) РїСЂРё раскрытом фильтре */ .catalog-page:has(.catalog-search-glass.is-expanded) { --site-header-offset: 58px !important; } .catalog-page:has(.catalog-search-glass.is-expanded) .site-top-nav { --site-header-pad-y: 6px !important; --site-header-logo-h: 46px !important; min-height: 0 !important; } @media (min-width: 769px) { .catalog-page:has(.catalog-search-glass.is-expanded) .site-phone { font-size: 1.05rem !important; padding: 4px 10px !important; } .catalog-page:has(.catalog-search-glass.is-expanded) .site-phone-hours { font-size: 0.62rem !important; } } /* Скрытие слогана РїСЂРё раскрытии фильтра для СЌРєРѕРЅРѕРјРёРё места Рё приближения Рє топбару */ .catalog-page:has(.catalog-search-glass.is-expanded) .catalog-hero-slogan { opacity: 0 !important; visibility: hidden !important; transform: translateY(-20px) !important; pointer-events: none !important; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important; } /* Изображение РїРѕРґ раскрытым фильтром делаем темнее СЃ уменьшением контрастности */ .home-page.catalog-app .catalog-search-glass.is-expanded .catalog-search-glass__bg { filter: brightness(0.55) contrast(0.65) !important; } /* Поднимаем раскрытый фильтр выше РЅР° смартфонах */ @media (max-width: 768px) { .home-page.catalog-app:has(.catalog-search-glass.is-expanded) .catalog-hero { padding-top: calc(var(--site-header-offset) + 12px) !important; } } /* Contacts page — offset under fixed header */ .contacts-page .contacts-page-main { padding-top: calc(var(--site-header-offset, 88px) + 1.5rem); padding-bottom: 2rem; background: var(--catalog-bg, #f6f3f1); } .contacts-page .contacts-page-main .home-section { padding-top: 1.5rem; } /* Required fields: shake + message (form-style-1) */ :root { --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: cubic-bezier(0.22, 1, 0.36, 1); --revert-hold: 3000ms; --revert-dur: 280ms; } .t-input { transition: border-color 150ms ease-out; will-change: transform; } .t-input.is-error { transition: border-color var(--revert-dur, 280ms) ease-out; } .t-error-msg { margin: 0; max-height: 0; overflow: hidden; color: #e11d48; font-size: 0.82rem; font-weight: 500; line-height: 1.35; opacity: 0; visibility: hidden; transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms), max-height var(--revert-dur, 280ms) ease-out, margin-top var(--revert-dur, 280ms) ease-out; } .t-input-wrap.is-error .t-error-msg { margin-top: 6px; max-height: 4.5em; opacity: 1; visibility: visible; transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s, max-height var(--revert-dur, 280ms) ease-out, margin-top var(--revert-dur, 280ms) ease-out; } .t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; } @keyframes t-input-shake { 0% { transform: translateX(0); animation-timing-function: var(--shake-ease); } 28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); } 57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); } 78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); } 100% { transform: translateX(0); } } .contacts-form .t-input.is-error, .order-form .order-label .t-input.is-error, .order-form .date-field.t-input.is-error, .order-form .order-captcha .t-input.is-error { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12); transition: border-color var(--revert-dur, 280ms) ease-out, box-shadow var(--revert-dur, 280ms) ease-out; } .order-captcha .t-input, .order-fieldset--rent > .t-input { border: 1px solid transparent; border-radius: 10px; } .order-form .order-fieldset--rent > .t-input.is-error { border-color: #e11d48; transition: border-color var(--revert-dur, 280ms) ease-out; } @media (prefers-reduced-motion: reduce) { .t-input { animation: none !important; transform: none !important; } } .longterm-page { padding-top: 0; background: var(--catalog-bg, #f6f3f1); } main.longterm-page { padding-top: calc(var(--site-header-offset, 88px) + 8px); } .longterm-page .home-section { padding-top: clamp(12px, 2vw, 28px); padding-bottom: clamp(20px, 3vw, 40px); } .longterm-page .longterm-intro { padding-top: 0; } .longterm-head { margin-bottom: 1.25rem; } .longterm-head h1 { margin: 0 0 14px; font-size: clamp(1.75rem, 3.6vw, 2.55rem); } .tariffs-page .tariff-switch { max-width: 980px; margin: 0 auto; padding: 10px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-ui, 0 0 10px rgba(0, 0, 0, 0.08)); } .tariffs-page .info-tabs { display: flex; gap: 6px; margin: 0; padding: 5px; background: var(--catalog-bg, #f6f3f1); border-radius: 10px; align-items: stretch; } .tariffs-page .info-tab { flex: 1 1 0; min-width: 0; text-transform: none; letter-spacing: 0; font-weight: 600; line-height: 1.3; } .tariffs-page .info-tab:not(.active) { background: transparent; color: var(--color-brand, #2b59d1); border-color: transparent; box-shadow: none; } .tariffs-page .info-tab.active { background: var(--color-brand, #2b59d1); color: #fff; border-color: var(--color-brand, #2b59d1); box-shadow: 0 2px 6px rgba(43, 89, 209, 0.28); } .tariffs-page .longterm-head p { max-width: none; white-space: nowrap; } .tariffs-page .info-panel { padding-top: 0; } .tariffs-page .info-panel > .longterm-block { padding-top: 6px; padding-bottom: 8px; } .tariffs-page .info-panel > .longterm-block:first-child { padding-top: 3px; } .tariffs-page .info-panel > .longterm-block:first-child + .longterm-block { padding-top: 13px; } .tariffs-page .info-panel .longterm-lead { max-width: 1080px; margin-bottom: 1rem; } .tariffs-page .longterm-included-block { padding-top: 28px; } @media (max-width: 720px) { .tariffs-page .longterm-head p { white-space: normal; } } .longterm-head h1::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; background: var(--color-logo, #4567b0); border-radius: 2px; } .longterm-lead { max-width: 760px; margin: 0 auto 1.5rem; text-align: center; color: var(--color-body, #3d3d3d); font-size: 1.02rem; line-height: 1.6; } .longterm-subhead { margin: 0 0 0.9rem; text-align: center; font-size: 1rem; letter-spacing: 0.04em; } .longterm-included { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 12px 16px; margin: 0 auto 1.75rem; padding: 0; list-style: none; } .longterm-included li { margin: 0; padding: 14px 16px 14px 2.1rem; background: #fff; border: 1px solid var(--color-border, #cecac8); border-radius: var(--radius-card, 16px); box-shadow: var(--shadow-ui, 0 0 10px rgba(0, 0, 0, 0.08)); text-align: left; font-size: 0.92rem; line-height: 1.4; color: var(--color-text, #242424); position: relative; white-space: nowrap; } .longterm-included li::before { content: ""; position: absolute; left: 16px; top: 1.15rem; width: 7px; height: 7px; border-radius: 50%; background: var(--color-logo, #4567b0); } .longterm-classes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .longterm-class-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border: 1px solid var(--color-border, #cecac8); border-radius: var(--radius-pill, 999px); color: var(--color-text, #242424); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .longterm-class-link img { width: 28px; height: 28px; object-fit: contain; } .longterm-class-link:hover { border-color: var(--color-logo, #4567b0); color: var(--color-logo, #4567b0); } .longterm-class-title { margin: 0 0 14px; text-align: center; font-size: clamp(1.25rem, 2.4vw, 1.7rem); scroll-margin-top: calc(var(--site-header-offset, 88px) + 12px); } .longterm-block { scroll-margin-top: calc(var(--site-header-offset, 88px) + 8px); } .longterm-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-border, #cecac8); border-radius: var(--radius-card, 16px); box-shadow: var(--shadow-ui, 0 0 10px rgba(0, 0, 0, 0.08)); } .longterm-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.92rem; color: var(--color-text, #242424); } .longterm-table--wide { min-width: 1080px; } .longterm-table th, .longterm-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #e8e4e1; font-variant-numeric: tabular-nums; } .longterm-table thead th { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-logo, #4567b0); background: #f8f6f4; } .longterm-table thead th span { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-muted, #797776); } .longterm-table tbody th { text-align: left; font-weight: 600; } .longterm-table tbody th a { color: var(--color-text, #242424); text-decoration: none; } .longterm-table tbody th a:hover { color: var(--color-logo, #4567b0); } .longterm-table tbody tr:last-child th, .longterm-table tbody tr:last-child td { border-bottom: 0; } .longterm-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .longterm-points article { margin: 0; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--color-border, #cecac8); border-radius: var(--radius-card, 16px); box-shadow: var(--shadow-ui, 0 0 10px rgba(0, 0, 0, 0.08)); } .longterm-points h3 { margin: 0 0 8px; font-size: 1rem; } .longterm-points p { margin: 0; font-size: 0.92rem; line-height: 1.5; } .longterm-empty { margin: 0; text-align: center; color: var(--color-muted, #797776); } @media (max-width: 800px) { .longterm-points { grid-template-columns: 1fr; } } @media (max-width: 480px) { .longterm-included { grid-template-columns: 1fr; } .longterm-included li { white-space: normal; } } /* Product card on phones: info tabs in two rows, tighter side inset. */ @media (max-width: 768px) { #car-modal.is-detail-page .modal-body { padding-left: 8px; padding-right: 8px; } #car-modal.is-detail-page .info-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; } #car-modal.is-detail-page .info-tab { min-width: 0; padding: 9px 8px; } #car-modal.is-detail-page #modal-rent-conditions .rent_block { padding-left: 10px; padding-right: 10px; } #car-modal.is-detail-page #modal-rent-conditions .rent-intro { padding-left: 8px; padding-right: 8px; } #car-modal.is-detail-page .spec-item, #car-modal.is-detail-page .info-content table th, #car-modal.is-detail-page .info-content table td, #car-modal.is-detail-page .complectation table th, #car-modal.is-detail-page .complectation table td, #car-modal.is-detail-page .content table th, #car-modal.is-detail-page .content table td { padding-left: 8px; padding-right: 8px; } } /* Dropdowns in the primary menu. Desktop opens on hover. At max-width 1024px only .is-open shows children. */ .home-page .site-nav-drop { position: relative; display: inline-flex; align-items: center; } .home-page .site-nav-drop__toggle { display: none; } .home-page .site-nav-drop__panel { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; padding: 10px 8px 8px; background: #fff; border: 1px solid rgba(69, 103, 176, 0.16); border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); z-index: 40; } .home-page #site-nav-drop-terms { left: auto; right: 0; } .home-page .site-nav-drop:hover > .site-nav-drop__panel, .home-page .site-nav-drop:focus-within > .site-nav-drop__panel, .home-page .site-nav-drop.is-open > .site-nav-drop__panel { display: flex; flex-direction: column; gap: 2px; } .home-page .site-nav-drop__panel a { display: block; padding: 9px 12px; border-radius: 8px; color: #242424; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; line-height: 1.3; text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap; } .home-page .site-nav-drop__panel a:hover, .home-page .site-nav-drop__panel a:focus-visible { background: #eef3fb; color: var(--color-logo, #4567b0); } .home-page .site-nav-drop__panel a[aria-current="page"] { background: #e4ecf8; color: var(--color-logo, #4567b0); } @media (min-width: 1025px) { .home-page .site-top-nav { overflow: visible; } } @media (max-width: 1024px) { .home-page .site-nav-drop { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 4px; } .home-page .site-nav-drop > .site-nav-link { width: 100%; flex: 1 1 auto; } .home-page .site-nav-drop__panel, .home-page .site-nav-drop:hover > .site-nav-drop__panel, .home-page .site-nav-drop:focus-within > .site-nav-drop__panel { display: none; position: static; width: 100%; min-width: 0; padding: 2px 0 4px; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .home-page .site-nav-drop.is-open > .site-nav-drop__panel, .home-page .site-nav-drop.is-open:hover > .site-nav-drop__panel, .home-page .site-nav-drop.is-open:focus-within > .site-nav-drop__panel { display: flex; flex-direction: column; gap: 2px; } .home-page .site-nav-drop__panel a { text-align: center; white-space: normal; } } /* Смартфон: без вложенных пунктов. «О нас» и «Условия аренды» — обычные ссылки. */ @media (max-width: 768px) { .home-page .site-nav-drop__panel, .home-page .site-nav-drop:hover > .site-nav-drop__panel, .home-page .site-nav-drop:focus-within > .site-nav-drop__panel, .home-page .site-nav-drop.is-open > .site-nav-drop__panel, .home-page .site-nav-drop.is-open:hover > .site-nav-drop__panel, .home-page .site-nav-drop.is-open:focus-within > .site-nav-drop__panel { display: none !important; } } main.info-page { padding-top: calc(var(--site-header-offset, 88px) + 8px); padding-bottom: 48px; background: var(--catalog-bg, #f6f3f1); color: var(--color-text, #242424); } .info-page__inner { padding-inline: clamp(16px, 3vw, 32px); } .info-page__title { margin: 8px 0 16px; font-size: clamp(1.75rem, 3.6vw, 2.4rem); line-height: 1.15; color: var(--color-heading, #000); } .info-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .info-subnav a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(69, 103, 176, 0.22); color: var(--color-logo, #4567b0); font-weight: 700; font-size: 0.88rem; line-height: 1.2; text-decoration: none; } .info-subnav a:hover, .info-subnav a:focus-visible { border-color: var(--color-logo, #4567b0); background: #eef3fb; } .info-subnav a[aria-current="page"] { background: var(--color-brand, #2b59d1); border-color: var(--color-brand, #2b59d1); color: #fff; } .info-page__content { max-width: 760px; font-size: 1rem; line-height: 1.6; } .info-page__content h2 { margin: 1.4rem 0 0.6rem; font-size: 1.25rem; line-height: 1.25; } .info-page__content p { margin: 0 0 0.85rem; } .info-page__content ul { margin: 0 0 1rem; padding-left: 1.2rem; } .info-page__content li + li { margin-top: 0.3rem; } .info-page__content a:not(.btn-primary) { color: var(--color-brand, #2b59d1); } .info-page__content img { max-width: 100%; height: auto; border-radius: 12px; } .info-page__date { margin: -0.4rem 0 1.2rem; color: var(--color-muted, #6b6a68); font-size: 0.92rem; } .feed-list { display: grid; gap: 16px; } .feed-list .news-card, .feed-list .promo-card { text-decoration: none; } .feed-list .news-card__text { margin: 0; font-size: 0.95rem; font-weight: 500; color: #374151; line-height: 1.45; text-transform: none; } .feed-list .news-card__more { border-top-color: rgba(55, 65, 81, 0.12); } .info-team { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 8px; } .info-team li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--color-border, #cecac8); border-radius: 12px; } .info-team span { color: var(--color-muted, #797776); font-size: 0.92rem; } .info-page__content .info-about__contact { margin-top: 2.5rem; } .info-page .btn-primary { background: var(--color-logo, #4567b0); color: #fff; border-color: var(--color-logo, #4567b0); box-shadow: 0 2px 8px rgba(69, 103, 176, 0.28); } .info-page .btn-primary:hover, .info-page .btn-primary:focus-visible { background: var(--color-logo-hover, #3a5896); border-color: var(--color-logo-hover, #3a5896); color: #fff; } .info-page .faq-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1.2rem; } .class-page .class-split { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; margin-top: 8px; } .class-page .class-split > .info-page__content { max-width: none; min-width: 0; box-sizing: border-box; padding-right: 20px; } .class-page .class-split__fleet { min-width: 0; box-sizing: border-box; } .class-carousel { display: flex; align-items: center; gap: 8px; min-width: 0; } .class-carousel__viewport { flex: 0 0 auto; width: 270px; max-width: 270px; min-width: 0; overflow: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .class-page .class-carousel .class-fleet { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; margin: 0; } .class-page .class-carousel .class-fleet .car-card { flex: 0 0 270px; width: 270px; max-width: 270px; scroll-snap-align: start; } .class-carousel__btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid #d5dae1; border-radius: 50%; background: #fff; color: var(--color-logo, #4567b0); cursor: pointer; } .class-carousel__btn:hover, .class-carousel__btn:focus-visible { background: var(--color-logo, #4567b0); border-color: var(--color-logo, #4567b0); color: #fff; outline: none; } .class-carousel__btn:disabled { opacity: 0.35; cursor: default; } .class-carousel__btn:disabled:hover, .class-carousel__btn:disabled:focus-visible { background: #fff; border-color: #d5dae1; color: var(--color-logo, #4567b0); } .class-carousel__btn[hidden] { display: none; } .class-carousel__chevron { display: block; width: 8px; height: 8px; margin-left: -2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); } .class-carousel__chevron--prev { margin-left: 2px; transform: rotate(-135deg); } @media (prefers-reduced-motion: reduce) { .class-carousel__viewport { scroll-behavior: auto; } } @media (max-width: 768px) { .class-page .class-split { display: block; } .class-page .class-split > .info-page__content { padding-right: 0; } .class-carousel { display: block; } .class-carousel__btn { display: none; } .class-carousel__viewport { width: auto; max-width: none; overflow: visible; scroll-snap-type: none; } .class-page .class-carousel .class-fleet { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .class-page .class-carousel .class-fleet .car-card { flex: none; width: auto; max-width: none; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .class-carousel__viewport { scroll-behavior: auto; } } .class-page .class-fleet .car-image-wrap { display: block; text-decoration: none; } .brand-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 8px; } .brand-index .brand-item__price { font-size: 0.78rem; font-weight: 700; color: var(--color-logo, #4567b0); text-align: center; }