/* ===================================================================== * tp-core.css — design system de thunderplayer.app * * Diseño corporativo, limpio y minimalista. Reglas estrictas: * · Paleta: blanco + escala de grises + UN único acento rojo (#dc2626). * · Sin gradientes, sin glassmorphism, sin sombras de color, sin morado/ * azul/violeta como acento, sin fondos oscuros, sin emojis decorativos. * · Una sola familia tipográfica (Inter). Jerarquía por tamaño y peso, * no por color. Títulos 600, cuerpo 400. * · Espaciado generoso sobre escala 4/8/16/24/32. * · Radios 6–8px. Una sola elevación, sutil y neutra. * · El rojo solo en botones primarios, enlaces y algún detalle puntual. * Nunca como relleno de áreas grandes. * * Inter se carga vía de Google Fonts en los layouts; si no está * disponible, se cae a la fuente del sistema sin romper la jerarquía. * ===================================================================== */ /* ── Tokens ──────────────────────────────────────────────────────────── */ :root { /* superficies */ --tp-bg: #ffffff; --tp-bg-alt: #f7f8fa; --tp-surface: #f7f8fa; --tp-surface-2: #f1f2f4; --tp-surface-3: #e9eaee; --tp-border: #e4e7ec; --tp-border-soft: #eef0f3; --tp-border-strong: #d0d5dd; /* texto — jerarquía por peso/tamaño, color solo principal/secundario */ --tp-text: #1a1d21; --tp-text-mute: #667085; --tp-text-dim: #98a2b3; /* acento único (rojo) — uso moderado */ --tp-accent: #dc2626; --tp-accent-strong: #b91c1c; /* hover */ --tp-accent-deep: #b91c1c; --tp-accent-soft: #fef2f2; /* tinte rojo muy sutil, solo detalles puntuales */ --tp-accent-line: #f3c6c6; /* borde rojo sutil */ /* estados funcionales — SOLO área de cliente / checkout, apagados */ --tp-success: #067647; --tp-success-soft: #ecfdf3; --tp-success-line: #abefc6; --tp-warn: #b54708; --tp-warn-soft: #fffaeb; --tp-warn-line: #fedf89; --tp-danger: #b42318; --tp-danger-soft: #fef3f2; --tp-danger-line: #fecdca; /* tipografía — una sola familia */ --tp-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --tp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --tp-font-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* espaciado 4/8/16/24/32 (+ extensiones para secciones) */ --tp-space-1: 4px; --tp-space-2: 8px; --tp-space-3: 16px; --tp-space-4: 24px; --tp-space-5: 32px; --tp-space-6: 48px; --tp-space-7: 64px; --tp-space-8: 96px; /* radios moderados */ --tp-radius-sm: 6px; --tp-radius: 8px; --tp-radius-lg: 8px; --tp-radius-xl: 8px; /* una sola elevación, neutra */ --tp-shadow: 0 1px 3px rgba(0, 0, 0, .08); /* easings */ --tp-ease-out: cubic-bezier(.16, 1, .3, 1); --tp-ease-spring: cubic-bezier(.34, 1.56, .64, 1); color-scheme: light; } /* ── Modo oscuro ───────────────────────────────────────────────────────── * Mismo design system: neutros oscuros + el MISMO acento rojo (algo más * brillante para contraste sobre fondo oscuro). Sin degradados, jerarquía por * peso/tamaño, contraste AA en textos. Se activa con data-theme="dark" en * (lo fija un script temprano según preferencia guardada o del sistema). * ------------------------------------------------------------------------ */ :root[data-theme="dark"] { /* superficies — escalonado sutil de oscuros neutros (no negro puro) */ --tp-bg: #0f1216; --tp-bg-alt: #161a20; --tp-surface: #161a20; --tp-surface-2: #1d222a; --tp-surface-3: #262c36; --tp-border: #2a313c; --tp-border-soft: #20262e; --tp-border-strong: #3a4350; /* texto — alto contraste, jerarquía por peso/tamaño */ --tp-text: #e6e9ee; --tp-text-mute: #9aa4b2; --tp-text-dim: #6b7480; /* acento rojo — legible sobre oscuro; hover se aclara */ --tp-accent: #ef4444; --tp-accent-strong: #f87171; --tp-accent-deep: #dc2626; --tp-accent-soft: #241416; /* tinte rojo muy oscuro, solo detalles */ --tp-accent-line: #4a2526; /* estados funcionales — tintes oscuros con buen contraste */ --tp-success: #4ade80; --tp-success-soft: #0f2a1d; --tp-success-line: #1f5138; --tp-warn: #fbbf4d; --tp-warn-soft: #2a2012; --tp-warn-line: #5c4420; --tp-danger: #f87171; --tp-danger-soft: #2a1514; --tp-danger-line: #5b2622; /* elevación: sobre oscuro las sombras se apoyan en negro + el borde */ --tp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); color-scheme: dark; } /* ── Reset moderno ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } body { margin: 0; background: var(--tp-bg); color: var(--tp-text); font-family: var(--tp-font-body); font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: var(--tp-accent); text-decoration: none; transition: color .15s var(--tp-ease-out); } a:hover { color: var(--tp-accent-strong); } ::selection { background: rgba(220, 38, 38, .12); color: var(--tp-text); } /* ── Botón de cambio de tema (claro/oscuro) ──────────────────────────── */ .tp-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-bg); color: var(--tp-text-mute); transition: border-color .15s var(--tp-ease-out), color .15s var(--tp-ease-out), background .15s var(--tp-ease-out); } .tp-theme-toggle:hover { border-color: var(--tp-border-strong); color: var(--tp-text); } .tp-theme-toggle svg { width: 18px; height: 18px; } /* Por defecto (claro) se ve la luna; en oscuro, el sol. */ .tp-theme-toggle .tp-ic-sun { display: none; } .tp-theme-toggle .tp-ic-moon { display: block; } :root[data-theme="dark"] .tp-theme-toggle .tp-ic-sun { display: block; } :root[data-theme="dark"] .tp-theme-toggle .tp-ic-moon { display: none; } /* ── Tipografía ─────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--tp-font-display); font-weight: 600; letter-spacing: -.018em; line-height: 1.18; color: var(--tp-text); } h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); letter-spacing: -.025em; line-height: 1.1; } h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); letter-spacing: -.022em; } h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); letter-spacing: -.018em; } h4 { font-size: 1.15rem; } p { margin: 0 0 1rem; } .tp-mono { font-family: var(--tp-font-mono); font-variant-numeric: tabular-nums; } .tp-eyebrow { display: inline-block; font-family: var(--tp-font-body); font-size: .8rem; font-weight: 600; color: var(--tp-text-mute); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--tp-space-3); } .tp-lead { font-size: 1.125rem; color: var(--tp-text-mute); max-width: 58ch; line-height: 1.6; } /* ── Container & secciones ──────────────────────────────────────────── */ .tp-container { width: 100%; max-width: 1200px; padding-inline: clamp(1.25rem, 4vw, 2.5rem); margin-inline: auto; } .tp-section { padding-block: clamp(4rem, 8vw, 7rem); } .tp-section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); } /* ── Botones ─────────────────────────────────────────────────────────── */ .tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.25rem; border-radius: var(--tp-radius-sm); font-family: var(--tp-font-body); font-weight: 600; font-size: .95rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background .15s var(--tp-ease-out), border-color .15s var(--tp-ease-out), color .15s var(--tp-ease-out); white-space: nowrap; } /* primario: el único uso destacado del rojo */ .tp-btn--primary { background: var(--tp-accent); color: #fff; } .tp-btn--primary:hover { background: var(--tp-accent-strong); color: #fff; } /* secundario: gris neutro */ .tp-btn--secondary { background: var(--tp-bg); color: var(--tp-text); border-color: var(--tp-border); } .tp-btn--secondary:hover { background: var(--tp-surface); border-color: var(--tp-border-strong); } /* ghost: solo texto */ .tp-btn--ghost { background: transparent; color: var(--tp-text); border-color: transparent; } .tp-btn--ghost:hover { background: var(--tp-surface); color: var(--tp-text); } .tp-btn--lg { padding: .9rem 1.6rem; font-size: 1rem; } .tp-btn--sm { padding: .55rem 1rem; font-size: .875rem; } /* ── Cards ───────────────────────────────────────────────────────────── */ .tp-card { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: var(--tp-space-5); transition: border-color .15s var(--tp-ease-out); } .tp-card--hover:hover { border-color: var(--tp-border-strong); } /* ── Chip / pill (neutro) ───────────────────────────────────────────── */ .tp-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; background: var(--tp-surface); color: var(--tp-text-mute); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); font-size: .8rem; font-weight: 600; letter-spacing: .01em; } /* ── Divider sutil ───────────────────────────────────────────────────── */ .tp-divider { height: 1px; background: var(--tp-border); margin: var(--tp-space-6) 0; border: 0; } /* ── Utility ────────────────────────────────────────────────────────── */ .tp-mute { color: var(--tp-text-mute); } .tp-dim { color: var(--tp-text-dim); } .tp-grid { display: grid; gap: var(--tp-space-4); } .tp-hide-sm { display: initial; } @media (max-width: 768px) { .tp-hide-sm { display: none; } } /* ── Focus visible (accesibilidad) ───────────────────────────────────── */ :focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; border-radius: 4px; } /* ── Scrollbar discreto ─────────────────────────────────────────────── */ @media (pointer: fine) { ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--tp-bg-alt); } ::-webkit-scrollbar-thumb { background: var(--tp-surface-3); border-radius: 999px; border: 3px solid var(--tp-bg-alt); } ::-webkit-scrollbar-thumb:hover { background: var(--tp-border-strong); } }