/** Shopify CDN: Minification failed Line 510:0 Expected "}" to go with "{" **/ /* Excalibur Barbell Club — theme styles. All classes namespaced exc-* so nothing collides with Ride/Dawn. */ /* ============================================================ 1. TOKENS — all derived from the logo artwork ============================================================ */ :root{ --exc-void:#070102; /* warm black, matches logo ground */ --exc-pitch:#0B0203; --exc-iron:#141012; /* panel */ --exc-iron-2:#1C1416; --exc-steel:#33292A; /* hairlines */ --exc-edge:#5A4E4B; --exc-chrome:#CCC1BC; /* warm pewter, not neutral grey */ --exc-chrome-hi:#F0EAE5; --exc-chrome-lo:#8B7973; --exc-bone:#E4DCD6; --exc-ash:#9A8D89; --exc-oxblood:#5E0304; --exc-blood:#B00A0E; --exc-blood-hot:#E31119; --exc-display:'Big Shoulders Display','Big Shoulders','Barlow Condensed',Impact,sans-serif; --exc-body:'Barlow',system-ui,-apple-system,sans-serif; --exc-mono:'Space Mono',ui-monospace,monospace; --exc-shell:1280px; --exc-gut:clamp(20px,5vw,56px); --exc-hdr:82px; --exc-bar:34px; --exc-ease:cubic-bezier(.22,.61,.36,1); } /* ============================================================ 2. RESET / BASE ============================================================ */ :where(.exc-scope,.exc-scope *,.exc-scope *::before,.exc-scope *::after){box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:calc(var(--exc-hdr) + 20px)} /* Applied to via theme.liquid so cart/checkout pages are untouched unless the class is present. */ body.exc-dark{ background:var(--exc-void);color:var(--exc-bone); font-family:var(--exc-body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } body.exc-dark .shopify-section{position:relative} :where(.exc-scope) img{max-width:100%;display:block} :where(.exc-scope) a{color:inherit;text-decoration:none} :where(.exc-scope) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :where(.exc-scope) :where(h1,h2,h3,h4){margin:0;font-family:var(--exc-display);font-weight:800;line-height:.92;letter-spacing:.005em;text-transform:uppercase} :where(.exc-scope) p{margin:0 0 1em} :where(.exc-scope) :focus-visible{outline:2px solid var(--exc-blood-hot);outline-offset:3px} .exc-shell{max-width:var(--exc-shell);margin:0 auto;padding-inline:var(--exc-gut)} .exc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* grunge grain layer */ .exc-grain{ position:fixed;inset:0;z-index:200;pointer-events:none; opacity:.26;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } .exc-vignette{position:fixed;inset:0;z-index:199;pointer-events:none; background:radial-gradient(120% 90% at 50% 38%,transparent 42%,rgba(0,0,0,.78) 100%)} .exc-skip{position:fixed;top:8px;left:8px;z-index:400;padding:10px 16px;background:var(--exc-blood); color:#fff;font-family:var(--exc-mono);font-size:12px;transform:translateY(-200%)} .exc-skip:focus{transform:none} /* ------------------------------------------------------------ GUNMETAL PLATE — the fallback surface under every photo. If an image never loads, this is what shows. It is designed, not empty: brushed steel with a red charge behind it. ------------------------------------------------------------ */ .exc-plate{ background-color:#120C0D; background-image: radial-gradient(75% 65% at 50% 18%, rgba(176,10,14,.30), transparent 68%), repeating-linear-gradient(97deg, rgba(255,255,255,.032) 0 2px, transparent 2px 5px), linear-gradient(165deg,#2B2022 0%,#150E10 48%,#080405 100%); } .exc-plate > img{position:relative;z-index:1} /* ============================================================ 3. ANNOUNCEMENT BAR ============================================================ */ .exc-promo{ position:relative;z-index:120;min-height:var(--exc-bar);display:flex;align-items:center;justify-content:center; background:linear-gradient(90deg,var(--exc-oxblood),var(--exc-blood) 50%,var(--exc-oxblood)); color:#fff;font-family:var(--exc-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;padding:8px 44px;text-align:center; } .exc-promo p{margin:0} .exc-promo a{text-decoration:underline;text-underline-offset:3px} .exc-promo-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px; display:grid;place-items:center;font-size:15px;opacity:.85} .exc-promo-x:hover{opacity:1} body.exc-promo-off .exc-promo{display:none} body.exc-promo-off .exc-hdr{top:0} /* ============================================================ 4. HEADER + GROUPED NAV ============================================================ */ .exc-hdr{ position:sticky;top:0;z-index:2147483000;height:var(--exc-hdr);display:flex;align-items:center; background:#070102; border-bottom:1px solid var(--exc-steel);transition:background .3s; } .exc-hdr.exc-solid{box-shadow:0 1px 0 rgba(176,10,14,.35)} .exc-hdr .exc-shell{display:flex;align-items:center;gap:26px;width:100%} /* header logo — the real badge artwork, plus a legible wordmark. The badge's own type is too fine to read at header scale, so it works as the emblem and the wordmark carries the name. */ .exc-mark{display:flex;align-items:center;gap:9px;flex-shrink:0} .exc-mark img{width:auto;height:64px;flex-shrink:0;margin-left:-6px;mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 58%,rgba(0,0,0,.6) 84%,transparent 100%); mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 58%,rgba(0,0,0,.6) 84%,transparent 100%)} .exc-mark-txt{font-family:var(--exc-display);font-weight:900;font-size:23px;line-height:.85; letter-spacing:.03em;text-transform:uppercase; background:linear-gradient(176deg,#FFFCF9 0%,#DCD2CB 30%,#8B7973 64%,#EFE9E4 100%); -webkit-background-clip:text;background-clip:text;color:transparent} .exc-mark-txt span{display:block;font-family:var(--exc-mono);font-weight:400;font-size:8.5px; letter-spacing:.34em;color:var(--exc-ash);margin-top:5px;-webkit-text-fill-color:var(--exc-ash)} nav.exc-nav{margin-left:auto;display:flex;align-items:center;gap:2px} .exc-navitem{position:relative} .exc-navbtn{ display:flex;align-items:center;gap:6px;padding:9px 14px; font-family:var(--exc-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--exc-bone); border:1px solid transparent;transition:color .2s,border-color .2s; } .exc-navbtn::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .25s} .exc-navitem:hover .exc-navbtn,.exc-navitem:focus-within .exc-navbtn{color:#fff;border-color:var(--exc-steel)} .exc-navitem:hover .exc-navbtn::after,.exc-navitem:focus-within .exc-navbtn::after{transform:rotate(225deg) translateY(-3px)} .exc-drop{ position:absolute;top:calc(100% + 8px);left:0;min-width:252px; background:var(--exc-iron);border:1px solid var(--exc-steel);padding:8px; box-shadow:0 24px 50px rgba(0,0,0,.6); opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s var(--exc-ease); } .exc-drop::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--exc-oxblood),var(--exc-blood-hot),var(--exc-oxblood))} .exc-navitem:hover .exc-drop,.exc-navitem:focus-within .exc-drop{opacity:1;visibility:visible;transform:none} .exc-drop a{display:block;padding:10px 12px;border-left:2px solid transparent;transition:.18s} .exc-drop a:hover{background:var(--exc-iron-2);border-left-color:var(--exc-blood)} .exc-drop b{display:block;font-family:var(--exc-display);font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase;line-height:1} .exc-drop small{display:block;font-size:12.5px;color:var(--exc-ash);line-height:1.4;margin-top:3px} .exc-hdr-cta{ padding:11px 20px;background:var(--exc-blood);color:#fff; font-family:var(--exc-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; transition:background .2s,box-shadow .2s;white-space:nowrap; box-shadow:0 0 0 rgba(227,17,25,0); } .exc-hdr-cta:hover{background:var(--exc-blood-hot);box-shadow:0 0 22px rgba(227,17,25,.45)} .exc-icons{display:flex;gap:4px;margin-left:4px} .exc-icons a{width:36px;height:36px;display:grid;place-items:center;color:var(--exc-ash);transition:color .2s} .exc-icons a:hover{color:var(--exc-chrome-hi)} .exc-icons svg{width:17px;height:17px} .exc-burger{display:none;margin-left:auto;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center} .exc-burger i{display:block;width:22px;height:2px;background:var(--exc-chrome);transition:.28s var(--exc-ease)} body.exc-nav-open .exc-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} body.exc-nav-open .exc-burger i:nth-child(2){opacity:0} body.exc-nav-open .exc-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .exc-drawer{ position:fixed;top:0;left:0;right:0;bottom:0; width:100vw;height:100dvh;z-index:2147482000; background:#070102; padding:calc(var(--exc-hdr) + 30px) var(--exc-gut) 40px; overflow-y:auto;-webkit-overflow-scrolling:touch; visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--exc-ease),visibility 0s .45s; } body.exc-nav-open .exc-drawer{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--exc-ease),visibility 0s} body.exc-nav-open{overflow:hidden} .exc-drawer-x{position:absolute;top:18px;right:calc(var(--exc-gut) - 6px); width:46px;height:46px;display:grid;place-items:center;color:var(--exc-chrome); border:1px solid var(--exc-steel);background:rgba(20,16,18,.9)} .exc-drawer-x svg{width:20px;height:20px} .exc-drawer-x:hover{color:#fff;border-color:var(--exc-edge)} .exc-dgroup{border-top:1px solid var(--exc-steel);padding:18px 0} .exc-dgroup h4{font-family:var(--exc-mono);font-weight:400;font-size:10px;letter-spacing:.3em;color:var(--exc-blood-hot);margin-bottom:12px} .exc-dgroup a{display:block;font-family:var(--exc-display);font-weight:700;font-size:32px;line-height:1.15;text-transform:uppercase} .exc-dgroup a:active{color:var(--exc-blood-hot)} .exc-drawer .exc-hdr-cta{display:block;text-align:center;margin-top:24px;padding:16px;font-size:12px} /* ============================================================ 5. HERO — the real logo is the centerpiece ============================================================ */ .exc-hero{position:relative;min-height:calc(100svh - var(--exc-hdr));display:flex;align-items:center;overflow:hidden} .exc-hero .exc-eyebrow{margin-bottom:20px} .exc-hero-bg{position:absolute;inset:0;z-index:0} .exc-hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) contrast(1.3) brightness(.34) sepia(.12)} .exc-hero-bg::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(7,1,2,.80) 0%,rgba(7,1,2,.42) 38%,rgba(7,1,2,.97) 94%)} .exc-hero-bg::before{content:"";position:absolute;inset:0;z-index:3;opacity:.32; background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px 4px)} .exc-hero .exc-shell{position:relative;z-index:4;padding-block:clamp(40px,6vw,72px);width:100%} .exc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--exc-mono);font-size:11px; letter-spacing:.26em;text-transform:uppercase;color:var(--exc-bone);margin-bottom:18px} .exc-eyebrow::before{content:"";width:34px;height:1px; background:linear-gradient(90deg,var(--exc-blood-hot),var(--exc-oxblood))} /* forged chrome headline, matched to the logo's steel */ .exc-forged{ font-size:clamp(44px,8vw,124px);font-weight:900;line-height:.84;letter-spacing:-.01em; background:linear-gradient(177deg,#FFFCF9 0%,#DCD2CB 24%,#8B7973 50%,#F0EAE5 63%,#5A4E4B 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 2px 0 rgba(176,10,14,.32);max-width:16ch; } .exc-hero-sub{font-size:clamp(16px,2vw,20px);color:#C6BDB7;max-width:52ch;margin:20px 0 30px;line-height:1.55} .exc-hero-sub b{color:var(--exc-bone);font-weight:600} .exc-btnrow{display:flex;flex-wrap:wrap;gap:12px} .exc-btn{ display:inline-flex;align-items:center;gap:10px;padding:16px 30px; font-family:var(--exc-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; border:1px solid var(--exc-edge);transition:.22s var(--exc-ease); } .exc-btn.exc-fill{background:var(--exc-blood);border-color:var(--exc-blood);color:#fff} .exc-btn.exc-fill:hover{background:var(--exc-blood-hot);border-color:var(--exc-blood-hot);box-shadow:0 0 26px rgba(227,17,25,.4)} .exc-btn.exc-ghost{color:var(--exc-chrome)} .exc-btn.exc-ghost:hover{background:var(--exc-chrome);color:var(--exc-void);border-color:var(--exc-chrome)} .exc-btn svg{width:13px;height:13px} .exc-specs{position:relative;z-index:5;border-top:1px solid var(--exc-steel);border-bottom:1px solid var(--exc-steel); background:linear-gradient(180deg,rgba(28,20,22,.85),rgba(7,1,2,.85))} .exc-specs .exc-shell{display:grid;grid-template-columns:repeat(4,1fr)} .exc-spec{padding:20px 0;border-left:1px solid var(--exc-steel);padding-left:20px} .exc-spec:first-child{border-left:0;padding-left:0} .exc-spec dt{font-family:var(--exc-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--exc-ash)} .exc-spec dd{margin:6px 0 0;font-family:var(--exc-display);font-weight:700;font-size:22px;text-transform:uppercase;line-height:1;color:var(--exc-chrome)} /* ============================================================ 6. SECTION FURNITURE ============================================================ */ section{position:relative} .exc-pad{padding-block:clamp(64px,9vw,124px)} .exc-rule{border-top:1px solid var(--exc-steel)} .exc-shead{margin-bottom:clamp(32px,4.5vw,56px);max-width:64ch} .exc-shead .exc-eyebrow{margin-bottom:14px} .exc-shead h2{font-size:clamp(38px,6.4vw,80px); background:linear-gradient(176deg,#F7F3EF 0%,#CFC5BE 45%,#8B7973 100%); -webkit-background-clip:text;background-clip:text;color:transparent} .exc-shead p{margin-top:16px;color:var(--exc-ash);font-size:17px;max-width:56ch} /* ---- REVEAL: opt-in only. No JS = everything visible. ---- */ .exc-js .exc-rv{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .8s var(--exc-ease),opacity .6s ease} .exc-js .exc-rv.exc-in{clip-path:inset(0 0 0 0);opacity:1} @media (prefers-reduced-motion:reduce){ .exc-js .exc-rv{clip-path:none;opacity:1;transition:none} html{scroll-behavior:auto} .exc-drawer{transition:none} } /* ============================================================ 7. WAYFINDER ============================================================ */ .exc-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--exc-steel);border:1px solid var(--exc-steel)} .exc-way{background:var(--exc-iron);padding:34px 28px 30px;display:flex;flex-direction:column; min-height:250px;transition:background .25s;position:relative} .exc-way:hover{background:var(--exc-iron-2)} .exc-way::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--exc-blood-hot),var(--exc-oxblood)); transform:scaleY(0);transform-origin:top;transition:transform .3s var(--exc-ease)} .exc-way:hover::before{transform:scaleY(1)} .exc-way h3{font-size:30px;margin-bottom:10px} .exc-way h3 a{color:var(--exc-chrome-hi);display:block} .exc-way h3 a::after{content:"";position:absolute;inset:0} /* whole card clickable, no nested links */ .exc-way:hover h3 a{color:#fff} .exc-way p{color:var(--exc-ash);font-size:15px;line-height:1.5;margin-bottom:18px} .exc-way ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .exc-way li a{display:inline-block;padding:6px 11px;border:1px solid var(--exc-steel); font-family:var(--exc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--exc-ash);transition:.2s} .exc-way li a:hover{color:var(--exc-chrome-hi);border-color:var(--exc-edge)} /* ============================================================ 8. AMENITIES ============================================================ */ .exc-amen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--exc-steel);border:1px solid var(--exc-steel)} .exc-am{background:var(--exc-iron);padding:30px 26px 28px} .exc-am-tag{font-family:var(--exc-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--exc-blood-hot);margin-bottom:14px;display:block} .exc-am h3{font-size:27px;margin-bottom:6px;color:var(--exc-chrome-hi)} .exc-am .exc-lede{font-family:var(--exc-display);font-weight:600;font-size:17px;text-transform:uppercase; letter-spacing:.03em;color:var(--exc-chrome);margin-bottom:10px} .exc-am p{color:var(--exc-ash);font-size:15px;line-height:1.55;margin:0} .exc-am.exc-wide{grid-column:span 2;display:flex;gap:26px;align-items:stretch} .exc-am.exc-wide > div{flex:1} .exc-am.exc-wide figure{flex:1;margin:0;min-height:180px;overflow:hidden;position:relative} .exc-am.exc-wide img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.2) brightness(.72) sepia(.1)} /* ============================================================ 9. MEMBERSHIPS ============================================================ */ .exc-plans{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--exc-steel);border:1px solid var(--exc-steel)} .exc-plan{background:var(--exc-iron);padding:34px 30px 30px;position:relative;display:flex;flex-direction:column} .exc-plan.exc-elite{background: radial-gradient(90% 70% at 50% 0%, rgba(176,10,14,.15), transparent 65%), var(--exc-iron-2)} .exc-plan-flag{position:absolute;top:0;right:0;background:var(--exc-blood);color:#fff; font-family:var(--exc-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px} .exc-plan h3{font-size:46px;line-height:.9; background:linear-gradient(176deg,#FFFCF9,#CFC5BE 48%,#8B7973); -webkit-background-clip:text;background-clip:text;color:transparent} .exc-plan .exc-kicker{font-family:var(--exc-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--exc-ash);margin-bottom:8px;display:block} .exc-plan > p{color:var(--exc-ash);font-size:15.5px;margin:12px 0 20px} .exc-plan ul{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--exc-steel)} .exc-plan li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--exc-steel);font-size:15px} .exc-plan li i{flex-shrink:0;width:15px;height:15px;margin-top:4px;position:relative} .exc-plan li i::before,.exc-plan li i::after{content:"";position:absolute;background:var(--exc-blood-hot)} .exc-plan li i::before{left:1px;top:8px;width:5px;height:1.5px;transform:rotate(45deg)} .exc-plan li i::after{left:3.5px;top:7px;width:11px;height:1.5px;transform:rotate(-50deg)} .exc-plan li.exc-off{color:var(--exc-edge)} .exc-plan li.exc-off i::before,.exc-plan li.exc-off i::after{background:var(--exc-edge);top:7px;left:2px;width:11px} .exc-plan li.exc-off i::before{transform:rotate(45deg)} .exc-plan li.exc-off i::after{transform:rotate(-45deg)} .exc-plan .exc-btn{margin-top:auto;justify-content:center} .exc-plan-note{margin-top:18px;font-family:var(--exc-mono);font-size:11px;letter-spacing:.06em;color:var(--exc-ash);text-align:center} .exc-plan-note a{color:var(--exc-chrome);border-bottom:1px solid var(--exc-blood)} /* ============================================================ 10. ATHLETES ============================================================ */ .exc-roster{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .exc-ath{border:1px solid var(--exc-steel);background:var(--exc-iron);display:flex;flex-direction:column} .exc-ath figure{margin:0;aspect-ratio:3/4;overflow:hidden;position:relative} .exc-ath img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.85);transition:filter .4s,transform .6s var(--exc-ease)} .exc-ath:hover img{filter:grayscale(0) contrast(1.05) brightness(1);transform:scale(1.04)} .exc-ath-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1} .exc-ath h3{font-size:26px;color:var(--exc-chrome-hi)} .exc-ath blockquote{margin:8px 0 16px;font-size:14px;line-height:1.5;color:var(--exc-ash);font-style:italic} .exc-ath a{margin-top:auto;font-family:var(--exc-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--exc-chrome);border-bottom:1px solid var(--exc-blood);padding-bottom:3px;align-self:flex-start} .exc-ath a:hover{color:var(--exc-blood-hot)} /* ============================================================ 11. OWNER ============================================================ */ .exc-owner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start} .exc-owner figure{margin:0;position:relative;border:1px solid var(--exc-steel);min-height:320px} .exc-owner img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.85) contrast(1.2) brightness(.8) sepia(.08)} .exc-owner figcaption{position:absolute;left:0;bottom:0;right:0;z-index:2;padding:16px 18px; background:linear-gradient(0deg,rgba(7,1,2,.96),transparent); font-family:var(--exc-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--exc-chrome)} .exc-owner-txt h2{font-size:clamp(34px,5vw,64px);margin-bottom:20px; background:linear-gradient(176deg,#F7F3EF,#CFC5BE 45%,#8B7973); -webkit-background-clip:text;background-clip:text;color:transparent} .exc-owner-txt p{color:#B4A9A4;font-size:16.5px;line-height:1.7} .exc-owner-txt p.exc-stand{font-family:var(--exc-display);font-weight:700;font-size:clamp(22px,3vw,32px); text-transform:uppercase;color:var(--exc-chrome-hi);line-height:1.05;letter-spacing:.01em; border-left:2px solid var(--exc-blood);padding-left:20px;margin:26px 0} /* ============================================================ 12. SHOP ============================================================ */ .exc-goods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .exc-good{border:1px solid var(--exc-steel);background:var(--exc-iron);display:flex;flex-direction:column;transition:border-color .25s} .exc-good:hover{border-color:var(--exc-edge)} .exc-good figure{margin:0;aspect-ratio:1;overflow:hidden;position:relative} .exc-good img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--exc-ease)} .exc-good:hover img{transform:scale(1.05)} .exc-good-body{padding:18px;display:flex;flex-direction:column;flex:1} .exc-good h3{font-size:24px;color:var(--exc-chrome-hi)} .exc-good .exc-price{font-family:var(--exc-mono);font-size:13px;color:var(--exc-ash);margin-top:6px} .exc-good .exc-go{margin-top:auto;padding-top:16px;font-family:var(--exc-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--exc-blood-hot)} .exc-good.exc-supp{background: radial-gradient(90% 70% at 20% 0%, rgba(176,10,14,.16), transparent 60%), var(--exc-iron-2); justify-content:center;align-items:flex-start;padding:30px;min-height:280px} .exc-good.exc-supp h3{font-size:30px} .exc-good.exc-supp p{color:var(--exc-ash);font-size:15px;margin:10px 0 20px} /* ============================================================ 13. TOUR BAND ============================================================ */ .exc-tour{position:relative;overflow:hidden;border-block:1px solid var(--exc-steel)} .exc-tour-bg{position:absolute;inset:0} .exc-tour-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(.26)} .exc-tour-bg::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,rgba(7,1,2,.95) 22%,rgba(7,1,2,.5) 100%)} .exc-tour .exc-shell{position:relative;z-index:3} .exc-tour-in{max-width:60ch} .exc-tour h2{font-size:clamp(40px,7vw,92px); background:linear-gradient(176deg,#FFFCF9,#CFC5BE 42%,#8B7973); -webkit-background-clip:text;background-clip:text;color:transparent} .exc-tour p{color:#C0B6B1;font-size:17.5px;margin:18px 0 28px} /* ============================================================ 14. CONTACT ============================================================ */ .exc-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)} .exc-info dl{margin:0;border-top:1px solid var(--exc-steel)} .exc-info .exc-row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--exc-steel);align-items:baseline} .exc-info dt{font-family:var(--exc-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--exc-ash)} .exc-info dd{margin:0;font-size:16.5px;color:var(--exc-bone)} .exc-info dd a{color:var(--exc-chrome)} .exc-info dd a:hover{color:var(--exc-blood-hot)} .exc-info .exc-flagged{color:var(--exc-edge);font-style:italic} form.exc-cf{display:grid;gap:14px} .exc-f2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .exc-fld label{display:block;font-family:var(--exc-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--exc-ash);margin-bottom:7px} .exc-fld input,.exc-fld textarea,.exc-fld select{ width:100%;padding:13px 14px;background:var(--exc-iron);border:1px solid var(--exc-steel); color:var(--exc-bone);font-family:var(--exc-body);font-size:16px;transition:border-color .2s} .exc-fld input:focus,.exc-fld textarea:focus,.exc-fld select:focus{border-color:var(--exc-blood);outline:none} .exc-fld textarea{min-height:120px;resize:vertical} form.exc-cf .exc-btn{justify-content:center;margin-top:4px} .exc-formnote{font-family:var(--exc-mono);font-size:11px;color:var(--exc-ash);line-height:1.6;margin:0} /* ============================================================ 15. NEWSLETTER + FOOTER ============================================================ */ .exc-news{background:linear-gradient(180deg,var(--exc-iron),var(--exc-void)); border-block:1px solid var(--exc-steel);padding-block:clamp(40px,6vw,64px)} .exc-news .exc-shell{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between} .exc-news h2{font-size:clamp(28px,4vw,44px);color:var(--exc-chrome-hi)} .exc-news p{color:var(--exc-ash);margin:8px 0 0;font-size:15.5px} .exc-news form{display:flex;flex:1;min-width:min(100%,380px);max-width:520px} .exc-news input{flex:1;padding:15px 16px;background:var(--exc-void);border:1px solid var(--exc-steel); color:var(--exc-bone);font-family:var(--exc-body);font-size:15px} .exc-news input:focus{border-color:var(--exc-blood);outline:none} .exc-news button{padding:15px 24px;background:var(--exc-blood);color:#fff; font-family:var(--exc-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--exc-blood)} .exc-news button:hover{background:var(--exc-blood-hot)} footer{padding-block:clamp(48px,6vw,72px) 0} .exc-fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px} .exc-flogo{width:min(260px,100%);position:relative;margin-bottom:4px} .exc-flogo::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:125%;height:140%;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(176,10,14,.28),transparent 75%)} .exc-flogo img{position:relative;width:100%;mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse 68% 70% at 50% 50%,#000 55%,rgba(0,0,0,.5) 82%,transparent 100%); mask-image:radial-gradient(ellipse 68% 70% at 50% 50%,#000 55%,rgba(0,0,0,.5) 82%,transparent 100%)} .exc-fcol h4{font-family:var(--exc-mono);font-weight:400;font-size:10px;letter-spacing:.26em;color:var(--exc-blood-hot);margin-bottom:16px;text-transform:uppercase} .exc-fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .exc-fcol a{font-size:15px;color:var(--exc-ash);transition:color .18s} .exc-fcol a:hover{color:var(--exc-chrome-hi)} .exc-fbrand p{color:var(--exc-ash);font-size:14.5px;max-width:34ch;margin:14px 0 18px} .exc-fsoc{display:flex;gap:8px} .exc-fsoc a{width:38px;height:38px;border:1px solid var(--exc-steel);display:grid;place-items:center;color:var(--exc-ash);transition:.2s} .exc-fsoc a:hover{color:var(--exc-chrome-hi);border-color:var(--exc-edge)} .exc-fsoc svg{width:16px;height:16px} .exc-fbot{margin-top:44px;border-top:1px solid var(--exc-steel);padding-block:22px 30px; display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; font-family:var(--exc-mono);font-size:10.5px;letter-spacing:.1em;color:var(--exc-edge);text-transform:uppercase} .exc-pays{display:flex;flex-wrap:wrap;gap:7px} .exc-pays span{padding:4px 8px;border:1px solid var(--exc-steel);font-size:9px;letter-spacing:.08em} /* portal: JS moves the drawer + dock here, out of Ride's transformed section wrappers, which otherwise break position:fixed. */ #exc-portal{position:static;display:contents} /* ============================================================ 16. MOBILE DOCK ============================================================ */ .exc-dock{position:fixed;left:0;right:0;bottom:0;z-index:2147481000;display:none; border-top:1px solid var(--exc-steel);background:rgba(7,1,2,.98);backdrop-filter:blur(12px)} .exc-dock a{flex:1;padding:15px 8px;text-align:center;font-family:var(--exc-mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--exc-chrome)} .exc-dock a+a{border-left:1px solid var(--exc-steel)} .exc-dock a.exc-pri{background:var(--exc-blood);color:#fff} /* ============================================================ 17. RESPONSIVE ============================================================ */ @media (max-width:1080px){ .exc-roster{grid-template-columns:repeat(3,1fr)} .exc-fgrid{grid-template-columns:1fr 1fr 1fr} .exc-fbrand{grid-column:1/-1} } @media (max-width:900px){ nav.exc-nav,.exc-icons,.exc-hdr .exc-hdr-cta{display:none} .exc-burger{display:flex} .exc-ways{grid-template-columns:1fr} .exc-amen{grid-template-columns:1fr 1fr} .exc-am.exc-wide{grid-column:span 2} .exc-plans{grid-template-columns:1fr} .exc-owner{grid-template-columns:1fr} .exc-owner figure{max-width:400px} .exc-goods{grid-template-columns:1fr 1fr} .exc-contact{grid-template-columns:1fr} .exc-specs .exc-shell{grid-template-columns:1fr 1fr} .exc-spec:nth-child(3){border-left:0;padding-left:0} .exc-spec:nth-child(1),.exc-spec:nth-child(2){border-bottom:1px solid var(--exc-steel)} .exc-dock{display:flex} footer{padding-bottom:60px} } @media (max-width:640px){ body{font-size:16px} :root{--exc-hdr:70px} .exc-mark{gap:10px} .exc-mark img{height:52px;margin-left:-5px} .exc-mark-txt{font-size:19px}