/*
Theme Name: GeneratePress Child for PVMS
Theme URI: https://generatepress.com
Template: generatepress
Author: Webdesign Burgdorf, Ralf Longwitz
Author URI: https://www.webdesign-burgdorf.ch
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability.
Version: 3.5.1.1742683206
Updated: 2025-03-22 23:40:06
*/
/* RL251106 */
/*** Table of Contents ***
Variables
Colors
Typography
Layout
Darklup
Forms
Campaigns
Typography
Seite "Kampagne"
Search results
Layout
Top Bar / Mobile menu / Off Canvas Panel
Social Media
Search
Header
Navigation
Dropdown
Sticky Header
Mobile Navigation Bar
Slideout / Off Canvas
Main Content
Responsive gutter for main content
Footer
Darklup
Social Media
Blog Detail Page & Page Hero
WP Standard Post
Post Navigation
Utilities
Elements
Button Icons
Reset styles for buttons in the Customizer
Gallery
Search
Back to top
Cards
Tables
Shortcodes / PV Elemente
Donations
YouTube
MailChimp Form
Download Box
WPML Language Switcher
Campaign Page
Use width for query
Stretched links
Blocks
YouTube embed
Kontakt - OpenStreetMap
Patterns
Accessibility
Font Zoom
Effects and Animations
FadeIn for Hero Video
Media Queries
/*** Variables ***/
/* Generatepress
--contrast = var(--pv-dark) black
--contrast-2 = var(--pv-bg-body) grey
--contrast-3 = var(--pv-light) white
--base = var(--pv-primary) red
--base-2 = var(--pv-secondary) light red
--base-3 = var(--pv-tertiary)
--accent = var(--pv-highlight)
/* Most important
Default radius: var(--pv-radius-xl) = var(--btn-radius)
*/
/*** select option styling ***/
/* https://www.youtube.com/watch?v=QckgIJrHiNY */
/*** Variables ***/
:root {
/* Colors, Shadows, Effects */
--base-3: #FA6161; /* --pv-secondary dark/inverse */
--bg-title-wrapper: hsl(from var(--contrast-3) h s l / 80%);
--bg-transparent: var(--pv-light-70);
--bg-dark-mode: var(--contrast-3);
--bg-dark-mode-text: #595959;
--pv-shadow-dark-l: 0 0 12px var(--pv-dark-40);
--pv-shadow-dark-xl: 0 0 48px var(--pv-dark-40);
--backdrop-blur: 8px;
/* Typography */
--gp-font--source-sans-3: "Source Sans 3", sans-serif, system-ui;
--gp-font--hepta-slab: "Hepta Slab", monospace, system-ui;
--font-weight-bold: 550;
--logo-text-size: calc(1.1 * clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem)); /* --pv-text-m - not to be toggled */
--menu-toggle-size: calc(1.3 * clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem)); /* --pv-text-m - not to be toggled */
--nav-text-size: calc(var(--pv-text-m) * 1.15);
--pv-text-ms: clamp(0.88rem, calc(0.19vw + 0.85rem), 1.02rem); /* medium small - not in CF - text-s with 15px base, Minor Second */
--pv-text-footer: var(--pv-text-m);
--header--font-weight: 500; /* var(--header--font-weight) */
--button--font-weight: 500;
/* Layout */
--content--max-width: 1400px;
--full--max-width: 2048px;
--logo--max-width: 24rem;
--text-max-width: 40rem;
--text-max-width-wide: 60rem;
--btn--max-width: 18rem;
--btn-radius: var(--pv-radius-xl);
--btn-radius-2: calc(var(--btn-radius) / 2);
--h--margin-top: 1.5em;
--h--margin-bottom: 1em;
--p--margin-bottom: 1em;
--button--padding-bottom: var(--pv-space-xs);
--button--padding-top: var(--button--padding-bottom);
--button--padding-h: var(--pv-space-l);
--button--padding: var(--button--padding-top) var(--button--padding-h) var(--button--padding-bottom);
--button--padding--shape-right: var(--button--padding-top) calc(var(--button--padding-h) + 0.1em) var(--button--padding-bottom) calc(var(--button--padding-h) - 0.1em);
--button--padding-lt: calc(0.83 * var(--button--padding-top)) calc(0.83 * var(--button--padding-h)) calc(0.83 * var(--button--padding-bottom)); /* Larger Text */
--header--height: calc(var(--pv-space-s) * 3 + var(--pv-text-m)); /* Overwritten by wdb-custom-functions.js */
--top-bar--height: calc(var(--pv-text-s) * 1.5 + 8px); /* Search: line height: s*1.5 + padding */
--logo-base-height: 3rem; /* to be adjusted per site css */
--logo-height: var(--logo-base-height);
--footer--gap: var(--pv-space-l);
--footer--height: calc(var(--pv-space-s) * 3 + var(--pv-text-m)); /* Overwritten by wdb-custom-functions.js */
--footer__logo--margin: var(--pv-space-s);
--footer__btn--padding: var(--pv-space-xs);
--footer__btn--margin: var(--pv-space-3xs);
--copybar-height: calc(var(--pv-space-xs) * 2 + var(--pv-text-s)); /* uses padding of copyright-bar */
--copybar-btn-size: 2.5rem;
--copybar-center: calc(var(--copybar-height) - var(--copybar-btn-size) / 2);;
--default-image-size: 150px;
--gp-slideout-width: min(100vw, 300px);
/* Forms */
--frm-field-height: var(--pv-text-l);
--progress-border-size: 1px;
--v-tl-border-thickness: 1px;
--v-tl-border-color: var(--pv-primary);
--v-tl-border-radius: var(--pv-radius-s);
--v-tl-border: var(--v-tl-border-thickness) solid var(--v-tl-border-color);
--v-tl-border-focus: var(--v-tl-border-thickness) solid var(--pv-primary);
/* Campaigns*/
--main-col-beige: hsl(42deg 28% 95%); /* pro-velo.ch */
/* Animations */
--transition-time: 0.3s; /* var(--transition-time) */
--transition-time-slow: 0.6s; /* var(--transition-time-slow) */
}
:root.prefers-reduced-motion {
--transition-time: 0;
--transition-time-slow: 0;
}
html {
scroll-behavior: smooth;
animation: set-scroll-behavior 0.3s linear forwards;
}
@keyframes set-scroll-behavior {
0% { scroll-behavior: unset; }
100% { scroll-behavior: smooth; }
}
/* FadeIn for container */
.site.container {
opacity: 0;
animation: fadeIn 0.8s ease-in 0.6s forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
30% { opacity: 0; }
100% { opacity: 1; }
}
html * { box-sizing: border-box; }
.using-mouse :focus, .using-mouse :focus-visible { outline: 0; }
:target, .target { scroll-margin-top: calc(var(--header--height) + var(--pv-space-2xl)); }
.scrolling-down :target, .scrolling-down .target { scroll-margin-top: var(--pv-space-2xl); }
/* WP Global Styles - to be removed by perfmatters*/
body .is-layout-flex { display: flex; }
.is-layout-flex {
flex-wrap: wrap;
align-items: center;
}
:where(.is-layout-flex) { gap: 0.5em; }
body[data-gb-menu-open="partial-overlay"] { overflow: hidden; }
.hide-desktop { display: none !important; }
/*** Typography ***/
body, button, input, select, textarea {
font-family: var(--gp-font--source-sans-3);
font-size: var(--pv-text-m);
}
h1, h2, h3, h4, h5, h6, p, li {
hyphens: auto;
hyphenate-limit-chars: 9 3 4;
}
h1, h2, h3, h4, h5, h6, .text-wrap-balance { text-wrap: balance; }
h1, h2, .textfader * { letter-spacing: -0.02rem; }
h3, h4 { letter-spacing: -0.015rem; }
h5, h6 { letter-spacing: -0.005rem; }
h1.gb-text.entry-title {
hyphens: none;
min-width: 10em;
}
.h1 {
font-size: var(--pv-text-4xl) !important;
line-height: 1.1;
color: var(--base);
}
.h2, .h2 > p {
font-size: var(--pv-text-3xl) !important;
line-height: 1.2;
color: var(--base);
}
.h3 {
font-size: var(--pv-text-2xl) !important;
line-height: 1.3;
}
.h4 {
font-size: var(--pv-text-xl) !important;
line-height: 1.3;
}
.h5 {
font-size: var(--pv-text-l) !important;
line-height: 1.3;
}
.h6 {
font-size: var(--pv-text-m);
line-height: 1.4;
}
a { text-decoration: none; }
label a { text-decoration: underline; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: var(--h--margin-top);
margin-bottom: var(--h--margin-bottom);
}
.gb-text {
display: block;
/*max-width: 46em;*/
line-height: 1.3;
}
.main-content > h1:first-child, .main-content-left > h1:first-child,
.main-content > h2:first-child, .main-content-left > h2:first-child,
.main-content > .h1:first-child, .main-content-left > .h1:first-child,
.main-content > .h2:first-child, .main-content-left > .h2:first-child,
.avia-builder-el-first > *:first-child, .article-text > *:first-child { margin-top: 0; }
.site img:not(.hero-logo-image), .site img:not(.hero-logo-image),
[class*="--border"], .gb-container, .border, .wp-block-cover {
border-radius: var(--btn-radius);
}
.site .progress-animation img { border-radius: 0; }
ol, ul { margin: 0 0 var(--pv-space-m) var(--pv-space-m); }
ul.wp-block-list { margin-left: 2rem; }
b, strong, .bold { font-weight: var(--font-weight-bold); }
::selection { background: var(--base); color: var(--contrast-3); }
.inverse ::selection { color: var(--base); background: var(--contrast-3); }
/* Typewriter Style */
.typewriter, .inside-top-bar, .inside-top-bar input, .inside-top-bar button { font-family: var(--gp-font--hepta-slab); }
*.typewriter, .typewriter h1, .typewriter h2, .typewriter h3,
.typewriter p, .typewriter a, .typewriter .gbp-button--primary,
.inside-top-bar .widget_icl_lang_sel_widget a, .inside-top-bar input, .inside-top-bar button,
#gb-header .top-bar .wpml-language-switcher-block > *, #gb-header .top-bar input, #gb-header .top-bar button, #gb-header input {
/*transform: scale(0.873); does not transform text, but whole element*/
zoom: 0.873; /* transforms text, but browser support recent */
}
.typewriter h1 a, h1.typewriter a, .typewriter h2 a, h2.typewriter a, .typewriter h3 a, h3.typewriter a,
.typewriter h4 a, h4.typewriter a, .typewriter h5 a, h5.typewriter a, .typewriter h6 a, h6.typewriter a,
.typewriter p a, p.typewriter a { zoom: 1; }
/* Search results */
.search .post-image img {
max-height: 15rem;
width: auto;
margin-bottom: var(--pv-space-s);
max-width: 30rem;
aspect-ratio: 3/2;
object-fit: cover;
}
.search-results {
h2, h2 a { font-size: var(--pv-text-xl) !important; }
}
/*** Elements ***/
figure { margin-bottom: var(--pv-space-l); }
/* Buttons */
.nav-next .btn a, .nav-previous .btn a { padding: 0; }
.btn-previous a::before, .btn-next a::after {
width: 0.75em;
height: auto;
top: calc(50% + 0.2em);
position: absolute;
transform: translateY(-50%);
}
.btn-previous a::before {
content: url('./assets/images/arrow-left.svg');
left: 0.6em;
}
.btn-next a::after {
content: url('./assets/images/arrow-right.svg');
right: 0.6em;
}
button, .btn:not(.mce-btn):not(.wp-block-post-navigation-link), .btn.wp-block-post-navigation-link a, a.wp-block-post-navigation-link.btn, .wp-block-button .wp-block-button__link, .wp-element-button, div[role="button"]:not(.mce-btn):not(.mce-path-item),
.gb-button, .gbp-button--primary, .gbp-button--secondary, #mc_embed_signup .powermail_submit {
cursor: pointer;
width: max-content;
padding: var(--button--padding);
font-weight: var(--button--font-weight);
text-align: center;
color: var(--contrast-3);
background-color: var(--base);
border-radius: var(--btn-radius);
border: none;
box-shadow: 0 0 0 transparent;
transition: all var(--transition-time);
}
.gbp-button--primary.shape-right {
padding: var(--button--padding--shape-right);
width: auto;
}
button:hover, .btn.wp-block-post-navigation-link a:hover, .wp-element-button:hover, div[role="button"]:hover, .gb-button:hover, .gbp-button--primary:hover,
.gbp-button--secondary:hover, #mc_embed_signup .powermail_submit:hover, .generate-back-to-top:hover {
background-color: var(--base-2);
color: var(--contrast-3);
box-shadow: var(--pv-shadow-m);
}
.mce-container-body button:hover {
color: var(--base-2);
background-color: var(--contrast-3);
box-shadow: none;
}
button:focus, .btn:focus, .wp-element-button:focus, div[role="button"]:focus, .gb-button:focus, .gbp-button--primary:focus,
.gbp-button--secondary:focus, #mc_embed_signup .powermail_submit:focus, .generate-back-to-top:focus {
color: var(--contrast-3);
box-shadow: var(--pv-shadow-m);
}
.gbp-button--secondary {
background-color: var(--base-2);
border: 1px none var(--contrast-3)
}
.gbp-button--secondary:hover { color: var(--contrast-3) }
.inside-article a.gbp-button--primary, .inside-article a.gbp-button--secondary {
display: inline-block; /* for margins */
}
.btn-more-posts {
display: block !important;
max-width: 16em;
position: relative;
margin: var(--pv-space-l) auto;
transition: max-width var(--transition-time);
}
.text-size-large .btn-more-posts { max-width: 13em; }
.text-size-large {
button, .btn, .wp-element-button, div[role="button"], .gb-button, .gbp-button--primary,
.gbp-button--secondary, #mc_embed_signup .powermail_submit { padding: var(--button--padding-lt); }
}
/* Round icon buttons */
.btn-round, .generate-back-to-top {
position: absolute;
padding: 0 !important;
border-radius: min(50%, var(--btn-radius));
line-height: 1;
top: auto;
width: 2.5rem;
height: 2.5rem;
font-size: 20px;
text-align: center;
}
.gbp-button--primary.btn-round {
.gb-shape {
display: block;
position: relative;
height: 100%;
width: 100%;
}
.gb-shape svg {
width: 1.2em;
fill: currentColor;
height: 1.2em;
position: absolute;
/* right: var(--btn-radius-2); */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.accessibility-switch & {
width: 1.5em;
height: 1.5em;
transform: translate(-50%, -50%) rotate(90deg);
}
}
}
/* Accessibility button switches */
.accessibility-buttons {
--a-pad: 2px;
position: fixed;
bottom: calc(var(--copybar-height) - var(--copybar-btn-size) / 2 - var(--a-pad));
left: calc(0px - var(--copybar-btn-size) * 3.05 - var(--a-pad));
height: calc(var(--copybar-btn-size) + var(--a-pad) * 2);
width: calc(var(--copybar-btn-size) * 4 + var(--a-pad) * 2);
background: var(--base);
outline: 1px solid var(--contrast-3);
padding: var(--a-pad);
border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
/*opacity: 0.5;*/
/*transform: translateX(calc(0px - var(--copybar-btn-size) / 2));*/
transition: all var(--transition-time);
z-index: 10;
@media (pointer: fine) {
&:hover {
opacity: 1;
left: 0;
.accessibility-switch { transform: scaleX(-1); }
}
}
@media (pointer: coarse) {
.accessibility-open & {
opacity: 1;
left: 0;
.accessibility-switch { transform: scaleX(-1); }
}
}
.accessibility-close & {
left: calc(0px - var(--copybar-btn-size) * 3 - var(--a-pad));
.accessibility-switch { transform: scaleX(1); }
}
}
.btn-round.dark-mode-switch, .btn-round.text-size-switch, .btn-round.animation-switch, .btn-round.accessibility-switch {
bottom: calc(var(--a-pad) - 0);
left: var(--a-pad);
transform: scaleX(-1);
transition: transform var(--transition-time);
}
.btn-round.accessibility-switch {
border: none;
background: transparent !important;
box-shadow: none !important;
transform: scaleX(1);
}
.btn-round.text-size-switch { left: calc(var(--copybar-btn-size) * 1 + var(--a-pad)); }
.btn-round.dark-mode-switch { left: calc(var(--copybar-btn-size) * 2 + var(--a-pad)); }
.btn-round.accessibility-switch { left: calc(var(--copybar-btn-size) * 3 + var(--a-pad)); }
.cf-theme-dark .btn-round.dark-mode-switch,
.text-size-large .btn-round.text-size-switch,
.prefers-reduced-motion .btn-round.animation-switch { transform: scaleX(1) !important; }
/* Button Icons */
.btn-block-icon { width: 100%; }
.btn-icon, .btn-block-icon a::after { position: absolute; }
.btn-icon .gb-shape svg, .btn-block-icon a::after {
width: 1.2em;
fill: currentColor;
height: 1.2em;
right: var(--pv-space-xl)
}
.gbp-button--primary .gb-shape svg, .gbp-button--secondary .gb-shape svg,
.btn-block-icon a::after {
width: 1.2em;
fill: currentColor;
height: 1.2em;
position: absolute;
right: calc(var(--btn-radius-2) - 0.1em);
top: 50%;
transform: translateY(-50%);
}
.btn-block-icon--plus a::after { content: url('./assets/images/plus-white.svg'); }
/* Other icons */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
.heart::after {
content: ''
}
/* Doc Form */
#frm_form_17_container {
background-color: var(--pv-light-70);
border: 2px solid var(--base);
padding: var(--pv-space-m);
border-radius: var(--btn-radius);
&.with_frm_style .frm_form_fields > fieldset { padding-bottom: 0; }
.wp-editor-tools { display: none; } /* Visual / Code */
.frm_form_field { min-width: 15em; }
}
/* Lightbox */
.baguetteBox-button {
-moz-border-radius: var(--btn-radius);
border-radius: var(--btn-radius);
width: 35px;
-webkit-transition: background-color var(--transition-time);
transition: all var(--transition-time);
opacity: 0.6;
}
.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
top: calc(50% - calc(var(--btn-radius)));
width: calc(var(--btn-radius) * 2);
height: calc(var(--btn-radius) * 2);
}
.baguetteBox-button:hover {
background-color: var(--base-2);
opacity: 1;
}
.baguetteBox-button svg {
left: 50%;
zoom: 0.9;
top: 50%;
transform: translate(-50%, -50%);
}
#close-button.baguetteBox-button svg { }
/* Back to top */
a.generate-back-to-top {
border: 1px solid var(--contrast-3);
position: fixed;
bottom: var(--copybar-center);
right: var(--copybar-center);
opacity: 0.001;
transform: none;
transition: all var(--transition-time);
pointer-events: none;
}
.generate-back-to-top__show { opacity: 0; } /* override theme default*/
.generate-back-to-top.generate-back-to-top__show {
opacity: 1;
pointer-events: all;
}
.generate-back-to-top .gp-icon svg {
height: 1.5em;
top: 0.18em;
}
.main-navigation {
button:hover, button:focus {
background-color: transparent;
color: var(--base);
box-shadow: none;
}
}
.interface-navigable-region, .components-popover { /* Gutenberg*/
button:hover, button:focus {
background-color: transparent;
color: currentColor;
box-shadow: none;
}
}
html :where(.wp-block) {
.wp-block-button__link, .wp-block-more input, .wp-block-search__button {
/* If not important, will be overwritten by root styles in editor*/
padding: var(--button--padding) !important;
font-weight: var(--button--font-weight) !important;
color: var(--contrast-3) !important;
background-color: var(--base) !important;
border-radius: var(--btn-radius) !important;
border: none !important;
}
}
/* Search */
.wp-block-search__button { white-space: nowrap; }
/** Buttons END **/
/*** Layout ***/
div#page {
position: relative;
padding-bottom: var(--pv-space-2xl);
background-color: var(--contrast-3);
}
body { position: relative; }
.site {
width: 100%;
background: url(https://pvms.dev/wp-content/uploads/2025/05/veloweg-05.svg) center no-repeat;
background-size: max(2035px, 100%);
background-position: center max(340px, 50%);
/*background-position: center 30vh;background-attachment: fixed;*/
}
.doc-template-default .site { background-position-y: calc(100% + 22rem); }
.home .site { background-position: center max(340px, 30%); }
.accessible, .darklup-font-mode-enabled, .cf-theme-dark, .text-size-large {
.site { background: none; }
}
#primary { margin: 0 auto; }
.full-width-content #primary { width: 100%; }
.site-content .content-area { width: 100% !important; } /*RL250805 otherwise map issue on mobile */
/* Top Bar / Mobile menu / Off Canvas Panel */
.top-bar, #gb-header .top-bar {
background-color: var(--contrast-3);
font-size: var(--pv-text-s);
z-index: 10000;
}
.top-bar-align-right, #gb-header .top-bar {
position: relative;
width: 100%;
padding: var(--pv-space-s) calc(var(--pv-space-s) + var(--pv-space-xs)) 0 var(--pv-space-s);
}
.top-bar-align-right .widget:nth-child(2n) { order: inherit; /* Order as set in widgets */ }
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
border: none;
padding: 0;
}
.top-bar .inside-top-bar, #gb-header .top-bar {
height: var(--top-bar--height);
max-width: var(--gb-container-width);
}
.top-bar, .inside-navigation {
/* Social Media */
.wp-block-social-links {
filter: grayscale(1) opacity(0.6);
transition: all var(--transition-time);
margin-right: var(--pv-space-xs);
line-height: 1;
white-space: nowrap;
}
.wp-block-social-links .wp-block-social-link.wp-social-link {
margin-right: 0.2rem;
}
.wp-block-social-links .wp-block-social-link.wp-social-link a,
.wp-block-social-links .wp-social-link svg {
height: 2rem;
width: 2rem;
padding: 0 !important;
}
.wp-block-social-links .wp-social-link svg { margin: 0.1rem; }
.wp-block-social-links:hover {
filter: grayscale(0) opacity(1);
transform: scale(1.05) !important;
}
}
.inside-navigation {
.wp-block-social-links {
filter: grayscale(0) opacity(1);
}
}
.top-content {
column-gap: var(--pv-space-m);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
justify-items: stretch;
row-gap: var(--pv-space-m);
padding-left: var(--pv-space-m);
padding-right: var(--pv-space-m);
background-blend-mode: normal;
background-image: var(--inline-bg-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gbp-section__inner.top-content-logo {
position: absolute;
margin: unset;
z-index: 4
}
.wp-block-social-link:hover {
transform: scale(1.05) !important;
box-shadow: var(--pv-shadow-m);
}
.inside-top-bar, #generate-slideout-menu {
/* Search */
input[type="search"] {
color: var(--contrast);
background-color: var(--contrast-3);
border-color: var(--darkgrey);
padding: 3px 6px 2px;
border-radius: var(--btn-radius);
border-width: 2px;
border-style: solid;
}
input.wp-block-search__input[type="search"] {
font-size: var(--pv-text-s);
width: 4rem;
transition: all var(--transition-time);
&:hover, &:active, &:focus {
border-color: var(--base-2);
width: 10rem;
}
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) {
/*color: var(--contrast);*/
border-radius: var(--btn-radius);
padding: 0 8px !important;
line-height: 1;
}
.inverse button, button.inverse { color: var(--contrast-3); }
.widget_search, .wp-block-search {
opacity: 0.6;
filter: saturate(0);
transition: all var(--transition-time);
input[type="search"] { border-width: 2px; }
}
.widget_search:hover, .widget_search:focus, .widget_search:active, .widget_search:focus-within,
.wp-block-search:hover, .wp-block-search:focus, .wp-block-search:active, .wp-block-search:focus-within {
opacity: 1;
filter: saturate(1);
/*input[type="search"] { border-width: 2px; }*/
}
.wp-block-search__button {
margin-left: 4px;
font-size: var(--pv-text-s);
}
.wp-block-search__button:hover {
background-color: var(--base-2);
color: var(--contrast-3);
}
}
/*** Header ***/
header.site-header {
padding: 0 var(--pv-space-s);
z-index: 10000;
}
header.entry-header { padding: var(--pv-space-2xl) 0; }
.search header.entry-header { padding: var(--pv-space-m) 0; }
/* Navigation - deprecated */
#primary-menu .menu-item-home {
a { padding: calc(var(--pv-space-xs) * 1.5) var(--pv-space-xs); }
svg { height: 1.5rem; }
}
.main-navigation { position: relative; }
.main-navigation .main-nav ul li a, .main-navigation .menu-bar-item > a {
padding: var(--pv-space-s) var(--pv-space-l) calc(var(--pv-space-s) * 2);
line-height: 1; /* determines navigation bar height */
}
button.menu-toggle { font-size: var(--menu-toggle-size); }
.main-navigation.has-branding .menu-toggle,
.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
padding: var(--pv-space-m) var(--pv-space-m) calc(var(--pv-space-l));
line-height: 1;
}
#generate-slideout-menu {
border-top-left-radius: var(--btn-radius);
border-bottom-left-radius: var(--btn-radius);
}
.main-navigation a {
font-size: var(--nav-text-size);
font-weight: 500;
}
.main-navigation .site-logo a, .main-navigation .site-logo a { font-size: var(--logo-text-size); }
.main-navigation .main-nav ul li a {
line-height: 1;
padding: calc(var(--pv-space-s) * 1.5) var(--pv-space-s);
}
.main-navigation .main-nav ul li:last-child a { padding-right: 0; }
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a { transition: all var(--transition-time); }
.menu-item-has-children .dropdown-menu-toggle {
padding: 0 0 0 var(--pv-space-4xs);
top: 0.1em;
margin: -10px 0; /* remove height effect */
position: relative;
}
/* Dropdown */
.slideout-navigation .menu-item-has-children .dropdown-menu-toggle { font-size: 115%; }
ul#menu-main li,
ul.menu-main li { position: relative; z-index: 0; }
.gb-menu-container--mobile ul#menu-main > li a,
.gb-menu-container--mobile ul.menu-main > li a { padding-bottom: 0.7em !important; }
ul#menu-main ul,
ul.menu-main ul {
list-style: none;
margin: 0;
}
.main-navigation ul ul,
ul#menu-main ul,
ul.menu-main ul {
position: absolute;
top: 3em;
opacity: 0;
display: block;
float: left;
left: auto;
height: auto;
width: fit-content;
min-width: 10em;
text-align: left;
overflow: hidden;
background-color: var(--contrast-3);
border-radius: var(--btn-radius);
box-shadow: var(--pv-shadow-m);
padding: var(--pv-space-2xs) 0;
pointer-events: none;
transition: opacity var(--transition-time);
transition-delay: 0ms;
z-index: 99999;
}
.gb-menu-container--mobile ul#menu-main ul,
.gb-menu-container--mobile ul.menu-main ul {
position: relative;
top: 0;
}
.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul,
ul#menu-main li:hover>ul, ul#menu-main li>ul:hover,
ul#menu-main li:hover>ul, ul.menu-main li>ul:hover {
opacity: 1;
pointer-events: auto;
overflow: visible;
transition-delay: 0ms;
}
.main-navigation .main-nav ul ul li a, ul#menu-main ul li a,
.main-navigation .main-nav ul ul li a, ul.menu-main ul li a {
font-size: var(--pv-text-m);
padding: var(--pv-space-3xs) var(--pv-space-m);
}
/*gb-navigation gb-navigation-590832e6 gb-navigation--mobile gb-navigation--open*/
ul#menu-main,
ul.menu-main {
display: flex;
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
a {
padding: calc(var(--pv-space-xs) * 1.5) var(--pv-space-xs);
transition: all var(--transition-time);
line-height: 1;
color: var(--darkgrey);
font-size: var(--nav-text-size);
font-weight: 510;
white-space: nowrap;
}
li[class*="current-menu-"] > a,
ul li:not([class*="current-menu-"]):hover > a, ul li:not([class*="current-menu-"]):focus > a, ul li.sfHover:not([class*="current-menu-"]) > a {
color: var(--base);
}
a:hover { color: var(--darkgrey) !important; }
a:not(:has(span:hover)):hover { color: var(--base) !important; }
}
:where(.gb-submenu-toggle) {
align-items: center;
align-self: stretch;
display: flex;
justify-content: center;
line-height: 0;
width: 2rem;
font-size: 1.2em;
top: -0.3em;
;
position: relative;
}
/** Mobile slideout navigation **/
#generate-slideout-menu {
button.slideout-exit {
color: var(--pv-darkgrey);
background-color: var(--contrast-3);
}
button.slideout-exit:hover { color: var(--base); }
aside {
width: 100%;
text-align: center;
}
}
.slideout-widget.widget_search {
max-width: 14rem;
margin-left: auto;
margin-right: auto;
}
.gb-navigation.gb-navigation--mobile .overlay {
opacity: 0;
transition: opacity var(--transition-time);
}
.gb-navigation.gb-navigation--mobile.gb-navigation--open .overlay {
opacity: 1;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000000bb;
backdrop-filter: blur(3px);
}
.gb-navigation.gb-navigation--mobile,
.gb-menu-container.gb-menu-container--mobile,
button.gb-menu-toggle {
align-self: center;
width: min(100%, 20rem);
}
button.gb-menu-toggle:not(.main-toggle) .gb-menu-close-icon svg {
color: var(--base);
height: 1.2em;
margin-bottom: -0.2em;
}
.gb-navigation.gb-navigation--mobile { z-index: 10001; }
.gb-menu-container.gb-menu-container--mobile { /* NEU */
position: fixed;
height: 100svh;
left: auto;
top: 0;
background-color: var(--contrast-3);
border-top-left-radius: var(--btn-radius);
border-bottom-left-radius: var(--btn-radius);
box-shadow: rgba(0, 0, 0) 0 0 1rem 0;
overscroll-behavior: none;
ul#menu-main,
ul.menu-main {
flex-direction: column;
z-index: 1;
position: relative;
background-color: var(--contrast-3);
}
:where(.gb-navigation[data-gb-mobile-menu-transition]) & {
transition: opacity var(--transition-time) ease,transform var(--transition-time) ease,display var(--transition-time) allow-discrete;
/*transition: all var(--transition-time);*/
}
}
/* Sticky Header */
#sticky-navigation {
box-shadow: var(--pv-shadow-l);
border-bottom-right-radius: var(--btn-radius);
border-bottom-left-radius: var(--btn-radius);
}
/*.main-navigation.stuckElement.is_stuck {
transform: translateY(-100%);
animation: sticky-nav-in 0.3s linear forwards;
}
@keyframes sticky-nav-in {
0% { transform: translateY(-100%) }
100% { transform: translateY(0%) }
}*/
.main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
padding: 0 var(--pv-space-s);
a { font-size: var(--pv-text-m); }
}
.site-logo img, .site-logo.mobile-header-logo img,
.navigation-branding .sticky-navigation-logo img {
display: block;
height: var(--logo-height) !important; /* navigation bar height + top bar text height */
width: auto;
max-width: 14rem;
}
.site-logo.mobile-header-logo img { max-height: 50px !important; /* not to be toggled */ }
.navigation-branding img, .site-logo.mobile-header-logo img { padding: 0 !important; }
.site-logo, .mobile-header-navigation .site-logo {
align-self: flex-start;
margin-top: calc(0px - var(--top-bar--height));
}
.header-logo img {
max-height: var(--logo-height) !important;
width: auto;
}
/* Mobile Navigation Bar */
#mobile-header { z-index: 10001; }
.mobile-header-navigation .site-logo { margin: calc(0.7rem - var(--top-bar--height)) var(--pv-space-s) 0 !important; }
/* Slideout / Off Canvas*/
#generate-slideout-menu, .gb-navigation--mobile {
z-index: 100001;
nav:not(.is-open) .gp-icon svg {
height: 1.5em;
width: 1.5em;
}
button.slideout-exit {
padding: 1.2rem 2rem !important;
text-align: right;
font-size: 2em;
}
.main-nav .gp-icon svg {
height: 1.1em;
width: 1.1em;
top: .05em;
}
.menu-item-has-children .dropdown-menu-toggle {
padding: 0 2rem 0 0.5rem;
top: 0.1em;
position: relative;
}
.main-nav ul li > a {
padding: 1rem 0 0.5rem 2rem;
line-height: 1rem;
font-size: var(--pv-text-l);
-webkit-tap-highlight-color: transparent;
/*transition: padding var(--transition-time);*/
}
.main-nav ul li.current_page_item > a { color: var(--base) !important; }
.main-nav ul li a:hover { color: var(--base); }
.gb-submenu-toggle {
justify-content: right;
width: 5rem;
}
.gp-icon svg { fill: var(--pv-darkgrey); }
.gp-icon .gb-submenu-toggle:hover svg { fill: var(--base); }
.main-nav ul ul {
box-shadow: none;
display: block !important;
overflow: hidden !important;
opacity: 0 !important;
padding: 0 0 0 2rem;
list-style: none;
margin: 0;
transition: opacity var(--transition-time-slow), padding-top var(--transition-time-slow), padding-bottom calc(var(--transition-time-slow) / 2);
}
.main-nav ul ul.toggled-on, .main-nav ul .gb-sub-menu--open ul {
padding-bottom: var(--pv-space-xs);
opacity: 1 !important;
}
.main-nav ul ul li {
height: 0;
transition: height var(--transition-time-slow);
a {
font-size: 1em;
padding: 0 0.66rem;
transition: padding var(--transition-time-slow);
}
}
.main-nav ul ul.toggled-on li, .main-nav ul .gb-sub-menu--open ul li {
height: 2.32rem;
a { padding: 0.66rem; }
}
}
.gb-navigation--mobile {
#menu-main.gp-icon svg,
.menu-main.gp-icon svg { /* NEU */
height: 1.2em;
width: 1.1em;
right: 0.8em;
top: 0;
}
}
/* Overlay w/ animation */
.slideout-navigation.main-navigation:not(.is-open):not(.slideout-transition) {
display: block !important;
}
.slideout-overlay {
opacity: 0;
visibility: hidden;
backdrop-filter: blur(3px);
/*animation: overlay-closed 0.3s linear forwards;*/
}
body.offside-js--is-open .slideout-overlay {
opacity: 0;
background-color: rgb(0 0 0 / 42%);
animation: overlay-open 0.3s linear forwards;
}
#generate-slideout-menu:not(.is-open) {
box-shadow: 0 0 0 0 #00000000;
animation: slideout-closed 0.3s linear forwards;
}
body.wdb-loading #generate-slideout-menu { box-shadow: 0 0 0 0 #00000000 !important; }
#generate-slideout-menu.is-open { animation: slideout-open 0.3s linear forwards; }
@keyframes slideout-open {
0% { box-shadow: 0 0 0 0 #00000000; }
100% { box-shadow: 0 0 100vw 33vw #00000099; }
}
@keyframes slideout-closed {
0% { box-shadow: 0 0 100vw 33vw #00000099; }
100% { box-shadow: 0 0 0 0 #00000000; }
}
@keyframes overlay-open {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes overlay-closed {
0% {
visibility: visible;
/*background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);*/
opacity: 0.3;
}
100% {
visibility: hidden;
opacity: 0;
}
}
.page-id-2974 { /* Accessibility page */
.top-bar.top-bar-align-right, #mobile-header { display: none !important; }
}
.header-container {
background-color: var(--contrast-3);
border-radius: 0 0 var(--btn-radius) var(--btn-radius);
box-shadow: 0 0 0 0 #00000000;
position: sticky;
z-index: 20;
top: 0;
transition: all var(--transition-time);
}
.header-container.stuck { box-shadow: var(--pv-shadow-l); }
.scrolling-down .header-container {
top: calc(0px - var(--header--height));
box-shadow: var(--pv-shadow-dark-l);
}
#gb-header {
column-gap: 0;
display: grid;
grid-template-columns: min-content 1fr min-content;
grid-template-rows: min-content min-content;
row-gap: 0;
max-width: var(--content--max-width);
margin: 0 auto;
z-index: 10000;
.header-logo {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 2;
object-fit: cover;
padding: 1.1rem 0 0 1em;
width: 17rem;
max-width: 75vw;
}
.header-content { /* gone ... */
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
}
.buttons-cta {
column-gap: var(--pv-space-3xs);
flex-wrap: nowrap;
margin: 1rem 1em 1rem;
a {
padding: 0.1rem var(--pv-space-2xs);
font-family: var(--gp-font--source-sans-3);
font-size: var(--pv-text-s);
line-height: 1.5 ! important;
white-space: nowrap;
outline: 2px solid var(--base);
}
a.is-external-link { padding-right: var(--pv-space-5xs) };
a:hover { outline-color: var(--base-2) !important; }
.button--newsletter a {
background-color: var(--contrast-3);
color: var(--contrast) !important;
outline: 2px solid var(--contrast);
}
.button--newsletter a:hover { color: var(--base-2) !important; }
}
.gb-navigation {
grid-column-start: 2;
grid-column-end: span 2;
display: flex;
justify-self: end;
}
.gb-menu-link {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
column-gap: var(--pv-text-3xs);
padding: 1rem 0.7em;
line-height: 1;
}
ul ul .gb-menu-link { padding: 0.8rem 1em; }
ul#menu-main > li > a,
ul.menu-main > li > a { padding-bottom: 2rem !important; }
.gb-menu-container--mobile {
button.gb-menu-toggle {
position: sticky;
top: 0;
background: white;
border-radius: 0;
z-index: 2;
}
button.gb-menu-toggle.intersected { box-shadow: var(--pv-shadow-m); }
ul#menu-main > li a,
ul.menu-main > li a { padding-bottom: 1rem !important; }
}
li:last-child .gb-menu-link { padding-right: 1em; }
.gb-menu-link svg {
top: .2em;
position: absolute;
color: var(--darkgrey);
right: 0;
}
.gb-menu-link:hover svg { color: var(--base); }
.gb-menu--base .gb-submenu-toggle-icon {
transform: none !important;
transition: transform var(--transition-time);
}
.gb-menu-container--mobile {
.gb-menu--base .gb-submenu-toggle[aria-expanded=true] > .gb-submenu-toggle-icon,
.gb-menu--base .menu-item > a[aria-expanded=true] > .gb-submenu-toggle-icon { transform: scaleY(-1) !important; }
}
.menu-item-home {
.gb-menu-container--mobile & svg {
right: 0 !important;
height: 1.4em;
width: auto;
}
a { padding: 0.7rem 1em; }
svg {
position: relative;
height: 1.6rem;
width: auto;
top: 0;
}
}
button.gb-menu-toggle {
display: none; /* < 1024px flex */
font-size: var(--menu-toggle-size);
padding: var(--pv-space-s) var(--pv-space-l) calc(var(--pv-space-s) * 2);
line-height: 1; /* determines navigation bar height */
background: none;
justify-content: end;
span { line-height: 1; }
svg {
height: 1em;
width: auto;
top: .125em;
position: relative;
color: var(--darkgrey);
}
}
button.gb-menu-toggle:hover, button.gb-menu-toggle:focus, button.gb-menu-toggle:active {
/*background-color: transparent;*/
box-shadow: none;
}
button.gb-menu-toggle:hover svg { color: var(--base); }
}
#gb-header .top-bar { /* NEU */
display: flex;
flex-wrap: nowrap;
justify-content: end;
align-items: center;
margin: 1rem 0 1rem;
padding: 0;
font-family: var(--gp-font--hepta-slab);
color: var(--pv-darkgrey) !important;
font-weight: 400;
text-transform: none;
height: 2.5rem;
input, button { font-family: var(--gp-font--hepta-slab); }
&:first-child { margin-left: auto; }
& > * {
padding: 0;
display: inline-block;
margin: 0 var(--pv-space-xs);
.hasSpacing li { margin: 0 var(--pv-space-3xs) !important; }
width: fit-content !important;
}
& > style { display: none; }
/* Language switcher */
.wp-block-navigation ul { display: flex; }
.wp-block-navigation ul li { text-transform: uppercase; }
/* Search */
input[type="search"] {
color: var(--contrast);
background-color: var(--contrast-3);
border-color: var(--darkgrey);
padding: 3px 6px 2px;
border-radius: var(--btn-radius);
border-width: 2px;
}
input.wp-block-search__input[type="search"] {
font-size: var(--pv-text-s);
width: 4rem;
transition: all var(--transition-time);
&:hover, &:active, &:focus {
border-color: var(--base-2);
width: 10rem;
}
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) {
color: var(--contrast);
border-radius: var(--btn-radius);
padding: 0 8px !important;
line-height: 1;
}
.inverse button, button.inverse { color: var(--contrast-3); }
.search-group {
display: flex;
align-items: center;
justify-content: end;
column-gap: 0;
width: fit-content;
height: 4rem;
.search-icon {
position: relative;
cursor: pointer;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.search-icon.close { padding: 0.4rem; }
&.search-open .search-icon, .search-icon.close { display: none; }
&.search-open .search-icon.close { display: block; }
.search-icon svg, .search-icon.close svg {
opacity: 1;
height: 100%;
width: 100%;
fill: var(--darkgrey);
filter: drop-shadow(0 0 0 transparent);
transition: all var(--transition-time);
}
.search-icon:hover svg, .search-icon.close:hover svg {
fill: var(--base); color: var(--base);
filter: drop-shadow(1px 1px 2px var(--pv-shadow-primary));
}
.wp-block-search {
display: flex;
align-items: center;
position: absolute;
opacity: 0;
width: 0;
padding: 0;
height: 0;
margin-right: 0;
overflow: hidden;
transition: all var(--transition-time);
background: transparent;
border-radius: var(--btn-radius);
}
&.search-open .wp-block-search {
opacity: 1;
width: 15rem;
height: 3rem;
padding: 0 0.75em;
margin-right: 2rem;
background: var(--bg-dark-mode-text);
}
.wp-block-search__label { display: none; }
input.wp-block-search__input[type="search"] {
border-width: 1px;
color: var(--contrast);
background-color: var(--contrast-3);
border-color: var(--darkgrey);
padding: 3px 6px 2px;
border-radius: var(--btn-radius);
}
.wp-block-search__button { font-size: var(--pv-text-s); }
}
}
/*** Main Content ***/
.one-container .site-content {
overflow-wrap: anywhere;
margin: 0 auto;
}
.site { min-height: calc(100vh - var(--header--height) - var(--footer--height)); }
/* Hero */
.hero { position: relative }
.hero-gradient { background-image: linear-gradient(to right, rgba(204, 51, 51, 0.25) 0%, rgba(204, 51, 51, 0) 95%, rgba(204, 51, 51, 0) 0%); }
header.hero {
container-name: header;
display: flex;
flex-direction: row;
justify-content: space-between;
row-gap: 2rem;
background-image: var(--inline-bg-image);
background-blend-mode: normal;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*border: 0.3px solid white; /* fix for overflowing image (line under hero title) */
position: relative;
min-height: clamp(20rem, 12.885rem + 18.846vw, 30rem);
border-radius: var(--btn-radius);
margin: 0 auto;
padding: 2rem 0 0 0;
width: 100%;
max-width: var(--full--max-width);
z-index: 3;
opacity: 1;
animation: hero-blend-in 1.0s linear forwards;
.title-wrapper { /* area */
backdrop-filter: blur(3px);
/*https://codepen.io/kevinpowell/pen/LYgMQpQ*/
position: relative;
top: 0.5px; /* fix for overflowing image (line under hero title) */
background: var(--bg-title-wrapper);
align-self: end;
width: fit-content;
padding: var(--pv-text-3xl) 0;
border-radius: 0 var(--btn-radius) 0;
/*min-width: min(22rem, 100%);*/
max-width: calc(100% - var(--btn-radius) * 3);
&::before, &::after {
content: '';
background-image: radial-gradient(
circle at 100% 0%,
transparent var(--btn-radius),
var(--bg-title-wrapper) var(--btn-radius)
);
height: var(--btn-radius);
width: var(--btn-radius);
display: block;
position: absolute;
bottom: 0;
right: calc(0px - var(--btn-radius));
}
&::after {
bottom: auto;
right: auto;
top: calc(0px - var(--btn-radius));
}
.news-date, .event-date {
color: white;
font-size: var(--pv-text-xl);
position: absolute;
left: var(--pv-space-l);
top: calc(0px - var(--pv-text-3xl) - var(--pv-text-s));
text-shadow: 0 0 1px var(--contrast);
}
.event-date {
white-space: nowrap;
line-height: 1;
top: calc(0px - var(--pv-text-xl) * 2 - var(--pv-text-s));
}
h1, h2 {
padding: 0 var(--pv-space-2xl) 0 var(--pv-space-l);
margin: 0 auto;
}
}
h1, h2 {
font-size: var(--pv-text-4xl);
font-weight: var(--header--font-weight);
line-height: 1.1;
text-shadow: 0 0 2em var(--contrast-3), 0 0 2em var(--contrast-3);
max-width: var(--content--max-width);
}
h2 {
font-size: var(--pv-text-2xl);
font-weight: normal;
margin-top: var(--pv-space-s);
}
.hero-teaser-box {
display: flex;
flex-direction: column;
column-gap: var(--pv-space-m);
align-self: end;
height: fit-content;
width: 75%;
max-width: 50rem;
padding: var(--pv-space-m);
margin-top: var(--pv-space-2xl);
margin-left: var(--pv-space-3xl);
color: var(--contrast-3);
background-color: var(--pv-dark-50);
border-radius: var(--btn-radius);
backdrop-filter: blur(6px);
}
.hero-teaser-title {
margin-top: 0;
margin-bottom: var(--pv-space-m);
color: var(--contrast-3);
font-size: calc(var(--pv-text-xl) * 1.2);
font-weight: var(--header--font-weight);
}
.hero-teaser-text {
font-size: 1.4rem;
line-height: 1.3;
align-self: start;
}
.hero-button-container {
display: flex;
justify-content: left;
align-items: center;
justify-items: stretch;
justify-self: center;
align-self: end;
flex-direction: row;
column-gap: var(--pv-space-m);
row-gap: var(--pv-space-m);
width: 100%;
}
.hero-button {
width: 100%;
max-width: 15rem;
}
}
@keyframes hero-blend-in {
0% { opacity: 0; }
66% { opacity: 0; }
100% { opacity: 1; }
}
.bg-shift-down-25 header.hero { background-position-y: 25%; }
.page-id-3805 header.hero, .bg-shift-down-30 header.hero { background-position-y: 30%; }
.bg-shift-down-35 header.hero { background-position-y: 35%; }
img.object-position-15 { object-position: 0 15%; }
img.object-position-30 { object-position: 0 30%; }
.background-video-content {
position: relative;
z-index: 2
}
.hero-content-width {
aspect-ratio: 2/1;
background-blend-mode: normal;
background-color: var(--contrast-3);
background-image: linear-gradient(to right, #cc333322 0%, var(--base) 100%, var(--base) 0%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
margin-left: auto;
margin-right: auto;
max-height: 450px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: var(--gb-container-width);
z-index: 3
}
.hero-full-width {
aspect-ratio: 2/1;
background-blend-mode: normal;
background-color: var(--contrast-3);
background-image: linear-gradient(to right, #cc333322 0%, var(--base) 100%, var(--base) 0%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
margin-left: auto;
margin-right: auto;
max-height: 450px;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 100%;
z-index: 3;
padding: 0
}
.hero-overlay {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: absolute;
width: 100%;
z-index: 2
}
.hero-logo {
left: var(--pv-space-s);
position: absolute;
top: var(--pv-space-s);
z-index: 4
}
.hero-logo-image {
border-bottom-right-radius: var(--pv-radius-s);
display: block;
height: auto;
max-width: 100%;
min-width: 14rem;
object-fit: cover;
padding-bottom: var(--pv-space-2xs);
padding-right: var(--pv-space-2xs);
padding-top: var(--pv-space-2xs);
width: auto
}
.hero-headline {
font-size: var(--pv-text-4xl);
font-weight: var(--header--font-weight);
margin: 0;
}
.hero-text {
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 100%;
width: 100%;
z-index: 3
}
.hero-content__text {
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 100%;
width: 100%;
z-index: 3
}
.video-hero {
height: clamp(11rem, 5.808rem + 23.077vw, 26rem);
max-width: 1400px;
padding-top: 0;
}
.video-hero-text {
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 100%;
width: 100%;
z-index: 3
}
.video-overlay {
background-image: linear-gradient(to right, #00000066 0%, #ffffff00 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover
}
.entry-header h1, .page-header h1, .entry-title a { color: var(--base); }
.entry-header h2 { margin-top: var(--pv-text-xl); }
/* Responsive gutter for main content */
.main-content {
justify-self: center;
margin-left: auto;
margin-right: auto;
padding: var(--pv-space-xl) var(--pv-space-l);
width: var(--gb-container-width);
max-width: 100%;
.sidebar {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
.anchor-navigation .main-content { padding-top: var(--pv-space-m); }
.main-content:last-child { padding-bottom: 0; }
.main-content.fill-height { min-height: calc(100vh - 10rem); /* keep footer at bottom */ }
.has-hero .main-content { min-height: calc(100vh - 38rem); /* account for hero */ }
/* Sections */
.main-content > .gbp-section { padding-top: 0; }
.gbp-section {
padding: 0;
padding-bottom: var(--pv-space-m);
}
.gbp-section__inner {
margin-left: auto;
margin-right: auto;
max-width: var(--gb-container-width);
position: relative;
z-index: 1
}
.gbp-section__tagline {
font-size: 1rem;
font-weight: var(--header--font-weight);
margin-bottom: 0.75rem;
}
.gbp-section__headline {
font-size: var(--pv-text-4xl);
font-weight: var(--header--font-weight);
margin: 0
}
.section-content {
background-color: var(--contrast-3);
justify-self: center;
max-width: var(--gb-container-width)
}
/*** Footer ***/
#footer, .footer {
/*p, a { font-size: var(--pv-text-footer); }*/
a:not(.gb-text):hover { color: var(--base); }
.inverse & a:not(.gb-text):hover {
color: var(--contrast-3);
text-decoration: underline;
}
.logo img, img.logo {
height: auto;
margin-right: var(--footer__logo--margin);
max-width: min(var(--logo--max-width), 95%);
object-fit: cover;
width: 100%;
min-width: 18rem;
max-width: 22rem;
}
.gbp-button--primary {
display: block;
width: auto;
max-width: 14em;
margin: 0 auto var(--footer__btn--margin) auto;
padding-bottom: var(--footer__btn--padding);
padding-top: var(--footer__btn--padding);
}
.wp-block-social-links {
text-align: right;
display: block;
}
.wp-block-social-links .wp-social-link svg {
height: 1.5em;
width: 1.5em;
}
.wp-block-social-link:hover { transform: scale(1.005); }
.wp-block-social-links a { font-size: var(--pv-text-xl); padding: 0.1em; }
.wp-block-social-links a:hover {
color: inherit;
box-shadow: var(--pv-shadow-m);
border-radius: 50%;
}
.wp-block-navigation__container { display: block; }
.wp-block-navigation .wp-block-navigation-item {
display: block;
text-align: right
}
.webdesign-burgdorf { font-family: Inter, "Source Sans 3", sans-serif, system-ui; }
.webdesign-burgdorf a { font-size: calc(var(--pv-text-m) * 0.75) !important; }
}
.footer {
column-gap: var(--footer--gap);
display: flex;
justify-content: center;
/*grid-template-columns: repeat(4, minmax(0, 1fr));*/
row-gap: 2em;
max-width: var(--gb-container-width);
width: 100%;
margin: 0 auto;
padding: var(--pv-space-xl) var(--pv-space-l) var(--pv-space-m) var(--pv-space-l);
& > div {
flex-grow: 1;
}
& > div.logo { min-width: 20rem; }
}
.footer__shadow {
background-blend-mode: normal;
background-image: linear-gradient(0deg, var(--pv-shadow-primary) 0%, transparent 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 12px;
margin-top: -12px;
position: relative
}
.footer__logo {
flex-basis: 20%;
img {
margin-right: var(--footer__logo--margin);
max-width: min(var(--logo--max-width), 95%);
object-fit: cover;
width: 100%;
}
}
#menu-footer, #menu-footer-fr {
margin: 0;
li { list-style: none; }
}
/* Social Media */
.wp-block-social-link {
transform: scale(1);
box-shadow: 0 0 0 transparent;
transition: all var(--transition-time);
}
.copyright-bar {
padding: var(--pv-space-xs); /* used for to-top */
line-height: 1;
}
.copyright-bar, .copyright-bar a {
font-size: var(--pv-text-s) !important;
}
/*** Blog Detail Page & Page Hero / News ***/
/* WP Standard Post */
.article-meta {
padding: var(--pv-space-xs) max(var(--btn-radius), var(--pv-space-l));
text-align: right;
max-width: var(--content--max-width);
margin: 0 auto;
}
p.path {
padding: var(--pv-space-2xs) var(--pv-space-m) var(--pv-space-3xs);
background: var(--pv-dark-5);
border-radius: 0 0 var(--btn-radius) var(--btn-radius);
font-size: var(--pv-text-s);
width: fit-content;
margin: 0 var(--btn-radius) 0 auto;
}
.event .article-meta {
border-bottom: 1px solid #cc3333;
margin-bottom: 2rem;
padding-left: 0;
padding-right: 0;
display: flex;
flex-direction: row;
row-gap: 2rem;
justify-content: space-between;
font-weight: bold;
}
.article-meta .event-title { text-align: left; }
.main-content.event-gallery { width: 100%; }
.event-location-title {
margin-top: 0;
margin-bottom: var(--pv-space-xs);
}
div#event-map { z-index: 1; }
#event-map img { border-radius: 0; }
.single-post .entry-meta {
font-size: 85%;
margin: auto 0 1rem 1rem;
line-height: 1.5;
}
.article-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
column-gap: var(--pv-space-xl);
row-gap: var(--pv-space-xl);
}
.article-text {
flex: 1 1 40rem;
max-width: var(--text-max-width);
margin: 0 auto;
}
.article-text__wide, .width-wide .article-text {
max-width: var(--text-max-width-wide);
h1, h2, h3, h4, h5, h6, p, li { max-width: var(--text-max-width); }
}
.article-text__full, .width-full .article-text { max-width: 100%; }
.entry-content:not(.has-image) {
.article-text {
padding: var(--pv-space-m);
background: var(--bg-transparent);
border-radius: var(--btn-radius);
}
}
.article-image {
flex: 1 1 20rem;
text-align: center;
img { width: var(--text-max-width); }
}
/* Sidebar */
.sidebar-right { padding-left: var(--pv-space-s); }
.sidebar-title-h2 {
font-size: var(--pv-text-ms);
/*font-size: var(--pv-text-s); /* Hepta Slab */
margin-bottom: 0;
margin-top: 0;
}
.post-date {
font-size: var(--pv-text-s);
/*font-size: var(--pv-text-xs); /* Hepta Slab */
margin-bottom: 0;
}
/* Post Navigation */
.post-navigation {
margin: var(--pv-space-xl) auto 0;
max-width: var(--content--max-width);
padding: 0 var(--pv-space-l);
overflow: hidden;
}
.post-navigation-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--pv-space-m);
}
.nav-next {
/*text-align: right;*/
margin: 0 0 0 auto;
}
.nav-previous, .nav-next { max-width: 48%; }
.nav-previous a, .nav-next a {
position: relative;
display: flex;
text-align: left;
justify-content: center;
}
.nav-previous a { padding-left: 2.5em; }
.nav-next a {
padding-right: 2.5em;
justify-content: flex-end;
}
.wp-block-post-navigation-link a { max-width: 100%; white-space: normal; }
.wp-block-post-navigation-link a[rel="next"] { padding-right: 2em; padding-left: 1em;}
.wp-block-post-navigation-link a[rel="prev"] { padding-left: 2em; padding-right: 1em; }
.nav-arrow {
font-size: 1.5rem;
line-height: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0.6rem;
}
.nav-next .nav-arrow {
left: auto;
right: 0.6rem;
}
.nav-arrow svg {
position: relative;
bottom: 1px;
}
@media (max-width: 768px) {
/*.post-navigation-links { flex-direction: column; } not necessary */
.nav-previous, .nav-next {
width: fit-content;
max-width: 80%;
}
}
/*** Utilities ***/
/* Colors */
.pv-dark { border-color: var(--pv-dark); }
.pv-border-primary { border-color: var(--pv-border-primary); }
.bg-red-20 {
background-blend-mode: normal;
background-color: var(--pv-primary-20);
background-image: linear-gradient(to right, var(--pv-primary-5) 0%, var(--pv-primary-20) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover
}
.box-decoration-break { box-decoration-break: clone; }
/* Margins */
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--pv-space-s) !important; }
.mt-m { margin-top: var(--pv-space-m) !important; }
.mt-l { margin-top: var(--pv-space-l) !important; }
.mt-xl { margin-top: var(--pv-space-xl) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-s { margin-bottom: var(--pv-space-s) !important; }
.mb-m { margin-bottom: var(--pv-space-m) !important; }
.mb-l { margin-bottom: var(--pv-space-l) !important; }
.mb-xl { margin-bottom: var(--pv-space-xl) !important; }
.mb-minus-2xl { margin-bottom: calc(0px - var(--pv-space-2xl)) !important; }
/* content padding bottom */
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.m-0-auto { margin: 0 auto !important; }
.m-l-auto { margin: var(--pv-space-l) auto !important; }
.m-xl-auto { margin: var(--pv-space-xl) auto !important; }
/* Paddings */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.p-xl-auto { padding: var(--pv-space-xl) !important; }
/* deprecated */
.p-m { padding: var(--pv-space-l) !important; }
.p-l { padding: var(--pv-space-l) !important; }
.p-xl { padding: var(--pv-space-xl) !important; }
.p-2xl { padding: var(--pv-space-2xl) !important; }
.p-3xl { padding: var(--pv-space-3xl) !important; }
/* Table column widths */
.tw-20.wp-block-table table { width: 20%; }
.tw-30.wp-block-table table { width: 30%; }
.tw-40.wp-block-table table { width: 40%; }
.tw-50.wp-block-table table { width: 50%; }
.tw-60.wp-block-table table { width: 60%; }
.tw-70.wp-block-table table { width: 70%; }
.tw-80.wp-block-table table { width: 80%; }
.tw-90.wp-block-table table { width: 90%; }
.tw-col-1-20 td:first-child, .tw-col-1-20 th:first-child { width: 20%; }
.tw-col-1-30 td:first-child, .tw-col-1-30 th:first-child { width: 30%; }
.tw-col-1-40 td:first-child, .tw-col-1-40 th:first-child { width: 40%; }
.tw-col-1-50 td:first-child, .tw-col-1-50 th:first-child { width: 50%; }
.tw-col-2-20 td:nth-child(2), .tw-col-2-20 th:nth-child(2) { width: 20%; }
.tw-col-2-30 td:nth-child(2), .tw-col-2-30 th:nth-child(2) { width: 30%; }
.tw-col-2-40 td:nth-child(2), .tw-col-2-40 th:nth-child(2) { width: 40%; }
.tw-col-2-50 td:nth-child(2), .tw-col-2-50 th:nth-child(2) { width: 50%; }
.center table { margin: 0 auto; }
.radius-0, .radius-0 img { border-radius: 0 !important; }
.radius-bottom-0 { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.max-w-400 { max-width: 400px !important; }
.h-min-500 { min-height: 500px !important; }
.background {
border-radius: var(--btn-radius);
max-width: var(--full--max-width);
margin: 0 auto;
}
.background--grey {
background-color: var(--pv-dark-10);
.content__box { border: 1px solid var(--pv-dark-10); }
}
.background--red {
background-color: var(--base);
.content__box { border: 1px solid var(--pv-dark-20); }
}
.bg-image {
background-blend-mode: normal;
background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), var(--inline-bg-image) center /cover no-repeat;
}
.bg-image-red {
.content__box { border: 1px solid var(--pv-primary-60); }
}
.content__box {
background-color: var(--contrast-3);
border-radius: var(--btn-radius);
}
.content__box--xl { padding: var(--pv-space-xl); } /* deprecated */
.content-width-half { width: max(50%, 40rem) !important; }
.content-width-fit { width: fit-content !important; }
.center-m { margin: 0 auto; }
/* Grids */
.grid-1-3 {
display: grid;
grid-template-columns: 1fr 3fr;
column-gap: 1em;
row-gap: 1em
}
.test-grid-item {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
border-style: solid;
border-width: 1px;
border-color: var(--pv-dark);
background: var(--pv-dark-5);
}
.test-grid-item * {
border-style: solid;
border-width: 1px;
border-color: var(--pv-dark);
background: var(--pv-primary-l-4);
margin: 0;
padding: 1rem;
}
.hidden { display: none !important;}
.underline {
text-decoration-color: var(--base);
text-decoration-line: underline;
text-decoration-thickness: 4px;
}
.border {
border-style: solid;
border-width: 1px;
}
.inverse, .inverse .h2, .inverse h2 { color: var(--contrast-3) }
.meta-text--bottom {
color: var(--darkgrey);
padding-bottom: var(--pv-space-m);
text-align: right
}
/*** Blocks ***/
/* Gallery */
.wp-block-gallery {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: var(--pv-space-s);
column-gap: var(--pv-space-s);
}
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
aspect-ratio: 4/3;
width: 100%;
}
#baguetteBox-overlay .full-image figure img { border-radius: var(--btn-radius); }
.download-box {
background-color: var(--pv-dark-20);
position: relative;
border-radius: var(--pv-radius-s);
padding: var(--pv-space-m) calc(var(--pv-text-3xl) + var(--pv-space-s) * 2) var(--pv-space-l) calc(var(--pv-text-3xl) + var(--pv-space-s) * 2)
}
.download-box__icon {
background-blend-mode: normal;
background-image: url('./assets/images/pv-arrow-down.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
height: var(--pv-text-2xl);
position: absolute !important;
right: var(--pv-space-s);
top: var(--pv-space-s);
width: var(--pv-text-2xl);
border-radius: var(--btn-radius)
}
.download-box__icon svg {
fill: currentColor;
height: 30px;
width: 30px
}
.download-box p { font-weight: 500; }
.download-box p.download-box__pdf {
font-weight: normal;
color: var(--pv-dark-30)
}
.cp__cta-full-width {
background-color: var(--contrast-2);
margin-bottom: calc(0px - var(--pv-space-2xl));
padding-bottom: var(--pv-space-l);
width: 100%
}
.pv-membership {
max-width: 600px;
margin: var(--pv-space-xl) auto;
padding: var(--pv-space-xl);
border-radius: var(--btn-radius);
}
.caption-top {
margin-bottom: 0;
margin-top: 1rem
}
.iframe-center {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
justify-self: stretch;
left: 50%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
overflow-x: visible;
overflow-y: visible;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0px);
z-index: 1
}
.cta { backdrop-filter: blur(var(--backdrop-blur)); }
/* Open Street Map */
.osm iframe { height: 25rem }
/* Video */
.wp-block-video video {
max-height: 70vh;
width: auto;
max-width: 100%;
}
/** Cards **/
.gb-looper-grid {
display: grid;
column-gap: var(--pv-space-s);
row-gap: var(--pv-space-m);
margin: 1px;
}
.gb-looper-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb-looper-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-looper-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.article-grid { margin-top: var(--pv-space-m); }
.gbp-card { padding: 1.5rem; }
.gbp-card--border {
outline: 2px solid var(--base);
transform: scale(1);
box-shadow: 0 0 0 transparent;
transition: all var(--transition-time);
overflow: hidden;
}
.gb-loop-item, .gbp-card--border, .linked-container { border-radius: var(--btn-radius); }
/* NEU mit Team Cards */
.gbp-card { padding: 1.5rem 0.6rem; }
.gbp-card--border { outline: none; }
/* Appearance animation */
.gbp-card--border:not(.seen-in-view), .linked-container:not(.seen-in-view) {
opacity: 0;
transform: translateY(60px);
}
.gbp-card--border.seen-in-view, .linked-container.seen-in-view {
opacity: 1;
transform: translateY(0) scale(1);
transition: all var(--transition-time);
}
/* Hover animation */
.gbp-card--border, .linked-container {
a.gb-text.read-more {
transform: translateY(100%);
transition: all var(--transition-time);
}
}
.card-group .linked-container { overflow: hidden; }
.gbp-card--border, section:not(.cards--sliding) .linked-container {
a.gb-text.read-more {
height: calc(1em + var(--pv-space-2xs) * 2);
background-color: var(--base-2);
opacity: 0;
}
.read-more::before {
background-image: radial-gradient(circle at 100% 0%, transparent var(--side-radius), var(--base-2) var(--side-radius)) !important;
}
.read-more::after {
background-image: radial-gradient(circle at 0% 0%, transparent var(--side-radius), var(--base-2) var(--side-radius)) !important;
}
backdrop-filter: blur(0px);
transition: all var(--transition-time);
}
.gbp-card--border:not(.no-zoom):hover, section:not(.cards--sliding) .linked-container:hover {
box-shadow: var(--pv-shadow-l);
margin-bottom: 0;
transform: translateY(0) scale(1.005);
backdrop-filter: blur(var(--backdrop-blur));
a.gb-text.read-more {
opacity: 1;
transform: translateY(0);
}
img { transform: scale(1.005); }
}
/* article-grid--multi-rows */
.article-grid--multi-rows .gbp-card--border { padding-bottom: 1.5rem !important; }
.article-grid--multi-rows .gbp-card--border:hover,
.article-grid--multi-rows .gbp-card--border.bottom-in-view {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.article-grid--multi-rows .gbp-card--border.bottom-in-view {
padding-bottom: var(--pv-space-m) !important;
transform: translateY(0) scale(1);
}
.article-grid--multi-rows .gbp-card--border:hover,
.article-grid--multi-rows .gbp-card--border.bottom-in-view:not(.no-zoom):hover {
padding-bottom: var(--pv-space-m) !important;
transform: translateY(0) scale(1.005);
}
.article-grid--multi-rows .gbp-card--border.bottom-in-view { margin-bottom: 0 !important; }
/* Read more! */
/* Show read more on touch devices */
@media (pointer: coarse) and (max-width: 1024px) {
.bottom-in-view {
&.gbp-card--border:not(.no-zoom), section:not(.cards--sliding) &.linked-container {
box-shadow: var(--pv-shadow-l);
margin-bottom: 0;
transform: translateY(0) scale(1.005);
a.gb-text.read-more {
opacity: 1;
transform: translateY(0);
}
img { transform: scale(1.005); }
}
}
}
.card-group {
position: relative;
display: grid;
column-gap: 2.25rem;
row-gap: 2.25rem;
margin-left: auto;
margin-right: auto;
padding-bottom: 1rem;
/*backdrop-filter: blur(3px);*/
&.card-group--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card__image {
aspect-ratio: 3/2;
width: 100%;
object-fit: cover;
filter: brightness(1);
transition: all var(--transition-time);
}
&.card-static .card__image {
object-fit: contain;
padding: 1rem 0;
}
.size-zero {
font-size: 0;
line-height: 0;
height: 0;
width: 0;
opacity: 0;
}
.gbp-card__text {
position: relative;
left: var(--btn-radius);
padding: var(--pv-space-s) var(--pv-space-s);
background: var(--pv-light-70);
border-radius: var(--btn-radius-2);
width: calc(100% - var(--btn-radius) * 2);
min-height: 4rem;
margin-top: 0;
margin-bottom: var(--pv-space-l);
transition: all var(--transition-time);
}
&.card-static .gbp-card__text {
left: 0;
width: 100%;
}
.gbp-card__text h2, .gbp-card__text h3 {
color: var(--base);
margin: 0 0 var(--pv-space-xs);
/* h5 style */
font-size: var(--pv-text-l);
line-height: 1.3;
}
.gbp-card__text p { margin-bottom: var(--pv-space-s); }
.stretch-link a {
position: absolute;
opacity: 0;
inset: 0;
width: 100%;
z-index: 9;
}
.stretch-link a.read-more {
z-index: 8;
}
}
.gbp-card--border .gbp-card__text {
padding: var(--pv-space-s) var(--pv-space-s);
margin-bottom: var(--btn-radius);
}
.gbp-card__text h3:last-child, .gbp-card__text p:last-child { margin-bottom: 0; }
.gbp-card--border.card-group { display: block; }
.cards--sliding .card-group {
row-gap: 0;
& > div { padding-bottom: var(--btn-radius); }
.gbp-card__text { margin: calc(0px - var(--pv-space-l)) 0 var(--pv-space-s); }
& > div:hover {
.card__image { filter: brightness(0.75); }
.gbp-card__text {
/*bottom: calc(var(--btn-radius) + var(--pv-space-s));*/
margin: calc(0px - var(--pv-space-2xl)) 0 calc(var(--pv-space-2xl) - var(--pv-space-l) + var(--pv-space-s));
background: var(--contrast-3);
}
}
}
/* Hover effect on touch devices */
@media (pointer: coarse) {
.cards--sliding .card-group {
& > div.bottom-in-view {
.card__image { filter: brightness(0.75); }
.gbp-card__text {
margin: calc(0px - var(--pv-space-3xl)) 0 calc(var(--pv-space-3xl) - var(--pv-space-l));
background: var(--contrast-3);
}
}
}
}
.gb-loop-item { /* includes sidebar */
position: relative;
/*padding-bottom: var(--btn-radius);*/
width: 100%;
max-width: 30rem;
margin-left: 0; margin-right: auto; /* for alternating position in single column */
&.gbp-card--border { background-color: var(--bg-transparent); }
img {
display: block;
transform: scale(1);
width: calc(100% + 3.2px);
height: auto;
aspect-ratio: 3/3;
max-width: calc(100% + 3.2px);
object-fit: cover;
/*margin: -1.6px -1.6px; to put image on top of border */
transition: all var(--transition-time);
}
&:hover img { transform: scale(1.01) rotate(1deg) !important; }
.prefers-reduced-motion &:hover img { transform: none !important; }
.gbp-card__title, .gbp-card__title a {
font-size: var(--pv-text-l);
font-weight: 450;
margin: var(--pv-space-xs) 0;
}
p.gbp-card__text { margin: 0 0 0 var(--pv-text-m); }
a.gb-text.read-more {
position: absolute;
bottom: -0.5px;
top: auto;
right: auto;
background-color: var(--base);
color: var(--contrast-3);
line-height: 1;
padding: var(--pv-space-2xs) var(--pv-space-m) var(--pv-space-2xs) var(--pv-space-m);
--read-more-height: calc(1em + var(--pv-space-2xs) * 2);
--side-radius: var(--btn-radius);
--top-radius: calc(var(--read-more-height) - var(--side-radius) / 2);
border-radius: var(--btn-radius);
border-top-left-radius: 0; border-top-right-radius: 0;
left: 0;
width: 100%;
text-align: center;
&::before, &::after {
content: '';
background-image: radial-gradient(circle at 100% 0%, transparent var(--side-radius), var(--base) var(--side-radius));
display: block;
position: absolute;
top: auto;
bottom: calc(var(--read-more-height) - 0.5px);
left: 0;
height: var(--btn-radius);
aspect-ratio: 1;
background-repeat: no-repeat;
background-size: cover;
}
&::after {
background-image: radial-gradient(circle at 0% 0%, transparent var(--side-radius), var(--base) var(--side-radius));
left: auto;
right: 0;
}
/* For button in the center */
/*border-radius: 0;*/
&.xxx::before, &.xxx::after {
content: '';
/* ;*/
/* File: cannot change color of svg
background-image: url("./assets/images/sidecurve.svg");*/
display: block;
position: absolute;
top: auto;
bottom: 0;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
transform: translateX(calc(0.5px - var(--pv-space-m) - 100%));
aspect-ratio: 1;
/* Does not work with current browsers:
background-color: var(--contrast-3);
overflow: hidden;
clip-path: path("M 0% 100% L 100% 100% L 100% 0% C 62.5% 0% 75% 100% 0% 100% Z");
-webkit-clip-path: path("M 0% 100% L 100% 100% L 100% 0% C 62.5% 0% 75% 100% 0% 100% Z");*/
}
&.xxx::after {
/*background-image: radial-gradient(circle at 100% 0%, transparent var(--side-radius), var(--base) var(--side-radius));*/
right: 0;
transform: scaleX(-1) translateX(calc(0.5px - 100%));
}
}
}
.gb-loop-item.team-member { max-width: 20rem; }
.events-list .gb-loop-item {
display: flex;
column-gap: var(--pv-space-s);
align-items: center;
img {
aspect-ratio: 4 / 4;
width: 5rem;
}
}
.gbp-card__meta-text {
font-size: calc(var(--pv-text-m) * 0.875);;
margin-bottom: 0.5rem;
}
.gbp-card__meta-text.meta-text--bottom {
position: absolute;
right: var(--pv-space-l);
bottom: var(--pv-space-2xs);
}
.gbp-card__title {
font-size: calc(var(--pv-text-m) * 1.25);
margin-bottom: 0.5rem
}
.gbp-card__text { margin-bottom: 0; }
.card__image {
height: auto;
max-width: 100%;
object-fit: cover;
width: auto
}
.gb-loop-item:nth-child(even) { margin-left: auto; margin-right: 0; }
/** Cards END **/
/*** Event Page ***/
.event-address {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.event-address > div {
flex-grow: 1;
min-width: min(20em, 100%);
}
/* Article List */
.article-list {
.gb-loop-item { max-width: 100%; }
h3 {
line-height: 1;
margin: 0;
a {
font-size: var(--pv-text-xl);
}
}
}
/* Tables */
.page table, .editor-styles-wrapper table { /* Not general backend */
border: 2px solid var(--pv-primary) !important; /* Sets a 2-pixel solid red border around the table */
border-radius: var(--pv-radius-l); /* Rounds the corners with a 10-pixel radius */
border-collapse: separate !important; /* Ensures that cell borders are separate, allowing border-radius to be effective */
border-spacing: 0; /* Removes spacing between cells */
}
.wp-block-table td, .wp-block-table th {
border-top: none;
border-left: none;
border-width: 2px;
border-color: var(--pv-dark);
text-align: left;
}
.wp-block-table td:first-child, .wp-block-table th:first-child { border-left: none; }
.wp-block-table td:last-child, .wp-block-table th:last-child { border-right: none; }
.wp-block-table tr:last-child td { border-bottom: none; }
.wp-block-table thead tr th { border-bottom: 3px solid black; }
.wp-block-table tfoot tr td { border-top: 3px solid black; }
/* Shortcodes / PV Elemente */
.wp-block-wdb-pv-shortcodes {
padding: var(--pv-space-m);
border: 2px solid var(--base);
border-radius: var(--pv-radius-m);
margin-bottom: var(--pv-space-xl);
background-color: var(--bg-transparent);
}
.wp-block-wdb-pv-shortcodes .omcode.debug {
background-color: var(--base);
color: var(--contrast-3) !important;
padding: var(--pv-space-xs);
border-radius: var(--btn-radius);
h4, p {
color: var(--contrast-3) !important;
padding: 0;
margin: var(--pv-space-s) 0 0;
}
p { margin: 0; }
label {
color: var(--contrast-3) !important;
font-weight: var(--header--font-weight);
}
.components-toggle-control { display: flex; }
.components-toggle-control span { order: 2; }
.components-toggle-control label { order: 1; }
}
/* Donations */
#payment-widget-container {
padding: var(--btn-radius);
border-radius: var(--btn-radius);
background-color: var(--contrast-3);
}
#payment-widget-container iframe { min-height: 1400px }
/* YouTube */
iframe#ytplayer-home {
max-width: 100vw;
height: 100vh;
min-height: 100vw;
}
/* so the video can go full screen width */
figure.wp-block-embed-youtube {
border-radius: var(--btn-radius);
overflow: hidden;
}
/* Fade-in effect when video element enters viewport */
.is-type-video:not(.seen-in-view) {
opacity: 0;
transform: translateY(60px);
}
.is-type-video.seen-in-view {
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-time-slow), transform var(--transition-time-slow) !important;
}
/* MailChimp Form*/
/*in formidable-wdb.css*/
.footer-form-container {
padding: var(--pv-space-xl);
background: var(--contrast-2);
& > * { max-width: 26rem; margin-left: auto; margin-right: auto; }
h2 { margin-top: 0; }
}
/* AcyMailing Form*/
p.acysubbuttons { margin-top: var(--pv-space-m); }
.acym_module_form label span, .frm_fields_container label, .frm_primary_label {
left: calc(var(--btn-radius) / 2);
position: relative;
}
/* Download Box */
/* width: var(--content__campaign--width) */
.download-box {
background-image: url(https://pvms.dev/wp-content/uploads/2025/04/download-icon.svg);
background-position: var(--pv-space-s) center;
background-repeat: no-repeat;
background-size: var(--pv-text-3xl);
}
.download-box p, .main-content-campaign .download-box p, .main-content-campaign .download-box a {
font-size: 95%;
margin-bottom: 0;
}
.download-box a, .download-box a:hover, .download-box a:active, .download-box a:focus { color: var(--contrast); }
/* WPML Language Switcher */
.wpml-ls-legacy-list-horizontal { padding: 0 var(--pv-space-s); clear: both }
.wpml-ls-legacy-list-horizontal > ul { padding: 0; margin: 0 !important; list-style-type: none }
.wpml-ls-legacy-list-horizontal .wpml-ls-item { padding: 0; margin: 0; list-style-type: none; display: inline-block }
.wpml-ls-legacy-list-horizontal a { display: block; text-decoration: none; line-height: 1 }
.wpml-ls-legacy-list-horizontal a { padding: 3px 6px; }
.wpml-ls-legacy-list-horizontal a span { vertical-align: middle; }
.wpml-language-switcher-block ul.horizontal-list li {
display: inline-block;
margin: 0;
line-height: 100%;
}
.wpml-language-switcher-block .hasTextTransform { text-transform: uppercase !important; }
.lng-switch-container {
position: absolute !important;
padding: var(--pv-space-3xs) var(--pv-space-2xs);
top: 0;
right: 0;
display: flex;
flex-direction: row;
[data-wpml='language-item']:first-of-type { margin: 0 !important; }
.wpml-language-switcher-block { display: block; }
.wpml-language-switcher-block ul.horizontal-list {
display: block;
white-space: nowrap;
}
.wpml-language-switcher-block ul.isHorizontal li {
display: inline-block;
padding: var(--pv-space-4xs) var(--pv-space-3xs);
}
li {
font-size: var(--pv-text-m);
color: var(--contrast-3);
}
li:hover, li[data-wpml="current-language-item"] { font-weight: var(--header--font-weight); }
.wpml-language-switcher-block { text-align: right; }
z-index: 4
}
/* for dropdown, not used: */
.lng-switch-container:has(.open-on-hover-click:hover) {}
.lng-switch-container .wpml-language-switcher-block .wp-block-navigation__container {
transition: all var(--transition-time-slow);
&, ul { background-color: var(--pv-darkgrey) !important; }
line-height: 1.3;
border-radius: var(--pv-radius-s);
&:hover { border-radius: var(--pv-radius-s) var(--pv-radius-s) 0 0; }
[data-wpml='language-item']:first-of-type {
margin-top: 0 !important;
}
li.has-child.open-on-hover-click {
padding: 0 5px 3px 7px;
border: 1px solid var(--contrast-3);
border-radius: var(--pv-radius-s);
&:hover {
border-radius: var(--pv-radius-s) var(--pv-radius-s) 0 0;
border-bottom-width: 0;
}
}
li.has-child.open-on-hover-click ul {
border: 1px solid var(--contrast-3) !important;
border-top-width: 0 !important;
border-top-color: var(--pv-darkgrey) !important;
border-radius: 0 0 var(--pv-radius-s) var(--pv-radius-s);
overflow: hidden;
}
li.open-on-hover-click ul li {
background-color: var(--pv-darkgrey);
span {
color: var(--contrast);
transition: color var(--transition-time);
}
transition: background-color var(--transition-time);
& a { padding: 0 calc(5px + .6em + .64em) 3px 7px; }
&:hover {
span { color: var(--contrast) !important; }
background-color: var(--contrast-3);
}
}
.current-language-item {
min-height: 0;
}
}
/* END not used */
/* Infobox (Biel) */
.info-box {
background-color: var(--base);
border-radius: var(--btn-radius);
padding: var(--pv-space-m);
h3, h4, p { line-height: 1.1; }
p {
margin: 0;
font-size: 110%
}
}
hr.info-separator {
margin: 1rem 0;
color: var(--contrast-3);
}
.cycle-path {
background-blend-mode: normal, normal;
background: linear-gradient(to left, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 100%), url(https://pvms.dev/wp-content/uploads/2025/05/veloweg-cut.svg) center /cover no-repeat
}
/* 404 Page */
.error404 .site {
background-image: url("assets/images/veloverbot-05.jpg");
background-size: min(70vh, 90vw);
background-position: center;
}
/*** Campaign Page ***/
.cp__pro-velo-link {
display: flex;
margin-left: var(--pv-space-s)
}
.cp__provelo-link-text {
color: var(--contrast-3);
margin-bottom: 0;
white-space: nowrap
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.cp__pro-velo-link:hover .cp__provelo-link-text, .cp__pro-velo-link:hover .cp_pro-velo-link-icon svg {
color: var(--base);
fill: var(--base);
}
.cp_pro-velo-link-icon {
align-self: center;
color: var(--contrast-3);
display: inline-flex;
height: 1em;
padding-left: 0.4rem;
position: relative;
bottom: 0.15em;
}
.cp_pro-velo-link-icon svg {
fill: currentColor;
height: 1em;
width: 1em;
}
.h1-boxed {
color: var(--base);
background-color: var(--contrast-3);
display: inline;
font-weight: bold;
line-height: revert;
padding-left: var(--pv-text-xs);
padding-right: var(--pv-text-xs);
text-transform: uppercase;
margin: 0;
font-size: var(--pv-text-4xl);
}
.top__slogan-progress {
column-gap: var(--pv-space-m);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
justify-items: stretch;
row-gap: var(--pv-space-m);
width: 100%;
}
.inverse.campaign-form, .inverse .main-content.main-content-campaign { background-color: var(--base); }
.main-content.main-content-campaign {
margin: 0 auto;
padding-bottom: var(--pv-space-l);
min-height: 0;
}
.main-content-campaign h2, .campaign-form h2, .cp__lead { font-weight: bold; }
.main-content-campaign p { margin-bottom: var(--pv-space-l); }
p.lead-content { font-size: var(--pv-text-l); }
.frmcp-wrap { container-type: inline-size; }
.cta-petition-einfach {
border: 2px solid var(--base);
border-radius: var(--pv-radius-m);
padding: var(--pv-space-m)
}
.main-content-campaign {
margin-bottom: var(--pv-space-l);
max-width: min(100%, var(--content__campaign--width));
}
.lead-content { max-width: var(--lead__content--width) }
.compaign-form-container {
max-width: 670px;
padding-top: var(--pv-space-m);
width: 66%
}
.campaign-hero-text, .editor-styles-wrapper .campaign-hero-text {
flex-basis: 40%;
flex-grow: 1;
align-self: end;
position: relative;
margin-top: 8rem;
margin-bottom: 2rem;
bottom: 0;
max-width: var(--content__campaign--width);
min-width: 24rem;
z-index: 3
}
.cp-progress-box {
background-color: var(--contrast-3);
flex-basis: 45%;
flex-grow: 1;
max-width: 34rem;
min-width: 288px;
position: relative;
z-index: 5;
border-radius: var(--pv-radius-s);
margin: calc(var(--pv-space-s) * 5) 2rem 2rem 2rem;
padding: var(--pv-space-m)
}
/* Protest */
.protest .top__slogan-progress {
max-width: min(100%, var(--content__campaign--width)); /* Header einspaltig */
margin: 0 auto;
}
.protest .top__slogan-progress { display: block; } /* Header einspaltig */
.protest .campaign-hero-text, .editor-styles-wrapper .protest .campaign-hero-text {
flex-basis: 100%;
/*min-width: 416px;*/
margin-left: 1rem;
margin-right: 1rem;
}
.protest .cp-progress-box {
flex-basis: 56%;
/*max-width: 54rem;*/
max-width: 100%;
margin: calc(var(--pv-space-s) * 5) 1rem 2rem;
overflow: hidden;
}
.container.wdb-ff-path-animation-container {
overflow: hidden;
max-width: 1600px;
margin: 2rem auto 0;}
.slogan-container {
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
border-radius: var(--pv-radius-s);
padding: 0 var(--pv-space-xs) var(--pv-space-3xs) var(--pv-space-xs)
}
.slogan-background {
background-color: var(--pv-light-80);
display: inline-block;
margin-left: 2rem;
margin-right: 0;
border-radius: var(--pv-radius-s);
padding: var(--pv-space-3xs) var(--pv-space-s)
}
.campaign-slogan {
font-size: var(--pv-text-4xl);
padding-right: var(--pv-space-m);
text-transform: uppercase
}
.campaign-text {
margin-left: 0;
margin-right: auto;
max-width: var(--text__main-campaign--width)
}
.pv-donations-container {
max-width: 1000px;
margin: 0 auto
}
.webdesign-burgdorf {
align-self: end;
bottom: 0.3em;
color: var(--contrast-3);
font-size: 0.75em;
position: relative;
text-align: right;
text-transform: uppercase;
}
/* Use width for query */
.signed-just-now {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--pv-space-2xs);
margin-bottom: var(--pv-space-m);
.entry {
container-type: inline-size;
border: 2px solid var(--pv-darkgrey);
border-radius: var(--btn-radius);
padding: 0.3rem 0.8rem;
display: inline-block;
p.shortname {
font-size: var(--pv-text-m);
font-weight: var(--header--font-weight);
margin: 0;
min-width: 5rem;
}
p.time {
margin: 0;
svg, img {
height: 1em;
width: 1em;
position: relative;
top: 0.2em;
}
}
}
}
/* Stretched links */
/*https://codepen.io/skvandeusen/pen/QwWpgLV*/
/* .stretch-link applied to parent of a */
.stretch-link { position: relative; }
.stretch-link a::after {
content: '';
position: absolute;
inset: 0;
}
.stretch-link a:is(:focus-visible)::after { outline: 2px solid; }
.stretch-link a:is(:hover, :focus) { outline: none; }
/*** Blocks ***/
/* YouTube embed */
figure.is-type-video { margin: var(--pv-space-m) 0; }
/* Kontakt - OpenStreetMap */
.osm iframe { border-radius: var(--btn-radius); }
/*** Patterns ***/
.gbp-card--border > div > h2:first-child, .cta-petition-einfach > h2:first-child { margin-top: 0; }
/* Download List: In plugin - PVMS, PVEM */
/*** Textfader - PVMS, PVEM ***/
.textfader {
color: var(--base);
font-size: 2.5rem;
display: block;
max-width: 100%;
p {
display: inline-block;
margin: 0 0.1rem 0 0;
padding: 0;
white-space: nowrap;
width: fit-content;
/*border: 1px solid var(--base);*/
}
& > p { opacity: 1; }
.fadetext {
--fadetext-width: 310px;
display: inline-block;
position: relative;
width: var(--fadetext-width);
p {
display: inline;
position: absolute;
left: 0;
top: -0px;
margin: 0;
}
p:nth-child(1) { position: relative; top: 0; }
&.textfader-2 {
p:nth-child(1), p:nth-child(2) {
animation-name: textfader-2;
animation-duration: 6s;
animation-iteration-count: infinite;
}
}
&.textfader-3 {
p:nth-child(1), p:nth-child(2), p:nth-child(3) {
animation-name: textfader-3;
animation-duration: 9s;
animation-iteration-count: infinite;
}
}
&.textfader-4 {
p:nth-child(1), p:nth-child(2), p:nth-child(3), p:nth-child(4) {
animation-name: textfader-4;
animation-duration: 12s;
animation-iteration-count: infinite;
}
}
p:nth-child(1) { opacity: 1; }
p:nth-child(2), p:nth-child(3), p:nth-child(4) { opacity: 0; }
p:nth-child(2) { animation-delay: 3s; }
p:nth-child(3) { animation-delay: 6s; }
p:nth-child(4) { animation-delay: 9s; }
}
}
@keyframes textfader-2 {
0% { opacity: 0; }
/* Fade in (0.5s / 6s) */
8.32% { opacity: 1; }
/* Stay visible (total visible time 2.5s / 6s) */
41.66% { opacity: 1; }
/* Fade out (total slot time 3s / 6s) */
50% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes textfader-3 {
0% { opacity: 0; }
/* Fade in (0.5s / 9s) */
5.56% { opacity: 1; }
/* Stay visible (total visible time 2.5s / 9s) */
27.78% { opacity: 1; }
/* Fade out (total slot time 3s / 9s) */
33.33% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes textfader-4 {
0% { opacity: 0; }
/* Fade in (0.5s / 12s = 4.16%) */
4.16% { opacity: 1; }
/* Stay visible (total visible time 2.5s / 12s = 20.83%) */
20.83% { opacity: 1; }
/* Fade out (total slot time 3s / 12s = 25%) */
25% { opacity: 0; }
100% { opacity: 0; }
}
/*** Accessibility ***/
/* Font Zoom */
p, a, .wdb-anchor-nav-item,
.pv-cc-agenda-item-date, .gbp-card__title { transition: font-size var(--transition-time); }
html.text-size-large {
/* original: clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem); */
/*--pv-text-s: clamp(1rem, 0.95rem + 0.35vw, 1.1rem);*/
/*--pv-text-m: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem);*/
.main-content p, .main-content a, p.gb-text, .footer p,
.footer a, .main-navigation a, .wdb-anchor-nav-item,
button, label, input, textarea, select,
.with_frm_style .frm_primary_label, #mc_embed_signup label, .with_frm_style .frm_radio label, .with_frm_style .frm_checkbox label,
.pv-cc-agenda-item-date { font-size: calc(1.2 * var(--pv-text-m)); }
h3, h3 a { font-size: var(--pv-text-2xl) !important; }
.gbp-card__text h3, .gbp-card__text h3 a, .gbp-card__title a { font-size: calc(1.2 * var(--pv-text-l)); }
p.lead-content { font-size: var(--pv-text-l); }
.search h2 a { font-size: var(--pv-text-3xl); }
a.generate-back-to-top { font-size: 20px !important; }
/*input#wp-block-search__input-1, .wp-block-search__button { font-size: var(--pv-text-s) !important; }*/
}
/*** Dark Mode / Inverse ***/
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 1.1em;
height: 1.1em;
background-image: url('data:image/svg+xml;utf8,'); /* Example SVG */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
right: -4px;
position: relative;
}
/* Dark mode */
.cf-theme-dark {
::selection { color: var(--contrast); }
body { background-color: var(--bg-dark-mode); }
.top-bar { background-color: var(--bg-dark-mode); /*#e4e4e4*/ }
.top-bar .inside-top-bar {
.wp-block-social-links { filter: grayscale(1) opacity(0.6); }
}
.wp-block-search__button:hover { color: #fff !important; }
header.site-header { background-color: var(--bg-dark-mode); }
div#page::before {
content: ' ';
background-color: var(--bg-dark-mode);
width: 100%;
height: var(--btn-radius);
display: block;
position: absolute;
top: 0;
left: 0;
}
.main-navigation, .main-navigation ul ul, button.slideout-exit { background-color: var(--bg-dark-mode) !important; }
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle,
.main-navigation .menu-bar-items, .footer { color: var(--bg-dark-mode-text); }
.inside-top-bar input[type="search"], #generate-slideout-menu input[type="search"] {
color: var(--contrast-3) !important;
background-color: var(--contrast) !important;
}
input[type="search"]::-webkit-search-cancel-button {
background-image: url('data:image/svg+xml;utf8,'); /* Example SVG */
}
.inside-top-bar .inverse button, button.inverse { color: var(--contrast) !important; }
.content__box, .pv-membership, #payment-widget-container {
background-color: var(--contrast);
.acym_module_form label { color: var(--contrast-3); }
}
.inverse, .inverse .h2, .inverse h2, .copyright-bar, .copyright-bar a { color: var(--contrast) }
#payment-widget-container {
padding: var(--btn-radius);
border-radius: var(--btn-radius);
background-color: var(--contrast);
}
.donation-text-box{ background-color: hsl(42deg 28% 40%); }
.background.dm-light {
background-color: var(--contrast);
color: var(--contrast-3);
}
}
/* Dark mode & Inverse */
.cf-theme-dark, .dark, .inverse {
a {
/* from .underline */
/* text-decoration-color: var(--contrast-3);
text-decoration-line: underline;
text-decoration-thickness: 2px;*/
}
a:hover {
color: var(--base-3);
text-decoration-color: var(--base-3);
}
button, .btn, div[role="button"], .wp-element-button, .gbp-button--primary,
.gbp-button--secondary, a.wp-block-button__link:not(.has-background),
a.generate-back-to-top {
color: var(--contrast);
}
button:hover, .btn:hover, div[role="button"]:hover, .wp-element-button:hover,
.gbp-button--primary:hover, .gbp-button--secondary:hover {
background-color: var(--pv-secondary);
color: var(--contrast);
}
}
/** External link icon **/
/* Links marked by JS */
:not(.wp-social-link) > a.is-external-link::after {
content: "";
display: inline-block;
width: 0.9em;
height: 0.9em;
background-repeat: no-repeat;
vertical-align: text-bottom;
bottom: 0.5em;
position: relative;
background-image: url('assets/images/external-red.svg');
}
.inverse a.is-external-link::after,
a.is-external-link.gbp-button--primary::after,
a.is-external-link.button::after { background-image: url('assets/images/external-wht.svg'); }
@media print {
a.is-external-link::after {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/*** Effects and Animations ***/
/* FadeIn for Hero Video */
.fadeIn-animation {
opacity: 0;
animation: fadeIn 1.5s ease-in 1s forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
30% { opacity: 0; }
100% { opacity: 1; }
}
/* Individual pages */
.postid-3455 { /*03-23 Interview mit Lena Frank*/
header.hero { background-position-y: -9vw; }
}
@media (prefers-reduced-motion: no-preference) {
/* Bikergirl - CSS version - breaks page with overflow, Chrome only */
.bikergirl {
width: 40%;
position: relative;
margin: 0 0 0 auto;
/*background-color: grey;*/
right: 0;
animation: bikescroll ease-in-out forwards;
animation-timeline: view(30%);
transform: scaleX(1);
transition: all var(--transition-time);
}
@keyframes bikescroll {
/*from { right: -70%; }*/
to { right: 65%; }
}
.scrolling-up .bikergirl { transform: scaleX(-1); }
/* Crossscreen */
.crossscreen { width: 300px; }
.crossscreen-wrapper {
position: relative;
height: 15rem;
width: 100vw;
overflow: hidden;
left: 50%;
transform: translateX(-50%);
/* background-color: rgba(0, 0, 255, 0.1); /* for debug */
}
/* Container for dynamic transforms (translateX and scaleX) */
.crossscreen-transform-container {
position: absolute;
top: 0;
/* `left` controlled by `translateX` in JS */
height: 100%;
/* `width` set by JS to match the image's actual width */
will-change: transform; /* Hint to the browser for performance optimization */
transition: transform var(--transition-time) linear;
transform-origin: center center;
}
/* crossscreen Element Styles */
.crossscreen {
display: block;
height: 100%;
width: auto;
}
/* Scroll Watcher (for debug) */
.scroll-watcher {
display: none;
height: 20px;
position: fixed;
top: 32px;
left: 0;
z-index: 99999;
background-color: lime;
width: 100%;
scale: 0 1;
transform-origin: left;
animation: scroll-watcher linear;
animation-timeline: scroll();
}
@keyframes scroll-watcher {
to { scale: 1 1; }
}
}
/*** Media Queries ***/
@container (max-width: 24rem) {
/* 24x16=384 */
.signed-just-now {
grid-template-columns: 1fr;
/*.entry p { display: inline-block; }
.entry p.time { float: right; }*/
}
}
@container (min-width: 8rem) {
/* 8x16=128 */
.entry {
p { display: inline-block; }
p.time { float: right; }
}
}
@media (max-width: 1024px) {
/* Tablet */
/* Header / Hero*/
.top-bar-align-right { padding: var(--pv-space-s) var(--pv-space-s) 0; }
.title-wrapper { align-self: start }
header.hero {
flex-direction: column-reverse;
.title-wrapper { align-self: auto; }
.hero-teaser-box { margin: auto auto 0; }
}
.hero-logo, .hero-text, .hero-content__text, .video-hero-text, .top-content-logo { display: block }
.hero-headline { font-size: calc(var(--pv-text-4xl) * 1.5) }
.campaign-hero-text {
display: block;
flex-basis: 100%;
margin-bottom: 0;
}
.cp-progress-box {
max-width: 32rem;
margin: auto auto var(--pv-space-m) auto;
}
.protest .cp-progress-box {
max-width: 48rem;
margin: var(--pv-space-xl) auto;
}
.slogan-background {
margin-left: 1rem;
margin-right: 1rem;
}
/** Main Content **/
.gbp-section__headline { /*font-size: calc(var(--pv-text-4xl) * 1.5);*/ }
.main-content .sidebar { grid-template-columns: 1fr; }
.sidebar-right { display: none; }
.cycle-path { background: none !important; }
.gb-looper-grid.gb-looper-grid--4, .gb-looper-grid.gb-looper-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-grid { margin-bottom: 0; }
/* Cards */
.card-group {
grid-template-columns: 1fr !important;
& > div {
justify-self: left;
width: 66%;
img { width: 100%;}
}
& > div:nth-child(even) { justify-self: right; }
& .gbp-card__text { margin-bottom: var(--pv-space-xl); }
}
.gbp-card--border,
.gbp-card--border.bottom-in-view { transform: translateY(0) scale(1); }
.gbp-card--border.bottom-in-view:not(.no-zoom):hover { transform: translateY(0) scale(1.005); }
.gbp-card--border:hover,
.gbp-card--border.bottom-in-view { margin-bottom: 0 !important; }
/* Read more! */
.wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Viewport debug */
/*body::before, body::after {
content: "TOP";
position: fixed;
top: 0;
left: 0;
width: 100vw;
background-color: #e68019aa;
height: 20%;
z-index: 999999999999;
}
body::after {
content: "BOTTOM";
top: auto;
bottom: 0;
}*/
/* Footer */
.footer {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-top: var(--pv-space-xl);
align-items: flex-start;
}
#footer div:first-child { grid-area: 1 / 1 / 1 / 4; }
#footer, .footer {
flex-direction: column;
/*grid-template-columns: 1fr;*/
padding-bottom: var(--pv-space-l);
padding-top: var(--pv-space-3xl);
text-align: center;
.gbp-button--primary {
margin-left: auto;
margin-right: auto;
}
a { text-align: center; }
div:first-child { grid-area: 1 / 1 / 1 / 1; }
.wp-block-social-links {
margin-bottom: var(--pv-space-xl);
text-align: center;
}
.wp-block-social-links a { font-size: var(--pv-text-3xl); }
}
.footer__address > * {
align-self: center;
text-align: center;
}
.footer > div { align-self: center; }
}
@media (max-width: 840px) { /* Mobile */
.hide-desktop { display: inherit !important; }
.hide-mobile { display: none !important; }
.main-content { min-height: calc(100vh - 14rem); }
.has-hero .main-content { min-height: calc(100vh - 32rem); }
.card-group .gbp-card__text { margin-bottom: var(--pv-space-2xl); }
.gbp-button--primary, .gbp-button--secondary {
max-width: 16em;
padding: 0.5rem 1rem;
}
/* Header */
.top-bar .inside-top-bar {
display: block;
text-align: right;
.wp-block-social-links, .widget_search { display: none !important; }
.widget_icl_lang_sel_widget { margin-right: 0 !important; }
.wpml-ls-legacy-list-horizontal,
.wpml-ls-legacy-list-horizontal li:last-child a { padding-right: 0; }
.widget { margin-right: 0; }
}
.top-bar .inside-top-bar { justify-content: right; }
.main-navigation.has-branding .menu-toggle {
position: relative;
right: 1rem;
top: -0.6rem;
}
.wp-block-navigation .wp-block-navigation-item__content { text-align: center; }
.has-inline-mobile-toggle .header-widget, .has-inline-mobile-toggle #site-navigation {
flex-basis: content;
margin: 0;
}
header.hero .hero-teaser-box { padding: var(--pv-space-xl) var(--pv-space-l) var(--pv-space-l); }
a.gb-text.gbp-button--primary.center {
margin: 0 auto;
display: block;
}
/* Campaign Page */
.protest .campaign-hero-text {
margin-left: 0;
margin-right: 0;
}
.lead-content { max-width: 100% }
.compaign-form-container { width: 100% }
.cp-progress-box {
margin-left: auto;
margin-right: auto;
}
.campaign-text { max-width: 100% }
.p-l-auto .content__box,
.p-l-auto .content__box--xl { margin: 0 calc(0px - var(--pv-space-l)); }
/* deprecated */
.p-xl-auto .content__box,
.p-xl-auto .content__box--xl { margin: 0 calc(0px - var(--pv-space-xl)); }
/* deprecated */
.content-width-fit { width: auto !important; }
/* Main Content */
.content-width-half { width: 100% !important; }
.background .p-xl-auto { padding-bottom: 0 !important; }
.radius-bottom-0 .content-width-half > div {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.radius-bottom-0 {
.content__box { border-bottom: none; }
}
.gbp-section__headline { margin-bottom: 1.25rem }
.gb-looper-grid.gb-looper-grid--4, .gb-looper-grid.gb-looper-grid--3 {
grid-template-columns: 1fr;
row-gap: var(--pv-space-m);
}
.gbp-card { padding: 1.25rem; }
.card-group > div { width: 75%; }
.wp-block-wdb-pv-shortcodes { padding: var(--pv-space-s); }
/* Utilities */
.grid-1-3 { grid-template-columns: 1fr }
/* Table column widths */
.tw-20.wp-block-table table { width: 40%; }
.tw-30.wp-block-table table { width: 60%; }
.tw-40.wp-block-table table { width: 70%; }
.tw-50.wp-block-table table { width: 80%; }
.tw-60.wp-block-table table { width: 90%; }
.tw-70.wp-block-table table { width: 100%; }
.tw-80.wp-block-table table { width: 100%; }
.tw-90.wp-block-table table { width: 100%; }
}
@media (max-width: 940px) { /* Header mobile */
#gb-header {
.hide-desktop { display: inherit !important; }
.hide-mobile { display: none !important; }
.buttons-cta {
order: -1;
grid-column-start: 2;
grid-column-end: span 2;
justify-self: end;
margin-bottom: 0;
}
.top-bar { grid-column-start: 2; }
.gb-navigation {
grid-column-start: 3;
grid-column-end: 3;
}
.gb-navigation.gb-navigation--mobile {
padding-top: 0;
width: auto;
}
button.gb-menu-toggle {
display: flex;
padding: 1.3rem 1.5rem 1.5rem;
}
.header-content {
display: flex;
align-items: center;
flex-direction: row;
max-width: 34rem; /* make CTA Buttons break to top */
margin: 0 0 0 auto;
.buttons-cta { padding: 0 var(--pv-space-l); }
}
}
.main-navigation.has-branding .menu-toggle {
position: relative;
right: 1rem;
top: -0.6rem;
}
.wp-block-navigation .wp-block-navigation-item__content { text-align: center; }
.has-inline-mobile-toggle .header-widget, .has-inline-mobile-toggle #site-navigation {
flex-basis: content;
margin: 0;
}
.has-hero .main-content { min-height: calc(100vh - 32rem); }
.card-group .gbp-card__text { margin-bottom: var(--pv-space-2xl); }
@media (pointer: coarse) { } /*not used here*/
.cards--sliding .card-group {
& > div.bottom-in-view {
.gbp-card__text {
margin: calc(0px - var(--pv-space-3xl)) 0 calc(var(--pv-space-3xl) - var(--pv-space-l)) !important;
}
}
}
}
@media (max-width: 640px) {
#gb-header {
grid-template-rows: min-content min-content min-content;
.header-logo { grid-row-end: 1; }
.buttons-cta {
grid-row-start: 2;
margin-top: 1rem;
}
.top-bar, .gb-navigation { grid-row-start: 3; }
.top-bar {
grid-column-start: 2;
grid-column-end: span 2;
right: var(--pv-space-xs);
}
.gb-navigation {
grid-column-start: 3;
grid-row-start: 1;
}
}
body .wdb-anchor-navigation {
width: 100vw;
max-width: 100vw;
}
/* Wenn Element innerhalb main content */
body .main-content .wdb-anchor-navigation { margin-left: calc(0px - var(--pv-space-l)); }
}
@media (max-width: 480px) {
:target { scroll-margin-top: calc(var(--header--height) + var(--pv-space-2xl) * 4 ); }
.top-content .lng-switch-container { top: 3rem; } /* Campaign */
.widget_icl_lang_sel_widget { display: none !important; }
.main-navigation.has-branding .menu-toggle { top: -1.3rem; }
header.hero {
/*border-bottom-right-radius: 0; RL250609 set by JS */
.hero-teaser-box { width: 100%; }
.title-wrapper {
max-width: calc(100% - var(--btn-radius));
h1 { padding-left: var(--pv-space-l); }
}
}
.card-group {
& > div { width: 100%; }
.gbp-card__text {
margin-bottom: var(--pv-space-3xl);
left: calc(var(--btn-radius) / 2);
width: calc(100% - var(--btn-radius) * 1);
}
}
.wp-block-gallery { grid-template-columns: 1fr; }
.campaign-hero-text { min-width: 0 !important; }
.nav-next, .nav-previous { max-width: 100%; }
/* Table column widths */
.wp-block-table table { width: 100% !important; }
}