/* ============================================================================= * kc-aurora-skin.css — Aurora Soft's palette on the existing app * ============================================================================= * * WHAT THIS IS, AND WHAT IT DELIBERATELY IS NOT * * The full Aurora Soft rebuild changed layout, hierarchy, density and type * across seven surfaces. It was reverted. This file is the other thing that was * asked for: Aurora's COLOUR, and its borderless treatment, on the app exactly * as it already stands. Nothing here moves an element, changes a typeface, * alters a radius or touches a single line of markup. * * HOW IT WORKS, AND WHY THAT MATTERS * * The players consume colour through tokens: `solid var(--border)` appears 163 * times in center.html and 112 in m.html, `box-shadow:var(--shadow-sm)` 70 and * 51. Four hundred and thirty-five sites in all, and not one of them names a * colour. So the recolour is a redefinition of the tokens and nothing else — * no markup edit, no risk to the x-dc block, and no interaction with the 174 * [style*="..."] selectors in kc-theme.css, which match on substrings that this * file never changes. * * THE BORDERLESS TREATMENT, DONE WITHOUT MOVING ANYTHING * * Aurora has no 1px borders and no shadows: structure is plate value and * hairlines that fade at both ends. Rather than strip 435 declarations out of * the markup, --border becomes transparent and the shadows become none. The * border still occupies its pixel, so NOTHING REFLOWS — every box keeps the * exact geometry it has today and simply stops drawing its outline. That is the * whole reason this approach is safe on a codebase where a 1px change once made * a panel 695px tall. * * LOADED AFTER kc-theme.css, AND !important IS REQUIRED * * kc-theme.css declares these tokens per presentation-register and per accent, * with !important, so a later sheet at equal specificity does not win on its * own. Every declaration here carries the flag for that reason and no other. * The register system still works: it governs type, density, radius, border * WEIGHT and motion, none of which this file touches. * * CONTRAST, COMPUTED — the rule this codebase holds itself to. Every pairing * below was measured with the WCAG 2.1 sRGB relative-luminance formula against * the ground the ink actually sits on: * * ink --bg --surface --surface-2 * --text 15.41 14.21 13.20 * --text-2 8.46 7.80 7.24 * --text-3 5.65 5.21 4.81 * * These are the vivid/focused Aurora values: nine pairings, none below 4.5, * worst 4.81. Clear is deliberately absent from this shared selector. Its * higher-contrast register tokens therefore survive this late stylesheet, * and the clear-specific Aurora component block below keeps every derived * plate, tint and semantic pairing at 7:1 for ordinary text. * ========================================================================== */ :root, :root[data-presentation="vivid"], [data-presentation="vivid"], :root[data-presentation="focused"], [data-presentation="focused"] { /* --- grounds. Warm, not neutral. ------------------------------------- */ --bg: #121010 !important; --bg-warm: #151212 !important; /* the marketplace's slightly lifted ground */ --surface: #1c1917 !important; /* every card */ --surface-2: #232020 !important; /* a card on a card */ /* --- ink ------------------------------------------------------------- */ --text: #ece7df !important; --text-2: #b5ac9f !important; --text-3: #948b7e !important; /* --- structure: the borderless treatment ------------------------------ Transparent rather than removed, so the box keeps its pixel and nothing reflows. --border-strong stays faintly visible because it is what marks a focused control and an active tab, and those must remain findable. */ --border: transparent !important; --border-strong: rgba(148,139,126,.34) !important; --shadow-sm: none !important; --shadow-md: none !important; /* --- the dark slabs --------------------------------------------------- 19 uses of --ink-900 and 2 of --ink-800 carry white text on a dark chip. Aurora's recess is that chip. They keep their white ink, which measures 16.05:1 on this value — better than they had. */ --ink-900: #0c0a09 !important; --ink-800: #14110f !important; --ink-700: #1c1917 !important; --plate-inset: #0c0a09 !important; /* --- accents ---------------------------------------------------------- Mapped onto Aurora's three ramps rather than invented. The app's --blue-* is its primary and becomes Aurora's purple; --teal-* becomes the green; --amber-* the gold. --violet-* and --rose-* are secondary and are folded onto purple and the critical semantic respectively, because Aurora has three ramps and the old system had five — inventing two more would be inventing colour the design does not have. The -100 and -050 stops are tints that sit BEHIND text, so they are alpha-composited over the plate rather than opaque: that is what keeps them legible on a card and on the ground alike. */ --blue-600: #bc91fb !important; --blue-500: #cbaafe !important; --blue-fg: #cbaafe !important; --blue-100: rgba(188,145,251,.16) !important; --blue-050: rgba(188,145,251,.10) !important; --teal-500: #52b88c !important; --teal-100: rgba(82,184,140,.16) !important; --amber-500: #cb9f41 !important; --amber-100: rgba(203,159,65,.16) !important; --violet-500:#bc91fb !important; --violet-100:rgba(188,145,251,.16) !important; --rose-500: #e0857a !important; --rose-100: rgba(224,133,122,.16) !important; /* Ink that sits ON a filled accent. Aurora's near-black, measured at 10.15:1 on the purple and 10.07:1 on the green. Clear does not inherit this fixed mapping: it restores the active accent's own measured ink and fill. */ --acc-ink: #0c0714 !important; --acc-fill: #bc91fb !important; } /* The hero gradient and the ambient field. The players paint --hero-grad behind white text; Aurora's signature gradient is far too light to carry white, so the hero becomes the plate with the gradient reserved for what it is designed for — a fill under dark ink. */ :root, [data-presentation] { --hero-grad: linear-gradient(150deg, #1c1917, #14110f) !important; } /* ============================================================================= * AURORA COMPONENT TOKENS — added 2026-08-17 by the Today surface (handoff 5a) * ============================================================================= * * Everything above this line is the RECOLOUR: Aurora's palette poured into the * tokens the players already consume, moving nothing. That was enough while the * only ask was colour. A surface rebuilt to Aurora's own COMPOSITION needs * values the recolour had no reason to carry — a gradient, two washes, four * tint alphas, a frame radius, the display and mono faces — and rule 1 of the * handoff is that none of them may ever appear as a literal in markup. * * So they are declared here, beside the palette they belong to, rather than in * the per-surface stylesheet: a wash is not a property of Today, it is a * property of Aurora, and the next surface to be migrated must find it already * defined rather than retype the alpha and drift by .02. * * TWO THINGS ABOUT THE FORM, both deliberate. * * NO !important. Every declaration above carries the flag because it is * REdefining a token that kc-theme.css already declares per register with * !important. Nothing below is declared anywhere else in this codebase, so * there is nothing to beat, and a flag that guards against nothing is a flag * somebody later has to reason about. * * NOT DOUBLED per register. The register blocks are written twice — * `:root[data-x]` and bare `[data-x]` — because their VALUES differ per * register and a picker previewing one register on a subtree has to be able * to reach them. None of these vary by register: a wash is the same wash in * vivid, focused and clear, and a plain `:root` declaration inherits into any * preview subtree unchanged. Type SIZE does vary, which is exactly why none * is set here — the Today markup consumes kc-theme.css's --fs-* ladder so the * `clear` accessibility register still scales the screen. * * Where a value the handoff names is already carried by a token above, this * block ALIASES it rather than restating the hex. One source, so a change to * the palette cannot leave a component behind on the old ramp. * * CONTRAST, COMPUTED (WCAG 2.1 sRGB relative luminance), for every pairing * these tokens introduce. A wash is alpha-composited over the plate and * measured at its TOP, where it is at full strength and the ratio is worst: * * over purple wash .12 ink-1 11.65 · ink-2 6.40 · ink-3 4.27 · acc-300 7.32 * over green wash .10 ink-1 12.14 · ink-2 6.66 · ink-3 4.45 * over tint .12/plate acc-300 7.32 · ink-2 6.40 * over tint .12/ground acc-300 8.11 (the top-bar member chip) * over tint-sel .14 acc-300 7.05 · ink-2 6.16 * over quiet .05 ink-2 6.84 · ink-3 4.56 * on the gradient --acc-ink 10.15 at #cbaafe, 10.07 at #7ac8a6 * * TWO RESULTS THAT CHANGED THE DESIGN, and they are why --au-ink-3 is not * aliased into either wash anywhere on the Today surface: tertiary ink is * 4.27:1 on the purple wash and 4.45:1 on the green, both under 4.5. The * mockup draws the deep-dive kicker in tertiary ink; it is --text-2 here. * Excluding those two, the worst pairing on the surface is 4.56:1. * ========================================================================== */ :root { /* --- spacing -------------------------------------------------------- */ /* The generated players pre-date a shared spacing ladder and therefore carry their old values inline. New responsive surfaces use this one shared scale instead of adding another screen-local number. The names and values match shared.css, so loading that older foundation later is a no-op rather than a second rhythm. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* --- the faces ------------------------------------------------------- */ --au-font-display: "Comfortaa", ui-rounded, system-ui, sans-serif; --au-font-ui: var(--font-sans); --au-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* Rule 9: never a proportional figure in a column. Named rather than typed at each of the twenty-odd sites that need it. */ --au-nums: tabular-nums; /* --- grounds and ink, aliased to the palette above -------------------- */ /* The header's ground. Translucent over the sky rather than opaque, and the app's own topbar value: an opaque bar across the top would cut the brightest part of the wash (the violet is centred at 12% 8%, directly behind it) into a flat band. It was paired with a backdrop blur in kc-aurora-today.css so scrolling content going under it stayed unreadable-through; that file went with the retired desktop shell on 2026-10-01. */ --au-ground: linear-gradient(180deg, rgba(7,7,12,.85), rgba(7,7,12,.35)); --au-plate: var(--surface); /* #1c1917 */ --au-recess: var(--ink-900); /* #0c0a09 — the step DOWN, never an opacity */ --au-ink-1: var(--text); /* #ece7df */ --au-ink-2: var(--text-2); /* #b5ac9f */ --au-ink-3: var(--text-3); /* #948b7e */ /* --- the ramps -------------------------------------------------------- */ --au-acc-300: var(--blue-500); /* #cbaafe — purple 300, the accent ink */ --au-acc-500: var(--blue-600); /* #bc91fb — purple 500, the focus ring */ --au-green-500: var(--teal-500); /* #52b88c */ /* The one ramp stop the recolour had no use for: green 300 is the gradient's far end and the ledger's amount ink, and neither existed before Aurora. */ --au-green-300: #7ac8a6; --au-critical: var(--rose-500); /* #e0857a — semantic, never borrows accent */ /* --- the signature gradient ------------------------------------------- */ /* Fixed purple->green whatever the member's accent preference is; the handoff states the design assumed fixed, and a gradient that re-tinted would make the two measured ink ratios below a promise this file could not keep. */ --au-grad: linear-gradient(110deg, #cbaafe, #7ac8a6); --au-on-grad: var(--acc-ink); /* #0c0714 — 10.15:1 and 10.07:1 at the stops */ /* The 1px frame around a hero: an outer box at 1px padding with the plate inside it. Heavier alpha than the washes because it is a line, not a field. */ --au-grad-frame: linear-gradient(135deg, rgba(188,145,251,.75), rgba(82,184,140,.75)); /* --- washes: what replaces a border on a secondary card ---------------- */ --au-wash-purple: linear-gradient(180deg, rgba(188,145,251,.12), transparent 60%); --au-wash-green: linear-gradient(180deg, rgba(82,184,140,.10), transparent 60%); /* --- tints: four alphas doing four different jobs ---------------------- */ /* .12 and .14 are NOT roundable to each other. The selected level pill is the one that carries accent INK; the difference in ground is small on purpose, because the unselected pills are never dimmed to make the selection read. */ --au-tint: rgba(188,145,251,.12); /* chips, secondary buttons */ --au-tint-sel: rgba(188,145,251,.14); /* the selected level pill */ --au-tint-quiet: rgba(255,255,255,.05); /* unselected pills, inputs */ --au-tint-hover: rgba(255,255,255,.06); /* hover wash — never an opacity */ /* A step on the four-step meter that has not been reached. MEASURED at 1.21:1 over the plate, which is a whisper and nowhere near SC 1.4.11's 3:1 — so it may never be the only thing saying where a member is. It is TRACK, not state: the reached steps are the gradient (8.93:1 and 8.86:1) and every step also carries its own number and label in an ink that clears AA. Do not build a control whose state is readable from this value alone. */ --au-meter-off: rgba(255,255,255,.07); /* --- hairlines: gradients that fade at both ends, never a solid rule ---- */ /* A solid rule has two hard ends, and on a borderless plate those ends read as the edge of something that is not there. Two weights by prominence. */ --au-rule: linear-gradient(90deg, transparent, rgba(148,139,126,.35) 20%, rgba(148,139,126,.35) 80%, transparent); --au-rule-firm: linear-gradient(90deg, transparent, rgba(148,139,126,.50) 20%, rgba(148,139,126,.50) 80%, transparent); --au-rule-bar: linear-gradient(90deg, transparent, rgba(148,139,126,.40) 15%, rgba(148,139,126,.40) 85%, transparent); /* --- content panels -------------------------------------------------- */ /* `--surface` is a small-card primitive. Ask used it for one almost viewport-wide shell, so Aurora's warm near-black card value read as a black slab against the cool ambient sky. These semantic tokens describe a content GROUND instead: a restrained accent lift, an inset one step above it, and an edge derived from the active accent. `--au-content-accent` deliberately reads the accent register directly: Aurora's signature `--blue-*` aliases are violet, while member content must continue to respond when the user selects another accent. */ --au-content-accent: var(--acc-500); --au-content-on-accent: var(--acc-ink); --au-content-plate: color-mix(in srgb, var(--surface) 92%, var(--au-content-accent)); --au-content-inset: color-mix(in srgb, var(--surface-2) 94%, var(--au-content-accent)); --au-content-tint: color-mix(in srgb, var(--surface-2) 82%, var(--au-content-accent)); --au-content-edge: color-mix(in srgb, var(--surface) 46%, var(--au-content-accent)); /* --- shape ------------------------------------------------------------ */ /* NOT on kc-theme.css's --r-* ladder, which the `focused` register halves: an 18px Aurora card would arrive at 9px and stop being the shape the system is built out of. The frame is the card PLUS ONE, because at equal radius a 1px frame reads thinner at the corners than along the edges, which is the tell that gives it away as a border. */ --au-r-frame: 19px; --au-r-card: 18px; --au-r-small: 14px; --au-r-pill: 99px; /* --- the atmosphere --------------------------------------------------- */ /* A blob is still a colour, and a colour in markup is the one thing this file exists to prevent. */ --au-aur-1: radial-gradient(circle, rgba(188,145,251,.26), transparent 65%); --au-aur-2: radial-gradient(circle, rgba(82,184,140,.20), transparent 65%); /* THE SKY, taken from the /app dashboard's "Dark Glass" ground because that is the one that was preferred over the two blobs above. ------------------------------------------------------------------------- What actually differs is SCALE, not hue. The tokens above are two 560-600px circles softened with a 60px blur: discrete objects you can point at, with a lot of bare ground between them. The app paints three washes measured in VIEWPORT WIDTHS (48vw / 42vw / 52vw) whose soft edges overlap across the whole screen, so no part of the ground is unlit and there is nothing to point at. That is the difference being asked for. Values are the app's own, copied rather than re-derived so the two products genuinely match: app/web.css :root --aurora. Its violet and teal are close cousins of Aurora Soft's purple and green (124,92,255 vs 188,145,251; 94,234,212 vs 82,184,140), so this reads as the same family at a larger scale; the pink is the app's third note and has no Aurora Soft equivalent. The base pair is the app's cool near-black (#0c0b16 -> #07070c) rather than Aurora Soft's warm #121010. The washes were mixed against that cool ground and go muddy over a warm one — the ground is part of the gradient, not a backdrop it happens to sit on. Plates stay warm and are unaffected: they are opaque and never composite with this layer. Contrast is unchanged for the same reason, and improves marginally where the ground got darker. */ --au-sky: radial-gradient(48vw 48vw at 12% 8%, rgba(124,92,255,.30), transparent 60%), radial-gradient(42vw 42vw at 88% 14%, rgba(240,171,252,.20), transparent 60%), radial-gradient(52vw 52vw at 78% 96%, rgba(94,234,212,.16), transparent 60%), linear-gradient(180deg, #0c0b16, #07070c); --au-sky-drift: radial-gradient(38vw 38vw at 50% 50%, rgba(124,92,255,.12), transparent 60%); } :root[data-presentation="vivid"], [data-presentation="vivid"] { --au-content-accent: var(--acc-400); } /* Clear is its own measured palette, not the shared AA recolour above. The register tokens from kc-theme.css remain in force and every Aurora alias is re-derived from them here. Decorative gradients become flat, equal-stop paints; semantic washes use the semantic tint as their one surface. */ :root[data-presentation="clear"], [data-presentation="clear"] { --au-ground: linear-gradient(var(--bg), var(--bg)); --au-plate: var(--surface); --au-recess: var(--ink-900); --au-ink-1: var(--text); --au-ink-2: var(--text-2); --au-ink-3: var(--text-3); --au-acc-300: var(--blue-500); --au-acc-500: var(--blue-600); --au-green-300: var(--teal-500); --au-critical: var(--rose-500); --au-critical-tint: var(--rose-100); --au-caution: var(--amber-500); --au-caution-wash: linear-gradient(transparent, transparent); --au-caution-ground: var(--amber-100); --au-grad: linear-gradient(var(--acc-fill), var(--acc-fill)); --au-grad-text: linear-gradient(var(--blue-500), var(--blue-500)); --au-grad-frame: linear-gradient(var(--border-strong), var(--border-strong)); --au-on-grad: var(--acc-ink); --au-wash-purple: linear-gradient(var(--surface-2), var(--surface-2)); --au-wash-green: linear-gradient(var(--surface-2), var(--surface-2)); --au-tint: var(--blue-100); --au-tint-sel: var(--blue-100); --au-tint-quiet: var(--surface-2); --au-tint-hover: var(--surface-2); --au-idle: var(--surface-2); --au-sel: var(--blue-100); --au-lilac: var(--blue-500); --au-ring: var(--border-strong); --au-dot: var(--blue-600); --au-input-rule: var(--border-strong); --au-content-accent: var(--acc-300); --au-content-plate: color-mix(in srgb, black 91%, white); --au-content-inset: color-mix(in srgb, black 86%, white); --au-content-tint: color-mix(in srgb, black 79%, var(--au-content-accent)); --au-content-edge: var(--text-2); } /* Aurora's hairline, for the one thing that genuinely separates rather than encloses: a rule between rows. Applied only where the markup already asked for a top border, so it replaces a line rather than adding one. */ [style*="border-top:var(--bw-1) solid var(--border)"], [style*="border-top: var(--bw-1) solid var(--border)"] { border-top-color: transparent !important; background-image: linear-gradient(90deg, transparent, rgba(148,139,126,.40) 15%, rgba(148,139,126,.40) 85%, transparent); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 0; }