/* ========================================================================== Robo Co-op — Home page design refinement layer -------------------------------------------------------------------------- Loaded LAST on the home page (EN + JA) so it wins over the inline per-section stylesheets that came out of the Elementor export. Rules: • No copy is added, removed or reworded here. • No font-family is declared anywhere in this file — Roboto stays. • Everything is scoped to `.rc-home` so other pages are untouched. Contents 00 Tokens 01 Global polish & accessibility 02 Header 03 Hero 04 Live stats 05 Belief 06 Partners 07 Model 08 Ecosystem 09 Stories 10 Get involved (CTA) 11 Scroll reveal 12 Reduced motion ========================================================================== */ /* ========================================================================== 00 TOKENS ========================================================================== */ .rc-home { --rc-ink: #0D0F12; --rc-ink-70: rgba(13, 15, 18, .70); --rc-ink-55: rgba(13, 15, 18, .55); --rc-ink-38: rgba(13, 15, 18, .38); --rc-body: #3D4048; --rc-paper: #F5F5F0; --rc-paper-2: #F7F7F3; --rc-white: #FFFFFF; --rc-accent: #06B6D4; --rc-accent-600: #0891B2; --rc-accent-050: #ECFEFF; --rc-accent-glow: rgba(6, 182, 212, .28); --rc-lab: #007DD1; --rc-coop: #FF3F33; --rc-uni: #6EC207; --rc-gold: #F8B03E; --rc-green: #43AD60; /* hairlines */ --rc-line: rgba(13, 15, 18, .08); --rc-line-strong: rgba(13, 15, 18, .14); /* elevation — three steps, all tinted with the ink colour so shadows never look muddy-grey against the warm paper background */ --rc-sh-1: 0 1px 2px rgba(13, 15, 18, .04), 0 2px 8px rgba(13, 15, 18, .04); --rc-sh-2: 0 2px 4px rgba(13, 15, 18, .03), 0 12px 28px -10px rgba(13, 15, 18, .12); --rc-sh-3: 0 6px 12px rgba(13, 15, 18, .05), 0 28px 60px -16px rgba(13, 15, 18, .20); --rc-sh-accent: 0 10px 26px -8px var(--rc-accent-glow); /* radii */ --rc-r-sm: 12px; --rc-r-md: 18px; --rc-r-lg: 26px; --rc-r-xl: 32px; /* motion */ --rc-ease: cubic-bezier(.22, 1, .36, 1); --rc-ease-out: cubic-bezier(.16, 1, .3, 1); /* rhythm — one fluid section step used by every band on the page */ --rc-band: clamp(72px, 9vw, 128px); --rc-gutter: clamp(20px, 4vw, 32px); --rc-measure: 1240px; } /* ========================================================================== 01 GLOBAL POLISH & ACCESSIBILITY ========================================================================== */ html:has(body.rc-home) { scroll-behavior: smooth; /* the header is sticky — stop in-page anchors landing underneath it */ scroll-padding-top: 96px; /* `clip` rather than `hidden`: it contains the closed mobile menu, which parks itself one viewport to the right, without killing position:sticky on the header the way `hidden` would */ overflow-x: clip; } .rc-home ::selection { background: var(--rc-accent); color: #fff; } /* Visible keyboard focus everywhere. The export shipped with none at all. */ .rc-home a:focus-visible, .rc-home button:focus-visible, .rc-home [tabindex]:focus-visible, .rc-home input:focus-visible, .rc-home textarea:focus-visible, .rc-home select:focus-visible { outline: 3px solid var(--rc-accent) !important; outline-offset: 3px !important; border-radius: 6px; } .rc-home section[id] { scroll-margin-top: 96px; } /* -------------------------------------------------------------------------- Inline-SVG repair (see home-enhance.js §0). jeg-elementor-kit's `.elementor-element svg { width: 1em }` outranks the section stylesheets' plain class rules too, so re-assert the ones that size an SVG from CSS rather than from a width attribute. -------------------------------------------------------------------------- */ .rc-home .elementor-element svg.ubs__bg-svg { width: 80vw !important; height: 80vw !important; fill: none !important; } /* Deliberate light/lighter alternation so the bands read as separate chapters instead of one long off-white scroll. */ .rc-home .ups__section { background-color: var(--rc-white) !important; border-top: 1px solid var(--rc-line) !important; border-bottom: 1px solid var(--rc-line) !important; } .rc-home .ums__root { background: var(--rc-paper-2) !important; } /* One shared vertical rhythm. */ .rc-home .ups__section, .rc-home .ums__root, .rc-home .rec__root, .rc-home .ust__root, .rc-home .uct__section { padding-top: var(--rc-band) !important; padding-bottom: var(--rc-band) !important; } .rc-home .ubs__section { padding-top: var(--rc-band) !important; padding-bottom: var(--rc-band) !important; } /* Full-bleed hairlines between bands — an editorial device that gives the page a spine and stops adjacent off-whites bleeding into one another. */ .rc-home .ums__root, .rc-home .rec__root, .rc-home .ust__root, .rc-home .uct__section { border-top: 1px solid var(--rc-line) !important; } /* Paper grain. A single static fixed layer, under the header, above the bands: it takes the flat digital off-white and gives it a printed surface, which is what stops the whole page reading as a template. */ body.rc-home::after { content: ""; position: fixed; inset: 0; z-index: 998; pointer-events: none; opacity: .038; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Long-form copy: better measure + modern wrapping. */ .rc-home h1, .rc-home h2, .rc-home h3 { text-wrap: balance; } .rc-home p { text-wrap: pretty; } /* Japanese line breaking. Left to the default rules the copy splits inside words — 場所 broken across two lines, for one. `auto-phrase` breaks at phrase boundaries instead, and the tighter tracking suits kana/kanji, which do not want the negative tracking the Latin headings use. */ .rc-home:lang(ja) h1, .rc-home:lang(ja) h2, .rc-home:lang(ja) h3, .rc-home:lang(ja) p, .rc-home:lang(ja) li, .rc-home:lang(ja) .ums__feat-text, .rc-home:lang(ja) .rec__desc, .rc-home:lang(ja) .ust__text { word-break: auto-phrase; line-break: strict; } .rc-home:lang(ja) h1, .rc-home:lang(ja) h2, .rc-home:lang(ja) h3 { letter-spacing: -.015em !important; } /* … but the hero headline is set in English on both editions. Left in the loosened kana tracking above it rendered 3× wider than the English one (-.015em against -.045em), which shifted the whole line and moved the cyan bar out from under SOLIDARITY. The Japanese hero is meant to be identical to the English one, so it opts back out. */ .rc-home:lang(ja) .uhs__heading { letter-spacing: -.045em !important; word-break: normal; line-break: auto; } /* Numeric tickers must not reflow the layout on every update. */ .rc-home .uhs__stat-number, .rc-home .ust__stat-number { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; } /* ========================================================================== 02 HEADER ========================================================================== */ .rc-home .rc-site-header { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: height .3s var(--rc-ease), background .3s var(--rc-ease), box-shadow .3s var(--rc-ease), border-color .3s var(--rc-ease); } .rc-home .rc-site-header.rc-scrolled { background: rgba(255, 255, 255, .90); border-bottom-color: var(--rc-line); box-shadow: 0 1px 0 rgba(13, 15, 18, .03), 0 12px 28px -20px rgba(13, 15, 18, .35); } .rc-home .rc-hdr__inner { max-width: var(--rc-measure); padding-inline: var(--rc-gutter); height: 78px; transition: height .3s var(--rc-ease); } .rc-home .rc-site-header.rc-scrolled .rc-hdr__inner { height: 66px; } .rc-home .rc-hdr__brand img { transition: transform .35s var(--rc-ease); } .rc-home .rc-hdr__brand:hover img { transform: rotate(-6deg) scale(1.06); } /* Nav items get a real active indicator rather than a tint-only state. */ .rc-home .rc-hdr__nav > a, .rc-home .rc-hdr__dropdown-toggle { position: relative; letter-spacing: -.005em; } .rc-home .rc-hdr__nav > a::after, .rc-home .rc-hdr__dropdown-toggle::after { content: ""; position: absolute; left: 50%; bottom: 2px; height: 2px; width: 0; border-radius: 2px; background: var(--rc-accent); transform: translateX(-50%); transition: width .28s var(--rc-ease); } .rc-home .rc-hdr__nav > a:hover::after, .rc-home .rc-hdr__nav > a.rc-active::after, .rc-home .rc-hdr__dropdown:hover .rc-hdr__dropdown-toggle::after { width: 18px; } .rc-home .rc-hdr__nav > a.rc-active { color: var(--rc-ink); } .rc-home .rc-hdr__dropdown-menu { border-radius: 18px; border-color: var(--rc-line); box-shadow: var(--rc-sh-3); } .rc-home a.rc-hdr__cta { box-shadow: 0 8px 20px -8px var(--rc-accent-glow) !important; } .rc-home a.rc-hdr__cta:active { transform: translateY(0) scale(.98) !important; } .rc-home .rc-hdr__burger span { background: var(--rc-ink); } @media (max-width: 960px) { .rc-home .rc-hdr__inner, .rc-home .rc-site-header.rc-scrolled .rc-hdr__inner { height: 68px; } .rc-home .rc-hdr__nav { top: 68px; height: calc(100dvh - 68px); padding: 18px var(--rc-gutter) 40px; box-shadow: -20px 0 60px -30px rgba(13, 15, 18, .5); /* The closed panel was merely translated off-screen, so every link in it stayed in the tab order — a keyboard user tabbed through eight invisible destinations before reaching the page. Take it out of the tree until it opens, after the slide-out finishes. */ visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; } .rc-home .rc-hdr__nav.rc-open { visibility: visible; transition: transform .3s ease, visibility 0s linear 0s; } /* the underline indicator belongs to a horizontal bar; inside a full-width row the pill tint already says "you are here" */ .rc-home .rc-hdr__nav > a::after, .rc-home .rc-hdr__dropdown-toggle::after { content: none; } /* nav items ease in behind the panel instead of appearing pre-drawn */ .rc-home .rc-hdr__nav > a, .rc-home .rc-hdr__nav > .rc-hdr__dropdown { opacity: 0; transform: translateX(16px); transition: opacity .3s var(--rc-ease), transform .3s var(--rc-ease); } .rc-home .rc-hdr__nav.rc-open > a, .rc-home .rc-hdr__nav.rc-open > .rc-hdr__dropdown { opacity: 1; transform: none; } .rc-home .rc-hdr__nav.rc-open > *:nth-child(1) { transition-delay: .04s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(2) { transition-delay: .07s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(3) { transition-delay: .10s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(4) { transition-delay: .13s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(5) { transition-delay: .16s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(6) { transition-delay: .19s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(7) { transition-delay: .22s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(8) { transition-delay: .25s } .rc-home .rc-hdr__nav.rc-open > *:nth-child(9) { transition-delay: .28s } } /* ========================================================================== 03 HERO ========================================================================== */ /* The header is sticky, so a hero measured in plain svh always ran exactly the header's height past the first screen — 979px of hero in a 900px window. Subtracting it lets the whole composition land on one screen. Content is top-aligned: centring it in a 920px box left ~200px of dead paper above the badge and pushed the headline down into the wave. */ .rc-home .uhs__section { /* .rc-hdr__inner is 76px plus its 1px hairline, 79px measured live; 80 keeps a pixel in hand */ --rc-hdr-h: 80px; /* Sized to its contents, not to the viewport. A full-height hero left 446px of bare paper under the wave before the next section - the copy and the artwork together only need about 560px. */ min-height: min(calc(100svh - var(--rc-hdr-h)), 560px) !important; align-items: flex-start !important; padding-top: clamp(52px, 7.5vh, 104px) !important; padding-bottom: clamp(40px, 5vh, 72px) !important; background-color: var(--rc-paper) !important; } /* On a phone the copy stacks and the buttons go full-width, so the hero's contents only run to about 410px - the 560px cap above then left ~148px of bare paper under the CTA before the next band. Measured at 375px on both editions: content ended at y481 inside a hero ending at y629. */ @media (max-width: 640px) { .rc-home .uhs__section { min-height: min(calc(100svh - var(--rc-hdr-h)), 500px) !important; padding-bottom: clamp(28px, 4vh, 48px) !important; } } /* Heroloop.mp4 loads eagerly and plays with the page - no fade, no deferral, nothing to wait for - because it carries faststart, not because it is small (as of 2026-09-07 it is the untouched 24.7 MB master). The clip keeps its wave between roughly 33% and 78% of the frame, which left the crests sitting under the copy rather than behind it; the lift pulls them up so they run behind the badge, the headline and the buttons. The lift is a percentage of the video box, so it holds at every viewport. The bottom band it exposes is the clip's own empty white, against paper of the same colour - there is no visible edge. */ .rc-home .uhs__bg-video { /* The clip's ink sits in a rock-steady band from 42% to 80% of the frame for the whole 20s loop, so where it lands is arithmetic, not taste: the lift decides where that band falls, the zoom decides how tall it is. Both are needed. Unzoomed, the band renders 304px tall against 303px of copy from the badge to the bottom of the buttons - covering it leaves a 0.2% window on the lift, which any change to the type would break. At 1.5 the band is ~456px and there is real slack, and the hero can be short enough not to leave a hole above the next section. Verified: badge, headline and both buttons all sit on the wave, on both editions, desktop and mobile. */ --rc-video-lift: 28%; --rc-video-zoom: 1.5; transform: translateY(calc(var(--rc-video-lift) * -1)) scale(var(--rc-video-zoom)) !important; clip-path: none !important; opacity: 1 !important; } /* The headline sits on top of a moving video. A directional scrim guarantees contrast on every frame without dulling the artwork on the right. */ .rc-home .uhs__bg-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(245, 245, 240, .94) 0%, rgba(245, 245, 240, .80) 34%, rgba(245, 245, 240, .22) 62%, rgba(245, 245, 240, 0) 88%), linear-gradient(to bottom, rgba(245, 245, 240, .55) 0%, rgba(245, 245, 240, 0) 26%); } .rc-home .uhs__container { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .uhs__text-col { gap: clamp(1.25rem, 2.4vw, 2rem) !important; /* wide enough that "THROUGH SOLIDARITY" — which cannot wrap — still fits on one line at the largest heading size */ max-width: min(58rem, 100%); } /* — badge — */ .rc-home .uhs__badge { gap: .6rem !important; padding: .5rem 1rem .5rem .75rem !important; border: 1px solid rgba(13, 15, 18, .10) !important; background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--rc-sh-1) !important; transition: background .3s var(--rc-ease), box-shadow .3s var(--rc-ease), transform .3s var(--rc-ease) !important; } .rc-home .uhs__badge:hover { background: rgba(255, 255, 255, .85) !important; box-shadow: var(--rc-sh-2) !important; transform: translateY(-1px); } .rc-home .uhs__badge-dot { width: .5rem !important; height: .5rem !important; background: var(--rc-accent) !important; box-shadow: 0 0 0 4px rgba(6, 182, 212, .16); } .rc-home .uhs__badge-text { font-size: .7rem !important; letter-spacing: .22em !important; color: var(--rc-ink-70) !important; } @media (min-width: 640px) { .rc-home .uhs__badge-text { font-size: .75rem !important; } } /* — headline — One fluid ramp instead of the 38px → 60px → 72px step ladder, which left an awkward dead zone between 500px and 640px wide. */ .rc-home .uhs__heading { font-size: clamp(2.35rem, 5.6vw, 4.35rem) !important; line-height: 1.04 !important; letter-spacing: -.045em !important; } /* One orchestrated arrival: the badge drops in, the headline rises, the cyan bar sweeps out from under SOLIDARITY, the buttons follow. Three bugs were making this read as a glitch rather than an animation, all fixed below — keep them in mind before editing: 1. `transform: rotate(-1.2deg) !important` used to sit on the bar itself. An !important declaration outranks @keyframes, so the wipe that was supposed to animate `transform` silently never ran and the bar simply appeared at full width. The rotation is now static and the sweep runs on `clip-path`, which nothing else on the element touches. 2. The headline animated `clip-path` from `inset(0 0 102% 0)`. clip-path clips descendants, so the rotated bar and its shadow were cut off for the length of the animation and then popped back at the final frame. The headline now moves on opacity + transform only. 3. The bar is sized to the width of the word in front of it, so a Roboto swap landing mid-sweep re-flowed it. The sweep is held back to .34s, by which point the (2.7KB, preconnected) font stylesheet has resolved. Do NOT reach for `animation-play-state: paused` and a JS release class to tighten this further: with `fill: both` that strands the headline on its opening frame — invisible — anywhere the document timeline is frozen, which includes background tabs and embedded views. Tried, measured, reverted. */ .rc-home .uhs__badge { animation: rc-hero-drop .55s var(--rc-ease-out) .04s both !important; } .rc-home .uhs__heading { animation: rc-hero-rise .72s var(--rc-ease-out) .1s both !important; } .rc-home .uhs__cta-row { animation: rc-hero-drop .6s var(--rc-ease-out) .46s both !important; } @keyframes rc-hero-drop { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } @keyframes rc-hero-rise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } } .rc-home .uhs__heading-highlight-wrap { margin-top: .35rem !important; } .rc-home .uhs__heading-highlight-text { padding-inline: .55rem !important; } /* The sweep. `clip-path` rather than scaleX so the 4px corners and the drop shadow keep their shape instead of being stretched, and the negative insets in both keyframes leave the shadow room to bleed — an `inset(0)` end state would clip it off. */ .rc-home .uhs__heading-highlight-bg { border-radius: 4px; transform: rotate(-1.2deg); box-shadow: 0 12px 26px -12px var(--rc-accent-glow); animation: rc-hero-sweep .66s var(--rc-ease-out) .34s both !important; } @keyframes rc-hero-sweep { from { clip-path: inset(-60% 100% -60% -10%) } to { clip-path: inset(-60% -16% -60% -10%) } } /* — buttons — Three CTAs as of 2026-09-07 (Contact Us / Join the Community / Explore the Ecosystem). They share one height, one radius, one press and — the point — ONE hover: an accent wash wiped in from the left on `clip-path`. Only the resting surface differs between them. The wipe is deliberately the same gesture as the headline's highlight bar (rc-hero-sweep, above), which is what stops a three-button row reading as three unrelated controls. It also replaces the export's original hover, an infinite 1.5s shimmer loop that ran for as long as the pointer rested on a button. Layering has no z-index in it on purpose: .uhs__btn-wipe and .uhs__btn-label are both positioned children of the anchor, so they paint in DOM order — wipe over the background, label over the wipe. A `z-index: -1` on the wipe would put it behind the anchor's own background and make it invisible. */ .rc-home .uhs__cta-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: .75rem !important; align-items: stretch; } .rc-home .uhs__btn { position: relative; overflow: hidden !important; min-height: 56px !important; min-width: 0 !important; padding: 0 1.6rem !important; border-radius: 999px !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: -.005em !important; transition: transform .3s var(--rc-ease), box-shadow .3s var(--rc-ease), color .3s var(--rc-ease), border-color .3s var(--rc-ease), background .3s var(--rc-ease) !important; } .rc-home .uhs__btn-label { position: relative; display: inline-flex; align-items: center; gap: .5rem !important; white-space: nowrap; } /* The wash. Reuses the export's existing shimmer span rather than adding an element, so the markup stays the shape the base CSS expects — hence the overrides killing its width/height/transform/animation. */ .rc-home .uhs__btn-wipe { position: absolute; inset: 0; width: auto !important; height: auto !important; transform: none !important; animation: none !important; background: linear-gradient(100deg, var(--rc-accent-600) 0%, var(--rc-accent) 100%) !important; clip-path: inset(0 100% 0 0); transition: clip-path .44s var(--rc-ease-out); } .rc-home .uhs__btn:hover .uhs__btn-wipe, .rc-home .uhs__btn:focus-visible .uhs__btn-wipe { /* -2px, not 0: an inset(0) end state leaves a hairline of the resting surface showing at the right edge on fractional layout widths. */ clip-path: inset(0 -2px 0 0); } .rc-home .uhs__btn:hover, .rc-home .uhs__btn:focus-visible { color: var(--rc-white) !important; border-color: transparent !important; transform: translateY(-2px) !important; box-shadow: 0 16px 34px -14px var(--rc-accent-glow), 0 4px 10px -6px rgba(13, 15, 18, .25) !important; } .rc-home .uhs__btn:active { transform: translateY(0) scale(.985) !important; } .rc-home .uhs__btn:focus-visible { outline: 2px solid var(--rc-accent-600) !important; outline-offset: 3px; } /* resting surfaces */ .rc-home .uhs__btn--primary { background: var(--rc-ink) !important; color: var(--rc-paper) !important; border: 1px solid transparent !important; box-shadow: 0 10px 24px -10px rgba(13, 15, 18, .55) !important; } .rc-home .uhs__btn--accent { background: rgba(255, 255, 255, .58) !important; color: var(--rc-accent-600) !important; border: 1px solid rgba(6, 182, 212, .45) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--rc-sh-1) !important; } .rc-home .uhs__btn--ghost { background: rgba(255, 255, 255, .58) !important; color: var(--rc-ink) !important; border: 1px solid var(--rc-line-strong) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--rc-sh-1) !important; } /* Icons, on whichever button carries one. Both react to hover, but not the same way: an arrow means "onward" so it travels, while a brand mark is an identity - Discord's logo sliding out from under its own label looks like a glitch. The mark swells slightly instead, which reads as a press response rather than movement. */ .rc-home .uhs__btn-icon { transition: transform .3s var(--rc-ease) !important; flex-shrink: 0; } .rc-home .uhs__btn:hover .uhs__btn-icon--arrow, .rc-home .uhs__btn:focus-visible .uhs__btn-icon--arrow { transform: translateX(5px) !important; } .rc-home .uhs__btn:hover .uhs__btn-icon--brand, .rc-home .uhs__btn:focus-visible .uhs__btn-icon--brand { transform: scale(1.12) !important; } /* No destination yet (Discord — issue #27). Visibly inert rather than a button that looks live and goes nowhere. Delete nothing to enable it: filling RC_HERO_DISCORD_URL in home-hero-vars.php drops the modifier. */ .rc-home .uhs__btn--pending { background: rgba(255, 255, 255, .38) !important; color: var(--rc-ink-38) !important; border: 1px dashed var(--rc-line-strong) !important; box-shadow: none !important; cursor: not-allowed; pointer-events: none; } .rc-home .uhs__btn--pending .uhs__btn-wipe { display: none; } /* — the CTA row at three buttons — Natural widths on a wide screen. The three labels measure ~120px, ~215px and ~205px plus two .75rem gaps, about 565px against a text column that runs to 928px, so they sit on one line with room to spare. */ /* Tablet and narrow desktop: 565px of buttons stops fitting somewhere around a 660px container, so the row wraps. Letting the items grow means a 2 + 1 wrap fills both lines instead of leaving a short, ragged second row. */ @media (max-width: 860px) and (min-width: 641px) { .rc-home .uhs__cta-row > .uhs__btn { flex: 1 1 auto; } } /* Phone: stack full-width. This used to be two buttons at 56px with a 1.5rem gap; three of those would add ~70px of column to a hero that only has ~148px of slack under the copy at 375px. Trimming the height to 52px and the gap to .625rem spends 32px of that instead of 70px. flex-direction has to be re-declared here: the base rule in index.php goes to column below 640px, but the !important row above would otherwise win at every width. */ @media (max-width: 640px) { .rc-home .uhs__cta-row { flex-direction: column !important; gap: .625rem !important; width: 100%; } .rc-home .uhs__cta-row > .uhs__btn { width: 100% !important; min-height: 52px !important; padding: 0 1.25rem !important; } /* The one place a label can outgrow its button. At 320px the widest label has ~270px of room, and "Explore the Ecosystem" needs ~205px, so nowrap holds — but a longer label added later should shrink rather than overflow the pill. */ .rc-home .uhs__btn-label { white-space: normal; text-align: center; } } /* ========================================================================== 04 LIVE STATS ========================================================================== */ .rc-home .uhs__stats-section { background-color: var(--rc-paper) !important; padding: 0 0 var(--rc-band) !important; } .rc-home .uhs__stats-outer, .rc-home .uhs__stats-inner { border-radius: var(--rc-r-xl) !important; } /* The dark panel is the page's one inverted surface — give it real depth: a lit top edge, a soft vignette pulling attention to the numbers, and a hairline that keeps it from floating shapelessly on the paper. */ .rc-home .uhs__stats-inner { position: relative !important; box-shadow: var(--rc-sh-3), inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(255, 255, 255, .05) !important; } .rc-home .uhs__stats-inner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 90% 70% at 50% 42%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .28) 100%); } .rc-home .uhs__stats-content { position: relative !important; z-index: 2 !important; } .rc-home .uhs__stats-content { padding: clamp(28px, 4vw, 52px) !important; } /* header row */ .rc-home .uhs__stats-header { display: flex !important; align-items: center !important; gap: clamp(16px, 3vw, 32px) !important; flex-wrap: wrap !important; margin-bottom: clamp(28px, 4vw, 44px) !important; } .rc-home .uhs__stats-live-pill { gap: .5rem !important; padding: 6px 14px 6px 10px !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .16) !important; background: rgba(255, 255, 255, .07) !important; } .rc-home .uhs__stats-live-label { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .2em !important; text-transform: uppercase !important; } .rc-home .uhs__stats-title { letter-spacing: -.04em !important; line-height: 1.06 !important; margin-top: 14px !important; } .rc-home .uhs__stats-divider { flex: 1 1 40px !important; height: 1px !important; background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)) !important; border: 0 !important; } .rc-home .uhs__stats-caption { max-width: 30ch !important; line-height: 1.65 !important; } /* cards */ /* The column count is left to each page's own stylesheet — English runs two cards, Japanese runs five — so only the gutter is normalised here. */ .rc-home .uhs__cards-grid { gap: clamp(16px, 2.2vw, 24px) !important; } .rc-home .uhs__stat-card { position: relative !important; padding: clamp(22px, 2.6vw, 30px) !important; border-radius: var(--rc-r-lg) !important; border: 1px solid rgba(255, 255, 255, .10) !important; background: linear-gradient(160deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .035) 100%) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden !important; transition: transform .4s var(--rc-ease), border-color .4s var(--rc-ease), background .4s var(--rc-ease) !important; } .rc-home .uhs__stat-card:hover { transform: translateY(-4px) !important; border-color: rgba(6, 182, 212, .45) !important; background: linear-gradient(160deg, rgba(6, 182, 212, .12) 0%, rgba(255, 255, 255, .04) 100%) !important; } /* icon chip — was a flat square, now a lit tile that matches the CTA arrows */ .rc-home .uhs__stat-icon { width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; background: linear-gradient(140deg, var(--rc-accent) 0%, var(--rc-accent-600) 100%) !important; box-shadow: 0 10px 22px -10px var(--rc-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35) !important; margin-bottom: 20px !important; transition: transform .4s var(--rc-ease) !important; } .rc-home .uhs__stat-card:hover .uhs__stat-icon { transform: translateY(-2px) rotate(-4deg) !important; } .rc-home .uhs__stat-label { font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase !important; opacity: .62 !important; margin-bottom: 10px !important; } .rc-home .uhs__stat-number { font-size: clamp(2rem, 4.2vw, 2.9rem) !important; font-weight: 900 !important; letter-spacing: -.035em !important; line-height: 1 !important; margin-bottom: 20px !important; } .rc-home .uhs__stat-bar-bg { height: 7px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .10) !important; overflow: hidden !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important; } .rc-home .uhs__stat-bar-fill { height: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--rc-accent-600), var(--rc-accent)) !important; box-shadow: 0 0 14px rgba(6, 182, 212, .55) !important; /* the inline width= is the target; JS animates from 0 on reveal */ transform-origin: left center; transform: scaleX(var(--rc-bar, 1)); transition: transform 1.4s var(--rc-ease-out) .15s; } .rc-home .uhs__stat-note { margin-top: 12px !important; font-size: .8rem !important; opacity: .55 !important; } /* A five-up row (the Japanese year-by-year breakdown) needs a tighter card than a two-up row, or the figures collide with their own padding. */ .rc-home .uhs__cards-grid:has(> :nth-child(5)) .uhs__stat-card { padding: clamp(18px, 1.7vw, 24px) !important; } .rc-home .uhs__cards-grid:has(> :nth-child(5)) .uhs__stat-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; margin-bottom: 16px !important; } .rc-home .uhs__cards-grid:has(> :nth-child(5)) .uhs__stat-number { font-size: clamp(1.5rem, 2.1vw, 2.1rem) !important; margin-bottom: 16px !important; } .rc-home .uhs__cards-grid:has(> :nth-child(5)) .uhs__stat-label { font-size: .68rem !important; letter-spacing: .12em !important; } .rc-home .uhs__stats-mobile-note { margin-top: clamp(24px, 3vw, 34px) !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; font-size: .78rem !important; line-height: 1.7 !important; opacity: .5 !important; } /* ========================================================================== 05 BELIEF ========================================================================== */ .rc-home .ubs__section { background: var(--rc-white) !important; border-top: 1px solid var(--rc-line) !important; } .rc-home .ubs__container { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .ubs__grid { gap: clamp(40px, 6vw, 88px) !important; align-items: center !important; } .rc-home .ubs__label-wrap { display: inline-flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 20px !important; } .rc-home .ubs__label-text { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--rc-accent-600) !important; } .rc-home .ubs__label-line { height: 2px !important; width: 40px !important; border-radius: 2px !important; background: linear-gradient(90deg, var(--rc-accent), rgba(6, 182, 212, 0)) !important; } .rc-home .ubs__heading { font-size: clamp(2rem, 4.2vw, 3.35rem) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; margin-bottom: 22px !important; } .rc-home .ubs__body { font-size: clamp(1rem, 1.15vw, 1.075rem) !important; line-height: 1.85 !important; color: var(--rc-body) !important; max-width: 58ch !important; } /* background ring — pull it right back, it was competing with the diagram */ .rc-home .ubs__bg-svg circle { stroke-opacity: .10 !important; } /* diagram nodes get depth + a readable hover affordance */ .rc-home .ubs__node { cursor: pointer; transition: transform .35s var(--rc-ease) !important; } .rc-home .ubs__node-circle { filter: drop-shadow(0 14px 22px rgba(13, 15, 18, .22)); transition: fill .35s var(--rc-ease) !important; } .rc-home .ubs__node:hover .ubs__node-circle { fill: var(--rc-accent-600) !important; } /* ========================================================================== 06 PARTNERS ========================================================================== */ .rc-home .ups__container { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .ups__header { max-width: 44rem; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 5vw, 64px) !important; } /* every band on the page now shares the same eyebrow language */ .rc-home .ups__eyebrow { display: inline-block !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .24em !important; color: var(--rc-accent-600) !important; margin-bottom: 16px !important; } .rc-home .ups__heading { font-size: clamp(2rem, 4.2vw, 3.2rem) !important; font-weight: 900 !important; letter-spacing: -.04em !important; line-height: 1.08 !important; color: var(--rc-ink) !important; margin-bottom: 18px !important; } .rc-home .ups__accent-line { width: 56px !important; height: 3px !important; background: linear-gradient(90deg, var(--rc-accent), var(--rc-accent-600)) !important; margin-bottom: 20px !important; } .rc-home .ups__subheading { font-size: 1.0625rem !important; line-height: 1.7 !important; color: var(--rc-ink-55) !important; font-weight: 400 !important; } /* Mask beats gradient overlays: the fade follows whatever the section background happens to be, and it survives a theme change. */ .rc-home .ups__fade-left, .rc-home .ups__fade-right { display: none !important; } .rc-home .ups__marquee-overflow { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } .rc-home .ups__marquee-track { padding-inline: 2rem !important; } /* -------------------------------------------------------------------------- "Recognized by Leading Organizations Worldwide" — two rows, Clients and Partnerships, ported from the Robo Lab site at Aslan's request. The single grey-scaled strip that used to live here is gone: nine of its eleven logos were repeated in the Partnerships row below, so keeping both meant scrolling past the same nine logos twice on one page. Everything numeric here is Robo Lab's, not a re-interpretation: 56px optical height, 260px ceiling, 6rem between logos (its images carry `margin: 0 3rem`), scale(1.05) on hover. Note these logos are full colour. The strip this replaces desaturated them to sit quietly behind the copy; this section IS the content, and Robo Lab shows them in colour, so they keep it. -------------------------------------------------------------------------- */ .rc-home .ups__award-row .ups__marquee-track { gap: 6rem !important; } .rc-home .ups__award-row + .ups__award-row { margin-top: clamp(40px, 5vw, 64px); } .rc-home .ups__row-label { margin: 0 0 1.5rem !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: .15em !important; text-transform: uppercase !important; text-align: center; /* Robo Lab's own slate, kept so the two sites read as one family. */ color: #7089A1 !important; } /* text-transform does nothing to kana, and .15em of tracking on a short Japanese label pulls it into separate marks - so JA gets its own. */ .rc-home .ups__row-label:lang(ja) { letter-spacing: .06em !important; font-size: 1.05rem !important; } .rc-home .ups__award-logo { height: 56px; width: auto; max-width: 260px; flex-shrink: 0; object-fit: contain; transition: transform .3s ease; } .rc-home .ups__award-logo:hover { transform: scale(1.05); } /* Speed, not duration, is the thing being matched. ups-marquee travels by half the track, so px/sec depends on how wide the logos happen to be: Robo Lab runs Clients at ~52px/s and Partnerships at ~116px/s, and these are the durations that reproduce that at our track widths. Re-measure if the roster changes - see the PR for the arithmetic. */ .rc-home .ups__marquee-track--clients { /* 30s, not Robo Lab's 36s. Dropping Aeon took this track from 3606px to 3072px, and since the animation travels by half the track a fixed duration turns a narrower row into a SLOWER one - it had fallen to 42.7 px/s. 30s puts it back to 51.2, which is where it was before and within a whisker of Robo Lab's 52. */ animation-duration: 30s !important; } .rc-home .ups__marquee-track--partners { animation-duration: 31s !important; } @media (max-width: 640px) { .rc-home .ups__award-row .ups__marquee-track { gap: 3.5rem !important; } .rc-home .ups__award-logo { height: 44px; max-width: 190px; } } .rc-home .ups__footer-note { margin-top: clamp(28px, 4vw, 44px) !important; } .rc-home .ups__footer-note p { color: var(--rc-ink-38) !important; letter-spacing: .01em !important; } /* ========================================================================== 07 MODEL ========================================================================== */ .rc-home .ums__inner { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .ums__eyebrow { color: var(--rc-accent-600) !important; letter-spacing: .24em !important; margin-bottom: 16px !important; } .rc-home .ums__eyebrow-line { width: 40px !important; background: linear-gradient(90deg, var(--rc-accent), rgba(6, 182, 212, 0)) !important; } .rc-home .ums__heading { font-size: clamp(2rem, 4.2vw, 3.35rem) !important; letter-spacing: -.042em !important; } .rc-home .ums__subhead { font-size: 1.0625rem !important; line-height: 1.7 !important; margin-bottom: clamp(44px, 6vw, 72px) !important; } .rc-home .ums__grid { gap: clamp(20px, 2.6vw, 32px) !important; } /* Coloured 2px outlines made the cards look like alert boxes. A hairline card with a coloured cap reads calmer and still keeps the colour coding. */ .rc-home .ums__card { border: 1px solid var(--rc-line) !important; border-radius: var(--rc-r-xl) !important; box-shadow: var(--rc-sh-2) !important; isolation: isolate; transition: transform .45s var(--rc-ease), box-shadow .45s var(--rc-ease), border-color .45s var(--rc-ease) !important; } .rc-home .ums__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; z-index: 3; border-radius: var(--rc-r-xl) var(--rc-r-xl) 0 0; } .rc-home .ums__card--scholarship::before { background: linear-gradient(90deg, var(--rc-gold), #FDE68A); } .rc-home .ums__card--outsource::before { background: linear-gradient(90deg, var(--rc-green), #A7F3D0); } .rc-home .ums__card:hover { transform: translateY(-8px) !important; box-shadow: var(--rc-sh-3) !important; } .rc-home .ums__card--scholarship:hover { border-color: rgba(248, 176, 62, .55) !important; } .rc-home .ums__card--outsource:hover { border-color: rgba(67, 173, 96, .55) !important; } .rc-home .ums__illo { height: clamp(220px, 26vw, 280px) !important; } .rc-home .ums__body { padding: clamp(26px, 3vw, 38px) !important; } .rc-home .ums__tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 5px 13px 5px 11px !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .2em !important; text-transform: uppercase !important; } .rc-home .ums__card--scholarship .ums__tag { color: #92610F !important; background: rgba(248, 176, 62, .16) !important; } .rc-home .ums__card--outsource .ums__tag { color: #1F7A42 !important; background: rgba(67, 173, 96, .14) !important; } .rc-home .ums__card-title { font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; font-weight: 900 !important; letter-spacing: -.03em !important; line-height: 1.15 !important; margin: 16px 0 0 !important; color: var(--rc-ink) !important; } .rc-home .ums__divider { height: 2px !important; width: 48px !important; border-radius: 2px !important; margin: 20px 0 24px !important; border: 0 !important; } .rc-home .ums__card--scholarship .ums__divider { background: linear-gradient(90deg, var(--rc-gold), rgba(248, 176, 62, 0)) !important; } .rc-home .ums__card--outsource .ums__divider { background: linear-gradient(90deg, var(--rc-green), rgba(67, 173, 96, 0)) !important; } .rc-home .ums__features { display: grid !important; gap: 18px !important; } .rc-home .ums__feat { display: grid !important; grid-template-columns: 38px 1fr !important; gap: 14px !important; align-items: start !important; } .rc-home .ums__feat-icon { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; transition: transform .35s var(--rc-ease), background .35s var(--rc-ease) !important; } /* the chip picks up its card's colour so the icon sits in a tile that belongs to it, rather than a generic cyan one on both cards */ .rc-home .ums__card--scholarship .ums__feat-icon { background: rgba(6, 182, 212, .10) !important; box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .20) !important; } .rc-home .ums__card--outsource .ums__feat-icon { background: rgba(67, 173, 96, .10) !important; box-shadow: inset 0 0 0 1px rgba(67, 173, 96, .22) !important; } .rc-home .ums__card--scholarship:hover .ums__feat-icon { background: rgba(6, 182, 212, .18) !important; } .rc-home .ums__card--outsource:hover .ums__feat-icon { background: rgba(67, 173, 96, .18) !important; } .rc-home .ums__feat:hover .ums__feat-icon { transform: translateY(-2px) scale(1.06) !important; } .rc-home .ums__feat-text { font-size: .9rem !important; line-height: 1.6 !important; color: var(--rc-ink-55) !important; } .rc-home .ums__feat-text strong { display: block !important; font-size: .95rem !important; font-weight: 700 !important; color: var(--rc-ink) !important; margin-bottom: 3px !important; letter-spacing: -.01em !important; } /* ========================================================================== 08 ECOSYSTEM ========================================================================== */ .rc-home .rec__inner { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .rec__header { margin-bottom: clamp(44px, 6vw, 72px) !important; } /* the solid cyan eyebrow chip was the loudest thing on the page — quiet it down to match the eyebrows used everywhere else */ .rc-home .rec__eyebrow { color: var(--rc-accent-600) !important; background: rgba(6, 182, 212, .10) !important; border-color: rgba(6, 182, 212, .28) !important; padding: 6px 15px !important; } .rc-home .rec__eyebrow span { background: var(--rc-accent) !important; } .rc-home .rec__title { letter-spacing: -.042em !important; } .rc-home .rec__subtitle { font-size: 1.0625rem !important; line-height: 1.7 !important; } .rc-home .rec__grid { gap: clamp(20px, 2.6vw, 30px) !important; } .rc-home .rec__card { box-shadow: var(--rc-sh-2) !important; transition: transform .45s var(--rc-ease), box-shadow .45s var(--rc-ease) !important; } /* The card shipped with a conic-gradient "sweep" spinning on ::before at 3s forever. It was meant to read as a light travelling the 2px card edge, but the illustration panel above it has no background of its own, so the whole cone shone straight through the artwork — a coloured searchlight rotating behind each logo, permanently. Kept: the 2px inlay. Replaced: the rotation, with a fixed brand-tinted gradient edge that is brightest at the top-left and fades into a neutral hairline. Still a lit edge, no longer a spinning one. */ .rc-home .rec__card::before { inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 28px !important; animation: none !important; background: linear-gradient(150deg, var(--c) 0%, color-mix(in srgb, var(--c) 34%, transparent) 26%, rgba(13, 15, 18, .10) 58%, rgba(13, 15, 18, .07) 100%) !important; transition: opacity .45s var(--rc-ease); opacity: .55; } .rc-home .rec__card:hover::before { opacity: 1; } /* An opaque, brand-tinted surface for the lockup to sit on: a soft wash from the brand colour down to paper, plus a fine engineering grid. This is what the sweep was papering over. */ .rc-home .rec__illo { background: radial-gradient(ellipse 78% 62% at 50% 34%, color-mix(in srgb, var(--c) 13%, transparent) 0%, transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #FFFFFF) 0%, #FFFFFF 78%) !important; transition: background .45s var(--rc-ease) !important; } .rc-home .rec__illo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-image: linear-gradient(to right, rgba(13, 15, 18, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 15, 18, .045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 10%, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 10%, transparent 78%); } .rc-home .rec__card:hover .rec__illo { background: radial-gradient(ellipse 78% 62% at 50% 34%, color-mix(in srgb, var(--c) 22%, transparent) 0%, transparent 74%), linear-gradient(180deg, color-mix(in srgb, var(--c) 11%, #FFFFFF) 0%, #FFFFFF 78%) !important; } .rc-home .rec__card:hover { transform: translateY(-10px) !important; } .rc-home .rec__domain { font-variant-numeric: tabular-nums; letter-spacing: .01em !important; } .rc-home .rec__cardtitle { letter-spacing: -.03em !important; line-height: 1.2 !important; } .rc-home .rec__promise { line-height: 1.5 !important; } .rc-home .rec__desc { line-height: 1.72 !important; } .rc-home .rec__cta { display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: gap .3s var(--rc-ease), color .3s var(--rc-ease) !important; } .rc-home .rec__card:hover .rec__cta { gap: 14px !important; } .rc-home .rec__note-btn:hover { background: var(--rc-accent-600) !important; transform: translateY(-2px); box-shadow: 0 14px 28px -10px var(--rc-accent-glow) !important; } /* ========================================================================== 09 STORIES ========================================================================== */ .rc-home .ust__inner { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .ust__eyebrow { letter-spacing: .24em !important; color: var(--rc-accent-600) !important; } .rc-home .ust__title { letter-spacing: -.042em !important; margin-bottom: clamp(40px, 5.5vw, 64px) !important; } .rc-home .ust__stage { gap: clamp(20px, 2.6vw, 30px) !important; } /* The永久 float animation made the two cards drift out of alignment with each other and forced a repaint on every frame. Motion now belongs to the pointer instead. */ .rc-home .ust__card { animation: none !important; transform: none !important; padding: clamp(30px, 4vw, 46px) clamp(26px, 4vw, 46px) clamp(26px, 3.4vw, 40px) !important; border: 1px solid var(--rc-line) !important; border-radius: var(--rc-r-xl) !important; box-shadow: var(--rc-sh-2) !important; transition: transform .45s var(--rc-ease), box-shadow .45s var(--rc-ease), border-color .45s var(--rc-ease) !important; } .rc-home .ust__card:hover { transform: translateY(-8px) !important; box-shadow: var(--rc-sh-3) !important; } .rc-home .ust__card--mohamad:hover { border-color: rgba(6, 182, 212, .40) !important } .rc-home .ust__card--rozma:hover { border-color: rgba(90, 181, 181, .45) !important } .rc-home .ust__card-bar { height: 4px !important; } /* These two were rendering crushed to 16px wide (see the SVG repair note). At their real size they carry real weight, so dial the ink back down. */ .rc-home .ust__quote-svg { opacity: .07 !important; top: 26px !important; right: 28px !important; } .rc-home .ust__corner-decoration { opacity: .05 !important; } .rc-home .ust__portrait { width: 92px !important; height: 92px !important; box-shadow: 0 10px 24px -10px rgba(13, 15, 18, .35) !important; } .rc-home .ust__portrait-ring { animation-duration: 32s !important; opacity: .7 !important; } .rc-home .ust__text { font-size: 1.05rem !important; line-height: 1.8 !important; color: var(--rc-body) !important; max-width: 46ch !important; } .rc-home .ust__name { letter-spacing: -.015em !important; } .rc-home .ust__role { color: var(--rc-ink-38) !important; } /* a decorative progress bar that never reflects real progress reads as a broken loader — drop it, the card bar already carries the accent */ .rc-home .ust__progress { display: none !important; } .rc-home .ust__video-wrap { margin-top: clamp(40px, 5vw, 64px) !important; text-align: center !important; } .rc-home .ust__video-btn { min-height: 56px !important; padding: 0 30px !important; border-radius: 999px !important; letter-spacing: .12em !important; box-shadow: 0 12px 26px -12px rgba(13, 15, 18, .55) !important; transition: transform .3s var(--rc-ease), box-shadow .3s var(--rc-ease), background .3s var(--rc-ease) !important; } .rc-home .ust__video-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 38px -16px rgba(13, 15, 18, .6) !important; } .rc-home .ust__video-btn:active { transform: translateY(0) scale(.985) !important; } /* ========================================================================== 10 GET INVOLVED (CTA) ========================================================================== */ .rc-home .uct__wrap { max-width: var(--rc-measure) !important; padding-inline: var(--rc-gutter) !important; } .rc-home .uct__head { margin-bottom: clamp(40px, 5.5vw, 64px) !important; } .rc-home .uct__kicker { letter-spacing: .24em !important; } .rc-home .uct__title { letter-spacing: -.042em !important; line-height: 1.08 !important; } .rc-home .uct__text { font-size: 1.0625rem !important; line-height: 1.75 !important; } .rc-home .uct__cards { gap: clamp(18px, 2.4vw, 28px) !important; } .rc-home .uct__card { border-radius: var(--rc-r-xl) !important; border: 1px solid var(--rc-line) !important; box-shadow: var(--rc-sh-2) !important; overflow: hidden !important; transition: transform .45s var(--rc-ease), box-shadow .45s var(--rc-ease), border-color .45s var(--rc-ease) !important; } .rc-home .uct__card:hover { transform: translateY(-8px) !important; box-shadow: var(--rc-sh-3) !important; } .rc-home .uct__scene { overflow: hidden !important; } .rc-home .uct__svg { transition: transform .6s var(--rc-ease) !important; } .rc-home .uct__card:hover .uct__svg { transform: scale(1.05) !important; } .rc-home .uct__card--gold:hover .uct__rotate-180, .rc-home .uct__card--green:hover .uct__rotate-180, .rc-home .uct__card--violet:hover .uct__rotate-180 { transform: rotate(180deg) scale(1.05) !important; } .rc-home .uct__card-title { letter-spacing: -.03em !important; } .rc-home .uct__card-copy { line-height: 1.72 !important; } .rc-home .uct__arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 999px !important; transition: transform .35s var(--rc-ease), background .35s var(--rc-ease), color .35s var(--rc-ease) !important; } .rc-home .uct__card:hover .uct__arrow { transform: translateX(4px) !important; } /* On narrow screens the three cards become a swipeable rail with snap points rather than a 3-deep stack the user has to scroll past. */ @media (max-width: 860px) { .rc-home .uct__rail { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--rc-gutter) * -1); padding-inline: var(--rc-gutter); } .rc-home .uct__rail::-webkit-scrollbar { display: none; } .rc-home .uct__cards { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; } .rc-home .uct__card { flex: 0 0 min(84vw, 340px) !important; scroll-snap-align: center; } } /* ========================================================================== 10b OFF-SCREEN ANIMATION GATING The exported page keeps ~200 CSS keyframe loops and SVG timers running simultaneously, all the way down the document, whether or not the band is on screen. That pins a core, drains battery on laptops and phones, and on slower machines starves the compositor badly enough that scrolling stutters. Bands outside the viewport are parked instead. Implemented in home-enhance.js rather than here: only animations that loop forever are paused (found through the Web Animations API), plus each band's SVG SMIL timeline and the hero video. Finite entrance animations are never touched, so no content can be stranded mid-fade. ========================================================================== */ /* ========================================================================== 11 SCROLL REVEAL ========================================================================== */ .rc-home .rc-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--rc-ease-out), transform .7s var(--rc-ease-out); will-change: opacity, transform; } .rc-home .rc-rv.rc-in { opacity: 1; transform: none; will-change: auto; } .rc-home .rc-rv[data-rc-delay="1"] { transition-delay: .07s } .rc-home .rc-rv[data-rc-delay="2"] { transition-delay: .14s } .rc-home .rc-rv[data-rc-delay="3"] { transition-delay: .21s } /* ========================================================================== 12 REDUCED MOTION Anything that loops forever is switched off — the page is dense with SVG loops, marquees and pulsing orbs. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html:has(body.rc-home) { scroll-behavior: auto; } .rc-home *, .rc-home *::before, .rc-home *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .rc-home .ups__marquee-track { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; width: 100% !important; } /* With the animation off the track wraps into a static grid, which would otherwise show the loop's duplicate set as a second copy of every logo. They are already aria-hidden; hide them visually too. */ .rc-home .ups__award-logo[aria-hidden="true"] { display: none; } /* the hero video is held on its first frame by home-enhance.js §0b rather than removed — a still backdrop beats an empty one. CSS cannot pause a