/* ============================================================
THIOS PARTNERS — BLUEPRINT REDESIGN LAYER (mirrors main/store/blog)
Loaded AFTER css/main.css (see includes/header.php). Additive override
layer targeting the partner-* BEM system, fully tokenized — the :root
block below is the source of truth and maps 1:1 to the Figma system.
Remove the one to revert.
============================================================ */
/* ==== SELF-HOSTED FONTS (Space Grotesk + Space Mono, latin + latin-ext) ====
Replaces the Google Fonts . woff2 live in ./fonts/ next to this file.
============================================================ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceGrotesk-400-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:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceGrotesk-400-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:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/SpaceGrotesk-500-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:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/SpaceGrotesk-500-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:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceGrotesk-700-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:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceGrotesk-700-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:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceMono-400-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:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceMono-400-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:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceMono-700-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:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceMono-700-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}
:root{
/* ---------- COLOR ---------- */
--rd-paper:#F4F1E9;
--rd-paper-2:#ECE7DA;
--rd-paper-glass:rgba(244,241,233,.9);
--rd-ink:#1E2E2A;
--rd-head:#0F4A47;
--rd-muted:#4F5A56;
--rd-teal:#15635E;
--rd-teal-strong:#0F4A47;
--rd-teal-line:rgba(21,99,94,.30);
--rd-teal-hair:rgba(21,99,94,.16);
--rd-dot:rgba(21,99,94,.15);
--rd-gold:#E8AF00;
--rd-gold-dark:#C9971A;
/* ---------- TYPE FAMILIES ---------- */
--rd-font-sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--rd-font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--rd-sans:var(--rd-font-sans);
--rd-mono:var(--rd-font-mono);
--font-family-primary:var(--rd-font-sans); /* Saira retired: legacy main.css var-users → Space Grotesk */
/* ---------- TYPE SCALE ---------- */
--rd-text-tagline:.66rem;
--rd-text-meta:.7rem;
--rd-text-2xs:.72rem;
--rd-text-nav:.74rem;
--rd-text-label:.75rem;
--rd-text-sm:.95rem;
--rd-text-base:1rem;
/* ---------- WEIGHT ---------- */
--rd-weight-body:400;
--rd-weight-head:500; /* Medium. 600 retired 2026-09-16 — Figma has no Space Grotesk SemiBold face, so 500 keeps design and production identical. */
--rd-weight-strong:700;
--rd-weight-display:700;
/* ---------- TRACKING ---------- */
--rd-track-label:.14em;
--rd-track-eyebrow:.16em;
--rd-track-nav:.12em;
--rd-track-btn:.1em;
--rd-track-head:-.02em;
--rd-track-sentence:.005em;
/* ---------- SPACING ---------- */
--rd-space-1:.5rem;
--rd-space-2:.7rem;
--rd-space-3:.85rem;
/* ---------- GEOMETRY / MOTION ---------- */
--rd-radius:0;
--rd-border-hair:1px solid var(--rd-teal-hair);
--rd-border-line:1px solid var(--rd-teal-line);
--rd-transition:.18s ease;
--rd-transition-media:transform .55s cubic-bezier(.2,.7,.2,1);
--rd-blur:saturate(1.1) blur(8px);
--rd-focus-ring:0 0 0 2px rgba(21,99,94,.15);
/* ---------- HEX GRID ---------- */
--rd-grid-tile:96px 55.426px; /* honeycomb tile: 32px hex side, 1px teal line */
--rd-grid-alpha:.1; /* grid line lightness — single knob, tweak freely */
/* ---------- BRIDGE: legacy main.css tokens → blueprint ---------- */
--color-gray:#4F5A56;
}
/* ============================ FOUNDATION ============================ */
html{scroll-behavior:smooth;background-color:var(--rd-paper) !important}
/* paper lives on so the fixed z-index:-1 constellation canvas shows above it; body stays transparent */
body{background-color:transparent !important;color:var(--rd-ink);font-family:var(--rd-font-sans) !important}
body,p,li{font-weight:var(--rd-weight-body)}
/* blueprint hexagon grid — static honeycomb hairlines, pure CSS inline-SVG tile.
display/size !important because main.css hides body::before (progress-bar reset). */
body::before{
content:"" !important;display:block !important;position:fixed !important;inset:0 !important;width:auto !important;height:auto !important;z-index:-1;pointer-events:none;opacity:var(--rd-grid-alpha);
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'55.426'%20viewBox%3D'0%200%2096%2055.426'%3E%3Cpath%20d%3D'M32%2C0%20L64%2C0%20M64%2C0%20L80%2C27.713%20M80%2C27.713%20L64%2C55.426%20M64%2C55.426%20L32%2C55.426%20M32%2C55.426%20L16%2C27.713%20M16%2C27.713%20L32%2C0%20M0%2C27.713%20L16%2C27.713%20M80%2C27.713%20L96%2C27.713'%20fill%3D'none'%20stroke%3D'%2315635E'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E");
background-size:var(--rd-grid-tile);
background-repeat:repeat;
}
/* ============================ TYPOGRAPHY ============================ */
h1,h2,h3,h4,h5,h6,
.partner-hero__title,.partner-section__title,.partner-card__title,.partner-step__title{
font-family:var(--rd-font-sans) !important;color:var(--rd-head) !important;
font-weight:var(--rd-weight-head) !important;letter-spacing:var(--rd-track-head) !important;
}
.partner-hero__title,h1{font-weight:var(--rd-weight-display) !important}
/* subtitles are sentences → sentence-case sans, muted (never mono all-caps) */
.partner-section__subtitle,.partner-hero__subtitle{
font-family:var(--rd-font-sans) !important;text-transform:none !important;
letter-spacing:var(--rd-track-sentence) !important;font-size:var(--rd-text-sm) !important;color:var(--rd-muted) !important;
}
.partner-section__eyebrow,.partner-hero__eyebrow{
font-family:var(--rd-font-mono) !important;text-transform:uppercase;letter-spacing:var(--rd-track-eyebrow);
color:var(--rd-teal) !important;font-size:var(--rd-text-2xs);
}
/* ============================ HEADER / NAV ============================ */
.partner-header{
background:var(--rd-paper-glass) !important;
-webkit-backdrop-filter:var(--rd-blur);backdrop-filter:var(--rd-blur);
border-bottom:var(--rd-border-hair) !important;box-shadow:none !important;
}
/* colored logo (Thios-logo-color.svg) — main.css also applies brightness(0) invert(1), so force filter:none */
.partner-logo,.partner-logo img,.partner-logo__img,.partner-footer__logo,.partner-footer__logo img{opacity:1 !important;filter:none !important}
/* "PARTNERS" badge was white-on-transparent (invisible on the paper header) — teal on a faint teal tint */
.partner-logo__badge{color:var(--rd-teal) !important;background:rgba(21,99,94,.10) !important;font-family:var(--rd-font-mono) !important;border-radius:0 !important}
.partner-nav__link{
font-family:var(--rd-font-mono) !important;text-transform:uppercase;letter-spacing:var(--rd-track-nav);
font-size:var(--rd-text-nav) !important;color:var(--rd-ink) !important;font-weight:var(--rd-weight-body);
}
.partner-nav__link:hover,.partner-nav__link.active{color:var(--rd-teal) !important}
.partner-nav__username{color:var(--rd-muted) !important;font-family:var(--rd-font-mono) !important;font-size:var(--rd-text-meta)}
.partner-lang__toggle,.partner-lang__menu{
background:var(--rd-paper) !important;border:var(--rd-border-line) !important;border-radius:var(--rd-radius) !important;box-shadow:none !important;
}
.partner-lang__code{font-family:var(--rd-font-mono) !important;color:var(--rd-ink) !important}
.partner-lang__option{color:var(--rd-ink) !important}
/* nav glyphs that were white on the paper header → teal (mobile hamburger + language arrow) */
.partner-hamburger,.partner-hamburger i,.partner-hamburger i::before,.partner-lang__arrow,.partner-lang__arrow::before{color:var(--rd-teal) !important;-webkit-text-fill-color:var(--rd-teal) !important}
/* english-only phase — hide the language pulldown */
.partner-lang{display:none !important}
/* readability: left-align multi-line body copy (center-justified blocks are hard to read) */
.partner-step__text,.partner-card__text{text-align:left !important}
/* the hero intro is a bare classless
— the long block was still centered; left-align it
(the h1 headline + CTA row stay centered per the title/CTA rule) */
.partner-hero > p{text-align:left !important}
/* instruction-manual clean: left-align the WHOLE step/card unit (number square / icon +
title + body), not just the body — removes the centered-header-over-left-body mix */
.partner-step,.partner-card{text-align:left !important}
.partner-step__number{margin-left:0 !important;margin-right:auto !important}
/* kill
for consistency (too busy against the hex grid) */
hr{display:none !important}
/* ============================ BUTTONS ============================ */
.btn-partner,.partner-hero__cta{
font-family:var(--rd-font-mono) !important;text-transform:uppercase;letter-spacing:var(--rd-track-btn);
font-weight:var(--rd-weight-strong);border-radius:var(--rd-radius) !important;box-shadow:none !important;
background-image:none !important;transition:var(--rd-transition);
}
.btn-partner--primary,.partner-hero__cta:not(.partner-hero__cta--outline){
background:var(--rd-gold) !important;color:var(--rd-ink) !important;border:1px solid var(--rd-gold) !important;
}
.btn-partner--primary:hover,.partner-hero__cta:not(.partner-hero__cta--outline):hover{
background:transparent !important;border-color:var(--rd-gold) !important;color:var(--rd-ink) !important;transform:none !important;
}
.btn-partner--outline,.partner-hero__cta--outline{
background:transparent !important;color:var(--rd-teal) !important;border:var(--rd-border-line) !important;
}
.btn-partner--outline:hover,.partner-hero__cta--outline:hover{
background:transparent !important;border-color:var(--rd-teal) !important;color:var(--rd-teal-strong) !important;transform:none !important;
}
.btn-partner:hover,.partner-hero__cta:hover{transform:none !important}
/* ============================ SECTIONS ============================ */
.partner-hero{background:transparent !important}
.partner-section{background:transparent !important;box-shadow:none !important}
.partner-section--alt{background:var(--rd-paper-2) !important}
/* stats bar: base main.css paints it a solid teal fill (heavy against the paper+hairline
system). Convert to blueprint — paper framed by top/bottom hairlines, big deep-teal
numbers, Space Mono labels, thin dividers between the three. */
.partner-stats-bar{
background:transparent !important;color:var(--rd-ink) !important;
border-top:var(--rd-border-hair) !important;border-bottom:var(--rd-border-hair) !important;
}
.partner-stat__number{
font-family:var(--rd-font-sans) !important;color:var(--rd-head) !important;
font-weight:var(--rd-weight-display) !important;
}
.partner-stat__label{
font-family:var(--rd-font-mono) !important;text-transform:uppercase;
letter-spacing:var(--rd-track-eyebrow) !important;color:var(--rd-muted) !important;
opacity:1 !important;font-size:var(--rd-text-meta) !important;
}
.partner-stats-bar__inner > div{padding:0 2rem}
.partner-stats-bar__inner > div + div{border-left:var(--rd-border-hair) !important}
@media (max-width:768px){
.partner-stats-bar__inner > div{padding:1.25rem 0}
.partner-stats-bar__inner > div + div{border-left:0 !important;border-top:var(--rd-border-hair) !important}
}
/* ============================ CARDS ============================ */
.partner-card{
box-shadow:none !important;border:var(--rd-border-hair) !important;
border-radius:var(--rd-radius) !important;background:var(--rd-paper) !important;transition:border-color var(--rd-transition);
}
.partner-card:hover{transform:none !important;box-shadow:none !important;border-color:var(--rd-teal) !important}
.partner-card__icon{color:var(--rd-teal) !important;background:none !important}
.partner-benefit__check{color:var(--rd-teal) !important}
/* ============================ FORMS ============================ */
.partner-form input,.partner-form select,.partner-form textarea,
.form-group input,.form-group select,.form-group textarea{
border-radius:var(--rd-radius) !important;border:var(--rd-border-line) !important;box-shadow:none !important;
background:var(--rd-paper) !important;color:var(--rd-ink) !important;
}
.partner-form input:focus,.form-group input:focus,.partner-form textarea:focus{
border-color:var(--rd-teal) !important;outline:none !important;box-shadow:var(--rd-focus-ring) !important;
}
.form-group label{font-family:var(--rd-font-mono) !important;text-transform:uppercase;letter-spacing:var(--rd-track-btn);font-size:.68rem;color:var(--rd-teal) !important}
.form-note{color:var(--rd-muted) !important}
/* ============================ FOOTER ============================ */
.partner-footer{background:var(--rd-paper-2) !important;border-top:var(--rd-border-line) !important;box-shadow:none !important;color:var(--rd-ink) !important}
.partner-footer__tagline,.partner-footer__copy{color:var(--rd-muted) !important}
.partner-footer__links a{color:var(--rd-muted) !important}
.partner-footer__links a:hover{color:var(--rd-teal) !important}
/* ============================ ANGULAR SWEEP ============================ */
*,*::before,*::after{border-radius:var(--rd-radius) !important}
.partner-card,[class*="card"],.btn-partner,.partner-hero__cta,.partner-lang__menu,
input,select,textarea,button,img,.partner-section--alt{box-shadow:none !important}
.partner-lang__arrow,[class*="circle"],[class*="avatar"],.partner-benefit__check,
input[type=checkbox],input[type=radio]{border-radius:50% !important}
/* ============================ HEXAGON BULLETS ============================ */
ul:not([class]) li{list-style:none !important;position:relative;padding-left:1.5em}
ul:not([class]) li::before{
content:"";position:absolute;left:0;top:.62em;width:8px;height:9px;
background:var(--rd-teal);clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* lists that already lead with a ✓/✗ icon — icon is the marker, no hexagon/indent */
ul:not([class]) li:has(> i[class*="fa-"]){padding-left:0 !important}
ul:not([class]) li:has(> i[class*="fa-"])::before{content:none !important;display:none !important}
/* ============================ HOVER GROW (images) ============================ */
.partner-card,.partner-hero__media,figure{overflow:hidden}
.partner-card img,.partner-hero__media img,figure img{
transition:var(--rd-transition-media) !important;will-change:transform;
}
@media (hover:hover){
.partner-card:hover img,.partner-hero__media:hover img,figure:hover img{transform:scale(1.05) !important}
}
/* ============================ RESPONSIVE ============================ */
@media (max-width:768px){
.partner-nav__link,.partner-footer__links a,.footerlink,footer a{min-height:44px;display:inline-flex;align-items:center}
}
/* ===================== AUDIT FIXES (16 Sep 2026) ===================== */
/* legacy dark-gray -> ink; headings sentence-case; body copy -> ink (muted classes keep their color) */
:root{--color-dark-gray:#1E2E2A}
h1,h2,h3,h4,h5,h6{text-transform:none !important}
p,li{color:var(--rd-ink) !important}
/* ===================== DE-CLUNK: teal fills -> translucent panels, layered over the grid ===================== */
.footer-configurator-cta,.partner-cta-banner{background:rgba(21,99,94,.09) !important;background-image:none !important;border:1px solid rgba(21,99,94,.30) !important;box-shadow:none !important;border-radius:0 !important}
.footer-configurator-cta h3,.partner-cta-banner h3{color:var(--rd-head) !important}
.footer-configurator-cta p,.partner-cta-banner p,.partner-cta-banner{color:var(--rd-ink) !important}
.launch-announcement{background:rgba(244,241,233,.5) !important;background-image:none !important;border:1px solid rgba(232,175,0,.5) !important;box-shadow:none !important;border-radius:0 !important}
.announcement-cta{background:transparent !important;background-image:none !important;color:var(--rd-teal-strong) !important;border:1px solid var(--rd-teal) !important;box-shadow:none !important;border-radius:0 !important}
.support-button{background:rgba(21,99,94,.1) !important;background-image:none !important;color:var(--rd-teal-strong) !important;border:1px solid var(--rd-teal-line) !important;box-shadow:none !important;border-radius:0 !important}
/* Page-corner registration marks removed 27 Sep 2026 (Pete's call) —
was the TYPESAFE-VIBE body::after corner frame, matched site-wide. */
/* ── Accessibility: prefers-reduced-motion ───────────────────────────────────
Partners loads its own main.css with no reduced-motion guard, so add the
standard global reset here plus the media-zoom override (which uses
!important above). WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
.partner-card img,.partner-hero__media img,figure img{
transition:none !important;transform:none !important;will-change:auto !important;
}
}
/* ── Accessibility: focus outline (no lift) + mobile touch/zoom net ───────────
Partners' own main.css lifts primary/secondary buttons on focus and has no
16px-input rule, so text fields can trigger iOS zoom-on-focus. */
.btn-partner--primary:focus-visible,.btn-partner--secondary:focus-visible,.btn:focus-visible{
outline:2px solid var(--rd-teal) !important;outline-offset:2px !important;transform:none !important;
}
@media (max-width:768px){
a,button,input,select,textarea{min-height:44px;min-width:44px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px !important}
}
/* ============================================================
FORM MICRO-INTERACTIONS — opt-in via data-fx on the