/* Shared styles for the chardon-group templates — loaded only on the 3 Chardon Group pages (see class-template-loader.php), alongside whatever theme is active. Never touches anything outside these pages: no site-wide reset, no header/footer styling — those come from the active theme via get_header()/get_footer(). */ /* The active theme's own page template usually reserves a narrower content column for a sidebar (e.g. a 70/30 split) even when nothing renders in it. Our templates never call get_sidebar(), so break .chardon-group- content out to the full viewport width regardless of whatever column width the surrounding theme markup would otherwise impose — each section inside it still centers at max-width:1240px via its own CSS, matching the design exactly. overflow-x:hidden on (scoped to our pages via the body_class() marker) absorbs the negative-margin breakout without introducing a horizontal scrollbar; it only affects the X axis, so it does not break the position:sticky panels used by Diferenciais/FAQ. */ body.chardon-group-page { overflow-x: hidden; } /* body.chardon-group-page .chardon-group-content { position: relative; left: 50%; right: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; } */ body.chardon-group-page .chardon-group-content a { text-decoration: none !important; } /* Defensive: hide any sidebar the active theme's header.php/footer.php renders regardless of page template (uncommon, but there's no way to prevent it from inside our own template file if a theme does this). */ body.chardon-group-page #secondary, body.chardon-group-page .widget-area, body.chardon-group-page aside[id*="sidebar"], body.chardon-group-page aside[class*="sidebar"], body.chardon-group-page .sidebar { display: none !important; } /* Scoped box-sizing + image reset — several blocks (Hero's split layout, Institucional's grid, the configurador's card) assume border-box math for their width/padding calculations. Scoped to our own block roots only, so it never affects the rest of the theme's page. */ .chardon-hero, .chardon-hero *, .chardon-inst, .chardon-inst *, .chardon-diferenciais, .chardon-diferenciais *, .chardon-cta-downloads, .chardon-cta-downloads *, .chardon-faq, .chardon-faq *, .chardon-configurador, .chardon-configurador *, .chardon-downloads-grid, .chardon-downloads-grid *, .chardon-download-form, .chardon-download-form * { box-sizing: border-box; } .chardon-hero img, .chardon-inst img, .chardon-diferenciais img, .chardon-cta-downloads img, .chardon-faq img, .chardon-configurador img, .chardon-downloads-grid img, .chardon-download-form img { max-width: 100%; display: block; } /* Many components here set an explicit `display` (.chardon-btn, the configurador's nav/summary panels, etc.). A plain "[hidden]{display:none}" (the browser's own default rule) ties in specificity with a bare class rule and can lose depending on stylesheet load order — so JS setting `el.hidden = true` (configurador/download-form view.js) silently fails to actually hide the element. This one !important rule is the standard, deliberate fix for that well-known gotcha and must stay ahead of every component rule below. */ [hidden] { display: none !important; } /* Shared button component, used by several blocks. */ .chardon-btn { display: inline-flex; align-items: center; gap: 9px; padding: 16px 30px; border-radius: 5px; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-family: var(--chardon-font-body); transition: background 0.15s ease; } /* Compound ".chardon-btn.chardon-btn--primary" (2 classes) rather than a bare ".chardon-btn--primary" (1 class) so this reliably outranks the active theme's own link/button styles regardless of stylesheet load order — every real button in the markup already carries both classes. */ .chardon-btn.chardon-btn--primary { background: var(--chardon-blue); color: #fff; box-shadow: 0 10px 24px rgba(44, 60, 123, 0.28); } .chardon-btn.chardon-btn--primary:hover { background: var(--chardon-blue-hover); color: #fff; } .chardon-btn.chardon-btn--secondary { background: #fff; color: var(--chardon-navy); border: 1.5px solid #c3cfdc; box-shadow: none; } .chardon-btn.chardon-btn--secondary:hover { border-color: var(--chardon-navy); background: var(--chardon-bg-gray); color: var(--chardon-navy); } .chardon-btn[disabled], .chardon-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* Spec pill badges (hero). */ .chardon-badge-pill { align-items: center; gap: 7px; background: #fff; border: 1px solid var(--chardon-card-border); color: #1f2d3d; font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: 40px; } /* Small eyebrow/kicker label used above most section headings. */ .chardon-kicker { align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--chardon-blue); margin-bottom: 16px; text-transform: uppercase; max-width: 1240px; margin: 0 auto; } .chardon-kicker--dash::before { content: ""; width: 26px; height: 2px; background: var(--chardon-blue); display: inline-block; } /* Shared form-row component — used by both the Download Form block and the configurador block's step 8 contact fields. Lives here (not in either block's own stylesheet) because each block's CSS only loads when that specific block is present on the page; defining it in just one block's bundle left the other block's fields with zero styling whenever it appeared alone. */ .chardon-form-row { display: flex; flex-direction: column; gap: 7px; } .chardon-form-row span { font-size: 13px; font-weight: 600; color: var(--chardon-text-secondary); } .chardon-form-row input, .chardon-form-row textarea { width: 100%; padding: 13px 16px; font-size: 15px; border: 1.5px solid var(--chardon-border-input); border-radius: 8px; outline: none; color: var(--chardon-text); font-family: inherit; box-sizing: border-box; } .chardon-form-row input:focus, .chardon-form-row textarea:focus { border-color: var(--chardon-blue); } .chardon-form-row textarea { resize: vertical; } .chardon-form-row--checkbox { flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 2px; } .chardon-form-row--checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--chardon-blue); cursor: pointer; } .chardon-form-row--checkbox span { font-size: 13px; line-height: 1.5; color: var(--chardon-text-muted); font-weight: 400; } .chardon-form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 782px) { .chardon-form-row-grid { grid-template-columns: 1fr; } }