/* Theme Name: Kemble White Theme URI: https://kemblewhite.com/ Author: Pixeltres Description: Block theme for Kemble White Tax Solutions. Carries the Brand Manual v1.0 design system — Navy, Gold and Sand tokens, Newsreader and Karla self-hosted — as global theme.json settings. Built for a clear split between services and editorial content. Version: 1.57.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kw-theme Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, accessibility-ready */ /* Base rules that theme.json cannot express. Everything visual lives in theme.json. */ /* ── Reading rhythm ──────────────────────────────────────────── Three rules the references agree on: measure 50–75 characters (66 is the sweet spot), paragraph spacing = line-height ÷ 1.5, and space before a heading twice the paragraph spacing with the space after equal to it. Components keep their own spacing. Note: real specificity, not :where() — these must beat the block editor's own margin resets. */ :root { --kw-rhythm: 1.2rem; } /* The prose column. Matches both a container and the element itself. */ .kw-measure p, .kw-measure li, .kw-prose, .kw-prose p, .kw-prose li, p.kw-prose, li.kw-prose, .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col):not(.kw-service-card) > p, .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col):not(.kw-service-card) > ul, .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col):not(.kw-service-card) > ol, .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col) > h2, .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col) > h3 { max-width: var(--wp--custom--measure); margin-inline-start: 0; margin-inline-end: 0; } /* Grids and full-bleed rows are not prose; plain figures stay in the column. */ .entry-content .is-layout-grid, .entry-content .alignwide, .entry-content .alignfull { max-width: none; } /* Paragraph and list rhythm. */ .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col):not(.kw-service-card) > :is(p, ul, ol, figure, table) { margin-block: 0 var(--kw-rhythm); } /* Twice the paragraph spacing above a heading, one below. */ .entry-content .wp-block-group:not(.kw-card-body):not(.kw-footer-col) > :is(h2, h3, h4) { margin-block-start: calc(var(--kw-rhythm) * 2); margin-block-end: var(--kw-rhythm); } /* A heading that opens its section has nothing to separate from. */ .entry-content .wp-block-group > :is(h1, h2, h3, h4):first-child, .entry-content .wp-block-group > .kw-eyebrow + :is(h1, h2, h3, h4) { margin-block-start: 0; } /* The eyebrow belongs to the heading below it. */ .entry-content .kw-eyebrow { margin-block: 0 0.5rem; } .entry-content .wp-block-group > .kw-eyebrow:not(:first-child) { margin-block-start: calc(var(--kw-rhythm) * 2); } .entry-content .wp-block-group > :is(h1, h2, h3, h4) + * { margin-block-start: 0; } /* Lists share the paragraph rhythm; items breathe at half of it. */ /* Prose lists get a hanging indent. Component lists — card grids, filter rails, footer columns, navigation — are not prose and keep their own box. */ .entry-content ul:not(.kw-footer-list):not(.wp-block-navigation__container):not(.kw-prose):not(.kw-guides-grid):not(.kw-archive-grid):not(.kw-filter-list):not(.kw-tag-list):not(.kw-aside-list):not(.kw-aside-recent):not(.kw-mega-grid), .entry-content ol:not(.kw-pagination ol) { padding-inline-start: 1.25rem; } .entry-content :is(.kw-guides-grid, .kw-archive-grid, .kw-filter-list, .kw-tag-list, .kw-aside-list, .kw-aside-recent, .kw-mega-grid, .kw-pagination ul) { padding-inline-start: 0; margin-inline: 0; } .entry-content :is(.kw-guides-grid, .kw-archive-grid, .kw-filter-list, .kw-tag-list) li + li { margin-block-start: 0; } .entry-content li + li { margin-block-start: calc(var(--kw-rhythm) / 2); } .entry-content li > p { margin-block-end: 0; } /* Even line breaks, no single trailing word. */ .kw-measure p, .kw-prose, p.kw-prose, .entry-content .wp-block-group:not(.kw-card-body) > p { text-wrap: pretty; } :is(h1, h2, h3, h4) { text-wrap: balance; } :is(h1, h2) { font-optical-sizing: auto; } /* Eyebrow — Karla 700 caps, +18% tracking (Brand Manual 03). */ .kw-eyebrow { font-family: var(--wp--preset--font-family--text); font-weight: 700; font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.5rem; } /* Gold hairline that opens a section. Punctuation, never a surface. */ .kw-rule::before { content: ""; display: block; width: 64px; height: 2px; background: var(--wp--preset--color--gold-500); margin-bottom: 1.25rem; } /* Money and figures always tabular (Brand Manual 03). */ .kw-figure, table td, table th { font-variant-numeric: tabular-nums; } /* Dark bands invert link and heading color. */ .has-navy-700-background-color a:not(.wp-element-button), .has-navy-800-background-color a:not(.wp-element-button), .has-navy-900-background-color a:not(.wp-element-button) { color: var(--wp--preset--color--gold-300); } .has-navy-700-background-color :is(h1,h2,h3,h4,h5,h6), .has-navy-800-background-color :is(h1,h2,h3,h4,h5,h6), .has-navy-900-background-color :is(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--sand-50); } /* Visible focus everywhere — WCAG 2.2 AA. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 2px; } /* Skip link. */ .skip-link:focus { position: fixed; inset: 0.5rem auto auto 0.5rem; z-index: 999; padding: 0.75rem 1rem; background: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); border-radius: 4px; } /* Wide content never scrolls the page sideways. */ .wp-block-table { overflow-x: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Nav CTA — gold pill, the one primary action in the header. */ .kw-nav-cta a { background: var(--wp--preset--color--gold-500); color: var(--wp--preset--color--navy-900) !important; padding: 0.6rem 1rem; border-radius: 4px; text-decoration: none; } .kw-nav-cta a:hover { background: var(--wp--preset--color--gold-300); } /* A heading that is also a link keeps the heading's color and drops the underline. */ :is(h1,h2,h3,h4,h5,h6) a { color: inherit; text-decoration: none; } :is(h1,h2,h3,h4,h5,h6) a:hover { color: var(--wp--preset--color--gold-600); text-decoration: underline; } /* ── Service cards ───────────────────────────────────────────── Image flush at the top, one action at the foot. The whole card is not a link: the heading and the CTA are, so keyboard users get two predictable stops instead of one giant target. */ .kw-service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: border-color 120ms ease, transform 120ms ease; } .kw-service-card:hover { border-color: var(--wp--preset--color--gold-500) !important; } .kw-card-media { display: block; line-height: 0; background: var(--wp--preset--color--sand-100); } .kw-card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .kw-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; text-align: left; } /* The constrained group layout centers its children; the card wants them flush left. */ .kw-card-body > * { margin-inline: 0; max-width: 100%; } .kw-card-body > :last-child { margin-top: auto; } .kw-card-cta { display: inline-block; padding-top: 0.75rem; font-family: var(--wp--preset--font-family--text); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--wp--preset--color--gold-600); text-decoration: none; } .kw-card-cta:hover { color: var(--wp--preset--color--navy-700); text-decoration: underline; } .kw-card-cta:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .kw-service-card { transition: none; } } /* ── Header ──────────────────────────────────────────────────── Logo left, navigation right, both on the same baseline and on the same 1180px gutter as every other section. */ .kw-header { position: relative; } /* O core aplica `.wp-block-group.has-background { padding: 1.25em 2.375em }`, o que somava ~38px à esquerda do header e desalinhava o logo da goteira. A especificidade precisa empatar com a do core para vencer por ordem. */ .wp-block-group.kw-header { padding-inline: 0; } .kw-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; box-sizing: border-box; /* A mesma goteira de todas as seções do site: o conteúdo cai em 1180px no desktop e a 20px da borda no celular, sem exceção para o header. */ padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); } /* O block gap do WordPress empurrava a nav para baixo, tirando-a da linha central do logo. */ .kw-header-inner > * { margin-block: 0; } .kw-header-inner > .wp-block-site-logo { flex: 0 0 auto; margin: 0; } .kw-header .wp-block-site-logo img { display: block; height: auto; } @media (max-width: 781px) { .kw-header-inner { gap: 1rem; align-items: center; } /* O bloco site-logo imprime a largura escolhida no editor na própria figure, deixando a imagem centrada dentro de uma caixa maior — o que empurra o logo para dentro. A figure passa a acompanhar a imagem. */ .kw-header-inner > .wp-block-site-logo, .kw-header-inner > .wp-block-site-logo .wp-block-site-logo, .kw-header-inner > .wp-block-site-logo a { width: auto !important; max-width: none; } .kw-header-inner > .wp-block-site-logo img { width: 180px !important; max-width: 180px; } /* O botão é filho da nav, não do header — sem isto não divide a linha central com o logo. */ .kw-header .kw-nav { display: flex; align-items: center; } .kw-nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; } } /* ── Services carousel ───────────────────────────────────────── Full-bleed image, copy on the left, the picture's subject pushed right so the scrim never sits on top of it. Scroll-snap carries the motion, so the carousel still works with JavaScript off. */ .kw-slider { position: relative; background: var(--wp--preset--color--navy-900); } .kw-slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .kw-slider-track::-webkit-scrollbar { display: none; } .kw-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: clamp(430px, 68vh, 620px); display: grid; isolation: isolate; overflow: hidden; } .kw-slide-media { position: absolute; inset: 0; z-index: 0; } .kw-slide-media img { width: 100%; height: 100%; object-fit: cover; /* Subject sits right of center, opposite the copy. */ object-position: 78% center; display: block; } /* Contrast is produced here, not hoped for. Opaque under the text, fully clear over the right third where the subject lives. */ .kw-slide-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(8, 20, 34, 0.95) 0%, rgba(8, 20, 34, 0.92) 32%, rgba(8, 20, 34, 0.62) 50%, rgba(8, 20, 34, 0.12) 68%, rgba(8, 20, 34, 0) 78% ); } .kw-slide-inner { position: relative; z-index: 2; display: flex; align-items: center; padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); padding-block-end: clamp(5rem, 9vw, 6.5rem); } .kw-slide-body { max-width: 34rem; } .kw-slide-desc { max-width: 40ch; } .kw-slide .kw-eyebrow { color: var(--wp--preset--color--gold-300); } .kw-slide-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.014em; color: var(--wp--preset--color--sand-50); margin: 0 0 0.85rem; text-wrap: balance; } .kw-slide-desc { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: #D8E1EA; margin: 0 0 1.75rem; max-width: 40ch; } .kw-slide-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; } .kw-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: 4px; font-family: var(--wp--preset--font-family--text); font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid transparent; } .kw-btn-primary { background: var(--wp--preset--color--gold-500); color: var(--wp--preset--color--navy-900); } .kw-btn-primary:hover { background: var(--wp--preset--color--gold-300); color: var(--wp--preset--color--navy-900); } .kw-btn-ghost { border-color: rgba(251, 247, 240, 0.55); color: var(--wp--preset--color--sand-50); } .kw-btn-ghost:hover { background: rgba(251, 247, 240, 0.12); color: var(--wp--preset--color--sand-50); } .kw-btn:focus-visible { outline: 3px solid var(--wp--preset--color--gold-300); outline-offset: 3px; } /* Controls sit over the foot of the image, on the same gutter as the copy. */ .kw-slider-controls { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0.5rem; padding-block-end: clamp(1.25rem, 3vw, 2rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); pointer-events: none; } .kw-slider-controls > * { pointer-events: auto; } .kw-slider-buttons { display: flex; gap: 0.5rem; margin-inline-start: auto; flex: 0 0 auto; } .kw-slider-btn { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; background: rgba(8, 20, 34, 0.42); border: 1px solid rgba(251, 247, 240, 0.38); border-radius: 999px; color: var(--wp--preset--color--sand-50); cursor: pointer; line-height: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; -webkit-tap-highlight-color: transparent; } .kw-slider-btn:hover { background: rgba(8, 20, 34, 0.66); border-color: var(--wp--preset--color--gold-300); } .kw-slider-btn:active { transform: scale(0.94); } .kw-slider-btn svg { display: block; } /* Pausa e play desenhados, para não depender de glifos que variam por sistema. */ .kw-slider-playmark { display: block; width: 12px; height: 13px; position: relative; } .kw-slider-playmark::before, .kw-slider-playmark::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3.5px; border-radius: 1px; background: currentColor; } .kw-slider-playmark::before { left: 1px; } .kw-slider-playmark::after { right: 1px; } .kw-slider-btn[aria-pressed="true"] .kw-slider-playmark::before { left: 2px; width: 0; height: 0; top: 0; bottom: auto; border-radius: 0; background: none; border-block: 6.5px solid transparent; border-inline-start: 11px solid currentColor; } .kw-slider-btn[aria-pressed="true"] .kw-slider-playmark::after { display: none; } .kw-slider-dots { display: flex; gap: 0.5rem; align-items: center; min-width: 0; flex: 0 1 auto; } .kw-slider-dot { width: 26px; height: 4px; padding: 0; flex: 0 1 26px; min-width: 8px; border: 0; border-radius: 2px; background: rgba(251, 247, 240, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 140ms ease; } /* Alvo de toque de 44px sem engordar o traço. */ .kw-slider-dot { position: relative; } .kw-slider-dot::after { content: ""; position: absolute; inset: -20px -3px; } .kw-slider-dot[aria-selected="true"] { background: var(--wp--preset--color--gold-300); } .kw-slider-dot:focus-visible, .kw-slider-btn:focus-visible { outline: 3px solid var(--wp--preset--color--gold-300); outline-offset: 3px; } /* Narrow screens: a side gradient would fall across the subject, so the scrim turns vertical and the copy moves to the foot of the image. */ @media (max-width: 899px) { .kw-slide { min-height: clamp(460px, 76vh, 560px); } .kw-slide-media img { object-position: 50% 32%; } .kw-slide-scrim { background: linear-gradient( 180deg, rgba(8, 20, 34, 0.30) 0%, rgba(8, 20, 34, 0.70) 42%, rgba(8, 20, 34, 0.95) 78% ); } .kw-slide-inner { align-items: flex-end; } .kw-slide-body { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .kw-slider-track { scroll-behavior: auto; } } /* Section rule fills its container instead of WordPress's short centered dash. Width comes from the layout, not from a hard 100% that would break out of it. */ .wp-block-separator.is-style-wide { border: 0; height: 1px; opacity: 1; margin-inline: 0; } /* Sections own their vertical spacing, so the site blocks add none. Without this the header and the hero are separated by a stray band. */ .wp-site-blocks > * { margin-block-start: 0; } /* Pause / play drawn in CSS — the glyphs render as tofu in some stacks. */ .kw-slider-play span { display: block; width: 12px; height: 12px; position: relative; } .kw-slider-play span::before, .kw-slider-play span::after { content: ""; position: absolute; top: 0; bottom: 0; background: currentColor; } .kw-slider-play span::before { left: 0; width: 4px; } .kw-slider-play span::after { right: 0; width: 4px; } .kw-slider-play[aria-pressed="true"] span::before { left: 1px; width: 0; height: 0; top: 0; bottom: auto; border-block: 6px solid transparent; border-inline-start: 10px solid currentColor; background: none; } .kw-slider-play[aria-pressed="true"] span::after { display: none; } /* ── Statement band ──────────────────────────────────────────── One dominant action, one low-friction alternative, and three facts set as figures. The crest runs oversized and cropped at the corner, per the Brand Manual watermark rule. */ .kw-statement { position: relative; overflow: hidden; isolation: isolate; background: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); } .kw-statement::before { /* Gold hairline opening the band, full bleed. */ content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--wp--preset--color--gold-500) 0%, var(--wp--preset--color--gold-500) 22%, rgba(199, 154, 78, 0.15) 22%); z-index: 2; } .kw-statement-crest { position: absolute; right: -6%; bottom: -34%; width: min(560px, 52%); height: auto; opacity: 0.08; z-index: 0; pointer-events: none; user-select: none; } .kw-statement-inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(3.5rem, 8vw, 6rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); } @media (min-width: 900px) { .kw-statement-inner { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); } } .kw-statement-eyebrow { color: var(--wp--preset--color--gold-300); margin-bottom: 1rem; } .kw-statement-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(2.125rem, 4.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.018em; color: var(--wp--preset--color--sand-50); margin: 0 0 1.25rem; text-wrap: balance; } .kw-statement-title em { font-style: italic; color: var(--wp--preset--color--gold-300); } .kw-statement-desc { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.65; color: #C6D5E2; max-width: 44ch; margin: 0 0 2rem; } .kw-statement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 0 0 0.875rem; } .kw-btn-lg { min-height: 56px; padding-inline: 2rem; font-size: 1.0625rem; } .kw-statement-phone { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; color: var(--wp--preset--color--sand-50); border-bottom: 1px solid rgba(226, 192, 122, 0.5); padding-bottom: 2px; } .kw-statement-phone:hover { border-bottom-color: var(--wp--preset--color--gold-300); color: var(--wp--preset--color--sand-50); } .kw-statement-phone:focus-visible { outline: 3px solid var(--wp--preset--color--gold-300); outline-offset: 4px; } .kw-statement-phone-label { font-size: 0.8125rem; color: #9FB4C6; } .kw-statement-phone-number { font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .kw-statement-reassure { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: #9FB4C6; } /* Facts — figures first, label second, hairline between. */ .kw-statement-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(226, 192, 122, 0.28); } .kw-fact { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 0 1.25rem; align-items: baseline; padding-block: clamp(1.1rem, 2.4vw, 1.5rem); border-bottom: 1px solid rgba(226, 192, 122, 0.28); } .kw-fact-figure { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--gold-300); font-variant-numeric: tabular-nums; } .kw-fact-value { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; } .kw-fact-unit { font-family: var(--wp--preset--font-family--text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold-500); } .kw-fact-label { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #C6D5E2; } /* Closing variant: no facts column, so the copy gets a single measured column. */ .kw-statement-closing .kw-statement-inner { grid-template-columns: 1fr; padding-block: clamp(3rem, 6vw, 4.5rem); } .kw-statement-closing .kw-statement-lead { max-width: 46rem; } .kw-statement-closing .kw-statement-title { font-size: clamp(1.875rem, 3.6vw, 2.625rem); } @media (max-width: 899px) { .kw-statement-crest { width: 72%; right: -18%; bottom: -12%; opacity: 0.06; } .kw-statement-actions { gap: 1rem; } .kw-btn-lg { width: 100%; justify-content: center; } } /* ── Prose lists ─────────────────────────────────────────────── Marker hangs outside so the text keeps the site gutter. */ .kw-prose { list-style: none; padding-left: 0; } .kw-prose li { position: relative; padding-left: 1.5rem; } .kw-prose li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--wp--preset--color--gold-500); } /* ── Footer ──────────────────────────────────────────────────── Four columns: brand, services split in two, then the rest of the site. The legal block sits behind a gold rule. */ .kw-footer { background: var(--wp--preset--color--navy-900); color: #B7C6D4; } .kw-footer-inner { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(3rem, 6vw, 4.5rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); grid-template-columns: 1fr; } @media (min-width: 640px) { .kw-footer-inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .kw-footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .kw-footer-logo { display: inline-block; border: 0; } .kw-footer-logo img { display: block; width: 250px; max-width: 100%; height: auto; } .kw-footer-blurb { margin: 1.25rem 0 1.25rem; font-size: 0.9375rem; line-height: 1.65; color: #9FB4C6; max-width: 34ch; } .kw-footer-phone { display: inline-block; font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--gold-300); text-decoration: none; border-bottom: 1px solid transparent; } .kw-footer-phone:hover { color: var(--wp--preset--color--gold-300); border-bottom-color: var(--wp--preset--color--gold-500); } .kw-footer-address { margin: 0.75rem 0 0; font-style: normal; font-size: 0.875rem; line-height: 1.6; color: #9FB4C6; } .kw-footer-heading { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold-500); } .kw-footer-heading-sub { margin-top: 2rem; } .kw-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; } .kw-footer-list a { color: #C6D5E2; text-decoration: none; font-size: 0.9375rem; line-height: 1.45; border-bottom: 1px solid transparent; } .kw-footer-list a:hover { color: var(--wp--preset--color--sand-50); border-bottom-color: var(--wp--preset--color--gold-500); } .kw-footer-list a:focus-visible { outline: 3px solid var(--wp--preset--color--gold-300); outline-offset: 3px; } /* Gold rule separating the site from the legal block. */ .kw-footer-legal { border-top: 2px solid var(--wp--preset--color--gold-500); } .kw-footer-legal-inner { padding-block: clamp(1.5rem, 3vw, 2.25rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); display: grid; gap: 1rem; } @media (min-width: 900px) { .kw-footer-legal-inner { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: start; gap: 3rem; } .kw-footer-copy { text-align: right; } } .kw-footer-disclaimer { margin: 0; font-size: 0.75rem; line-height: 1.7; color: #7F94A8; max-width: 78ch; } .kw-footer-copy { margin: 0; font-size: 0.75rem; line-height: 1.7; color: #7F94A8; } /* ── Primary navigation ──────────────────────────────────────── Services opens a catalogue panel. Built as a disclosure rather than a menubar: the panel holds links, not commands, so Tab order stays natural and Escape always returns to the trigger. */ .kw-nav { position: static; } .kw-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; } /* The mega panel spans the header, so the item must not become its containing block. */ .kw-nav-item { position: static; } .kw-nav-link { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; padding: 0.5rem 0; cursor: pointer; font-family: var(--wp--preset--font-family--text); font-size: 0.9375rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--sand-50); text-decoration: none; } /* ── Menu: hover e página ativa ──────────────────────────────────────── Hover e estado ativo precisam ser distinguíveis um do outro, não só do repouso. O hover desenha um traço que cresce da esquerda; a página ativa já chega com o traço inteiro e mais espesso, e não se move. Quem está na página não vê nada acontecer ao passar o mouse — que é a informação. */ .kw-nav-link { position: relative; } .kw-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--wp--preset--color--gold-500); transform: scaleX(0); transform-origin: left center; transition: transform 180ms var(--kw-ease-out, ease-out); } .kw-nav-link:hover, .kw-nav-link:focus-visible { color: var(--wp--preset--color--gold-300); } .kw-nav-link:hover::after, .kw-nav-link:focus-visible::after { transform: scaleX(1); } .kw-nav-link.is-current { color: var(--wp--preset--color--gold-300); } .kw-nav-link.is-current::after { height: 3px; bottom: -3px; background: var(--wp--preset--color--gold-300); transform: scaleX(1); transition: none; } @media (prefers-reduced-motion: reduce) { .kw-nav-link::after { transition: none; } } .kw-nav-link:focus-visible, .kw-nav-cta-link:focus-visible { outline: 3px solid var(--wp--preset--color--gold-300); outline-offset: 4px; } .kw-nav-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 140ms ease; } .kw-nav-trigger[aria-expanded="true"] .kw-nav-chevron { transform: rotate(-135deg) translate(-3px, -3px); } .kw-nav-trigger[aria-expanded="true"] { color: var(--wp--preset--color--gold-300); } .kw-nav-cta-link, .kw-nav-list .kw-nav-cta-link:link, .kw-nav-list .kw-nav-cta-link:visited { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.125rem; background: var(--wp--preset--color--gold-500); color: var(--wp--preset--color--navy-900); border-radius: 4px; font-family: var(--wp--preset--font-family--text); font-size: 0.9375rem; font-weight: 700; text-decoration: none; } .kw-nav-list .kw-nav-cta-link:hover, .kw-nav-list .kw-nav-cta-link:focus { background: var(--wp--preset--color--gold-300); color: var(--wp--preset--color--navy-900); } /* The panel spans the header, not the trigger. */ .kw-mega { position: absolute; inset-inline: 0; top: 100%; z-index: 40; background: var(--wp--preset--color--sand-50); border-top: 2px solid var(--wp--preset--color--gold-500); box-shadow: 0 24px 48px -24px rgba(8, 20, 34, 0.45); color: var(--wp--preset--color--navy-800); } .kw-mega[hidden] { display: none; } .kw-mega-inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); padding-block: clamp(2rem, 3.5vw, 2.75rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); } @media (min-width: 1000px) { .kw-mega-inner { grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2.4fr); } } .kw-mega-intro { max-width: 34ch; } .kw-mega-intro .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.5rem; } .kw-mega-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.012em; color: var(--wp--preset--color--navy-700); margin: 0 0 0.75rem; } .kw-mega-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--sand-700); margin: 0 0 1rem; } .kw-mega-all { font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--gold-600); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .kw-mega-all:hover { color: var(--wp--preset--color--navy-700); } .kw-mega-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem 1.5rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .kw-mega-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { .kw-mega-grid { grid-template-columns: repeat(3, 1fr); } } .kw-mega-card { display: grid; grid-template-columns: 72px 1fr; gap: 0.875rem; align-items: center; padding: 0.625rem; border-radius: 4px; text-decoration: none; color: inherit; border: 1px solid transparent; } .kw-mega-card:hover { background: #fff; border-color: var(--wp--preset--color--sand-200); color: inherit; } .kw-mega-card:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 2px; } .kw-mega-thumb { display: block; border-radius: 3px; overflow: hidden; background: var(--wp--preset--color--sand-100); } .kw-mega-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .kw-mega-text { display: block; min-width: 0; } .kw-mega-name { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--wp--preset--color--navy-700); margin-bottom: 0.15rem; } .kw-mega-card:hover .kw-mega-name { color: var(--wp--preset--color--gold-600); } .kw-mega-blurb { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--sand-700); } /* Mobile: the panel becomes part of the stacked list. */ .kw-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; } .kw-nav-toggle-bars, .kw-nav-toggle-bars::before, .kw-nav-toggle-bars::after { display: block; width: 24px; height: 2px; background: var(--wp--preset--color--sand-50); position: relative; } .kw-nav-toggle-bars::before, .kw-nav-toggle-bars::after { content: ""; position: absolute; } .kw-nav-toggle-bars::before { top: -7px; } .kw-nav-toggle-bars::after { top: 7px; } @media (max-width: 999px) { .kw-nav-toggle { display: block; } .kw-nav-list { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--wp--preset--color--navy-800); z-index: 40; padding: 1rem max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)) 1.5rem; } .kw-nav.is-open .kw-nav-list { display: flex; } .kw-nav-item { border-bottom: 1px solid rgba(226, 192, 122, 0.18); } .kw-nav-link { width: 100%; justify-content: space-between; padding: 0.875rem 0; } /* Em coluna, um traço embaixo colidiria com o item seguinte. */ .kw-nav-link::after { left: auto; right: auto; width: 3px; top: 0.5rem; bottom: 0.5rem; height: auto; transform: scaleY(0); transform-origin: center top; inset-inline-start: -0.75rem; } .kw-nav-link:hover::after, .kw-nav-link:focus-visible::after { transform: scaleY(1); } .kw-nav-link.is-current::after { transform: scaleY(1); width: 3px; height: auto; bottom: 0.5rem; } .kw-nav-cta-link { margin-top: 1rem; justify-content: center; } .kw-mega { position: static; box-shadow: none; border-top: 0; background: transparent; } .kw-mega-inner { padding: 0 0 1rem; grid-template-columns: 1fr; gap: 1rem; } .kw-mega-intro { display: none; } .kw-mega-name, .kw-mega-title { color: var(--wp--preset--color--sand-50); } .kw-mega-blurb { color: #9FB4C6; } .kw-mega-card:hover { background: rgba(255,255,255,.06); border-color: transparent; } } @media (prefers-reduced-motion: reduce) { .kw-nav-chevron { transition: none; } } /* ── Left alignment ──────────────────────────────────────────── WordPress prints `.is-layout-constrained > :where(...)` with `margin-left:auto` as an inline style block in the head. Even a more specific selector here loses to it in practice, so the override is explicit rather than a specificity arms race. Scope is narrow: prose inside content bands, never components. */ .entry-content > .wp-block-group:not(.kw-card-body):not(.kw-footer-col):not(.kw-service-card) > :is(p, ul, ol, h1, h2, h3, h4, figure) { margin-left: 0 !important; margin-right: 0 !important; } /* Grids inside a band keep the full column width. */ .entry-content > .wp-block-group > .is-layout-grid { margin-left: 0 !important; margin-right: 0 !important; max-width: none; } /* ── Service cover image ─────────────────────────────────────── A cover is an opener, not the page. Capped so the first paragraph is reachable without scrolling past a wall. */ .entry-content .wp-block-group > figure.wp-block-image { max-width: 100%; margin-block: 0 var(--kw-rhythm); } .entry-content .wp-block-group > figure.wp-block-image img { width: 100%; height: clamp(200px, 30vw, 320px); object-fit: cover; object-position: 60% center; border-radius: 4px; display: block; } /* Content bands: background bleeds edge to edge, content sits on the same 1180px gutter as the header, the slider and the footer. The content wrapper drops its own padding on full-width templates, otherwise the percentage in the formula below resolves against the padded box and the column lands 40px short of the gutter. */ .page-template-page-full .entry-content { padding-inline: 0 !important; } .entry-content > .wp-block-group.alignfull { padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)) !important; } /* ── Service page ────────────────────────────────────────────── Own layout, own gutter. Not WordPress's constrained layout, so nothing here depends on beating an inline rule in the cascade. */ .kw-svc-hero { background: var(--wp--preset--color--sand-50); } .kw-svc-hero-inner { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 3.5rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - 1180px) / 2)); max-width: 100%; } @media (min-width: 900px) { .kw-svc-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } .kw-svc-hero .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.5rem; } .kw-svc-hero-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(2rem, 4vw, 2.625rem); line-height: 1.12; letter-spacing: -0.016em; color: var(--wp--preset--color--navy-700); margin: 0 0 0.75rem; text-wrap: balance; } .kw-svc-hero-lede { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; color: var(--wp--preset--color--sand-700); margin: 0; max-width: 46ch; } .kw-svc-hero-media { border-radius: 4px; overflow: hidden; } .kw-svc-hero-media img { display: block; width: 100%; height: clamp(200px, 26vw, 300px); object-fit: cover; object-position: 60% center; } .kw-svc-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - 1180px) / 2)); background: #fff; } @media (min-width: 1000px) { .kw-svc-layout { grid-template-columns: minmax(0, 1fr) 320px; } } /* Everything in the article column is flush left on its own column. post-content renders its own wrapper, so the prose sits one level in. */ .kw-svc-main .entry-content > * { margin-left: 0 !important; margin-right: 0 !important; max-width: var(--wp--custom--measure); } .kw-svc-main .entry-content > :is(h2, h3) { max-width: 32ch; } .kw-svc-main .entry-content > .is-layout-grid { max-width: none; } .kw-svc-main .entry-content > :first-child { margin-top: 0; } .kw-svc-main .entry-content > :is(p, ul, ol) { margin-block: 0 var(--kw-rhythm); } .kw-svc-main .entry-content > :is(h2, h3, h4) { margin-block: calc(var(--kw-rhythm) * 2) var(--kw-rhythm); } .kw-svc-main .entry-content > .kw-eyebrow { margin-block: calc(var(--kw-rhythm) * 2) 0.5rem; color: var(--wp--preset--color--gold-600); } .kw-svc-main .entry-content > .kw-eyebrow + :is(h2, h3) { margin-block-start: 0; } .kw-svc-main .entry-content { padding-inline: 0 !important; } /* Sidebar */ .kw-aside { display: grid; gap: 1.25rem; } @media (min-width: 1000px) { .kw-aside { position: sticky; top: 1.5rem; } } .kw-aside-box { background: var(--wp--preset--color--sand-50); border: 1px solid var(--wp--preset--color--sand-200); border-radius: 4px; padding: 1.25rem; } .kw-aside-title { margin: 0 0 0.875rem; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } .kw-aside-list { list-style: none; margin: 0; padding: 0; display: grid; } .kw-aside-item { border-top: 1px solid var(--wp--preset--color--sand-200); } .kw-aside-item:first-child { border-top: 0; } .kw-aside-item a { display: block; padding: 0.6rem 0 0.6rem 0.75rem; font-size: 0.9375rem; line-height: 1.4; font-weight: 600; color: var(--wp--preset--color--navy-700); text-decoration: none; border-left: 2px solid transparent; } .kw-aside-item a:hover { color: var(--wp--preset--color--gold-600); border-left-color: var(--wp--preset--color--sand-300); } .kw-aside-item a:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: -2px; } /* The page you are on: gold rule, deeper ground, and it is not a live link target. */ .kw-aside-item.is-current { background: #fff; } .kw-aside-item.is-current a { border-left-color: var(--wp--preset--color--gold-500); color: var(--wp--preset--color--navy-900); font-weight: 700; } .kw-aside-item.is-current a::after { content: "You are here"; display: block; margin-top: 0.15rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } .kw-aside-cta { background: var(--wp--preset--color--navy-700); border-radius: 4px; padding: 1.25rem; color: var(--wp--preset--color--sand-50); } .kw-aside-cta .kw-eyebrow { color: var(--wp--preset--color--gold-300); margin: 0 0 0.5rem; } .kw-aside-cta-text { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.6; color: #C6D5E2; } .kw-aside-btn { width: 100%; justify-content: center; text-align: center; min-height: 48px; } .kw-aside-phone { display: block; margin-top: 0.75rem; text-align: center; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--gold-300); text-decoration: none; } .kw-aside-phone:hover { color: var(--wp--preset--color--gold-300); text-decoration: underline; } /* Buttons size from the border box, so a full-width button inside a padded card fits instead of overflowing it. */ .kw-btn, .kw-nav-cta-link, .kw-aside-btn { box-sizing: border-box; } .kw-aside-btn { padding-inline: 1rem; font-size: 0.9375rem; line-height: 1.3; height: auto; min-height: 48px; padding-block: 0.75rem; text-align: center; white-space: normal; } /* Statement and guide bands break out of the constrained content column so their background bleeds and their own gutter formula lands on 1180. */ /* Full bleed, exactly: the band spans the viewport and its own gutter formula places the content. `50% - 50vw` is measured against the real container, so it does not drift when a parent carries padding. */ .entry-content > .kw-statement, .entry-content > .kw-guides, .entry-content > .kw-team, .entry-content > .kw-archive { max-width: none !important; width: 100vw; margin-inline: calc(50% - 50vw) !important; } /* ── Latest guides ───────────────────────────────────────────── Same card system as services: image, one line of context, title, excerpt, one action. */ .kw-guides { background: var(--wp--preset--color--white); } .kw-guides-inner { padding-block: clamp(3rem, 6vw, 4.5rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - 1180px) / 2)); } .kw-guides-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .kw-guides .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.4rem; } .kw-guides-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.012em; color: var(--wp--preset--color--navy-700); margin: 0; } .kw-guides-all { font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--gold-600); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .kw-guides-all:hover { color: var(--wp--preset--color--navy-700); } .kw-guides-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 660px) { .kw-guides-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .kw-guides-grid { grid-template-columns: repeat(3, 1fr); } } .kw-guide-card { display: flex; flex-direction: column; overflow: hidden; background: var(--wp--preset--color--sand-50); border: 1px solid var(--wp--preset--color--sand-200); border-radius: 4px; transition: border-color 120ms ease; } .kw-guide-card:hover { border-color: var(--wp--preset--color--gold-500); } .kw-guide-media { display: block; line-height: 0; background: var(--wp--preset--color--sand-100); } .kw-guide-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .kw-guide-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem; } .kw-guide-cat { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } .kw-guide-title { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--text); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; } .kw-guide-title a { color: var(--wp--preset--color--navy-700); text-decoration: none; } .kw-guide-card:hover .kw-guide-title a { color: var(--wp--preset--color--gold-600); } .kw-guide-excerpt { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--sand-700); } .kw-guide-body .kw-card-cta { margin-top: auto; padding-top: 0; } .kw-guides-more { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; } .kw-guides-head { align-items: flex-end; } @media (prefers-reduced-motion: reduce) { .kw-guide-card { transition: none; } } /* ── Article extras ──────────────────────────────────────────── Articles reuse the service page layout; these are the pieces that only exist on an article. */ .kw-article-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0.875rem 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--sand-500); } .kw-article-reviewed { color: var(--wp--preset--color--gold-600); font-weight: 700; } .kw-article-disclaimer { margin-top: calc(var(--kw-rhythm) * 2) !important; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--sand-200); } .kw-aside-count { float: right; font-variant-numeric: tabular-nums; font-weight: 400; font-size: 0.8125rem; color: var(--wp--preset--color--sand-500); } .kw-tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .kw-tag { display: inline-block; padding: 0.3rem 0.6rem; background: var(--wp--preset--color--sand-100); border: 1px solid var(--wp--preset--color--sand-200); border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--sand-700); text-decoration: none; } .kw-tag:hover { border-color: var(--wp--preset--color--gold-500); color: var(--wp--preset--color--navy-700); } .kw-tag:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 2px; } .kw-aside-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; } .kw-aside-recent li { display: grid; gap: 0.15rem; } .kw-aside-recent a { font-size: 0.875rem; line-height: 1.4; font-weight: 600; color: var(--wp--preset--color--navy-700); text-decoration: none; } .kw-aside-recent a:hover { color: var(--wp--preset--color--gold-600); } .kw-aside-recent time { font-size: 0.75rem; color: var(--wp--preset--color--sand-500); } /* ── Contact ─────────────────────────────────────────────────── Short form as the main column, everything needed to phone or walk in beside it, service area below. */ .kw-contact-hero-inner { padding-block: clamp(2.5rem, 5vw, 3.5rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - 1180px) / 2)); max-width: 100%; } .kw-contact-hero-inner .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.5rem; } .kw-contact-hero-inner .kw-svc-hero-lede { max-width: 54ch; } .kw-contact-box { background: var(--wp--preset--color--sand-50); } .kw-contact-phone { display: block; margin-bottom: 0.5rem; font-family: var(--wp--preset--font-family--display); font-size: 1.875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--navy-700); text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--gold-500); padding-bottom: 0.25rem; } .kw-contact-phone:hover { color: var(--wp--preset--color--gold-600); } .kw-contact-note { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--sand-700); } .kw-contact-list { margin: 1.25rem 0 0; display: grid; gap: 0.875rem; } .kw-contact-list > div { border-top: 1px solid var(--wp--preset--color--sand-200); padding-top: 0.875rem; } .kw-contact-list dt { margin: 0 0 0.2rem; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } .kw-contact-list dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--navy-800); } .kw-contact-urgent { background: var(--wp--preset--color--sand-100); border-color: var(--wp--preset--color--gold-300); } .kw-contact-urgent .kw-eyebrow { color: var(--wp--preset--color--gold-700); margin: 0 0 0.4rem; } .kw-map { background: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); } .kw-map-inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - 1180px) / 2)); } @media (min-width: 900px) { .kw-map-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } .kw-map .kw-eyebrow { color: var(--wp--preset--color--gold-300); margin: 0 0 0.5rem; } .kw-map-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.2; color: var(--wp--preset--color--sand-50); margin: 0 0 0.75rem; } .kw-map-desc { margin: 0; font-size: 1rem; line-height: 1.65; color: #C6D5E2; max-width: 44ch; } .kw-map-frame { border-radius: 4px; overflow: hidden; background: var(--wp--preset--color--navy-800); } .kw-map-frame iframe { display: block; width: 100%; height: clamp(240px, 32vw, 340px); border: 0; filter: saturate(0.75) contrast(1.05); } .kw-map-credit { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #9FB4C6; background: var(--wp--preset--color--navy-800); } .kw-map-credit a { color: var(--wp--preset--color--gold-300); } /* ── Team ────────────────────────────────────────────────────── Portrait anchoring one side, narrative bio and a credentials rail on the other. Alternates side per person so a team of several does not read as a stack of identical cards. */ .kw-team { background: var(--wp--preset--color--sand-50); } .kw-team-inner { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - 1180px) / 2)); display: grid; gap: clamp(3rem, 6vw, 5rem); } .kw-person { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-block-end: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--wp--preset--color--sand-200); } .kw-person:last-child { padding-block-end: 0; border-bottom: 0; } @media (min-width: 900px) { /* Every profile keeps the same column so the credential rails line up down the page. Alternating sides looked deliberate but read as drift. */ .kw-person { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr); } } .kw-person-media { position: sticky; top: 1.5rem; border-radius: 4px; overflow: hidden; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--sand-200); } /* Anchor the crop near the top so a head is never cut off. */ .kw-person-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; } @media (max-width: 899px) { .kw-person-media { position: static; max-width: 280px; } } .kw-person .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.4rem; } .kw-person-name { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.875rem, 3.2vw, 2.375rem); line-height: 1.12; letter-spacing: -0.014em; color: var(--wp--preset--color--navy-700); margin: 0 0 0.75rem; } .kw-person-lede { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--wp--preset--color--navy-800); margin: 0 0 1.5rem; max-width: 46ch; font-weight: 600; } .kw-person-para { margin: 0 0 var(--kw-rhythm); max-width: var(--wp--custom--measure); } .kw-person-facts { margin: 1.75rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--wp--preset--color--sand-200); } .kw-person-facts > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0.15rem 1.5rem; padding-block: 0.75rem; border-bottom: 1px solid var(--wp--preset--color--sand-200); align-items: baseline; } .kw-person-facts dt { margin: 0; padding-top: 0.15rem; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } .kw-person-facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--sand-700); } .kw-person-areas { margin-top: 1.75rem; } .kw-person-areas-title { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } /* ── Intake form ─────────────────────────────────────────────── One styling for the form wherever it appears, instead of CSS pasted into a single page's content. */ .wpcf7 .kw-intake, .kw-intake { max-width: 560px; } .kw-intake .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.75rem; } .kw-intake .kw-field { margin: 0 0 1.125rem; } .kw-intake label { display: block; font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.375rem; color: var(--wp--preset--color--navy-700); } .kw-intake .kw-optional { font-weight: 400; color: var(--wp--preset--color--sand-500); } .kw-intake input[type=text], .kw-intake input[type=tel], .kw-intake input[type=email], .kw-intake select, .kw-intake textarea { width: 100%; min-height: 46px; padding: 0.7rem 0.8rem; border: 1px solid var(--wp--preset--color--sand-300); border-radius: 4px; background: #fff; box-sizing: border-box; font-family: var(--wp--preset--font-family--text); font-size: 1rem; line-height: 1.5; color: var(--wp--preset--color--navy-800); } .kw-intake textarea { min-height: 132px; resize: vertical; } .kw-intake input:focus, .kw-intake select:focus, .kw-intake textarea:focus { outline: none; border-color: var(--wp--preset--color--gold-500); box-shadow: 0 0 0 3px var(--wp--preset--color--gold-100); } .kw-intake .kw-consent { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0 0 1.375rem; font-size: 0.875rem; line-height: 1.55; color: var(--wp--preset--color--sand-700); } .kw-intake .kw-consent input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; margin: 0.15rem 0 0; accent-color: var(--wp--preset--color--navy-700); flex: 0 0 auto; } .kw-intake .kw-consent .wpcf7-list-item { margin: 0; } .kw-intake input[type=submit] { width: 100%; min-height: 48px; border: 0; border-radius: 4px; background: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); font-family: var(--wp--preset--font-family--text); font-weight: 700; font-size: 1rem; cursor: pointer; box-sizing: border-box; } .kw-intake input[type=submit]:hover { background: var(--wp--preset--color--navy-600); } .kw-intake input[type=submit]:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 2px; } .kw-intake .kw-privacy { margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--sand-500); } .kw-intake .wpcf7-not-valid { border-color: var(--wp--preset--color--danger) !important; } .kw-intake .wpcf7-not-valid-tip { display: block; margin-top: 0.3rem; font-size: 0.8125rem; color: var(--wp--preset--color--danger); } .wpcf7 form .wpcf7-response-output { margin: 1.125rem 0 0 !important; padding: 0.75rem 0.9rem !important; border: 0 !important; border-left: 3px solid var(--wp--preset--color--navy-700) !important; background: var(--wp--preset--color--sand-100); font-size: 0.875rem; border-radius: 0 3px 3px 0; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--wp--preset--color--danger) !important; } /* ── Editorial archive ───────────────────────────────────────── Filters, three-column card grid and numbered pagination. Cards reuse the guide card so listings look the same everywhere. */ .kw-archive { background: var(--wp--preset--color--white); } .kw-archive-inner { padding-block: clamp(2.5rem, 5vw, 4rem); padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - 1180px) / 2)); } .kw-filters { display: grid; gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--wp--preset--color--sand-200); } .kw-filter-row { display: grid; gap: 0.625rem; } @media (min-width: 780px) { .kw-filter-row { grid-template-columns: 64px 1fr; align-items: baseline; gap: 1rem; } } .kw-filter-label { margin: 0; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold-600); } .kw-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .kw-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; padding: 0.25rem 0.75rem; background: var(--wp--preset--color--sand-50); border: 1px solid var(--wp--preset--color--sand-200); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--navy-700); text-decoration: none; } .kw-chip:hover { border-color: var(--wp--preset--color--gold-500); color: var(--wp--preset--color--navy-700); } .kw-chip:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 2px; } .kw-chip.is-active { background: var(--wp--preset--color--navy-700); border-color: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); } .kw-chip.is-tag { font-weight: 600; color: var(--wp--preset--color--sand-700); } .kw-chip.is-tag.is-active { color: var(--wp--preset--color--sand-50); } .kw-chip-count { font-variant-numeric: tabular-nums; font-weight: 400; font-size: 0.75rem; color: var(--wp--preset--color--sand-500); } .kw-chip.is-active .kw-chip-count { color: var(--wp--preset--color--gold-300); } .kw-archive-count { margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--wp--preset--color--sand-500); font-variant-numeric: tabular-nums; } .kw-archive-grid { grid-template-columns: 1fr; } @media (min-width: 660px) { .kw-archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .kw-archive-grid { grid-template-columns: repeat(3, 1fr); } } /* Empty state — a blank grid reads as broken. */ .kw-empty { padding: clamp(2rem, 5vw, 3.5rem); background: var(--wp--preset--color--sand-50); border: 1px solid var(--wp--preset--color--sand-200); border-radius: 4px; max-width: 46rem; } .kw-empty .kw-eyebrow { color: var(--wp--preset--color--gold-600); margin: 0 0 0.5rem; } .kw-empty-title { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.2; color: var(--wp--preset--color--navy-700); margin: 0 0 0.75rem; } .kw-empty-text { margin: 0 0 1.25rem; color: var(--wp--preset--color--sand-700); max-width: 52ch; } .kw-empty-actions { margin: 0; } .kw-btn-ghost-dark { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border: 1px solid var(--wp--preset--color--navy-700); border-radius: 4px; color: var(--wp--preset--color--navy-700); font-weight: 700; text-decoration: none; box-sizing: border-box; } .kw-btn-ghost-dark:hover { background: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); } /* Guide cards reuse the service card shell; only the meta line differs. */ .kw-guide-grid .kw-service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .kw-guide-grid .kw-guide-cat { margin: 0 0 0.35rem !important; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .kw-guide-grid .kw-card-body h3 { font-family: var(--wp--preset--font-family--text); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; margin: 0 0 0.35rem !important; } .kw-guide-grid .kw-card-body h3 a { color: var(--wp--preset--color--navy-700); text-decoration: none; } .kw-guide-grid .kw-service-card:hover .kw-card-body h3 a { color: var(--wp--preset--color--gold-600); } /* ── Home guides loop ────────────────────────────────────────── Core query loop instead of a custom pattern: on this install a custom pattern in this position renders empty, while core blocks render reliably. Styled to match the Insights cards exactly. */ .kw-guide-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 660px) { .kw-guide-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .kw-guide-cards { grid-template-columns: repeat(3, 1fr); } } .kw-guide-cards > .wp-block-post { display: flex; flex-direction: column; overflow: hidden; background: var(--wp--preset--color--sand-50); border: 1px solid var(--wp--preset--color--sand-200); border-radius: 4px; transition: border-color 120ms ease; margin: 0; } .kw-guide-cards > .wp-block-post:hover { border-color: var(--wp--preset--color--gold-500); } .kw-loop-media { margin: 0 !important; line-height: 0; background: var(--wp--preset--color--sand-100); } .kw-loop-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0; } .kw-loop-body { display: flex; flex-direction: column; flex: 1 1 auto; } .kw-loop-cat { margin: 0 0 0.35rem !important; font-family: var(--wp--preset--font-family--text); font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .kw-loop-cat a { text-decoration: none; color: inherit; } .kw-loop-title { margin: 0 0 0.35rem !important; font-family: var(--wp--preset--font-family--text) !important; font-size: 1.0625rem !important; font-weight: 700; line-height: 1.35; letter-spacing: 0; } .kw-loop-title a { color: var(--wp--preset--color--navy-700); text-decoration: none; } .kw-guide-cards > .wp-block-post:hover .kw-loop-title a { color: var(--wp--preset--color--gold-600); } .kw-loop-excerpt { margin: 0 !important; font-size: 0.9375rem; line-height: 1.6; } .kw-loop-excerpt .wp-block-post-excerpt__more-text { display: none; } @media (prefers-reduced-motion: reduce) { .kw-guide-cards > .wp-block-post { transition: none; } } /* CTA do card e botão da seção, alinhados aos cards de Insights */ .kw-loop-cta { display: inline-block; margin-top: auto; padding-top: 0.75rem; font-family: var(--wp--preset--font-family--text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--wp--preset--color--gold-600); text-decoration: none; } .kw-guide-cards > .wp-block-post:hover .kw-loop-cta { text-decoration: underline; text-underline-offset: 3px; } .kw-guides-cta .wp-block-button__link { background: transparent; border: 1px solid var(--wp--preset--color--navy-700); border-radius: 2px; padding: 0.85rem 1.75rem; font-family: var(--wp--preset--font-family--text); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy-700); transition: background-color 120ms ease, color 120ms ease; } .kw-guides-cta .wp-block-button__link:hover, .kw-guides-cta .wp-block-button__link:focus-visible { background: var(--wp--preset--color--navy-700); color: #fff; } /* ── Abertura das páginas full-bleed ─────────────────────────────────── O template page-full existe para que faixas e mapas sangrem de borda a borda. O texto corrido do topo herdava essa largura total e encostava no header e nas bordas. Só o texto ganha goteira; as seções com classe própria continuam sangrando. */ @media (max-width: 1220px) { .page-template-page-full .entry-content > p, .page-template-page-full .entry-content > h1, .page-template-page-full .entry-content > h2, .page-template-page-full .entry-content > h3, .page-template-page-full .entry-content > ul, .page-template-page-full .entry-content > ol, .page-template-page-full .entry-content > .wp-block-buttons { box-sizing: border-box; width: 100%; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } } .page-template-page-full .entry-content { padding-block-start: var(--kw-open-space); } .page-template-page-full .entry-content > *:first-child { margin-top: 0 !important; } .page-template-page-full .entry-content > p:last-of-type { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* ── Paginação ───────────────────────────────────────────────────────── Uma linha só, alturas iguais e alvos de toque de 44px. Em telas estreitas os números dariam três linhas desalinhadas, então cedem lugar ao indicador "2 de 6" — o padrão de arquivo que o iOS já ensina. */ .kw-pagination { margin-top: clamp(2rem, 4vw, 3rem); } .kw-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.375rem; /* Sem isto o contêiner ganha altura de linha própria e o primeiro item fica preso ao topo enquanto os demais centram. */ line-height: 1; } .kw-pagination li { display: flex; align-items: center; align-self: center; margin: 0; } /* Quinto e último !important documentado do tema: o block gap do WordPress aplica margin-block-start a todo irmão subsequente, o que empurrava todos os itens menos o primeiro 9.6px para baixo. A regra de origem vence por ordem e especificidade, então só o !important a desarma. */ .kw-pagination ul > li, .kw-pagination ul > li + li { margin-block: 0 !important; } .kw-pagination .kw-page { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.75rem; border: 1px solid var(--wp--preset--color--sand-200); border-radius: 4px; font-family: var(--wp--preset--font-family--text); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--wp--preset--color--navy-700); text-decoration: none; background: var(--wp--preset--color--white); white-space: nowrap; transition: border-color 120ms ease, background-color 120ms ease; } .kw-pagination .prev, .kw-pagination .next { gap: 0.375rem; } .kw-pagination a.kw-page:hover { border-color: var(--wp--preset--color--gold-500); } .kw-pagination a.kw-page:focus-visible { outline: 3px solid var(--wp--preset--color--gold-500); outline-offset: 2px; } .kw-pagination .kw-page.current { background: var(--wp--preset--color--navy-700); border-color: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--sand-50); } .kw-pagination .kw-page.dots { border-color: transparent; background: none; min-width: 20px; padding: 0; color: var(--wp--preset--color--sand-700); } .kw-page-counter { display: none; } .kw-pagination-status { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 46px; padding: 0 0.75rem; font-family: var(--wp--preset--font-family--text); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--navy-700); white-space: nowrap; } @media (max-width: 620px) { .kw-pagination ul { justify-content: space-between; gap: 0.5rem; } .kw-pagination li.kw-page-number { display: none; } .kw-pagination li.kw-page-counter { display: flex; } .kw-pagination .prev, .kw-pagination .next { flex: 0 0 auto; } } @media (prefers-reduced-motion: reduce) { .kw-pagination .kw-page { transition: none; } } @media (max-width: 620px) { .kw-slider-controls { gap: 0.75rem; flex-wrap: nowrap; } .kw-slider-buttons { gap: 0.375rem; } .kw-slider-btn { width: 40px; height: 40px; } .kw-slider-dots { gap: 0.3125rem; } .kw-slider-dot { flex: 1 1 8px; max-width: 22px; } } @media (prefers-reduced-motion: reduce) { .kw-slider-btn, .kw-slider-dot { transition: none; } .kw-slider-btn:active { transform: none; } } /* ══ Movimento ═════════════════════════════════════════════════════════ Duas peças, e nada além disso. O visual em repouso é idêntico ao que já estava: nenhuma cor, medida ou tipografia muda aqui. Curva única, forte o bastante para não parecer o ease-out nativo: cubic-bezier(0.23, 1, 0.32, 1). Só transform e opacity — ambos vão para a GPU e não disparam layout nem paint. 1. Corpo do slide. O carrossel troca sozinho a cada 7s, então isto é alto para o padrão de UI: fica no limiar do imperceptível, 260ms e 10px, sem stagger. Transição e não keyframes, porque o leitor pode disparar prev/next duas vezes em um segundo e uma transição retoma do valor atual em vez de recomeçar do zero. 2. Entrada das seções. Animação guiada pela rolagem (`view()`), que é CSS puro: zero JavaScript, roda fora da main thread e, onde o navegador não suporta, simplesmente não acontece — o conteúdo nasce visível. Nunca aplicada a texto de artigo, que é para ler, não para assistir. */ :root { --kw-ease-out: cubic-bezier(0.23, 1, 0.32, 1); } /* ── 1. Corpo do slide ativo ─────────────────────────────────────────── */ .kw-slide .kw-slide-body { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 260ms var(--kw-ease-out), transform 260ms var(--kw-ease-out); } .kw-slide[aria-hidden="false"] .kw-slide-body, .kw-slide:not([aria-hidden]) .kw-slide-body { opacity: 1; transform: translate3d(0, 0, 0); } /* Sem JavaScript nenhum slide recebe aria-hidden — o seletor acima garante que o texto apareça de todo modo. */ /* ── 2. Entrada das seções ao entrar em quadro ───────────────────────── */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes kw-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .kw-service-grid > .kw-service-card, .kw-guides-grid > li, .kw-archive-grid > li, .kw-guide-cards > .wp-block-post, .kw-statement-lead, .kw-fact, .kw-person { animation: kw-rise linear both; animation-timeline: view(); /* Termina assim que o elemento entra de fato em quadro. O rastreador do Google renderiza CSS: quanto antes a opacidade chega a 1, menor o risco de o conteúdo ser lido como oculto. O texto está no HTML de saída de qualquer modo — o que importa para os rastreadores de IA, que não executam CSS. */ animation-range: entry 0% entry 70%; } /* As três figuras da faixa escura entram em cascata — a ordem é a ordem de leitura, não decoração. */ .kw-statement-facts .kw-fact:nth-child(2) { animation-range: entry 6% entry 78%; } .kw-statement-facts .kw-fact:nth-child(3) { animation-range: entry 12% entry 86%; } } } @media (prefers-reduced-motion: reduce) { /* Movimento some; o esmaecimento fica, porque ajuda a perceber a troca de slide sem deslocar nada. */ .kw-slide .kw-slide-body { transform: none; transition: opacity 200ms ease; } .kw-slide[aria-hidden="false"] .kw-slide-body { transform: none; } } /* ══ Abertura de página ════════════════════════════════════════════════ Cada template abria de um jeito: o respiro do header ia de 58 a 199px e o título de 28 a 42px, e uma página saía da goteira. Um tratamento só, em tokens, para que qualquer template novo já nasça igual. Respiro: clamp(2.5rem, 5vw, 4rem) → 40px no celular, 64px no desktop Título: clamp(1.875rem, 3.2vw, 2.375rem) → 30px a 38px (heading-1) Goteira: a mesma fórmula do resto do site */ :root { --kw-open-space: clamp(2.5rem, 5vw, 4rem); } /* O herói de serviço e de artigo é uma grade de duas colunas; centrada, a coluna de texto descia com a altura da imagem e a abertura variava de página para página. Ancorada no topo, o título nasce sempre na mesma linha. */ .kw-svc-hero-inner { padding-block-start: var(--kw-open-space); align-items: start; } .kw-contact-hero-inner { padding-block-start: var(--kw-open-space) !important; } /* O eyebrow é o primeiro elemento visível de quase toda página. Sem uma margem única, cada template deslocava o título alguns pixels. */ #kw-main .kw-eyebrow:first-child, #kw-main .kw-svc-hero-copy > .kw-eyebrow:first-child, .page-template-page-full .entry-content > .kw-eyebrow:first-child { margin-top: 0 !important; margin-bottom: 0.5rem !important; } /* O herói de artigo lista a meta antes do eyebrow; ela recebe o mesmo respiro para que a abertura comece na mesma linha das demais páginas. */ .kw-svc-hero-copy > :first-child { margin-top: 0 !important; } /* O herói de artigo já traz o respiro de abertura no próprio padding; o grupo que o envolve não pode somar o seu, senão o topo dobra. */ .single #kw-main > .wp-block-group:first-child { padding-block-start: 0 !important; } /* A página do formulário traz um