/* ============================================================================ ATMOS — Sistema de UI original ---------------------------------------------------------------------------- Un sistema de diseño original (no es una copia de ninguna marca) inspirado en la estética de los sitios de producto técnico: fondo oscuro y atmosférico, tipografía limpia y un acento coral cálido. CÓMO USARLO 1. Carga las fuentes (o cámbialas por las tuyas): 2. Enlaza este archivo: 3. Añade class="atmos" a o . Para modo claro: class="atmos light". Todo se controla con las variables de :root — cámbialas y todo el sistema se actualiza. ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ .atmos { /* ---- Color: superficies (modo oscuro por defecto) ---- */ --bg: oklch(0.165 0.006 280); /* fondo base, casi negro cálido */ --bg-elevated: oklch(0.205 0.008 280); /* paneles elevados */ --surface: oklch(0.225 0.009 280); /* tarjetas */ --surface-hover: oklch(0.265 0.010 280); --border: oklch(0.32 0.010 280); /* bordes sutiles */ --border-strong: oklch(0.42 0.012 280); /* ---- Color: texto ---- */ --text: oklch(0.97 0.004 280); /* texto principal */ --text-muted: oklch(0.74 0.008 280); /* secundario */ --text-subtle: oklch(0.58 0.008 280); /* terciario / captions */ /* ---- Acentos (mismo chroma+lightness, distinto hue) ---- */ --accent: oklch(0.70 0.155 18); /* coral cálido — primario */ --accent-hover: oklch(0.75 0.155 18); --accent-soft: oklch(0.70 0.155 18 / 0.14); --accent-2: oklch(0.70 0.155 292); /* violeta — secundario */ --accent-2-soft: oklch(0.70 0.155 292 / 0.14); /* ---- Estados semánticos ---- */ --info: oklch(0.72 0.13 240); --success: oklch(0.74 0.14 155); --warning: oklch(0.80 0.13 75); --danger: oklch(0.70 0.17 25); /* ---- Tipografía ---- */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Escala tipográfica (fluida con clamp) */ --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.18rem; --text-xl: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); --text-2xl: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); --text-3xl: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem); --leading-tight: 1.12; --leading-snug: 1.35; --leading-base: 1.62; /* ---- Espaciado (escala base 4px) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Radios ---- */ --radius-sm: 7px; --radius: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* ---- Sombras (suaves, frías) ---- */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow: 0 8px 28px -12px oklch(0 0 0 / 0.55); --shadow-lg: 0 24px 60px -24px oklch(0 0 0 / 0.7); --glow: 0 0 0 1px var(--accent-soft), 0 12px 40px -10px oklch(0.70 0.155 18 / 0.4); /* ---- Transiciones ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.22s; } /* ---- Modo claro: solo reescribe las superficies y el texto ---- */ .atmos.light { --bg: oklch(0.985 0.004 280); --bg-elevated: oklch(1 0 0); --surface: oklch(1 0 0); --surface-hover: oklch(0.975 0.004 280); --border: oklch(0.90 0.006 280); --border-strong: oklch(0.82 0.008 280); --text: oklch(0.22 0.01 280); --text-muted: oklch(0.46 0.01 280); --text-subtle: oklch(0.60 0.01 280); --accent-soft: oklch(0.70 0.155 18 / 0.12); --accent-2-soft: oklch(0.70 0.155 292 / 0.12); --shadow-sm: 0 1px 2px oklch(0.4 0.02 280 / 0.10); --shadow: 0 10px 30px -14px oklch(0.4 0.02 280 / 0.22); --shadow-lg: 0 28px 64px -26px oklch(0.4 0.02 280 / 0.30); } /* --------------------------------------------------------------------------- 2. BASE --------------------------------------------------------------------------- */ .atmos *, .atmos *::before, .atmos *::after { box-sizing: border-box; } .atmos { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-base); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --------------------------------------------------------------------------- 3. EL FONDO ATMOSFÉRICO (el corazón del look) ---------------------------------------------------------------------------- Capas: gradientes radiales (luces de color) + una rejilla fina de puntos + un viñeteado para concentrar la atención. Aplícalo a o a cualquier sección con class="atmos-bg". --------------------------------------------------------------------------- */ .atmos-bg, body.atmos { position: relative; background-color: var(--bg); background-image: radial-gradient(60% 50% at 18% 0%, oklch(0.70 0.155 18 / 0.18), transparent 70%), radial-gradient(55% 45% at 100% 12%, oklch(0.70 0.155 292 / 0.16), transparent 70%), radial-gradient(70% 60% at 50% 110%, oklch(0.70 0.155 18 / 0.10), transparent 70%); background-attachment: fixed; } /* Rejilla de puntos sutil por encima del color */ .atmos-bg::before, body.atmos::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); } .atmos.light .atmos-bg::before, body.atmos.light::before { background-image: radial-gradient(oklch(0.4 0.02 280 / 0.07) 1px, transparent 1px); } /* Asegura que el contenido quede por encima del fondo */ .atmos-bg > *, body.atmos > * { position: relative; z-index: 1; } /* Contenedor centrado estándar */ .atmos-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--space-5); } /* --------------------------------------------------------------------------- 4. TIPOGRAFÍA --------------------------------------------------------------------------- */ .atmos h1, .atmos h2, .atmos h3, .atmos h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.02em; margin: 0 0 var(--space-4); color: var(--text); text-wrap: balance; } .atmos h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.035em; } .atmos h2 { font-size: var(--text-2xl); } .atmos h3 { font-size: var(--text-xl); } .atmos h4 { font-size: var(--text-lg); } .atmos p { margin: 0 0 var(--space-4); max-width: 64ch; text-wrap: pretty; } .atmos p.lead { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-snug); } .atmos a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } .atmos a:hover { color: var(--accent-hover); } .atmos .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); } .atmos .text-muted { color: var(--text-muted); } .atmos .text-subtle { color: var(--text-subtle); } /* Texto con degradado para titulares destacados */ .atmos .gradient-text { background: linear-gradient(100deg, var(--text) 30%, var(--accent) 75%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --------------------------------------------------------------------------- 5. BOTONES --------------------------------------------------------------------------- */ .atmos .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1; padding: 0.72em 1.25em; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .atmos .btn:active { transform: translateY(1px); } .atmos .btn-primary { background: var(--accent); color: oklch(0.18 0.02 18); font-weight: 600; box-shadow: 0 8px 24px -10px oklch(0.70 0.155 18 / 0.7); } .atmos .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 12px 32px -8px oklch(0.70 0.155 18 / 0.8); } .atmos .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .atmos .btn-secondary:hover { background: var(--surface-hover); border-color: var(--text-subtle); } .atmos .btn-ghost { background: transparent; color: var(--text-muted); } .atmos .btn-ghost:hover { color: var(--text); background: var(--surface); } .atmos .btn-sm { padding: 0.55em 0.95em; font-size: var(--text-xs); } .atmos .btn-lg { padding: 0.9em 1.6em; font-size: var(--text-base); } /* --------------------------------------------------------------------------- 6. TARJETAS INFORMATIVAS --------------------------------------------------------------------------- */ .atmos .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .atmos .card.interactive { cursor: pointer; } .atmos .card.interactive:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } .atmos .card h3 { margin-bottom: var(--space-2); } .atmos .card p:last-child { margin-bottom: 0; } /* Variante destacada con borde de acento luminoso */ .atmos .card.featured { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--accent), var(--accent-2)) border-box; box-shadow: var(--glow); } /* Icono / chip de la tarjeta */ .atmos .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 1.25rem; margin-bottom: var(--space-4); } /* Cuadrícula de tarjetas */ .atmos .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-5); } /* --------------------------------------------------------------------------- 7. CALLOUTS / RECUADROS DE AVISO --------------------------------------------------------------------------- */ .atmos .callout { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent); } .atmos .callout .callout-icon { flex-shrink: 0; font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .atmos .callout-body { font-size: var(--text-sm); color: var(--text-muted); } .atmos .callout-body strong { color: var(--text); font-weight: 600; } .atmos .callout-body :last-child { margin-bottom: 0; } .atmos .callout.info { border-left-color: var(--info); } .atmos .callout.info .callout-icon { color: var(--info); } .atmos .callout.success { border-left-color: var(--success); } .atmos .callout.success .callout-icon { color: var(--success); } .atmos .callout.warning { border-left-color: var(--warning); } .atmos .callout.warning .callout-icon { color: var(--warning); } .atmos .callout.danger { border-left-color: var(--danger); } .atmos .callout.danger .callout-icon { color: var(--danger); } /* --------------------------------------------------------------------------- 8. BADGES / ETIQUETAS --------------------------------------------------------------------------- */ .atmos .badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.02em; padding: 0.34em 0.7em; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); } .atmos .badge.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .atmos .badge.accent2 { background: var(--accent-2-soft); border-color: transparent; color: var(--accent-2); } .atmos .badge.success { background: oklch(0.74 0.14 155 / 0.14); border-color: transparent; color: var(--success); } .atmos .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* --------------------------------------------------------------------------- 9. BLOQUES DE CÓDIGO --------------------------------------------------------------------------- */ .atmos code { font-family: var(--font-mono); font-size: 0.9em; background: var(--accent-soft); color: var(--accent); padding: 0.15em 0.42em; border-radius: var(--radius-sm); } .atmos pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7; background: oklch(0.13 0.006 280); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); overflow-x: auto; margin: 0 0 var(--space-4); } .atmos pre code { background: none; color: var(--text-muted); padding: 0; } .atmos pre .tok-key { color: var(--accent-2); } .atmos pre .tok-str { color: var(--success); } .atmos pre .tok-com { color: var(--text-subtle); font-style: italic; } .atmos pre .tok-fn { color: var(--accent); } /* Ventana de código con barra de título */ .atmos .code-window { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .atmos .code-window .code-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .atmos .code-window .code-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); } .atmos .code-window .code-bar .name { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); } .atmos .code-window pre { border: 0; border-radius: 0; margin: 0; } /* --------------------------------------------------------------------------- 10. INPUTS / FORMULARIOS --------------------------------------------------------------------------- */ .atmos .field { display: flex; flex-direction: column; gap: var(--space-2); } .atmos label { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); } .atmos .input, .atmos input[type="text"], .atmos input[type="email"], .atmos textarea { font-family: var(--font-body); font-size: var(--text-base); color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7em 0.9em; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .atmos .input::placeholder, .atmos input::placeholder, .atmos textarea::placeholder { color: var(--text-subtle); } .atmos .input:focus, .atmos input:focus, .atmos textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .atmos .input-group { display: flex; gap: var(--space-2); } .atmos .input-group .input { flex: 1; } /* --------------------------------------------------------------------------- 11. NAVEGACIÓN --------------------------------------------------------------------------- */ .atmos .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: oklch(0.205 0.008 280 / 0.7); border: 1px solid var(--border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .atmos.light .nav { background: oklch(1 0 0 / 0.7); } .atmos .nav-brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } .atmos .nav-brand .mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .atmos .nav-links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .atmos .nav-links a { color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; } .atmos .nav-links a:hover { color: var(--text); } /* --------------------------------------------------------------------------- 12. UTILIDADES --------------------------------------------------------------------------- */ .atmos .divider { height: 1px; background: var(--border); border: 0; margin: var(--space-6) 0; } .atmos .stack > * + * { margin-top: var(--space-4); } .atmos .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .atmos .section { padding-block: var(--space-9); } @media (prefers-reduced-motion: reduce) { .atmos *, .atmos *::before, .atmos *::after { transition: none !important; animation: none !important; } }