/*
* Ellesschrijft shared styles
* Cross-block utility classes and block style variations,
* based on the pen.dev design and the /site HTML/CSS reference
* (site/style.css is the authoritative source for exact values).
*/
/* Google Fonts loaded via @import (not a separate wp_enqueue_style link)
so the block editor's iframed canvas picks it up: Gutenberg only copies
same-origin stylesheets into the editor iframe and silently drops
cross-origin tags, which left Afacad Flux/Ephesis missing in the
editor while the frontend (loaded outside that iframe) was unaffected. */
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Ephesis:wght@400&display=swap');
/* WP's nav-block modal sets overflow:hidden on while open, which
removes the scrollbar and widens the usable viewport by its width
(~15px) — enough to visibly shift anything positioned against the
viewport edge (e.g. the header's fixed-position close button below)
between the closed and open state. Reserve the scrollbar's space
permanently so nothing shifts when it toggles. */
html {
scrollbar-gutter: stable;
}
/* Button style variations (core/button) */
.wp-block-button.is-style-es-primary .wp-block-button__link {
background-color: #17a796;
color: #ffffff;
border-radius: 999px;
padding: 12px 28px;
font-weight: 600;
letter-spacing: 0.5px;
}
.wp-block-button.is-style-es-primary .wp-block-button__link:hover {
background-color: #12907f;
}
.wp-block-button.is-style-es-secondary .wp-block-button__link {
background-color: transparent;
color: #0c4a40;
border: 1.5px solid #0c4a40;
border-radius: 999px;
padding: 12px 28px;
font-weight: 600;
}
.wp-block-button.is-style-es-secondary .wp-block-button__link:hover {
background-color: #0c4a40;
color: #ffffff;
}
/* "Script" heading style (core/heading) — the cursive accent line
used above most section titles in the design, e.g. "Wat ik voor je
schrijft" above "Diensten". */
.wp-block-heading.is-style-es-script {
font-family: 'Ephesis', cursive;
font-weight: 400;
color: #17a796;
line-height: 1;
}
/* Circular portrait used in dark testimonial/about strips (core/image).
Fluid by design (340px capped at 70vw) rather than a breakpoint swap —
matches site/style.css .about-strip .portret exactly. */
.es-portrait-circle img {
width: 340px;
max-width: 70vw;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
}
/* Organic asymmetric image corners (core/image), the design's
signature 120px/24px/120px/24px rounded-corner treatment. */
.wp-block-image.is-style-es-organic img {
border-radius: 120px 24px 120px 24px;
}
/* Category tag pill, used on portfolio cards. */
.ellesschrijft-tag {
display: inline-flex;
padding: 4px 14px;
background-color: #e6f5f1;
border-radius: 999px;
color: #17a796;
font-family: 'Afacad Flux', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* Teaser card markup, shared between the static ellesschrijft/card
block and the dynamic ellesschrijft/portfolio-grid block, so both
produce visually identical cards from one CSS definition. Matches
site/style.css .pcard (white bg) — the default. */
.ellesschrijft-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
border: 1px solid #0c4a4014;
border-radius: 20px;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.ellesschrijft-card__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.ellesschrijft-card__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 26px 26px;
}
.ellesschrijft-card__body > .ellesschrijft-tag {
align-self: flex-start;
}
.ellesschrijft-card__title {
margin: 0;
font-family: 'Afacad Flux', system-ui, sans-serif;
font-size: 24px;
line-height: 1.1;
font-weight: 700;
color: #0c4a40;
}
.ellesschrijft-card__desc {
margin: 0;
font-family: 'Afacad Flux', system-ui, sans-serif;
font-size: 16px;
line-height: 1.45;
color: #5a6e69;
}
.ellesschrijft-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Afacad Flux', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
color: #17a796;
}
.ellesschrijft-card__arrow {
flex-shrink: 0;
}
/* Home/Diensten "service card" variant — apply via the block's own
className attribute (e.g. "ellesschrijft-card--service"). Matches
site/style.css .card (ivory bg, roomier padding/type) as distinct
from the white .pcard portfolio default above.
Height fix: core/columns stretches each column to the row's tallest
column by default (align-items:stretch/normal), but that only
equalizes the *column* boxes — this block's own root div and its
inner .ellesschrijft-card are plain block/flex elements sized to their
own content, so a card with shorter copy still rendered shorter than
its (already-equal-height) column. Fill 100% of the column instead. */
.ellesschrijft-card--service.wp-block-ellesschrijft-card {
height: 100%;
box-sizing: border-box;
}
.ellesschrijft-card--service .ellesschrijft-card {
height: 100%;
box-sizing: border-box;
background-color: #fbfaf7;
}
.ellesschrijft-card--service .ellesschrijft-card__body {
padding: 24px 28px 28px;
gap: 12px;
}
.ellesschrijft-card--service .ellesschrijft-card__title {
font-size: 26px;
}
.ellesschrijft-card--service .ellesschrijft-card__desc {
font-size: 17px;
}
/* Grid layout for the portfolio-grid dynamic block. */
.ellesschrijft-portfolio-grid {
display: grid;
grid-template-columns: repeat(var(--es-grid-columns, 3), 1fr);
gap: 32px;
max-width: 1440px;
margin: 0 auto;
padding: 24px 80px 64px;
box-sizing: border-box;
}
.es-related .ellesschrijft-portfolio-grid {
max-width: none;
margin: 0;
padding: 0;
}
@media (max-width: 900px) {
.ellesschrijft-portfolio-grid {
padding: 16px 40px 48px;
}
}
@media (max-width: 1100px) {
.ellesschrijft-portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.ellesschrijft-portfolio-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ---------- Generic full-width section ---------- */
/* Every full-bleed section on the site follows the same two-layer shape,
matching site/style.css exactly: an OUTER element that is always full
viewport width and carries the background color only (no side
padding, no max-width), and an INNER element ("...__inner" or, for
generic sections, "section") that is capped at 1440px, centered with
margin:0 auto, and carries the 80px/40px side padding. Never put both
the background AND the padding/max-width on the same element — WP
applies its own negative margins to full-aligned blocks, which wins
over a plain "margin:0 auto" on that same element and breaks centering.
Apply "section-white"/"section-dark" on the OUTER wrapper for the
background; sections with neither modifier simply show the page's own
ivory background — that IS the alternation (ivory / white / dark /
...), so skipping the modifier is a valid, intentional choice. */
.section-white {
background-color: #ffffff;
}
.section-dark {
background-color: #0c4a40;
}
.section {
max-width: 1440px;
margin: 0 auto;
padding: 80px;
box-sizing: border-box;
}
@media (max-width: 900px) {
.section {
padding: 48px 40px;
}
}
/* Header — fixed to the top of the viewport while scrolling, with a
translucent, blurred version of the ivory background instead of a
flat one. Fixed (not sticky) because an ancestor's overflow makes
sticky positioning not take effect in this theme. The outer element
(.es-header) is the full-bleed bar; .es-header__inner is the capped,
centered row that holds the logo/nav/button. */
.es-header.wp-block-group {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background-color: rgba(251, 250, 247, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 0;
}
/* The WP admin bar is itself fixed to the very top when logged in, so
push the fixed header down below it instead of letting them overlap —
32px is the admin bar's default height, 46px its height from WP core's
own admin-bar breakpoint (782px) down. */
.admin-bar .es-header.wp-block-group {
margin-top: 32px;
}
@media (max-width: 782px) {
.admin-bar .es-header.wp-block-group {
margin-top: 46px;
}
}
/* Same admin-bar offset as above, but on body itself and switching at the
site's own md breakpoint (900px) instead of WP core's 782px, to match
every other breakpoint on the site. */
body.admin-bar {
padding-top: 46px;
}
@media (min-width: 901px) {
body.admin-bar {
padding-top: 32px;
}
}
.es-header__inner {
width: 100%;
max-width: 1440px;
margin: 0 auto !important; /* override core's own .wp-block-navigation__container margin:auto */
padding: 12px 80px;
box-sizing: border-box;
}
/* Caps the logo so it can never crowd out the nav/CTA on narrow screens,
e.g. when a long custom logo image is uploaded via the Site Icon/Logo
settings instead of the current compact "Elles schrijft" wordmark. */
.es-header .wp-block-site-logo {
max-width: 40vw;
}
/* Contact CTA: the header bar's own button (next to the logo) is for
desktop only; on mobile it's replaced by the "es-nav-mobile-cta" button
block appended to the nav's own content (see wp_navigation post 4),
which shows up at the bottom of the mobile dropdown instead. */
@media (max-width: 900px) {
.es-header .wp-block-buttons:not(.es-nav-mobile-cta) {
display: none;
}
}
@media (min-width: 901px) {
.es-header .es-nav-mobile-cta {
display: none;
}
}
@media (max-width: 900px) {
.es-header__inner {
padding: 12px 40px;
}
}
/* Core's navigation block switches to the hamburger/overlay menu at its
own fixed 600px breakpoint (baked into WP core's block-library CSS).
Override it so the switch happens at the site's own md breakpoint
(900px) instead, matching every other section on the site. */
@media (max-width: 900px) {
/* body-prefixed for a guaranteed specificity win: core's own
"@media (min-width:600px) .responsive-container-open:not(.always-shown)"
ties this at 2 class-equivalents, which would otherwise depend on
stylesheet load order rather than the rule itself. */
body .es-header .wp-block-navigation__responsive-container-open {
display: flex;
}
.es-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none;
position: fixed;
}
}
/* Core's own open-icon is a reduced 2-bar glyph; swap it for a bigger,
proper 3-line hamburger via a masked ::before (same technique as the
.es-bullets checkmark below) — sized up from core's own 24px icon per
request. */
.es-header .wp-block-navigation__responsive-container-open svg {
display: none;
}
.es-header .wp-block-navigation__responsive-container-open::before {
content: '';
display: block;
width: 30px;
height: 22px;
background-color: #0c4a40;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Core keeps the hamburger visible even while the panel is open (our own
"display: flex !important" above forces it to show at all at ≤900px in
the first place, since core hides it below 782px by default) — without
this, both the hamburger and the × below would show at once. The
responsive-container that gets ".is-menu-open" is a sibling of the open
button (both children of the