/* global/glaz.css — sistema de diseño Glaz * * CONCEPTO: глаз = ojo. Glaz es el lente que le ponés a tu sitio. * * Este archivo es SOLO el sistema (tokens + recetas). No pinta ninguna * pantalla. Se carga después de global.css para pisar lo heredado. * * ── Dónde va el color ────────────────────────────────────────────────── * El color es vivo y vive en la ESCENA: el degradé del fondo y los objetos * de vidrio que flotan. La interfaz encima —texto, botones, tarjetas— se * mantiene blanca y neutra, y toma el color prestado por refracción. * Eso es lo que separa un mockup de glassmorphism de un arcoíris: el color * está atrás del vidrio, nunca adentro de la tipografía ni de los botones. * * ── Las cinco capas del vidrio templado ──────────────────────────────── * El vidrio templado no es transparente: es LECHOSO. Con menos de esto * queda un rectángulo translúcido, que es lo que hace todo el mundo. * * 1. LECHE blanco al 10-14% — el cuerpo del vidrio, no un velo * 2. DESENFOQUE blur fuerte + saturate + brightness (lo de atrás) * 3. CANTO inset arriba blanco 38% — el filo que atrapa la luz * 4. BISEL inset abajo oscuro — el espesor de la lámina * 5. GRANO ruido tenue encima — esto es lo esmerilado * * El grano además mata el banding que deja el blur en gradientes grandes. * * ── Dónde SÍ y dónde NO ──────────────────────────────────────────────── * El vidrio es del PANEL (marca, HUD del visor, navegación). NO va en las * pantallas de datos —tablas, campos, logs— donde el contraste manda, y NO * se le enseña al generador: los sitios de los clientes se miden con * PageSpeed y backdrop-filter es caro. Vender velocidad y generar blur * sería pegarnos un tiro en el pie. */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;450;500;600&display=swap'); :root { /* ── Base ─────────────────────────────────────────────────────────── */ --gz-void: #0A0523; --gz-deep: #140A38; --gz-deep-2: #1D1050; /* ── Escena: saturados, para el fondo y los objetos ───────────────── */ --gz-violet: #7B3FF2; --gz-indigo: #3D53E8; --gz-magenta: #D93A9B; --gz-cyan: #22B8D4; --gz-rose: #F2609A; /* ── Luz ──────────────────────────────────────────────────────────── */ --gz-light: #FFFFFF; --gz-light-2: rgba(255, 255, 255, .72); --gz-light-3: rgba(255, 255, 255, .48); --gz-light-4: rgba(255, 255, 255, .28); /* ── Receta de vidrio (una sola fuente de verdad) ──────────────────── */ --gz-glass-face: linear-gradient(152deg, rgba(255,255,255,.16), rgba(255,255,255,.06) 55%, rgba(255,255,255,.10)); --gz-glass-edge: rgba(255, 255, 255, .19); --gz-blur: blur(40px) saturate(135%) brightness(1.06); --gz-blur-soft: blur(22px) saturate(125%) brightness(1.04); /* Canto arriba + bisel abajo + sombra proyectada: juntos son los que dan la sensación de que la lámina tiene ESPESOR y está levantada. */ --gz-lift: 0 32px 80px -30px rgba(6, 2, 24, .9), 0 2px 10px -4px rgba(6, 2, 24, .55), inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(0, 0, 0, .22); --gz-lift-sm: 0 16px 38px -20px rgba(6, 2, 24, .8), inset 0 1px 1px rgba(255, 255, 255, .28), inset 0 -1px 1px rgba(0, 0, 0, .18); /* Grano fino y tenue: textura de vidrio arenado, no foto con ruido. */ --gz-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E"); /* ── Tipografía ───────────────────────────────────────────────────── */ /* Inter Tight para títulos: grotesca suiza, sin gestos simpáticos. Inter para lectura. Mono sólo donde hay que leer un dato literal. */ --gz-font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; --gz-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --gz-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Radios ───────────────────────────────────────────────────────── */ --gz-r-sm: 10px; --gz-r: 16px; --gz-r-lg: 22px; --gz-r-xl: 30px; } /* ── .gz-glass — la lámina ─────────────────────────────────────────────── */ .gz-glass { position: relative; background: var(--gz-glass-face); -webkit-backdrop-filter: var(--gz-blur); backdrop-filter: var(--gz-blur); border: 1px solid var(--gz-glass-edge); border-radius: var(--gz-r-lg); box-shadow: var(--gz-lift); } /* El grano va en ::after para no comerle el ::before a nadie. */ .gz-glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--gz-grain); mix-blend-mode: overlay; opacity: .38; pointer-events: none; } .gz-glass--soft { -webkit-backdrop-filter: var(--gz-blur-soft); backdrop-filter: var(--gz-blur-soft); background: linear-gradient(152deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 55%, rgba(255,255,255,.065)); border-color: rgba(255, 255, 255, .13); box-shadow: var(--gz-lift-sm); border-radius: var(--gz-r); } /* Sin backdrop-filter (Firefox viejo, ahorro de batería) el panel quedaría transparente y el texto ilegible. Se cae a opaco, que es feo pero se lee. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .gz-glass, .gz-glass--soft { background: linear-gradient(152deg, rgba(45, 26, 96, .97), rgba(20, 10, 56, .97)); } } /* ── Halos: lo que el vidrio tiene para refractar ──────────────────────── */ .gz-aura { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; } /* ── Botones ───────────────────────────────────────────────────────────── */ .gz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-family: var(--gz-font); font-size: 14px; font-weight: 500; letter-spacing: -.006em; color: var(--gz-light); background: rgba(255, 255, 255, .055); -webkit-backdrop-filter: var(--gz-blur-soft); backdrop-filter: var(--gz-blur-soft); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2,.8,.3,1); } .gz-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255,255,255,.22); } .gz-btn:active { transform: translateY(1px); } /* El primario es luz sólida, no vidrio. Si todo es translúcido no hay jerarquía y no se sabe dónde hacer click. Blanco sobre grafito es lo más caro que se puede ver con cero color. */ .gz-btn--primary { border-color: transparent; color: #12063A; background: linear-gradient(180deg, #FFFFFF, #E7E3F5); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, 1); font-weight: 600; } .gz-btn--primary:hover { background: linear-gradient(180deg, #FFFFFF, #F4F1FB); border-color: transparent; } /* ── Chip ──────────────────────────────────────────────────────────────── */ .gz-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: var(--gz-blur-soft); backdrop-filter: var(--gz-blur-soft); font-size: 12px; font-weight: 450; letter-spacing: .01em; color: var(--gz-light-2); } /* ── Foco visible: sobre vidrio el outline del sistema desaparece ──────── */ .gz-btn:focus-visible, .gz-chip:focus-visible, .gz-glass :focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .gz-btn { transition: none; } }