/* Signy AI - component stylesheet.
Loads after tokens.css. Every value reads a token custom property.
Class prefix: sg-. Port these class names straight into the WordPress theme.
Three layers make the look:
1. ambient bloom - large blurred brand-colour orbs behind sections
2. glass - frosted panels that refract the bloom
3. motion - scroll reveals, hover lifts, pointer spotlights
All motion is removed under prefers-reduced-motion. */
/* ---------- base ---------- */
/* One focus indicator, one geometry, every control: a `stroke-focus` ring in
`focus`, held 2px off the element. It is a hairline on purpose. The ring's job
is done by contrast, not by weight: at 9:1 or better against every ground it
lands on it is unmistakable, and a heavy ring beside a control's own border
just reads as a second border. Never a ring plus a shadow plus a border
change - see the note on the form controls further down. */
.sg-root,
.sg-page {
--sg-focus-offset: 2px;
font-family: var(--font-sans);
color: var(--ink);
background: var(--surface);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sg-page *,
.sg-page *::before,
.sg-page *::after { box-sizing: border-box; }
.sg-page p,
.sg-page h1, .sg-page h2, .sg-page h3, .sg-page h4, .sg-page h5,
.sg-page ul, .sg-page ol, .sg-page figure, .sg-page blockquote { margin: 0; }
.sg-page ul, .sg-page ol { padding: 0; list-style: none; }
.sg-measure { max-width: var(--layout-measure); }
/* Anchor links glide instead of jumping, and they land BELOW the sticky header
rather than underneath it. Both are cancelled by the reduced-motion block at
the end of this file. */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--layout-header-h, 76px) + var(--space-6, 24px));
}
.sg-page :target { scroll-margin-top: calc(var(--layout-header-h, 76px) + var(--space-6, 24px)); }
/* ---------- ambient bloom ---------- */
.sg-amb { position: relative; isolation: isolate; overflow: clip; }
.sg-amb > * { position: relative; z-index: 1; }
.sg-amb__orb {
position: absolute;
z-index: 0;
border-radius: var(--radius-full);
filter: blur(var(--blur-bloom));
pointer-events: none;
/* Kept low so a bloom reads as ambient light, never as a colour flood -
the guidelines reserve floods for the primary palette. */
opacity: 0.7;
will-change: transform;
}
.sg-amb__orb--brand { background: var(--glow-brand); }
.sg-amb__orb--accent { background: var(--glow-accent); }
.sg-amb__orb--aqua { background: var(--glow-aqua); }
/* three placements - never more than two orbs in one viewport */
/* FIXED HERE: how far the bottom orbs hang below their section is now CAPPED.
A percentage offset resolves against the section's HEIGHT, so the bleed grew
with whatever the section happened to contain. theme.css releases the clip
on these sections so the glow reads as one field down the page, and on a
normal 700px section -22% is a modest 154px. The glossary's fifty terms make
one section about 3,500px tall, where the same -22% is 770px - and because
that section is the LAST one, 770px of invisible orb hung below the footer
and the page scrolled into a band of white nothing.
max() keeps the proportional offset on everything that is not enormous and
stops there. The bleed is meant to be a distance between two sections, not a
measure of how long one of them is. */
:root { --sg-amb-bleed: 200px; }
.sg-amb__orb--tl { top: -14%; left: -8%; width: 42vw; height: 42vw; max-width: 620px; max-height: 620px; }
.sg-amb__orb--tr { top: -18%; right: -10%; width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; }
.sg-amb__orb--br { bottom: max(-20%, calc(var(--sg-amb-bleed) * -1)); right: -6%; width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; }
.sg-amb__orb--bl { bottom: max(-22%, calc(var(--sg-amb-bleed) * -1)); left: -10%; width: 40vw; height: 40vw; max-width: 600px; max-height: 600px; }
@keyframes sg-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
.sg-amb__orb--drift { animation: sg-drift 22s var(--ease-in-out-soft) infinite; }
.sg-amb__orb--drift.is-slow { animation-duration: 31s; animation-direction: reverse; }
/* very fine grain stops large flat colour fields from banding */
.sg-grain::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* ---------- glass ---------- */
.sg-glass {
background: var(--glass-fill);
border: var(--stroke-hairline) solid var(--glass-stroke);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
position: relative;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.sg-glass {
-webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%);
backdrop-filter: blur(var(--blur-glass)) saturate(150%);
}
}
.sg-glass--solid { background: var(--glass-fill-strong); }
/* On a dark or gradient ground the frost has to darken, not lighten -
otherwise `ink-inverse` text lands on a pale panel and disappears. */
.sg-on-dark .sg-glass,
.sg-shell--inverse .sg-glass,
.sg-section--inverse .sg-glass,
.sg-grad-mesh .sg-glass {
background: rgba(17, 21, 22, 0.42);
border-color: rgba(241, 240, 236, 0.18);
color: var(--ink-inverse);
}
.sg-on-dark .sg-glass--solid,
.sg-grad-mesh .sg-glass--solid { background: rgba(17, 21, 22, 0.62); }
.sg-on-dark .sg-glass::before,
.sg-shell--inverse .sg-glass::before,
.sg-section--inverse .sg-glass::before,
.sg-grad-mesh .sg-glass::before {
background: linear-gradient(160deg, rgba(241, 240, 236, 0.3), transparent 42%, rgba(0, 0, 0, 0.4));
}
.sg-glass--strong {
-webkit-backdrop-filter: blur(var(--blur-strong)) saturate(160%);
backdrop-filter: blur(var(--blur-strong)) saturate(160%);
}
/* the light-source line along the top edge */
.sg-glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--stroke-hairline);
background: linear-gradient(160deg, var(--glass-stroke), transparent 42%, var(--glass-shade));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* ---------- motion utilities ---------- */
[data-reveal] {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition:
opacity var(--duration-slow) var(--ease-out-soft),
transform var(--duration-slow) var(--ease-out-soft);
transition-delay: var(--sg-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: translate3d(0, 24px, 0) scale(0.97); }
[data-reveal="left"] { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="fade"] { transform: none; }
/* ---------- layout ---------- */
.sg-container {
width: 100%;
max-width: var(--layout-container);
margin-inline: auto;
padding-inline: var(--layout-gutter);
}
.sg-container--wide { max-width: var(--layout-container-wide); }
.sg-container--narrow { max-width: 840px; }
.sg-section { padding-block: var(--space-11); position: relative; }
.sg-section--tight { padding-block: var(--space-9); }
.sg-section--tall { padding-block: var(--space-12); }
.sg-section--alt { background: var(--surface-alt); }
.sg-section--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.sg-section--brand { background: var(--surface-brand); color: var(--on-brand); }
/* a rounded inset shell so dark blocks float rather than band the page */
.sg-shell {
border-radius: var(--radius-2xl);
overflow: clip;
position: relative;
isolation: isolate;
}
.sg-shell--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.sg-shell--brand { background: var(--surface-brand); color: var(--on-brand); }
.sg-shell__inner { padding: var(--space-11) var(--space-9); position: relative; z-index: 1; }
.sg-section--inverse .sg-eyebrow,
.sg-shell--inverse .sg-eyebrow { color: var(--ink-inverse-muted); }
.sg-section--brand .sg-eyebrow,
.sg-shell--brand .sg-eyebrow { color: rgba(255, 255, 255, 0.75); }
.sg-section--inverse .sg-prose p,
.sg-shell--inverse .sg-prose p { color: var(--ink-inverse); }
.sg-section--brand .sg-prose p,
.sg-shell--brand .sg-prose p { color: var(--on-brand); }
.sg-section--inverse .sg-sectionhead__sub,
.sg-shell--inverse .sg-sectionhead__sub { color: var(--ink-inverse-muted); }
.sg-grid { display: grid; gap: var(--layout-grid-gap); }
.sg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-grid--offset3 { grid-template-columns: 1.5fr 1fr 1fr; }
.sg-grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; }
/* bento: a 5-item grid where the last tile spans two columns */
.sg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--layout-grid-gap); }
.sg-bento > * { grid-column: span 2; }
.sg-bento > *:nth-child(4) { grid-column: span 3; }
.sg-bento > *:nth-child(5) { grid-column: span 3; }
.sg-stack { display: flex; flex-direction: column; }
.sg-stack > * + * { margin-top: var(--space-4); }
.sg-stack--lg > * + * { margin-top: var(--space-6); }
.sg-stack--sm > * + * { margin-top: var(--space-2); }
.sg-rule { height: var(--stroke-hairline); background: var(--border-subtle); border: 0; }
.sg-section--inverse .sg-rule { background: rgba(241, 240, 236, 0.22); }
/* ---------- section head ---------- */
.sg-sectionhead { max-width: 860px; }
.sg-sectionhead--center { margin-inline: auto; text-align: center; }
.sg-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--ink-muted);
text-transform: uppercase;
}
/* the eyebrow badge - a pill with a live dot */
.sg-eyebrow--badge {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
border: var(--stroke-hairline) solid var(--border-subtle);
background: var(--glass-fill);
box-shadow: var(--shadow-xs);
}
.sg-section--inverse .sg-eyebrow--badge,
.sg-shell--inverse .sg-eyebrow--badge,
.sg-on-dark .sg-eyebrow--badge {
border-color: rgba(241, 240, 236, 0.22);
background: rgba(241, 240, 236, 0.07);
}
/* The space above a title belongs to the eyebrow, not to the title. A title that
leads its column sits flush with the top of its grid cell, so a sticky column
starts level with the column beside it instead of 24px below it. */
.sg-sectionhead__title { margin-top: 0 !important; }
.sg-eyebrow + .sg-sectionhead__title { margin-top: var(--space-5) !important; }
.sg-sectionhead__sub { margin-top: var(--space-5) !important; color: var(--ink-muted); max-width: 66ch; }
/* A column that sticks: it starts at the top of its cell and clears the header. */
.sg-sticky { position: sticky; top: var(--layout-sticky-top, 96px); align-self: start; }
/* The guidelines' Highlights rule: one phrase, one solid colour, brighter than
the sentence around it - Cobalt/Indigo Blue on light, Mint Green on dark.
Gradients are background-only in this brand, so type is never gradient-filled. */
.sg-hl { color: var(--highlight); }
.sg-on-dark .sg-hl,
.sg-shell--inverse .sg-hl,
.sg-section--inverse .sg-hl { color: var(--surface-accent); }
.sg-shell--brand .sg-hl,
.sg-section--brand .sg-hl { color: var(--surface-accent); }
.sg-prose > * + * { margin-top: var(--space-5) !important; }
/* FIXED HERE (was a gap in the design system's export): the rhythm above
spaced the joins but left the browser's default margin on the first and
last child, which showed as unexplained space at the top and bottom of
every prose block — most visibly between an accordion question and its
answer, on every accordion on the site. */
.sg-prose > :first-child { margin-top: 0; }
.sg-prose > :last-child { margin-bottom: 0; }
.sg-prose p { max-width: var(--layout-measure); }
/* ---------- buttons ---------- */
/* DISABLED HAS TO LOOK DISABLED. The component had no :disabled state at all,
which only mattered once something started disabling it: Contact Form 7
disables the submit while a required consent box is unticked, and an
unstyled disabled button is a button that looks live and does nothing.
Opacity rather than a new colour, so it reads the same on every variant and
invents no token. FIXED HERE: missing interactive state. */
.sg-btn:disabled,
.sg-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.sg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 52px;
padding: var(--space-3) var(--space-6);
border: var(--stroke-hairline) solid transparent;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: 16px;
line-height: 20px;
font-weight: 400; /* the guidelines specify Regular for buttons */
text-decoration: none;
cursor: pointer;
position: relative;
isolation: isolate;
overflow: hidden;
transition:
transform var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.sg-btn:hover { transform: translateY(-2px); }
.sg-btn:active { transform: translateY(0); }
.sg-btn:focus-visible {
outline: var(--stroke-focus) solid var(--focus);
outline-offset: var(--sg-focus-offset);
}
.sg-btn__arrow { transition: transform var(--duration-fast) var(--ease-standard); flex: 0 0 auto; }
.sg-btn:hover .sg-btn__arrow { transform: translateX(4px); }
/* Filled buttons are FLAT brand colour. The hover state deepens with a charcoal
scrim rather than a lighter or darker tint, so no colour outside the primary
palette is ever introduced. */
.sg-btn--primary::after,
.sg-btn--accent::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--on-accent);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-standard);
}
.sg-btn--primary:hover::after { opacity: 0.18; }
.sg-btn--accent:hover::after { opacity: 0.12; }
.sg-btn--primary {
background: var(--surface-brand);
color: var(--on-brand);
box-shadow: var(--shadow-glow-brand);
}
/* A lift, not a flood. The old 34px-blur glow at a 16px offset spilled across
the button beside it in a pair. Raising z-index keeps the lifted button's
own shadow above its neighbour rather than under it. */
.sg-btn:hover { z-index: 1; }
.sg-btn--primary:hover { box-shadow: 0 6px 16px rgba(38, 26, 192, 0.30), 0 1px 3px rgba(38, 26, 192, 0.22); }
.sg-btn--accent {
background: var(--surface-accent);
color: var(--on-accent);
box-shadow: var(--shadow-glow-accent);
}
.sg-btn--accent:hover { box-shadow: 0 6px 16px rgba(60, 221, 144, 0.32), 0 1px 3px rgba(60, 221, 144, 0.24); }
.sg-btn--secondary {
background: var(--glass-fill);
color: var(--ink);
border-color: var(--border-control);
box-shadow: var(--shadow-xs);
}
@supports (backdrop-filter: blur(1px)) {
.sg-btn--secondary { -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
}
.sg-btn--secondary:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.sg-btn--ghost {
background: transparent;
color: var(--highlight);
border-color: transparent;
padding-inline: 0;
min-height: 34px;
border-radius: var(--radius-sm);
overflow: visible;
}
.sg-btn--ghost:hover { transform: none; }
.sg-btn--ghost::before {
content: "";
position: absolute;
left: 0; right: 100%; bottom: 2px;
height: var(--stroke-medium);
background: currentColor;
border-radius: var(--radius-full);
transition: right var(--duration-base) var(--ease-standard);
}
.sg-btn--ghost:hover::before { right: 0; }
.sg-btn--sm { min-height: 44px; padding: var(--space-2) var(--space-5); font-size: 15px; }
.sg-btn--block { width: 100%; }
.sg-on-dark .sg-btn--secondary,
.sg-section--inverse .sg-btn--secondary,
.sg-shell--inverse .sg-btn--secondary,
.sg-section--brand .sg-btn--secondary,
.sg-shell--brand .sg-btn--secondary {
color: var(--ink-inverse);
border-color: rgba(241, 240, 236, 0.32);
background: rgba(241, 240, 236, 0.09);
}
.sg-on-dark .sg-btn--secondary:hover,
.sg-section--inverse .sg-btn--secondary:hover,
.sg-shell--inverse .sg-btn--secondary:hover,
.sg-section--brand .sg-btn--secondary:hover,
.sg-shell--brand .sg-btn--secondary:hover {
border-color: var(--ink-inverse);
background: rgba(241, 240, 236, 0.16);
}
.sg-on-dark .sg-btn--ghost,
.sg-section--inverse .sg-btn--ghost,
.sg-shell--inverse .sg-btn--ghost { color: var(--surface-accent); }
.sg-on-dark .sg-btn:focus-visible,
.sg-section--inverse .sg-btn:focus-visible,
.sg-shell--inverse .sg-btn:focus-visible,
.sg-section--brand .sg-btn:focus-visible { outline-color: var(--surface-accent); }
.sg-on-dark .sg-input:focus-visible,
.sg-on-dark .sg-textarea:focus-visible,
.sg-on-dark .sg-selectbtn:focus-visible,
.sg-on-dark .sg-radio:has(input:focus-visible) { outline-color: var(--surface-accent); border-color: var(--surface-accent); }
.sg-btngroup { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
/* ---------- hero banner ---------- */
/* A split banner: a copy column and a full-bleed image column, edge to edge.
--sg-hero-split sets the ratio, --sg-hero-bg the copy column's ground.
Both are plain custom properties, so a campaign can be re-grounded with one
declaration and no template change. */
/* The copy column is sized so the image starts just past where the subtitle
wraps, plus padding. A literal 3fr/1fr split left the copy capped at its
720px measure with a wide band of empty ground before the image. */
.sg-hero {
display: grid;
/* minmax(0, …), not bare fr. An fr track's automatic minimum is min-content,
so the copy's own min-width was forcing the first column wider and the
split quietly went back to roughly what it had been. Flooring the minimum
at 0 makes 45/55 mean 45/55, and the copy overflows the track instead of
widening it. */
grid-template-columns: var(--sg-hero-split, minmax(0, 45fr) minmax(0, 55fr));
/* CHANGED HERE (Tudor's call, and it pairs with defect 13 below): the banner
fits the first screen. 620px was a floor that never applied, because the
photograph was setting the height - see .sg-hero__media img.
DECLARED, not only used as a var() fallback. Written as
`var(--sg-hero-min, min(...))` the property is undefined until a hero
overrides it, so DevTools reports it as not defined and the real value is
buried in the fallback. An element's own inline style still wins over
this rule, so signyai_hero()'s `minHeight` argument works exactly as
before - it just now overrides something you can see.
min() so it can only ever be SHORTER than the viewport, never taller;
850px caps it on a tall monitor, below which the viewport term wins and
the banner is exactly the first screen.
svh, not vh: vh is the LARGE viewport, measured as though the browser's
chrome had retracted, so on a device whose address bar is showing 100vh
is taller than what you can see and the banner overflows the fold - the
one thing this is here to prevent. svh is the small viewport, which is
always visible. On a desktop browser there is no retracting chrome and
the two are identical, so this costs nothing and is only ever safer.
Still a MIN-height: copy that does not fit pushes it taller rather than
being clipped. Under 900px wide the media query below sets it to 0 - a
stacked hero cannot fit a screen and a photograph in one viewport. */
--sg-hero-min: min(850px, 100svh);
min-height: var(--sg-hero-min);
position: relative;
isolation: isolate;
/* CHANGED HERE: the ground belongs to the BANNER, not to the copy column.
It used to sit on .sg-hero__body, which meant the photo column had a
different background and the two had to be blended into each other — two
gradients meeting, which is never going to line up. There is one
background now and the photo dissolves into it. */
background: var(--sg-hero-bg, var(--surface));
overflow: clip;
}
.sg-hero--even { --sg-hero-split: 1.2fr 1fr; }
.sg-hero__body {
/* Transparent: .sg-hero paints the ground for both columns. And no clip —
the orbs have to be free to cross into the photo column, where the mask
below lets them show through. .sg-hero clips them at the banner edge. */
background: none;
display: flex;
align-items: center;
position: relative;
/* NO isolation HERE, deliberately. It made the copy column its own stacking
context, and the photo — a later positioned sibling — therefore painted
over the whole of it as a unit. The copy now runs past its column and
across the fade, so it has to be able to sit above the photo while the
ambient orbs stay underneath it. Without the isolate, each child takes
its own place in .sg-hero's context: orbs at 0, the photo at auto, the
copy at 2. */
padding-block: var(--space-12);
/* FIXED HERE (defect 12): this used to be
max(var(--layout-gutter), calc((100vw - var(--layout-container)) / 2)),
which lines the hero's copy up with the EDGE of the content container
rather than with the content in it. Every .sg-container adds
--layout-gutter inside that edge, so the headline started exactly one
gutter - 24px - left of every other line on the page. The hero is
full-bleed and cannot use .sg-container, so it has to reproduce both
halves of the sum, and only the first half was here.
Below 1200px the max() falls through to the bare gutter, which is what a
100%-wide container gives too, so the two agree at every width. */
padding-inline-start: max(var(--layout-gutter), calc((100vw - var(--layout-container)) / 2 + var(--layout-gutter)));
padding-inline-end: var(--space-9);
}
/* The copy keeps its measure whatever the split does, and runs out over the
fade rather than being squeezed by it.
min-width is what does it: the column is 45% now, which left roughly 416px
of text once the container-aligned padding was taken out, and the headline
broke to four lines. The second term keeps it honest on a narrow screen,
where forcing 720px would push the page sideways.
z-index 2 lifts it over the photograph; see the note on .sg-hero__body. */
.sg-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 720px;
min-width: min(720px, calc(100vw - var(--layout-gutter) * 2));
}
/* REMOVED HERE: --sg-hero-fade and the per-ground colours that fed it.
They existed to colour-match a gradient laid over the photo against the copy
column's ground. The photo is masked now, so there is no second colour to
match and nothing to keep in step. */
/* No background of its own: anything opaque here would be a second ground and
the seam would come straight back. */
.sg-hero__media { position: relative; overflow: hidden; }
/* FIXED HERE (defect 13): this was `display: block; width: 100%; height: 100%`.
`height: 100%` resolves against the grid row, the grid row is sized by its
contents, and a percentage against an indeterminate height is ignored - so
the image fell back to its natural height at 100% width AND BECAME THE
THING THAT SET THE ROW HEIGHT. The banner photograph is 1201x1800, portrait,
so on a 1915px-wide screen the media column is 870px and the hero came out
1304px tall. min-height never had a chance to apply.
Taking the image out of flow gives the row nothing to size to, so the height
comes from the copy column and the min-height above, which is what both were
always for. Under 900px the media query gives .sg-hero__media an
aspect-ratio, so it still has a height of its own when it stacks. */
.sg-hero__media img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* The photograph dissolves into the banner's own ground rather than being
covered by a matching gradient. Masking the image means there is nothing
to colour-match: whatever is behind it — flat colour, gradient ground, an
ambient orb crossing the column — simply shows through.
EASED, NOT LINEAR, and this is the whole difference between a dissolve
and a smear. Alpha composites linearly, so a straight ramp sits at 50%
opacity across the middle of the fade; over a dark photograph on a light
ground that is a flat mid-grey band, and the eye reads a band as an edge —
which is the fault the fade was supposed to remove.
The stops below approximate an ease-in: the photograph stays almost
absent for the first third, then comes up quickly. Most of the fade's
width is therefore spent near the ground colour, where nothing is
visible, and the transition through the muddy middle is short.
Unsupported, the image is opaque to its edge, which is where this
started — a hard seam, not a broken layout. */
/* One definition, referenced by both the prefixed and unprefixed property,
so the stops cannot drift apart. The media query below swaps the whole
thing rather than restating eleven stops. */
--sg-hero-mask: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.015) 8%,
rgba(0, 0, 0, 0.06) 15%,
rgba(0, 0, 0, 0.14) 21%,
rgba(0, 0, 0, 0.27) 27%,
rgba(0, 0, 0, 0.45) 32%,
rgba(0, 0, 0, 0.65) 37%,
rgba(0, 0, 0, 0.82) 42%,
rgba(0, 0, 0, 0.93) 47%,
rgba(0, 0, 0, 0.98) 52%,
rgba(0, 0, 0, 1) 58%);
-webkit-mask-image: var(--sg-hero-mask);
mask-image: var(--sg-hero-mask);
/* Stated rather than left to the initial values: a mask with no size and no
repeat is tiled by some engines, which puts the fade back at every
repetition. */
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* grounds - swap one class to re-ground the banner */
.sg-hero--brand { --sg-hero-bg: var(--surface-brand); }
.sg-hero--ink .sg-hero__body { --sg-hero-bg: var(--surface-inverse); }
.sg-hero--alt .sg-hero__body { --sg-hero-bg: var(--surface-alt); }
.sg-hero--grad-1 { --sg-hero-bg: var(--gradient-dark-1); }
.sg-hero--grad-2 { --sg-hero-bg: var(--gradient-dark-2); }
.sg-hero--grad-3 { --sg-hero-bg: var(--gradient-dark-3); }
.sg-hero--mesh {
background-color: #261ac0;
background-image:
radial-gradient(80% 70% at 3% 2%, #88f6c1 0%, rgba(136, 246, 193, 0) 44%),
radial-gradient(95% 90% at 80% 97%, #21cbff 0%, rgba(33, 203, 255, 0) 50%),
radial-gradient(120% 110% at 95% 6%, #111516 0%, rgba(17, 21, 22, 0) 60%),
linear-gradient(152deg, #261ac0 0%, #111516 100%);
}
@media (max-width: 900px) {
.sg-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* FIXED HERE: --space-10 left the first line of the headline under the
floating header on phones; --space-12 is the hero's desktop padding. */
.sg-hero__body {
padding-block: var(--space-12);
padding-inline: var(--layout-gutter);
}
.sg-hero__media { aspect-ratio: 16 / 10; }
/* ADDED HERE: stacked, the photograph sits BELOW the copy, so the edge that
has to dissolve is its top one — the horizontal fade was feathering the
left-hand side of a picture whose left-hand side meets nothing.
Shorter than the desktop ramp too: 58% of a 16/10 box is more than half
the photograph washed out, which on a phone is most of what you can see. */
.sg-hero__media img {
--sg-hero-mask: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.03) 6%,
rgba(0, 0, 0, 0.11) 11%,
rgba(0, 0, 0, 0.25) 16%,
rgba(0, 0, 0, 0.45) 21%,
rgba(0, 0, 0, 0.68) 26%,
rgba(0, 0, 0, 0.86) 31%,
rgba(0, 0, 0, 0.96) 36%,
rgba(0, 0, 0, 1) 42%);
}
}
/* ---------- co-branding lockup ---------- */
/* Measured off the guidelines' co-branding diagram rather than estimated.
In that artwork the lockup's ink is 451 x 94 and its cap band - the height of
the Signy symbol - is 73. The separation between the two marks is also 73:
exactly x, with the multiply sign centred INSIDE that gap, not added to it.
x = cap / symbol height = 0.777 of the supplied lockup height
separation = x, total, edge to edge
partner mark = x tall at most, overhanging details excepted
The partner mark is optically aligned on the cap band, so our lockup hangs
its descender below the shared centre line - which is what the diagram shows. */
.sg-cobrand {
--sg-logo-h: 32px; /* full lockup ink height */
--sg-cap-h: calc(var(--sg-logo-h) * 0.777); /* x */
--sg-symbol-h: var(--sg-cap-h); /* kept as the older name */
--sg-cap-shift: calc((var(--sg-logo-h) - var(--sg-cap-h)) / 2);
display: inline-flex;
align-items: center;
gap: 0;
color: var(--ink);
}
.sg-cobrand__logo { display: inline-flex; }
.sg-cobrand__logo img { display: block; height: var(--sg-logo-h); min-height: 16px; width: auto; }
/* the separator IS the x gap - it reserves exactly x and centres the glyph in it */
.sg-cobrand__x {
flex: 0 0 var(--sg-cap-h);
width: var(--sg-cap-h);
height: var(--sg-cap-h);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.4;
transform: translateY(calc(var(--sg-cap-shift) * -1));
}
.sg-cobrand__x svg { display: block; width: 40%; height: 40%; }
.sg-cobrand__partner {
display: inline-flex;
align-items: center;
/* the hard ceiling - a taller partner asset is scaled down, never up */
max-height: var(--sg-partner-h, var(--sg-cap-h));
transform: translateY(calc(var(--sg-cap-shift) * -1));
}
.sg-cobrand__partner img,
.sg-cobrand__partner svg {
display: block;
/* --sg-partner-h is the escape hatch the guidelines ask for: a mark with
overhanging details is optically aligned on its wordmark, not on its box. */
height: var(--sg-partner-h, var(--sg-cap-h));
max-height: var(--sg-partner-h, var(--sg-cap-h));
width: auto;
}
/* The type fallback, for a partner whose artwork we have not been given.
Set to land on x, and pulled back by the left side bearing so the measured
ink-to-ink separation is x rather than x plus a bearing. A supplied partner
SVG should be tight-cropped, in which case the geometry is exact with no
compensation at all. */
.sg-cobrand__partner--wordmark {
/* Zalando Sans puts its cap at 0.72 of the font size, so setting font-size to
x rendered a partner cap of 0.72x - visibly smaller than ours. Dividing by
the cap ratio makes the two cap heights equal, which is what the diagram
shows. The ascender and descender then sit slightly outside x: that is the
overhang the guidelines allow for. */
font-size: calc(var(--sg-cap-h) / 0.72);
line-height: var(--sg-cap-h);
font-weight: 600;
letter-spacing: -0.02em;
margin-inline-start: calc(var(--sg-cap-h) * -0.14);
}
.sg-on-dark .sg-cobrand,
.sg-section--inverse .sg-cobrand,
.sg-shell--inverse .sg-cobrand { color: var(--ink-inverse); }
/* ---------- header: a floating glass pill ---------- */
.sg-header {
position: sticky;
top: 0;
z-index: 40;
padding-block: var(--space-4);
transition: padding-block var(--duration-base) var(--ease-standard);
}
.sg-header__bar {
height: var(--layout-header-h);
display: flex;
align-items: center;
gap: var(--space-6);
/* 24px inline padding = x for the 24px mark; the 76px bar leaves 26px above
and below it. Both clear the guidelines' clear-space rule. */
padding-inline: var(--space-5);
border-radius: var(--radius-full);
background: var(--glass-fill-strong);
border: var(--stroke-hairline) solid var(--glass-stroke);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-base) var(--ease-standard), height var(--duration-base) var(--ease-standard);
}
@supports (backdrop-filter: blur(1px)) {
.sg-header__bar {
-webkit-backdrop-filter: blur(var(--blur-glass)) saturate(160%);
backdrop-filter: blur(var(--blur-glass)) saturate(160%);
}
}
.sg-header.is-stuck { padding-block: var(--space-2); }
.sg-header.is-stuck .sg-header__bar { box-shadow: var(--shadow-md); height: 64px; }
/* Clear space: nothing may encroach within x of the mark, where x is the
rendered logo height. --sg-logo-h drives both the size and the reserved space,
so the two can never drift apart. Minimum 16px per the guidelines. */
.sg-header__logo {
--sg-logo-h: 24px;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding-inline-end: var(--sg-logo-h);
}
.sg-header__logo img { display: block; height: var(--sg-logo-h); min-height: 16px; width: auto; }
/* REMOVED HERE: .sg-header__nav, .sg-header__link and .sg-header__burger.
The bar no longer lists the pages — one Menu button opens the drawer at
every width, so there is no inline nav to style and no burger that only
appears on a phone. */
/* ---------- mobile drawer ----------
The old mobile menu flipped the desktop nav to display:flex inside the bar,
which dropped the links into the pill with no room and no motion. This is a
panel that slides in from the right, over a scrim, with the links staggering
in behind it. */
/* enhance() moves this element to on first run: the header is a sticky
stacking context, and any ancestor with isolation, transform or overflow:clip
would otherwise trap the panel behind the page however high its z-index. */
/* Carries its own resets: if a theme has no .sg-page wrapper the drawer ends up
at , outside the reach of the scoped rules at the top of this file. */
.sg-drawer,
.sg-drawer *,
.sg-drawer *::before,
.sg-drawer *::after { box-sizing: border-box; }
/* ---------- header actions: Menu, then the CTA ---------- */
.sg-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
margin-left: auto;
}
.sg-header__menu {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 40px;
padding-inline: var(--space-4);
border-radius: var(--radius-full);
border: var(--stroke-hairline) solid var(--border-control);
background: none;
color: inherit;
font-family: var(--font-sans);
font-size: 15px;
cursor: pointer;
transition:
border-color var(--duration-base) var(--ease-standard),
color var(--duration-base) var(--ease-standard);
}
.sg-header__menu:hover { border-color: var(--ink); color: var(--highlight); }
.sg-header__menu:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--sg-focus-offset, 2px); }
.sg-header--inverse .sg-header__menu,
.sg-header--transparent .sg-header__menu { border-color: rgba(241, 240, 236, 0.3); }
.sg-header--inverse .sg-header__menu:hover,
.sg-header--transparent .sg-header__menu:hover { border-color: var(--surface-accent); color: var(--surface-accent); }
@media (max-width: 560px) {
.sg-header__cta { display: none; }
}
.sg-drawer {
--sg-focus-offset: 2px;
position: fixed;
inset: 0;
z-index: 60;
font-family: var(--font-sans);
visibility: hidden;
transition: visibility 0s linear var(--duration-expand);
}
.sg-drawer[data-open="true"] { visibility: visible; transition-delay: 0s; }
.sg-drawer__scrim {
position: absolute;
inset: 0;
background: rgba(17, 21, 22, 0.5);
opacity: 0;
transition: opacity var(--duration-expand) var(--ease-standard);
}
@supports (backdrop-filter: blur(1px)) {
.sg-drawer__scrim { -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
}
.sg-drawer[data-open="true"] .sg-drawer__scrim { opacity: 1; }
/* CHANGED HERE: the panel comes in from the LEFT on a mint field, full
height and square-edged.
Charcoal on mint is one of the guidelines' allowed pairings; mint on white
is 1.6:1 and would not be. Everything inside therefore inherits --ink and
nothing restates a colour. */
.sg-drawer__panel {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: min(500px, 92vw);
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-6) var(--space-5) var(--space-8);
background: var(--surface-accent);
color: var(--ink);
box-shadow: var(--shadow-lg);
transform: translateX(-100%);
transition: transform var(--duration-expand) var(--ease-standard);
overflow-y: auto;
}
.sg-drawer[data-open="true"] .sg-drawer__panel { transform: none; }
/* The second panel rides over the first, same entrance, one level up. The
first keeps its scroll position and its focus order underneath. */
.sg-drawer__panel--sub {
z-index: 1;
transform: translateX(-100%);
}
.sg-drawer[data-open="true"] .sg-drawer__panel--sub { transform: translateX(-100%); }
.sg-drawer[data-sub="true"] .sg-drawer__panel--sub { transform: none; }
.sg-drawer__title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.6;
margin: 0;
}
.sg-drawer__chev { flex: 0 0 auto; opacity: 0.55; transition: transform var(--duration-base) var(--ease-standard); }
.sg-drawer__link--parent:hover .sg-drawer__chev { transform: translateX(3px); opacity: 1; }
.sg-drawer__num {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
opacity: 0.5;
min-width: 1.6em;
}
.sg-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.sg-drawer__logo { --sg-logo-h: 22px; display: inline-flex; }
/* The reversed (white) lockup disappears on mint, so the drawer takes the
black one whatever the bar above it is using. */
.sg-drawer__logo img { filter: none; }
.sg-drawer__logo img { display: block; height: var(--sg-logo-h); min-height: 16px; width: auto; }
/* Back and Close are the same control with a different glyph, so they are the
same rule. Both sit on mint with no fill of their own. */
.sg-drawer__round {
flex: 0 0 auto;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
border: var(--stroke-hairline) solid rgba(17, 21, 22, 0.22);
background: none;
color: var(--ink);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.sg-drawer__round:hover { background: rgba(17, 21, 22, 0.08); border-color: var(--ink); }
.sg-drawer__round:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--sg-focus-offset); }
.sg-drawer__nav { display: flex; flex-direction: column; }
/* CHANGED HERE with the panel's ground: these were written for charcoal and
every colour in them was an off-white. On mint they become charcoal, and the
hover becomes cobalt — mint-on-mint would be invisible. */
.sg-drawer__link {
display: flex;
align-items: baseline;
gap: var(--space-3);
width: 100%;
text-align: left;
background: none;
border: 0;
border-bottom: var(--stroke-hairline) solid rgba(17, 21, 22, 0.14);
padding: var(--space-4) 0;
color: var(--ink);
cursor: pointer;
font-family: var(--font-sans);
text-decoration: none;
font-size: 22px;
line-height: 30px;
font-weight: 600;
letter-spacing: -0.011em;
/* each link arrives a beat after the one above it, once the panel is in */
opacity: 0;
transform: translateX(18px);
transition:
opacity var(--duration-base) var(--ease-standard),
transform var(--duration-base) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.sg-drawer[data-open="true"] .sg-drawer__link {
opacity: 1;
transform: none;
transition-delay: calc(140ms + var(--sg-delay, 0ms));
}
.sg-drawer__link--parent { justify-content: space-between; }
.sg-drawer__link:hover { color: var(--highlight); }
.sg-drawer__link[aria-current="page"] { color: var(--highlight); }
.sg-drawer__link:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--sg-focus-offset); }
/* The sub-panel's links animate on ITS open state, not the drawer's —
keyed to the drawer alone they would have already played underneath. */
.sg-drawer__panel--sub .sg-drawer__link { opacity: 0; transform: translateX(18px); transition-delay: 0ms; }
.sg-drawer[data-sub="true"] .sg-drawer__panel--sub .sg-drawer__link {
opacity: 1;
transform: none;
transition-delay: calc(120ms + var(--sg-delay, 0ms));
}
.sg-drawer__foot { margin-top: auto; }
.sg-drawer__foot .sg-btn { width: 100%; }
body.sg-noscroll { overflow: hidden; }
/* The reversed logo is only ever placed on a genuinely dark ground, so the
`inverse` bar is a SOLID charcoal fill - a translucent one over a light page
composites to grey and the white mark loses its contrast. `transparent` is
translucent by definition but is darkened enough to hold the mark wherever
the gradient behind it happens to be light. */
/* FIXED HERE: both of these laid a dark ground and left the ink alone, so
everything in the bar that inherits its colour stayed near-black on
near-black. The logo is an image and the call to action is a mint button,
which is why only the Menu label showed it — and it showed it completely:
#111516 on rgba(17,21,22,.66) is invisible. */
.sg-header--inverse .sg-header__bar {
background: var(--surface-inverse);
border-color: rgba(241, 240, 236, 0.16);
color: var(--ink-inverse);
}
.sg-header--transparent .sg-header__bar {
background: rgba(17, 21, 22, 0.66);
border-color: rgba(241, 240, 236, 0.2);
color: var(--ink-inverse);
}
/* ---------- footer ---------- */
.sg-footer {
background: var(--surface-inverse);
color: var(--ink-inverse);
padding-block: var(--space-11) var(--space-8);
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
position: relative;
isolation: isolate;
overflow: clip;
}
/* THREE LINK COLUMNS: Site, Services, Legal. Contact was a fourth and is not
any more - a column of grid for two facts and a social link. The location
line moved to the base row, the email with it, and the social link went
under the logo. The cap in inc/settings.php is read from this repeat() by
a test, so the two cannot part company. */
.sg-footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-7); position: relative; z-index: 1; }
.sg-footer__logo { --sg-logo-h: 28px; display: block; padding-block-end: var(--sg-logo-h); }
.sg-footer__logo img { display: block; height: var(--sg-logo-h); min-height: 16px; width: auto; }
.sg-footer__tagline { margin-top: 0 !important; color: var(--ink-inverse-muted); max-width: 34ch; }
/* The tagline is a visual editor, so it can hold more than one paragraph.
bundle.css zeroes every
margin inside .sg-page, so without this they
would run together into one block of text. */
.sg-footer__tagline > * + * { margin-top: var(--space-4); }
.sg-footer__coltitle { color: var(--ink-inverse); margin-bottom: var(--space-4); }
/* The social row under the tagline. A hairline circle rather than a filled
chip: it is a link to somewhere else, not an action on this page. */
.sg-footer__socials { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.sg-footer__social {
display: inline-flex;
align-items: center;
justify-content: center;
/* No inline padding: a 40px square is what makes the full radius a circle
rather than a stadium. A link with no icon needs the room, so it asks
for it on its own class below. */
width: 40px;
height: 40px;
border-radius: var(--radius-full);
border: var(--stroke-hairline) solid rgba(241, 240, 236, 0.2);
color: var(--ink-inverse-muted);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
/* An uploaded icon is shown in the link's own ink, like the drawn ones, so a
one-colour mark matches its neighbours and a full-colour one still reads. */
.sg-footer__social-img { display: block; width: 18px; height: 18px; object-fit: contain; }
.sg-footer__social:hover { color: var(--ink-inverse); border-color: var(--surface-accent); }
.sg-footer__social:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--sg-focus-offset); }
/* The location line and the email sit together at the end of the base row. */
.sg-footer__where { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.sg-footer__list li + li { margin-top: var(--space-1); }
.sg-footer__link {
display: inline-block;
color: var(--ink-inverse-muted);
text-decoration: none;
font-size: 15px;
line-height: 24px;
padding-block: var(--space-1);
transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.sg-footer__link:hover { color: var(--surface-accent); transform: translateX(3px); }
.sg-footer__link:focus-visible { outline: var(--stroke-focus) solid var(--surface-accent); outline-offset: var(--sg-focus-offset); border-radius: var(--radius-xs); }
.sg-footer__base {
margin-top: var(--space-9);
padding-top: var(--space-5);
border-top: var(--stroke-hairline) solid rgba(241, 240, 236, 0.16);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: space-between;
color: var(--ink-inverse-muted);
font-size: 15px;
position: relative;
z-index: 1;
}
/* ---------- cards ---------- */
.sg-card {
color: inherit;
text-decoration: none;
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--surface);
border: var(--stroke-hairline) solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-7);
display: flex;
flex-direction: column;
transition:
transform var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard);
}
/* pointer spotlight - the -x/-y custom properties are set by bundle.js */
.sg-card--link::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
opacity: 0;
transition: opacity var(--duration-base) var(--ease-standard);
background: radial-gradient(420px circle at var(--sg-x, 50%) var(--sg-y, 0%), rgba(38, 26, 192, 0.09), transparent 62%);
pointer-events: none;
}
.sg-card > * { position: relative; z-index: 1; }
.sg-card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(38, 26, 192, 0.3); }
.sg-card--link:hover::before { opacity: 1; }
.sg-card--link:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--sg-focus-offset); }
.sg-card--alt { background: var(--surface-alt); border-color: transparent; }
.sg-card--glass {
background: var(--glass-fill);
border-color: var(--glass-stroke);
box-shadow: var(--shadow-lg);
}
@supports (backdrop-filter: blur(1px)) {
.sg-card--glass { -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%); backdrop-filter: blur(var(--blur-glass)) saturate(150%); }
}
.sg-card--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--ink-inverse); }
.sg-card--brand {
background: var(--surface-brand);
border-color: transparent;
color: var(--on-brand);
}
.sg-card--inverse.sg-card--link::before,
.sg-card--brand.sg-card--link::before {
background: radial-gradient(420px circle at var(--sg-x, 50%) var(--sg-y, 0%), rgba(60, 221, 144, 0.16), transparent 62%);
}
.sg-card--inverse.sg-card--link:hover,
.sg-card--brand.sg-card--link:hover { border-color: rgba(60, 221, 144, 0.45); }
/* CHANGED HERE: chips take --radius-md, softening the 4px corner without
going so far that a 38px box clamps into a lozenge.
The head is a plain block, NOT a flex row, and the title inside it is
inline. That puts the chip and the heading in one inline formatting
context, so a title that wraps continues at the left edge — under the
number — instead of in a column beside it. A float cannot do this here:
the chip is 38px and these headings are 32px and 28px, so the second line
would still intersect the float and stay indented. Keeping the chip a
sibling rather than moving it inside the
leaves the heading's own
text untouched, which is what the five areas are cited by. */
.sg-card__head { display: block; margin-bottom: var(--space-3); }
.sg-card__head .sg-card__num {
margin-bottom: 0;
margin-inline-end: var(--space-3);
vertical-align: text-bottom;
}
.sg-card__head .sg-card__title { display: inline; margin: 0 !important; }
.sg-card__num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px; height: 38px;
padding-inline: var(--space-2);
border-radius: var(--radius-md);
background: rgba(38, 26, 192, 0.09);
color: var(--highlight);
margin-bottom: var(--space-5);
align-self: flex-start;
}
.sg-card--inverse .sg-card__num,
.sg-card--brand .sg-card__num { background: rgba(60, 221, 144, 0.16); color: var(--surface-accent); }
.sg-card__title { margin-bottom: var(--space-3) !important; }
.sg-card__body { color: var(--ink-muted); }
.sg-card--inverse .sg-card__body { color: var(--ink-inverse-muted); }
.sg-card--brand .sg-card__body { color: rgba(255, 255, 255, 0.88); }
.sg-card__foot { margin-top: auto; padding-top: var(--space-5); }
/* signal tile */
.sg-signal {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
padding: var(--space-6);
background: rgba(241, 240, 236, 0.05);
border: var(--stroke-hairline) solid rgba(241, 240, 236, 0.13);
transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.sg-signal--link:hover { transform: translateY(-3px); background: rgba(241, 240, 236, 0.09); border-color: rgba(60, 221, 144, 0.4); }
.sg-signal::after {
content: "";
position: absolute;
left: var(--space-6); right: var(--space-6); top: 0;
height: 2px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, transparent, var(--surface-accent), transparent);
opacity: 0.55;
}
/* CHANGED HERE: the number moved from above the title to beside it, matching
the accordion. The gap belongs to the row now, so the chip carries none.
A plain block with an inline title, not a flex row, so a heading that
wraps continues under the number rather than beside it. See the note on
.sg-card__head. */
.sg-signal__head { display: block; margin-bottom: var(--space-3); }
.sg-signal__head .sg-signal__num { margin-inline-end: var(--space-3); vertical-align: text-bottom; }
.sg-signal__head .sg-signal__title { display: inline; }
.sg-signal__num {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding-inline: var(--space-2);
border-radius: var(--radius-md);
background: rgba(60, 221, 144, 0.16);
color: var(--surface-accent);
}
.sg-signal__title { margin-bottom: 0 !important; color: var(--ink-inverse); }
.sg-signal__body { color: var(--ink-inverse-muted); }
.sg-signal--light {
background: var(--surface);
border-color: var(--border-subtle);
box-shadow: var(--shadow-sm);
}
.sg-signal--light::after { background: linear-gradient(90deg, transparent, var(--surface-brand), transparent); }
.sg-signal--light.sg-signal--link:hover { background: var(--surface); border-color: rgba(38, 26, 192, 0.3); box-shadow: var(--shadow-md); }
.sg-signal--light .sg-signal__num { background: rgba(38, 26, 192, 0.09); color: var(--highlight); }
.sg-signal--light .sg-signal__title { color: var(--ink); }
.sg-signal--light .sg-signal__body { color: var(--ink-muted); }
/* result card */
.sg-result {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--surface);
border: var(--stroke-hairline) solid var(--border-subtle);
box-shadow: var(--shadow-sm);
padding: var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sg-result--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sg-result::after {
content: "";
position: absolute;
left: 0; top: var(--space-7); bottom: var(--space-7);
width: 3px;
border-radius: var(--radius-full);
background: linear-gradient(180deg, var(--surface-brand), rgba(38, 26, 192, 0.15));
}
.sg-result__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sg-result__metrics { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: auto; padding-top: var(--space-5); border-top: var(--stroke-hairline) solid var(--border-subtle); }
.sg-metric__value { display: block; color: var(--highlight); }
.sg-metric__label { display: block; color: var(--ink-muted); margin-top: var(--space-1); }
.sg-tag {
display: inline-block;
padding: 5px var(--space-3);
border-radius: var(--radius-full);
background: var(--surface-alt);
font-size: 13px;
line-height: 18px;
color: var(--ink-muted);
}
/* ---------- accordion ---------- */
.sg-accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.sg-accordion__item {
border-radius: var(--radius-lg);
border: var(--stroke-hairline) solid var(--border-subtle);
background: var(--surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.sg-accordion__item:hover { border-color: rgba(38, 26, 192, 0.24); }
.sg-accordion__item[data-open="true"] {
border-color: rgba(38, 26, 192, 0.36);
box-shadow: var(--shadow-md);
}
.sg-accordion__trigger {
width: 100%;
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-6);
background: none;
border: 0;
text-align: left;
cursor: pointer;
color: var(--ink);
font-family: var(--font-sans);
transition: color var(--duration-fast) var(--ease-standard);
}
/* FIXED HERE: the trigger pads all four sides, which is right closed and
wrong open — its bottom padding then stacks on the panel's own and reads
as a gap between the question and the answer. */
.sg-accordion__trigger { transition: padding-bottom var(--duration-expand) var(--ease-standard); }
.sg-accordion__item[data-open="true"] .sg-accordion__trigger { padding-bottom: var(--space-2); }
.sg-accordion__trigger:hover { color: var(--highlight); }
/* inset: the trigger fills its card, so an outer ring would float off the row */
.sg-accordion__trigger:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: calc(var(--sg-focus-offset) * -1); border-radius: var(--radius-lg); }
/* CHANGED HERE: softened from a 4px corner to --radius-md. */
.sg-accordion__num {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding-inline: var(--space-2);
border-radius: var(--radius-md);
background: rgba(38, 26, 192, 0.09);
color: var(--highlight);
}
.sg-accordion__label { flex: 1 1 auto; padding-top: 0; }
.sg-accordion__meta { display: block; color: var(--ink-muted); margin-top: var(--space-2); }
.sg-accordion__icon {
flex: 0 0 auto;
width: 38px; height: 38px;
border-radius: var(--radius-full);
background: var(--surface-alt);
position: relative;
transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-expand) var(--ease-standard);
}
.sg-accordion__icon::before,
.sg-accordion__icon::after {
content: "";
position: absolute;
left: 11px; right: 11px; top: 18px;
height: 2px;
border-radius: var(--radius-full);
background: currentColor;
transition: transform var(--duration-expand) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.sg-accordion__icon::after { transform: rotate(90deg); }
.sg-accordion__trigger[aria-expanded="true"] .sg-accordion__icon { transform: rotate(180deg); }
.sg-accordion__trigger[aria-expanded="true"] .sg-accordion__icon::after { transform: rotate(0deg); opacity: 0; }
/* Height animation without measuring: grid-template-rows 0fr -> 1fr.
Three things have to move together or the row reads as a snap: the track,
the panel's own bottom padding, and the content's opacity. The padding used
to jump, which alone was enough to lose the animation. */
.sg-accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--duration-expand) var(--ease-standard);
}
/* Set for one frame while a row is opened from a link, so the layout is final
before the page is scrolled. Without it the scroll is measured against
heights that are still animating and lands in the wrong place, then visibly
corrects itself. Every other open and close animates as normal. */
.sg-accordion--instant .sg-accordion__panel,
.sg-accordion--instant .sg-accordion__panel-inner,
.sg-accordion--instant .sg-accordion__trigger,
.sg-accordion--instant .sg-accordion__icon { transition: none !important; }
.sg-accordion__panel > .sg-accordion__panel-inner {
overflow: hidden;
min-height: 0;
padding: 0 var(--space-6);
opacity: 0;
transition:
padding-bottom var(--duration-expand) var(--ease-standard),
opacity var(--duration-base) var(--ease-standard);
}
.sg-accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.sg-accordion__panel[data-open="true"] > .sg-accordion__panel-inner {
padding-bottom: var(--space-7);
opacity: 1;
transition-delay: 0ms, 90ms;
}
/* FIXED HERE: this used to indent the answer by 58px to line it up with a
trigger carrying a number badge. Only the Services pillars have one, so
everywhere else the answer sat inset from its own question for no visible
reason — and the design system already zeroed it at mobile, contradicting
itself. The measure is the part worth keeping. */
.sg-accordion__panel .sg-prose { max-width: 78ch; }
/* ---------- answer list and bullets ---------- */
.sg-answers { display: grid; gap: var(--space-5); }
.sg-answer {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--surface);
border: var(--stroke-hairline) solid var(--border-subtle);
transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.sg-answer--link:hover { border-color: rgba(38, 26, 192, 0.26); transform: translateY(-2px); }
.sg-answer__tick {
width: 30px; height: 30px;
flex: 0 0 auto;
border-radius: var(--radius-full);
background: rgba(38, 26, 192, 0.1);
color: var(--highlight);
padding: 6px;
margin-top: 1px;
}
.sg-answer__q { display: block; margin-bottom: var(--space-2); }
.sg-answer__a { color: var(--ink-muted); }
.sg-section--inverse .sg-answer,
.sg-shell--inverse .sg-answer,
.sg-on-dark .sg-answer { background: rgba(241, 240, 236, 0.05); border-color: rgba(241, 240, 236, 0.13); }
.sg-section--inverse .sg-answer--link:hover,
.sg-shell--inverse .sg-answer--link:hover,
.sg-on-dark .sg-answer--link:hover { border-color: rgba(60, 221, 144, 0.4); }
.sg-section--inverse .sg-answer__tick,
.sg-shell--inverse .sg-answer__tick,
.sg-on-dark .sg-answer__tick { background: rgba(60, 221, 144, 0.16); color: var(--surface-accent); }
.sg-section--inverse .sg-answer__a,
.sg-shell--inverse .sg-answer__a,
.sg-on-dark .sg-answer__a { color: var(--ink-inverse-muted); }
/* Bullets - flex, not grid. The marker is a real element; there is no ::before,
so nothing can add a phantom third column and squeeze the text. */
.sg-bullets { display: flex; flex-direction: column; gap: var(--space-4); }
/* A list longer than five items reads as a data dump in one column. */
.sg-bullets--2col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5) var(--space-8);
}
@media (max-width: 768px) { .sg-bullets--2col { grid-template-columns: minmax(0, 1fr); } }
.sg-bullets__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-width: 0;
}
.sg-bullets__dot {
flex: 0 0 auto;
width: 22px; height: 22px;
margin-top: 4px;
border-radius: var(--radius-full);
background: rgba(38, 26, 192, 0.1);
position: relative;
}
.sg-bullets__dot::after {
content: "";
position: absolute;
inset: 7px;
border-radius: var(--radius-full);
background: var(--highlight);
}
.sg-bullets__text { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.sg-bullets__text strong { font-weight: 600; }
.sg-bullets--muted .sg-bullets__text { color: var(--ink-muted); }
.sg-bullets--muted .sg-bullets__text strong { color: var(--ink); }
.sg-section--inverse .sg-bullets__dot,
.sg-shell--inverse .sg-bullets__dot,
.sg-on-dark .sg-bullets__dot { background: rgba(60, 221, 144, 0.18); }
.sg-section--inverse .sg-bullets__dot::after,
.sg-shell--inverse .sg-bullets__dot::after,
.sg-on-dark .sg-bullets__dot::after { background: var(--surface-accent); }
.sg-section--inverse .sg-bullets__text,
.sg-shell--inverse .sg-bullets__text,
.sg-on-dark .sg-bullets__text { color: var(--ink-inverse); }
.sg-section--inverse .sg-bullets--muted .sg-bullets__text,
.sg-shell--inverse .sg-bullets--muted .sg-bullets__text,
.sg-on-dark .sg-bullets--muted .sg-bullets__text { color: var(--ink-inverse-muted); }
.sg-section--inverse .sg-bullets--muted .sg-bullets__text strong,
.sg-shell--inverse .sg-bullets--muted .sg-bullets__text strong,
.sg-on-dark .sg-bullets--muted .sg-bullets__text strong { color: var(--ink-inverse); }
/* ---------- operating model ---------- */
.sg-model { display: flex; flex-direction: column; }
.sg-model__layer {
position: relative;
border-radius: var(--radius-lg);
border: var(--stroke-hairline) solid rgba(241, 240, 236, 0.15);
background: rgba(241, 240, 236, 0.05);
padding: var(--space-5) var(--space-6);
transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.sg-model__layer--link:hover { transform: translateX(6px); background: rgba(241, 240, 236, 0.09); border-color: rgba(60, 221, 144, 0.4); }
/* No marker on the card. The connector between the cards is the only mint
element here: one line reading down the stack says "these are connected"
more clearly than six separate tabs saying it six times. */
.sg-model__name { display: block; color: var(--ink-inverse); }
.sg-model__detail { display: block; color: var(--ink-inverse-muted); margin-top: var(--space-2); }
.sg-model__link {
height: var(--space-5);
width: 2px;
/* lines up with the card's inner padding, so the spine sits under the text */
margin-left: var(--space-6);
border-radius: var(--radius-full);
background: linear-gradient(180deg, rgba(60, 221, 144, 0.7), rgba(60, 221, 144, 0.2));
}
/* ---------- logo strip ---------- */
.sg-logostrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.sg-logostrip__item {
color: var(--ink-muted);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full);
background: var(--surface);
border: var(--stroke-hairline) solid var(--border-subtle);
box-shadow: var(--shadow-xs);
transition: transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.sg-logostrip__item--link:hover { transform: translateY(-2px); color: var(--ink); border-color: rgba(38, 26, 192, 0.3); }
/* ADDED HERE (not in the design system): a partner may carry a real logo.
The design system renders names only, because Signy AI owns none of these
marks and no artwork was supplied - see inc/components/logo-strip.php. That
is still the default; this is what a supplied file gets.
A FIXED BOX, deliberately. The marquee loops by translating its track -50%,
which holds only while the track is exactly twice one run, and an image
whose width is unknown until it loads changes that width after the
animation has started - the loop visibly jumps at the seam on a first
visit. A box that measures the same before and after the bytes arrive
cannot, and it sits logos of very different proportions at one optical
size, which is what a logo wall wants regardless. contain, never cover: a
cropped trademark is a misused trademark. */
/* CHANGED HERE (Tudor's call): a logo gets no chip. The pill is what a NAME
wears - see the note in inc/components/logo-strip.php. A trademark inside a
bordered white capsule reads as a button, and a row of them reads as a
toolbar, so everything the pill paints is unset here rather than in
theme.css: .sg-logostrip__item is a design-system class and this file is
where it is defined.
The border is kept at zero width rather than removed, so the two kinds of
item still box-size by the same rules. */
.sg-logostrip__item--logo {
display: inline-flex;
align-items: center;
padding: 0;
border-width: 0;
background: none;
box-shadow: none;
}
.sg-logostrip__logo {
display: block;
/* --sg-logostrip-base-h is what a per-logo nudge multiplies; the two are
separate so an item can override its own height without the base moving
for every other one. See inc/components/logo-strip.php. */
--sg-logostrip-base-h: 30px;
width: var(--sg-logostrip-w, 140px);
height: var(--sg-logostrip-h, var(--sg-logostrip-base-h));
object-fit: contain;
object-position: center;
}
/* A dark ground gets the reverse artwork, not an inverted copy of the light
one - there is no filter here on purpose. The supplied partner files are
dark-on-transparent, so the strip is a light-ground component today; if it
is ever asked for on a dark slab the files are what change. */
.sg-section--inverse .sg-logostrip__item,
.sg-shell--inverse .sg-logostrip__item,
.sg-on-dark .sg-logostrip__item {
background: rgba(241, 240, 236, 0.06);
border-color: rgba(241, 240, 236, 0.14);
color: var(--ink-inverse-muted);
}
/* ---------- forms ---------- */
.sg-field { display: block; }
.sg-field + .sg-field { margin-top: var(--space-5); }
.sg-field__label { display: block; margin-bottom: var(--space-2); color: var(--ink); }
.sg-field__req { color: var(--highlight); }
.sg-field__help { display: block; margin-top: var(--space-2); color: var(--ink-muted); }
.sg-field__error { display: block; margin-top: var(--space-2); color: #b3261e; }
.sg-input,
.sg-select,
.sg-textarea {
width: 100%;
min-height: 52px;
padding: var(--space-3) var(--space-5);
background: var(--surface);
color: var(--ink);
border: var(--stroke-hairline) solid var(--border-control);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 17px;
line-height: 28px;
appearance: none;
-webkit-appearance: none;
transition:
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard);
}
.sg-textarea { min-height: 136px; resize: vertical; padding-block: var(--space-4); }
.sg-input:hover, .sg-select:hover, .sg-textarea:hover,
.sg-selectbtn:hover { border-color: var(--ink); background: var(--surface-alt); }
/* ONE band. This rule used to paint three indicators at once - a 3px outline,
a 4px spread shadow and a darkened border - and a text input matches
:focus-visible on a mouse click as well as on Tab, so every click into a field
drew all three.
A control with its own visible border is a special case: a ring held off the
edge leaves the border, a gap and the ring, which still reads as two lines.
So here the ring sits flush and the border takes the focus colour, and the
two become one 4px edge. Borderless controls keep the offset ring. */
.sg-input:focus-visible, .sg-select:focus-visible, .sg-textarea:focus-visible,
.sg-selectbtn:focus-visible {
outline: var(--stroke-focus) solid var(--focus);
outline-offset: 0;
border-color: var(--focus);
background: var(--surface);
}
/* Pointer users do not get a ring - they know where they clicked.
:focus-visible handles this on its own for buttons, links and cards, but a
text input matches it on a mouse click as well as on Tab, by specification.
So the ring is suppressed for those three, and only when the page has just
been driven by a pointer. The field still answers the click: its border
darkens, the same affordance hover gives.
This SUPPRESSES rather than enables, which is the safe direction. No script,
no attribute, no suppression, ring shown. */
:root[data-sg-modality="pointer"] .sg-input:focus-visible,
:root[data-sg-modality="pointer"] .sg-select:focus-visible,
:root[data-sg-modality="pointer"] .sg-textarea:focus-visible {
outline: none;
border-color: var(--ink);
}
:root[data-sg-modality="pointer"] .sg-on-dark .sg-input:focus-visible,
:root[data-sg-modality="pointer"] .sg-on-dark .sg-textarea:focus-visible { border-color: var(--ink-inverse); }
/* ---------- select ----------
A native