/* * Eclipse UI — voz display * * Fraunces (SIL OFL 1.1, ver app/assets/fonts/eclipse_ui/OFL-Fraunces.txt), * variable con ejes wght, opsz, SOFT y WONK. Alojada en el repo: sin * terceros, sin CSP extra, igual en todos los dispositivos. La cursiva solo * se descarga si una página la usa. */ @font-face { font-family: "Fraunces"; src: url(/assets/eclipse_ui/fraunces-latin-full-normal-321a08bcafc539abdcedb64800736a3efaac5841fa69bf342df143eac42d188d.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url(/assets/eclipse_ui/fraunces-latin-full-italic-31b484a67c7d3ad5d3fbf83ca566d1f422a9b7de2c83a947e19e4c9acb9b08c4.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* Inter (SIL OFL 1.1): la voz de toda la interfaz, en la app y en el * catálogo. Variable en peso y alojada aquí, así se ve igual en cualquier * equipo (antes solo se usaba si la persona la tenía instalada). * JetBrains Mono (SIL OFL 1.1): datos y etiquetas técnicas. Solo se * descarga si una página la usa. */ @font-face { font-family: "Inter"; src: url(/assets/eclipse_ui/inter-latin-wght-normal-007fce1bff9f7f37469fe61eff9ef62c033af63fccb0e65a2e94f4e0c14d9d6d.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(/assets/eclipse_ui/jetbrains-mono-latin-wght-normal-80880a2005eaf62ffc0bbf8dff021a2d83cd047acb34c6d2e4fe80272b18f23f.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* Las voces de las personalidades (SIL OFL 1.1, licencias junto a cada archivo * en app/assets/fonts/eclipse_ui/). Variables y solo latín (incluye acentos, * ñ, ¿ y ¡). El navegador las descarga solo si una sección las usa: una app * en Eclipse o Carbón nunca las pide. * * Manrope sans geométrica y limpia Brisa (texto y títulos) * Archivo grotesca con eje de ancho (wdth) Umbra (títulos condensados) * Cormorant serif de alto contraste, cursiva Alba (títulos) * Nunito sans de terminales redondas Terra (texto) */ @font-face { font-family: "Manrope"; src: url(/assets/eclipse_ui/manrope-latin-wght-normal-05a39e51e7c9499ce4f9e45a19afe1f5db08c6bd9e6beb95298fba5ba6d31573.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url(/assets/eclipse_ui/archivo-latin-wdth-wght-normal-26a8906a20b65c779f261ffe78885b62dce62b3d45a9158177672726a8c73665.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url(/assets/eclipse_ui/cormorant-latin-wght-normal-ca5ffc8911062016302ce1a183f45fe8ef781cd4195735443cf23436bc0c9efb.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url(/assets/eclipse_ui/cormorant-latin-wght-italic-f02d4332ecb4b62f9360469df81793db970a0067745ba6b3d68ac12b4cf20a0d.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: "Nunito"; src: url(/assets/eclipse_ui/nunito-latin-wght-normal-67227e27f8a4bd8aa8625eb62bba0652825ef582a881d2f13acc189e1d9fe37a.woff2) format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } /* * Eclipse UI — motor de tokens * * La base es la misma; la personalidad la decide cada estudio. Este archivo * NO se edita por cliente: recibe unos pocos DIALES (--eui-*) y deriva todo lo * demás. Cada cliente fija sus diales en theme.css; las personalidades de * partida viven en expressions.css. Guía completa: docs/GUI.md. * * Diales (entrada) Tokens derivados (salida, los que usan las vistas) * --eui-brand ──────────► --color-primary, -hover, -foreground, halo, corona * --eui-ink / --eui-paper ► --color-background/foreground/muted/border/card… * --eui-tint ──────────► cuánto tiñe la marca los grises intermedios * --eui-roundness ───────► --radius-* (los rounded-* de Tailwind lo siguen) * --eui-density ─────────► --eui-control-*, --eui-pad-* * --eui-depth ──────────► --shadow-* * --eui-motion ──────────► --eui-dur-* (0 = sin movimiento) * --eui-halo ──────────► --eui-ring, --eui-corona * --eui-font-* / --eui-display-* ► --font-sans, --font-heading, estilo display * --eui-line ──────────► qué tan marcados son los bordes (1 = base) * --eui-control-radius ──► --radius-button / --radius-field (pastilla, recto…) * --eui-control-case / -tracking / -weight ► la voz de botones (eui-control-voice) * * Los tokens se derivan en `:root` y de nuevo en cada `[data-eui]`, así una * sección (o el taller /ui) puede cambiar de personalidad sin tocar la página. */ /* ── Diales: valores base (personalidad "eclipse") ─────────────────────────── * :where() deja la especificidad en cero: theme.css y cualquier [data-eui] * los sobrescriben sin importar el orden de carga. */ :where(:root) { --eui-brand: #a3946b; --eui-ink: #1a1a18; --eui-paper: #f5f2ec; --eui-tint: 25%; --eui-roundness: 1; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 1; /* Carácter de las piezas: con estos valores todo se ve como siempre. */ --eui-line: 1; /* multiplica el paso de los bordes: 0.6 apenas se ven, 1.8 marcados */ --eui-control-case: none; /* uppercase: botones en mayúsculas */ --eui-control-tracking: normal; --eui-control-weight: 500; /* --eui-control-radius (sin valor): botones y campos siguen la escala de * radios; con 9999px son pastilla y con 0 rectos, aunque las tarjetas no. */ --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --eui-display-weight: 500; --eui-display-tracking: -0.02em; --eui-display-leading: 1.05; --eui-display-case: none; --eui-display-stretch: normal; /* ancho del display: 75% condensa (si la fuente tiene eje wdth) */ --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Estados: no salen de la marca para que un rojo siempre lea como error. * El rojo pasa AA como texto chico (errores de campo) sobre el fondo y la * tarjeta de todas las personalidades, en claro y en oscuro. */ --eui-danger: #b04236; --eui-success: #4a7357; /* AA como texto y con papel encima en todas las personalidades */ --eui-warning: #b88a3a; --eui-danger-dark: #e98073; --eui-success-dark: #7aa289; --eui-warning-dark: #d4a864; } /* ── Modo: claro ─────────────────────────────────────────────────────────── * Los pasos (--eui-step-*) dicen cuánto se acerca cada gris a la tinta. En * oscuro se necesitan saltos mayores para la misma separación percibida. */ :root, [data-eui] { --eui-bg: var(--eui-paper); --eui-fg: var(--eui-ink); --eui-step-muted: 6%; --eui-step-line: 15%; --eui-step-soft: 73%; --eui-step-press: 16%; --eui-step-hover: 4%; --eui-step-raised: 4%; --eui-step-line-subtle: 9%; --eui-step-line-strong: 24%; --eui-step-faint: 55%; --eui-step-subtle: 35%; --eui-text-l-lo: 0; --eui-text-l-hi: 0.48; --eui-surface: white; --eui-sidebar: var(--eui-surface); --eui-shadow-color: var(--eui-ink); --eui-shadow-k: 1; --eui-danger-now: var(--eui-danger); --eui-success-now: var(--eui-success); --eui-warning-now: var(--eui-warning); --eui-on-danger: var(--eui-paper); --eui-on-success: var(--eui-paper); } /* ── Modo: oscuro (html.dark, o forzado en una sección) ────────────────── */ .dark, .dark [data-eui]:not([data-eui-mode="light"]), [data-eui][data-eui-mode="dark"], [data-eui-mode="dark"] [data-eui]:not([data-eui-mode="light"]) { --eui-bg: var(--eui-ink); --eui-fg: var(--eui-paper); --eui-step-muted: 10%; --eui-step-line: 19%; --eui-step-soft: 77%; /* texto secundario AA también sobre tarjeta y fila con hover */ --eui-step-press: 17%; --eui-step-hover: 5%; --eui-step-raised: 4%; --eui-step-line-subtle: 9%; --eui-step-line-strong: 27%; --eui-step-faint: 45%; --eui-step-subtle: 28%; --eui-text-l-lo: 0.78; --eui-text-l-hi: 1; --eui-surface: var(--color-muted); --eui-sidebar: var(--eui-ink); --eui-shadow-color: black; --eui-shadow-k: 7; --eui-danger-now: var(--eui-danger-dark); --eui-success-now: var(--eui-success-dark); --eui-warning-now: var(--eui-warning-dark); --eui-on-danger: var(--eui-ink); --eui-on-success: var(--eui-ink); } /* Claro forzado dentro de una página oscura (el taller compara ambos). */ [data-eui][data-eui-mode="light"], [data-eui-mode="light"] [data-eui]:not([data-eui-mode="dark"]) { --eui-bg: var(--eui-paper); --eui-fg: var(--eui-ink); --eui-step-muted: 6%; --eui-step-line: 15%; --eui-step-soft: 73%; --eui-step-press: 16%; --eui-step-hover: 4%; --eui-step-raised: 4%; --eui-step-line-subtle: 9%; --eui-step-line-strong: 24%; --eui-step-faint: 55%; --eui-step-subtle: 35%; --eui-text-l-lo: 0; --eui-text-l-hi: 0.48; --eui-surface: white; --eui-sidebar: var(--eui-surface); --eui-shadow-color: var(--eui-ink); --eui-shadow-k: 1; --eui-danger-now: var(--eui-danger); --eui-success-now: var(--eui-success); --eui-warning-now: var(--eui-warning); --eui-on-danger: var(--eui-paper); --eui-on-success: var(--eui-paper); } /* Los controles nativos (calendario de un date, lista de un select, barras * de scroll) siguen el modo de la sección. Solo dentro de [data-eui]: en la * app el modo vive en y aún hay campos con fondo claro * fijo que dependen del esquema claro del navegador. */ [data-eui] { color-scheme: light; } .dark [data-eui]:not([data-eui-mode="light"]), [data-eui][data-eui-mode="dark"], [data-eui-mode="dark"] [data-eui]:not([data-eui-mode="light"]) { color-scheme: dark; } [data-eui][data-eui-mode="light"], [data-eui-mode="light"] [data-eui]:not([data-eui-mode="dark"]) { color-scheme: light; } /* ── Derivación ────────────────────────────────────────────────────────── */ :root, [data-eui] { /* La tinta con un poco de la luz de la marca: da temperatura a los grises. */ --eui-fg-tinted: color-mix(in oklab, var(--eui-fg), var(--eui-brand) var(--eui-tint)); /* Superficies y texto */ --color-background: var(--eui-bg); --color-foreground: var(--eui-fg); --color-muted: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-muted), var(--eui-bg)); --color-muted-foreground: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-soft), var(--eui-bg)); --color-border: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line) * var(--eui-line))), var(--eui-bg)); --color-secondary: var(--color-muted); --color-secondary-foreground: var(--eui-fg); --color-card: var(--eui-surface); --color-card-foreground: var(--eui-fg); --color-sidebar: var(--eui-sidebar); --color-sidebar-foreground: var(--eui-fg); --color-footer: var(--eui-ink); --color-footer-foreground: var(--eui-paper); /* Escalera de capas: la profundidad sale de apilar * superficies apenas distintas con bordes de 1px, no de sombras. */ --color-surface: var(--color-card); --color-surface-hover: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-hover), var(--color-card)); --color-raised: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-raised), var(--eui-bg)); --color-border-subtle: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line-subtle) * var(--eui-line))), var(--eui-bg)); --color-border-hover: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line-strong) * var(--eui-line))), var(--eui-bg)); --color-faint: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-faint), var(--eui-bg)); --color-subtle: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-subtle), var(--eui-bg)); --eui-accent-subtle: color-mix(in oklab, var(--eui-fg) 6%, transparent); --eui-spotlight: color-mix(in oklab, var(--eui-fg) 9%, transparent); --shadow-glow: 0 0 20px -3px color-mix(in oklab, var(--color-primary) min(100%, calc(15% * var(--eui-halo))), transparent); --shadow-subtle: 0 1px 2px 0 color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(6% * var(--eui-shadow-a))), transparent), 0 0 0 1px color-mix(in oklab, var(--eui-fg) 4%, transparent); --shadow-elevated: 0 10px 25px -8px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(12% * var(--eui-shadow-a))), transparent), 0 0 0 1px color-mix(in oklab, var(--eui-fg) 5%, transparent); /* Luz: la marca. Se usa poco y para lo que importa. */ --eui-brand-ink-auto: var(--eui-ink); --color-primary: var(--eui-brand); --color-primary-hover: color-mix(in oklab, var(--eui-brand), var(--eui-fg) var(--eui-step-press)); --color-primary-foreground: var(--eui-brand-ink, var(--eui-brand-ink-auto)); /* Texto en color de marca (ligas, etiquetas): la marca acercada a la * tinta hasta leerse bien sobre el fondo. La marca pura es para fondos. */ --eui-brand-text-auto: color-mix(in oklab, var(--eui-brand), var(--eui-fg) 35%); --color-primary-text: var(--eui-brand-text, var(--eui-brand-text-auto)); --color-accent: var(--color-primary); --color-accent-foreground: var(--color-primary-foreground); --eui-brand-wash: color-mix(in oklab, var(--eui-brand) 12%, var(--eui-bg)); /* Estados */ --color-destructive: var(--eui-danger-now); --color-destructive-foreground: var(--eui-on-danger); --color-success: var(--eui-success-now); --color-success-foreground: var(--eui-on-success); --color-warning: var(--eui-warning-now); --color-warning-foreground: var(--eui-ink); /* Forma. Tailwind v4 compila rounded-lg como var(--radius-lg): toda la app * sigue este dial, no solo los componentes. */ --radius-xs: calc(0.125rem * var(--eui-roundness)); --radius-sm: calc(0.375rem * var(--eui-roundness)); --radius-md: calc(0.5rem * var(--eui-roundness)); --radius-lg: calc(0.75rem * var(--eui-roundness)); --radius-xl: calc(1rem * var(--eui-roundness)); --radius-2xl: calc(1.25rem * var(--eui-roundness)); /* paneles y modales: un paso arriba de las tarjetas */ --radius-3xl: calc(1.5rem * var(--eui-roundness)); --radius-4xl: calc(2rem * var(--eui-roundness)); --radius-full: 9999px; /* Controles: botones (md) y campos (lg) por defecto; una personalidad puede * hacerlos pastilla o rectos sin tocar las tarjetas. */ --radius-button: var(--eui-control-radius, var(--radius-md)); --radius-field: var(--eui-control-radius, var(--radius-lg)); /* Densidad: alturas de control y aire interno de los componentes. */ --eui-control-sm: calc(2rem * var(--eui-density)); --eui-control-md: calc(2.5rem * var(--eui-density)); --eui-control-lg: calc(3rem * var(--eui-density)); --eui-pad-sm: calc(0.75rem * var(--eui-density)); --eui-pad-md: calc(1rem * var(--eui-density)); --eui-pad-lg: calc(1.5rem * var(--eui-density)); --eui-gap: calc(1rem * var(--eui-density)); /* Profundidad: sombras teñidas de tinta, nunca negro puro en claro. */ --eui-shadow-a: calc(var(--eui-depth) * var(--eui-shadow-k)); --shadow-sm: 0 1px 2px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent); --shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(7% * var(--eui-shadow-a))), transparent), 0 2px 4px -2px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent); --shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(8% * var(--eui-shadow-a))), transparent), 0 4px 6px -4px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent); --shadow-xl: 0 20px 25px -5px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(10% * var(--eui-shadow-a))), transparent), 0 8px 10px -6px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(10% * var(--eui-shadow-a))), transparent); /* Halo: el foco y el énfasis son una corona de luz, no un contorno duro. */ --eui-ring: 0 0 0 2px var(--eui-bg), /* Opaco y con el texto de marca (AA contra el fondo): el anillo pasa 3:1. */ 0 0 0 4px var(--eui-focus, var(--color-primary-text)), 0 0 calc(18px * var(--eui-halo)) calc(3px * var(--eui-halo)) color-mix(in oklab, var(--eui-brand) min(100%, calc(30% * var(--eui-halo))), transparent); --eui-corona: 0 0 0 1px color-mix(in oklab, var(--eui-brand) 35%, transparent), 0 10px 32px -8px color-mix(in oklab, var(--eui-brand) min(100%, calc(55% * var(--eui-halo))), transparent); /* Movimiento: respiración. Entra exhalando, sale inhalando. */ --eui-motion-ok: 1; --eui-m: calc(var(--eui-motion) * var(--eui-motion-ok)); --eui-dur-instant: calc(90ms * var(--eui-m)); --eui-dur-quick: calc(160ms * var(--eui-m)); --eui-dur-calm: calc(280ms * var(--eui-m)); --eui-dur-breath: calc(560ms * var(--eui-m)); --eui-dur-tide: calc(1400ms * var(--eui-m)); --eui-ease-exhale: cubic-bezier(0.22, 1, 0.36, 1); --eui-ease-inhale: cubic-bezier(0.64, 0, 0.78, 0); --eui-ease-breath: cubic-bezier(0.45, 0, 0.55, 1); --eui-ease-settle: linear(0, 0.24 8%, 0.62 18%, 0.9 29%, 1.04 41%, 1.06 50%, 1.02 63%, 0.995 78%, 1); --eui-press-scale: calc(1 - 0.03 * min(1, var(--eui-m))); /* Tipografía */ --font-sans: var(--eui-font-text); --font-heading: var(--eui-font-display); --font-mono: var(--eui-font-mono); --eui-soft: var(--eui-display-soft, min(100, calc(50 * var(--eui-roundness)))); --eui-wonk: var(--eui-display-wonk, 0); } /* Contraste automático del texto sobre la marca (oscuro sobre luz clara, * claro sobre luz oscura). Una personalidad puede fijarlo con --eui-brand-ink. */ @supports (color: oklch(from red l c h)) { :root, [data-eui] { --eui-brand-ink-auto: oklch(from var(--eui-brand) clamp(0.2, (0.57 - l) * 999, 0.985) calc(c * 0.15) h); --eui-brand-text-auto: oklch(from var(--eui-brand) clamp(var(--eui-text-l-lo), l, var(--eui-text-l-hi)) c h); /* El hover se aleja del texto que lleva encima: aclara la marca si el * texto es oscuro y la oscurece si es claro (antes bajaba de AA). */ --color-primary-hover: oklch(from var(--eui-brand) calc(l + 0.07 * clamp(-1, (l - 0.57) * 999, 1)) c h); } } @media (prefers-reduced-motion: reduce) { :root, [data-eui] { --eui-motion-ok: 0; } } /* * Eclipse UI — personalidades * * Personalidades de partida (en el código se llaman expresiones: data-eui, * Ui::Expressions). Cada bloque es un punto de partida para un estudio: * /ui/personalidades lo muestra sobre una página de estudio * y lo copia para theme.css (con :root en lugar de [data-eui=""]). * También sirve en una sección con data-eui="". * * Cada una cambia más que el color: su voz (familias, peso, mayúsculas, * ancho), su forma (redondez, controles en pastilla o rectos, qué tan * marcados son los bordes), su aire (densidad, sombra) y su ritmo * (movimiento). Los metadatos (para quién, rasgos) viven en * app/components/ui/expressions.rb. * * carbon el catálogo: monocromo y técnica (abajo, valores fijos) * eclipse la base: oro cálido, editorial y tranquilo * alba spa, barre: malva, Cormorant en cursiva, pastillas, muy lenta * brisa pilates clínico, fisio: Manrope, bordes finos, sin sombras * umbra box, HIIT, cycling: Archivo condensada en mayúsculas, recta * terra yoga: terracota, Nunito y Fraunces suave, fondos teñidos * * Cada bloque fija TODOS sus diales (también los que deja en su valor base) * para no heredar los de una sección de otra personalidad que lo contenga. */ [data-eui="eclipse"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #a3946b; --eui-ink: #1a1a18; --eui-paper: #f5f2ec; --eui-tint: 25%; --eui-roundness: 1; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 1; --eui-line: 1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 500; --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 500; --eui-display-tracking: -0.02em; --eui-display-leading: 1.05; --eui-display-style: normal; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Alba: un spa al amanecer. Habla bajito: serif de alto contraste en * cursiva, todo en pastilla, bordes que casi no se ven y mucho aire. */ [data-eui="alba"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #96527a; --eui-ink: #2a1d24; --eui-paper: #faf3f2; --eui-tint: 30%; --eui-roundness: 1.75; --eui-density: 1.1; --eui-depth: 0.7; --eui-motion: 1.35; --eui-halo: 1.6; --eui-line: 0.6; --eui-control-radius: 9999px; --eui-control-case: none; --eui-control-tracking: 0.01em; --eui-control-weight: 500; --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 500; --eui-display-tracking: -0.005em; --eui-display-leading: 1; --eui-display-style: italic; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Brisa: un consultorio luminoso. Precisa y fresca: Manrope en todo, * radios chicos, bordes finos, sin sombras y un movimiento que no rebota. */ [data-eui="brisa"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #2f7d6d; --eui-ink: #0e1b19; --eui-paper: #f4f7f6; --eui-tint: 12%; --eui-roundness: 0.5; --eui-density: 0.94; --eui-depth: 0.35; --eui-motion: 0.8; --eui-halo: 0.6; --eui-line: 0.85; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: -0.005em; --eui-control-weight: 600; --eui-font-text: "Manrope", system-ui, -apple-system, sans-serif; --eui-font-display: "Manrope", system-ui, -apple-system, sans-serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 700; --eui-display-tracking: -0.04em; --eui-display-leading: 1.02; --eui-display-style: normal; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Umbra: un box a media luz. Grita: Archivo condensada en mayúsculas, * todo recto, bordes marcados, botones en mayúsculas espaciadas y rápida. * Su modo natural es el oscuro. */ [data-eui="umbra"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #f2542d; --eui-ink: #0c0c0d; --eui-paper: #f0efeb; --eui-tint: 0%; --eui-roundness: 0; --eui-density: 0.92; --eui-depth: 1.4; --eui-motion: 0.7; --eui-halo: 1.2; --eui-line: 1.8; --eui-control-radius: 0; --eui-control-case: uppercase; --eui-control-tracking: 0.08em; --eui-control-weight: 700; --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 800; --eui-display-tracking: -0.005em; --eui-display-leading: 0.92; --eui-display-style: normal; --eui-display-case: uppercase; --eui-display-stretch: 70%; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Terra: un shala de comunidad. Cálida y redonda: Nunito para leer, * Fraunces suave para los títulos y la terracota tiñendo los grises. */ [data-eui="terra"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #a95a36; --eui-ink: #261a12; --eui-paper: #f6ede2; --eui-tint: 30%; --eui-roundness: 1.4; --eui-density: 1.05; --eui-depth: 0.9; --eui-motion: 1.15; --eui-halo: 1; --eui-line: 1.1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 700; --eui-font-text: "Nunito", system-ui, -apple-system, sans-serif; --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 600; --eui-display-tracking: -0.015em; --eui-display-leading: 1.05; --eui-display-style: normal; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: 100; --eui-display-wonk: 1; } /* ── carbon: la personalidad del catálogo ─────────────────────────────── * Monocromo: la "luz" es la propia tinta (negra en claro, casi blanca en * oscuro); el único color es el azul del foco. Profundidad por capas de * superficie y bordes de 1px. Inter + JetBrains Mono. Es la personalidad del * catálogo /ui. * Valores fijados a mano (no derivados): grises neutros exactos. */ [data-eui="carbon"], [data-eui="carbon"][data-eui-mode="light"], [data-eui-mode="light"] [data-eui="carbon"]:not([data-eui-mode="dark"]) { --eui-brand: #0a0a0a; --eui-ink: #0a0a0a; --eui-paper: #fafafa; --eui-tint: 0%; --eui-roundness: 1.25; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 0.5; --eui-line: 1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 500; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; /* El azul del foco, opaco en claro: translúcido no llega a 3:1. */ --eui-focus: #0284c7; --eui-font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --eui-font-display: var(--eui-font-text); --eui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --eui-display-weight: 600; --eui-display-tracking: -0.035em; --eui-display-style: normal; --eui-display-case: none; --eui-bg: #fafafa; --eui-fg: #0a0a0a; --color-card: #ffffff; --color-surface-hover: #f4f4f5; --color-raised: #f1f1f2; --color-muted: #f4f4f5; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-border-subtle: #ededef; --color-muted-foreground: #52525b; --color-faint: #71717a; --color-subtle: #a1a1aa; --color-primary: #0a0a0a; --color-primary-hover: #262626; --color-primary-foreground: #fafafa; --color-primary-text: #0a0a0a; /* El sol del medidor es negro en claro: la luna tiene que ser clara. */ --eui-moon: #dcdce0; --eui-accent-subtle: rgb(10 10 10 / 0.05); --eui-spotlight: rgb(10 10 10 / 0.05); --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08); --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04); --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05); } .dark [data-eui="carbon"]:not([data-eui-mode="light"]), [data-eui="carbon"][data-eui-mode="dark"], [data-eui-mode="dark"] [data-eui="carbon"]:not([data-eui-mode="light"]) { --eui-brand: #f2f2f3; --eui-focus: rgb(56 189 248 / 0.55); --eui-bg: #111113; --eui-fg: #f2f2f3; --color-card: #1c1c1f; --color-surface-hover: #202023; --color-raised: #18181a; --color-muted: #202023; --color-border: #29292c; --color-border-hover: #343438; --color-border-subtle: #18181a; --color-muted-foreground: #a1a1a6; --color-faint: #6f6f75; --color-subtle: #4d4d52; --color-primary: #f2f2f3; --color-primary-hover: #ffffff; --color-primary-foreground: #111113; --color-primary-text: #f2f2f3; --eui-moon: initial; --eui-accent-subtle: rgb(242 242 243 / 0.06); --eui-spotlight: rgb(242 242 243 / 0.07); --shadow-glow: 0 0 20px -3px rgb(255 255 255 / 0.15); --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(242 242 243 / 0.02); --shadow-elevated: 0 10px 25px -8px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(242 242 243 / 0.04); } /* Claro forzado dentro de un ancestro oscuro: gana sobre el bloque de arriba. */ [data-eui="carbon"][data-eui-mode="light"], [data-eui-mode="light"] [data-eui="carbon"]:not([data-eui-mode="dark"]) { --eui-brand: #0a0a0a; --eui-focus: #0284c7; --eui-bg: #fafafa; --eui-fg: #0a0a0a; --color-card: #ffffff; --color-surface-hover: #f4f4f5; --color-raised: #f1f1f2; --color-muted: #f4f4f5; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-border-subtle: #ededef; --color-muted-foreground: #52525b; --color-faint: #71717a; --color-subtle: #a1a1aa; --color-primary: #0a0a0a; --color-primary-hover: #262626; --color-primary-foreground: #fafafa; --color-primary-text: #0a0a0a; /* El sol del medidor es negro en claro: la luna tiene que ser clara. */ --eui-moon: #dcdce0; --eui-accent-subtle: rgb(10 10 10 / 0.05); --eui-spotlight: rgb(10 10 10 / 0.05); --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08); --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04); --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05); } /* * La personalidad de ESTE estudio. * * Eclipse UI es una base común; la personalidad (voz, forma, color, aire y * ritmo) la decide cada estudio aquí, con diales (docs/GUI.md). El motor * (eclipse_ui/tokens.css) deriva la paleta, las sombras, los radios, el halo * y el movimiento. Para partir de una personalidad de partida, cópiala en * /ui/personalidades (solo en desarrollo) con "Copiar para theme.css". * * Si hace falta, cualquier token derivado se puede fijar aquí mismo * (p. ej. --color-border: #ddd); gana sobre el motor. * * Esta base parte de Carbón: Inter para todo, monocromo, bordes de 1px. * bin/setup_client escribe el --eui-brand del cliente. */ :root { --eui-brand: #0a0a0a; --eui-ink: #0a0a0a; --eui-paper: #fafafa; --eui-tint: 0%; --eui-roundness: 1.25; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 0.5; --eui-line: 1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 500; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; --eui-focus: #0284c7; --eui-font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --eui-font-display: var(--eui-font-text); --eui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --eui-display-weight: 600; --eui-display-tracking: -0.035em; --eui-display-style: normal; --eui-display-case: none; --eui-bg: #fafafa; --eui-fg: #0a0a0a; --color-card: #ffffff; --color-surface-hover: #f4f4f5; --color-raised: #f1f1f2; --color-muted: #f4f4f5; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-border-subtle: #ededef; --color-muted-foreground: #52525b; --color-faint: #71717a; --color-subtle: #a1a1aa; --color-primary: #0a0a0a; --color-primary-hover: #262626; --color-primary-foreground: #fafafa; --color-primary-text: #0a0a0a; --eui-moon: #dcdce0; --eui-accent-subtle: rgb(10 10 10 / 0.05); --eui-spotlight: rgb(10 10 10 / 0.05); --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08); --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04); --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05); } .dark { --eui-brand: #f2f2f3; --eui-focus: rgb(56 189 248 / 0.55); --eui-bg: #111113; --eui-fg: #f2f2f3; --color-card: #1c1c1f; --color-surface-hover: #202023; --color-raised: #18181a; --color-muted: #202023; --color-border: #29292c; --color-border-hover: #343438; --color-border-subtle: #18181a; --color-muted-foreground: #a1a1a6; --color-faint: #6f6f75; --color-subtle: #4d4d52; --color-primary: #f2f2f3; --color-primary-hover: #ffffff; --color-primary-foreground: #111113; --color-primary-text: #f2f2f3; --eui-moon: initial; --eui-accent-subtle: rgb(242 242 243 / 0.06); --eui-spotlight: rgb(242 242 243 / 0.07); --shadow-glow: 0 0 20px -3px rgb(255 255 255 / 0.15); --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(242 242 243 / 0.02); --shadow-elevated: 0 10px 25px -8px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(242 242 243 / 0.04); } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * * Eclipse UI va primero y en orden: el motor de tokens, luego las * personalidades y al final theme.css (los diales de este estudio). * */ /* Smooth color transitions when toggling dark mode */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* * Dark-mode compatibility layer for Tailwind utility classes that don't yet * use theme variables. Always-dark surfaces (e.g. the site footer) are scoped * out via :not([data-theme-static]). */ .dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); } .dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); } .dark .bg-gray-50:not([data-theme-static]), .dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); } .dark .bg-gray-100:not([data-theme-static]), .dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); } .dark .text-gray-900:not([data-theme-static]), .dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); } .dark .text-gray-800:not([data-theme-static]), .dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); } .dark .text-gray-700:not([data-theme-static]), .dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); } .dark .text-gray-600:not([data-theme-static]), .dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); } .dark .text-gray-500:not([data-theme-static]), .dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); } .dark .text-gray-400:not([data-theme-static]), .dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); } .dark .border-gray-200:not([data-theme-static]), .dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); } .dark .border-gray-300:not([data-theme-static]), .dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); } /* * Admin sidebar — fixed full-viewport column. * Off-canvas on mobile, permanently visible on desktop (≥1024px). * Toggled on mobile via the `open` state class from the mobile-menu controller. * On desktop we force `display: flex` so the controller's `hidden` toggling * (used for the public navbar mobile menu) can't take the sidebar down. */ .admin-sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 200ms ease-out; } .admin-sidebar.open { transform: translateX(0); } @media (min-width: 1024px) { .admin-sidebar { display: flex !important; width: 16rem; max-width: none; transform: translateX(0); transition: none; } } /* Admin sidebar — stays white in light mode, uses themed surface in dark mode. */ .dark aside[data-mobile-menu-target="menu"][data-theme-static] { background-color: var(--color-sidebar); color: var(--color-sidebar-foreground); } /* Calendar view toggle buttons */ .active-view { background-color: var(--color-primary); color: var(--color-primary-foreground); } .active-view:hover { opacity: 0.9; } .inactive-view { border: 1px solid var(--color-border); background-color: transparent; color: var(--color-foreground); } .inactive-view:hover { background-color: var(--color-secondary); } /* Pagy pagination */ .pagy.series-nav { display: flex; align-items: center; gap: 0.25rem; } .pagy.series-nav > a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md, 0.5rem); color: var(--color-foreground); text-decoration: none; transition: background-color 0.15s, color 0.15s; } .pagy.series-nav > a:hover:not([aria-disabled="true"]) { background-color: var(--color-muted); } .pagy.series-nav > a[aria-current="page"] { background-color: var(--color-primary); color: var(--color-primary-foreground); } .pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) { color: var(--color-muted-foreground); cursor: default; opacity: 0.5; } .pagy.series-nav > a[role="separator"] { opacity: 1; letter-spacing: 0.1em; } .pagy.series-nav > a[aria-label="Previous"], .pagy.series-nav > a[aria-label="Next"] { font-size: 0; overflow: hidden; } .pagy.series-nav > a[aria-label="Previous"]::before, .pagy.series-nav > a[aria-label="Next"]::before { content: ""; display: block; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .pagy.series-nav > a[aria-label="Previous"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E"); } .pagy.series-nav > a[aria-label="Next"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }