/*
* About Us: the page's own layer.
*
* Deliberately short. Everything structural — scene, split, grid, card, button,
* eyebrow, reveal — comes from the scene kit, and this file adds only what is
* genuinely about this page. If it grows past a screen, something that belongs
* in the kit has been written here instead.
*
* NO JOURNEY ON THIS PAGE, ON PURPOSE.
*
* The scroll-driven colour journey is a PRODUCT-page device. A product page is
* an argument told in order, and the travelling ground is what carries the
* reader through it. A company page is a reference: people arrive at it to find
* one fact and leave. Giving it the same machinery would make the site's most
* elaborate treatment mean nothing, because everything would have it.
*
* So this page declares no `data-bg` and no `data-accent`. The journey engine
* finds no scenes and never runs, the ground rests at --srh-ground, and what
* remains is the house style and the background: the drifting glow field, the
* glyph grid, and the reveals. That is the rule for every non-product page.
*/
/*
* The accent fallback, and the reason it moved off .srco-page.
*
* This page now runs the journey engine (data-bg / data-accent on every scene
* in templates/company-about.php), so --srk-accent-live IS published — inline,
* on , by initJourney in assets/js/scene-kit.js.
*
* It used to be declared here on .srco-page, which is a BODY class. A custom
* property declared on body wins for body's entire subtree over anything on
* , inline style included. So the first version of the journey computed
* a new accent on every scroll frame and not one pixel of the page changed
* colour, because this rule was quietly overriding all of it. That is a very
* expensive kind of bug: nothing errors, the engine genuinely runs, and the
* only symptom is that your work appears to have done nothing.
*
* Declared on :root it does the one job it is actually needed for — the no-JS
* fallback, where the engine never runs and every kit component would
* otherwise drop to --srh-accent green — and it loses to the engine's inline
* value the instant the engine boots, which is correct.
*
* Safe to put on :root despite the name: company-about.css is enqueued only
* for templates/company-about.php (inc/enqueue.php), so this reaches no other
* page.
*/
:root {
--srk-accent-live: #4D8AFF;
}
/*
* The hero.
*
* The heading is allowed to run wider than the paragraph. That difference is
* what makes a text-only hero read as a hero rather than as a long first
* paragraph, and it is what Link does with its own hero copy.
*/
.srco-page .srco-hero h1 {
/*
* THE REFERENCE HERO SCALE. Rohan, 2026-09-02, item 1.4: "The KYC page hero
* is the reference ... Bring every other page hero to that scale", and at
* 2.10b and 2.11 he named the two pages that were visibly oversized.
*
* Measured at 1440 before this: KYC and every industry page 60px, every
* product page 62px, and FOUR pages at 93.6px. --srk-display-l is
* clamp(44px, 6.5vw, 96px), so at 1440 it lands 56 per cent above the
* reference, which is what "too large" looked like.
*
* The product pages had already made this move (see the note beside
* .srm-hero h1); these four were left behind. --srk-display-m is
* clamp(32px, 4.6vw, 62px), which is 62px at 1440, within 3 per cent of the
* KYC reference and an existing token rather than a new number.
*/
font-size: var(--srk-display-m);
max-width: 14ch;
}
.srco-page .srco-hero .srk-lede {
max-width: var(--srk-measure);
}
.srco-page .srk-display-l {
font-size: var(--srk-display-l);
max-width: 20ch;
}
.srco-page .srk-scene h2 {
font-size: var(--srk-display-m);
}
/* ---------------------------------------------------------------------------
The credential stack
------------------------------------------------------------------------ */
/*
* The hero's right-hand column. It answers the same job the phone does on
* ShareRing Me and the chain does on ShareLedger: something to look at while
* the copy beside it is read.
*/
/*
* The mark, at size.
*
* Large enough to be unmistakably the brand and faint enough to stay behind
* the credential cards. It takes the page accent through currentColor, so it
* is brand blue here without a second asset existing anywhere.
*/
/*
* Mark above, logotype below — a vertical lockup.
*
* The previous attempt laid the ring BEHIND the wordmark and they collided:
* the type sat across the ring's lower arc and the pair read as an accident
* rather than as a lockup. Overlapping them was also me inventing an
* arrangement the brand does not have. Stacked, both are whole, and a vertical
* lockup is a normal brand layout rather than something improvised here.
*/
/*
* ONE cell, not a column.
*
* When this held the vertical lockup, mark above type, it was a two-row grid
* with a gap. Now that the deck occupies it the ring belongs BEHIND the device,
* not stacked on top of it: as a row it made the column tall enough to push the
* hero copy 480px down the page and the phone below the fold, which is the
* opposite of what a hero is for.
*/
.srco-page .srco-hero-visual {
position: relative;
display: grid;
place-items: center;
}
/*
* The ring, behind the device. Larger than the phone and offset up, so its arc
* reads around the top of the frame instead of being hidden by it.
*/
.srco-page .srco-brandmark {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--srk-accent-live, var(--srh-accent));
opacity: 0.3;
pointer-events: none;
}
/*
* Wider than the device in front of it, so the ring's arc reads out to either
* side of the frame rather than being a sliver above it.
*/
.srco-page .srco-brandmark .sr-brand-mark {
width: min(100%, 380px);
height: auto;
}
/* ---------------------------------------------------------------------------
The logo entrance
------------------------------------------------------------------------ */
/*
* NOT INVENTED HERE. Both hero pages already animate the ShareRing logo in, and
* they do it the same way, so this is that treatment rather than a third one.
*
* DigitalMe, on its ShareRing mark (.screen-meet-mark):
* meet-mark-rise 1400ms cubic-bezier(0.22,1,0.36,1) 200ms forwards
* scale 0.7 -> 1.05 -> 1.00, translateY 20 -> -4 -> 0
* ShareRing Link, on its wordmark (.sr-wordmark-hero):
* srl-rise 800ms var(--ease) 880ms forwards, delayed so it lands AFTER
* the glyphs above it have settled.
*
* The shape of it is: the mark arrives first and overshoots slightly before
* settling; the wordmark follows a beat later. That order is the whole effect —
* reversed or simultaneous, it reads as two things appearing rather than as a
* logo assembling.
*
* Link goes further and staggers its wordmark's individual subpaths left to
* right like characters (.wm-ch), with delays set from JS. That is available
* here for free: the nine glyph paths lifted out of the lockup are in strict
* left-to-right order — their x origins ascend 177, 201, 253, 281, 311, 334,
* 376, 391, 462 — so nth-child does what Link needed script for.
*/
.srco-page .srco-brandmark .sr-brand-mark {
opacity: 0;
transform: scale(0.7) translateY(20px);
animation: srco-mark-rise 1400ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1)) 200ms forwards;
}
@keyframes srco-mark-rise {
0% { opacity: 0; transform: scale(0.7) translateY(20px); }
60% { opacity: 1; transform: scale(1.05) translateY(-4px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/*
* transform-box: fill-box is not optional on an SVG child. Without it the
* transform origin is the whole viewport's user space, and each glyph swings in
* from wherever that happens to put it rather than rising in place.
*/
.srco-page .srco-logotype .sr-brand-logotype path {
opacity: 0;
transform: translateY(14px);
transform-box: fill-box;
transform-origin: center;
animation: srco-glyph-rise 700ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
/*
* 1100ms clears the mark's 200ms delay plus most of its 1400ms rise, so the
* type starts as the ring settles rather than racing it. 55ms between glyphs is
* the value that reads as one word arriving rather than nine letters queueing.
*/
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(1) { animation-delay: 1100ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(2) { animation-delay: 1155ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(3) { animation-delay: 1210ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(4) { animation-delay: 1265ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(5) { animation-delay: 1320ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(6) { animation-delay: 1375ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(7) { animation-delay: 1430ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(8) { animation-delay: 1485ms; }
.srco-page .srco-logotype .sr-brand-logotype path:nth-child(9) { animation-delay: 1540ms; }
@keyframes srco-glyph-rise {
to { opacity: 1; transform: translateY(0); }
}
/*
* The logotype, above the heading in the LEFT column.
*
* Pale ink, not the accent. The accent is this page's travelling colour and it
* belongs to eyebrows, marks and buttons; the brand name is set in its own
* weight and must not read as one more highlighted phrase.
*
* It stands where the "Company" eyebrow used to, which was the right position
* for something and the wrong thing to put in it.
*/
/*
* More air under it than over it. The lockup is a mark, not a kicker: too close
* to the heading and the eye reads the two as one block of type, which is
* exactly how the wordmark-only version failed.
*/
.srco-page .srco-hero-logotype {
margin-bottom: clamp(22px, 3.5vh, 38px);
}
.srco-page .srco-hero-logotype .sr-brand-lockup-inline {
width: min(58%, 250px);
height: auto;
color: var(--srh-pale);
display: block;
}
/* ---------------------------------------------------------------------------
The credential stack: REMOVED
------------------------------------------------------------------------ */
/*
* The drawn stack of three credential cards is gone, and so is its CSS.
*
* The markup went when the hero became a product showcase and the Mission
* scene took a real screen instead of an illustration; templates/company-about.php
* still records that decision. What was left here was about sixty lines styling
* an element that no longer exists.
*
* IT WAS NOT HARMLESS DEAD CODE. `.srco-page .srco-stack` set max-width:340px,
* and when the product showcase was later given the class `srco-stack` it
* inherited that silently: a full-width panel rendered 340px wide with its
* image column collapsed to zero. The showcase is `srco-suite` now AND these
* rules are deleted, because renaming alone would have left the same trap for
* the next person who reaches for an obvious name.
*
* The float keyframes went with it; nothing else used them.
*/
}
/*
* Motion is an enhancement and never a requirement. Under reduce the cards
* resolve to their settled positions and stop, exactly as the house style's
* glow field and parallax do.
*/
@media (prefers-reduced-motion: reduce) {
/*
* The logo entrance resolves to its settled state and never plays. Both hero
* pages do exactly this — Link's reduce block sets
* `.sr-wordmark-hero { animation:none; opacity:1; transform:none; }` — and an
* entrance that starts at opacity 0 MUST be switched off this way rather than
* merely un-animated, or the logo never appears at all.
*/
.srco-page .srco-brandmark .sr-brand-mark,
.srco-page .srco-logotype .sr-brand-logotype path {
animation: none;
opacity: 1;
transform: none;
}
}
/* ---------------------------------------------------------------------------
The closer
------------------------------------------------------------------------ */
/*
* The page ends on the brand.
*
* ShareRing Link closes the same way — its lockup, a divider, then the ask —
* rather than on a final claim. On a company page that is the honest ending:
* the last thing a reader sees should be who this is.
*
* The lockup is an ![]()
and keeps its own white, unlike the ring mark above
* it, because a wordmark is typography and must not take a page accent.
*/
.srco-page .srco-closer-lockup {
display: block;
width: min(320px, 60%);
height: auto;
margin: 0 0 clamp(24px, 4vh, 44px);
}
/* ---------------------------------------------------------------------------
Section rhythm
------------------------------------------------------------------------ */
.srco-page .srk-scene h2 {
font-size: var(--srk-display-m);
margin-bottom: 0.5em;
}
.srco-page .srk-scene h2 + .srk-lede {
margin-top: 0;
}
/* ---------------------------------------------------------------------------
The flow: MOVED to the scene kit
------------------------------------------------------------------------ */
/*
* The rules that make one scene one screen now live in assets/css/scene-kit.css
* under .srk-flow, which this page opts into on its . They moved when
* Pricing became the second page to carry an identical copy and STARS and
* Contact would have made four.
*
* The measurements that justify them, and the traps, are in the kit beside the
* rules.
*/
/* ---------------------------------------------------------------------------
The device, at ONE size
------------------------------------------------------------------------ */
/*
* Every phone on this page is the same phone.
*
* The hero's deck sized its frame from --srco-frame-w (330px) while the Mission
* scene's device came from the scene kit's --srk-phone-width (clamp to 380px,
* so 307px at 1280). Two screens apart, two different phones, which reads as
* carelessness rather than as design — and it is what Rohan called out.
*
* The width is now derived from the height of the band it has to fit inside,
* because the whole point of the flow work above is that a scene ENDS. A device
* sized purely by width bleeds past the fold at short viewports and the page
* stops having an end.
*
* 2.2 is the frame's MEASURED outer ratio, not a guess: 354x779 at 1920 and
* 280x608 at 1440, both 2.2. The first version of this used 2.42, which cost
* about ten per cent of the width for nothing and left 83px of the hero unused
* underneath the device. 155px is the furniture above and below: the logotype,
* its margin and the hero's own top and bottom padding.
*
* THE CAP CAME BACK DOWN TO 330 (Rohan, 2026-08-30: "the screen that comes up
* is jarring and the phone looks huge in comparison").
*
* It went to 460 the day before, to stop the phone being a thumbnail. That was
* right in isolation and wrong in sequence: ShareRing Link is now LAST and
* biggest, a 760x503 browser frame, and cross-fading from that to a 387x855
* phone is a change of both axes at once. The phone was not too big on its own;
* it was too big NEXT TO the thing before it.
*
* 300px of reserved furniture instead of 155 is what does the work. It takes
* the phone to roughly 300x660 at 1080, which sits inside the same visual
* envelope as the browser frame rather than towering over it, and the two
* slides now read as one object changing rather than two objects swapping.
*
* This deliberately overrides the note in company-about-deck.css that defends
* the device bleeding below the fold. That was correct for a page built as one
* long scroll; it is wrong for a page built as a run of screens.
*/
.srco-page {
--srco-phone-w: clamp(180px, calc((var(--vph, 100dvh) - var(--srk-header-raw, 72px) - 300px) / 2.2), 330px);
}
/* The scene kit's own device, held to the same number. */
.srco-page .srk-phone {
width: var(--srco-phone-w);
max-width: 100%;
}
/* ---------------------------------------------------------------------------
Beat variation
------------------------------------------------------------------------ */
/*
* Four sections that share a heading size, a colour, and an x of 51 read as one
* section repeated, which is what they were. Colour alone does not fix that —
* a silhouette needs to change too.
*
* Naming follows product-shareledger.css, which solved the same problem with
* .srl-centre and .srl-narrow. This is the same device with this page's prefix,
* not a new idea.
*/
/* Centre the heading BLOCK only, not the columns under it. Centred body text
across a three-column grid is ragged on both edges in all three. */
.srco-page .srco-centre-head > .srk-eyebrow,
.srco-page .srco-centre-head > h2 {
text-align: center;
}
/*
* Narrow, and LEFT-ALIGNED rather than centred.
*
* .srk-scene-inner carries margin-inline:auto, so capping the width alone
* centres the column and put this heading at x=260 while every other heading
* on the page starts at 51. That is the exact failure this template's own
* comment on the Mission scene records and rejects — a heading at neither the
* left margin nor the centre reads as a mistake rather than as a decision.
*
* The variation here is the MEASURE, not the position. The centred moments on
* this page are deliberate and symmetric (the What-we-do heading over its 3-up,
* and the closer); a half-offset column is not one of them.
*/
.srco-page .srco-narrow {
max-width: 760px;
margin-inline: 0;
}
.srco-page .srco-centre { text-align: center; }
.srco-page .srco-centre p { margin-inline: auto; }
.srco-page .srco-centre-actions { justify-content: center; }
/* The lockup is a block with its own width, so text-align cannot centre it. */
.srco-page .srco-centre .srco-closer-lockup {
margin-inline: auto;
}
/* ---------------------------------------------------------------------------
The hero lockup
------------------------------------------------------------------------ */
/*
* WEIGHT.
*
* The wordmark used to sit here at 46px against a 94px heading, in the same
* pale ink, so it read as a smaller first line of "Our Story" rather than as a
* mark. Three things fix that and all three are needed: the ring is back (a
* wordmark alone has nothing to recognise), it is drawn at a size that can hold
* its own beside the heading, and it is separated from it by real space.
*
* Sized off the registry like every other mark on the site, so the cap matches
* the family rather than being a number picked here.
*/
.srco-page .srco-hero-logotype {
--sr-logo-cap: clamp(1.5rem, 3vw, 2.3rem);
margin-bottom: clamp(26px, 4vh, 46px);
}
.srco-page .srco-hero-logotype .sr-brand-lockup-inline {
height: calc(var(--sr-logo-cap) * var(--sr-logo-m));
width: auto;
color: var(--srh-pale);
display: block;
}
/* ---------------------------------------------------------------------------
Hero fit
------------------------------------------------------------------------ */
/*
* The hero is a screen like every other scene, and it is the ONE scene that has
* to clear the header.
*
* In cinema mode the header is position:absolute — it overlays the top of the
* page rather than pushing it down — so without this the hero's top content
* renders behind it. Measured before the fix: the ShareRing Me logotype started
* at y=52 under a header whose bottom edge is y=72. Twenty pixels of a product
* wordmark were simply gone.
*
* Only the hero needs it. Every scene below is reached by scrolling, by which
* point the header has scrolled away with the page.
*/
.srco-page .srco-hero {
padding-top: calc(var(--srk-header-raw, 72px) + clamp(12px, 2vh, 30px));
padding-bottom: clamp(24px, 4vh, 56px);
}
@media (min-width: 900px) {
/*
* BOTH columns centre now, and the 15vh nudge on the copy is gone.
*
* That nudge existed to drop the copy to the optical centre of the VISIBLE
* band, because the device deliberately bled past the fold and its real
* midpoint was off screen. The device no longer bleeds — it is sized from the
* height of the band it sits in (see --srco-phone-w) — so the band and the
* scene are the same box, and centring the grid is now simply correct.
*
* Keeping the old padding on top of the new centring would have pushed the
* copy 135px BELOW centre, which is the sort of thing that looks like a
* mysterious design decision six months later.
*/
.srco-page .srco-hero .srk-scene-split {
align-items: center;
/*
* A wider right column than the kit's default.
*
* --srk-phone-width caps at 380px, which is correct for a phone and much
* too narrow for ShareRing Link's desktop workflow builder — at 345px its
* UI was an unreadable grid of grey cards. The phone keeps its own smaller
* cap, so widening the column only helps the frame that needs it.
*/
/*
* Wide enough for the bigger device and for ShareRing Link's browser frame,
* which is a desktop product and cannot be honestly shown in a phone-width
* column. The phone keeps its own smaller cap, so widening the column only
* helps the frame that needs it.
*/
grid-template-columns: 1fr minmax(0, clamp(320px, 44vw, 760px));
}
}
/* ---------------------------------------------------------------------------
Keeping two dense scenes inside one screen
------------------------------------------------------------------------ */
/*
* Mission and Why Choose are the two scenes carrying real content rather than a
* heading and a paragraph, and both had grown past the 900px band: 1025 and 968
* measured at 1440x900. min-height lets a scene grow, which is correct for a
* price table on a phone and wrong for these, where the overflow was a couple of
* lines and the fix is a couple of lines of trim.
*
* The standfirst is held to a shorter measure so it sets three lines instead of
* four, and the run-in above the tiles loses a little of its top margin.
*/
#c-why .srk-lede {
max-width: 68ch;
}
#c-why .srco-tiles {
margin-top: clamp(20px, 3vh, 36px);
}
#c-why .srco-reasons {
margin-top: clamp(20px, 3vh, 34px);
padding-top: clamp(16px, 2.2vw, 24px);
}
/* ---------------------------------------------------------------------------
The hero copy keeps its measure as the stage widens
------------------------------------------------------------------------ */
/*
* The stage went to 760px so ShareRing Link's workflow canvas is big enough to
* read, which leaves the copy column narrower. .srk-scene-inner is capped at
* 1180, so at 1920 the split is roughly 348 / 760 and the h1 would set three or
* four lines.
*
* The inner cap is lifted on this scene only. The COPY still holds a sane
* measure of its own, so the paragraph does not run to 120 characters just
* because there is room; what the extra width buys is entirely the device.
*/
@media (min-width: 1200px) {
.srco-page .srco-hero .srk-scene-inner {
max-width: 1420px;
}
.srco-page .srco-hero .srk-scene-copy .srk-lede {
max-width: 54ch;
}
}
/* ---------------------------------------------------------------------------
The mission, as copy beside a tile
------------------------------------------------------------------------ */
/*
* Rohan asked for the examples to be "the tile on the right", and that is also
* the right shape for the argument: a five-word claim on the left and the
* places it is true on the right, read together rather than one after the
* other. Stacked, the reader finishes the sentence before the first picture
* arrives and the two stop being one thought.
*
* The kit's split defaults to a phone-width right column, which is far too
* narrow for a 4:3 gallery, so this scene sets its own.
*/
@media (min-width: 900px) {
.srco-page .srco-mission-split {
grid-template-columns: 1fr minmax(0, clamp(320px, 40vw, 560px));
align-items: center;
}
}