/* ============================================================ REVL Franchise Experience — design system Tokens, fonts and photo treatment ported verbatim from the leadership deck (active/franchise-recruitment-deck/build/index.html) so this reads as the same REVL artifact. Vertical scroll, not slides. ============================================================ */ @font-face{ font-family:'Acier'; src:url('assets/fonts/AcierTextSolid.otf') format('opentype'); font-display:block; } @font-face{ font-family:'Acier Out'; src:url('assets/fonts/AcierTextOutline.otf') format('opentype'); font-display:block; } :root{ --black:#0A0A0A; --black2:#070707; --panel:#14181a; --panel2:#1A1E1E; --white:#FFFFFF; --off:#E8E8E6; --warm:#CCCABB; --grey:#9a9a93; --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.06); /* Official style guide v1.0: Beige is the accent. The token name stays --ember so this is a pure recolour of the locked v3 page. */ --ember:#CCCABB; /* Official style guide v1.0 names, shared with the funnel pages so the two projects stay one system. Mid Black is the only text colour allowed to sit ON beige. --field is the form input fill. */ --midblack:#1A1E1E; --chalk:#D3D4D3; --beige:#CCCABB; --field:#141819; --maxw:1180px; --gutter:clamp(24px,7vw,120px); --sectionpad:clamp(96px,13vh,176px); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--black); color:var(--off); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ display:block; max-width:100%; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:rgba(204,202,187,.3); color:var(--white); } /* ---------- running header + progress ---------- */ .progress{ position:fixed; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.07); z-index:80; } .progress span{ display:block; height:100%; width:0; background:var(--ember); transition:width .2s linear; } .hdr{ position:fixed; top:0; left:0; right:0; z-index:70; display:flex; justify-content:space-between; align-items:center; padding:18px 28px; pointer-events:none; background:linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,0)); } .hdr img{ height:15px; opacity:.95; } .hdr .meta{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); opacity:.85; } .hdr .meta b{ color:var(--white); font-weight:700; } /* ---------- section shell ---------- */ section.section{ position:relative; padding:var(--sectionpad) var(--gutter); } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; position:relative; z-index:2; } .kicker{ font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--warm); opacity:.85; margin-bottom:22px; } .divider{ height:1px; background:var(--line2); } /* type */ h1,h2{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); line-height:.96; letter-spacing:.005em; font-weight:400; text-wrap:balance; overflow-wrap:break-word; } h1{ font-size:clamp(46px,8vw,116px); } h2{ font-size:clamp(30px,4.8vw,64px); } h3{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:clamp(19px,2.2vw,28px); line-height:1; letter-spacing:.01em; font-weight:400; text-wrap:balance; } .lead{ font-size:clamp(16px,1.55vw,20px); line-height:1.6; font-weight:300; color:var(--off); max-width:60ch; text-wrap:pretty; } .lead.wide{ max-width:92ch; } .lead.mt{ margin-top:28px; } .lead strong{ font-weight:700; color:var(--white); } .small{ font-size:13px; line-height:1.6; color:var(--warm); font-weight:400; } .flag{ font-size:11px; color:var(--grey); opacity:.7; font-style:italic; margin-top:10px; } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity:1; transform:none; } .d1{ transition-delay:.07s; } .d2{ transition-delay:.15s; } .d3{ transition-delay:.25s; } .d4{ transition-delay:.35s; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* full-bleed photo + scrim */ .bleed{ position:absolute; inset:0; z-index:0; overflow:hidden; } .bleed img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.55); } .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.92) 100%); } /* hero: anchor the dark on the left so the headline always reads crisp over the photo, and let more of the real gym shot breathe on the right */ #hero .scrim{ background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 38%, rgba(10,10,10,.18) 72%, rgba(10,10,10,.05) 100%), linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,.2) 42%, rgba(10,10,10,.9) 100%); } /* ---------- hero ---------- */ #hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(72px,11vh,120px); } #hero .wordmark{ height:30px; margin-bottom:26px; } #hero .enquiry-note{ font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); margin-bottom:22px; display:inline-flex; align-items:center; gap:10px; } #hero .enquiry-note::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ember); } #hero h1{ margin-bottom:18px; } #hero .sub{ font-size:clamp(15px,1.7vw,21px); color:var(--off); font-weight:300; letter-spacing:.01em; max-width:46ch; } .scrollcue{ margin-top:40px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.7; display:inline-flex; align-items:center; gap:13px; } /* animated scroll cue: three stacked chevrons pulse in sequence top-to-bottom. Direction with nothing moving. Pure CSS, flat (no glow), stilled for reduced-motion. */ .cue{ position:relative; width:11px; height:32px; flex:0 0 auto; color:var(--ember); } .cue-chev{ position:absolute; left:50%; width:10px; line-height:0; transform:translateX(-50%); opacity:.14; animation:cuePulse 2.1s ease-in-out infinite; } .cue-chev:nth-child(1){ top:3px; } .cue-chev:nth-child(2){ top:12px; animation-delay:.26s; } .cue-chev:nth-child(3){ top:21px; animation-delay:.52s; } .cue-chev svg{ display:block; width:100%; height:auto; } @keyframes cuePulse{ 0%,15%{ opacity:.14; } 32%{ opacity:.8; } 60%,100%{ opacity:.14; } } @media (prefers-reduced-motion:reduce){ .cue-chev{ animation:none; opacity:.35; } .cue-chev:nth-child(3){ opacity:.65; } } /* statement + split */ .statement h2{ max-width:18ch; } .split{ display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:center; } .portrait{ aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; max-height:64vh; } .portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.74); } /* ---------- centered section variant (mix up the left-aligned rhythm) ---------- */ .centered .wrap{ text-align:center; } .centered .lead{ margin-inline:auto; max-width:64ch; } /* Page one went back to its original composition on 30 Jul: the broadsheet opening, the centred model and the letterbox film bands all came out on Macca's call ("back to how we originally had it"). The films are 16:9 again, which is what "the videos are not sized correctly" was about. What stayed: the studio model as the comparison table, and the two behaviour fixes (the progress bar, and the counters settling on the real figures instead of zero). */ /* WHAT IS REVL keeps the original stacked layout, the film just comes down to three quarters width on desktop so it stops swallowing the section (30 Jul). It stays flush left with the words above it rather than centring, because everything else on page one hangs off the left edge. Full width below 881px, where three quarters would be too small to read. */ @media(min-width:881px){ #feeling .video-ph{ width:75%; } } /* What is REVL, What every studio runs and Become a founder all went centred on 30 Jul, joining the mission. .centered puts text-align:center on the whole .wrap, so anything inside that is a list, a grid cell or a form control has to be handed its alignment back: a centred form label sitting above a left aligned input reads as a mistake. */ #feeling .video-ph{ margin-inline:auto; } #runs .offerings{ text-align:left; } #enquire .gate{ text-align:left; } /* the unlocks are gone, so the form is the first thing in the gate and does not need the 34px that used to separate it from them */ #enquire .gate .form{ margin-top:0; } /* ---- THE REVL MODEL and BECOME A FOUNDER, brought in (30 Jul) ---- Both ran well over a screen. The model was 1473px and the form 1281px at 1440x750, and in each case one element carried most of it: a full width 16:9 film, and the space around the form controls. Nothing is cut, it is all sized down. */ /* these two are the tallest sections on the page, so they also give back some of the top and bottom padding the shorter ones can afford */ #model, #enquire{ padding-block:clamp(72px,9vh,120px); } /* The film here stays FULL width, squaring up with the right edge of the Move / Sweat / Perform row above it. It was pulled back to 65% to save height and it read as a stub against those three cards, so the height comes out of the stream cards and the padding instead. */ #model .stream{ min-height:0; padding:24px 22px; } #model .stream .sh{ font-size:clamp(26px,3vw,38px); margin:16px 0 12px; } #model .stream .sd{ font-size:13.5px; } #model .streams{ margin-top:32px; } #model h2{ font-size:clamp(28px,4.2vw,54px); } /* the form: every control comes in a notch. The fields stay comfortably above the 44px tap target on a phone. */ #enquire .gate{ padding:clamp(22px,3vw,34px); } #enquire .flab{ margin:22px 0 10px; padding-bottom:7px; } #enquire .ffield span{ font-size:13px; margin-bottom:6px; } /* a select draws a shorter line box than an input at the same padding, so the four dropdowns came out at 43px against the inputs' 47. min-height holds every control on the 44px tap target and squares them up. */ #enquire .ffield input, #enquire .ffield select{ padding:12px 14px; font-size:15px; min-height:44px; } #enquire .frow{ gap:12px; margin-bottom:12px; } #enquire .sopt{ padding:13px 15px; font-size:14px; } /* min-height holds the Yes / Not yet pair on the 44px tap target; the padding alone left them a pixel short once the type came down */ #enquire .seg button{ padding:12px 0; font-size:14px; min-height:44px; } #enquire .form .cta-btn{ margin-top:20px; padding:15px 28px; font-size:14px; } #enquire .fnote{ margin-top:10px; } /* the submit button and the prototype note are centred by their own rules in the form block, so they are left alone here */ /* ---------- scale proof stat band ---------- */ .stats{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; margin-top:54px; } .stat{ text-align:center; padding:6px clamp(26px,5vw,68px); } .stat .v{ font-family:'Acier',sans-serif; font-size:clamp(46px,6.6vw,86px); color:var(--white); line-height:.9; font-variant-numeric:tabular-nums; } .stat .l{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); margin-top:14px; } .stat-div{ width:1px; height:60px; flex:0 0 auto; background:linear-gradient(transparent, rgba(255,255,255,.16), transparent); } /* ---------- offerings / streams ---------- */ .offerings{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:38px; background:var(--line2); border:1px solid var(--line2); } .offer{ background:var(--black); padding:22px 24px; } .offer .n{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; } .offer .t{ font-size:14.5px; color:var(--white); font-weight:600; margin-top:10px; line-height:1.3; } /* Move / Sweat / Perform: the signature three-stream system, as the centerpiece */ .streams{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; } .stream{ border:1px solid var(--line); border-radius:6px; padding:30px 26px; min-height:230px; display:flex; flex-direction:column; background:rgba(255,255,255,.012); } .stream.on{ border-color:rgba(204,202,187,.4); background:linear-gradient(180deg, rgba(204,202,187,.06), rgba(255,255,255,.008)); } .stream .sn{ font-family:'Acier Out',sans-serif; font-size:13px; color:var(--warm); opacity:.55; } .stream .sh{ font-family:'Acier',sans-serif; font-size:clamp(32px,3.6vw,48px); color:var(--white); text-transform:uppercase; margin:auto 0 14px; line-height:.9; } .stream .sd{ font-size:14px; color:var(--warm); line-height:1.5; } .subhead{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.8; margin:48px 0 18px; } /* ---------- video placeholder ---------- */ .video-ph{ position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-top:30px; background:var(--panel); cursor:pointer; width:100%; display:block; text-align:left; color:inherit; } .video-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.42); transition:filter .4s, transform 6s ease; } .video-ph:hover img{ filter:grayscale(1) contrast(1.08) brightness(.5); transform:scale(1.03); } .video-ph .vph-grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.2), rgba(10,10,10,.7)); } .video-ph .vph-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; border:1px solid rgba(255,255,255,.55); display:grid; place-items:center; background:rgba(10,10,10,.35); backdrop-filter:blur(3px); transition:border-color .2s, background .2s; } .video-ph:hover .vph-play{ border-color:var(--white); background:rgba(204,202,187,.25); } .video-ph .vph-play::after{ content:''; width:0; height:0; border-left:16px solid var(--white); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; } .video-ph .vph-meta{ position:absolute; left:18px; bottom:16px; right:18px; display:flex; justify-content:space-between; align-items:flex-end; gap:14px; } .video-ph .vph-title{ font-size:14px; color:var(--white); font-weight:600; letter-spacing:.01em; } .video-ph .vph-label{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm); border:1px solid var(--line); border-radius:2px; padding:4px 8px; background:rgba(10,10,10,.4); white-space:nowrap; } .video-ph .vph-time{ position:absolute; top:14px; right:14px; font-size:10.5px; letter-spacing:.1em; color:var(--off); background:rgba(10,10,10,.55); border:1px solid var(--line); border-radius:2px; padding:4px 8px; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .2s; } .video-ph.playing .vph-time{ opacity:1; } .video-ph.playing .vph-play{ background:rgba(204,202,187,.5); border-color:var(--ember); } .video-ph.playing .vph-play::after{ border:none; width:14px; height:14px; margin:0; background:linear-gradient(90deg, var(--white) 0 38%, transparent 38% 62%, var(--white) 62% 100%); } /* ---------- territory map ---------- */ .territory-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; margin-top:36px; align-items:start; } .territory-map{ position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); aspect-ratio:16/10; } .territory-map img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.4); } .territory-map .tm-grad{ position:absolute; inset:0; background:radial-gradient(circle at 60% 45%, rgba(204,202,187,.08), transparent 55%); } .regions{ display:flex; flex-direction:column; gap:8px; } .region{ display:flex; justify-content:space-between; align-items:center; gap:14px; border:1px solid var(--line); border-radius:4px; padding:14px 16px; background:rgba(255,255,255,.012); text-align:left; transition:border-color .18s, background .18s; } .region:hover{ border-color:rgba(204,202,187,.5); background:rgba(204,202,187,.05); } .region .rn{ font-size:14px; color:var(--white); font-weight:600; } .region .rs{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); } .region.open .rs{ color:var(--ember); } .region.active{ border-color:var(--ember); background:rgba(204,202,187,.08); } .region .rmore{ font-size:11.5px; color:var(--grey); margin-top:4px; display:none; } .region.active .rmore{ display:block; color:var(--off); } /* ---------- format cards ---------- */ .formats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; } .format-card{ border:1px solid var(--line); border-radius:5px; padding:24px 22px; background:rgba(255,255,255,.012); cursor:pointer; transition:border-color .2s, background .2s; display:flex; flex-direction:column; } .format-card:hover{ border-color:rgba(255,255,255,.3); } .format-card.open{ border-color:rgba(204,202,187,.45); background:linear-gradient(180deg, rgba(204,202,187,.05), rgba(255,255,255,.008)); } .format-card .fnum{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; } .format-card .fname{ font-family:'Acier',sans-serif; font-size:26px; color:var(--white); text-transform:uppercase; margin:12px 0 6px; line-height:1; } .format-card .fsize{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); } .format-card .fdesc{ font-size:13px; color:var(--off); line-height:1.5; margin-top:14px; } .format-card .fdetail{ max-height:0; overflow:hidden; transition:max-height .35s ease, margin .35s ease; } .format-card.open .fdetail{ max-height:320px; margin-top:14px; } .format-card .fdetail ul{ list-style:none; } .format-card .fdetail li{ font-size:12.5px; color:var(--warm); padding:6px 0; border-bottom:1px solid var(--line2); } .format-card .fdetail li:last-child{ border-bottom:none; } .format-card .fmore{ margin-top:auto; padding-top:16px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--warm); opacity:.8; } .format-card.open .fmore{ color:var(--ember); } /* ---------- format comparison table ---------- */ .format-table-wrap{ margin-top:38px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .format-table{ width:100%; min-width:660px; border:1px solid var(--line); border-radius:8px; overflow:hidden; border-collapse:collapse; } .format-table th, .format-table td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line2); font-size:13.5px; color:var(--off); vertical-align:top; } .format-table thead th{ background:rgba(255,255,255,.02); } .format-table thead .nm{ font-family:'Acier',sans-serif; font-size:22px; color:var(--white); text-transform:uppercase; } .format-table thead .sz{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); display:block; margin-top:6px; } .format-table tbody th{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); font-weight:400; width:168px; } .format-table td:first-child, .format-table th:first-child{ border-right:1px solid var(--line2); } .format-table tr:last-child td, .format-table tr:last-child th{ border-bottom:none; } .format-table .feat{ background:rgba(204,202,187,.05); } /* ---------- key numbers + ROI ---------- */ .numbers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; } .numcard{ border:1px solid var(--line); border-radius:5px; padding:22px 20px; } .numcard .v{ font-family:'Acier',sans-serif; font-size:clamp(30px,3.6vw,44px); color:var(--white); line-height:.9; } .numcard .l{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); margin-top:12px; } .numcard .note{ font-size:10px; color:var(--grey); margin-top:6px; font-style:italic; } .roi{ border:1px solid var(--line); border-radius:6px; padding:26px 26px; margin-top:24px; background:var(--panel); } .roi .roi-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px; } .roi h3{ font-size:20px; } .roi .roi-tag{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); border:1px solid rgba(204,202,187,.4); border-radius:2px; padding:4px 9px; } .roi .roi-controls{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; } .roi-opt{ border:1px solid var(--line); border-radius:3px; padding:11px 16px; font-size:13px; color:var(--off); background:rgba(255,255,255,.015); transition:border-color .18s, color .18s, background .18s; } .roi-opt:hover{ border-color:rgba(255,255,255,.35); } .roi-opt.on{ border-color:var(--ember); color:var(--white); background:rgba(204,202,187,.1); } .roi-out{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; } .roi-metric .rv{ font-family:'Acier',sans-serif; font-size:clamp(24px,3vw,34px); color:var(--ember); line-height:.9; } .roi-metric .rl{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); margin-top:10px; } /* ---------- what building a REVL includes (replaces the ROI box) ---------- */ .num-includes{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.85; margin:46px 0 18px; } .includes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:6px; overflow:hidden; } .includes-grid .inc{ background:var(--black); padding:18px 20px; font-size:13.5px; color:var(--off); display:flex; gap:12px; align-items:flex-start; line-height:1.4; } .includes-grid .inc::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:2px; border-right:1px solid var(--ember); border-bottom:1px solid var(--ember); transform:rotate(45deg); } /* ---------- support pillars ---------- */ .pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px; } .pillar{ border:1px solid var(--line); border-radius:5px; padding:24px 24px; } .pillar .pn{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; } .pillar .ph{ font-family:'Acier',sans-serif; font-size:21px; color:var(--white); text-transform:uppercase; margin:10px 0 14px; line-height:1; } .pillar .chips{ display:flex; flex-wrap:wrap; gap:7px; } .pillar .chip{ font-size:11.5px; color:var(--off); border:1px solid var(--line); border-radius:2px; padding:6px 10px; letter-spacing:.02em; } /* merged partnership + academy: the four support pillars beside the Academy film */ .support-split{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; margin-top:36px; } .support-list{ display:flex; flex-direction:column; gap:14px; } .support-list .sr{ border:1px solid var(--line); border-radius:6px; padding:17px 19px; } .support-list .sr .h{ font-family:'Acier',sans-serif; font-size:18px; color:var(--white); text-transform:uppercase; line-height:1; } .support-list .sr .d{ font-size:12.5px; color:var(--warm); margin-top:8px; line-height:1.5; } .support-split .video-ph{ margin-top:0; aspect-ratio:auto; min-height:340px; } /* ---------- launch process ---------- */ .process{ margin-top:38px; } .pstage{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); margin:26px 0 14px; } .psteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .pstep{ border:1px solid var(--line); border-radius:4px; padding:18px 18px; } .pstep .pw{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); } .pstep .pt{ font-size:14px; color:var(--white); font-weight:600; margin:9px 0 8px; line-height:1.25; } .pstep .pd{ font-size:12px; color:var(--grey); line-height:1.5; } .psteps.two{ grid-template-columns:repeat(2,1fr); } /* ---------- horizontal connected timeline (the path) ---------- */ .pathline{ position:relative; margin-top:50px; } .pl-track{ display:grid; grid-template-columns:repeat(6,1fr); position:relative; } /* connector line: span exactly from the first dot's centre to the last dot's centre (dots sit half a dot in from each column start, so 6.5px + 5/6 wide) */ .pl-track::before{ content:''; position:absolute; top:6px; left:6.5px; width:calc(500%/6); height:1px; background:var(--line); } .pl-node{ text-align:left; padding-right:18px; position:relative; } .pl-dot{ width:13px; height:13px; border-radius:50%; border:1px solid var(--ember); background:var(--black); position:relative; z-index:2; margin-bottom:18px; } .pl-dot.fill{ background:rgba(204,202,187,.4); } .pl-w{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); } .pl-t{ font-size:13.5px; color:var(--white); font-weight:600; margin:8px 0 6px; line-height:1.2; } .pl-d{ font-size:11.5px; color:var(--grey); line-height:1.45; } /* ---------- proof / someone like you ---------- */ .proof-card{ border:1px solid var(--line); border-radius:6px; padding:30px 30px; margin-top:34px; background:rgba(255,255,255,.012); } .proof-card .pl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:16px; } .proof-card .pq{ font-size:clamp(18px,2.2vw,26px); color:var(--white); font-weight:300; line-height:1.4; font-family:'Manrope',sans-serif; } .proof-card .pa{ font-size:12.5px; color:var(--warm); margin-top:18px; letter-spacing:.04em; } /* ---------- CTA ---------- */ #book{ background:var(--black2); } .cta-card{ border:1px solid rgba(204,202,187,.35); border-radius:8px; padding:clamp(32px,5vw,56px); margin:34px auto 0; max-width:780px; text-align:center; background:linear-gradient(180deg, rgba(204,202,187,.06), rgba(255,255,255,.008)); } .cta-card .cl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:18px; } .cta-card h2{ margin-bottom:18px; font-size:clamp(24px,3vw,38px); } .cta-card .lead{ max-width:52ch; margin-inline:auto; } .cta-btn{ display:inline-flex; align-items:center; gap:12px; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:17px 30px; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:14px; transition:transform .15s, filter .15s; } .cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); } .cta-btn::after{ content:'\2192'; } .cta-sub{ font-size:13px; color:var(--warm); margin-top:18px; } /* ---------- footer ---------- */ .foot{ padding:46px var(--gutter) 60px; border-top:1px solid var(--line2); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; } .foot img{ height:14px; opacity:.8; } .foot .ft{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); } /* ============================================================ LIVE PROFILING PANEL (the "see it working" proof) ============================================================ */ .profile-toggle{ position:fixed; bottom:20px; right:20px; z-index:90; display:inline-flex; align-items:center; gap:10px; background:rgba(20,24,26,.92); border:1px solid var(--line); border-radius:40px; padding:11px 17px 11px 14px; color:var(--off); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(8px); transition:border-color .2s, transform .2s; } .profile-toggle:hover{ border-color:rgba(255,255,255,.35); transform:translateY(-1px); } .profile-toggle .pt-dot{ width:8px; height:8px; border-radius:50%; background:var(--ember); position:relative; animation:pp-breathe 2.6s ease-in-out infinite; } @keyframes pp-breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } @media (prefers-reduced-motion:reduce){ .profile-toggle .pt-dot{ animation:none; opacity:1; } } .profile-toggle .pt-score{ color:var(--white); font-weight:700; font-variant-numeric:tabular-nums; } .profile-panel{ position:fixed; bottom:20px; right:20px; z-index:91; width:min(360px, calc(100vw - 40px)); max-height:min(78vh, 640px); overflow-y:auto; background:rgba(20,24,26,.97); border:1px solid var(--line); border-radius:10px; backdrop-filter:blur(12px); transform:translateY(12px) scale(.98); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 24px 60px rgba(10,10,10,.5); } .profile-panel.open{ opacity:1; transform:none; pointer-events:auto; } .pp-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(20,24,26,.98); } .pp-head .pp-t{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--white); font-weight:700; } .pp-head .pp-x{ background:none; border:none; color:var(--warm); font-size:18px; line-height:1; padding:2px 6px; } .pp-head .pp-x:hover{ color:var(--white); } .pp-body{ padding:18px; } .pp-section{ margin-bottom:20px; } .pp-lab{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin-bottom:10px; } .pp-intro{ font-size:12px; color:var(--warm); line-height:1.55; } .pp-avatar{ font-family:'Acier',sans-serif; font-size:24px; color:var(--white); text-transform:uppercase; line-height:1; } .pp-avatar.unknown{ color:var(--grey); } .pp-conf{ height:5px; background:rgba(255,255,255,.08); border-radius:3px; margin-top:10px; overflow:hidden; } .pp-conf span{ display:block; height:100%; background:var(--warm); border-radius:3px; transition:width .4s; } .pp-conf-n{ font-size:10.5px; color:var(--grey); margin-top:6px; } .pp-score-row{ display:flex; align-items:baseline; gap:12px; } .pp-score{ font-family:'Acier',sans-serif; font-size:50px; color:var(--ember); line-height:.8; font-variant-numeric:tabular-nums; } .pp-score-max{ font-size:14px; color:var(--grey); } .pp-score-state{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--warm); margin-left:auto; align-self:flex-end; } .pp-scorebar{ height:8px; background:rgba(255,255,255,.08); border-radius:4px; margin-top:12px; position:relative; overflow:visible; } .pp-scorebar .fill{ display:block; height:100%; background:var(--ember); border-radius:4px; transition:width .5s; } .pp-scorebar .thresh{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--white); opacity:.5; } .pp-scorebar .thresh::after{ content:'HOT'; position:absolute; top:-15px; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:.1em; color:var(--warm); } .pp-hot{ margin-top:12px; padding:10px 12px; border:1px solid var(--ember); border-radius:4px; background:rgba(204,202,187,.12); font-size:11.5px; color:var(--white); letter-spacing:.04em; display:none; } .pp-hot.show{ display:block; } .pp-signals{ list-style:none; } .pp-signals li{ font-size:12px; color:var(--off); padding:7px 0; border-bottom:1px solid var(--line2); display:flex; justify-content:space-between; gap:12px; } .pp-signals li:last-child{ border-bottom:none; } .pp-signals .sv{ color:var(--warm); font-variant-numeric:tabular-nums; white-space:nowrap; } .pp-aff{ display:flex; flex-direction:column; gap:8px; } .pp-affrow{ display:flex; align-items:center; gap:10px; font-size:11px; color:var(--warm); } .pp-affrow .an{ width:92px; flex:0 0 auto; } .pp-affrow .at{ flex:1; height:6px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; } .pp-affrow .af{ display:block; height:100%; background:var(--grey); border-radius:3px; transition:width .4s; } .pp-affrow.lead .af{ background:var(--ember); } .pp-affrow.lead .an{ color:var(--white); } .pp-next{ border:1px dashed var(--line); border-radius:4px; padding:13px 15px; font-size:12.5px; color:var(--off); line-height:1.45; } .pp-next b{ color:var(--ember); } .pp-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; } .pp-reset{ background:none; border:1px solid var(--line); border-radius:3px; color:var(--warm); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; } .pp-reset:hover{ border-color:var(--white); color:var(--white); } .pp-note{ font-size:9.5px; color:var(--grey); font-style:italic; } /* ---------- booking modal ---------- */ .bk-overlay{ position:fixed; inset:0; z-index:100; background:rgba(7,7,7,.82); display:none; align-items:center; justify-content:center; padding:20px; } .bk-overlay.open{ display:flex; } .bk-modal{ position:relative; width:min(440px,100%); max-height:min(88vh,700px); overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:36px 32px 26px; } .bk-x{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--warm); font-size:20px; line-height:1; padding:4px 6px; } .bk-x:hover{ color:var(--white); } .bk-kicker{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember); margin-bottom:14px; } .bk-modal h3{ font-size:clamp(24px,3vw,32px); margin-bottom:12px; } .bk-lead{ font-size:13.5px; color:var(--warm); line-height:1.55; margin-bottom:22px; } .bk-field{ display:block; margin-bottom:14px; } .bk-field span{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin-bottom:7px; } .bk-field input{ width:100%; background:var(--black2); border:1px solid var(--line2); border-radius:4px; padding:13px 14px; font-family:inherit; font-size:14px; color:var(--white); outline:none; transition:border-color .15s; } .bk-field input::placeholder{ color:var(--grey); opacity:.7; } .bk-field input:focus{ border-color:rgba(204,202,187,.6); } .bk-field input.err{ border-color:rgba(196,90,90,.7); } .bk-lab{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin:20px 0 10px; } .bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .bk-month{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--white); font-weight:700; } .bk-nav{ background:var(--black2); border:1px solid var(--line2); border-radius:3px; color:var(--off); width:30px; height:30px; font-size:16px; line-height:1; transition:border-color .15s,color .15s; } .bk-nav:hover:not([disabled]){ border-color:var(--line); color:var(--white); } .bk-nav[disabled]{ opacity:.3; cursor:default; } .bk-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; } .bk-dow span{ text-align:center; font-size:9px; letter-spacing:.1em; color:var(--grey); text-transform:uppercase; padding:4px 0; } .bk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .bk-day{ height:38px; display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--grey); border-radius:3px; border:1px solid transparent; background:none; font-variant-numeric:tabular-nums; } .bk-day.pad{ visibility:hidden; } .bk-day.dis{ opacity:.35; cursor:default; } .bk-day.av{ color:var(--white); background:var(--black2); border-color:var(--line2); cursor:pointer; transition:border-color .15s; } .bk-day.av:hover{ border-color:var(--ember); } .bk-day.on{ background:var(--ember); border-color:var(--ember); color:var(--midblack); font-weight:700; } .bk-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .bk-slot{ background:var(--black2); border:1px solid var(--line2); border-radius:3px; padding:11px 0; font-size:12.5px; color:var(--off); text-align:center; transition:border-color .15s,color .15s; } .bk-slot:hover{ border-color:var(--ember); color:var(--white); } .bk-slotline{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--off); margin-bottom:20px; padding:12px 14px; background:var(--black2); border:1px solid var(--line2); border-radius:4px; } .bk-change{ background:none; border:none; color:var(--ember); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; flex:0 0 auto; } .bk-change:hover{ text-decoration:underline; } .bk-submit{ display:block; width:100%; margin-top:24px; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:16px; font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:filter .15s; } .bk-submit:hover{ filter:brightness(1.08); } .bk-note{ margin-top:14px; font-size:11px; color:var(--grey); text-align:center; font-style:italic; } .bk-done{ text-align:center; padding:10px 0 6px; } .bk-check{ display:block; width:14px; height:26px; border-right:2px solid var(--ember); border-bottom:2px solid var(--ember); transform:rotate(45deg); margin:6px auto 26px; } .bk-done .bk-lead{ margin-bottom:26px; } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:880px){ .split{ grid-template-columns:1fr; gap:26px; } .portrait{ max-width:340px; max-height:46vh; } .territory-wrap{ grid-template-columns:1fr; gap:24px; } .formats{ grid-template-columns:1fr; } .format-card.open .fdetail{ max-height:420px; } .numbers-grid{ grid-template-columns:1fr 1fr; } .roi-out{ grid-template-columns:1fr; gap:18px; } .includes-grid{ grid-template-columns:1fr 1fr; } .pillars{ grid-template-columns:1fr; } .offerings{ grid-template-columns:1fr; } .support-split{ grid-template-columns:1fr; } .support-split .video-ph{ aspect-ratio:16/9; min-height:0; } .psteps{ grid-template-columns:1fr 1fr; } .pl-track{ grid-template-columns:repeat(3,1fr); gap:28px 0; } .pl-track::before{ display:none; } .hdr .meta{ font-size:9px; letter-spacing:.14em; } } @media(max-width:600px){ :root{ --gutter:20px; --sectionpad:clamp(72px,10vh,110px); } .hdr{ padding:14px 16px; } .hdr img{ height:13px; } #hero .wordmark{ height:24px; } #hero h1{ font-size:38px; } /* the band stacks on a phone, which flips what align-items controls from the vertical to the horizontal. #standard and #state both set it to flex-start for the desktop row, so without this the figures sit hard left on mobile instead of on the centre line. */ .stats{ flex-direction:column; gap:30px; align-items:center; } #standard .stats, #state .stats{ align-items:center; } .stat-div{ display:none; } .numbers-grid{ grid-template-columns:1fr 1fr; gap:12px; } .includes-grid{ grid-template-columns:1fr; } .psteps{ grid-template-columns:1fr; } .pl-track{ grid-template-columns:1fr; gap:22px; } .streams{ grid-template-columns:1fr; } .video-ph .vph-play{ width:54px; height:54px; } .profile-panel{ width:calc(100vw - 28px); right:14px; bottom:14px; max-height:82vh; } .profile-toggle{ right:14px; bottom:14px; } } /* ============================================================ V2 ADDITIONS (full borders or none, never a one-sided accent) ============================================================ */ /* ----- interactive territory explorer ----- */ #tx-root{ display:block; margin-top:34px; } .tx{ margin-top:36px; } .tx-crumb{ display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); margin-bottom:22px; flex-wrap:wrap; } .tx-crumb button{ background:none; border:none; color:var(--warm); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; padding:0; } .tx-crumb button:hover{ color:var(--white); } .tx-crumb .sep{ opacity:.45; } .tx-crumb .cur{ color:var(--ember); } .tx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .tx-card{ border:1px solid var(--line); border-radius:5px; padding:20px 18px; background:rgba(255,255,255,.012); cursor:pointer; transition:border-color .18s, background .18s; text-align:left; } .tx-card:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.02); } .tx-card .tc-name{ font-size:16px; color:var(--white); font-weight:700; line-height:1.2; } .tx-card .tc-meta{ font-size:11.5px; color:var(--grey); margin-top:9px; letter-spacing:.03em; } .tx-card .tc-open{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); margin-top:13px; } .tx-list{ display:flex; flex-direction:column; gap:14px; } .tx-territory{ border:1px solid var(--line); border-radius:5px; padding:20px 22px; background:rgba(255,255,255,.012); } .tx-terr-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; } .tx-terr-name{ font-size:18px; color:var(--white); font-weight:700; } .tx-terr-status{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--line); border-radius:3px; color:var(--warm); white-space:nowrap; } .tx-terr-status.open{ color:var(--ember); border-color:rgba(204,202,187,.4); } .tx-terr-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; } .tx-demo-toggle{ background:none; border:1px solid var(--line); border-radius:3px; color:var(--off); font-size:12px; letter-spacing:.05em; padding:10px 15px; cursor:pointer; transition:border-color .18s, color .18s; } .tx-demo-toggle:hover{ border-color:var(--white); color:var(--white); } .tx-demo{ max-height:0; overflow:hidden; transition:max-height .38s ease, margin .38s ease; } .tx-territory.open .tx-demo{ max-height:420px; margin-top:18px; } .tx-demo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:4px; overflow:hidden; } .tx-demo-row{ background:var(--black); padding:13px 14px; } .tx-demo-row .dl{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); opacity:.85; } .tx-demo-row .dv{ font-size:15px; color:var(--white); font-weight:600; margin-top:6px; line-height:1.1; } .tx-fit{ font-size:12.5px; color:var(--warm); margin-top:14px; line-height:1.5; } .tx-register{ background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:11px 20px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .15s; } .tx-register:hover{ filter:brightness(1.08); transform:translateY(-1px); } .tx-register:disabled{ background:var(--panel2); color:var(--warm); cursor:default; transform:none; } .tx-flag{ font-size:11px; color:var(--grey); opacity:.75; font-style:italic; margin-top:20px; } /* ----- avatar rails: full-bleed horizontal slides, deck-style edge arrows ----- */ .rail-section{ padding:0; } /* full-bleed: the slide carries its own gutter */ .rail{ position:relative; overflow:hidden; } .rail-viewport{ overflow:hidden; } .rail-track{ display:flex; transition:transform .55s cubic-bezier(.5,.05,.2,1); will-change:transform; } .rail-slide{ flex:0 0 100%; min-width:100%; min-height:clamp(520px,84svh,900px); display:flex; align-items:center; } .rail-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:96px var(--gutter) 112px; } .rail-slide .rs-kick{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); margin-bottom:18px; } .rail-slide .rs-kick b{ color:var(--ember); font-weight:700; } .rail-slide h3{ font-size:clamp(26px,4vw,52px); margin-bottom:18px; max-width:20ch; } .rail-slide .rs-body{ font-size:clamp(16px,1.55vw,20px); line-height:1.6; font-weight:300; color:var(--off); max-width:60ch; text-wrap:pretty; } .rail-slide .rs-body strong{ color:var(--white); font-weight:700; } .rail-slide .rs-points{ list-style:none; margin-top:22px; max-width:60ch; } .rail-slide .rs-points li{ font-size:14px; color:var(--warm); padding:11px 0; border-bottom:1px solid var(--line2); } .rail-slide .rs-points li:last-child{ border-bottom:none; } .rail-slide .rs-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; background:var(--ember); color:var(--midblack); border:none; border-radius:3px; padding:15px 26px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .15s; } .rail-slide .rs-cta::after{ content:'\2192'; } .rail-slide .rs-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); } .rail-slide .rs-cta:disabled{ background:var(--panel2); color:var(--warm); transform:none; } .rail-proof{ border:1px solid var(--line); border-radius:6px; padding:24px; background:rgba(255,255,255,.012); max-width:60ch; } .rail-proof .rp-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:13px; } .rail-proof .rp-q{ font-size:clamp(17px,1.9vw,22px); color:var(--white); font-weight:300; line-height:1.45; } .rail-proof .rp-a{ font-size:12px; color:var(--warm); margin-top:15px; } /* screen-edge arrows, only on screen while the rail is */ .rail-edge{ position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:rgba(10,10,10,.5); color:var(--off); font-size:22px; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(6px); transition:border-color .18s, color .18s, opacity .18s; } .rail-edge:hover{ border-color:var(--white); color:var(--white); } .rail-edge:disabled{ opacity:.16; cursor:default; } .rail-edge.prev{ left:18px; } .rail-edge.next{ right:18px; } .rail-foot{ position:absolute; bottom:30px; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:16px; z-index:20; pointer-events:none; } .rail-foot .rn-dots{ display:flex; gap:8px; pointer-events:auto; } .rail-foot .rn-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); border:none; padding:0; cursor:pointer; transition:background .2s, transform .2s; } .rail-foot .rn-dot.on{ background:var(--ember); transform:scale(1.3); } .rail-foot .rn-count{ font-size:11px; letter-spacing:.16em; color:var(--warm); font-variant-numeric:tabular-nums; pointer-events:auto; } @media (prefers-reduced-motion:reduce){ .rail-track{ transition:none; } } @media(max-width:880px){ .tx-grid{ grid-template-columns:1fr 1fr; } .tx-demo-grid{ grid-template-columns:1fr; } .tx-territory.open .tx-demo{ max-height:1200px; } /* stacked demo grid is far taller; don't clip the fit line */ .rail-edge{ width:42px; height:42px; font-size:18px; } .rail-edge.prev{ left:8px; } .rail-edge.next{ right:8px; } } @media(max-width:600px){ .tx-grid{ grid-template-columns:1fr; } .tx-terr-head{ flex-direction:column; gap:10px; } .rail-slide{ min-height:clamp(480px,80svh,720px); } .rail-inner{ padding:84px var(--gutter) 92px; } .rail-edge{ display:none; } /* mobile: swipe + dots */ .rail-foot{ bottom:22px; } } /* ----- territory intent (soft framing: see my area / compare) ----- */ .tx-intent{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; } .tx-int-btn{ border:1px solid var(--line); border-radius:3px; padding:11px 18px; font-size:13px; color:var(--off); background:rgba(255,255,255,.015); transition:border-color .18s, color .18s, background .18s; } .tx-int-btn:hover{ border-color:rgba(255,255,255,.35); } .tx-int-btn.on{ border-color:var(--ember); color:var(--white); background:rgba(204,202,187,.1); } /* ----- ROI configurator (inputs that quietly discriminate) ----- */ .roi-config{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:18px; } .roi-config .cfg-q{ font-size:12.5px; color:var(--warm); letter-spacing:.03em; margin-bottom:10px; } .roi-config .cfg-opts{ display:flex; gap:10px; flex-wrap:wrap; } .roi-config .cfg-echo{ font-size:12.5px; color:var(--off); font-style:italic; line-height:1.5; min-height:1.2em; } /* ----- objection deck (which question they open is the signal) ----- */ .qdeck{ display:flex; flex-direction:column; gap:12px; margin-top:34px; } .qcard{ border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.012); overflow:hidden; transition:border-color .2s; } .qcard.open{ border-color:rgba(204,202,187,.45); background:linear-gradient(180deg, rgba(204,202,187,.05), rgba(255,255,255,.008)); } .qhead{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; background:none; border:none; text-align:left; padding:20px 22px; color:var(--white); } .qhead .qq{ font-size:15px; font-weight:600; line-height:1.4; } .qhead .qx{ font-family:'Acier Out'; font-size:22px; line-height:1; color:var(--warm); flex:0 0 auto; transition:transform .28s ease, color .2s; } .qcard.open .qhead .qx{ transform:rotate(45deg); color:var(--ember); } .qbody{ max-height:0; overflow:hidden; transition:max-height .4s ease; } .qcard.open .qbody{ max-height:360px; } .qbody p{ font-size:13.5px; color:var(--warm); line-height:1.65; padding:0 22px 22px; max-width:74ch; } /* ----- live profile: territory interest tracker ----- */ .pp-terr{ display:flex; flex-direction:column; gap:9px; } .pp-terr-row{ display:flex; justify-content:space-between; gap:12px; font-size:12px; } .pp-terr-row .ptl{ color:var(--warm); white-space:nowrap; } .pp-terr-row .ptv{ color:var(--off); text-align:right; } .pp-terr-row.reg .ptv{ color:var(--ember); } /* ----- format swipe carousel (mobile) ----- app.js builds these cards from the desktop table, so there is one source of truth; CSS just hides the table and shows the carousel on phones. */ .fmt-cards{ display:none; } .fmt-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter) 8px; } .fmt-track::-webkit-scrollbar{ height:0; } .fmt-card{ flex:0 0 80%; scroll-snap-align:start; border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:rgba(255,255,255,.012); } .fmt-card.feat{ border-color:rgba(204,202,187,.55); background:linear-gradient(180deg, rgba(204,202,187,.07), rgba(255,255,255,.008)); } .fmt-card .fc-top{ display:flex; justify-content:space-between; align-items:center; } .fmt-card .fc-n{ font-family:'Acier Out'; font-size:12px; color:var(--warm); opacity:.6; } .fmt-card .fc-sz{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); } .fmt-card.feat .fc-sz{ color:var(--ember); } .fmt-card .fc-name{ font-family:'Acier',sans-serif; font-size:30px; color:var(--white); text-transform:uppercase; line-height:1; margin:14px 0 8px; } .fmt-card .fc-ess{ font-size:13.5px; color:var(--off); font-weight:500; } .fmt-card.feat .fc-ess{ color:var(--white); } .fmt-card .fc-specs{ margin-top:16px; border-top:1px solid var(--line2); } .fmt-card .fc-row{ padding:10px 0; border-bottom:1px solid var(--line2); } .fmt-card .fc-row:last-child{ border-bottom:none; } .fmt-card .fc-row dt{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--warm); opacity:.8; } .fmt-card .fc-row dd{ font-size:13.5px; color:var(--off); margin-top:4px; } .fmt-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; } .fmt-dots{ display:flex; gap:7px; } .fmt-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); display:block; transition:background .2s, transform .2s; } .fmt-dots i.on{ background:var(--ember); transform:scale(1.25); } .fmt-hint{ font-size:11px; letter-spacing:.04em; color:var(--warm); opacity:.8; } /* ============================================================ MOBILE POLISH (phones — layered after the base responsive blocks so these win on the cascade; desktop stays untouched) ============================================================ */ @media(max-width:600px){ /* ---- format comparison: the table side-scrolls below 660px, so on phones hide it and show the swipe carousel (built from the table by app.js) ---- */ .format-table-wrap{ overflow-x:visible; } .format-table{ display:none; } .fmt-cards{ display:block; } /* ---- the path: rebuild the collapsed grid as a true vertical timeline, with a connecting spine the dots sit on (it reads as a journey, not a row of loose circles). ---- */ .pathline{ margin-top:40px; } .pl-track{ grid-template-columns:1fr; gap:0; position:relative; } .pl-track::before{ display:block; content:''; left:6px; top:6px; bottom:6px; right:auto; width:1px; height:auto; background:linear-gradient(180deg,transparent,var(--line) 5%,var(--line) 95%,transparent); } .pl-node{ position:relative; padding:0 0 28px 30px; } .pl-node:last-child{ padding-bottom:0; } .pl-dot{ position:absolute; left:0; top:3px; margin-bottom:0; } /* ---- streams: tighten the tall, half-empty Move/Sweat/Perform cards ---- */ .stream{ min-height:0; padding:24px 22px; } .stream .sh{ margin:16px 0 12px; } /* ---- accordion: headroom so a long answer never clips on a narrow column ---- */ .qcard.open .qbody{ max-height:600px; } } /* ============================================================ PAGE ONE: the enquiry form. Ported from the funnel pages (active/franchise-funnel-concept/shared.css) so the two projects stay one system. Runs on the OFFICIAL palette: Mid Black / Chalk White / Beige. Flat controls only, appearance:none with a drawn caret, never a native 3D select. ============================================================ */ .gate{ border:1px solid rgba(211,212,211,.22); background:var(--midblack); padding:clamp(26px,4.5vw,50px); margin-top:44px; } .gate .unlocks{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; margin:0 0 6px; max-width:760px; } .gate .unlocks span{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--chalk); line-height:1.45; } .gate .unlocks span::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:3px; border-right:1px solid var(--beige); border-bottom:1px solid var(--beige); transform:rotate(45deg); } .form{ margin-top:34px; } .frow{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px; } .frow.three{ grid-template-columns:repeat(3,1fr); } .ffield{ display:block; } .ffield span{ display:block; font-size:14px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--chalk); opacity:1; margin-bottom:8px; } .ffield input, .ffield select{ width:100%; background:var(--field); border:1px solid rgba(211,212,211,.34); border-radius:0; padding:15px 16px; font-family:inherit; font-size:17px; font-weight:400; color:var(--white); outline:none; transition:border-color .15s, background .15s; appearance:none; -webkit-appearance:none; } .ffield select{ background-image:linear-gradient(45deg, transparent 50%, var(--chalk) 50%), linear-gradient(135deg, var(--chalk) 50%, transparent 50%); background-position:calc(100% - 21px) 52%, calc(100% - 16px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:44px; } .ffield input::placeholder{ color:rgba(211,212,211,.45); opacity:1; } .ffield input:focus, .ffield select:focus{ border-color:var(--chalk); } .ffield input.err, .ffield select.err{ border-color:var(--beige); background:rgba(204,202,187,.06); } .flab{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--beige); margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(211,212,211,.22); } .form > .flab:first-child{ margin-top:0; } .sorter{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .sorter.err{ outline:1px solid var(--beige); outline-offset:6px; } .sopt{ text-align:left; background:var(--field); border:1px solid rgba(211,212,211,.34); border-radius:0; padding:16px 17px; font-size:15.5px; color:var(--chalk); line-height:1.45; transition:border-color .15s, background .15s, color .15s; } .sopt:hover{ border-color:var(--chalk); } .sopt.on{ border-color:var(--chalk); background:var(--chalk); color:var(--midblack); font-weight:600; } .seg{ display:flex; gap:10px; } .seg button{ flex:1; background:var(--field); border:1px solid rgba(211,212,211,.34); border-radius:0; padding:15px 0; font-size:15px; color:var(--chalk); transition:border-color .15s, color .15s, background .15s; } .seg button:hover{ border-color:var(--chalk); } .seg button.on{ border-color:var(--chalk); background:var(--chalk); color:var(--midblack); font-weight:600; } .form .cta-btn{ width:100%; justify-content:center; margin-top:30px; background:var(--chalk); color:var(--midblack); border-radius:0; font-size:15px; padding:19px 30px; } .form .cta-btn:hover{ filter:brightness(1.06); } .form .cta-btn:disabled{ opacity:.7; cursor:default; transform:none; } .fnote{ margin-top:14px; font-size:12px; color:rgba(211,212,211,.6); text-align:center; } /* Error message: the palette has no semantic red, so this reads as a full bordered beige note, never a one-sided bar and never an invented colour. */ .ferr{ margin-top:18px; border:1px solid var(--beige); background:rgba(204,202,187,.08); color:var(--chalk); padding:12px 14px; font-size:13px; line-height:1.5; } /* Mission band runs four across, and one label is much longer than the rest, so cap the label width and let it wrap instead of stretching its column. */ #standard .stats{ align-items:flex-start; } #standard .stat{ padding:6px clamp(18px,3.6vw,50px); } #standard .stat .l{ max-width:14ch; margin-inline:auto; } #standard .stat-div{ height:52px; margin-top:6px; } /* On a phone the band goes two by two rather than one under the other: Countries and Territories on the first line, the revenue and member figures on the second. The dividers are display:none at this width, so the four figures are the only grid items and they fall 2x2 on their own. This has to sit AFTER the #standard rules above: a media query carries no extra specificity, so the same selector earlier in the file would lose to them regardless of the breakpoint. The figure size comes down with it. At the desktop minimum of 46px, "10,000+" is wider than half a 390px screen and would push the band off the side. */ @media(max-width:600px){ #standard .stats{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4.5vh,34px) 8px; align-items:start; justify-items:center; } #standard .stat{ padding:0; } #standard .stat .v{ font-size:clamp(30px,9vw,44px); } #standard .stat .l{ font-size:10.5px; letter-spacing:.14em; margin-top:11px; } /* The pairs, per Macca: the countries and the return on the first line, the territories and the members on the second. Done with order rather than by moving the markup, so the desktop row keeps reading 7 / 70+ / +84% / 10,000+ from left to right. The stats are nth-child 1,3,5,7; the even children are the dividers, which are display:none at this width. */ #standard .stat:nth-child(1){ order:1; } /* 7 countries */ #standard .stat:nth-child(5){ order:2; } /* +84% return */ #standard .stat:nth-child(3){ order:3; } /* 70+ territories */ #standard .stat:nth-child(7){ order:4; } /* 10,000+ members */ } /* ============================================================ PAGE TWO hero: the nameplate. Their state on a plate over a REVL shopfront, like the sign is up. Centred deliberately, because page one is left aligned the whole way and the break is what tells them this is a different page. ============================================================ */ /* The plate sits low in the frame rather than dead centre. The shopfront photo scrims to near black over its bottom third, so centring the content left a long dead run of black under the scroll cue that read as a gap twice its real size. Sitting the content down into that dark area fills it and brings the founder story up to meet it. Horizontal centring, which is what marks this page as the one after the form, is untouched. */ #hero.nameplate{ justify-content:flex-end; min-height:90svh; padding-bottom:clamp(52px,7.5vh,96px); } #hero.nameplate .scrim{ background: linear-gradient(180deg, rgba(10,10,10,.52) 0%, rgba(10,10,10,.34) 40%, rgba(10,10,10,.95) 100%); } .np-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; } #hero.nameplate .enquiry-note{ margin-bottom:26px; } .np-plate{ border:1px solid rgba(211,212,211,.5); background:rgba(10,10,10,.5); padding:clamp(24px,3.4vw,40px) clamp(28px,6vw,84px); max-width:100%; } .np-plate .np-state{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:clamp(26px,5.2vw,66px); line-height:1; letter-spacing:.02em; font-weight:400; margin-bottom:0; text-wrap:balance; } /* The plate carries their state's figures, then the growth line, then their name over the label between two rules (concept 3 from /hero-plate/). The old "your state today" band below the hero is gone, so this is the only place those four figures appear. */ .np-figs{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:26px; } .np-figs .npf{ padding:0 clamp(14px,2.4vw,30px); text-align:center; } .np-figs .npf + .npf{ border-left:1px solid rgba(211,212,211,.28); } .np-figs .v{ font-family:'Acier',sans-serif; color:var(--white); line-height:1; font-size:clamp(19px,2.5vw,30px); font-variant-numeric:tabular-nums; } .np-figs .l{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm); margin-top:9px; } .np-grow{ margin-top:28px; font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:clamp(15px,1.9vw,23px); line-height:1.15; letter-spacing:.01em; text-wrap:balance; } /* an international enquiry has no state figures, so state.js hides the row and the growth line; both stay in the DOM, so this margin still lands */ .np-rule{ height:1px; background:rgba(211,212,211,.28); } .np-grow + .np-rule{ margin-top:26px; } .np-id{ padding:14px 0; } .np-name{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--white); font-weight:700; line-height:1.6; } .np-role{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk); line-height:1.6; opacity:.85; margin-top:2px; } .np-flag{ margin-top:16px; font-size:10.5px; color:var(--grey); font-style:italic; opacity:.85; } /* the sub line takes the same treatment as the role line inside the plate: small, spaced, upper case. It is a label under a sign, not a paragraph. */ /* px not ch: letter-spacing is not counted in a ch, so a ch based cap breaks the line early and orphans the last two words */ .np-sub{ margin-top:18px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk); font-weight:400; line-height:1.9; max-width:min(100%,660px); text-wrap:pretty; } #hero.nameplate .scrollcue{ margin-top:16px; } /* The hero already ends on a near black photo, so the founder story does not need a full section's worth of padding on top of it as well. */ #founders{ padding-top:clamp(60px,8vh,100px); } @media (max-width:560px){ .np-sub{ font-size:10px; letter-spacing:.14em; } } /* The plate is most of a phone screen on its own, so sitting it hard at the base leaves the whole top of the frame empty. On a phone it keeps roughly the height it always had and only the run of black underneath comes out. */ @media (max-width:620px){ #hero.nameplate{ padding-bottom:clamp(72px,11vh,110px); } } /* two by two on a phone. Grid rather than flex so both rows are the same height and the dividers line up, which they do not when a label wraps. */ @media (max-width:620px){ .np-figs{ display:grid; grid-template-columns:1fr 1fr; } .np-figs .npf{ padding:14px 8px; } .np-figs .npf + .npf{ border-left:none; } .np-figs .npf:nth-child(2n){ border-left:1px solid rgba(211,212,211,.28); } .np-figs .npf:nth-child(n+3){ border-top:1px solid rgba(211,212,211,.28); } } @media (max-width:560px){ .np-plate{ padding:22px 18px; } .np-name, .np-role{ letter-spacing:.14em; } } /* ============================================================ PAGE TWO: the state band + the inline calendar. ============================================================ */ /* The numbers lead and the sentence lands under them, so the data does the talking and the line just names what you are looking at. Top aligned, because some labels run to two lines and centring them would drop the numbers off a shared baseline. */ #state .stats{ align-items:flex-start; margin-top:34px; } #state .stat{ padding:6px clamp(16px,3vw,44px); } #state .stat .v{ font-size:clamp(32px,4.6vw,62px); } #state .stat .l{ margin-top:12px; font-size:10.5px; letter-spacing:.14em; max-width:15ch; margin-inline:auto; } #state .stat-div{ height:58px; } /* the summary line sits under the numbers, deliberately smaller than them */ #state h2{ font-size:clamp(20px,3.2vw,38px); margin-top:44px; } #state h2 span{ color:inherit; } /* Book a call: the section reads left, the calendar sits right, so the calendar never floats alone in half an empty row. Mirrors .support-split. */ .book-split{ display:grid; grid-template-columns:1fr minmax(0,460px); gap:clamp(30px,4vw,60px); align-items:start; } .book-intro .lead{ max-width:44ch; } .book-expect{ margin-top:34px; display:flex; flex-direction:column; gap:1px; background:var(--line2); border:1px solid var(--line2); } .book-expect .be{ background:var(--black); padding:15px 18px; font-size:13.5px; color:var(--warm); line-height:1.5; display:flex; gap:13px; align-items:flex-start; } .book-expect .be::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:4px; border-right:1px solid var(--ember); border-bottom:1px solid var(--ember); transform:rotate(45deg); } /* The calendar sits open in the page: no overlay, nothing to click first. */ .bk-inline{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:clamp(24px,3.4vw,34px); } .bk-inline h3{ font-size:clamp(20px,2.4vw,26px); margin-bottom:12px; } .bk-inline .bk-note{ margin-bottom:0; } .bk-inline .bk-field:first-of-type{ margin-top:4px; } @media (max-width:900px){ .book-split{ grid-template-columns:1fr; } .bk-inline{ margin-top:8px; } } @media (max-width:820px){ .frow, .frow.three{ grid-template-columns:1fr; } .sorter{ grid-template-columns:1fr; } .gate .unlocks{ grid-template-columns:1fr; } } /* ========================================================================== PAGE TWO, chosen section designs (round 2026-07-29). Concept numbers refer to /section-concepts/, which is the review page these were picked from. ========================================================================== */ /* [hidden] has to beat the display rules below it: the UA sheet's [hidden]{display:none} loses to any class selector that sets display. */ [hidden]{ display:none !important; } /* ---- Founder story, concept 2: story left, film right ------------------- The film is real, a 42 second cut of REVL's own brand story film, so the slot holds a poster button until it is clicked and a