/* ========================================================================== 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; min-height: min(calc(100svh - var(--rc-hdr-h)), 880px) !important; align-items: flex-start !important; padding-top: clamp(52px, 7.5vh, 104px) !important; padding-bottom: clamp(48px, 8vh, 104px) !important; background-color: var(--rc-paper) !important; } /* Heroloop.mp4 is re-encoded to 2.5 MB / 1.03 Mbps, so it loads eagerly and plays with the page - no fade, no deferral, nothing to wait for. 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: ink top = hero top + .42 x height - lift. At 34% the band clears the badge and runs down past the buttons, which puts all four elements of the hero on the wave rather than above it. */ --rc-video-lift: 34%; transform: translateY(calc(var(--rc-video-lift) * -1)) !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 — Both CTAs share one height, one radius and one press behaviour so the row reads as a single control group. */ .rc-home .uhs__cta-row { gap: .875rem !important; align-items: stretch; flex-wrap: wrap; } .rc-home .uhs__btn-primary, .rc-home .uhs__btn-secondary { min-height: 56px !important; min-width: 0 !important; padding: 0 1.75rem !important; border-radius: 999px !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: -.005em !important; transition: transform .28s var(--rc-ease), box-shadow .28s var(--rc-ease), background .28s var(--rc-ease), color .28s var(--rc-ease), border-color .28s var(--rc-ease) !important; } .rc-home .uhs__btn-primary { background: var(--rc-ink) !important; box-shadow: 0 10px 24px -10px rgba(13, 15, 18, .55) !important; } .rc-home .uhs__btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 36px -14px rgba(13, 15, 18, .6) !important; } .rc-home .uhs__btn-primary:active, .rc-home .uhs__btn-secondary:active { transform: translateY(0) scale(.985) !important; } .rc-home .uhs__btn-secondary { 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; } .rc-home .uhs__btn-secondary:hover { background: var(--rc-white) !important; border-color: var(--rc-accent) !important; color: var(--rc-accent-600) !important; transform: translateY(-2px) !important; box-shadow: var(--rc-sh-2) !important; } .rc-home .uhs__btn-primary svg { transition: transform .3s var(--rc-ease) !important; } .rc-home .uhs__btn-primary:hover svg { transform: translateX(5px) !important; } /* ========================================================================== 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 { gap: clamp(2rem, 3.4vw, 3.25rem) !important; padding-inline: 2rem !important; } .rc-home .ups__logo-slot { min-width: 0 !important; width: clamp(132px, 13vw, 168px) !important; height: 84px !important; padding: 0 8px !important; } /* Normalising to one optical height is the single biggest fix here — the raw logos ranged from tiny wordmarks to full-bleed lockups. */ .rc-home .ups__logo-img { height: auto !important; max-height: 54px !important; max-width: 100% !important; filter: grayscale(1) contrast(1.05) opacity(.72) !important; transition: filter .35s var(--rc-ease), transform .35s var(--rc-ease) !important; } @media (min-width: 768px) { .rc-home .ups__logo-img { max-height: 60px !important; } } .rc-home .ups__logo-slot:hover .ups__logo-img, .rc-home .ups__logo-img:hover { filter: none !important; transform: translateY(-3px) scale(1.04) !important; } .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; } /* 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