/* ============================================================================ DealTunnel · Beyond Trade Shows v2 · FOUNDATION Capa de fundacion de la landing de scroll dirigido. Gobierna: /Users/nicolascalderon/dev/Void/brand/DESIGN.md v1.5, seccion 12. Si este archivo y la spec discrepan, manda la spec y se corrige este archivo. Autocontenido: cero @import, cero red. Las webfonts Geist las carga el del index.html (unica dependencia de red permitida por DIRECCION.md); aca solo viven los stacks con fallback real. Contrato del constructor en docs/foundation.md. Reglas duras resumidas: radio 0, hairline 1px, cero sombras, un solo acento por pantalla, grain 3%, todo numero de negocio en mono, sin raya larga U+2014, sin azul, sin rojo. La UNICA excepcion de profundidad vive encapsulada en .depth-scope (bloque 10). ========================================================================== */ /* ============================================================================ 1. RESET MINIMO + COLOR-SCHEME ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; } ol, ul { list-style: none; } body { background: var(--canvas); color: var(--text); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; border-radius: var(--radius); } button { background: none; border: 0; cursor: pointer; } /* Foco visible sin sombra: hairline promovido a acento (DESIGN.md 4.2). */ :focus-visible { outline: var(--border) solid var(--acc-text); outline-offset: 2px; } /* ============================================================================ 2. TOKENS · TEMA CLARO (base, primario por regla de marca) Ningun color tiene su unica definicion dentro de un media query. Los tres estados de tema estan en los bloques 2, 2B y 2C. ========================================================================== */ :root { /* --- Color: superficies y tinta (DESIGN.md 2) --- */ --canvas: #FFFFFF; /* fondo dominante */ --surface: #F6F7F5; /* niebla: cards, secciones alternas */ --surface-card: #FFFFFF; /* card sobre niebla */ --text: #101112; /* tinta */ --grey: #6B6F6B; /* labels, metadatos, TODO inactivo */ --dot-off: #E1E4E1; /* organismos no descubiertos */ --nav-bg: rgba(255, 255, 255, 0.90); /* --- Color: el par verde. UN acento en dos intensidades (DESIGN.md 2) --- */ --acc-fill: #05DF72; /* SOLO relleno en claro */ --acc-text: #067647; /* SOLO texto en claro */ --hl-bg: #05DF72; /* highlight: bloque electrico */ --hl-text: #101112; /* tinta encima del bloque */ /* --- Hairlines: token propio por tema (DESIGN.md 2 y 4.2) --- */ --hairline: rgba(16, 17, 18, 0.14); --hairline-soft: rgba(16, 17, 18, 0.07); --hairline-ink: #101112; /* jerarquia: linea a tinta plena */ --hairline-acc: #067647; /* jerarquia: linea a verde de texto */ /* --- Tipografia: familias con fallback real (DESIGN.md 3) --- */ --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'Geist Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* --- Pesos (DESIGN.md 2) --- */ --w-body: 400; --w-mid: 500; --w-head: 600; /* --- Rampa fija de la spec, conservada literal para no derivar --- */ --fs-display: 4.5rem; /* 72px */ --fs-h1: 3rem; /* 48px */ --fs-body-lg: 1.25rem; /* 20px */ --fs-small: 0.9375rem; /* 15px */ --fs-mono: 0.875rem; /* 14px */ --fs-label: 0.75rem; /* 12px */ --fs-chip: 0.625rem; /* 10px */ /* --- Rampa fluida de la landing (DECISION PROPIA, ver foundation.md). Cada tope maximo coincide con un valor de la spec salvo display-xl y stat, que la landing necesita a escala de viewport (DIRECCION.md, movimientos 1 y 6). --- */ --fs-display-xl: clamp(3.25rem, 11.5vw, 11rem); /* 52 -> 176px */ --fs-display-l: clamp(2.5rem, 7.6vw, 6.5rem); /* 40 -> 104px */ --fs-display-m: clamp(2rem, 5.2vw, 4.5rem); /* 32 -> 72px = --fs-display */ --fs-h2: clamp(1.625rem, 3.2vw, 2.25rem); /* 26 -> 36px */ --fs-h3: clamp(1.25rem, 1.9vw, 1.5rem); /* 20 -> 24px */ --fs-body: clamp(1rem, 1.15vw, 1.0625rem); /* 16 -> 17px */ --fs-caption: clamp(0.875rem, 1vw, 0.9375rem); /* 14 -> 15px = --fs-small */ --fs-eyebrow: clamp(0.625rem, 0.8vw, 0.75rem); /* 10 -> 12px = --fs-label */ --fs-stat: clamp(2.25rem, 6.5vw, 5.5rem); /* 36 -> 88px */ /* --- Tracking y line-height (DESIGN.md 2 y 3) --- */ --track-display: -0.035em; /* display gigante: aprieta mas que un h2 */ --track-head: -0.025em; --track-label: 0.15em; /* mono uppercase, rango 0.14-0.16em */ --track-eyebrow: 0.16em; --lh-display: 0.95; --lh-head: 1.05; --lh-body: 1.65; --lh-mono: 1.4; /* --- Geometria (DESIGN.md 4) --- */ --radius: 0; /* radio 0 en TODO. Pills prohibidos. */ --border: 1px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --scan-thick: 2px; --scan-stat: 24px; --scan-head: 60px; --scan-close: 80px; --seal-rotate: -7deg; --measure: 68ch; /* tope de prosa */ --gutter: var(--sp-6); --wrap: 1240px; /* --- Hairline retina: 1 pixel de dispositivo, no 1 pixel CSS. Ver bloque 6 y la nota de 3dppx. --- */ --hairline-w: 1px; /* --- Motion (DESIGN.md 4.5: fade, nunca rebote) --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* curva de marca */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entradas largas de scroll */ --ease-io: cubic-bezier(0.4, 0, 0.2, 1); /* cambios de estado */ --ease-lin: linear; /* progreso ligado a scroll */ --dur: 420ms; /* duracion de marca */ --dur-fast: 180ms; /* hover, foco, toggle */ --dur-slow: 700ms; /* revelados de seccion */ --dur-scene: 1200ms; /* transicion de estadio en la secuencia pineada */ --delay-step: 90ms; /* escalonado entre hermanos */ /* --- Grain 3% (DESIGN.md 5, obligatorio en ambos modos) --- */ --grain-opacity: 0.03; --grain-tile: 160px; --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* --- Glow: PROHIBIDO en claro (DESIGN.md 5). Token presente y neutralizado para que la regla sea legible en el codigo, no una omision. --- */ --glow: transparent; } /* ============================================================================ 2B. TOKENS · TEMA OSCURO POR PREFERENCIA DEL SISTEMA Guardado con :not([data-theme="light"]) para que el toggle explicito gane. Solo redefine color. Ninguna medida, curva ni tamano vive aca. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #0C0C0E; --surface: #131316; /* carbon */ --surface-card: #18181C; --text: #E8E4DC; /* hueso */ --grey: #9A9690; --dot-off: #222228; --nav-bg: rgba(12, 12, 14, 0.92); /* En noche el par colapsa: el electrico hace texto y relleno. El verde profundo #067647 NO se usa sobre noche. */ --acc-fill: #05DF72; --acc-text: #05DF72; --hl-bg: transparent; /* highlight noche: color sin bloque */ --hl-text: #05DF72; --hairline: rgba(232, 228, 220, 0.14); --hairline-soft: rgba(232, 228, 220, 0.08); --hairline-ink: #E8E4DC; --hairline-acc: #05DF72; /* Unico glow permitido: radial verde sutil, maximo uno por pieza. */ --glow: rgba(5, 223, 114, 0.06); } } /* ============================================================================ 2C. TOKENS · TEMA OSCURO POR ELECCION EXPLICITA (toggle persistido) Valores identicos a 2B. Duplicados a proposito: la spec exige que el toggle gane en ambas direcciones y que ningun color se defina solo en un media query. ========================================================================== */ :root[data-theme="dark"] { --canvas: #0C0C0E; --surface: #131316; --surface-card: #18181C; --text: #E8E4DC; --grey: #9A9690; --dot-off: #222228; --nav-bg: rgba(12, 12, 14, 0.92); --acc-fill: #05DF72; --acc-text: #05DF72; --hl-bg: transparent; --hl-text: #05DF72; --hairline: rgba(232, 228, 220, 0.14); --hairline-soft: rgba(232, 228, 220, 0.08); --hairline-ink: #E8E4DC; --hairline-acc: #05DF72; --glow: rgba(5, 223, 114, 0.06); } /* ============================================================================ 3. LA LEY DEL PAR VERDE Y LA CUENTA DE CONTRASTE Formula WCAG 2.1 relative luminance, sRGB. Todo par de texto sobre fondo que este archivo define llega o supera 4.5:1. Verificado por calculo, no a ojo. TEMA CLARO #101112 tinta / #FFFFFF canvas = 18.90:1 PASA #101112 tinta / #F6F7F5 niebla = 17.59:1 PASA #6B6F6B gris / #FFFFFF canvas = 5.11:1 PASA #6B6F6B gris / #F6F7F5 niebla = 4.75:1 PASA #067647 acento / #FFFFFF canvas = 5.69:1 PASA (la spec anota 5.7:1) #067647 acento / #F6F7F5 niebla = 5.30:1 PASA #101112 tinta / #05DF72 highlight= 10.63:1 PASA #05DF72 como TEXTO sobre #FFFFFF = 1.78:1 FALLA -> PROHIBIDO POR SPEC. Por eso --acc-fill nunca aparece en una declaracion `color:` en claro. TEMA OSCURO #E8E4DC hueso / #0C0C0E canvas = 15.41:1 PASA #E8E4DC hueso / #131316 carbon = 14.63:1 PASA #9A9690 gris / #0C0C0E canvas = 6.64:1 PASA #9A9690 gris / #131316 carbon = 6.30:1 PASA #05DF72 acento / #0C0C0E canvas = 10.99:1 PASA #05DF72 acento / #131316 carbon = 10.42:1 PASA .depth-scope (excepcion del bloque 10): la cuenta completa en el bloque 10. ========================================================================== */ /* ============================================================================ 4. TIPOGRAFIA · LAS DOS VOCES Voz editorial (Geist): titulares 600, sentence case, tracking negativo. Voz de dato (Geist Mono): TODO numero de negocio, ID, %, fuente, timestamp. Regla dura: ningun numero de negocio se renderiza en Geist. ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--sans); font-weight: var(--w-head); letter-spacing: var(--track-head); line-height: var(--lh-head); text-transform: none; /* uppercase en headlines: prohibido */ } p { max-width: var(--measure); } /* --- Escala editorial --- */ .t-display-xl, .t-display-l, .t-display-m { font-family: var(--sans); font-weight: var(--w-head); letter-spacing: var(--track-display); line-height: var(--lh-display); text-wrap: balance; } .t-display-xl { font-size: var(--fs-display-xl); } .t-display-l { font-size: var(--fs-display-l); } .t-display-m { font-size: var(--fs-display-m); letter-spacing: var(--track-head); } .t-h2 { font-family: var(--sans); font-weight: var(--w-head); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--track-head); text-wrap: balance; } .t-h3 { font-family: var(--sans); font-weight: var(--w-head); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--track-head); } .t-body { font-family: var(--sans); font-weight: var(--w-body); font-size: var(--fs-body); line-height: var(--lh-body); } .t-body-lg { font-family: var(--sans); font-weight: var(--w-body); font-size: var(--fs-body-lg); line-height: 1.55; } .t-caption { font-family: var(--sans); font-weight: var(--w-body); font-size: var(--fs-caption); line-height: 1.5; color: var(--grey); } /* --- Voz de dato --- */ .t-mono, .mono { font-family: var(--mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } /* Eyebrow: label mono uppercase con letterspacing amplio, tamano chico. Es el unico uppercase permitido del sistema. */ .t-eyebrow { font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: var(--w-mid); text-transform: uppercase; letter-spacing: var(--track-eyebrow); line-height: 1.4; color: var(--grey); display: inline-flex; align-items: center; gap: var(--sp-2); } .t-eyebrow .idx { color: var(--acc-text); } .t-eyebrow .dot { width: 6px; height: 6px; flex-shrink: 0; background: var(--acc-fill); /* relleno, no texto: legal en claro */ } /* Numeral de stat: el lugar natural del verde. Profundo en claro, electrico en noche. Siempre mono. */ .t-stat { font-family: var(--mono); font-size: var(--fs-stat); font-weight: var(--w-mid); line-height: 1; letter-spacing: -0.02em; color: var(--acc-text); font-variant-numeric: tabular-nums; } /* Highlight: el mecanismo de enfasis. Reemplaza bold e italic. Claro: bloque de relleno electrico con tinta encima. Noche: la frase en electrico, sin bloque. */ .hl { background: var(--hl-bg); color: var(--hl-text); padding: 0 0.16em; border-radius: var(--radius); } /* Enlaces: verde de texto, subrayado por hairline. */ a { color: var(--acc-text); text-decoration: none; border-bottom: var(--border) solid var(--hairline); transition: border-color var(--dur-fast) var(--ease-io); } a:hover { border-bottom-color: var(--acc-text); } /* Scan-line: regla verde plana, recta, sin remates. */ .scan { display: block; border: 0; height: var(--scan-thick); background: var(--acc-fill); width: var(--scan-head); } .scan--stat { width: var(--scan-stat); } .scan--close { width: var(--scan-close); } /* ============================================================================ 5. SUPERFICIE INVERSA (movimiento 5 de DIRECCION.md: el flip de tema) No inventa una paleta tercera: adopta literalmente la paleta del otro modo, con los mismos hexes ya verificados en el bloque 3. Ningun par nuevo. ========================================================================== */ [data-surface="inverse"] { --canvas: #0C0C0E; --surface: #131316; --surface-card: #18181C; --text: #E8E4DC; --grey: #9A9690; --dot-off: #222228; --acc-fill: #05DF72; --acc-text: #05DF72; --hl-bg: transparent; --hl-text: #05DF72; --hairline: rgba(232, 228, 220, 0.14); --hairline-soft: rgba(232, 228, 220, 0.08); --hairline-ink: #E8E4DC; --hairline-acc: #05DF72; --glow: rgba(5, 223, 114, 0.06); background: var(--canvas); color: var(--text); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-surface="inverse"] { --canvas: #FFFFFF; --surface: #F6F7F5; --surface-card: #FFFFFF; --text: #101112; --grey: #6B6F6B; --dot-off: #E1E4E1; --acc-fill: #05DF72; --acc-text: #067647; --hl-bg: #05DF72; --hl-text: #101112; --hairline: rgba(16, 17, 18, 0.14); --hairline-soft: rgba(16, 17, 18, 0.07); --hairline-ink: #101112; --hairline-acc: #067647; --glow: transparent; color-scheme: light; } } :root[data-theme="dark"] [data-surface="inverse"] { --canvas: #FFFFFF; --surface: #F6F7F5; --surface-card: #FFFFFF; --text: #101112; --grey: #6B6F6B; --dot-off: #E1E4E1; --acc-fill: #05DF72; --acc-text: #067647; --hl-bg: #05DF72; --hl-text: #101112; --hairline: rgba(16, 17, 18, 0.14); --hairline-soft: rgba(16, 17, 18, 0.07); --hairline-ink: #101112; --hairline-acc: #067647; --glow: transparent; color-scheme: light; } /* ============================================================================ 6. SISTEMA DE HAIRLINES La spec pide 1px universal. En retina un border de 1px CSS son 2 o 3 pixeles de dispositivo: se lee como regla, no como hairline. Los separadores decorativos bajan a 0.5px a partir de 2dppx, que el navegador resuelve como una sola fila de pixeles fisicos. Piso duro: 0.5px. NUNCA menos. A 3dppx un 0.333px se redondea a cero en varios motores y la linea desaparece; 0.5px a 3dppx da 1.5 device px, que se redondea a 1 o 2 y siempre se ve. Los BORDES REALES (cards, inputs, botones, foco) se quedan en --border 1px. Solo los separadores usan --hairline-w. Un input con borde sub-pixel pierde el anillo de foco en Windows a 125%. ========================================================================== */ @media (min-resolution: 2dppx) { :root { --hairline-w: 0.5px; } } @media (-webkit-min-device-pixel-ratio: 2) { :root { --hairline-w: 0.5px; } } .hl-t { border-top: var(--hairline-w) solid var(--hairline); } .hl-b { border-bottom: var(--hairline-w) solid var(--hairline); } .hl-l { border-left: var(--hairline-w) solid var(--hairline); } .hl-r { border-right: var(--hairline-w) solid var(--hairline); } .hl-all { border: var(--hairline-w) solid var(--hairline); } .hl-soft { border-color: var(--hairline-soft); } /* Jerarquia subiendo la linea, nunca engrosandola (DESIGN.md 4.2). */ .hl-ink { border-color: var(--hairline-ink); } .hl-acc { border-color: var(--hairline-acc); } /* Regla horizontal de seccion. */ .rule { border: 0; height: 0; border-top: var(--hairline-w) solid var(--hairline); margin: 0; } /* Bordes reales: 1px CSS entero, sin sub-pixel. */ .box { border: var(--border) solid var(--hairline); border-radius: var(--radius); background: var(--surface-card); } /* ============================================================================ 7. GRAIN 3% (obligatorio en ambos modos) Dos formas: la capa global de body y una clase reutilizable para cualquier contenedor que la necesite por encima de un fondo propio. Sin red: feTurbulence inline en data URI. ========================================================================== */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: var(--grain-opacity); background-image: var(--grain-url); } .grain { position: relative; isolation: isolate; } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--grain-opacity); background-image: var(--grain-url); background-size: var(--grain-tile) var(--grain-tile); } /* Glow radial verde: solo en noche, maximo uno por pieza. En claro --glow es transparent, asi que esta clase no pinta nada. */ .glow-once { position: relative; } .glow-once::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 40%, var(--glow), transparent 70%); } /* ============================================================================ 8. GEOMETRIA: RADIO 0 Y CERO SOMBRAS Barrido defensivo. La profundidad se consigue por salto de superficie mas hairline, nunca por sombra. Unica excepcion: bloque 10. ========================================================================== */ *:where(:not(.depth-scope, .depth-scope *)) { border-radius: var(--radius); box-shadow: none; text-shadow: none; } /* :where() mantiene el barrido en especificidad 0,0,0: cualquier regla real del constructor lo gana sin recurrir a !important. */ /* Las tres unicas curvas permitidas (DESIGN.md 4.4). Se declaran nombradas para que cualquier otro border-radius del sitio sea, por definicion, un bug. */ .curve-seal { border-radius: 50%; transform: rotate(var(--seal-rotate)); } .curve-dot { border-radius: 50%; } .curve-node { border-radius: 50%; } /* ============================================================================ 9. MOTION Los elementos aparecen por fade. Nunca rebotan. Sin curvas back/elastic. ========================================================================== */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } .reveal--d1 { transition-delay: calc(var(--delay-step) * 1); } .reveal--d2 { transition-delay: calc(var(--delay-step) * 2); } .reveal--d3 { transition-delay: calc(var(--delay-step) * 3); } .reveal--d4 { transition-delay: calc(var(--delay-step) * 4); } .fade-in { animation: dt-fade-in var(--dur) var(--ease) both; } @keyframes dt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* --- Anulacion total por preferencia del usuario --- La pagina tiene que leerse completa y en orden sin una sola animacion, sin un solo pineo (DIRECCION.md, restricciones tecnicas). --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; } /* Todo pineo se desarma: el constructor NO debe crear sticky/scroll-driven fuera de estas clases, para que esta anulacion las alcance a todas. */ .pin, .pin-stage { position: static !important; height: auto !important; } .pin-scene { position: static !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } /* La excepcion de profundidad no se anima bajo reduced-motion. */ .depth-scope, .depth-scope * { animation: none !important; transform: none !important; } } /* ============================================================================ 10. LA EXCEPCION DE PROFUNDIDAD · .depth-scope ---------------------------------------------------------------------------- ESTADO: excepcion aprobada explicitamente por Nicolas. Fuente: DIRECCION.md, "Decisiones tomadas por Nicolas", punto 1. Alcance: SOLO el bloque isometrico de estratos del hero y el timeline SVG dibujado. Nada mas del sitio entra aqui. Que se levanta dentro de .depth-scope: - shading tonal por estrato (los tokens --stratum-1..5) - gradientes lineales sutiles para que una cara se lea como cara - una sombra de contacto, plana y sin blur de halo, para asentar el objeto Que SIGUE PROHIBIDO dentro de .depth-scope: - radio distinto de 0 en cualquier cara o panel - un segundo acento: el par verde sigue siendo el unico color - gradiente multicolor, o gradiente que cruce de un hue a otro - verde electrico como TEXTO en claro (sigue dando 1.78:1) - sombra difusa tipo elevacion de material, glow en claro, bisel, emboss - texto de negocio fuera de mono La excepcion es de PROFUNDIDAD, no de paleta ni de geometria. CUENTA DE CONTRASTE DENTRO DE LA EXCEPCION (WCAG 2.1, sRGB) Claro, estratos #F6F7F5 -> #DADBD6: #101112 tinta / #DADBD6 estrato mas profundo = 13.58:1 PASA #101112 tinta / #E1E2DE = 14.52:1 PASA #565A56 depth-label / #DADBD6 = 5.04:1 PASA #565A56 depth-label / #F6F7F5 = 6.53:1 PASA #0A5C38 depth-acc / #DADBD6 = 5.80:1 PASA #0A5C38 depth-acc / #F6F7F5 = 7.51:1 PASA #0A5C38 depth-acc / #FFFFFF = 8.07:1 PASA Por que el gris y el verde cambian de valor solo aqui: sobre el estrato profundo el gris de marca #6B6F6B da 3.67:1 y el verde #067647 da 4.09:1. Los dos FALLAN. --depth-label y --depth-acc son los sustitutos que pasan. #0A5C38 no es un token inventado: es el mismo verde del tema de impresion del expediente, DESIGN.md 8B.7 / tokens/dossier.css. Noche, estratos #121215 -> #26262D: #E8E4DC hueso / #26262D = 11.85:1 PASA #E8E4DC hueso / #121215 = 14.75:1 PASA #9A9690 gris / #26262D = 5.11:1 PASA #9A9690 gris / #121215 = 6.36:1 PASA #05DF72 acento / #26262D = 8.45:1 PASA #05DF72 acento / #121215 = 10.51:1 PASA En noche no hace falta sustituir nada: los tokens de marca pasan tal cual. ========================================================================== */ .depth-scope { /* Estratos claros: la superficie (la feria) arriba, el registro debajo. */ --stratum-1: #F6F7F5; --stratum-2: #EFF0ED; --stratum-3: #E8E9E5; --stratum-4: #E1E2DE; --stratum-5: #DADBD6; --stratum-edge: rgba(16, 17, 18, 0.20); /* canto entre estratos */ --stratum-dot: #D6D9D5; /* particula dentro del estrato */ --sky: #FFFFFF; /* el aire sobre la superficie */ /* Sustitutos de texto que pasan 4.5:1 sobre el estrato profundo. */ --depth-label: #565A56; --depth-acc: #0A5C38; /* Caras del isometrico. Tres tonos de la MISMA tinta: es shading, no color. */ --face-top: rgba(255, 255, 255, 0.00); --face-left: rgba(16, 17, 18, 0.045); --face-right: rgba(16, 17, 18, 0.085); /* Gradiente sutil de cara. Un solo hue, sin cruce de color. */ --grad-face: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.00) 62%); --grad-depth: linear-gradient(180deg, rgba(16, 17, 18, 0.00) 0%, rgba(16, 17, 18, 0.07) 100%); /* Sombra de contacto: plana, corta, sin halo. Unica sombra del sitio. */ --contact-shadow: 0 1px 0 rgba(16, 17, 18, 0.16); isolation: isolate; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .depth-scope { --stratum-1: #121215; --stratum-2: #17171B; --stratum-3: #1C1C21; --stratum-4: #212127; --stratum-5: #26262D; --stratum-edge: rgba(232, 228, 220, 0.22); --stratum-dot: #2A2A31; --sky: #0C0C0E; --depth-label: #9A9690; /* el gris de marca ya pasa en noche */ --depth-acc: #05DF72; /* el electrico ya pasa en noche */ --face-top: rgba(255, 255, 255, 0.00); --face-left: rgba(232, 228, 220, 0.035); --face-right: rgba(0, 0, 0, 0.22); --grad-face: linear-gradient(160deg, rgba(232, 228, 220, 0.10) 0%, rgba(232, 228, 220, 0.00) 62%); --grad-depth: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.28) 100%); --contact-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] .depth-scope { --stratum-1: #121215; --stratum-2: #17171B; --stratum-3: #1C1C21; --stratum-4: #212127; --stratum-5: #26262D; --stratum-edge: rgba(232, 228, 220, 0.22); --stratum-dot: #2A2A31; --sky: #0C0C0E; --depth-label: #9A9690; --depth-acc: #05DF72; --face-top: rgba(255, 255, 255, 0.00); --face-left: rgba(232, 228, 220, 0.035); --face-right: rgba(0, 0, 0, 0.22); --grad-face: linear-gradient(160deg, rgba(232, 228, 220, 0.10) 0%, rgba(232, 228, 220, 0.00) 62%); --grad-depth: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.28) 100%); --contact-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } /* --- Primitivas de la excepcion. Solo estas cinco clases pueden pintar shading, gradiente o sombra en todo el sitio. --- */ .depth-scope .stratum { border-radius: 0; /* radio 0 sigue vigente */ border-top: var(--border) solid var(--stratum-edge); background-color: var(--stratum-1); } .depth-scope .stratum--1 { background-color: var(--stratum-1); } .depth-scope .stratum--2 { background-color: var(--stratum-2); } .depth-scope .stratum--3 { background-color: var(--stratum-3); } .depth-scope .stratum--4 { background-color: var(--stratum-4); } .depth-scope .stratum--5 { background-color: var(--stratum-5); } /* Caras del volumen isometrico: mismo tono, tres intensidades. */ .depth-scope .face-top { background-image: var(--grad-face); } .depth-scope .face-left { background-color: var(--face-left); } .depth-scope .face-right { background-color: var(--face-right); } /* Degradado de profundidad de la columna de estratos. */ .depth-scope .depth-fade { background-image: var(--grad-depth); } /* La unica sombra permitida en todo el sitio. */ .depth-scope .contact { box-shadow: var(--contact-shadow); } /* Texto dentro de la excepcion: usa los sustitutos, no los tokens de marca. */ .depth-scope .t-eyebrow, .depth-scope .depth-label { color: var(--depth-label); } .depth-scope .depth-acc { color: var(--depth-acc); } .depth-scope .t-eyebrow .idx { color: var(--depth-acc); } /* Estilado del timeline SVG dibujado. Trazo, nunca relleno de texto. */ .depth-scope .draw-line { fill: none; stroke: var(--stratum-edge); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .depth-scope .draw-line--acc { stroke: var(--depth-acc); } .depth-scope .draw-fill { fill: var(--acc-fill); stroke: none; } .depth-scope .draw-dot { fill: var(--stratum-dot); stroke: none; } /* ============================================================================ 11. UTILIDADES DE LAYOUT (minimas, sin opinion de diseno) ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 600px) { :root { --gutter: 20px; } } .section { padding-block: var(--sp-10); } .section--tight { padding-block: var(--sp-9); } .section--surface { background: var(--surface); } .vh-100 { min-height: 100vh; min-height: 100svh; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }