浅念
8884e100f9
Overlay 190 upstream items (V8.22→8.31) preserving trade-pro theme, registry tests, and design docs. Re-applied full patch set on identical anchors (discovery/env_for/blocks.css/type-mapping/locale-override/ theme_color/frontend entries/test_theme_pro_v3 mods) plus compose pins. Verified: theme suites 35/35; dual-baseline full run 415 passed vs pristine 386+29 ours, FAILED-set diff EMPTY (same 10 Windows env fails). Live: container 8.31.1-dev.1 healthy, hesupipe 192 entries intact, trade-pro build 203 pages 0 errors. Co-Authored-By: Claude Code <noreply@anthropic.com>
203 lines
35 KiB
CSS
203 lines
35 KiB
CSS
:root{--pro-text:#1c2a3b;--pro-muted:#718094;--pro-border:#e2e8ef;--pro-background:#fff;--pro-surface:#f2f5f9;--pro-accent:#bb8d50;--pro-hero:#0c1b2e;--pro-radius:5px;--pro-headings:'Arial Narrow',Arial,sans-serif;--pro-wide:1320px}
|
||
.pro-header{background:#0e1e30;color:#fff;border-color:#26374b}.pro-logo-symbol{color:#e0ae6c}.pro-logo-symbol span{color:#fff}.pro-logo-name small{color:#b3bfcf}.pro-header-cta{background:#c59b63;color:#0f1a26!important}.pro-navigation a:hover{color:#dfb97d}.pro-mega{background:#13263b;border-color:#2a4058;color:#c2d0de}.pro-mega>span{color:#d5aa72}.pro-mobile-toggle{color:#fff}
|
||
.pro-auto-hero{background:radial-gradient(circle at 68% 50%,#243b54 0%,#112539 34%,#081728 100%);color:#fff}.pro-auto-hero .pro-eyebrow{color:#d5a366}.pro-auto-hero .pro-hero-copy h1 em{color:#d2a16b}.pro-auto-hero .pro-hero-copy p{color:#b9c7d6}.pro-auto-hero .pro-button{color:#0d1b2d!important;background:#d8ad72}.pro-link-light{color:#d8e4ec;font-size:13px;font-weight:750}.pro-auto-hero .pro-hero-art{background:linear-gradient(160deg,#243e59,#0f2033);border:1px solid #ffffff25;box-shadow:0 50px 80px #0005;border-radius:3px;overflow:visible}.pro-abstract-car{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#45648599,transparent 63%)}.pro-abstract-car:before{content:'';position:absolute;left:10%;right:9%;bottom:29%;height:29%;border:3px solid #d3dfefad;border-radius:53% 49% 10% 12%;transform:skewX(-9deg);box-shadow:0 23px 15px #05121f88,0 0 0 3px #182c41 inset}.pro-abstract-car:after{content:'';position:absolute;left:23%;right:23%;bottom:56%;height:17%;border:3px solid #d3dfef72;border-radius:85% 85% 0 0;transform:skewX(-20deg)}.pro-abstract-car>span{position:absolute;top:26px;right:22px;font-size:10px;letter-spacing:.2em;color:#ccd9e5}.auto-wheel{position:absolute;bottom:18%;width:16%;aspect-ratio:1;border-radius:50%;border:11px solid #6f8499;background:#111e2c;box-shadow:0 0 0 4px #111a25}.auto-wheel.a{left:19%}.auto-wheel.b{right:17%}.pro-hero-art>b{position:absolute;bottom:-31px;right:0;font-size:11px;letter-spacing:.2em;color:#bdcde0}.pro-featured{background:#f4f6f8}.pro-featured .pro-card{border:0;box-shadow:0 7px 30px #0f2e4710}.pro-featured .pro-card-cover{background:#d9e2eb}.pro-featured .pro-art{background:linear-gradient(140deg,#dce5ed,#a9baca)}.pro-featured .pro-art-ring{border-color:#eef3f8bb}.pro-statement{background:#12243b;color:#fff}.pro-statement .pro-eyebrow{color:#d3a975}.pro-statement p{color:#aebfd3}.pro-statement h2{font-size:clamp(42px,5vw,70px);max-width:700px}.pro-statement .pro-text-link{color:#dfba83}.pro-brand-section{background:white}.pro-brand-pills a{min-width:150px;text-align:center;background:#f5f7fa}.pro-inner-hero{background:linear-gradient(120deg,#101e31,#273b51);color:#fff}.pro-inner-hero .pro-eyebrow{color:#d0a46b}.pro-inner-hero p,.pro-inner-hero .pro-breadcrumb{color:#c9d1df}.pro-inner-hero .pro-breadcrumb strong{color:#fff}.pro-article-hero{background:#14243a;color:#fff}.pro-article-hero p{color:#bed0df}.pro-footer{background:#071421}.pro-footer-bottom{color:#98aebf}.pro-end-cta{background:#1a324b}.pro-end-cta a{background:#d4a56d;color:#132339!important}.pro-404 h1{color:#b8905c}
|
||
|
||
/* SiteForge V5 commercial signature */
|
||
.pro-auto-hero .pro-hero-art{background-image:url("./visual/hero.svg")!important;background-position:center;background-size:cover;}
|
||
|
||
.pro-auto-hero{background:linear-gradient(117deg,#081729 0%,#102a43 100%)}.pro-auto-hero .pro-hero-art{border:1px solid #52667a55;border-radius:3px;box-shadow:0 30px 90px #0004;transform:translateX(0)}.pro-auto-hero .pro-hero-art .pro-abstract-car{opacity:0}.pro-hero-bottom{border-top:1px solid #ffffff1c}.pro-brand-pills a{transition:background .2s}.pro-brand-pills a:hover{background:#d6a974;color:#10233a}.pro-card{border-color:#e0e6ee;border-radius:5px}.pro-card-cover{background:linear-gradient(135deg,#edf1f6,#dbe4eb)}.pro-art{background:linear-gradient(130deg,#e0e8ee,#c4d0dc);color:#37536b}.pro-featured{background:#f8fafc}.pro-statement{background:#0d2134;color:white}.pro-statement p{color:#c6d0dd}.pro-statement .pro-text-link{color:#f0b870}.pro-section-head h2{font-weight:800}.pro-footer{background:#08182a;color:#e5e9ed}
|
||
|
||
/* V8.29 presentation refinement: automotive. Preserve per-theme design language. */
|
||
body.pro-automotive{--pro-studio-ring:rgba(209,161,99,.28);--pro-focus-color:#d1a163;--pro-interact-radius:6px}
|
||
body.pro-automotive .pro-wrap{max-width:100%;min-width:0}
|
||
body.pro-automotive .pro-hero-copy,body.pro-automotive .pro-card-body,body.pro-automotive .pro-card-copy{min-width:0;overflow-wrap:anywhere}
|
||
body.pro-automotive .pro-hero-copy h1{font-size:clamp(2.45rem,5.15vw,5.6rem);line-height:1.08;max-width:18ch;text-wrap:balance}
|
||
body.pro-automotive .pro-section-head h2{font-size:clamp(1.85rem,3vw,3.25rem);text-wrap:balance}
|
||
body.pro-automotive .pro-card,body.pro-automotive .pro-product-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
|
||
@media(hover:hover){body.pro-automotive .pro-card:hover,body.pro-automotive .pro-product-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px var(--pro-studio-ring)}}
|
||
body.pro-automotive :where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--pro-focus-color);outline-offset:3px}
|
||
body.pro-automotive img{max-width:100%;height:auto}
|
||
body.pro-automotive .pro-card-cover img,body.pro-automotive .pro-gallery-main img{object-fit:cover;max-height:100%}
|
||
body.pro-automotive .pro-mobile-toggle,body.pro-automotive .pro-nav-disclose{min-height:44px;min-width:44px}
|
||
@media(max-width:860px){body.pro-automotive .pro-home-grid,body.pro-automotive .pro-product-layout,body.pro-automotive .pro-inquiry-wrap{min-width:0}body.pro-automotive .pro-card-grid,body.pro-automotive .pro-grid{gap:clamp(12px,3vw,23px)}}
|
||
@media(max-width:560px){body.pro-automotive .pro-wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}body.pro-automotive .pro-hero-copy h1{font-size:clamp(2rem,9vw,3.2rem)}body.pro-automotive .pro-section-head h2{font-size:clamp(1.75rem,7vw,2.5rem)}body.pro-automotive .pro-section{padding-block:clamp(34px,9vw,60px)}body.pro-automotive .pro-card-cover{height:auto;aspect-ratio:4/3}body.pro-automotive .pro-card-cover img{width:100%;height:100%;object-fit:cover}}
|
||
@media(prefers-reduced-motion:reduce){body.pro-automotive .pro-card,body.pro-automotive .pro-product-card{transition:none!important;transform:none!important}}
|
||
|
||
|
||
/* V8.30 REAL PAGE COMPOSITION. Built-in theme version 1.3.0 only.
|
||
Content-driven sections do not invent client names, certifications or KPIs. */
|
||
.pro-v30-page{--v30-ink:var(--pro-text);--v30-secondary:var(--pro-muted);--v30-line:var(--pro-border);--v30-panel:var(--pro-surface);--v30-max:1180px;color:var(--v30-ink);overflow:clip}
|
||
.pro-v30-page .pro-wrap{max-width:var(--v30-max);min-width:0}
|
||
.pro-v30-page h1,.pro-v30-page h2{overflow-wrap:anywhere;text-wrap:balance;line-height:1.11}
|
||
.pro-v30-page h1{font-size:clamp(2.55rem,5.2vw,5.6rem);margin:18px 0 22px;letter-spacing:-.035em}
|
||
.pro-v30-page h2{font-size:clamp(1.8rem,3.3vw,3rem);margin:16px 0 26px;letter-spacing:-.02em}
|
||
.pro-v30-page p{line-height:1.75;overflow-wrap:anywhere}
|
||
.pro-v30-page img{max-width:100%}
|
||
.pro-v30-intro-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:8vw;align-items:end}
|
||
.pro-v30-page-intro{padding:clamp(68px,10vw,128px) 0 clamp(55px,8vw,94px);background:var(--v30-panel)}
|
||
.pro-v30-intro-main>p{max-width:610px;font-size:clamp(16px,2vw,21px);color:var(--v30-secondary)}
|
||
.pro-v30-intro-aside{border-left:1px solid var(--v30-line);padding-left:27px;display:grid;gap:8px;align-content:end;min-height:120px}
|
||
.pro-v30-overline,.pro-v30-caption{font-size:11px;letter-spacing:.12em;color:var(--v30-secondary)}
|
||
.pro-v30-index-number{font-size:64px;line-height:1;font-weight:650;letter-spacing:-.08em}
|
||
.pro-v30-index-toolbar{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:28px}
|
||
.pro-v30-index-body{background:var(--pro-background)}
|
||
.pro-v30-index-body .pro-section-head,.pro-v30-index-toolbar h2{margin:8px 0}
|
||
.pro-v30-subtle-link,.pro-v30-text-action{display:inline-flex;gap:10px;text-decoration:none;font-weight:750;font-size:13px;align-items:center;min-height:44px}
|
||
.pro-v30-subtle-link:hover,.pro-v30-text-action:hover{text-decoration:underline}
|
||
.pro-v30-results{margin-top:clamp(28px,5vw,54px)}
|
||
.pro-v30-product-top{padding:26px 0 clamp(60px,8vw,110px);background:var(--v30-panel)}
|
||
.pro-v30-crumb{display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:12px;color:var(--v30-secondary);margin:8px 0 46px}
|
||
.pro-v30-crumb a{text-decoration:underline;text-underline-offset:4px}
|
||
.pro-v30-product-head{display:grid;grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(30px,6vw,90px)}
|
||
.pro-v30-product-intro>p{font-size:clamp(16px,2vw,19px);color:var(--v30-secondary);max-width:48ch}
|
||
.pro-v30-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px}.pro-v30-tags span{padding:8px 13px;border:1px solid var(--v30-line);font-size:12px;border-radius:2px}
|
||
.pro-v30-action{display:inline-flex;align-items:center;justify-content:center;min-height:48px}
|
||
.pro-v30-main-media{background:var(--pro-surface);aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;border-radius:var(--pro-radius)}
|
||
.pro-v30-main-media .pro-photo{width:100%;height:100%;object-fit:contain}
|
||
.pro-v30-product-details{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);gap:clamp(30px,7vw,104px)}
|
||
.pro-v30-details-main .pro-rich{max-width:760px}.pro-v30-details-side{align-self:start;border-top:3px solid var(--pro-accent);padding-top:25px}
|
||
.pro-v30-details-side .pro-specs>div{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px}.pro-v30-details-side .pro-specs strong{overflow-wrap:anywhere}
|
||
.pro-v30-reading-head{padding:clamp(50px,8vw,100px) 0 clamp(60px,8vw,100px);background:var(--v30-panel)}
|
||
.pro-v30-reading-title{max-width:940px;margin:auto}.pro-v30-reading-title>p{font-size:clamp(16px,2.1vw,22px);max-width:65ch;color:var(--v30-secondary)}
|
||
.pro-v30-reading-title time{display:block;margin-top:24px;font-size:13px;color:var(--v30-secondary)}
|
||
.pro-v30-reading-layout{display:grid;grid-template-columns:180px minmax(0,750px);gap:clamp(35px,7vw,110px);padding-block:clamp(55px,8vw,110px)}
|
||
.pro-v30-reading-aside{display:flex;flex-direction:column;gap:18px;align-self:start;position:sticky;top:30px;font-size:13px}
|
||
.pro-v30-reading-rule{height:1px;background:var(--v30-line)}
|
||
.pro-v30-reading-content{min-width:0}.pro-v30-reading-content figure{margin:0 0 45px}.pro-v30-reading-content figure img{display:block;width:100%;height:auto;max-height:550px;object-fit:cover}
|
||
.pro-v30-reading-content .pro-rich{line-height:1.9;font-size:clamp(16px,1.75vw,18px)}.pro-v30-reading-content .pro-rich>*+*{margin-top:1.3em}
|
||
.pro-v30-about-opening{padding:clamp(75px,10vw,130px) 0;background:var(--v30-panel)}
|
||
.pro-v30-about-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:9%;align-items:end}.pro-v30-about-heading>p{font-size:clamp(17px,2vw,23px);color:var(--v30-secondary);padding-bottom:12px}
|
||
.pro-v30-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,8vw,120px);align-items:center}
|
||
.pro-v30-about-media{min-height:360px;aspect-ratio:5/4;background:var(--v30-panel);overflow:hidden}.pro-v30-about-media img{width:100%;height:100%;object-fit:cover}
|
||
.pro-v30-media-placeholder{height:100%;min-height:360px;display:grid;place-items:center;color:var(--v30-secondary);letter-spacing:.18em;font-size:12px;border:1px solid var(--v30-line)}
|
||
.pro-v30-about-copy .pro-rich{max-width:620px}.pro-v30-about-cases{background:var(--v30-panel)}
|
||
.pro-v30-contact-header{background:var(--v30-panel);padding:clamp(75px,10vw,135px) 0}.pro-v30-contact-header p{font-size:clamp(17px,2vw,21px);max-width:58ch;color:var(--v30-secondary)}
|
||
.pro-v30-contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,8vw,120px)}
|
||
.pro-v30-contact-channel{display:grid;gap:10px;margin-top:45px;border-top:1px solid var(--v30-line);padding-top:25px}.pro-v30-contact-channel span{font-size:12px;color:var(--v30-secondary)}.pro-v30-contact-channel a{font-size:clamp(15px,2vw,24px);overflow-wrap:anywhere;font-weight:650}
|
||
.pro-v30-contact-form-wrap{padding:clamp(22px,4vw,48px);background:var(--v30-panel);min-width:0}
|
||
.pro-v30-contact-form-wrap .pro-inquiry{margin-top:22px}.pro-v30-contact-form-wrap .pro-inquiry input,.pro-v30-contact-form-wrap textarea{background:var(--pro-background)}
|
||
.pro-v30-contact-note{display:grid;align-content:space-between;min-height:270px;gap:24px}.pro-v30-decorative-number{font-size:90px;line-height:1;justify-self:end;color:var(--pro-accent)}
|
||
.pro-v30-home-editorial{background:var(--pro-surface)}
|
||
.pro-v30-page :where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--pro-accent);outline-offset:3px}
|
||
@media(max-width:950px){.pro-v30-product-head,.pro-v30-product-details,.pro-v30-about-grid,.pro-v30-contact-layout{grid-template-columns:1fr;gap:38px}.pro-v30-product-visual{order:-1}.pro-v30-about-heading{grid-template-columns:1fr;gap:4px}.pro-v30-about-media{max-height:430px}.pro-v30-reading-layout{grid-template-columns:1fr;gap:24px}.pro-v30-reading-aside{position:static;flex-direction:row;align-items:center;flex-wrap:wrap}.pro-v30-reading-rule{display:none}}
|
||
@media(max-width:600px){.pro-v30-page .pro-wrap{padding-inline:max(18px,env(safe-area-inset-left));}.pro-v30-page h1{font-size:clamp(2.2rem,9.2vw,3.4rem)}.pro-v30-intro-layout{grid-template-columns:1fr;gap:18px}.pro-v30-intro-aside{display:none}.pro-v30-index-toolbar{align-items:start;flex-direction:column;gap:0}.pro-v30-crumb{margin-bottom:24px}.pro-v30-product-top{padding-bottom:42px}.pro-v30-main-media{aspect-ratio:5/4}.pro-v30-product-details{gap:45px}.pro-v30-reading-title{margin:0}.pro-v30-reading-content figure{margin-bottom:22px}.pro-v30-about-media,.pro-v30-media-placeholder{min-height:220px}.pro-v30-contact-form-wrap{padding:20px}.pro-v30-contact-layout{gap:30px}}
|
||
@media(prefers-reduced-motion:reduce){.pro-v30-page *{scroll-behavior:auto!important}}
|
||
|
||
/* Theme-specific editorial composition */
|
||
.pro-v30-product-automotive .pro-v30-main-media{background:linear-gradient(155deg,#eaf0f5,#d8e4ed)}.pro-v30-product-automotive .pro-v30-product-head{grid-template-columns:.7fr 1.3fr}.pro-v30-article-automotive .pro-v30-reading-head{background:linear-gradient(145deg,#0d2339,#213a55);color:#fff}.pro-v30-article-automotive .pro-v30-reading-title>p,.pro-v30-article-automotive .pro-v30-crumb{color:#d9e4ed}.pro-v30-vehicle-index .pro-v30-page-intro{background:#11283d;color:#f7f9fb}.pro-v30-vehicle-index .pro-v30-intro-main>p,.pro-v30-vehicle-index .pro-v30-intro-aside{color:#cbd6e0}.pro-v30-vehicle-index .pro-v30-intro-aside{border-color:#ffffff39}.pro-v30-vehicle-index .pro-eyebrow{color:#e2b47b}.pro-v30-product-automotive .pro-v30-product-intro h1{letter-spacing:-.055em}
|
||
|
||
@media(max-width:950px){.pro-v30-product-automotive .pro-v30-product-head{grid-template-columns:1fr}}
|
||
|
||
/* Retain existing gallery runtime behavior with re-composed product layout. */
|
||
.pro-v30-page .pro-product-media{height:auto;min-height:0}
|
||
|
||
|
||
/* SiteForge V8.31 – Magic Bridge inspired, data-driven automotive export storefront.
|
||
All selectors scoped to the automotive theme. Preserves existing platform navigation
|
||
drawer, optional mobile Tabs, gallery, URL/SEO and client-side catalog filtering. */
|
||
body.pro-automotive{--pro-text:#13263b;--pro-muted:#67788d;--pro-border:#e7edf3;--pro-background:#fff;--pro-surface:#f5f7fa;--pro-accent:#ea733e;--pro-hero:#f5f7fa;--pro-radius:12px;--pro-wide:1280px;--pro-headings:Inter,Arial,'Microsoft YaHei',sans-serif;color:#14273c;background:#fff}
|
||
body.pro-automotive .pro-wrap{max-width:min(1280px,100%);padding-inline:clamp(18px,3.7vw,50px)}
|
||
body.pro-automotive .pro-utility{background:#122840;color:#deebf7;border:0;font-size:11px;letter-spacing:.075em}
|
||
body.pro-automotive .pro-utility .pro-wrap{min-height:34px;gap:16px}
|
||
body.pro-automotive .auto31-header{background:#fff;color:#142b43;border-bottom:1px solid #e9eef4;position:relative;z-index:20;box-shadow:0 5px 22px #14304808}
|
||
body.pro-automotive .auto31-head-inner{min-height:85px;gap:clamp(12px,2vw,30px)}
|
||
body.pro-automotive .pro-logo{color:#12283d;flex-shrink:1;min-width:0}
|
||
body.pro-automotive .pro-logo-symbol{background:#eb733e;color:#fff;border-radius:12px;padding:5px 10px;font-size:24px}
|
||
body.pro-automotive .pro-logo-symbol span{color:#fff}
|
||
body.pro-automotive .pro-logo-name{font-weight:850;font-size:clamp(14px,1.4vw,19px)}
|
||
body.pro-automotive .pro-logo-name small{color:#7a8998;letter-spacing:.12em;font-size:9px}
|
||
body.pro-automotive .pro-brand-logo{object-fit:contain;max-height:51px;width:auto}
|
||
body.pro-automotive .pro-navigation{gap:clamp(9px,1.3vw,22px)}
|
||
body.pro-automotive .pro-navigation a{color:#263c53;font-size:13px;font-weight:690}
|
||
body.pro-automotive .pro-navigation a:hover,body.pro-automotive .pro-navigation a[aria-current=page]{color:#db6632}
|
||
body.pro-automotive .pro-nav-disclose{color:#344456}
|
||
body.pro-automotive .pro-header-cta{background:#ef743c;color:#fff!important;border-radius:8px;padding:13px 20px;white-space:nowrap;box-shadow:none;font-size:12px;font-weight:760}
|
||
body.pro-automotive .pro-header-cta:hover{background:#c85627}
|
||
body.pro-automotive .pro-catalog-toggle{background:#f4f7fa!important;color:#223950!important;border:1px solid #dfe6ed;border-radius:8px;padding:13px 13px;font-size:12px;font-weight:750;white-space:nowrap}
|
||
body.pro-automotive .auto31-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);max-width:min(1160px,calc(100vw - 32px));z-index:40;display:grid;grid-template-columns:minmax(195px,.85fr) minmax(280px,1.5fr) minmax(170px,.78fr);padding:34px;gap:34px;color:#19314a;background:white;border:1px solid #e6edf4;border-radius:0 0 18px 18px;box-shadow:0 24px 70px #0d263922}
|
||
body.pro-automotive .auto31-mega[hidden]{display:none!important}
|
||
body.pro-automotive .auto31-mega-lead{padding:15px 22px 12px 5px;border-right:1px solid #e8eef5}
|
||
body.pro-automotive .auto31-mega-lead>h2{font-size:26px;margin:12px 0}
|
||
body.pro-automotive .auto31-mega-lead p{color:#7d8997;font-size:13px;line-height:1.7}
|
||
body.pro-automotive .auto31-mega-lead a{display:inline-block;margin-top:22px;font-size:13px;color:#df6a34;font-weight:750}
|
||
body.pro-automotive .auto31-mega-column>strong{font-size:13px;display:block;margin-bottom:20px}
|
||
body.pro-automotive .auto31-mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
|
||
body.pro-automotive .auto31-mega-links a{padding:9px 0;color:#42536a!important;text-decoration:none;font-size:12px;display:flex;justify-content:space-between;gap:5px;align-items:center}
|
||
body.pro-automotive .auto31-mega-links a:hover{color:#eb7138!important}
|
||
body.pro-automotive .auto31-mega-links a span{opacity:.35}
|
||
body.pro-automotive .auto31-mega-categories .auto31-mega-links{grid-template-columns:1fr}
|
||
body.pro-automotive .auto31-mega-contact{display:block;margin-top:20px;color:#e16a32;font-size:12px;font-weight:700}
|
||
body.pro-automotive .auto31-muted{color:#8997a5;font-size:12px}
|
||
.auto31-home{color:#1a3047}.auto31-home .pro-eyebrow,.auto31-detail .pro-eyebrow,.auto31-brand .pro-eyebrow,.auto31-catalog .pro-eyebrow{color:#eb733d;font-size:11px;letter-spacing:.135em;font-weight:800}
|
||
.auto31-hero{background:linear-gradient(115deg,#f8fafc,#edf3f8);padding:60px 0 0;position:relative;overflow:hidden}
|
||
.auto31-hero-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(20px,4vw,65px);min-height:500px;align-items:center}
|
||
.auto31-kicker{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.16em;font-weight:800;color:#e57239}
|
||
.auto31-kicker span{height:8px;width:8px;border-radius:50%;background:#ee7138}
|
||
.auto31-hero-copy{padding:20px 0 65px;min-width:0}.auto31-hero-copy h1{font-size:clamp(42px,5vw,76px);font-weight:850;line-height:1.11;letter-spacing:-.048em;margin:24px 0;color:#102942;max-width:12ch;overflow-wrap:anywhere}
|
||
.auto31-hero-copy p{color:#687b8d;line-height:1.75;font-size:clamp(15px,1.5vw,18px);max-width:47ch}
|
||
.auto31-hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:32px}
|
||
.auto31-primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:#ea733e!important;color:white!important;padding:13px 24px;text-decoration:none;border-radius:8px;font-weight:760;font-size:13px;min-height:49px;white-space:normal}
|
||
.auto31-primary:hover{background:#cd5928!important}.auto31-secondary{display:inline-flex;gap:12px;align-items:center;justify-content:center;color:#203e5a!important;font-size:13px;font-weight:800;text-decoration:none;min-height:44px}
|
||
.auto31-hero-media{position:relative;align-self:stretch;min-height:360px;display:grid;place-items:center}
|
||
.auto31-hero-media>img{width:100%;max-height:510px;object-fit:contain;filter:drop-shadow(0 24px 18px #173a571c)}
|
||
.auto31-car-placeholder{width:100%;height:100%;min-height:330px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:50px;gap:12px;background:radial-gradient(ellipse at 75% 80%,#c5d5e7 0%,transparent 52%),linear-gradient(130deg,#e3ebf3,#f6f9fc);color:#72859a;border-radius:18px}
|
||
.auto31-car-placeholder strong{font-size:clamp(26px,3vw,45px);line-height:1.1;color:#9caec0}.auto31-car-placeholder span{font-weight:800;letter-spacing:.2em;font-size:11px}.auto31-car-placeholder small{font-size:12px}
|
||
.auto31-hero-stamp{position:absolute;bottom:26px;right:15px;background:#112d48;color:#fff;padding:13px 17px;border-radius:8px;font-size:11px;letter-spacing:.1em}.auto31-hero-stamp span{color:#ed8f62;margin-left:15px}
|
||
.auto31-quick-wrap{position:relative;z-index:2;transform:translateY(31px)}
|
||
.auto31-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;background:#fff;padding:14px 16px 14px 30px;border:1px solid #e5edf4;border-radius:12px;box-shadow:0 15px 45px #173a5515}
|
||
.auto31-search>label{font-size:14px;font-weight:800;white-space:nowrap}.auto31-search-field{display:flex;align-items:center;gap:12px;background:#f5f7fa;padding:0 16px;border-radius:7px;color:#95a2ae;min-width:0}
|
||
.auto31-search-field input{width:100%;font-size:14px;background:transparent;border:none;outline:none;min-height:44px;color:#152c40;min-width:0}.auto31-search button{border:0;background:#132e49;color:#fff;border-radius:7px;padding:13px 21px;font-weight:800;cursor:pointer;white-space:nowrap;min-height:44px}
|
||
.auto31-brand-strip{background:white;padding:77px 0 39px}.auto31-strip-inner{display:flex;gap:24px;align-items:center}.auto31-strip-inner>span{font-size:11px;font-weight:800;white-space:nowrap;color:#8d98a5;letter-spacing:.1em}.auto31-brand-list{display:flex;gap:10px;overflow:auto;scrollbar-width:thin;min-width:0;flex:1}.auto31-brand-list a{background:#f4f6f8;color:#3a5063;border-radius:6px;white-space:nowrap;font-size:12px;font-weight:750;padding:11px 17px}.auto31-brand-list a:hover{background:#e8eff6}.auto31-all{white-space:nowrap;font-size:12px;color:#e77340;font-weight:800}
|
||
.auto31-featured,.auto31-news{background:#fff}.auto31-featured .pro-grid,.auto31-catalog .pro-grid,.auto31-brand-products .pro-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
|
||
.auto31-section-heading{display:flex;justify-content:space-between;gap:22px;align-items:end;margin-bottom:34px}.auto31-section-heading h2{font-size:clamp(29px,3.1vw,45px);line-height:1.2;letter-spacing:-.035em;margin:13px 0}.auto31-section-heading p{color:#81909e;max-width:65ch}.auto31-section-heading>a{white-space:nowrap;font-size:13px;font-weight:770;color:#e36b35}
|
||
.auto31-heading-mark{color:#ea763b}.auto31-home .pro-card,.auto31-catalog .pro-card,.auto31-brand .pro-card{border:1px solid #edf0f4;border-radius:11px;overflow:hidden;box-shadow:0 8px 30px #13314909;background:#fff}
|
||
.auto31-home .pro-card-cover,.auto31-catalog .pro-card-cover,.auto31-brand .pro-card-cover{background:#f2f5f8;aspect-ratio:4/3;overflow:hidden;height:auto}
|
||
.auto31-home .pro-card-cover img,.auto31-catalog .pro-card-cover img,.auto31-brand .pro-card-cover img{width:100%;height:100%;object-fit:contain;padding:8px}
|
||
.auto31-home .pro-card-body,.auto31-catalog .pro-card-body,.auto31-brand .pro-card-body{padding:19px 20px 21px}.auto31-home .pro-card h3,.auto31-catalog .pro-card h3,.auto31-brand .pro-card h3{font-size:18px;line-height:1.35;margin:10px 0 8px}.auto31-home .pro-card-body p,.auto31-catalog .pro-card-body p,.auto31-brand .pro-card-body p{color:#83909b;line-height:1.6;font-size:12px}.auto31-home .pro-card-meta,.auto31-catalog .pro-card-meta{color:#ea773f;font-size:11px}.auto31-home .pro-card-link,.auto31-catalog .pro-card-link,.auto31-brand .pro-card-link{color:#df6b39;font-size:12px;font-weight:800}
|
||
.auto31-double-feature{padding:32px 0 88px;background:#fff}.auto31-double-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.auto31-feature-tile{display:flex;min-height:265px;gap:12px;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(25px,4vw,49px);background:#eaf2f9;color:#1b3146!important;border-radius:13px;text-decoration:none}.auto31-feature-tile-alt{background:#183650;color:#fff!important}.auto31-feature-tile>span{font-size:11px;letter-spacing:.12em;font-weight:750;opacity:.7}.auto31-feature-tile h2{font-size:clamp(25px,3vw,39px);margin:5px 0;line-height:1.3}.auto31-feature-tile p{font-size:13px;max-width:42ch;opacity:.8}.auto31-feature-tile strong{font-size:13px;margin-top:12px;color:#e7743d}
|
||
.auto31-company{background:#f4f7fa}.auto31-company-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center}.auto31-company h2{font-size:clamp(28px,4vw,57px);margin:15px 0;line-height:1.15}.auto31-company p{color:#74889a;font-size:17px;line-height:1.7;max-width:45ch;margin-bottom:23px}.auto31-company-panel{background:white;padding:clamp(22px,4vw,42px);border-radius:15px;box-shadow:0 11px 34px #122b450c}.auto31-company-panel>span{font-size:11px;letter-spacing:.12em;color:#e1733e;font-weight:800}.auto31-company-panel>div{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:15px;padding:19px 0;border-bottom:1px solid #ecf1f5}.auto31-company-panel>div:last-child{border:0}.auto31-company-panel b{color:#eb7e48}.auto31-company-panel strong{font-size:15px}.auto31-company-panel small{color:#8895a3;font-size:11px;text-align:right}
|
||
.auto31-news{background:#fff}
|
||
.auto31-page-banner{padding:clamp(50px,6vw,90px) 0;background:linear-gradient(120deg,#f5f8fb,#edf3f8);color:#102940}.auto31-banner-grid{display:flex;justify-content:space-between;align-items:end;gap:30px}.auto31-page-banner h1{font-size:clamp(39px,4.7vw,66px);margin:14px 0}.auto31-page-banner p{color:#697d8d;max-width:62ch;font-size:17px}.auto31-crumb{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;font-size:12px;color:#7d8b98}.auto31-crumb a{color:#567187;text-decoration:none}.auto31-banner-stat{display:flex;flex-direction:column;align-items:center;min-width:150px;border-left:1px solid #d6e1ea;padding-left:28px}.auto31-banner-stat strong{font-size:70px;font-weight:800;line-height:1}.auto31-banner-stat span{font-size:11px;color:#90a0ad}
|
||
.auto31-catalog-section{background:white}.auto31-catalog-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px;gap:20px}.auto31-catalog-head h2{font-size:33px;margin:8px 0}.auto31-catalog-head>a{color:#df6b39;font-size:13px;font-weight:800}
|
||
.auto31-catalog .pro-filter-panel,.auto31-category .pro-filter-panel{background:#f7f9fc;border:1px solid #edf1f5;padding:19px;border-radius:12px;gap:16px;margin-bottom:28px}.auto31-catalog .pro-filter-panel label{min-width:0}.auto31-catalog .pro-filter-panel input,.auto31-catalog .pro-filter-panel select{background:white;border-color:#dfe7ef;border-radius:8px;min-height:44px}.auto31-vehicle-results{margin:0}
|
||
.auto31-brand-banner{background:#f3f7fb}.auto31-brand-intro{display:grid;grid-template-columns:1fr .75fr;align-items:center;gap:45px}.auto31-brand-photo{aspect-ratio:16/10;border-radius:13px;overflow:hidden;background:#e7eff6}.auto31-brand-photo img{width:100%;height:100%;object-fit:contain}.auto31-brand-intro .auto31-primary{margin-top:18px}.auto31-brand-products{background:#fff}.auto31-brand-story{background:#f6f8fb}.auto31-story-grid{display:grid;grid-template-columns:.6fr 1fr;gap:60px}.auto31-story-grid h2{font-size:35px;margin:14px 0}.auto31-story-grid .pro-rich{line-height:1.85}
|
||
.auto31-detail-head{padding:26px 0 75px;background:#f7f9fc}.auto31-detail-head .auto31-crumb{margin-bottom:40px}.auto31-detail-title{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:31px}.auto31-detail-title h1{font-size:clamp(36px,4.4vw,64px);margin:14px 0 6px}.auto31-model-tags{display:flex;gap:8px;flex-wrap:wrap}.auto31-model-tags span{border-radius:30px;border:1px solid #d9e3ed;padding:6px 12px;color:#587086;font-size:11px}.auto31-detail-main{background:#edf2f7;border-radius:14px;overflow:hidden;aspect-ratio:16/8;display:grid;place-items:center}.auto31-detail-main .pro-photo{height:100%;width:100%;object-fit:contain;padding:15px}.auto31-detail-gallery{max-width:1180px;margin:auto}.auto31-thumbnails{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}.auto31-thumbnails button{border-radius:8px;background:white;border:1px solid #dbe5ef;padding:5px;cursor:pointer}.auto31-thumbnails button[aria-pressed=true]{border-color:#e5723e}.auto31-thumbnails img{width:98px;height:64px;object-fit:contain}
|
||
.auto31-detail-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:clamp(30px,7vw,90px)}.auto31-detail-copy h2,.auto31-spec-panel h2{font-size:clamp(27px,3vw,40px);margin:14px 0 22px}.auto31-detail-summary{color:#698094;font-size:18px;line-height:1.8}.auto31-detail-copy .pro-rich{line-height:1.9}.auto31-spec-panel{border:1px solid #e6edf4;background:#f9fbfd;border-radius:14px;padding:clamp(22px,3vw,35px);align-self:start}.auto31-spec-panel .pro-specs>div{grid-template-columns:1fr 1fr;gap:10px}.auto31-spec-panel .auto31-secondary{margin-top:24px;color:#e4723e!important}
|
||
body.pro-automotive .pro-end-cta{background:#193650;color:#fff}body.pro-automotive .pro-end-cta a{background:#ef7840!important;color:white!important;border-radius:8px}
|
||
body.pro-automotive .pro-footer{background:#0b2137;color:#eaf3fb}body.pro-automotive .pro-footer-bottom{color:#9aaec1}
|
||
@media(max-width:1180px){body.pro-automotive .pro-navigation{gap:8px}body.pro-automotive .auto31-head-inner{gap:10px}body.pro-automotive .auto31-featured .pro-grid,body.pro-automotive .auto31-catalog .pro-grid,body.pro-automotive .auto31-brand-products .pro-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
||
@media(max-width:1024px){body.pro-automotive .pro-header{z-index:30}body.pro-automotive .pro-mobile-toggle{color:#19344e!important;background:#edf3f8;border-radius:8px}body.pro-automotive .pro-navigation{background:#fff!important;color:#182e45!important}body.pro-automotive .pro-navigation a{color:#1b344c!important}body.pro-automotive .auto31-menu-trigger{display:none!important}body.pro-automotive .auto31-hero-grid{grid-template-columns:1fr 1fr}.auto31-hero-copy h1{font-size:clamp(34px,4.8vw,58px)}}
|
||
@media(max-width:850px){.auto31-hero-grid,.auto31-company-grid,.auto31-brand-intro,.auto31-detail-columns,.auto31-story-grid{grid-template-columns:1fr}.auto31-hero{padding-top:35px}.auto31-hero-copy{padding:20px 0}.auto31-hero-media{min-height:300px;max-height:420px}.auto31-hero-media>img{max-height:410px}.auto31-strip-inner{flex-wrap:wrap}.auto31-brand-list{order:3;flex-basis:100%}.auto31-featured .pro-grid,.auto31-catalog .pro-grid,.auto31-brand-products .pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auto31-company-panel>div{grid-template-columns:35px 1fr auto}}
|
||
@media(max-width:600px){body.pro-automotive .pro-wrap{padding-inline:max(17px,env(safe-area-inset-left)) max(17px,env(safe-area-inset-right))}.auto31-hero-copy h1{font-size:clamp(34px,9vw,49px);max-width:14ch}.auto31-hero-copy p{font-size:15px}.auto31-hero-media{min-height:220px}.auto31-car-placeholder{min-height:230px;padding:23px}.auto31-hero-stamp{display:none}.auto31-quick-wrap{transform:translateY(18px)}.auto31-search{grid-template-columns:1fr;gap:11px;padding:16px}.auto31-search>label{font-size:13px}.auto31-search button{width:100%}.auto31-brand-strip{padding-top:48px}.auto31-featured .pro-grid,.auto31-catalog .pro-grid,.auto31-brand-products .pro-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.auto31-home .pro-card-body,.auto31-catalog .pro-card-body,.auto31-brand .pro-card-body{padding:13px}.auto31-home .pro-card h3,.auto31-catalog .pro-card h3,.auto31-brand .pro-card h3{font-size:14px}.auto31-home .pro-card-body p,.auto31-catalog .pro-card-body p,.auto31-brand .pro-card-body p{font-size:11px}.auto31-section-heading,.auto31-catalog-head{align-items:flex-start;flex-direction:column}.auto31-section-heading h2{font-size:29px}.auto31-double-grid{grid-template-columns:1fr}.auto31-feature-tile{min-height:190px}.auto31-company-panel>div{grid-template-columns:28px 1fr}.auto31-company-panel small{grid-column:2;text-align:left}.auto31-banner-stat{display:none}.auto31-page-banner h1{font-size:38px}.auto31-detail-title{align-items:flex-start;flex-direction:column}.auto31-detail-main{aspect-ratio:5/4}.auto31-spec-panel{padding:21px}.auto31-catalog .pro-filter-panel{grid-template-columns:1fr 1fr}.auto31-thumbnails img{width:65px;height:49px}}
|
||
@media(prefers-reduced-motion:reduce){.auto31-home *,.auto31-brand *,.auto31-catalog *,.auto31-detail *{transition:none!important;scroll-behavior:auto!important}}
|
||
|
||
/* V8.31 mobile layout: override the broader tablet rule with a deliberate, single-column hero. */
|
||
@media(max-width:850px){
|
||
body.pro-automotive .auto31-hero .auto31-hero-grid{grid-template-columns:minmax(0,1fr);gap:12px;min-height:0}
|
||
body.pro-automotive .auto31-hero .auto31-hero-copy{padding:26px 0 12px}
|
||
body.pro-automotive .auto31-hero .auto31-hero-copy h1{max-width:17ch;overflow-wrap:normal}
|
||
body.pro-automotive .auto31-hero .auto31-hero-media{min-height:230px;max-height:450px}
|
||
}
|
||
@media(max-width:600px){
|
||
body.pro-automotive .auto31-hero{padding-top:16px}
|
||
body.pro-automotive .auto31-hero .auto31-hero-copy h1{font-size:clamp(34px,9vw,44px);max-width:15ch}
|
||
body.pro-automotive .auto31-hero .auto31-hero-media{min-height:215px;max-height:300px}
|
||
body.pro-automotive .auto31-hero .auto31-car-placeholder{min-height:215px}
|
||
}
|
||
/* V8.31 phone catalogue: override the higher-specificity tablet three-column rule. */
|
||
@media(max-width:600px){body.pro-automotive .auto31-featured .pro-grid,body.pro-automotive .auto31-catalog .pro-grid,body.pro-automotive .auto31-brand-products .pro-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}}
|
||
|
||
/* V8.31.1 semantics and light rendering: no external icon/font dependencies. */
|
||
body.pro-automotive .auto-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.17em;flex-shrink:0;stroke:currentColor;fill:none}
|
||
body.pro-automotive .auto31-hero-stamp .auto-icon{margin-right:.5em}
|
||
body.pro-automotive .pro-navigation a .auto-icon{width:1.05em;height:1.05em;color:#d97545}
|
||
body.pro-automotive .auto31-mega-links a{justify-content:flex-start}
|
||
body.pro-automotive .auto31-mega-links a .auto-icon{color:#db7445}
|
||
body.pro-automotive .auto31-primary,body.pro-automotive .auto31-secondary,body.pro-automotive .pro-header-cta,body.pro-automotive .pro-catalog-toggle{gap:9px}
|
||
body.pro-automotive .auto31-feature-tile strong .auto-icon,body.pro-automotive .auto31-section-heading>a .auto-icon{margin-right:6px}
|
||
body.pro-automotive .auto31-search-field .auto-icon{width:19px;height:19px}
|
||
body.pro-automotive .auto31-search button .auto-icon{margin-right:7px}
|
||
body.pro-automotive .pro-card-link .auto-icon{margin-left:5px}
|
||
body.pro-automotive .pro-mobile-toggle .auto-icon{height:24px;width:24px}
|
||
@media(max-width:1024px){body.pro-automotive .pro-navigation a .auto-icon{width:18px;height:18px}}
|