/* ==========================================================================
Nano Ceramic 9H, shared stylesheet
Linked from every page's via ,
so it loads once and is cached across all pages.
Class prefix: nc-
Hover and focus states are the .nc-hv-* / .nc-fc-* utilities near the bottom
of this file. They were style-hover="..." attributes compiled at runtime
until the Design Composer runtime was removed.
========================================================================== */
/* --------------------------------------------------------------------------
Fonts, self-hosted from ./fonts
Both families were loaded from fonts.googleapis.com on all 31 pages, which
cost two extra hosts, two TLS handshakes and a serialised dependency: the
browser could not request a font until Google's stylesheet came back. These
are the same files Google serves, downloaded and declared here instead.
Variable, not static: one file per family covers 400-700 rather than four
files each. That is why every weight the site uses (400, 500, 600, 700)
works from a single src, and why no @font-face is repeated per weight.
Split by unicode-range exactly as Google splits them, so the browser fetches
latin-ext only on a page that needs it. Only one character on the whole site
does: the rupee sign in the Ceramic Booster pricing. Vietnamese is dropped.
The arrows and geometric symbols in the carousel buttons and the About Us
icon pads (U+27F5, U+27F6, U+2248, U+25B3, U+25CB, U+25CE) sit outside every
subset Google publishes, so they render in a system font. That was already
true when the fonts came from Google; it is not a regression here.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Host Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts/host-grotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Host Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts/host-grotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--nc-ink: #1A1A1A;
--nc-muted: #525252;
--nc-dim: #737373;
--nc-faint: #A3A3A3;
--nc-accent: #E02926;
--nc-accent-dk: #C21E1B;
--nc-line: #E5E7EB;
--nc-surface: #F4F4F5;
--nc-slate: #2A333C;
--nc-white: #FFFFFF;
--nc-onDark: #D4D4D8;
/* Colours that were only ever written as literal hexes inside style="..."
attributes. Naming them is what stops the next near-duplicate from being
invented: eight different light greys had already accumulated this way.
See the design system page for where each one belongs. */
--nc-tint: #FDEBEB;
/* accent tint: icon pads, category pills */
--nc-accent-lt: #FCA5A5;
/* accent text on a dark row */
--nc-onSlate: #B9C0C7;
/* body copy on --nc-slate */
--nc-slate-line: #3A454F;
/* hairline on --nc-slate */
--nc-ink-deep: #14181C;
/* full-bleed band, one step below --nc-ink */
--nc-warm: #EDE6E4;
/* warm backing behind case study cards */
--nc-fill: #E9E9EC;
/* image box / skeleton fill */
--nc-fill-lt: #F1F1F3;
/* lighter fill, and the bullet hairline */
--nc-surface-lt: #FAFAFB;
/* barely-there section tint */
--nc-wash: #FAF4F4;
/* warm hero wash: stripe */
--nc-wash-bg: #F7EFEF;
/* warm hero wash: base */
--nc-wash-soft: #FAF4F49A;
/* the same wash at 60% alpha: tinted page top */
/* Hover-only surfaces, one step off their resting colour. */
--nc-slate-hv: #333E49;
/* .nc-hv-bgslate, one step up from --nc-slate */
--nc-surface-hv: #EFEFF1;
/* .nc-hv-bggrey, one step down from --nc-surface */
--nc-font: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
--nc-font-body: 'Host Grotesk', 'Archivo', sans-serif;
--nc-maxw: 1440px;
/* Horizontal page gutter. Shrinks at breakpoints, but only on pages that
opt in via .nc-rwd (see the responsive section at the end of this file). */
--nc-gutter: 48px;
}
/* --------------------------------------------------------------------------
Base / reset (was duplicated in all 28 pages'