/* ============================================================================= DOJOGENESIS — shared design kit The world: the page takes place inside the brand mark. The scroll is one day of practice — before dawn, first light, morning, high sun, dusk, nightfall. All colour is the Sunset Palette + the dojo-genesis navy backgrounds (design-systems/DojoGenesis/colors.md), or derived tints/shades of them. This file is the design-system-of-record for the whole site/. Every page (index / method / day-one / stack) links it and builds against these classes. Class names are STABLE — do not rename without updating every page. ========================================================================== */ :root { /* ---- the navy world (dojo-genesis backgrounds + derived shades) ---- */ --night: #071620; /* derived deep shade — the darkest hour */ --sky-1: #0a1e2e; /* bg-primary — main sky */ --sky-2: #0f2a3d; /* bg-secondary — panels */ --sky-3: #143847; /* bg-tertiary — lit ground */ --card: #1a3a4a; /* card background */ --border: #4a6a7a; /* neutral-mid border */ /* ---- the sunset (brand palette) ---- */ --gold: #ffd166; /* sunset-gold */ --orange: #f4a261; /* golden-orange */ --amber: #e8b04a; /* warm-amber */ --terra: #e76f51; /* terracotta */ --accent-ink: #8a5219;/* dark accent anchor (belt: brown) */ --sage: #7fb88c; /* soft-sage — affirmation */ --steel: #457b9d; /* info-steel */ /* ---- ink (light tints derived from the cloud/steel neutrals, for AA on navy) ---- */ --ink: #e9eff3; /* primary text */ --ink-soft: #bccdd8; /* secondary text */ --cloud: #94a3b8; /* cloud-gray — muted/large */ --link: #86b0cc; /* derived steel tint — AA on every navy shade used */ --edge: rgba(232, 176, 74, 0.16); /* amber hairline */ --edge-2: rgba(232, 176, 74, 0.42); /* amber hairline, hover */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Cascadia Code', ui-monospace, monospace; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* the brand mark, decoded to a real file next to this stylesheet (no data URIs) */ --mark-url: url("mark.png"); --wrap: 1120px; } /* ============================================================================= BASE / RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--sky-1); color: var(--ink); font-family: var(--font-body); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--gold); } ul, ol { list-style: none; } img { max-width: 100%; display: block; } /* ============================================================================= LAYOUT ========================================================================== */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } /* the page column */ .band { position: relative; padding: clamp(76px, 11vh, 132px) 0; overflow: hidden; } /* one hour of the day */ /* ============================================================================= TYPE REGISTERS — Fraunces = display/practice (warm, Zen). Mono = machine-honest. Sans = body. ========================================================================== */ .display { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; } /* serif practice register */ .mono { font-family: var(--font-mono); } /* machine register */ .band h2.section-title { /* the band headline */ font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; } .lede { /* the one supporting line under a headline */ color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 56ch; margin-top: 18px; } .center-head { text-align: center; } /* centered band header */ .center-head .marker { justify-content: center; } .center-head h2.section-title, .center-head .lede { margin-left: auto; margin-right: auto; } .center-head .lede { text-align: center; } .mlabel { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; } /* small mono section label */ /* ============================================================================= SKIP LINK ========================================================================== */ .skip-link { /* keyboard skip-to-content, hidden until focus */ position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--amber); color: var(--night); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; padding: 10px 16px; border-radius: 8px; transition: top 0.15s ease; } .skip-link:focus { top: 12px; color: var(--night); } /* ============================================================================= NAV — quiet, sticky, translucent navy. Copied verbatim onto every page; each page marks its own link with aria-current="page". ========================================================================== */ nav.top { position: sticky; top: 0; z-index: 100; background: rgba(7, 22, 32, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge); } .nav-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); height: 62px; display: flex; align-items: center; justify-content: space-between; } .nav-mark { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink); } /* the wordmark, top-left, links home */ .nav-mark .g { background: linear-gradient(120deg, var(--gold), var(--terra)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); } .nav-links a { font-family: var(--font-mono); font-size: 0.82rem; color: var(--cloud); transition: color 0.15s ease; } .nav-links a:hover { color: var(--amber); } .nav-links a[aria-current="page"] { color: var(--amber); } /* the page you are on */ .nav-links a.cta { color: var(--amber); border: 1px solid var(--edge); padding: 6px 15px; border-radius: 7px; }/* the Install button */ .nav-links a.cta:hover { border-color: var(--edge-2); background: rgba(232,176,74,0.07); } @media (max-width: 640px) { .nav-links a.plain { display: none; } } /* ============================================================================= BUTTONS ========================================================================== */ .btn { /* base button */ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; padding: 12px 26px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, color 0.18s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(120deg, var(--gold), var(--orange) 55%, var(--terra)); color: #10202b; } /* sunrise gradient CTA */ .btn-primary:hover { color: #10202b; filter: brightness(1.05); } .btn-ghost { color: var(--ink); border-color: var(--border); background: rgba(255,255,255,0.02); } /* quiet secondary CTA */ .btn-ghost:hover { border-color: var(--edge-2); color: var(--amber); background: rgba(232,176,74,0.06); } /* ============================================================================= BAND LIGHTING — each section carries its hour of the day (the day-arc). ========================================================================== */ .band--dawn { background: radial-gradient(120% 68% at 50% 120%, rgba(244,162,97,0.09), transparent 58%), linear-gradient(180deg, var(--night), var(--sky-1)); } /* 01 before dawn — coldest */ .band--firstlight { background: radial-gradient(84% 58% at 22% 110%, rgba(255,209,102,0.16), transparent 56%), linear-gradient(180deg, var(--sky-1), var(--sky-2)); } /* 02 first light — low gold at left */ .band--morning { background: radial-gradient(78% 66% at 36% 82%, rgba(232,176,74,0.17), rgba(244,162,97,0.05) 44%, transparent 62%), linear-gradient(180deg, var(--sky-2), var(--sky-3)); } /* 03 morning — climbing */ .band--highsun { background: radial-gradient(100% 82% at 50% 32%, rgba(255,209,102,0.24), rgba(244,162,97,0.09) 40%, transparent 68%), linear-gradient(180deg, var(--sky-3), var(--card)); }/* 04 high sun — warmest, overhead */ .band--dusk { background: radial-gradient(108% 64% at 72% 114%, rgba(231,111,81,0.22), rgba(244,162,97,0.06) 42%, transparent 64%), linear-gradient(180deg, var(--card), var(--sky-1)); } /* 05 dusk — cooling right */ .band--night { background: radial-gradient(64% 42% at 50% 10%, rgba(232,176,74,0.05), transparent 60%), linear-gradient(180deg, var(--sky-1), var(--night)); } /* 06 nightfall — deepest navy */ /* ============================================================================= MOTIF KIT — the world's visual vocabulary, componentised so every page can reach for it. Pure CSS or inline SVG; palette tokens only; no data URIs. ========================================================================== */ /* --- enso — one brushed ring with an opening. The core glyph: section markers, list bullets, and the frame around the sun/moon. Pure CSS; ink = currentColor. */ .enso { display: inline-block; width: 22px; height: 22px; flex: none; border-radius: 50%; background: conic-gradient(from 128deg, currentColor 0deg 298deg, transparent 298deg 360deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 62%, #000 66%); mask: radial-gradient(circle at 50% 50%, transparent 62%, #000 66%); } .enso--sm { width: 13px; height: 13px; } /* bullet size */ .enso--lg { width: clamp(40px, 6vw, 60px); height: clamp(40px, 6vw, 60px); } /* framing size */ /* --- marker — a chapter kicker: an enso + a mono time-of-day label. */ .marker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); margin-bottom: 22px; } .marker .enso { color: var(--amber); } .marker b { color: var(--cloud); font-weight: 400; } /* --- seed-dot — a planted seed as a list bullet (the sprout, reduced to its seed). */ .seed-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex: none; } /* --- roofline — a pagoda-roof silhouette divider between bands (SVG snippet lives in the page; this positions it). .roofline--top hangs from a band's top edge. */ .roofline { position: absolute; left: 0; right: 0; z-index: 1; line-height: 0; pointer-events: none; } .roofline--top { top: -1px; } .roofline--bottom { bottom: -1px; transform: scaleY(-1); } .roofline svg { width: 100%; height: auto; display: block; } /* --- horizon — layered mountains as a section/footer horizon (3 parallax SVG paths in the page). Sits at the bottom of a band; the day sets behind it. */ .horizon { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; line-height: 0; pointer-events: none; } .horizon svg { width: 100%; height: auto; display: block; } .horizon-glow { /* a soft rising/ setting glow behind a horizon */ position: absolute; left: 50%; bottom: 0; z-index: 0; transform: translateX(-50%); width: min(90vw, 900px); aspect-ratio: 2 / 1; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(255,209,102,0.14), rgba(231,111,81,0.05) 40%, transparent 68%); } /* --- glyph — a standalone line-drawn mark in the diagram palette (torii, sprout, compass, record). Reusable inline SVG at a set size; ink via stroke/fill helpers. */ .glyph { display: inline-flex; flex: none; width: 30px; height: 30px; color: var(--amber); } .glyph svg { width: 100%; height: 100%; display: block; } .glyph--sm { width: 22px; height: 22px; } .glyph--lg { width: clamp(44px, 6vw, 64px); height: clamp(44px, 6vw, 64px); } .glyph--sage { color: var(--sage); } /* the sprout, alive */ .glyph--terra { color: var(--terra); } /* a turned-back / warning mark */ /* --- belt-rail — the ranks as a compact colour progression (white → black, mapped to sunset tokens). For method.html rank strips; countable, one seg per belt. */ .belt-rail { display: inline-flex; align-items: center; gap: 5px; } .belt-rail .seg { height: 10px; width: 26px; border-radius: 3px; border: 1px solid var(--edge); } .seg.w { background: var(--cloud); } /* white belt */ .seg.y { background: var(--gold); } /* yellow */ .seg.o { background: var(--orange); } /* orange */ .seg.g { background: var(--sage); } /* green */ .seg.s { background: var(--steel); } /* blue (steel) */ .seg.t { background: var(--terra); } /* red (terracotta) */ .seg.b { background: var(--accent-ink); } /* brown */ .seg.k { background: var(--night); border-color: var(--border); } /* black */ .seg.now { outline: 2px solid var(--amber); outline-offset: 2px; } /* your current belt */ /* --- belt (dots) — a session's belt progress as circle-dots + XP, on a terminal. */ .belt { display: flex; align-items: center; gap: 7px; margin: 6px 0 2px; } .belt .d { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--edge-2); } .belt .d.on { background: var(--amber); border-color: var(--amber); } .belt .xp { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cloud); margin-left: 6px; } /* --- sun-rail — the sun path: a thin fixed track on the right; a sun descends the day as you scroll, gold at dawn to terracotta at dusk. Desktop, decorative. */ .sun-rail { display: none; } @media (min-width: 1180px) { .sun-rail { display: block; position: fixed; top: 14vh; bottom: 14vh; right: 26px; z-index: 90; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(255,209,102,0.05), rgba(232,176,74,0.30), rgba(231,111,81,0.12)); pointer-events: none; } .sun-rail .sun { position: absolute; left: 50%; top: 2%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gold); box-shadow: 0 0 16px 5px rgba(255, 209, 102, 0.55); } .sun-rail .tick { position: absolute; left: 50%; transform: translateX(-50%); width: 6px; height: 1px; background: var(--edge-2); } } /* --- stone-path — numbered onboarding steps, each a stone: a lit numeral, a command, and the one thing that just became true. Connected by a short rail. */ .stone-path { display: flex; flex-direction: column; } .stone { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; } .stone-num { width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1px solid var(--edge-2); background: radial-gradient(circle at 50% 34%, rgba(255,209,102,0.15), rgba(231,111,81,0.06)); color: var(--amber); font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; display: grid; place-items: center; } .stone-body { padding-bottom: 6px; } .stone-body h4 { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 9px; } .stone-cmd { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; color: var(--ink); background: #0a1a26; border: 1px solid var(--edge); border-radius: 8px; padding: 9px 13px; overflow-x: auto; white-space: pre; } .stone-cmd .p { color: var(--amber); } .stone-cmd .c { color: var(--ink); } .stone-cmd .o { color: #869aa8; } .stone-did { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin-top: 9px; } .stone-did b { color: var(--sage); font-weight: 600; } .stone-conn { width: 2px; height: 22px; background: var(--edge); margin: 5px 0 5px 20px; } /* the rail between stones */ /* ============================================================================= HERO — the world. Mark as the sun over the page's own mountain horizon. ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(48px, 9vh, 96px) clamp(20px, 5vw, 40px) 0; isolation: isolate; } .hero .sky { position: absolute; inset: 0; z-index: -3; background: radial-gradient(120% 78% at 50% 96%, rgba(255, 209, 102, 0.16) 0%, rgba(244,162,97,0.06) 26%, transparent 55%), linear-gradient(180deg, var(--night) 0%, var(--sky-1) 46%, var(--sky-2) 100%); } /* the pre-dawn sky */ .hero .glow { position: absolute; left: 50%; top: 44%; z-index: -2; width: min(78vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 209, 102, 0.34) 0%, rgba(231, 111, 81, 0.12) 34%, transparent 66%); border-radius: 50%; } /* the sun's glow behind the mark */ .hero .stars { position: absolute; inset: 0 0 40% 0; z-index: -2; pointer-events: none; } .hero .stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--ink); opacity: 0.5; } .hero .range { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; line-height: 0; pointer-events: none; } /* the hero horizon (mountains) */ .hero .range svg { width: 100%; height: auto; display: block; } .hero .mark-sun { width: clamp(196px, 29vw, 312px); aspect-ratio: 1; position: relative; isolation: isolate; margin-bottom: clamp(22px, 3vh, 34px); } /* the mark, framed as the sun */ .hero .mark-sun::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: var(--mark-url) 50% 50% / 104% no-repeat; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 70%, rgba(0,0,0,0.72) 88%, transparent 100%); mask-image: radial-gradient(circle at 50% 50%, #000 70%, rgba(0,0,0,0.72) 88%, transparent 100%); } .hero .mark-sun::before { content: ""; position: absolute; inset: -12%; z-index: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,201,110,0.30) 34%, rgba(255,168,64,0.13) 56%, transparent 72%); pointer-events: none; } .hero .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cloud); margin-bottom: 20px; } .hero h1 { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.3rem, 7.4vw, 5.2rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .hero .tagline { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1rem, 2.1vw, 1.4rem); margin-top: 18px; background: linear-gradient(100deg, var(--gold), var(--orange) 55%, var(--terra)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .promise { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 3.8vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; margin: clamp(16px, 2.4vh, 24px) auto 0; } /* the serif lead claim */ .hero .promise .em { font-style: italic; color: var(--gold); } .hero .sub { color: var(--ink-soft); font-size: 1.03rem; line-height: 1.7; max-width: 46ch; margin: 20px auto 0; } .hero .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: clamp(30px, 4vh, 42px); } .hero .cue { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: clamp(34px, 6vh, 64px); margin-bottom: clamp(28px, 5vh, 52px); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cloud); } /* the scroll cue */ .hero .cue svg { width: 18px; height: 18px; color: var(--amber); } /* ============================================================================= DIAGRAMS — inline SVG in the night-world palette; the argument's spine. SVG text is painted with `fill`, so the helpers set fill/stroke, not color. ========================================================================== */ .figure { margin: clamp(34px, 5vh, 56px) 0 0; } /* a captioned diagram */ .figure .frame { border: 1px solid var(--edge); border-radius: 16px; background: rgba(10, 30, 46, 0.5); padding: clamp(14px, 2.4vw, 28px); overflow: hidden; } .figure svg { width: 100%; height: auto; display: block; } .figure figcaption { margin-top: 18px; color: var(--ink-soft); font-size: clamp(0.96rem, 1.35vw, 1.1rem); line-height: 1.62; max-width: 66ch; } .figure figcaption .em { color: var(--gold); font-family: var(--font-display); font-style: italic; } .panel { border: 1px solid var(--edge); border-radius: 14px; background: rgba(10, 30, 46, 0.5); padding: clamp(16px, 2.4vw, 26px); overflow: hidden; } /* a small framed diagram panel */ .panel svg { width: 100%; height: auto; display: block; } /* SVG paint helpers — set fill/stroke inside diagrams (SVG text is fill, not color) */ .d-serif { font-family: var(--font-display); } .d-mono { font-family: var(--font-mono); } .fill-ink { fill: var(--ink); } .fill-soft { fill: var(--cloud); } .fill-inksoft { fill: var(--ink-soft); } .fill-amber { fill: var(--amber); } .fill-gold { fill: var(--gold); } .fill-sage { fill: var(--sage); } .fill-terra { fill: var(--terra); } .fill-card { fill: var(--card); } .fill-panel { fill: rgba(7, 22, 32, 0.55); } .fill-night { fill: var(--night); } /* horizon/roofline — nearest, solid */ .fill-sky1 { fill: var(--sky-1); } .fill-sky2 { fill: var(--sky-2); } /* horizon — mid layer */ .fill-sky3 { fill: var(--sky-3); } /* horizon — farthest, haziest layer */ .dnode { fill: rgba(7, 22, 32, 0.6); stroke: var(--edge-2); } .stroke-soft { stroke: var(--border); fill: none; } .stroke-amber { stroke: var(--amber); fill: none; } .stroke-gold { stroke: var(--gold); fill: none; } .stroke-edge { stroke: var(--edge-2); fill: none; } .stroke-terra { stroke: var(--terra); fill: none; } .stroke-sage { stroke: var(--sage); fill: none; } /* ============================================================================= TERMINAL — a framed, honest CLI transcript; the method shown running. ========================================================================== */ .term { background: #0a1a26; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px -30px rgba(0,0,0,0.8); } .term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: rgba(7,22,32,0.7); border-bottom: 1px solid var(--edge); } .term-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; } .term-bar .t { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cloud); margin-left: 8px; } .term-body { padding: 20px clamp(16px, 2vw, 22px); font-family: var(--font-mono); font-size: 0.83rem; line-height: 1.75; color: var(--ink-soft); overflow-x: auto; } .term-body p { margin: 0; } .term-body .row { margin: 2px 0; } .term-body .gap { height: 10px; } .t-prompt { color: var(--amber); } .t-path { color: var(--cloud); } .t-cmd { color: var(--ink); } .t-dim { color: #869aa8; } /* muted output — ~5.8:1 on terminal navy (AA) */ .t-route { color: var(--orange); font-weight: 600; } .t-ok { color: var(--sage); } .t-belt { color: var(--orange); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; } .t-koan { color: var(--ink); font-style: italic; font-size: 0.98rem; line-height: 1.5; } .t-seed { color: var(--sage); } .verbtag { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #10202b; background: var(--amber); border-radius: 5px; padding: 3px 9px; margin-left: auto; } /* links a terminal moment to a loop-verb */ .term-cap { font-family: var(--font-mono); font-size: 0.76rem; color: var(--cloud); line-height: 1.6; margin-top: 12px; } .term-cap b { color: var(--amber); font-weight: 700; } /* --- install — a centered two-command terminal + a short note beneath it. */ .install-wrap { max-width: 720px; margin: clamp(40px, 5vh, 60px) auto 0; text-align: center; } .install-term { text-align: left; } .install-note { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; margin-top: 26px; } .install-note code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--amber); background: rgba(232,176,74,0.09); padding: 2px 7px; border-radius: 5px; } .install-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(134,176,204,0.4); } .landed { text-align: center; margin-top: clamp(26px, 3.5vh, 40px); font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--gold); line-height: 1.4; } /* the line that lands a section */ /* ============================================================================= STAT NUMERALS — the substrate quantified. ========================================================================== */ .statstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: clamp(30px, 4vh, 44px); padding: 18px 22px; border: 1px solid var(--edge); border-radius: 12px; background: rgba(10, 30, 46, 0.5); font-family: var(--font-mono); } /* one-line stat row */ .statstrip .s { display: inline-flex; align-items: baseline; gap: 9px; } .statstrip .n { color: var(--amber); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; } .statstrip .l { color: var(--cloud); font-size: 0.8rem; } .statstrip .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); } @media (max-width: 620px) { .statstrip .dot { display: none; } .statstrip { gap: 12px 20px; } } .ostat { background: rgba(10,30,46,0.55); border: 1px solid var(--edge); border-radius: 12px; padding: 20px 22px; } /* a big single stat tile */ .ostat .n { font-family: var(--font-mono); font-weight: 700; font-size: 1.9rem; color: var(--amber); letter-spacing: -0.03em; line-height: 1; } .ostat .l { color: var(--cloud); font-size: 0.78rem; line-height: 1.4; margin-top: 8px; } /* --- numerals — one row of big stat numerals, no frames; the substrate at a glance. */ .numerals { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(22px, 5vw, 60px); margin-top: clamp(30px, 4vh, 46px); } .numerals .num { text-align: center; } .numerals .num .n { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3rem); color: var(--amber); letter-spacing: -0.03em; line-height: 1; } .numerals .num .l { display: block; font-family: var(--font-mono); color: var(--cloud); font-size: 0.76rem; margin-top: 9px; letter-spacing: 0.03em; } /* --- pathlink — a forward link into a detail page ("The method →"). */ .pathlink { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(24px, 3.5vh, 36px); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--amber); } .pathlink:hover { color: var(--gold); } .pathlink::after { content: "\2192"; transition: transform 0.15s ease; } .pathlink:hover::after { transform: translateX(3px); } /* ============================================================================= THE LOOP — the four verbs as a legend + the invariants that always hold. ========================================================================== */ .chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(22px, 3vh, 32px); } /* the verb-chain glosses */ @media (max-width: 720px) { .chain { grid-template-columns: 1fr 1fr; gap: 18px; } } @media (max-width: 430px) { .chain { grid-template-columns: 1fr; } } .chain .lnk { border-top: 1px solid var(--edge-2); padding-top: 13px; } .chain dt { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 1.02rem; font-weight: 700; color: var(--amber); } .chain dt .n { font-size: 0.68rem; color: var(--cloud); font-weight: 500; margin-left: auto; } .chain dd { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin-top: 7px; } .invariants { margin-top: clamp(26px, 3.5vh, 40px); display: flex; flex-direction: column; gap: 13px; max-width: 60ch; } /* checkable one-line truths */ .invariant { display: flex; gap: 14px; align-items: baseline; font-family: var(--font-display); font-size: clamp(1.06rem, 1.7vw, 1.34rem); line-height: 1.38; color: var(--ink); } .invariant .k { color: var(--amber); font-family: var(--font-mono); font-size: 0.64em; flex: none; transform: translateY(-0.12em); } /* ============================================================================= SUBSTRATE — the role-layers the loop runs on (method on top). ========================================================================== */ .substrate { margin-top: clamp(32px, 4vh, 48px); display: flex; flex-direction: column; gap: 10px; } .layer { display: grid; grid-template-columns: minmax(120px, auto) 1fr auto; gap: clamp(12px, 2.2vw, 28px); align-items: center; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 20px clamp(18px, 2.4vw, 30px); } /* one substrate layer */ .layer.method { border-color: var(--edge-2); background: linear-gradient(100deg, rgba(232,176,74,0.09), var(--card) 62%); } .layer .ln { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--amber); } .layer .lr { color: var(--ink-soft); font-family: var(--font-display); font-style: italic; font-size: 1.04rem; } .layer .ls { font-family: var(--font-mono); font-size: 0.73rem; color: var(--cloud); text-align: right; white-space: nowrap; } @media (max-width: 760px) { .layer { grid-template-columns: 1fr; gap: 6px; } .layer .ls { text-align: left; white-space: normal; } } /* ============================================================================= NOTE CARD — a small aside/callout for the detail pages (amber left accent). ========================================================================== */ .note { border: 1px solid var(--edge); border-left: 3px solid var(--edge-2); border-radius: 10px; background: rgba(10, 30, 46, 0.5); padding: 18px clamp(18px, 2.4vw, 24px); margin-top: clamp(22px, 3vh, 30px); } .note h4 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; } .note p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; } /* ============================================================================= CONTENT BLOCKS carried for the detail pages (method / stack). ========================================================================== */ /* --- moment — a verb up close: prose one side, a visual the other (method.html) */ .moments { display: flex; flex-direction: column; gap: clamp(30px, 4.5vh, 60px); margin-top: clamp(40px, 5.5vh, 66px); } .moment { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 46px); align-items: center; } .moment-visual, .moment-text { min-width: 0; } .moment.rev .moment-visual { order: -1; } @media (max-width: 820px) { .moment { grid-template-columns: 1fr; gap: 20px; } .moment.rev .moment-visual { order: 0; } } .moment .vpos { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cloud); } .moment h3 { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--amber); letter-spacing: -0.01em; margin: 9px 0 3px; } .moment .vsay { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.08rem; line-height: 1.3; margin-bottom: 13px; } .moment .mech { color: var(--ink-soft); line-height: 1.7; font-size: 0.98rem; max-width: 52ch; } /* --- rank — the practice has ranks: prose + a sensei terminal (method.html) */ .rank { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 46px); align-items: center; margin-top: clamp(40px, 5.5vh, 64px); border-top: 1px solid var(--edge); padding-top: clamp(34px, 4.6vh, 50px); } @media (max-width: 820px) { .rank { grid-template-columns: 1fr; gap: 22px; } } .rank h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); line-height: 1.1; } .rank p { color: var(--ink-soft); margin-top: 14px; line-height: 1.7; max-width: 52ch; } /* --- skillblock — what a skill is: prose + a SKILL.md terminal (method.html) */ .skillblock { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: clamp(44px, 6vh, 68px); border-top: 1px solid var(--edge); padding-top: clamp(36px, 5vh, 52px); } @media (max-width: 820px) { .skillblock { grid-template-columns: 1fr; gap: 28px; } } .skillblock .label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; } .skillblock h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); line-height: 1.1; } .skillblock p { color: var(--ink-soft); margin-top: 16px; line-height: 1.7; } .skillblock .anchor { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.1rem; margin-top: 20px; } /* --- eco — an extracted-package card, and origin — the solo-operator story (stack.html) */ .eco-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 20px); margin-top: clamp(36px, 5vh, 52px); } @media (max-width: 720px) { .eco-grid { grid-template-columns: 1fr; } } .eco { background: rgba(20, 56, 71, 0.4); border: 1px solid var(--edge); border-radius: 12px; padding: 24px 26px; transition: border-color 0.18s ease, background 0.18s ease; } .eco:hover { border-color: var(--edge-2); background: rgba(26, 58, 74, 0.65); } .eco h3 { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: var(--amber); } .eco p { color: var(--cloud); font-size: 0.9rem; line-height: 1.6; margin: 8px 0 10px; } .eco a { font-family: var(--font-mono); font-size: 0.76rem; } .eco a::after { content: " \2197"; } .origin { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; margin-top: clamp(52px, 7vh, 88px); border-top: 1px solid var(--edge); padding-top: clamp(40px, 6vh, 68px); } @media (max-width: 820px) { .origin { grid-template-columns: 1fr; gap: 32px; } } .origin h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--ink); line-height: 1.1; } .origin p { color: var(--ink-soft); line-height: 1.75; margin-top: 16px; } .origin .who { font-family: var(--font-mono); font-size: 0.84rem; color: var(--cloud); margin-top: 18px; } .origin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .surfaces-note { margin-top: 22px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--cloud); text-align: center; line-height: 1.7; } /* ============================================================================= MANIFESTO — the promise restated, at the dusk/nightfall boundary. ========================================================================== */ .manifesto { max-width: 760px; margin: 0 auto clamp(30px, 5vh, 64px); text-align: center; } .manifesto .kick { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); margin-bottom: 20px; } .manifesto .m-lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; margin: 0 auto; } .manifesto p { font-family: var(--font-display); color: var(--ink-soft); font-size: clamp(1.1rem, 1.9vw, 1.38rem); line-height: 1.5; max-width: 48ch; margin: clamp(20px, 3vh, 30px) auto 0; } .manifesto p .em { color: var(--gold); font-style: italic; } /* ============================================================================= NIGHTFALL — the koan, and the mark as the moon. ========================================================================== */ .nightfall { text-align: center; } .nightfall .wrap { position: relative; z-index: 1; } /* lift the koan above the horizon + stars */ .band--night .nightstars { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .band--night .nightstars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--ink); opacity: 0.45; } .moon { width: clamp(72px, 9vw, 104px); aspect-ratio: 1; margin: 0 auto clamp(40px, 6vh, 64px); position: relative; isolation: isolate; } /* the mark, cooled to the moon */ .moon::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: var(--mark-url) 50% 50% / 104% no-repeat; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 68%, rgba(0,0,0,0.7) 88%, transparent 100%); mask-image: radial-gradient(circle at 50% 50%, #000 68%, rgba(0,0,0,0.7) 88%, transparent 100%); filter: saturate(0.35) brightness(0.68) contrast(0.96) sepia(0.32) hue-rotate(176deg); opacity: 0.9; } .moon::before { content: ""; position: absolute; inset: -14%; z-index: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(150,178,214,0.20) 38%, transparent 70%); pointer-events: none; } .koan { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(1.7rem, 4.4vw, 3.1rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); max-width: 20ch; margin: 0 auto; } .koan .soft { color: var(--cloud); font-style: normal; } /* ============================================================================= FOOTER ========================================================================== */ footer { background: var(--night); border-top: 1px solid var(--edge); padding: clamp(48px, 7vh, 72px) 0 40px; position: relative; } .foot { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; } .foot-brand { max-width: 340px; } .foot-logo { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; } .foot-logo .g { background: linear-gradient(120deg, var(--gold), var(--terra)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .foot-brand p { color: var(--cloud); font-size: 0.88rem; line-height: 1.65; margin-top: 12px; } .foot-cols { display: flex; gap: clamp(36px, 6vw, 72px); flex-wrap: wrap; } .foot-col h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cloud); margin-bottom: 14px; } .foot-col a { display: block; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 9px; } .foot-col a:hover { color: var(--amber); } .foot-bottom { max-width: var(--wrap); margin: clamp(40px, 6vh, 56px) auto 0; padding: 22px clamp(20px,5vw,40px) 0; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } .foot-bottom p { font-family: var(--font-mono); font-size: 0.76rem; color: var(--cloud); } .foot-bottom a { color: var(--cloud); } .foot-bottom a:hover { color: var(--amber); } /* ============================================================================= FOCUS + MOTION — visible focus everywhere; ambient motion only, all of it gated on the motion preference; nothing here ever hides content. ========================================================================== */ :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: no-preference) { .hero .glow { animation: breathe 9s ease-in-out infinite; } .hero .stars i { animation: twinkle 5s ease-in-out infinite; } .band--night .nightstars i { animation: twinkle 6s ease-in-out infinite; } .hero .cue svg { animation: nudge 2.4s ease-in-out infinite; } @supports (animation-timeline: scroll()) { .sun-rail .sun { animation: descend linear both; animation-timeline: scroll(root block); } } } @keyframes breathe { 0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } } @keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.15; } } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @keyframes descend { from { top: 2%; background: var(--gold); box-shadow: 0 0 16px 5px rgba(255,209,102,0.55); } to { top: 98%; background: var(--terra); box-shadow: 0 0 16px 5px rgba(231,111,81,0.5); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================================= DETAIL-PAGE COMPONENTS — folded in from the page-local