/* ==========================================================================
The brand lockup: mark + wordmark.
ONE component, used at every size the site needs — boot screen, header,
footer, 404, privacy, admin. The sizes are not hard-coded per location;
every part of the lockup is expressed in em, so a location sets exactly one
number (font-size) and the mark, the gap and the /OS suffix all follow.
That is what keeps the header lockup and the 5x-larger boot lockup the same
SHAPE, which the boot animation depends on — see the note on --lg-mark-h.
The wordmark stays live text in the site's own display face rather than
being drawn into the SVG. Three reasons, in order of how much they matter:
it is selectable and searchable and reads to a screen reader as the company
name; it takes the theme's ink for free; and it stays hairline-crisp at
every size and pixel density, which outlined lettering at 19px does not.
THE MARK IS TRACED FROM THE CLIENT'S ARTWORK, not redrawn — see
brand/trace.py and docs/BRAND.md. It is two stacked paths in ONE colour:
the whole silhouette at --lg-aux-op, then the cloud, cable and plug over it
at full strength. That reproduces the two-tone depth of the original
(saturated cloud in front, desaturated globe behind) without introducing a
second colour, which the brief ruled out.
========================================================================== */
.lg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.lg{
display:inline-flex; align-items:center;
gap:var(--lg-gap, .52em);
white-space:nowrap;
}
/* --lg-mark-h is the ONE knob. It is in em deliberately: the boot mark flies
into the header by measuring both boxes and scaling one onto the other
(initContactChrome's sibling, flyMark() in intro.js), so the two lockups
have to be geometrically similar — same mark-height-to-text ratio, same
gap ratio — or the mark visibly changes shape mid-flight. Expressing every
part in em makes that true by construction rather than by two numbers
someone has to remember to keep in step. */
.lg-mark{
height:var(--lg-mark-h, 1.52em);
width:auto; /* the viewBox carries the aspect ratio */
flex:0 0 auto;
/* The mark's optical centre sits a touch above its box centre — the cable
and plug hang below the cloud, so centring the box leaves the cloud
riding high next to the cap height of the word. */
transform:translateY(var(--lg-mark-shift, .06em));
}
/* THE BRAND COLOUR, and where it goes.
The client's artwork is drawn in two families and splits them the same way
twice: the mark's cloud, cable and plug are a saturated blue and its globe
is grey; the wordmark's "C2C" is that same blue and "Infra" that same grey.
Sampled off the original — #164775 at saturation 0.81 against #607284 at
0.27, with the boundary falling exactly between the C and the I.
So "replace the grey with the brand green" has one consistent answer: the
rear layer of the mark, and the word "Infra". The ink family stays the
theme's own ink. Two elements, one rule, and it matches how the logo was
drawn rather than being a decision imposed on it. */
.lg{ --lg-aux:var(--accent); }
.lg-type b{ font-weight:inherit; color:var(--ink); }
.lg-type i{ font-style:normal; color:var(--lg-infra, var(--accent)); }
/* .brand, .bm-word and .fb-name each already declare `display` at the same
specificity as .lg, so which one wins comes down to stylesheet order —
logo.css happening to load after chrome.css and footer.css. Restated here
at higher specificity so that reordering two tags cannot quietly
break every lockup on the site into a stacked block. */
.brand.lg, .bm-word.lg, .fb-name.lg{ display:inline-flex; }
/* The gap IS the word space. .lg-type is a flex container, and flex collapses
the whitespace between its items, so the markup's space between "C2C" and
"Infra" renders as nothing — the two words ran together as C2CINFRA. .28em
is what Syne 800 sets a space at, measured rather than nudged. */
.lg-type{ display:inline-flex; align-items:baseline; gap:.28em; }
/* ---------- where the lockup is used, and how big -------------------------
Each rule sets font-size and nothing else. The lockup does the rest. */
/* Header. Nothing to set — and that is the point of building the mark in one
colour. .topbar is mix-blend-mode:difference, which blends every child
against the page behind it; that is the trick that lets one header sit
legibly over both themes and over images. currentColor inverts cleanly
through it. Any fixed second colour would not: it becomes
colour-minus-the-backdrop, which shifts as the page scrolls underneath.
Note what is NOT set here: --lg-mark-h. The header and the boot screen must
keep the DEFAULT, and identically. flyMark() scales the boot lockup onto
the header lockup by the ratio of their widths, which is only a faithful
move if the two are geometrically similar. Giving the header a slightly
larger mark — an easy thing to want, and the first thing I tried — makes
the two shapes merely similar-ish, and the mark visibly changes proportion
against the word during the flight. One number, both places, no override. */
/* Footer. Larger mark against the wordmark than the header uses: the footer
lockup sits alone at the top of a column with nothing competing, so it can
afford to lead with the mark. */
.foot-brandcol .fb-name{ --lg-mark-h:1.62em; --lg-gap:.5em; }
@media (max-width:640px){
/* The mark holds its own proportion; only the type step changes, which the
em chain then follows. */
.foot-brandcol .fb-name{ --lg-mark-h:1.5em; }
}
/* ---------- standalone mark ----------------------------------------------
For places that want the symbol with no wordmark beside it. Sized in px
rather than em because these have no text to be relative to. */
.lg-mark-only{ display:inline-block; width:auto; color:var(--ink); }
.lg-mark-only.is-sm{ height:22px; }
.lg-mark-only.is-md{ height:34px; }
.lg-mark-only.is-lg{ height:56px; }
/* ---------- no motion on the mark, deliberately ---------------------------
A pulsing "live" node was drawn and then cut, for two reasons worth
recording so it does not get re-added.
The mechanical one: the mark is a