style.css

/**
Theme Name: Het Groene Doel
Theme URI: https://github.com/ejoweb/hetgroenedoel/
Author: Erik Joling
Author URI: https://www.ejoweb.nl/
Description: WordPress blokkenthema voor Het Groene Doel Zwolle
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
Version: 0.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hgd
*/

/**
 * Common variables
 * 
 * var(--wp--style--root--padding-top);
 * var(--wp--style--root--padding-bottom);
 * var(--wp--style--root--padding-right);
 * var(--wp--style--root--padding-left);
 * 
 * var(--wp--preset--spacing--50)
 * 
 * var(--wp--custom--border-radius--medium)
 * var(--wp--custom--border-radius--large)
 * 
 * var(--wp--preset--color--primary)
 * var(--wp--preset--color--secondary)
 */



/* -------------------------------- GENERAL -------------------------------- */

/*
 * Smooth scroll when `to top`-link is clicked
 */
html {
    scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {

}

/* Remove default padding from heading */
h1.has-background, 
h2.has-background, 
h3.has-background, 
h4.has-background, 
h5.has-background, 
h6.has-background {
    padding: 0;
    box-sizing: border-box;
}

/* Cover block */
.wp-block-cover {
/*    overflow: hidden;
    padding: var(--wp--style--root--padding-top)
             var(--wp--style--root--padding-left);*/
}

.wp-block-cover h1 {
    margin: 0;
}

/**
 * Navigation block 
 */

.wp-block-navigation .wp-block-navigation-item > a {
    text-underline-offset: 3px;    
    text-decoration-thickness: 2px;
}

.wp-block-navigation .current-menu-item > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.wp-block-navigation .wp-block-navigation__container {
    row-gap: var(--wp--preset--spacing--30);
}

/* Submenu */
.wp-block-navigation .wp-block-navigation__submenu-container {
    border: 0px !important;
    font-size: var(--wp--preset--font-size--small) !important;
    font-weight: normal !important;
    padding: 0.375em 0.375em;
}

/* Submenu open */
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
    min-width: 180px;    
}

/* Submenu list-item */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
}

/* Submenu link */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.375em 0.625em;
}

/* Mobile - toggle */
.wp-block-navigation__responsive-container-open svg {
    height: 2rem;
    width: 2rem;
}

/* Mobile - container */
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
 }

/* -------------------------------- CONTEXT -------------------------------- */

/** 
 * Site container 
 */

.wp-site-blocks {
	padding-top: 0;
    padding-bottom: 0;
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;*/
}

.wp-site-blocks > * + * {
    margin-block-start: 0;
}

/**
 * Site header 
 */

header {
    position: relative;
    overflow: hidden;
}

/* Header bottom size */
header > .wp-block-group {
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: calc(var(--wp--preset--spacing--50) * 4);
}

/* Bulb in header */
header > .wp-block-group::before {
    position: absolute;
    z-index: -1;
    content: '';
    display: inline-block;
    margin-top: -2240px;
    margin-right: -1080px;
    border-radius: 1200px;
    height: 2400px;
    width: 2400px;
}

/* Header top bar */
header #top-bar {
    position: absolute;
    z-index: 999;
    width: 100%;
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

/* Logo */
header .wp-block-site-logo {
    position: relative;
    z-index: 99;
}

header .wp-block-site-logo:before {
    position: absolute;
    z-index: -1;
    content: '';
    display: inline-block;
    margin-top: -1100px;
    margin-left: -890px;
    border-radius: 999px;
    height: 1200px;
    width: 1200px;
    background: var(--wp--preset--color--tertiary);
}

header .wp-block-site-logo img {
    border-radius: 0;
}




/**
 * Site main 
 */

/* Overlap main with header */
main {
    position: relative;
    margin-block-start: calc(var(--wp--preset--spacing--50) * -4) !important;
}

main > .entry-content.alignfull {
    margin-left: 0;
    margin-right: 0;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: var(--wp--preset--color--primary);
}


/**
 * Site footer 
 */

footer {
    overflow: hidden;
    position: relative;
}

footer > .wp-block-group.has-primary-background-color {
}

