/* ========================================================= INDIA BIKE WEEK '26 — PANCHGANI Design tokens ========================================================= */ :root{ --purple:#551a84; --purple-deep:#3a0f5e; --purple-ink:#1b0a2e; --lime:#b0e238; --lime-deep:#8fc21a; --white:#ffffff; --off:#f4f2f7; --ink:#0b0612; --grey:#9a93a6; --f-display:"owners-narrow","owners-xnarrow","trade-gothic-next-condensed",Impact,sans-serif; --f-wide:"owners-wide","owners",system-ui,sans-serif; --f-cond:"trade-gothic-next-compressed","owners-xnarrow","owners-narrow",Impact,sans-serif; --f-narrow:"owners-xnarrow","owners-narrow","owners",system-ui,sans-serif; --f-body:"owners","trade-gothic-next",system-ui,sans-serif; --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0); --ease-io:cubic-bezier(.65,0,.35,1); --nav-h:140px; --gutter:clamp(20px,5vw,80px); --max:1440px; --radius:6px; } /* Hidden-for-now blocks: delete the class to bring the block back. */ .is-hidden{display:none!important} /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} /* overflow-x lived on alone, which makes body its own scroll container on some mobile engines and can stall page scrolling. `clip` contains the overhang (drifting tyre tracks, tilted marquees) without creating a scroll container at all. */ @supports (overflow:clip){html,body{overflow-x:clip}} html.lenis,html.lenis body{height:auto} html.lenis,.lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{ font-family:var(--f-body); font-size:16px;line-height:1.5; color:var(--white); background:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul{list-style:none} :focus-visible{outline:3px solid var(--lime);outline-offset:3px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:fixed;top:-100px;left:16px;z-index:9999;background:var(--lime);color:var(--purple);padding:10px 16px;font-weight:700;text-transform:uppercase} .skip:focus{top:16px} /* ---------- Typography ---------- */ .display{ font-family:var(--f-display);font-weight:700;text-transform:uppercase; line-height:.88;letter-spacing:0; } .wide{font-family:var(--f-wide);font-weight:700;text-transform:uppercase;line-height:.9} .cond{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:.005em} .eyebrow{ font-family:var(--f-narrow);font-weight:700;text-transform:uppercase; letter-spacing:.18em;font-size:12px; } .lead{font-size:clamp(17px,1.4vw,21px);line-height:1.45;max-width:60ch;text-transform:uppercase;font-weight:400;letter-spacing:.01em} .lime{color:var(--lime)} .purple{color:var(--purple)} .white{color:var(--white)} /* ---------- Layout helpers ---------- */ .wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto} .section{position:relative;padding:clamp(72px,10vw,140px) 0} .section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(36px,5vw,64px)} .section-head h2{font-size:clamp(56px,10vw,150px)} .section-head p{max-width:48ch} /* ---------- Chips ---------- */ .chip{ display:inline-flex;align-items:center;gap:6px; font-family:var(--f-cond);font-weight:700;text-transform:uppercase; font-size:14px;letter-spacing:.04em;line-height:1; padding:6px 9px 5px;background:var(--white);color:var(--purple); transform:skewX(-6deg); } .chip>*{transform:skewX(6deg)} .chip--lime{background:var(--lime);color:var(--purple)} .chip--purple{background:var(--purple);color:var(--white)} .chip--outline{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px currentColor} /* ---------- Buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:0 26px; font-family:var(--f-narrow);font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.1em; background:var(--lime);color:var(--purple); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); transition:background .2s,color .2s; overflow:hidden;isolation:isolate;touch-action:manipulation; } .btn::before{ content:"";position:absolute;inset:0 -30%;background:var(--purple);z-index:-1; transform:translateX(-120%) skewX(-12deg);transform-origin:left; transition:transform .35s var(--ease-out); } .btn:hover{color:var(--lime)} .btn:hover::before{transform:translateX(0) skewX(0)} .btn:active{filter:brightness(.95)} .btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--white)} .btn--ghost::before{background:var(--white)} .btn--ghost:hover{color:var(--purple)} .btn--purple{background:var(--purple);color:var(--white)} .btn--purple::before{background:var(--lime)} .btn--purple:hover{color:var(--purple)} .btn--lg{min-height:62px;padding:0 34px;font-size:19px} .btn--static{pointer-events:none;cursor:default} .btn--static::before{display:none} .btn svg{width:18px;height:18px;flex:none} .btn .arrow{transition:transform .3s var(--ease-out)} .btn:hover .arrow{transform:translateX(4px)} /* ---------- Slabs (stepped diagonals) ---------- */ .slab{position:relative} .slab--purple{background:var(--purple)} .slab--lime{background:var(--lime);color:var(--purple)} .slab--white{background:var(--white);color:var(--purple)} .slab--ink{background:var(--ink)} /* top step edge: horizontal → diagonal → horizontal, like the posters */ .edge-top{clip-path:polygon(0 0,38% 0,48% 5.5vw,100% 5.5vw,100% 100%,0 100%)} .edge-top--r{clip-path:polygon(0 5.5vw,52% 5.5vw,62% 0,100% 0,100% 100%,0 100%)} .edge-both{clip-path:polygon(0 0,38% 0,48% 5.5vw,100% 5.5vw,100% calc(100% - 5.5vw),62% calc(100% - 5.5vw),52% 100%,0 100%)} @media (max-width:700px){ .edge-top{clip-path:polygon(0 0,45% 0,58% 36px,100% 36px,100% 100%,0 100%)} .edge-top--r{clip-path:polygon(0 36px,42% 36px,55% 0,100% 0,100% 100%,0 100%)} .edge-both{clip-path:polygon(0 0,45% 0,58% 36px,100% 36px,100% calc(100% - 36px),55% calc(100% - 36px),42% 100%,0 100%)} } /* ---------- Tracks texture ---------- */ .tracks{ position:absolute;pointer-events:none;z-index:0; width:clamp(420px,60vw,1100px);aspect-ratio:1091/1046; opacity:.85;will-change:transform; } .tracks img{ width:100%;height:100%; /* --trk = how far the tread has been laid down; 100% = fully drawn (no-JS default) */ --trk:100%; /* --trkdir counter-rotates per corner so the sweep always runs UP the screen */ --trkdir:to top; -webkit-mask-image:linear-gradient(var(--trkdir),#000 0,#000 var(--trk),rgba(0,0,0,0) calc(var(--trk) + 14%)); mask-image:linear-gradient(var(--trkdir),#000 0,#000 var(--trk),rgba(0,0,0,0) calc(var(--trk) + 14%)); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } .tracks--tl{top:-8%;left:-14%;transform:rotate(90deg) scaleX(-1)} .tracks--br{bottom:-10%;right:-14%;transform:rotate(180deg)} .tracks--tr{top:-12%;right:-16%} .tracks--bl{bottom:-14%;left:-18%;transform:rotate(-90deg)} .tracks--tl img{--trkdir:to right} .tracks--br img{--trkdir:to bottom} .tracks--bl img{--trkdir:to right} .tracks--tr img{--trkdir:to top} /* ---------- Halftone / grain overlay ---------- */ .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml;utf8,"); opacity:.35;mix-blend-mode:overlay; } /* ========================================================= PRELOADER ========================================================= */ .preloader{ position:fixed;inset:0;z-index:1000;background:var(--purple); display:grid;place-items:center;overflow:hidden; } .preloader .ibw-logo{width:clamp(160px,24vw,260px);height:auto} .preloader__bar{ position:absolute;left:0;bottom:0;height:6px;width:100%;background:rgba(255,255,255,.12); } .preloader__bar i{display:block;height:100%;width:0;background:var(--lime);transform-origin:left} .preloader__tag{ position:absolute;bottom:28px;left:50%;transform:translateX(-50%); font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:13px;opacity:.8; text-align:center;line-height:1.75;white-space:nowrap; } .preloader .tracks{opacity:.35} .preloader.is-done{pointer-events:none} /* ---------- Logo draw animation (shared) ---------- */ .ibw-logo .lg-outline{stroke-linecap:round;stroke-linejoin:round} .is-animating .lg-outline{fill:none} /* initial state set by JS (gsap); CSS fallback for reduced motion keeps everything visible */ /* ========================================================= NAV ========================================================= */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h); display:flex;align-items:center;padding:20px 0;box-sizing:border-box; transition:background .4s,backdrop-filter .4s,transform .4s var(--ease-out),height .35s var(--ease-out),padding .35s var(--ease-out); } .nav .wrap{min-height:0;align-items:center} /* compact header once scrolled */ .nav.is-scrolled{height:92px;padding:12px 0} .nav.is-scrolled .brand .ibw-logo{width:66px} .nav::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(11,6,18,.75),rgba(11,6,18,0)); opacity:1;transition:opacity .4s; } .nav.is-scrolled{background:rgba(11,6,18,.86);backdrop-filter:blur(14px)} .nav.is-scrolled::before{opacity:0} .nav.is-hidden{transform:translateY(-100%)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px} .nav__links{margin-left:auto} .brand{display:flex;align-items:center;gap:12px} .brand .ibw-logo{width:100px;height:auto;flex:none;transition:transform .3s var(--ease-out),width .35s var(--ease-out)} .brand:hover .ibw-logo{transform:rotate(-6deg) scale(1.05)} .brand__badge{ display:block;width:auto;height:52px;flex:none; padding-left:14px;border-left:2px solid rgba(255,255,255,.45); transition:height .35s var(--ease-out); } .nav.is-scrolled .brand__badge{height:40px} @media (max-width:760px){.brand__badge{height:40px;padding-left:10px}.nav.is-scrolled .brand__badge{height:32px}} @media (max-width:420px){.brand__badge{height:32px}} @media (max-width:760px){:root{--nav-h:108px}.brand .ibw-logo{width:76px}.nav{padding:16px 0}.nav.is-scrolled{height:84px;padding:10px 0}.nav.is-scrolled .brand .ibw-logo{width:60px}} .nav__links{display:none;align-items:center;gap:clamp(18px,2.2vw,34px)} @media (min-width:1060px){.nav__links{display:flex}} .nav__links a{ position:relative;font-family:var(--f-narrow);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.1em; padding:8px 0; } .nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--lime); transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out); } .nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left} .nav__cta{display:flex;align-items:center;gap:14px} .nav__cta .btn{min-height:44px;padding:0 18px;font-size:13px} .nav__cta .btn--ghost{display:none} @media (min-width:760px){.nav__cta .btn--ghost{display:inline-flex}} .burger{ width:48px;height:48px;display:grid;place-items:center;position:relative; } @media (min-width:1060px){.burger{display:none}} .burger span{ position:absolute;width:26px;height:3px;background:var(--white);transition:transform .35s var(--ease-out),opacity .2s; } .burger span:nth-child(1){transform:translateY(-8px)} .burger span:nth-child(3){transform:translateY(8px)} .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)} .burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)} /* Mobile menu */ .menu{ position:fixed;inset:0;z-index:190;background:var(--purple); display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--nav-h) + 16px) var(--gutter) 40px; clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .6s var(--ease-io); overflow:hidden auto; pointer-events:none; /* closed: never intercept touch (clip-path hit-testing is unreliable on iOS) */ } .menu.is-open{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);pointer-events:auto} .menu__links a{ display:block;font-family:var(--f-display);font-weight:700;text-transform:uppercase; font-size:clamp(40px,11vw,96px);line-height:1;padding:2px 0; transform:translateY(110%);opacity:0;transition:transform .6s var(--ease-out),opacity .4s; } .menu.is-open .menu__links a{transform:none;opacity:1} .menu__links li{overflow:hidden} .menu__links a:hover{color:var(--lime)} .menu__foot{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} .menu .tracks{opacity:.25;right:-30%;bottom:-30%;transform:rotate(180deg)} /* ========================================================= HERO ========================================================= */ .hero{ position:relative;display:block; overflow:hidden;background:var(--ink);isolation:isolate; } .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--purple-ink)} .hero__media video,.hero__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:none; transform:scale(1.08);will-change:transform; } .hero__media::after{ content:"";position:absolute;inset:0; background:#000;opacity:.7; /* matches indiabikeweek.in video overlay (black, 70%) */ } .hero__poster-fallback{ position:absolute;inset:0; background: radial-gradient(60% 80% at 70% 40%,rgba(85,26,132,.7),transparent 70%), repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px), linear-gradient(180deg,#1c0b2f,#0b0612); } .hero__tracks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .hero__tracks .tracks{opacity:.9} .hero__tracks .tracks--tl{width:clamp(380px,48vw,820px);top:-6%;left:-10%} .hero__tracks .tracks--br{width:clamp(380px,48vw,820px);bottom:-10%;right:-8%;opacity:.65} .hero__top{ position:absolute;z-index:4;top:calc(var(--nav-h) + 24px);right:var(--gutter); display:flex;flex-direction:column;align-items:flex-end;gap:10px; font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px; text-align:right;opacity:.9; } .hero__top .presented{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .hero__top .presented b{font-family:var(--f-wide);font-size:16px;letter-spacing:.06em} .hero__top small{font-size:10px;opacity:.7} .hero__content{ position:relative;z-index:3;width:100%; min-height:90svh;display:flex;align-items:flex-end; padding-top:calc(var(--nav-h) + 40px); } .hero__grid{ display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,3vw,36px); padding-bottom:clamp(40px,6vw,90px); } .hero__title{font-size:clamp(72px,14vw,230px);position:relative;max-width:100%;text-shadow:0 6px 40px rgba(0,0,0,.35)} .hero__title .line{display:block;overflow:hidden;padding:.08em .2em .03em 0;margin:-.05em 0;white-space:nowrap} .hero__title .line>span{display:inline-block;will-change:transform;white-space:nowrap} .hero__title .chip{font-size:clamp(12px,1.1vw,18px);text-shadow:none;vertical-align:top;margin-left:.08em;position:relative;top:.14em;white-space:nowrap} .hero__title .chip--pre{margin-left:0;margin-right:.18em} .hero__sub{ margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px; } .hero__sub .lead{max-width:none} .hero__sub .dot{width:6px;height:6px;background:var(--lime);border-radius:50%} .hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* bottom slab inside hero */ .hero__slab{ position:relative;z-index:2;height:clamp(170px,22vw,300px); background:var(--purple); clip-path:polygon(0 0,34% 0,46% 42%,100% 42%,100% 100%,0 100%); } .hero__slab::after{ content:"";position:absolute;inset:0;opacity:.35; background:url("../svg/tracks-white.svg") no-repeat right -10% bottom -40%/52% auto; mix-blend-mode:soft-light; } .hero__meta{ position:absolute;z-index:4;left:0;right:0;bottom:clamp(22px,3vw,40px); } .hero__meta .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px} .countdown{display:flex;gap:clamp(10px,2vw,26px);align-items:flex-end} .countdown__item{display:flex;flex-direction:column;align-items:center;min-width:54px} .countdown__num{font-family:var(--f-wide);font-weight:700;font-size:clamp(30px,4.5vw,62px);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums} .countdown__lbl{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;opacity:.8;margin-top:6px} .countdown__sep{font-family:var(--f-wide);font-size:clamp(28px,4vw,56px);line-height:1.1;color:rgba(255,255,255,.4)} .hero__venue{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .hero__venue .big{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,40px);line-height:.9} .hero__venue .big b{color:var(--lime)} .scroll-hint{ position:absolute;z-index:4;left:50%;bottom:clamp(22px,3vw,40px);transform:translateX(-50%); display:none;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-cond);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.8; } @media (min-width:1100px){.scroll-hint{display:flex}} .scroll-hint i{width:2px;height:40px;background:linear-gradient(var(--lime),transparent);animation:hint 1.6s var(--ease-io) infinite} @keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} .video-toggle{ position:absolute;z-index:5;right:var(--gutter);bottom:clamp(22px,3vw,40px); width:48px;height:48px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.6);border-radius:50%; transition:background .2s,border-color .2s; } .video-toggle:hover{background:var(--lime);border-color:var(--lime);color:var(--purple)} .video-toggle svg{width:16px;height:16px} .video-toggle .i-play{display:none} .video-toggle[aria-pressed="false"] .i-play{display:block} .video-toggle[aria-pressed="false"] .i-pause{display:none} /* ========================================================= MARQUEE ========================================================= */ .marquee{ position:relative;z-index:3;background:var(--lime);color:var(--purple);overflow:hidden; padding:14px 0;border-top:4px solid var(--purple);border-bottom:4px solid var(--purple); } .marquee--purple{background:var(--purple);color:var(--white);border-color:var(--lime)} .marquee--tilt{transform:rotate(-2deg) scale(1.04);margin:-10px 0 -10px;z-index:4;position:relative} .marquee__track{display:flex;width:max-content;will-change:transform} .marquee__track span{ font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3.4vw,44px); line-height:1;white-space:nowrap;padding-right:40px;display:inline-flex;align-items:center;gap:40px; } .marquee__track span::after{content:"";width:14px;height:14px;background:currentColor;transform:rotate(45deg);flex:none} /* ========================================================= NEW HOME / ABOUT ========================================================= */ .home{background:var(--ink);overflow:hidden} .home .tracks{opacity:.55} .home .wrap{position:relative;z-index:2} .home__grid{display:grid;gap:40px;align-items:center;margin-bottom:clamp(40px,6vw,80px)} @media (min-width:960px){.home__grid{grid-template-columns:1.15fr .85fr;gap:64px}} .home__title{font-size:clamp(56px,9.5vw,150px)} .home__title .thin{font-family:var(--f-display);font-weight:400} .home__copy{margin-top:28px;display:grid;gap:18px} .home__copy p{font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:rgba(255,255,255,.82);max-width:56ch} .stats{ display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.08); } .stat{padding:clamp(20px,2.4vw,34px);background:var(--ink);position:relative;overflow:hidden} .stat::before{content:"";position:absolute;top:0;left:0;width:0;height:4px;background:var(--lime);transition:width .8s var(--ease-out)} .stat.is-in::before{width:100%} .stat__num{font-family:var(--f-wide);font-weight:700;font-size:clamp(32px,3.4vw,52px);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap} .stat__num small{font-size:.5em;vertical-align:top;margin-left:2px} .stat__lbl{margin-top:8px;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;opacity:.75} .home__figure{ position:relative; aspect-ratio:16/7;overflow:hidden;background:var(--purple-ink); clip-path:polygon(0 0,60% 0,66% 16%,100% 16%,100% 100%,0 100%); } .home__figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transform:scale(1.15)} .home__figure .ph{position:absolute;inset:0} .home__figure .caption{ position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:2; display:flex;flex-direction:column;gap:8px; } .ph{ background: repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px), radial-gradient(50% 70% at 70% 50%,rgba(85,26,132,.8),transparent 70%), linear-gradient(160deg,#2a1045,#0b0612); } /* ========================================================= EXPERIENCES ========================================================= */ .exp{background:var(--off);color:var(--ink);overflow:hidden} .exp .section-head p{color:#4b4357} .exp .section-head h2{color:var(--purple)} .exp-grid{ display:grid;gap:16px; grid-template-columns:repeat(2,1fr); } @media (min-width:760px){.exp-grid{grid-template-columns:repeat(3,1fr)}} @media (min-width:1100px){.exp-grid{grid-template-columns:repeat(4,1fr);gap:20px}} .exp-card{ position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--purple-ink);color:var(--white); clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%); cursor:pointer; } .exp-card:nth-child(5n+1){grid-row:span 1} @media (min-width:1100px){ .exp-card--wide{grid-column:span 2;aspect-ratio:auto} } .exp-card img,.exp-card .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:transform .8s var(--ease-out),filter .6s var(--ease-out)} .exp-card:hover img,.exp-card:focus-within img{filter:grayscale(0) contrast(1.02)} .exp-card:hover img,.exp-card:hover .ph{transform:scale(1.08)} .exp-card::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(11,6,18,0) 30%,rgba(85,26,132,.9) 100%); transition:opacity .4s; } .exp-card::after{ content:"";position:absolute;inset:0;z-index:1;background:var(--lime);mix-blend-mode:multiply; opacity:0;transition:opacity .4s; } .exp-card:hover::after,.exp-card:focus-within::after{opacity:0} .exp-card__num{ position:absolute;z-index:2;top:14px;left:14px; font-family:var(--f-cond);font-weight:700;font-size:14px;letter-spacing:.16em;opacity:.9; } .exp-card__body{ position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(14px,2vw,26px); display:grid;gap:0; } .exp-card__title{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,38px);line-height:.9;transform:translateY(0);transition:transform .5s var(--ease-out)} .exp-card__title small{display:block;font-family:var(--f-narrow);font-size:12px;letter-spacing:.18em;margin-bottom:6px;color:var(--lime)} .exp-card__desc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)} .exp-card__desc-wrap>div{overflow:hidden} .exp-card__desc{padding-top:12px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);opacity:0;transform:translateY(8px);transition:opacity .4s .1s,transform .5s var(--ease-out)} .exp-card:hover .exp-card__desc-wrap,.exp-card:focus-within .exp-card__desc-wrap{grid-template-rows:1fr} .exp-card:hover .exp-card__desc,.exp-card:focus-within .exp-card__desc{opacity:1;transform:none} .exp-card__link{position:absolute;inset:0;z-index:3} /* ========================================================= RACES ========================================================= */ .races{background:var(--purple);overflow:hidden} .races .wrap{position:relative;z-index:2} .races__head{display:grid;gap:24px;margin-bottom:clamp(36px,5vw,64px)} @media (min-width:900px){.races__head{grid-template-columns:1fr 1fr;align-items:end}} .races__title{font-size:clamp(60px,11.5vw,190px)} .races__title .outline{-webkit-text-stroke:2px var(--lime);color:transparent} .race-list{border-top:2px solid rgba(255,255,255,.18)} .race{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 24px; padding:clamp(18px,2.4vw,30px) 0;border-bottom:2px solid rgba(255,255,255,.18); position:relative; } .race::before{ content:"";position:absolute;inset:0 -18px;background:var(--lime);z-index:-1; transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out); } .race:hover{color:var(--purple)} .race:hover::before{transform:scaleX(1)} .race__idx{font-family:var(--f-cond);font-weight:700;font-size:14px;letter-spacing:.18em;opacity:.7;width:3ch} .race__name{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(28px,4vw,60px);line-height:.9} .race__name small{display:block;font-family:var(--f-narrow);font-size:13px;letter-spacing:.16em;margin-top:8px;opacity:.8} .race__tag{justify-self:end} .race:hover .chip{background:var(--purple);color:var(--lime)} @media (max-width:640px){ .race{grid-template-columns:auto 1fr} .race__tag{grid-column:2;justify-self:start} } /* ========================================================= LINEUP ========================================================= */ .lineup{background:var(--ink);overflow:hidden;padding:0} .lineup__hero{position:relative;min-height:70vh;display:flex;flex-direction:column;justify-content:flex-end} .lineup__bg{position:absolute;inset:0;z-index:0} .lineup__bg .ph{position:absolute;inset:0;background: radial-gradient(50% 60% at 60% 40%,rgba(85,26,132,.85),transparent 70%), repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px), linear-gradient(180deg,#140826,#0b0612)} .lineup__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.15)} .lineup__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,18,.2),rgba(11,6,18,.1) 60%,rgba(11,6,18,.8))} .lineup__bg .tracks{opacity:.5} .lineup .wrap{position:relative;z-index:2} .lineup__title{white-space:nowrap;font-size:clamp(64px,17vw,260px);color:var(--lime);line-height:.8;letter-spacing:-.02em;padding-top:clamp(72px,10vw,140px)} .lineup__title .stages-num{display:inline-block} .lineup__date{margin-top:14px;font-family:var(--f-wide);font-weight:700;font-size:clamp(18px,2.4vw,34px);text-transform:uppercase} .lineup__slabwrap{position:relative;z-index:3;margin-top:clamp(60px,9vw,140px)} .lineup__slab{ position:relative;z-index:3;background:var(--lime);color:var(--purple);padding:clamp(96px,13vw,190px) 0 clamp(64px,8vw,120px); clip-path:polygon(0 5.5vw,10% 5.5vw,16% 0,62% 0,68% 5.5vw,100% 5.5vw,100% 100%,0 100%); } .lineup__badge{position:absolute;left:50%;top:5.5vw;transform:translate(-50%,-58%);width:clamp(120px,16vw,220px);z-index:4;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))} .lineup__badge .ibw-logo{width:100%;height:auto} .artists{text-align:center;display:grid;gap:10px} .artists__row{ display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .35em; font-family:var(--f-cond);font-weight:700;text-transform:uppercase;line-height:1; } .artists__row--h{font-size:clamp(40px,7.6vw,112px)} .artists__row--m{font-size:clamp(28px,5vw,74px)} .artists__row--s{font-size:clamp(22px,3.6vw,54px)} .artists__row--soon{font-size:clamp(40px,7.6vw,112px)} .artists__row .sep{opacity:.6;font-weight:400;padding:0 .1em} .artists__row a{display:inline-block;transition:transform .3s var(--ease-out),color .3s} .artists__row a:hover{transform:translateY(-4px) skewX(-4deg);color:var(--purple-ink)} .artists__more{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;align-items:center} .artists__more .eyebrow{color:rgba(85,26,132,.8)} /* ========================================================= TICKETS ========================================================= */ .tickets{background:var(--white);color:var(--ink);overflow:hidden} .tickets .section-head h2{color:var(--purple)} .tickets .section-head h2 .lime{color:var(--lime-deep)} .tickets .section-head p{color:#4b4357} .tix-grid{display:grid;gap:18px} @media (min-width:760px){.tix-grid{grid-template-columns:repeat(3,1fr)}} .tix{ position:relative;background:var(--purple);color:var(--white);padding:clamp(24px,3vw,40px); display:flex;flex-direction:column;gap:18px;overflow:hidden; clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%); transition:filter .3s; } .tix:hover{filter:brightness(1.06)} .tix::after{content:"";position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;opacity:.18; background:url("../svg/tracks-white.svg") no-repeat center/contain;transform:rotate(180deg);pointer-events:none} .tix--hot{background:var(--lime);color:var(--purple)} .tix--hot::after{background-image:url("../svg/tracks-purple.svg")} .tix--dark{background:var(--ink)} .tix__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .tix__name{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.4vw,46px);line-height:.9} .tix__name small{display:block;font-family:var(--f-narrow);font-size:12px;letter-spacing:.18em;margin-bottom:8px;opacity:.8} .tix__price{font-family:var(--f-wide);font-weight:700;font-size:clamp(40px,4.4vw,60px);line-height:1;font-variant-numeric:tabular-nums} .tix__price sup{font-size:.45em;vertical-align:top;margin-right:2px;position:relative;top:.1em} .tix__price s{font-size:.38em;opacity:.6;font-family:var(--f-cond);margin-left:8px;vertical-align:middle} .tix__list{display:grid;gap:10px;font-size:15px;line-height:1.4;position:relative;z-index:1} .tix__list li{display:flex;gap:10px;align-items:flex-start} .tix__list svg{width:16px;height:16px;flex:none;margin-top:3px} .tix .btn{margin-top:auto;align-self:flex-start;position:relative;z-index:1} .tix--hot .btn{background:var(--purple);color:var(--white)} .tix--hot .btn::before{background:var(--white)} .tix--hot .btn:hover{color:var(--purple)} .tix__note{margin-top:22px;font-size:13px;color:#6a6275;max-width:70ch} /* ========================================================= RIDES + MERCH split ========================================================= */ .split{display:grid;min-height:70vh} @media (min-width:900px){.split{grid-template-columns:1fr 1fr}} .split__panel{ position:relative;overflow:hidden;padding:clamp(56px,8vw,110px) var(--gutter); display:flex;flex-direction:column;justify-content:flex-end;min-height:60vh; } .split__panel .ph,.split__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)} .split__panel:hover img,.split__panel:hover .ph{transform:scale(1.06)} .split__panel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,6,18,.35) 0%,rgba(11,6,18,.55) 45%,rgba(11,6,18,.92) 100%)} .split__panel--purple::before{background:linear-gradient(180deg,rgba(85,26,132,.35) 0%,rgba(85,26,132,.6) 45%,rgba(85,26,132,.96) 100%)} .split__panel .ph,.split__panel img{z-index:0} .split__body{text-shadow:0 2px 18px rgba(0,0,0,.45)} .split__body{position:relative;z-index:2;max-width:520px;display:grid;gap:18px} .split__title{font-size:clamp(54px,8vw,120px)} .split__body p{color:rgba(255,255,255,.85);line-height:1.55} /* ========================================================= PARTNERS ========================================================= */ .partners{background:var(--purple-ink);color:var(--white);padding:clamp(48px,6vw,80px) 0} .partners .eyebrow{display:block;margin-bottom:clamp(20px,3vw,36px)} .partners__strip{width:100%} .partners__strip img{width:100%;height:auto;display:block} @media (max-width:700px){ .partners__strip{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .partners__strip::-webkit-scrollbar{display:none} .partners__strip img{width:auto;height:120px;max-width:none} } /* ========================================================= FAQ ========================================================= */ .faq{background:var(--ink)} .faq__grid{display:grid;gap:40px} @media (min-width:960px){.faq__grid{grid-template-columns:.8fr 1.2fr;gap:80px}} .faq__title{font-size:clamp(56px,9vw,140px)} .acc{border-top:2px solid rgba(255,255,255,.15)} .acc__item{border-bottom:2px solid rgba(255,255,255,.15)} .acc__btn{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left; padding:22px 0;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.2vw,30px);line-height:1; transition:color .2s; } .acc__btn:hover{color:var(--lime)} .acc__btn i{ position:relative;width:28px;height:28px;flex:none; } .acc__btn i::before,.acc__btn i::after{content:"";position:absolute;left:50%;top:50%;background:var(--lime);transition:transform .35s var(--ease-out)} .acc__btn i::before{width:100%;height:3px;transform:translate(-50%,-50%)} .acc__btn i::after{width:3px;height:100%;transform:translate(-50%,-50%)} .acc__btn[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)} .acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)} .acc__panel>div{overflow:hidden} .acc__panel p{padding:0 0 24px;color:rgba(255,255,255,.78);line-height:1.6;max-width:64ch} .acc__item.is-open .acc__panel{grid-template-rows:1fr} /* ========================================================= FOOTER / CONTACT ========================================================= */ .footer{background:var(--purple);overflow:hidden;position:relative} .footer .wrap{position:relative;z-index:2} .footer__cta{padding:clamp(72px,10vw,140px) 0 clamp(40px,6vw,80px);display:grid;gap:40px} .footer__title{font-size:clamp(60px,11vw,170px);line-height:.86} .footer__title .line{white-space:nowrap} .newsletter{max-width:620px} .wa-cta{max-width:620px} .wa-cta .btn svg{width:22px;height:22px} .wa-cta__note{display:block;margin-top:12px;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;opacity:.7} .footer__title .lime{display:block} .newsletter{display:grid;gap:12px} .newsletter label{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:13px} .newsletter .row{display:flex;gap:0} .newsletter input{ flex:1;min-width:0;height:56px;padding:0 18px;border:0;background:var(--white);color:var(--ink); font:700 16px/1 var(--f-narrow);text-transform:uppercase;letter-spacing:.06em; } .newsletter input::placeholder{color:#a49bb3} .newsletter .btn{height:56px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)} .newsletter small{opacity:.7;font-size:12px} .footer__grid{ display:grid;gap:32px;padding:clamp(40px,6vw,72px) 0; border-top:2px solid rgba(255,255,255,.2); } @media (min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}} .footer__brand{display:grid;gap:16px;align-content:start} .footer__brand .ibw-logo{width:96px;height:auto} .footer__brand p{max-width:36ch;font-size:14px;color:rgba(255,255,255,.8);line-height:1.55} .footer h4{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--lime);margin-bottom:16px} .footer ul{display:grid;gap:10px} .footer ul a{font-family:var(--f-narrow);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;position:relative} .footer ul a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--lime);transition:width .3s var(--ease-out)} .footer ul a:hover::after{width:100%} /* One-page mode: entries that would leave the page render as inert text. */ .footer ul .is-off{ font-family:var(--f-narrow);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px; color:rgba(255,255,255,.4);cursor:default; } .socials{display:flex;gap:10px;flex-wrap:wrap} .socials a{width:46px;height:46px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.4);transition:background .2s,border-color .2s,color .2s} .socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--purple)} .socials svg{width:18px;height:18px} .footer__bottom{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px; padding:22px 0 calc(22px + env(safe-area-inset-bottom));border-top:2px solid rgba(255,255,255,.2); font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:rgba(255,255,255,.7); } .footer .tracks{opacity:.3} /* ---------- Sticky mobile CTA ---------- */ .sticky-cta{ position:fixed;z-index:150;left:0;right:0;bottom:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:rgba(11,6,18,.9);backdrop-filter:blur(10px);border-top:2px solid var(--lime); display:flex;gap:10px;align-items:center;justify-content:space-between; transform:translateY(110%);transition:transform .4s var(--ease-out); } .sticky-cta.is-visible{transform:none} .sticky-cta .cond{font-size:16px;line-height:1} .sticky-cta .cond small{display:block;font-family:var(--f-narrow);font-size:11px;letter-spacing:.14em;color:var(--lime);margin-bottom:3px} .sticky-cta .btn{min-height:46px;padding:0 18px;font-size:13px} @media (min-width:1060px){.sticky-cta{display:none}} /* ---------- Reveal helpers (JS-driven) ---------- */ [data-reveal]{opacity:0;transform:translateY(40px);will-change:transform,opacity} [data-reveal].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)} [data-reveal="left"]{transform:translateX(-50px)} [data-reveal="right"]{transform:translateX(50px)} [data-reveal="scale"]{transform:scale(.9)} [data-stagger]>*{opacity:0;transform:translateY(30px)} [data-stagger].is-in>*{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)} [data-stagger].is-in>*:nth-child(1){transition-delay:.0s} [data-stagger].is-in>*:nth-child(2){transition-delay:.07s} [data-stagger].is-in>*:nth-child(3){transition-delay:.14s} [data-stagger].is-in>*:nth-child(4){transition-delay:.21s} [data-stagger].is-in>*:nth-child(5){transition-delay:.28s} [data-stagger].is-in>*:nth-child(6){transition-delay:.35s} [data-stagger].is-in>*:nth-child(7){transition-delay:.42s} [data-stagger].is-in>*:nth-child(8){transition-delay:.49s} [data-stagger].is-in>*:nth-child(9){transition-delay:.56s} [data-stagger].is-in>*:nth-child(10){transition-delay:.63s} /* Split-text words (hero / big titles) */ .split-lines .line{display:block;overflow:hidden} .split-lines .line>span{display:inline-block;transform:translateY(110%)} /* Cursor blob (desktop only) */ .cursor{ position:fixed;z-index:9998;left:0;top:0;width:14px;height:14px;border-radius:50%; background:var(--lime);pointer-events:none;mix-blend-mode:difference; transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s; display:none; } @media (pointer:fine){.cursor{display:block}} .cursor.is-hover{width:64px;height:64px} body.is-touch .cursor{display:none} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important} .split-lines .line>span{transform:none!important} .marquee__track{transform:none!important} .cursor{display:none!important} } /* ---------- WordPress admin bar offset ---------- */ .admin-bar .nav{top:32px} .admin-bar .menu{padding-top:calc(var(--nav-h) + 48px)} @media (max-width:782px){.admin-bar .nav{top:46px}} /* ---------- Inner pages / WP content ---------- */ .entry{background:var(--ink)} .entry__content{max-width:72ch;font-size:17px;line-height:1.7;color:rgba(255,255,255,.85)} .entry__content h2,.entry__content h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;line-height:.95;margin:1.6em 0 .5em} .entry__content h2{font-size:clamp(28px,3.4vw,48px)} .entry__content h3{font-size:clamp(22px,2.4vw,34px)} .entry__content p,.entry__content ul,.entry__content ol{margin:0 0 1.2em} .entry__content ul{list-style:disc;padding-left:1.3em} .entry__content ol{list-style:decimal;padding-left:1.3em} .entry__content a{color:var(--lime);text-decoration:underline;text-underline-offset:3px} .entry__content img{height:auto;margin:1.5em 0} .entry__content blockquote{border-left:4px solid var(--lime);padding-left:1.2em;font-family:var(--f-cond);font-size:1.4em;text-transform:uppercase;margin:1.5em 0} .entry__item{padding:28px 0;border-bottom:2px solid rgba(255,255,255,.12)} .entry__item a:hover h2{color:var(--lime)} .entry__meta{font-family:var(--f-cond);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--lime);margin:6px 0 10px} .alignwide{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));max-width:none} .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw} .wp-block-image img{max-width:100%} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- Scroll progress + word reveals ---------- */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:var(--lime);transform:scaleX(0);transform-origin:left;pointer-events:none} .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .04em;margin:-.08em 0 -.04em} .w>span{display:inline-block;will-change:transform} .has-parallax{will-change:transform;transition:none!important} /* ========================================================= HORIZONTAL SCROLL — A day at the peak ========================================================= */ .hscroll{position:relative;background:var(--purple-ink);overflow:hidden} .hscroll__pin{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) 0 60px} .hscroll__head{margin-bottom:clamp(24px,4vw,48px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px} .hscroll__head h2{font-size:clamp(48px,8vw,120px)} .hscroll__hint{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--lime);display:flex;align-items:center;gap:12px} .hscroll__hint i{width:60px;height:2px;background:var(--lime);position:relative;overflow:hidden} .hscroll__hint i::after{content:"";position:absolute;inset:0;background:var(--purple);transform:translateX(-100%);animation:hsweep 1.6s var(--ease-io) infinite} @keyframes hsweep{to{transform:translateX(100%)}} .hscroll__viewport{overflow:hidden} .hscroll__track{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--gutter);width:max-content;will-change:transform} .hpanel{ position:relative;flex:none;width:clamp(260px,30vw,460px);aspect-ratio:4/5;overflow:hidden; background:var(--purple);color:var(--white);padding:clamp(18px,2.4vw,32px);display:flex;flex-direction:column;justify-content:flex-end; clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%); } .hpanel--lime{background:var(--lime);color:var(--purple)} .hpanel--ink{background:var(--ink)} .hpanel::after{content:"";position:absolute;right:-22%;bottom:-28%;width:75%;aspect-ratio:1;opacity:.16;pointer-events:none; background:url("../svg/tracks-white.svg") no-repeat center/contain;transform:rotate(180deg)} .hpanel--lime::after{background-image:url("../svg/tracks-purple.svg")} .hpanel__time{position:absolute;top:clamp(16px,2vw,28px);left:clamp(18px,2.4vw,32px);font-family:var(--f-wide);font-weight:700;font-size:clamp(22px,2.4vw,34px);line-height:1} .hpanel__num{position:absolute;top:clamp(16px,2vw,28px);right:clamp(30px,3vw,44px);font-family:var(--f-cond);font-weight:700;font-size:13px;letter-spacing:.18em;opacity:.7} .hpanel__title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,3.6vw,56px);line-height:.9;position:relative;z-index:1} .hpanel__desc{margin-top:12px;font-size:15px;line-height:1.5;opacity:.85;max-width:32ch;position:relative;z-index:1} .hpanel__tag{position:relative;z-index:1;margin-bottom:14px;align-self:flex-start} .hscroll__bar{height:3px;background:rgba(255,255,255,.12);margin:clamp(24px,4vw,40px) var(--gutter) 0;position:relative;overflow:hidden} .hscroll__bar i{position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left} @media (max-width:900px){ .hscroll__pin{min-height:0;padding-top:clamp(72px,10vw,140px)} .hscroll__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory} .hscroll__viewport::-webkit-scrollbar{display:none} .hpanel{width:min(78vw,360px);scroll-snap-align:start} .hscroll__bar{display:none} } /* ========================================================= INNER PAGES ========================================================= */ /* Inner pages get a solid header. Scoped away from .home because WordPress puts BOTH `home` and `page` on the body of a static front page, which would otherwise make the homepage header opaque and hide the hero behind it. */ .page:not(.home) .nav{background:rgba(11,6,18,.86);backdrop-filter:blur(14px)} .page:not(.home) .nav::before{opacity:0} .phero{position:relative;overflow:hidden;background:var(--purple);padding:calc(var(--nav-h) + clamp(40px,6vw,80px)) 0 clamp(56px,8vw,110px);isolation:isolate} .phero--ink{background:var(--ink)} .phero--lime{background:var(--lime);color:var(--purple)} .phero__bg{position:absolute;inset:0;z-index:0} .phero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)} .phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,18,.55),rgba(11,6,18,.85))} .phero .wrap{position:relative;z-index:2} .phero .tracks{opacity:.7} .phero__crumb{display:flex;gap:10px;align-items:center;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;opacity:.85;margin-bottom:18px} .phero__crumb a:hover{color:var(--lime)} .phero--lime .phero__crumb a:hover{color:var(--purple-ink)} .phero__title{font-size:clamp(60px,11vw,180px);line-height:.86} .phero__title .lime{color:var(--lime)} .phero--lime .phero__title .lime{color:var(--white)} .phero__lead{margin-top:22px;max-width:60ch;font-size:clamp(17px,1.4vw,21px);line-height:1.45;text-transform:uppercase} .phero__meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px} .phero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px} /* alternating feature rows */ .feature{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(36px,5vw,72px) 0;border-top:2px solid rgba(255,255,255,.1)} @media (min-width:900px){.feature{grid-template-columns:1fr 1fr}.feature--flip .feature__media{order:2}} .feature__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--purple-ink);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)} .feature__media img,.feature__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s var(--ease-out),transform 1s var(--ease-out)} .feature:hover .feature__media img{filter:grayscale(0);transform:scale(1.04)} .feature__num{position:absolute;top:14px;left:16px;font-family:var(--f-cond);font-weight:700;letter-spacing:.18em;font-size:13px;z-index:2} .feature__title{font-size:clamp(40px,5vw,80px)} .feature__body{display:grid;gap:16px} .feature__body p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);max-width:56ch} .feature__facts{display:flex;flex-wrap:wrap;gap:10px} .on-light .feature{border-color:rgba(0,0,0,.1)} .on-light .feature__body p{color:#4b4357} /* info grid cards */ .grid-cards{display:grid;gap:16px} @media (min-width:700px){.grid-cards{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.grid-cards--3{grid-template-columns:repeat(3,1fr)}.grid-cards--4{grid-template-columns:repeat(4,1fr)}} .icard{position:relative;padding:clamp(22px,2.6vw,34px);background:var(--purple);color:var(--white);display:grid;gap:12px;align-content:start;overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)} .icard--ink{background:var(--ink)} .icard--lime{background:var(--lime);color:var(--purple)} .icard--white{background:var(--white);color:var(--ink)} .icard__k{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;opacity:.8} .icard__t{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.8vw,42px);line-height:.95} .icard__big{font-family:var(--f-wide);font-weight:700;font-size:clamp(34px,3.4vw,52px);line-height:1} .icard p{font-size:15px;line-height:1.55;opacity:.88} .icard ul{display:grid;gap:8px;font-size:15px} .icard ul li{display:flex;gap:10px;align-items:flex-start} .icard ul li::before{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg);flex:none;margin-top:7px;opacity:.8} .icard--lime ul li::before,.icard--white ul li::before{opacity:1} .icard .btn{margin-top:6px;justify-self:start} /* numbered steps */ .steps{display:grid;gap:2px;background:rgba(255,255,255,.1)} @media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}} .step{background:var(--ink);padding:clamp(22px,2.6vw,36px);display:grid;gap:12px;align-content:start} .step__n{font-family:var(--f-wide);font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1;color:var(--lime)} .step__t{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:.95} .step p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.8)} /* spec table */ .spec{width:100%;border-collapse:collapse;font-size:15px} .spec th,.spec td{padding:14px 12px;text-align:left;border-bottom:2px solid rgba(255,255,255,.12);vertical-align:top} .spec th{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--lime)} .spec td:first-child{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:18px} .spec .yes{color:var(--lime);font-weight:700}.spec .no{opacity:.4} .on-light .spec th{color:var(--purple)}.on-light .spec th,.on-light .spec td{border-color:rgba(0,0,0,.1)} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* CTA band */ .cta-band{position:relative;overflow:hidden;background:var(--lime);color:var(--purple);padding:clamp(56px,8vw,110px) 0} .cta-band .wrap{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px} .cta-band h2{font-size:clamp(44px,7vw,110px)} .cta-band .tracks{opacity:.35} .cta-band .btn{background:var(--purple);color:var(--white)} .cta-band .btn::before{background:var(--white)} .cta-band .btn:hover{color:var(--purple)} /* light section helpers */ .on-light{background:var(--off);color:var(--ink)} .on-light .eyebrow{color:var(--purple)} .on-light .section-head h2,.on-light .display{color:var(--purple)} .on-light .section-head p,.on-light .lead{color:#4b4357} .on-light .icard--white{box-shadow:inset 0 0 0 2px #ddd6e6} /* contact form */ .cform{display:grid;gap:14px} @media (min-width:700px){.cform{grid-template-columns:1fr 1fr}.cform .full{grid-column:1/-1}} .cform label{display:grid;gap:6px;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px} .cform input,.cform select,.cform textarea{height:54px;padding:0 16px;border:0;background:var(--white);color:var(--ink);font:700 16px/1 var(--f-narrow);text-transform:uppercase;letter-spacing:.04em;width:100%} .cform textarea{height:auto;min-height:150px;padding:16px;line-height:1.4;text-transform:none;font-weight:400;font-family:var(--f-body)} .cform .btn{justify-self:start} .cform__msg{font-size:14px;opacity:.85} /* legal */ .legal{max-width:76ch} .legal h2{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:.95;margin:2em 0 .6em;color:var(--lime)} .legal h2:first-child{margin-top:0} .legal p,.legal li{font-size:16px;line-height:1.7;color:rgba(255,255,255,.85)} .legal ul{list-style:disc;padding-left:1.3em;display:grid;gap:6px;margin:.6em 0 1.2em} .legal p{margin-bottom:1em} .legal .note{padding:14px 16px;background:rgba(176,226,56,.1);border-left:4px solid var(--lime);font-size:14px} /* map */ .map{aspect-ratio:16/8;background:var(--purple-ink);overflow:hidden;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)} .map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) hue-rotate(190deg) contrast(1.05)} /* artist grid */ .artist-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media (min-width:760px){.artist-grid{grid-template-columns:repeat(3,1fr)}} @media (min-width:1100px){.artist-grid{grid-template-columns:repeat(4,1fr)}} .artist{position:relative;aspect-ratio:1;overflow:hidden;background:var(--purple);display:flex;align-items:flex-end;padding:18px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)} .artist--h{grid-column:span 2;aspect-ratio:2/1} .artist img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s,transform 1s var(--ease-out)} .artist:hover img{filter:none;transform:scale(1.05)} .artist::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,18,0) 40%,rgba(85,26,132,.95));z-index:1} .artist__name{position:relative;z-index:2;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,40px);line-height:.9} .artist__name small{display:block;font-family:var(--f-narrow);font-size:11px;letter-spacing:.18em;color:var(--lime);margin-bottom:6px} .artist--h .artist__name{font-size:clamp(34px,4.6vw,68px)} /* ------------------------------------------------------------------ Elementor interop Elementor's frontend.min.css loads after this file and resets shared properties on generic selectors. Re-assert only what it strips, at a specificity that wins without !important. ------------------------------------------------------------------ */ /* `.elementor a{box-shadow:none}` was erasing the ghost button's border. */ .elementor .btn--ghost{box-shadow:inset 0 0 0 2px var(--white)} .elementor .btn--ghost:hover{color:var(--purple)} /* `.elementor img{height:auto}` ties with our `.card img{height:100%}` on specificity and loads later, so it won — every cover image collapsed to 0 while lazy-loading and then spilled out of its frame at natural height once decoded. Re-assert full height for the images that are positioned to fill their container. */ .elementor .hero__media img, .elementor .hero__media video, .elementor .tracks img, .elementor .home__figure img, .elementor .exp-card img, .elementor .exp-card .ph, .elementor .lineup__bg img, .elementor .split__panel img, .elementor .split__panel .ph, .elementor .feature__media img, .elementor .artist img{height:100%}