/* Theme Name: Race Space Theme URI: https://race-space.com Author: Race Space Description: Hand-coded custom theme for Race Space, built from the RaceSpace Figma. Classic template hierarchy, mobile-first, no page builder. Version: 0.26.4 Requires at least: 6.4 Requires PHP: 7.4 License: Proprietary Text Domain: race-space Tags: custom */ /* ========================================================================= 1. FONTS Body and headings: Inter, self-hosted (OFL) — the woff2 files below are the real Inter, declared under their own name so the stack reads honestly in DevTools. A @font-face src of url() always wins over a font of the same name installed on the visitor's machine, so rendering stays identical everywhere. Display: Acumin VF Condensed Bold Italic — confirmed from the Figma inspector. Team roles use a second cut, Acumin Pro ExtraCondensed Semibold Italic. Acumin Pro Condensed (Adobe, v1.011) is now self-hosted in the two faces below, supplied by Race Space. Two caveats, both deliberate: - The supplied pack is roman only — there is no italic cut in it. The display rules ask for italic, so the browser synthesises the oblique. Measured against HOMEPAGE.png the result is within 0.5% on width and the slant matches, so this is the right trade against shipping upright. - The pack is Condensed (usWidthClass 3), not ExtraCondensed, so the ten team roles render very slightly wider than the design. The stack still names the Adobe Fonts families first: paste a kit ID into Customizer -> Race Space -> Custom scripts and the real italic and the ExtraCondensed cut take over from these automatically, with no other change. ========================================================================= */ /* font-stretch 75% is the font's own usWidthClass, so `font-stretch:condensed` and the extra-condensed request both resolve here. */ @font-face{font-family:"Acumin Pro Condensed";src:url(assets/fonts/acumin-pro-cond-700-normal.woff2)format("woff2");font-weight:700;font-style:normal;font-stretch:75%;font-display:swap} @font-face{font-family:"Acumin Pro Condensed";src:url(assets/fonts/acumin-pro-cond-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-stretch:75%;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-500-normal.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-700-normal.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-700-italic.woff2)format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-800-normal.woff2)format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-800-italic.woff2)format("woff2");font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-900-normal.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url(assets/fonts/inter-900-italic.woff2)format("woff2");font-weight:900;font-style:italic;font-display:swap} /* ========================================================================= 2. TOKENS ========================================================================= */ :root{ /* colour */ --ink:#262324; --ink-2:#252525; --ink-3:#2A2A2A; --crimson:#ED1750; --crimson-deep:#D21044; --crimson-bright:#FF2E64; /* Sampled off the flat Platform bands in PLATFORM.jpg: the brand teal is a saturated cyan, not the softer #54C4C9 (that shade only ever shows up as the 16% watermark tint and as logo antialiasing). */ --teal:#00C8CB; --teal-soft:#54C4C9; --teal-nav:#66AFAF; --lime:#A7C239; --paper:#F4F4F4; --paper-2:#F5F5F5; --grey:#B7B7B7; --grey-2:#D8D8D8; --white:#fff; --heading:#F4F4F4; /* headings are off-white in the design, not pure white */ --hair-light:rgba(255,255,255,.32); --hair-dark:rgba(0,0,0,.14); /* type */ --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:"acumin-variable","Acumin Variable Concept","Acumin Pro Condensed","Inter",system-ui,sans-serif; --font-display-xc:"acumin-pro-extra-condensed","Acumin Pro ExtraCondensed",var(--font-display); /* rhythm */ /* Measured from the Figma hairlines: content runs x=210 -> x=1280 in a 1512 frame — 1070px, 70.8% of the viewport. Holding that ratio keeps the proportions of the design on wider screens, up to a sane cap. Section heads on the inner pages measure 1093; the homepage client strip is the one outlier at 1070 and keeps its own width below. */ --wrap:min(1420px, max(72.3vw, min(92vw, 1093px))); --wrap-wide:min(1560px, max(86.8vw, min(94vw, 1312px))); /* nav: x=100 -> 1412 */ --wrap-mid:min(1480px, max(81.5vw, min(94vw, 1232px))); /* footer: x=166 -> 1398 */ --gutter:clamp(20px,5vw,56px); --band-y:clamp(56px,9vw,124px); /* measured on PLATFORM.jpg: the teal band's top corner arc is 85px at 1512 */ --radius-band:clamp(24px,5.6vw,85px); --radius-card:18px; --radius-btn:10px; /* measured: 171x44 button, 10px radius — not a pill */ /* header 15px of air above and below the tallest thing in the bar — the burger on small screens, the Race Space lockup from 900px up. --header-h is derived from that rather than fixed, because every hero offsets its top padding by this token. */ --header-rule:15px; --header-h:calc(max(clamp(28px,4.23vw,64px), 34px) + var(--header-rule) * 2); } @media (min-width:900px){:root{--header-h:calc(clamp(28px,4.23vw,64px) + var(--header-rule) * 2)}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--white); font-family:var(--font-sans);font-weight:400;font-size:1rem;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} ::selection{background:var(--crimson);color:#fff} /* focus — visible everywhere, never removed */ :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px} .rs-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--white);color:var(--ink);padding:.8em 1.2em;font-weight:700} .rs-skip:focus{left:8px;top:8px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ========================================================================= 3. TYPE SCALE ========================================================================= */ h1,h2,h3,h4{margin:0 0 .6em;font-weight:700;line-height:1.02;letter-spacing:-.015em;color:var(--heading)} h1{font-size:clamp(2.75rem,8.2vw,7.5rem);line-height:.87} h2{font-size:clamp(2rem,5vw,4.25rem);line-height:.92} h3{font-size:clamp(1.35rem,3.4vw,2rem)} h4{font-size:clamp(1.05rem,2vw,1.25rem)} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} /* the recurring "one italic word" emphasis inside headings */ h1 em,h2 em,h3 em,.rs-em{font-style:italic;font-weight:900} /* Measured across HOMEPAGE / ACCELERATOR / PLATFORM: body copy is 20px on a 1512 frame with 24px leading, not the 18px this was clamped to. */ .rs-lede{font-size:clamp(1rem,1.32vw,1.25rem);line-height:1.22;max-width:46ch} .rs-body-sm{font-size:.95rem;line-height:1.6} /* display / kicker face */ .rs-eyebrow,.rs-kicker,.rs-sectitle,.rs-wordmark{ font-family:var(--font-display);font-weight:700;font-style:italic; font-stretch:condensed;font-variation-settings:"wdth" 75; text-transform:uppercase;letter-spacing:0;line-height:1.2; } /* Team roles are the ExtraCondensed Semibold Italic cut. */ .rs-role{ font-family:var(--font-display-xc);font-weight:600;font-style:italic; font-stretch:extra-condensed;font-variation-settings:"wdth" 62.5; text-transform:uppercase;line-height:1.2; } /* Sizes from the Figma inspector: small labels 15px, RESULTS SO FAR / FAQS 40px, section titles and EXPLORE MORE 36px. They were all guessed while the display face was falling back to Inter; with the real Acumin loaded the rendered widths now land within 0.5% of the frame exports. */ .rs-eyebrow{font-size:clamp(.8rem,.99vw,.94rem)} .rs-kicker{font-size:clamp(1.4rem,2.65vw,2.5rem)} .rs-sectitle{font-size:clamp(1.25rem,2.38vw,2.25rem)} /* Figma: 16px. It was .66rem while this fell back to Inter. */ .rs-role{font-size:clamp(.72rem,1.06vw,1rem);color:var(--crimson);letter-spacing:.02em;line-height:1.15;display:block;margin:.15rem 0 .3rem} .rs-caps{text-transform:uppercase;font-weight:700;letter-spacing:.08em;font-size:.78rem} /* ========================================================================= 4. LAYOUT ========================================================================= */ .rs-wrap{width:min(100% - var(--gutter) * 2, var(--wrap));margin-inline:auto;position:relative;z-index:1} .rs-band{padding-block:var(--band-y);position:relative;overflow:hidden} .rs-band--ink{background:var(--ink)} .rs-band--crimson{background:var(--crimson)} .rs-band--teal{background:var(--teal)} .rs-band--paper{background:var(--paper);color:var(--ink)} .rs-r-bottom{border-end-start-radius:var(--radius-band);border-end-end-radius:var(--radius-band)} .rs-r-top{border-start-start-radius:var(--radius-band);border-start-end-radius:var(--radius-band)} .rs-band--paper h2,.rs-band--paper h3{color:var(--ink)} .rs-grid{display:grid;gap:clamp(28px,5vw,64px)} @media (min-width:900px){.rs-2col{grid-template-columns:1fr 1fr;align-items:center}} .rs-hairline{height:1px;background:var(--hair-light);border:0;margin:0} .rs-band--paper .rs-hairline{background:var(--hair-dark)} /* media with a dark scrim, used for every photographic band */ .rs-media-bg{position:absolute;inset:0;z-index:0} .rs-media-bg img,.rs-media-bg video{width:100%;height:100%;object-fit:cover} .rs-media-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,16,.72),rgba(20,14,16,.55) 45%,rgba(20,14,16,.85))} /* Measured against the frame exports: the design's photography is already graded for legibility — the XNRG hero band reads 0.26 mean in Figma and the source file is 0.243, i.e. no overlay at all. Any scrim we add on top is double-darkening, so real images get none. The placeholder scrim above stays for the art-directed empty state. */ .rs-media-bg:not(.rs-ph)::after{content:none} /* media backgrounds always sit behind content */ .rs-media-bg{z-index:0} /* art-direction placeholder, used wherever a real photo is still missing */ .rs-ph{ position:relative;background: repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 14px,transparent 14px 34px), radial-gradient(120% 90% at 20% 0%,#4a2230 0%,#241a1f 55%,#1b1518 100%); } .rs-ph--teal{background: repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,transparent 14px 34px), radial-gradient(120% 90% at 20% 0%,#1d4e52 0%,#1b2a2c 55%,#151d1e 100%); } .rs-ph--grey{background: repeating-linear-gradient(115deg,rgba(0,0,0,.05) 0 14px,transparent 14px 34px), radial-gradient(120% 90% at 20% 0%,#dcdcdc 0%,#c9c9c9 60%,#bcbcbc 100%); } .rs-ph__tag{ position:absolute;inset-block-end:10px;inset-inline-start:12px; font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; color:rgba(255,255,255,.5); } .rs-ph--grey .rs-ph__tag{color:rgba(0,0,0,.42)} /* when a placeholder IS the band background it must stay absolutely positioned */ .rs-media-bg.rs-ph{position:absolute} .rs-ph__tag{max-width:min(70vw,42ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ========================================================================= 5. BUTTONS ========================================================================= */ .rs-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; /* Feedback: the outline buttons read "too thick" — the frames draw the rule at 1.5px, not 2px. */ padding:.63em 1.75em;border-radius:var(--radius-btn);border:1.5px solid transparent; font-weight:700;font-size:clamp(.8rem,1.1vw,1.04rem);letter-spacing:.09em;text-transform:uppercase; line-height:1.15;text-align:center;cursor:pointer;background:none; transition:background-color .2s,color .2s,border-color .2s,transform .2s; } .rs-btn:hover{transform:translateY(-1px)} .rs-btn svg{width:.7em;height:.7em;flex:none} .rs-btn--crimson{border-color:var(--crimson);color:var(--crimson)} .rs-btn--crimson:hover{background:var(--crimson);color:#fff} .rs-btn--crimson-solid{background:var(--crimson);border-color:var(--crimson);color:#fff} .rs-btn--crimson-solid:hover{background:var(--crimson-deep);border-color:var(--crimson-deep)} .rs-btn--lime-solid{background:var(--lime);border-color:var(--lime);color:#262324} .rs-btn--lime-solid:hover{background:#B7D34A;border-color:#B7D34A} .rs-btn--teal{border-color:var(--teal);color:var(--teal)} .rs-btn--teal:hover{background:var(--teal);color:var(--ink)} .rs-btn--teal-solid{background:var(--teal);border-color:var(--teal);color:var(--ink)} .rs-btn--teal-solid:hover{filter:brightness(1.08)} .rs-btn--white{border-color:#fff;color:#fff} .rs-btn--white:hover{background:#fff;color:var(--ink)} .rs-btn--ink-solid{background:var(--ink);border-color:var(--ink);color:#fff} .rs-btn--ink-solid:hover{background:#000;border-color:#000} .rs-btn--block{width:100%} @media (min-width:560px){.rs-btn--block{width:auto}} /* scroll cue */ .rs-scrollcue{display:inline-flex;margin-top:1.6rem;color:var(--crimson);animation:rs-bob 2.4s ease-in-out infinite} .rs-scrollcue--teal{color:var(--teal)} @keyframes rs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* * Marquee scroll. This has to live here, in the always-loaded stylesheet, and * not in pages.css — that is where it used to be, and pages.css is only * enqueued on the Accelerator, Platform, Contact and case-study views (see * rs_needs_pages_css). The homepage client strip therefore asked for an * animation whose keyframes did not exist on that page, which is silent in * CSS: no error, the element simply never moves. That is why the "trusted by" * logos read as a static row. * * The strip duplicates its own children in JS, so the track is exactly twice * its visible content and -50% lands the copy precisely where the original * started — the loop has no seam. */ @keyframes rs-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ========================================================================= 6. LOGO LOCKUPS ========================================================================= */ /* Real brand artwork: the span carries the height, the SVG keeps its ratio. */ .rs-art{display:inline-flex;line-height:0;flex:none} .rs-art>svg{display:block;height:100%;width:auto;max-width:100%} .rs-logo{display:inline-flex;align-items:center;color:#fff} /* header lockup: 227 x 64 in the 1512 frame */ .rs-logo__art{height:clamp(28px,4.23vw,64px)} /* HOMEPAGE.png footer draws the lockup at 551 x 153; held 20% under that. */ .rs-logo--lg .rs-logo__art{height:clamp(42px,8.08vw,122px)} .rs-logo__word{font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(1.05rem,3.2vw,1.4rem);line-height:1} .rs-logo__mark{width:1.85em;height:1.85em;flex:none;color:var(--crimson)} .rs-logo--lg .rs-logo__word{font-size:clamp(1.6rem,5vw,2.75rem)} .rs-sublogo{display:inline-flex;align-items:center;gap:.6em;color:#fff} /* header sub-brand lockup: 51px tall in the frame. The footer row is larger (70px) and overrides this below. */ .rs-sublogo__art{height:clamp(28px,3.37vw,51px)} .rs-sublogo__mark{width:2.1em;height:2.1em;flex:none} .rs-sublogo__text{display:flex;flex-direction:column;line-height:1} .rs-sublogo__over{font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)} .rs-sublogo__wordmark{font-family:var(--font-display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em} .rs-sublogo--accelerator .rs-sublogo__mark{color:var(--crimson)} .rs-sublogo--platform .rs-sublogo__mark{color:var(--teal)} .rs-sublogo--racecheck .rs-sublogo__mark{color:var(--lime)} .rs-band--paper .rs-sublogo,.rs-band--paper .rs-sublogo__over{color:var(--ink)} /* ========================================================================= 7. HEADER + NAV ========================================================================= */ .rs-header{ position:fixed;inset-block-start:0;inset-inline:0;z-index:90; height:var(--header-h);padding-block:var(--header-rule);display:flex;align-items:center; background:transparent;border-block-end:1px solid var(--hair-light); transition:background-color .25s,border-color .25s; } .rs-header.is-scrolled{background:var(--ink);border-block-end-color:rgba(255,255,255,.12)} /* keep clear of the WordPress admin bar for logged-in users */ body.admin-bar .rs-header{top:46px} body.admin-bar .rs-mpanel{top:46px} @media (min-width:783px){body.admin-bar .rs-header,body.admin-bar .rs-mpanel{top:32px}} .rs-header__inner{width:min(100% - var(--gutter) * 2, var(--wrap-wide));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem} .rs-nav{display:none} @media (min-width:1080px){ .rs-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)} .rs-nav__list{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);list-style:none;margin:0;padding:0} .rs-nav__list li{list-style:none} /* HOMEPAGE.png: 15px Inter Bold, uppercase, no tracking (cap height 11px and the rendered string width agree on both counts). */ .rs-nav a{font-size:clamp(.78rem,.98vw,.93rem);font-weight:700;letter-spacing:0;text-transform:uppercase;color:#fff;padding:.4em 0;border-block-end:1px solid transparent;white-space:nowrap} .rs-nav a:hover,.rs-nav a[aria-current="page"]{border-block-end-color:var(--crimson)} .rs-nav--section a:hover{border-block-end-color:#fff} } /* Before the header picks up its solid ink background the links sit straight on the hero photograph, so they carry a shadow to hold their contrast. */ .rs-header:not(.is-scrolled) .rs-nav a, .rs-header:not(.is-scrolled) .rs-logo, .rs-header:not(.is-scrolled) .rs-sublogo{text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35)} .rs-header.is-scrolled .rs-nav a, .rs-header.is-scrolled .rs-logo, .rs-header.is-scrolled .rs-sublogo{text-shadow:none} .rs-nav-cta{display:none} /* HOMEPAGE.png: a 202 x 44 button with the 10px button radius — not a pill — holding the 25 x 23 chevron mark, 10px of gap, then the label. */ @media (min-width:1080px){.rs-nav-cta{ display:inline-flex;align-items:center;gap:clamp(6px,.66vw,10px); background:var(--teal-nav);border-color:var(--teal-nav);color:#fff; border-radius:var(--radius-btn);letter-spacing:0;font-size:clamp(.78rem,.98vw,.93rem); padding:clamp(6px,.56vw,8.5px) clamp(13px,1.32vw,20px) clamp(6px,.56vw,8.5px) clamp(11px,1.06vw,16px); white-space:nowrap;flex:none; } .rs-nav-cta:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}} .rs-nav-cta__icon{height:clamp(16px,1.52vw,23px);width:auto} .rs-nav-cta__icon>svg{height:100%;width:auto;display:block} .rs-mpanel__cta .rs-nav-cta__icon{height:20px} .rs-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer} .rs-burger span{display:block;height:1.5px;background:#fff;border-radius:2px} @media (min-width:1080px){.rs-burger{display:none}} /* mobile panel Paper, not ink. The MOBILE HOME NAV frame draws this as a light panel dropping over the dark page — near-black uppercase items on #F4F4F4, split by hairlines, with the Platform login as an outlined teal pill at the foot. It was built dark-on-dark, which is the one thing about it that did not match the frame. Sizes are off the frame too: the item text box measures 363x24 in a 402px frame, so the type is ~1.125rem (it was .9rem) and the panel's own inline padding is ~20px rather than the 40px --gutter the rest of the phone layout uses — the hairlines are meant to run close to the edges. */ .rs-mpanel{ position:fixed;inset-block-start:0;inset-inline:0;z-index:95; background:var(--paper);color:var(--ink); border-end-start-radius:28px;border-end-end-radius:28px; padding:1rem clamp(18px,5.2vw,22px) 1.75rem; transform:translateY(-102%);transition:transform .32s cubic-bezier(.4,0,.2,1); box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:100svh;overflow-y:auto; } .rs-mpanel.is-open{transform:translateY(0)} /* The rule under the close row runs the full width of the panel in the frame, unlike the item hairlines which stop at the text column — hence the negative margins, which push it back out through the panel's own inline padding. */ .rs-mpanel__top{display:flex;justify-content:flex-end;align-items:center;height:var(--header-h); margin-inline:calc(clamp(18px,5.2vw,22px) * -1);padding-inline:clamp(18px,5.2vw,22px); border-block-end:1px solid rgba(38,35,36,.28)} .rs-mpanel__close{width:34px;height:34px;border:0;background:none;cursor:pointer;color:var(--ink)} .rs-mpanel__list{list-style:none;margin:0;padding:0} .rs-mpanel__list li{list-style:none} .rs-mpanel__list a{display:block;padding:1.05rem 0;font-weight:700;text-transform:uppercase;letter-spacing:0;font-size:clamp(1rem,4.55vw,1.125rem);line-height:1.15;color:var(--ink);border-block-end:1px solid rgba(38,35,36,.28)} .rs-mpanel__list a:hover,.rs-mpanel__list a[aria-current="page"]{color:var(--crimson)} /* Outlined, not filled — the frame gives it a teal keyline and teal text on the paper, matching the desktop nav button rather than a solid pill. */ .rs-mpanel__cta{margin-top:1.5rem} .rs-mpanel__cta .rs-btn{ display:inline-flex;align-items:center;gap:.6em; background:none;border:1.5px solid var(--teal);color:var(--teal); } .rs-mpanel__cta .rs-btn:hover{background:var(--teal);color:var(--paper)} .rs-scrim{position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .rs-scrim.is-open{opacity:1;visibility:visible} body.rs-nav-open{overflow:hidden} /* ========================================================================= 8. HERO ========================================================================= */ .rs-hero{position:relative;display:flex;align-items:stretch;min-height:clamp(560px,94svh,940px);padding-block:calc(var(--header-h) + clamp(30px,3vw,46px)) clamp(24px,2.1vw,32px);overflow:hidden} /* The hero is a column: the headline sits under the header and the client strip is pushed to the foot by an auto margin, so the logos land on the bottom edge whatever the viewport height happens to be. */ .rs-hero > .rs-wrap{display:flex;flex-direction:column;flex:0 1 auto} /* Figma fades the foot of the photograph the whole way down to the ink of the band beneath, so the seam between the two is invisible. */ .rs-hero:not(.rs-hero--center)::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:min(56%,430px);z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgba(38,35,36,.55) 42%,rgba(38,35,36,.88) 74%,var(--ink) 100%)} .rs-hero__grid{display:grid;gap:clamp(24px,5vw,48px);width:100%} @media (min-width:900px){.rs-hero__grid{grid-template-columns:minmax(0,674px) minmax(0,1fr);align-items:end;gap:clamp(24px,3vw,40px)}} .rs-hero h1{margin:0} .rs-hero__aside{text-align:right} @media (min-width:900px){.rs-hero__aside{text-align:left;padding-bottom:.6rem}} .rs-hero__aside p{margin-left:auto;max-width:34ch} @media (min-width:900px){.rs-hero__aside p{margin-left:0}} .rs-hero__aside .rs-btn{margin-top:1.4rem} /* --- homepage hero ------------------------------------------------------- HOMEPAGE.png, 1512 frame: the band runs 0 -> 1293 (85.5vw), the headline's cap line sits 148px below the header hairline, the body/button block starts 133px BELOW the foot of the headline rather than sharing its baseline, and the client strip is pushed to the bottom edge by the auto margin above. Sized off the viewport width, not its height, so the first screen holds the headline alone exactly as the design intends. */ .rs-hero--home{min-height:clamp(600px,85.5vw,1300px);padding-block-start:calc(var(--header-h) + clamp(34px,9.23vw,140px))} /* HOMEPAGE.png carries a deep oxblood wash over the top of the hero — sampled at rgb(55,19,18) off the shadows in that frame. The homepage runs a video rather than a still, and its brightest frames put white nav links on a pale sky at about 2:1, so the wash is doing real work here: it holds the header items and the headline at 5:1 or better whatever frame is on screen, then clears the crowd below. z-index 1 keeps it above the video (which sits at 0) and below .rs-wrap. */ .rs-hero--home::before{ content:"";position:absolute;inset-block-start:0;inset-inline:0; height:min(78%,980px);z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(55,19,18,.68) 0, rgba(55,19,18,.60) calc(var(--header-h) + 1.5rem), rgba(55,19,18,.42) 40%, rgba(55,19,18,.20) 66%, rgba(55,19,18,0) 100%); } @media (min-width:900px){ .rs-hero--home .rs-hero__grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:0} .rs-hero--home .rs-hero__grid h1{max-width:min(100%,700px)} .rs-hero--home .rs-hero__aside{width:min(100%,412px);margin-inline-start:auto;margin-block-start:clamp(40px,9.06vw,137px);padding-bottom:0} .rs-hero--home .rs-hero__aside p{max-width:none;margin-bottom:0} .rs-hero--home .rs-hero__aside .rs-btn{margin-top:clamp(18px,1.98vw,30px)} } /* the centred heroes hold their column in the middle of the band */ .rs-hero--center{text-align:center;align-items:center} .rs-hero--center > .rs-wrap{margin-block:auto} .rs-hero--center .rs-hero__grid{grid-template-columns:1fr;justify-items:center} /* Figma: the centred heroes are 84px, not the homepage's 120px. */ .rs-hero--center h1{font-size:clamp(2.2rem,5.62vw,5.3rem);line-height:.86;letter-spacing:-.028em} /* Figma centres the whole column on these heroes — body copy, button and the scroll cue alike. Without this the aside kept the split-hero left alignment. */ .rs-hero--center .rs-hero__aside{text-align:center;display:grid;justify-items:center} .rs-hero--center .rs-hero__aside p{margin-inline:auto} .rs-hero--center .rs-hero__aside .rs-btn{justify-self:center} .rs-hero--center .rs-scrollcue{margin-inline:auto} .rs-hero--center p{margin-inline:auto;max-width:62ch} /* PLATFORM.jpg: the hero eyebrow is 23px, near-tracked — not a micro label. */ .rs-hero__eyebrow{color:var(--teal);display:block;margin-bottom:clamp(14px,1.9vw,29px);font-size:clamp(.8rem,1.55vw,1.46rem);font-weight:700;letter-spacing:.015em;text-transform:uppercase;line-height:1.2} /* ========================================================================= 9. TRUSTED-BY STRIP ========================================================================= */ /* The strip sits at the foot of the hero, over the photograph, exactly as the design has it — not on a band of its own. */ /* margin-block-start:auto is what pins the strip to the foot of the hero. */ /* Figma runs the strip's rules to x=1279 rather than the content column's 1302 — 1070px wide, left-aligned on the content margin. */ .rs-trusted{margin-block-start:auto;padding-block-start:clamp(36px,6vw,74px);width:min(100%,var(--wrap-trusted));--wrap-trusted:min(1390px,max(70.8vw,min(92vw,1070px)))} .rs-trusted__eyebrow{display:block;padding-block:0 clamp(16px,2.9vw,44px);border-block-end:1px solid var(--hair-light);font-size:clamp(1rem,2.65vw,2.5rem);line-height:1} /* The rule UNDER the logos lives on .rs-trusted, not here — see the marquee block below for why. */ .rs-trusted__logos{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:center;gap:clamp(16px,3vw,30px);padding-block:clamp(14px,1.7vw,26px);margin:0;padding-inline:0} .rs-trusted__logos li{list-style:none;flex:0 0 auto} /* Raised from clamp(26px,5.4vw,44px) in 0.31.1: with 18 real client logos in the strip the long wordmarks (Sportiva Events, Lakesman, Dragon's Back Race) were rendering 18-25px tall and had stopped being readable. The artwork itself was also refloored so no mark sits below 62% of its box — the two changes together take the worst case from 17.9px to ~35px. */ .rs-trusted__logos img{height:clamp(32px,6.6vw,56px);width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92} /* Figma draws each client mark at its own natural size rather than trimming them all to one height, so each gets the height of its own artboard. */ .rs-trusted__art{height:var(--rs-mark-h,clamp(26px,4vw,61px));width:auto;opacity:.92} .rs-trusted__art--total-warrior{--rs-mark-h:clamp(34px,5.36vw,81px)} .rs-trusted__art--g{--rs-mark-h:clamp(26px,4.03vw,61px)} .rs-trusted__art--big-bear-events{--rs-mark-h:clamp(30px,4.7vw,71px)} .rs-trusted__art--maverick-race{--rs-mark-h:clamp(21px,3.24vw,49px)} .rs-trusted__art--born-survivor{--rs-mark-h:clamp(24px,3.7vw,56px)} .rs-trusted__art--atw{--rs-mark-h:clamp(28px,4.43vw,67px)} @media (min-width:760px){ .rs-trusted__logos{grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,28px)} } .rs-trusted__ph{height:clamp(26px,5.4vw,44px);width:clamp(72px,16vw,118px);border:1px dashed rgba(255,255,255,.3);border-radius:6px;display:grid;place-items:center;font-size:.5rem;letter-spacing:.1em;color:rgba(255,255,255,.45);text-transform:uppercase;font-weight:700} /* ========================================================================= 10. CHECKLIST / PILLS / STATS ========================================================================= */ .rs-check{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem} .rs-check li{display:grid;grid-template-columns:1.5rem 1fr;gap:.85rem;align-items:start;font-size:.98rem;line-height:1.5} .rs-check svg{width:1.2rem;height:1.2rem;margin-top:.18rem;flex:none} .rs-check__icon{height:1.4rem;margin-top:.05rem} .rs-check .rs-art>svg{width:auto;height:100%} /* ACCELERATOR.png: 19px between pill rows, 49px from the paragraph above. */ .rs-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.7rem,1.26vw,19px);margin-top:clamp(24px,3.24vw,49px)} /* Measured on ACCELERATOR.png: 159 x 43 with a 6px corner, not a pill. */ /* Feedback: match the hero button's corner rounding — 6px read too sharp. */ .rs-pill{border:1.5px solid var(--crimson);color:var(--crimson);border-radius:var(--radius-btn);padding:1em 1.8em;line-height:1;font-size:clamp(.7rem,.93vw,.88rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase} .rs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,4vw,40px);margin-top:2rem} @media (min-width:900px){.rs-stats--4{grid-template-columns:repeat(4,1fr)}} .rs-stat__fig{display:block;font-weight:300;font-size:clamp(2.6rem,9vw,4.6rem);line-height:.95;letter-spacing:-.03em} .rs-stat__label{display:block;margin-top:.5rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;opacity:.92} /* ========================================================================= 11. QUOTES / SLIDER ========================================================================= */ .rs-quote{text-align:center;max-width:44ch;margin-inline:auto} /* The supplied artwork carries its own crimson and photographic fill, so it is sized rather than tinted: 173x141 in HOMEPAGE.png, 138x112 on the phone. */ .rs-quote__mark{width:clamp(138px,11.44vw,173px);margin:0 auto clamp(18px,2vw,30px)} .rs-quote__mark .rs-art{width:100%} .rs-quote__mark svg{width:100%;height:auto} .rs-quote__text{font-size:clamp(1rem,2.4vw,1.35rem);line-height:1.5;font-weight:600} .rs-quote__by{display:block;margin-top:1.2rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson)} .rs-band--teal .rs-quote__by,.rs-band--teal .rs-quote__mark{color:var(--ink)} .rs-slider{position:relative;padding-inline:clamp(0px,6vw,64px)} /* The viewport's height is set from the slide on show (see syncHeight in theme.js) so the dots sit under the quote rather than under the longest quote in the set. flex-start stops the slides stretching to match each other, which is what made every measurement come back as the tallest. */ .rs-slider__viewport{overflow:hidden;transition:height .45s cubic-bezier(.4,0,.2,1)} .rs-slider__track{display:flex;align-items:flex-start;transition:transform .45s cubic-bezier(.4,0,.2,1)} .rs-slider__slide{flex:0 0 100%;min-width:0} .rs-slider__btn{position:absolute;inset-block-start:50%;translate:0 -50%;width:44px;height:44px;border-radius:999px;border:0;background:none;color:var(--crimson);display:none;cursor:pointer} @media (min-width:760px){.rs-slider__btn{display:grid;place-items:center}} .rs-slider__btn:hover{background:rgba(255,255,255,.08)} .rs-slider__btn--prev{inset-inline-start:0} .rs-slider__btn--next{inset-inline-end:0} .rs-band--teal .rs-slider__btn{color:var(--ink)} .rs-slider__dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem} .rs-slider__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.35);cursor:pointer} .rs-slider__dot[aria-selected="true"]{background:var(--crimson);width:22px} .rs-band--teal .rs-slider__dot{background:rgba(0,0,0,.3)} .rs-band--teal .rs-slider__dot[aria-selected="true"]{background:var(--ink)} /* ========================================================================= 12. CTA BAND ========================================================================= */ /* HOMEPAGE.png gives the closing CTA 799px of height. */ .rs-cta{position:relative;min-height:clamp(400px,52.84vw,799px);display:flex;align-items:center;overflow:hidden} .rs-cta h2{max-width:20ch} .rs-cta p{max-width:42ch} .rs-deco-chev>svg{width:100%;height:auto} .rs-deco-chev{position:absolute;inset-block-end:-6%;inset-inline-start:-4%;width:clamp(150px,26vw,340px);opacity:.92;z-index:0;pointer-events:none} /* The mark is the nested three-chevron artwork on a 707:816 artboard, and the design runs it OFF the band's bottom-right corner rather than sitting it inside: on the desktop frame roughly half the artwork is cropped away. Measured off the band by matching the artwork's own geometry — a 148-unit arm renders 165px wide in the supplied capture, which pins the scale, and the artwork's topmost point (unit x=328.5, y=0) pins the offset. That fit reproduces the capture at IoU 0.965. Both offsets are expressed as fractions of the mark's OWN width, not as vw, so the crop stays identical at every viewport instead of drifting: at any size the same share of the artwork is visible. desktop 694.5px wide, 20.7px past the right edge, 336.9px past the bottom mobile 300.9px wide, 75.1px past the right, 78.4px past the bottom The two frames crop it differently — desktop takes most of it off the bottom, mobile takes an even bite off both — so the fractions are per breakpoint. */ .rs-deco-chev--right{ --rs-chev-w:clamp(340px,45.93vw,694px); --rs-chev-bleed-x:.0298; --rs-chev-bleed-y:.4851; width:var(--rs-chev-w); inset-inline:auto calc(var(--rs-chev-w) * var(--rs-chev-bleed-x) * -1); inset-block-start:auto; inset-block-end:calc(var(--rs-chev-w) * var(--rs-chev-bleed-y) * -1); translate:none;opacity:1; } /* ========================================================================= 13. FOOTER ========================================================================= */ .rs-footer{background:var(--ink-2);padding-block:clamp(48px,7vw,80px) clamp(24px,3vw,32px)} .rs-footer__top{display:grid;gap:clamp(32px,5vw,48px)} @media (min-width:820px){.rs-footer__top{grid-template-columns:1.6fr .63fr .55fr;align-items:start}} /* the footer link set is the same 15px, untracked treatment as the header nav, on a 26px rhythm in the 1512 frame */ .rs-footer__links{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,.99vw,15px)} .rs-footer__links a{font-size:clamp(.78rem,.98vw,.93rem);font-weight:700;letter-spacing:0;text-transform:uppercase} .rs-footer__links a:hover{color:var(--crimson)} .rs-footer__head{font-size:clamp(.78rem,.98vw,.93rem);font-weight:700;letter-spacing:0;text-transform:uppercase;margin:0 0 clamp(8px,1.12vw,17px)} .rs-footer__email{color:var(--grey);font-size:clamp(.85rem,.98vw,.93rem)} .rs-footer__email:hover{color:#fff} /* Supplied Icons/ artwork, drawn 1:1 in the frame: the Instagram and Facebook glyphs are 33px tall, LinkedIn 35px, with ~17px of air between them. The viewBoxes are cropped to the glyph so the optical gaps stay even. */ .rs-social{display:flex;align-items:center;gap:clamp(14px,1.13vw,17px);margin-top:clamp(18px,2.2vw,32px);color:#fff} .rs-social a,.rs-social span{display:inline-flex;color:#fff;transition:color .18s} .rs-social .rs-art{height:clamp(24px,2.18vw,33px)} .rs-social .rs-art--linkedin{height:clamp(26px,2.32vw,35px)} .rs-social a:hover,.rs-social a:focus-visible{color:var(--crimson)} .rs-footer__rule{margin-block:clamp(32px,5vw,48px);height:1px;background:rgba(255,255,255,.18);border:0} .rs-footer__brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,48px)} /* HOMEPAGE.png: the footer brand row is drawn at 70px, taller than the header's */ .rs-footer__brands .rs-sublogo__art{height:clamp(30px,4.63vw,70px)} .rs-footer__legal{margin-top:clamp(28px,4vw,40px);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--grey)} .rs-footer__legal ul{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;list-style:none;margin:0;padding:0} .rs-footer__legal a:hover{color:#fff} /* ========================================================================= 14. MOTION PREFERENCES ========================================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .rs-scrollcue{animation:none} } /* ========================================================================= 15. HOMEPAGE SUB-BRAND BLOCKS ========================================================================= */ /* dark centred intro that introduces the Accelerator band */ /* Feedback: the paragraph sat too close to the crimson band. HOMEPAGE.png puts 114px between the last line of copy and the top of the pink. */ .rs-intro{padding-block:clamp(48px,7vw,96px) clamp(40px,7.4vw,112px)} .rs-intro__inner{display:grid;justify-items:center;text-align:center;gap:clamp(20px,3vw,30px)} .rs-intro__heading{color:var(--crimson);margin:0;max-width:22ch} .rs-intro__body{color:var(--crimson);margin:0;max-width:62ch;font-size:clamp(.85rem,1.5vw,.95rem);line-height:1.55} /* crimson benefits band */ /* HOMEPAGE.png rounds only the top corners of this band — the bottom runs square into the paper band below. Padding is pinned to the frame (123/143) rather than inherited from --band-y. */ .rs-benefits{ color:#fff; border-start-start-radius:var(--radius-band);border-start-end-radius:var(--radius-band); border-end-start-radius:0;border-end-end-radius:0; padding-block:clamp(56px,8.13vw,123px) clamp(56px,9.46vw,143px); /* The chevron mark is drawn to run off the bottom-right corner, so the band has to be the thing that crops it — hence its own containing block and a clip. The clip follows the rounded top corners for free. */ position:relative;overflow:hidden; } /* Figma: the copy starts at the content margin, not centred, and the opening line is a 46px Extra Bold statement rather than body copy. */ .rs-benefits__inner{max-width:none} .rs-benefits__inner > div{max-width:min(100%,604px)} .rs-benefits__statement{ font-family:var(--font-sans);font-weight:800;font-style:normal;text-transform:none; font-size:clamp(1.45rem,3.1vw,2.875rem);line-height:1.14;letter-spacing:-.01em; color:#fff;margin:0 0 clamp(1.8rem,5.2vw,4.9rem); } .rs-benefits .rs-check li{grid-template-columns:1.75rem 1fr} .rs-benefits .rs-check svg{color:#fff;opacity:.95} .rs-benefits .rs-btn{margin-top:clamp(2rem,4.76vw,4.5rem)} /* Solid ink button on the crimson band, at every width. This started out mobile-only: the white chevron behind the band sits right under the button once it stacks, and a white outline with white text simply disappeared into it. Batch 2 asked for the same treatment on desktop, so the rule moved out of the max-width:899px block. --ink is #262324, the black the brief names, so the value is the token rather than a second literal. */ .rs-benefits .rs-btn--white{background:var(--ink);border-color:var(--ink);color:#fff} .rs-benefits .rs-btn--white:hover{background:#000;border-color:#000;color:#fff} .rs-benefits .rs-deco-chev{color:rgba(255,255,255,.92)} /* MOBILE HOME.png draws this mark at full strength, 301px wide on the 402 frame, taking an even ~25% bite off both the right edge and the bottom — a different crop from the desktop frame, and not the faded 28% the build had been carrying. */ @media (max-width:899px){ .rs-benefits .rs-deco-chev--right{ --rs-chev-w:min(74.85vw,301px); --rs-chev-bleed-x:.2496; --rs-chev-bleed-y:.2606; opacity:1; } } /* generic sub-brand block */ /* Figma sets 42-44px between the sub-logo, heading and body copy in these blocks — the build had ~30, which read tight. */ .rs-brand__col{display:grid;gap:clamp(1.1rem,1.96vw,1.85rem);max-width:56ch} .rs-brand__col h2{margin:clamp(.4rem,.53vw,.6rem) 0 0} .rs-brand__col .rs-btn{margin-top:1.1rem;justify-self:start} /* Figma: the Platform block is left-aligned and offset to x=610 in the 1512 frame — not centred. Below 900px it simply runs full width. */ @media (min-width:900px){ .rs-brand--center .rs-brand__col{margin-inline-start:36.6%;max-width:766px} } /* HOMEPAGE.png: 172px above the sub-logo and 143px below the button, so the band reads as a section rather than a banner. */ .rs-brand--center{padding-block:clamp(64px,11.38vw,172px) clamp(60px,9.46vw,143px)} .rs-brand--center .rs-sublogo{justify-self:start} /* Figma "Group 51": the chevron mark bleeds off the left edge of the band. */ /* Figma: 599px wide in the 1512 frame, starting 112px off the left edge and 206px below the top of the band. The artwork carries its own 16% tint, so it is drawn at full opacity rather than faded a second time. */ /* Measured off HOMEPAGE.png rather than placed by eye, because the mark is clipped on two sides and so cannot be fitted by its bounding box. The scale comes from a length that survives the clipping: the run from the artwork's topmost tip to its right edge is 380 viewBox units and 378px in the frame, so the svg renders 735px wide at 1512 — 48.6vw. At that scale its ink lands at x 0..462 and y 197..past the foot of the band, i.e. it bleeds off BOTH the left edge and the bottom, which is what gives it the same cornered reading as the white chevron on the crimson band above. It had been floating 14px clear of the bottom and running small, which is what read as "placed randomly". The band is overflow:hidden, so the bleed clips cleanly. */ .rs-plat-chev{--rs-plat-w:clamp(340px,48.6vw,735px);position:absolute;inset-block-start:auto;inset-block-end:calc(var(--rs-plat-w) * -.1393);inset-inline-start:calc(var(--rs-plat-w) * -.3687);width:var(--rs-plat-w);opacity:1;z-index:0;pointer-events:none} .rs-plat-chev>svg{width:100%;height:auto} /* Mobile keeps the geometry it already had. Worth knowing: MOBILE HOME.png draws no watermark on this band at all — the only teal pixels in it are the button — so the frame's answer here is to hide it. Left visible because that was not what was asked for. */ @media (max-width:899px){.rs-plat-chev{--rs-plat-w:300px;opacity:.6;inset-block-end:calc(var(--rs-plat-w) * .023);inset-inline-start:calc(var(--rs-plat-w) * -.187)}} /* HOMEPAGE.png gives the Racecheck band 860px — the 640px build read as a banner strip rather than a full section. */ .rs-brand--photo{min-height:clamp(460px,56.88vw,860px);display:flex;align-items:center} .rs-brand--photo .rs-brand__col{color:#fff} .rs-brand--photo h2{max-width:734px} .rs-brand--photo .rs-brand__col{max-width:734px} .rs-band--paper .rs-lede{color:#3a3335} /* ========================================================================= 16. TESTIMONIAL SECTION ========================================================================= */ .rs-quotes{text-align:center} /* Figma sets this in Acumin at 48px — larger than the generic kicker. */ .rs-quotes__label{color:var(--crimson);margin:0 0 1.6rem;font-family:var(--font-display);font-size:clamp(1.5rem,3.17vw,3rem)} .rs-band--teal .rs-quotes__label{color:var(--ink)} /* ========================================================================= 17. CLOSING CTA ========================================================================= */ .rs-cta__inner{max-width:44ch} /* The two-tone chevron mark, placed as in the design: left half, vertically centred. */ /* Centred with transform, NOT the `translate` property, and that is load bearing. This element carries data-rs-reveal="turn", and the reveal system resets `translate:none` on .is-in to land its own movement — which also wiped the -50% doing the centring here, dropping the marque by half its height the moment it was revealed. `transform` is untouched by that system, so the centring survives. Anything given a reveal must not position itself with `translate`. */ /* The widths here are 1.2926x what they were when this held the Race Space marque alone. That file's viewBox was the mark's own bounding box (707x816); the three marks now share a normalised 1120x1000 box, so the same rendered mark needs a wider container. The multiplier keeps the Race Space mark at exactly the size Carlo signed off. */ .rs-cta__chev{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-start:clamp(4%,12vw,18%);width:clamp(155px,24.6vw,349px);line-height:0;z-index:0;pointer-events:none} /* Face 1 stays in flow and gives the box its height; the other two are laid over it at the same top-left corner. Identical viewBoxes then line all three up to the pixel. Every one of these declarations is overriding .rs-art, which rs_svg_file() stamps on each wrapper: display over its inline-flex, width over the shrink-to-fit that inline-flex implies, and the svg rule over `.rs-art>svg{height:100%;width:auto}`. Selectors are deliberately one step more specific than .rs-art's so the override does not rest on source order. `width:100%` on the absolute faces rather than `inset:0` — insetting all four sides would also pin their HEIGHT to the container's, and since the container is only as tall as face 1, the svg inside would overflow it and hang 22px low. Width alone lets height follow the viewBox. */ .rs-cta__chev .rs-cta__face{display:block;width:100%} .rs-cta__chev .rs-cta__face>svg{display:block;width:100%;height:auto;max-width:none} .rs-cta__chev .rs-cta__face--2, .rs-cta__chev .rs-cta__face--3{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0} @media (max-width:899px){.rs-cta__chev{width:168px;opacity:.5;inset-inline-start:4%}} .rs-cta .rs-deco-chev{width:clamp(120px,17vw,230px);inset-inline-start:6%;inset-block-end:14%;opacity:.9} @media (max-width:899px){.rs-cta .rs-deco-chev{width:110px;opacity:.35;inset-block-end:6%}} .rs-cta__inner .rs-btn{margin-top:1.7rem} @media (min-width:900px){.rs-cta__inner{margin-inline-start:49.4%;max-width:586px;text-align:left}} /* ========================================================================= 18. SECTION HEAD (icon left, italic caps title right, hairline under) ========================================================================= */ .rs-sechead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block-end:clamp(10px,1.26vw,19px)} .rs-sechead--bare{justify-content:flex-end} .rs-sechead__icon{flex:none;color:#fff;display:inline-flex;align-items:center;height:clamp(26px,2.38vw,36px)} .rs-sechead__icon .rs-art{height:100%} .rs-sechead__icon svg{height:100%;width:auto} .rs-sechead h2{margin:0;text-align:end} .rs-band--paper .rs-sechead__icon{color:var(--ink)} .rs-header__brand{display:inline-flex;align-items:center} /* generic single-column page (privacy policy, etc.) */ .rs-page{padding-block:calc(var(--header-h) + clamp(48px,8vw,96px)) clamp(56px,9vw,110px)} .rs-page__body{max-width:70ch} .rs-page__body h2,.rs-page__body h3{margin-top:2em} .rs-page__body a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px} .rs-page__body ul,.rs-page__body ol{padding-inline-start:1.4em} .rs-page__body li{margin-bottom:.5em} /* Footer content runs x=166 -> 1398 in the design. */ .rs-footer .rs-wrap{width:min(100% - var(--gutter) * 2, var(--wrap-mid))} /* ========================================================================= 26. MOBILE Measured against the 402px-wide frames in "Mobile Version". Everything below lives inside this query, so the desktop and tablet rendering defined above is untouched. Each vw term is the frame measurement / 402. ========================================================================= */ @media (max-width:640px){ :root{ /* --gutter is not set here: it steps by device width in section 27. */ --header-rule:27px; --header-h:104px; --band-y:clamp(56px,22.4vw,90px); } /* The desktop band rhythm was retuned to the 1512 frames in the feedback pass. The phone keeps the values the mobile frames were matched to, so nothing on the mobile build moves. */ .rs-intro{padding-block:clamp(48px,7vw,96px) clamp(32px,5vw,56px)} .rs-benefits{padding-block:var(--band-y)} .rs-benefits__statement{margin:0 0 1.6rem} .rs-brand--center{padding-block:var(--band-y)} .rs-brand--photo{min-height:clamp(420px,58vw,640px)} .rs-pills{margin-top:2rem} /* header: a bigger lockup, and the burger is two bars, not three */ .rs-logo__art{height:clamp(38px,12.44vw,50px)} .rs-burger{width:37px;height:37px;gap:4px} .rs-burger span{height:3px} .rs-burger span:nth-child(2){display:none} /* hero */ .rs-hero--home{min-height:min(96svh,880px);padding-block-start:calc(var(--header-h) + clamp(60px,27.6vw,111px))} .rs-hero--home h1{font-size:clamp(2.3rem,11.94vw,3rem);line-height:.875;letter-spacing:-.022em} .rs-hero--home .rs-hero__aside{margin-block-start:clamp(30px,10.7vw,43px)} .rs-hero__aside p{font-size:clamp(.78rem,3.43vw,.875rem);line-height:1.42;max-width:19ch} .rs-hero__aside .rs-btn{margin-top:clamp(22px,8.7vw,35px)} .rs-btn{font-size:clamp(.78rem,3.6vw,.906rem);padding:.8em 1.75em} /* the client strip sits on flat ink in the phone frame, so the foot of the photograph resolves sooner than it does on the desktop hero */ .rs-hero--home:not(.rs-hero--center)::after{height:min(66%,560px);background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgba(38,35,36,.7) 30%,var(--ink) 58%)} /* trusted strip: two-line eyebrow, marks in one scrolling row */ .rs-trusted{margin-block-start:clamp(40px,17.4vw,70px);padding-block-start:clamp(30px,13.9vw,56px)} /* No max-width here. It capped the BOX, not just the measure, so the rule under the eyebrow stopped at 233px of the 322px column while the one under the logos ran the full width — two mismatched lines. The label still falls on two lines at this size without being boxed in. */ .rs-trusted__eyebrow{font-size:clamp(1.05rem,5.72vw,1.44rem);padding-block-end:clamp(12px,4vw,16px)} .rs-trusted__logos{display:flex;gap:clamp(16px,6.4vw,26px);overflow-x:auto;scrollbar-width:none;padding-block:clamp(20px,7.5vw,30px)} .rs-trusted__logos::-webkit-scrollbar{display:none} .rs-trusted__logos li{flex:0 0 auto} /* display type, measured line by line off MOBILE HOME.png */ .rs-intro__heading{font-size:clamp(1.7rem,8.96vw,2.25rem);line-height:.95;max-width:none} .rs-intro__body{font-size:clamp(.85rem,3.73vw,.94rem);line-height:1.5} .rs-benefits__statement{font-size:clamp(1.25rem,5.82vw,1.5rem);line-height:1.18} .rs-benefits__inner > div{max-width:min(100%,250px)} .rs-brand__col h2{font-size:clamp(2rem,10.95vw,2.75rem);line-height:.95} .rs-brand--photo .rs-brand__col h2{font-size:clamp(1.75rem,9.2vw,2.31rem)} /* MOBILE HOME.png centres the whole Platform block */ .rs-brand--center .rs-brand__col{text-align:center;justify-items:center;margin-inline:auto} .rs-brand--center .rs-brand__col .rs-btn{justify-self:center} .rs-brand--center .rs-sublogo{margin-inline:auto} /* closing CTA: a tall photo band with the copy sitting low, as drawn, and the button given air under it so it never sits against the footer. */ .rs-cta{min-height:min(76svh,640px);display:flex;align-items:flex-end; padding-block-end:clamp(48px,17.9vw,72px)} /* The phone frame does NOT draw the arrow series in this band — it was hidden here for that reason — but Carlo asked for the three-brand flip on mobile as well as desktop, so it comes back with a placement of its own rather than the desktop one. Desktop sets it beside the copy and centres it on the band. Neither works here: the copy is a single column sitting at the foot, so there is no beside, and centring on the band would put the marque behind the words. It goes in the empty photograph above them instead, centred on the column and clear of both the header and the heading — the same relationship to the message, stacked instead of side by side. inset-block-start replaces the desktop 50% + translateY(-50%), so the transform is cleared; leaving it would lift the mark by half its height. */ .rs-cta__chev{ display:block; inset-block-start:clamp(30px,9.5vw,58px); inset-inline:0;margin-inline:auto; transform:none; width:clamp(104px,30vw,132px); opacity:.92; } .rs-cta h2{font-size:clamp(1.9rem,9.95vw,2.5rem);line-height:.95;max-width:none} /* footer: the marque, then the brand lockups beside the links */ .rs-logo--lg .rs-logo__art{height:clamp(56px,20.6vw,83px)} .rs-footer .rs-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,4.5vw,18px);row-gap:clamp(22px,7.5vw,30px);align-items:start} .rs-footer__top{display:contents} .rs-footer__top > div:first-child{grid-column:1/-1;justify-self:center;margin-block-end:clamp(10px,4vw,16px)} .rs-footer__brands{grid-column:1;grid-row:2;display:grid;gap:clamp(12px,4.5vw,18px);justify-items:start;margin:0} .rs-footer__top > nav{grid-column:2;grid-row:2} .rs-footer__top > div:last-child{grid-column:2;grid-row:3} .rs-footer__rule{display:none} .rs-footer__legal{grid-column:1/-1} /* the three brand links repeat the lockups sitting next to them, so the phone footer drops them exactly as the frame does */ .rs-footer__links .rs-dup-brand{display:none} .rs-footer__email{white-space:nowrap} } /* ========================================================================= 27. GUTTER STEPS The side margin is the one token that wants real breakpoints rather than a fluid ramp — Race Space set these against handsets. Largest window first so the narrower ones win on source order. Nothing else lives in here, and nothing applies from 768px up. ========================================================================= */ @media (max-width:767px){ :root{ --gutter:40px } } @media (max-width:374px){ :root{ --gutter:30px } } @media (max-width:320px){ :root{ --gutter:20px } } /* ========================================================================= 28. SCROLL REVEALS The motion brief lives in the Figma comments rather than in a prototype: pinned notes asking for copy to arrive line by line, stats and cards to pop in one after another, and sections to slide in from left or right. They all reduce to four primitives plus a stagger, so the whole brief is expressed through one attribute. Nothing hides until the JS has confirmed it is running (html.rs-js), so a failed or blocked script leaves every word on the page. ========================================================================= */ .rs-js [data-rs-reveal]{ opacity:0; transition:opacity .68s cubic-bezier(.22,.61,.36,1), translate .68s cubic-bezier(.22,.61,.36,1), scale .68s cubic-bezier(.22,.61,.36,1); transition-delay:var(--rs-d,0ms); will-change:opacity,translate; } .rs-js [data-rs-reveal="up"]{translate:0 30px} .rs-js [data-rs-reveal="right"]{translate:44px 0} .rs-js [data-rs-reveal="left"]{translate:-44px 0} .rs-js [data-rs-reveal="pop"]{translate:0 18px;scale:.965} /* A whole band riding up into place, for "slides up on scroll, card like effect". It keeps opacity:1 throughout — the others fade from nothing, but a full-bleed band that faded would show the page behind it, which reads as a hole rather than a card. Travel is capped near --radius-band so the gap it opens above stays inside the hero photograph's own bleed. z-index keeps it over the band below while it is still travelling. */ .rs-js [data-rs-reveal="band"]{ opacity:1;translate:0 clamp(26px,4.2vw,64px); position:relative;z-index:2; } .rs-js [data-rs-reveal].is-in{opacity:1;translate:none;scale:none;will-change:auto} /* "Turning symbol" — the three-brand flip beside the closing CTA. A Y-axis turn, done in 2D. scaleX passing through 0 is exactly what a rotation about the vertical axis projects to on screen, and unlike a real rotateY it needs no 3D context, no preserve-3d on the ancestors and no backface bookkeeping; it behaves the same in every browser. The brightness dip does the work perspective would have done — a face that goes edge-on without darkening reads as a squash rather than a turn. Timing is measured off Carlo's reference clip rather than guessed: the loop runs 134 frames at 29.97fps (4.47s) for three marks, each held face-on for ~20 frames (0.67s) with ~22 frames (0.73s) of turn between them. The turn is split down the middle — the outgoing mark spends half of it closing to edge-on, the incoming one the other half opening out — so one mark is always arriving exactly as the last one leaves. That split is why all three share ONE keyframe set and differ only by a negative delay of a third of the cycle each. Negative rather than positive so every face is already at its correct point in the loop on the first frame; positive delays with fill-mode would park all three at 0% and show the marks stacked on top of each other until the cycle caught up. Face 1 is declared scaleX(1) and faces 2 and 3 opacity:0 in the static rules, so a browser that never runs the animation — no JS, or the band never scrolled into view — is left showing the Race Space marque alone, which is what this element was before the flip. */ .rs-js .rs-cta__chev .rs-cta__face{ transform-origin:50% 50%; transform:scaleX(0); will-change:transform,filter; } .rs-js .rs-cta__chev .rs-cta__face--1{transform:scaleX(1)} .rs-js .rs-cta__chev.is-in .rs-cta__face{ opacity:1; animation:rs-mark-flip 4.47s linear infinite both; } .rs-js .rs-cta__chev.is-in .rs-cta__face--2{animation-delay:-2.98s} .rs-js .rs-cta__chev.is-in .rs-cta__face--3{animation-delay:-1.49s} /* 17% = 0.76s of hold; 25.2% = the 0.365s half-turn out; the face then waits at zero width until 91.8%, where its own half-turn in begins. Easing is set per segment: into the edge it accelerates, out of it it settles. */ @keyframes rs-mark-flip{ 0% {transform:scaleX(1);filter:none;animation-timing-function:linear} 17% {transform:scaleX(1);filter:none;animation-timing-function:cubic-bezier(.55,.06,.68,.19)} 25.2% {transform:scaleX(0);filter:brightness(.5);animation-timing-function:linear} 91.8% {transform:scaleX(0);filter:brightness(.5);animation-timing-function:cubic-bezier(.32,.81,.45,.94)} 100% {transform:scaleX(1);filter:none} } /* "Text appear line by line" — rs_lines() splits the heading on its own line breaks and the stagger walks them. */ .rs-line{display:block} /* Quote lines. Headings are split on authored line breaks; a testimonial has none, so its lines are the ones the browser happened to wrap and have to be measured at runtime (see splitQuoteLines in theme.js). Each measured line becomes a block so the wrap is preserved exactly, then arrives from the right on its own delay when its slide comes in. */ .rs-js .rs-qline{ display:block;opacity:0;translate:34px 0; transition:opacity .5s cubic-bezier(.22,.61,.36,1), translate .5s cubic-bezier(.22,.61,.36,1); transition-delay:var(--rs-d,0ms); } .rs-js .rs-qline.is-in{opacity:1;translate:none} /* The same measured split, but handed to the reveal system instead of a slider, so it carries no styling of its own beyond becoming a block — [data-rs-reveal] does the rest and the line inherits its parent's stagger. */ .rs-tline{display:block} @media (prefers-reduced-motion:reduce){ .rs-js [data-rs-reveal]{opacity:1;translate:none;scale:none;transition:none} .rs-js .rs-qline{opacity:1;translate:none;transition:none} /* No flip, and no three marks piled on top of one another either: stop the loop, unsquash face 1 and keep the other two out of the way, which leaves the Race Space marque standing still. These come after the rules above, so equal specificity resolves in their favour. */ .rs-js .rs-cta__chev .rs-cta__face, .rs-js .rs-cta__chev.is-in .rs-cta__face{transform:none;filter:none;animation:none;will-change:auto} .rs-js .rs-cta__chev .rs-cta__face--2, .rs-js .rs-cta__chev.is-in .rs-cta__face--2, .rs-js .rs-cta__chev .rs-cta__face--3, .rs-js .rs-cta__chev.is-in .rs-cta__face--3{opacity:0} } /* ------------------------------------------------------------------------- Masked marquees. Two notes ask for the same thing in different places: "slow smooth movement from right to left, [text|logos] start and appear only where the lines start and end — masked effect". The rules that bracket each strip are the mask edges, so the content fades in and out against them rather than being cut. ------------------------------------------------------------------------- */ .rs-marquee, .rs-trusted__logos{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); } /* The homepage client strip runs as a marquee between its two hairlines, at EVERY width. It used to be walled inside min-width:641px, on the reasoning that the phone could scroll the strip by touch — but that left it sitting still unless someone thought to swipe, on the screen where the movement does most of the work. overflow:visible undoes the overflow-x:auto the phone rule sets for that touch-scrolling: with width:max-content there is nothing for the element to scroll, and .rs-trusted's own overflow:hidden is what crops the track. The 46s is a fallback only — theme.js overwrites animation-duration with a figure computed from the measured track, so the strip moves at the same px/sec on a phone as it does on a desktop. It still reads correctly at 46s if the script never runs, because then nothing is duplicated and the animation does not start either. */ .rs-trusted__logos.is-marquee{ display:flex;flex-wrap:nowrap;width:max-content;min-width:100%; gap:clamp(28px,4.6vw,70px);grid-template-columns:none;overflow:visible; } .rs-trusted__logos.is-marquee > li{flex:0 0 auto} /* The hairline under the logos belongs to the SECTION, not to the strip. Once the strip became a marquee it stopped being a container-width element: it is width:max-content (3.6k px on a phone, 7k on a desktop), it translates, and it carries the fade mask — so a border on it is a 3.6k-px line that slides sideways and dissolves into the mask's transparent 7% at each end. On a phone that transparent band is 256px of a 402px screen, which is why the line read as missing there while the desktop got away with it. .rs-trusted is static, exactly the section width, and unmasked, and its border is drawn outside its own overflow clip, so the rule is crisp and matches the one under the eyebrow at every width. */ .rs-trusted{overflow:hidden;border-block-end:1px solid var(--hair-light)} .rs-trusted__logos.is-marquee.is-running{animation:rs-scroll 46s linear infinite} /* * Pause on hover and on keyboard focus. This used to hang off a * .rs-trusted__track wrapper that the markup never actually renders, so it * matched nothing and the strip never paused. Hung off the strip itself and * its container instead, which do exist. */ .rs-trusted__logos.is-running:hover, .rs-trusted:focus-within .rs-trusted__logos.is-running{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .rs-trusted__logos.is-marquee.is-running{animation:none} } /* The header keeps the charcoal slightly open once it sticks, as the note on the nav asks, rather than going fully solid. */ .rs-header.is-scrolled{background:rgba(38,35,36,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} @supports not (backdrop-filter:blur(2px)){ .rs-header.is-scrolled{background:rgba(38,35,36,.96)} } /* Case-study cards in the Accelerator carousel lift on hover, as note #2 asks; the click-through already exists. */ .rs-cf__card{transition:opacity .45s,transform .45s,box-shadow .45s} .rs-cf__card.is-active:hover{transform:scale(1.03);box-shadow:0 18px 46px rgba(0,0,0,.42)} @media (prefers-reduced-motion:reduce){ .rs-cf__card.is-active:hover{transform:none} } /* ========================================================================= 404 (v0.35.0) Built from the Figma frames "401" (1512 wide) and "401 MOBILE" (418 wide). Offsets are measured from the header hairline, not the frame top, because the site's header is shorter than the frame's. Desktop: title 146 below the header, 14 to the line, 52 to the button, 102 to the numeral; the numeral's baseline is the section's foot and the footer starts there. Mobile: 95 / 16 / 30 / 190. The numeral uses line-height .727 (Inter's cap height), so its line box is exactly the cap and the baseline sits on the band's bottom edge; the round overshoot of the 0 is clipped, as in the frame. ========================================================================= */ .rs-404{ position:relative;overflow:hidden; padding-block-start:calc(var(--header-h) + clamp(72px,9.66vw,146px)); background:var(--ink); } /* the band behind the numeral: ink into crimson, sampled off the frame */ .rs-404::before{ content:"";position:absolute;inset-inline:0;inset-block-end:0; height:clamp(220px,28.2vw,426px); background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgb(112,37,55) 100%); pointer-events:none; } .rs-404 > .rs-wrap{position:relative;z-index:1} .rs-404__copy{padding-inline-start:clamp(0px,2.5vw,38px)} .rs-404__title{ margin:0;font-family:var(--font-display);font-style:italic;font-weight:700; font-size:clamp(32px,2.65vw,40px);line-height:1.2;letter-spacing:0; text-transform:uppercase;color:var(--crimson); } .rs-404__text{ margin:clamp(10px,.93vw,14px) 0 0; font-size:clamp(16px,1.32vw,20px);line-height:1.2;color:#F4F4F4; } .rs-404 .rs-btn{ margin-block-start:clamp(28px,3.44vw,52px); min-height:44px;padding-block:0;padding-inline:19px; font-size:16px;font-weight:800;letter-spacing:.05em; } .rs-404__code{ position:relative;z-index:1; margin:clamp(56px,6.75vw,102px) 0 0; padding-inline-end:7.4vw;text-align:end; font-family:var(--font-body,Inter),system-ui,sans-serif;font-weight:700; font-size:clamp(200px,31.75vw,480px);line-height:.727;letter-spacing:-.06em; color:rgba(244,244,244,.21); white-space:nowrap;user-select:none; } /* letter-spacing trails the last glyph in the browser, not in Figma */ .rs-404__code::after{content:"";margin-inline-end:-.06em} @media (max-width:640px){ .rs-404{padding-block-start:calc(var(--header-h) + clamp(64px,23.6vw,95px))} .rs-404::before{ height:233px; background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgb(139,40,62) 85%,rgb(140,41,63) 100%); } .rs-404__copy{padding-inline-start:0} .rs-404__title{font-size:32px;line-height:1;max-width:5.85em} .rs-404__text{margin-block-start:16px;font-size:14px} .rs-404 .rs-btn{margin-block-start:30px} .rs-404__code{margin-block-start:clamp(140px,47vw,190px);padding-inline-end:6.9vw;font-size:clamp(120px,43vw,180px)} }