/* * theme.css — MARKED EXCEPTIONS ONLY. * * Everything a block can express (colour, type, spacing, border, radius, shadow, alignment) * lives on the block or in theme.json. This file carries only the three things that cannot: * 1. the full-bleed block-gap flush (Gutenberg #51242) * 2. RESPONSIVE TIERS — theme.json has no breakpoints, and this source is STEPPED, not fluid * (measured: display 80 -> 50 -> 44.8px at 991/767; container 1290 -> 700px at 991; * section rhythm 120 -> 100 -> 90 -> 75px at 991/767/479). A clamp() cannot reproduce a * 3-step scale: interpolating 2.8rem@390 -> 5rem@1440 gives 57px at 768 where the source * is 50px, which the match gate reads as a HIGH delta. So the steps are transcribed here, * verbatim from the source stylesheet. validate-blocks rule 11 exempts @media for exactly * this reason. * 3. decoration/behaviour with no block equivalent — each marked `css-allow: `. */ /* ---------- 1. full-bleed sections sit flush (Gutenberg #51242) ---------- */ body .wp-block-template-part, main, main > .wp-block-group.has-background, main > .wp-block-group.alignfull { margin-top: 0; margin-block-start: 0; } /* ---------- 2. responsive tiers (transcribed from the source's own @media rules) ---------- */ @media screen and (max-width: 991px) { :root { --wp--preset--font-size--display: 3.125rem; --wp--custom--line-height--display: 3.711rem; } /* source: .main-container{max-width:700px} — the content column narrows below the wide layout */ .wp-site-blocks .is-layout-constrained > :not(.alignwide):not(.alignfull) { max-width: 700px; } } @media screen and (max-width: 767px) { :root { --wp--preset--font-size--display: 2.8rem; --wp--custom--line-height--display: 3.6rem; --wp--preset--font-size--heading-1: 2.4rem; --wp--custom--line-height--heading-1: 3.3rem; --wp--preset--font-size--heading-2: 1.9rem; --wp--custom--line-height--heading-2: 2.875rem; --wp--preset--font-size--heading-3: 1.5rem; --wp--custom--line-height--heading-3: 2.6rem; --wp--preset--font-size--heading-4: 1.4rem; --wp--preset--font-size--lead: 1.1rem; --wp--custom--line-height--lead: 1.9rem; /* source: .main-container padding 30px -> 20px */ --wp--custom--container--pad: 20px; } } @media screen and (max-width: 479px) { :root { --wp--preset--font-size--heading-1: 2.2rem; --wp--custom--line-height--heading-1: 3rem; } } /* ---------- 3. decoration + behaviour with no block equivalent ---------- */ /* css-allow: position:sticky has no block attribute (block `position` support is sticky-only for template parts). The source pins the values intro column while the card column scrolls past. Measured: .values-text-wrapper{position:sticky;top:0}. */ .values-text-wrapper { position: sticky; top: 0; } /* css-allow: the source's testimonial rail is a fixed 390px mask with overflow VISIBLE, so the next card bleeds past the right edge. No block expresses "clip height but not width". */ .testimonial-rail { overflow: visible; } /* css-allow: decorative background circle drawn with a pseudo-element (no block, purely ornamental) */ .values-section-bg::before, .testimonial-section-bg::before { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } /* css-allow: :hover state — block supports cannot express a hover swap of two stacked icons */ .play-icon-black { opacity: 0; } .play-btn:hover .play-icon { opacity: 0; } .play-btn:hover .play-icon-black { opacity: 1; } /* css-allow: the source's social marks are 44x43 OUTLINED CIRCLES drawn inside the SVG itself. core/social-links has fixed size presets (normal = 24px) and no border support, so the mark geometry is not block-expressible. Measured: 44x43, 1px ring, transparent fill, white glyph. */ .social-links-wrapper .wp-social-link { width: 44px; height: 43px; border: 1px solid currentColor; border-radius: 50%; background-color: transparent; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; } .social-links-wrapper .wp-social-link svg { width: 18px; height: 18px; } /* css-allow: MAX-WIDTH on a flex child has no block attribute. layout.flexSize sets a FIXED width, which would overflow at viewports narrower than the cap; the source uses width:100%;max-width:N so the element shrinks. Values measured off the source stylesheet. */ .intro-text-wrapper { width: 100%; max-width: 555px; } .cta-heading { max-width: 370px; } .cta-btn-wrapper { max-width: 440px; } /* css-allow: object-position + absolute positioning. core/image expresses width/height/scale (object-fit) but not object-position, and block `position` support covers sticky only. */ .cta-image img { object-position: 50% 100%; } .cta-decorative { position: absolute; z-index: -1; top: 0; right: -140px; width: 600px; } .cta-decorative img { object-fit: contain; } /* css-allow: CSS multi-column. The source flows six checkpoints into TWO columns with column-count:2 (order runs 1-2-3 down the first column, 4-5-6 down the second). A flex-wrap grid would reorder them 1-2 / 3-4 / 5-6, and no block expresses column-count. Measured: .manage-points-wrapper{column-count:2;column-gap:70px;margin:32px 0 22px}. */ .manage-points-wrapper { column-count: 2; column-gap: 70px; display: block; } .manage-points-wrapper > * { break-inside: avoid; } /* css-allow: more max-widths on flex children (see the note above) — measured off the source. */ .manage-text-wrapper { width: 100%; max-width: 595px; } .why-us-image-wrapper { width: 100%; max-width: 600px; } .why-us-text-wrapper { width: 100%; max-width: 530px; } /* css-allow: the auto-centring only exists to pair with the max-width above — a constrained layout cannot supply it here because the element is a flex CHILD, not a layout wrapper. */ .values-container { width: 100%; max-width: 1080px; margin-inline: auto; } .values-blocks-container { width: 100%; max-width: 525px; flex: none; } .values-testimonial-wrapper { width: 100%; max-width: 255px; } /* css-allow: core/accordion bakes a "+" glyph into its save() output, so the toggle icon cannot be swapped for a block. The source uses a chevron image; hide core's glyph and draw the source's. */ .why-us-accordion-wrapper .wp-block-accordion-heading__toggle-icon { font-size: 0; width: 14px; height: 8px; background: url("../images/6471b3b9cff90af9f0866956_Accordion_20arrow.svg") no-repeat center/contain; } /* css-allow: bridging core's own class. core/accordion's toggle