/* GeeksTap — the story page. Components and animations for the single-page Backer arc. Loads after site.css and refresh.css. Motion rules: - Everything animates from a scroll trigger (.in-view added by story.js), never on a timer, so nothing moves off-screen. - Every animation has a resting state that reads correctly WITHOUT js. If story.js never runs, .in-view is absent and the fallbacks at the bottom of this file put every element in its final position. - prefers-reduced-motion collapses all of it to the final state instantly. - Transforms and opacity only. No animated width/height/top/left. */ /* ---------- scroll-in primitives ---------- Nothing is hidden until story.js puts `anim` on . That gate is the whole safety story: the page's copy lives inside [data-anim], so if the hidden state were the CSS default, any js failure would render a blank page. Hiding only once js has taken ownership means the worst case is a page with no motion, never a page with no words. */ .anim [data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s var(--ease, cubic-bezier(.22,.61,.36,1)); } .anim [data-anim].in-view { opacity: 1; transform: none; } .anim [data-anim][data-delay="1"] { transition-delay: .08s; } .anim [data-anim][data-delay="2"] { transition-delay: .16s; } .anim [data-anim][data-delay="3"] { transition-delay: .24s; } .anim [data-anim][data-delay="4"] { transition-delay: .32s; } .anim [data-anim][data-delay="5"] { transition-delay: .40s; } /* ---------- hero: "in that hour you will" ---------- */ .hour3 { margin: 34px 0 0; max-width: 760px; } .hour3-lead { font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; color: var(--gold); margin: 0 0 20px; } .hour3-grid { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } @media (min-width: 720px) { .hour3-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } .hour3-grid li { position: relative; padding: 20px 20px 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(198,169,107,.34); border-radius: var(--radius); background: rgba(198,169,107,.07); } .hour3-grid p { margin: 0; color: #e7e8ec; font-size: 1.125rem; line-height: 1.5; } .hour3-grid b { color: var(--gold); font-family: "Poppins", sans-serif; font-weight: 700; } /* second only to the headline: this is the line that closes the hero */ .hour3-foot { margin: 30px 0 0; color: var(--cream); font-family: "Poppins", sans-serif; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; font-size: clamp(1.5rem, 3.2vw, 2.35rem); } /* ---------- proof ---------- */ .proof-solo { background: var(--ink-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 44px 0; } .proof-solo .eyebrow { color: var(--gold); } .proof-solo ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; } @media (min-width: 900px) { .proof-solo ul { grid-template-columns: repeat(3, 1fr); gap: 26px; } } .proof-solo li { color: var(--cream); font-size: 1.1875rem; line-height: 1.5; padding-left: 26px; position: relative; } .proof-solo li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 1.5px; background: var(--gold); } .proof-solo b { color: var(--cream); font-weight: 600; } /* ---------- the problem list (the 80%) ---------- */ .probs { list-style: none; margin: 44px 0 0; padding: 0; counter-reset: p; max-width: 44em; } .probs li { position: relative; padding: 28px 0; border-top: 1px solid var(--line); } .probs li:last-child { border-bottom: 1px solid var(--line); } .probs .kick { display: block; font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .9rem; color: var(--gold-deep); margin-bottom: 9px; } .dark .probs .kick { color: var(--gold); } .probs p { margin: 0; font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(1.14rem, 2.1vw, 1.46rem); line-height: 1.38; } .probs p + p { margin-top: .4em; font-family: "Inter", sans-serif; font-weight: 400; font-size: 1.0625rem; color: var(--ink-soft); } .dark .probs li { border-color: var(--hair); } .dark .probs li::before { color: var(--gold); } .dark .probs p { color: var(--cream); } .dark .probs p + p { color: var(--dim-2); } .turnline { margin: 40px 0 0; max-width: 30em; font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.3; } .turnline b { color: var(--gold-deep); } .dark .turnline b { color: var(--gold); } /* the disqualify list is defined with the Who-holds-a-seat hierarchy below */ /* ---------- the 2:1 reveal ---------- */ .ratio-fail { display: grid; gap: 20px; margin: 0 auto; max-width: 940px; } @media (min-width: 700px) { .ratio-fail { grid-template-columns: 1fr 1fr; gap: 30px; } } .rf { border: 1px solid var(--hair); border-radius: var(--radius); background: var(--ink-3); padding: 26px 28px 24px; text-align: left; } .rf-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; min-height: 46px; align-content: flex-start; } .rf-dots i { width: 9px; height: 9px; border-radius: 50%; background: #565b66; display: block; } .rf-dots i.g { background: var(--gold); opacity: 1; } .rf h4 { margin: 0 0 .35em; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.1875rem; color: var(--cream); } .rf p { margin: 0; font-size: 1.0625rem; color: var(--dim); line-height: 1.5; } .ratio-big { margin-top: 44px; } /* ---------- the Tap Room split (ported from the Reboot deck) ---------- */ .taproom { width: 100%; max-width: 620px; margin: 0 auto; } .taproom svg { width: 100%; height: auto; display: block; overflow: visible; } .tr-room { fill: none; stroke: var(--hair); stroke-width: 3; rx: 18; transition: opacity .7s ease, transform .7s var(--ease, cubic-bezier(.22,.61,.36,1)); transform-origin: center; } .taproom.split .tr-room { opacity: 0; transform: scale(1.06); } .tr-dot { transition: transform 1s var(--ease, cubic-bezier(.22,.61,.36,1)), fill .6s ease, opacity .6s ease; fill: #6f747f; opacity: .6; } .taproom.split .tr-dot { opacity: 1; } .taproom.split .tr-dot.g { fill: var(--gold); } .taproom.split .tr-dot.n { fill: #565b66; opacity: .85; } .tr-key { display: flex; gap: 22px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .tr-key span { display: inline-flex; align-items: center; gap: 9px; font-size: 1rem; color: var(--ink-soft); } .dark .tr-key span { color: var(--dim); } .tr-key i { width: 11px; height: 11px; border-radius: 50%; display: block; } .tr-key i.g { background: var(--gold); } .tr-key i.n { background: #565b66; } /* ---------- the SPV pipeline ---------- */ .pipe { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; } @media (min-width: 860px) { .pipe { grid-template-columns: repeat(4, 1fr); gap: 0; } } .pipe > li { position: relative; counter-increment: s; } @media (min-width: 860px) { .pipe > li { padding: 0 14px; } } .pipe .step { background: var(--ink-3); border: 1px solid var(--hair); border-radius: var(--radius); padding: 24px 22px 26px; height: 100%; } .pipe .step .n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--ink); font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; } .pipe .step p { margin: 0; color: var(--dim); font-size: 1.0625rem; line-height: 1.55; } .pipe .link { display: none; position: absolute; left: -12px; top: 62px; width: 24px; height: 3px; background: var(--gold); transform-origin: left center; transition: transform .45s var(--ease, cubic-bezier(.22,.61,.36,1)); } .anim .pipe .link { transform: scaleX(0); } @media (min-width: 860px) { .pipe > li + li .link { display: block; } } .pipe.in-view > li:nth-child(2) .link { transform: scaleX(1); transition-delay: .25s; } .pipe.in-view > li:nth-child(3) .link { transform: scaleX(1); transition-delay: .45s; } .pipe.in-view > li:nth-child(4) .link { transform: scaleX(1); transition-delay: .65s; } /* ---------- the anchor bars ---------- */ .bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .bars li { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; } .bars .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; font-size: 1.0625rem; } .bars .lab b { font-family: "Poppins", sans-serif; font-weight: 600; } .bars .lab .amt { font-family: "DM Sans", sans-serif; font-weight: 700; white-space: nowrap; } .bars .track { height: 18px; border-radius: 999px; background: var(--cream-2); overflow: hidden; } .dark .bars .track { background: var(--ink-3); } .bars .fill { height: 100%; border-radius: 999px; background: var(--ink-soft); transform-origin: left center; transition: transform 1s var(--ease, cubic-bezier(.22,.61,.36,1)); } .anim .bars .fill { transform: scaleX(0); } .dark .bars .fill { background: #5a5f6b; } .bars li.ours .fill { background: var(--gold); } .bars li.ours .lab { color: var(--gold-deep); } .dark .bars li.ours .lab { color: var(--gold); } .bars.in-view .fill { transform: scaleX(1); } .bars.in-view li:nth-child(2) .fill { transition-delay: .12s; } .bars.in-view li:nth-child(3) .fill { transition-delay: .24s; } .bars.in-view li:nth-child(4) .fill { transition-delay: .40s; } .bars .note { font-size: 1rem; color: var(--ink-soft); margin: 4px 0 0; } .dark .bars .note { color: var(--dim-2); } /* ---------- the queue: Backers open Builder seats ---------- */ .queue { max-width: 620px; margin: 36px auto 0; } .queue-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .queue-row .cap { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); width: 100%; margin-bottom: 6px; } .queue-row i { width: 14px; height: 14px; border-radius: 50%; background: #565b66; display: block; transition: background-color .5s ease, transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .5s ease; } .queue-row i.g { background: var(--gold); } .queue-row i.seat { background: transparent; border: 1.5px dashed #5a5f6b; } .queue.in-view .queue-row i.pop { transform: scale(1.35); } .queue-note { color: var(--dim); font-size: 1.0625rem; margin: 10px 0 0; line-height: 1.6; } /* ---------- stack cards with a problem kicker ---------- */ .kills { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; } @media (min-width: 880px) { .kills { grid-template-columns: 1fr 1fr; } } .kills li { background: var(--ink-3); border: 1px solid var(--hair); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 24px 26px 26px; } .kills .kick { display: block; font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .9rem; color: var(--gold); margin-bottom: 10px; } .kills h3 { font-size: 1.3rem; margin-bottom: .35em; color: var(--cream); } .kills p { margin: 0; color: var(--dim); font-size: 1.0625rem; line-height: 1.6; } .kills .fine2 { display: block; margin-top: .7em; font-size: 1rem; color: var(--dim-2); } /* ---------- expectations ---------- */ .expect { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 44em; } .expect li { position: relative; padding-left: 30px; font-size: 1.0625rem; line-height: 1.6; } .expect li::before { content: ""; position: absolute; left: 4px; top: .56em; width: 9px; height: 9px; border: 2px solid var(--gold-deep); border-radius: 50%; } .expect b { font-family: "Poppins", sans-serif; font-weight: 600; } /* ---------- builder door ---------- */ .otherdoor { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; display: grid; gap: 16px; align-items: center; margin-top: 8px; } @media (min-width: 760px) { .otherdoor { grid-template-columns: 1fr auto; gap: 30px; } } .otherdoor h3 { margin-bottom: .3em; font-size: 1.3rem; } .otherdoor p { margin: 0; color: var(--ink-soft); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { [data-anim], [data-anim].in-view, [data-anim] { opacity: 1 !important; transform: none !important; } .bars .fill, .pipe .link { transform: scaleX(1) !important; } } /* ========================================================================== READING ORDER Eye-tracking work says long pages are scanned in a "layer cake": readers fixate on headings and dip into body copy only occasionally. Two consequences drive everything below. 1. The heading sequence has to carry the argument on its own, so headings get the size and the air, and body copy sits on a narrow measure underneath. 2. Every section must present the same entry point, top-left, so the eye re-anchors in one move on each new scroll rather than hunting. That is the F-pattern doing the work: one column, one alignment, one rhythm. The single deliberate exception is the 2:1, which is centred and oversized. Spending the boldness in one place is what makes it read as a decision. ========================================================================== */ /* one entry point per section: eyebrow, heading, lead, always in that order */ .sec-head { max-width: 34em; } .sec-head .eyebrow { margin-bottom: 14px; } .sec-head h2 { margin-bottom: .55em; } .sec-head h2:last-child { margin-bottom: 0; } .sec-head .section-lead { margin-bottom: 0; } /* Line length: 50-75 characters is the readable band. NOTE 1ch is the advance width of "0", not an average character, so a cap in ch lands roughly 10 per cent SHORT of the character count you meant. The first pass here used 22-34ch and squeezed everything to about 35 characters, which read as compressed. */ h2 { max-width: 34ch; } .probs p { max-width: 62ch; } .ratio-copy { max-width: 56ch; } .queue-note { max-width: 48ch; } @media (min-width: 900px) { h2 { max-width: 30ch; } } /* the gap between a heading and its body is what makes the layer legible */ .sec-head + * { margin-top: 40px; } /* graphics all sit in the same frame, so they read as one family rather than five separate widgets */ .fig { margin-top: 44px; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(15,17,21,.02); } .dark .fig { border-color: var(--hair); background: rgba(245,245,243,.02); } .fig-cap { margin: 22px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 54ch; } .dark .fig-cap { color: var(--dim-2); } @media (max-width: 620px) { .fig { padding: 22px 18px; } } /* ========================================================================== THE MAGIC RATIO The labels have to sit under the digits, not either side of the colon, so the numeral is split across a three-column grid and each label centres in its own column. Rendering "2:1" as one text node makes that impossible. ========================================================================== */ .ratio-lead { margin: 0 0 6px; color: var(--dim); font-size: 1.1875rem; } .ratio-title { margin: 0 0 8px; font-family: "Poppins", sans-serif; font-weight: 700; color: var(--cream); line-height: 1.05; letter-spacing: -.01em; font-size: clamp(2.1rem, 5vw, 3.4rem); } .ratio-grid { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: baseline; column-gap: clamp(10px, 2vw, 26px); } .ratio-grid .d, .ratio-grid .c { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--gold); font-size: clamp(4.5rem, 15vw, 10rem); line-height: .9; letter-spacing: -.03em; } .ratio-grid .c { opacity: .55; } .ratio-grid .lab { grid-row: 2; font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .875rem; color: var(--gold); text-align: center; padding-top: 10px; } .ratio-grid .lab.a { grid-column: 1; } .ratio-grid .lab.b { grid-column: 3; } /* the sixth answer, set apart from the five */ .onemore { margin: 52px auto 0; max-width: 40em; text-align: center; padding-top: 44px; border-top: 1px solid var(--hair); } .onemore .kick { display: block; font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; color: var(--gold); margin-bottom: 12px; } .onemore h3 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: .4em; color: var(--cream); } .onemore p { margin: 0 auto; color: var(--dim); font-size: 1.125rem; max-width: 34em; } /* price: two cards with a beat between them, not a side-by-side comparison */ .price-stack { display: grid; justify-items: center; gap: 0; margin-top: 40px; } .price-stack .price-card { width: 100%; max-width: 520px; text-align: center; } .price-beat { margin: 34px 0; text-align: center; font-family: "Poppins", sans-serif; font-weight: 700; color: var(--ink); line-height: 1.15; font-size: clamp(1.6rem, 3.6vw, 2.5rem); } .dark .price-beat { color: var(--cream); } .price-stack .price-card.charter { margin-top: 0; } /* centred section heads, used where a beat matters more than the F-pattern */ .sec-head.mid-align { margin-left: auto; margin-right: auto; text-align: center; } .sec-head.mid-align h2 { margin-left: auto; margin-right: auto; } .sec-head.mid-align .section-lead { margin-left: auto; margin-right: auto; } /* the queue graphic was indented but not centred, which read as a mistake */ .queue { max-width: 560px; margin-left: auto; margin-right: auto; } .queue-row { justify-content: center; } .queue-row .cap { text-align: center; } .queue-note { text-align: center; margin-left: auto; margin-right: auto; max-width: 38ch; } /* ---------- measure and padding corrections ---------- Found by measuring characters-per-line in the browser rather than by eye. The apply-step rail had no cap and ran to 109 characters; the failure cards shared a 720px box and ran at 33. Both are outside the 50-75 band. */ .rail { max-width: 64ch; } .section-grid .rail { max-width: none; } /* already column-constrained there */ /* On a phone the card padding was eating a third of the line. Trim it so body copy gets the width back; 390px minus 44px of page gutter leaves little. */ @media (max-width: 620px) { .def { padding: 24px 20px; } .notfor { padding: 24px 20px; } .kills li { padding: 22px 20px 24px; } .rf { padding: 22px 20px; } .seal { padding: 24px 20px; } .price-card { padding: 28px 22px 26px; } .form-card { padding: 24px 20px; } .probs li { padding: 24px 0; } } /* the Building Backer note is defined with the Who-holds-a-seat hierarchy below */ /* ---------- bonus list: columns, not a grid ---------- A two-column GRID sizes each row to its tallest item, so a short entry beside a long one leaves a hole in the other column. Multi-column flows the items and packs them, with break-inside stopping an entry splitting across the gap. Reading order becomes down-then-across, which suits a list of extras. */ @media (min-width: 860px) { .incl.two-up { display: block; column-count: 2; column-gap: 44px; } .incl.two-up li { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; } } /* .sec-head caps at 34em of its OWN 1rem, which then constrains the 1.1875rem lead inside it to about 44 characters. The two caps compound because they are relative to different font sizes. Widen the wrapper and let the lead's own cap do the work. */ .sec-head { max-width: 42em; } .sec-head .section-lead { max-width: 34em; } /* ========================================================================== THE STATEMENT The Builders page needs its own signature the way the homepage has the 2:1. The house rule is the right candidate: it is the shortest thing on the page, it is Kenny's own phrase, and for a founder it is the whole promise. Set at display scale on a dark band it does the job the giant numeral does over there, without repeating it. ========================================================================== */ .statement { text-align: center; } .statement .st-line { margin: 0; font-family: "Poppins", sans-serif; font-weight: 700; color: var(--cream); line-height: 1.02; letter-spacing: -.025em; font-size: clamp(2.6rem, 8.5vw, 6rem); } .statement .st-line em { color: var(--gold); font-style: normal; } .statement .st-body { max-width: 36em; margin: 46px auto 0; text-align: left; display: grid; gap: 1.1em; } .statement .st-body p { margin: 0; color: var(--dim); font-size: 1.125rem; line-height: 1.65; } .statement .st-body p b { color: var(--cream); font-weight: 600; } .statement .st-kicker { margin: 0 0 26px; font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; color: var(--gold); } /* the obstacle beat, set large enough to land as a beat rather than a paragraph */ .beat { max-width: 22ch; margin: 0; font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.2; letter-spacing: -.01em; } .beat-body { margin: 30px 0 0; max-width: 58ch; font-size: 1.1875rem; line-height: 1.7; color: var(--ink-soft); } .dark .beat-body { color: var(--dim); } @media (min-width: 900px) { .beat-wrap { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 56px; align-items: start; } .beat-wrap .beat-body { margin-top: 0; } } /* the two wait-list doors */ .doors2 { display: grid; gap: 20px; margin-top: 44px; } @media (min-width: 820px) { .doors2 { grid-template-columns: 1fr 1fr; gap: 26px; } } .door2 { border: 1px solid var(--line); border-left: 5px solid var(--gold-deep); border-radius: var(--radius); background: var(--cream); padding: 28px 30px; } .door2 h3 { font-size: 1.3rem; margin-bottom: .4em; } .door2 p { margin: 0; font-size: 1.0625rem; line-height: 1.6; } .dark .door2 { background: var(--ink-3); border-color: var(--hair); border-left-color: var(--gold); } .dark .door2 p { color: var(--dim); } @media (max-width: 620px) { .door2 { padding: 24px 20px; } } /* ========================================================================== BUILDERS-ONLY GRAPHICS Three of them, none reused from the homepage. Each one makes an abstract rule concrete at the exact point the copy states it. ========================================================================== */ /* --- 1. the six qualifying Wednesdays ------------------------------------- "Attend 3 of these 6" is the whole Charter rule for a Builder and it is the sort of thing a reader skims past as a list of dates. Drawn as a track, the arithmetic is instant. */ .weds { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; } @media (min-width: 700px) { .weds { grid-template-columns: repeat(6, 1fr); gap: 0; } } .weds::before { content: ""; position: absolute; left: 8%; right: 8%; top: 19px; height: 2px; background: var(--line); display: none; } .dark .weds::before { background: var(--hair); } .dark .weds .w-dot { background: var(--ink-3); border-color: var(--hair); } @media (min-width: 700px) { .weds::before { display: block; } } .weds li { position: relative; text-align: center; display: grid; justify-items: center; gap: 10px; } .weds .w-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); border: 2px solid var(--line); position: relative; z-index: 1; transition: background-color .5s ease, border-color .5s ease, transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)); } .weds .w-dot::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg) scale(0); transition: transform .35s var(--ease, cubic-bezier(.22,.61,.36,1)); margin-top: -3px; } .weds.in-view li:nth-child(-n+3) .w-dot { background: var(--gold); border-color: var(--gold); } .weds.in-view li:nth-child(-n+3) .w-dot::after { transform: rotate(-45deg) scale(1); } .weds.in-view li:nth-child(1) .w-dot { transition-delay: .1s; } .weds.in-view li:nth-child(2) .w-dot { transition-delay: .35s; } .weds.in-view li:nth-child(3) .w-dot { transition-delay: .6s; } .weds.in-view li:nth-child(-n+3) .w-dot::after { transition-delay: .5s; } .weds .w-date { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--ink-soft); } .weds li:nth-child(-n+3) .w-date { color: var(--ink); } .dark .weds .w-date { color: var(--dim-2); } .dark .weds li:nth-child(-n+3) .w-date { color: var(--cream); } /* --- 2. the hour, as proportion ------------------------------------------ Fifteen minutes on stage against forty-five in the rooms. The ratio is the selling point and a donut says it faster than the sentence does. */ .hourring { display: grid; justify-items: center; gap: 22px; } .hourring svg { width: 100%; max-width: 260px; height: auto; display: block; overflow: visible; } .hourring .ring-bg { fill: none; stroke: var(--hair); stroke-width: 14; } .hourring .ring-fg { fill: none; stroke: var(--gold); stroke-width: 14; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 1.2s var(--ease, cubic-bezier(.22,.61,.36,1)); } .hourring.in-view .ring-fg { stroke-dashoffset: 330; } /* 15 of 60 minutes */ .hourring .ring-label { fill: var(--cream); font-family: "Poppins", sans-serif; font-weight: 700; font-size: 30px; text-anchor: middle; } .hourring .ring-sub { fill: #8b8e95; font-family: "Inter", sans-serif; font-size: 13px; text-anchor: middle; } .hourring-key { display: grid; gap: 10px; } .hourring-key span { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; color: var(--dim); } .hourring-key i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } .hourring-key i.a { background: var(--gold); } .hourring-key i.b { background: #3a3f48; } /* --- 3. the queue jump --------------------------------------------------- "Move yourself to the front of the line" is the promise; this shows it happening. The cursor translates by a PERCENTAGE of the track, so it stays correct at any width without measuring anything in js. */ .jump { margin: 0; } .jump-track { position: relative; height: 46px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(198,169,107,.22), rgba(86,91,102,.28)); border: 1px solid var(--hair); } .jump-cursor { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(76%); transition: transform 1.4s var(--ease, cubic-bezier(.22,.61,.36,1)); pointer-events: none; } .jump.in-view .jump-cursor { transform: translateX(6%); } .jump-you { position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: var(--gold); color: var(--ink); border-radius: 999px; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: .95rem; padding: 9px 18px; white-space: nowrap; box-shadow: 0 8px 22px -10px rgba(0,0,0,.8); } .jump-ends { display: flex; justify-content: space-between; margin-top: 14px; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); } /* a heading with a quieter second line under it */ .h2-sub { margin: .5em auto 0; max-width: 30ch; font-family: "Poppins", sans-serif; font-weight: 600; line-height: 1.25; font-size: clamp(1.15rem, 2.2vw, 1.55rem); color: var(--gold); } @media (prefers-reduced-motion: reduce) { .weds .w-dot, .weds .w-dot::after, .hourring .ring-fg, .jump-cursor { transition: none !important; } .weds li:nth-child(-n+3) .w-dot { background: var(--gold); border-color: var(--gold); } .weds li:nth-child(-n+3) .w-dot::after { transform: rotate(-45deg) scale(1); } .hourring .ring-fg { stroke-dashoffset: 330; } .jump-cursor { transform: translateX(6%); } } /* ---------- the Builders hero ---------- Its own photograph. Sharing the homepage's reads as reuse, and the subject here is better anyway: the taps are the brand's own vocabulary (Tap Rooms, GeeksTap, the Virtual Local). The gradient runs the same direction as the homepage so the two heroes still feel like one system, but it is pushed a little darker on the left because this image carries more warm highlight there. Generated asset, so restore/upscale passes should skip it. */ .hero-builders::before { background: linear-gradient(102deg, rgba(15,17,21,.97) 0%, rgba(15,17,21,.88) 42%, rgba(15,17,21,.42) 100%), url("../assets/hero-builders.webp") center/cover no-repeat !important; } /* ---------- "Who holds a seat": hierarchy, not four peer boxes ---------- The heading promises TWO types, so only two things may carry card weight. Everything below them is subordinate and has to look it: [ Backer ] [ Builder ] <- the two types, equal weight Building Backer <- centred UNDER the gap, because a Building Backer is literally both at once. Narrower and set apart so it reads as a bridge between the pair, not a third type. Being a Backer isn't for you if <- an exclusion LIST, deliberately not a card: no fill, full measure, ruled. No service providers. Ever. <- the closing rule. */ .defnote { margin: 44px auto 0; max-width: 580px; text-align: center; border: 1.5px solid var(--gold); border-radius: var(--radius); background: rgba(198,169,107,.08); padding: 24px 30px; } .defnote h3 { font-size: 1.2rem; margin-bottom: .35em; color: var(--gold-deep); } .defnote p { margin: 0 auto; max-width: 46ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; } .dark .defnote { background: rgba(198,169,107,.1); } .dark .defnote h3 { color: var(--gold); } .dark .defnote p { color: var(--dim); } /* a hairline above it, so the break between the pair and the note is explicit */ .defnote-wrap { position: relative; margin-top: 46px; } .defnote-wrap::before { content: ""; display: block; width: 1px; height: 34px; background: var(--line); margin: 0 auto; } .dark .defnote-wrap::before { background: var(--hair); } .defnote-wrap .defnote { margin-top: 0; } /* the exclusions: a list, not a card. No fill and no full border, so it cannot be mistaken for a third type. */ .notfor { margin: 56px 0 0; max-width: none; border: 0; border-left: 3px solid var(--ink); border-radius: 0; background: none; padding: 4px 0 4px 26px; } .notfor h3 { font-size: 1.3rem; margin-bottom: .6em; } .notfor ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } @media (min-width: 780px) { .notfor ul { grid-template-columns: 1fr 1fr; gap: 10px 40px; } } .notfor li { position: relative; padding-left: 26px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); } .notfor li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 11px; height: 2px; background: var(--ink); } .dark .notfor { border-left-color: var(--gold); } .dark .notfor li { color: var(--dim); } .dark .notfor li::before { background: var(--gold); } @media (max-width: 620px) { .defnote { padding: 22px 20px; } .notfor { padding-left: 20px; } } /* the absolute exclusion, as the section's closing beat rather than a stray paragraph floating under an indented box */ .ruleout { margin-top: 46px; } .ruleout-line { margin: 0 0 .35em; font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.15; letter-spacing: -.01em; } .ruleout-line em { color: var(--gold-deep); font-style: normal; } .dark .ruleout-line em { color: var(--gold); } .ruleout-body { margin: 0; max-width: 52ch; font-size: 1.1875rem; color: var(--ink-soft); } .dark .ruleout-body { color: var(--dim); }