gets the top offset, only the last

gets the bottom offset. A single section gets both. GenerateBlocks' .gb-shapes div (wave SVGs) is always a

, so it is naturally excluded by targeting the

element. ========================================================================== */ .gb-container > section { --svea-wave-top: 0px; --svea-wave-bottom: 0px; } .gb-container > section:first-of-type { --svea-wave-top: inherit; } .gb-container > section:last-of-type { --svea-wave-bottom: inherit; } /* ========================================================================== 4. COMMON BASE STYLES (scoped to .wp-block-svea-blocks-*) These codify the most common patterns found across all blocks. Blocks are free to override any of these. ========================================================================== */ /* --- Section containers --- */ [class*="wp-block-svea-blocks-"] { box-sizing: border-box; font-family: var(--svea-font-family); color: var(--svea-color-text); line-height: var(--svea-line-height-relaxed); } [class*="wp-block-svea-blocks-"] *, [class*="wp-block-svea-blocks-"] *::before, [class*="wp-block-svea-blocks-"] *::after { box-sizing: inherit; } /* --- Headings (common pattern across blocks) --- */ [class*="wp-block-svea-blocks-"] h1, [class*="wp-block-svea-blocks-"] h2, [class*="wp-block-svea-blocks-"] h3, [class*="wp-block-svea-blocks-"] h4, [class*="wp-block-svea-blocks-"] h5, [class*="wp-block-svea-blocks-"] h6 { margin: 0 0 var(--svea-gap-md); } [class*="wp-block-svea-blocks-"] h1 { font-size: var(--svea-font-size-4xl); /* 36px */ line-height: var(--svea-line-height-tight); /* 1.2 */ font-weight: var(--svea-font-weight-bold); /* 700 */ } [class*="wp-block-svea-blocks-"] h2 { font-size: var(--svea-font-size-xl); /* 24px */ line-height: var(--svea-line-height-snug); /* 1.3 */ font-weight: var(--svea-font-weight-bold); /* 700 */ } [class*="wp-block-svea-blocks-"] h3 { font-size: var(--svea-font-size-lg); /* 20px */ line-height: var(--svea-line-height-relaxed); /* 1.6 */ font-weight: var(--svea-font-weight-semibold); /* 600 */ } [class*="wp-block-svea-blocks-"] h4 { font-size: var(--svea-font-size-base); /* 16px */ line-height: var(--svea-line-height-normal); /* 1.5 */ font-weight: var(--svea-font-weight-semibold); /* 600 */ } /* --- Paragraphs --- */ [class*="wp-block-svea-blocks-"] p { margin: 0 0 var(--svea-gap-md); line-height: var(--svea-line-height-relaxed); } [class*="wp-block-svea-blocks-"] p:last-child { margin-bottom: 0; } /* --- Links (default) --- */ [class*="wp-block-svea-blocks-"] a { color: var(--svea-color-primary); text-decoration: none; transition: color var(--svea-transition-fast); } [class*="wp-block-svea-blocks-"] a:hover { color: var(--svea-color-primary-dark); } /* --- Lists (only bare/unstyled lists — styled components like feature-lists handle their own spacing) --- */ [class*="wp-block-svea-blocks-"] ul:not([class]), [class*="wp-block-svea-blocks-"] ol:not([class]) { margin: 0 0 var(--svea-gap-md); padding-left: var(--svea-gap-xl); } [class*="wp-block-svea-blocks-"] li:not([class]) { margin-bottom: var(--svea-gap-sm); } /* --- Images --- */ [class*="wp-block-svea-blocks-"] img { max-width: 100%; height: auto; display: block; } /* ========================================================================== 4. BUTTON COMPONENTS Previously compiled into every block's style-index.css via _buttons.scss. Now loaded once globally here. ========================================================================== */ /* --- Button base --- */ .svea-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 50px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; } @media (max-width: 480px) { .svea-btn { width: 100%; text-align: center; justify-content: center; } } .svea-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.2) 50%, transparent); transition: left 0.5s ease; pointer-events: none; } .svea-btn:hover { transform: translateY(-2px); } .svea-btn:hover::before { left: 100%; } .svea-btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; } .svea-btn:focus-visible { outline: 3px solid rgba(var(--svea-color-primary-rgb), 0.4); outline-offset: 2px; } .svea-btn:disabled, .svea-btn.is-disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .svea-btn:disabled:hover, .svea-btn.is-disabled:hover { transform: none; } .svea-btn:disabled:hover::before, .svea-btn.is-disabled:hover::before { left: -100%; } /* --- Primary button --- */ .svea-btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 50px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; background-color: var(--svea-color-btn-bg); color: var(--svea-color-btn-text); border-color: var(--svea-color-btn-bg); box-shadow: 0 2px 8px color-mix(in srgb, var(--svea-color-btn-bg) 25%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1); } @media (max-width: 480px) { .svea-btn--primary { width: 100%; text-align: center; justify-content: center; } } .svea-btn--primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.2) 50%, transparent); transition: left 0.5s ease; pointer-events: none; } .svea-btn--primary:hover { transform: translateY(-2px); background-color: var(--svea-color-btn-hover); border-color: var(--svea-color-btn-hover); box-shadow: 0 4px 16px color-mix(in srgb, var(--svea-color-btn-bg) 35%, transparent), 0 2px 4px rgba(0, 0, 0, 0.1); } .svea-btn--primary:hover::before { left: 100%; } .svea-btn--primary:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; box-shadow: 0 1px 4px color-mix(in srgb, var(--svea-color-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1); } .svea-btn--primary:focus-visible { outline: 3px solid rgba(var(--svea-color-primary-rgb), 0.4); outline-offset: 2px; } .svea-btn--primary:disabled, .svea-btn--primary.is-disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .svea-btn--primary:disabled:hover, .svea-btn--primary.is-disabled:hover { transform: none; } .svea-btn--primary:disabled:hover::before, .svea-btn--primary.is-disabled:hover::before { left: -100%; } /* Lock link/visited so WP theme rules can't override */ .svea-btn--primary, .svea-btn--primary.svea-btn--primary:link, .svea-btn--primary.svea-btn--primary:visited { background-color: var(--svea-color-btn-bg); border-color: var(--svea-color-btn-bg); color: var(--svea-color-btn-text); } .svea-btn--primary.svea-btn--primary:hover { background-color: var(--svea-color-btn-hover); border-color: var(--svea-color-btn-hover); color: var(--svea-color-btn-text); } .svea-btn--primary.svea-btn--primary:active { color: var(--svea-color-btn-text); } /* --- Secondary button (outline) --- */ .svea-btn--secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 50px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; background-color: var(--svea-btn-secondary-bg, #ffffff); color: var(--svea-btn-secondary-text, var(--svea-color-btn-bg)); border-color: var(--svea-btn-secondary-border, var(--svea-color-btn-bg)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } @media (max-width: 480px) { .svea-btn--secondary { width: 100%; text-align: center; justify-content: center; } } .svea-btn--secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--svea-btn-secondary-border, var(--svea-color-btn-bg)) 10%, transparent) 50%, transparent 100%); transition: left 0.5s ease; pointer-events: none; } .svea-btn--secondary:hover { transform: translateY(-2px); background-color: color-mix(in srgb, var(--svea-btn-secondary-border, var(--svea-color-btn-bg)) 8%, #ffffff); box-shadow: 0 2px 8px color-mix(in srgb, var(--svea-btn-secondary-border, var(--svea-color-btn-bg)) 15%, transparent), 0 1px 2px rgba(0, 0, 0, 0.05); } .svea-btn--secondary:hover::before { left: 100%; } .svea-btn--secondary:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; background-color: color-mix(in srgb, var(--svea-btn-secondary-border, var(--svea-color-btn-bg)) 12%, #ffffff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .svea-btn--secondary:focus-visible { outline: 3px solid rgba(var(--svea-color-primary-rgb), 0.4); outline-offset: 2px; } .svea-btn--secondary:disabled, .svea-btn--secondary.is-disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .svea-btn--secondary:disabled:hover, .svea-btn--secondary.is-disabled:hover { transform: none; } .svea-btn--secondary:disabled:hover::before, .svea-btn--secondary.is-disabled:hover::before { left: -100%; } /* Lock link/visited so WP theme rules can't override */ .svea-btn--secondary, .svea-btn--secondary.svea-btn--secondary:link, .svea-btn--secondary.svea-btn--secondary:visited { background-color: var(--svea-btn-secondary-bg, #ffffff); border-color: var(--svea-btn-secondary-border, var(--svea-color-btn-bg)); color: var(--svea-btn-secondary-text, var(--svea-color-btn-bg)); } .svea-btn--secondary.svea-btn--secondary:hover { background-color: color-mix(in srgb, var(--svea-btn-secondary-border, var(--svea-color-btn-bg)) 8%, #ffffff); color: var(--svea-btn-secondary-text, var(--svea-color-btn-bg)); } .svea-btn--secondary.svea-btn--secondary:active { background-color: color-mix(in srgb, var(--svea-btn-secondary-border, var(--svea-color-btn-bg)) 12%, #ffffff); color: var(--svea-btn-secondary-text, var(--svea-color-btn-bg)); } /* --- Button sizes --- */ .svea-btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; } .svea-btn--lg { padding: 1rem 2.25rem; font-size: 1.125rem; } /* --- Button with icon --- */ .svea-btn--icon svg { width: 1.125em; height: 1.125em; flex-shrink: 0; transition: transform 0.2s ease; } .svea-btn--icon:hover svg { transform: translateX(3px); } /* --- Button group --- */ .svea-btn-group { display: flex; flex-wrap: wrap; gap: 0.875rem; } @media (max-width: 480px) { .svea-btn-group { flex-direction: column; } .svea-btn-group > * { text-align: center; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .svea-btn, [class*="__button"] { transition-duration: 0.01ms !important; } .svea-btn::before, [class*="__button"]::before { display: none; } .svea-btn:hover, [class*="__button"]:hover { transform: none; } }