-- so its own margin formula matches .cto-masthead's (cancels the masthead's trailing space-4 gap on top, keeps the standard space-4 gap on bottom before .page-body). */ .cto-page .cto-band--panel { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) var(--space-4); min-height: 0; display: block; text-align: left; padding: 120px 0; /* post-4747.css .elementor-element-5c48052d padding:120px 0px 120px 0px */ } .cto-page .cto-band__inner--panel { position: static; z-index: auto; max-width: 1170px; /* post-4747.css .elementor-element-5c48052d > .elementor-container max-width:1170px */ margin: 0 auto; padding: 0 24px; display: grid; /* post-4747.css @media(min-width:768px): fbe4016 width:6% (red bar), 7edfb75e width:58.577% (prose), 28be505d width:35.087% (dead space). */ grid-template-columns: 6% 58.577% 35.087%; gap: 0; align-items: stretch; } .cto-page .cto-band__col--accent { /* post-4747.css .elementor-element-fbe4016 > .elementor-widget-wrap background-color:#f00001 (exact original red, NOT the theme --accent #EF1C1C); no min-height in the original -- the bar is as tall as the prose row, never taller. */ background: #f00001; } .cto-page .cto-band__col--body { /* post-4747.css .elementor-element-7edfb75e > .elementor-element-populated margin:-5px 0px 0px 129px (margin-left 129px separates prose from bar). */ margin: -5px 0 0 129px; padding: 0; color: #fff; font-family: "Questrial", var(--font-body); font-size: 1em; line-height: 1.65; text-align: left; } .cto-page .cto-band__col--body p { margin: 0 0 var(--space-3); color: #fff; } .cto-page .cto-band__col--body p:last-child { margin-bottom: 0; } .cto-page .cto-band__col--body strong, .cto-page .cto-band__col--body b { font-weight: 700; } .cto-page .cto-band__col--empty { /* real dead space at desktop widths, per baseline */ } @media (max-width: 1024px) { /* post-4747.css @media(max-width:1024px): 5c48052d padding:80px 15px 80px 15px; 7edfb75e populated margin-left:50px. */ .cto-page .cto-band--panel { padding: 80px 15px; } .cto-page .cto-band__col--body { margin: -5px 0 0 50px; } } @media (max-width: 767px) { /* post-4747.css @media(max-width:767px): 5c48052d padding:50px 15px 47px 15px; fbe4016 width:10%; 7edfb75e width:90%, populated margin-left:30px; 28be505d width:100% (dead space -> collapsed/hidden here). */ .cto-page .cto-band--panel { padding: 50px 15px 47px; } .cto-page .cto-band__inner--panel { grid-template-columns: 10% 90%; padding: 0; } .cto-page .cto-band__col--body { margin: 0 0 0 30px; } .cto-page .cto-band__col--empty { display: none; } } @media (max-width: 560px) { .cto-page .cto-band--panel { margin: calc(-1 * var(--space-3)) 0 var(--space-3); } } /* --- .course-video (net-new, cursos VIDEO pass, 2026-07-10). Ambient-video band inside post_content, BEFORE the "Onde estamos" heading. Same treatment as the home hero video (template-cto-home.php lines 51-56): native HTML5 with NO `controls` attribute and no tracks -- never a YouTube iframe (page.php 0-remote-hosts contract). Media file is local (/wp-content/uploads/2026/07/cursos-video.mp4, 720p). Full column width at the video's OWN aspect (width:100% + height:auto = intrinsic 16:9, never cropped/zoomed -- fidelity contract: no cover crops). */ .cto-page .course-video { margin: var(--space-4) 0; } .cto-page .course-video__media { display: block; width: 100%; height: auto; } /* --- .course-grid / .course-card (net-new, cursos DESIGN-FIDELITY pass, 2026-07-09). SQUARE 1:1 photo (baseline crop files are physically square, e.g. fotografo_luis_gomes_MG_982621 renders 270x270 -- NOT 4:3, no border-radius), title -> Sympla, date, ghost "inscreva-se agora" button. 4-up desktop (grid 1), 3-up (grid 2), collapsing to 2 at 900 / 1 at 560 per surface-cursos.md's Responsive note. */ .cto-page .course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); list-style: none; padding: 0; } .cto-page .course-grid--3 { grid-template-columns: repeat(3, 1fr); } .cto-page .course-card { display: flex; flex-direction: column; } .cto-page .course-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream); border-radius: 0; /* baseline crop has no rounding */ } .cto-page .course-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; border-radius: 0; } .cto-page .course-title { font-size: 17px; line-height: 1.3; font-weight: 700; margin: var(--space-2) 0 4px; } .cto-page .course-title a { color: var(--ink); text-decoration: none; transition: color .15s ease; } .cto-page .course-title a:hover { color: var(--accent); } .cto-page .course-date { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin: 0 0 var(--space-2); } .cto-page .course-card .btn--ghost { align-self: flex-start; margin-top: auto; } @media (max-width: 900px) { .cto-page .course-grid, .cto-page .course-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .course-grid, .cto-page .course-grid--3 { grid-template-columns: 1fr; } } /* --- .course-module — "Módulo Aprofundamento" asymmetric 2-col block (net-new, cursos DESIGN-FIDELITY pass, 2026-07-09). Renders on WHITE (inherits .page-body's own white background -- NOT a dark band; per surface-cursos.md §3.4 / AC5, no background override here at all). Left: tall portrait photo (baseline crop 570x790, ~0.72 aspect). Right, upper: heading/subhead/date/paragraphs + 3 stacked ghost buttons. Right, lower: a nested 2-up image row (each 370x450, ~0.82 aspect). Collapses to 1 col at 900 (image above text), per the Responsive note. */ .cto-page .course-module { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; margin: var(--space-4) 0; } .cto-page .course-module__photo img { width: 100%; aspect-ratio: 570 / 790; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; } .cto-page .course-module__content h2 { font-size: 26px; line-height: 1.2; font-weight: 800; color: var(--ink); margin: 0 0 var(--space-2); } .cto-page .course-module__content h4 { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--ink-soft); margin: 0 0 6px; } .cto-page .course-module__content p { margin: 0 0 var(--space-2); } .cto-page .course-module__buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: var(--space-3) 0 var(--space-4); } .cto-page .course-module__gallery { display: flex; gap: var(--space-2); } .cto-page .course-module__gallery img { flex: 1 1 0; min-width: 0; width: 100%; aspect-ratio: 370 / 450; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; } @media (max-width: 900px) { .cto-page .course-module { grid-template-columns: 1fr; } } /* --- .page-map — responsive Google-Maps iframe wrapper (net-new, cursos DESIGN-FIDELITY pass, 2026-07-09). Mirrors the existing `.entry-content .wp-block-embed` fluid-aspect pattern above. */ .cto-page .page-map { position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--space-4); } .cto-page .page-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .cto-page .btn { font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); border: none; cursor: pointer; font-size: 15px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; } .cto-page .btn:hover { filter: brightness(1.06); } /* --- .btn--ghost — outline/ghost button variant (net-new, cursos DESIGN-FIDELITY pass, 2026-07-09). Every "inscreva-se agora"/package CTA on cursos is ghost at rest (transparent fill, visible border), filling --accent with white text ONLY on hover/focus -- never the base `.btn`'s solid-red-at-rest fill. Border/text default to ink (`#000`-ish) for use on WHITE sections (course cards, Módulo); the masthead's own ghost CTA above is a separate white-on-photo variant since it needs white, not ink, border/text at rest. MUST be declared AFTER `.cto-page .btn` above (equal specificity -- source order decides which `background`/`border` wins). */ .cto-page .btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .cto-page .btn--ghost:hover, .cto-page .btn--ghost:focus-visible { background: var(--accent); color: #fff; border-color: var(--accent); filter: none; } .cto-page a:focus-visible, .cto-page button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (max-width: 900px) { .cto-page .page-body { padding: 44px 40px; } .cto-page .entry-title { font-size: 29px; } .cto-page .wp-block-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page { padding: var(--space-3) 0; } .cto-page .page-body { padding: var(--space-3); border-radius: 0; } .cto-page .entry-title { font-size: 25px; } .cto-page .wp-block-gallery { grid-template-columns: 1fr; } } /* ========================================================================== .cto-masthead — reusable full-bleed PHOTO masthead (net-new, DESIGN-FIDELITY pass on publicacoes/2788, 2026-07-09). Distinct from .cto-hero (which paints an OPAQUE #0c0c0c panel over the left ~720px, blacking out most of the photo) and from .cto-band (centered text + red CTA). This component keeps the photo visible across its FULL width under a translucent wash — the overlay opacity is a CSS var so callers can tune it without new rules. Built with modifiers so other faithful-replica surfaces can reuse it: - alignment: .cto-masthead (default = left-aligned text, ~2/3 width) .cto-masthead--center (centered text block, e.g. cursos) - overlay: --cto-masthead-overlay (0..1, default 0.3); a page can override it inline (page.php writes it from postmeta) for a bare-photo look (transparencia: set near 0) or a heavier wash, without a new CSS rule. - content: eyebrow / h1 title / intro are each optional (only render what postmeta provides); an optional .cto-masthead__btn (CTA) is supported for centered variants (e.g. cursos) but publicacoes wires none, per its baseline. Escapes the .cto-page padding via the same negative-margin cancellation as .cto-hero (no vw, no 375px overflow risk — .cto-page is a direct child of ). background-position is a var too since the baseline masthead uses "center left" (subject not zoom-cropped), not the .cto-hero photo's "center center". ========================================================================== */ .cto-page .cto-masthead { --cto-masthead-overlay: 0.3; --cto-masthead-pos: center left; --cto-masthead-min-h: 560px; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) var(--space-4); position: relative; display: flex; align-items: center; min-height: var(--cto-masthead-min-h); overflow: hidden; background-color: #0c0c0c; /* fallback before the photo paints */ background-image: var(--cto-masthead-bg); background-size: cover; background-position: var(--cto-masthead-pos); background-repeat: no-repeat; } .cto-page .cto-masthead__overlay { position: absolute; inset: 0; background: #0c0c0c; opacity: var(--cto-masthead-overlay); } .cto-page .cto-masthead__inner { position: relative; z-index: 1; max-width: 863px; padding: 120px 60px 120px 64px; } .cto-page .cto-masthead__eyebrow { font-family: "Questrial", var(--font-ui); font-weight: 400; font-size: 22px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; color: #fff; margin: 0 0 18px; } .cto-page .cto-masthead__title { font-family: "Prompt", var(--font-body); font-weight: 200; font-size: 70px; line-height: 1.2; color: #fff; margin: 0 0 20px; } .cto-page .cto-masthead__intro p { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 17.6px; line-height: 1.5; color: #fff; margin: 0; } .cto-page .cto-masthead__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 30px; padding: 16px 34px; background: var(--accent); color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-masthead__btn:hover { filter: brightness(1.06); } /* Ghost modifier (net-new, cursos DESIGN-FIDELITY pass, 2026-07-09): transparent fill, 2px solid white border, white uppercase text -- the page's own impronta (every CTA on cursos is ghost/outline at rest, never solid-red). Fills --accent with white text/border ONLY on hover/focus. Reusable by any other masthead that opts in via `_cto_masthead_cta_ghost` (e.g. residencia, per its own spec). */ .cto-page .cto-masthead__btn--ghost { background: transparent; border: 2px solid #fff; } .cto-page .cto-masthead__btn--ghost:hover, .cto-page .cto-masthead__btn--ghost:focus-visible { background: var(--accent); border-color: var(--accent); filter: none; } /* .cto-masthead__logo (net-new, teatro-das-oprimidas/5055 DESIGN-FIDELITY pass, 2026-07-09): a floating logo image over the masthead, independent of `__inner` (renders even when `--bare`, since it isn't page copy). Position is the MEASURED rendered value from the settled-original DOM at a 1280px viewport (`measure-logo-5055.mjs`: top=131/left=671.98/w=344.98/h=320.05, masthead top=82 -> logo top relative to the masthead's own box = 49px) -- used per the recipe's own instruction to trust the real render over the raw (container-relative, not page-relative) CSS offset. Breakpoints below are a Forge default (not separately measured): the original's own mobile override existed for a differently-structured container, so these instead just keep the logo inside the masthead's bounds at narrower widths. Positioned relative to `.cto-masthead` (already `position:relative`). HORIZONTAL ANCHOR (Lucas 2026-07-10 #1): the original CSS positions the logo widget with `body:not(.rtl) .elementor-5055 .elementor-element-ffaf737{left:185px}` (uploads/elementor/css/post-5055.css) — a container-relative shift that RENDERS (measured on the live original, measure-logo-orig-live-5055.mjs, 1280vp) with the logo's RIGHT edge 199px inside the masthead's right content edge (logo.right=1016.97, masthead.right=1216 -> gap=199.03). The prior build used a viewport-absolute `left:672px` (the raw measured left in the original's INSET 1152px band); reproduced in this build's FULL-BLEED 1280px band that put the logo too far left inside the wider frame (too much black to its right + crowding the zoomed-in performer). Right-anchoring at the original's measured 199px gap keeps the logo snugged toward the right exactly like the original, viewport-independently -> logo.left=736 at 1280vp. */ .cto-page .cto-masthead__logo { position: absolute; top: 49px; left: auto; right: 199px; width: 345px; height: auto; z-index: 2; margin: 0; } @media (max-width: 900px) { .cto-page .cto-masthead__logo { top: 30px; left: 40px; right: auto; width: 220px; } } @media (max-width: 560px) { .cto-page .cto-masthead__logo { top: 20px; left: 20px; right: auto; width: 160px; } } /* Centered modifier (e.g. cursos: centered title + ghost CTA, per its own spec). */ .cto-page .cto-masthead--center { justify-content: center; text-align: center; } .cto-page .cto-masthead--center .cto-masthead__inner { max-width: 700px; margin: 0 auto; } /* Bare modifier (net-new, transparencia DESIGN-FIDELITY pass, 2026-07-09): a photo-only band with no __inner content at all (page.php skips rendering it entirely when `_cto_masthead_bare` is set). Every other breakpoint already carries an explicit min-height on `.cto-masthead` itself (560px desktop / 460px @900), so those keep the band's height with zero text inside. Only the 560px breakpoint zeroes min-height out (relying on the __inner padding to hold height) — restore an explicit height here since a bare band has no __inner to fall back on. */ @media (max-width: 560px) { .cto-page .cto-masthead--bare { min-height: 280px; } } @media (max-width: 900px) { .cto-page .cto-masthead { min-height: 460px; } .cto-page .cto-masthead__inner { max-width: 100%; padding: 80px 40px; } .cto-page .cto-masthead__title { font-size: 52px; } .cto-page .cto-masthead__eyebrow { font-size: 20px; } } @media (max-width: 560px) { .cto-page .cto-masthead { margin: calc(-1 * var(--space-3)) 0 var(--space-3); min-height: 0; } .cto-page .cto-masthead__inner { padding: 56px 15px; } .cto-page .cto-masthead__title { font-size: 38px; } .cto-page .cto-masthead__eyebrow { font-size: 18px; } } /* --- publicacoes (M2 step 2, page 2788) — publications library: section headers reusing the .cto-single "heading-split" pattern (scoped here to .cto-page since that component previously only existed under .cto-single/ .cto-home), a 4-item stats row, and a Metaxis/books cover grid. .pub-card mirrors .related-card's tokens/interactions (cto-single.css) — lift + red border + title->red on hover — reused, not reinvented. */ .cto-page .heading-split { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-3); } .cto-page .heading-split .rule { width: 3px; align-self: stretch; min-height: 30px; background: var(--accent); flex: 0 0 auto; } .cto-page .heading-split h2 { margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-weight: 300; } .cto-page .heading-split h2 b { font-weight: 800; } .cto-page .pub-kicker { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .1em; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 0 0 4px; } .cto-page .pub-intro { margin: 0 0 var(--space-3); } /* 4-item stats row. */ .cto-page .pub-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .cto-page .pub-stat { display: flex; flex-direction: column; gap: 4px; } .cto-page .pub-stat-k { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 800; color: var(--accent); } .cto-page .pub-stat-v { font-size: 15px; line-height: 1.4; color: var(--ink-soft); } /* --- .pub-stats-band — bespoke full-bleed #0c0c0c wrapper around .pub-stats (DESIGN-FIDELITY pass, publicacoes/2788, 2026-07-09). The baseline stats row is NOT an in-column block: it's a solid dark section breaking out of the 1040px reading column (post-2788.css element 5a68be4d, max-width:1170px inner, padding:120px 0). .pub-stats itself is authored inside post_content (which is trapped in .page-body's centered 1040px column), so the breakout here uses the standard "100vw + left:50%/-50vw" full-bleed trick rather than the fixed negative-margin cancellation .cto-hero/.cto-band use (those are page.php SIBLINGS of .page-body with known fixed ancestor padding; this wrapper is nested arbitrarily deep inside .entry-content, so the offset needed to reach the viewport edge varies with viewport width and can't be a fixed px value). `.cto-page` gets `overflow-x:hidden` as a defensive belt for the vw math's scrollbar-gutter rounding (harmless: every other full-bleed component here reaches exactly to .cto-page's own edge, never beyond it, so nothing is clipped by this). */ .cto-page .pub-stats-band { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: var(--space-4); margin-bottom: var(--space-4); background: #0c0c0c; } /* RE-LAYOUT (2026-07-10): the band is a 3-column strip like the original (post-2788.css section 5a68be4d) — [red METAXIS tab | title+paragraph | 4 stats STACKED], NOT a centered title over a 4-across stats row. Column basis %s are the original Elementor column widths (@media min-width:768): tab 6% / body 60% / stats 33.664% (= 99.664%, so insets are padding, no flex gap). */ .cto-page .pub-stats-band__inner { max-width: 1170px; margin: 0 auto; padding: 120px 24px; /* 5a68be4d padding:120px 0 */ display: flex; align-items: stretch; /* red tab fills the full band height */ gap: 0; } /* red vertical METAXIS tab — 6df36ee9{width:6%} + 6df36ee9 > .elementor-widget-wrap{background-color:#ef1717} (NOT rotated; the "vertical" read is purely the 6%-narrow red franja). */ .cto-page .pub-stats-band__tab { flex: 0 0 6%; background: #ef1717; display: flex; justify-content: center; padding-top: 71px; /* 6df36ee9 populated padding-top:71px */ } .cto-page .pub-stats-band__tab span { color: #fff; /* heading 6b484224 color:#fff */ font-weight: 700; /* 6b484224 font-weight:700 */ letter-spacing: 4.8px; /* 6b484224 letter-spacing:4.8px */ font-size: 11px; line-height: 1; white-space: nowrap; } /* center column — 58c65ad8{width:60%} */ .cto-page .pub-stats-band__body { flex: 0 0 60%; box-sizing: border-box; padding: 0 40px; /* 58c65ad8 populated margin 0 116px 0 129px, scaled to fit */ align-self: center; } .cto-page .pub-stats-band__title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 40px; line-height: 1.2; color: #fff; margin: 0; text-align: left; } .cto-page .pub-stats-band__text { font-family: "Questrial", var(--font-body); font-size: 17px; line-height: 1.5; color: #cfcfcf; margin: 20px 0 0; text-align: left; } /* stats column, STACKED vertically — 7f8abb61{width:33.664%} */ .cto-page .pub-stats-band .pub-stats { flex: 0 0 33.664%; box-sizing: border-box; display: flex; flex-direction: column; /* was grid repeat(4,1fr) — the horizontal row Lucas flagged */ gap: 0; border: 0; padding: 30px 0 0 28px; /* 7f8abb61 padding-top:30px + margin-left:28px */ margin: 0; } .cto-page .pub-stats-band .pub-stat { align-items: flex-start; /* left-aligned in its column (was center) */ text-align: left; padding-bottom: 22px; } .cto-page .pub-stats-band .pub-stat-k { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 30px; line-height: 1.2; text-transform: none; letter-spacing: normal; color: #fff; } .cto-page .pub-stats-band .pub-stat-v { font-family: "Questrial", var(--font-body); font-size: 17px; line-height: 1.4; color: #919191; padding-top: 17px; /* 1437e21/-9120191/-2d980e22 widget-container padding-top:17px */ } @media (max-width: 900px) { .cto-page .pub-stats-band__inner { flex-direction: column; padding: 80px 24px; gap: 24px; align-items: stretch; } .cto-page .pub-stats-band__tab { flex-basis: auto; padding: 10px 0; } .cto-page .pub-stats-band__body { flex-basis: auto; padding: 0; } .cto-page .pub-stats-band__title { font-size: 32px; } .cto-page .pub-stats-band .pub-stats { flex-basis: auto; padding: 0; } } @media (max-width: 560px) { .cto-page .pub-stats-band__inner { padding: 56px 20px; } } .cto-page .pub-banner { width: 100%; border-radius: var(--radius); border: 1px solid var(--hairline); margin: 0 0 var(--space-4); } /* .pub-wordmark — centered section-title graphic (DESIGN-FIDELITY fix, 2026-07-09: Design-sem-nome-9.png is the big red "METAXIS" wordmark logo sitting between the black stats band and the cover grid — verified against the file itself and its position in the baseline render; NOT decorative filler as an earlier pass assumed. post-2788.css element 1544d9ba renders it centered at 63% width — reproduced here, capped so it never looks oversized on a very wide viewport, no card chrome (it's a logo, not a photo). */ .cto-page .pub-wordmark { display: block; width: 63%; max-width: 480px; margin: 0 auto var(--space-4); } /* Cover grid — Metaxis editions + books/articles. NATURAL-ASPECT covers (DESIGN-FIDELITY fix, publicacoes/2788, 2026-07-09: the baseline's 9 Metaxis covers each render at their own ratio, ~0.70-0.77 w/h with ~10% spread — NOT a shared uniform 2:3 crop; see surface-publicacoes.md §5b item 12). No `aspect-ratio`, no `object-fit:cover` here: `.pub-cover img` is sized purely by CSS width:100% + height:auto, so the box follows each image's own intrinsic ratio. `.pub-cover`'s own height then just follows its child (no fixed aspect-ratio on the wrapper either) — mirrors .related-card's shell/hover from cto-single.css otherwise. */ .cto-page .pub-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* shared default (transparencia's 3 report covers + publicacoes books) */ gap: var(--space-3); margin: 0 0 var(--space-4); list-style: none; padding: 0; } /* RE-LAYOUT 2026-07-10: publicacoes' Metaxis grid ONLY is the original 5-col grid (43ce0200: 2 rows × 5 default-Elementor cols, populated margin-right:23px). Scoped to body.page-id-2788 so transparencia's shared .pub-grid stays 3-col. */ .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) { grid-template-columns: repeat(5, 1fr); gap: 23px; } .cto-page .pub-card { display: flex; flex-direction: column; background: var(--reading); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .cto-page .pub-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 4px 14px rgba(60, 50, 35, .12); } .cto-page .pub-cover { display: block; overflow: hidden; background: var(--hairline); } .cto-page .pub-cover img { width: 100%; height: auto; object-fit: contain; display: block; margin: 0; border-radius: 0; } .cto-page .pub-title { font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--ink); padding: var(--space-2) var(--space-2) 0; transition: color .15s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cto-page .pub-card:hover .pub-title { color: var(--accent); } .cto-page .pub-sub { font-size: 14px; line-height: 1.4; color: var(--ink-soft); padding: 4px var(--space-2) 0; } .cto-page .pub-more { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--accent); padding: var(--space-2); margin-top: auto; } /* RE-LAYOUT 2026-07-10 — Metaxis grid tapas match the original: BARE (no card chrome — section 43ce0200's columns have no bg/border/shadow), and the caption is a small GRAY "Metaxis N" line over an emphasized darker subtitle (the original inverts weight vs the current card): the "Metaxis N" heading widget 3baaba34 renders Questrial 0.9em color:#919191; the subtitle widget 14710466 renders Prompt 1.125em color:#0c0c0c. Scoped to :not(.pub-grid--books) so the books grid keeps its card look. */ .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) { align-items: start; } /* covers top-aligned; no cell-stretch gap before row 2 */ .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-more { margin-top: 0; } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-card:hover { transform: none; border-color: transparent; box-shadow: none; } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-cover { background: transparent; } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-title { /* "Metaxis N" — 3baaba34 */ font-family: "Questrial", var(--font-body); font-size: 14px; /* 0.9em */ font-weight: 400; color: #919191; /* 3baaba34 color:#919191 */ padding: 6px 0 0; /* 3baaba34 widget-container padding-top:6px */ } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-card:hover .pub-title { color: #919191; } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-sub { /* emphasized subtitle — 14710466 */ font-family: "Prompt", var(--font-body); font-size: 18px; /* 1.125em */ font-weight: 700; /* Lucas: "subtitulo bold" */ color: #0c0c0c; /* 14710466 color:#0c0c0c */ padding: 1px 0 0; /* 14710466 widget-container padding-top:1px */ } .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) .pub-more { padding: 8px 0 0; } /* Report cards (ESPM/IDIS) — same shell, no subtitle row. DESIGN-FIDELITY fix (2026-07-09): NO forced aspect-ratio here. The baseline mixes orientations — ESPM's 1.jpg is portrait (~0.71) but IDIS's 1-1.jpg is landscape (~1.78, a report-cover screenshot, not a book spine); a shared aspect-ratio would force one of the two into the wrong crop. `.pub-cover img`'s width:100%/ height:auto (above) already gives each its own natural ratio. These two cards sit outside any `.pub-grid` (standalone in the content flow, per surface-publicacoes.md §3 item 7's "small linked figures", not full reading-column width), so cap their width — without this a full-width portrait cover (ESPM at ~900px wide) renders ~1280px tall, technically natural-aspect but absurdly oversized. 340px keeps them in the same visual scale as a `.pub-grid` column while the aspect-ratio math (above) still keeps each cover's own natural proportion, uncropped. */ .cto-page .pub-card--report { max-width: 340px; } /* transparencia's 3 annual-report covers (DESIGN-FIDELITY fix, 2026-07-09): the baseline has NO card at all here — each cover is a bare linked (class `elementor-animation-shrink`, a hover scale-down, not a crop) with the title as a separate heading widget beneath it, no background, no border, no radius, no shadow, no hover-lift. `.pub-card--report` is reused inside `.pub-grid` for these three (unlike the standalone ESPM/IDIS use above), so strip every bit of `.pub-card`'s card chrome here and replace the lift-on-hover with a shrink-on-hover to match `elementor-animation-shrink`. */ .cto-page .pub-card--report { background: transparent; border: none; border-radius: 0; box-shadow: none; transition: transform .2s ease; } .cto-page .pub-card--report:hover { transform: scale(.97); border-color: transparent; box-shadow: none; } .cto-page .pub-card--report .pub-cover { border-radius: 0; background: transparent; } @media (max-width: 900px) { .cto-page .pub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cto-page .pub-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .pub-grid { grid-template-columns: 1fr; } .cto-page .pub-stats { grid-template-columns: 1fr; } } /* Metaxis 5-col grid responsive mirrors the original breakpoints: @media (max-width:1024) and (min-width:768) -> 33.333% (3-col); @media (max-width:767) -> 50% (2-col). Higher-specificity + later so they win over the generic .pub-grid rules above (which stay in force for the books grid). */ @media (max-width: 1024px) and (min-width: 768px) { .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .page-id-2788 .cto-page .pub-grid:not(.pub-grid--books) { grid-template-columns: repeat(2, 1fr); } } /* --- (c) OUTRAS PUBLICAÇÕES — 2-column grid of small images + #0c0c0c caption bands (RE-LAYOUT 2026-07-10). Original section 4cd43873 is a 2-col layout (columns 74d0bba8/34af3884/45d7c114/1954585d, each populated margin-right:15px); each item is a small image over a black caption band (widgets 18c9df04/ 709e6074/1ade7e87/50f88161: widget-container{background-color:#0c0c0c; padding:10px 10px 10px 20px}). Replaces the stacked full-bleed .pub-banner giants Lucas flagged. */ .cto-page .pub-outras { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; /* columns populated margin-right:15px */ margin: 0 0 var(--space-4); align-items: start; } .cto-page .pub-outras__col { display: flex; flex-direction: column; gap: 15px; } .cto-page .pub-outras .pub-fig { margin: 0; } .cto-page .pub-outras .pub-banner, .cto-page .pub-outras .pub-card { width: 100%; margin: 0; } .cto-page .pub-outras .pub-banner { border-radius: 0; border: 0; display: block; } .cto-page .pub-outras .pub-card--report { max-width: none; } .cto-page .pub-outras .pub-card--report .pub-cover img { width: 63%; } /* original 1544d9ba img{width:63%} */ .cto-page .pub-cap { background: #0c0c0c; /* caption widgets background-color:#0c0c0c */ color: #fff; padding: 10px 10px 10px 20px; /* caption widgets padding:10px 10px 10px 20px */ font-family: "Prompt", var(--font-body); font-size: 16px; line-height: 1.35; display: block; text-decoration: none; margin: 0; } .cto-page a.pub-cap--link:hover { color: #fff; text-decoration: underline; } /* revista Philos banner — the original renders it small (aac2ef0 img{width:30%}), centered, not a full-width giant. */ .cto-page .pub-banner--narrow { display: block; width: 30%; margin: 0 auto var(--space-4); border: 0; border-radius: 0; } @media (max-width: 767px) { .cto-page .pub-outras { grid-template-columns: 1fr; } .cto-page .pub-cap { padding: 10px 10px 10px 15px; } /* tablet/mobile caption padding 15px */ .cto-page .pub-banner--narrow { width: 60%; } } /* --- transparencia (M2 step 2, page 3157) — records index: a dense document list (17 links to Drive PDFs) and a metadata definition sheet for the emenda-parlamentar project. REUSES .pub-grid/.pub-card (above, from publicacoes) unchanged for the 3 annual-report covers; only .doc-list/ .doc-item/.doc-label/.doc-pdf and .doc-meta/.doc-meta-row are new. Also reuses .entry-subhead (cto-single.css pattern) as a plain h2 class here since .cto-page has no dedicated subhead rule yet. */ .cto-page .entry-subhead { font-size: 23px; line-height: 1.25; font-weight: 800; color: var(--ink); margin: var(--space-4) 0 var(--space-2); } .cto-page .doc-meta-note { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 0 0 var(--space-2); } .cto-page .doc-list { display: flex; flex-direction: column; margin: 0 0 var(--space-4); } .cto-page .doc-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 14px 4px; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: background .15s ease; } .cto-page .doc-list .doc-item:first-child { border-top: 1px solid var(--hairline); } .cto-page .doc-item:hover { background: var(--cream); } .cto-page .doc-item:hover .doc-label { color: var(--accent); } .cto-page .doc-label { font-size: 15.5px; line-height: 1.4; color: var(--ink); transition: color .15s ease; } .cto-page .doc-pdf { flex: 0 0 auto; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; } .cto-page .doc-list--external { margin-top: calc(-1 * var(--space-3)); } .cto-page .doc-item--external .doc-label { color: var(--accent); word-break: break-word; } /* Emenda-parlamentar metadata sheet — label/value definition rows. */ .cto-page .doc-meta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius); } .cto-page .doc-meta-row { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; line-height: 1.5; } .cto-page .doc-meta-label { font-family: var(--font-ui); font-weight: 800; color: var(--ink-soft); } .cto-page .doc-meta-value { color: var(--ink); } @media (max-width: 560px) { .cto-page .doc-item { flex-direction: column; align-items: flex-start; gap: 4px; } } @media (prefers-reduced-motion: reduce) { .cto-page * { transition: none !important; animation: none !important; } } /* ========================================================================== grupos teatrais (M2 step 2, page 5231) — net-new hero hooks + editorial statement/grid/band components, per surface-gruposteatrais recipe, 2026-07-09. All hero additions are DEFAULT OFF (no other page carries the new metas), so quemsomos/every existing `.cto-hero` page renders byte- identical. ========================================================================== */ /* --- .cto-hero overlay-tint (opt-in via `_cto_hero_overlay_*` metas). The original grupos hero (element 43c32f2e, post-5231.css) paints a teal wash (#07536b @ .39, mix-blend-mode:lighten) over the crowd photo, UNDER the opaque left panel — the panel already fully hides the tint over its own area, so a simple full-section overlay behind the panel/photo (z-index 0) reproduces it faithfully. `.cto-hero__panel`/`__photo` get `position: relative` unconditionally (harmless — flex children, no visual change) so they stack above this new overlay only when it's rendered. */ .cto-page .cto-hero__panel, .cto-page .cto-hero__photo { position: relative; z-index: 1; } .cto-page .cto-hero__overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* --- .cto-hero__thumbs (opt-in via `_cto_hero_thumbs`, JSON array of 3 image URLs). A row of square thumbs inside `.cto-hero__panel`, between the title and the intro paragraph — the grupos hero's 3-photo row (elements 50e56c3a/5518f002/7c4577f4, each `img{width:100%}` in an equal column, cover-cropped square). Rendered at a fixed ~150px so the row stays square and compact regardless of the panel's own flex width. */ .cto-page .cto-hero__thumbs { display: flex; gap: var(--space-2); margin: 0 0 var(--space-3); } .cto-page .cto-hero__thumbs img { flex: 0 0 auto; width: 150px; height: 150px; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; } @media (max-width: 900px) { .cto-page .cto-hero__thumbs img { width: 110px; height: 110px; } } @media (max-width: 560px) { .cto-page .cto-hero__thumbs { flex-wrap: wrap; } .cto-page .cto-hero__thumbs img { width: 90px; height: 90px; } } /* --- .cto-statement-row / .cto-statement__photo — the grupos "statement" editorial rows (post_content, in-column). `.cto-statement__photo` (net-new, dictated component) is a #0c0c0c block wrapping a cover-cropped photo at an explicit rendered aspect + optional white caption headings below it (used bare for statement B, with `.cto-statement__photo-caption` for statement A's "CIA CTO" / 'Espetáculo "Gêneres"'). `.cto-statement-row` is the generic 2-col layout wrapper (photo | content) reused by both statements; per- statement modifiers size the photo column to the recipe's target width (485 for A, 570 for B) — the reading column (~912px inner) comfortably fits either. Width targets are best-effort within that column (a redesign choice per the fidelity contract's "reading column" base); ASPECT RATIO is the hard-fidelity invariant and is exact via `aspect-ratio`, never cropped to a different ratio than the original. */ .cto-page .cto-statement-row { display: grid; grid-template-columns: minmax(0, 570px) 1fr; gap: var(--space-4); align-items: start; margin: var(--space-4) 0; } .cto-page .cto-statement-row--a { grid-template-columns: minmax(0, 485px) 1fr; } .cto-page .cto-statement__photo { background: #0c0c0c; display: block; } .cto-page .cto-statement__photo img { width: 100%; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; } .cto-page .cto-statement__photo--a img { aspect-ratio: 485 / 640; } .cto-page .cto-statement__photo--b img { aspect-ratio: 570 / 790; } .cto-page .cto-statement__photo-caption { padding: var(--space-2) var(--space-3) var(--space-3); } .cto-page .cto-statement__photo-caption h3 { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 4px; } .cto-page .cto-statement__photo-caption h4 { color: #fff; font-family: "Questrial", var(--font-body); font-weight: 400; font-style: italic; font-size: 15px; margin: 0; } .cto-page .cto-statement-row__content h2 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.3em; line-height: 1.2; color: var(--ink); margin: 0 0 var(--space-3); } .cto-page .cto-statement-row__content h4 { font-size: 17px; font-weight: 700; color: var(--ink-soft); margin: 0 0 var(--space-2); } .cto-page .cto-statement-row__content p { margin: 0 0 var(--space-3); } /* Statement A's "parceria" mini image + paragraph, right column. */ .cto-page .cto-statement-row__partner { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-2); } .cto-page .cto-statement-row__partner img { flex: 0 0 200px; width: 200px; aspect-ratio: 400 / 450; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; } .cto-page .cto-statement-row__partner p { margin: 0; flex: 1 1 auto; } /* Statement B's pair of staggered/overlapping photos, right column. `align-items: flex-start` is required -- flex's default `stretch` would otherwise force both images to the SAME cross-size (the tallest sibling's margin-adjusted height), overriding each image's own `aspect-ratio` and breaking its crop. */ .cto-page .cto-statement-row__pair { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); } .cto-page .cto-statement-row__pair img { flex: 1 1 0; min-width: 0; width: 100%; max-width: 300px; aspect-ratio: 370 / 450; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); } .cto-page .cto-statement-row__pair img:last-child { margin-top: var(--space-4); } @media (max-width: 700px) { .cto-page .cto-statement-row, .cto-page .cto-statement-row--a { grid-template-columns: 1fr; gap: var(--space-3); } .cto-page .cto-statement-row__partner { flex-direction: column; } .cto-page .cto-statement-row__partner img { width: 100%; flex-basis: auto; } .cto-page .cto-statement-row__pair { flex-direction: column; } .cto-page .cto-statement-row__pair img { max-width: 100%; } .cto-page .cto-statement-row__pair img:last-child { margin-top: 0; } } /* --- GRUPOS REDESIGN (5231, 2026-07-17). Replaces the original Elementor overlap reproduction with proportional in-column rows: no -64px page-body breakout, no negative-margin photo overlaps, no 114px text indent. Columns are percentage-based (row A 46% / row B 40%) with a 44px gap; row A's partner image and row B's trio pair size to their columns. The row B trio pair spans the FULL row width below the photo|text row via a calc breakout (see below). Approved by the operator; baked from the clone Additional-CSS iteration (marker "CTO grupos-redesign (agent)"). >=1100px only; below that the base compressed/stacked layout stands. */ @media (min-width: 1100px) { .cto-page .cto-statement-row--a, .cto-page .cto-statement-row--b { column-gap: 44px; } .cto-page .cto-statement-row--a { grid-template-columns: 46% 1fr; } .cto-page .cto-statement-row--b { grid-template-columns: 40% 1fr; } /* flex columns keep h2/partner and p/pair vertical margins from collapsing. */ .cto-page .cto-statement-row--a .cto-statement-row__content, .cto-page .cto-statement-row--b .cto-statement-row__content { display: flex; flex-direction: column; } /* row A "parceria" mini image sizes to its column (base is a fixed 200px). */ .cto-page .cto-statement-row--a .cto-statement-row__partner { margin-top: var(--space-3); } .cto-page .cto-statement-row--a .cto-statement-row__partner img { flex: 0 0 42%; width: 42%; max-width: 42%; } .cto-page .cto-statement-row--a .cto-statement-row__partner p:empty { display: none; } /* wpautop artifact takes flex space otherwise */ /* row B left column: a single top-aligned photo, no exposed black fill. */ .cto-page .cto-statement__photo--b { background: transparent; } .cto-page .cto-statement-row--b .cto-statement-row__content > p { margin-bottom: 69px; /* paragraph-to-trio gap (original 2092b80c padding) */ } /* row B trio pair breaks out of the right (1fr) content cell to span the full row width, below the photo|text row. Its containing block is that content cell (width Wc = 0.6W - 44px, from grid 40% 1fr + 44px gap), so width = 1.66667*Wc + 73.333px restores the full row W, and the margin-left pulls it back over the 40% + 44px left offset. Stays exact at any >=1100px. */ .cto-page .cto-statement-row--b .cto-statement-row__pair { margin-top: var(--space-3); width: calc(166.667% + 73.333px); margin-left: calc(-66.667% - 73.333px); } .cto-page .cto-statement-row--b .cto-statement-row__pair img { flex: 1 1 50%; max-width: 50%; } .cto-page .cto-statement-row--b .cto-statement-row__pair img:last-child { margin-top: 0; } } /* --- .cto-group-grid / .group-card — ACTIVE groups (net-new, dictated component): one featured card (570x452-ish) + a 2x2 block of small square (170-ish) cards. Card = square/featured image (object-fit:cover, no radius) + "Desde YYYY" (`.group-meta`) + name (`.group-name`, bold). */ .cto-page .cto-group-grid { display: grid; grid-template-columns: minmax(0, 570px) 1fr; gap: var(--space-3); margin: var(--space-4) 0; } .cto-page .cto-group-grid__small { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .cto-page .group-card { display: flex; flex-direction: column; } .cto-page .group-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream); border-radius: 0; } .cto-page .group-card--featured .group-photo { aspect-ratio: 570 / 452; } .cto-page .group-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; border-radius: 0; } .cto-page .group-meta { font-family: var(--font-ui); font-size: 13px; color: #919191; margin: var(--space-2) 0 2px; } .cto-page .group-name { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; } @media (max-width: 900px) { .cto-page .cto-group-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cto-page .cto-group-grid__small { grid-template-columns: 1fr; } } /* --- .cto-group-grid--related / .group-card--related — PAST groups (net-new, dictated component). The original's impronta here is a DENSE asymmetric two-row structure: row 1 = a single row of 6 cards ACROSS, row 2 = a single row of 3 cards ACROSS -- NOT a uniform reflowing 3-column grid (that reinterpretation is exactly what the fidelity contract forbids). Each `.cto-group-grid--related` is one row: the FIRST is 6 equal columns (the 6 cards scale down to ~150-165px square inside the ~912px inner reading column, faithful to the original which likewise scaled its custom crops down to fit 6-across), the SECOND is a left-packed row of 3 fixed ~170px cards. Name renders BEFORE the year range (opposite order from the active-groups cards above), per the recipe. */ .cto-page .cto-group-grid--related { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); margin: var(--space-4) 0 0; } /* Row 2 (the grid immediately after the first): 3 cards, left-packed at a fixed ~170px so they read at the original's row-2 scale rather than stretching to a third of the reading column each. */ .cto-page .cto-group-grid--related + .cto-group-grid--related { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); } .cto-page .cto-group-grid--related + .cto-group-grid--related .group-card--related { flex: 0 0 170px; width: 170px; } .cto-page .group-card--related { display: flex; flex-direction: column; min-width: 0; } .cto-page .group-card--related .group-photo { aspect-ratio: 1 / 1; } .cto-page .group-card--related .group-name { margin: var(--space-2) 0 2px; font-size: 14px; line-height: 1.25; } .cto-page .group-card--related .group-meta { margin: 0; } @media (max-width: 700px) { /* Below the reading column's comfortable 6-across width, relax row 1 to a 3-across grid and let row 2 wrap naturally -- still faithful in KIND (dense small squares), just re-flowed for a narrow viewport. */ .cto-page .cto-group-grid--related { grid-template-columns: repeat(3, 1fr); } .cto-page .cto-group-grid--related + .cto-group-grid--related .group-card--related { flex: 1 1 calc(33.333% - var(--space-3)); width: auto; } } @media (max-width: 480px) { .cto-page .cto-group-grid--related { grid-template-columns: repeat(3, 1fr); } } /* --- .cto-history-band — full-bleed #0c0c0c band (net-new, dictated component), meta-driven page.php SIBLING (post_content cannot reach full-bleed edges). Structure per recipe: a thin vertical red accent bar + a heading/lead pairing in one column + a separate body-paragraph column. Reuses `.cto-band`'s full-bleed negative-margin escape mechanic (this band sits AFTER , so its margin matches the base `.cto-band`'s all-around space-4 formula, not the BEFORE-article masthead/panel formula). */ .cto-page .cto-history-band { margin: var(--space-4) calc(-1 * var(--space-3)); background: #0c0c0c; } .cto-page .cto-history-band__inner { max-width: 1170px; margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 6px 1fr 1fr; gap: var(--space-4); align-items: start; } .cto-page .cto-history-band__bar { background: #f00001; align-self: stretch; min-height: 60px; } .cto-page .cto-history-band__heading { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.1em; line-height: 1.25; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-history-band__lead { color: #fff; font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; } .cto-page .cto-history-band__body { color: #fff; font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; } @media (max-width: 900px) { .cto-page .cto-history-band { margin: var(--space-3) calc(-1 * var(--space-3)); } .cto-page .cto-history-band__inner { grid-template-columns: 1fr; gap: var(--space-3); padding: 70px 24px; } .cto-page .cto-history-band__bar { width: 60px; height: 6px; min-height: 0; align-self: auto; } } @media (max-width: 560px) { .cto-page .cto-history-band { margin: var(--space-3) 0; } .cto-page .cto-history-band__inner { padding: 56px 15px; } } /* --- .cto-after-band — reading-column-width wrapper for content authored via `_cto_after_band_content`, rendered AFTER `.cto-history-band` (net-new hook; see page.php). Deliberately NO white-card chrome (unlike `.page-body`) — the past-groups grid sits directly on `.cto-page`'s cream background, per the recipe. */ .cto-page .cto-after-band { max-width: 1040px; margin: 0 auto; } /* ========================================================================== ORDERED SECTIONS (net-new, residencia-artistica/4892 DESIGN-FIDELITY pass, 2026-07-09) — see page.php `ctorio_child_render_cto_section()` PHPDoc for the JSON contract. Every section below shares the outer class `.cto-band` (full-bleed escape) with a `.cto-band--` modifier; unlike the base `.cto-band` (margin `var(--space-4) calc(-1*var(--space-3))`, used AFTER a classic with real vertical breathing room), consecutive ordered sections must butt flush against each other — the settled original is ONE continuous dark canvas from the masthead through the PDF band, so any vertical gap here would show the page's cream background as an unwanted seam. `.cto-band--flush` zeroes vertical margin (keeps the horizontal full-bleed cancel); the adjacent-sibling rule cancels the masthead's own trailing space-4 gap so the FIRST ordered section butts against it too. ========================================================================== */ .cto-page .cto-band--flush, .cto-page .cto-band--intro, .cto-page .cto-band--quote, .cto-page .cto-band--inset, .cto-page .cto-band--content, .cto-page .cto-band--column, .cto-page .cto-band--video, .cto-page .cto-band--split, .cto-page .cto-band--video-duo, .cto-page .cto-band--heading-split, .cto-page .cto-band--news-grid, .cto-page .cto-band--video-trio { margin: 0 calc(-1 * var(--space-3)); min-height: 0; display: block; text-align: left; overflow: hidden; position: relative; } .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Same flush treatment when the FIRST ordered section follows `.cto-hero` instead of `.cto-masthead` (net-new, teatro-das-oprimidas/5055: masthead THEN hero THEN the ordered-sections list, so the hero is the section list's immediate preceding sibling there). Inert on every other page -- none of them place a `.cto-band` sibling directly after `.cto-hero` today (they all resume at a classic `` instead). */ .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Trailing gap before the footer (the settled original shows a thin cream sliver between the video band and the footer, unlike every other section-to-section transition, which is flush). */ .cto-page .cto-band--video { margin-bottom: var(--space-4); } @media (max-width: 560px) { .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-band--video { margin-bottom: var(--space-3); } } /* --- .cto-band--intro — full-bleed #0c0c0c 3-col opening statement (recipe section 2): a red `--accent` column carrying a bottom-to-top rotated eyebrow label ("O PROGRAMA") + two independent prose columns (middle H3+2p, right 3p). Distinct from `.cto-band--panel` (cursos contact band, equal thirds, decorative accent block, ONE prose column) — this accent column is narrow/fixed and carries real (rotated) text, and there are TWO prose columns, not one. */ .cto-page .cto-band--intro { background: #0c0c0c; } .cto-page .cto-band__inner--intro { max-width: 1170px; margin: 0 auto; padding: 90px 24px; display: grid; grid-template-columns: 70px 1fr 1fr; gap: var(--space-4); align-items: stretch; } /* Scoped to `.cto-band--intro` specifically (NOT a bare `.cto-band__col--accent` rule) — that exact class name is already used, unscoped-looking but distinct, by `.cto-band--panel`'s decorative accent block (cursos); scoping by ancestor here keeps that page's existing block byte-identical. */ .cto-page .cto-band--intro .cto-band__col--accent { background: var(--accent); display: flex; align-items: flex-end; justify-content: center; padding: var(--space-3) 0; min-height: 220px; } .cto-page .cto-band__accent-label { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-family: "Questrial", var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .cto-page .cto-band__col--text-a h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.7em; line-height: 1.35; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p, .cto-page .cto-band__col--text-b p { font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.65; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p:last-child, .cto-page .cto-band__col--text-b p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band__inner--intro { grid-template-columns: 60px 1fr; padding: 60px 24px; gap: var(--space-3); } .cto-page .cto-band__col--text-b { grid-column: 2; } } @media (max-width: 560px) { .cto-page .cto-band__inner--intro { grid-template-columns: 1fr; padding: 44px 15px; } .cto-page .cto-band__col--accent { min-height: 60px; align-items: center; } .cto-page .cto-band__accent-label { writing-mode: horizontal-tb; transform: none; } .cto-page .cto-band__col--text-b { grid-column: 1; } } /* --- .cto-band--quote — `.cto-band__quote` faithful-replica photo band (CREATE#2). Two layout modifiers: - `--quote-center`: full-width centered composition (the reconstructed b3: big static headline quote + attribution, D1 — no eyebrow/title/ name in this instance, but the markup supports them). - `--quote-boxed`: b6a's ~926px boxed / left-aligned treatment (an inner text column ~469px wide sits at the box's left, the box's right half shows plain band photo). Overlay is entirely inline (page.php writes overlay_color/opacity/ position/blend per instance) — this realizes CREATE#1's "configurable overlay" via the ordered-sections JSON rather than singular flat postmeta, since one page needs MANY differently configured bands (normal/darken/ lighten all appear on this page). */ /* .cto-band__bg / .cto-band__overlay's base rules (defined earlier, under the plain .cto-band component) already give absolute position:inset:0 cover treatment regardless of which `--modifier` the ancestor `.cto-band` also carries, so `--quote`/`--inset`/`--video` below reuse them as-is (no duplicate override needed) — only per-instance color/opacity/blend is set inline (page.php), which always wins over the class's own defaults. */ .cto-page .cto-band--quote { display: flex; align-items: center; min-height: 480px; } .cto-page .cto-band__inner--quote { position: relative; z-index: 1; width: 100%; padding: 90px 24px; } .cto-page .cto-band__quote-eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__quote-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__quote-text { font-family: "Prompt", var(--font-body); font-weight: 300; color: #fff; line-height: 1.6; margin: 0 0 var(--space-2); } .cto-page .cto-band__quote-name { font-weight: 700; color: #fff; margin: 0 0 4px; } .cto-page .cto-band__quote-attribution { color: #ff0202; font-family: "Questrial", var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; } /* Center modifier (b3): a single large centered statement, no box. */ .cto-page .cto-band--quote-center .cto-band__inner--quote { text-align: center; } .cto-page .cto-band--quote-center .cto-band__quote { max-width: 720px; margin: 0 auto; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.7em; } /* Boxed modifier (b6a): 926px box, text column pinned left at ~469px, the right half of the box shows plain band photo (no text). */ .cto-page .cto-band--quote-boxed .cto-band__inner--quote { max-width: 926px; margin: 0 auto; } .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 469px; } @media (max-width: 700px) { .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 100%; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.3em; } } /* --- .cto-band--inset — `.cto-band__inset` + `.cto-band__body` (CREATE#3): an outer full-bleed photo (overlay via inline vars) with a nested inset photo (NO overlay, configurable width via --cto-inset-w) + centered white body text below it. Used for b6b. */ .cto-page .cto-band--inset { min-height: 0; } .cto-page .cto-band__inner--inset { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 70px 24px 90px; } .cto-page .cto-band__inset { width: var(--cto-inset-w, 752px); max-width: 100%; margin: 0 auto var(--space-4); aspect-ratio: 1296 / 864; overflow: hidden; } .cto-page .cto-band__inset img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .cto-band__body { max-width: 800px; margin: 0 auto; text-align: center; color: #fff; font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.15em; line-height: 1.6; } .cto-page .cto-band__body p { margin: 0; } @media (max-width: 560px) { .cto-page .cto-band__inner--inset { padding: 44px 15px 56px; } .cto-page .cto-band__body { font-size: 1em; } } /* --- .cto-band--content — PDF/doc band (CREATE#4): the section's OWN background is the NATURAL-SIZE TILED photo (background-size:auto + background-repeat:repeat, never cover); a solid #0c0c0c `.cto-band__panel` pinned LEFT (fixed width, does not stretch) occludes most of it, so the tiled photo only shows through on the right. Used for b10. */ .cto-page .cto-band--content { background-image: var(--cto-band-content-bg); background-size: auto; background-repeat: repeat; background-position: center; min-height: 0; display: flex; } .cto-page .cto-band__panel { position: relative; z-index: 1; width: 670px; max-width: 100%; flex: 0 0 auto; background: #0c0c0c; color: #fff; padding: 90px 60px 90px 24px; } .cto-page .cto-band__eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__panel-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-4); } .cto-page .cto-band__panel-body { font-size: 15px; line-height: 1.6; } .cto-page .cto-band__panel-body p { margin: 0 0 var(--space-3); color: #fff; } .cto-page .cto-band__panel-body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band--content { display: block; } .cto-page .cto-band__panel { width: 100%; padding: 60px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__panel { padding: 44px 15px; } .cto-page .cto-band__panel-title { font-size: 1.8em; } } /* --- .cto-doc-grid / .doc-card (CREATE#7): NATURAL-SIZE (uncropped) portrait image + title + optional "(disponível apenas para inscritos)" caption + optional external link. Used for b10's 3 PDF cards AND (as `.doc-card--featured`) the reading-recommendations Boal portrait. */ .cto-page .cto-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); } .cto-page .doc-card { display: flex; flex-direction: column; } .cto-page .doc-card__link { display: block; } .cto-page .doc-card img { width: 100%; height: auto; margin: 0 0 10px; border-radius: 0; } .cto-page .doc-card__title { font-size: 14px; font-weight: 600; color: #fff; margin: 0; line-height: 1.35; } .cto-page .doc-card__caption { font-size: 12px; font-style: italic; color: #b7b7b7; margin: 4px 0 0; } /* Featured (Boal portrait, reading-recommendations left column): h6/h5 caption pairing instead of title/caption paragraphs, ON A WHITE section (dark text), per the recipe. */ .cto-page .doc-card--featured img { margin-bottom: var(--space-2); } .cto-page .doc-card--featured h6 { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin: 0 0 4px; text-transform: none; } .cto-page .doc-card--featured h5 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid { grid-template-columns: 1fr; } } /* --- .cto-cta-link (CREATE#8): text-link CTA, no box/border, right arrow icon — distinct from the boxed `.cto-masthead__btn--ghost` (reused verbatim for the two-column "Como participar?" / "Formas de convênio" CTAs). Used for b10's "INSCREVA-SE AGORA". */ .cto-page .cto-cta-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-cta-link__arrow { flex: 0 0 auto; transition: transform .15s ease; } .cto-page .cto-cta-link:hover .cto-cta-link__arrow, .cto-page .cto-cta-link:focus-visible .cto-cta-link__arrow { transform: translateX(4px); } /* --- .cto-eyebrow-tag (CREATE#9): white uppercase bold text on a red #f00001 box that the text slightly overflows to the left (negative margin). `--light` modifier (section 15): dark ink text on a light box, for use on a white section bg. */ .cto-page .cto-eyebrow-tag { display: inline-block; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 22px; margin: 0 0 var(--space-3) -14px; } .cto-page .cto-eyebrow-tag--light { background: var(--hairline); color: var(--ink); } @media (max-width: 560px) { .cto-page .cto-eyebrow-tag { margin-left: 0; font-size: 12px; padding: 8px 16px; } } /* --- .cto-eyebrow-tag--start (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): alignment-only fix for teatro's closing "COORDENAÇÃO ARTÍSTICA" instance of the shared red-pill `.cto-eyebrow-tag` — the settled-original shows it flush-left, but the shared `.cto-band__inner` (column/video-duo types) is a flex column with `align-items:center`, which centers it as a flex item. `align-self` overrides only THIS item's cross-axis position; `.cto-eyebrow-tag`'s own red/white styling stays untouched for every other caller. */ .cto-page .cto-eyebrow-tag--start { align-self: flex-start; } /* --- .cto-eyebrow-line (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): the PLAIN-TEXT eyebrow variant used on white sections (Compromisso/galeria/ PUBLICAÇÕES) — confirmed against `_elementor_data` (dump-elementor- 5055.php): all three heading widgets carry `title_color:#0c0c0c` + typography settings only, with NO `background_color` on the widget OR its parent column, and the generated `post-5055.css` has no background rule for any of their element IDs either. The red/gray boxed pill visible in a couple of settled-original crops (Compromisso, galeria, PUBLICAÇÕES) is NOT backed by data or CSS — cross-checked as a settle/capture artifact of the widgets' `fadeInRight` entrance animation (`_animation_delay:400`), not a real design element; texto plano per the fidelity contract ("si el CSS/data no lo respalda, texto plano — CSS manda"). `align-self:flex-start` overrides the shared `.cto-band__inner` flex centering (see `.cto-eyebrow-tag--start` above) the same way. Values (uppercase, weight 800, letter-spacing 4.8px, Questrial, line-height 1.5em) are copied verbatim from the widget's own typography settings. Distinct class (never `.cto-eyebrow-tag`, shared by residencia/cursos) so those pages' own red pill stays byte-identical. */ .cto-page .cto-eyebrow-line { display: inline-block; align-self: flex-start; color: #0c0c0c; font-family: "Questrial", var(--font-ui); font-size: 1em; font-weight: 800; letter-spacing: 4.8px; line-height: 1.5em; text-transform: uppercase; margin: 0 0 var(--space-3); } /* --- .cto-people-grid / .person-card (CREATE#5): 1:1 170x170 cover-crop photo + centered name (bold) / role / country, 4-up. Used for the "PESSOAS FORMADAS PELO PROGRAMA" grid. */ .cto-page .cto-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .cto-page .person-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .cto-page .person-photo { width: 170px; max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .person-name { color: #fff; font-weight: 700; font-size: 15px; margin: var(--space-2) 0 6px; } .cto-page .person-role { color: #d8d8d8; font-size: 13px; font-style: italic; line-height: 1.4; margin: 0 0 4px; } .cto-page .person-country { color: #9a9a9a; font-size: 13px; margin: 0; } @media (max-width: 700px) { .cto-page .cto-people-grid { grid-template-columns: repeat(2, 1fr); } } /* --- .cto-steps-grid / .step-card (CREATE#6): 1:1 170x170 cover-crop photo LEFT + numeric badge/label RIGHT (flex row, NOT stacked), 3/3/1 rows; trailing short rows simply have fewer cards (no phantom placeholders). Used for "ATIVIDADES INCLUSAS NO PROGRAMA". */ .cto-page .cto-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-3); margin: 0 0 var(--space-4); } .cto-page .step-card { display: flex; align-items: flex-start; gap: var(--space-2); } .cto-page .step-photo { flex: 0 0 auto; width: 100px; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .step-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .step-number { display: block; color: #8a8a8a; font-size: 13px; margin: 0 0 4px; } .cto-page .step-label { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; } @media (max-width: 900px) { .cto-page .cto-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-steps-grid { grid-template-columns: 1fr; } .cto-page .step-photo { width: 80px; } } /* --- CTA two-column block (in-column, reuses `.cto-masthead__btn`/`--ghost` verbatim — those rules are declared `.cto-page .cto-masthead__btn…`, not scoped under `.cto-masthead`, so they apply anywhere in `.cto-page`; the brief's REUSE list counts this as the ghost CTA's 2nd/3rd use on this page). */ .cto-page .cto-cta-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .cto-page .cto-cta-2col h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.8em; color: #fff; margin: 0 0 var(--space-2); } .cto-page .cto-cta-2col p { color: #d8d8d8; font-size: 15px; line-height: 1.6; margin: 0 0 var(--space-3); } @media (max-width: 700px) { .cto-page .cto-cta-2col { grid-template-columns: 1fr; } } /* --- .cto-band--column (CREATE, generalized): reading-width content sharing its section's own full-bleed background (dark #0c0c0c or light #fff) — distinct from `.cto-after-band` (sits on the page's cream bg): residencia's in-column chunks (grids/eyebrow-tags/CTAs) sit directly on the SAME solid canvas as the surrounding bands, per the settled original (no white card anywhere until the reading-recommendations chunk, which IS on white). */ .cto-page .cto-band--column-dark { background: #0c0c0c; } .cto-page .cto-band--column-light { background: #fff; } .cto-page .cto-band__inner--column { max-width: 1170px; margin: 0 auto; padding: 70px 24px; } @media (max-width: 560px) { .cto-page .cto-band__inner--column { padding: 50px 15px; } } /* --- .cto-reading-grid: Boal portrait (`.doc-card--featured`, left 50%) + 2x3 grid of SQUARE 170x170 `.reading-card`s (right 50%) — per D3 the reading-cards are square crops (unlike the b10 doc-cards' natural aspect), author byline above the title. */ .cto-page .cto-reading-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .cto-page .reading-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .reading-card { display: flex; flex-direction: column; } .cto-page .reading-card__link { display: block; } .cto-page .reading-photo { aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px; } .cto-page .reading-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .reading-author { font-size: 12px; color: var(--ink-soft); margin: 0 0 2px; } .cto-page .reading-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0; } .cto-page .reading-caption { font-size: 11px; font-style: italic; color: var(--ink-soft); margin: 3px 0 0; } @media (max-width: 900px) { .cto-page .cto-reading-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cto-page .reading-card-grid { grid-template-columns: repeat(2, 1fr); } } /* --- static reconstructed testimonial (D1): a red quote-mark glyph + quote text + name, no carousel/JS. In-column, on the same white background as the reading-recommendations grid above it. */ .cto-page .cto-testimonial { max-width: 720px; margin: var(--space-4) auto 0; text-align: center; } .cto-page .cto-testimonial__mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 1; font-weight: 700; margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__quote { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__name { font-weight: 700; color: var(--ink); margin: 0; } /* --- .cto-band--video (D2 + videofix 2026-07-10): the original is a BACKGROUND-VIDEO section (post-4892 _elementor_data element 19bdbbe4, background_background:video, youtu.be/VE48YJ767kQ start=130). Replicated 0-remote-hosts as a LOCAL ambient (home hero treatment) over the photo fallback. 16:9, matching the settled original's band proportions. Section base #000000 per post-4892.css: `.elementor-4892 .elementor-element.elementor-element-19bdbbe4:not(...) {background-color:#000000;}`. */ .cto-page .cto-band--video { aspect-ratio: 16 / 9; max-height: 720px; background: #000000; } @media (max-width: 560px) { .cto-page .cto-band--video { aspect-ratio: 4 / 3; } } /* Ambient background video fills the band edge-to-edge exactly like `.cto-band__bg` (cover, uncropped-proportions box = the section itself), mirroring the original's `.elementor-background-video-container` which covers section 19bdbbe4 behind `.elementor-background-overlay` (overlay #b79c77/0.35 per post-4892.css `.elementor-element-19bdbbe4 > .elementor-background-overlay{background-color:#b79c77;opacity:0.35;}` — the overlay div renders AFTER the video in the DOM, so it paints above). */ .cto-page .cto-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; max-width: none; } /* ========================================================================== TEATRO DAS OPRIMIDAS (post 5055) — DESIGN-FIDELITY pass, 2026-07-09. Every rule below is additive/scoped: new classes or opt-in modifiers of existing ones, touching no selector any other page relies on. ========================================================================== */ /* --- Recursos doc-card variant (`.doc-card--resource`): the base `.doc-card` (CREATE#7, above) was built for a DARK panel (band-content/b10, white title text) or the reading-grid's `--featured` white-bg h6/h5 pairing. Teatro's Recursos grid needs a THIRD combination on a plain white section: natural-portrait cover + a gray eyebrow + a dark title + a red-hover "ACESSE AQUI" link-out — none of the two existing variants fit, so this adds (never overrides) a gray eyebrow line and a dark-title modifier. Grid shape (DESIGN-FIDELITY fix pass, 2026-07-09, F2): the settled-original has NO section header ("RECURSOS" pill removed — see forge-teatro-5055.php) and its 5 cards are a genuine 2-size masonry, not `.cto-doc-grid`'s equal 3-col grid — see `.cto-doc-grid--resource-masonry` below. */ .cto-page .doc-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #919191; margin: 0 0 4px; } .cto-page .doc-card__title--dark { color: var(--ink); } /* --- .cto-doc-grid--resource-masonry (NEW, opt-in modifier of the shared `.cto-doc-grid`, never overriding its base `display:grid` 3-col rule for other callers): pixel-measured off the settled-original (measure-recursos-pub-5055.mjs column-run scan) the Recursos grid is a CSS multi-column masonry, not a row-major grid — col1 holds card 1 (small) + card 2 (large), col2 holds card 3 (large) + card 4 (small), col3 holds card 5 (large) alone. `column-count` reproduces this column-major flow directly from DOM order; forced breaks on cards 3 and 5 make the 2+2+1 grouping deterministic rather than depending on the browser's own column- balance heuristic. `width:100%` guards against the shared `.cto-band__inner` flex `align-items:center` (column type) shrinking this to its content width instead of the full reading column. */ .cto-page .cto-doc-grid--resource-masonry { display: block; width: 100%; column-count: 3; column-gap: 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource { break-inside: avoid; margin: 0 0 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(3), .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(5) { break-before: column; } /* --- .doc-card--resource-compact (NEW): the two SMALL cards (Boletim/ Resultados, card 1; Comunicação, card 4) render image + caption SIDE BY SIDE (image fixed ~170px, caption filling the rest of the column) instead of the base `.doc-card`'s stacked column layout — matches the settled- original's ~170x235/168x233 small-card treatment. */ .cto-page .doc-card--resource-compact { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .cto-page .doc-card--resource-compact img { width: 170px; flex: 0 0 170px; margin-bottom: 0; } .cto-page .doc-card--resource-compact .doc-card__body { flex: 1 1 auto; min-width: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid--resource-masonry { column-count: 1; } .cto-page .doc-card--resource-compact { flex-direction: column; } .cto-page .doc-card--resource-compact img { width: 100%; flex-basis: auto; margin-bottom: 10px; } } /* --- .cto-cta-link--dark: same text-link + arrow-icon shell as `.cto-cta-link` (CREATE#8, white text for dark bands) but for use on a WHITE section (the Recursos "ACESSE AQUI" links) — ink text at rest, red on hover/focus per the recipe's `hover_color:#f00001`. */ .cto-page .cto-cta-link--dark { color: var(--ink); } .cto-page .cto-cta-link--dark:hover, .cto-page .cto-cta-link--dark:focus-visible { color: #f00001; } /* --- .cto-gallery--square: opt-in modifier of `.cto-gallery` (which is a flex row of NATURAL-aspect images elsewhere, REGLA DURA no-crop, per its own comment above) -- teatro's own settled-original render measures its 6-photo gallery at UNIFORM ~1:1 cells despite the source files' varied native ratios (landscape 2560x1706, 860x668, etc.), i.e. the ORIGINAL itself cover-crops this specific gallery to a square grid (an Elementor fixed-thumbnail gallery widget). Reproducing THAT crop is the fidelity contract's own instruction ("reproduce the crop the original had"); it is a distinct instance from the natural-aspect gallery elsewhere, so this is an opt-in modifier, never a change to the base flex behavior. */ .cto-page .cto-gallery--square { display: grid; grid-template-columns: repeat(3, 1fr); } .cto-page .cto-gallery--square > img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } @media (max-width: 700px) { .cto-page .cto-gallery--square { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cto-page .cto-gallery--square { grid-template-columns: 1fr; } } /* --- .cto-media-grid: a BARE 4-column image grid (Publicações) — distinct from `.pub-grid`/`.pub-card` (publicacoes/2788's own component, which adds white card chrome + a title/subtitle row): the settled-original crop (`out/crop-publicacoes.png`) shows these 29 covers as plain linked images with NO card background/border/shadow/title -- the cover art itself carries all its own text. A new component name avoids overloading `.pub-grid`'s card semantics for a page that never wanted them. The trailing incomplete row (discrepancy #3: 3 of 4 final-row widgets were genuinely empty in the original, never populated) is reproduced with `.cto-media-grid__cell--empty` spacer cells, not invented content. */ .cto-page .cto-media-grid { /* Dims pixel-measured off the settled-original's first cover row (measure-recursos-pub-5055.mjs): 4 covers at x=[203,400]/[432,629]/ [650,847]/[869,1066] -> ~197px cells, ~862px total inset, centered. The live build had grown this to ~263x370 covers at 1122px wide (DESIGN-FIDELITY fix pass, 2026-07-09, F3) -- constraining max-width to the measured inset + a smaller gap reproduces both the smaller cover size and the narrower inset without hand-fixing per-cell dims (the grid divides 862px into 4 equal ~200px columns on its own). */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 862px; margin: 0 auto var(--space-4); } .cto-page .cto-media-grid img { width: 100%; height: auto; object-fit: contain; margin: 0; border-radius: 0; display: block; } .cto-page .cto-media-grid__cell--empty { visibility: hidden; } @media (max-width: 900px) { .cto-page .cto-media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-media-grid { grid-template-columns: 1fr; } .cto-page .cto-media-grid__cell--empty { display: none; } } /* --- .cto-band--split (NEW, "Compromisso"): full-bleed WHITE 2-column composite -- no analogue among the existing ordered-section types (per the recipe's own CREATE list). Left column: eyebrow-tag + big red quote-mark + italic pull-quote + attribution + a video "Assistir" link (no embed, matching the 0-remote-hosts contract already set by `.cto-band--video`). Right column: 2-up photo row + a heading + a solid red CTA link-out ("Assista completo"). The recipe's own `_elementor_data` overlay settings for this section (#0c0c0c/.7) are DEAD -- confirmed no `background_image` + the generated CSS overlay rule carries no color/ opacity -- so this section paints plain white, no `.cto-band__overlay`. */ .cto-page .cto-band--split { background: #fff; } .cto-page .cto-band__inner--split { max-width: 1170px; margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .cto-page .cto-band__split-mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1; font-weight: 700; margin: 0 0 4px; } .cto-page .cto-band__split-quote { font-style: italic; color: var(--ink); font-size: 15px; line-height: 1.65; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-attribution { color: var(--ink); font-size: 14px; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-video { display: inline-flex; align-items: center; gap: 8px; background: #0c0c0c; color: #fff; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; justify-content: center; text-decoration: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cto-page .cto-band__split-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-photos img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .cto-band__split-body { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.3em; line-height: 1.4; color: var(--ink); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 34px; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-band__split-cta:hover { filter: brightness(1.06); } @media (max-width: 900px) { .cto-page .cto-band__inner--split { grid-template-columns: 1fr; padding: 70px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__inner--split { padding: 50px 15px; } .cto-page .cto-band__split-photos { gap: 10px; } } /* --- .cto-band--video-duo (NEW, closing "Coordenação artística" band): a full-bleed photo band (same `.cto-band__bg`/`.cto-band__overlay` base as `--quote`/`--inset` above) whose content is an eyebrow-tag (`--light`, red box) + 2 side-by-side "video cards" (label + text + white arrow-icon link-out) -- distinct from `.cto-band--quote`'s single centered/boxed quote and from `.cto-band--content`'s doc-grid+panel composition. DISCREPANCY (masthead's same motion-fx artifact, CSS/file-confirmed real photo -- see build report): implemented with the real photo per CSS. */ .cto-page .cto-band--video-duo { min-height: 0; } .cto-page .cto-band__inner--video-duo { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 125px 24px 100px; } .cto-page .cto-band__video-duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-4); } .cto-page .video-duo-card { background: #0c0c0c; padding: var(--space-3); min-height: 220px; display: flex; flex-direction: column; } /* Embedded YouTube player ABOVE the label/text (Lucas 2026-07-10 #3): the original "Coordenação artística" cards each open with a real, playable video embed. Per the owner's explicit sanction (2026-07-10) these 2 embeds override the 0-remote-hosts contract as direct YouTube iframes (see page.php band-video-duo). 16:9 responsive box, no border/radius (matches the flat #0c0c0c card). */ .cto-page .video-duo-card__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 var(--space-2); background: #000; } .cto-page .video-duo-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .cto-page .video-duo-card__label { color: #919191; font-size: 13px; margin: 0 0 10px; } .cto-page .video-duo-card__text { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-2); } .cto-page .video-duo-card__link { color: #fff; margin-top: auto; display: inline-flex; } @media (max-width: 700px) { .cto-page .cto-band__inner--video-duo { padding: 70px 24px 56px; } .cto-page .cto-band__video-duo-grid { grid-template-columns: 1fr; } } /* ========================================================================== Noticias (post 5027) DESIGN-FIDELITY pass, 2026-07-09 — 3 net-new `_cto_sections` types: `heading-split`, `news-grid`, `band-video-trio`. ========================================================================== */ /* --- .heading-split (NEW `heading-split` case): ported verbatim from home/cto-list (red-bar h2) into a `.cto-page`-scoped rule so the ordered- sections mechanism can render it as a plain white section heading. Redesign-wins fidelity call (recipe #2): same semantic text/structure as home's own "Últimas notícias", not the original's Montserrat/black/ border-left treatment. */ .cto-page .heading-split { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-2); } .cto-page .heading-split .rule { width: 3px; align-self: stretch; min-height: 30px; background: var(--accent); flex: 0 0 auto; } .cto-page .heading-split h2 { margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-weight: 300; } .cto-page .heading-split h2 b { font-weight: 800; } /* --- .cto-band--heading-split / .cto-band--news-grid: zero the standard `.cto-band__inner--column` bottom padding on the heading section and the top padding on the grid section that immediately follows it, so the two flush (0-margin, per the `.cto-band--flush` rule above) sections read as ONE continuous white "ÚLTIMAS notícias" block, per the recipe's own instruction ("usa `.heading-split` acima como cabeçalho da seção, não duplicar"). */ .cto-page .cto-band--heading-split .cto-band__inner--column { padding-bottom: 0; } .cto-page .cto-band--news-grid .cto-band__inner--column { padding-top: var(--space-2); } /* DESIGN-FIDELITY fix (D3, 2026-07-09): `.cto-band__inner` (the base rule shared by every `.cto-band` variant, cto-page.css ~L561) sets `align-items: center`, built for its original centered-title-over-photo layout. `.cto-band__inner--column` never overrides it, so `.heading-split` (a narrow flex row, not full-width content like `.cards`) rendered centered in the column instead of flush-left against the reading column -- neither the original (border-left, content_position:bottom) nor the home's own `.heading-split` (left-flush in its flex row, no centering) is centered. Scoped to the heading-split section only: the "column" case (free-form prose) and `.cards`/video-trio grids are unaffected. */ .cto-page .cto-band--heading-split .cto-band__inner--column { align-items: flex-start; } /* --- SPACING FIX (transparencia / post 3157, 2026-07-10): the two in-body `.heading-split` section headers ("Relatórios anuais", "Documentações") rendered flush against the block above them (a ~24px / ~40px natural gap), losing the original's generous whitespace that set each block apart. In the original Elementor layout each of these was the top of its own white section whose top padding created the separation: - "Relatórios anuais" region = section 5199f127, `padding:111px 0px 0px 0px` (uploads/elementor/css/post-3157.css) - "Documentações" region = section 1ea01b57, `padding:108px 0px 113px 0px` (uploads/elementor/css/post-3157.css) Re-establish that top separation via a margin-top on each heading-split, scoped to page-id-3157 only (so the shared `.heading-split` used by other pages is untouched). Selected by preceding sibling: the "Relatórios anuais" header follows a prose ``; "Documentações" follows the `.pub-grid` of report covers. Margins collapse with the preceding block, so the rendered gap equals the anchored value rather than stacking on it. */ .page-id-3157 .cto-page .entry-content > p + .heading-split { margin-top: 111px; } .page-id-3157 .cto-page .entry-content > .pub-grid + .heading-split { margin-top: 108px; } /* --- .cards / .card / .load-more-wrap / .btn / .no-comments (NEW `news-grid` case): copied verbatim from cto-home.css/cto-list.css so the dynamic grid is pixel-identical to home's own "Últimas notícias" cards — see cto-list.css's own comment for the same convention. The "Carregar mais" button uses the site's `--accent` red (the eael plugin's own cyan `#29d8d8` is plugin styling, not the design system, per the recipe). */ .cto-page .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .card { background: var(--reading); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s ease; } .cto-page .card:hover { transform: translateY(-2px); } .cto-page .card .photo { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-wash-1), var(--accent-wash-2)), repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px), var(--hairline); display: grid; place-items: center; } .cto-page .card .photo span { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; } .cto-page .card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cto-page .card .card-title { font-size: 18px; line-height: 1.25; font-weight: 700; padding: var(--space-2); margin: 0; color: var(--ink); } .cto-page .card .card-title .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cto-page .card .card-more { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); padding: 0 var(--space-2) var(--space-2); margin: 0; } /* --- .card-meta: date row under "Leia mais" (slot from DESIGN-FIDELITY fix D2, 2026-07-09, which replicated the eael-post-grid's .eael-entry-footer avatar + author + date byline). DECISION Lucas 2026-07-10: author (avatar + name) removed from all grid cards -- date only, left-aligned in the same padded card-body slot. Flex/gap and the 24px __avatar rule dropped with the avatar (single text child needs neither). */ .cto-page .card .card-meta { padding: 0 var(--space-2) var(--space-2); margin-top: -6px; } .cto-page .card .card-meta__text { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); } .cto-page .load-more-wrap { text-align: center; margin-top: var(--space-4); } .cto-page .load-more-wrap .btn { width: auto; max-width: 100%; padding: 12px 28px; } /* `.btn`'s base rule (red --accent fill) is already declared above (shared with cursos' CTAs) -- reused verbatim here, not redeclared. Only the fetch-append busy state is net-new. */ .cto-page .btn[aria-busy="true"] { opacity: .6; pointer-events: none; } .cto-page .no-comments { color: var(--ink-soft); font-size: 14.5px; background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; max-width: 640px; } @media (max-width: 900px) { .cto-page .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cards { grid-template-columns: 1fr; } } /* --- .cto-band--video-trio / .video-trio-card (NEW `band-video-trio` case): 3 real-photo cards + play-icon link-out, plain white bg, no overlay — reconstructed from the dead Pro `media-carousel` widget's own settings (coverflow skin, height:500 desktop / 400 tablet). Cover-cropped to a uniform card height (no faithful settled-original render exists for this widget to violate — it painted empty in every capture — so this is a from-data reconstruction, not a crop of a real rendered photo). */ .cto-page .cto-band--video-trio { background: #fff; } .cto-page .cto-band__video-trio-grid { max-width: 1170px; margin: 0 auto; padding: 120px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .video-trio-card { position: relative; display: block; height: 500px; overflow: hidden; border-radius: 0; } .cto-page .video-trio-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cto-page .video-trio-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .cto-page .cto-band__video-trio-grid { padding: 80px 24px; } .cto-page .video-trio-card { height: 400px; } } @media (max-width: 560px) { .cto-page .cto-band__video-trio-grid { grid-template-columns: 1fr; padding: 46px 15px 50px; } .cto-page .video-trio-card { height: 320px; } }
, so its margin matches the base `.cto-band`'s all-around space-4 formula, not the BEFORE-article masthead/panel formula). */ .cto-page .cto-history-band { margin: var(--space-4) calc(-1 * var(--space-3)); background: #0c0c0c; } .cto-page .cto-history-band__inner { max-width: 1170px; margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 6px 1fr 1fr; gap: var(--space-4); align-items: start; } .cto-page .cto-history-band__bar { background: #f00001; align-self: stretch; min-height: 60px; } .cto-page .cto-history-band__heading { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.1em; line-height: 1.25; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-history-band__lead { color: #fff; font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; } .cto-page .cto-history-band__body { color: #fff; font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; } @media (max-width: 900px) { .cto-page .cto-history-band { margin: var(--space-3) calc(-1 * var(--space-3)); } .cto-page .cto-history-band__inner { grid-template-columns: 1fr; gap: var(--space-3); padding: 70px 24px; } .cto-page .cto-history-band__bar { width: 60px; height: 6px; min-height: 0; align-self: auto; } } @media (max-width: 560px) { .cto-page .cto-history-band { margin: var(--space-3) 0; } .cto-page .cto-history-band__inner { padding: 56px 15px; } } /* --- .cto-after-band — reading-column-width wrapper for content authored via `_cto_after_band_content`, rendered AFTER `.cto-history-band` (net-new hook; see page.php). Deliberately NO white-card chrome (unlike `.page-body`) — the past-groups grid sits directly on `.cto-page`'s cream background, per the recipe. */ .cto-page .cto-after-band { max-width: 1040px; margin: 0 auto; } /* ========================================================================== ORDERED SECTIONS (net-new, residencia-artistica/4892 DESIGN-FIDELITY pass, 2026-07-09) — see page.php `ctorio_child_render_cto_section()` PHPDoc for the JSON contract. Every section below shares the outer class `.cto-band` (full-bleed escape) with a `.cto-band--` modifier; unlike the base `.cto-band` (margin `var(--space-4) calc(-1*var(--space-3))`, used AFTER a classic with real vertical breathing room), consecutive ordered sections must butt flush against each other — the settled original is ONE continuous dark canvas from the masthead through the PDF band, so any vertical gap here would show the page's cream background as an unwanted seam. `.cto-band--flush` zeroes vertical margin (keeps the horizontal full-bleed cancel); the adjacent-sibling rule cancels the masthead's own trailing space-4 gap so the FIRST ordered section butts against it too. ========================================================================== */ .cto-page .cto-band--flush, .cto-page .cto-band--intro, .cto-page .cto-band--quote, .cto-page .cto-band--inset, .cto-page .cto-band--content, .cto-page .cto-band--column, .cto-page .cto-band--video, .cto-page .cto-band--split, .cto-page .cto-band--video-duo, .cto-page .cto-band--heading-split, .cto-page .cto-band--news-grid, .cto-page .cto-band--video-trio { margin: 0 calc(-1 * var(--space-3)); min-height: 0; display: block; text-align: left; overflow: hidden; position: relative; } .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Same flush treatment when the FIRST ordered section follows `.cto-hero` instead of `.cto-masthead` (net-new, teatro-das-oprimidas/5055: masthead THEN hero THEN the ordered-sections list, so the hero is the section list's immediate preceding sibling there). Inert on every other page -- none of them place a `.cto-band` sibling directly after `.cto-hero` today (they all resume at a classic `` instead). */ .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Trailing gap before the footer (the settled original shows a thin cream sliver between the video band and the footer, unlike every other section-to-section transition, which is flush). */ .cto-page .cto-band--video { margin-bottom: var(--space-4); } @media (max-width: 560px) { .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-band--video { margin-bottom: var(--space-3); } } /* --- .cto-band--intro — full-bleed #0c0c0c 3-col opening statement (recipe section 2): a red `--accent` column carrying a bottom-to-top rotated eyebrow label ("O PROGRAMA") + two independent prose columns (middle H3+2p, right 3p). Distinct from `.cto-band--panel` (cursos contact band, equal thirds, decorative accent block, ONE prose column) — this accent column is narrow/fixed and carries real (rotated) text, and there are TWO prose columns, not one. */ .cto-page .cto-band--intro { background: #0c0c0c; } .cto-page .cto-band__inner--intro { max-width: 1170px; margin: 0 auto; padding: 90px 24px; display: grid; grid-template-columns: 70px 1fr 1fr; gap: var(--space-4); align-items: stretch; } /* Scoped to `.cto-band--intro` specifically (NOT a bare `.cto-band__col--accent` rule) — that exact class name is already used, unscoped-looking but distinct, by `.cto-band--panel`'s decorative accent block (cursos); scoping by ancestor here keeps that page's existing block byte-identical. */ .cto-page .cto-band--intro .cto-band__col--accent { background: var(--accent); display: flex; align-items: flex-end; justify-content: center; padding: var(--space-3) 0; min-height: 220px; } .cto-page .cto-band__accent-label { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-family: "Questrial", var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .cto-page .cto-band__col--text-a h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.7em; line-height: 1.35; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p, .cto-page .cto-band__col--text-b p { font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.65; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p:last-child, .cto-page .cto-band__col--text-b p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band__inner--intro { grid-template-columns: 60px 1fr; padding: 60px 24px; gap: var(--space-3); } .cto-page .cto-band__col--text-b { grid-column: 2; } } @media (max-width: 560px) { .cto-page .cto-band__inner--intro { grid-template-columns: 1fr; padding: 44px 15px; } .cto-page .cto-band__col--accent { min-height: 60px; align-items: center; } .cto-page .cto-band__accent-label { writing-mode: horizontal-tb; transform: none; } .cto-page .cto-band__col--text-b { grid-column: 1; } } /* --- .cto-band--quote — `.cto-band__quote` faithful-replica photo band (CREATE#2). Two layout modifiers: - `--quote-center`: full-width centered composition (the reconstructed b3: big static headline quote + attribution, D1 — no eyebrow/title/ name in this instance, but the markup supports them). - `--quote-boxed`: b6a's ~926px boxed / left-aligned treatment (an inner text column ~469px wide sits at the box's left, the box's right half shows plain band photo). Overlay is entirely inline (page.php writes overlay_color/opacity/ position/blend per instance) — this realizes CREATE#1's "configurable overlay" via the ordered-sections JSON rather than singular flat postmeta, since one page needs MANY differently configured bands (normal/darken/ lighten all appear on this page). */ /* .cto-band__bg / .cto-band__overlay's base rules (defined earlier, under the plain .cto-band component) already give absolute position:inset:0 cover treatment regardless of which `--modifier` the ancestor `.cto-band` also carries, so `--quote`/`--inset`/`--video` below reuse them as-is (no duplicate override needed) — only per-instance color/opacity/blend is set inline (page.php), which always wins over the class's own defaults. */ .cto-page .cto-band--quote { display: flex; align-items: center; min-height: 480px; } .cto-page .cto-band__inner--quote { position: relative; z-index: 1; width: 100%; padding: 90px 24px; } .cto-page .cto-band__quote-eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__quote-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__quote-text { font-family: "Prompt", var(--font-body); font-weight: 300; color: #fff; line-height: 1.6; margin: 0 0 var(--space-2); } .cto-page .cto-band__quote-name { font-weight: 700; color: #fff; margin: 0 0 4px; } .cto-page .cto-band__quote-attribution { color: #ff0202; font-family: "Questrial", var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; } /* Center modifier (b3): a single large centered statement, no box. */ .cto-page .cto-band--quote-center .cto-band__inner--quote { text-align: center; } .cto-page .cto-band--quote-center .cto-band__quote { max-width: 720px; margin: 0 auto; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.7em; } /* Boxed modifier (b6a): 926px box, text column pinned left at ~469px, the right half of the box shows plain band photo (no text). */ .cto-page .cto-band--quote-boxed .cto-band__inner--quote { max-width: 926px; margin: 0 auto; } .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 469px; } @media (max-width: 700px) { .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 100%; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.3em; } } /* --- .cto-band--inset — `.cto-band__inset` + `.cto-band__body` (CREATE#3): an outer full-bleed photo (overlay via inline vars) with a nested inset photo (NO overlay, configurable width via --cto-inset-w) + centered white body text below it. Used for b6b. */ .cto-page .cto-band--inset { min-height: 0; } .cto-page .cto-band__inner--inset { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 70px 24px 90px; } .cto-page .cto-band__inset { width: var(--cto-inset-w, 752px); max-width: 100%; margin: 0 auto var(--space-4); aspect-ratio: 1296 / 864; overflow: hidden; } .cto-page .cto-band__inset img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .cto-band__body { max-width: 800px; margin: 0 auto; text-align: center; color: #fff; font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.15em; line-height: 1.6; } .cto-page .cto-band__body p { margin: 0; } @media (max-width: 560px) { .cto-page .cto-band__inner--inset { padding: 44px 15px 56px; } .cto-page .cto-band__body { font-size: 1em; } } /* --- .cto-band--content — PDF/doc band (CREATE#4): the section's OWN background is the NATURAL-SIZE TILED photo (background-size:auto + background-repeat:repeat, never cover); a solid #0c0c0c `.cto-band__panel` pinned LEFT (fixed width, does not stretch) occludes most of it, so the tiled photo only shows through on the right. Used for b10. */ .cto-page .cto-band--content { background-image: var(--cto-band-content-bg); background-size: auto; background-repeat: repeat; background-position: center; min-height: 0; display: flex; } .cto-page .cto-band__panel { position: relative; z-index: 1; width: 670px; max-width: 100%; flex: 0 0 auto; background: #0c0c0c; color: #fff; padding: 90px 60px 90px 24px; } .cto-page .cto-band__eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__panel-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-4); } .cto-page .cto-band__panel-body { font-size: 15px; line-height: 1.6; } .cto-page .cto-band__panel-body p { margin: 0 0 var(--space-3); color: #fff; } .cto-page .cto-band__panel-body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band--content { display: block; } .cto-page .cto-band__panel { width: 100%; padding: 60px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__panel { padding: 44px 15px; } .cto-page .cto-band__panel-title { font-size: 1.8em; } } /* --- .cto-doc-grid / .doc-card (CREATE#7): NATURAL-SIZE (uncropped) portrait image + title + optional "(disponível apenas para inscritos)" caption + optional external link. Used for b10's 3 PDF cards AND (as `.doc-card--featured`) the reading-recommendations Boal portrait. */ .cto-page .cto-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); } .cto-page .doc-card { display: flex; flex-direction: column; } .cto-page .doc-card__link { display: block; } .cto-page .doc-card img { width: 100%; height: auto; margin: 0 0 10px; border-radius: 0; } .cto-page .doc-card__title { font-size: 14px; font-weight: 600; color: #fff; margin: 0; line-height: 1.35; } .cto-page .doc-card__caption { font-size: 12px; font-style: italic; color: #b7b7b7; margin: 4px 0 0; } /* Featured (Boal portrait, reading-recommendations left column): h6/h5 caption pairing instead of title/caption paragraphs, ON A WHITE section (dark text), per the recipe. */ .cto-page .doc-card--featured img { margin-bottom: var(--space-2); } .cto-page .doc-card--featured h6 { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin: 0 0 4px; text-transform: none; } .cto-page .doc-card--featured h5 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid { grid-template-columns: 1fr; } } /* --- .cto-cta-link (CREATE#8): text-link CTA, no box/border, right arrow icon — distinct from the boxed `.cto-masthead__btn--ghost` (reused verbatim for the two-column "Como participar?" / "Formas de convênio" CTAs). Used for b10's "INSCREVA-SE AGORA". */ .cto-page .cto-cta-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-cta-link__arrow { flex: 0 0 auto; transition: transform .15s ease; } .cto-page .cto-cta-link:hover .cto-cta-link__arrow, .cto-page .cto-cta-link:focus-visible .cto-cta-link__arrow { transform: translateX(4px); } /* --- .cto-eyebrow-tag (CREATE#9): white uppercase bold text on a red #f00001 box that the text slightly overflows to the left (negative margin). `--light` modifier (section 15): dark ink text on a light box, for use on a white section bg. */ .cto-page .cto-eyebrow-tag { display: inline-block; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 22px; margin: 0 0 var(--space-3) -14px; } .cto-page .cto-eyebrow-tag--light { background: var(--hairline); color: var(--ink); } @media (max-width: 560px) { .cto-page .cto-eyebrow-tag { margin-left: 0; font-size: 12px; padding: 8px 16px; } } /* --- .cto-eyebrow-tag--start (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): alignment-only fix for teatro's closing "COORDENAÇÃO ARTÍSTICA" instance of the shared red-pill `.cto-eyebrow-tag` — the settled-original shows it flush-left, but the shared `.cto-band__inner` (column/video-duo types) is a flex column with `align-items:center`, which centers it as a flex item. `align-self` overrides only THIS item's cross-axis position; `.cto-eyebrow-tag`'s own red/white styling stays untouched for every other caller. */ .cto-page .cto-eyebrow-tag--start { align-self: flex-start; } /* --- .cto-eyebrow-line (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): the PLAIN-TEXT eyebrow variant used on white sections (Compromisso/galeria/ PUBLICAÇÕES) — confirmed against `_elementor_data` (dump-elementor- 5055.php): all three heading widgets carry `title_color:#0c0c0c` + typography settings only, with NO `background_color` on the widget OR its parent column, and the generated `post-5055.css` has no background rule for any of their element IDs either. The red/gray boxed pill visible in a couple of settled-original crops (Compromisso, galeria, PUBLICAÇÕES) is NOT backed by data or CSS — cross-checked as a settle/capture artifact of the widgets' `fadeInRight` entrance animation (`_animation_delay:400`), not a real design element; texto plano per the fidelity contract ("si el CSS/data no lo respalda, texto plano — CSS manda"). `align-self:flex-start` overrides the shared `.cto-band__inner` flex centering (see `.cto-eyebrow-tag--start` above) the same way. Values (uppercase, weight 800, letter-spacing 4.8px, Questrial, line-height 1.5em) are copied verbatim from the widget's own typography settings. Distinct class (never `.cto-eyebrow-tag`, shared by residencia/cursos) so those pages' own red pill stays byte-identical. */ .cto-page .cto-eyebrow-line { display: inline-block; align-self: flex-start; color: #0c0c0c; font-family: "Questrial", var(--font-ui); font-size: 1em; font-weight: 800; letter-spacing: 4.8px; line-height: 1.5em; text-transform: uppercase; margin: 0 0 var(--space-3); } /* --- .cto-people-grid / .person-card (CREATE#5): 1:1 170x170 cover-crop photo + centered name (bold) / role / country, 4-up. Used for the "PESSOAS FORMADAS PELO PROGRAMA" grid. */ .cto-page .cto-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .cto-page .person-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .cto-page .person-photo { width: 170px; max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .person-name { color: #fff; font-weight: 700; font-size: 15px; margin: var(--space-2) 0 6px; } .cto-page .person-role { color: #d8d8d8; font-size: 13px; font-style: italic; line-height: 1.4; margin: 0 0 4px; } .cto-page .person-country { color: #9a9a9a; font-size: 13px; margin: 0; } @media (max-width: 700px) { .cto-page .cto-people-grid { grid-template-columns: repeat(2, 1fr); } } /* --- .cto-steps-grid / .step-card (CREATE#6): 1:1 170x170 cover-crop photo LEFT + numeric badge/label RIGHT (flex row, NOT stacked), 3/3/1 rows; trailing short rows simply have fewer cards (no phantom placeholders). Used for "ATIVIDADES INCLUSAS NO PROGRAMA". */ .cto-page .cto-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-3); margin: 0 0 var(--space-4); } .cto-page .step-card { display: flex; align-items: flex-start; gap: var(--space-2); } .cto-page .step-photo { flex: 0 0 auto; width: 100px; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .step-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .step-number { display: block; color: #8a8a8a; font-size: 13px; margin: 0 0 4px; } .cto-page .step-label { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; } @media (max-width: 900px) { .cto-page .cto-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-steps-grid { grid-template-columns: 1fr; } .cto-page .step-photo { width: 80px; } } /* --- CTA two-column block (in-column, reuses `.cto-masthead__btn`/`--ghost` verbatim — those rules are declared `.cto-page .cto-masthead__btn…`, not scoped under `.cto-masthead`, so they apply anywhere in `.cto-page`; the brief's REUSE list counts this as the ghost CTA's 2nd/3rd use on this page). */ .cto-page .cto-cta-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .cto-page .cto-cta-2col h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.8em; color: #fff; margin: 0 0 var(--space-2); } .cto-page .cto-cta-2col p { color: #d8d8d8; font-size: 15px; line-height: 1.6; margin: 0 0 var(--space-3); } @media (max-width: 700px) { .cto-page .cto-cta-2col { grid-template-columns: 1fr; } } /* --- .cto-band--column (CREATE, generalized): reading-width content sharing its section's own full-bleed background (dark #0c0c0c or light #fff) — distinct from `.cto-after-band` (sits on the page's cream bg): residencia's in-column chunks (grids/eyebrow-tags/CTAs) sit directly on the SAME solid canvas as the surrounding bands, per the settled original (no white card anywhere until the reading-recommendations chunk, which IS on white). */ .cto-page .cto-band--column-dark { background: #0c0c0c; } .cto-page .cto-band--column-light { background: #fff; } .cto-page .cto-band__inner--column { max-width: 1170px; margin: 0 auto; padding: 70px 24px; } @media (max-width: 560px) { .cto-page .cto-band__inner--column { padding: 50px 15px; } } /* --- .cto-reading-grid: Boal portrait (`.doc-card--featured`, left 50%) + 2x3 grid of SQUARE 170x170 `.reading-card`s (right 50%) — per D3 the reading-cards are square crops (unlike the b10 doc-cards' natural aspect), author byline above the title. */ .cto-page .cto-reading-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .cto-page .reading-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .reading-card { display: flex; flex-direction: column; } .cto-page .reading-card__link { display: block; } .cto-page .reading-photo { aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px; } .cto-page .reading-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .reading-author { font-size: 12px; color: var(--ink-soft); margin: 0 0 2px; } .cto-page .reading-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0; } .cto-page .reading-caption { font-size: 11px; font-style: italic; color: var(--ink-soft); margin: 3px 0 0; } @media (max-width: 900px) { .cto-page .cto-reading-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cto-page .reading-card-grid { grid-template-columns: repeat(2, 1fr); } } /* --- static reconstructed testimonial (D1): a red quote-mark glyph + quote text + name, no carousel/JS. In-column, on the same white background as the reading-recommendations grid above it. */ .cto-page .cto-testimonial { max-width: 720px; margin: var(--space-4) auto 0; text-align: center; } .cto-page .cto-testimonial__mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 1; font-weight: 700; margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__quote { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__name { font-weight: 700; color: var(--ink); margin: 0; } /* --- .cto-band--video (D2 + videofix 2026-07-10): the original is a BACKGROUND-VIDEO section (post-4892 _elementor_data element 19bdbbe4, background_background:video, youtu.be/VE48YJ767kQ start=130). Replicated 0-remote-hosts as a LOCAL ambient (home hero treatment) over the photo fallback. 16:9, matching the settled original's band proportions. Section base #000000 per post-4892.css: `.elementor-4892 .elementor-element.elementor-element-19bdbbe4:not(...) {background-color:#000000;}`. */ .cto-page .cto-band--video { aspect-ratio: 16 / 9; max-height: 720px; background: #000000; } @media (max-width: 560px) { .cto-page .cto-band--video { aspect-ratio: 4 / 3; } } /* Ambient background video fills the band edge-to-edge exactly like `.cto-band__bg` (cover, uncropped-proportions box = the section itself), mirroring the original's `.elementor-background-video-container` which covers section 19bdbbe4 behind `.elementor-background-overlay` (overlay #b79c77/0.35 per post-4892.css `.elementor-element-19bdbbe4 > .elementor-background-overlay{background-color:#b79c77;opacity:0.35;}` — the overlay div renders AFTER the video in the DOM, so it paints above). */ .cto-page .cto-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; max-width: none; } /* ========================================================================== TEATRO DAS OPRIMIDAS (post 5055) — DESIGN-FIDELITY pass, 2026-07-09. Every rule below is additive/scoped: new classes or opt-in modifiers of existing ones, touching no selector any other page relies on. ========================================================================== */ /* --- Recursos doc-card variant (`.doc-card--resource`): the base `.doc-card` (CREATE#7, above) was built for a DARK panel (band-content/b10, white title text) or the reading-grid's `--featured` white-bg h6/h5 pairing. Teatro's Recursos grid needs a THIRD combination on a plain white section: natural-portrait cover + a gray eyebrow + a dark title + a red-hover "ACESSE AQUI" link-out — none of the two existing variants fit, so this adds (never overrides) a gray eyebrow line and a dark-title modifier. Grid shape (DESIGN-FIDELITY fix pass, 2026-07-09, F2): the settled-original has NO section header ("RECURSOS" pill removed — see forge-teatro-5055.php) and its 5 cards are a genuine 2-size masonry, not `.cto-doc-grid`'s equal 3-col grid — see `.cto-doc-grid--resource-masonry` below. */ .cto-page .doc-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #919191; margin: 0 0 4px; } .cto-page .doc-card__title--dark { color: var(--ink); } /* --- .cto-doc-grid--resource-masonry (NEW, opt-in modifier of the shared `.cto-doc-grid`, never overriding its base `display:grid` 3-col rule for other callers): pixel-measured off the settled-original (measure-recursos-pub-5055.mjs column-run scan) the Recursos grid is a CSS multi-column masonry, not a row-major grid — col1 holds card 1 (small) + card 2 (large), col2 holds card 3 (large) + card 4 (small), col3 holds card 5 (large) alone. `column-count` reproduces this column-major flow directly from DOM order; forced breaks on cards 3 and 5 make the 2+2+1 grouping deterministic rather than depending on the browser's own column- balance heuristic. `width:100%` guards against the shared `.cto-band__inner` flex `align-items:center` (column type) shrinking this to its content width instead of the full reading column. */ .cto-page .cto-doc-grid--resource-masonry { display: block; width: 100%; column-count: 3; column-gap: 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource { break-inside: avoid; margin: 0 0 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(3), .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(5) { break-before: column; } /* --- .doc-card--resource-compact (NEW): the two SMALL cards (Boletim/ Resultados, card 1; Comunicação, card 4) render image + caption SIDE BY SIDE (image fixed ~170px, caption filling the rest of the column) instead of the base `.doc-card`'s stacked column layout — matches the settled- original's ~170x235/168x233 small-card treatment. */ .cto-page .doc-card--resource-compact { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .cto-page .doc-card--resource-compact img { width: 170px; flex: 0 0 170px; margin-bottom: 0; } .cto-page .doc-card--resource-compact .doc-card__body { flex: 1 1 auto; min-width: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid--resource-masonry { column-count: 1; } .cto-page .doc-card--resource-compact { flex-direction: column; } .cto-page .doc-card--resource-compact img { width: 100%; flex-basis: auto; margin-bottom: 10px; } } /* --- .cto-cta-link--dark: same text-link + arrow-icon shell as `.cto-cta-link` (CREATE#8, white text for dark bands) but for use on a WHITE section (the Recursos "ACESSE AQUI" links) — ink text at rest, red on hover/focus per the recipe's `hover_color:#f00001`. */ .cto-page .cto-cta-link--dark { color: var(--ink); } .cto-page .cto-cta-link--dark:hover, .cto-page .cto-cta-link--dark:focus-visible { color: #f00001; } /* --- .cto-gallery--square: opt-in modifier of `.cto-gallery` (which is a flex row of NATURAL-aspect images elsewhere, REGLA DURA no-crop, per its own comment above) -- teatro's own settled-original render measures its 6-photo gallery at UNIFORM ~1:1 cells despite the source files' varied native ratios (landscape 2560x1706, 860x668, etc.), i.e. the ORIGINAL itself cover-crops this specific gallery to a square grid (an Elementor fixed-thumbnail gallery widget). Reproducing THAT crop is the fidelity contract's own instruction ("reproduce the crop the original had"); it is a distinct instance from the natural-aspect gallery elsewhere, so this is an opt-in modifier, never a change to the base flex behavior. */ .cto-page .cto-gallery--square { display: grid; grid-template-columns: repeat(3, 1fr); } .cto-page .cto-gallery--square > img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } @media (max-width: 700px) { .cto-page .cto-gallery--square { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cto-page .cto-gallery--square { grid-template-columns: 1fr; } } /* --- .cto-media-grid: a BARE 4-column image grid (Publicações) — distinct from `.pub-grid`/`.pub-card` (publicacoes/2788's own component, which adds white card chrome + a title/subtitle row): the settled-original crop (`out/crop-publicacoes.png`) shows these 29 covers as plain linked images with NO card background/border/shadow/title -- the cover art itself carries all its own text. A new component name avoids overloading `.pub-grid`'s card semantics for a page that never wanted them. The trailing incomplete row (discrepancy #3: 3 of 4 final-row widgets were genuinely empty in the original, never populated) is reproduced with `.cto-media-grid__cell--empty` spacer cells, not invented content. */ .cto-page .cto-media-grid { /* Dims pixel-measured off the settled-original's first cover row (measure-recursos-pub-5055.mjs): 4 covers at x=[203,400]/[432,629]/ [650,847]/[869,1066] -> ~197px cells, ~862px total inset, centered. The live build had grown this to ~263x370 covers at 1122px wide (DESIGN-FIDELITY fix pass, 2026-07-09, F3) -- constraining max-width to the measured inset + a smaller gap reproduces both the smaller cover size and the narrower inset without hand-fixing per-cell dims (the grid divides 862px into 4 equal ~200px columns on its own). */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 862px; margin: 0 auto var(--space-4); } .cto-page .cto-media-grid img { width: 100%; height: auto; object-fit: contain; margin: 0; border-radius: 0; display: block; } .cto-page .cto-media-grid__cell--empty { visibility: hidden; } @media (max-width: 900px) { .cto-page .cto-media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-media-grid { grid-template-columns: 1fr; } .cto-page .cto-media-grid__cell--empty { display: none; } } /* --- .cto-band--split (NEW, "Compromisso"): full-bleed WHITE 2-column composite -- no analogue among the existing ordered-section types (per the recipe's own CREATE list). Left column: eyebrow-tag + big red quote-mark + italic pull-quote + attribution + a video "Assistir" link (no embed, matching the 0-remote-hosts contract already set by `.cto-band--video`). Right column: 2-up photo row + a heading + a solid red CTA link-out ("Assista completo"). The recipe's own `_elementor_data` overlay settings for this section (#0c0c0c/.7) are DEAD -- confirmed no `background_image` + the generated CSS overlay rule carries no color/ opacity -- so this section paints plain white, no `.cto-band__overlay`. */ .cto-page .cto-band--split { background: #fff; } .cto-page .cto-band__inner--split { max-width: 1170px; margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .cto-page .cto-band__split-mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1; font-weight: 700; margin: 0 0 4px; } .cto-page .cto-band__split-quote { font-style: italic; color: var(--ink); font-size: 15px; line-height: 1.65; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-attribution { color: var(--ink); font-size: 14px; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-video { display: inline-flex; align-items: center; gap: 8px; background: #0c0c0c; color: #fff; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; justify-content: center; text-decoration: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cto-page .cto-band__split-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-photos img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .cto-band__split-body { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.3em; line-height: 1.4; color: var(--ink); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 34px; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-band__split-cta:hover { filter: brightness(1.06); } @media (max-width: 900px) { .cto-page .cto-band__inner--split { grid-template-columns: 1fr; padding: 70px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__inner--split { padding: 50px 15px; } .cto-page .cto-band__split-photos { gap: 10px; } } /* --- .cto-band--video-duo (NEW, closing "Coordenação artística" band): a full-bleed photo band (same `.cto-band__bg`/`.cto-band__overlay` base as `--quote`/`--inset` above) whose content is an eyebrow-tag (`--light`, red box) + 2 side-by-side "video cards" (label + text + white arrow-icon link-out) -- distinct from `.cto-band--quote`'s single centered/boxed quote and from `.cto-band--content`'s doc-grid+panel composition. DISCREPANCY (masthead's same motion-fx artifact, CSS/file-confirmed real photo -- see build report): implemented with the real photo per CSS. */ .cto-page .cto-band--video-duo { min-height: 0; } .cto-page .cto-band__inner--video-duo { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 125px 24px 100px; } .cto-page .cto-band__video-duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-4); } .cto-page .video-duo-card { background: #0c0c0c; padding: var(--space-3); min-height: 220px; display: flex; flex-direction: column; } /* Embedded YouTube player ABOVE the label/text (Lucas 2026-07-10 #3): the original "Coordenação artística" cards each open with a real, playable video embed. Per the owner's explicit sanction (2026-07-10) these 2 embeds override the 0-remote-hosts contract as direct YouTube iframes (see page.php band-video-duo). 16:9 responsive box, no border/radius (matches the flat #0c0c0c card). */ .cto-page .video-duo-card__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 var(--space-2); background: #000; } .cto-page .video-duo-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .cto-page .video-duo-card__label { color: #919191; font-size: 13px; margin: 0 0 10px; } .cto-page .video-duo-card__text { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-2); } .cto-page .video-duo-card__link { color: #fff; margin-top: auto; display: inline-flex; } @media (max-width: 700px) { .cto-page .cto-band__inner--video-duo { padding: 70px 24px 56px; } .cto-page .cto-band__video-duo-grid { grid-template-columns: 1fr; } } /* ========================================================================== Noticias (post 5027) DESIGN-FIDELITY pass, 2026-07-09 — 3 net-new `_cto_sections` types: `heading-split`, `news-grid`, `band-video-trio`. ========================================================================== */ /* --- .heading-split (NEW `heading-split` case): ported verbatim from home/cto-list (red-bar h2) into a `.cto-page`-scoped rule so the ordered- sections mechanism can render it as a plain white section heading. Redesign-wins fidelity call (recipe #2): same semantic text/structure as home's own "Últimas notícias", not the original's Montserrat/black/ border-left treatment. */ .cto-page .heading-split { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-2); } .cto-page .heading-split .rule { width: 3px; align-self: stretch; min-height: 30px; background: var(--accent); flex: 0 0 auto; } .cto-page .heading-split h2 { margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-weight: 300; } .cto-page .heading-split h2 b { font-weight: 800; } /* --- .cto-band--heading-split / .cto-band--news-grid: zero the standard `.cto-band__inner--column` bottom padding on the heading section and the top padding on the grid section that immediately follows it, so the two flush (0-margin, per the `.cto-band--flush` rule above) sections read as ONE continuous white "ÚLTIMAS notícias" block, per the recipe's own instruction ("usa `.heading-split` acima como cabeçalho da seção, não duplicar"). */ .cto-page .cto-band--heading-split .cto-band__inner--column { padding-bottom: 0; } .cto-page .cto-band--news-grid .cto-band__inner--column { padding-top: var(--space-2); } /* DESIGN-FIDELITY fix (D3, 2026-07-09): `.cto-band__inner` (the base rule shared by every `.cto-band` variant, cto-page.css ~L561) sets `align-items: center`, built for its original centered-title-over-photo layout. `.cto-band__inner--column` never overrides it, so `.heading-split` (a narrow flex row, not full-width content like `.cards`) rendered centered in the column instead of flush-left against the reading column -- neither the original (border-left, content_position:bottom) nor the home's own `.heading-split` (left-flush in its flex row, no centering) is centered. Scoped to the heading-split section only: the "column" case (free-form prose) and `.cards`/video-trio grids are unaffected. */ .cto-page .cto-band--heading-split .cto-band__inner--column { align-items: flex-start; } /* --- SPACING FIX (transparencia / post 3157, 2026-07-10): the two in-body `.heading-split` section headers ("Relatórios anuais", "Documentações") rendered flush against the block above them (a ~24px / ~40px natural gap), losing the original's generous whitespace that set each block apart. In the original Elementor layout each of these was the top of its own white section whose top padding created the separation: - "Relatórios anuais" region = section 5199f127, `padding:111px 0px 0px 0px` (uploads/elementor/css/post-3157.css) - "Documentações" region = section 1ea01b57, `padding:108px 0px 113px 0px` (uploads/elementor/css/post-3157.css) Re-establish that top separation via a margin-top on each heading-split, scoped to page-id-3157 only (so the shared `.heading-split` used by other pages is untouched). Selected by preceding sibling: the "Relatórios anuais" header follows a prose ``; "Documentações" follows the `.pub-grid` of report covers. Margins collapse with the preceding block, so the rendered gap equals the anchored value rather than stacking on it. */ .page-id-3157 .cto-page .entry-content > p + .heading-split { margin-top: 111px; } .page-id-3157 .cto-page .entry-content > .pub-grid + .heading-split { margin-top: 108px; } /* --- .cards / .card / .load-more-wrap / .btn / .no-comments (NEW `news-grid` case): copied verbatim from cto-home.css/cto-list.css so the dynamic grid is pixel-identical to home's own "Últimas notícias" cards — see cto-list.css's own comment for the same convention. The "Carregar mais" button uses the site's `--accent` red (the eael plugin's own cyan `#29d8d8` is plugin styling, not the design system, per the recipe). */ .cto-page .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .card { background: var(--reading); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s ease; } .cto-page .card:hover { transform: translateY(-2px); } .cto-page .card .photo { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-wash-1), var(--accent-wash-2)), repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px), var(--hairline); display: grid; place-items: center; } .cto-page .card .photo span { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; } .cto-page .card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cto-page .card .card-title { font-size: 18px; line-height: 1.25; font-weight: 700; padding: var(--space-2); margin: 0; color: var(--ink); } .cto-page .card .card-title .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cto-page .card .card-more { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); padding: 0 var(--space-2) var(--space-2); margin: 0; } /* --- .card-meta: date row under "Leia mais" (slot from DESIGN-FIDELITY fix D2, 2026-07-09, which replicated the eael-post-grid's .eael-entry-footer avatar + author + date byline). DECISION Lucas 2026-07-10: author (avatar + name) removed from all grid cards -- date only, left-aligned in the same padded card-body slot. Flex/gap and the 24px __avatar rule dropped with the avatar (single text child needs neither). */ .cto-page .card .card-meta { padding: 0 var(--space-2) var(--space-2); margin-top: -6px; } .cto-page .card .card-meta__text { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); } .cto-page .load-more-wrap { text-align: center; margin-top: var(--space-4); } .cto-page .load-more-wrap .btn { width: auto; max-width: 100%; padding: 12px 28px; } /* `.btn`'s base rule (red --accent fill) is already declared above (shared with cursos' CTAs) -- reused verbatim here, not redeclared. Only the fetch-append busy state is net-new. */ .cto-page .btn[aria-busy="true"] { opacity: .6; pointer-events: none; } .cto-page .no-comments { color: var(--ink-soft); font-size: 14.5px; background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; max-width: 640px; } @media (max-width: 900px) { .cto-page .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cards { grid-template-columns: 1fr; } } /* --- .cto-band--video-trio / .video-trio-card (NEW `band-video-trio` case): 3 real-photo cards + play-icon link-out, plain white bg, no overlay — reconstructed from the dead Pro `media-carousel` widget's own settings (coverflow skin, height:500 desktop / 400 tablet). Cover-cropped to a uniform card height (no faithful settled-original render exists for this widget to violate — it painted empty in every capture — so this is a from-data reconstruction, not a crop of a real rendered photo). */ .cto-page .cto-band--video-trio { background: #fff; } .cto-page .cto-band__video-trio-grid { max-width: 1170px; margin: 0 auto; padding: 120px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .video-trio-card { position: relative; display: block; height: 500px; overflow: hidden; border-radius: 0; } .cto-page .video-trio-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cto-page .video-trio-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .cto-page .cto-band__video-trio-grid { padding: 80px 24px; } .cto-page .video-trio-card { height: 400px; } } @media (max-width: 560px) { .cto-page .cto-band__video-trio-grid { grid-template-columns: 1fr; padding: 46px 15px 50px; } .cto-page .video-trio-card { height: 320px; } }
with real vertical breathing room), consecutive ordered sections must butt flush against each other — the settled original is ONE continuous dark canvas from the masthead through the PDF band, so any vertical gap here would show the page's cream background as an unwanted seam. `.cto-band--flush` zeroes vertical margin (keeps the horizontal full-bleed cancel); the adjacent-sibling rule cancels the masthead's own trailing space-4 gap so the FIRST ordered section butts against it too. ========================================================================== */ .cto-page .cto-band--flush, .cto-page .cto-band--intro, .cto-page .cto-band--quote, .cto-page .cto-band--inset, .cto-page .cto-band--content, .cto-page .cto-band--column, .cto-page .cto-band--video, .cto-page .cto-band--split, .cto-page .cto-band--video-duo, .cto-page .cto-band--heading-split, .cto-page .cto-band--news-grid, .cto-page .cto-band--video-trio { margin: 0 calc(-1 * var(--space-3)); min-height: 0; display: block; text-align: left; overflow: hidden; position: relative; } .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Same flush treatment when the FIRST ordered section follows `.cto-hero` instead of `.cto-masthead` (net-new, teatro-das-oprimidas/5055: masthead THEN hero THEN the ordered-sections list, so the hero is the section list's immediate preceding sibling there). Inert on every other page -- none of them place a `.cto-band` sibling directly after `.cto-hero` today (they all resume at a classic `` instead). */ .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Trailing gap before the footer (the settled original shows a thin cream sliver between the video band and the footer, unlike every other section-to-section transition, which is flush). */ .cto-page .cto-band--video { margin-bottom: var(--space-4); } @media (max-width: 560px) { .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-band--video { margin-bottom: var(--space-3); } } /* --- .cto-band--intro — full-bleed #0c0c0c 3-col opening statement (recipe section 2): a red `--accent` column carrying a bottom-to-top rotated eyebrow label ("O PROGRAMA") + two independent prose columns (middle H3+2p, right 3p). Distinct from `.cto-band--panel` (cursos contact band, equal thirds, decorative accent block, ONE prose column) — this accent column is narrow/fixed and carries real (rotated) text, and there are TWO prose columns, not one. */ .cto-page .cto-band--intro { background: #0c0c0c; } .cto-page .cto-band__inner--intro { max-width: 1170px; margin: 0 auto; padding: 90px 24px; display: grid; grid-template-columns: 70px 1fr 1fr; gap: var(--space-4); align-items: stretch; } /* Scoped to `.cto-band--intro` specifically (NOT a bare `.cto-band__col--accent` rule) — that exact class name is already used, unscoped-looking but distinct, by `.cto-band--panel`'s decorative accent block (cursos); scoping by ancestor here keeps that page's existing block byte-identical. */ .cto-page .cto-band--intro .cto-band__col--accent { background: var(--accent); display: flex; align-items: flex-end; justify-content: center; padding: var(--space-3) 0; min-height: 220px; } .cto-page .cto-band__accent-label { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-family: "Questrial", var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .cto-page .cto-band__col--text-a h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.7em; line-height: 1.35; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p, .cto-page .cto-band__col--text-b p { font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.65; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p:last-child, .cto-page .cto-band__col--text-b p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band__inner--intro { grid-template-columns: 60px 1fr; padding: 60px 24px; gap: var(--space-3); } .cto-page .cto-band__col--text-b { grid-column: 2; } } @media (max-width: 560px) { .cto-page .cto-band__inner--intro { grid-template-columns: 1fr; padding: 44px 15px; } .cto-page .cto-band__col--accent { min-height: 60px; align-items: center; } .cto-page .cto-band__accent-label { writing-mode: horizontal-tb; transform: none; } .cto-page .cto-band__col--text-b { grid-column: 1; } } /* --- .cto-band--quote — `.cto-band__quote` faithful-replica photo band (CREATE#2). Two layout modifiers: - `--quote-center`: full-width centered composition (the reconstructed b3: big static headline quote + attribution, D1 — no eyebrow/title/ name in this instance, but the markup supports them). - `--quote-boxed`: b6a's ~926px boxed / left-aligned treatment (an inner text column ~469px wide sits at the box's left, the box's right half shows plain band photo). Overlay is entirely inline (page.php writes overlay_color/opacity/ position/blend per instance) — this realizes CREATE#1's "configurable overlay" via the ordered-sections JSON rather than singular flat postmeta, since one page needs MANY differently configured bands (normal/darken/ lighten all appear on this page). */ /* .cto-band__bg / .cto-band__overlay's base rules (defined earlier, under the plain .cto-band component) already give absolute position:inset:0 cover treatment regardless of which `--modifier` the ancestor `.cto-band` also carries, so `--quote`/`--inset`/`--video` below reuse them as-is (no duplicate override needed) — only per-instance color/opacity/blend is set inline (page.php), which always wins over the class's own defaults. */ .cto-page .cto-band--quote { display: flex; align-items: center; min-height: 480px; } .cto-page .cto-band__inner--quote { position: relative; z-index: 1; width: 100%; padding: 90px 24px; } .cto-page .cto-band__quote-eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__quote-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__quote-text { font-family: "Prompt", var(--font-body); font-weight: 300; color: #fff; line-height: 1.6; margin: 0 0 var(--space-2); } .cto-page .cto-band__quote-name { font-weight: 700; color: #fff; margin: 0 0 4px; } .cto-page .cto-band__quote-attribution { color: #ff0202; font-family: "Questrial", var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; } /* Center modifier (b3): a single large centered statement, no box. */ .cto-page .cto-band--quote-center .cto-band__inner--quote { text-align: center; } .cto-page .cto-band--quote-center .cto-band__quote { max-width: 720px; margin: 0 auto; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.7em; } /* Boxed modifier (b6a): 926px box, text column pinned left at ~469px, the right half of the box shows plain band photo (no text). */ .cto-page .cto-band--quote-boxed .cto-band__inner--quote { max-width: 926px; margin: 0 auto; } .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 469px; } @media (max-width: 700px) { .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 100%; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.3em; } } /* --- .cto-band--inset — `.cto-band__inset` + `.cto-band__body` (CREATE#3): an outer full-bleed photo (overlay via inline vars) with a nested inset photo (NO overlay, configurable width via --cto-inset-w) + centered white body text below it. Used for b6b. */ .cto-page .cto-band--inset { min-height: 0; } .cto-page .cto-band__inner--inset { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 70px 24px 90px; } .cto-page .cto-band__inset { width: var(--cto-inset-w, 752px); max-width: 100%; margin: 0 auto var(--space-4); aspect-ratio: 1296 / 864; overflow: hidden; } .cto-page .cto-band__inset img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .cto-band__body { max-width: 800px; margin: 0 auto; text-align: center; color: #fff; font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.15em; line-height: 1.6; } .cto-page .cto-band__body p { margin: 0; } @media (max-width: 560px) { .cto-page .cto-band__inner--inset { padding: 44px 15px 56px; } .cto-page .cto-band__body { font-size: 1em; } } /* --- .cto-band--content — PDF/doc band (CREATE#4): the section's OWN background is the NATURAL-SIZE TILED photo (background-size:auto + background-repeat:repeat, never cover); a solid #0c0c0c `.cto-band__panel` pinned LEFT (fixed width, does not stretch) occludes most of it, so the tiled photo only shows through on the right. Used for b10. */ .cto-page .cto-band--content { background-image: var(--cto-band-content-bg); background-size: auto; background-repeat: repeat; background-position: center; min-height: 0; display: flex; } .cto-page .cto-band__panel { position: relative; z-index: 1; width: 670px; max-width: 100%; flex: 0 0 auto; background: #0c0c0c; color: #fff; padding: 90px 60px 90px 24px; } .cto-page .cto-band__eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__panel-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-4); } .cto-page .cto-band__panel-body { font-size: 15px; line-height: 1.6; } .cto-page .cto-band__panel-body p { margin: 0 0 var(--space-3); color: #fff; } .cto-page .cto-band__panel-body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band--content { display: block; } .cto-page .cto-band__panel { width: 100%; padding: 60px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__panel { padding: 44px 15px; } .cto-page .cto-band__panel-title { font-size: 1.8em; } } /* --- .cto-doc-grid / .doc-card (CREATE#7): NATURAL-SIZE (uncropped) portrait image + title + optional "(disponível apenas para inscritos)" caption + optional external link. Used for b10's 3 PDF cards AND (as `.doc-card--featured`) the reading-recommendations Boal portrait. */ .cto-page .cto-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); } .cto-page .doc-card { display: flex; flex-direction: column; } .cto-page .doc-card__link { display: block; } .cto-page .doc-card img { width: 100%; height: auto; margin: 0 0 10px; border-radius: 0; } .cto-page .doc-card__title { font-size: 14px; font-weight: 600; color: #fff; margin: 0; line-height: 1.35; } .cto-page .doc-card__caption { font-size: 12px; font-style: italic; color: #b7b7b7; margin: 4px 0 0; } /* Featured (Boal portrait, reading-recommendations left column): h6/h5 caption pairing instead of title/caption paragraphs, ON A WHITE section (dark text), per the recipe. */ .cto-page .doc-card--featured img { margin-bottom: var(--space-2); } .cto-page .doc-card--featured h6 { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin: 0 0 4px; text-transform: none; } .cto-page .doc-card--featured h5 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid { grid-template-columns: 1fr; } } /* --- .cto-cta-link (CREATE#8): text-link CTA, no box/border, right arrow icon — distinct from the boxed `.cto-masthead__btn--ghost` (reused verbatim for the two-column "Como participar?" / "Formas de convênio" CTAs). Used for b10's "INSCREVA-SE AGORA". */ .cto-page .cto-cta-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-cta-link__arrow { flex: 0 0 auto; transition: transform .15s ease; } .cto-page .cto-cta-link:hover .cto-cta-link__arrow, .cto-page .cto-cta-link:focus-visible .cto-cta-link__arrow { transform: translateX(4px); } /* --- .cto-eyebrow-tag (CREATE#9): white uppercase bold text on a red #f00001 box that the text slightly overflows to the left (negative margin). `--light` modifier (section 15): dark ink text on a light box, for use on a white section bg. */ .cto-page .cto-eyebrow-tag { display: inline-block; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 22px; margin: 0 0 var(--space-3) -14px; } .cto-page .cto-eyebrow-tag--light { background: var(--hairline); color: var(--ink); } @media (max-width: 560px) { .cto-page .cto-eyebrow-tag { margin-left: 0; font-size: 12px; padding: 8px 16px; } } /* --- .cto-eyebrow-tag--start (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): alignment-only fix for teatro's closing "COORDENAÇÃO ARTÍSTICA" instance of the shared red-pill `.cto-eyebrow-tag` — the settled-original shows it flush-left, but the shared `.cto-band__inner` (column/video-duo types) is a flex column with `align-items:center`, which centers it as a flex item. `align-self` overrides only THIS item's cross-axis position; `.cto-eyebrow-tag`'s own red/white styling stays untouched for every other caller. */ .cto-page .cto-eyebrow-tag--start { align-self: flex-start; } /* --- .cto-eyebrow-line (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): the PLAIN-TEXT eyebrow variant used on white sections (Compromisso/galeria/ PUBLICAÇÕES) — confirmed against `_elementor_data` (dump-elementor- 5055.php): all three heading widgets carry `title_color:#0c0c0c` + typography settings only, with NO `background_color` on the widget OR its parent column, and the generated `post-5055.css` has no background rule for any of their element IDs either. The red/gray boxed pill visible in a couple of settled-original crops (Compromisso, galeria, PUBLICAÇÕES) is NOT backed by data or CSS — cross-checked as a settle/capture artifact of the widgets' `fadeInRight` entrance animation (`_animation_delay:400`), not a real design element; texto plano per the fidelity contract ("si el CSS/data no lo respalda, texto plano — CSS manda"). `align-self:flex-start` overrides the shared `.cto-band__inner` flex centering (see `.cto-eyebrow-tag--start` above) the same way. Values (uppercase, weight 800, letter-spacing 4.8px, Questrial, line-height 1.5em) are copied verbatim from the widget's own typography settings. Distinct class (never `.cto-eyebrow-tag`, shared by residencia/cursos) so those pages' own red pill stays byte-identical. */ .cto-page .cto-eyebrow-line { display: inline-block; align-self: flex-start; color: #0c0c0c; font-family: "Questrial", var(--font-ui); font-size: 1em; font-weight: 800; letter-spacing: 4.8px; line-height: 1.5em; text-transform: uppercase; margin: 0 0 var(--space-3); } /* --- .cto-people-grid / .person-card (CREATE#5): 1:1 170x170 cover-crop photo + centered name (bold) / role / country, 4-up. Used for the "PESSOAS FORMADAS PELO PROGRAMA" grid. */ .cto-page .cto-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .cto-page .person-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .cto-page .person-photo { width: 170px; max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .person-name { color: #fff; font-weight: 700; font-size: 15px; margin: var(--space-2) 0 6px; } .cto-page .person-role { color: #d8d8d8; font-size: 13px; font-style: italic; line-height: 1.4; margin: 0 0 4px; } .cto-page .person-country { color: #9a9a9a; font-size: 13px; margin: 0; } @media (max-width: 700px) { .cto-page .cto-people-grid { grid-template-columns: repeat(2, 1fr); } } /* --- .cto-steps-grid / .step-card (CREATE#6): 1:1 170x170 cover-crop photo LEFT + numeric badge/label RIGHT (flex row, NOT stacked), 3/3/1 rows; trailing short rows simply have fewer cards (no phantom placeholders). Used for "ATIVIDADES INCLUSAS NO PROGRAMA". */ .cto-page .cto-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-3); margin: 0 0 var(--space-4); } .cto-page .step-card { display: flex; align-items: flex-start; gap: var(--space-2); } .cto-page .step-photo { flex: 0 0 auto; width: 100px; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .step-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .step-number { display: block; color: #8a8a8a; font-size: 13px; margin: 0 0 4px; } .cto-page .step-label { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; } @media (max-width: 900px) { .cto-page .cto-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-steps-grid { grid-template-columns: 1fr; } .cto-page .step-photo { width: 80px; } } /* --- CTA two-column block (in-column, reuses `.cto-masthead__btn`/`--ghost` verbatim — those rules are declared `.cto-page .cto-masthead__btn…`, not scoped under `.cto-masthead`, so they apply anywhere in `.cto-page`; the brief's REUSE list counts this as the ghost CTA's 2nd/3rd use on this page). */ .cto-page .cto-cta-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .cto-page .cto-cta-2col h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.8em; color: #fff; margin: 0 0 var(--space-2); } .cto-page .cto-cta-2col p { color: #d8d8d8; font-size: 15px; line-height: 1.6; margin: 0 0 var(--space-3); } @media (max-width: 700px) { .cto-page .cto-cta-2col { grid-template-columns: 1fr; } } /* --- .cto-band--column (CREATE, generalized): reading-width content sharing its section's own full-bleed background (dark #0c0c0c or light #fff) — distinct from `.cto-after-band` (sits on the page's cream bg): residencia's in-column chunks (grids/eyebrow-tags/CTAs) sit directly on the SAME solid canvas as the surrounding bands, per the settled original (no white card anywhere until the reading-recommendations chunk, which IS on white). */ .cto-page .cto-band--column-dark { background: #0c0c0c; } .cto-page .cto-band--column-light { background: #fff; } .cto-page .cto-band__inner--column { max-width: 1170px; margin: 0 auto; padding: 70px 24px; } @media (max-width: 560px) { .cto-page .cto-band__inner--column { padding: 50px 15px; } } /* --- .cto-reading-grid: Boal portrait (`.doc-card--featured`, left 50%) + 2x3 grid of SQUARE 170x170 `.reading-card`s (right 50%) — per D3 the reading-cards are square crops (unlike the b10 doc-cards' natural aspect), author byline above the title. */ .cto-page .cto-reading-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .cto-page .reading-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .reading-card { display: flex; flex-direction: column; } .cto-page .reading-card__link { display: block; } .cto-page .reading-photo { aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px; } .cto-page .reading-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .reading-author { font-size: 12px; color: var(--ink-soft); margin: 0 0 2px; } .cto-page .reading-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0; } .cto-page .reading-caption { font-size: 11px; font-style: italic; color: var(--ink-soft); margin: 3px 0 0; } @media (max-width: 900px) { .cto-page .cto-reading-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cto-page .reading-card-grid { grid-template-columns: repeat(2, 1fr); } } /* --- static reconstructed testimonial (D1): a red quote-mark glyph + quote text + name, no carousel/JS. In-column, on the same white background as the reading-recommendations grid above it. */ .cto-page .cto-testimonial { max-width: 720px; margin: var(--space-4) auto 0; text-align: center; } .cto-page .cto-testimonial__mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 1; font-weight: 700; margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__quote { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__name { font-weight: 700; color: var(--ink); margin: 0; } /* --- .cto-band--video (D2 + videofix 2026-07-10): the original is a BACKGROUND-VIDEO section (post-4892 _elementor_data element 19bdbbe4, background_background:video, youtu.be/VE48YJ767kQ start=130). Replicated 0-remote-hosts as a LOCAL ambient (home hero treatment) over the photo fallback. 16:9, matching the settled original's band proportions. Section base #000000 per post-4892.css: `.elementor-4892 .elementor-element.elementor-element-19bdbbe4:not(...) {background-color:#000000;}`. */ .cto-page .cto-band--video { aspect-ratio: 16 / 9; max-height: 720px; background: #000000; } @media (max-width: 560px) { .cto-page .cto-band--video { aspect-ratio: 4 / 3; } } /* Ambient background video fills the band edge-to-edge exactly like `.cto-band__bg` (cover, uncropped-proportions box = the section itself), mirroring the original's `.elementor-background-video-container` which covers section 19bdbbe4 behind `.elementor-background-overlay` (overlay #b79c77/0.35 per post-4892.css `.elementor-element-19bdbbe4 > .elementor-background-overlay{background-color:#b79c77;opacity:0.35;}` — the overlay div renders AFTER the video in the DOM, so it paints above). */ .cto-page .cto-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; max-width: none; } /* ========================================================================== TEATRO DAS OPRIMIDAS (post 5055) — DESIGN-FIDELITY pass, 2026-07-09. Every rule below is additive/scoped: new classes or opt-in modifiers of existing ones, touching no selector any other page relies on. ========================================================================== */ /* --- Recursos doc-card variant (`.doc-card--resource`): the base `.doc-card` (CREATE#7, above) was built for a DARK panel (band-content/b10, white title text) or the reading-grid's `--featured` white-bg h6/h5 pairing. Teatro's Recursos grid needs a THIRD combination on a plain white section: natural-portrait cover + a gray eyebrow + a dark title + a red-hover "ACESSE AQUI" link-out — none of the two existing variants fit, so this adds (never overrides) a gray eyebrow line and a dark-title modifier. Grid shape (DESIGN-FIDELITY fix pass, 2026-07-09, F2): the settled-original has NO section header ("RECURSOS" pill removed — see forge-teatro-5055.php) and its 5 cards are a genuine 2-size masonry, not `.cto-doc-grid`'s equal 3-col grid — see `.cto-doc-grid--resource-masonry` below. */ .cto-page .doc-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #919191; margin: 0 0 4px; } .cto-page .doc-card__title--dark { color: var(--ink); } /* --- .cto-doc-grid--resource-masonry (NEW, opt-in modifier of the shared `.cto-doc-grid`, never overriding its base `display:grid` 3-col rule for other callers): pixel-measured off the settled-original (measure-recursos-pub-5055.mjs column-run scan) the Recursos grid is a CSS multi-column masonry, not a row-major grid — col1 holds card 1 (small) + card 2 (large), col2 holds card 3 (large) + card 4 (small), col3 holds card 5 (large) alone. `column-count` reproduces this column-major flow directly from DOM order; forced breaks on cards 3 and 5 make the 2+2+1 grouping deterministic rather than depending on the browser's own column- balance heuristic. `width:100%` guards against the shared `.cto-band__inner` flex `align-items:center` (column type) shrinking this to its content width instead of the full reading column. */ .cto-page .cto-doc-grid--resource-masonry { display: block; width: 100%; column-count: 3; column-gap: 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource { break-inside: avoid; margin: 0 0 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(3), .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(5) { break-before: column; } /* --- .doc-card--resource-compact (NEW): the two SMALL cards (Boletim/ Resultados, card 1; Comunicação, card 4) render image + caption SIDE BY SIDE (image fixed ~170px, caption filling the rest of the column) instead of the base `.doc-card`'s stacked column layout — matches the settled- original's ~170x235/168x233 small-card treatment. */ .cto-page .doc-card--resource-compact { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .cto-page .doc-card--resource-compact img { width: 170px; flex: 0 0 170px; margin-bottom: 0; } .cto-page .doc-card--resource-compact .doc-card__body { flex: 1 1 auto; min-width: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid--resource-masonry { column-count: 1; } .cto-page .doc-card--resource-compact { flex-direction: column; } .cto-page .doc-card--resource-compact img { width: 100%; flex-basis: auto; margin-bottom: 10px; } } /* --- .cto-cta-link--dark: same text-link + arrow-icon shell as `.cto-cta-link` (CREATE#8, white text for dark bands) but for use on a WHITE section (the Recursos "ACESSE AQUI" links) — ink text at rest, red on hover/focus per the recipe's `hover_color:#f00001`. */ .cto-page .cto-cta-link--dark { color: var(--ink); } .cto-page .cto-cta-link--dark:hover, .cto-page .cto-cta-link--dark:focus-visible { color: #f00001; } /* --- .cto-gallery--square: opt-in modifier of `.cto-gallery` (which is a flex row of NATURAL-aspect images elsewhere, REGLA DURA no-crop, per its own comment above) -- teatro's own settled-original render measures its 6-photo gallery at UNIFORM ~1:1 cells despite the source files' varied native ratios (landscape 2560x1706, 860x668, etc.), i.e. the ORIGINAL itself cover-crops this specific gallery to a square grid (an Elementor fixed-thumbnail gallery widget). Reproducing THAT crop is the fidelity contract's own instruction ("reproduce the crop the original had"); it is a distinct instance from the natural-aspect gallery elsewhere, so this is an opt-in modifier, never a change to the base flex behavior. */ .cto-page .cto-gallery--square { display: grid; grid-template-columns: repeat(3, 1fr); } .cto-page .cto-gallery--square > img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } @media (max-width: 700px) { .cto-page .cto-gallery--square { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cto-page .cto-gallery--square { grid-template-columns: 1fr; } } /* --- .cto-media-grid: a BARE 4-column image grid (Publicações) — distinct from `.pub-grid`/`.pub-card` (publicacoes/2788's own component, which adds white card chrome + a title/subtitle row): the settled-original crop (`out/crop-publicacoes.png`) shows these 29 covers as plain linked images with NO card background/border/shadow/title -- the cover art itself carries all its own text. A new component name avoids overloading `.pub-grid`'s card semantics for a page that never wanted them. The trailing incomplete row (discrepancy #3: 3 of 4 final-row widgets were genuinely empty in the original, never populated) is reproduced with `.cto-media-grid__cell--empty` spacer cells, not invented content. */ .cto-page .cto-media-grid { /* Dims pixel-measured off the settled-original's first cover row (measure-recursos-pub-5055.mjs): 4 covers at x=[203,400]/[432,629]/ [650,847]/[869,1066] -> ~197px cells, ~862px total inset, centered. The live build had grown this to ~263x370 covers at 1122px wide (DESIGN-FIDELITY fix pass, 2026-07-09, F3) -- constraining max-width to the measured inset + a smaller gap reproduces both the smaller cover size and the narrower inset without hand-fixing per-cell dims (the grid divides 862px into 4 equal ~200px columns on its own). */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 862px; margin: 0 auto var(--space-4); } .cto-page .cto-media-grid img { width: 100%; height: auto; object-fit: contain; margin: 0; border-radius: 0; display: block; } .cto-page .cto-media-grid__cell--empty { visibility: hidden; } @media (max-width: 900px) { .cto-page .cto-media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-media-grid { grid-template-columns: 1fr; } .cto-page .cto-media-grid__cell--empty { display: none; } } /* --- .cto-band--split (NEW, "Compromisso"): full-bleed WHITE 2-column composite -- no analogue among the existing ordered-section types (per the recipe's own CREATE list). Left column: eyebrow-tag + big red quote-mark + italic pull-quote + attribution + a video "Assistir" link (no embed, matching the 0-remote-hosts contract already set by `.cto-band--video`). Right column: 2-up photo row + a heading + a solid red CTA link-out ("Assista completo"). The recipe's own `_elementor_data` overlay settings for this section (#0c0c0c/.7) are DEAD -- confirmed no `background_image` + the generated CSS overlay rule carries no color/ opacity -- so this section paints plain white, no `.cto-band__overlay`. */ .cto-page .cto-band--split { background: #fff; } .cto-page .cto-band__inner--split { max-width: 1170px; margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .cto-page .cto-band__split-mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1; font-weight: 700; margin: 0 0 4px; } .cto-page .cto-band__split-quote { font-style: italic; color: var(--ink); font-size: 15px; line-height: 1.65; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-attribution { color: var(--ink); font-size: 14px; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-video { display: inline-flex; align-items: center; gap: 8px; background: #0c0c0c; color: #fff; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; justify-content: center; text-decoration: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cto-page .cto-band__split-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-photos img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .cto-band__split-body { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.3em; line-height: 1.4; color: var(--ink); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 34px; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-band__split-cta:hover { filter: brightness(1.06); } @media (max-width: 900px) { .cto-page .cto-band__inner--split { grid-template-columns: 1fr; padding: 70px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__inner--split { padding: 50px 15px; } .cto-page .cto-band__split-photos { gap: 10px; } } /* --- .cto-band--video-duo (NEW, closing "Coordenação artística" band): a full-bleed photo band (same `.cto-band__bg`/`.cto-band__overlay` base as `--quote`/`--inset` above) whose content is an eyebrow-tag (`--light`, red box) + 2 side-by-side "video cards" (label + text + white arrow-icon link-out) -- distinct from `.cto-band--quote`'s single centered/boxed quote and from `.cto-band--content`'s doc-grid+panel composition. DISCREPANCY (masthead's same motion-fx artifact, CSS/file-confirmed real photo -- see build report): implemented with the real photo per CSS. */ .cto-page .cto-band--video-duo { min-height: 0; } .cto-page .cto-band__inner--video-duo { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 125px 24px 100px; } .cto-page .cto-band__video-duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-4); } .cto-page .video-duo-card { background: #0c0c0c; padding: var(--space-3); min-height: 220px; display: flex; flex-direction: column; } /* Embedded YouTube player ABOVE the label/text (Lucas 2026-07-10 #3): the original "Coordenação artística" cards each open with a real, playable video embed. Per the owner's explicit sanction (2026-07-10) these 2 embeds override the 0-remote-hosts contract as direct YouTube iframes (see page.php band-video-duo). 16:9 responsive box, no border/radius (matches the flat #0c0c0c card). */ .cto-page .video-duo-card__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 var(--space-2); background: #000; } .cto-page .video-duo-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .cto-page .video-duo-card__label { color: #919191; font-size: 13px; margin: 0 0 10px; } .cto-page .video-duo-card__text { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-2); } .cto-page .video-duo-card__link { color: #fff; margin-top: auto; display: inline-flex; } @media (max-width: 700px) { .cto-page .cto-band__inner--video-duo { padding: 70px 24px 56px; } .cto-page .cto-band__video-duo-grid { grid-template-columns: 1fr; } } /* ========================================================================== Noticias (post 5027) DESIGN-FIDELITY pass, 2026-07-09 — 3 net-new `_cto_sections` types: `heading-split`, `news-grid`, `band-video-trio`. ========================================================================== */ /* --- .heading-split (NEW `heading-split` case): ported verbatim from home/cto-list (red-bar h2) into a `.cto-page`-scoped rule so the ordered- sections mechanism can render it as a plain white section heading. Redesign-wins fidelity call (recipe #2): same semantic text/structure as home's own "Últimas notícias", not the original's Montserrat/black/ border-left treatment. */ .cto-page .heading-split { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-2); } .cto-page .heading-split .rule { width: 3px; align-self: stretch; min-height: 30px; background: var(--accent); flex: 0 0 auto; } .cto-page .heading-split h2 { margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-weight: 300; } .cto-page .heading-split h2 b { font-weight: 800; } /* --- .cto-band--heading-split / .cto-band--news-grid: zero the standard `.cto-band__inner--column` bottom padding on the heading section and the top padding on the grid section that immediately follows it, so the two flush (0-margin, per the `.cto-band--flush` rule above) sections read as ONE continuous white "ÚLTIMAS notícias" block, per the recipe's own instruction ("usa `.heading-split` acima como cabeçalho da seção, não duplicar"). */ .cto-page .cto-band--heading-split .cto-band__inner--column { padding-bottom: 0; } .cto-page .cto-band--news-grid .cto-band__inner--column { padding-top: var(--space-2); } /* DESIGN-FIDELITY fix (D3, 2026-07-09): `.cto-band__inner` (the base rule shared by every `.cto-band` variant, cto-page.css ~L561) sets `align-items: center`, built for its original centered-title-over-photo layout. `.cto-band__inner--column` never overrides it, so `.heading-split` (a narrow flex row, not full-width content like `.cards`) rendered centered in the column instead of flush-left against the reading column -- neither the original (border-left, content_position:bottom) nor the home's own `.heading-split` (left-flush in its flex row, no centering) is centered. Scoped to the heading-split section only: the "column" case (free-form prose) and `.cards`/video-trio grids are unaffected. */ .cto-page .cto-band--heading-split .cto-band__inner--column { align-items: flex-start; } /* --- SPACING FIX (transparencia / post 3157, 2026-07-10): the two in-body `.heading-split` section headers ("Relatórios anuais", "Documentações") rendered flush against the block above them (a ~24px / ~40px natural gap), losing the original's generous whitespace that set each block apart. In the original Elementor layout each of these was the top of its own white section whose top padding created the separation: - "Relatórios anuais" region = section 5199f127, `padding:111px 0px 0px 0px` (uploads/elementor/css/post-3157.css) - "Documentações" region = section 1ea01b57, `padding:108px 0px 113px 0px` (uploads/elementor/css/post-3157.css) Re-establish that top separation via a margin-top on each heading-split, scoped to page-id-3157 only (so the shared `.heading-split` used by other pages is untouched). Selected by preceding sibling: the "Relatórios anuais" header follows a prose ``; "Documentações" follows the `.pub-grid` of report covers. Margins collapse with the preceding block, so the rendered gap equals the anchored value rather than stacking on it. */ .page-id-3157 .cto-page .entry-content > p + .heading-split { margin-top: 111px; } .page-id-3157 .cto-page .entry-content > .pub-grid + .heading-split { margin-top: 108px; } /* --- .cards / .card / .load-more-wrap / .btn / .no-comments (NEW `news-grid` case): copied verbatim from cto-home.css/cto-list.css so the dynamic grid is pixel-identical to home's own "Últimas notícias" cards — see cto-list.css's own comment for the same convention. The "Carregar mais" button uses the site's `--accent` red (the eael plugin's own cyan `#29d8d8` is plugin styling, not the design system, per the recipe). */ .cto-page .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .card { background: var(--reading); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s ease; } .cto-page .card:hover { transform: translateY(-2px); } .cto-page .card .photo { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-wash-1), var(--accent-wash-2)), repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px), var(--hairline); display: grid; place-items: center; } .cto-page .card .photo span { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; } .cto-page .card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cto-page .card .card-title { font-size: 18px; line-height: 1.25; font-weight: 700; padding: var(--space-2); margin: 0; color: var(--ink); } .cto-page .card .card-title .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cto-page .card .card-more { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); padding: 0 var(--space-2) var(--space-2); margin: 0; } /* --- .card-meta: date row under "Leia mais" (slot from DESIGN-FIDELITY fix D2, 2026-07-09, which replicated the eael-post-grid's .eael-entry-footer avatar + author + date byline). DECISION Lucas 2026-07-10: author (avatar + name) removed from all grid cards -- date only, left-aligned in the same padded card-body slot. Flex/gap and the 24px __avatar rule dropped with the avatar (single text child needs neither). */ .cto-page .card .card-meta { padding: 0 var(--space-2) var(--space-2); margin-top: -6px; } .cto-page .card .card-meta__text { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); } .cto-page .load-more-wrap { text-align: center; margin-top: var(--space-4); } .cto-page .load-more-wrap .btn { width: auto; max-width: 100%; padding: 12px 28px; } /* `.btn`'s base rule (red --accent fill) is already declared above (shared with cursos' CTAs) -- reused verbatim here, not redeclared. Only the fetch-append busy state is net-new. */ .cto-page .btn[aria-busy="true"] { opacity: .6; pointer-events: none; } .cto-page .no-comments { color: var(--ink-soft); font-size: 14.5px; background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; max-width: 640px; } @media (max-width: 900px) { .cto-page .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cards { grid-template-columns: 1fr; } } /* --- .cto-band--video-trio / .video-trio-card (NEW `band-video-trio` case): 3 real-photo cards + play-icon link-out, plain white bg, no overlay — reconstructed from the dead Pro `media-carousel` widget's own settings (coverflow skin, height:500 desktop / 400 tablet). Cover-cropped to a uniform card height (no faithful settled-original render exists for this widget to violate — it painted empty in every capture — so this is a from-data reconstruction, not a crop of a real rendered photo). */ .cto-page .cto-band--video-trio { background: #fff; } .cto-page .cto-band__video-trio-grid { max-width: 1170px; margin: 0 auto; padding: 120px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .video-trio-card { position: relative; display: block; height: 500px; overflow: hidden; border-radius: 0; } .cto-page .video-trio-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cto-page .video-trio-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .cto-page .cto-band__video-trio-grid { padding: 80px 24px; } .cto-page .video-trio-card { height: 400px; } } @media (max-width: 560px) { .cto-page .cto-band__video-trio-grid { grid-template-columns: 1fr; padding: 46px 15px 50px; } .cto-page .video-trio-card { height: 320px; } }
` instead). */ .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-4)); } /* Trailing gap before the footer (the settled original shows a thin cream sliver between the video band and the footer, unlike every other section-to-section transition, which is flush). */ .cto-page .cto-band--video { margin-bottom: var(--space-4); } @media (max-width: 560px) { .cto-page .cto-masthead + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-hero + .cto-band { margin-top: calc(-1 * var(--space-3)); } .cto-page .cto-band--video { margin-bottom: var(--space-3); } } /* --- .cto-band--intro — full-bleed #0c0c0c 3-col opening statement (recipe section 2): a red `--accent` column carrying a bottom-to-top rotated eyebrow label ("O PROGRAMA") + two independent prose columns (middle H3+2p, right 3p). Distinct from `.cto-band--panel` (cursos contact band, equal thirds, decorative accent block, ONE prose column) — this accent column is narrow/fixed and carries real (rotated) text, and there are TWO prose columns, not one. */ .cto-page .cto-band--intro { background: #0c0c0c; } .cto-page .cto-band__inner--intro { max-width: 1170px; margin: 0 auto; padding: 90px 24px; display: grid; grid-template-columns: 70px 1fr 1fr; gap: var(--space-4); align-items: stretch; } /* Scoped to `.cto-band--intro` specifically (NOT a bare `.cto-band__col--accent` rule) — that exact class name is already used, unscoped-looking but distinct, by `.cto-band--panel`'s decorative accent block (cursos); scoping by ancestor here keeps that page's existing block byte-identical. */ .cto-page .cto-band--intro .cto-band__col--accent { background: var(--accent); display: flex; align-items: flex-end; justify-content: center; padding: var(--space-3) 0; min-height: 220px; } .cto-page .cto-band__accent-label { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-family: "Questrial", var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .cto-page .cto-band__col--text-a h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.7em; line-height: 1.35; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p, .cto-page .cto-band__col--text-b p { font-family: "Questrial", var(--font-body); font-size: 15px; line-height: 1.65; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__col--text-a p:last-child, .cto-page .cto-band__col--text-b p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band__inner--intro { grid-template-columns: 60px 1fr; padding: 60px 24px; gap: var(--space-3); } .cto-page .cto-band__col--text-b { grid-column: 2; } } @media (max-width: 560px) { .cto-page .cto-band__inner--intro { grid-template-columns: 1fr; padding: 44px 15px; } .cto-page .cto-band__col--accent { min-height: 60px; align-items: center; } .cto-page .cto-band__accent-label { writing-mode: horizontal-tb; transform: none; } .cto-page .cto-band__col--text-b { grid-column: 1; } } /* --- .cto-band--quote — `.cto-band__quote` faithful-replica photo band (CREATE#2). Two layout modifiers: - `--quote-center`: full-width centered composition (the reconstructed b3: big static headline quote + attribution, D1 — no eyebrow/title/ name in this instance, but the markup supports them). - `--quote-boxed`: b6a's ~926px boxed / left-aligned treatment (an inner text column ~469px wide sits at the box's left, the box's right half shows plain band photo). Overlay is entirely inline (page.php writes overlay_color/opacity/ position/blend per instance) — this realizes CREATE#1's "configurable overlay" via the ordered-sections JSON rather than singular flat postmeta, since one page needs MANY differently configured bands (normal/darken/ lighten all appear on this page). */ /* .cto-band__bg / .cto-band__overlay's base rules (defined earlier, under the plain .cto-band component) already give absolute position:inset:0 cover treatment regardless of which `--modifier` the ancestor `.cto-band` also carries, so `--quote`/`--inset`/`--video` below reuse them as-is (no duplicate override needed) — only per-instance color/opacity/blend is set inline (page.php), which always wins over the class's own defaults. */ .cto-page .cto-band--quote { display: flex; align-items: center; min-height: 480px; } .cto-page .cto-band__inner--quote { position: relative; z-index: 1; width: 100%; padding: 90px 24px; } .cto-page .cto-band__quote-eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__quote-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-3); } .cto-page .cto-band__quote-text { font-family: "Prompt", var(--font-body); font-weight: 300; color: #fff; line-height: 1.6; margin: 0 0 var(--space-2); } .cto-page .cto-band__quote-name { font-weight: 700; color: #fff; margin: 0 0 4px; } .cto-page .cto-band__quote-attribution { color: #ff0202; font-family: "Questrial", var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; } /* Center modifier (b3): a single large centered statement, no box. */ .cto-page .cto-band--quote-center .cto-band__inner--quote { text-align: center; } .cto-page .cto-band--quote-center .cto-band__quote { max-width: 720px; margin: 0 auto; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.7em; } /* Boxed modifier (b6a): 926px box, text column pinned left at ~469px, the right half of the box shows plain band photo (no text). */ .cto-page .cto-band--quote-boxed .cto-band__inner--quote { max-width: 926px; margin: 0 auto; } .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 469px; } @media (max-width: 700px) { .cto-page .cto-band--quote-boxed .cto-band__quote { max-width: 100%; } .cto-page .cto-band--quote-center .cto-band__quote-text { font-size: 1.3em; } } /* --- .cto-band--inset — `.cto-band__inset` + `.cto-band__body` (CREATE#3): an outer full-bleed photo (overlay via inline vars) with a nested inset photo (NO overlay, configurable width via --cto-inset-w) + centered white body text below it. Used for b6b. */ .cto-page .cto-band--inset { min-height: 0; } .cto-page .cto-band__inner--inset { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 70px 24px 90px; } .cto-page .cto-band__inset { width: var(--cto-inset-w, 752px); max-width: 100%; margin: 0 auto var(--space-4); aspect-ratio: 1296 / 864; overflow: hidden; } .cto-page .cto-band__inset img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .cto-band__body { max-width: 800px; margin: 0 auto; text-align: center; color: #fff; font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.15em; line-height: 1.6; } .cto-page .cto-band__body p { margin: 0; } @media (max-width: 560px) { .cto-page .cto-band__inner--inset { padding: 44px 15px 56px; } .cto-page .cto-band__body { font-size: 1em; } } /* --- .cto-band--content — PDF/doc band (CREATE#4): the section's OWN background is the NATURAL-SIZE TILED photo (background-size:auto + background-repeat:repeat, never cover); a solid #0c0c0c `.cto-band__panel` pinned LEFT (fixed width, does not stretch) occludes most of it, so the tiled photo only shows through on the right. Used for b10. */ .cto-page .cto-band--content { background-image: var(--cto-band-content-bg); background-size: auto; background-repeat: repeat; background-position: center; min-height: 0; display: flex; } .cto-page .cto-band__panel { position: relative; z-index: 1; width: 670px; max-width: 100%; flex: 0 0 auto; background: #0c0c0c; color: #fff; padding: 90px 60px 90px 24px; } .cto-page .cto-band__eyebrow { font-family: "Questrial", var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; margin: 0 0 10px; } .cto-page .cto-band__panel-title { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 2.4em; line-height: 1.2; color: #fff; margin: 0 0 var(--space-4); } .cto-page .cto-band__panel-body { font-size: 15px; line-height: 1.6; } .cto-page .cto-band__panel-body p { margin: 0 0 var(--space-3); color: #fff; } .cto-page .cto-band__panel-body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .cto-page .cto-band--content { display: block; } .cto-page .cto-band__panel { width: 100%; padding: 60px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__panel { padding: 44px 15px; } .cto-page .cto-band__panel-title { font-size: 1.8em; } } /* --- .cto-doc-grid / .doc-card (CREATE#7): NATURAL-SIZE (uncropped) portrait image + title + optional "(disponível apenas para inscritos)" caption + optional external link. Used for b10's 3 PDF cards AND (as `.doc-card--featured`) the reading-recommendations Boal portrait. */ .cto-page .cto-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); } .cto-page .doc-card { display: flex; flex-direction: column; } .cto-page .doc-card__link { display: block; } .cto-page .doc-card img { width: 100%; height: auto; margin: 0 0 10px; border-radius: 0; } .cto-page .doc-card__title { font-size: 14px; font-weight: 600; color: #fff; margin: 0; line-height: 1.35; } .cto-page .doc-card__caption { font-size: 12px; font-style: italic; color: #b7b7b7; margin: 4px 0 0; } /* Featured (Boal portrait, reading-recommendations left column): h6/h5 caption pairing instead of title/caption paragraphs, ON A WHITE section (dark text), per the recipe. */ .cto-page .doc-card--featured img { margin-bottom: var(--space-2); } .cto-page .doc-card--featured h6 { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin: 0 0 4px; text-transform: none; } .cto-page .doc-card--featured h5 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid { grid-template-columns: 1fr; } } /* --- .cto-cta-link (CREATE#8): text-link CTA, no box/border, right arrow icon — distinct from the boxed `.cto-masthead__btn--ghost` (reused verbatim for the two-column "Como participar?" / "Formas de convênio" CTAs). Used for b10's "INSCREVA-SE AGORA". */ .cto-page .cto-cta-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-cta-link__arrow { flex: 0 0 auto; transition: transform .15s ease; } .cto-page .cto-cta-link:hover .cto-cta-link__arrow, .cto-page .cto-cta-link:focus-visible .cto-cta-link__arrow { transform: translateX(4px); } /* --- .cto-eyebrow-tag (CREATE#9): white uppercase bold text on a red #f00001 box that the text slightly overflows to the left (negative margin). `--light` modifier (section 15): dark ink text on a light box, for use on a white section bg. */ .cto-page .cto-eyebrow-tag { display: inline-block; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 22px; margin: 0 0 var(--space-3) -14px; } .cto-page .cto-eyebrow-tag--light { background: var(--hairline); color: var(--ink); } @media (max-width: 560px) { .cto-page .cto-eyebrow-tag { margin-left: 0; font-size: 12px; padding: 8px 16px; } } /* --- .cto-eyebrow-tag--start (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): alignment-only fix for teatro's closing "COORDENAÇÃO ARTÍSTICA" instance of the shared red-pill `.cto-eyebrow-tag` — the settled-original shows it flush-left, but the shared `.cto-band__inner` (column/video-duo types) is a flex column with `align-items:center`, which centers it as a flex item. `align-self` overrides only THIS item's cross-axis position; `.cto-eyebrow-tag`'s own red/white styling stays untouched for every other caller. */ .cto-page .cto-eyebrow-tag--start { align-self: flex-start; } /* --- .cto-eyebrow-line (NEW, DESIGN-FIDELITY fix pass, 2026-07-09, F4): the PLAIN-TEXT eyebrow variant used on white sections (Compromisso/galeria/ PUBLICAÇÕES) — confirmed against `_elementor_data` (dump-elementor- 5055.php): all three heading widgets carry `title_color:#0c0c0c` + typography settings only, with NO `background_color` on the widget OR its parent column, and the generated `post-5055.css` has no background rule for any of their element IDs either. The red/gray boxed pill visible in a couple of settled-original crops (Compromisso, galeria, PUBLICAÇÕES) is NOT backed by data or CSS — cross-checked as a settle/capture artifact of the widgets' `fadeInRight` entrance animation (`_animation_delay:400`), not a real design element; texto plano per the fidelity contract ("si el CSS/data no lo respalda, texto plano — CSS manda"). `align-self:flex-start` overrides the shared `.cto-band__inner` flex centering (see `.cto-eyebrow-tag--start` above) the same way. Values (uppercase, weight 800, letter-spacing 4.8px, Questrial, line-height 1.5em) are copied verbatim from the widget's own typography settings. Distinct class (never `.cto-eyebrow-tag`, shared by residencia/cursos) so those pages' own red pill stays byte-identical. */ .cto-page .cto-eyebrow-line { display: inline-block; align-self: flex-start; color: #0c0c0c; font-family: "Questrial", var(--font-ui); font-size: 1em; font-weight: 800; letter-spacing: 4.8px; line-height: 1.5em; text-transform: uppercase; margin: 0 0 var(--space-3); } /* --- .cto-people-grid / .person-card (CREATE#5): 1:1 170x170 cover-crop photo + centered name (bold) / role / country, 4-up. Used for the "PESSOAS FORMADAS PELO PROGRAMA" grid. */ .cto-page .cto-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .cto-page .person-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .cto-page .person-photo { width: 170px; max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .person-name { color: #fff; font-weight: 700; font-size: 15px; margin: var(--space-2) 0 6px; } .cto-page .person-role { color: #d8d8d8; font-size: 13px; font-style: italic; line-height: 1.4; margin: 0 0 4px; } .cto-page .person-country { color: #9a9a9a; font-size: 13px; margin: 0; } @media (max-width: 700px) { .cto-page .cto-people-grid { grid-template-columns: repeat(2, 1fr); } } /* --- .cto-steps-grid / .step-card (CREATE#6): 1:1 170x170 cover-crop photo LEFT + numeric badge/label RIGHT (flex row, NOT stacked), 3/3/1 rows; trailing short rows simply have fewer cards (no phantom placeholders). Used for "ATIVIDADES INCLUSAS NO PROGRAMA". */ .cto-page .cto-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-3); margin: 0 0 var(--space-4); } .cto-page .step-card { display: flex; align-items: flex-start; gap: var(--space-2); } .cto-page .step-photo { flex: 0 0 auto; width: 100px; aspect-ratio: 1 / 1; overflow: hidden; } .cto-page .step-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .step-number { display: block; color: #8a8a8a; font-size: 13px; margin: 0 0 4px; } .cto-page .step-label { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; } @media (max-width: 900px) { .cto-page .cto-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-steps-grid { grid-template-columns: 1fr; } .cto-page .step-photo { width: 80px; } } /* --- CTA two-column block (in-column, reuses `.cto-masthead__btn`/`--ghost` verbatim — those rules are declared `.cto-page .cto-masthead__btn…`, not scoped under `.cto-masthead`, so they apply anywhere in `.cto-page`; the brief's REUSE list counts this as the ghost CTA's 2nd/3rd use on this page). */ .cto-page .cto-cta-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .cto-page .cto-cta-2col h3 { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.8em; color: #fff; margin: 0 0 var(--space-2); } .cto-page .cto-cta-2col p { color: #d8d8d8; font-size: 15px; line-height: 1.6; margin: 0 0 var(--space-3); } @media (max-width: 700px) { .cto-page .cto-cta-2col { grid-template-columns: 1fr; } } /* --- .cto-band--column (CREATE, generalized): reading-width content sharing its section's own full-bleed background (dark #0c0c0c or light #fff) — distinct from `.cto-after-band` (sits on the page's cream bg): residencia's in-column chunks (grids/eyebrow-tags/CTAs) sit directly on the SAME solid canvas as the surrounding bands, per the settled original (no white card anywhere until the reading-recommendations chunk, which IS on white). */ .cto-page .cto-band--column-dark { background: #0c0c0c; } .cto-page .cto-band--column-light { background: #fff; } .cto-page .cto-band__inner--column { max-width: 1170px; margin: 0 auto; padding: 70px 24px; } @media (max-width: 560px) { .cto-page .cto-band__inner--column { padding: 50px 15px; } } /* --- .cto-reading-grid: Boal portrait (`.doc-card--featured`, left 50%) + 2x3 grid of SQUARE 170x170 `.reading-card`s (right 50%) — per D3 the reading-cards are square crops (unlike the b10 doc-cards' natural aspect), author byline above the title. */ .cto-page .cto-reading-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .cto-page .reading-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .reading-card { display: flex; flex-direction: column; } .cto-page .reading-card__link { display: block; } .cto-page .reading-photo { aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px; } .cto-page .reading-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; } .cto-page .reading-author { font-size: 12px; color: var(--ink-soft); margin: 0 0 2px; } .cto-page .reading-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0; } .cto-page .reading-caption { font-size: 11px; font-style: italic; color: var(--ink-soft); margin: 3px 0 0; } @media (max-width: 900px) { .cto-page .cto-reading-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cto-page .reading-card-grid { grid-template-columns: repeat(2, 1fr); } } /* --- static reconstructed testimonial (D1): a red quote-mark glyph + quote text + name, no carousel/JS. In-column, on the same white background as the reading-recommendations grid above it. */ .cto-page .cto-testimonial { max-width: 720px; margin: var(--space-4) auto 0; text-align: center; } .cto-page .cto-testimonial__mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 1; font-weight: 700; margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__quote { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-2); } .cto-page .cto-testimonial__name { font-weight: 700; color: var(--ink); margin: 0; } /* --- .cto-band--video (D2 + videofix 2026-07-10): the original is a BACKGROUND-VIDEO section (post-4892 _elementor_data element 19bdbbe4, background_background:video, youtu.be/VE48YJ767kQ start=130). Replicated 0-remote-hosts as a LOCAL ambient (home hero treatment) over the photo fallback. 16:9, matching the settled original's band proportions. Section base #000000 per post-4892.css: `.elementor-4892 .elementor-element.elementor-element-19bdbbe4:not(...) {background-color:#000000;}`. */ .cto-page .cto-band--video { aspect-ratio: 16 / 9; max-height: 720px; background: #000000; } @media (max-width: 560px) { .cto-page .cto-band--video { aspect-ratio: 4 / 3; } } /* Ambient background video fills the band edge-to-edge exactly like `.cto-band__bg` (cover, uncropped-proportions box = the section itself), mirroring the original's `.elementor-background-video-container` which covers section 19bdbbe4 behind `.elementor-background-overlay` (overlay #b79c77/0.35 per post-4892.css `.elementor-element-19bdbbe4 > .elementor-background-overlay{background-color:#b79c77;opacity:0.35;}` — the overlay div renders AFTER the video in the DOM, so it paints above). */ .cto-page .cto-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; max-width: none; } /* ========================================================================== TEATRO DAS OPRIMIDAS (post 5055) — DESIGN-FIDELITY pass, 2026-07-09. Every rule below is additive/scoped: new classes or opt-in modifiers of existing ones, touching no selector any other page relies on. ========================================================================== */ /* --- Recursos doc-card variant (`.doc-card--resource`): the base `.doc-card` (CREATE#7, above) was built for a DARK panel (band-content/b10, white title text) or the reading-grid's `--featured` white-bg h6/h5 pairing. Teatro's Recursos grid needs a THIRD combination on a plain white section: natural-portrait cover + a gray eyebrow + a dark title + a red-hover "ACESSE AQUI" link-out — none of the two existing variants fit, so this adds (never overrides) a gray eyebrow line and a dark-title modifier. Grid shape (DESIGN-FIDELITY fix pass, 2026-07-09, F2): the settled-original has NO section header ("RECURSOS" pill removed — see forge-teatro-5055.php) and its 5 cards are a genuine 2-size masonry, not `.cto-doc-grid`'s equal 3-col grid — see `.cto-doc-grid--resource-masonry` below. */ .cto-page .doc-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #919191; margin: 0 0 4px; } .cto-page .doc-card__title--dark { color: var(--ink); } /* --- .cto-doc-grid--resource-masonry (NEW, opt-in modifier of the shared `.cto-doc-grid`, never overriding its base `display:grid` 3-col rule for other callers): pixel-measured off the settled-original (measure-recursos-pub-5055.mjs column-run scan) the Recursos grid is a CSS multi-column masonry, not a row-major grid — col1 holds card 1 (small) + card 2 (large), col2 holds card 3 (large) + card 4 (small), col3 holds card 5 (large) alone. `column-count` reproduces this column-major flow directly from DOM order; forced breaks on cards 3 and 5 make the 2+2+1 grouping deterministic rather than depending on the browser's own column- balance heuristic. `width:100%` guards against the shared `.cto-band__inner` flex `align-items:center` (column type) shrinking this to its content width instead of the full reading column. */ .cto-page .cto-doc-grid--resource-masonry { display: block; width: 100%; column-count: 3; column-gap: 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource { break-inside: avoid; margin: 0 0 30px; } .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(3), .cto-page .cto-doc-grid--resource-masonry .doc-card--resource:nth-child(5) { break-before: column; } /* --- .doc-card--resource-compact (NEW): the two SMALL cards (Boletim/ Resultados, card 1; Comunicação, card 4) render image + caption SIDE BY SIDE (image fixed ~170px, caption filling the rest of the column) instead of the base `.doc-card`'s stacked column layout — matches the settled- original's ~170x235/168x233 small-card treatment. */ .cto-page .doc-card--resource-compact { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .cto-page .doc-card--resource-compact img { width: 170px; flex: 0 0 170px; margin-bottom: 0; } .cto-page .doc-card--resource-compact .doc-card__body { flex: 1 1 auto; min-width: 0; } @media (max-width: 700px) { .cto-page .cto-doc-grid--resource-masonry { column-count: 1; } .cto-page .doc-card--resource-compact { flex-direction: column; } .cto-page .doc-card--resource-compact img { width: 100%; flex-basis: auto; margin-bottom: 10px; } } /* --- .cto-cta-link--dark: same text-link + arrow-icon shell as `.cto-cta-link` (CREATE#8, white text for dark bands) but for use on a WHITE section (the Recursos "ACESSE AQUI" links) — ink text at rest, red on hover/focus per the recipe's `hover_color:#f00001`. */ .cto-page .cto-cta-link--dark { color: var(--ink); } .cto-page .cto-cta-link--dark:hover, .cto-page .cto-cta-link--dark:focus-visible { color: #f00001; } /* --- .cto-gallery--square: opt-in modifier of `.cto-gallery` (which is a flex row of NATURAL-aspect images elsewhere, REGLA DURA no-crop, per its own comment above) -- teatro's own settled-original render measures its 6-photo gallery at UNIFORM ~1:1 cells despite the source files' varied native ratios (landscape 2560x1706, 860x668, etc.), i.e. the ORIGINAL itself cover-crops this specific gallery to a square grid (an Elementor fixed-thumbnail gallery widget). Reproducing THAT crop is the fidelity contract's own instruction ("reproduce the crop the original had"); it is a distinct instance from the natural-aspect gallery elsewhere, so this is an opt-in modifier, never a change to the base flex behavior. */ .cto-page .cto-gallery--square { display: grid; grid-template-columns: repeat(3, 1fr); } .cto-page .cto-gallery--square > img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } @media (max-width: 700px) { .cto-page .cto-gallery--square { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cto-page .cto-gallery--square { grid-template-columns: 1fr; } } /* --- .cto-media-grid: a BARE 4-column image grid (Publicações) — distinct from `.pub-grid`/`.pub-card` (publicacoes/2788's own component, which adds white card chrome + a title/subtitle row): the settled-original crop (`out/crop-publicacoes.png`) shows these 29 covers as plain linked images with NO card background/border/shadow/title -- the cover art itself carries all its own text. A new component name avoids overloading `.pub-grid`'s card semantics for a page that never wanted them. The trailing incomplete row (discrepancy #3: 3 of 4 final-row widgets were genuinely empty in the original, never populated) is reproduced with `.cto-media-grid__cell--empty` spacer cells, not invented content. */ .cto-page .cto-media-grid { /* Dims pixel-measured off the settled-original's first cover row (measure-recursos-pub-5055.mjs): 4 covers at x=[203,400]/[432,629]/ [650,847]/[869,1066] -> ~197px cells, ~862px total inset, centered. The live build had grown this to ~263x370 covers at 1122px wide (DESIGN-FIDELITY fix pass, 2026-07-09, F3) -- constraining max-width to the measured inset + a smaller gap reproduces both the smaller cover size and the narrower inset without hand-fixing per-cell dims (the grid divides 862px into 4 equal ~200px columns on its own). */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 862px; margin: 0 auto var(--space-4); } .cto-page .cto-media-grid img { width: 100%; height: auto; object-fit: contain; margin: 0; border-radius: 0; display: block; } .cto-page .cto-media-grid__cell--empty { visibility: hidden; } @media (max-width: 900px) { .cto-page .cto-media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cto-media-grid { grid-template-columns: 1fr; } .cto-page .cto-media-grid__cell--empty { display: none; } } /* --- .cto-band--split (NEW, "Compromisso"): full-bleed WHITE 2-column composite -- no analogue among the existing ordered-section types (per the recipe's own CREATE list). Left column: eyebrow-tag + big red quote-mark + italic pull-quote + attribution + a video "Assistir" link (no embed, matching the 0-remote-hosts contract already set by `.cto-band--video`). Right column: 2-up photo row + a heading + a solid red CTA link-out ("Assista completo"). The recipe's own `_elementor_data` overlay settings for this section (#0c0c0c/.7) are DEAD -- confirmed no `background_image` + the generated CSS overlay rule carries no color/ opacity -- so this section paints plain white, no `.cto-band__overlay`. */ .cto-page .cto-band--split { background: #fff; } .cto-page .cto-band__inner--split { max-width: 1170px; margin: 0 auto; padding: 100px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .cto-page .cto-band__split-mark { color: #f00001; font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1; font-weight: 700; margin: 0 0 4px; } .cto-page .cto-band__split-quote { font-style: italic; color: var(--ink); font-size: 15px; line-height: 1.65; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-attribution { color: var(--ink); font-size: 14px; margin: 0 0 var(--space-3); } .cto-page .cto-band__split-video { display: inline-flex; align-items: center; gap: 8px; background: #0c0c0c; color: #fff; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; justify-content: center; text-decoration: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cto-page .cto-band__split-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-photos img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; } .cto-page .cto-band__split-body { font-family: "Prompt", var(--font-body); font-weight: 300; font-size: 1.3em; line-height: 1.4; color: var(--ink); margin: 0 0 var(--space-3); } .cto-page .cto-band__split-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 34px; background: #f00001; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .cto-page .cto-band__split-cta:hover { filter: brightness(1.06); } @media (max-width: 900px) { .cto-page .cto-band__inner--split { grid-template-columns: 1fr; padding: 70px 24px; } } @media (max-width: 560px) { .cto-page .cto-band__inner--split { padding: 50px 15px; } .cto-page .cto-band__split-photos { gap: 10px; } } /* --- .cto-band--video-duo (NEW, closing "Coordenação artística" band): a full-bleed photo band (same `.cto-band__bg`/`.cto-band__overlay` base as `--quote`/`--inset` above) whose content is an eyebrow-tag (`--light`, red box) + 2 side-by-side "video cards" (label + text + white arrow-icon link-out) -- distinct from `.cto-band--quote`'s single centered/boxed quote and from `.cto-band--content`'s doc-grid+panel composition. DISCREPANCY (masthead's same motion-fx artifact, CSS/file-confirmed real photo -- see build report): implemented with the real photo per CSS. */ .cto-page .cto-band--video-duo { min-height: 0; } .cto-page .cto-band__inner--video-duo { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 125px 24px 100px; } .cto-page .cto-band__video-duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-4); } .cto-page .video-duo-card { background: #0c0c0c; padding: var(--space-3); min-height: 220px; display: flex; flex-direction: column; } /* Embedded YouTube player ABOVE the label/text (Lucas 2026-07-10 #3): the original "Coordenação artística" cards each open with a real, playable video embed. Per the owner's explicit sanction (2026-07-10) these 2 embeds override the 0-remote-hosts contract as direct YouTube iframes (see page.php band-video-duo). 16:9 responsive box, no border/radius (matches the flat #0c0c0c card). */ .cto-page .video-duo-card__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 var(--space-2); background: #000; } .cto-page .video-duo-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .cto-page .video-duo-card__label { color: #919191; font-size: 13px; margin: 0 0 10px; } .cto-page .video-duo-card__text { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-2); } .cto-page .video-duo-card__link { color: #fff; margin-top: auto; display: inline-flex; } @media (max-width: 700px) { .cto-page .cto-band__inner--video-duo { padding: 70px 24px 56px; } .cto-page .cto-band__video-duo-grid { grid-template-columns: 1fr; } } /* ========================================================================== Noticias (post 5027) DESIGN-FIDELITY pass, 2026-07-09 — 3 net-new `_cto_sections` types: `heading-split`, `news-grid`, `band-video-trio`. ========================================================================== */ /* --- .heading-split (NEW `heading-split` case): ported verbatim from home/cto-list (red-bar h2) into a `.cto-page`-scoped rule so the ordered- sections mechanism can render it as a plain white section heading. Redesign-wins fidelity call (recipe #2): same semantic text/structure as home's own "Últimas notícias", not the original's Montserrat/black/ border-left treatment. */ .cto-page .heading-split { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-2); } .cto-page .heading-split .rule { width: 3px; align-self: stretch; min-height: 30px; background: var(--accent); flex: 0 0 auto; } .cto-page .heading-split h2 { margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-weight: 300; } .cto-page .heading-split h2 b { font-weight: 800; } /* --- .cto-band--heading-split / .cto-band--news-grid: zero the standard `.cto-band__inner--column` bottom padding on the heading section and the top padding on the grid section that immediately follows it, so the two flush (0-margin, per the `.cto-band--flush` rule above) sections read as ONE continuous white "ÚLTIMAS notícias" block, per the recipe's own instruction ("usa `.heading-split` acima como cabeçalho da seção, não duplicar"). */ .cto-page .cto-band--heading-split .cto-band__inner--column { padding-bottom: 0; } .cto-page .cto-band--news-grid .cto-band__inner--column { padding-top: var(--space-2); } /* DESIGN-FIDELITY fix (D3, 2026-07-09): `.cto-band__inner` (the base rule shared by every `.cto-band` variant, cto-page.css ~L561) sets `align-items: center`, built for its original centered-title-over-photo layout. `.cto-band__inner--column` never overrides it, so `.heading-split` (a narrow flex row, not full-width content like `.cards`) rendered centered in the column instead of flush-left against the reading column -- neither the original (border-left, content_position:bottom) nor the home's own `.heading-split` (left-flush in its flex row, no centering) is centered. Scoped to the heading-split section only: the "column" case (free-form prose) and `.cards`/video-trio grids are unaffected. */ .cto-page .cto-band--heading-split .cto-band__inner--column { align-items: flex-start; } /* --- SPACING FIX (transparencia / post 3157, 2026-07-10): the two in-body `.heading-split` section headers ("Relatórios anuais", "Documentações") rendered flush against the block above them (a ~24px / ~40px natural gap), losing the original's generous whitespace that set each block apart. In the original Elementor layout each of these was the top of its own white section whose top padding created the separation: - "Relatórios anuais" region = section 5199f127, `padding:111px 0px 0px 0px` (uploads/elementor/css/post-3157.css) - "Documentações" region = section 1ea01b57, `padding:108px 0px 113px 0px` (uploads/elementor/css/post-3157.css) Re-establish that top separation via a margin-top on each heading-split, scoped to page-id-3157 only (so the shared `.heading-split` used by other pages is untouched). Selected by preceding sibling: the "Relatórios anuais" header follows a prose ``; "Documentações" follows the `.pub-grid` of report covers. Margins collapse with the preceding block, so the rendered gap equals the anchored value rather than stacking on it. */ .page-id-3157 .cto-page .entry-content > p + .heading-split { margin-top: 111px; } .page-id-3157 .cto-page .entry-content > .pub-grid + .heading-split { margin-top: 108px; } /* --- .cards / .card / .load-more-wrap / .btn / .no-comments (NEW `news-grid` case): copied verbatim from cto-home.css/cto-list.css so the dynamic grid is pixel-identical to home's own "Últimas notícias" cards — see cto-list.css's own comment for the same convention. The "Carregar mais" button uses the site's `--accent` red (the eael plugin's own cyan `#29d8d8` is plugin styling, not the design system, per the recipe). */ .cto-page .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .card { background: var(--reading); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s ease; } .cto-page .card:hover { transform: translateY(-2px); } .cto-page .card .photo { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-wash-1), var(--accent-wash-2)), repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px), var(--hairline); display: grid; place-items: center; } .cto-page .card .photo span { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; } .cto-page .card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cto-page .card .card-title { font-size: 18px; line-height: 1.25; font-weight: 700; padding: var(--space-2); margin: 0; color: var(--ink); } .cto-page .card .card-title .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cto-page .card .card-more { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); padding: 0 var(--space-2) var(--space-2); margin: 0; } /* --- .card-meta: date row under "Leia mais" (slot from DESIGN-FIDELITY fix D2, 2026-07-09, which replicated the eael-post-grid's .eael-entry-footer avatar + author + date byline). DECISION Lucas 2026-07-10: author (avatar + name) removed from all grid cards -- date only, left-aligned in the same padded card-body slot. Flex/gap and the 24px __avatar rule dropped with the avatar (single text child needs neither). */ .cto-page .card .card-meta { padding: 0 var(--space-2) var(--space-2); margin-top: -6px; } .cto-page .card .card-meta__text { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); } .cto-page .load-more-wrap { text-align: center; margin-top: var(--space-4); } .cto-page .load-more-wrap .btn { width: auto; max-width: 100%; padding: 12px 28px; } /* `.btn`'s base rule (red --accent fill) is already declared above (shared with cursos' CTAs) -- reused verbatim here, not redeclared. Only the fetch-append busy state is net-new. */ .cto-page .btn[aria-busy="true"] { opacity: .6; pointer-events: none; } .cto-page .no-comments { color: var(--ink-soft); font-size: 14.5px; background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; max-width: 640px; } @media (max-width: 900px) { .cto-page .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cto-page .cards { grid-template-columns: 1fr; } } /* --- .cto-band--video-trio / .video-trio-card (NEW `band-video-trio` case): 3 real-photo cards + play-icon link-out, plain white bg, no overlay — reconstructed from the dead Pro `media-carousel` widget's own settings (coverflow skin, height:500 desktop / 400 tablet). Cover-cropped to a uniform card height (no faithful settled-original render exists for this widget to violate — it painted empty in every capture — so this is a from-data reconstruction, not a crop of a real rendered photo). */ .cto-page .cto-band--video-trio { background: #fff; } .cto-page .cto-band__video-trio-grid { max-width: 1170px; margin: 0 auto; padding: 120px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cto-page .video-trio-card { position: relative; display: block; height: 500px; overflow: hidden; border-radius: 0; } .cto-page .video-trio-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cto-page .video-trio-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .cto-page .cto-band__video-trio-grid { padding: 80px 24px; } .cto-page .video-trio-card { height: 400px; } } @media (max-width: 560px) { .cto-page .cto-band__video-trio-grid { grid-template-columns: 1fr; padding: 46px 15px 50px; } .cto-page .video-trio-card { height: 320px; } }