/* ===================================================================== IRONHORSE — DESIGN SYSTEM Ported from the Claude Design export (site/style.css, 113 classes). --------------------------------------------------------------------- LOADS AFTER style.css. Do not reorder — see inc/enqueue.php. STRATEGY: SCOPE, DON'T RENAME. 38 of the export's 113 class names are live Bootstrap classes that Motors bundles and uses internally: .btn .card .nav .row .grid .media .body .h1 .h2 .h3 .hero .meta .track .brand .links .field .pill and twenty-one more. Renaming all 113 to .ihc-* would mean rewriting every class attribute across ten HTML files before a single line could be pasted into a WPBakery Raw HTML block — and redoing it on every design revision. Instead every rule below is prefixed .ih-scope, which: · raises specificity to (0,2,0), beating bare Bootstrap (0,1,0) with no !important anywhere except the prefers-reduced-motion guard, where overriding every transition is the whole point · contains us — nothing here reaches Motors' header, footer, filter sidebar, listing loop or the admin bar · leaves the export's markup byte-identical, so pasting is mechanical USAGE: wrap each ported section in an element carrying .ih-scope. In WPBakery that is the Row's Extra Class Name field. THREE CLASSES ARE STILL RENAMED. Scoping cannot save them, because they are JS state hooks rather than styling: .in -> .is-in Bootstrap's collapse-open state. The reveal observer adds it on scroll, which would pop open every Motors accordion as you scroll. .on -> .is-on nav, thumbnails, pills, wizard panes. .open -> .is-open burger menu. assets/js/ih-site.js already uses the renamed forms. TOKENS: style.css is the single source of truth for the palette, and every var() below was remapped onto its --ih-* names. Only the two genuinely missing values are declared here. FONT: --ih-f-display resolves to Roboto Condensed via style.css. The export specified Exo 2, which ships no Greek subset on Google Fonts — Greek headings would fall back to the browser serif. Same disqualifies Rajdhani from the brand guidelines. See inc/enqueue.php. NOT PORTED: the export's html/body rules. Motors owns those. The two exceptions are the scroll rules below, which have to live on the scrolling element and cannot be scoped. NEVER set `overflow-x: hidden` on html or body. It makes that element a scroll container, and every `position: sticky` descendant silently stops sticking — the nav, the listing hero and the #ltabs bar all depend on sticky. This is true with or without a scroll library. If horizontal overflow appears, use `overflow-x: clip`, which clips without creating a scroll container. ===================================================================== */ :root { /* Interactive red. Distinct from --ih-red, which stays the fill and rule colour. This is the hover / link / accent-text value. */ --ih-red-hi: #FF2733; /* The export's single easing curve. Every transition in this file uses it, so motion reads as one system rather than per-component guesses. ih-site.js uses the same curve. */ --ih-ease: cubic-bezier(.22, .8, .28, 1); } /* ── NATIVE SMOOTH SCROLL ──────────────────────────────────────────── Replaces Lenis. Two declarations do the whole job: scroll-behavior eases in-page anchor jumps scroll-padding-top offsets the target so it does not land underneath the sticky header --ih-nav-h is measured and published by assets/js/ih-site.js on load and on resize, so the offset stays right across breakpoints and after the nav is rebuilt. The fallback covers the moment before JS runs. These must sit on the scrolling element, so they cannot be scoped to .ih-scope like everything else in this file. This gives eased anchor scrolling. It does NOT give eased wheel momentum — that was Lenis's only other contribution and was dropped deliberately. ──────────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ih-nav-h, 88px) + 12px); } /* ih-site.js adds .ih-lenis when it owns a Lenis instance. Both engines easing the same anchor jump fight each other — Lenis wins the animation and CSS fights it mid-flight, which reads as a stutter. Lenis handles the offset itself via its `anchors` option. */ html.ih-lenis{ scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .ih-scope *{box-sizing:border-box;margin:0;padding:0} .ih-scope img{display:block;max-width:100%} .ih-scope a{color:var(--ih-white);text-decoration:none;transition:color .25s} .ih-scope a:hover{color:var(--ih-red-hi)} .ih-scope button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} .ih-scope :focus-visible{outline:2px solid var(--ih-red);outline-offset:3px} .ih-scope ::selection{background:var(--ih-red);color:#fff} body.ih-page::before{content:'';position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} /* diagnostic progress line */ .ih-scope .dprog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:99;background:transparent} .ih-scope .dprog i{display:block;height:100%;width:0;background:var(--ih-red);transition:width .1s linear} /* ===== utility bar ===== */ .ih-scope .util{border-bottom:1px solid var(--ih-line);font-family:var(--ih-f-mono);font-size:10.5px;color:var(--ih-steel);letter-spacing:.1em} .ih-scope .util .row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:8px var(--ih-pad-x)} .ih-scope .util .r{display:flex;gap:20px;align-items:center} .ih-scope .util a{color:var(--ih-steel)} .ih-scope .util a:hover{color:var(--ih-white)} .ih-scope .util .dot{color:var(--ih-red)} .ih-scope .util .lang a.is-on{color:var(--ih-white)} /* ===== nav ===== */ .ih-scope .nav{position:sticky;top:0;z-index:50;background:rgba(13,13,13,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s} .ih-scope .nav.is-on{background:rgba(13,13,13,.95);border-bottom-color:var(--ih-line)} .ih-scope .nav .row{display:flex;align-items:center;gap:28px;padding:14px var(--ih-pad-x)} .ih-scope .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .ih-scope .brand img{height:32px;width:auto} .ih-scope .brand .w{display:flex;flex-direction:column;line-height:1} .ih-scope .brand .w b{font-weight:800;font-size:18px;letter-spacing:.08em} .ih-scope .brand .w b i{color:var(--ih-red);font-style:normal} .ih-scope .brand .w span{font-family:var(--ih-f-mono);font-size:7.5px;letter-spacing:.48em;color:var(--ih-steel);margin-top:4px;text-transform:uppercase} .ih-scope .links{display:flex;gap:20px;list-style:none;margin-left:auto;align-items:center} .ih-scope .links a{position:relative;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ih-white);padding:8px 0;white-space:nowrap} .ih-scope .links a::after{content:'';position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--ih-red);transition:width .3s var(--ih-ease)} .ih-scope .links a:hover::after, .ih-scope .links a.act::after{width:100%} .ih-scope .links a.act{color:var(--ih-red-hi)} .ih-scope .burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;justify-content:center;align-items:center;border:1px solid var(--ih-line-strong)} .ih-scope .burger span{width:20px;height:2px;background:var(--ih-white);transition:.3s} .ih-scope .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .ih-scope .burger.is-open span:nth-child(2){opacity:0} .ih-scope .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ===== buttons ===== */ .ih-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:.25s;cursor:pointer;min-height:44px} .ih-scope .btn-red{background:var(--ih-red);color:#fff} .ih-scope .btn-red:hover{background:var(--ih-red-hi);color:#fff} .ih-scope .btn-ghost{border-color:var(--ih-line-strong);color:var(--ih-white)} .ih-scope .btn-ghost:hover{border-color:var(--ih-red);color:var(--ih-red-hi)} .ih-scope .btn-w{background:var(--ih-white);color:var(--ih-black)} .ih-scope .btn-w:hover{background:#fff;color:var(--ih-red)} .ih-scope .btn-sm{padding:10px 18px;font-size:11px;min-height:40px} /* ===== type ===== */ .ih-scope .kick{font-family:var(--ih-f-mono);font-size:11px;color:var(--ih-red-hi);letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:20px} .ih-scope .kick::before{content:'';width:34px;height:2px;background:var(--ih-red)} .ih-scope .h1{font-weight:800;font-size:clamp(40px,6.6vw,96px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase} .ih-scope .h2{font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.005em;text-transform:uppercase} .ih-scope .h3{font-weight:800;font-size:clamp(20px,2.2vw,27px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase} .ih-scope .acc{color:var(--ih-red-hi)} .ih-scope .lede{color:rgba(242,242,242,.72);font-size:17px;line-height:1.7;max-width:580px} .ih-scope .mono{font-family:var(--ih-f-mono)} .ih-scope .micro{font-family:var(--ih-f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ih-steel)} .ih-scope .demo-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--ih-f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ih-orange);border:1px solid rgba(255,77,0,.35);padding:3px 8px} /* ===== layout ===== */ .ih-scope section{padding:clamp(70px,9vw,124px) var(--ih-pad-x);position:relative} .ih-scope .shead{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:26px;margin-bottom:clamp(34px,5vw,60px)} .ih-scope .shead .meta{font-family:var(--ih-f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ih-steel);text-align:right;max-width:330px;line-height:1.8} .ih-scope .shead .meta b{color:var(--ih-white);font-weight:500} .ih-scope .hairline{height:1px;background:var(--ih-line);margin:0 var(--ih-pad-x)} /* diagnostic line device */ .ih-scope .dline{position:relative;padding-left:26px} .ih-scope .dline::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--ih-red),rgba(227,6,19,.15));transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ih-ease) .2s} .ih-scope .is-in .dline::before, .ih-scope .dline.is-in::before{transform:scaleY(1)} /* ===== hero ===== */ .ih-scope .hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden} .ih-scope .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.82) contrast(1.04)} .ih-scope .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.55),rgba(13,13,13,.2) 42%,rgba(13,13,13,.95) 94%)} .ih-scope .hero .is-in{position:relative;z-index:2;padding:110px var(--ih-pad-x) 80px;max-width:1150px;width:100%} .ih-scope .hero .lede{margin:24px 0 34px} .ih-scope .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .ih-scope .ctas .aside{font-family:var(--ih-f-mono);font-size:11px;color:var(--ih-steel);letter-spacing:.06em} .ih-scope .ctas .aside a{color:var(--ih-muted);text-decoration:underline;text-underline-offset:4px} .ih-scope .ctas .aside a:hover{color:var(--ih-red-hi)} .ih-scope .hero .tag{position:absolute;right:var(--ih-pad-x);bottom:34px;z-index:2;font-family:var(--ih-f-mono);font-size:10px;color:var(--ih-steel);letter-spacing:.22em;text-transform:uppercase;text-align:right;line-height:1.9} .ih-scope .hero-sub{min-height:56vh} /* ===== trust strip ===== */ .ih-scope .trust{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--ih-line);background:var(--ih-surface)} .ih-scope .trust div{padding:22px 24px;border-right:1px solid var(--ih-line);font-family:var(--ih-f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ih-muted);line-height:1.7;display:flex;align-items:center;gap:12px} .ih-scope .trust div:last-child{border-right:none} .ih-scope .trust i{color:var(--ih-red);font-style:normal} /* ===== grids/cards ===== */ .ih-scope .grid{display:grid;gap:22px} .ih-scope .g2{grid-template-columns:repeat(2,1fr)} .ih-scope .g3{grid-template-columns:repeat(3,1fr)} .ih-scope .g4{grid-template-columns:repeat(4,1fr)} .ih-scope .card{background:var(--ih-surface);border:1px solid var(--ih-line);display:flex;flex-direction:column;transition:transform .35s var(--ih-ease),border-color .35s;position:relative;overflow:hidden} .ih-scope .card:hover{transform:translateY(-4px);border-color:rgba(227,6,19,.5)} .ih-scope .card .media{aspect-ratio:4/3;background:var(--ih-surface-2) url(assets/ih-white.png) center/30% no-repeat;position:relative;overflow:hidden} .ih-scope .card .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:transform .6s var(--ih-ease)} .ih-scope .card:hover .media img{transform:scale(1.04)} .ih-scope .card .media .bdg{position:absolute;z-index:2;top:12px;left:12px;font-family:var(--ih-f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:rgba(13,13,13,.85);border:1px solid var(--ih-line-strong);padding:5px 10px;color:var(--ih-white)} .ih-scope .card .body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1} .ih-scope .card .nm{font-weight:800;font-size:21px;letter-spacing:.02em;text-transform:uppercase;line-height:1.1} .ih-scope .card .ds{color:rgba(242,242,242,.6);font-size:14px;line-height:1.6} .ih-scope .card .specs{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--ih-f-mono);font-size:10.5px;color:var(--ih-steel);letter-spacing:.06em;text-transform:uppercase} .ih-scope .card .specs b{color:var(--ih-white);font-weight:500} .ih-scope .card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ih-line);padding-top:14px} .ih-scope .card .foot .cta{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ih-red-hi)} .ih-scope .card .foot .micro{font-size:9.5px} /* category tiles */ .ih-scope .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ih-scope .cat{position:relative;aspect-ratio:16/10;border:1px solid var(--ih-line);overflow:hidden;background:var(--ih-surface-2);display:flex;align-items:flex-end;padding:22px;transition:border-color .3s} .ih-scope .cat .cbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.8) brightness(.75);transition:transform .6s var(--ih-ease),filter .4s} .ih-scope .cat:hover .cbg{transform:scale(1.05);filter:saturate(.95) brightness(.9)} .ih-scope .cat::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(13,13,13,.88))} .ih-scope .cat .cin{position:relative;z-index:2;width:100%} .ih-scope .cat h4{font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em} .ih-scope .cat p{font-family:var(--ih-f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ih-muted);margin-top:6px;opacity:0;transform:translateY(6px);transition:.35s var(--ih-ease)} .ih-scope .cat:hover p{opacity:1;transform:none} .ih-scope .cat .ln{position:absolute;left:22px;right:22px;bottom:64px;height:2px;background:var(--ih-red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ih-ease);z-index:2} .ih-scope .cat:hover .ln{transform:scaleX(1)} .ih-scope .cat:hover{border-color:rgba(227,6,19,.5)} /* ===== services editorial ===== */ .ih-scope .svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ih-line);border:1px solid var(--ih-line)} .ih-scope .svc-it{background:var(--ih-surface);padding:34px 32px;position:relative;transition:background .3s} .ih-scope .svc-it:hover{background:var(--ih-surface-2)} .ih-scope .svc-it .n{font-family:var(--ih-f-mono);font-size:11px;color:var(--ih-red-hi);letter-spacing:.25em;margin-bottom:16px} .ih-scope .svc-it h4{font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px} .ih-scope .svc-it .tl{color:var(--ih-muted);font-size:15px;font-style:italic;margin-bottom:12px} .ih-scope .svc-it p{color:rgba(242,242,242,.6);font-size:14px;line-height:1.65} .ih-scope .svc-it a.more{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ih-red-hi)} /* ===== standard (process line) ===== */ .ih-scope .std{position:relative;padding-left:0} .ih-scope .std .track{position:absolute;left:23px;top:10px;bottom:10px;width:2px;background:rgba(242,242,242,.1)} .ih-scope .std .track i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--ih-red);transition:height 1.4s var(--ih-ease)} .ih-scope .std.is-in .track i{height:100%} .ih-scope .std ol{list-style:none;display:flex;flex-direction:column;gap:34px} .ih-scope .std li{position:relative;padding-left:70px} .ih-scope .std .pt{position:absolute;left:14px;top:2px;width:20px;height:20px;border:2px solid var(--ih-red);background:var(--ih-black);transform:rotate(45deg)} .ih-scope .std .stage{font-family:var(--ih-f-mono);font-size:10.5px;color:var(--ih-red-hi);letter-spacing:.25em;text-transform:uppercase} .ih-scope .std h4{font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin:8px 0 8px} .ih-scope .std p{color:rgba(242,242,242,.62);font-size:15px;line-height:1.65;max-width:560px} /* ===== duo/editorial ===== */ .ih-scope .duo{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center} .ih-scope .duo .txt p{color:rgba(242,242,242,.72);font-size:16px;line-height:1.75;margin-bottom:18px} .ih-scope .duo .txt p b{color:var(--ih-white)} .ih-scope .frame{position:relative;border:1px solid var(--ih-line);background:var(--ih-surface-2)} .ih-scope .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(.85)} .ih-scope .frame .tab{position:absolute;left:0;bottom:0;background:var(--ih-red);color:#fff;font-family:var(--ih-f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:9px 15px;z-index:2} /* ===== stats ===== */ .ih-scope .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ih-line);border:1px solid var(--ih-line)} .ih-scope .stat{background:var(--ih-black);padding:32px 28px} .ih-scope .stat .v{font-weight:800;font-size:clamp(38px,4.4vw,58px);line-height:1} .ih-scope .stat .v i{color:var(--ih-red-hi);font-style:normal} .ih-scope .stat .k{font-family:var(--ih-f-mono);font-size:10.5px;color:var(--ih-steel);letter-spacing:.18em;text-transform:uppercase;margin-top:12px;line-height:1.7} /* ===== band CTA ===== */ .ih-scope .band{background:var(--ih-surface);border-top:1px solid var(--ih-line);border-bottom:1px solid var(--ih-line);display:grid;grid-template-columns:1.4fr auto;align-items:center;gap:30px;padding:clamp(48px,6vw,76px) var(--ih-pad-x)} .ih-scope .band h3{font-weight:800;font-size:clamp(26px,3.6vw,46px);text-transform:uppercase;line-height:1.02} .ih-scope .band p{color:rgba(242,242,242,.65);margin-top:12px;font-size:15.5px;max-width:560px;line-height:1.65} .ih-scope .band .ctas{justify-content:flex-end} /* ===== forms ===== */ .ih-scope .field{display:flex;flex-direction:column;gap:8px} .ih-scope .field label{font-family:var(--ih-f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ih-muted)} .ih-scope .field label i{color:var(--ih-red-hi);font-style:normal} .ih-scope .field input, .ih-scope .field textarea, .ih-scope .field select{background:var(--ih-surface-2);border:1px solid var(--ih-line-strong);color:var(--ih-white);font-family:var(--ih-f-display);font-size:15px;padding:13px 14px;outline:none;transition:border-color .25s;border-radius:0;min-height:46px} .ih-scope .field textarea{min-height:110px;resize:vertical} .ih-scope .field input:focus, .ih-scope .field textarea:focus, .ih-scope .field select:focus{border-color:var(--ih-red)} .ih-scope .field .err{display:none;font-family:var(--ih-f-mono);font-size:10px;color:var(--ih-red-hi);letter-spacing:.08em} .ih-scope .field.bad input, .ih-scope .field.bad select, .ih-scope .field.bad textarea{border-color:var(--ih-red)} .ih-scope .field.bad .err{display:block} .ih-scope .check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(242,242,242,.72);line-height:1.6} .ih-scope .check input{width:18px;height:18px;accent-color:var(--ih-red);margin-top:2px;flex-shrink:0} /* booking wizard */ .ih-scope .wiz{max-width:860px;margin:0 auto} .ih-scope .wsteps{display:flex;gap:0;border:1px solid var(--ih-line);margin-bottom:40px;overflow-x:auto} .ih-scope .wsteps div{flex:1;padding:14px 10px;text-align:center;font-family:var(--ih-f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ih-steel);border-right:1px solid var(--ih-line);white-space:nowrap;position:relative;min-width:92px} .ih-scope .wsteps div:last-child{border-right:none} .ih-scope .wsteps div.is-on{color:var(--ih-white);background:var(--ih-surface-2)} .ih-scope .wsteps div.is-on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ih-red)} .ih-scope .wsteps div.done{color:var(--ih-red-hi)} .ih-scope .wpane{display:none} .ih-scope .wpane.is-on{display:block} .ih-scope .wpane h3{font-weight:800;font-size:24px;text-transform:uppercase;margin-bottom:8px} .ih-scope .wpane .hint{color:var(--ih-steel);font-size:14px;line-height:1.6;margin-bottom:28px} .ih-scope .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .ih-scope .frow.one{grid-template-columns:1fr} .ih-scope .wnav{display:flex;justify-content:space-between;gap:14px;margin-top:34px;border-top:1px solid var(--ih-line);padding-top:24px} .ih-scope .pills{display:flex;gap:10px;flex-wrap:wrap} .ih-scope .pill{font-family:var(--ih-f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ih-muted);border:1px solid var(--ih-line-strong);padding:11px 16px;cursor:pointer;transition:.25s;min-height:44px;display:inline-flex;align-items:center} .ih-scope .pill:hover{color:var(--ih-white);border-color:var(--ih-white)} .ih-scope .pill.is-on{background:var(--ih-red);border-color:var(--ih-red);color:#fff} .ih-scope .wsuccess{display:none;text-align:center;padding:60px 20px;border:1px solid var(--ih-line);background:var(--ih-surface)} .ih-scope .wsuccess.is-on{display:block} .ih-scope .wsuccess .ref{font-family:var(--ih-f-mono);font-size:13px;color:var(--ih-red-hi);letter-spacing:.2em;margin:18px 0} /* ===== chips filter ===== */ .ih-scope .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px} .ih-scope .chip{font-family:var(--ih-f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ih-steel);border:1px solid var(--ih-line-strong);padding:11px 18px;transition:.25s;cursor:pointer;min-height:44px} .ih-scope .chip:hover{color:var(--ih-white);border-color:var(--ih-white)} .ih-scope .chip.act{background:var(--ih-red);border-color:var(--ih-red);color:#fff} /* ===== case studies ===== */ .ih-scope .case{border:1px solid var(--ih-line);background:var(--ih-surface);display:grid;grid-template-columns:1fr 1.2fr;overflow:hidden} .ih-scope .case .cimg{background:var(--ih-surface-2);min-height:280px;position:relative} .ih-scope .case .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)} .ih-scope .case .cbody{padding:30px} .ih-scope .case dl{display:grid;grid-template-columns:110px 1fr;gap:10px 18px;margin-top:18px} .ih-scope .case dt{font-family:var(--ih-f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ih-red-hi);padding-top:2px} .ih-scope .case dd{color:rgba(242,242,242,.75);font-size:14px;line-height:1.55} /* ===== tables (specs) ===== */ .ih-scope .spec-t{width:100%;border-collapse:collapse;border:1px solid var(--ih-line)} .ih-scope .spec-t th{font-family:var(--ih-f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ih-red-hi);text-align:left;padding:14px 16px;border-bottom:1px solid var(--ih-line);background:var(--ih-surface-2)} .ih-scope .spec-t td{padding:12px 16px;border-bottom:1px solid var(--ih-line);font-size:14px;color:rgba(242,242,242,.78)} .ih-scope .spec-t td:first-child{font-family:var(--ih-f-mono);font-size:11px;letter-spacing:.08em;color:var(--ih-steel);text-transform:uppercase;width:44%} /* faq */ .ih-scope .faq{border:1px solid var(--ih-line)} .ih-scope .faq details{border-bottom:1px solid var(--ih-line);background:var(--ih-surface)} .ih-scope .faq details:last-child{border-bottom:none} .ih-scope .faq summary{padding:20px 24px;font-weight:700;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .ih-scope .faq summary::after{content:'+';font-family:var(--ih-f-mono);color:var(--ih-red-hi);font-size:18px} .ih-scope .faq details[open] summary::after{content:'—'} .ih-scope .faq .a{padding:0 24px 22px;color:rgba(242,242,242,.65);font-size:14.5px;line-height:1.7;max-width:720px} /* ===== footer ===== */ .ih-scope footer{border-top:1px solid var(--ih-line);background:var(--ih-surface)} .ih-scope .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding:60px var(--ih-pad-x) 46px} .ih-scope .fgrid .fb img{height:42px;margin-bottom:16px} .ih-scope .fgrid .fb p{color:var(--ih-steel);font-size:14px;line-height:1.7;max-width:300px} .ih-scope .fgrid h5{font-family:var(--ih-f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ih-red-hi);margin-bottom:18px} .ih-scope .fgrid ul{list-style:none;display:flex;flex-direction:column;gap:10px} .ih-scope .fgrid ul a, .ih-scope .fgrid ul li{color:rgba(242,242,242,.72);font-size:14px} .ih-scope .fgrid ul a:hover{color:var(--ih-red-hi)} .ih-scope .fgrid .mono-sm{font-family:var(--ih-f-mono);font-size:12px;letter-spacing:.04em;line-height:2;color:rgba(242,242,242,.72)} .ih-scope .fgrid .mono-sm b{color:var(--ih-white);font-weight:500} .ih-scope .fbot{border-top:1px solid var(--ih-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--ih-pad-x);font-family:var(--ih-f-mono);font-size:10px;color:var(--ih-steel);letter-spacing:.14em;text-transform:uppercase} .ih-scope .fbot .r{display:flex;gap:18px;flex-wrap:wrap} .ih-scope .fbot a{color:var(--ih-steel)} .ih-scope .fbot a:hover{color:var(--ih-white)} .ih-scope .fbot .dot{color:var(--ih-red)} /* mobile conversion bar */ .ih-scope .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(13,13,13,.97);border-top:1px solid var(--ih-line-strong);grid-template-columns:1.3fr 1fr 1fr} .ih-scope .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;min-height:52px} .ih-scope .mbar a:first-child{background:var(--ih-red);color:#fff} .ih-scope .mbar a+a{border-left:1px solid var(--ih-line)} /* reveal */ .ih-scope .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ih-ease),transform .7s var(--ih-ease)} .ih-scope .rv.is-in{opacity:1;transform:none} /* page hero (sub) */ .ih-scope .phero{position:relative;padding:clamp(80px,10vw,150px) var(--ih-pad-x) clamp(50px,6vw,80px);border-bottom:1px solid var(--ih-line);overflow:hidden} .ih-scope .phero .bgm{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;filter:saturate(.7)} .ih-scope .phero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.35),rgba(13,13,13,.96))} .ih-scope .phero>div{position:relative;z-index:2} .ih-scope .crumbs{font-family:var(--ih-f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ih-steel);margin-bottom:26px} .ih-scope .crumbs a{color:var(--ih-steel)} .ih-scope .crumbs a:hover{color:var(--ih-white)} .ih-scope .crumbs i{color:var(--ih-red);font-style:normal;padding:0 8px} /* responsive */ @media(max-width:1240px){ .ih-scope .links{gap:14px} .ih-scope .links a{font-size:11px} } @media(max-width:1080px){ .ih-scope .g4{grid-template-columns:repeat(2,1fr)} .ih-scope .g3{grid-template-columns:repeat(2,1fr)} .ih-scope .cats{grid-template-columns:repeat(2,1fr)} .ih-scope .svc{grid-template-columns:1fr} .ih-scope .trust{grid-template-columns:repeat(2,1fr)} .ih-scope .trust div{border-bottom:1px solid var(--ih-line)} .ih-scope .stats{grid-template-columns:repeat(2,1fr)} .ih-scope .duo{grid-template-columns:1fr} .ih-scope .fgrid{grid-template-columns:1fr 1fr} .ih-scope .case{grid-template-columns:1fr} .ih-scope .band{grid-template-columns:1fr} .ih-scope .band .ctas{justify-content:flex-start} } @media(max-width:1140px){ .ih-scope .links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(13,13,13,.98);border-bottom:1px solid var(--ih-line);flex-direction:column;align-items:flex-start;padding:18px var(--ih-pad-x) 26px;gap:4px;margin-left:0} .ih-scope .links.is-open{display:flex} .ih-scope .links a{font-size:16px;padding:12px 0} .ih-scope .burger{display:flex;margin-left:auto} .ih-scope .nav .row{gap:16px} } @media(max-width:900px){ .ih-scope .mbar{display:grid} .ih-scope .util .r .hide-m{display:none} } @media(max-width:640px){ .ih-scope .g4, .ih-scope .g3, .ih-scope .g2, .ih-scope .cats{grid-template-columns:1fr} .ih-scope .stats{grid-template-columns:1fr 1fr} .ih-scope .fgrid{grid-template-columns:1fr} .ih-scope .hero{min-height:74vh} .ih-scope .frow{grid-template-columns:1fr} .ih-scope .trust{grid-template-columns:1fr} .ih-scope .case dl{grid-template-columns:96px 1fr} } @media(prefers-reduced-motion:reduce){ .ih-scope *, .ih-scope *::before, .ih-scope *::after{animation:none!important;transition:none!important} .ih-scope .rv{opacity:1;transform:none} .ih-scope .dline::before{transform:none} .ih-scope .std .track i{height:100%} } /* ── SCOPE ROOT ────────────────────────────────────────────────────── Carries what html,body carried in the export. Every ported section sits inside an element with this class. */ .ih-scope{ background: var(--ih-black); color: var(--ih-white); font-family: var(--ih-f-display); -webkit-font-smoothing: antialiased; } /* ── BRAND-LOCKED PAGES ────────────────────────────────────────────── inc/brand-lock.php stamps .ih-brand-locked onto on 4706 and 4754. The Μάρκα dropdown is meaningless there: selecting Royal Enfield on the CF Moto page ANDs against the lock and returns zero results. Correct behaviour, confusing screen — remove the control rather than weaken the lock. */ .ih-brand-locked .filter-sidebar .stm-filter_make{ display: none; } /* ── PARALLAX ──────────────────────────────────────────────────────── Paired with the parallax engine in assets/js/ih-site.js. One system for every photo block. Do NOT also set parallax="content-moving" on the same WPBakery row — two engines translating one layer judder. Markup:
…content…
The -15% inset top and bottom gives the image 30% more height than its container, which is the headroom the transform travels within. Change it here and change `rect.height * 0.15` in ih-site.js to match, or an edge will show at the extremes. isolation:isolate creates a stacking context so the image layer can never escape above WPBakery chrome sitting outside the block. ──────────────────────────────────────────────────────────────────── */ .ih-scope .ih-px{ position: relative; overflow: hidden; isolation: isolate; } .ih-scope .ih-px-img{ position: absolute; inset: 0; transform: scale(1.15); background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; z-index: 0; } /* Everything that is not the image layer sits above it. */ .ih-scope .ih-px > *:not(.ih-px-img){ position: relative; z-index: 1; } /* Legibility scrim. Without it, white type over a bright photo fails contrast on roughly half the frames a cover-fitted image can land on. */ .ih-scope .ih-px-img::after{ content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(13,13,13,.35) 0%, rgba(13,13,13,.55) 55%, rgba(13,13,13,.85) 100% ); } /* Darker scrim for blocks carrying a lot of body copy. */ .ih-scope .ih-px.ih-px-deep .ih-px-img::after{ background: linear-gradient( 180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.78) 100% ); } /* Side-lit variant for split rows where type sits on one half. */ .ih-scope .ih-px.ih-px-left .ih-px-img::after{ background: linear-gradient( 90deg, rgba(13,13,13,.88) 0%, rgba(13,13,13,.55) 45%, rgba(13,13,13,.15) 100% ); } .ih-scope .ih-px-body{ padding: clamp(56px, 9vw, 132px) var(--ih-pad-x); } /* Full-height hero. min-height rather than height so long Greek headlines can push it taller instead of overflowing. */ .ih-scope .ih-px-hero{ min-height: min(88vh, 780px); display: flex; align-items: flex-end; } @media (max-width: 900px){ /* Engine is off below this width; the transform is cleared in JS. */ .ih-scope .ih-px-img{ transform: none; } .ih-scope .ih-px-hero{ min-height: 62vh; } } @media (prefers-reduced-motion: reduce){ .ih-scope .ih-px-img{ transform: none !important; } } /* ── WPBAKERY BRIDGE ───────────────────────────────────────────────── Makes NATIVE WPBakery elements render in the design's voice, so pages are built from editable blocks instead of Raw HTML. Text, headings, images and buttons all stay editable in the visual editor. Recipe per element — the class goes in "Extra Class Name": Row ih-scope required on every design row ih-px + a background image = parallax ih-px-fast/slow travel speed ih-band surface bg + hairline rules ih-tight kills the row's vertical padding Custom Heading kick mono eyebrow, red, letterspaced h1 / h2 / h3 display scale Text Block lede large intro paragraph meta small muted right-column note Button (nothing needed — styled below) Single Image ih-logo contained, drop-shadowed brand mark .ih-scope already sets the background and font, so a row carrying it needs no Design Options colour work. ──────────────────────────────────────────────────────────────────── */ /* Row padding: WPBakery ships 0; the design expects real breathing room. */ .ih-scope > .vc_column_container > .vc_column-inner, .ih-scope .vc_row > .vc_column_container > .vc_column-inner{ padding-top: 0; padding-bottom: 0; } .vc_row.ih-scope{ padding: clamp(48px, 5.5vw, 92px) var(--ih-pad-x); } /* Section rhythm. A heading row above a content row otherwise stacks 92px of bottom padding on 92px of top padding — 184px of black between a heading and the thing it introduces, which reads as a broken layout rather than breathing room. Pair them: ih-tight-b on the heading row, ih-tight-t on the content row below it. Adjacent-sibling CSS cannot do this automatically — WPBakery injects .vc_row-full-width placeholder divs between rows, so `+` selectors miss. */ .vc_row.ih-scope.ih-tight { padding-top: 0; padding-bottom: 0; } .vc_row.ih-scope.ih-tight-t{ padding-top: 0; } .vc_row.ih-scope.ih-tight-b{ padding-bottom: 22px; } .vc_row.ih-scope.ih-band{ background: var(--ih-surface); border-top: 1px solid var(--ih-line); border-bottom: 1px solid var(--ih-line); } /* A parallax row needs its own stacking context and clipping, same as the hand-written .ih-px block. */ .vc_row.ih-scope.ih-px{ position: relative; overflow: hidden; isolation: isolate; } .vc_row.ih-scope.ih-px > .vc_column_container{ position: relative; z-index: 1; } /* Custom Heading — WPBakery emits inline font-size/color when those fields are filled in, and inline beats a stylesheet. Leave the typography fields EMPTY in the editor and let these classes work. */ .ih-scope .vc_custom_heading.kick{ font-family: var(--ih-f-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ih-red-hi); margin-bottom: 18px; } .ih-scope .vc_custom_heading.h1{ font-size: clamp(38px, 6.2vw, 78px); font-weight: 700; line-height: 1.03; letter-spacing: -.015em; color: var(--ih-white); margin-bottom: 22px; } .ih-scope .vc_custom_heading.h2{ font-size: clamp(28px, 4vw, 48px); font-weight: 700; line-height: 1.08; color: var(--ih-white); margin-bottom: 18px; } .ih-scope .vc_custom_heading.h3.align-h2{ margin-top: 34px; } .ih-scope .vc_custom_heading.h3{ font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.2; color: var(--ih-white); margin-bottom: 10px; } .ih-scope .vc_custom_heading .acc{ color: var(--ih-red); } /* Text blocks */ .ih-scope .wpb_text_column p{ color: rgba(242,242,242,.72); line-height: 1.66; } .ih-scope .wpb_text_column p + p{ margin-top: 14px; } .ih-scope .wpb_text_column b, .ih-scope .wpb_text_column strong{ color: var(--ih-white); font-weight: 600; } .ih-scope .wpb_text_column a{ color: var(--ih-white); text-decoration: none; border-bottom: 1px solid var(--ih-red); padding-bottom: 1px; transition: color .2s var(--ih-ease), border-color .2s var(--ih-ease); } .ih-scope .wpb_text_column a:hover{ color: var(--ih-red-hi); border-color: var(--ih-red-hi); } /* Contact details set larger than body copy — they are the point of the block, not a footnote. */ .ih-scope .wpb_text_column.contact p{ font-size: clamp(17px, 1.6vw, 21px); line-height: 2; color: var(--ih-white); } .ih-scope .wpb_text_column.lede p{ font-size: clamp(16px, 1.5vw, 19px); color: rgba(242,242,242,.82); max-width: 62ch; } .ih-scope .wpb_text_column.meta p{ font-size: 14px; color: var(--ih-steel); max-width: 44ch; } /* Buttons — override vc_btn3 rather than asking the editor to set nine colour fields per button. Leave the button style as "Default". */ .ih-scope .vc_btn3-container{ display: inline-block; margin: 0 12px 12px 0; } .ih-scope .vc_btn3.vc_general{ font-family: var(--ih-f-display); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 15px 30px; border-radius: 0; border: 1px solid var(--ih-red); background: var(--ih-red); color: #fff; transition: background .25s var(--ih-ease), border-color .25s var(--ih-ease), transform .25s var(--ih-ease); } .ih-scope .vc_btn3.vc_general:hover{ background: var(--ih-red-hi); border-color: var(--ih-red-hi); color: #fff; transform: translateY(-2px); } /* Secondary: add "ghost" to the button's Extra Class Name. */ .ih-scope .ghost .vc_btn3.vc_general, .ih-scope .vc_btn3.vc_general.ghost{ background: transparent; border-color: var(--ih-line-strong); color: var(--ih-white); } .ih-scope .ghost .vc_btn3.vc_general:hover, .ih-scope .vc_btn3.vc_general.ghost:hover{ background: var(--ih-red); border-color: var(--ih-red); } /* Single Image used as a brand mark */ .ih-scope .ih-logo .vc_single_image-wrapper{ display: block; } .ih-scope .ih-logo img{ max-height: 190px; width: auto; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); } /* Separator */ .ih-scope .vc_separator .vc_sep_line{ border-color: var(--ih-line); } @media (max-width: 900px){ .vc_row.ih-scope{ padding: clamp(44px, 9vw, 72px) var(--ih-pad-x); } .ih-scope .vc_btn3-container{ display: block; margin-right: 0; } .ih-scope .vc_btn3.vc_general{ display: block; text-align: center; } } /* Closing band slash — the logo motif as decoration on .ih-slash. Pseudo-elements rather than markup, so the row stays fully editable. */ .vc_row.ih-scope.ih-slash{ position: relative; overflow: hidden; } .vc_row.ih-scope.ih-slash > .vc_column_container{ position: relative; z-index: 1; } .vc_row.ih-scope.ih-slash::before, .vc_row.ih-scope.ih-slash::after{ content: ''; position: absolute; top: -40%; height: 180%; transform: skewX(-18deg); pointer-events: none; } .vc_row.ih-scope.ih-slash::before{ right: -6%; width: 34%; background: var(--ih-red); opacity: .14; } .vc_row.ih-scope.ih-slash::after{ right: 12%; width: 6%; background: var(--ih-white); opacity: .07; } @media (max-width: 900px){ .vc_row.ih-scope.ih-slash::before, .vc_row.ih-scope.ih-slash::after{ display: none; } } /* Hero row: the design's full-height treatment, applied by class rather than by inline Design Options so it survives an editor round-trip. */ .vc_row.ih-scope.ih-hero-row{ min-height: min(82vh, 760px); display: flex; align-items: flex-end; } @media (max-width: 900px){ .vc_row.ih-scope.ih-hero-row{ min-height: 60vh; } } /* ── THE IRONHORSE STANDARD ────────────────────────────────────────── Six-stage process track, built from six native WPBakery columns so every stage stays editable. Row class: ih-std Per column: Custom Heading .stage + Custom Heading .h4 + Text Block The connecting line and the node dots are drawn here, not in markup. */ .vc_row.ih-scope.ih-std{ position: relative; } /* The line. Sits behind the nodes, inset by half a column so it starts and ends under the first and last dot rather than at the row edge. */ .vc_row.ih-scope.ih-std > .vc_column_container::before{ content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--ih-line-strong); z-index: 0; } .vc_row.ih-scope.ih-std > .vc_column_container:first-child::before{ left: 50%; } .vc_row.ih-scope.ih-std > .vc_column_container:last-child::before{ right: 50%; } /* The node. */ .vc_row.ih-scope.ih-std > .vc_column_container > .vc_column-inner{ position: relative; padding-top: 30px !important; padding-right: 18px; } .vc_row.ih-scope.ih-std > .vc_column_container > .vc_column-inner::before{ content: ''; position: absolute; top: 2px; left: 0; width: 11px; height: 11px; background: var(--ih-red); transform: skewX(-18deg); z-index: 1; } .ih-scope .vc_custom_heading.stage{ font-family: var(--ih-f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ih-steel); margin-bottom: 8px; } .ih-scope .vc_custom_heading.h4{ font-size: 17px; font-weight: 600; color: var(--ih-white); margin-bottom: 8px; } .vc_row.ih-scope.ih-std .wpb_text_column p{ font-size: 13.5px; line-height: 1.55; } @media (max-width: 900px){ /* Line goes vertical, running down the left of the stack. */ .vc_row.ih-scope.ih-std > .vc_column_container::before{ top: 0; bottom: 0; height: auto; left: 5px; right: auto; width: 1px; } .vc_row.ih-scope.ih-std > .vc_column_container:first-child::before{ left: 5px; top: 12px; } .vc_row.ih-scope.ih-std > .vc_column_container:last-child::before{ right: auto; bottom: 50%; } .vc_row.ih-scope.ih-std > .vc_column_container > .vc_column-inner{ padding-top: 0 !important; padding-left: 30px; padding-bottom: 26px; } .vc_row.ih-scope.ih-std > .vc_column_container > .vc_column-inner::before{ top: 6px; } } /* ── STATS BAND ────────────────────────────────────────────────────── Four native columns. Row class: ih-stats Per column: Custom Heading .stat-v + Text Block .stat-k */ .ih-scope .vc_custom_heading.stat-v{ font-size: clamp(40px, 5vw, 66px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ih-white); margin-bottom: 10px; } .ih-scope .vc_custom_heading.stat-v em{ font-style: normal; font-size: .45em; color: var(--ih-red); margin-left: 2px; } .ih-scope .wpb_text_column.stat-k p{ font-family: var(--ih-f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ih-steel); } .vc_row.ih-scope.ih-stats > .vc_column_container{ border-left: 1px solid var(--ih-line); } .vc_row.ih-scope.ih-stats > .vc_column_container:first-child{ border-left: 0; } .vc_row.ih-scope.ih-stats > .vc_column_container > .vc_column-inner{ padding-left: 26px; } .vc_row.ih-scope.ih-stats > .vc_column_container:first-child > .vc_column-inner{ padding-left: 0; } @media (max-width: 900px){ .vc_row.ih-scope.ih-stats > .vc_column_container{ border-left: 0; border-top: 1px solid var(--ih-line); } .vc_row.ih-scope.ih-stats > .vc_column_container:first-child{ border-top: 0; } .vc_row.ih-scope.ih-stats > .vc_column_container > .vc_column-inner{ padding: 20px 0 !important; } } /* [stm_car_listing_features] renders an empty wrapper when no listing carries the featured flag, and that wrapper still reserves height. Collapse it so an unflagged inventory reads as "not built yet" rather than "broken". Remove once listings are flagged. */ .ih-scope .stm-car-listing-features:empty, .ih-scope .car-listing-row:empty{ display: none; } /* ── MOTORS PALETTE OVERRIDE ───────────────────────────────────────── Repaints Motors — theme AND plugin — in one place. WHY HERE AND NOT IN THEME OPTIONS: Colours resolve per template (inc/custom.php:2258). This site runs stm-template-motorcycle, so the "Car Dealer Color" fields in Theme Options → General write to the dealer template and never render. Chasing the right field per setting is slow and easy to get wrong. This works because of stylesheet order in : motors-style-inline-css plugin :root stm-theme-style-inline-css theme :root child-style-css ours ih-design.css ours, last ← wins Same specificity, later in the cascade. No !important needed. Values are the IRONHORSE brand palette. #df1d1d, Motors' motorcycle default red, is close enough to #E30613 to look like a mistake when both appear on one screen — which is exactly what was happening. ──────────────────────────────────────────────────────────────────── */ :root{ /* Theme */ --motors-default-base-color: #E30613; --motors-default-secondary-color: #1F1F1F; --motors-base-color: #E30613; --motors-secondary-color: #1F1F1F; /* Header mega-menu. TRANSPARENT, not a colour. stm-megamenu paints a block behind each
  • from these; the design has no block at all — just the text and its underline sweep. Setting them to any colour puts a chip behind every menu item, which is what a dark value did here and what Motors' #df1d1d default did before that. */ --hma_background_color: transparent; --hma_item_bg_color: transparent; --hma_hover_bg_color: transparent; --hma_hover_active_bg_color: transparent; --hma_hover_text_color: #F2F2F2; --hma_underline: transparent; --hma_underline_2: transparent; --hma_hover_underline: transparent; --hma_hover_underline_2: transparent; /* Plugin — accent */ --motors-accent-color: #E30613; --motors-accent-color-alpha: rgba(227,6,19,.5); --motors-accent-color-highalpha: rgba(227,6,19,.7); --motors-accent-color-lowalpha: rgba(227,6,19,.3); --motors-accent-color-super-lowalpha: rgba(227,6,19,.1); /* Plugin — surfaces */ --motors-bg-color: #0D0D0D; --motors-bg-shade: #141414; --motors-bg-lowalpha-color: rgba(13,13,13,.3); --motors-bg-alpha-color: rgba(13,13,13,.5); --motors-bg-highalpha-color: rgba(13,13,13,.7); --motors-bg-contrast: #F2F2F2; --motors-bg-lowestalpha-contrast: rgba(242,242,242,.08); --motors-bg-lowalpha-contrast: rgba(242,242,242,.2); --motors-bg-alpha-contrast: rgba(242,242,242,.4); --motors-bg-highalpha-contrast: rgba(242,242,242,.65); --motors-bg-highestalpha-contrast: rgba(242,242,242,.85); /* Plugin — text. Inverted: Motors assumes dark-on-light. */ --motors-text-color: #F2F2F2; --motors-contrast-text-color: #0D0D0D; --motors-text-highalpha-color: rgba(242,242,242,.72); --motors-text-highestalpha-color: rgba(242,242,242,.85); --motors-text-alpha-color: rgba(242,242,242,.55); --motors-text-lowalpha-color: rgba(242,242,242,.32); --motors-text-lowestalpha-color: rgba(242,242,242,.12); --motors-contrast-text-lowestalpha-color: rgba(13,13,13,.1); --motors-contrast-text-lowalpha-color: rgba(13,13,13,.3); --motors-contrast-text-alpha-color: rgba(13,13,13,.5); --motors-contrast-text-highalpha-color: rgba(13,13,13,.7); --motors-contrast-text-highestalpha-color: rgba(13,13,13,.85); --motors-border-color: rgba(242,242,242,.12); --motors-contrast-border-color: rgba(13,13,13,.15); /* Plugin — badges. Sold is deliberately grey: a red "sold" badge beside a red brand accent reads as an error, not a status. */ --motors-spec-badge-color: #FF4D00; --motors-sold-badge-color: #6B6B6B; --motors-error-bg-color: rgba(227,6,19,.15); --motors-notice-bg-color: rgba(255,77,0,.15); --motors-success-bg-color: rgba(74,222,128,.15); --motors-error-text-color: #FF2733; --motors-notice-text-color: #FF4D00; --motors-success-text-color: #4ADE80; /* Plugin — cards */ --motors-card-bg-color: #141414; --motors-card-bg-hover-color: #1A1A1A; --motors-card-title-color: #F2F2F2; --motors-card-price-color: rgba(242,242,242,.62); --motors-card-border-color: rgba(242,242,242,.10); --motors-card-options-color: #8A8680; --motors-card-options-color-super-low-alpha: rgba(242,242,242,.10); --motors-card-btn-color: #E30613; --motors-card-btn-color-lowalpha: rgba(227,6,19,.6); --motors-card-btn-color-highalpha: rgba(227,6,19,.8); --motors-card-btn-color-super-lowalpha: rgba(227,6,19,.15); --motors-card-popup-hover-bg-color: #1A1A1A; --motors-card-popup-border-color: rgba(242,242,242,.15); /* Plugin — filter sidebar */ --motors-filter-inputs-color: #1A1A1A; --motors-filter-bg-color: #141414; --motors-filter-border-color: #232323; --motors-filter-border-color-mediumalpha: rgba(35,35,35,.5); --motors-filter-border-color-highalpha: rgba(35,35,35,.8); --motors-filter-border-color-lowalpha: rgba(35,35,35,.3); --motors-filter-border-color-super-lowalpha: rgba(35,35,35,.2); --motors-filter-text-color: #F2F2F2; --motors-filter-text-color-lowalpha: rgba(242,242,242,.5); --motors-filter-text-color-highalpha: rgba(242,242,242,.8); --motors-filter-text-color-super-lowalpha: rgba(242,242,242,.2); --motors-filter-field-bg-color: #1A1A1A; --motors-filter-field-text-color: #F2F2F2; --motors-filter-field-text-color-lowalpha: rgba(242,242,242,.5); --motors-filter-field-text-color-highalpha: rgba(242,242,242,.8); --motors-filter-field-text-color-super-lowalpha: rgba(242,242,242,.2); --motors-filter-field-text-color-secondary: #F2F2F2; --motors-filter-field-text-color-secondary-lowalpha: rgba(242,242,242,.4); --motors-filter-field-text-color-secondary-highalpha: rgba(242,242,242,.8); --motors-filter-field-border-color: rgba(242,242,242,.2); --motors-filter-field-border-color-lowalpha: rgba(242,242,242,.1); --motors-filter-field-link-color: #E30613; --motors-filter-field-link-color-lowalpha: rgba(227,6,19,.5); --motors-filter-field-link-color-highalpha: rgba(227,6,19,.8); --motors-filter-field-link-color-super-lowalpha: rgba(227,6,19,.2); /* Legacy MVL set, still referenced by some plugin components. */ --mvl-primary-color: #E30613; --mvl-secondary-color: #1F1F1F; --mvl-secondary-color-dark: #141414; --mvl-third-color: #232323; --mvl-fourth-color: #0D0D0D; } /* The single-listing tab bar renders inactive tabs in the accent colour and the active one dark — louder than the thing it is not. Invert. */ .stm-filter-tabs-skewed .stm-filter-tab-single-unit{ background: var(--ih-surface-2); } .stm-filter-tabs-skewed .stm-filter-tab-single-unit a{ color: var(--ih-muted); } .stm-filter-tabs-skewed .stm-filter-tab-single-unit.active{ background: var(--ih-red); } .stm-filter-tabs-skewed .stm-filter-tab-single-unit.active a{ color: #fff; } /* ── FEATURED GRID CARDS ───────────────────────────────────────────── Reskin for [ih_featured], matching the design's .cat category tile: full-bleed image, title overlaid at the foot, a red line wiping in from the left on hover, and the taxonomy line revealing beneath it. Motors' markup is .stm_moto_single_grid_item > a > .image + .listing-car-item-meta with the meta stacked BELOW the image. The design overlays it, so the anchor becomes the aspect-ratio frame, .image is absolutely filled, and the meta is pinned to the bottom. Line and reveal come from the design verbatim: transform: scaleX(0) -> scaleX(1), origin left, .45s opacity 0 + translateY(6px) -> 1 + none, .35s ──────────────────────────────────────────────────────────────────── */ .ih-featured-grid .row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; } /* Bootstrap gives .row a clearfix — `.row:before{content:" ";display:table}`. In a grid container PSEUDO-ELEMENTS ARE GRID ITEMS, so ::before took cell one and shunted every card along by a slot. */ .ih-featured-grid .row::before, .ih-featured-grid .row::after{ content: none !important; display: none !important; } /* Motors also emits an empty