/** * VGTME — database-driven page sections. * * Carries the component rules from the approved static build (ProjectHTML) * where vgtme.css either disagrees or has no rule at all. * * Everything is scoped under `.vgt-sections`, which the renderer wraps around * its output. That is deliberate: * * - The two stylesheets are NOT merged. vgtme.css keeps its own definitions * for the homepage and the templates that have not been migrated. * - The wrapper adds one class of specificity, so these rules win over * vgtme.css without !important and without depending on load order — the * cascade-order trap that previously broke .hwrap and .btn-outline. * - Nothing here can leak onto a page that does not render sections. * * Divergences this file corrects (approved static build -> vgtme.css), each * one verified against computed styles in a real browser rather than by * reading the rules: * .pad padding:100px 0 vs 110px 0 * .sec-title clamp(…,2.7rem) vs clamp(…,2.8rem) * .prose max-width:none, no margin vs max-width:880px, 24px * .prose p margin-bottom:18px vs line-height:1.85;margin-bottom:1.1em * .check-list repeat(3,1fr) 14px/34px vs auto-fit minmax(230px) 12px/28px * .check-list li ::before 19px, ::after 6x3 vs 20px, 8x5 * .svc-card ul li .93rem, margin-bottom:8px vs .9rem, flex gap * .cta-inner no ::after circle vs decorative circle * * CAUTION on .svc-lead. Both stylesheets carry an identical * `.svc-card p{font-size:.94rem;margin-bottom:16px}` which OUTRANKS the * single-class `.svc-lead` rule, so in the approved build .svc-lead only ever * contributes its line-height. Scoping it here adds a class and would flip * that cascade, silently making the lead text bigger than the approved design. * Only the line-height is restated below, deliberately. * * Breakpoints follow the static build (992 / 680), not vgtme.css (992 / 880). */ /* ---------- WPBakery scaffolding ---------- * WPBakery always nests a top-level element inside * vc_row > vc_column > vc_column-inner > wpb_wrapper. Those wrappers carry * negative row margins, column widths and bottom margins, which would cage our * full-bleed sections and break the soft-background bands. * * display:contents removes the boxes from layout entirely while leaving their * children in place, so each [vgt_*] section lays out as though it were a * direct child of .vgt-sections. This is scoped, so ordinary WPBakery rows * elsewhere on the site are untouched. */ .vgt-sections .vc_row, .vgt-sections .vc_column_container, .vgt-sections .vc_column-inner, .vgt-sections .wpb_wrapper, .vgt-sections .wpb_text_column, .vgt-sections .wpb_content_element { display: contents; } /* ---------- scoped reset ---------- * pages.css opens with `*{margin:0;padding:0;box-sizing:border-box}`. * vgtme.css has no universal reset, and the theme additionally loads a * Bootstrap-derived vendors bundle whose reboot sets `p{margin-bottom:1rem}` * and `h1..h6{margin-bottom:.5rem}`. That is where the trailing 16px under * every .wc, .pstep and .faq-a paragraph came from. * * Specificity is the whole point of how this is written: * - the scope is wrapped in :where(), contributing nothing, so each rule * computes to (0,0,1) — element level, exactly like Bootstrap's reboot. * Equal specificity means load order decides, and this file is enqueued * after the vendor bundle, so it wins. * - staying at (0,0,1) means every class-based rule still beats it: * .sec-title's 14px, .svc-card p's 16px, .prose p's 18px are all untouched. * A plain `.vgt-sections p` (0,1,0) would have silently flattened .sec-title, * and a `*` reset (0,0,0) loses to Bootstrap entirely. */ :where(.vgt-sections) p, :where(.vgt-sections) ul, :where(.vgt-sections) ol, :where(.vgt-sections) li, :where(.vgt-sections) figure, :where(.vgt-sections) blockquote, :where(.vgt-sections) h1, :where(.vgt-sections) h2, :where(.vgt-sections) h3, :where(.vgt-sections) h4, :where(.vgt-sections) h5, :where(.vgt-sections) h6 { margin: 0; padding: 0; } /* ---------- section rhythm ---------- */ .vgt-sections .pad { padding: 100px 0; } .vgt-sections .sec-title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); } /* Global heading leading differs between the two stylesheets: vgtme.css sets 1.12, the approved build 1.14. */ .vgt-sections h1, .vgt-sections h2, .vgt-sections h3, .vgt-sections h4 { line-height: 1.14; } /* ---------- prose ---------- */ .vgt-sections .prose { max-width: none; margin-top: 0; } .vgt-sections .prose p { color: var(--grey); font-size: 1.02rem; margin-bottom: 18px; line-height: 1.7; } .vgt-sections .prose p:last-child { margin-bottom: 0; } /* ---------- check list ---------- */ .vgt-sections .check-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 34px; } .vgt-sections .check-list li { position: relative; padding-left: 30px; color: var(--ink); font-weight: 600; font-size: .96rem; /* vgtme.css sets font-family:var(--ff-head) here; the approved build declares none and inherits the body face. Space Grotesk is wider, so the longer French entries wrapped to a second line in WordPress and not in the approved build — invisible in English, a 26px shift in French. */ font-family: var(--ff-body); } .vgt-sections .check-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold-soft); } .vgt-sections .check-list li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 3px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); } /* ---------- service cards ---------- */ /* Only line-height — see the cascade note in the file header. Font size, colour and margin come from `.svc-card p`, which both stylesheets share. */ .vgt-sections .svc-lead { line-height: 1.6; } .vgt-sections .svc-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: block; } .vgt-sections .svc-card ul li { position: relative; padding-left: 22px; color: var(--grey); font-size: .93rem; margin-bottom: 8px; line-height: 1.5; } .vgt-sections .svc-card ul li:last-child { margin-bottom: 0; } .vgt-sections .svc-card ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } /* ---------- FAQ ---------- * The theme loads a Bootstrap-derived vendors bundle whose reboot gives * buttons `line-height:inherit`; the static build has no such reset, so the * accordion button keeps the UA default. Matters once a question wraps. */ .vgt-sections .faq-q { line-height: normal; } /* ---------- CTA band ---------- * The renderer already emits `.cta-inner.cta-center`, which switches vgtme.css * from its homepage side-by-side layout to the centred stacked one. Two details * still differ from the approved build and are corrected here: * - vgtme.css decorates .cta-inner with a large translucent circle via * ::after. That belongs to the homepage band; interior pages have none. * - its heading clamps to 2.5rem; the approved build clamps to 2.4rem. */ .vgt-sections .cta-inner::after { content: none; } .vgt-sections .cta-inner h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); } /* ---------- buttons ---------- * The vendors bundle ships Bootstrap's own `.btn`, which sets line-height:1.5. * vgtme.css redefines `.btn` but never declares a line-height, so Bootstrap's * value survives and every button renders ~3px shorter than the approved * build, where `.btn` simply inherits body's 1.7. * letter-spacing is vgtme's own addition; the approved build has none. */ .vgt-sections .btn { line-height: 1.7; letter-spacing: normal; } /* ---------- responsive (static-build breakpoints) ---------- */ @media (max-width: 992px) { .vgt-sections .check-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .vgt-sections .check-list { grid-template-columns: 1fr; } } @media (max-width: 560px) { /* Restores the mobile section rhythm that the desktop override above would otherwise win against — media queries add no specificity, and this file loads after vgtme.css. The approved build uses 72px here; vgtme.css 74px. */ .vgt-sections .pad { padding: 72px 0; } } /* ========================================================= * .note-strip and .dd-grid * * NOT ported from pages.css — these rules are not in it. Each approved page * carries a page-level