footer > .wp-block-group.has-primary-background-color:before {
    position: absolute;
    z-index: 0;
    content: '';
    display: inline-block;
    bottom: -2000px;
    right: -1240px;
    border-radius: 1200px;
    height: 2400px;
    width: 2400px;
    background: var(--wp--preset--color--tertiary);
}

footer > .wp-block-group.has-primary-background-color > * {
    position: relative;
}


/* ------------------------------- TEMPLATES -------------------------------- */

/* Default page without post thumbnail */
.page-template-default.has-no-post-thumbnail main > .wp-block-cover {
    color: var(--wp--preset--color--primary) !important;
    min-height: calc(var(--wp--preset--spacing--50) * 4) !important;
    padding-bottom: var(--wp--preset--spacing--30) !important;
}

.page-template-default.has-no-post-thumbnail main > .wp-block-cover .wp-block-cover__background {
    background: var(--wp--preset--color--base) !important;
}


/* ------------------------------ 3RD PARTY --------------------------------- */

/**
 * Contact Form 7
 */

.wpcf7 form {
    --wp--style--block-gap: var(--wp--preset--spacing--50);
    color: var(--wp--preset--color--contrast);
}

.wpcf7 form > *,
.wpcf7 form fieldset > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

.wpcf7 form > * + *,
.wpcf7 form fieldset > * + * {
    margin-block-start: var( --wp--style--block-gap );
    margin-block-end: 0;
}

.wpcf7 form fieldset {
    --wp--style--block-gap: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--wp--custom--border-radius--small);
    border: none;
    background-color: var(--wp--preset--color--contrast-2);
}

.wpcf7 form fieldset legend {
    padding: 0.125rem 0.5rem;
    border-radius: var(--wp--custom--border-radius--small);
    background-color: var(--wp--preset--color--white);
}

.wpcf7 form fieldset legend + * {
    margin-block-start: 0;
}

.wpcf7 form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.wpcf7 form textarea {
    padding: 0.5rem 0.5rem;
    font-size: var(--wp--preset--font-size--medium);
    font-family: var(--wp--preset--font-family--body-font);
    border-radius: var(--wp--custom--border-radius--small);
    border: 1px solid var(--wp--preset--color--contrast-2);
    box-sizing: border-box;
    width: 100%;
}

.wpcf7 form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus-visible,
.wpcf7 form textarea:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast-2);
    border-color: var(--wp--preset--color--primary);
}

/* Reset submit style. Note: we added wp-block-button__link class to the submit button */ 
.wpcf7 form input[type="submit"].wp-block-button__link {

}

/* Checkboxes and radio */
.wpcf7 form input[type="checkbox"], 
.wpcf7 form input[type="radio"] {
    margin: 0 0.5em 0 0;
    accent-color: var(--wp--preset--color--primary);
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.15em;
    transform: translateY(0.125em);
}

/* Checkboxes, we don't want them inline  */
.wpcf7 form .wpcf7-list-item { 
    display: block; 
    margin-left: 1.25rem;
}

.wpcf7 form .wpcf7-list-item:only-child {
    margin-left: 0;
}

.wpcf7 form .wpcf7-checkbox {
    margin-top: 12px;
    display: block;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: var(--wp--preset--spacing--40);
}


/* -------------------------------- CUSTOM ---------------------------------- */

/* Image-button */
.image-button-2 { position: relative; }
.image-button-2 > .wp-block-image img {
    aspect-ratio: 21/9 !important;
}
.image-button-2 > .wp-block-buttons { 
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Gallery overlap */
.wp-block-gallery--overlap {

}

.wp-block-gallery--overlap > figure + figure {
    margin-left: calc( var(--wp--style--block-gap) * -4 ) !important;
    opacity: 0.8;
}


/* ------------------------------ RESPONSIVENESS ------------------------------- */

/* Only tiny screens */
@media screen and (max-width: 480px) {

    body {
        --wp--style--root--padding-right: var(--wp--preset--spacing--40);
        --wp--style--root--padding-left: var(--wp--preset--spacing--40);
    }
}

/* Only medium screens */
@media screen and (max-width: 960px) {

    /* Header bottom size */
    header > .wp-block-group {
        /* padding-top: 0;*/
    }

    /* Header top bar */
    header #top-bar {
        position: relative;
        display: block;
        display: none;
    }
}