so nothing here can reach the shell. */ /* ========================================================================== 3. BASE TYPOGRAPHY ========================================================================== */ /* Everything here is scoped to

, and that is load-bearing. The class sits on , so an unscoped `.lp26 h3` (0,1,1) ties with shell/footer.css's `.cffo-col h3` and wins on source order -- painting the footer headings dark blue on black. `.lp26 a:not(.lp26-btn)` (0,2,1) beats `.cffo-col a` outright and does the same to every footer link. Both were real, and measured. Scoping to main removes the whole class of collision at the root instead of patching each one; the shell's own chrome is styled explicitly in section 2. */ .cfhub.lp26 main h1, .cfhub.lp26 main h2, .cfhub.lp26 main h3, .cfhub.lp26 main h4 { font-family: var(--lp26-font); line-height: 1.2; margin: 0; color: var(--color-text-primary); } .cfhub.lp26 main h1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.12; font-weight: 700; } /* Fixed, not clamped: a section h2 must read the same size on this page as on the rest of the site regardless of viewport width between the breakpoints. */ .cfhub.lp26 main h2 { font-size: 32px; line-height: 1.22; font-weight: 700; } .cfhub.lp26 main h3 { font-size: 20px; line-height: 1.3; font-weight: 600; } .cfhub.lp26 main h4 { font-size: 18px; line-height: 1.35; font-weight: 600; } /* Every component below restores the margin it needs rather than relying on a user-agent default. */ .cfhub.lp26 main p { margin: 0; } .cfhub.lp26 main a:not(.lp26-btn) { color: var(--color-link); } .cfhub.lp26 main a:not(.lp26-btn):hover { color: var(--color-link-hover); } .cfhub.lp26 a:focus-visible, .cfhub.lp26 summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-small); } .cfhub.lp26 main:focus { outline: none; } /* ========================================================================== 4. LAYOUT ========================================================================== */ .cfhub.lp26 .lp26-wrap { max-width: var(--lp26-maxw); margin: 0 auto; padding: 0 var(--lp26-gutter); } .cfhub.lp26 .lp26-section { padding: var(--space-20) 0; } .cfhub.lp26 .lp26-bg-soft { background: var(--color-background-soft); } .cfhub.lp26 .lp26-bg-blue { background: var(--color-background-blue); } /* One hairline between two same-coloured sections. Where a band edge already draws the boundary, no rule is added — the surface change is the boundary. */ .cfhub.lp26 .lp26-section + .lp26-section:not(.lp26-bg-soft):not(.lp26-bg-blue) > .lp26-wrap { border-top: 1px solid var(--color-border); padding-top: var(--space-20); margin-top: calc(var(--space-20) * -1); } /* ========================================================================== 5. PRIMITIVES ========================================================================== */ /* Eyebrow: an editorial label led by a short accent rule, never a filled pill. */ .cfhub.lp26 .lp26-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; /* primary-700, not primary-600. Both clear AA on every ground since the ramp was re-centred (600 measures 5.56 on the soft band and 5.52 on the blue one; 700 measures 6.55 and 6.50), so the choice is weight rather than legibility: a 13px uppercase label wants the darker step to read as deliberate instead of faint. */ color: var(--color-primary-700); margin-bottom: var(--space-4); } .cfhub.lp26 .lp26-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--color-primary-500); flex-shrink: 0; } .cfhub.lp26 .lp26-h2 { font-size: 32px; line-height: 1.22; font-weight: 700; color: var(--color-text-primary); /* No max-width: a section heading wrapped after two or three words even on a wide viewport, wasting the space a large screen actually has. */ } .cfhub.lp26 .lp26-intro { margin-top: var(--space-4); /* 78ch, not 62: at 62 a one-sentence intro of the length these pages actually use -- "Six numbers, drawn from 324 professionals in 43 countries, capture where the field is heading." -- broke onto a second line for its last three words, which reads as a mistake next to a heading that has no measure at all. Measured: that sentence needs 75ch in this face, so 78 leaves a word of slack. Deliberately still capped: the same class carries the 557-character About paragraph on the survey page, and with no cap that one runs the full 110ch of the container. */ max-width: 78ch; font-size: 18px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-button); font-family: var(--lp26-font); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; border: 1px solid transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease, transform .12s ease; } .cfhub.lp26 .lp26-btn:hover { transform: translateY(-1px); } .cfhub.lp26 .lp26-btn-primary { /* background-color first, on its own: it is the "own ground" the contrast guard in tests/design_system.php reads (it matches background(-color):, not a shorthand with a gradient). White on #1B53E6 is 6.13:1, AA. The gradient rides in background-image, which the guard does not parse -- a shorthand `background: linear-gradient(...)` would leave this rule groundless and the guard would measure it at 1.00:1 and fail. */ background-color: var(--color-cta-deep); background-image: linear-gradient(180deg, var(--color-cta) 0%, var(--color-cta-deep) 100%); color: var(--color-text-inverse); box-shadow: 0 10px 24px -6px rgba(27, 83, 230, .42); } .cfhub.lp26 .lp26-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 14px 30px -6px rgba(27, 83, 230, .42); } .cfhub.lp26 .lp26-btn-ghost { background: transparent; color: var(--color-primary-700); border-color: var(--color-primary-600); } .cfhub.lp26 .lp26-btn-ghost:hover { background: var(--color-primary-100); } /* ========================================================================== 6. HERO Light and editorial. The system's own rule forbids a dark full-bleed hero. ========================================================================== */ .cfhub.lp26 .lp26-hero { padding: var(--space-16) 0 var(--space-20); /* background-blue, not primary-050: the published site's own hero starts from the same blue band as the summary section below it, not a paler tint invented for this style. */ background: linear-gradient(180deg, var(--color-background-blue) 0%, var(--color-background-page) 100%); border-bottom: 1px solid var(--color-border); } /* Wrapped mode only (see wrapped_body_class in tokens.json): cognifit.web's own fixed header sits over this hero and the Hub's shell header -- which the base padding above is sized for -- is not there. Self-contained pages never carry .lp26--wrapped, so they are untouched by this rule. */ .cfhub.lp26.lp26--wrapped .lp26-hero { padding-top: 108px; } /* Wide enough for the headline to break in two lines, not four. A `ch` measure is right for prose and wrong here: at 48px the h1 does not set in the body font size the unit is derived from. */ .cfhub.lp26 .lp26-hero-inner { max-width: 780px; } .cfhub.lp26 .lp26-hero h1 { color: var(--color-text-primary); } .cfhub.lp26 .lp26-lede { /* Keyed off the headline, not a fixed step: under a 48px h1 a 24px gap reads as none at all. */ margin-top: var(--space-8); font-size: 20px; line-height: 1.55; /* Roboto Light, the weight cognifit.com sets its own large intro copy in. At 20px it reads as air around the headline; at body size it would read as thin, which is why it lives here and not on

. */ font-weight: 300; color: var(--color-text-secondary); max-width: 62ch; } .cfhub.lp26 .lp26-hero .lp26-btn { margin-top: var(--space-8); } /* Two calls to action sit in a row that wraps on a narrow screen. The row owns the top margin so the buttons do not each add their own and drift apart when they wrap. */ .cfhub.lp26 .lp26-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); } .cfhub.lp26 .lp26-hero-actions .lp26-btn { margin-top: 0; } /* ========================================================================== 7. ANSWER SUMMARY The direct answer first, so the page can be quoted without reconstruction. ========================================================================== */ .cfhub.lp26 .lp26-summary { display: grid; /* The answer carries most of the mass; an even split leaves the index column half empty and the prose column cramped. */ grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; } .cfhub.lp26 .lp26-summary-body { min-width: 0; } /* With no TOC (fewer than three headed sections) or no summary body, the grid's other column is never emitted, but the track it would have lived in still reserved its share of the row -- a page rendered with one real column and one empty one. */ .cfhub.lp26 .lp26-summary > :only-child { grid-column: 1 / -1; } .cfhub.lp26 .lp26-summary-answer { margin-top: var(--space-4); max-width: var(--lp26-measure); color: var(--color-text-secondary); } .cfhub.lp26 .lp26-points { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); } .cfhub.lp26 .lp26-point { position: relative; padding-left: var(--space-6); } /* A compact brand dot, not a rule: the previous 18x2px bar plus a bottom border under every item read as a table of separated rows and ate extra vertical space the list did not need. */ .cfhub.lp26 .lp26-point::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-600); } /* ========================================================================== 8. ON THIS PAGE ========================================================================== */ .cfhub.lp26 .lp26-toc { border-left: 2px solid var(--color-border); padding-left: var(--space-6); } .cfhub.lp26 .lp26-toc-title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; /* text-secondary, not text-muted: both clear AA on the blue band (6.09 vs 4.86), so this is hierarchy, not contrast. */ color: var(--color-text-secondary); margin-bottom: var(--space-4); } .cfhub.lp26 .lp26-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .cfhub.lp26 .lp26-toc-link { font-size: 15px; text-decoration: none; } .cfhub.lp26 .lp26-toc-link:hover { text-decoration: underline; } /* ========================================================================== 9. PROBLEM / NARRATIVE ========================================================================== */ /* Sin margen propio, .lp26-split pegaba su primer párrafo justo debajo del título cuando la sección no lleva intro -- el resto de bloques de contenido (.lp26-tri, .lp26-stats, .lp26-bcols...) sí llevan este mismo margen y este se quedó fuera. */ .cfhub.lp26 .lp26-split { display: grid; gap: var(--space-6); max-width: var(--lp26-measure); margin-top: var(--space-12); } /* El envoltorio compartido de dos columnas para la figura opcional de problem_split, platform_flow y cta -- mismo patrón que .lp26-hero-grid. Existe solo cuando la sección lleva imagen; sin ella, cada bloque se pinta exactamente como antes. El eyebrow/título/intro viajan DENTRO de .lp26-section-text en vez de a lo ancho por encima del todo, para que las dos columnas arranquen a la misma altura -- si el título quedara fuera, el texto empezaría más arriba que la figura y el conjunto no se leería como un único bloque. align-items: stretch (no start) es lo que de verdad iguala las dos columnas: la figura pasa a medir el alto que el texto necesite -- una fila con auto-size ignora un hijo con height:100% para calcular su propio alto, así que ese 100% resuelve DESPUÉS contra lo que el texto ya fijó. Un texto corto (un solo párrafo de platform_flow, o solo el botón de un cta) ya no deja una figura suelta con aire debajo; recorta con object-fit en su lugar. En una sola columna (móvil) cada uno vuelve a su alto natural sin regla aparte: el 100% contra una fila auto-alta se resuelve como auto. */ .cfhub.lp26 .lp26-section-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); /* Two rows, and the eyebrow owns the first one alone: that is what makes the figure start level with the HEADING instead of with the small label above it. A row-gap would reopen that same offset, so the only gap here is between the columns -- the eyebrow's own margin-bottom already spaces it from the heading below. */ grid-template-rows: auto 1fr; column-gap: var(--space-12); row-gap: 0; align-items: stretch; } .cfhub.lp26 .lp26-section-split > .lp26-eyebrow { grid-column: 1; grid-row: 1; } .cfhub.lp26 .lp26-section-split > .lp26-section-text { grid-column: 1; grid-row: 2; } .cfhub.lp26 .lp26-section-split > .lp26-section-figure { grid-column: 2; grid-row: 2; } .cfhub.lp26 .lp26-section-text { min-width: 0; } .cfhub.lp26 .lp26-section-figure { margin: 0; height: 100%; } .cfhub.lp26 .lp26-section-figure img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-large); } .cfhub.lp26 .lp26-split-lines { display: grid; gap: var(--space-5); } .cfhub.lp26 .lp26-split-lines p { color: var(--color-text-secondary); } .cfhub.lp26 .lp26-persp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-10); margin-top: var(--space-12); } .cfhub.lp26 .lp26-persp-col { min-width: 0; } .cfhub.lp26 .lp26-persp-tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-700); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 2px solid var(--color-primary-100); } .cfhub.lp26 .lp26-persp-col p { color: var(--color-text-secondary); } .cfhub.lp26 .lp26-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); } .cfhub.lp26 .lp26-tri-item { min-width: 0; } .cfhub.lp26 .lp26-tri-item p { margin-top: var(--space-3); color: var(--color-text-secondary); } /* Milestones: the same rail-with-nodes pattern as .lp26-steps (section 12), with the period in its own column instead of a step number. */ .cfhub.lp26 .lp26-tl { list-style: none; margin: var(--space-12) 0 0; padding: 0 0 0 var(--space-10); border-left: 2px solid var(--color-border); display: grid; gap: var(--space-10); } .cfhub.lp26 .lp26-tl-item { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-6); min-width: 0; } .cfhub.lp26 .lp26-tl-item::before { content: ""; position: absolute; left: calc((var(--space-10) + 2px) * -1 - 5px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary-600); box-shadow: 0 0 0 4px var(--color-background-page); } .cfhub.lp26 .lp26-bg-soft .lp26-tl-item::before { box-shadow: 0 0 0 4px var(--color-background-soft); } .cfhub.lp26 .lp26-bg-blue .lp26-tl-item::before { box-shadow: 0 0 0 4px var(--color-background-blue); } .cfhub.lp26 .lp26-tl-period { font-size: 14px; font-weight: 700; /* primary-700, not primary-600: the same weight choice .lp26-step-num already fixes below. primary-700 clears both grounds this style has. */ color: var(--color-primary-700); font-variant-numeric: tabular-nums; padding-top: 2px; } .cfhub.lp26 .lp26-tl-body h3 { margin: 0 0 var(--space-2); } .cfhub.lp26 .lp26-tl-body p { margin: 0; color: var(--color-text-secondary); max-width: var(--lp26-measure); } /* ========================================================================== 10. EVIDENCE ========================================================================== */ .cfhub.lp26 .lp26-science { display: grid; gap: var(--space-10); margin-top: var(--space-12); } .cfhub.lp26 .lp26-science-item { max-width: var(--lp26-measure); padding-left: var(--space-6); border-left: 3px solid var(--color-primary-600); } .cfhub.lp26 .lp26-science-tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-700); margin-bottom: var(--space-2); } .cfhub.lp26 .lp26-science-item p { margin-top: var(--space-3); color: var(--color-text-secondary); } .cfhub.lp26 .lp26-science-cite { display: inline-block; margin-top: var(--space-3); font-size: 14px; font-weight: 600; } .cfhub.lp26 .lp26-feat { max-width: var(--lp26-measure); margin-top: var(--space-8); padding: var(--space-8); background: var(--color-primary-050); border-radius: var(--radius-large); } .cfhub.lp26 .lp26-feat-tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-700); } .cfhub.lp26 .lp26-feat-claim { margin-top: var(--space-3); font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--color-text-primary); } .cfhub.lp26 .lp26-feat-link { display: inline-block; margin-top: var(--space-4); font-size: 14px; font-weight: 600; } /* Each claim carried its own margin-top and nothing grouped them: two or more in a row piled up as a loose stack instead of a set. The template wraps them in this container (see Lp26Template::section, "featured_claim"); the container owns the spacing and each item's own margin is neutralised. */ .cfhub.lp26 .lp26-feats { display: grid; gap: var(--space-6); margin-top: var(--space-8); } .cfhub.lp26 .lp26-feats .lp26-feat { margin-top: 0; } .cfhub.lp26 .lp26-evrows { margin-top: var(--space-10); border-top: 1px solid var(--color-border); } .cfhub.lp26 .lp26-evrow { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) auto; gap: var(--space-6); align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; } .cfhub.lp26 .lp26-evrow:hover { background: var(--color-primary-050); } .cfhub.lp26 .lp26-evrow-tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-700); } .cfhub.lp26 .lp26-evrow-claim { min-width: 0; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-evrow-arrow { color: var(--color-primary-600); } .cfhub.lp26 .lp26-studies { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); } .cfhub.lp26 .lp26-study { min-width: 0; padding-top: var(--space-4); border-top: 3px solid var(--color-primary-600); } .cfhub.lp26 .lp26-study-tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-700); margin-bottom: var(--space-2); } .cfhub.lp26 .lp26-study p { color: var(--color-text-secondary); } .cfhub.lp26 .lp26-study-link { display: inline-block; margin-top: var(--space-3); font-size: 14px; font-weight: 600; } /* Logo wall: every cell is a real asset, never a sprite. Grayscale at rest, colour on hover -- the affordance that says "this is a real mark". */ .cfhub.lp26 .lp26-logo-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; /* text-secondary, not text-muted: both clear AA now; secondary is simply the grey this style reads body-adjacent copy in. */ color: var(--color-text-secondary); margin: var(--space-10) 0 var(--space-5); } .cfhub.lp26 .lp26-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-top: var(--space-8); } /* La celda tiene que dar cabida a la altura de imagen de abajo más su propio relleno vertical, o el techo de altura no se alcanza nunca. */ .cfhub.lp26 .lp26-logo-cell { display: flex; align-items: center; justify-content: center; min-height: 104px; padding: var(--space-3) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); transition: border-color .15s ease, box-shadow .15s ease; } /* Dos topes, y cuál manda depende de la forma del logotipo: un logotipo ancho lo limita el ancho, un escudo redondo lo limita el alto. Con el alto en 56px un escudo cuadrado salía a 56x56 dentro de una celda de 177px, o sea una mancha ilegible, mientras el logotipo ancho de al lado se leía perfectamente. No era un problema de tamaño sino de proporción: la altura ahogaba a los cuadrados y no afectaba a los anchos. Subirla solo cambia los primeros. */ .cfhub.lp26 .lp26-logo-cell img { max-width: 100%; max-height: 80px; width: auto; height: auto; filter: grayscale(1); opacity: .72; transition: filter .15s ease, opacity .15s ease; } .cfhub.lp26 .lp26-logo-cell:hover { border-color: var(--color-primary-500); box-shadow: var(--shadow-small); } .cfhub.lp26 .lp26-logo-cell:hover img { filter: none; opacity: 1; } /* ========================================================================== 11. RESULTS Figures are the strongest proof a corporate page carries, so they get the largest type on the page after the h1. ========================================================================== */ .cfhub.lp26 .lp26-stats { display: grid; /* 150px, not 180px: six figures -- the .lp26-wrap content width (1120px) fits six columns at 150px with room to spare, but not at 180px, where the sixth wraps onto a row of its own instead of sitting inline. */ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8) var(--space-8); margin-top: var(--space-12); } /* El filete sobre cada cifra es el separador que el original usa en su barra lateral, traído a la rejilla ancha: da ritmo y agrupa cada cifra con su texto sin encajonarlas en tarjetas. Sin él, seis cifras a 40px flotan sin nada que diga dónde acaba una y empieza la siguiente. */ .cfhub.lp26 .lp26-stat { min-width: 0; padding-top: var(--space-4); border-top: 2px solid var(--color-primary-700); } .cfhub.lp26 .lp26-stat-fig { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.05; font-weight: 700; color: var(--color-primary-700); font-variant-numeric: tabular-nums; } .cfhub.lp26 .lp26-stat-label { margin-top: var(--space-2); font-size: 15px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-srcnote { margin-top: var(--space-8); font-size: 14px; /* text-secondary, not text-muted: both clear AA now; secondary is the reading grey of this style. */ color: var(--color-text-secondary); max-width: 62ch; } .cfhub.lp26 .lp26-story { margin-top: var(--space-10); max-width: var(--lp26-measure); } .cfhub.lp26 .lp26-story-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; /* text-secondary, not text-muted: both clear AA now; secondary is the reading grey of this style. */ color: var(--color-text-secondary); } .cfhub.lp26 .lp26-story-fig { margin-top: var(--space-3); font-size: clamp(30px, 3.6vw, 40px); line-height: 1.05; font-weight: 700; color: var(--color-primary-700); font-variant-numeric: tabular-nums; } .cfhub.lp26 .lp26-story-note { margin-top: var(--space-3); color: var(--color-text-secondary); } /* A second result right after the first one's note had no separation at all -- the figures ran together as one block instead of reading as a sequence. */ .cfhub.lp26 .lp26-story-note + .lp26-story-fig { margin-top: var(--space-8); } .cfhub.lp26 .lp26-bars { margin-top: var(--space-10); max-width: 760px; } /* Beside the bars rather than above them, whenever this block has a label: the label is the reading of the chart, so it belongs next to what it reads, and stacked above it pushed the first bar a full paragraph down the page. */ .cfhub.lp26 .lp26-bars--split { max-width: none; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: start; } .cfhub.lp26 .lp26-bars-label { /* Was 13px uppercase with .1em tracking, which reads as a section eyebrow. That is right for three words and wrong for the paragraph of analysis this field actually carries: all-caps costs word shape, and the tracking costs another line. Same size and colour as the rest of the reading copy in this style. */ font-size: 15px; line-height: 1.6; /* text-secondary, not text-muted: both clear AA now; secondary is the reading grey of this style. */ color: var(--color-text-secondary); margin-bottom: var(--space-6); } /* Side by side the grid gap already separates them, so the stacked margin would double it. */ .cfhub.lp26 .lp26-bars--split .lp26-bars-label { margin-bottom: 0; } .cfhub.lp26 .lp26-bar + .lp26-bar { margin-top: var(--space-6); } .cfhub.lp26 .lp26-bar-head { display: flex; justify-content: space-between; /* Por línea base y no por caja: el nombre es de 15px y la cifra de 20, y centrados verticalmente uno de los dos se ve descolgado. */ align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); font-size: 15px; } /* La cifra que la barra representa, a su lado. En tabular-nums para que varias barras seguidas la alineen aunque cambie de ancho. */ .cfhub.lp26 .lp26-bar-fig { font-size: 20px; font-weight: 700; color: var(--color-primary-700); font-variant-numeric: tabular-nums; } /* La explicación, debajo de la barra: aquí puede crecer sin empujar nada. */ .cfhub.lp26 .lp26-bar-note { margin-top: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-bar-head span { color: var(--color-text-secondary); } .cfhub.lp26 .lp26-bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--color-primary-100); overflow: hidden; } .cfhub.lp26 .lp26-bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-primary-600); } /* ========================================================================== 12. PRODUCT ========================================================================== */ .cfhub.lp26 .lp26-steps { list-style: none; margin: var(--space-12) 0 0; padding: 0 0 0 var(--space-10); border-left: 2px solid var(--color-border); display: grid; gap: var(--space-12); } .cfhub.lp26 .lp26-step { position: relative; min-width: 0; } /* Keyed off the rail, not hand-placed: the rail sits at the padding edge, so the dot is half its own width back from it, minus the border. */ .cfhub.lp26 .lp26-step::before { content: ""; position: absolute; left: calc((var(--space-10) + 2px) * -1 - 5px); top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary-600); box-shadow: 0 0 0 4px var(--color-background-page); } .cfhub.lp26 .lp26-bg-soft .lp26-step::before { box-shadow: 0 0 0 4px var(--color-background-soft); } .cfhub.lp26 .lp26-bg-blue .lp26-step::before { box-shadow: 0 0 0 4px var(--color-background-blue); } .cfhub.lp26 .lp26-step-num { font-size: 13px; font-weight: 700; letter-spacing: .1em; /* primary-700, not primary-600: both clear AA on the soft band (6.55 vs 5.56); the darker step is what makes a 13px label read as deliberate. */ color: var(--color-primary-700); margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; } .cfhub.lp26 .lp26-step-body p { margin-top: var(--space-3); color: var(--color-text-secondary); max-width: var(--lp26-measure); } .cfhub.lp26 .lp26-flow { margin-top: var(--space-10); } .cfhub.lp26 .lp26-flow-text { display: grid; gap: var(--space-5); max-width: var(--lp26-measure); } .cfhub.lp26 .lp26-flow-text p { color: var(--color-text-secondary); } .cfhub.lp26 .lp26-cidx { margin-top: var(--space-10); border-top: 1px solid var(--color-border); } .cfhub.lp26 .lp26-cidx-row { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); align-items: baseline; } .cfhub.lp26 .lp26-cidx-skill { font-weight: 600; text-decoration: none; } .cfhub.lp26 .lp26-cidx-skill:hover { text-decoration: underline; } .cfhub.lp26 .lp26-cidx-def { min-width: 0; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-bcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-10); margin-top: var(--space-12); } .cfhub.lp26 .lp26-bcol { min-width: 0; } .cfhub.lp26 .lp26-bcol p { margin-top: var(--space-3); color: var(--color-text-secondary); } .cfhub.lp26 .lp26-checks { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6) var(--space-10); } .cfhub.lp26 .lp26-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; } .cfhub.lp26 .lp26-check-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--color-success-100); color: var(--color-success-700); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .cfhub.lp26 .lp26-check-mark::before { content: "\2713"; } .cfhub.lp26 .lp26-check-body { min-width: 0; } .cfhub.lp26 .lp26-check-body p { margin-top: var(--space-1); color: var(--color-text-secondary); } .cfhub.lp26 .lp26-mediagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); } .cfhub.lp26 .lp26-figure { margin: 0; min-width: 0; } .cfhub.lp26 .lp26-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-large); border: 1px solid var(--color-border); background: var(--color-background-soft); } .cfhub.lp26 .lp26-figcap { margin-top: var(--space-3); font-size: 14px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-video { margin-top: var(--space-12); max-width: 860px; } .cfhub.lp26 .lp26-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-large); overflow: hidden; background: var(--color-primary-900); } .cfhub.lp26 .lp26-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .cfhub.lp26 .lp26-video-caption { margin-top: var(--space-3); font-size: 14px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } .cfhub.lp26 .lp26-card { min-width: 0; padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-large); } .cfhub.lp26 .lp26-card-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); } .cfhub.lp26 .lp26-card-text { margin-top: var(--space-3); color: var(--color-text-secondary); } /* ========================================================================== 13. CONVERSION ========================================================================== */ .cfhub.lp26 .lp26-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } .cfhub.lp26 .lp26-path { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-large); text-decoration: none; color: inherit; background: var(--color-surface); } .cfhub.lp26 .lp26-path:hover { border-color: var(--color-primary-600); box-shadow: var(--shadow-small); } .cfhub.lp26 .lp26-path-h { font-weight: 600; color: var(--color-text-primary); } .cfhub.lp26 .lp26-path-d { color: var(--color-text-secondary); font-size: 15px; } .cfhub.lp26 .lp26-path-arrow { color: var(--color-primary-600); font-weight: 700; } .cfhub.lp26 .lp26-faq { margin-top: var(--space-10); border-top: 1px solid var(--color-border); max-width: 860px; } .cfhub.lp26 .lp26-faq details { border-bottom: 1px solid var(--color-border); } .cfhub.lp26 .lp26-faq summary { cursor: pointer; padding: var(--space-5) var(--space-8) var(--space-5) 0; font-weight: 600; color: var(--color-text-primary); list-style: none; position: relative; } .cfhub.lp26 .lp26-faq summary::-webkit-details-marker { display: none; } .cfhub.lp26 .lp26-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--color-primary-600); } .cfhub.lp26 .lp26-faq details[open] summary::after { content: "\2212"; } .cfhub.lp26 .lp26-faq-answer { padding: 0 var(--space-8) var(--space-6) 0; color: var(--color-text-secondary); max-width: var(--lp26-measure); } /* Same shape as .lp26-hero-actions and for the same reason: a cta section can carry more than one button (see the survey page's two download links), and with no flex/gap here they stacked flush against each other -- zero space between two solid-blue pills reads as one broken button, worse still when the second one's label wraps to two lines and its taller box overlaps the first. The row owns the gap so neither button adds its own and drifts. */ .cfhub.lp26 .lp26-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); } .cfhub.lp26 .lp26-cta .lp26-btn { margin-top: 0; } .cfhub.lp26 .lp26-cta-arrow { font-weight: 700; } /* ========================================================================== 14. PAGE FURNITURE ========================================================================== */ .cfhub.lp26 .lp26-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-8); } .cfhub.lp26 .lp26-more-link { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-medium); text-decoration: none; font-weight: 600; background: var(--color-surface); } .cfhub.lp26 .lp26-more-link:hover { border-color: var(--color-primary-600); } .cfhub.lp26 .lp26-trust { padding: var(--space-12) 0 var(--space-16); } .cfhub.lp26 .lp26-trust-note { max-width: 62ch; font-size: 14px; line-height: 1.6; /* The medical disclaimer is the last thing that should be hard to read. */ color: var(--color-text-secondary); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } /* ========================================================================== 15. RESPONSIVE ========================================================================== */ @media (max-width: 1120px) { .cfhub.lp26 .lp26-summary { gap: var(--space-12); } } /* Five or six figures on a tablet: auto-fit gives four or five columns here, leaving an orphan last row (6 -> 4 + 2). Three columns split them evenly. Scoped to five and six children -- with four, three columns would orphan one in turn. */ @media (min-width: 700px) and (max-width: 1119px) { .cfhub.lp26 .lp26-stats:has(> :nth-child(5)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Room for cognifit.web's share rail, which floats over the page at 0..48px and swallowed the first letter of every heading. Measured bounds: above 1300px the 1120px max-width already clears it; at 1024px the rail moves to the foot. Wrapped mode only -- a self-contained page carries no rail. */ @media (min-width: 1025px) and (max-width: 1300px) { .cfhub.lp26.lp26--wrapped { --lp26-gutter: 64px; } } @media (max-width: 860px) { .cfhub.lp26 { --lp26-gutter: var(--space-6); } .cfhub.lp26 .lp26-section { padding: var(--space-16) 0; } .cfhub.lp26 .lp26-section + .lp26-section:not(.lp26-bg-soft):not(.lp26-bg-blue) > .lp26-wrap { padding-top: var(--space-16); margin-top: calc(var(--space-16) * -1); } .cfhub.lp26 .lp26-hero { padding: var(--space-12) 0 var(--space-16); } .cfhub.lp26.lp26--wrapped .lp26-hero { padding-top: 92px; } .cfhub.lp26 .lp26-summary { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } .cfhub.lp26 .lp26-toc { border-left: 0; border-top: 2px solid var(--color-border); padding-left: 0; padding-top: var(--space-6); } /* h2 is fixed at 32px above (no clamp), so the narrow-viewport step down has to be stated here instead of falling out of a clamp() minimum. */ .cfhub.lp26 main h2, .cfhub.lp26 .lp26-h2 { font-size: 28px; } .cfhub.lp26 .lp26-evrow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); } .cfhub.lp26 .lp26-evrow-tag { grid-column: 1 / -1; } .cfhub.lp26 .lp26-cidx-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .cfhub.lp26 .lp26-tl-item { grid-template-columns: 72px minmax(0, 1fr); } /* One column left: the label goes back above its bars, which is the order it reads in anyway. */ .cfhub.lp26 .lp26-bars--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .cfhub.lp26 .lp26-bars--split .lp26-bars-label { margin-bottom: 0; } } @media (max-width: 520px) { .cfhub.lp26 .lp26-steps { padding-left: var(--space-6); } .cfhub.lp26 .lp26-step::before { left: calc((var(--space-6) + 2px) * -1 - 5px); } .cfhub.lp26 .lp26-card { padding: var(--space-6); } .cfhub.lp26 .lp26-feat { padding: var(--space-6); } .cfhub.lp26 .lp26-stats { gap: var(--space-8); } .cfhub.lp26 .lp26-tl { padding-left: var(--space-6); } .cfhub.lp26 .lp26-tl-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .cfhub.lp26 .lp26-tl-item::before { left: calc((var(--space-6) + 2px) * -1 - 5px); } } @media (prefers-reduced-motion: reduce) { .cfhub.lp26 * { transition: none !important; } } /* ---- Hero with a visual --------------------------------------------------- The hero's optional column: the page's own presentation video or a library image beside the headline -- the real /company pattern. Without one the hero keeps its single column and its markup exactly as before. align-items: stretch, not center: a 16:9 video is shorter than a long headline+lead+buttons column, and centring it left dead air above and below instead of the video matching the text's own height. */ .cfhub.lp26 .lp26-hero-grid { display: grid; /* The visual is the wider half here, unlike the section split below: a 16:9 player squeezed into the narrower column read as a thumbnail beside the headline rather than as the hero's own picture. */ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); /* Same two-row shape as .lp26-section-split, for the same reason: the kicker takes the first row on its own so the visual starts level with the h1 instead of with the small label above it. */ grid-template-rows: auto 1fr; column-gap: var(--space-12); row-gap: 0; align-items: stretch; } .cfhub.lp26 .lp26-hero-grid > .lp26-kicker { grid-column: 1; grid-row: 1; } .cfhub.lp26 .lp26-hero-grid > .lp26-hero-inner { grid-column: 1; grid-row: 2; } .cfhub.lp26 .lp26-hero-grid > .lp26-hero-visual, .cfhub.lp26 .lp26-hero-grid > .lp26-hero-toc { grid-column: 2; grid-row: 2; } .cfhub.lp26 .lp26-hero-grid .lp26-hero-inner { max-width: none; } /* The index column is not a picture column: it holds a handful of headings, so it takes less width and hangs from the top instead of centring against a headline it is much shorter than. */ .cfhub.lp26 .lp26-hero-grid-index { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } /* Beside the headline the index is a card, not the ruled column it is down in the summary band: there is no prose here for a rule to separate it from, and on the hero's own gradient a plain list would read as loose links. The three inner classes (title, list, link) are shared with the band, so the type is the same in both. */ .cfhub.lp26 .lp26-hero-toc { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); } /* Overrides .lp26-video-frame's own aspect-ratio: 16/9 (kept for the standalone `video` section, which has no text column to match) -- here the frame's height comes from the stretched grid row instead, same reasoning as .lp26-section-figure above. */ .cfhub.lp26 .lp26-hero-visual .lp26-video-frame { margin: 0; aspect-ratio: auto; height: 100%; } .cfhub.lp26 .lp26-hero-figure { margin: 0; height: 100%; } .cfhub.lp26 .lp26-hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-large); } @media (max-width: 860px) { .cfhub.lp26 .lp26-hero-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--space-8); } .cfhub.lp26 .lp26-section-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-8); } /* The row/column placements above are what put the visual beside the heading; stacked, they would send it into an implicit SECOND column that no longer exists in the template. Back to plain source order. */ .cfhub.lp26 .lp26-hero-grid > .lp26-kicker, .cfhub.lp26 .lp26-hero-grid > .lp26-hero-inner, .cfhub.lp26 .lp26-hero-grid > .lp26-hero-visual, .cfhub.lp26 .lp26-hero-grid > .lp26-hero-toc, .cfhub.lp26 .lp26-section-split > .lp26-eyebrow, .cfhub.lp26 .lp26-section-split > .lp26-section-text, .cfhub.lp26 .lp26-section-split > .lp26-section-figure { grid-column: 1; grid-row: auto; } /* Stacked into one column, there is no second column's height left to stretch against -- height:100% here would resolve against a row that auto-sizes FROM this very element, collapsing it to nothing. Back to each visual's own natural height, same as the no-figure case always was. */ .cfhub.lp26 .lp26-hero-visual .lp26-video-frame { aspect-ratio: 16 / 9; height: auto; } .cfhub.lp26 .lp26-hero-figure, .cfhub.lp26 .lp26-section-figure { height: auto; } .cfhub.lp26 .lp26-hero-figure img, .cfhub.lp26 .lp26-section-figure img { height: auto; } } /* ---- Card with a portrait ------------------------------------------------ A card's image is optional. When one is present the card leads with it, so a person's face sits in their own card instead of in a gallery above the names -- which is what the real /company/team page does. */ .cfhub.lp26 .lp26-card--with-image { display: flex; flex-direction: column; } .cfhub.lp26 .lp26-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-medium, 10px); margin-bottom: var(--space-4); background: var(--color-background-soft); } /* Tap targets. These links are chips, not prose: a citation button, a study link, a row that is its own destination. They measured 20 to 23 px tall -- just under the 24 WCAG 2.2 AA 2.5.8 asks of a target that is not inline in a sentence, and that the browser audit measures. The shell sheet gives every style its link LISTS a tap box; these are this style's own components, so they are named here, where the classes live. */ .cfhub.lp26 .lp26-science-cite, .cfhub.lp26 .lp26-feat-link, .cfhub.lp26 .lp26-study-link { min-height: 24px; display: inline-flex; align-items: center; } /* Email capture -- the only block that asks the reader for anything. The label is visible and never replaced by a placeholder: a placeholder disappears the moment someone types, and a11y_form_labels blocks the page without a real one. Colours are the sheet's own text tokens, both AA on white (6.69:1 and 21:1). */ .cfhub.lp26 .lp26-capture { margin-top: var(--space-8); max-width: 34rem; } .cfhub.lp26 .lp26-capture-label { display: block; font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--space-3); } .cfhub.lp26 .lp26-capture-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; } .cfhub.lp26 .lp26-capture-input { flex: 1 1 16rem; min-height: 48px; padding: 0 14px; font: inherit; color: var(--color-text-primary); background: #FFFFFF; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); } .cfhub.lp26 .lp26-capture-input:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 1px; } .cfhub.lp26 .lp26-capture-row .lp26-btn { margin-top: 0; } .cfhub.lp26 .lp26-capture-note { margin-top: var(--space-3); font-size: 14px; color: var(--color-text-secondary); } /* Las dos respuestas del formulario. Empiezan con [hidden] en el documento y el script descubre una; sin script no se ven, que es lo correcto porque entonces la respuesta la da el propio endpoint al navegar. Verde 5.02:1 y rojo 6.54:1 sobre blanco: ambos AA. */ .cfhub.lp26 .lp26-capture-status { margin-top: var(--space-3); font-size: 14px; font-weight: 700; } .cfhub.lp26 .lp26-capture-status[hidden] { display: none; } .cfhub.lp26 .lp26-capture-ok { color: var(--color-success-700); } .cfhub.lp26 .lp26-capture-error { color: #B3261E; } /* Contact popup -- the second block that asks the reader for anything, and the first PagePartial (see src/Services/Rendering/Partials). _source: layout measured off cognifit.web's own `_contact-us.phtml` / `newart.css` (ContactPopup.php carries the full provenance note); the vocabulary below is this side's own, not `ta_popupContactComercial`. The icon avatar, the icon-prefixed fields and the icon meta lines follow a reference the design was asked to get closer to, redrawn in lp26's own light palette -- lp26 forbids a dark full-bleed surface (see the hero's own rule), so this stays a light card, not the reference's navy one. Still reuses .lp26-capture-status and .lp26-btn rather than restating their colours. 24px is a deliberate step past --radius-large (16px): a full-screen dialog reads as its own surface, not another card on the page. */ .cfhub.lp26 .lp26-contact { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: var(--space-6); background: rgba(6, 51, 116, .5); overflow-y: auto; } .cfhub.lp26 .lp26-contact:not([hidden]) { display: flex; } .cfhub.lp26 .lp26-contact-card { position: relative; width: 100%; max-width: 30rem; max-height: calc(100vh - var(--space-8)); overflow-y: auto; background-color: var(--color-surface); border-radius: 24px; box-shadow: var(--shadow-large); padding: var(--space-10) var(--space-8) var(--space-8); text-align: center; } .cfhub.lp26 .lp26-contact-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-pill); background: transparent; cursor: pointer; } .cfhub.lp26 .lp26-contact-close::before, .cfhub.lp26 .lp26-contact-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: var(--color-text-secondary); transform-origin: center; } .cfhub.lp26 .lp26-contact-close::before { transform: translate(-50%, -50%) rotate(45deg); } .cfhub.lp26 .lp26-contact-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .cfhub.lp26 .lp26-contact-close:hover::before, .cfhub.lp26 .lp26-contact-close:hover::after { background: var(--color-text-primary); } .cfhub.lp26 .lp26-contact-close:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } /* The avatar is decorative (aria-hidden in the markup); --color-cta-deep on --color-primary-100 still clears 4.5:1 in case the contrast guard reads it as text. */ .cfhub.lp26 .lp26-contact-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: var(--radius-pill); background: var(--color-primary-100); color: var(--color-cta-deep); } .cfhub.lp26 .lp26-contact-icon svg { width: 28px; height: 28px; } .cfhub.lp26 .lp26-contact-sub { margin-top: var(--space-2); font-size: 15px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-contact-form { margin-top: var(--space-6); text-align: left; } .cfhub.lp26 .lp26-contact-field { position: relative; display: flex; align-items: center; } .cfhub.lp26 .lp26-contact-form .lp26-contact-field:not(:first-child) { margin-top: var(--space-3); } .cfhub.lp26 .lp26-contact-field-icon { position: absolute; top: 50%; left: var(--space-4); width: 20px; height: 20px; color: var(--color-text-secondary); pointer-events: none; transform: translateY(-50%); } .cfhub.lp26 .lp26-contact-field-icon--top { top: var(--space-3); transform: none; } .cfhub.lp26 .lp26-contact-input { display: block; width: 100%; min-height: 48px; padding: 0 var(--space-4) 0 44px; font: inherit; color: var(--color-text-primary); background: #FFFFFF; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); } .cfhub.lp26 .lp26-contact-input:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 1px; } .cfhub.lp26 .lp26-contact-textarea { min-height: 96px; padding-top: var(--space-3); resize: vertical; } .cfhub.lp26 .lp26-contact-meta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); font-size: 13px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-contact-meta-icon { width: 16px; height: 16px; flex-shrink: 0; } .cfhub.lp26 .lp26-contact-form .lp26-btn { width: 100%; margin-top: var(--space-4); } .cfhub.lp26 .lp26-contact-form .lp26-capture-status { margin-top: 0; margin-bottom: var(--space-4); } /* ========================================================================== PERSONAS Tarjeta pequeña y densa, como la página de equipo de cognifit.com: retrato cuadrado a sangre, nombre, cargo, LinkedIn y la biografía plegada. La rejilla se llena sola (auto-fill) en vez de fijar seis columnas, así que un grupo de tres personas no deja tres huecos. ========================================================================== */ .cfhub.lp26 .lp26-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-5); margin-top: var(--space-8); /* Default `stretch`, on purpose: it levels the cards in a row. What stops an open biography from dragging its neighbours is not the alignment but the open card taking the whole row -- see .lp26-person:has() below. */ } .cfhub.lp26 .lp26-person { display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-large); box-shadow: var(--shadow-small); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cfhub.lp26 .lp26-person:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--color-primary-500); } @media (prefers-reduced-motion: reduce) { .cfhub.lp26 .lp26-person { transition: none; } .cfhub.lp26 .lp26-person:hover { transform: none; } } /* El retrato manda en la altura: cuadrado, recortado al centro, para que una rejilla de caras quede alineada aunque las fotos vengan en tamaños distintos. */ .cfhub.lp26 .lp26-person-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-background-soft); } .cfhub.lp26 .lp26-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .cfhub.lp26 .lp26-person-body { flex: 1 1 auto; padding: var(--space-4); } .cfhub.lp26 .lp26-person-name { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--color-text-primary); } .cfhub.lp26 .lp26-person-role { margin: var(--space-1) 0 0; font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); } /* Los dos controles de la ficha se tocan con el dedo, y a 13px la línea mide 21px de alto: tres por debajo del mínimo de 24 que exige WCAG 2.2 para un objetivo táctil. Se gana con relleno vertical, no subiendo la letra, porque el tamaño del texto es una decisión de jerarquía dentro de la ficha y el área que se toca no tiene por qué medir lo mismo que lo que se lee. El margen superior cede 4px de los 8 que suma el relleno, así que la ficha crece 4px y el control gana 8: el dedo acierta y la rejilla no se descoloca. */ .cfhub.lp26 .lp26-person-link { display: inline-block; margin-top: var(--space-2); padding: var(--space-1) 0; min-height: 24px; font-size: 13px; font-weight: 700; color: var(--color-link); } /* El desplegable es details nativo: el triángulo lo pone el navegador y el teclado funciona sin que nadie escriba nada. */ .cfhub.lp26 .lp26-person-bio { margin-top: var(--space-3); } .cfhub.lp26 .lp26-person-bio > summary { cursor: pointer; padding: var(--space-1) 0; min-height: 24px; font-size: 13px; font-weight: 700; color: var(--color-link); } .cfhub.lp26 .lp26-person-bio > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .cfhub.lp26 .lp26-person-bio > p { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: 13px; line-height: 1.65; color: var(--color-text-secondary); /* Prose needs a reading measure. Without this it inherits its grid column: 136px, about 21 characters per line. */ max-width: 70ch; } /* An open card takes the whole row: it gives the text a reading width, and leaves the card alone in its row so growing cannot drag its neighbours. Every width -- on a phone the grid is two columns and it still would. */ .cfhub.lp26 .lp26-person:has(.lp26-person-bio[open]) { grid-column: 1 / -1; } /* Portrait beside the text only where there is room; stacked below 700px. */ @media (min-width: 700px) { .cfhub.lp26 .lp26-person:has(.lp26-person-bio[open]) { flex-direction: row; align-items: flex-start; } .cfhub.lp26 .lp26-person:has(.lp26-person-bio[open]) .lp26-person-photo { flex: none; width: 170px; } } @media (max-width: 520px) { .cfhub.lp26 .lp26-people { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* El icono de LinkedIn: alineado con el texto y del color del enlace, porque hereda currentColor. */ .cfhub.lp26 .lp26-person-link { display: inline-flex; align-items: center; gap: 6px; } .cfhub.lp26 .lp26-person-icon { flex: none; } /* Contacto de prensa. Una ficha, no un párrafo: quien llega a esta página suele estar buscando exactamente una cosa -- a quién escribir -- y debe encontrarla sin leer. El

es semántico y el navegador lo pone en cursiva por su cuenta, cosa que aquí no se quiere. */ .cfhub.lp26 .lp26-press { font-style: normal; display: grid; gap: var(--space-2); margin-top: var(--space-8); /* Las medidas de la ficha lateral del original: fondo gris suave y radio grande, no la tarjeta blanca que usa todo lo demás. Es lo que la distingue al hojear, que es como se lee una nota de prensa. */ /* 26 y no 24: es el valor del original, y no está en la escala de 4. Se escribe literal en vez de inventar un token para un solo uso. */ padding: var(--space-6) 26px; background: var(--color-background-soft); border: 1px solid var(--color-border); border-radius: var(--radius-large); } .cfhub.lp26 .lp26-press-office { font-weight: 700; } .cfhub.lp26 .lp26-press-mail { /* Se toca con el dedo: 24px es el mínimo de WCAG 2.2 y a este tamaño la línea se queda corta. */ display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; font-size: 18px; font-weight: 700; color: var(--color-link); word-break: break-all; } .cfhub.lp26 .lp26-press-when { font-size: 14px; color: var(--color-text-secondary); } /* Cita destacada. Las medidas están copiadas del muro original de cognifit.com, no elegidas: blockquote a 20px en cursiva, peso 600, y un filete azul de 3px a 24px del texto. Es lo que hace que se lea como algo que alguien dijo y no como un párrafo más -- la versión que esto sustituye era gris, de 16px y con el nombre encima en pequeño, y pasaba por prosa de la página. */ .cfhub.lp26 .lp26-quote { margin: var(--space-8) 0 0; padding: var(--space-1) 0 var(--space-1) var(--space-6); border-left: 3px solid var(--color-primary-600); } .cfhub.lp26 .lp26-quote-text { margin: 0 0 var(--space-3); font-size: 20px; font-style: italic; font-weight: 600; line-height: 1.5; color: var(--color-primary-900); } .cfhub.lp26 .lp26-quote-by { font-size: 13px; font-weight: 600; /* text-secondary y no text-muted: la firma es información, no un pie de foto decorativo, y en gris claro dejaría de leerse. */ color: var(--color-text-secondary); } /* Cabecera de nota de prensa. El estado de difusión y el tipo de documento son dos datos distintos y hasta ahora iban apretados en una sola línea del mismo azul; el verde marca lo que un periodista mira primero. */ .cfhub.lp26 .lp26-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .cfhub.lp26 .lp26-release { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); /* success-700 sobre success-100: 5.31:1, AA de sobra. */ background: var(--color-success-100); color: var(--color-success-700); } .cfhub.lp26 .lp26-dateline { margin-top: var(--space-6); font-size: 14px; font-style: italic; color: var(--color-text-secondary); } /* La negrita dentro de un párrafo sube a texto primario, no solo de peso. El párrafo va en gris secundario, así que el peso solo apenas se distingue: lo que hace que destaque es el salto de color, y es lo que hace el original (.lp26-article-main p strong { color: var(--color-text-primary) }). */ .cfhub.lp26 .lp26-split-lines p strong, .cfhub.lp26 .lp26-flow-text p strong { color: var(--color-text-primary); } /* ========================================================================== DOWNLOADS + BOILERPLATE (newsroom) The download grid mirrors the card idiom above (.lp26-cards); the icon chip reuses the popup avatar's palette so every drawn icon on the page comes from one visual family. The boilerplate is a quotable panel: its copy button is progressive enhancement (BoilerplateCopyScript), so the confirmation ships hidden and the script only toggles the attribute. ========================================================================== */ .cfhub.lp26 .lp26-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } .cfhub.lp26 .lp26-dl-card { display: flex; gap: var(--space-4); min-width: 0; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-large); } .cfhub.lp26 .lp26-dl-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-medium); background: var(--color-primary-100); color: var(--color-cta-deep); } .cfhub.lp26 .lp26-dl-icon svg { width: 22px; height: 22px; } .cfhub.lp26 .lp26-dl-body { min-width: 0; } .cfhub.lp26 .lp26-dl-body h3 { font-size: 17px; font-weight: 600; color: var(--color-text-primary); } .cfhub.lp26 .lp26-dl-body p { margin-top: var(--space-2); font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-dl-body .lp26-btn { margin-top: var(--space-4); } /* Inside the button but visibly subordinate: the label is the action, the size is the warning. */ .cfhub.lp26 .lp26-dl-size { font-weight: 400; font-size: 13px; opacity: .85; } .cfhub.lp26 .lp26-bp { margin-top: var(--space-10); padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-cta-deep); border-radius: var(--radius-large); } .cfhub.lp26 .lp26-bp-text { font-size: 15px; line-height: 1.7; color: var(--color-text-primary); } .cfhub.lp26 .lp26-bp-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); } .cfhub.lp26 .lp26-bp-copy { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); font: inherit; font-size: 14px; font-weight: 600; color: var(--color-cta-deep); background: transparent; border: 1px solid var(--color-cta-deep); border-radius: var(--radius-pill); cursor: pointer; } .cfhub.lp26 .lp26-bp-copy:hover { background: var(--color-primary-100); } .cfhub.lp26 .lp26-bp-copy:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .cfhub.lp26 .lp26-bp-ok { font-size: 14px; color: var(--color-success-700); } /* Últimas noticias (newsroom, ADR-018): lista de una columna, tarjetas con regla superior -- el idioma de .lp26-pr-card del original, en vocabulario propio. El script del CDN reconstruye estas mismas clases. */ .cfhub.lp26 .lp26-news { margin-top: var(--space-10); max-width: 820px; } .cfhub.lp26 .lp26-news-card { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); } .cfhub.lp26 .lp26-news-card h3 { margin-top: var(--space-2); font-size: 19px; font-weight: 600; color: var(--color-text-primary); } .cfhub.lp26 .lp26-news-card p { margin-top: var(--space-2); font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-news-meta { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--color-text-secondary); } .cfhub.lp26 .lp26-news-tag { display: inline-flex; padding: 2px 10px; font-size: 12px; font-weight: 700; color: var(--color-cta-deep); background: var(--color-primary-100); border-radius: var(--radius-pill); } .cfhub.lp26 .lp26-news-more { display: inline-flex; margin-top: var(--space-3); font-size: 14px; font-weight: 600; color: var(--color-cta-deep); text-decoration: none; } .cfhub.lp26 .lp26-news-more:hover { text-decoration: underline; } .cfhub.lp26 .lp26-news-all { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .cfhub.lp26 .lp26-news-all a { font-size: 15px; font-weight: 600; color: var(--color-cta-deep); text-decoration: none; } .cfhub.lp26 .lp26-news-all a:hover { text-decoration: underline; }