/* all2/index.html only — experimental Hero -> What We Do pinned scroll
transition (see docs/hero_to_what_we_do_transition_spec_v1.0.md).
Tokens and type below are the subset of docs/UI_DESIGN_GUIDELINES_v1.0.md
this page needs, copied rather than imported: all2 does not load
css/all.css, so nothing here can drift the production combined page. */
:root {
/* Guidelines 7.1 */
--a2-text: #111827;
--a2-text-soft: #3e4758;
--a2-muted: #697386;
--a2-navy: #101b3f;
--a2-violet: #6b4eff;
--a2-violet-dark: #4d35c5;
--a2-border: #d9dce5;
--a2-line: #b8bfcc;
/* Only 06 and 07 need a page background of their own: everything above
them is painted on the photo. */
--a2-paper: #f4f5f8;
--a2-surface: #ffffff;
/* Guidelines 8.1 */
--a2-font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
--a2-font-body: "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
--a2-motion-fast: 180ms;
--a2-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
/* Where the photo column starts. Must stay clear of hero2's second tear
at every height: with data-peel-shift-x="-0.09" on that tear
runs from ~29% at the top to ~41% at the bottom, so the figure starts
just right of its widest point. */
--a2-split: 43vw;
/* Progress rail: seven ticks spaced evenly (space-between) down this
height. js/HeroToWwdTransitionController.js moves the active ring
between them and measures the step off the rings rather than off these
values -- with space-between the gap is (height - one tick) / 6, not
height / 6, and getting that wrong puts the marker between rings. */
--a2-nav-h: 60vh;
--a2-nav-tick: 15px;
}
body.a2-body {
margin: 0;
background: #0b0b0c;
font-family: var(--a2-font-body);
}
/* ---- CTA (Guidelines 9.2) -------------------------------------------------
all/index.html gets this from css/all.css, which all2 deliberately does
not load; this is that file's .btn-primary, for the one button here. */
.btn-primary {
display: inline-flex;
min-height: 54px;
align-items: center;
justify-content: center;
padding: 14px 28px;
border: 1px solid var(--a2-violet);
border-radius: 4px;
color: #fff;
background: var(--a2-violet);
font-family: var(--a2-font-body);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--a2-motion-fast) ease,
border-color var(--a2-motion-fast) ease,
transform var(--a2-motion-fast) var(--a2-ease-standard);
}
.btn-primary:hover {
border-color: var(--a2-violet-dark);
background: var(--a2-violet-dark);
transform: translateY(-2px);
}
/* hero2/index.html has no CTA in this block, so css/hero2-tear.css leaves
no gap between the body copy and it. */
.a2-hero-copy .hero-cta {
margin-top: 1.6em;
}
/* ---- Pin scaffold -------------------------------------------------------
.scene (css/style.css) is itself `position:fixed; inset:0`, so it already
covers the viewport regardless of document scroll position. The pin
wrapper only needs to exist so ScrollTrigger has a normal-flow element to
measure and pin/unpin against; the actual visuals are the fixed .scene. */
.a2-pin-wrap {
position: relative;
height: 100vh;
/* Empty scaffolding, and while ScrollTrigger has it pinned it lies over
the whole stage in hit-testing order -- which swallowed every click on
05's category cards until this was here. It has nothing to click. The
spacer ScrollTrigger generates around it gets the same treatment for
the same reason. */
pointer-events: none;
}
.a2-body .pin-spacer {
pointer-events: none;
}
/* Below 1200px, or with reduced motion, the JS controller never builds the
ScrollTrigger pin and adds .a2-static instead (after heroSequenceDone):
every transition layer jumps to its finished pose and there is no pin.
The spacer keeps its 100vh even then, and must: 06 and 07 follow it in
normal flow with a solid background, so a collapsed spacer would start
them at the top of the document and bury the stage under Company Overview
before it had been seen at all. .scene itself is left alone -- it is
already fixed the whole time hero2 owns it. */
/* Once hero2 has finished, its own layers are scenery. #intact is the one
that has to be told: it is masked away to nothing by the tear, but a mask
does not take an element out of the hit path, so at z-index 6 it went on
covering the whole stage and swallowing every click meant for 05's
category cards. The scroll hint is faded out by then and just as invisibly
in the way. Every other hero layer already sets pointer-events: none. */
.a2-hero-done .paper,
.a2-hero-done .scroll-hint {
pointer-events: none;
}
/* ---- Colour-stage headline ------------------------------------------------
hero2 keeps "We break through the barriers." on screen for good. Here it
belongs to the first tear only, so it leaves with the second one: the
class lands when the peel starts (heroTearStage2Start) and the duration
is matched to that peel, so the line is gone by the time the white panel
is fully open. */
.a2-body .final-text {
transition: opacity 0.3s ease;
}
.a2-peeling .final-text {
opacity: 0;
}
/* Everything from here down belongs to the post-hero2 transition and must
stay invisible until heroSequenceDone fires (see
js/HeroToWwdTransitionController.js) -- otherwise it would show through
on top of hero2's own intro and tear-in.
There is deliberately no DOM layer for the gray fragment. Approximating
it here (a masked
of hero-gray.jpg over the canvases) flattened the
WebGL output and erased every tear edge with it; the fragment is a real
mesh in the band renderer and is moved there instead, via
TearRevealRenderer.setRetainedSheetOffset. */
/* ---- Frosted glass layer --------------------------------------------------
Spec 7.3 wants this clipped to the torn region, sharing the tear's own
mask. It gets that for free by sitting BETWEEN the two hero canvases
rather than on top of them: z-index 2 is above the band canvas
(z-index 1, the photo) and below the diagonal-peel canvas (z-index 3).
Stage 2 draws nothing where the sheet is intact -- only the torn-away
flap in solid white, its ragged fibre edge and its shadow. So it paints
over this layer on the left, and the boundary between frosted photo and
white panel becomes the real ragged tear, fibres and all. An earlier
version clipped this box at a straight 40vw instead, and that hard line
is what replaced the tear when What We Do came in.
Hence inset:0 rather than a left offset: the part that runs under the
flap is simply hidden by it. */
.a2-frost {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
will-change: opacity;
pointer-events: none;
}
/* The blur is baked into a picture rather than computed live.
This used to be `backdrop-filter: blur(16px) saturate(0.75)` on the box
above -- a full-viewport backdrop root sitting directly on a WebGL canvas,
which the compositor re-rasterized on every frame anything over it moved.
Measured at 1440x900: 29fps through the pinned scroll and 47fps opening
the case modal, against 52 / 60fps with the filter taken out and nothing
else changed. Lowering the radius does not help -- the cost is the
backdrop surface, not the kernel.
Nothing behind this layer moves once hero2's tear is finished, so a live
filter has nothing to report that a still cannot. The backdrop is
hero-color.jpg; hero-color-blur.webp is that same photo at 72x48 with the
saturate() already applied, and `cover` scales it back up ~20x -- the
bilinear upscale IS the blur. 2KB, rasterized once, free to composite
from then on. Regenerate it if the hero photo ever changes. */
.a2-frost::before {
content: "";
position: absolute;
/* inset:0 and `cover`, matching how the renderer fits the full-size photo
to the viewport -- any other box here would crop the blur differently
from the sharp photo it fades over. */
inset: 0;
background:
linear-gradient(rgba(248, 248, 246, 0.7), rgba(248, 248, 246, 0.7)),
url("../assets/images/hero-color-blur.webp") center / cover no-repeat;
}
.a2-static .a2-frost {
opacity: 1;
}
/* ---- Hero copy / What We Do copy, stacked at the same base position ----
Both live inside #whiteText .wt-content (positioned by css/hero2-tear.css)
so they share one spot. Grid-stacking them avoids hand-measuring a shared
height for absolute positioning. */
/* The copy block is centred in the left third of the screen, rather than
pushed against the left edge as hero2 does it: with the tear moved in to
about a third, that edge now belongs to the progress rail. Overriding the
whole box (width + justify-content) rather than nudging hero2's
padding-left, so the centring is stated once and holds at any width. */
.a2-body .white-text {
width: 33.33vw;
padding-left: 0;
justify-content: center;
}
.white-text .wt-content {
display: grid;
/* Narrow enough to clear the rail on the left (ends near 60px) and the
tear on the right (x~0.31 at this block's widest) once centred, wide
enough that the longest headline line still sets on one line. */
max-width: min(23vw, 330px);
/* Both copies size to their own content and centre on the same line,
instead of stretching to the taller one's height -- which parked What
We Do at the top of the row while Hero, the taller of the two, looked
centred. */
align-items: center;
}
.a2-hero-copy,
.a2-wwd-copy,
.a2-wwa-copy,
.a2-flow-copy,
.a2-case-copy {
grid-area: 1 / 1;
}
.a2-hero-copy {
opacity: 1;
}
.a2-wwd-copy,
.a2-wwa-copy,
.a2-flow-copy,
.a2-case-copy {
opacity: 0;
transform: translateY(28px);
pointer-events: none;
}
.a2-wwd-copy > *,
.a2-wwa-copy > *,
.a2-flow-copy > *,
.a2-case-copy > * {
opacity: 0;
transform: translateY(28px);
}
/* One type ramp for both copies -- guidelines 9.1's section header (label,
H2, one-line description) and 8.2's sizes. The Hero pair is listed
alongside the What We Do pair on every rule rather than restyled
separately: they cross-fade in the same spot, so any difference in size,
colour or rhythm between them shows up as a jump. css/hero2-tear.css
styles .wt-* for the standalone hero and is overridden here. */
.a2-eyebrow,
.a2-body .wt-eyebrow {
font-family: var(--a2-font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--a2-violet);
margin-bottom: 1.4em;
}
.a2-eyebrow span {
margin-right: 1.4em;
}
/* Section H2. Under the guidelines' 48-64px band on purpose: that band
assumes a full measure, and this column is a third of the width. Sized so
the longest line either copy sets -- "Change the world" -- still fits on
one line; above this it breaks mid-phrase. */
.a2-title,
.a2-body .wt-triad {
font-family: var(--a2-font-display);
font-size: clamp(25px, 2.55vw, 36px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--a2-navy);
margin-bottom: 0.6em;
}
.a2-lead,
.a2-body .wt-lead {
font-family: var(--a2-font-body);
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 400;
line-height: 1.7;
color: var(--a2-text-soft);
}
/* Hero carries one more paragraph than the section header pattern has a
slot for; Body (guidelines 8.2) under a slightly heavier lead keeps the
two apart without a second type size. */
.a2-body .wt-lead {
font-weight: 600;
color: var(--a2-navy);
margin-bottom: 0.9em;
}
.a2-body .wt-body {
font-family: var(--a2-font-body);
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 400;
line-height: 1.7;
color: var(--a2-text-soft);
}
.a2-static .a2-hero-copy {
opacity: 0;
pointer-events: none;
}
.a2-static .a2-wwd-copy,
.a2-static .a2-wwd-copy > * {
opacity: 1;
transform: none;
}
.a2-static .a2-wwd-copy {
pointer-events: auto;
}
/* ---- Figures --------------------------------------------------------------
Rounded cards on the frosted photo: ringed icon, number, title, short
rule, body. Guidelines 9.3's card -- pale surface, 1px border, small
radius, 24-32px of padding, no shadow. Translucent rather than solid white
so the photo still reads through the row and the frost below keeps doing
its job.
Three sections use this: 02's three services, 04's five flow steps and
05's six categories. They share the card and the type and differ only in
the grid and the sizes (.a2-fig--flow, .a2-fig--cases below), which is
what keeps them reading as one figure changing rather than three designs.
Every one of them sits in the same slot at the same z-index, so the one
that is not the live figure must not take the pointer; the timeline turns
that on and off as each arrives and leaves. */
.a2-fig {
position: absolute;
z-index: 3;
top: 50%;
left: var(--a2-split);
right: 3vw;
transform: translateY(-50%);
pointer-events: none;
}
.a2-fig-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.3vw, 22px);
margin: 0;
padding: 0;
list-style: none;
}
.a2-fig-col {
padding: clamp(24px, 2.1vw, 32px) clamp(18px, 1.7vw, 26px);
border: 1px solid var(--a2-border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
opacity: 0;
transform: translateY(48px) scale(0.985);
will-change: transform, opacity;
}
/* Scoped to 02's cards: the static path shows that one section and only it
(see the note by the table below), so the flow and category cards must
stay at their start pose or all three figures would stack in this slot. */
.a2-static .a2-fig--services .a2-fig-col {
opacity: 1;
transform: none;
}
.a2-static .a2-fig--services {
pointer-events: auto;
}
.a2-fig-ico {
display: grid;
width: clamp(56px, 4.6vw, 72px);
height: clamp(56px, 4.6vw, 72px);
place-items: center;
margin: 0 auto clamp(16px, 1.8vh, 24px);
border: 1.5px solid var(--a2-violet);
border-radius: 50%;
color: var(--a2-violet);
}
.a2-fig-ico svg {
display: block;
width: 42%;
height: 42%;
}
.a2-fig-num {
font-family: var(--a2-font-body);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.04em;
text-align: center;
color: var(--a2-violet);
margin-bottom: 0.6em;
}
/* Card H3 (guidelines 8.2). */
.a2-fig-title {
font-family: var(--a2-font-display);
font-size: clamp(19px, 1.6vw, 24px);
font-weight: 700;
line-height: 1.2;
text-align: center;
color: var(--a2-navy);
}
.a2-fig-rule {
display: block;
width: 30px;
height: 2px;
margin: clamp(14px, 1.8vh, 22px) auto;
background: var(--a2-violet);
}
.a2-fig-body {
font-family: var(--a2-font-body);
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 400;
line-height: 1.75;
color: var(--a2-text-soft);
}
/* 04 Execution Flow: the same card, five up. A fifth of this slot is about
145px, so everything steps down one notch -- ring, padding, rule and type
-- rather than the copy being allowed to set the card's width. */
.a2-fig--flow .a2-fig-cols {
grid-template-columns: repeat(5, 1fr);
gap: clamp(8px, 0.8vw, 14px);
}
.a2-fig--flow .a2-fig-col {
padding: clamp(16px, 1.5vw, 24px) clamp(10px, 0.9vw, 16px);
}
.a2-fig--flow .a2-fig-ico {
width: clamp(40px, 3.2vw, 52px);
height: clamp(40px, 3.2vw, 52px);
margin-bottom: clamp(10px, 1.2vh, 16px);
}
.a2-fig--flow .a2-fig-num {
font-size: 13px;
}
.a2-fig--flow .a2-fig-title {
font-size: clamp(14px, 1.15vw, 18px);
}
.a2-fig--flow .a2-fig-rule {
width: 22px;
margin: clamp(10px, 1.2vh, 16px) auto;
}
.a2-fig--flow .a2-fig-body {
font-size: clamp(11px, 0.82vw, 13px);
line-height: 1.6;
}
/* 05 Case Studies: six of the same card on two rows. No rule and no body --
the card ends at the category name, so a rule would be underlining
nothing. `Category` sits in the number's slot, as it does on the
production page's notes. */
.a2-fig--cases .a2-fig-cols {
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.2vw, 20px);
}
.a2-fig--cases .a2-fig-col {
padding: clamp(18px, 1.7vw, 26px) clamp(14px, 1.3vw, 20px);
}
.a2-fig--cases .a2-fig-ico {
width: clamp(46px, 3.6vw, 58px);
height: clamp(46px, 3.6vw, 58px);
margin-bottom: clamp(12px, 1.4vh, 18px);
}
.a2-fig--cases .a2-fig-num {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--a2-muted);
}
.a2-fig--cases .a2-fig-title {
font-size: clamp(16px, 1.35vw, 21px);
}
/* These six are buttons -- they open the case modal -- so the card needs a
button's defaults stripped back to what .a2-fig-col already draws, and
the two spans standing in for the
and
the other figures use need
their block behaviour back (a