/* * ═══════════════════════════════════════════════════════════════ * TESSERACTIC — WEB STYLESHEET * ═══════════════════════════════════════════════════════════════ * * Version: 0.1 * Date: 30 April 2026 * Author: Diane — Creative Director, Saint Clair Pte. Ltd. * * Purpose: Web context — the platform surface, marketing pages, * holding pages, ledger views. Default register: dark-pine. * Bleached register opt-in via . * * Hierarchy: Layer 2a (Web) * Imports: tesseractic-base.css (Layer 1) * └─ tesseractic-tokens.css (Layer 0) * * Usage: * (relative path during development; see 00-principles.md §XI.5) * * ═══════════════════════════════════════════════════════════════ */ @import url('./tesseractic-base.css'); /* ================================================================= 1. REGISTER — Dark-pine default Bleached opt-in via body class. ================================================================= */ body { background: var(--t-pine); color: var(--t-stone); min-height: 100vh; } body.t-bleached { background: var(--t-stone-ground); color: var(--t-pine-deep); } /* ================================================================= 2. LAYOUT — Single-column, left-indented (The Language inheritance) ================================================================= */ .t-frame { position: relative; z-index: 1; } .t-row { padding: 0 var(--t-indent); } /* ================================================================= 3. GHOST MARK — Hors champ Oversized, cropped, bleeding off the right edge. Mint on dark; mid-pine on bleached. ================================================================= */ .t-ghost { position: fixed; top: 50%; right: -28vh; transform: translateY(-50%); width: 160vh; height: 160vh; opacity: 0.06; pointer-events: none; z-index: 0; } .t-ghost svg { width: 100%; height: 100%; display: block; } body.t-bleached .t-ghost { opacity: 0.10; } /* ================================================================= 4. TOP BAR — Lockup left, navigation right ================================================================= */ .t-top { display: flex; justify-content: space-between; align-items: center; padding: 28px var(--t-indent); border-bottom: 1px solid var(--t-pastis); position: relative; z-index: 2; } .t-top__lockup { display: flex; align-items: center; gap: 14px; } .t-top__mark { width: 30px; height: auto; display: block; flex-shrink: 0; } .t-top__word { font-family: var(--t-font-primary); font-weight: var(--t-w-bold); font-size: 14px; letter-spacing: var(--t-track-lapidary-22); text-transform: uppercase; color: var(--t-stone); line-height: 1; } body.t-bleached .t-top__word { color: var(--t-pine-deep); } .t-top__nav { font-family: var(--t-font-mono); font-size: 11px; letter-spacing: var(--t-track-wider); text-transform: uppercase; color: var(--t-mute); } .t-top__nav a { color: var(--t-mute); text-decoration: none; margin-left: 28px; } .t-top__nav a:hover { color: var(--t-stone); } body.t-bleached .t-top__nav a:hover { color: var(--t-pine-deep); } /* ================================================================= 5. HERO INSCRIPTION ================================================================= */ .t-hero { padding: 140px var(--t-indent) 120px; position: relative; z-index: 1; } .t-hero__label { margin-bottom: 18px; } .t-hero__inscription { font-family: var(--t-font-primary); font-weight: var(--t-w-black); font-size: clamp(48px, 9vw, 140px); line-height: 0.92; letter-spacing: var(--t-track-display); text-transform: uppercase; margin: 0; color: var(--t-stone); } body.t-bleached .t-hero__inscription { color: var(--t-pine-deep); } .t-hero__inscription .t-em { color: var(--t-mint); } body.t-bleached .t-hero__inscription .t-em { color: var(--t-pine-mid); } .t-hero__sub { margin-top: 36px; font-family: var(--t-font-primary); font-weight: var(--t-w-light); font-size: 19px; line-height: 1.5; color: var(--t-stone); opacity: 0.82; max-width: 640px; } body.t-bleached .t-hero__sub { color: var(--t-pine-deep); opacity: 0.85; } /* ================================================================= 6. SECTION ================================================================= */ .t-section { padding: 100px var(--t-indent); } .t-section__label { margin-bottom: 14px; } .t-section__title { font-family: var(--t-font-primary); font-weight: var(--t-w-bold); font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: var(--t-track-display); text-transform: uppercase; margin: 0 0 32px; color: inherit; } .t-section + .t-section { border-top: 1px solid var(--t-pastis-40); } /* ================================================================= 7. DATA ROW — Hero figures Tabular Jost, large scale, pastis amber. ================================================================= */ .t-datarow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 720px) { .t-datarow { grid-template-columns: 1fr 1fr; row-gap: 48px; } } .t-datarow__cell { display: flex; flex-direction: column; gap: 10px; } .t-datarow__figure { font-family: var(--t-font-primary); font-weight: var(--t-w-bold); font-size: clamp(44px, 6vw, 88px); line-height: 0.9; letter-spacing: var(--t-track-tight); color: var(--t-pastis); font-feature-settings: "tnum" 1, "lnum" 1; } .t-datarow__label { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: var(--t-track-wider); text-transform: uppercase; color: var(--t-mute); line-height: 1.5; } body.t-bleached .t-datarow__label { color: var(--t-mute-light); } /* ================================================================= 8. LEDGER TABLE — Bloomberg-grade data presentation Tables are protagonists, not afterthoughts. ================================================================= */ .t-ledger { width: 100%; border-collapse: collapse; font-family: var(--t-font-primary); font-weight: var(--t-w-light); font-feature-settings: "tnum" 1, "lnum" 1; } .t-ledger thead th { font-family: var(--t-font-mono); font-weight: var(--t-w-regular); font-size: 9px; letter-spacing: var(--t-track-lapidary); text-transform: uppercase; color: var(--t-pastis); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--t-pastis); white-space: nowrap; } .t-ledger thead th.num, .t-ledger tbody td.num { text-align: right; } .t-ledger tbody td { font-size: 15px; color: var(--t-stone); padding: 16px; border-bottom: 1px solid var(--t-pastis-18); vertical-align: top; } body.t-bleached .t-ledger tbody td { color: var(--t-pine-deep); border-bottom-color: var(--t-pine-deep-12); } .t-ledger tbody td.mono { font-family: var(--t-font-mono); font-size: 12px; color: var(--t-mute); letter-spacing: var(--t-track-wide); } body.t-bleached .t-ledger tbody td.mono { color: var(--t-mute-light); } .t-ledger tbody td.figure { font-weight: var(--t-w-medium); color: var(--t-mint); } body.t-bleached .t-ledger tbody td.figure { color: var(--t-pine-mid); } .t-ledger tbody tr:last-child td { border-bottom: 1px solid var(--t-pastis); } /* ================================================================= 9. FOOTER ================================================================= */ .t-foot { padding: 56px var(--t-indent) 64px; border-top: 1px solid var(--t-pastis); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-family: var(--t-font-mono); font-size: 10px; letter-spacing: var(--t-track-wider); text-transform: uppercase; color: var(--t-mute); } body.t-bleached .t-foot { color: var(--t-mute-light); } .t-foot a { color: inherit; text-decoration: none; } .t-foot a:hover { color: var(--t-stone); } body.t-bleached .t-foot a:hover { color: var(--t-pine-deep); } .t-foot__lockup { display: flex; align-items: center; gap: 12px; } .t-foot__mark { width: 16px; height: auto; display: block; flex-shrink: 0; } /* ================================================================= 10. CONTACT LINE — Email-as-statement ================================================================= */ .t-contact { font-family: var(--t-font-primary); font-weight: var(--t-w-light); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.4; color: var(--t-stone); display: flex; flex-direction: column; gap: 8px; } body.t-bleached .t-contact { color: var(--t-pine-deep); } .t-contact a { color: inherit; text-decoration-color: var(--t-pastis); } /* ================================================================= 11. STATUS MARKER — For holding pages, étude markers, dev banners ================================================================= */ .t-status { font-family: var(--t-font-mono); font-size: 9px; letter-spacing: var(--t-track-lapidary); text-transform: uppercase; color: var(--t-pastis); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--t-pastis); } .t-status::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--t-pastis); border-radius: 50%; animation: t-pulse 2s ease-in-out infinite; } @keyframes t-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ================================================================= 12. POSTER — Single-viewport holding-page composition. The inscription is the page; everything else is colophon. Opt-in via . Bleached register supported via the standard .t-bleached body class compound. ================================================================= */ body.t-poster { min-height: 100vh; display: flex; flex-direction: column; } body.t-poster .t-ghost { opacity: 0.04; } .t-poster__head { padding: 32px var(--t-indent) 0; flex-shrink: 0; } .t-poster__lockup { display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .t-poster__mark { width: 28px; height: auto; display: block; flex-shrink: 0; } .t-poster__main { flex: 1; display: flex; align-items: center; justify-content: flex-start; padding: 64px var(--t-indent); } .t-poster__inscription { font-family: var(--t-font-primary); font-weight: var(--t-w-black); font-size: clamp(56px, 14vw, 240px); line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; color: var(--t-stone); font-feature-settings: "tnum" 1, "lnum" 1; } .t-poster__inscription .t-noWrap { white-space: nowrap; } body.t-bleached .t-poster__inscription { color: var(--t-pine-deep); } .t-poster__foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 32px; padding: 24px var(--t-indent) 28px; font-family: var(--t-font-mono); font-size: 10px; letter-spacing: var(--t-track-wider); text-transform: uppercase; color: var(--t-mute); flex-shrink: 0; } body.t-bleached .t-poster__foot { color: var(--t-mute-light); } .t-poster__foot a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--t-pastis); padding-bottom: 1px; } .t-poster__foot a:hover { color: var(--t-stone); } body.t-bleached .t-poster__foot a:hover { color: var(--t-pine-deep); } @media (max-width: 720px) { .t-poster__inscription { font-size: clamp(40px, 13vw, 100px); } }