/* ============================================================================
DGR — Dravidian Graphic Realism · shared design layer for ksamy.me
"Sanctum Ember" palette (07) · "φ Mandala" proportion (08) ·
Motif Library (09) · Zone/Phase application (10)
This file is ADDITIVE and SAFE to include on every page:
- All Sanctum-Ember tokens live under :root as --dgr-* (namespaced, harmless).
- The legacy marathon-terminal palette is only remapped under `body.dgr`
(opt-in per page) — pages without that class are untouched.
- All utilities are class-scoped (.dgr-*, .zone-*, .threshold).
Brand discipline encoded here:
- DARK ground is the default (07 P-rule) — "Night Basalt" (v1.2), cool undertone.
- RED is an ACCENT/outline color (v1.2); blue (peacock/cyan) and green
co-lead identity alongside it. PINK (#ff2e7e) is the single hot signal.
- Kolam-white (#eef0ee) is a LINE, never a fill. High contrast always.
- Full-strength density is CONTAINED — ornament pools at edges/thresholds,
the Brahmasthana (center) stays empty.
========================================================================== */
/* Brand fonts — loaded here so this design layer is SELF-SUFFICIENT: any page
that links /dgr.css gets the families even if it forgets the .
Pages also this EXACT url in (faster); an identical url dedupes
the fetch.
TYPOGRAPHY v1.2 (2026-07-08) — Share Tech handles H1/page titles; Space
Grotesk handles body copy, H2s, and big-idea statements; Space Mono handles
labels, metadata, nav, code, module tags, numerals, telemetry, and quotes.
@import MUST precede every rule below (incl. @property). */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&family=Space+Grotesk:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
/* Animatable density custom property (progressive enhancement) ------------- */
@property --dgr-density { syntax: ""; inherits: true; initial-value: 0.3; }
/* ---------------------------------------------------------------------------
1 · TOKENS — "Night Basalt" (07 v1.2, EXACT hexes) + φ scale (08)
--------------------------------------------------------------------------- */
:root {
/* --- core palette (07 v1.2, "Night Basalt", 2026-07-01) — do not alter ---
Ground shifted from warm temple-stone (#0d0b0a) to a COOL night-basalt
undertone at the SAME darkness level (the issue was warmth, not lightness).
RED'S ROLE CHANGED: red no longer the sole protagonist — it is now an
ACCENT/OUTLINE color (button borders, highlights, thresholds). Blue
(--dgr-peacock/--dgr-cyan) and green (--dgr-green) are promoted to
CO-LEAD identity colors alongside it. Gold and pink are unchanged. */
--dgr-ground: #0e1214; /* night basalt / void (default ground) */
--dgr-surface: #161c1e; /* raised stone */
--dgr-line: #293230; /* carved edge / hairline */
--dgr-ink: #eef0ee; /* rice-flour white — the kolam LINE */
--dgr-muted: #6f7c78; /* stone dust */
--dgr-red: #e0231a; /* kumkum / vermilion — ACCENT / outline, no longer sole lead */
--dgr-pink: #ff2e7e; /* modern magenta — the ONE hot signal */
--dgr-gold: #e8b24a; /* temple brass — sacred, not decorative */
--dgr-ember: #7c1a10; /* dimming red (samhara) */
--dgr-ash: #3a322e; /* spent */
--dgr-maroon: #5a0f12; /* renewal / deep ground red (seed) */
/* --- Kolam Spectrum — expanded palette (07 v1.1 hexes, v1.2 role change) -
Two chromatic axes off the dark ground, bridged by magenta (--dgr-pink).
Blue (peacock/cyan) and green are now CO-LEAD identity colors, not just
supporting cycle-carriers — --dgr-peacock and --dgr-green both pass AA
contrast (9.2:1 / 5.4:1) with white text, so they're safe as solid fills. */
/* Warm axis (fire · earth · sun): red leads -> turmeric core -> marigold */
--dgr-turmeric: #e0901c; /* turmeric / Indian yellow — core warm (orange-yellow) */
--dgr-marigold: #ffc83d; /* marigold — BRIGHT festival-yellow highlight */
/* Cool axis (water · sky · peacock): peacock core -> cyan bright -> green */
--dgr-peacock: #0b4d6b; /* peacock blue (dark) — core cool / Vishnu-blue */
--dgr-cyan: #34b7d1; /* peacock cyan — BRIGHT light-blue highlight */
--dgr-green: #0f7a5a; /* peacock / banana-leaf green — supporting, renewal */
/* --- derived UI conveniences (not core tokens) --- */
--dgr-ink-rgb: 238, 240, 238;
--dgr-red-rgb: 224, 35, 26;
--dgr-pink-rgb: 255, 46, 126;
--dgr-muted-bright: #94a09c; /* lighter stone dust for meta text (cool undertone, v1.2) */
/* Kolam Spectrum rgb (for rgba() field tints / gradients) */
--dgr-turmeric-rgb: 224, 144, 28;
--dgr-marigold-rgb: 255, 200, 61;
--dgr-peacock-rgb: 11, 77, 107;
--dgr-cyan-rgb: 52, 183, 209;
--dgr-green-rgb: 15, 122, 90;
--dgr-gold-rgb: 232, 178, 74;
--dgr-ember-rgb: 124, 26, 16;
--dgr-maroon-rgb: 90, 15, 18;
/* --- Kolam Spectrum doctrine vars (axis context; red ALWAYS leads) -------
--dgr-accent : readable axis accent for text / rules (high contrast)
--dgr-field : bounded fill colour (use via rgba(var(--dgr-field-rgb)))
--dgr-signal : the ONE bright highlight allowed to fire in this zone
Defaults are the warm core + magenta bridge (the v1.0 Sanctum signal);
.dgr-warm / .dgr-cool / .zone-* / .dgr-cycle-* override per context. */
--dgr-accent: var(--dgr-turmeric);
--dgr-accent-rgb: var(--dgr-turmeric-rgb);
--dgr-field: var(--dgr-turmeric);
--dgr-field-rgb: var(--dgr-turmeric-rgb);
--dgr-signal: var(--dgr-pink);
--dgr-signal-rgb: var(--dgr-pink-rgb);
/* --- φ (1.618) modular type scale, anchored at 1rem --- */
--dgr-phi: 1.618;
--dgr-fs--1: 0.618rem;
--dgr-fs-0: 1rem;
--dgr-fs-1: 1.618rem;
--dgr-fs-2: 2.618rem;
--dgr-fs-3: 4.236rem;
--dgr-fs-4: 6.854rem;
--dgr-fs-5: 11.09rem;
/* --- spacing: 8px micro-rhythm (08 §3) --- */
--dgr-s-1: 8px; --dgr-s-2: 16px; --dgr-s-3: 24px; --dgr-s-4: 32px;
--dgr-s-5: 48px; --dgr-s-6: 64px; --dgr-s-7: 96px; --dgr-s-8: 128px;
/* --- the literal 9×9 vastu grid (08 §1) --- */
--dgr-cols: 9;
--dgr-col-gap: clamp(8px, 1.6vw, 24px); /* macro-rhythm: column gutter */
--dgr-grid-gap: clamp(16px, 2.6vh, 40px); /* row rhythm */
/* --- density ramp default (08 §2): A .30 / B .50 / C .80 --- */
--dgr-density: 0.30;
/* --- ring sizing default --- */
--dgr-ring-size: 40px;
/* --- motion (v1.3, 2026-07-02) ---------------------------------------
Borrowed from Material's rigorously-tested timing math — NOT its soft
visual style. These are pure curves/durations, invisible plumbing,
no conflict with the brutalist hard-edge look. --dgr-ease-sharp is the
default for DGR's own UI feedback (quick, decisive, no lingering). */
--dgr-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* starts + ends at rest */
--dgr-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /* entering elements */
--dgr-ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1); /* exiting elements */
--dgr-ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1); /* brief, decisive — DGR default */
--dgr-dur-fast: 120ms; --dgr-dur-base: 200ms; --dgr-dur-slow: 320ms;
/* --- accessibility floor (v1.3) — style-agnostic, non-negotiable --- */
--dgr-touch-min: 44px; /* WCAG 2.5.5 minimum target size */
/* --- elevation SYSTEM (v1.3) — Material's RANKING idea, DGR's hard-edge
shadow LANGUAGE. Rank rises -> offset grows AND color intensifies
(line -> ember -> red), reusing the existing "color = aliveness"
principle (07) instead of Material's blur-based depth. No blur, ever. */
--dgr-elev-0: none;
--dgr-elev-1: 4px 4px 0 var(--dgr-line); /* raised — cards, panels */
--dgr-elev-2: 8px 8px 0 var(--dgr-ember); /* floating — dropdowns, toasts */
--dgr-elev-3: 12px 12px 0 var(--dgr-red); /* modal — overlays, dialogs */
/* --- brand fonts (v1.2, 2026-07-08) --------------------------------------
Share Tech is the title/display voice. Space Grotesk carries body copy,
H2s, and big-idea statements. Space Mono carries labels, metadata, nav,
code, module tags, numerals, telemetry, and rare quote asides. */
--dgr-font-display: "Share Tech", system-ui, sans-serif;
--dgr-font-bigidea: "Space Grotesk", system-ui, sans-serif;
--dgr-font-quote: "Space Mono", ui-monospace, monospace;
--dgr-font-mono: "Space Mono", "IBM Plex Mono", ui-monospace, monospace;
--dgr-font-body: "Space Grotesk", system-ui, sans-serif;
}
/* ---------------------------------------------------------------------------
2 · THEME — remap the legacy marathon-terminal tokens to Sanctum Ember
(opt-in: add class="dgr" to ). Dark is canonical.
body.dgr beats :root specificity, so load order does not matter.
--------------------------------------------------------------------------- */
body.dgr {
/* structure */
--bg: var(--dgr-ground);
--ink: var(--dgr-ink);
--panel: var(--dgr-surface);
--line: var(--dgr-line);
--muted: var(--dgr-muted);
--meta: var(--dgr-muted-bright);
--hard: var(--dgr-line); /* brutalist hard-shadow -> carved hairline */
/* accents — the rainbow COMPRESSES into the disciplined Sanctum roles.
v1.2: blue/cyan promoted to co-lead identity colors — no longer "recede." */
--lime: var(--dgr-red); /* accent, not sole lead (v1.2) */
--red: var(--dgr-red);
--fuchsia: var(--dgr-pink); /* the single hot signal */
--yellow: var(--dgr-gold); /* sustenance brass */
--blue: var(--dgr-peacock); /* co-lead identity color (v1.2) */
--cyan: var(--dgr-cyan); /* co-lead identity color, bright text/icons (v1.2) */
/* atmosphere dots become kolam-white on stone */
--dot-rgb: var(--dgr-ink-rgb);
background: var(--dgr-ground);
color: var(--dgr-ink);
}
html:has(body.dgr) { background: var(--dgr-ground); }
body.dgr ::selection { background: var(--dgr-red); color: var(--dgr-ground); }
/* Secondary "field-document" mode — the retained light look (07).
Red / pink / gold persist; only ground + ink invert. */
html[data-theme="light"] body.dgr {
--bg: #f2ece1; /* rice-flour field */
--ink: #0d0b0a;
--panel: #fbf7ee;
--line: #d8cdbd;
--muted: #6f655b;
--meta: #5a5149;
--hard: var(--dgr-maroon); /* maroon hard edge reads on light */
--dot-rgb: 13, 11, 10;
background: #f2ece1; color: #0d0b0a;
}
/* ---------------------------------------------------------------------------
3 · THE GRID — literal 9-column vastu mandala (08 §1)
9 cols >=1024px · collapse 9 -> 3 -> 1 · CENTER stays empty
--------------------------------------------------------------------------- */
.dgr-grid {
display: grid;
grid-template-columns: repeat(var(--dgr-cols), 1fr);
column-gap: var(--dgr-col-gap);
row-gap: var(--dgr-grid-gap);
align-items: start;
}
/* Semantic placement that PRESERVES the Brahmasthana (column 5) as silence.
Content takes the left 4 / right 4 columns; the center column is left void. */
.dgr-grid > .dgr-col-left { grid-column: 1 / 5; }
.dgr-grid > .dgr-center-void{ grid-column: 5 / 6; } /* keep EMPTY (08) */
.dgr-grid > .dgr-col-right { grid-column: 6 / 10; }
/* Display type / hero marks may bleed full-width (Zone C focal presence). */
.dgr-grid > .dgr-col-full { grid-column: 1 / -1; }
/* Inner content band (margins survive, center still respected by halves). */
.dgr-grid > .dgr-col-inner { grid-column: 2 / 9; }
/* The void cell — empty by default; opt-in faint seed dot. */
.dgr-center-void { min-height: 1px; }
.dgr-center-void--seed { position: relative; }
.dgr-center-void--seed::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 5px; height: 5px; border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--dgr-gold); opacity: 0.65;
}
/* Tablet: 9 -> 3, the center column survives so the void persists. */
@media (max-width: 1023px) {
.dgr-grid { grid-template-columns: repeat(3, 1fr); }
.dgr-grid > .dgr-col-left { grid-column: 1 / 2; }
.dgr-grid > .dgr-center-void{ grid-column: 2 / 3; }
.dgr-grid > .dgr-col-right { grid-column: 3 / 4; }
.dgr-grid > .dgr-col-inner { grid-column: 1 / -1; }
}
/* Mobile: single column; rhythm carries the structure (08 §1). */
@media (max-width: 639px) {
.dgr-grid { grid-template-columns: 1fr; }
.dgr-grid > .dgr-col-left,
.dgr-grid > .dgr-col-right,
.dgr-grid > .dgr-col-inner { grid-column: 1 / -1; }
.dgr-grid > .dgr-center-void{ display: none; }
}
/* ---------------------------------------------------------------------------
4 · TYPE — φ modular scale (08 §3)
--------------------------------------------------------------------------- */
.dgr-display {
font-family: var(--dgr-font-display); font-weight: 400;
font-size: clamp(var(--dgr-fs-3), 12vw, var(--dgr-fs-5));
line-height: 0.86; letter-spacing: 0.04em; text-transform: uppercase;
margin: 0;
}
.dgr-h1 {
font-family: var(--dgr-font-display); font-weight: 400;
font-size: clamp(var(--dgr-fs-2), 6vw, var(--dgr-fs-3));
line-height: 0.98; letter-spacing: 0.04em; text-transform: uppercase; margin: 0;
}
.dgr-h2 {
font-family: var(--dgr-font-bigidea); font-weight: 700;
font-size: clamp(var(--dgr-fs-1), 4vw, var(--dgr-fs-2));
line-height: 1.0; letter-spacing: 0; text-transform: uppercase; margin: 0;
}
.dgr-h3 {
font-family: var(--dgr-font-bigidea); font-weight: 700;
font-size: var(--dgr-fs-1); line-height: 1.08; letter-spacing: 0; margin: 0;
}
.dgr-body { font-family: var(--dgr-font-body); font-size: var(--dgr-fs-0); line-height: 1.55; }
.dgr-kicker,
.dgr-micro {
font-family: var(--dgr-font-mono); font-size: var(--dgr-fs--1);
letter-spacing: 0.28em; text-transform: uppercase; color: var(--dgr-muted-bright);
}
.dgr-fs--1 { font-size: var(--dgr-fs--1); }
.dgr-fs-0 { font-size: var(--dgr-fs-0); }
.dgr-fs-1 { font-size: var(--dgr-fs-1); }
.dgr-fs-2 { font-size: var(--dgr-fs-2); }
.dgr-fs-3 { font-size: var(--dgr-fs-3); }
/* color accents on text (red leads, pink signals, gold sacred) */
.dgr-red { color: var(--dgr-red); }
.dgr-pink { color: var(--dgr-pink); }
.dgr-gold { color: var(--dgr-gold); }
.dgr-ink { color: var(--dgr-ink); }
/* Kolam Spectrum text accents (07 v1.1) — distribute by zone, never pile up.
peacock is a DARK core (poor as text on stone): prefer it as a field/bg,
use cyan for cool text. */
.dgr-turmeric { color: var(--dgr-turmeric); }
.dgr-marigold { color: var(--dgr-marigold); }
.dgr-peacock { color: var(--dgr-peacock); }
.dgr-cyan { color: var(--dgr-cyan); }
.dgr-green { color: var(--dgr-green); }
/* solid-fill button/badge convenience classes (v1.2) — white text passes AA
on both (peacock 9.2:1, green 5.4:1). Red stays outline-only by convention. */
.dgr-fill-red { border: 1px solid var(--dgr-red); color: var(--dgr-red); background: transparent; }
.dgr-fill-blue { background: var(--dgr-peacock); color: #ffffff; }
.dgr-fill-green { background: var(--dgr-green); color: #ffffff; }
.dgr-fill-gold { border: 1px solid var(--dgr-gold); color: var(--dgr-gold); background: transparent; }
.dgr-fill-pink { border: 1px solid var(--dgr-pink); color: var(--dgr-pink); background: transparent; }
/* vertical rhythm helper (8px / φ stack) */
.dgr-stack { display: flex; flex-direction: column; gap: var(--dgr-s-3); }
.dgr-stack--tight { gap: var(--dgr-s-2); }
.dgr-stack--loose { gap: var(--dgr-s-5); }
/* ---------------------------------------------------------------------------
4B · BRUTALIST TITLES — the Marathon brutalist graphic layer
(big text, no decoration; bold + stark + confident, never broken).
Share Tech display face (v1.2) · 400 weight · open tracking ·
oversized φ steps · hard edges · high contrast. Reusable on every page
AND every wiki page (this file loads under both). Compose freely.
ROLE CLASS USE WHERE
---- ----- ---------
base treatment .dgr-brutal add to ANY title element; sets the
Share Tech + open + uppercase
brutalist baseline (no fixed size)
hero wordmark .dgr-title-xl the hero wordmark / page hero mark
section heading .dgr-title-lg major section headings
sub heading .dgr-title-md secondary headings
big idea .dgr-bigidea Space Grotesk —
a "big idea" statement; add
.dgr-bigidea--stamp for the inverted-
block emphasis mode
module tag .dgr-moduletag Space Mono — "// NN" numbered prefix
numerals .dgr-numeral Space Mono — stat counts, versions
quote / aside .dgr-quote Space Mono italic — rare, narrative only
knock-out block .dgr-brutal-block stark inverted fill behind the
text (ink ground; +--red / +--gold)
hard-edge block .dgr-brutal-edge boxed title w/ hard offset shadow
weight overrides .dgr-brutal--900 / .dgr-brutal--800
tracking override .dgr-brutal--tight (-0.05em) / .dgr-brutal--flush (0)
--------------------------------------------------------------------------- */
.dgr-brutal {
font-family: var(--dgr-font-display);
font-weight: 400; letter-spacing: 0.04em; line-height: 0.9;
text-transform: uppercase; text-wrap: balance;
margin: 0; color: var(--dgr-ink);
}
.dgr-brutal--900 { font-weight: 900; }
.dgr-brutal--800 { font-weight: 800; }
.dgr-brutal--tight{ letter-spacing: 0.02em; }
.dgr-brutal--flush{ letter-spacing: 0; }
/* hero wordmark / page hero mark — the biggest, hardest statement */
.dgr-title-xl {
font-family: var(--dgr-font-display);
font-weight: 400; letter-spacing: 0.04em; line-height: 0.86;
text-transform: uppercase; text-wrap: balance; margin: 0; color: var(--dgr-ink);
font-size: clamp(var(--dgr-fs-3), 13vw, var(--dgr-fs-5));
}
/* major section headings */
.dgr-title-lg {
font-family: var(--dgr-font-display);
font-weight: 400; letter-spacing: 0.04em; line-height: 0.9;
text-transform: uppercase; text-wrap: balance; margin: 0; color: var(--dgr-ink);
font-size: clamp(var(--dgr-fs-2), 8vw, var(--dgr-fs-4));
}
/* secondary headings */
.dgr-title-md {
font-family: var(--dgr-font-display);
font-weight: 400; letter-spacing: 0.04em; line-height: 1;
text-transform: uppercase; text-wrap: balance; margin: 0; color: var(--dgr-ink);
font-size: clamp(var(--dgr-fs-1), 5vw, var(--dgr-fs-3));
}
/* a "big idea" statement — oversized, heavy, but on a readable measure.
v1.2: Space Grotesk, not the title display face — dual-mode:
plain (default, regular use) or .dgr-bigidea--stamp (inverted block,
emphasis moments only). Both modes are valid; pick by context, not either/or. */
.dgr-bigidea {
font-family: var(--dgr-font-bigidea);
font-weight: 700; letter-spacing: 0; line-height: 1.05;
text-transform: uppercase; text-wrap: balance; margin: 0; color: var(--dgr-ink);
font-size: clamp(var(--dgr-fs-2), 6vw, var(--dgr-fs-4));
max-width: 20ch;
}
/* stamped mode — inverted red block, reads as a graphic object not a sentence */
.dgr-bigidea--stamp {
display: inline-block; font-weight: 800;
font-size: clamp(1.1rem, 2.4vw, var(--dgr-fs-1));
line-height: 1.35; max-width: 30ch;
background: var(--dgr-red); color: var(--dgr-ground);
padding: 0.5em 0.7em;
}
/* module tag — "// NN" prefix, extends the existing kicker "//" grammar into
a numbered module reference (e.g. "// 09 COMPONENTS"). Space Mono, per v1.2. */
.dgr-moduletag {
font-family: var(--dgr-font-mono); font-weight: 700;
letter-spacing: 0.15em; font-size: var(--dgr-fs-0);
}
.dgr-moduletag .tag { color: var(--dgr-red); }
/* numerals / telemetry — stat counts, version numbers, "NN/NN" ratios. */
.dgr-numeral {
font-family: var(--dgr-font-mono); font-weight: 700;
color: var(--dgr-ink);
}
.dgr-numeral small {
font-size: 0.4em; font-family: var(--dgr-font-mono);
color: var(--dgr-muted-bright); text-transform: uppercase; letter-spacing: 0.1em;
}
/* narrative / quote aside — rare, deliberate tonal shift. Space Mono italic. */
.dgr-quote {
font-family: var(--dgr-font-quote); font-style: italic; font-weight: 400;
margin: 0; padding-left: 1.4rem; border-left: 3px solid var(--dgr-gold);
font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.3; max-width: 34ch;
color: var(--dgr-ink);
}
.dgr-quote cite {
display: block; margin-top: 0.8rem; font-style: normal;
font-family: var(--dgr-font-mono); font-size: 0.68rem;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgr-muted-bright);
}
/* stark knock-out block — solid fill, text reversed out (high contrast).
Use box-decoration-break so multi-line titles keep the block on every line. */
.dgr-brutal-block {
display: inline; /* inline so the fill hugs the text; clone across line breaks */
background: var(--dgr-ink); color: var(--dgr-ground);
padding: 0.06em 0.26em 0.12em;
box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.dgr-brutal-block--red { background: var(--dgr-red); color: var(--dgr-ground); }
.dgr-brutal-block--gold { background: var(--dgr-gold); color: var(--dgr-ground); }
.dgr-brutal-block--pink { background: var(--dgr-pink); color: var(--dgr-ground); }
/* hard-edged boxed title with a stark offset block-shadow (no blur, no round) */
.dgr-brutal-edge {
display: inline-block;
background: var(--dgr-surface); color: var(--dgr-ink);
padding: 0.14em 0.4em 0.2em;
border: 2px solid var(--dgr-ink);
box-shadow: 8px 8px 0 var(--dgr-red);
}
.dgr-brutal-edge--ember { box-shadow: 8px 8px 0 var(--dgr-ember); }
/* ---------------------------------------------------------------------------
5 · ZONES / PHASES — density ramp (08 §2, 10)
A pause/void .30 · B becoming .50 · C unfoldment .80
"density" drives a CONTAINED kolam ornament layer (never literal 80%).
--------------------------------------------------------------------------- */
.zone-a, .zone-b, .zone-c { position: relative; color: var(--dgr-ink); }
.zone-a { /* pause — the prakaram courtyard / seed */
--dgr-density: 0.30;
background: transparent; /* let the fixed dot-field show through (body carries the ground) */
padding-block: var(--dgr-s-7);
}
.zone-b { /* becoming — the felt 9-grid */
--dgr-density: 0.50;
background: transparent;
padding-block: var(--dgr-s-6);
}
.zone-c { /* unfoldment — the gopuram moment, focal */
--dgr-density: 0.80;
/* red glow only — NO opaque ground fill, so the dot-field stays visible behind the mark */
background:
radial-gradient(120% 80% at 50% 0%, rgba(var(--dgr-red-rgb), 0.10), transparent 62%);
padding-block: var(--dgr-s-7);
}
/* Kolam ornament field — a pulli dot lattice (kolam-white LINE-dots on stone).
Strength tied to --dgr-density but scaled DOWN so full strength stays
contained (.80 density -> ~0.13 layer opacity). Apply with .dgr-kolam-field. */
.dgr-kolam-field { position: relative; isolation: isolate; }
.dgr-kolam-field::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(var(--dgr-ink-rgb), 0.55) 1px, transparent 1.6px);
background-size: var(--dgr-kolam-size, 26px) var(--dgr-kolam-size, 26px);
background-position: center;
opacity: calc(var(--dgr-density) * 0.16);
}
/* Edge-pooled variant: ornament gathers at edges/thresholds, center stays
empty (08: "emptiness holds at the center"). */
.dgr-kolam-field--edges::before {
-webkit-mask-image: radial-gradient(ellipse 70% 70% at center, transparent 28%, #000 86%);
mask-image: radial-gradient(ellipse 70% 70% at center, transparent 28%, #000 86%);
}
/* ---------------------------------------------------------------------------
6 · THRESHOLDS — the charged seam where C meets A/B (09 motif 7, 10)
Ornament + motion pool here; primary actions live here.
--------------------------------------------------------------------------- */
.threshold {
--dgr-density: 0.80;
position: relative;
display: flex; align-items: center; justify-content: center;
gap: var(--dgr-s-3);
padding-block: var(--dgr-s-4);
text-align: center;
}
/* lintel hairlines: a red-led band that fades at the ends (void carries through) */
.threshold::before, .threshold::after {
content: ""; height: 1px; flex: 1 1 0; min-width: 24px;
background: linear-gradient(90deg, transparent, var(--dgr-red), transparent);
opacity: 0.7;
}
.threshold > * { flex: 0 0 auto; }
/* a plain carved seam (no content) for section breaks */
.dgr-seam {
height: 1px; border: 0; margin: var(--dgr-s-5) 0;
background: linear-gradient(90deg, transparent, var(--dgr-line) 12%, var(--dgr-line) 88%, transparent);
}
/* primary action that belongs on a threshold (10 interaction rule) */
.dgr-action {
display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
font-family: var(--dgr-font-mono); font-size: var(--dgr-fs--1);
letter-spacing: 0.22em; text-transform: uppercase;
padding: 0.85em 1.3em; min-height: var(--dgr-touch-min); min-width: var(--dgr-touch-min);
cursor: pointer;
color: var(--dgr-ground); background: var(--dgr-red);
border: 1px solid var(--dgr-red); text-decoration: none;
box-shadow: 5px 5px 0 var(--dgr-ember);
transition: transform var(--dgr-dur-fast) var(--dgr-ease-sharp),
box-shadow var(--dgr-dur-fast) var(--dgr-ease-sharp);
}
.dgr-action:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--dgr-pink); }
.dgr-action:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--dgr-ember); }
/* elevation utilities (v1.3) — apply the RANK, keep the hard edge */
.dgr-elev-0 { box-shadow: var(--dgr-elev-0); }
.dgr-elev-1 { box-shadow: var(--dgr-elev-1); }
.dgr-elev-2 { box-shadow: var(--dgr-elev-2); }
.dgr-elev-3 { box-shadow: var(--dgr-elev-3); }
/* focus-visible (v1.3) — SHARP, high-contrast, no soft glow. A hard 2px
offset ring, same "no blur ever" discipline as everything else. Global,
scoped to :focus-visible so mouse clicks stay clean (keyboard/AT only). */
:where(a, button, .dgr-action, [tabindex]):focus-visible {
outline: 2px solid var(--dgr-gold);
outline-offset: 2px;
border-radius: 0; /* never round, even on outline */
}
/* ---------------------------------------------------------------------------
7 · MOTIFS — Nataraja ring active/working indicator (09 motif 2, 10)
Markup injected by dgr.js (or hand-authored). Ring = kolam-white LINE,
flames = vermilion (the working signal). Rotation = the cycle.
--------------------------------------------------------------------------- */
.dgr-ring {
display: inline-flex; flex: 0 0 auto;
width: var(--dgr-ring-size); height: var(--dgr-ring-size);
line-height: 0; vertical-align: middle;
}
.dgr-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dgr-ring__rotor { transform-box: fill-box; transform-origin: center; }
.dgr-ring__ring { fill: none; stroke: var(--dgr-ink); stroke-width: 2; }
.dgr-ring__ring--inner { stroke-width: 1; opacity: 0.45; }
.dgr-ring__flame { fill: none; stroke: var(--dgr-red); stroke-width: 2;
stroke-linejoin: round; stroke-linecap: round; }
.dgr-ring__seed { fill: var(--dgr-gold); stroke: none; }
/* "active / working" — the ring of fire turns (DGR's answer to a spinner) */
.dgr-ring.is-working .dgr-ring__rotor { animation: dgr-spin 9s linear infinite; }
@keyframes dgr-spin { to { transform: rotate(360deg); } }
/* critical / hot processing — the single hot signal */
.dgr-ring--hot .dgr-ring__flame { stroke: var(--dgr-pink); }
.dgr-ring--hot .dgr-ring__seed { fill: var(--dgr-pink); }
/* ---------------------------------------------------------------------------
8 · SCROLL CYCLE — bloom A->B->C on scroll-in, dissolve back (10)
dgr.js toggles .dgr-bloomed and is-zone-* ; the visual is CSS-driven
so reduced-motion can collapse it to a still "mid-becoming".
--------------------------------------------------------------------------- */
.dgr-bloom {
--dgr-density: 0.30;
opacity: 0; transform: translateY(28px) scale(0.985);
transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1),
transform 0.9s cubic-bezier(0.2,0.7,0.2,1),
--dgr-density 0.9s linear;
will-change: opacity, transform;
}
.dgr-bloom.dgr-bloomed { opacity: 1; transform: none; }
.dgr-bloom.is-zone-a { --dgr-density: 0.30; }
.dgr-bloom.is-zone-b { --dgr-density: 0.50; }
.dgr-bloom.is-zone-c { --dgr-density: 0.80; }
/* ---------------------------------------------------------------------------
9 · GATE — "RESTRICTED CHANNEL" restyle (10: boot/gate = A->C threshold)
The locked sanctum opening. Red leads; pink is the one hot signal
(focus alarm / deny); gold gilds the threshold; center stays empty.
--------------------------------------------------------------------------- */
body.dgr #gate { background: var(--dgr-ground); }
/* edge-pooled kolam dust behind the card; Brahmasthana (center) kept clear */
body.dgr #gate::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(rgba(var(--dgr-ink-rgb), 0.5) 1px, transparent 1.6px);
background-size: 28px 28px;
opacity: 0.05;
-webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
}
/* modal-rank card — v1.3: dropped the soft ambient blur that used to sit
alongside the hard offset shadow (an inconsistency predating this pass);
now purely --dgr-elev-3, no blur anywhere. */
body.dgr .gate-box {
position: relative; z-index: 1; overflow: hidden;
border: 1px solid var(--dgr-line);
background: var(--dgr-surface);
box-shadow: 0 0 0 1px rgba(var(--dgr-ink-rgb), 0.04), var(--dgr-elev-3);
}
/* gold + red threshold gilding across the lintel of the card */
body.dgr .gate-box::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--dgr-gold), var(--dgr-red), var(--dgr-gold), transparent);
}
body.dgr .gate-head {
background: var(--dgr-ground); color: var(--dgr-ink);
border-bottom: 1px solid var(--dgr-line);
}
body.dgr .gate-head .lock { color: var(--dgr-red); } /* red accent */
/* gate fields adopt Space Mono — the data/system face (the "//" grammar) */
body.dgr .gate-field label { color: var(--dgr-muted-bright); font-family: var(--dgr-font-mono); }
body.dgr .gate-field input { border-bottom-color: var(--dgr-line); color: var(--dgr-ink); font-family: var(--dgr-font-mono); }
body.dgr .gate-field input:focus { border-bottom-color: var(--dgr-red); }
body.dgr .gate-btn {
border: 1px solid var(--dgr-red);
background: var(--dgr-red); color: var(--dgr-ground);
font-family: var(--dgr-font-mono);
min-height: var(--dgr-touch-min); min-width: var(--dgr-touch-min);
box-shadow: 5px 5px 0 var(--dgr-ember);
transition: transform var(--dgr-dur-fast) var(--dgr-ease-sharp),
box-shadow var(--dgr-dur-fast) var(--dgr-ease-sharp);
}
body.dgr .gate-btn:hover { box-shadow: 6px 6px 0 var(--dgr-pink); } /* hot signal */
body.dgr .gate-btn:active { box-shadow: 0 0 0 var(--dgr-ember); }
body.dgr .gate-err { color: var(--dgr-pink); } /* alarm */
body.dgr #gate.deny .gate-box {
box-shadow: 0 0 0 1px var(--dgr-pink), 14px 14px 0 var(--dgr-pink);
}
/* optional Nataraja ring slot inside the gate head */
body.dgr .gate-head .dgr-ring { --dgr-ring-size: 16px; }
/* ---------------------------------------------------------------------------
10 · REDUCED MOTION — collapse the cycle to a still "mid-becoming",
never dead (10). Disable heavy motion everywhere DGR controls.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.dgr-bloom {
opacity: 1 !important; transform: none !important;
transition: none !important; --dgr-density: 0.50; /* land at "becoming" */
}
.dgr-ring.is-working .dgr-ring__rotor { animation: none; }
.dgr-action { transition: none; }
body.dgr .gate-btn { transition: none; }
}
/* ---------------------------------------------------------------------------
11 · KOLAM SPECTRUM — axis / signal / field doctrine helpers (07 v1.2)
Red is an ACCENT/outline color (v1.2, no longer sole protagonist) —
blue (--dgr-peacock/--dgr-cyan) and green (--dgr-green) are co-lead
identity colors alongside it. These helpers carry the cycle +
kolam/peacock richness, but DISTRIBUTED by zone/phase — never all
six chromatics on one surface.
Context vars (inherited by a subtree, set by the classes below):
--dgr-accent : readable axis accent for text / rules (high contrast)
--dgr-field : bounded fill colour (use via rgba(var(--dgr-field-rgb)))
--dgr-signal : the ONE bright highlight allowed to fire in this zone
Discipline: among the bright highlights (marigold, cyan, magenta) only
ONE is "live" per surface/zone. Cores (turmeric, peacock) hold as
bounded fields. Kolam-white stays a LINE; gold stays metal/sparing.
--------------------------------------------------------------------------- */
/* --- axis context: warm leads fire / Zone-C, cool holds water / Zone-A&B --- */
.dgr-warm {
--dgr-accent: var(--dgr-turmeric); --dgr-accent-rgb: var(--dgr-turmeric-rgb);
--dgr-field: var(--dgr-turmeric); --dgr-field-rgb: var(--dgr-turmeric-rgb);
--dgr-signal: var(--dgr-marigold); --dgr-signal-rgb: var(--dgr-marigold-rgb);
}
.dgr-cool {
--dgr-accent: var(--dgr-cyan); --dgr-accent-rgb: var(--dgr-cyan-rgb);
--dgr-field: var(--dgr-peacock); --dgr-field-rgb: var(--dgr-peacock-rgb);
--dgr-signal: var(--dgr-cyan); --dgr-signal-rgb: var(--dgr-cyan-rgb);
}
/* --- choose which single bright signal is "live" for a subtree (ONE only) ---
Put on a section/zone; children that use .dgr-signal inherit the choice. */
.dgr-signal-marigold { --dgr-signal: var(--dgr-marigold); --dgr-signal-rgb: var(--dgr-marigold-rgb); }
.dgr-signal-cyan { --dgr-signal: var(--dgr-cyan); --dgr-signal-rgb: var(--dgr-cyan-rgb); }
.dgr-signal-magenta { --dgr-signal: var(--dgr-pink); --dgr-signal-rgb: var(--dgr-pink-rgb); }
/* --- appliers (read the context vars above) --- */
.dgr-accent { color: var(--dgr-accent); }
.dgr-signal { color: var(--dgr-signal); } /* the single bright signal */
.dgr-accent-rule { border-color: var(--dgr-accent); }
.dgr-signal-rule { border-color: var(--dgr-signal); }
.dgr-field { background-color: rgba(var(--dgr-field-rgb), 0.10); } /* bounded fill */
.dgr-field--soft { background-color: rgba(var(--dgr-field-rgb), 0.06); }
.dgr-signal-underline { /* one-signal text highlight */
text-decoration: none;
box-shadow: inset 0 -0.12em 0 var(--dgr-signal);
}
/* --- axis hairline rules (the two chromatic ramps; companions to .dgr-seam) --- */
.dgr-rule-warm, .dgr-rule-cool { height: 1px; border: 0; margin: var(--dgr-s-5) 0; opacity: 0.85; }
.dgr-rule-warm {
background: linear-gradient(90deg, transparent, var(--dgr-red), var(--dgr-turmeric), var(--dgr-marigold), transparent);
}
.dgr-rule-cool {
background: linear-gradient(90deg, transparent, var(--dgr-peacock), var(--dgr-cyan), var(--dgr-green), transparent);
}
/* --- full Kolam Spectrum ribbon (warm -> magenta bridge -> cool) ---
A reusable display element for the wiki colour page. */
.dgr-spectrum-bar {
height: var(--dgr-s-3); border-radius: 2px;
border: 1px solid rgba(var(--dgr-ink-rgb), 0.10);
background: linear-gradient(90deg,
var(--dgr-red) 0%, var(--dgr-turmeric) 17%, var(--dgr-marigold) 33%,
var(--dgr-pink) 50%,
var(--dgr-cyan) 67%, var(--dgr-peacock) 83%, var(--dgr-green) 100%);
}
/* --- cycle -> colour families (trimurti; context-var setters, 07 v1.1) ---
creation = turmeric/marigold · sustenance = peacock/cyan (Vishnu-blue) ·
destruction = vermilion/ember/ash · renewal = maroon/green. */
.dgr-cycle-creation {
--dgr-accent: var(--dgr-turmeric); --dgr-accent-rgb: var(--dgr-turmeric-rgb);
--dgr-field: var(--dgr-turmeric); --dgr-field-rgb: var(--dgr-turmeric-rgb);
--dgr-signal: var(--dgr-marigold); --dgr-signal-rgb: var(--dgr-marigold-rgb);
}
.dgr-cycle-sustenance {
--dgr-accent: var(--dgr-cyan); --dgr-accent-rgb: var(--dgr-cyan-rgb);
--dgr-field: var(--dgr-peacock); --dgr-field-rgb: var(--dgr-peacock-rgb);
--dgr-signal: var(--dgr-cyan); --dgr-signal-rgb: var(--dgr-cyan-rgb);
}
.dgr-cycle-destruction {
--dgr-accent: var(--dgr-red); --dgr-accent-rgb: var(--dgr-red-rgb);
--dgr-field: var(--dgr-ember); --dgr-field-rgb: var(--dgr-ember-rgb);
--dgr-signal: var(--dgr-red); --dgr-signal-rgb: var(--dgr-red-rgb);
}
.dgr-cycle-renewal {
--dgr-accent: var(--dgr-green); --dgr-accent-rgb: var(--dgr-green-rgb);
--dgr-field: var(--dgr-maroon); --dgr-field-rgb: var(--dgr-maroon-rgb);
--dgr-signal: var(--dgr-green); --dgr-signal-rgb: var(--dgr-green-rgb);
}
/* --- per-ZONE colour hints (07 v1.1: warm leads C; cool holds A/B) ---------
Additive to section 5 — sets ONLY the accent/field/signal context vars; the
zone backgrounds + density from §5 are untouched. Children using
.dgr-accent / .dgr-signal / .dgr-field auto-pick the right axis per zone. */
.zone-c { /* climax / fire -> WARM leads */
--dgr-accent: var(--dgr-turmeric); --dgr-accent-rgb: var(--dgr-turmeric-rgb);
--dgr-field: var(--dgr-turmeric); --dgr-field-rgb: var(--dgr-turmeric-rgb);
--dgr-signal: var(--dgr-marigold); --dgr-signal-rgb: var(--dgr-marigold-rgb);
}
.zone-a, .zone-b { /* pause / sustenance / water -> COOL holds */
--dgr-accent: var(--dgr-cyan); --dgr-accent-rgb: var(--dgr-cyan-rgb);
--dgr-field: var(--dgr-peacock); --dgr-field-rgb: var(--dgr-peacock-rgb);
--dgr-signal: var(--dgr-cyan); --dgr-signal-rgb: var(--dgr-cyan-rgb);
}
/* ---------------------------------------------------------------------------
12 · KOLAM-SPECTRUM SWATCH SET — reusable by the wiki colour page
Markup:
-
Red
#e0231a
protagonist
...
--------------------------------------------------------------------------- */
.dgr-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
gap: var(--dgr-s-2);
margin: 0; padding: 0; list-style: none;
}
.dgr-swatch {
display: flex; flex-direction: column; gap: var(--dgr-s-1);
font-family: var(--dgr-font-mono); font-size: var(--dgr-fs--1); line-height: 1.3;
}
.dgr-swatch__chip {
height: 64px; border-radius: 2px;
background: var(--dgr-swatch-c, var(--dgr-red));
border: 1px solid rgba(var(--dgr-ink-rgb), 0.12);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.dgr-swatch__name { color: var(--dgr-ink); letter-spacing: 0.12em; text-transform: uppercase; }
.dgr-swatch__hex { color: var(--dgr-muted); letter-spacing: 0.06em; }
.dgr-swatch__role { color: var(--dgr-muted-bright); }
/* kolam-white is a LINE, not a fill: render the ink chip as a line on stone */
.dgr-swatch--ink .dgr-swatch__chip {
background: var(--dgr-ground);
border-color: transparent;
box-shadow: inset 0 0 0 2px var(--dgr-ink);
}
/* swatch colour modifiers — neutrals · warm axis · cool axis · bridge · cycle reds */
.dgr-swatch--ground { --dgr-swatch-c: var(--dgr-ground); }
.dgr-swatch--surface { --dgr-swatch-c: var(--dgr-surface); }
.dgr-swatch--line { --dgr-swatch-c: var(--dgr-line); }
.dgr-swatch--ink { --dgr-swatch-c: var(--dgr-ink); }
.dgr-swatch--muted { --dgr-swatch-c: var(--dgr-muted); }
.dgr-swatch--red { --dgr-swatch-c: var(--dgr-red); }
.dgr-swatch--turmeric { --dgr-swatch-c: var(--dgr-turmeric); }
.dgr-swatch--marigold { --dgr-swatch-c: var(--dgr-marigold); }
.dgr-swatch--gold { --dgr-swatch-c: var(--dgr-gold); }
.dgr-swatch--peacock { --dgr-swatch-c: var(--dgr-peacock); }
.dgr-swatch--cyan { --dgr-swatch-c: var(--dgr-cyan); }
.dgr-swatch--green { --dgr-swatch-c: var(--dgr-green); }
.dgr-swatch--pink { --dgr-swatch-c: var(--dgr-pink); }
.dgr-swatch--ember { --dgr-swatch-c: var(--dgr-ember); }
.dgr-swatch--ash { --dgr-swatch-c: var(--dgr-ash); }
.dgr-swatch--maroon { --dgr-swatch-c: var(--dgr-maroon); }
/* ---------------------------------------------------------------------------
13 · KOLAM SPIN — the keystone motif, slowly ALIVE (09: round / full / alive).
A calm, continuous rotation for any round kolam mark; add the class to a
/motifs/kolam.svg ![]()
. The kolam is a circle, so it turns in place with
no jolt. Reduced motion holds it still (the cycle never dies, just pauses).
--------------------------------------------------------------------------- */
@keyframes dgr-kolam-rotate { to { transform: rotate(360deg); } }
.dgr-kolam-spin {
animation: dgr-kolam-rotate 60s linear infinite;
transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
.dgr-kolam-spin { animation: none; }
}