/*
* L2 — SELF-HOSTED FONT LAYER
* ===========================
* Every @font-face on vania-novikau.me lives in THIS file. See TOKEN-CONTRACT.md §4 and §8.
* L3 uses museomoderno / rubik-mono-one via the theme.json presets; it must NOT add an @import,
* a to Google, or its own @font-face. One lane owns the fonts.
*
* WHY: `solutech` hosted Jost inside the theme directory and pulled the other three families from
* fonts.googleapis.com. On a theme switch there is no @font-face for Jost at all — 93 measured text
* elements across / /about/ /research/ /blog/ lose their face — and Cookie disappears too, because
* its @import lives at themes/solutech/css/single.css:1.
*
* PROVENANCE
* Jost 400/400i/500/600/700 — the five faces jost-local.css actually declares. Transported
* BYTE-IDENTICAL from themes/solutech/css/fonts/Jost/*.ttf (md5 verified against the prod
* container), and additionally compiled to .woff2 FROM THOSE EXACT FILES with fontTools 4.63.0
* — not downloaded from Google, so the version (3.200/3.300), unitsPerEm 1000, 382 glyphs,
* 371 cmap entries and hhea 1030/-350/100 are provably unchanged. 460,572 B -> 145,880 B.
* The .ttf is kept as a src fallback; a browser that understands woff2 never downloads it.
* MuseoModerno / Rubik Mono One / Cookie — mirrored verbatim from fonts.gstatic.com, the exact
* files the site serves today, with Google's own unicode-range declarations preserved.
*
* NOTE ON `.otf`: the theme directory also holds 7 .otf files and Jost-100/-300 .ttf. NOTHING
* references them — jost-local.css declares only the five .ttf faces below. They are already dead
* weight in the current theme and are deliberately NOT carried over. (d4 §5 describes the source as
* ".otf via jost-local.css"; the file itself says format("truetype"), and there are five faces,
* not four.)
*/
/* ── Jost — body, headings, nav, buttons: the face on 93 measured elements ──────────────── */
@font-face {
font-family: "Jost";
src: url("../fonts/jost/Jost-400.woff2") format("woff2"),
url("../fonts/jost/Jost-400.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/Jost-400-Italic.woff2") format("woff2"),
url("../fonts/jost/Jost-400-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/Jost-500.woff2") format("woff2"),
url("../fonts/jost/Jost-500.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/Jost-600.woff2") format("woff2"),
url("../fonts/jost/Jost-600.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/Jost-700.woff2") format("woff2"),
url("../fonts/jost/Jost-700.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ── MuseoModerno — hero display only (L3). Variable, wght 100-900; one file serves 700 and 900,
* which is how Google serves it today. Three subsets, ranges verbatim from Google. ────── */
@font-face {
font-family: "MuseoModerno";
src: url("../fonts/museomoderno/museomoderno-vf-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
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: "MuseoModerno";
src: url("../fonts/museomoderno/museomoderno-vf-latin-ext.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
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: "MuseoModerno";
src: url("../fonts/museomoderno/museomoderno-vf-vietnamese.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* ── Rubik Mono One — hero tagline only (L3). Includes a CYRILLIC subset; it is the ONLY one of
* the four families that does. See REPORT.md §5. ───────────────────────────────────────── */
@font-face {
font-family: "Rubik Mono One";
src: url("../fonts/rubik-mono-one/rubik-mono-one-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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: "Rubik Mono One";
src: url("../fonts/rubik-mono-one/rubik-mono-one-latin-ext.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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: "Rubik Mono One";
src: url("../fonts/rubik-mono-one/rubik-mono-one-cyrillic.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* ── Cookie — the footer "Buy me a lambo" wordmark. Google serves ONE subset (latin). ────── */
@font-face {
font-family: "Cookie";
src: url("../fonts/cookie/cookie-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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;
}
/*
* SCOPE I ADDED, said out loud rather than done silently:
* The Cookie *binding* also dies with the theme — the rule lives at
* themes/solutech/css/single.css:6178. Re-hosting the file without it leaves the wordmark in a
* fallback cursive at the wrong size. Since I own the fonts, I port the FONT part of that rule and
* nothing else. The rest of `.footer-neon-btn` (the neon image, the :hover / .driving-out
* animation, the transform) is theme CSS that also dies and is NOT owned by any lane -- flagged to
* L3 in REPORT.md §7.
*/
.footer-neon-btn span,
.footer-neon-btn .text {
font-family: "Cookie", cursive;
font-size: 55px;
line-height: 1.5;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/*
* DELIBERATELY NOT SELF-HOSTED:
* Roboto, Mukta - loaded today from fonts.googleapis.com via theme_mod
* `pixtheme_fonts_embed` and present in ZERO computed styles. Independently
* corroborated: across four measured pages the browser fetches the Roboto/Mukta
* *stylesheet* but never downloads a single Roboto or Mukta .woff2. The mod
* dies with solutech; the correct action is to not re-add them.
* Google Sans - injected by accounts.google.com/gsi/client for the Google Sign-In button.
* It cannot be self-hosted and is not ours; removing it means removing Google
* Sign-In (social-login-woocommerce / easy-login-woocommerce). See REPORT.md §6
* -- "zero external font requests" is achievable for the four SITE-OWNED
* families, not for this one, and saying otherwise would be a false green.
*/
/* =============================================================================
* §14. vn-font — the site's own icon face, and the blockquote it draws
* (2026-08-18)
* -----------------------------------------------------------------------------
* THE QUOTE MARK WAS ASKING FOR A FONT NOBODY LOADED. Measured on a Kant post:
*
* reference here (before)
* blockquote Jost 17px italic IBM Plex Mono 14px italic
* padding 54px 51px 17px 48px 16px 3px
* ::before glyph vn-font 36px vn-font 18px, grey background
*
* Both planes' CSS already names `font-family: vn-font` on `blockquote::before`
* — but that face lives in `themes/solutech/fonts/vn-font/`, so under arneiron
* the rule resolved to nothing and the quote mark simply did not draw. It never
* appears as an `icon-quote-*` CLASS in the markup, which is why grepping the
* HTML for one finds nothing: it is a `content:` glyph, and only a computed-style
* read shows it.
*
* The face is now carried by the CHILD (assets/fonts/vn-font/), so it survives a
* theme switch. `.eot`/`.svg` are deliberately not copied — they exist for IE8
* and old Android, neither of which this site supports, and they are the two
* largest files in the set.
*
* The blockquote body font was ALSO wrong: IBM Plex Mono is the code face, and
* inheriting it here turned pulled quotes into monospace. Restated as Jost with
* the reference's own metrics.
* ========================================================================== */
@font-face {
font-family: 'vn-font';
src: url('../fonts/vn-font/font/vn-font.woff2') format('woff2'),
url('../fonts/vn-font/font/vn-font.woff') format('woff'),
url('../fonts/vn-font/font/vn-font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ---- the pulled quote, to the reference's measurements -------------------- */
:root .entry-content blockquote,
:root .post-content blockquote,
/* The post body is rendered INSIDE the ai-chatboxes tab wrapper, so that
plugin's `#tab-l1 .aic-child-content blockquote { padding-top: 3rem }` — an ID
selector, 1-1-1 — outranked every class-based rule here and pinned the top
edge at 48px. Matching the same container behind a `:root` prefix makes this
1-2-1, so it wins on the cascade rather than with `!important`. */
:root #tab-l1 .aic-child-content blockquote {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 17px;
font-style: italic;
line-height: 1.6;
padding: 54px 51px 17px;
}
:root .entry-content blockquote::before,
:root .post-content blockquote::before {
font-family: 'vn-font';
font-size: 36px;
font-style: normal;
background: none; /* the grey block behind the glyph was ours */
line-height: 1;
}
/* Quotes inside a page's own scoped stylesheet (the About page ships its own)
keep whatever that stylesheet sets — this only reaches post content. */
/* =============================================================================
* §15. vn-font ICON CLASSES (2026-08-24)
* -----------------------------------------------------------------------------
* The @font-face for vn-font was ported earlier (§14) for the blockquote's
* pulled-quote glyph, but the `icon-*` CLASSES that drive every other glyph were
* not — so any `` on this site had a `::before` with
* `content: none` and collapsed to 0x0.
*
* Measured on the AI selection toolbar (`.aic-ai-actions`), which is where it
* showed: the reference renders its first child as `i` at 34px; here it was 0px,
* so the row read as three coloured dots with a missing icon in front of them.
* The dots themselves were never broken — they are identical on both sites.
*
* Copied from solutech/fonts/vn-font/css/vn-font.css rather than reinvented: the
* codepoints are the font's own and cannot be guessed.
* ========================================================================== */
:root [class^="icon-"]:before, :root [class*=" icon-"]:before {
font-family: "vn-font";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
}
/* glyph codepoints — the font's own, not guessable */
:root .icon-quote-400:before { content: '\e800'; } /* '' */
:root .icon-quote-600:before { content: '\e802'; } /* '' */
:root .icon-quote-700:before { content: '\e803'; } /* '' */
:root .icon-quote-close-400:before { content: '\e804'; } /* '' */
:root .icon-quote-close-600:before { content: '\e805'; } /* '' */
:root .icon-quote-close-700:before { content: '\e806'; } /* '' */
:root .icon-logo-400:before { content: '\e807'; } /* '' */
:root .icon-logo-600:before { content: '\e808'; } /* '' */
:root .icon-logo-700:before { content: '\e809'; } /* '' */
:root .icon-question-400:before { content: '\e80e'; } /* '' */
:root .icon-question-600:before { content: '\e80f'; } /* '' */
:root .icon-question-700:before { content: '\e810'; } /* '' */