Hugging Face's logo

Spaces:
sitcod3
/
modul-e
Running

App Files Community
modul-e / src /index.css
sitcod3's picture
sitcod3
Upload src/index.css with huggingface_hub
f363666 verified
Raw History Blame
16.5 kB
@import "tailwindcss";
/*
* Verdigris & Ember color tokens
* Deep Ink, Verdigris, Molten Brass, Porcelain, Kiln Ember
*/
:root {
/* Deep Ink — primary dark base */
--nt-deep-ink: #2b434b;
--nt-deep-ink-100: #060a0c;
--nt-deep-ink-200: #0c1518;
--nt-deep-ink-300: #142126;
--nt-deep-ink-400: #1e3036;
--nt-deep-ink-500: #2b434b;
--nt-deep-ink-600: #47646b;
--nt-deep-ink-700: #6f8a8e;
--nt-deep-ink-800: #9db4b4;
--nt-deep-ink-900: #cfdedd;
/* Verdigris — primary interactive accent */
--nt-verdigris: #257d68;
--nt-verdigris-100: #05130e;
--nt-verdigris-200: #0c2a20;
--nt-verdigris-300: #124433;
--nt-verdigris-400: #1a5f47;
--nt-verdigris-500: #257d68;
--nt-verdigris-600: #3f9c84;
--nt-verdigris-700: #6fbca4;
--nt-verdigris-800: #a2d8c5;
--nt-verdigris-900: #d4efe4;
/* Molten Brass — warm secondary accent */
--nt-molten-brass: #a8842c;
--nt-molten-brass-100: #171104;
--nt-molten-brass-200: #322609;
--nt-molten-brass-300: #523f10;
--nt-molten-brass-400: #745a19;
--nt-molten-brass-500: #a8842c;
--nt-molten-brass-600: #c2a04a;
--nt-molten-brass-700: #d8bc72;
--nt-molten-brass-800: #ecd8a4;
--nt-molten-brass-900: #f8eecb;
/* Porcelain — cool neutral */
--nt-porcelain: #b4bfae;
--nt-porcelain-100: #1e231e;
--nt-porcelain-200: #3d463d;
--nt-porcelain-300: #616c61;
--nt-porcelain-400: #8a968a;
--nt-porcelain-500: #b4bfae;
--nt-porcelain-600: #c9d2c3;
--nt-porcelain-700: #dde3d8;
--nt-porcelain-800: #ecf0e8;
--nt-porcelain-900: #f6f8f2;
/* Kiln Ember — heat / danger accent */
--nt-kiln-ember: #b25731;
--nt-kiln-ember-100: #200e07;
--nt-kiln-ember-200: #421d0f;
--nt-kiln-ember-300: #662e18;
--nt-kiln-ember-400: #8b4123;
--nt-kiln-ember-500: #b25731;
--nt-kiln-ember-600: #cb7550;
--nt-kiln-ember-700: #dd9a78;
--nt-kiln-ember-800: #ecc2ab;
--nt-kiln-ember-900: #f8e5d9;
/* Compatibility primitive aliases retained for existing color consumers. */
--nt-espresso: var(--nt-deep-ink);
--nt-espresso-100: var(--nt-deep-ink-100);
--nt-espresso-200: var(--nt-deep-ink-200);
--nt-espresso-300: var(--nt-deep-ink-300);
--nt-espresso-400: var(--nt-deep-ink-400);
--nt-espresso-500: var(--nt-deep-ink-500);
--nt-espresso-600: var(--nt-deep-ink-600);
--nt-espresso-700: var(--nt-deep-ink-700);
--nt-espresso-800: var(--nt-deep-ink-800);
--nt-espresso-900: var(--nt-deep-ink-900);
--nt-deep-teal: var(--nt-verdigris);
--nt-deep-teal-100: var(--nt-verdigris-100);
--nt-deep-teal-200: var(--nt-verdigris-200);
--nt-deep-teal-300: var(--nt-verdigris-300);
--nt-deep-teal-400: var(--nt-verdigris-400);
--nt-deep-teal-500: var(--nt-verdigris-500);
--nt-deep-teal-600: var(--nt-verdigris-600);
--nt-deep-teal-700: var(--nt-verdigris-700);
--nt-deep-teal-800: var(--nt-verdigris-800);
--nt-deep-teal-900: var(--nt-verdigris-900);
--nt-warm-sand: var(--nt-porcelain);
--nt-warm-sand-100: var(--nt-porcelain-100);
--nt-warm-sand-200: var(--nt-porcelain-200);
--nt-warm-sand-300: var(--nt-porcelain-300);
--nt-warm-sand-400: var(--nt-porcelain-400);
--nt-warm-sand-500: var(--nt-porcelain-500);
--nt-warm-sand-600: var(--nt-porcelain-600);
--nt-warm-sand-700: var(--nt-porcelain-700);
--nt-warm-sand-800: var(--nt-porcelain-800);
--nt-warm-sand-900: var(--nt-porcelain-900);
--nt-terracotta: var(--nt-kiln-ember);
--nt-terracotta-100: var(--nt-kiln-ember-100);
--nt-terracotta-200: var(--nt-kiln-ember-200);
--nt-terracotta-300: var(--nt-kiln-ember-300);
--nt-terracotta-400: var(--nt-kiln-ember-400);
--nt-terracotta-500: var(--nt-kiln-ember-500);
--nt-terracotta-600: var(--nt-kiln-ember-600);
--nt-terracotta-700: var(--nt-kiln-ember-700);
--nt-terracotta-800: var(--nt-kiln-ember-800);
--nt-terracotta-900: var(--nt-kiln-ember-900);
--nt-light-peach: var(--nt-porcelain);
--nt-light-peach-100: var(--nt-porcelain-100);
--nt-light-peach-200: var(--nt-porcelain-200);
--nt-light-peach-300: var(--nt-porcelain-300);
--nt-light-peach-400: var(--nt-porcelain-400);
--nt-light-peach-500: var(--nt-porcelain-500);
--nt-light-peach-600: var(--nt-porcelain-600);
--nt-light-peach-700: var(--nt-porcelain-700);
--nt-light-peach-800: var(--nt-porcelain-800);
--nt-light-peach-900: var(--nt-porcelain-900);
/* Semantic surfaces */
--nt-bg-root: var(--nt-deep-ink-200);
--nt-bg-app: var(--nt-deep-ink-100);
--nt-bg-surface: var(--nt-deep-ink-300);
--nt-bg-surface-raised: var(--nt-deep-ink-400);
--nt-bg-sunken: var(--nt-deep-ink-200);
--nt-bg-overlay: rgba(6, 10, 12, 0.80);
--nt-bg-secondary: var(--nt-verdigris-200);
--nt-bg-inverse: var(--nt-porcelain-800);
/* Semantic text */
--nt-text-primary: var(--nt-porcelain-800);
--nt-text-body: var(--nt-porcelain-600);
--nt-text-muted: var(--nt-porcelain-400);
--nt-text-subtle: var(--nt-porcelain-400);
--nt-text-inverse: var(--nt-deep-ink-100);
--nt-text-link: var(--nt-verdigris-600);
--nt-text-link-hover: var(--nt-verdigris-700);
--nt-text-link-visited: var(--nt-verdigris-500);
--nt-text-link-active: var(--nt-kiln-ember-500);
--nt-text-on-accent: var(--nt-porcelain-900);
/* Semantic borders */
--nt-border-subtle: var(--nt-deep-ink-400);
--nt-border-default: var(--nt-deep-ink-600);
--nt-border-strong: var(--nt-deep-ink-700);
--nt-border-accent: var(--nt-verdigris-600);
/* Semantic interactive colors */
--nt-accent: var(--nt-verdigris-600);
--nt-accent-hover: var(--nt-verdigris-700);
--nt-accent-active: var(--nt-verdigris-500);
--nt-accent-subtle: var(--nt-verdigris-200);
--nt-focus-ring: var(--nt-verdigris-600);
--nt-focus-ring-offset: var(--nt-deep-ink-200);
--nt-selection-bg: var(--nt-verdigris-500);
--nt-selection-fg: var(--nt-porcelain-800);
/* Semantic buttons */
--nt-btn-primary-bg: var(--nt-verdigris-600);
--nt-btn-primary-fg: var(--nt-porcelain-900);
--nt-btn-primary-hover: var(--nt-verdigris-700);
--nt-btn-primary-active: var(--nt-verdigris-500);
--nt-btn-secondary-bg: var(--nt-deep-ink-400);
--nt-btn-secondary-fg: var(--nt-porcelain-600);
--nt-btn-ghost-fg: var(--nt-verdigris-600);
--nt-btn-danger-bg: var(--nt-kiln-ember-500);
--nt-btn-danger-fg: var(--nt-porcelain-900);
--nt-btn-disabled-bg: var(--nt-deep-ink-300);
--nt-btn-disabled-fg: var(--nt-porcelain-400);
/* Semantic statuses */
--nt-info: var(--nt-verdigris-600);
--nt-success: var(--nt-verdigris-600);
--nt-warning: var(--nt-molten-brass-600);
--nt-danger: var(--nt-kiln-ember-600);
/* Elevation / glow colors */
--nt-shadow-color: var(--nt-deep-ink-100);
--nt-glow-primary: var(--nt-verdigris-600);
--nt-glow-warm: var(--nt-molten-brass-500);
/* Protocol aliases */
--bg-canvas: var(--nt-bg-root);
--bg-surface: var(--nt-bg-surface);
--bg-sunken: var(--nt-bg-sunken);
--bg-deep: var(--nt-bg-app);
--text-primary: var(--nt-text-primary);
--text-secondary: var(--nt-text-body);
--text-muted: var(--nt-text-muted);
--accent-primary: var(--nt-accent);
--accent-hover: var(--nt-accent-hover);
--accent-warm: var(--nt-molten-brass-500);
--border-default: var(--nt-border-default);
--border-focus: var(--nt-focus-ring);
--shadow-color: rgba(6, 10, 12, 0.50);
}
@theme inline {
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
/* Existing utility names inherit the Verdigris & Ember source of truth. */
--color-black: var(--nt-deep-ink-100);
--color-white: var(--nt-porcelain-900);
--color-zinc-950: var(--nt-bg-app);
--color-zinc-900: var(--nt-bg-surface);
--color-zinc-800: var(--nt-bg-surface-raised);
--color-zinc-700: var(--nt-deep-ink-400);
--color-zinc-600: var(--nt-text-muted);
--color-zinc-500: var(--nt-text-muted);
--color-zinc-400: var(--nt-text-muted);
--color-zinc-300: var(--nt-text-body);
--color-zinc-200: var(--nt-text-body);
--color-zinc-100: var(--nt-text-primary);
--color-indigo-950: var(--nt-verdigris-200);
--color-indigo-900: var(--nt-verdigris-200);
--color-indigo-800: var(--nt-verdigris-300);
--color-indigo-700: var(--nt-verdigris-700);
--color-indigo-600: var(--nt-btn-primary-bg);
--color-indigo-500: var(--nt-btn-primary-hover);
--color-indigo-400: var(--nt-text-link);
--color-indigo-300: var(--nt-text-link-hover);
--color-indigo-200: var(--nt-verdigris-900);
--color-emerald-900: var(--nt-verdigris-200);
--color-emerald-800: var(--nt-verdigris-300);
--color-emerald-700: var(--nt-success);
--color-emerald-600: var(--nt-verdigris-500);
--color-emerald-500: var(--nt-verdigris-300);
--color-emerald-400: var(--nt-verdigris-600);
--color-emerald-300: var(--nt-verdigris-900);
--color-emerald-200: var(--nt-verdigris-900);
--color-teal-900: var(--nt-verdigris-900);
--color-teal-800: var(--nt-verdigris-800);
--color-teal-700: var(--nt-verdigris-600);
--color-teal-600: var(--nt-verdigris-600);
--color-teal-500: var(--nt-verdigris-300);
--color-teal-400: var(--nt-verdigris-600);
--color-teal-300: var(--nt-verdigris-900);
--color-cyan-900: var(--nt-verdigris-900);
--color-cyan-800: var(--nt-verdigris-800);
--color-cyan-700: var(--nt-verdigris-700);
--color-cyan-600: var(--nt-verdigris-600);
--color-cyan-500: var(--nt-verdigris-400);
--color-blue-900: var(--nt-verdigris-300);
--color-blue-800: var(--nt-verdigris-600);
--color-blue-700: var(--nt-verdigris-600);
--color-blue-600: var(--nt-verdigris-600);
--color-blue-500: var(--nt-verdigris-600);
--color-blue-400: var(--nt-verdigris-700);
--color-blue-300: var(--nt-verdigris-900);
--color-sky-900: var(--nt-verdigris-300);
--color-sky-800: var(--nt-verdigris-600);
--color-sky-700: var(--nt-verdigris-600);
--color-sky-600: var(--nt-verdigris-600);
--color-sky-500: var(--nt-verdigris-700);
--color-sky-400: var(--nt-verdigris-900);
--color-purple-900: var(--nt-kiln-ember-200);
--color-purple-800: var(--nt-kiln-ember-300);
--color-purple-700: var(--nt-kiln-ember-400);
--color-purple-600: var(--nt-kiln-ember-300);
--color-purple-500: var(--nt-kiln-ember-500);
--color-purple-400: var(--nt-kiln-ember-700);
--color-purple-300: var(--nt-kiln-ember-800);
--color-purple-200: var(--nt-kiln-ember-900);
--color-amber-900: var(--nt-molten-brass-200);
--color-amber-800: var(--nt-molten-brass-300);
--color-amber-700: var(--nt-molten-brass-500);
--color-amber-600: var(--nt-molten-brass-500);
--color-amber-500: var(--nt-molten-brass-200);
--color-amber-400: var(--nt-molten-brass-600);
--color-amber-300: var(--nt-molten-brass-800);
--color-rose-900: var(--nt-kiln-ember-200);
--color-rose-800: var(--nt-kiln-ember-300);
--color-rose-700: var(--nt-kiln-ember-400);
--color-rose-600: var(--nt-btn-danger-bg);
--color-rose-500: var(--nt-kiln-ember-400);
--color-rose-400: var(--nt-kiln-ember-600);
--color-rose-300: var(--nt-kiln-ember-700);
}
body {
font-family: var(--font-sans);
background:
radial-gradient(ellipse at 82% -12%, color-mix(in srgb, var(--nt-verdigris-600) 18%, transparent), transparent 34%),
radial-gradient(ellipse at 8% 112%, color-mix(in srgb, var(--nt-kiln-ember) 8%, transparent), transparent 42%),
linear-gradient(180deg, var(--nt-bg-root) 0%, var(--nt-bg-app) 100%);
background-attachment: fixed;
color: var(--nt-text-primary);
min-height: 100vh;
accent-color: var(--nt-accent);
caret-color: var(--nt-text-primary);
}
html {
background-color: var(--nt-bg-root);
}
/* Role-specific corrections for utility names reused by borders and controls. */
[class~="border-zinc-800"] {
border-color: var(--nt-border-subtle);
}
[class~="border-zinc-700"] {
border-color: var(--nt-border-strong);
}
[class~="border-zinc-800\/80"] {
border-color: color-mix(in srgb, var(--nt-border-subtle) 80%, transparent);
}
[class~="border-zinc-800\/60"] {
border-color: color-mix(in srgb, var(--nt-border-subtle) 60%, transparent);
}
[class~="border-indigo-500"]:focus,
[class~="focus:border-indigo-500"]:focus {
border-color: var(--nt-focus-ring);
}
[class~="focus:ring-indigo-500"]:focus {
--tw-ring-color: var(--nt-focus-ring);
}
:focus-visible {
outline-color: var(--nt-focus-ring);
}
:disabled {
color: var(--nt-btn-disabled-fg);
background-color: var(--nt-btn-disabled-bg);
border-color: var(--nt-border-subtle);
}
button[class~="bg-zinc-800"][class~="text-zinc-200"],
button[class~="bg-zinc-800"][class~="text-zinc-300"] {
color: var(--nt-btn-secondary-fg);
}
a:visited {
color: var(--nt-text-link-visited);
}
a:active {
color: var(--nt-text-link-active);
}
* {
scrollbar-color: var(--nt-deep-ink-600) var(--nt-deep-ink-200);
}
::selection {
background: var(--nt-selection-bg);
color: var(--nt-selection-fg);
}
/* System-wide polish: hierarchy, data legibility, depth, and states. */
html {
scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
.font-mono {
font-variant-numeric: tabular-nums;
}
.lucide {
stroke-width: 1.5;
filter: drop-shadow(1px 1px 0 rgba(6, 10, 12, 0.7)) drop-shadow(0 4px 8px rgba(6, 10, 12, 0.35));
}
button,
[role="button"],
select,
input,
textarea {
transition-property: color, background-color, border-color, box-shadow, opacity, transform;
transition-duration: 180ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
transform: translateY(1px) scale(0.985);
}
*:focus-visible {
outline: 2px solid var(--nt-focus-ring) !important;
outline-offset: 2px !important;
}
[class~="bg-white\/5"] {
background-color: color-mix(in srgb, var(--nt-deep-ink-300) 84%, transparent);
border-color: color-mix(in srgb, var(--nt-deep-ink-700) 38%, transparent);
box-shadow: 0 14px 36px -24px rgba(6, 10, 12, 0.9), inset 0 1px 0 rgba(246, 248, 242, 0.06);
}
[class~="bg-white\/10"] {
background-color: color-mix(in srgb, var(--nt-deep-ink-400) 88%, transparent);
}
[class~="bg-black\/40"] {
background-color: color-mix(in srgb, var(--nt-deep-ink-100) 78%, transparent);
}
[class~="shadow"],
[class~="shadow-sm"],
[class~="shadow-md"],
[class~="shadow-lg"],
[class~="shadow-xl"],
[class~="shadow-2xl"] {
--tw-shadow-color: rgba(6, 10, 12, 0.5);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Fixed film grain keeps the glass surfaces tactile without repainting scroll content. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none;
opacity: 0.045;
background-image: radial-gradient(rgba(246, 248, 242, 0.8) 0.5px, transparent 0.5px);
background-size: 4px 4px;
mix-blend-mode: soft-light;
}
/* Spring-like easing replaces the browser's default mechanical feel. */
[class~="transition-all"],
[class~="transition-colors"],
[class~="transition-transform"],
[class~="ease-in-out"],
[class~="ease-out"],
[class~="ease-in"],
[class~="linear"] {
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
[class~="animate-pulse"],
[class~="animate-ping"],
[class~="animate-spin"] {
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
button[class~="bg-indigo-600"],
a[class~="bg-indigo-600"] {
border-radius: 9999px;
box-shadow: 0 12px 28px -18px rgba(63, 156, 132, 0.75);
}
button[class~="bg-indigo-600"]:hover,
a[class~="bg-indigo-600"]:hover {
box-shadow: 0 16px 34px -18px rgba(63, 156, 132, 0.95);
}
.command-signal-ribbon {
background-image:
radial-gradient(circle at 92% 50%, color-mix(in srgb, var(--nt-molten-brass) 22%, transparent), transparent 28%),
radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--nt-verdigris-600) 20%, transparent), transparent 32%),
linear-gradient(90deg, color-mix(in srgb, var(--nt-deep-ink-300) 86%, transparent), color-mix(in srgb, var(--nt-deep-ink-400) 68%, transparent));
}
.page-shell > * {
animation: command-enter 720ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes command-enter {
from {
opacity: 0;
transform: translateY(18px);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.page-shell > * {
animation: none !important;
}
}