/* * It's Black and White — Donnie Floyd Ministries * Stylesheet for index.html (dark motorsports theme) */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap'); :root{ --bg:#0b0b0c; --panel:#141416; --panel-2:#1a1a1d; --white:#f5f5f5; --dim:#9a9a9e; --dim-2:#c7c7c9; --red:#d81324; --red-hot:#f01c2f; --line:#26262a; --nav-h:52px; --rail-h:46px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;} /* ================= lenis (smooth scroll) ================= * Required base rules from the Lenis distribution. Lenis stamps these * classes onto itself, so every selector below is the root element. * If js/vendor/lenis.min.js never loads, none of these ever match and the * page falls back to the native `scroll-behavior:smooth` above. */ html.lenis, html.lenis body{height:auto;} /* Native smooth scrolling must be off while Lenis is interpolating, otherwise the two fight over the same scrollTop. */ .lenis.lenis-smooth{scroll-behavior:auto !important;} /* Opt-out containers (the mobile sheet) keep their own native scrolling. */ .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;} /* Stops YouTube iframes swallowing wheel events mid-scroll. This class is only present *while* a smooth scroll is in flight, so clicking to play a video still works normally. */ .lenis.lenis-smooth iframe{pointer-events:none;} .lenis.lenis-stopped{overflow:hidden;} body{ background:var(--bg); color:var(--white); font-family:'Source Serif 4', Georgia, serif; line-height:1.7; overflow-x:hidden; } h1,h2,h3,h4,.eyebrow,.nav-link,.btn,.tag,.chip,.stat-num,.stat-label,.kicker{ font-family:'Oswald','Segoe UI',sans-serif; text-transform:uppercase; letter-spacing:0.04em; } a{color:inherit;} :focus-visible{outline:2px solid var(--red); outline-offset:3px;} section[id]{scroll-margin-top:calc(var(--nav-h) + var(--rail-h) + 8px);} /* ================= scroll progress ================= */ /* Driven by transform:scaleX() rather than width, so the progress bar is composited and never triggers layout on a scroll frame. */ .scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%; background:var(--red); z-index:100; transform:scaleX(0); transform-origin:0 50%; will-change:transform; transition:transform .08s linear; } /* ================= global nav (tier 1) ================= */ .globalnav{ position:fixed; top:0; left:0; right:0; z-index:90; height:var(--nav-h); background:rgba(11,11,12,0.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line); } .globalnav-inner{ max-width:1180px; height:100%; margin:0 auto; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .wordmark{ font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; letter-spacing:0.1em; white-space:nowrap; text-decoration:none; } .wordmark span{color:var(--red);} .globalnav ul{list-style:none; display:flex; align-items:center; gap:4px;} .nav-link{ display:block; padding:8px 14px; font-size:12px; font-weight:400; letter-spacing:0.07em; color:var(--dim); text-decoration:none; background:none; border:0; cursor:pointer; border-radius:20px; transition:color .2s cubic-bezier(.2,.8,.2,1), background .2s cubic-bezier(.2,.8,.2,1); } .nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--white); background:rgba(255,255,255,0.06);} .nav-link.is-current{color:var(--white);} .nav-link.cta{color:#fff; background:var(--red); padding:8px 18px;} .nav-link.cta:hover{background:var(--red-hot);} /* dropdown panel */ .has-menu{position:relative;} .dropdown{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:230px; padding:10px; background:rgba(20,20,22,0.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s; list-style:none; } .has-menu.open .dropdown{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);} .dropdown a{ display:block; padding:9px 12px; border-radius:9px; text-decoration:none; font-family:'Source Serif 4',Georgia,serif; font-size:15px; color:var(--dim-2); text-transform:none; letter-spacing:0; line-height:1.35; } .dropdown a small{display:block; font-size:12px; color:#6f6f75; margin-top:1px;} .dropdown a:hover{background:rgba(216,19,36,0.14); color:#fff;} /* hamburger */ .burger{ display:none; width:38px; height:38px; border:0; background:none; cursor:pointer; align-items:center; justify-content:center; } .burger i{display:block; width:19px; height:1.5px; background:var(--white); position:relative; transition:transform .25s, opacity .2s;} .burger i::before,.burger i::after{content:''; position:absolute; left:0; width:19px; height:1.5px; background:var(--white); transition:transform .25s;} .burger i::before{top:-6px;} .burger i::after{top:6px;} body.menu-open .burger i{background:transparent;} body.menu-open .burger i::before{transform:translateY(6px) rotate(45deg);} body.menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg);} /* mobile sheet */ .sheet{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:85; background:rgba(11,11,12,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:26px 26px 90px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s, transform .25s, visibility .25s; } body.menu-open .sheet{opacity:1; visibility:visible; transform:none;} .sheet h4{font-size:11px; color:var(--red); margin:22px 0 8px; font-weight:600;} .sheet h4:first-child{margin-top:0;} .sheet a{ display:block; padding:11px 0; font-size:19px; text-decoration:none; color:var(--white); border-bottom:1px solid var(--line); } /* ================= section rail (tier 2) ================= */ .rail{ position:fixed; top:var(--nav-h); left:0; right:0; z-index:80; height:var(--rail-h); background:rgba(16,16,18,0.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line); transform:translateY(-102%); transition:transform .3s ease; } .rail.show{transform:translateY(0);} .rail-scroll{ max-width:1180px; height:100%; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; } .rail-scroll::-webkit-scrollbar{display:none;} .chip{ flex:0 0 auto; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:500; letter-spacing:0.07em; color:var(--dim); text-decoration:none; white-space:nowrap; border:1px solid transparent; transition:all .2s cubic-bezier(.2,.8,.2,1); } .chip:hover{color:var(--white); border-color:var(--line);} .chip.active{color:#fff; background:var(--red); border-color:var(--red);} /* ================= checkered divider ================= * --fd-p is written by js/scroll-fx.js: a normalized -1 .. 1 value for how * far the divider has travelled past the viewport centre. The two layers * below consume it at different rates and in opposite directions, which is * what sells the depth. Both layers are inset beyond the box so the shift * can never expose a bare edge. */ .flag-divider{ --fd-p:0; position:relative; overflow:hidden; height:12px; background-image: linear-gradient(45deg,var(--white) 25%,transparent 25%), linear-gradient(-45deg,var(--white) 25%,transparent 25%), linear-gradient(45deg,transparent 75%,var(--white) 75%), linear-gradient(-45deg,transparent 75%,var(--white) 75%); background-size:12px 12px; background-position:0 0,0 6px,6px -6px,-6px 0; background-color:var(--bg); opacity:.9; } /* wider graphic divider variant — two layers of the same red light-streak (divider-streak.png, same mood/family as the pullquote streak) drifting at different rates for parallax depth. See ::before/::after below. */ .flag-divider.graphic{ height:64px; background-image:none; /* the streak moved to ::before so it can transform */ background-color:var(--bg); opacity:1; } /* far layer — the speed streak, drifting with the scroll. Opacity breathes slowly on its own timer (flag-pulse-a) independent of the scroll-driven transform, so the band never sits static at one flat brightness. */ .flag-divider.graphic::before{ content:''; position:absolute; inset:-16% -9%; background-image:url('../web/graphics/divider-streak.png'); background-repeat:no-repeat; background-size:cover; background-position:center; transform:translate3d(calc(var(--fd-p) * 4vw), calc(var(--fd-p) * -6px), 0); opacity:.55; /* resting value if the pulse is ever disabled */ animation:flag-pulse-a 8s ease-in-out infinite; will-change:transform, opacity; } /* near layer — the same streak rotated 180° (not just mirrored, so the two layers don't read as an obvious flip of each other) and screen-blended in low, so it thickens the glow instead of tiling a second motif over it. Pulses on its own out-of-phase timer (flag-pulse-b: different duration + a negative delay) so the two never brighten/dim in lockstep — that drift is what makes it read as shimmer rather than a metronome. */ .flag-divider.graphic::after{ content:''; position:absolute; inset:-16% -9%; background-image:url('../web/graphics/divider-streak.png'); background-repeat:no-repeat; background-size:cover; background-position:center; mix-blend-mode:screen; opacity:.22; /* resting value if the pulse is ever disabled */ transform:translate3d(calc(var(--fd-p) * -7vw), 0, 0) rotate(180deg); animation:flag-pulse-b 6.5s ease-in-out infinite; animation-delay:-2.8s; will-change:transform, opacity; } /* Two ranges, two speeds — .before stays the brighter/dominant pass, .after stays the dim secondary wash underneath it. */ @keyframes flag-pulse-a{ 0%,100%{opacity:.42;} 50%{opacity:.68;} } @keyframes flag-pulse-b{ 0%,100%{opacity:.14;} 50%{opacity:.32;} } @media (max-width:700px){ .flag-divider.graphic{height:40px;} /* Shorter box, less slack — ease off the travel so no edge shows. */ .flag-divider.graphic::before{transform:translate3d(calc(var(--fd-p) * 2.5vw), calc(var(--fd-p) * -4px), 0);} .flag-divider.graphic::after{transform:translate3d(calc(var(--fd-p) * -4.5vw), 0, 0) rotate(180deg);} } /* ================= hero ================= */ .hero{ --hero-p:0; /* 0 -> 1 as the hero scrolls out; set by scroll-fx.js */ position:relative; height:100vh; min-height:600px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:#000; } /* PARALLAX: the video layer is deliberately 136% of the hero height and offset -18%, giving 18vh of slack top and bottom. scroll-fx.js translates it down at 0.42x scroll speed, which can never exceed that slack while any part of the hero is on screen — so no bare edge is ever revealed. */ .video-bg{ position:absolute; top:-18%; left:0; right:0; height:136%; overflow:hidden; pointer-events:none; transform:translate3d(0,0,0); will-change:transform; backface-visibility:hidden; } .video-bg iframe{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%); } /* Touch / narrow viewports: scroll-fx.js adds .no-parallax and the hero video goes back to a plain pinned cover. Moving a full-screen YouTube iframe against native touch scrolling is not worth the frame budget, and mobile URL-bar resize makes 100vh unreliable anyway. */ .hero.no-parallax .video-bg{ top:0; height:100%; transform:none; will-change:auto; } .hero.no-parallax::before{inset:0; transform:none; will-change:auto;} .hero.no-parallax .hero-content{will-change:auto;} .video-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.75) 60%,rgba(11,11,12,1) 100%); } /* Checkered texture drifts slowly against the video — a third depth plane. */ .hero::before{ content:''; position:absolute; inset:-8% 0; z-index:1; pointer-events:none; background-image:url('../web/graphics/checkered-bg.png'); background-size:cover; background-position:center; opacity:.08; mix-blend-mode:screen; transform:translate3d(0, calc(var(--hero-p) * 26px), 0); will-change:transform; } /* Foreground copy rides at document speed and is lifted/faded by JS. */ .hero-content{ position:relative; z-index:2; max-width:860px; padding:0 6%; will-change:transform, opacity; } .eyebrow{color:var(--red); font-size:18px; font-weight:600; margin-bottom:18px;} @media (max-width:560px){ .eyebrow{font-size:14px;} } .hero-logo{display:block; width:100%; max-width:620px; height:auto; margin:0 auto 24px;} .hero h1{font-size:clamp(40px,8vw,84px); font-weight:700; line-height:1.02; margin-bottom:20px;} .hero h1 em{ font-style:normal; color:#000; -webkit-text-stroke:2px #ffffff; text-stroke:2px #ffffff; paint-order:stroke fill; } .hero h1 .outline-white{ font-style:normal; color:#ffffff; -webkit-text-stroke:2px #000000; text-stroke:2px #000000; paint-order:stroke fill; } .hero p{font-style:italic; font-size:18px; color:#d8d8d8; max-width:540px; margin:0 auto 34px;} .scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.15em; color:var(--dim); z-index:2; } /* ================= buttons ================= */ .btn{ display:inline-block; padding:13px 30px; background:var(--red); color:#fff; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:0.08em; border-radius:2px; transition:background .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); } .btn:hover{background:var(--red-hot); transform:translateY(-2px);} .btn.ghost{background:transparent; border:1px solid #555; color:#fff;} .btn.ghost:hover{border-color:var(--red); color:var(--red);} .btn + .btn{margin-left:10px;} /* ================= layout blocks ================= */ .wrap{max-width:1120px; margin:0 auto; padding:0 6%;} .band{padding:104px 0; position:relative;} .band.alt{ background: linear-gradient(rgba(20,20,22,.93),rgba(20,20,22,.93)), url('../web/graphics/carbon-texture.png'); background-size:auto, 340px 340px; background-repeat:repeat, repeat; } .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;} .split.reverse .copy{order:2;} .split.reverse .media{order:1;} .tag{color:var(--red); font-size:12px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px;} .tag-icon{width:16px; height:16px; object-fit:contain; opacity:.9;} h2.head{font-size:clamp(28px,3.6vw,42px); font-weight:600; margin-bottom:20px; line-height:1.12;} h2.head em{ font-style:normal; color:#000; -webkit-text-stroke:1.5px #ffffff; text-stroke:1.5px #ffffff; paint-order:stroke fill; } h3.sub{font-size:18px; font-weight:600; margin:34px 0 12px; color:#fff;} .band p{color:var(--dim-2); font-size:16px; margin-bottom:16px;} .split .copy p{max-width:520px;} .lede{font-size:18px; color:#e2e2e4;} /* image slots */ .img-slot{ position:relative; width:100%; aspect-ratio:4/3; border:1px dashed #3a3a3e; background:repeating-linear-gradient(45deg,#1a1a1c,#1a1a1c 10px,#161618 10px,#161618 20px); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:3px; } .img-slot.portrait{aspect-ratio:3/4;} .img-slot.square{aspect-ratio:1/1;} .img-slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .img-slot.port{position:relative; width:50%; aspect-ratio:3/4; border:1px dashed #3a3a3e; background:repeating-linear-gradient(45deg,#1a1a1c,#1a1a1c 10px,#161618 10px,#161618 20px); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:3px;} /* ================= stat strip ================= */ .stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:46px; } .stat{background:var(--bg); padding:26px 14px; text-align:center;} .band.alt .stat{background:var(--panel);} .stat-num{display:block; font-size:32px; font-weight:700; color:var(--red); line-height:1;} .stat-label{display:block; font-size:10px; color:var(--dim); margin-top:8px; letter-spacing:.08em;} /* ================= cards ================= */ .cards{display:grid; gap:18px; margin-top:12px;} .cards.two{grid-template-columns:repeat(2,1fr);} .cards.three{grid-template-columns:repeat(3,1fr);} .card{ background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:26px 24px; transition:border-color .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); } .band.alt .card{background:#111113;} a.card{text-decoration:none; display:block;} a.card:hover{border-color:var(--red); transform:translateY(-2px);} .card h4{font-size:14px; font-weight:600; margin-bottom:8px;} .card p{font-size:15px; color:var(--dim); margin:0;} .card .kicker{display:flex; align-items:center; gap:8px; font-size:10px; color:var(--red); margin-bottom:10px; font-weight:600;} .card .kicker .glyph{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:14px; font-size:12px; color:var(--red); } .card ul{list-style:none; margin-top:10px;} .card li{position:relative; padding-left:18px; font-size:15px; color:var(--dim-2); margin-bottom:6px;} .card li::before{content:''; position:absolute; left:0; top:11px; width:7px; height:7px; background:var(--red);} /* ================= timeline ================= */ .timeline{margin-top:34px; border-left:1px solid var(--line); padding-left:0;} .tl-item{position:relative; padding:0 0 34px 30px;} .tl-item::before{ content:''; position:absolute; left:-5px; top:8px; width:9px; height:9px; background:var(--red); border:2px solid var(--bg); } .band.alt .tl-item::before{border-color:var(--panel);} .tl-years{font-family:'Oswald',sans-serif; font-size:12px; color:var(--red); letter-spacing:.08em;} .tl-item h4{font-size:16px; font-weight:600; margin:4px 0 2px; font-family:'Oswald',sans-serif; text-transform:uppercase;} .tl-place{font-size:14px; color:var(--dim); font-style:italic; margin-bottom:10px;} .tl-item ul{list-style:none;} .tl-item li{position:relative; padding-left:16px; font-size:15px; color:var(--dim-2); margin-bottom:5px;} .tl-item li::before{content:'—'; position:absolute; left:0; color:#55555c;} /* ================= video facade ================= */ .video{ position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--line); background:#000; overflow:hidden; cursor:pointer; border-radius:3px; } .video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); } .video:hover img{opacity:.78; transform:scale(1.02);} .video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; pointer-events:none; } .play span{ width:64px; height:64px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; transition:transform .2s cubic-bezier(.2,.8,.2,1); } .video:hover .play span{transform:scale(1.08) translateY(-2px);} .play span::after{content:''; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px;} .play em{ font-family:'Oswald',sans-serif; font-style:normal; font-size:11px; letter-spacing:.12em; color:#fff; text-transform:uppercase; } .video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:12px;} .vcap{font-size:13px; color:var(--dim); margin-top:10px; font-style:italic;} /* ================= verses ================= */ .verse-list{list-style:none; margin-top:18px;} .verse-list li{ padding:16px 0 16px 22px; border-top:1px solid var(--line); font-size:16px; color:var(--dim-2); position:relative; } .verse-list li::before{content:''; position:absolute; left:0; top:24px; width:8px; height:2px; background:var(--red);} .verse-list li:last-child{border-bottom:1px solid var(--line);} .verse-list b{font-family:'Oswald',sans-serif; font-size:12px; color:var(--red); display:block; letter-spacing:.06em; margin-top:6px;} .pullquote{ position:relative; text-align:center; padding:92px 6%; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pullquote::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../web/graphics/pullquote-streak.png'); background-size:cover; background-position:center; opacity:.22; } .pullquote blockquote,.pullquote cite{position:relative; z-index:1;} .pullquote blockquote{font-style:italic; font-size:clamp(22px,3.2vw,32px); max-width:760px; margin:0 auto 18px; line-height:1.4;} .pullquote cite{font-family:'Oswald',sans-serif; color:var(--red); font-size:12px; font-style:normal; letter-spacing:.08em;} /* ================= pullquote text-mask reveal ================= * Scroll-triggered on .pullquote[data-reveal] by the shared * IntersectionObserver in main.js, which adds .is-revealed once. * * js/main.js wraps each word in a .pq-word span carrying --i (its index). * Each span paints its text through a two-stop gradient using * background-clip:text; sliding the gradient's background-position from * right to left wipes the fill from red to white. Staggering that by --i * makes the sentence ignite left to right instead of all at once. * * Everything animated here is opacity / transform / background-position on * short inline spans, and the whole thing runs once — no library needed. */ .pullquote[data-reveal] .pq-word{ display:inline-block; color:var(--red); /* fallback if background-clip:text is unsupported */ opacity:0; transform:translate3d(0,.4em,0); transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), color .7s cubic-bezier(.22,.61,.36,1), background-position .8s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0) * 38ms); will-change:opacity, transform, background-position; } @supports ((background-clip:text) or (-webkit-background-clip:text)){ .pullquote[data-reveal] .pq-word{ /* 240% wide, so sliding 100% -> 0% moves the red/white boundary all the way across the word rather than just recolouring it. */ background-image:linear-gradient( 95deg, var(--white) 0%, var(--white) 42%, var(--red) 58%, var(--red) 100% ); background-size:240% 100%; background-position:100% 0; /* start: showing the red end */ background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } } .pullquote[data-reveal].is-revealed .pq-word{ opacity:1; transform:none; color:var(--white); /* fallback path */ background-position:0 0; /* end: fully white */ } /* Released once the stagger finishes (main.js adds .pq-done) so ~20 spans aren't holding compositor layers for the rest of the session. */ .pullquote[data-reveal].pq-done .pq-word{will-change:auto;} /* Timing line — a red rule drawing across the top of the band as the words ignite. Racing-timing-tower cue, and it frames the quote. */ .pullquote[data-reveal]::after{ content:''; position:absolute; top:0; left:0; z-index:2; width:100%; height:2px; background:var(--red); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.22,.61,.36,1); } .pullquote[data-reveal].is-revealed::after{transform:scaleX(1);} /* Attribution lands just after the last word (delay set by main.js). */ .pullquote[data-reveal] cite{ display:inline-block; opacity:0; transform:translate3d(0,8px,0); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--pq-cite-delay, 600ms); } .pullquote[data-reveal].is-revealed cite{opacity:1; transform:none;} /* ================= venue marquee + full list ================= */ /* Horizontal ticker teaser — built/duplicated from the .venues list below by js/main.js. Edge mask fades the pills out instead of hard-cropping. */ .venue-marquee{ overflow:hidden; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .venue-track{display:flex; gap:12px; width:max-content;} .venue-track.scrolling{animation:venue-scroll var(--venue-dur,40s) linear infinite;} .venue-track.scrolling:hover{animation-play-state:paused;} @keyframes venue-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } .venue-pill{ flex:0 0 auto; display:flex; align-items:baseline; gap:8px; white-space:nowrap; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:9px 16px; } .band.alt .venue-pill{background:#111113;} .venue-pill b{font-family:'Oswald',sans-serif; font-size:12px; font-weight:500; color:#fff; text-transform:uppercase; letter-spacing:.03em;} .venue-pill small{color:#6f6f75; font-size:12px;} /* Full list, revealed by the
wrapper — its own top rule/spacing replaces .venues', so drop the latter to avoid two divider lines stacked back to back. */ .venues{ columns:3; column-gap:34px; margin-top:26px; border-top:1px solid var(--line); padding-top:26px; } details.creds.venues-toggle .venues{border-top:0; margin-top:18px; padding-top:0;} .venues div{ break-inside:avoid; margin-bottom:16px; font-size:15px; color:var(--dim-2); } .venues b{display:block; font-family:'Oswald',sans-serif; font-size:13px; font-weight:500; color:#fff; text-transform:uppercase; letter-spacing:.03em;} .venues small{color:#6f6f75; font-size:13px;} details.creds{border-top:1px solid var(--line); margin-top:34px; padding-top:20px;} details.creds summary{ cursor:pointer; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--red); list-style:none; } details.creds summary::-webkit-details-marker{display:none;} details.creds summary::after{content:' +'; color:var(--dim);} details.creds[open] summary::after{content:' –';} .creds-grid{columns:2; column-gap:34px; margin-top:20px;} .creds-grid p{break-inside:avoid; font-size:15px; margin-bottom:9px; color:var(--dim-2);} .checklist{list-style:none; margin-top:20px;} .checklist li{ position:relative; padding:11px 0 11px 32px; border-bottom:1px solid var(--line); font-size:16px; color:var(--dim-2); } .checklist li::before{ content:''; position:absolute; left:2px; top:19px; width:11px; height:6px; border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); } .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px;} .contact-card{ background:var(--panel-2); border:1px solid var(--line); padding:28px 24px; text-align:center; } .contact-card .kicker{display:block; font-size:10px; color:var(--red); margin-bottom:10px;} .contact-card a{ font-family:'Oswald',sans-serif; font-size:17px; color:#fff; text-decoration:none; word-break:break-word; letter-spacing:.02em; } .contact-card a:hover{color:var(--red);} /* ================= fade-in ================= */ .fade-in{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;} .fade-in.in-view{opacity:1; transform:none;} /* ================= to-top ================= */ .to-top{ position:fixed; right:20px; bottom:20px; z-index:70; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(20,20,22,.9); color:var(--white); cursor:pointer; font-size:15px; line-height:1; opacity:0; pointer-events:none; transition:opacity .25s, border-color .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); } .to-top.show{opacity:1; pointer-events:auto;} .to-top:hover{border-color:var(--red); color:var(--red); transform:translateY(-2px);} footer{ text-align:center; padding:34px 6%; color:#5c5c60; font-size:13px; border-top:1px solid var(--line); } footer a{color:#7a7a80;} /* ================= responsive ================= */ @media (max-width:900px){ .globalnav ul.primary{display:none;} .burger{display:flex;} .split{grid-template-columns:1fr; gap:38px;} .split.reverse .copy,.split.reverse .media{order:0;} .stats{grid-template-columns:repeat(2,1fr);} .stat:last-child{grid-column:1/-1;} .cards.two,.cards.three,.video-grid,.contact-grid{grid-template-columns:1fr;} .venues{columns:2;} .creds-grid{columns:1;} .band{padding:74px 0;} } @media (max-width:560px){ .venues{columns:1;} .btn{display:block; text-align:center;} .btn + .btn{margin-left:0; margin-top:10px;} .hero{min-height:540px;} } /* ================= reduced motion ================= * scroll-fx.js skips Lenis and the parallax rAF loop entirely, and main.js * paints the reveal end-state without an observer. These rules neutralise * the CSS half: no parallax transforms, no sweep, no stagger. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .fade-in{opacity:1; transform:none; transition:none;} .rail{transition:none;} *{animation:none !important;} .video-bg{top:0; height:100%; transform:none !important; will-change:auto;} .hero::before{inset:0; transform:none !important; will-change:auto;} .hero-content{transform:none !important; opacity:1 !important; will-change:auto;} .scroll-cue{opacity:1 !important;} .flag-divider.graphic::before, .flag-divider.graphic::after{transform:none !important; will-change:auto;} .flag-divider.graphic::after{display:none;} .pullquote[data-reveal] .pq-word{ opacity:1; transform:none; transition:none; will-change:auto; color:var(--white); background-image:none; -webkit-text-fill-color:currentColor; } .pullquote[data-reveal]::after{transform:scaleX(1); transition:none;} .pullquote[data-reveal] cite{opacity:1; transform:none; transition:none;} .scroll-progress{transition:none;} }