/** * Casas Choice — single post template (Penpot board "Artigo" → Desktop / * Mobile). Covers everything template-parts/artigo/*.php render: hero * (breadcrumb + meta/title/lead + photo), article body, "Explorar temas * relacionados" chips, "Artigos relacionados". * * Tokens mirror assets/css/perspetivas.css / comprar.css so the whole site * reads as one system, without this file depending on either of them. * `.cc-article__related` reuses `.cc-persp-card` (from perspetivas.css, * enqueued alongside this file — see inc/artigo.php) for its cards, and * `.cc-gcard-grid` (comprar.css) + assets/js/cc-gcard-grid.js for the * grid/slider it sits in — both already generic, nothing artigo-specific * needed in either. */ /* Global Blocksy header — sitewide it's --theme-palette-color-8 (#F2F3F4), * same gray as the body (Blocksy's own dynamic global.css: * `[data-header*="type-1"] .ct-header[/[data-row*="middle"]] { background- * color: var(--theme-palette-color-8) }`, repeated for the `[data- * sticky*="yes"]` scrolled state). Per Penpot, this page's header sits on * white instead — scoped to `body.single-post` (native posts only) so nav * stays gray everywhere else. `data-header` lives on `` itself (same * element `single-post` is on, not a separate ancestor), so it has to be * compounded with `.single-post` (no space) rather than chained as a * descendant — matching Blocksy's own selector shape otherwise, so this * still wins on specificity without `!important`. */ body.single-post[data-header*="type-1"] .ct-header, body.single-post[data-header*="type-1"] .ct-header [data-row*="middle"], body.single-post[data-header*="type-1"] [data-sticky*="yes"], body.single-post[data-header*="type-1"] [data-sticky*="yes"] [data-row*="middle"] { background-color: #FFFFFF; background-image: none; } .cc-article { --cc-ink: var( --theme-palette-color-5, #333538 ); --cc-muted: #54565A; --cc-border: var( --theme-palette-color-7, #C4C7CA ); --cc-bg-alt: var( --theme-palette-color-8, #F2F3F4 ); --cc-accent: var( --theme-palette-color-1, #00A6CE ); --cc-font: 'Montserrat', sans-serif; /* The site body is --theme-palette-color-8 (#F2F3F4) sitewide — every * section here sits on plain white instead, except .cc-article__related * below, which explicitly overrides this back to that same gray to match * Penpot's "Artigos relacionados" band. */ background: #FFFFFF; color: var( --cc-ink ); font-family: var( --cc-font ); box-sizing: border-box; } .cc-article *, .cc-article *::before, .cc-article *::after { box-sizing: border-box; } /* ---------------------------------------------------------------------- * Hero — breadcrumb, "CATEGORIA | MÊS ANO" + title, lead, photo. * -------------------------------------------------------------------- */ .cc-article__hero .ct-container { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 96px 48px; } .cc-article__breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; } .cc-article__breadcrumb li { display: flex; align-items: center; gap: 4px; } .cc-article__breadcrumb li:not( :last-child )::after { content: '›'; margin-left: 4px; color: rgba( 33, 30, 22, 0.6 ); } .cc-article__breadcrumb a { color: rgba( 33, 30, 22, 0.6 ); text-decoration: underline; } .cc-article__breadcrumb a:hover { color: #211E16; } .cc-article__breadcrumb span { color: #211E16; text-decoration: none; } .cc-article__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 980px; text-align: center; } .cc-article__meta { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: var( --cc-accent ); } .cc-article__title { margin: 0; font-size: 58px; font-weight: 300; line-height: 1.18; letter-spacing: -0.29px; color: var( --cc-ink ); } .cc-article__lead { max-width: 560px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.8; text-align: center; color: var( --cc-muted ); } .cc-article__photo { width: 100%; max-width: 1180px; } .cc-article__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ---------------------------------------------------------------------- * Article body — post content. * -------------------------------------------------------------------- */ .cc-article__body-section { padding-block: 0 64px; } .cc-article__body { max-width: 860px; margin-inline: auto; font-size: 17px; line-height: 1.9; color: var( --cc-ink ); } .cc-article__body > * { margin: 0 0 24px; } .cc-article__body > *:last-child { margin-bottom: 0; } .cc-article__body h2 { font-size: 24px; font-weight: 500; line-height: 1.3; color: var( --cc-ink ); } .cc-article__body h3 { font-size: 20px; font-weight: 500; line-height: 1.3; color: var( --cc-ink ); } .cc-article__body a { color: var( --cc-accent ); text-decoration: underline; } .cc-article__body ul, .cc-article__body ol { padding-left: 1.2em; } .cc-article__body blockquote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var( --cc-border ); font-style: italic; color: var( --cc-muted ); } .cc-article__body img { max-width: 100%; height: auto; } /* ---------------------------------------------------------------------- * "Explorar temas relacionados" chips. * -------------------------------------------------------------------- */ .cc-article__topics { border-top: 1px solid rgba( 84, 86, 90, 0.25 ); } .cc-article__topics-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding-block: 32px; } .cc-article__topics-label { font-size: 14px; font-weight: 400; color: var( --cc-muted ); } .cc-article__topic-chip { display: inline-flex; align-items: center; height: 33px; padding-inline: 19px; border: 1px solid rgba( 51, 53, 56, 0.6 ); border-radius: 999px; font-family: var( --cc-font ); font-size: 13px; font-weight: 400; letter-spacing: 0.26px; color: var( --cc-ink ); text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease; } .cc-article__topic-chip:hover { background: var( --cc-ink ); border-color: var( --cc-ink ); color: #FFFFFF; } /* ---------------------------------------------------------------------- * "Artigos relacionados". * -------------------------------------------------------------------- */ .cc-article__related { background: var( --cc-bg-alt ); padding-block: 96px; } .cc-article__related-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 64px; } .cc-article__related-heading h2 { margin: 0; font-size: 36px; font-weight: 300; line-height: 1.15; color: var( --cc-ink ); } .cc-article__related-heading p { margin: 8px 0 0; font-size: 16px; font-weight: 400; line-height: 1.7; color: var( --cc-muted ); } .cc-article__related-all { flex: none; font-size: 14px; font-weight: 600; color: var( --cc-ink ); text-decoration: none; } .cc-article__related-all:hover { text-decoration: underline; } /* Only the fallback (≥1000px, un-initialized) grid's gap needs overriding * here — everything else about .cc-gcard-grid (comprar.css) and the cards * themselves (.cc-persp-card, perspetivas.css) is already exactly right. */ .cc-artigo-related__grid .cc-gcard-grid__swiper:not( .swiper-initialized ) > .swiper-wrapper { gap: 32px; } /* ---------------------------------------------------------------------- * Mobile — left-aligned hero, no meta line, full-bleed photo, stacked * topic chips, stacked related-head. * -------------------------------------------------------------------- */ @media ( max-width: 999px ) { .cc-article__hero .ct-container { align-items: flex-start; padding-block: 48px 2px; } .cc-article__breadcrumb { justify-content: flex-start; } .cc-article__heading { align-items: flex-start; max-width: none; text-align: left; } .cc-article__meta { display: none; } .cc-article__title { font-size: 30px; line-height: 1.4; letter-spacing: 0; } .cc-article__lead { max-width: none; text-align: left; font-size: 17px; line-height: 1.7; color: var( --cc-ink ); } /* Full-bleed, edge to edge — same breakout as .cc-persp-pills * (assets/css/perspetivas.css) for the same reason: Penpot's Mobile * board runs the photo the full width of the screen, not inset inside * .ct-container like the text above/below it. */ .cc-article__photo { width: 100vw; max-width: 100vw; position: relative; left: 50%; margin-left: -50vw; } .cc-article__photo img { aspect-ratio: 13 / 14; } .cc-article__body-section { padding-block: 48px; } .cc-article__topics-row { flex-direction: column; padding-block: 48px; } .cc-article__related { padding-block: 48px; } .cc-article__related-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 48px; } .cc-article__related-heading h2 { font-size: 30px; line-height: 1.38; } .cc-article__related-heading p { color: var( --cc-ink ); } .cc-article__related-all { font-weight: 500; } } @media ( prefers-reduced-motion: reduce ) { .cc-article__topic-chip, .cc-article__breadcrumb a { transition: none; } }