/* * Imagunet — shared component styles. * * Styling that supports reusable block components (Patterns > Imagunet). Hooked via * data-* attributes because GenerateBlocks strips custom classes from htmlAttributes * but keeps data-* (see ~/HANDOFF.md). * * The FAQ rules below were previously duplicated in zabbix.css; they now live here * once and serve every page. [data-zbx-faq] is kept so the existing Zabbix page keeps * working without editing its content. */ /* ---- FAQ accordion (core/details blocks) ---- */ [data-imagunet-faq] .wp-block-details, [data-zbx-faq] .wp-block-details { border-bottom: 1px solid #DCDCDC; padding: 22px 4px; } [data-imagunet-faq] .wp-block-details summary, [data-zbx-faq] .wp-block-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.4; color: #101316; } [data-imagunet-faq] .wp-block-details summary::-webkit-details-marker, [data-zbx-faq] .wp-block-details summary::-webkit-details-marker { display: none; } [data-imagunet-faq] .wp-block-details summary::after, [data-zbx-faq] .wp-block-details summary::after { content: ''; flex-shrink: 0; width: 11px; height: 11px; border-right: 2px solid #101316; border-bottom: 2px solid #101316; transform: rotate(-45deg); /* points right when closed */ transition: transform .25s ease; margin-right: 6px; } [data-imagunet-faq] .wp-block-details[open] summary::after, [data-zbx-faq] .wp-block-details[open] summary::after { transform: rotate(45deg); /* points down when open */ } [data-imagunet-faq] .wp-block-details > *:not(summary), [data-zbx-faq] .wp-block-details > *:not(summary) { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.65; color: #5B6570; margin-top: 14px; margin-bottom: 0; max-width: 60ch; } /* ---- Infinite logo marquee ---- * Structure comes from the blocks (see patterns/seccion-partners.php); marquee.js * measures one pass, clones the set until it fills the viewport twice and sets * --imagunet-marquee-duration. Everything below is compositor-only. * * Speed and gap replicate old prod's `.cpt-swiper-list`, measured live: * ~118 px/s scrolling left, 70px gap, logos 70px tall, object-fit: contain. */ [data-imagunet-marquee] { width: max-content; will-change: transform; } [data-imagunet-marquee][data-marquee-ready="1"] { animation: imagunet-marquee var(--imagunet-marquee-duration, 30s) linear infinite; } @keyframes imagunet-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Pausing on hover lets someone actually read a logo they spotted. */ [data-imagunet-marquee]:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { [data-imagunet-marquee][data-marquee-ready="1"] { animation: none; } } /* ---- Page backdrop for the block-built pages ---- * These pages paint their own section backgrounds, but GeneratePress's * "separate containers" mode gives .inside-article a white background that sits on top * of the page background. Anywhere a section doesn't cover — notably the 120px * bottom-left radius cut on the hero — that white showed through. Old prod uses * #F7F7F7 as the page backdrop (its ), with every wrapper transparent. * Scoped to .full-width-content so the blog's boxed layout is unaffected. */ body.full-width-content { background-color: #F7F7F7; } body.full-width-content .inside-article, body.full-width-content .entry-content, body.full-width-content .site-content { background-color: transparent; } /* ---- Filetes entre celdas (filas de cifras / etapas) ---- * Old prod separates those cells with 1.2px gradient PSEUDO-ELEMENTS, not borders: * linear-gradient(to bottom, #4C4C4C, transparent) at full cell height, so each rule * fades out downward and the row reads as open-bottomed boxes. Measured on * .elementor-element-7d3495e / 5f3f8031 / 73357cee in ~/oldsite-capture/post-11.css. * * A cell draws a rule on its LEFT edge when it carries `imagunet-col--rule`; a row * marked `--ruled--closed` also draws one past its last cell, which is what gives the * cifras row its four rules (both outer edges included). The etapas row is left open, * so only its inner cells carry the class. * * Only the pseudo-elements live here. The row's border-top, each cell's padding and the * icon colours stay in the blocks' own GB styles so they remain editable from the block * panel (see ~/HANDOFF.md 7.5). */ .imagunet-row--ruled > .imagunet-col--rule::before, .imagunet-row--ruled--closed > .imagunet-col--rule:last-child::after { content: ""; position: absolute; top: 0; width: 1.2px; height: 100%; background: linear-gradient(to bottom, #4C4C4C, transparent); pointer-events: none; z-index: 2; } .imagunet-row--ruled > .imagunet-col--rule::before { left: 0; } .imagunet-row--ruled--closed > .imagunet-col--rule:last-child::after { right: 0; } /* The middle rule of the etapas row is old prod's Line.png — a 2x228 raster carrying a * grey -> purple -> magenta -> orange -> red gradient at ~62% alpha. Decoded from the * original file and reproduced in CSS, so nothing depends on old prod staying online * and no raster hairline has to be imported. Old prod lays it OVER that cell's grey * rule rather than instead of it, so this is a second pseudo-element, not an override. */ .imagunet-row--ruled > .imagunet-col--rule-accent::after { content: ""; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; width: 2px; height: 228px; background: linear-gradient(to bottom, rgba(60, 60, 62, .62) 0%, rgba(114, 47, 128, .62) 22%, rgba(167, 30, 192, .62) 44%, rgba(208, 18, 247, .62) 62%, rgba(144, 64, 229, .62) 75%, rgba(241, 122, 22, .62) 88%, rgba(255, 48, 48, .62) 100%); } /* Stacked, the verticals become a separator under every cell but the last — which is * what old prod's own ::before flip does on its cifras row. */ @media (max-width: 767px) { .imagunet-row--ruled > .imagunet-col::before { content: ""; position: absolute; left: 0; top: auto; bottom: 0; width: 100%; height: 1.2px; background: linear-gradient(to bottom, #4C4C4C, transparent); pointer-events: none; z-index: 2; } .imagunet-row--ruled > .imagunet-col:last-child::before, .imagunet-row--ruled > .imagunet-col--rule-accent::after, .imagunet-row--ruled--closed > .imagunet-col--rule:last-child::after { display: none; } } /* -------------------------------------------------------------------------- * Vídeo incrustado (casos de éxito) * Los embeds viven en un bloque core/html porque GenerateBlocks no serializa *