/* motif/families/pi/family.css — the pi voice
*
* Pi: "Personal & Quiet — Paper-Warm Editorial." Used by the
* pointegrity umbrella (pouch and forthcoming siblings).
*
* Loading order:
* tokens.css → components.css → utilities.css → responsive.css
* → auth.css (and any future motif aspect)
* → families/pi/family.css (overrides everything above)
*
* This file overrides core tokens (--font-sans, --color-bg,
* --shadow-md, …) AND auth-aspect tokens (--auth-bg,
* --auth-card-bg, …) AND adds a small number of selector rules
* where token-only overrides aren't expressive enough (paper-
* grain noise overlay; bottom-rule input style). When future
* motif aspects come online (dashboard.css, marketing.css),
* this same file extends to override their tokens too — pi's
* voice spans every aspect, not just auth.
*
* Activation: targets [data-family="pi"] so we can preview pi
* vs sc by swapping the attribute on . An app that commits
* to one family at build time can collapse this to plain :root
* selectors and skip the data-attribute. Both shapes are valid;
* keeping the data-attribute form makes the layering visible
* and lets a single binary serve multiple voices.
*
* Nothing in this file is auth-specific in the structural sense.
* The fact that most overrides today are --auth-* tokens just
* reflects that auth is the only motif aspect currently themed.
*/
[data-family="pi"] {
/* ── Core token overrides ───────────────────────────────
* These propagate everywhere — buttons, cards, inputs,
* tables, badges. Pi-family apps inherit this typography
* + surface vocabulary across every motif component.
*
* Body type commits to Plex Sans (motif's default already
* supports it via plex.css; pi just makes it non-optional).
* Display type — the *headings* — switch to Plex Serif via
* the auth-title-font aspect token below, NOT here at the
* core --font-sans level, because not every surface in pi
* mode wants serif headings (admin tables, sidebars stay
* sans). The serif commitment is per-surface. */
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: var(--motif-font-mono); /* commit pi to Plex Mono for code/numerics */
/* Surface — warm cream paper. Dark mode would override
these in a [data-family="pi"][data-theme="dark"] block
(out of scope for this first pass). */
--color-bg: #fbf9f4;
--color-card-bg: #fefcf8;
--color-fg: var(--color-neutral-900);
--color-fg-muted: var(--color-neutral-600);
/* Shadows — the warm paper-soft shadow becomes pi's
default elevation. Components that use --shadow-md /
--shadow-lg / --shadow-xl all soften. */
--shadow-md: var(--motif-shadow-paper-soft);
--shadow-lg: var(--motif-shadow-paper-soft);
--shadow-xl: var(--motif-shadow-paper-soft);
/* ── Auth aspect overrides ──────────────────────────────
* These touch --auth-* tokens. When future aspects (admin
* dashboard, marketing) come online they get their own
* sections in this same file — pi-family voice extends to
* every aspect from one place. */
/* Background and card — the page is paper, the card is
slightly lighter paper, depth from tonal contrast plus
hairline + paper-soft shadow.
Card runs wider than motif's default 400px so the form
feels horizontal-breathing rather than column-tall. */
--auth-bg: #fbf9f4;
--auth-card-bg: #fefcf8;
--auth-card-shadow: var(--motif-shadow-paper-soft);
--auth-card-radius: var(--radius-lg);
--auth-card-width: 480px;
--auth-card-padding-y: var(--space-8);
--auth-card-padding-x: var(--space-10);
/* Title — Plex Serif at display size, the "one perfect
detail." Tracking slightly tight; weight medium (500)
— confident without being heavy. Pi pushes the title
larger than motif's default display-1 (3.25rem vs
2.875rem) — makes the serif a real anchor on a wider
card. */
--auth-title-font: var(--motif-font-display);
--auth-title-color: var(--color-neutral-900);
--auth-title-size: 3.25rem;
--auth-title-weight: 500;
--auth-title-tracking: -0.015em;
--auth-text-color: var(--color-neutral-600);
/* Primary CTA — solid sage-700, no gradient. Restraint
lands the tone; the gradient was the loudest thing on
the page. */
--auth-action-bg: var(--color-primary-700);
--auth-action-color: #ffffff;
--auth-action-radius: var(--radius-md);
/* Inputs — bottom-rule style. Form feels journal-like
rather than dashboard-like. */
--auth-input-bottom-only: 1;
--auth-input-rest-color: var(--color-neutral-300);
--auth-input-focus-color: var(--color-primary-600);
--auth-focus-ring: 0 4px 0 -3px rgba(123, 163, 90, 0.18);
/* Links — sage with always-on underline at offset. The
underline is part of the quiet vocabulary; users see
interactivity without color-load. */
--auth-link-color: var(--color-primary-700);
--auth-link-decoration: underline;
--auth-link-underline-offset: 0.25em;
/* Site link sits on warm cream now (not the sage gradient)
— needs a low-contrast neutral, not white. */
--auth-site-link-color: var(--color-neutral-500);
--auth-site-link-hover: var(--color-neutral-800);
}
/* ════════════════════════════════════════════════════════════
* Selector rules — the small number of CSS rules that token
* overrides alone can't express. Each is namespaced under
* [data-family="pi"] so it activates only in pi mode.
* ════════════════════════════════════════════════════════════ */
/* Paper-grain noise overlay on the auth shell.
SVG noise filter, ~5% opacity, fixed-position. */
[data-family="pi"] .auth-shell {
position: relative;
font-family: var(--font-sans);
}
[data-family="pi"] .auth-shell::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.6;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
[data-family="pi"] .auth-shell > * { position: relative; z-index: 1; }
/* Auth title — Plex Serif at display size. */
[data-family="pi"] .auth-logo h1 {
font-family: var(--auth-title-font);
font-size: var(--auth-title-size);
font-weight: var(--auth-title-weight);
letter-spacing: var(--auth-title-tracking);
color: var(--auth-title-color);
line-height: 1.05;
}
/* Card — split y/x padding + hairline border. */
[data-family="pi"] .auth-card {
padding: var(--auth-card-padding-y) var(--auth-card-padding-x);
border: var(--motif-border-hairline);
}
/* The "one perfect detail" — a 32px amber hairline accent
under the auth title. Logo block tightened across the board
(--space-6 bottom, --space-3 between title and accent) so
the wider card stays compact vertically. */
[data-family="pi"] .auth-logo {
margin-bottom: var(--space-6);
}
[data-family="pi"] .auth-logo::after {
content: "";
display: block;
width: 32px;
height: 1px;
background: var(--color-secondary-500);
margin: var(--space-3) auto 0;
}
/* Bottom-only input rule. Selecting motif's `.input` plus
form-group's children covers both auth and admin forms.
Larger font-size (--text-lg = 18px vs motif's 16px default)
makes the typing surface more readable on the wider card. */
[data-family="pi"] .form-group .input,
[data-family="pi"] .form-group input,
[data-family="pi"] .form-group select {
border: 0;
border-bottom: 1px solid var(--auth-input-rest-color);
border-radius: 0;
background: transparent;
padding-left: 0;
padding-right: 0;
font-size: var(--text-lg);
transition: border-color var(--duration-normal) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default);
}
[data-family="pi"] .form-group .input:focus,
[data-family="pi"] .form-group input:focus,
[data-family="pi"] .form-group select:focus {
outline: none;
border-bottom-color: var(--auth-input-focus-color);
box-shadow: var(--auth-focus-ring);
}
/* Form labels — Plex Mono small-caps. */
[data-family="pi"] .form-label {
font-family: var(--motif-font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--motif-tracking-small-caps);
color: var(--color-neutral-500);
font-weight: var(--font-medium);
margin-bottom: var(--space-1);
}
/* Compress form-group spacing in pi mode — motif's default
--space-5 (20px) reads loose on the wider card. */
[data-family="pi"] .form-group {
margin-bottom: var(--space-4);
}
/* Submit button + single-CTA — restrained, with a 1px lift
on hover. Replaces the gradient-fill default. Padding +
font-size pushed up so the button reads as the primary
target on a wider card. */
[data-family="pi"] .auth-submit,
[data-family="pi"] .auth-action {
background: var(--auth-action-bg);
border-radius: var(--auth-action-radius);
font-size: var(--text-lg);
font-weight: var(--font-medium);
letter-spacing: 0.02em;
padding: var(--space-4) var(--space-8);
transition: transform var(--duration-fast) var(--ease-default),
background-color var(--duration-fast) var(--ease-default);
}
[data-family="pi"] .auth-submit:hover,
[data-family="pi"] .auth-action:hover {
background: var(--color-primary-800);
opacity: 1;
transform: translateY(-1px);
}
[data-family="pi"] .auth-submit:active,
[data-family="pi"] .auth-action:active {
transform: translateY(0);
}
/* Links — always-on offset underline. */
[data-family="pi"] .auth-links a,
[data-family="pi"] .auth-site-link a {
text-decoration: var(--auth-link-decoration);
text-underline-offset: var(--auth-link-underline-offset);
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
}
[data-family="pi"] .auth-links a:hover { color: var(--color-primary-900); }
/* Lang switcher — Plex Mono small-caps. */
[data-family="pi"] .lang-switcher {
font-family: var(--motif-font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--motif-tracking-small-caps);
color: var(--color-neutral-400);
}
[data-family="pi"] .lang-switcher a { text-decoration: none; }
[data-family="pi"] .lang-switcher a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
/* Page-enter fade + form-field stagger. */
[data-family="pi"] .auth-card {
animation: pi-fade-in var(--motif-motion-page-enter) ease-out both;
}
[data-family="pi"] .form-group,
[data-family="pi"] .auth-links,
[data-family="pi"] .lang-switcher {
animation: pi-rise-in var(--motif-motion-page-enter) ease-out both;
animation-delay: calc(var(--motif-motion-stagger-step) * var(--pi-stagger-i, 0));
}
@keyframes pi-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pi-rise-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Step marker (used by multi-step flows). Plex Mono, amber. */
[data-family="pi"] .auth-step {
display: inline-block;
font-family: var(--motif-font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--motif-tracking-small-caps);
color: var(--color-secondary-700);
margin-bottom: var(--space-3);
}
/* Verify-email — sparse layout, large icon, weight-300 glyph. */
[data-family="pi"] .auth-icon {
font-size: 56px;
font-weight: 300;
line-height: 1;
}
[data-family="pi"] .auth-icon.success { color: var(--color-primary-700); }
[data-family="pi"] .auth-icon.error { color: var(--color-danger-600); }
/* ════════════════════════════════════════════════════════════
* Navbar — pi voice
* Replace motif's default sage-fill navbar with paper-cream
* + hairline border. The brand becomes a small Plex Serif tag
* (echoing the auth-title display use). Nav links use the same
* always-on offset underline as auth links.
* ════════════════════════════════════════════════════════════ */
[data-family="pi"] .navbar,
[data-family="pi"] .topnav {
/* Sage chrome bar at primary-200 — clear-and-visible green so
the chrome reads as chrome, not as "almost-cream." */
background: var(--color-primary-200);
color: var(--color-fg);
border-bottom: 1px solid var(--color-primary-300);
box-shadow: none;
font-family: var(--font-sans);
}
/* Marketing-page .topnav lives INSIDE a max-width .wrap container,
which constrains its background to the wrap's width — leaving
light gutters on either side. Break out to full-viewport width
while keeping the inner content at .wrap by using the negative-
margin-and-recover-padding trick. The SPA's .navbar already
spans full width because it's a top-level , so this rule
only has to undo the .wrap constraint on marketing surfaces. */
[data-family="pi"] .topnav {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
/* Avatar circle (the "JY" / "JC" pill in the navbar) — solid
primary-700 chip with white text. Pops cleanly off the lighter
primary-200 navbar; reads as a "badge" rather than a faded
recess. Same dark sage as the primary CTA, so the navbar's
palette = (light bar) + (matching-family dark chip) — three
levels of one hue tying the chrome together. */
[data-family="pi"] .nav-avatar {
background: var(--color-primary-700);
color: #ffffff;
}
/* Brand — Plex Serif, small (Plex Sans body would compete with
the same family used in nav links; serif gives identity). */
[data-family="pi"] .navbar-brand {
font-family: var(--motif-font-display);
font-weight: 500;
font-size: var(--text-xl);
letter-spacing: -0.01em;
color: var(--color-fg);
}
/* Nav links — quiet, with the bottom-rule offset underline on
hover/active. Fits the same vocabulary as auth-links.
Size bumped from motif's --text-sm (14px) to 0.9375rem (15px)
so navbar items don't read smaller than dropdown items in a
wider rail. */
[data-family="pi"] .navbar nav a,
[data-family="pi"] .navbar-nav a,
[data-family="pi"] .navbar-collapse > a {
color: var(--color-fg-muted);
background: transparent;
border-radius: 0;
font-size: 0.9375rem;
font-weight: var(--font-medium);
opacity: 1;
text-underline-offset: 0.4em;
text-decoration-thickness: 1px;
}
[data-family="pi"] .navbar nav a:hover,
[data-family="pi"] .navbar-nav a:hover,
[data-family="pi"] .navbar-collapse > a:hover {
color: var(--color-fg);
background: transparent;
text-decoration: underline;
text-decoration-color: currentColor;
}
[data-family="pi"] .navbar nav a.active,
[data-family="pi"] .navbar-nav a.active,
[data-family="pi"] .navbar-collapse > a.active {
color: var(--color-primary-700);
background: transparent;
text-decoration: underline;
text-decoration-color: var(--color-secondary-500); /* amber accent */
text-decoration-thickness: 2px;
}
/* Hamburger toggler — match the link color, keep the soft hover. */
[data-family="pi"] .navbar-toggler {
color: var(--color-fg);
}
[data-family="pi"] .navbar-toggler:hover {
background: var(--color-neutral-100);
}
/* Avatar hover — solid primary-700 chip (set in the navbar block
above) shifts to primary-800 on hover for a quiet feedback cue. */
[data-family="pi"] .nav-avatar:hover {
background: var(--color-primary-800);
}
/* Dropdown menu — paper-cream surface, hairline, paper-soft
shadow. Items use the same Plex Sans body, with sage-on-hover
that mirrors the link active state. */
[data-family="pi"] .dropdown-menu {
background: var(--color-card-bg);
border: var(--motif-border-hairline);
border-radius: var(--radius-lg);
box-shadow: var(--motif-shadow-paper-soft);
}
[data-family="pi"] .dropdown-menu .dropdown-item {
color: var(--color-fg);
font-size: var(--text-sm);
}
[data-family="pi"] .dropdown-menu .dropdown-item:hover {
background: var(--color-neutral-100);
color: var(--color-primary-700);
}
/* Dropdown header (avatar name + email at the top of the menu).
Plex Mono small-caps for the email — same vocabulary as the
auth verify-meta footer. */
[data-family="pi"] .dropdown-menu-header {
color: var(--color-fg);
border-bottom-color: var(--color-border);
}
[data-family="pi"] .dropdown-menu-header .name {
font-weight: var(--font-semibold);
}
[data-family="pi"] .dropdown-menu-header .email {
font-family: var(--motif-font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--motif-tracking-small-caps);
color: var(--color-fg-muted);
word-break: normal;
}
/* Mobile collapse — when the navbar is paper-cream, items
inherit the dark fg correctly (no dark-on-dark bug). The
border-top divider above the open menu uses the hairline
token rather than the white-rgba default, since pi's navbar
isn't dark. */
@media (max-width: 767px) {
/* Mobile flattened nav inherits the navbar bg (primary-200)
rather than getting its own card-bg rectangle. Trellis (sc)
does this naturally because its colored band already spans
the whole header; we follow the same model so pi mobile
reads as one chrome bar instead of "navbar then panel below
it." Only the user-menu dropdown inside still has its own
card-bg surface (set by .dropdown-menu rules below). */
[data-family="pi"] .navbar-collapse {
border-top: 1px solid var(--color-primary-300);
}
[data-family="pi"] .navbar-collapse .dropdown-menu .dropdown-item:hover,
[data-family="pi"] .navbar-collapse .dropdown-menu .dropdown-item:focus {
background: var(--color-neutral-100);
}
}
/* ════════════════════════════════════════════════════════════
* Hero — pi voice
* motif's default .hero is a primary-600 fill band — the
* loudest possible thing on the page, opposite of pi's
* "personal & quiet" tone. Replace with paper-cream surface,
* Plex Serif display headline, optional kicker (Plex Mono
* small-caps) above the title, restrained CTA pair.
* ════════════════════════════════════════════════════════════ */
[data-family="pi"] .hero {
background: transparent;
color: var(--color-fg);
border-radius: 0;
padding: var(--space-16) var(--space-6);
text-align: center;
}
[data-family="pi"] .hero-kicker {
display: inline-block;
font-family: var(--motif-font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--motif-tracking-small-caps);
color: var(--color-secondary-700);
margin-bottom: var(--space-4);
}
[data-family="pi"] .hero h1 {
font-family: var(--motif-font-display);
/* Calibrated to real-world title lengths (8-12 words is
typical — pointegrity.com's "Software that respects the
person using it." is 8 words). Caps at 3.25rem at desktop
so 8-word titles wrap to ~2 lines without becoming a
typographic billboard. The min stays large enough to
remain a display headline on mobile. */
font-size: clamp(2rem, 3.6vw, 3.25rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-fg);
margin: 0 auto var(--space-5) auto;
max-width: 22ch;
}
[data-family="pi"] .hero h2 {
font-family: var(--font-sans);
font-size: clamp(1rem, 1.4vw, 1.1875rem);
font-weight: 400;
line-height: 1.55;
color: var(--auth-text-color);
margin: 0 auto var(--space-8) auto;
max-width: 52ch;
}
/* Hero body copy — paragraphs, ledes, subs, CTA notes. Pages
inherited from a colored-hero design (pouch marketing) used
white-on-band; pi makes the hero transparent paper-cream so
the body copy needs dark inheritance. The 0,3,1 specificity
beats inline `.hero p.sub` rules in legacy templates. */
[data-family="pi"] .hero p,
[data-family="pi"] .hero .sub,
[data-family="pi"] .hero .lede,
[data-family="pi"] .hero p.sub,
[data-family="pi"] .hero p.lede {
color: var(--auth-text-color);
}
[data-family="pi"] .hero .cta-note,
[data-family="pi"] .hero p.cta-note {
color: var(--color-fg-muted);
}
/* Hero CTAs — cover both new (.hero-actions .btn-*) markup AND
legacy .hero .btn-* markup (pouch marketing pages). Same
sage vocabulary applied to either. */
[data-family="pi"] .hero-actions .btn,
[data-family="pi"] .hero .btn,
[data-family="pi"] .hero .btn-large {
padding: var(--space-3) var(--space-8);
font-size: var(--text-base);
font-weight: var(--font-medium);
letter-spacing: 0.02em;
border-radius: var(--radius-md);
}
[data-family="pi"] .hero-actions .btn-primary,
[data-family="pi"] .hero .btn-primary,
[data-family="pi"] .hero .btn-large.primary {
background: var(--color-primary-700);
color: #fff;
border-color: var(--color-primary-700);
}
[data-family="pi"] .hero-actions .btn-primary:hover,
[data-family="pi"] .hero .btn-primary:hover,
[data-family="pi"] .hero .btn-large.primary:hover {
background: var(--color-primary-800);
}
[data-family="pi"] .hero-actions .btn-outline,
[data-family="pi"] .hero .btn-outline,
[data-family="pi"] .hero .btn-large:not(.primary) {
background: transparent;
color: var(--color-primary-700);
border: 1px solid var(--color-primary-700);
}
[data-family="pi"] .hero-actions .btn-outline:hover,
[data-family="pi"] .hero .btn-outline:hover,
[data-family="pi"] .hero .btn-large:not(.primary):hover {
background: var(--color-primary-50);
}
/* Hero CTA layout — flex row centered, gap consistent across
.hero-actions and .cta-row containers (pouch + trellis use
different conventions). */
[data-family="pi"] .hero-actions,
[data-family="pi"] .hero .cta-row {
display: inline-flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
}
/* Hero-section fine accent — same 32px amber hairline used
under the auth title. Centered above the kicker (or the
h1 if no kicker). */
[data-family="pi"] .hero::before {
content: "";
display: block;
width: 32px;
height: 1px;
background: var(--color-secondary-500);
margin: 0 auto var(--space-8) auto;
}
/* ════════════════════════════════════════════════════════════
* Dark variant — pi family + data-theme="dark"
* "Walnut paper" — the dark counterpart of warm cream. Same
* tone vocabulary (warm, restrained, contour-led), inverted
* lightness. Sage and amber stay; surface tokens swap.
* ════════════════════════════════════════════════════════════ */
[data-family="pi"][data-theme="dark"] {
/* Surface — warm dark tones, NOT the cool neutral-900
motif's default dark mode swaps in. The point of pi is
warmth; dark mode is dark walnut, not midnight. */
--color-bg: #1c1814;
--color-card-bg: #231f1a;
--color-fg: #f5ede0;
--color-fg-muted: #b8ac9c;
--color-border: #3a322a;
--auth-bg: #1c1814;
--auth-card-bg: #231f1a;
--auth-title-color: #f5ede0;
--auth-text-color: #b8ac9c;
/* CTA — sage-500 reads brighter on dark surfaces than the
light-mode sage-700; cream-text rather than pure white
keeps the warm-family voice (no SaaS-blue-on-cobalt
feel). Cream + sage gives ~4.0:1 contrast — borderline
for AA small text but fine for the medium-large button
label. */
--auth-action-bg: var(--color-primary-500);
--auth-action-color: #f5ede0;
/* Links — sage-300 sits gently on dark cream-text, with
the underline still in current-color. */
--auth-link-color: var(--color-primary-300);
/* Inputs — bottom-rule in muted warm-dark; focus glows
in sage-400 with a slightly brighter halo. */
--auth-input-rest-color: #3a322a;
--auth-input-focus-color: var(--color-primary-400);
--auth-focus-ring: 0 4px 0 -3px rgba(123, 163, 90, 0.32);
/* Site link — lifted off the page floor (was #6b6258 → too
muted to register on the warm-dark surface); hover comes
up to cream. */
--auth-site-link-color: #8a7f73;
--auth-site-link-hover: #f5ede0;
/* Shadows — true blacks on dark (no warm tint, since the
page is already warm). Slightly heavier alpha to register
depth on a dark surface. */
--motif-shadow-paper-soft:
0 1px 2px rgba(0, 0, 0, 0.3),
0 8px 24px -8px rgba(0, 0, 0, 0.5);
/* Hairline — the same border token, but pointing at the
warm-dark instead of neutral-200. */
--motif-border-hairline: 1px solid #3a322a;
}
/* Paper-grain noise inversion — light warm noise on dark
walnut, lower opacity to keep texture without muddiness. */
[data-family="pi"][data-theme="dark"] .auth-shell::before {
opacity: 0.4;
background-image: url("data:image/svg+xml;utf8,");
}
/* Amber accent stays — but bumps to amber-400 on dark for
visibility against the warm-dark page. */
[data-family="pi"][data-theme="dark"] .auth-logo::after {
background: var(--color-secondary-400);
}
/* Step marker on multi-step flows — also amber-400. */
[data-family="pi"][data-theme="dark"] .auth-step {
color: var(--color-secondary-400);
}
/* Verify-email icon — primary becomes sage-300 on dark for
parity with the link color. */
[data-family="pi"][data-theme="dark"] .auth-icon.success {
color: var(--color-primary-300);
}
/* CTA hover — slide brighter, not darker. */
[data-family="pi"][data-theme="dark"] .auth-submit:hover,
[data-family="pi"][data-theme="dark"] .auth-action:hover {
background: var(--color-primary-400);
}
/* Lang switcher / muted Plex Mono labels — bump up tone so
they don't disappear on dark. */
[data-family="pi"][data-theme="dark"] .lang-switcher {
color: #8a7f73;
}
[data-family="pi"][data-theme="dark"] .form-label {
color: #b8ac9c;
}
/* Navbar dark — paper-walnut surface, hairline using the warm-
dark border, brand and links lift to cream/muted-cream. */
[data-family="pi"][data-theme="dark"] .navbar {
background: var(--color-card-bg); /* #231f1a */
color: var(--color-fg); /* #f5ede0 */
}
[data-family="pi"][data-theme="dark"] .navbar-brand {
color: var(--color-fg);
}
[data-family="pi"][data-theme="dark"] .navbar nav a,
[data-family="pi"][data-theme="dark"] .navbar-nav a,
[data-family="pi"][data-theme="dark"] .navbar-collapse > a {
color: var(--color-fg-muted);
}
[data-family="pi"][data-theme="dark"] .navbar nav a:hover,
[data-family="pi"][data-theme="dark"] .navbar-nav a:hover,
[data-family="pi"][data-theme="dark"] .navbar-collapse > a:hover {
color: var(--color-fg);
}
[data-family="pi"][data-theme="dark"] .navbar nav a.active,
[data-family="pi"][data-theme="dark"] .navbar-nav a.active,
[data-family="pi"][data-theme="dark"] .navbar-collapse > a.active {
color: var(--color-primary-300);
text-decoration-color: var(--color-secondary-400);
}
[data-family="pi"][data-theme="dark"] .navbar-toggler:hover {
background: rgba(255, 255, 255, 0.06);
}
[data-family="pi"][data-theme="dark"] .nav-avatar {
background: rgba(123, 163, 90, 0.18); /* sage at low alpha */
color: var(--color-primary-300);
border-color: rgba(123, 163, 90, 0.32);
}
[data-family="pi"][data-theme="dark"] .nav-avatar:hover {
background: rgba(123, 163, 90, 0.28);
}
[data-family="pi"][data-theme="dark"] .dropdown-menu {
background: #2a2520; /* slightly brighter than card so it floats */
border-color: #3a322a;
}
[data-family="pi"][data-theme="dark"] .dropdown-menu .dropdown-item {
color: var(--color-fg);
}
[data-family="pi"][data-theme="dark"] .dropdown-menu .dropdown-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-primary-300);
}
[data-family="pi"][data-theme="dark"] .dropdown-menu-header {
color: var(--color-fg);
border-bottom-color: #3a322a;
}
[data-family="pi"][data-theme="dark"] .dropdown-menu-header .email {
color: var(--color-fg-muted);
}
/* Mobile dark — the flattened collapse needs the warm-dark
hover instead of motif's rgba-white default. */
@media (max-width: 767px) {
[data-family="pi"][data-theme="dark"] .navbar-collapse {
border-top-color: #3a322a;
background: var(--color-card-bg);
}
[data-family="pi"][data-theme="dark"] .navbar-collapse .dropdown-menu .dropdown-item:hover,
[data-family="pi"][data-theme="dark"] .navbar-collapse .dropdown-menu .dropdown-item:focus {
background: rgba(255, 255, 255, 0.05);
}
}
/* Hero in dark mode — same paper-walnut surface as the page,
typography stays the same. CTA primary becomes sage-500 to
match the auth-submit treatment. */
[data-family="pi"][data-theme="dark"] .hero h1 {
color: var(--color-fg);
}
[data-family="pi"][data-theme="dark"] .hero h2 {
color: var(--auth-text-color);
}
[data-family="pi"][data-theme="dark"] .hero-actions .btn-primary {
background: var(--color-primary-500);
color: var(--color-fg); /* cream, not white */
border-color: var(--color-primary-500);
}
[data-family="pi"][data-theme="dark"] .hero-actions .btn-primary:hover {
background: var(--color-primary-400);
}
[data-family="pi"][data-theme="dark"] .hero-actions .btn-outline {
color: var(--color-primary-300);
border-color: var(--color-primary-300);
}
[data-family="pi"][data-theme="dark"] .hero-actions .btn-outline:hover {
background: rgba(123, 163, 90, 0.12);
}
[data-family="pi"][data-theme="dark"] .hero-kicker {
color: var(--color-secondary-400);
}
[data-family="pi"][data-theme="dark"] .hero::before {
background: var(--color-secondary-400);
}
/* Optional: respect the OS preference when no explicit
data-theme is set. Same selector body, just media-gated. */
@media (prefers-color-scheme: dark) {
[data-family="pi"]:not([data-theme="light"]):not([data-theme="dark"]) {
--color-bg: #1c1814;
--color-card-bg: #231f1a;
--color-fg: #f5ede0;
--color-fg-muted: #b8ac9c;
--color-border: #3a322a;
--auth-bg: #1c1814;
--auth-card-bg: #231f1a;
--auth-title-color: #f5ede0;
--auth-text-color: #b8ac9c;
--auth-action-bg: var(--color-primary-500);
--auth-action-color: #f5ede0;
--auth-link-color: var(--color-primary-300);
--auth-input-rest-color: #3a322a;
--auth-input-focus-color: var(--color-primary-400);
--auth-focus-ring: 0 4px 0 -3px rgba(123, 163, 90, 0.32);
--auth-site-link-color: #8a7f73;
--auth-site-link-hover: #f5ede0;
--motif-shadow-paper-soft:
0 1px 2px rgba(0, 0, 0, 0.3),
0 8px 24px -8px rgba(0, 0, 0, 0.5);
--motif-border-hairline: 1px solid #3a322a;
}
}