.gradon-hero-block { width: 100%; margin: 0 auto; } /* Frontend full-width break-out. PHP render always adds .alignfull. */ .wp-block-gradon-hero.alignfull, .gradon-hero-block.alignfull { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0; } /* Frontend wide break-out — same centering trick, capped at --wide-width. min(…, 100vw) keeps it responsive: at narrow viewports it falls back to 100vw so the block never overflows horizontally. */ .wp-block-gradon-hero.alignwide, .gradon-hero-block.alignwide { width: min(var(--wide-width), 100vw); position: relative; left: 50%; margin-left: calc(min(var(--wide-width), 100vw) / -2); margin-right: calc(min(var(--wide-width), 100vw) / -2); } /* ── Editor override ────────────────────────────────────────────────────────── Step 1 — Reset the frontend 100vw breakout on the inner block element so it fills whatever Gutenberg-managed wrapper is provided for the alignment. .editor-styles-wrapper is on the body in both WP 5.x and the WP 6.x iframe. .is-root-container is the WP 6.x block-list container. !important overrides any conflicting theme editor styles at the same level. */ .editor-styles-wrapper .wp-block-gradon-hero.alignfull, .editor-styles-wrapper .gradon-hero-block.alignfull, .editor-styles-wrapper .wp-block-gradon-hero.alignwide, .editor-styles-wrapper .gradon-hero-block.alignwide, .is-root-container .wp-block-gradon-hero.alignfull, .is-root-container .gradon-hero-block.alignfull, .is-root-container .wp-block-gradon-hero.alignwide, .is-root-container .gradon-hero-block.alignwide { width: 100% !important; max-width: none !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; position: relative !important; transform: none !important; } /* Step 1b — Override the theme's _content.scss rule that caps non-[data-align= "full"] direct children of .is-root-container at ~780px per breakpoint. In this WP/Gutenberg version the data-align="full" attribute the theme checks for isn't present on our block's wrapper, so :not([data-align="full"]) matches it too and wrongly constrains it. We remove the cap regardless of whether that attribute ends up present, by targeting our block directly and via :has() for the case where Gutenberg adds an extra wrapper element. */ .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block-gradon-hero, .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > [data-type="gradon/hero"], .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > *:has(> .wp-block-gradon-hero), .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > *:has(> .gradon-hero-block) { max-width: none !important; } /* Step 2 — Force the outer Gutenberg block wrapper to the correct canvas width in the WP 6.x iframed editor. Inside the iframe, 100vw = full editor canvas (no admin sidebar), so the same breakout trick used on the frontend works. .block-editor-iframe__body only exists on the iframe , so these rules are naturally scoped to WP 6.x and never fire in WP 5.x or on the frontend. */ .block-editor-iframe__body .block-editor-block-list__block[data-type="gradon/hero"][data-align="full"] { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .block-editor-iframe__body .block-editor-block-list__block[data-type="gradon/hero"][data-align="wide"] { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: min(100vw, var(--wp--style--global--wide-size, var(--wide-width))) !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .gradon-hero-image { position: relative; width: 100%; min-height: 70vh; background-color: #1a1a1a; overflow: hidden; } /* The background image (and its zoom transform) lives on its own layer, separate from .gradon-hero-image's children (overlays, heading, text, buttons) — otherwise a zoom transform on the container would also scale and reposition the hero's content. */ .gradon-hero-image::before { content: ""; position: absolute; inset: 0; background-image: var(--gradon-bg-image, none); background-attachment: fixed; background-position: var(--gradon-bg-position, bottom center); background-size: cover; background-repeat: no-repeat; transform-origin: var(--gradon-bg-position, bottom center); transform: var(--gradon-bg-transform, none); } /* iOS Safari computes `background-size: cover` for a `background-attachment: fixed` layer against the visual viewport instead of the element's own box, which is what produces the heavily zoomed-in/blurry crop reported there. `-webkit-touch-callout` is only ever recognized on iOS (every browser there is WebKit-based), so this scopes the fallback to iOS specifically without touching the parallax effect on desktop/Android. */ @supports (-webkit-touch-callout: none) { .gradon-hero-image::before { background-attachment: scroll; } } /* ── Overlays ──────────────────────────────────────────────────────────────── */ .gradon-hero-overlay { position: absolute; inset: 0; pointer-events: none; } /* --gradon-overlay-color falls back to --body-color (set by the theme to the page background), which itself falls back to white. This creates a smooth fade that blends the hero into the surrounding page. */ .gradon-hero-overlay-left { background: linear-gradient( 90deg, var(--gradon-overlay-color, var(--body-color, #fff)) 0%, color-mix(in srgb, var(--gradon-overlay-color, var(--body-color, #fff)) 80%, transparent) 30%, transparent 65% ); } .gradon-hero-overlay-top { height: 220px; background: linear-gradient( to bottom, var(--gradon-overlay-color, var(--body-color, #fff)), transparent ); } /* The bottom overlay always fades into the page's own background color (--gradon-page-bg-color, set via the page panel) rather than the hero's chosen overlay color — it's the seam where the hero meets the page below. */ .gradon-hero-overlay-bottom { top: auto; bottom: 0; height: 220px; background: linear-gradient( to top, var(--gradon-page-bg-color, var(--body-color, var(--background, #000))), transparent ); } /* ── Block style: "Diagonal" (is-style-angled) ──────────────────────────────── Same hero, but the top overlay is hidden and the left overlay is angled at 145° (instead of 90°), fading out at 60% (instead of 65%). Everything else — bottom overlay, inner layout, typography, buttons — stays unchanged. */ .is-style-angled .gradon-hero-overlay-top { display: none; } .is-style-angled .gradon-hero-overlay-left { background: linear-gradient( 145deg, var(--gradon-overlay-color, var(--body-color, #fff)) 0%, color-mix(in srgb, var(--gradon-overlay-color, var(--body-color, #fff)) 80%, transparent) 10%, transparent 50% ); } /* ── Inner layout ─────────────────────────────────────────────────────────── */ .gradon-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: 70vh; padding: clamp(3rem, 5vw, 6rem) clamp(2rem, 5vw, 5rem); } .gradon-hero-copy { max-width: min(720px, 100%); width: 100%; text-shadow: 0 4px 14px rgb(0 0 0 / 0.5); } /* ── Typography ───────────────────────────────────────────────────────────── */ .gradon-hero-logo { display: block; max-width: min(240px, 100%); height: auto; margin: 0 0 1.5rem; } .gradon-hero-heading { color: var(--body-color, #ffffff); margin: 0 0 1.25rem; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; max-width: 680px; } .gradon-hero-text { color: var(--body-color, #ffffff); margin: 0 0 2rem; font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.75; max-width: 680px; } .gradon-hero-text p { margin: 0 0 0.75em; } .gradon-hero-text p:last-child { margin-bottom: 0; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ :root { --parallelogram-angle: -12deg; --parallelogram-radius: 4px; --parallelogram-width: 3px; --content-width: 950px; --wide-width: 1340px; } .gradon-hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; } .gradon-hero-button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: none; background: none; text-decoration: none; font-weight: 800; cursor: pointer; } .gradon-hero-button::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border-radius: var(--parallelogram-radius); border: var(--parallelogram-width) solid var(--color, currentColor); transform: skewX(var(--parallelogram-angle)); transition: all .25s ease-out; z-index: -1; } .gradon-hero-button:hover::before { background: hsl(from var(--color, currentColor) h s l / 25%); } .gradon-hero-button:hover { text-decoration: none; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .gradon-hero-inner { padding: 2.5rem 1.5rem; align-items: flex-end; } .gradon-hero-buttons { flex-direction: column; align-items: stretch; } .gradon-hero-buttons { align-items: flex-start; } } /* menu fix */ .site__header { overflow-x: clip; }