/* ── Lattice Leveling System (LLS) — gem progression ─────────────────── The user's level (0-6) maps to a gemstone identity. Setting swaps the accent palette + brand mark + gem meta name. The cream paper base + brown structural lines stay constant — only the gem at the heart of the lattice changes. L0 First Contact → Quartz (clear/cream) L1 Foundations → Citrine (warm gold) L2 Comfortable → Amber (honey) L3 Conversational → Amethyst (purple — brand center) L4 Independent → Emerald (green) L5 Fluent → Sapphire (deep blue) L6 Native-feeling → Ruby (deep red) Default (no data-level set) = Amethyst, matching the existing brand tokens defined in design.css. The data-level overrides those tokens when present. */ :root[data-level="0"] { --gem-name: "Quartz"; --gem-level-label: "L0 · Quartz · First Contact"; --accent: #8C7864; --accent-deep: #5A4836; --accent-soft: #EDE5D6; --accent-subtle: #F7F2E8; --gem-core: #E8DFCE; --gem-mid: #B8A88C; --brand-mark: url("/static/brand-gems/mark-quartz.svg"); } :root[data-level="1"] { --gem-name: "Citrine"; --gem-level-label: "L1 · Citrine · Foundations"; --accent: #C8941F; --accent-deep: #8B6512; --accent-soft: #F8E5B0; --accent-subtle: #FCF3D6; --gem-core: #E8B040; --gem-mid: #D4A12C; --brand-mark: url("/static/brand-gems/mark-citrine.svg"); } :root[data-level="2"] { --gem-name: "Amber"; --gem-level-label: "L2 · Amber · Comfortable"; --accent: #B25C24; --accent-deep: #7A3A1C; --accent-soft: #F4D2A8; --accent-subtle: #FBE9D2; --gem-core: #B25C24; --gem-mid: #B8702C; --brand-mark: url("/static/brand-gems/mark-amber.svg"); } :root[data-level="3"] { --gem-name: "Amethyst"; --gem-level-label: "L3 · Amethyst · Conversational"; --accent: #6B3FA0; --accent-deep: #4A2475; --accent-soft: #EFE4FB; --accent-subtle: #F7EFFC; --gem-core: #6B3FA0; --gem-mid: #6B3FA0; --brand-mark: url("/static/brand-gems/mark-amethyst.svg"); } :root[data-level="4"] { --gem-name: "Emerald"; --gem-level-label: "L4 · Emerald · Independent"; --accent: #1F7A55; --accent-deep: #115A40; --accent-soft: #C2E5D5; --accent-subtle: #E5F2EA; --gem-core: #1F7A55; --gem-mid: #2A8A6B; --brand-mark: url("/static/brand-gems/mark-emerald.svg"); } :root[data-level="5"] { --gem-name: "Sapphire"; --gem-level-label: "L5 · Sapphire · Fluent"; --accent: #2D5BAA; --accent-deep: #163873; --accent-soft: #C0D4EE; --accent-subtle: #E2EBF7; --gem-core: #2649A8; --gem-mid: #2D5BAA; --brand-mark: url("/static/brand-gems/mark-sapphire.svg"); } :root[data-level="6"] { --gem-name: "Ruby"; --gem-level-label: "L6 · Ruby · Native-feeling"; --accent: #A0152F; --accent-deep: #6E0A1E; --accent-soft: #EFC0CB; --accent-subtle: #F8E2E7; --gem-core: #A0152F; --gem-mid: #B22246; --brand-mark: url("/static/brand-gems/mark-ruby.svg"); } /* ── Subtle gem-name watermark in the brand hero ──────────────────── The hero hex eyebrow already says "THE STRUCTURE OF FLUENCY"; we add a level-name caption underneath that picks up the active gem. Pages that don't have the hero will simply not see this. */ .brand-hero[data-show-gem]::after { content: var(--gem-level-label); display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-deep); margin-top: 6px; opacity: 0.78; } /* ── Gem-progression preview strip (PoC; sidebar tier card) ───────── Lets the demo cycle through all 7 gems in one click each so the palette swap can be felt. Hidden in production behind a flag. */ .gem-progression { margin: 14px 14px 8px; padding: 12px 14px 14px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; } .gem-progression .label { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .gem-progression .row { display: flex; gap: 6px; align-items: center; justify-content: space-between; } .gem-progression .gem { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink-soft); cursor: pointer; position: relative; transition: transform 140ms ease, box-shadow 140ms ease; flex: 0 0 auto; } .gem-progression .gem:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(45, 26, 16, 0.18); } .gem-progression .gem.active { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); } .gem-progression .gem-0 { background: radial-gradient(circle at 35% 30%, #FBF6EE, #B8A88C); } .gem-progression .gem-1 { background: radial-gradient(circle at 35% 30%, #FCE8A8, #C8941F); } .gem-progression .gem-2 { background: radial-gradient(circle at 35% 30%, #E8AC60, #7A3A1C); } .gem-progression .gem-3 { background: radial-gradient(circle at 35% 30%, #B894E0, #4A2475); } .gem-progression .gem-4 { background: radial-gradient(circle at 35% 30%, #6FB29E, #115A40); } .gem-progression .gem-5 { background: radial-gradient(circle at 35% 30%, #6F8FCC, #163873); } .gem-progression .gem-6 { background: radial-gradient(circle at 35% 30%, #DA6080, #6E0A1E); } .gem-progression .gem-name { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--ink); margin: 8px 0 0; letter-spacing: -0.005em; } .gem-progression .gem-name .lvl { font-family: var(--sans); font-size: 10px; font-weight: 700; color: var(--accent-deep); background: var(--accent-subtle); border: 1px solid var(--accent-soft); padding: 1px 6px; border-radius: 4px; margin-right: 6px; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }