/* Theme Name: Wux Theme Author: Wux Author URI: https://wux.nl/ Description: Wux is het custom wordpress thema van Wux - Digital Agency Version: 2.0 Requires PHP: 8.3.0 Text Domain: wuxnl-theme */ :root { /* Font variables */ --fs : 1.4rem; --lh : 1.6; --fs-h1 : clamp(3.2rem, 4vw, 5.6rem); --fs-h2 : clamp(2.5rem, 3vw, 4rem); --fs-h3 : clamp(2rem, 3vw, 2.4rem); /* Color variables */ --clr-primary :#888e44; --clr-primary-rgb : 136, 142, 68; --clr-heading : #0f0f0c; --clr-text : #0f0f0c; --clr-dark : #0f0f0c; --clr-dark-rgb : 15, 15, 12; --clr-light : #f1ebdd; --clr-border : rgb(222, 226, 230); --clr-danger : #e2401c; --clr-info : #3d9cd2; --clr-success : #1CB435; /* Font variables */ --font-primary : "Outfit", sans-serif; --font-heading : "DM Serif Display", serif; /* Container variables */ --container-width : 100%; --container-width--sm : 540px; --container-width--md : 720px; --container-width--lg : 960px; --container-width--xl : 1140px; --container-width--xxl : 1320px; --container-width--xxxl : 1420px; /* Transition variables */ --ts-duration : var(--ts-35); --ts-function : cubic-bezier(.58,.22,.2,.96); /* Asset variables */ --src-hartjes: url('/app/themes/wuxnl-theme/assets/img/icon-hartjes.svg'); --src-a-emblem: url('/app/themes/wuxnl-theme/assets/img/asset--a-emblem.svg'); } @media (min-width: 768px) { :root { --fs: 1.6rem; } } /*** ---------- Whitespace ---------- ***/ [class*="wpb-wst"] { --pt: 0px; padding-top: var(--pt); } [class*="wpb-wsb"] { --pb: 0px; padding-bottom: var(--pb); } *:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 2.4rem; --p-y-medium: 4rem; --p-y-large: 5.4rem; /* -- Top -- */ &.wpb-wst--small { --pt: var(--p-y-small); } &.wpb-wst--medium { --pt: var(--p-y-medium); } &.wpb-wst--large { --pt: var(--p-y-large); } /* -- Bottom -- */ &.wpb-wsb--small { --pb: var(--p-y-small); } &.wpb-wsb--medium { --pb: var(--p-y-medium); } &.wpb-wsb--large { --pb: var(--p-y-large); } } @media (min-width: 992px) { *:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-xsmall: 4rem; --p-y-small: 6rem; --p-y-medium: 10rem; --p-y-large: 12rem; &.wpb-header--home{ --p-y-medium: 11rem; --p-y-large: 13rem; } } } /*** ---------- Background colors ---------- ***/ [class*="wpb-bg-clr--"] { --block-bg: transparent; background-color: var(--block-bg); &.wpb-bg-clr--transparent { --block-bg: transparent; } &.wpb-bg-clr--white { --block-bg: #fff; } &.wpb-bg-clr--primary { --block-bg: var(--clr-primary); --clr-contrast: #FFFF; } :is(.wpb-text, .wpb-footer__main, .wpb-footer__bottom) *:not(.btn, .btn *, .wpb-social-media, .wpb-social-media *){ color: var(--clr-contrast, var(--clr-text)); } } /*** ---------- Header ---------- ***/ .wpb-header:has(.wpb-header__usps){ --usps-padding: 2.4rem; .wpb-header__main{ position: relative; padding-bottom: calc(var(--pb, 0px) + var(--usps-padding, 0px)); } .wpb-header__usps{ --bg-clr: #FFFF; --p: var(--usps-padding); --br: 1.2rem; margin-top: calc(-1 * var(--p)); overflow: hidden; .wpb-header__usps__inner{ padding: var(--p); background-color: var(--bg-clr); border-radius: var(--br); position: relative; overflow: hidden; .swiper{ --fade-out-bg: 255, 255, 255; position: static; overflow: visible; } } } } .wpb-header.wpb-header--home{ .wpb-header__main{ --bg-overlay: linear-gradient(to bottom, rgb(var(--clr-primary-rgb), .8) 40%, rgb(var(--clr-primary-rgb), .3)); --text-max-width: clamp(40rem, 60vw, 80rem); border-bottom: 1rem solid var(--clr-primary); .wpb-text{ max-width: var(--text-max-width); } .wpb-text h1{ --fs: clamp(4rem, 6vw, 10rem); } .wpb-text p{ font-size: clamp(1.6rem, 1.8vw, 2rem); line-height: 1.7; max-width: 56rem; } } } .wpb-header.wpb-header--subpage{ --thumbnail-height: 36rem; .wpb-header__main{ --text-max-width: clamp(40rem, 55vw, 72rem); .wpb-text{ max-width: var(--text-max-width); } } .wpb-header__thumbnail{ height: var(--thumbnail-height); width: 100%; img{ width: 100%; height: 100%; object-fit: cover; } } } .wpb-header.wpb-header--archive{ .wpb-header__main{ --text-max-width: clamp(40rem, 55vw, 72rem); .wpb-text{ max-width: var(--text-max-width); } form{ max-width: var(--text-max-width); margin-top: 1.6rem; } } } @media (min-width: 576px){ .wpb-header:has(.wpb-header__usps){ --usps-padding: 3.2rem; .wpb-header__usps{ margin-top: calc(-1 * var(--p)); .wpb-header__usps__inner{ width: calc(100% + (var(--p) * 2)); margin-left: calc(-1 * var(--p)); } } } } @media (min-width: 992px){ .wpb-header.wpb-header--home{ .wpb-header__main{ --bg-overlay: linear-gradient(to right, rgb(var(--clr-primary-rgb), 1) calc(var(--text-max-width) - 20rem), rgb(var(--clr-primary-rgb), 0) calc(var(--text-max-width) + 20rem)); } } } @media (min-width: 1200px){ .wpb-header:has(.wpb-header__usps){ --usps-padding: 4rem; } } @media (min-width: 1400px){ .wpb-header:has(.wpb-header__usps) { --usps-padding: 6rem; } } @media (min-width: 1800px){ .wpb-header:has(.wpb-header__usps){ .wpb-header__usps{ .wpb-header__usps__inner{ width: calc(100% + (var(--p) * 4)); margin-left: calc(-2 * var(--p)); padding: var(--p) calc(var(--p) * 2); } } } } /* Swiper */ .swiper.swiper--usps { --fade-out-bg: var(--clr-dark-rgb); position: relative; &.is-not-swipeable{ width: 100%; margin: 0; .swiper-wrapper{ display: flex; justify-content: space-between; } } .swiper-slide { width: auto; display: flex; } .wpb-usp { white-space: nowrap; } &::before, &::after { content: ''; position: absolute; inset: 0 -2px; width: 6rem; background: linear-gradient(to left, rgb(var(--fade-out-bg), 0), rgb(var(--fade-out-bg), 1)); z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--ts-25) ease; } &::after { left: auto; background: linear-gradient(to right, rgb(var(--fade-out-bg), 0), rgb(var(--fade-out-bg), 1)); } &.can-scroll-left::before, &.can-scroll-right::after { opacity: 1; } } .by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; transition: opacity var(--ts-duration) ease-in-out; span { font-size: 1.1rem; line-height: 1; } img { width: 4.7rem; height: 1.6rem; filter: invert(1); } }