/*
Shared design tokens for the whole site.
Colors, fonts and easing curves pulled from the original AxureRP export's
data/styles.css (the RP project's global style sheet) so every page stays
visually consistent without repeating raw values.
*/
/* ==========================================================================
SELF-HOSTED WEBFONTS — the site's only two families, served from v2/fonts/
--------------------------------------------------------------------------
These replaced the Google Fonts tags that every page used to carry
(owner's change, 2026-09-03), so a visitor's browser talks to nobody but
this server and the type arrives without a third-party round trip.
The files are google-webfonts-helper's Latin-subset STATIC cuts, one file
per weight — not the variable fonts Google's own CSS serves — so every
weight the site can ask for is declared below and nothing is synthesised:
Josefin Sans 100 200 300 400 500 600 700 (the face stops at 700)
Kumbh Sans 100 200 300 400 500 600 700 800 900
No italic files: nothing on the site sets font-style italic (the `em`
spans are colour-only), so none were fetched. If one is ever wanted, add
the italic cut and a second @font-face with `font-style: italic`.
`font-display: block`, NOT swap. With swap, every navigation painted one
frame of Helvetica before the woff2 landed -- the wordmark wrapped to two
lines and the rail labels changed face -- and on this site, where every
box is measured to the glyph, a frame of the wrong face is worse than a
frame of no text. block holds the text invisible for up to 3s while the
file loads (in practice a few ms from cache) and never shows a fallback
unless the file genuinely fails to arrive.
The three faces the shared chrome uses on every page -- Josefin 400 for
the name, Kumbh 200 for body copy and nav labels, Kumbh 400 for the tabs
-- are also ed in every page's , ahead of the
stylesheets, so they are fetched in parallel with the CSS instead of
after it. The two together are what make a sub-nav click land with the
type already right. NOTE FOR THE SERVER: the preview server sends
`Cache-Control: no-store` on everything, which re-downloads the fonts on
every click; the production server should send a long max-age on
/fonts/ so the block period is a cache hit and costs nothing.
The `../fonts/` path is css/ reaching v2/fonts/, which never leaves v2.
========================================================================== */
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 100; font-display: block; src: url("../fonts/josefin-sans-v34-latin-100.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 200; font-display: block; src: url("../fonts/josefin-sans-v34-latin-200.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; font-display: block; src: url("../fonts/josefin-sans-v34-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/josefin-sans-v34-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 500; font-display: block; src: url("../fonts/josefin-sans-v34-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: block; src: url("../fonts/josefin-sans-v34-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 700; font-display: block; src: url("../fonts/josefin-sans-v34-latin-700.woff2") format("woff2"); }
/* ==========================================================================
ONE EXTRA FACE, LOADED FOR ONE GLYPH — the capital "I" of "AI-First".
Kumbh Sans draws that letter as a bare vertical stroke and its cap height
equals the lowercase ascender, so the glyph is identical to a lowercase "l"
and "AI" reads as "Al". Serifs on the I are the fix; Kumbh has no serif
companion, so the serif has to come from somewhere else.
Josefin Slab is the WORDMARK's own sister face — Santiago Orozco designed
both — so its serifs are Josefin's letterforms rather than a foreign typeface
arriving for a single letter.
⚠️ IF THE PHRASE "AI-First" IS EVER DROPPED, DELETE THIS FACE, ITS @font-face
RULE AND fonts/josefin-slab-v29-latin-variable.woff2. It exists for a single
character in a single string and has no other consumer on the site.
========================================================================== */
/* VARIABLE, not a static cut, and for one reason: the weight has to be TUNED.
Josefin Slab 200 draws a stem 41.7% thinner than Kumbh Sans 200 at the same
optical size (measured: 7px against 12px at 10x). No static cut lands on a
match, so this axis is dialled to a fractional weight instead — see
`.tagline .claim-eye` in css/index.css. One file covers 100-700. */
@font-face { font-family: "Josefin Slab"; font-style: normal; font-weight: 100 700; font-display: block; src: url("../fonts/josefin-slab-v29-latin-variable.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 100; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-100.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 200; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-200.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 300; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 500; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 600; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 700; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 800; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 900; font-display: block; src: url("../fonts/kumbh-sans-v27-latin-900.woff2") format("woff2"); }
:root {
--color-bg: #41556a;
--color-white: #ffffff;
--color-accent: #35ff00;
--color-accent-dim: #33ff00;
--color-case-study-blue: #3f64ce;
--color-nav-ring: #a0aab5;
--color-emphasis: #ffe073; /* warm yellow used for emphasis in body copy */
/* The second text accent. The saturated green is now reserved for NAVIGATION
— the nav dots, the rail, the chevrons — so text that needs to stand apart
from the body without being emphasis uses this cool blue instead. Owner's
colour, not the original's: the source uses #35FF00 here too, which is why
names and quote marks used to read as if they were links to somewhere on
the site. Yellow keeps its job as in-sentence emphasis. */
--color-accent-cool: #81d3f8;
/* The shape kit's three gradients (see js/icons.js). Declared here as stop
colours rather than as finished gradients because they are consumed twice:
as CSS gradients on instances, and as SVG
stops on the drawn shapes, which cannot take a CSS
gradient. Same numbers either way.
sheen the translucent left-to-right lift on the torsos, arrows and
chart bars (white 9.8% -> 29.8%)
fade the four growing panels, which start from nothing
(white 0 -> 29%)
slate the one solid-bodied figure (#56687a -> #798796) */
--kit-sheen-from: rgba(255, 255, 255, 0.098);
--kit-sheen-to: rgba(255, 255, 255, 0.298);
--kit-fade-from: rgba(255, 255, 255, 0);
--kit-fade-to: rgba(255, 255, 255, 0.29);
--kit-slate-from: #56687a;
--kit-slate-to: #798796;
/* The artwork's own default tint, and the hairline Axure puts inside the
circles. Both are literal values out of the export. */
--kit-tint: rgba(255, 255, 255, 0.498);
--kit-hairline: rgb(121, 121, 121);
--kit-paper: #f2f2f2;
--font-heading: "Josefin Sans", "JosefinSans-Regular", sans-serif;
--font-heading-light: "Josefin Sans", "JosefinSans-Light", sans-serif;
--font-body: "Kumbh Sans", "KumbhSans-Regular", sans-serif;
--font-body-light: "Kumbh Sans", "KumbhSans-Light", sans-serif;
--font-body-black: "Kumbh Sans", "KumbhSans-Regular_Black", sans-serif;
/* BODY COPY — a deliberate departure from the original, applied site-wide.
Both numbers used to be repeated in every page stylesheet, which is why
they are tokens now: changing the site's reading voice should be one edit,
not seven.
line height 30px -> 22.5px (-25%)
weight 400 -> 200 (Kumbh Sans Regular -> Thin)
30px is Axure's own value and it is ABSOLUTE, not a ratio — the original
sets the same 30px on 18px, 19px and 20px copy, so the three sizes sit on
one leading. Keeping it in px preserves that; a unitless token would pull
them apart. about-intro is the one page whose leading was authored as a
ratio (1.6); it carries the same -25% as 1.2.
The weight token is applied on `body` below, so anything that does not
state a weight inherits it. Everything with its own weight is untouched by
design: the 900/700 emphasis runs, the 200 nav labels and case-study
subtitles, the 84px wordmark and the nav's own 400 chrome. The `em` spans
ARE body weight by definition (colour only, no weight change), so they read
the token rather than a literal 400 — at 200 they stay colour-only, which is
the whole point of that form.
KNOWN CONSEQUENCE of 200, accepted by the owner: body copy is now the same
weight as the things that used to be lighter THAN it — the testimonial
attributions, the case-study subtitles and the nav labels are all Kumbh Thin
200. In the original those read as a lighter register against 400 body copy;
that contrast is gone. If it needs to come back, lift those to 300 rather
than pushing the body back up. */
--line-height-body: 22.5px;
--font-weight-body: 200;
/* SUCCESS-METRIC LABELS — the copy that sits beside a Results badge, in two
sizes. The source writes every one of them at 19px on every case study;
these are the owner's two variants of that, and which one a page takes is a
composition decision, not a per-row one:
sm 19px the source's own. For a Results section that shares its width
with something else — Alere puts a chart and a second column
of metrics to the right of its list, so the labels have to
stay out of their way.
lg 26px for a Results section with the whole page to itself. Oracle
has no chart and nothing in its right half, and at 19px the
labels read as undersized against their own 77px badges.
It is the size of that page's closing "Plus Oracle's buyout
of ATG..." line, which is what set it.
The 120px line box the lists use is the BADGE rhythm and does not scale
with these: a row's ink centre moves 0.35px between the two sizes, so the
rows stay level with the badges either way (measured, not assumed). */
--metric-label-sm: 19px;
--metric-label-lg: 26px;
/* The section break behind every case study's .section-title row — OWNER'S
CHANGE, 2026-10-12: Figma's, on all five case studies, replacing the
export's horizontal white 4.3% -> 1.2% tint. Figma's "Section Headers"
component (Rectangle 160, Resume-2026) is #0d183a top to bottom, alpha 0
at the top, 0.5 at 70%, 1 at the bottom, under a 40% layer opacity; the
stops below are those alphas times 0.4. Direction confirmed by sampling the
owner's Figma screenshot: clear at the top, darkest at the bottom. Figma's
rectangle is 96 tall; V2's rows keep their 65, so the same curve is drawn
over the shorter band. */
--section-break-fade: linear-gradient(
to bottom,
rgba(13, 24, 58, 0) 0,
rgba(13, 24, 58, 0.2) 70%,
rgba(13, 24, 58, 0.4) 100%
);
/* Axure's two built-in easing curves used throughout the prototype's
"slide"/"fade" interactions. */
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
/* Penner's easeInCubic — the mirror of --ease-out-cubic. Used by the nav
chevrons for the OUTGOING slide (css/nav.css). */
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
/* Axure's two bounce curves. Bounce is piecewise and cannot be expressed as
a cubic-bezier, so these are the Penner equations sampled at 25 points and
handed to CSS linear(). NO LONGER USED: the nav chevrons were the only
consumer and the owner replaced the bounce with plain cubic eases on
2026-09-11 (see css/nav.css). Kept so the source's curve is still on hand. */
--ease-out-bounce: linear(0.0000, 0.0131, 0.0525, 0.1182, 0.2101, 0.3282,
0.4727, 0.6433, 0.8403, 0.9697, 0.8754, 0.8074, 0.7656, 0.7501, 0.7609,
0.7979, 0.8611, 0.9506, 0.9727, 0.9428, 0.9392, 0.9619, 0.9952, 0.9845, 1.0000);
--ease-in-bounce: linear(0.0000, 0.0155, 0.0048, 0.0381, 0.0608, 0.0572,
0.0273, 0.0494, 0.1389, 0.2021, 0.2391, 0.2499, 0.2344, 0.1926, 0.1246,
0.0303, 0.1597, 0.3567, 0.5273, 0.6718, 0.7899, 0.8818, 0.9475, 0.9869, 1.0000);
/* Inner pages are a FIXED-WIDTH canvas centred horizontally and aligned to
the top — they do not stretch to fill the window. The original export sets
`body { width: 1444px }` on every about-* page plus projects-start, birdzi
and oracle, and every element's x-coordinate is measured against it.
The nav bar and the page content share this one canvas, which is what keeps
the nav's own coordinates (name at 20, tabs at 329/477/653) lined up with
the content below it.
Two case studies were authored wider — projects-access at 1482 and
projects-alere at 1496. Those pages override this token; nothing else
should need to. */
--page-width: 1444px;
/* The top nav's height, and now a boundary rather than just a measurement:
the bar is sticky, so this is the line content disappears under. Stated
once because components.css offsets the whole rail by it. */
--nav-height: 66px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-white);
font-family: var(--font-body);
font-weight: var(--font-weight-body);
min-height: 100%;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg {
display: block;
max-width: 100%;
}