/* === REDESIGN: SAAS KIT (sandbox) ================================== Anchored to the real brand book (design/index.html · "one brand, three surfaces"). Reconverts the dashboard/shadcn product components to production CSS: KPI strip, tiles, dimension bars, dense table, underline tabs, chips. Brand law: SHARP corners, Satoshi + mono numbers, green = action. Isolated under.sa. =================================================================== */ /* Real bold for figures. Production only ships JetBrainsMono-Regular with a 400-700 range claim in global.css; this exact-weight face (loaded after) wins the match for 700. NOTE: upload JetBrainsMono-Bold-v2.woff2 to production /files/websiteassets/fonts/ at integration time. */ @font-face { font-family: 'JetBrains Mono'; src: url('/files/websiteassets/fonts/JetBrainsMono-Bold-v2.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } .sa { /* CONFORT DE LECTURA (2026-07-26). Blanco puro sobre negro puro son 21:1, y a 92px de display eso produce halacion: los trazos "vibran" y cansa la vista. Se baja a off-white sobre off-black (~17:1, sigue muy por encima de AA). POR QUE AQUI Y NO EN design-tokens.css: ese archivo es contrato compartido con el dashboard (unificado en la auditoria del 2026-07-07) y el dashboard no tiene tipo de 92px. Se sombrean los tokens en el ambito `.sa`, asi que `:root` sigue intacto para la otra superficie. Hay que sombrear TAMBIEN los alias legacy (--bg-body, --text-main): su `var()` se resolvio ya en `:root`, asi que redefinir solo --color-bg no los arrastra. Y por eso mismo esto arregla de paso las ~10 reglas de elemento de global.css que hacen `color: var(--color-text)` y ganan a la herencia. */ --color-text: #E8E9E6; --text-main: #E8E9E6; --color-bg: #080908; --bg-body: #080908; --color-bg-raised: #0E100E; --bg-card: #0E100E; --color-bg-elevated: #151715; /* Surfaces + borders consume the production tokens (single source of truth: design-tokens.css). Never hardcode these hex values again. */ --sa-bg: var(--color-bg, #080908); --sa-raised: var(--color-bg-raised, #0E100E); --sa-elevated: var(--color-bg-elevated, #151715); --sa-hair: var(--color-border, #262626); --sa-hair-2: var(--color-border-strong, #3a3a3a); --sa-ink: var(--color-text, #E8E9E6); /* Text grays: intentional overrides of --color-text-muted/subtle for contrast on pure black (tokens pending reconciliation at integration). */ --sa-muted: #999999; --sa-subtle: #7a7a7a; --sa-faint: #808080; --sa-green: var(--color-accent, #76FB56); --sa-green-hover: var(--color-accent-hover, #8AFF70); --sa-green-dim: var(--color-accent-dim, rgba(118, 251, 86, 0.3)); --sa-green-wash: var(--color-accent-bg, rgba(118, 251, 86, 0.08)); --sa-green-15: rgba(118, 251, 86, 0.15); --sa-green-glow: rgba(118, 251, 86, 0.15); --sa-success: var(--color-success, #34D399); --sa-warning: var(--color-warning, #FFB347); --sa-danger: var(--color-error, #FF6B6B); --sa-info: var(--color-info, #7FB3FF); background: var(--sa-bg); color: var(--sa-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* JetBrains Mono ships Regular-only here; never let the browser fake a heavier weight (faux-bold looks broken on figures). */ font-synthesis: none; } /* every product/marketing primitive is square (brand law) */ .sa .sa-btn,.sa .chip,.sa .kpis,.sa .kpi,.sa .tile,.sa .tbl-wrap, .sa table,.sa th,.sa td,.sa .track,.sa .fill,.sa .sa-panel, .sa .feature,.sa .stat-spot,.sa .sa-tag, .sa button,.sa input,.sa textarea,.sa select { border-radius: 0; } .sa .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .sa .container { position: relative; z-index: 1; } /* micro label */ .sa-micro { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); } /* ---- chips (brand-book formula: bg/15 + text + border/30) --------- */ .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 4px 9px; border: 1px solid transparent; white-space: nowrap; } .chip.dot { width: 6px; height: 6px; flex: none; } .chip-green { background: var(--sa-green-15); color: var(--sa-green); border-color: var(--sa-green-dim); } .chip-green.dot { background: var(--sa-green); } .chip-success { background: rgba(52,211,153,.15); color: #6ee7b7; border-color: rgba(52,211,153,.3); } .chip-success.dot { background: var(--sa-success); } .chip-zinc { background: rgba(153,153,153,.14); color: var(--sa-muted); border-color: rgba(153,153,153,.28); } .chip-zinc.dot { background: var(--sa-muted); } .chip-info { background: rgba(127,179,255,.15); color: #bcd6ff; border-color: rgba(127,179,255,.3); } .chip-info.dot { background: var(--sa-info); } /* ---- buttons ------------------------------------------------------ */ .sa-btns { display: flex; flex-wrap: wrap; gap: 14px; } .sa-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; font-weight: 700; padding: 14px 24px; border: 1px solid transparent; cursor: pointer; transition: background.2s ease, border-color.2s ease, translate.2s ease; } .sa-btn--primary { background: var(--sa-green); color: #050505; } .sa-btn--primary:hover { background: #8AFF70; translate: 0 -1px; } .sa-btn--secondary { border-color: var(--sa-hair-2); color: var(--sa-ink); } .sa-btn--secondary:hover { border-color: var(--sa-green-dim); } /* =================================================================== */ /* NAV */ /* =================================================================== */ /* La nav es sticky y mide 77-81px, así que un ancla sin margen deja su primera línea tapada por la barra. Afecta a los destinos reales del sitio: #brand (161 enlaces), #creator (40), #paul-taylor (61), #main-content (69). */ .sa [id] { scroll-margin-top: 96px; } .sa-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 16px max(var(--container-px), calc((100% - var(--container-max)) / 2 + var(--container-px))); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--sa-hair); } .sa-nav__links { display: flex; align-items: center; gap: clamp(16px,2.2vw,30px); } .sa-nav__link { display: inline-flex; align-items: center; min-height: var(--tap-target-min); color: var(--sa-muted); font-size: 13px; transition: color.2s ease; } .sa-nav__link:hover { color: var(--sa-ink); } .sa-nav__cta { display: inline-flex; align-items: center; min-height: var(--tap-target-min); padding: 9px 16px; background: var(--sa-green); color: #050505; font-size: 13px; font-weight: 700; } .sa-nav__logo { display: inline-flex; align-items: center; min-height: var(--tap-target-min); } .sa-nav__logo img { height: 26px; width: auto; display: block; } @media (max-width: 900px) {.sa-nav__links { display: none; } } /* =================================================================== */ /* HERO (editorial: izquierda, anclado al viewport) */ /* =================================================================== */ /* Pasa de centrado a alineado a la izquierda y con altura de viewport. No necesita fotografia: el mockup del que sale lleva `.hero::before,.hero::after { display:none }`, asi que lo que realmente renderiza es negro plano con tipo grande a la izquierda. El markup no cambia: eyebrow, h1, lead, botones, proofline y nota siguen siendo hermanos dentro de .container. Altura: por defecto tope de 660px para que las paginas cortas no obliguen a scrollear antes de ver contenido; solo la home va a viewport completo con `.sa-hero--full`. 81px = alto real de la nav sticky. */ .sa-hero { position: relative; text-align: left; display: flex; align-items: center; min-height: min(660px, calc(100vh - 81px)); min-height: min(660px, calc(100svh - 81px)); padding: clamp(64px,8vw,104px) 0; overflow: hidden; } .sa-hero--full { min-height: calc(100vh - 81px); min-height: calc(100svh - 81px); } .sa-hero > .container { width: 100%; } /* `.sa-h1` y `.sa-lead` traen `margin-inline:auto` del hero centrado. */ .sa-hero .sa-h1 { margin-left: 0; margin-right: 0; max-width: 18ch; } .sa-hero .sa-lead { margin-left: 0; margin-right: 0; max-width: 56ch; } .sa-hero .sa-proofline { justify-content: flex-start; margin-left: 0; margin-right: 0; } .sa-hero .sa-hero__note { margin-left: 0; margin-right: 0; } .sa-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sa-green); } .sa-hero__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--sa-green); } /* REGISTRO EDITORIAL (2026-07-26). El display pasa de 700 a ~520: Satoshi es variable 300-900 y ya va precargada, asi que los pesos intermedios cuestan 0 bytes. Mas tamano + menos peso + mas tracking negativo = registro editorial en vez de SaaS. Los pesos van en la clase (0,1,0), que gana a la regla de elemento `h1,h2,h3,h4{font-weight:var(--weight-bold)}` de global.css:76. */ .sa-h1 { font-size: clamp(42px, 6.4vw, 92px); font-weight: 520; letter-spacing: -0.055em; line-height: 0.93; margin: 30px auto 0; max-width: 17ch; text-wrap: balance; } .sa-h1 .g, .sa-article__title .g { color: var(--sa-green); } .sa-lead { margin: 32px auto 0; font-size: clamp(16px,1.9vw,20px); color: var(--sa-muted); max-width: 54ch; line-height: 1.55; } .sa-hero .sa-btns { justify-content: flex-start; margin-top: 42px; } /* Era 10.5px en --sa-faint: mas pequeno que los disclaimers legales, y es la UNICA puerta de la audiencia creator en el hero. Ahora carga tambien los terminos de la oferta, asi que tiene que leerse. */ .sa-hero__note { margin: 26px auto 0; max-width: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--sa-muted); } /* =================================================================== */ /* PRODUCT PANEL (dashboard reconverted) */ /* =================================================================== */ .sa-panel { border: 1px solid var(--sa-hair); background: var(--sa-bg); margin-top: clamp(60px,7vw,96px); box-shadow: 0 50px 120px -60px rgba(0,0,0,.9); } .sa-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-raised); } .sa-panel__title { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sa-ink); font-weight: 500; } .sa-panel__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-green); } .sa-panel__live i { width: 7px; height: 7px; background: var(--sa-green); box-shadow: 0 0 10px var(--sa-green); } /* underline tabs */ .ptabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--sa-hair); } .ptab { padding: 12px 16px 13px; font-size: 13px; color: var(--sa-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color.2s ease, border-color.2s ease; font-weight: 500; font-family: inherit; } .ptab:hover { color: var(--sa-ink); } .ptab.active { color: var(--sa-green); border-bottom-color: var(--sa-green); font-weight: 700; } .ptab .count { font-family: var(--font-mono); font-size: 10px; color: var(--sa-faint); margin-left: 7px; } .ptab.active .count { color: var(--sa-green-dim); } .sa-panel__body { padding: 28px 22px; } .sa-panel__pane { display: none; } .sa-panel__pane.active { display: block; animation: sa-fade.35s ease; } @keyframes sa-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* kpi strip */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sa-hair-2); border: 1px solid var(--sa-hair-2); } .kpi { background: var(--sa-raised); padding: 18px 20px 16px; min-height: 108px; display: flex; flex-direction: column; position: relative; transition: background.15s ease; } .kpi:hover { background: var(--sa-elevated); } .kpi .sa-micro { margin-bottom: 9px; } .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--sa-ink); } .kpi-sub { margin-top: 8px; font-size: 11px; color: var(--sa-muted); display: flex; align-items: center; gap: 6px; } .kpi-sub .up { color: var(--sa-success); font-family: var(--font-mono); font-weight: 600; } .kpi-spark { position: absolute; right: 13px; bottom: 11px; } .kpi-spark polyline { fill: none; stroke: var(--sa-green); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* dimension bars (mini chart) */ .sa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); border-top: none; } .sa-split > div { background: var(--sa-bg); padding: 20px 18px; } .dims { display: flex; flex-direction: column; gap: 13px; } .dim { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 12px; } .dim-label { font-size: 12px; color: var(--sa-muted); } .track { height: 6px; background: #1c1c1e; position: relative; overflow: hidden; } /* Ley dual-green: un dato positivo NUNCA lleva el color del CTA. El verde de marca queda solo para accion (botones, chips de veredicto, acentos de titular). */ .fill { position: absolute; inset: 0 auto 0 0; background: var(--sa-success); transition: width 1s cubic-bezier(.16,1,.3,1); } .fill.info { background: var(--sa-info); } .fill.success { background: var(--sa-success); } .dim-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; color: var(--sa-muted); } /* dense table */ .tbl-wrap { border: 1px solid var(--sa-hair); background: var(--sa-raised); } .sa table { width: 100%; border-collapse: collapse; } .sa thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-elevated); white-space: nowrap; } .sa thead th.num,.sa td.num { text-align: right; } .sa tbody td { padding: 10px 16px; border-bottom: 1px solid var(--sa-hair); font-size: 12.5px; vertical-align: middle; white-space: nowrap; height: 40px; } .sa tbody tr:last-child td { border-bottom: none; } .sa tbody tr { transition: background.15s ease; } .sa tbody tr:hover td { background: var(--sa-elevated); } .sa tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--sa-green); } .cell-name { font-weight: 500; color: var(--sa-ink); } .sa td.mono { font-size: 12px; color: var(--sa-muted); } .sa-panel__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--sa-hair); font-family: var(--font-mono); font-size: 10px; color: var(--sa-faint); letter-spacing: 0.06em; } /* =================================================================== */ /* SECTIONS (replicable scaffold) */ /* =================================================================== */ .sa-sec { padding: clamp(72px,10vw,136px) 0; } .sa-sec__head { text-align: center; max-width: 60ch; margin: 0 auto; } .sa-sec__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sa-green); } .sa-h2 { font-size: clamp(32px,4.6vw,62px); font-weight: 510; letter-spacing: -0.05em; line-height: 0.99; margin: 20px 0 0; text-wrap: balance; } .sa-h2 .g { color: var(--sa-green); } .sa-sec__sub { margin: 22px auto 0; color: var(--sa-muted); font-size: var(--text-lg); line-height: 1.55; } /* =================================================================== */ /* PAPER: banda clara que corta el scroll negro */ /* =================================================================== */ /* Todo el kit lee `var(--sa-*)`, asi que invertir la superficie es redeclarar esas propiedades en el ambito de la seccion: los componentes de dentro se adaptan solos, sin variantes duplicadas. Lo unico que hay que corregir a mano es lo que NO lee token (hex escritos a pelo), que va listado abajo. Regla de uso: maximo dos bandas por pagina y solo en secciones de texto + hairlines. */ .sa-sec--paper { --sa-bg: var(--color-paper); --sa-raised: var(--color-paper-raised); --sa-elevated: var(--color-paper-elevated); --sa-hair: var(--color-paper-line); --sa-hair-2: var(--color-paper-line-strong); --sa-ink: var(--color-paper-ink); --sa-muted: var(--color-paper-muted); --sa-subtle: var(--color-paper-muted); --sa-faint: var(--color-paper-muted); --sa-green: var(--color-accent-on-paper); --sa-green-hover: var(--color-accent-on-paper-hover); --sa-green-dim: rgba(19, 82, 10, 0.38); --sa-green-wash: rgba(19, 82, 10, 0.09); --sa-green-15: rgba(19, 82, 10, 0.15); --sa-green-glow: transparent; --sa-success: var(--color-success-on-paper); background: var(--sa-bg); color: var(--sa-ink); } /* Aire simetrico: la banda tiene que leerse como banda, no como un bloque pegado al de arriba. Va con doble clase (0,2,0) A PROPOSITO: `.sa-sec--flush` tiene la misma especificidad que `.sa-sec--paper` y va despues en el archivo, asi que le ganaba y la banda se quedaba con el padding reducido. */ .sa-sec.sa-sec--paper { padding-top: clamp(72px,10vw,136px); } /* Reglas de global.css que fijan color de elemento y por tanto GANAN a la herencia de la seccion: `h1,h2,h3,h4{color:var(--color-text)}` (global.css:78) dejaba los titulares en blanco sobre la banda clara, y `p{color: var(--color-text-muted)}` (global.css:99) deja #737373, que sobre paper es 3,75:1 y no pasa AA. */ .sa-sec--paper h1, .sa-sec--paper h2, .sa-sec--paper h3, .sa-sec--paper h4 { color: var(--sa-ink); } .sa-sec--paper p { color: var(--sa-muted); } /* Hex escritos a pelo que no leen token: */ .sa-sec--paper .sa-btn--primary { color: #FFFFFF; } /* era #050505 */ .sa-sec--paper .sa-btn--primary:hover { background: var(--sa-green-hover); } /* era #8AFF70 */ .sa-sec--paper .sa-prose p, .sa-sec--paper .sa-prose ul li { color: var(--sa-muted); } /* era #c9c9c6 */ /* feature grid (3, hairline-joined like the product) */ .sa-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(52px,6vw,80px); } /* CELDA: numero arriba, titular y cuerpo justo debajo, hueco al fondo. ANCLAR EL TITULAR ABAJO NO FUNCIONA y se probo: con `margin-top:auto` el bloque titulo+cuerpo cuelga del fondo, asi que basta que un cuerpo envuelva en 4 lineas en vez de 3 para que SU titular suba y la fila se desalinee. Depende del ancho de ventana, o sea que "alineado a 1440" no significa nada: a 1920 el tercero se descolgaba 22px. Con el contenido arriba, los titulares comparten borde superior por construccion, a cualquier ancho, y el hueco sobrante queda al fondo, que es igual en las tres celdas. */ .feature { background: var(--sa-bg); padding: clamp(28px,2.6vw,40px); display: flex; flex-direction: column; min-height: 250px; } .feature .ico { color: var(--sa-green); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; } .feature h3 { font-size: clamp(23px,2.5vw,33px); font-weight: 510; letter-spacing: -0.035em; line-height: 1.02; margin: 26px 0 14px; text-wrap: balance; } .feature p { font-size: 15px; color: var(--sa-muted); line-height: 1.55; margin: 0; } /* stat spotlight band */ .sa-statband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); } .stat-spot { background: var(--sa-bg); padding: clamp(28px,2.8vw,40px); text-align: center; } .stat-spot .num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(34px,4.6vw,58px); font-weight: 700; color: var(--sa-success); letter-spacing: -0.04em; line-height: 0.9; } .stat-spot .lab { display: block; margin-top: 16px; font-family: var(--font-sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--sa-muted); line-height: 1.4; } /* ---- exclusivity arc (deal-by-deal -> exclusive) ------------------ */ .sa-arc { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(48px,6vw,76px); } .sa-arc__col { background: var(--sa-bg); padding: clamp(36px,3.6vw,56px); } .sa-arc__col.is-dest { background: var(--sa-raised); position: relative; } .sa-arc__col.is-dest::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--sa-green); } .sa-arc__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); } .sa-arc__col.is-dest .sa-arc__k { color: var(--sa-green); } .sa-arc__t { font-size: clamp(19px,2vw,24px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 4px; } .sa-arc__role { color: var(--sa-muted); font-size: 15px; line-height: 1.5; } .sa-adds { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; } .sa-adds li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--sa-hair); } .sa-adds li:first-child { border-top: none; } .sa-adds .n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--sa-green); } .sa-adds .t { font-weight: 600; font-size: 14.5px; } .sa-adds .b { color: var(--sa-muted); font-size: 14px; line-height: 1.5; margin-top: 3px; } .sa-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .sa-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sa-muted); border: 1px solid var(--sa-hair); padding: 7px 12px; } .sa-ticks li::before { content: ""; width: 7px; height: 7px; background: var(--sa-green); flex: none; } .sa-arc__close { text-align: center; max-width: 60ch; margin: clamp(28px,4vw,40px) auto 0; font-size: clamp(18px,2vw,22px); line-height: 1.4; letter-spacing: -0.01em; } .sa-arc__close .g { color: var(--sa-green); } /* ---- decision scorecard (Intelligence) --------------------------- */ .sa-score__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--sa-hair); margin-bottom: 20px; } .sa-score__who .n { font-weight: 600; font-size: 15px; } .sa-score__who .m { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--sa-muted); letter-spacing: 0.04em; } .sa-verdict { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid transparent; white-space: nowrap; } .sa-verdict::before { content: ""; width: 8px; height: 8px; } .sa-verdict.skip { color: var(--sa-danger); border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.1); } .sa-verdict.skip::before { background: var(--sa-danger); } .sa-verdict.present { color: var(--sa-green); border-color: var(--sa-green-dim); background: var(--sa-green-15); } .sa-verdict.present::before { background: var(--sa-green); } .sa-score__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sa-hair); color: var(--sa-muted); font-size: 13px; } .sa-score__note .g { color: var(--sa-green); } .dim.wide { grid-template-columns: 150px 1fr 52px; } .fill.danger { background: var(--sa-danger); } .fill.warning { background: var(--sa-warning); } .dim-val.bad { color: var(--sa-danger); } .dim-val.good { color: var(--sa-success); } /* ---- split intro (headline left + body right) -------------------- */ /* HEAD ASIMETRICO: 1.1fr/0.7fr y `align-items:end` para que la ultima linea del parrafo de apoyo caiga sobre la baseline del titular. Con el titular ya grande, es lo que hace que el salto de tamano lea como intencionado. */ .sa-splitintro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(260px,0.7fr); gap: clamp(24px,4vw,72px); align-items: end; } .sa-splitintro__h { font-size: clamp(32px,4.4vw,58px); font-weight: 510; letter-spacing: -0.05em; line-height: 1.0; margin: 0; text-wrap: balance; } .sa-splitintro__h .g { color: var(--sa-green); } .sa-splitintro__body p { color: var(--sa-muted); font-size: var(--text-lg); line-height: 1.55; margin: 0; } .sa-splitintro__body p + p { margin-top: 14px; } .sa-splitintro__body strong { color: var(--sa-ink); font-weight: 600; } /* ---- section eyebrow rule (left-aligned marker) ------------------ */ .sa-rule { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px,3.5vw,44px); } .sa-rule__t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-green); white-space: nowrap; } .sa-rule::after { content: ""; flex: 1; height: 1px; background: var(--sa-hair); } /* ---- numbered editorial list ------------------------------------- */ .sa-numlist { margin-top: clamp(36px,4vw,52px); border-top: 1px solid var(--sa-hair); } .sa-num { display: grid; grid-template-columns: 68px 1fr; gap: clamp(16px,3vw,40px); padding: clamp(28px,3vw,40px) 0; border-bottom: 1px solid var(--sa-hair); align-items: start; } .sa-num__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(20px,2.4vw,28px); font-weight: 700; color: var(--sa-green); letter-spacing: -0.02em; } .sa-num__t { font-size: clamp(21px,2.6vw,33px); font-weight: 530; letter-spacing: -0.035em; line-height: 1.08; margin: 0; text-wrap: balance; } .sa-num__b { color: var(--sa-muted); line-height: 1.6; margin: 12px 0 0; max-width: 72ch; } .sa-num__link { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--sa-green); } .sa-num__link:hover { text-decoration: underline; } /* ---- track record cases ------------------------------------------ */ .sa-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(40px,5vw,56px); } .sa-case { background: var(--sa-bg); padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; min-height: 250px; } .sa-case__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-muted); } /* Mismo criterio que .feature: contenido arriba, hueco al fondo. */ .sa-case__t { font-size: clamp(23px,2.5vw,33px); font-weight: 510; letter-spacing: -0.035em; margin: 24px 0 13px; line-height: 1.02; text-wrap: balance; } .sa-case__b { color: var(--sa-muted); line-height: 1.6; font-size: 15px; } .sa-case__b .g { color: var(--sa-green); } /* ---- fit lists --------------------------------------------------- */ .sa-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(40px,5vw,56px); } .sa-fit__col { background: var(--sa-bg); padding: clamp(28px,3vw,40px); } .sa-fit__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-green); } .sa-fit__col.no .sa-fit__k { color: var(--sa-subtle); } .sa-fit__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; } .sa-fit__list li { position: relative; padding-left: 24px; color: var(--sa-ink); font-size: 15px; line-height: 1.45; } .sa-fit__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--sa-green); } .sa-fit__col.no .sa-fit__list li { color: var(--sa-muted); } .sa-fit__col.no .sa-fit__list li::before { background: var(--sa-subtle); } /* ---- statement pull-quote ---------------------------------------- */ .sa-statement { border-left: 2px solid var(--sa-green); padding: 6px 0 6px 24px; margin: clamp(36px,4vw,52px) 0 0; max-width: 68ch; } .sa-statement p { font-size: clamp(18px,2.2vw,26px); line-height: 1.35; letter-spacing: -0.015em; color: var(--sa-ink); font-weight: 500; margin: 0; text-wrap: balance; } @media (max-width: 820px) { .sa-splitintro { grid-template-columns: 1fr; align-items: start; } .sa-cases { grid-template-columns: 1fr; } .sa-fit { grid-template-columns: 1fr; } } /* Tres celdas de 300px apiladas en movil son un scroll largo: la celda poster solo tiene sentido mientras las celdas van en fila. */ @media (max-width: 820px) { .feature,.sa-case { min-height: 0; } .feature h3,.sa-case__t { margin-top: 18px; } } @media (max-width: 700px) {.sa-num { grid-template-columns: 1fr; gap: 8px; } } /* ---- case file (Brands only) ------------------------------------- */ .sa-casefile { border: 1px solid var(--sa-hair); background: var(--sa-raised); margin-top: clamp(44px,5vw,64px); } .sa-casefile__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-elevated); } .sa-casefile__ref { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-muted); } .sa-casefile__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); } .sa-casefile__cell { background: var(--sa-raised); padding: clamp(26px,3vw,40px); text-align: center; } .sa-casefile__num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(34px,4.4vw,52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .sa-casefile__num.bad { color: var(--sa-danger); } .sa-casefile__k { display: block; margin-top: 12px; color: var(--sa-muted); font-size: 14px; } .sa-casefile__foot { padding: 18px 22px; border-top: 1px solid var(--sa-hair); color: var(--sa-muted); font-size: 15px; line-height: 1.55; text-align: left; max-width: none; } .sa-casefile__foot .g { color: var(--sa-green); } /* ---- comparison table (Brands only) ------------------------------ */ .sa-compare { margin-top: clamp(44px,5vw,64px); border: 1px solid var(--sa-hair); } .sa-compare table { width: 100%; border-collapse: collapse; } .sa-compare th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 20px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-elevated); text-align: left; color: var(--sa-muted); } .sa-compare th.na { color: var(--sa-green); } .sa-compare td { padding: 15px 20px; border-bottom: 1px solid var(--sa-hair); font-size: 14px; vertical-align: middle; } .sa-compare tr:last-child td { border-bottom: none; } .sa-compare td:first-child { color: var(--sa-muted); } .sa-compare td.legacy { color: var(--sa-subtle); } .sa-compare td.na { color: var(--sa-ink); background: var(--sa-green-wash); font-weight: 500; } .sa-compare col.na-col { } /* ---- what we won't do (Brands only) ------------------------------ */ .sa-wont { list-style: none; margin: clamp(40px,5vw,56px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); } .sa-wont li { background: var(--sa-bg); padding: clamp(22px,2.6vw,30px); display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; } .sa-wont .x { color: var(--sa-danger); font-family: var(--font-mono); font-weight: 700; font-size: 18px; line-height: 1.2; } .sa-wont .t { font-size: 15px; line-height: 1.5; color: var(--sa-ink); } /* ---- client logos ----------------------------------------------- Mixed-ratio SVGs normalized by optical box, not raw height: wide wordmarks cap on width, compact marks cap on height, so every logo reads at similar visual weight. Uniform white silhouette on dark. */ .sa-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(32px,5vw,60px); margin-top: clamp(36px,4vw,52px); } /* Caja reservada por logo. Antes iban con `width:auto;height:auto`, que ANULA los atributos width/height del HTML: sin imagen cargada la caja medía 0x0 y la tira saltaba de 0 a ~174px justo cuando el usuario llegaba scrolleando (CLS medido 0,19 en móvil, casi el doble del umbral de 0,1). Los valores de abajo son exactamente el tamaño que cada logo ya renderizaba con `max-height:40px; max-width:128px`, calculados desde su viewBox real, así que el aspecto no cambia: solo deja de saltar. Si se cambia un SVG, recalcular: h = min(40, 128*alto/ancho), w = h*ancho/alto. */ .sa-logos img { object-fit: contain; opacity: 0.72; filter: brightness(0) invert(1); transition: opacity .2s ease; } /* Tamanos normalizados OPTICAMENTE, no por caja. Medida la tinta real de cada SVG sobre canvas a 200px: Skillshare lleva 36% de margen dentro del propio archivo (tinta 127 de 200), REDMAGIC es un lockup apilado con densidad 14,6% y Recraft tiene 63,4%, el doble que la media. Igualar alturas los hacia ver descompensados. Cada altura corrige por densidad y por ratio; el ancho sale del ratio real del viewBox, asi que la caja sigue reservada y el CLS sigue en 0. */ .sa-logos img[alt="ProtonVPN"] { width: 133px; height: 34px; } /* 1965x500 · ancho, denso */ .sa-logos img[alt="Skillshare"] { width: 89px; height: 55px; } /* 91x56 · +36% por el margen del SVG */ .sa-logos img[alt="REDMAGIC"] { width: 75px; height: 49px; } /* 83x54 · apilado, densidad 14,6% */ .sa-logos img[alt="Incogni"] { width: 109px; height: 36px; } /* 790x261 */ .sa-logos img[alt="Milanote"] { width: 131px; height: 34px; } /* 131x34 · ancho */ .sa-logos img[alt="Recraft"] { width: 134px; height: 31px; } /* 1482x344 · el mas denso */ .sa-logos img:hover { opacity: 1; } @media (max-width: 700px) {.sa-casefile__body { grid-template-columns: 1fr; }.sa-wont { grid-template-columns: 1fr; } } /* ---- FAQ accordion (native
, no JS, accessible) --------- */ .sa-faq { margin-top: clamp(36px,4vw,52px); border-top: 1px solid var(--sa-hair); } .sa-faq__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-green); margin: clamp(36px,4vw,52px) 0 4px; } .sa-faq__cat:first-of-type { margin-top: clamp(28px,3vw,40px); } .sa-faq details { border-bottom: 1px solid var(--sa-hair); } .sa-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(16px,1.7vw,19px); font-weight: 600; letter-spacing: -0.01em; color: var(--sa-ink); transition: color.2s ease; } .sa-faq summary::-webkit-details-marker { display: none; } .sa-faq summary:hover { color: var(--sa-green); } .sa-faq summary .ico { flex: none; width: 16px; height: 16px; position: relative; } .sa-faq summary .ico::before,.sa-faq summary .ico::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 2px; background: var(--sa-green); transition: transform .25s ease; } .sa-faq summary .ico::after { transform: rotate(90deg); } .sa-faq details[open] summary .ico::after { transform: rotate(0); } .sa-faq__a { padding: 0 40px 26px 0; color: var(--sa-muted); font-size: 15.5px; line-height: 1.6; max-width: 74ch; } .sa-faq__a a { color: var(--sa-green); border-bottom: 1px solid var(--sa-green-dim); } .sa-faq__a a:hover { border-color: var(--sa-green); } /* ---- quote / social proof ---------------------------------------- */ .sa-quote { max-width: 60ch; margin: 0 auto; text-align: center; padding: clamp(16px,3vw,32px) 0; } .sa-quote blockquote { font-size: clamp(25px,3.4vw,44px); font-weight: 510; letter-spacing: -0.045em; line-height: 1.08; margin: 0; text-wrap: balance; } .sa-quote figcaption { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-muted); } .sa-quote figcaption .g { color: var(--sa-green); } /* ---- portal panel: growth bars reuse.dims ----------------------- */ .sa-portal-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sa-faint); margin-top: 12px; } @media (max-width: 820px) {.sa-arc { grid-template-columns: 1fr; } } /* closing */ .sa-closing { text-align: center; max-width: 52ch; margin: 0 auto; } .sa-closing .sa-btns { justify-content: center; margin-top: 32px; } /* footer */ .sa-foot { position: relative; overflow: hidden; border-top: 1px solid var(--sa-hair); margin-top: clamp(40px,6vw,72px); } /* WORDMARK FANTASMA: firma de cierre. Es tipo viva en una fuente ya cargada, asi que no hay asset, ni peticion, ni CLS. Va `aria-hidden` porque el nombre de la marca ya lo anuncia el logo del footer, y sin seleccion de texto para que no se copie al arrastrar. Un solo escalon por encima del fondo: tiene que leerse como marca de agua, no como banda. */ .sa-foot__wordmark { position: absolute; z-index: 0; left: 50%; bottom: -3.2vw; transform: translateX(-50%); color: #101010; font-size: clamp(104px, 18vw, 320px); font-weight: 720; letter-spacing: -0.085em; line-height: 0.78; white-space: nowrap; user-select: none; -webkit-user-select: none; pointer-events: none; } @media (max-width: 700px) { .sa-foot__wordmark { bottom: 12px; font-size: 29vw; } } .sa-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px,4vw,56px); padding: clamp(44px,5vw,64px) 0 clamp(32px,4vw,44px); } .sa-foot__brand-logo { display: inline-flex; align-items: center; min-height: var(--tap-target-min); } .sa-foot__brand-logo img { height: 30px; width: auto; display: block; } .sa-foot__tag { color: var(--sa-muted); max-width: 40ch; margin: 18px 0 22px; font-size: 13.5px; line-height: 1.55; } .sa-foot__coltitle { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sa-subtle); margin-bottom: 16px; } .sa-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .sa-foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sa-muted); font-size: 14px; transition: color.18s ease; } .sa-foot__links a:hover { color: var(--sa-green); } .sa-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0 clamp(28px,4vw,40px); border-top: 1px solid var(--sa-hair); } .sa-foot__copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sa-faint); } .sa-foot__legal { display: flex; gap: 22px; } /* La barra legal cae ENCIMA del wordmark (#101010), no sobre negro puro: con --sa-subtle (#7a7a7a) el ratio baja a 4,41:1 y se queda por debajo de AA. Sobre #101010, --sa-muted da 6,4:1. */ .sa-foot__legal a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sa-muted); transition: color.18s ease; } .sa-foot__legal a:hover { color: var(--sa-ink); } @media (max-width: 820px) { .sa-foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sa-foot__grid { grid-template-columns: 1fr; } } /* =================================================================== */ /* MOTION (progressive enhancement) */ /* =================================================================== */ @media (prefers-reduced-motion: no-preference) { /* SCROLL REVEAL. El selector estaba roto desde hace semanas: decia `.js-anim.sa-reveal` (compuesto), pero el JS pone `js-anim` en el y `sa-reveal` en las secciones, asi que no matcheaba nada y la animacion nunca se vio. Corregido y VERIFICADO EN CHROME REAL el 2026-07-26: las 9 secciones llegan a opacity 1 al scrollear. Doblemente protegido: el JS solo anade `js-anim` si va a observar de verdad, y la regla vive dentro de @media (prefers-reduced-motion: no-preference). Si el JS falla, el contenido se queda visible. */ .js-anim .sa-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js-anim .sa-reveal.is-in { opacity: 1; transform: none; } } /* =================================================================== */ /* RESPONSIVE */ /* =================================================================== */ @media (max-width: 820px) { .kpis { grid-template-columns: repeat(2, 1fr); } .sa-split { grid-template-columns: 1fr; } .sa-features,.sa-statband { grid-template-columns: 1fr; } .ptabs { overflow-x: auto; } } /* =================================================================== */ /* ACCESSIBILITY: focus ring (canonical for the marketing system) */ /* =================================================================== */ .sa a:focus-visible, .sa button:focus-visible, .sa input:focus-visible, .sa select:focus-visible, .sa textarea:focus-visible { outline: 2px solid var(--sa-green); outline-offset: 2px; } /* =================================================================== */ /* NAV: current page + mobile menu */ /* =================================================================== */ .sa-nav__link[aria-current="page"] { color: var(--sa-ink); box-shadow: inset 0 -2px 0 var(--sa-green); padding-bottom: 3px; } .sa-nav__burger { display: none; width: var(--tap-target-min); height: var(--tap-target-min); background: none; border: 1px solid var(--sa-hair-2); cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .sa-nav__burger span { display: block; width: 16px; height: 2px; background: var(--sa-ink); transition: transform.25s ease, opacity.25s ease; } .sa-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sa-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .sa-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .sa-mobilemenu { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 96px clamp(24px,6vw,40px) 40px; flex-direction: column; gap: 8px; } .sa-mobilemenu a { display: flex; align-items: center; min-height: var(--tap-target-min); font-size: clamp(24px,6vw,32px); font-weight: 700; letter-spacing: -0.02em; color: var(--sa-ink); padding: 12px 0; border-bottom: 1px solid var(--sa-hair); } .sa-mobilemenu a[aria-current="page"] { color: var(--sa-green); } .sa-mobilemenu .sa-btn { margin-top: 24px; justify-content: center; } /* `.sa-mobilemenu a` (0,1,1) le ganaba a `.sa-btn--primary` (0,1,0) y pintaba el CTA en blanco sobre verde: 1,3:1, ilegible. Y por debajo de 900px el menú es la ÚNICA ruta al CTA, porque `.sa-nav__cta` está en display:none. */ .sa-mobilemenu a.sa-btn--primary { color: #050505; border-bottom: none; } /* En horizontal el menú no cabe y no había forma de llegar al CTA. */ .sa-mobilemenu { overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 900px) { .sa-nav__burger { display: flex; } .sa-nav__cta { display: none; } .sa-mobilemenu.is-open { display: flex; } } body.sa-menu-open { overflow: hidden; } /* =================================================================== */ /* TABLES: never clip on small screens */ /* =================================================================== */ .tbl-wrap,.sa-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl-wrap table,.sa-compare table { min-width: 560px; } /* WCAG 2.1.1: una region con scroll tiene que poder recorrerse con teclado. El marcado lleva `role="region" aria-label tabindex="0"`; aqui solo el anillo de foco, porque el contenedor no es ni