* wikkelt (bv. de kaarten van featurecardsblock, of textimageblock's "boxed"
* variant) - die eigen grid-container zet zijn centrering/padding nog eens
* overheen wat .section-boxed of de omliggende kolom al regelt, en schuift zo
* de tekst extra uit lijn. Deze regels zetten alleen die tweede laag buiten
* werking; ze zijn met opzet niet beperkt tot .with-section-grid, want het
* probleem zit 'm in de dubbele grid-container, niet in de aanwezigheid van
* een kaartengrid eromheen.
* ------------------------------------------------------------------------ */
.section-boxed > .grid-container {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* Alleen die buitenste laag hoeft buiten werking te worden gezet. Er stond
* hier eerder ook nog een regel die de marge (en zelfs de breedte) van de
* .grid-x/.cell daarbinnen op nul zette - onschadelijk bij featurecards-
* block's kaart (die heeft daar toch maar één cel per rij, die Foundation
* zelf al 100% breed maakt), maar bij textimageblock's "boxed" variant staan
* daar TWEE cellen naast elkaar (tekst + afbeelding). Die extra regel brak
* Foundation's eigen marge/breedte-samenspel voor zo'n meerkoloms rij, en de
* afbeelding kwam onder de tekst te staan in plaats van ernaast. Zonder die
* regel doet Foundation's normale .grid-margin-x/.cell-mechanisme gewoon zijn
* werk, en dat geeft toevallig (via de negatieve marge van .grid-x die precies
* wegvalt tegen de positieve marge van .cell) ook voor de featurecards-kaart
* al de juiste uitlijning - dus deze regel was voor dat geval nooit nodig. */
/* Met die tweede laag buiten werking blijft, vanaf 1024px, alleen
* .section-boxed's eigen padding-left over als kantlijn - die staat
* verderop in dit bestand default op 3rem (bedoeld voor een vrijstaand
* kader), iets ruimer dan de 35px die .section-content elders als kantlijn
* geeft. Hier gelijkgetrokken aan die 35px, zodat een kaarttekst exact even
* ver inspringt als de sectiekop erboven. Onder 1024px blijft de bestaande
* ".grid-container .section-boxed { padding-inline: 0 }" hierboven gewoon
* gelden: ".with-section-grid .section-content" levert daar zelf al de
* kantlijn (20px / 15px, verderop in dit bestand) - nog een keer padding op
* .section-boxed zou daar dus dubbelop zijn.
*
* Dit lost het op voor een .section-boxed die (net als featurecardsblock's
* kaarten) zelf al ergens binnen een .grid-container zit, zodat "de
* bestaande .grid-container .section-boxed {max-width:100%}"-regel
* hierboven zijn eigen, afwijkende breedte/centreer-formule al buiten
* werking zet. Staat een .section-boxed helemaal los (geen enkele
* .grid-container als voorouder, zoals textimageblock's "boxed"-variant
* standaard rendert), dan volgt zijn eigen centrering een andere
* breakpoint-formule dan .grid-container gebruikt, en komt de tekst op
* sommige breedtes alsnog net niet uit op dezelfde kantlijn. Zie de
* toelichting in textimageblock/frontend.css voor hoe die module dat
* oplost door zichzelf ook in een echte .grid-container te wikkelen. */
@media (min-width: 1024px) {
.with-section-grid .section-boxed {
padding-left: 35px;
padding-right: 35px;
}
}
/* Section-Ups */
.section-up-small {
position: relative;
margin-top: -60px;
z-index: 11;
}
.section-up-medium {
position: relative;
margin-top: -120px;
z-index: 998 !important;
}
.section-up-large {
position: relative;
margin-top: -160px;
z-index: 998 !important;
}
.section-up-xlarge {
position: relative;
margin-top: -190px;
z-index: 998 !important;
}
@media (max-width: 1100px) {
.section-up-large {
position: relative;
margin-top: -120px;
z-index: 998 !important;
}
.section-up-medium {
position: relative;
margin-top: -90px;
z-index: 998 !important;
}
}
@media (max-width: 1023px) {
.section-up-large {
position: relative;
margin-top: -115px;
z-index: 998 !important;
}
.section-up-medium {
position: relative;
margin-top: -110px;
z-index: 998 !important;
}
}
@media (max-width: 640px) {
.section-up-xlarge {
margin-top: -110px;
}
.section-up-large {
position: relative;
margin-top: -115px;
z-index: 998 !important;
}
.section-up-medium {
position: relative;
margin-top: -70px;
z-index: 998 !important;
}
}
/* Row-Ups */
.row-up-small {
position: relative;
top: -60px;
z-index: 11;
}
.row-up-medium {
position: relative;
top: -120px;
z-index: 998 !important;
}
.row-up-large {
position: relative;
top: -200px;
z-index: 998 !important;
}
/* Section background colour */
.bg-section-colour {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* Section background image */
.bg-section-image {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
/* Postition */
.bg-section-image.bottom {
top:auto;
bottom:0;
}
/* Widths */
.bg-section-image.full {
width: 100%;
}
.bg-section-image.width-75 {
width: 75%;
}
.bg-section-image.width-66 {
width: 66.66%;
}
.bg-section-image.width-50 {
width: 50%;
}
.bg-section-image.width-40 {
width: 49%;
}
.bg-section-image.width-33 {
width: 33.333%;
}
.bg-section-image.width-25 {
width: 25%;
}
/* Right */
.bg-section-image.width-75-right {
width: 75%;
left: auto;
right:0;
}
.bg-section-image.width-66-right {
width: 66.66%;
left: auto;
right:0;
}
.bg-section-image.width-50-right {
width: 50%;
left: auto;
right:0;
}
.bg-section-image.width-33-right {
width: 33.333%;
left: auto;
right:0;
}
.bg-section-image.width-25-right {
width: 25%;
left: auto;
right:0;
}
.bg-section-image.height-40 {
height: 40%;
}
.bg-section-image.height-60 {
height: 60%;
}
.bg-section-image.height-70 {
height: 70%;
}
.section-height-small {
min-height: 30vh;
}
.section-height-medium {
min-height: 50vh;
}
.section-height-large {
min-height: 70vh;
}
/* Reapeat */
.bg-section-image.bg-repeat {
background-position: top left;
background-repeat: repeat;
background-size: 160px auto;
}
/* Parallax */
.parallax .parallax-inner {
z-index: 1 !important;
}
.parallax.parallax-opacity-10 .parallax-inner {
opacity: 0.1;
}
.parallax.parallax-opacity-20 .parallax-inner {
opacity: 0.2;
}
.parallax.parallax-opacity-30 .parallax-inner {
opacity: 0.3;
}
.parallax.parallax-opacity-40 .parallax-inner {
opacity: 0.4;
}
.parallax.parallax-opacity-50 .parallax-inner {
opacity: 0.5;
}
.parallax.parallax-opacity-60 .parallax-inner {
opacity: 0.6;
}
.parallax.parallax-opacity-70 .parallax-inner {
opacity: 0.7;
}
.parallax.parallax-opacity-80 .parallax-inner {
opacity: 0.8;
}
.parallax.parallax-opacity-90 .parallax-inner {
opacity: 0.9;
}
/*
---------------------------
SECTION - CONTENT
---------------------------
*/
.vertical-section-name {
overflow: hidden;
width: 1.6em;
position: absolute;
top:50%;
left:40px;
transform: translateY(-55%);
opacity: 0.7;
z-index: 99;
}
.section-up-medium .vertical-section-name {
transform: translateY(-10%);
}
.vertical-section-name-inner {
display: inline-block;
text-align: center;
white-space: nowrap;
transform-origin: 50% 50%;
transform: translate(-3px,0) rotate(-90deg);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 3px;
}
.vertical-section-name-inner:before {
content: "";
float: left;
margin-top: 100%;
}
.vertical-section-name-inner span {
font-weight: 700;
}
.vertical-section-name-inner span:after {
content: "";
display: inline-block;
width: 14px;
height: 1px;
background: #002164;
opacity: 0.3;
margin: 0 4px 3px;
}
.bg-primary .vertical-section-name-inner,
.bg-tertiary .vertical-section-name-inner,
.bg-dark .vertical-section-name-inner {
color: #fff;
}
.bg-primary .vertical-section-name-inner span:after,
.bg-tertiary .vertical-section-name-inner span:after,
.bg-dark .vertical-section-name-inner span:after {
background-color: #fff;
}
@media (max-width: 1500px) {
.vertical-section-name {
left: 20px;
}
}
@media (max-width: 1023px) {
.vertical-section-name {
display: none;
}
}
/* Background Shade */
.bg-section-shade {
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 100%;
z-index: 0;
}
.section-icon-shape {
position: absolute;
top:25%;
left: -10px;
width: 100%;
height: 75%;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: hidden;
opacity: .2;
z-index: 1;
}
.section-icon-shape .icon-shape {
object-fit: cover;
width: 100%;
max-width: 1200px;
height: auto;
margin-left: 0%;
transform: rotate(-113deg);
}
.section-shade {
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 3;
}
.section-shade.top {
top: 0;
}
.section-shade.bottom {
bottom: 0;
}
/* Glows */
.section-glow {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
border-radius: 100%;
transform: scale(1);
z-index: 0;
/* transition-delay: 600ms; */
}
.section-glow.first {
transform: scale(1) translateX(-70%) translateY(-50%);
}
.section-glow.second {
transform: scale(1) translateX(-30%) translateY(-20%);
}
.bg-icon-shape {
position: absolute;
top:0;
left: 0;
min-width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: .08;
}
.bg-icon-shape .icon-shape {
object-fit: cover;
width: 130%;
height: auto;
margin-left: -40%;
}
.section-content {
padding-top: 35px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 35px;
}
.section-content.boxed {
padding-top: 50px;
padding-left: 60px;
padding-right: 60px;
padding-bottom:50px;
border-width: 1px;
border-style: solid;
box-shadow: 0 10px 60px rgba(var(--color-primary-800-rgb), 0.7);
}
.medium-order-1.section-content {
padding-right: 70px;
}
.medium-order-2.section-content {
padding-left: 50px;
}
.with-section-grid .section-content {
padding-inline: 0;
}
/* Dezelfde reden als hierboven bij ".section-boxed > .grid-container": een
* .section-content die zelf binnen een .section-boxed zit (met of zonder
* .with-section-grid eromheen) zou anders zijn EIGEN 35px kantlijn nog eens
* optellen bij de 35px die .section-boxed hierboven al geeft, en zo de tekst
* dubbel laten inspringen. .section-boxed's eigen padding is hier leidend. */
.section-boxed .section-content {
padding-inline: 0;
}
@media (max-width: 1280px) {
.section-content {
}
}
@media (max-width: 1023px) {
.section-content {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
}
.section-content.boxed {
padding-top: 50px;
padding-left: 60px;
padding-right: 60px;
padding-bottom:50px;
border-width: 1px;
border-style: solid;
box-shadow: 0 10px 60px rgba(var(--color-primary-800-rgb), 0.7);
}
.medium-order-1.section-content {
padding-right: 50px;
}
.medium-order-2.section-content {
padding-left: 30px;
}
.with-section-grid .section-content {
/* Was 20px - dat week net af van de 15px die overal elders tussen
* 641px en 1023px als kantlijn geldt (.section-content hierboven,
* wb-faq-head, wb-usp-head, ...), waardoor tekst in een kaart in
* een kaartengrid (bv. featurecardsblock's "full" kaart) op die
* breedtes net iets verder inspringt dan de rest van de pagina.
* Gelijkgetrokken aan die 15px. */
padding-inline: 15px;
}
}
@media (max-width: 640px) {
.section-content {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
}
.section-boxed .section-content {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 25px;
}
.with-section-grid .section-content {
padding-inline: 15px;
}
.section-content.stacked {
padding-top: 2rem;
padding-left:1.5rem;
padding-right:1.5rem;
padding-bottom: 2rem;
margin-top: 20px;
z-index: 9;
}
.medium-order-1.section-content {
padding-right: 10px;
}
.medium-order-2.section-content {
padding-left: 10px;
}
}
.bg-section-content {
position: absolute;
top:0;
left:0;
height: 100%;
z-index: -1;
}
.bg-section-content.full {
width: 100%;
}
.section-heading {
position: relative;
padding-bottom: 1rem;
z-index: 5;
}
.section-heading.text-center {
padding-left: 0rem;
}
.section-icon {
text-align: right;
width: 100%;
font-size: 24px;
}
.section-icon.icon-huge i {
font-size: 72px;
}
.section-icon.on-the-back {
position: absolute;
top:-30px;
left: -30px;
text-align: left;
font-size: 180px;
z-index: -1;
/* opacity: 0.08; */
}
.section-intro {
font-weight: 400;
display: inline-block;
margin-bottom: 25px;
font-size: clamp(0.813rem, 0.6853rem + 0.2098vw, 1.000rem);
color: var(--color-primary-600);
padding: 6px 0px 6px 3px;
text-transform: uppercase;
letter-spacing: 2px;
}
/*
.section-content .section-intro {
margin-left: -30px;
} */
.section-wrapper.bg-primary .section-intro,
.section-wrapper.bg-secondary .section-intro,
.section-wrapper.bg-dark .section-intro,
.section-wrapper.inversed .section-intro {
color: rgba(255, 255, 255, 0.7) !important;
}
.section-introtitle {
font-size: 1.66rem;
display: block;
font-weight: 300;
}
.section-content .section-introtitle {
/* margin-left: 40px; */
}
.section-title {
font-size: 2.2rem;
display: block;
/* font-weight: 600; */
}
.section-content .section-title {
}
.section-content.boxed .section-title {
}
.section-title.title-tiny {
font-size: var(--title-tiny);
}
.section-title.title-small {
font-size: var(--title-small);
}
.section-title.title-medium {
font-size: var(--title-medium);
}
.section-title.title-large {
font-size: var(--title-large);
line-height: 1.2;
}
.section-title.title-xlarge {
font-size: var(--title-xlarge);
line-height: 1.1;
}
.section-title.title-huge {
font-size: var(--title-huge);
line-height: 1;
}
.section-subtitle {
}
.section-lead {
display: block;
/* padding-top: 25px */
}
.section-content .section-lead {
margin-left: 0px;
}
.section-content.boxed .section-lead {
margin-left: 0px;
}
.section-lead p {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
line-height: 1.7;
}
.section-wrapper.bg-primary .section-lead p,
.section-wrapper.bg-secondary .section-lead p,
.section-wrapper.bg-tertiary .section-lead p,
.section-wrapper.bg-dark .section-lead p,
.section-wrapper.inversed .section-lead p {
color: rgba(255, 255, 255, 0.8) !important;
}
.section-text {
margin-left: 0px;
padding-top: 7px;
display: block;
}
.section-text p {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
line-height: 1.9;
}
.section-text.p-small p {
font-size: clamp(0.875rem, 0.7054rem + 0.2797vw, 1.125rem);
}
.section-text.p-large p {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
line-height: 1.7;
}
.section-text .button {
margin-top: 10px;
}
.section-wrapper.bg-primary .section-text p,
.section-wrapper.bg-secondary .section-text p,
.section-wrapper.bg-tertiary .section-text p,
.section-wrapper.bg-dark .section-text p,
.section-wrapper.inversed .section-text p {
color: rgba(255, 255, 255, 1) !important;
}
.column-count-2 {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
}
.column-count-3 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
@media (max-width: 1280px) {
}
@media (max-width: 1023px) {
}
@media (max-width: 640px) {
}
/* Section Play Button */
.section-play-button {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
z-index: 88;
}
.section-play-button.is-absolute {
position: absolute;
top: 50%;
right: 25%;
transform: translate3d(-50%, -50%, 0);
}
.section-play-button.is-absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.section-play-button:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-40%, -50%, 0);
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;*/
}
.section-play-button:hover:after {
border-color: transparent transparent transparent #fff;
}
/* Section Images */
.section-images {
position: relative;
}
.section-images img {
position: relative;
margin-bottom: 0px;
z-index: 1;
}
.section-images img.image-bg-blur {
position: absolute;
top:0;
left:-0px;
z-index: 0;
filter: blur(30px);
opacity: 0.6;
}
@media (max-width: 1023px) {
.medium-11 .section-images,
.medium-12 .section-images {
margin-top: 20px;
margin-bottom: 30px;
}
}
@media (max-width: 640px) {
.section-images img.radius-top-large {
border-radius: var(--radius-medium);
}
}
/* Expanded */
.section-image.expanded {
position: absolute;
left:0;
width: calc(50% + 50px);
height: 400px;
z-index: 3
}
.section-image img {
border-radius: 10px;
}
.section-boxed .section-image img {
border-radius: 5px;
}
.section-image-absolute {
position: absolute;
bottom: 0;
right:0;
width: 90%;
}
.section-image-absolute figure img {
transform: translate(20%, 10%);
}
.section-image-usp {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-70%) translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 20px;
margin:0;
padding:0;
list-style: none;
z-index: 3;
}
.section-image-usp li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 15px 30px 15px 20px;
border-width: 1px;
border-style: solid;
background: var(--color-white);
border-radius: var(--radius-medium);
box-shadow: 0 10px 30px rgba(var(--color-primary-600-rgb), 0.3);
font-size: clamp(1.000rem, 0.8304rem + 0.2797vw, 1.250rem);
font-weight: 600;
color: var(--color-primary-950);
}
.section-image-usp li:nth-of-type(even) {
transform: translateX(-30px);
}
.section-image-usp li:last-child {
margin-top: 50px;
}
.section-image-usp li .section-image-usp-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.section-image-usp li .section-image-usp-icon img {
object-fit: scale-down;
max-width: 36px;
height: 36px;
}
@media (max-width: 1680px) {
.section-image-absolute figure img {
transform: translate(20%, 10%);
}
}
@media (max-width: 1430px) {
.section-image-absolute figure img {
transform: translate(15%, 10%);
}
}
@media (max-width: 1023px) {
.section-image-absolute {
right: auto;
left: 0;
bottom: 20px;
width: 100%;
}
}
@media (max-width: 1023px) {
.section-image-absolute {
position: relative;
right: auto;
left: 0;
bottom: 60px;
width: 100%;
}
.section-image-usp li {
padding: 10px 20px 10px 10px;
}
.section-image-usp li .section-image-usp-icon {
width: 30px;
height: 30px;
}
.section-image-usp li .section-image-usp-icon img {
object-fit: scale-down;
max-width: 26px;
height: 26px;
}
}
/* VIDEO */
.section-image .section-image-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 60px;
height: 60px;
z-index: 88;
}
.section-image .section-image-play:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-40%, -50%, 0);
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;*/
}
.section-image .section-image-play:hover:after {
border-color: transparent transparent transparent #fff;
}
/* Listing */
.section-listing {
margin: 30px;
margin-left: 30px;
}
.section-listing ul {
list-style: none;
margin-left:0;
margin-top: 10px !important;
}
.section-listing ul li {
position: relative;
padding: 6px;
padding-left: 40px;
}
.section-listing ul li a,
.section-listing ul li div {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
font-weight: 700;
}
.section-listing ul li a:hover {
color: var(--color-primary-400);
}
.section-listing ul li i {
position: absolute;
top:8px;
left: 0px;
font-size: 24px;
}
@media (max-width: 1280px) {
.section-listing ul li {
font-size: 1rem;
padding: 5px;
padding-left: 2.5rem;
}
}
@media (max-width: 1023px) {
.section-listing ul li {
font-size: 1.2rem;
padding: 5px;
padding-left: 2.5rem;
}
}
@media (max-width: 640px) {
.section-listing {
margin: 30px;
margin-left: 10px;
margin-right: 0;
margin-bottom: 10px;
}
}
/* Section Badge */
.section-badge {
position: absolute;
/* bottom: calc(50% - 100px); */
width: 200px;
height: 200px;
border-radius: 1000px;
padding: 12px;
border: 1px solid var(--color-primary-300);
background: var(--color-white);
box-shadow: 0 10px 30px rgba(var(--color-primary-600-rgb), 0.3);
z-index: 98 !important;
text-decoration: none !important;
transition: transform 0.2s ease-in-out;
}
.section-badge.small {
transform: scale(0.7);
}
.section-badge.badge-position-left {
left: -80px;
}
.section-badge.badge-position-right {
right: -80px;
left: auto;
}
/* Position */
.section-badge.badge-position-top-left {
top: -80px;
left: -80px;
}
.section-badge.badge-position-top-center {
top: -80px;
left: 50%;
margin-left: -100px;
}
.section-badge.badge-position-top-right {
top: -80px;
right: -80px;
}
.section-badge.badge-position-bottom-left {
bottom: -80px;
left: -80px;
}
.section-badge.badge-position-bottom-center {
bottom: -100px;
left: 50%;
margin-left: -100px;
}
.section-badge.badge-position-bottom-right {
bottom: -100px;
right: -80px;
}
.section-badge.badge-position-center-left {
top: 50%;
margin-top: -100px;
left: -80px;
}
.section-badge.badge-position-center-center {
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
.section-badge.badge-position-center-right {
top: 50%;
margin-top: -100px;
right: -80px;
}
.section-badge:after {
position: absolute;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
border: 1px dashed #fff;
border-radius: 1000px;
opacity: 0.1;
z-index: 1;
content:'';
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
/* .section-badge:hover {
transform: scale(1.05);
} */
.section-badge .section-badge-icon {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.section-badge .section-badge-icon img{
max-width: 80px;
max-height: 80px;
}
.section-badge .section-badge-icon i {
font-size: 70px;
display: flex;
align-items: center;
}
.section-badge svg {
/* -webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite; */
-webkit-animation: spin 20s linear infinite ;
animation: spin 20s linear infinite;
}
.section-badge text {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 400;
letter-spacing: 8px;
text-transform: uppercase;
fill: var(--color-primary-950);
text-decoration: none !important;
}
@media (max-width: 640px) {
.section-badge {
bottom: 50px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 1000px;
padding: 4px;
}
.section-badge .section-badge-icon-img img {
max-width: 34px;
border-radius: 100px;
}
.section-button {
margin-top: 15px;
}
}
@-webkit-keyframes spin {
0% {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0))";
transform:rotate(0deg)
}
to {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360))";
transform:rotate(1turn)
}
}
@keyframes spin {
0% {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0))";
transform:rotate(0deg)
}
to {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360))";
transform:rotate(1turn)
}
}
/* Carousel */
.section-slider-wrapper {
overflow: hidden;
padding-block: 2rem;
padding-bottom: 60px;
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
@media (max-width: 640px) {
.section-slider-wrapper {
overflow: hidden;
padding-block: 2rem;
padding-inline: 1rem;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
}
/*
---------------------------
SUB NAVIGATION
---------------------------
*/
.section-with-sub .grid-container {
position: relative;
z-index: 9;
top: -20px
}
.section-subnav {
position: relative;
padding: 0rem 30px;
margin: 0rem 0 0px;
}
#mobile-subs .section-subnav {
border: 0;
margin-bottom: 0;
}
.section-subnav ul {
padding: 0px 0px;
margin: 0px;
list-style: none;
}
.section-subnav ul li {
padding: 0px 0 0px 0;
margin: 0px 0 0px 0;
}
.section-subnav ul li:last-child {
border:0 !important;
}
.section-subnav ul li a {
padding-left: 0;
color: #002164;
font-weight: 500;
display: block;
padding: 0.3em 1em 0.3em 1rem;
font-size: 1rem !important;
letter-spacing: 0px;
position: relative;
line-height: 1.1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.bg-tertiary .section-subnav ul li a {
color: #fff;
}
.section-subnav ul li a:hover {
color: #008aff;
}
.section-subnav ul li a:before {
position: absolute;
left: 2px;
top:7px;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 500;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:13px;
margin-right: 0px;
color: rgba(0, 122, 250, 1);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.section-subnav ul li a:hover:before {
-webkit-transform: translate(3px, 0);
transform: translate(3px, 0);
opacity: 1;
color: #008aff;
}
.section-subnav ul li.item-breadcrumb a:before {
opacity: 1;
color: #008aff
}
.section-subnav ul li.item-breadcrumb a {
color: #056499;
font-weight: 700;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).section-subnav ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).section-subnav ul li a:hover {
color: #fff !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).section-subnav ul li a:before {
color: #fff !important;
}
.bg-primary.section-subnav ul li a
.bg-secondary.section-subnav ul li a,
.bg-color3.section-subnav ul li a,
.bg-dark.section-subnav ul li a {
color: rgba(255, 255, 255, 0.7) !important;
}
.bg-primary.section-subnav ul li a:hover,
.bg-secondary.section-subnav ul li a:hover,
.bg-color3.section-subnav ul li a:hover,
.bg-dark.section-subnav ul li a:hover {
color: rgba(255, 255, 255,1) !important;
}
.bg-primary.section-subnav ul li a:before,
.bg-secondary.section-subnav ul li a:before,
.bg-color3.section-subnav ul li a:before,
.bg-dark.section-subnav ul li a:before {
color: rgba(255, 255, 255, 1) !important;
}
/* Footer */
.section-footer {
padding-top:1rem;
padding-left:0px;
}
.section-button-absolute {
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%,-100px,0);
z-index: 5;
}
.button.section-button-absolute:active {
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%,-99px,0) !important;
z-index: 5;
}
@media (max-width: 1280px) {
.section-button-absolute {
transform: translate3d(-50%,-50px,0);
}
.section-slider-container .swiper-button-prev,
.section-slider-container .swiper-button-next {
left: 0rem;
opacity: 1;
}
.section-slider-container .swiper-button-next {
left: 50px;
}
.section-carousel .swiper-button-disabled {
opacity: .4;
}
}
@media (max-width: 640px) {
.section-button-absolute {
}
.section-slider-container .swiper-button-prev,
.section-slider-container .swiper-button-next {
left: 0rem;
opacity: 1;
width: 30px;
height: 24px;
bottom:-48px;
}
.section-slider-container .swiper-button-next {
left: 50px;
}
.section-carousel .swiper-button-disabled {
opacity: .4;
}
.swiper-button-prev:before,
.swiper-button-next:before {
font-size: 24px;
color: #22155a
}
}
/* Accordion */
.section-accordion .section-accordion-item {
background: #fff;
border: 1px solid var(--color-primary-100);
border-radius: var(--radius-xlarge) !important;
box-shadow: 0 5px 15px rgba(var(--color-primary-800-rgb), 0.1);
margin: 0 0 10px 0;
}
.section-accordion .section-accordion-item:hover {
border-color: var(--color-primary-600);
background-color: transparent !important;
}
.section-accordion .section-accordion-item.is-active {
}
.section-accordion .section-accordion-title {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
font-weight: 600;
color: var(--color-primary-950);
border:0 !important;
background: transparent !important;
padding: 25px;
padding-left: 60px;
}
.section-accordion .accordion-title:hover {
color: var(--color-primary-950);
background-color: transparent !important;
}
.section-accordion .is-active .accordion-title {
color: var(--color-primary-950);
background-color: transparent !important;
}
.accordion-item:first-child>:first-child {
border: 0;
}
.section-accordion .accordion-title::before {
position: absolute;
top: 22px;
left: 20px;
right: auto;
margin-top: 0;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 500;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:24px;
color: var(--color-primary-600);
transition: all 0.2s ease-in-out;
}
.section-accordion .is-active .accordion-title::before {
transform: rotate(180deg);
content: "";
-webkit-mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
}
.section-accordion .section-accordion-content {
bordeR:0;
background: transparent;
padding: 0 40px 60px;
padding-left: 60px;
}
@media (max-width: 640px) {
.section-accordion .section-accordion-title {
padding: 15px;
padding-left: 45px;
line-height: 1.5;
font-weight: 500;
}
.section-accordion .accordion-title::before {
top: 13px;
left: 15px;
font-size:20px;
}
.section-accordion .section-accordion-content {
bordeR:0;
background: transparent;
padding: 0 40px 60px;
padding-left: 45px;
}
}
/* --- /templates/xso/css/categories.css --- */
/*
---------------------------
CATEGORIES
---------------------------
*/
.imagebox {
width: 100%;
display: block;
position: relative;
border: 0px solid #fff;
min-height: 280px;
overflow: hidden;
position: relative;
z-index: 98 !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
[data-whatintent='mouse'] a.imagebox:hover {
z-index: 99 !important;
/* transform: translateY(-5px) */
}
[data-whatintent='mouse'] a.imagebox {
cursor: pointer;
}
.imagebox .imagebox-image {
position: absolute;
top: 0px;
left:0px;
bottom: 0px;
right: 0px;
z-index: 2;
-webkit-backface-visibility: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a.imagebox:hover .imagebox-image {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagebox .imagebox-image.bright:after {
opacity: 0;
}
a.imagebox:hover .imagebox-image:after {
opacity: 0;
}
.imagebox .imagebox-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 3;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
[data-whatintent='mouse'] a.imagebox:hover .imagebox-overlay {
/* opacity: .8 !important; */
opacity: 0.8;
}
/* Shade */
.imagebox .image-shade {
position: absolute;
left: 0;
width: 100%;
height: 60%;
display: block;
z-index: 1;
opacity: .9;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.imagebox .image-shade.bottom {
top: auto;
bottom:0;
height: 80%;
}
[data-whatintent='mouse'] a.imagebox:hover .image-shade {
opacity: 1;
}
.imagebox,
.imagebox.hover-shadow:before,
.imagebox .imagebox-image,
.imagebox .imagebox-overlay,
.imagebox .image-shade {
border-radius: inherit;
}
.small-margin-collapse .imagebox,
.small-margin-collapse .imagebox.hover-shadow:before,
.small-margin-collapse .imagebox .imagebox-image,
.small-margin-collapse .imagebox .imagebox-overlay {
border-radius: 0px !important;
}
.full .imagebox,
.full .imagebox.hover-shadow:before,
.full .imagebox .imagebox-image,
.full .imagebox .imagebox-overlay {
border-radius: 0px !important;
}
.small-margin-collapse .imagebox.hover-shadow:before {
display: none !important;
}
[data-whatintent='mouse'] .small-margin-collapse a.imagebox:hover {
transform: translateY(0)
}
.small-margin-collapse .imagebox.first,
.small-margin-collapse .imagebox.first .imagebox-image,
.small-margin-collapse .imagebox.first .imagebox-overlay {
border-radius: 3px 0 0 3px !important;
}
.small-margin-collapse .imagebox.last,
.small-margin-collapse .imagebox.last .imagebox-image,
.small-margin-collapse .imagebox.last .imagebox-overlay {
border-radius: 0px 3px 3px 0 !important;
}
.imagebox .imagebox-play {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
border-radius: 100px;
line-height: 1;
padding: 0;
background: #fff;
text-align: center;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.21);
z-index: 99;
}
.imagebox .imagebox-play:before {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
content: '';
border-radius: 1000px;
background: #fff;
opacity: 0.4;
}
.imagebox .imagebox-play:after {
position: absolute;
top: 50%;
left: 50%;
content: '';
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 14px 0 14px 26px;
border-color: transparent transparent transparent var(--color-primary-600);
}
.imagebox .imagebox-description {
position: absolute;
top: 0;
left:0;
bottom: 0px;
right: 0px;
z-index: 4;
border-radius: 0;
overflow: hidden;
-webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.imagebox:hover .imagebox-description {
opacity: 1;
}
.imagebox .imagebox-description .imagebox-title-wrap {
position: absolute;
left:0;
right:0;
z-index: 3;
}
.imagebox-description .imagebox-title-wrap {
text-align: left;
padding: 30px 1rem 25px 30px;
}
/* Top */
.imagebox .imagebox-description.top .imagebox-title-wrap {
top:0;
padding-top: 30px;
}
/* Bottom */
.imagebox .imagebox-description.bottom .imagebox-title-wrap {
bottom:0;
}
/* Center */
.imagebox .imagebox-description.center .imagebox-title-wrap {
top: 50%;
transform: translateY(-50%);
left:0;
width: 100%;
text-align: center;
}
.imagebox .imagebox-description .imagebox-intro {
display: inline-block;
font-size: 11px;
line-height: 1;
font-weight: 600;
padding: 5px 10px 5px 30px;
margin-bottom: 5px;
color: #fff;
background: var(--color-primary-600);
transform: translate(-30px);
}
.imagebox .imagebox-description .imagebox-title {
display: block;
font-size: 1.3rem;
line-height: 1.2;
font-weight: 500;
margin: 0;
padding: 0em 0 0px;
}
a.imagebox:hover .imagebox-description .imagebox-title {
}
.imagebox .imagebox-description.top .imagebox-title,
.imagebox .imagebox-description.bottom .imagebox-title {
max-width: 70%;
}
.imagebox .imagebox-description .imagebox-title.title-small {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
}
.imagebox .imagebox-description .imagebox-title.title-medium {
font-size: clamp(1.125rem, 0.9432rem + 0.4545vw, 1.625rem);
}
.imagebox .imagebox-description .imagebox-title.title-large {
line-height: 1.1;
font-size: clamp(1.375rem, 1.1477rem + 0.5682vw, 2.000rem);
}
.imagebox .imagebox-description .imagebox-title.title-xlarge {
line-height: 1.1;
font-size: clamp(1.500rem, 1.0455rem + 1.1364vw, 2.750rem);
}
.imagebox .imagebox-description .imagebox-title-wrap.bg-white .imagebox-title {
}
.imagebox .imagebox-description p {
margin: 10px 0 0 0;
font-size: clamp(0.750rem, 0.6591rem + 0.2273vw, 1.000rem);
line-height: 1.3;
-webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.imagebox:hover .imagebox-description p {
visibility: visible;
opacity: 1;
}
.imagebox .imagebox-quote {
padding: 0px 5px 0 0rem;
line-height: 1.3;
font-size: 1.1rem;
font-weight: 500;
}
.imagebox .imagebox-arrow {
position: absolute;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 88;
font-size: 1.2rem;
opacity: 1;
transform: translate(0, 0);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.imagebox .imagebox-arrow i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.imagebox:hover .imagebox-arrow {
opacity: 1;
}
.imagebox .imagebox-button {
margin-top: 15px;
display: inline-flex;
align-items: center;
justify-content: space-around;
z-index: 88;
-webkit-transition: transform 0.2s ease-in-out;
-moz-transition: transform 0.2s ease-in-out;
-ms-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.imagebox .imagebox-footer {
position: absolute;
left: 0;
bottom:0;
width: 100%;
padding: 27px 0px;
z-index: 55;
}
.imagebox .imagebox-footer .imagebox-footer-price {
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 1;
background: var(--color-primary-600);
padding: 5px 15px 2px 30px;
border-radius: 0 3px 3px 0;
}
.imagebox .imagebox-footer .imagebox-footer-info {
margin-top:4px;
display: block;
font-size: 12px;
font-weight: 400;
color: #fff;
padding-left: 30px;
}
/* Badge */
.imagebox-badge {
position: absolute;
top: 10px;
right:-5px;
padding-top: 20px;
width: 120px;
height: 120px;
border-radius: 200px;
text-align: center;
line-height: 1;
color: #fff;
z-index: 88;
transform: rotate(12deg)
}
.imagebox-badge-intro {
font-size: 1rem;
}
.imagebox-badge-intro.striped {
text-decoration: line-through;
}
.imagebox-badge-title {
font-size: 2.2rem;
font-weight: 700;
display: block;
padding: 6px 0;
}
.imagebox-badge-info {
}
/* Imagobox Heights (all) */
.blocks-height-small .imagebox {
min-height: 160px;
}
.blocks-height-medium .imagebox {
min-height: 260px;
}
.blocks-height-large .imagebox {
min-height: 360px;
}
.blocks-height-xlarge .imagebox {
min-height: 400px;
}
.blocks-height-huge .imagebox {
min-height: 460px;
}
/* Imagobox Heights (seperato) */
.imagebox.height-small {
min-height: 160px;
}
.imagebox.height-medium {
min-height: 300px;
}
.imagebox.height-large {
min-height: 380px;
}
.imagebox.height-xlarge {
min-height: 500px;
}
.imagebox.height-huge {
min-height: 660px;
}
/* List */
.imagebox-list ul {
list-style: none;
margin:0;
margin-top: 1rem;
}
.imagebox-list ul li {
color:#fff;
font-size: 1.3rem;
}
.imagebox-list ul li i {
color: var(--color-primary-500);
}
@media (max-width: 1280px) {
.section-slider-container .imagebox {
min-height: 200px;
}
.blocks-height-small .imagebox {
min-height: 100px;
margin-bottom: 0;
}
.imagebox-description .imagebox-title-wrap {
padding-left: 1rem;
padding-bottom: 1rem;
}
.imagebox .imagebox-description.top .imagebox-title-wrap {
padding-top: 1rem;
}
.imagebox .imagebox-description.top .imagebox-title,
.imagebox .imagebox-description.bottom .imagebox-title {
max-width: 80%;
}
.imagebox .imagebox-description p {
font-size: 1rem;
}
}
@media (max-width: 1023px) {
.section-slider-container .imagebox {
min-height: 170px;
}
.blocks-height-small .section-slider-container .imagebox {
min-height: 100px;
margin-bottom: 0;
}
.section-slider-container .imagebox.height-xlarge {
min-height: 360px;
}
.imagebox.height-huge {
min-height: 460px;
}
.imagebox .imagebox-description.top .imagebox-title,
.imagebox .imagebox-description.bottom .imagebox-title {
max-width: 70%;
}
}
@media (max-width: 640px) {
.blocks-height-medium .imagebox {
min-height: 120px;
}
}
/*
---------------------------
ICON BOX
---------------------------
*/
.iconbox {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 80px;
padding: 4rem 3rem;
backface-visibility: hidden;
}
.iconbox .iconbox-image {
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
.iconbox .iconbox-image img {
max-width: 80px;
}
.iconbox .iconbox-section {
position: relative;
z-index: 3;
}
.iconbox .iconbox-section .iconbox-title {
}
.iconbox .iconbox-section p {
line-height: 1.5;
}
@media (max-width: 1280px) {
.iconbox .iconbox-section .iconbox-title {
font-size: 1.3rem;
}
.iconbox .iconbox-section p {
font-size: 1.1rem;
}
}
@media (max-width: 1023px) {
.iconbox {
min-height: 100px;
padding: 2rem 1rem;
}
.iconbox .iconbox-image {
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
.iconbox .iconbox-image img {
max-width: 60px;
}
.iconbox .iconbox-section .iconbox-title {
font-size: 1.2rem;
}
.iconbox .iconbox-section p {
font-size: 1rem;
}
}
/*
---------------------------
COLUMN BOX
---------------------------
*/
.card {
position: relative;
min-height: 100px;
backface-visibility: hidden;
color: var(--color-primary-900);
}
.card-inner {
position: relative;
z-index: 2;
}
@media (max-width: 1100px) {
.card-heading {
padding: 1.5rem 2rem 1rem 1.5rem;
}
}
.card-image {
overflow: hidden;
position: relative;
display: block;
z-index: 1;
}
a.card-image,
.card-image img {
position: relative;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-ms-transition:transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.card-image:hover img,
.card-image a:hover img {
transform: scale(1.05);
}
.card-image a {
position: relative;
display: block;
margin:0 !important;
padding:0 !important;
}
.card-image a:hover {
display: block;
}
.card-image .card-image-title-wrap {
position: absolute;
bottom: 0;
width: 100%;
display: block;
padding: 0rem 2rem 1rem 1rem;
}
.card-image .card-image-title-wrap .card-image-title {
max-width: 100%;
color: #fff;
font-size: 1.4rem;
margin-bottom:0;
z-index: 3;
}
.card-image .card-image-title-wrap i {
position: absolute;
top: 5px;
right:2rem;
color: #ffffff;
font-size: 1.125rem
}
@media (max-width: 1100px) {
.card-image .card-image-title {
font-size: 1.4rem;
}
}
@media (max-width: 1023px) {
.card-image .card-image-title {
padding: 1rem 1.5rem 0.5rem 1rem;
max-width: 90%;
color: #fff;
font-size: 1.2rem;
}
}
@media (max-width: 640px) {
.card-image .card-image-title {
max-width: 80%;
color: #fff;
font-size: 1.6rem;
line-height: 1.3;
}
}
.card-icon {
border-radius: 0px;
font-size: 1.4rem;
text-align: center;
}
.card-icon.icon-small {
font-size: 1.4rem;
}
.card-icon.icon-medeium {
font-size: 2rem;
}
.card-icon.icon-large {
font-size: 3rem;
}
.card-icon.icon-huge {
font-size: 4rem;
}
.card-section {
position: relative;
display: block;
padding: 25px 25px 25px;
z-index: 2;
}
.card.with-footer .card-section {
padding-bottom: 90px;
}
.card-section .card-title {
font-weight: 500;
line-height: 1.3;
}
.card-lead {
}
.card-lead p {
font-size: 0.96rem;
}
.card-link {
font-weight: 700;
padding-left:0 !important;
}
/* Centered */
.text-center .card-section {
padding: 1rem 2.5rem;
}
/* Listing */
.card-listing {
position: relative;
z-index: 996 !important;
}
.card-listing ul {
list-style: none;
margin:0;
padding:0;
}
.card-listing ul li {
}
.card-listing ul li:last-child {
border:0;
}
.card-listing ul li > a {
padding-left: 0;
font-weight: 600;
display: block;
padding: 0.5em 1em 0.5em 1rem !important;
font-size: 15px;
letter-spacing: 0px;
position: relative;
line-height: 1.1;
color: var(--color-primary-900);
}
.card-listing li > a i {
position: absolute;
top: 10px;
left: 0;
color: var(--color-primary-600);
font-size: 12px
}
.card-listing li > a:hover {
color: var(--color-primary-600);
}
.card-listing li > a:hover i {
transform: translateX(3px);
color: var(--color-primary-600);
}
.card .card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 25px;
}
.card-footer-timestamp {
font-size: 14px;
}
.card-button {
}
/* Card backgrounds */
.card-background {
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 1;
}
.card-icon-shape {
position: absolute;
top:0%;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
opacity:1;
z-index: 1;
}
.card-icon-shape .icon-shape {
width: 120%;
height: auto;
margin-left: 0%;
transform: rotate(0deg) translateX(100px)translateY(200px);
}
.card-shade {
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 1;
}
.card-shade.top {
top: 0;
}
.card-shade.bottom {
bottom: 0;
}
@media (max-width: 1100px) {
.card-listing li > a {
text-overflow: ellipsis;
font-weight: 700;
white-space: nowrap;
width: 100%;
padding-right: 2.5rem;
overflow: hidden;
}
.card-listing li > a i {
position: absolute;
top: 12px;
right:3px;
}
.sidebar .card-usp-listing li {
font-size: 0.86rem;
padding-left: 20px;
}
.sidebar .card-usp-listing li i{
font-size: 1rem;
}
.card .card-footer {
padding: 1rem 1rem 1rem;
}
.card-button {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.card-button i {
display: none !important;
}
}
@media (max-width: 1023px) {
.card-section {
padding: 20px 15px 20px;
z-index: 2;
}
.card-listing li > a {
text-overflow: ellipsis;
font-weight: 700;
white-space: nowrap;
width: 100%;
font-size: 0.86rem;
padding: 0.66em 0em 0.66em 0rem;
padding-right: 1rem;
overflow: hidden;
}
.card-listing li > a i {
}
.sidebar .card-usp-listing li {
font-size: 0.96rem;
padding-left: 30px;
}
.sidebar .card-usp-listing li i{
font-size: 1.1rem;
}
.card .card-footer {
padding: 1rem 1rem 1rem;
}
.card-button {
font-size: 0.86rem;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.card-button i {
display: none !important;
}
}
/* --- /templates/xso/css/brands.css --- */
.brands-slider {
padding-block: 2rem;
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.brand-box {
display: flex;
align-items: center;
justify-content: center;
width: 15vw;
min-height: 100px;
}
.brand-box img {
position: relative;
z-index: 2;
width: 150px;
max-height: 70px;
object-fit: contain;
filter: grayscale(100%) contrast(1.2);
opacity: 0.6;
transition: all 0.2s ease-in-out;
}
.brand-box:hover img {
opacity: 1;
filter: grayscale(0%) contrast(1.2);
}
@media screen and (max-width: 1023px) {
.brand-box {
display: flex;
align-items: center;
justify-content: center;
width: 20vw;
min-height: 100px;
}
.brand-box img {
position: relative;
z-index: 2;
width: 60px;
max-height: 30px;
}
}
.brands-circle-wrapper {
position: relative;
min-width: 1440px;
width: 1440px;
min-height: 600px;
left: 50%;
margin-left: -720px;
z-index: 6;
}
.brands-circle-shape {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
opacity: .08;
}
.brands-circle-shape .icon-shape {
object-fit: contain;
width: 100%;
height: auto;
margin-left: 6%;
}
.brands-circle-item {
position: absolute;
/* top: 50%; */
bottom:0;
left: 50%;
transform: translateX(-50%) translateY(0%);
}
.brands-circle-box {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 20px;
border: 1px solid var(--color-primary-200);
background: var(--color-white);
border-radius: var(--radius-large);
box-shadow: 0 10px 30px rgba(var(--color-primary-700-rgb), 0.1);
font-size: 20px;
font-weight: 600;
}
.brands-circle-box img {
width: auto;
max-width: auto;
max-height: 60px;
}
/* TimeWriter */
.brands-circle-item.tw {
bottom:0;
left: 50%;
transform: translateX(-50%) translateY(0%);
}
.brands-circle-box.main {
width: 140px;
height: 140px;
border-radius: 100%;
padding: 0;
}
.brands-circle-box.main img {
width: 80px;
max-width: 80px;
height: 80px;
}
/* Exact */
.brands-circle-item.exact {
bottom: 320px;
left: 260px;
transform: translateX(0);
}
/* Nmbrs */
.brands-circle-item.nmbrs {
bottom: 510px;
}
.brands-circle-item.nmbrs img {
max-height: 90px;
}
/* Snelstart */
.brands-circle-item.snelstart {
bottom: 320px;
left: auto;
right: 400px;
transform: translateX(0) scale(0.8);
}
/* Moneybird */
.brands-circle-item.moneybird {
bottom: 130px;
left: 160px;
transform: translateX(0) scale(1);
}
/* e-Boekhouden */
.brands-circle-item.e-boekhouden {
bottom: 80px;
left: auto;
right: 200px;
transform: translateX(0) scale(0.7);
}
/* Stip-t */
.brands-circle-item.stip-t {
bottom: 20px;
left: 410px;
transform: translateX(0) scale(0.8);
}
/* Asperion */
.brands-circle-item.asperion {
bottom: 150px;
left: 510px;
transform: translateX(0) scale(0.6);
}
/* Monix */
.brands-circle-item.minox {
bottom: 340px;
left: auto;
right: 200px;
transform: translateX(0) scale(0.6);
}
.brands-circle-item.minox img{
max-width: 170px;
}
@media screen and (max-width: 1023px) {
.brands-circle-wrapper {
position: relative;
min-width: 1440px;
width: 1440px;
min-height: 500px;
left: 50%;
margin-left: -720px;
transform: scale(0.8);
z-index: 6;
}
}
@media screen and (max-width: 640px) {
.brands-circle-wrapper {
position: relative;
min-width: 1440px;
width: 1440px;
min-height: 350px;
left: 50%;
margin-left: -720px;
transform: scale(0.5);
z-index: 6;
}
}
/* --- /templates/xso/css/testimonials.css --- */
/*
---------------------------
TESTIMONIALS
---------------------------
*/
.testimonials-slider {
padding-bottom: 60px;
}
.testimonials-slider .splide__track {
overflow: visible;
}
.testimonial-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
border-width: 1px;
border-style: solid;
padding: 25px;
background-image: linear-gradient(to bottom, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
/* Ratings */
.testimonial-rating {
display: flex;
align-items: center;
justify-content: flex-start;
gap:0;
}
.testimonial-rating i {
margin: 0;
padding: 0;
}
/* Content */
.testimonial-content {
padding: 20px 0;
border:0;
}
.testimonial-content p {
font-size: 18px;
color: var(--color-primary-950);
}
/* Footer */
.testimonial-footer {
border-top: 3px solid var(--color-primary-200);
display: flex;
align-items: center;
justify-self: flex-end;
gap: 20px;
padding: 20px 0;
}
.testimonial-author-image {
width: 64px;
}
.testimonial-author-image img {
border-radius: 100%;
}
.testimonial-author-name {
font-weight: 700;
}
/* --- /templates/xso/css/breadcrumbs.css --- */
.breadcrumbs-wrapper {
border-bottom: 1px solid rgba(var(--color-primary-700-rgb), 0.1);
padding: 20px 0;
}
.breadcrumbs {
padding: 0 30px 0 35px;
margin: 0 0 0rem 0;
list-style: none;
}
.breadcrumbs::after, .breadcrumbs::before {
display: table;
content: ' ';
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-order: 1;
order: 1
}
.breadcrumbs::after {
clear: both
}
.breadcrumbs li {
float: left;
font-size: .86rem;
cursor: default;
text-transform: none;
color: var(--color-text);
font-weight: 700;
}
.breadcrumbs li:not(:last-child)::after {
position: relative;
margin: 0 .75rem;
opacity: 1;
content: "";
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-size: 10px;
line-height: 1;
color: var(--color-primary-600);
}
.breadcrumbs li:first-child {
/* margin-right: .75rem; */
}
.breadcrumbs li:first-child::after {
/* display: none; */
}
.breadcrumbs a {
font-weight: 400;
color: var(--color-text)
}
.breadcrumbs a:hover {
color: var(--color-primary-600);
text-decoration: none
}
.breadcrumbs .disabled {
color: rgba(255, 255, 255, 0.23);
cursor: not-allowed
}
@media screen and (max-width: 1023px) {
.breadcrumbs-wrapper {
padding: 10px 0;
}
.breadcrumbs {
padding: 0 15px;
}
}
@media screen and (max-width: 640px) {
.breadcrumbs-wrapper {
padding: 10px 0;
}
.breadcrumbs {
padding: 0 15px;
}
}
/* --- /templates/xso/css/usp.css --- */
/*
---------------------------
USP BOX
---------------------------
*/
.uspbox {
position: relative;
backface-visibility: hidden;
}
.uspbox.with-border {
border-width: 1px;
border-style: solid;
padding: 30px;
}
.uspbox .uspbox-title-wrap {
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.uspbox .uspbox-title-wrap.align-left {
display: flex;
justify-content: flex-start;
flex-direction: row;
}
.uspbox.hollow {
position: relative;
backface-visibility: hidden;
padding: 30px 30px 30px 30px;
border: 1px solid rgba(0, 33, 100, 0.14);
border-radius: 5px;
}
.uspbox-icon {
padding-bottom: 10px;
}
/* Font Icon */
.uspbox-icon.icon-small i {
font-size: 32px;
}
.uspbox-icon.icon-medium i {
font-size: 40px;
}
.uspbox-icon.icon-large {
padding-bottom: 20px;
}
.uspbox-icon.icon-large i {
font-size: 48px;
}
.uspbox-icon.icon-xlarge {
padding-bottom: 20px;
}
.uspbox-icon.icon-xlarge i {
font-size: 64px;
}
.uspbox-icon.icon-huge {
padding-bottom: 20px;
}
.uspbox-icon.icon-huge i {
font-size: 96px;
}
/* Image Icon */
.uspbox-icon.icon-small img {
width: 32px;
}
.uspbox-icon.icon-medium img {
width: 40px;
}
.uspbox-icon.icon-large img {
width: 48px;
}
.uspbox-icon.icon-xlarge img {
width: 64px;
}
.uspbox-icon.icon-huge img{
width: 96px;
}
.textbox-section {
}
.uspbox .uspbox-title {
font-size: 16px;
font-weight: 600;
margin:0 ;
}
.uspbox .uspbox-title.title-small {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
}
.uspbox .uspbox-title.title-medium {
font-size: clamp(1.063rem, 0.9353rem + 0.2098vw, 1.250rem);
}
.uspbox .uspbox-title.title-large {
font-size: clamp(1.063rem, 0.8505rem + 0.3497vw, 1.375rem);
}
.uspbox .uspbox-title.title-xlarge {
font-size: clamp(1.125rem, 0.7010rem + 0.6993vw, 1.750rem);
}
.uspbox .uspbox-title.title-huge {
font-size: clamp(1.188rem, 0.4668rem + 1.1888vw, 2.250rem);
}
.uspbox-section p {
line-height: 1.4;
}
.textbox-link {
font-weight: 700;
}
/* Centered */
.text-center .textbox-section {
padding: 1rem 2.5rem;
}
@media (max-width: 1280px) {
.uspbox-wrapper {
padding: 0 0rem;
}
.uspbox .uspbox-title {
font-size: 0.86rem;
font-weight: 700;
line-height: 1;
margin:0 ;
}
}
@media (max-width: 640px) {
.section-usp.padding-top-large {
padding-top: 1rem;
}
.section-usp hr {
display: none;
}
.uspbox {
padding: 0 0 5px 0rem;
}
.uspbox i {
font-size: 1rem;
margin-right: 0.5rem ;
}
.cover-caption .uspbox-wrapper {
margin-left:-0.6rem;
}
}
/* --- /templates/xso/css/pricing.css --- */
/*
---------------------------
PRICING Wrapper
---------------------------
*/
.billing-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: 700;
}
.switch {
position: relative;
margin-bottom: 0;
outline: 0;
font-size: .875rem;
font-weight: 700;
color: var(--text-color);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 52px;
}
.switch-paddle {
position: relative;
display: block;
width: 86px;
height: 52px;
border-radius: 100px;
background: var(--color-primary-100);
border:1px solid var(--color-primary-200);
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
font-weight: inherit;
color: inherit;
cursor: pointer;
}
input:checked~.switch-paddle {
background: var(--color-primary-100);
}
.switch-paddle::after {
position: absolute;
top: 5px;
left: 5px;
display: block;
width: 40px;
height: 40px;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border:1px solid var(--color-primary-700);
background-image: linear-gradient(to bottom, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 1) 100%);
border-radius: 100px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.1),0px 3px 10px rgba(var(--color-primary-500-rgb), 0.3);
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
content: "";
}
/* Pricing Box */
.pricingbox {
position: relative;
min-height: 100px;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pricingbox.highlight {
/* transform: scale(1.05); */
}
.pricingbox-shade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
z-index: 0;
}
.pricingbox-highlight {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
padding: 5px 20px;
border-radius: 100px;
}
.pricingbox-image {
border-radius: 10px;
position: relative;
display: block;
backface-visibility: hidden;
z-index: 1;
}
a.pricingbox-image,
.pricingbox-image img {
border-radius: 10px;
position: relative;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.pricingbox-image:hover img,
.pricingbox-image a:hover img {
opacity: 0.9;
}
.pricingbox-image.with-padding img {
border-radius: 5px;
}
.pricingbox-image.round img {
border-radius: 1000px;
}
.pricingbox-image a {
position: relative;
display: block;
margin:0 !important;
padding:0 !important;
}
.pricingbox-image a:hover {
display: block;
}
.pricingbox-section {
position: relative;
display: block;
padding: 25px 35px 25px 35px;
border-radius: 0;
z-index: 2;
}
.pricingbox-section.with-footer {
padding-bottom: 0;
}
.pricingbox-heading {
position: relative;
padding: 40px 35px 10px;
text-align: center;
z-index: 2;
}
.pricingbox-heading .pricingbox-title {
line-height: 1.3;
font-weight: 700;
}
.pricingbox-heading .pricingbox-title.title-small {
font-size: 1.250rem;
}
.pricingbox-heading .pricingbox-title.title-medium {
font-size: 1.6rem;
}
.pricingbox-heading .pricingbox-title.title-large {
font-size: 2.2rem;
line-height: 1;
}
.pricingbox-heading .pricingbox-title.title-xlarge {
font-size: 2.6rem;
}
.pricingbox-heading .pricingbox-title.title-huge {
font-size: 3rem;
}
.pricingbox-heading .pricingbox-title a {
display: block;
color: var(--color-primary-950);
position: relative;
padding-left:0;
}
.pricingbox-heading .pricingbox-title i {
position: relative;
margin-left: 6px;
color: var(--color-primary-600);
font-size: 22px;
-webkit-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.pricingbox-heading .pricingbox-title a:hover i {
transform: translateX(2px)
}
.pricingbox-heading .pricingbox-title a:hover {
opacity: 1;
color: var(--color-primary-950);
}
@media (max-width: 1100px) {
}
@media (max-width: 1023px) {
.pricingbox-section {
padding-top: 15px;
padding-left: 15px;
}
.pricingbox-heading .pricingbox-title.title-small {
font-size: 1rem;
}
}
@media (max-width: 767px) {
.pricingbox-heading .pricingbox-title.title-small {
font-size: 1rem;
}
.pricingbox-heading .pricingbox-title.title-medium {
font-size: 1.250rem;
}
.pricingbox-heading .pricingbox-title.title-large {
font-size: 1.8rem;
line-height: 1;
}
.pricingbox-heading .pricingbox-title.title-xlarge {
font-size: 2.2rem;
}
.pricingbox-heading .pricingbox-title.title-huge {
font-size: 2.4rem;
}
}
.pricingbox-lead {
max-width: 100%;
}
.pricingbox-lead p {
font-size:16px;
}
.pricingbox-link {
font-weight: 700;
padding-left:0 !important;
}
[class*="pricingbox-section bg-"]:not(.bg-white):not(.bg-light) .pricingbox-lead p {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Listing */
.pricingbox-listing {
flex-grow: 2;
position: relative;
z-index: 996 !important;
}
.pricingbox-listing {
position: relative;
list-style: none;
margin:0;
padding:0 35px 0 45px;
}
.pricingbox-listing li:last-child {
border:0;
}
.pricingbox-listing li > .pricingbox-listing-item {
font-weight: 400;
display: flex;
align-items: center;
padding: 10px 1em 10px 35px;
font-size: clamp(0.875rem, 0.7054rem + 0.2797vw, 1.125rem);
letter-spacing: 0px;
position: relative;
line-height: 1.5;
color: var(--text-color);
}
.pricingbox-listing li > a.pricingbox-listing-item {
padding-left: 0;
}
.pricingbox-listing li > .pricingbox-listing-item i {
position: absolute;
top: 12px;
left: 0;
color: var(--color-success);
font-size: 22px;
-webkit-transition: transform 0.1s ease-in-out;
-moz-transition: transform 0.1s ease-in-out;
-ms-transition: transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out;
}
.pricingbox-listing li > a.pricingbox-listing-item i {
left: auto;
right: 5px;
}
.pricingbox-listing li > a.pricingbox-listing-item:hover {
color: #2748F3;
}
.pricingbox-listing li > a.pricingbox-listing-item:hover i {
transform: translateX(3px);
color: #2748F3;
}
[class*="pricingbox-section bg-"]:not(.bg-white):not(.bg-light) .pricingbox-listing ul li > .pricingbox-listing-item {
color: rgba(255, 255, 255, 1) !important;
}
/* Price */
.pricingbox-price {
position: relative;
z-index: 996 !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px 25px 30px
}
.pricingbox-price .price {
font-size: 28px;
font-weight: 700;
line-height: 1;
}
.pricingbox-price .price-info {
font-size: 14px;
line-height: 1.2;
}
.pricingbox .pricingbox-footer {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
padding: 0rem 35px 35px 35px;
}
.text-center .pricingbox-footer {
display: flex;
justify-content: center;
}
.text-center .pricingbox-footer a {
margin: auto;
}
.pricingbox .pricingbox-footer-extra {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
padding: 0rem 35px 35px 35px;
}
@media (max-width: 640px) {
.pricingbox-listing {
position: relative;
list-style: none;
margin:0;
padding:0 15px 0 25px;
}
.pricingbox-listing li > .pricingbox-listing-item {
padding: 10px 1em 10px 25px;
}
.pricingbox-listing li > .pricingbox-listing-item i {
position: absolute;
top: 12px;
font-size: 18px;
}
.pricingbox .pricingbox-footer {
position: relative;
z-index: 3;
padding: 10px 15px 25px 15px;
}
.pricingbox-price {
position: relative;
z-index: 996 !important;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px 0 20px
}
}
/* --- /templates/xso/css/reviews.css --- */
/*
---------------------------
REVIEWS
---------------------------
*/
.reviewbox {
margin-top: 2rem;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
padding: 20px;
border: 1px solid rgba(0, 33, 100, 0.17);
border-radius: 5px;
}
.reviewbox-heading {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.reviewbox-author-image {
width: 60px;
height: 60px;
border-radius: 200px;
overflow: hidden;
margin-right: 20px;
}
.reviewbox-author-title {
flex-grow: 1;
}
.reviewbox-author-title h4 {
font-size: 16px;
line-height: 1;
margin:0;
font-weight: 600;
}
.reviewbox-author-title .reviewbox-author-date {
font-size: 13px;
line-height: 1;
margin:0;
}
.reviewbox-heading .object-rating-stars {
margin-top: 10px;
align-self: flex-start;
}
.reviewbox-section {
padding-top:10px;
}
.reviewbox-section p {
font-size: 16px;
font-weight: 400;
}
.reviewbox-text a {
color: #fff;
display: block;
font-weight: 400;
}
.reviews.pagination {
margin-top: 30px;
}
/* Reviews Info */
.reviews-info {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
/* margin-block: 1rem; */
height: 44px;
border-radius: 100px;
padding-right: 20px
}
.cover-heading .reviews-info {
margin-top: 40px;
}
.reviews-info.with-border {
border-width: 1px;
border-style: solid;
}
.review-info-rating-wrapper {
border-width: 1px;
border-style: solid;
height: 44px;
border-radius: 100px;
display: flex;
align-items: center;
padding: 0 20px 0 10px;
}
.reviews-info .g-icon {
display: flex;
align-items: center;
padding-inline: 10px;
height: 44px;
padding: 0px 10px 0 0;
margin-right: 15px;
border-right: 1px solid var(--color-primary-100);
}
.reviews-info .g-icon img {
max-width: 22px;
}
.reviews-info-avatars {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
/* Stars */
.reviews-info-rating {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
}
.reviews-info-rating i {
margin: 0 0px;
padding:0;
}
.reviews-info-rating-number {
font-weight: 700;
margin-left: 5px;
}
/* Avatars */
.reviews-info-avatars img {
width: 50px;
height: 50px;
border-radius: 100px;
border: 2px solid #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
margin: 0 0px 0 -10px;
}
.reviews-info-avatars img:first-child {
margin-left: 0;
}
.reviews-info-avatars .avatar-tiny {
width: 30px;
height: 30px;
}
.reviews-info-text {
font-size: 14px;
padding: 0 10px;
white-space: nowrap;
}
@media (max-width: 640px) {
.reviews-info {
transform-origin: left;
transform: scale(0.7);
}
}
/* --- /templates/xso/css/articles.css --- */
/*
---------------------------
BLOG POST BLOCK
---------------------------
*/
.postblock {
padding: 0rem 0px;
position: relative;
margin-top: 20px;
overflow: hidden;
}
.postblock.with-border {
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.postblock-image {
padding: 2rem;
padding-bottom: 0;
}
.postblock-section {
display: block;
padding: 1rem 0;
margin-bottom: 70px;
}
.postblock-content {
display: block;
}
.postblock-intro {
font-weight: 700;
display: block;
margin-bottom: 5px;
font-size: 0.76rem;
color: #9a9a9a;
padding-left: 2px;
text-transform: uppercase;
letter-spacing: 1px;
}
.postblock-title {
line-height: 1.2;
margin-bottom: 15px;
font-size: 1.6rem;
}
.postblock-title.title-small {
font-size: 1.3rem;
}
.postblock-title.title-medium {
font-size: 2rem;
}
.postblock-title.title-large {
font-size: 3rem;
}
.postblock-title a {
}
.postblock-subtitle {
font-size: 1.2rem;
}
.postblock-meta {
display: block;
padding-top: 1rem;
}
.postblock-meta p{
font-size: 0.86rem;
}
.postblock-lead {
padding-top: 10px;
}
.postblock-lead p {
font-size: 1rem;
font-weight: 400;
}
.postblock-link {
font-weight: 400;
}
.postblock-footer {
position: absolute;
bottom: 0;
left:0;
width: 100%;
padding: 1rem 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 0.86rem;
}
.postblock-share-buttons .postblock-share-title {
display: inline-block;
padding-top: 4px;
margin-top: 1rem;
margin-right: 10px;
}
.postblock-share-buttons .button{
margin: 10px 5px 0 0;
}
/* Detail */
.postblock-detail .postblock-section {
display: block;
padding: 1rem 0;
margin:auto;
}
.postblock-detail .postblock-detail-intro {
font-weight: 700;
display: block;
margin-bottom: 15px;
font-size: 1.2rem;
color: #989faf;
}
.postblock-detail .postblock-image {
position: relative;
padding: 0rem;
padding-bottom: 0;
}
.postblock-detail .postblock-image.image-size-50.float-left {
margin: 0.66rem 3rem 1rem 0;
}
.postblock-detail .postblock-image .postblock-image-caption {
padding: 10px;
text-align: center;
display: block;
font-size: 0.86rem;
opacity: 0.5;
}
.postblock-detail .postblock-detail-tags {
padding-top: 1rem;
}
.postblock-detail .postblock-detail-tags a {
display: inline-block;
padding: 0 10px;
}
.postblock-detail .postblock-lead p {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 30px;
}
/*
.postblock-detail .postblock-lead p::first-letter {
font-size: 3rem;
}
*/
.postblock-detail .postblock-content p {
font-size: 1.125rem;
font-weight: 400;
margin-bottom: 30px;
}
/* Listing */
.postblock-detail .postblock-content ul {
margin:0;
margin-bottom: 30px;
padding:0;
list-style: none;
}
.postblock-detail .postblock-content ul li {
position: relative;
padding: 0.4rem 0 0 0rem;
font-size: 1.3rem;
font-weight: 400;
}
.postblock-detail .postblock-content ul li a {
}
.postblock-detail .postblock-content ul li a:before {
}
.postblock-detail .postblock-content ul li i.icon-check {
font-size: 1.4rem;
color: #4fb45e;
top: 6px;
left: -2px;
}
.postblock-detail .postblock-content ul li img {
left: -2px;
}
.postblock-detail .postblock-footer {
position: relative;
padding: 1rem 0rem;
margin-top: 1rem;
}
/*
BLOCKQUOTE
---------------------------
*/
.postblock-detail .postblock-content blockquote {
float: right;
max-width:33%;
letter-spacing: 0;
border-left: 0;
text-align: left;
position: relative;
font-style: none;
margin: 0em 0 1.25rem;
margin-top: 40px;
margin-left: 40px;
margin-bottom: 40px;
padding: 0em 0rem 0 0rem;
border-right: 0px solid #ddd;
border-left: 0px solid #ddd;
/* transform: translateX(30%) translateY(0%); */
}
.postblock-detail .postblock-content blockquote:before {
position: absolute;
top: -24px;
left: 0;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.875em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/quote-left.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/quote-left.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
color: #007afa;
font-weight: 700;
font-size: 36px;
line-height: 1;
content: "";
}
.postblock-detail .postblock-content blockquote p {
font-size: 1.8rem;
line-height: 1.4;
font-weight: 700 !important;
color: #002164;
}
.postblock-detail .postblock-content blockquote p strong {
color: rgba(0, 33, 100, 0.47);
font-size: 0.86rem;
font-weight: 700;
font-style: normal;
}
/*
SHARING
---------------------------
*/
.side-share {
position: absolute;
top: 25px;
left: 0;
margin-left: 0px;
width: 80px;
}
.postblock-share-buttons .menu a,
.postblock-share-buttons .menu .button {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- /templates/xso/css/content.css --- */
#page-content {
padding-left: 30px;
padding-right: 6rem;
}
@media (max-width: 1023px) {
#page-content {
padding-left: 15px;
padding-right: 1rem;
}
}
@media (max-width: 640px) {
#page-content {
padding-left: 15px;
padding-right: 15px;
}
}
.textblock {
padding:1rem 0px 3rem;
}
.textblock-intro {
font-weight: 400;
display: block;
margin-bottom: 10px;
font-size: 0.86rem;
padding-left: 2px;
text-transform: uppercase;
letter-spacing: 3px;
}
.textblock-title {
line-height: 1.2;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.textblock-title.title-small {
font-size: var(--title-tiny);
}
.textblock-title.title-medium {
font-size: var(--title-small);
}
.textblock-title.title-large {
font-size: var(--title-medium);
line-height: 1.2;
}
.textblock-title.title-xlarge {
font-size: var(--title-large);
line-height: 1.1;
}
.textblock-title.title-huge {
font-size: var(--title-xlarge);
line-height: 1;
}
.textblock-subtitle {
font-size: 1.2rem;
}
.textblock-meta {
display: block;
padding-top: 0rem;
}
.textblock-meta p{
font-size: 0.86rem;
}
.textblock-lead {
padding-top: 10px;
}
.textblock-lead p {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
font-weight: 600;
line-height: 1.9;
}
.textblock-content P {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
line-height: 1.9;
}
/* Files */
.textblock-files ul {
margin-top: 30px;
}
.textblock-files ul li {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
}
.textblock-files ul.column-2 li {
width: 50%;
float: left;
padding-right: 1rem;
}
.textblock-files ul li a {
display: inline-block;
padding: 10px 20px 10px;
padding-left: 40px;
margin-bottom: 3px;
position: relative;
color: var(--color-primary-950);
border: 1px solid rgba(0, 33, 100, 0.12);
border-radius: var(--radius-medium);
}
.textblock-files ul li a:hover {
color:var(--color-primary-600);
}
.textblock-files ul li a .textblock-file-icon {
position: absolute;
top:8px;
left:15px;
display: flex;
align-items: center;
justify-content: flex-start;
width:30px;
height: 30px;
line-height: 1;
font-size: 20px;
text-align: center;
border-radius: 5px;
/* transform: rotate(-45deg) */
}
.textblock-file-icon i {
color: var(--color-primary-600);
background: transparent !important
}
.textblock-file-icon.doc i{
color: #083582;
}
.textblock-file-icon.pdf i{
color: #e14045;
}
.textblock-file-icon.xls i{
color: #6ab173;
}
.textblock-file-icon.zip i{
color: #ddaa0f;
}
.textblock-files ul li a .file-name {
}
.textblock-files ul li a:hover i {
}
/* Accordion */
.textblock-accordion .textblock-accordion-item {
background: #fff;
border: 1px solid var(--color-primary-300);
border-radius: var(--radius-xlarge) !important;
margin: 0 0 10px 0;
}
.textblock-accordion .textblock-accordion-item:hover {
border-color: var(--color-primary-600);
background-color: transparent !important;
}
.textblock-accordion .textblock-accordion-item.is-active {
}
.textblock-accordion .textblock-accordion-title {
font-size: clamp(1.000rem, 0.8304rem + 0.2797vw, 1.250rem);
font-weight: 500;
color: var(--color-primary-950);
border:0 !important;
background: transparent !important;
padding: 20px;
padding-left: 55px;
}
.textblock-accordion .textblock-accordion-title:hover {
color: var(--color-primary-950);
background-color: transparent !important;
}
.textblock-accordion .is-active .textblock-accordion-title {
color: var(--color-primary-950);
background-color: transparent !important;
}
.textblock-accordion-item:first-child>:first-child {
border: 0;
}
.textblock-accordion .textblock-accordion-title::before {
position: absolute;
top: 18px;
left: 20px;
right: auto;
margin-top: 0;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 500;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:22px;
color: var(--color-primary-600);
transition: all 0.2s ease-in-out;
}
.textblock-accordion .is-active .textblock-accordion-title::before {
transform: rotate(180deg);
content: "";
-webkit-mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
}
.textblock-accordion .textblock-accordion-content {
bordeR:0;
background: transparent;
padding: 0 40px 60px;
padding-left: 60px;
}
.accordion-content .textblock-lead p {
font-size: 1rem;
font-weight: 700;
}
.responsive-embed {
border-radius: var(--radius-medium);
}
@media (max-width: 640px) {
.textblock-accordion .textblock-accordion-title {
padding: 15px;
padding-left: 45px;
font-weight: 600;
}
.textblock-accordion .textblock-accordion-title::before {
position: absolute;
top: 14px;
left: 15px;
font-size:18px;
}
}
/*
---------------------------
TEXT BLOCK IMAGES
---------------------------
*/
.textblock-image {
display: inline-block;
margin: 10px 0 10px 0px;
padding: 0px 0px 0px 0px;
position: relative;
width: 50%;
}
.textblock-image.float-left {
margin-right: 30px;
}
.textblock-image.float-right {
margin-left: 50px;
}
/* Round */
.textblock-image a.round {
border-radius: 100%;
}
/* Sizes */
.image-size-25 {
width: 25%;
}
.image-size-33 {
width: calc(33.33333% - 25px);
}
.image-size-50 {
width: 50%;
}
.image-size-75 {
width: 75%;
}
.image-size-100 {
width: 100%;
margin-bottom: 1em;
margin-left: 0 !important;
}
@media (max-width: 640px) {
.image-size-25 {
width: 50%;
}
.image-size-33,
.image-size-50,
.image-size-75,
.image-size-100 {
width: 100%;
}
}
.textblock-image .textblock-caption {
font-size: 12px;
line-height: 1.1;
color: rgba(var(--color-primary-800-rgb), 0.5) !important;
text-align: center;
width: 100%;
display: block;
font-style: italic;
padding-top: 5px;
}
.textblock-image a.round:before {
border-radius: 100%;
}
.textblock-image a:hover:before {
opacity: 1;
}
.textblock-image.right {
float: right;
margin: 10px 0px 20px 40px;
}
.textblock-image-wide {
float: left;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow:hidden;
position: relative;
}
.textblock-image-wide img {
margin:0px 0px 0px 0px;
border: 0px;
padding: 0px;
display: block;
max-width: 100%;
opacity: 1;
filter: alpha(opacity=100);
}
.image-thumbnails {
display: flex;
margin: 1rem auto 0;
gap: 5px;
padding: 0;
justify-content: center;
}
.image-thumbnail {
width: 70px;
height: 70px;
overflow: hidden;
border-radius: var(--radius-medium);
border: 2px solid#fff;
padding: 5px;
list-style: none;
cursor: pointer;
}
.image-thumbnail.is-active {
border: 2px solid var(--color-primary-600);
}
.image-thumbnail img {
height: 100%;
object-fit: cover;
border-radius: var(--radius-small);
}
/* Hover item */
.gallery-item {
display: block;
position: relative;
}
/*
[class*=' medium-up-'] .gallery-item {
margin-bottom: 40px;
}
*/
.gallery-item img {
/* overflow: hidden; */
border-radius: inherit !important;
}
.gallery-item:before {
position: absolute;
bottom: -15px;
left:-15px;
margin-top: 0px;
margin-left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
content:'';
border: 2px solid var(--color-primary-600);
opacity: 0.3;
}
.textblock-image .gallery-item:before,
.textblock-image-gallery .gallery-item:before {
display: none;
}
.gallery-item:after {
position: absolute;
bottom: 10px;
right:10px;
margin-top: 0px;
margin-left: 0px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 100px;
opacity: 0;
background-color: #fff;
color: var(--color-primary-600);
text-align: center;
/* Dit blokje is de enige uitzondering op het mask-mechanisme, en met reden:
* het IS al iets - een witte schijf van 40px - en een mask verft het hele
* vlak, dus dan verdwijnt die schijf. De loep ligt hier daarom als
* achtergrondplaatje OP het wit. Prijs daarvan: dit ene icoon heeft zijn
* kleur in het bestand en volgt de huisstijl-skin niet. */
background-image: url(https://www.timewriter.nl/templates/xso/images/icons/decor/magnifying-glass-primary.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
z-index: 88;
transform: translate(130%, 100%);
-webkit-transition: all 0.2s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.2s ease-out; /* FF4+ */
-ms-transition: all 0.2s ease-out; /* IE10? */
-o-transition: all 0.2s ease-out; /* Opera 10.5+ */
transition: all 0.2s ease-out;
}
.gallery-item:hover:after {
opacity: 1;
transform: translate(0, 0);
}
.collapse.textblock-image-gallery a,
.collapse.textblock-image-gallery a.gallery-item,
.collapse.textblock-image-gallery img {
border-radius: 0 !important;
margin-bottom: 0px;
}
.collapse.textblock-image-gallery {
margin-top: 0;
}
/* SLIDES */
.textblock-image-slides {
position: relative;
/* margin-top: 20px; */
}
.textblock-image-slides a {
overflow: hidden;
/* border-radius: 0px; */
margin-bottom: 0px;
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.textblock-image-slides a.radius {
border-radius: 5px;
}
.textblock-image-slides img.radius {
border-radius: 5px;
}
/* CAROUSEL */
.textblock-image-carousel {
}
@media (max-width: 640px) {
.gallery-item:before {
display: none;
}
}
/* --- /templates/xso/css/sidebar.css --- */
.sidebar {
padding-bottom: 3rem;
position: relative;
z-index: 99;
}
.sidebar-content {
/* box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.08), inset 0 -3px 0 0 rgba(0, 0, 0, 0.06); */
box-shadow: inset 0 -2px 0 0 rgba(4, 20, 47, 0.08), 0px 2px 3px rgba(4, 20, 47, 0.08);
border-radius: 10px 10px;
padding-bottom: 2rem;
padding: 2.1rem 1rem 1rem;
}
.sidebar-content .sidebar-title {
font-size: 1.3rem;
padding-left:.5rem;
}
/*
---------------------------
SUB NAVIGATION
---------------------------
*/
.mobile-subnav-button {
display: none;
padding-left:3rem;
float: left;
margin-left: 2rem;
}
.mobile-subnav-button i {
top: 11px;
left: 0.8rem;
right: auto;
color: var(--color-primary-600) !important;
}
#mobile-subs {
display: none;
}
.subnav-title-wrapper {
display: block;
padding: 1rem 1rem;
}
.sidebar-subnav-title {
font-size: 1.4rem;
position: relative;
margin: 0 0 10px;
font-weight: 700;
}
.sidebar-subnav {
position: relative;
padding: 30px;
margin: 0rem 0 30px;
}
#mobile-subs .sidebar-subnav {
border: 0;
margin-bottom: 0;
}
.sidebar-subnav ul {
padding: 0px 0px;
margin: 0px;
list-style: none;
}
.sidebar-subnav ul li {
padding: 5px 0 5px 0;
margin: 0px 0 0px 0;
border:0;
}
.sidebar-subnav ul li:last-child {
border:0 !important;
}
.sidebar-subnav ul li a {
color: var(--color-primary-950);
font-weight: 400;
display: block;
padding: 0.8375em 1em 0.8375em 1.3rem;
padding-left: 40px;
font-size: 1.125rem !important;
border: 1px solid var(--color-primary-300);
border-radius: var(--radius-medium);
position: relative;
line-height: 1.1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar-subnav ul li a:hover {
border-color: var(--color-primary-600);
color: var(--color-primary-600);
}
/* "Titel | Subtitel": alles na de pipe komt als tweede, kleinere regel onder
de titel - dezelfde conventie als in het menupaneel. Zie subnav.php. */
.sidebar-subnav .subnav-label {
display: block;
}
.sidebar-subnav .subnav-sub {
display: block;
margin-top: 3px;
font-size: 0.8em;
font-weight: 400;
line-height: 1.3;
color: var(--color-text);
opacity: 0.8;
}
.sidebar-subnav ul li.menu-current > a .subnav-sub,
.sidebar-subnav ul li.menu-parent > a .subnav-sub {
color: var(--color-primary-900);
opacity: 0.9;
}
.sidebar-subnav ul li a:before {
position: absolute;
left: 20px;
top: 15px;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:18px;
margin-right: 0px;
color: var(--color-primary-400);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.sidebar-subnav ul li a:hover:before {
-webkit-transform: translate(3px, 0);
transform: translate(3px, 0);
opacity: 1;
color: var(--color-primary-600);
}
.sidebar-subnav ul li.is-active a:before {
opacity: 1;
color: var(--color-primary-600)
}
.sidebar-subnav ul li.is-active a {
color: var(--color-primary-600);
font-weight: 700;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).sidebar-subnav ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).sidebar-subnav ul li a:hover {
color: #fff !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).sidebar-subnav ul li a:before {
color: #fff !important;
}
.sidebar-subnav ul li.invisible {
visibility: visible;
display: block;
}
@media (max-width: 1023px) {
}
@media (max-width: 640px) {
.sidebar-subnav {
padding: 15px;
}
}
/* Tweede niveau */
.sidebar-subnav ul li ul {
margin: 0;
padding: 0;
margin-top: 0px;
padding-left: 0px;
padding-bottom: 20px;
}
.sidebar-subnav ul li ul li {
border: 0px solid #eeedec;
}
.sidebar-subnav ul li ul li > a {
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 15px !important;
padding: 0.3em 0rem 0.3em 20px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.sidebar-subnav ul li ul li > a:hover {
color: rgba(255, 255, 255, 1) !important;
background: none !important;
}
.sidebar-subnav ul li ul li a:before {
display:none;
}
.sidebar-subnav ul li ul li > a:not(.button):hover:before {
color: #fff !important;
}
.sidebar-subnav ul li ul li.is-active > a,
.sidebar-subnav ul li ul li.is-active > a:hover {
background: none !important;
color: rgba(255, 255, 255, 1) !important;
}
.sidebar-subnav ul li ul li.item-leaf > a {
font-weight: 700 !important;
}
/* Derde niveau */
.sidebar-subnav ul li ul ul {
margin: 0;
padding: 0;
margin-top: 0px;
padding-left: 15px;
padding-bottom: 10px;
}
.sidebar-subnav ul li ul ul li {
border: 0px solid #eeedec;
}
.sidebar-subnav ul li ul ul li > a:not(.button) {
font-weight: 400 !important;
color: rgba(78, 78, 81, 1) !important;
font-size: 14px !important;
padding: 0.3em 0rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.sidebar-subnav ul li ul ul li > a:hover {
background: none !important;
color: #22257a !important;
}
.sidebar-subnav ul li ul li > a:hover {
background: none !important;
color: #22257a !important;
}
.sidebar-subnav ul li ul ul li a:before {
top: 5px;
color: rgba(78, 78, 81, 1) !important;
}
.sidebar-subnav ul li ul ul li.is-active > a, .sidebar-subnav ul li ul li.is-active > a:hover {
background: none !important;
color: #22257a !important;
}
/* Listing */
.sidebar-listing {
position: relative;
z-index: 996 !important;
padding: 0.5rem 0rem;
}
.sidebar-listing ul {
list-style: none;
margin:0;
padding:0;
}
.sidebar-listing ul li {
}
.sidebar-listing ul li:last-child {
border:0;
}
.sidebar-listing li > a {
padding-left: 0;
font-weight: 500;
display: block;
padding: 0.375em 1em 0.375em 1rem;
font-size: 14px;
letter-spacing: 0px;
position: relative;
line-height: 1.1;
color: #481c8f;
border-radius: 5px;
}
.sidebar-listing li > a:before {
position: absolute;
top: 8px;
left:0rem;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-size: 12px;
line-height: 1;
content: "";
color: #f8bf05;
-webkit-transition: transform 0.1s ease-in-out;
-moz-transition: transform 0.1s ease-in-out;
-ms-transition: transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out;
}
.sidebar-listing li > a:hover {
color: #481c8f;
}
.sidebar-listing li > a:hover:before {
color: #f8bf05;
transform: translateX(3px);
}
.sidebar-listing li > a:hover:before {
/* transform: translateX(3px); */
}
@media (max-width: 1023px) {
.sidebar {
margin-bottom: 1rem;
}
.sidebar-content {
padding: 1rem;
}
.sidebar-listing {
display: none;
}
.sidebar-listing.expanded {
display: block;
}
.sidebar-listing ul {
list-style: none;
margin:0;
padding:0;
column-count: 3;
column-gap: 0;
display: block;
margin-bottom: 1rem;
}
.sidebar-listing ul li {
break-inside: avoid;
}
}
/* --- /templates/xso/css/subnav-flyout.css --- */
/*
---------------------------
SUBNAVIGATIE ALS UITKLAPPANE
---------------------------
De subnavigatie stond als kolom rechts naast de content, waardoor de content
maar 8 van de 12 kolommen breed was. In deze modus verhuist die navigatie naar
een pane die vast tegen de rechter vensterrand staat: geminimaliseerd is alleen
een smalle strip zichtbaar, komt de muis daarover dan schuift de pane over de
content naar buiten. De content zelf is daardoor altijd volle breedte.
Aan- of uitzetten: $tw['subnav_flyout'] in settings.php.
Afmetingen: de variabelen hieronder.
*/
:root {
--subnav-flyout-width: 340px; /* breedte van de uitgeklapte pane */
--subnav-flyout-rail: 54px; /* breedte van de geminimaliseerde strip */
--subnav-flyout-gutter: 60px; /* onzichtbare marge links, ruimte voor de slagschaduw */
--subnav-flyout-speed: 0.32s;
}
/* ---------------------------------------------------------------------------
De houder: staat vast in beeld, vangt zelf geen muis (pointer-events: none),
zodat alleen de zichtbare strip en de pane zelf op de muis reageren. De
overflow houdt de ingeklapte pane netjes buiten beeld - er ontstaat dus geen
horizontale schuifbalk.
--------------------------------------------------------------------------- */
.subnav-flyout {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: calc(var(--subnav-flyout-width) + var(--subnav-flyout-gutter));
padding: 2rem 0 2rem var(--subnav-flyout-gutter);
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
pointer-events: none;
z-index: 900;
}
.subnav-flyout-inner {
pointer-events: auto;
display: flex;
align-items: stretch;
width: var(--subnav-flyout-width);
max-height: 100%;
transform: translateX(calc(100% - var(--subnav-flyout-rail)));
transition: transform var(--subnav-flyout-speed) cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Uitgeklapt: met de muis erover, met toetsenbordfocus erin, of vastgezet
(is-open wordt door js/subnav-flyout.js gezet). Zonder JavaScript werkt de
hover-variant dus gewoon. */
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:hover,
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:focus-within,
.subnav-flyout.is-open .subnav-flyout-inner {
transform: translateX(0);
}
/* ---------------------------------------------------------------------------
De strip (tevens knop): verticale titel + icoon
--------------------------------------------------------------------------- */
.subnav-flyout-tab {
position: relative;
z-index: 2;
align-self: center;
flex: 0 0 var(--subnav-flyout-rail);
width: var(--subnav-flyout-rail);
min-height: 190px;
margin: 0 -16px 0 0; /* schuift over de afgeronde hoek van de pane heen */
padding: 1.1rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
border: 0;
border-radius: var(--radius-medium) 0 0 var(--radius-medium);
background: var(--color-primary-600);
color: var(--color-white);
cursor: pointer;
box-shadow: 0 6px 26px rgba(var(--color-primary-950-rgb), 0.22);
transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.subnav-flyout-tab:hover,
.subnav-flyout-tab:focus-visible {
background: var(--color-primary-700);
color: var(--color-white);
}
.subnav-flyout-tab:focus-visible {
outline: 3px solid var(--color-primary-300);
outline-offset: 3px;
}
.subnav-flyout-tab i,
.subnav-flyout-tab svg {
font-size: 20px;
width: 20px;
height: 20px;
flex: 0 0 auto;
display: block;
transition: transform var(--subnav-flyout-speed) ease-in-out;
}
/* Het pijltje wijst naar buiten zolang de pane dicht is en draait om zodra
hij open staat - zo is meteen duidelijk dat hij ook weer dicht kan. */
.subnav-flyout-tab .subnav-flyout-chevron {
font-size: 14px;
width: 14px;
height: 14px;
opacity: 0.85;
transform: rotate(180deg);
}
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:hover .subnav-flyout-chevron,
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:focus-within .subnav-flyout-chevron,
.subnav-flyout.is-open .subnav-flyout-chevron {
transform: rotate(0deg);
}
.subnav-flyout-tab-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
max-height: 15rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
/* ---------------------------------------------------------------------------
De pane zelf
--------------------------------------------------------------------------- */
.subnav-flyout-panel {
flex: 1 1 auto;
min-width: 0;
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-white);
border-radius: var(--radius-medium) 0 0 var(--radius-medium);
box-shadow: -2px 0 0 0 rgba(var(--color-primary-950-rgb), 0.05),
0 10px 44px rgba(var(--color-primary-950-rgb), 0.20);
padding: 1.6rem 1.4rem 1.6rem 1.6rem;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:hover .subnav-flyout-panel,
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:focus-within .subnav-flyout-panel,
.subnav-flyout.is-open .subnav-flyout-panel {
opacity: 1;
}
/* De navigatie zelf hergebruikt de bestaande zijbalkopmaak; alleen de ruimte
eromheen is anders, want de pane zorgt nu voor de marges. */
.subnav-flyout .sidebar-subnav {
padding: 0;
margin: 0;
border: 0;
}
.subnav-flyout .sidebar-subnav-title {
font-size: 1.15rem;
margin: 0 0 0.9rem;
padding-left: 0.2rem;
color: var(--color-primary-950);
}
.subnav-flyout .sidebar-subnav ul li a {
font-size: 1rem !important;
padding: 0.7em 0.9em 0.7em 34px;
}
.subnav-flyout .sidebar-subnav ul li a:before {
left: 15px;
top: 12px;
font-size: 15px;
}
.subnav-flyout .sidebar-subnav .subnav-sub {
font-size: 0.78em;
margin-top: 2px;
}
.subnav-flyout .sidebar-subnav ul ul {
margin-left: 12px;
}
.subnav-flyout .sidebar-subnav ul ul .subnav-sub {
font-size: 0.8em;
}
.subnav-flyout .sidebar-subnav ul ul li a {
font-size: 0.95rem !important;
padding-top: 0.45em;
padding-bottom: 0.45em;
border-color: transparent;
color: var(--color-text) !important;
}
.subnav-flyout .sidebar-subnav ul ul li a:hover {
color: var(--color-primary-600) !important;
border-color: var(--color-primary-200);
}
.subnav-flyout .sidebar-subnav ul ul li a:before {
display: none;
}
.subnav-flyout .sidebar-subnav ul li a,
.subnav-flyout .sidebar-subnav-title {
text-decoration: none;
}
/* Losse zijbalkcontent die eventueel meeverhuist */
.subnav-flyout .sidebar-content {
box-shadow: none;
padding: 1rem 0 0;
}
/* ---------------------------------------------------------------------------
De ingeklapte strip ligt over de content heen. Op brede schermen valt hij
in de witruimte naast de grid-container en raakt hij niets; wordt het
venster smaller, dan zou hij over de tekst komen. Onderstaande regel houdt
precies zoveel ruimte vrij als er tekortkomt - en geen millimeter meer, dus
op grote schermen blijft de content echt volle breedte.
--------------------------------------------------------------------------- */
body.has-subnav-flyout {
--tw-container: var(--max-width-desktop);
}
@media (max-width: 1500px) {
body.has-subnav-flyout { --tw-container: var(--max-width-medium); }
}
@media (max-width: 1100px) {
body.has-subnav-flyout { --tw-container: var(--max-width-tablet); }
}
@media (max-width: 1023px) {
body.has-subnav-flyout { --tw-container: calc(var(--max-width-tablet) - 40px); }
}
body.has-subnav-flyout #page-content,
body.has-subnav-flyout .page-content-more {
padding-right: max(0px, calc(var(--subnav-flyout-rail) + 14px - max(0px, (100vw - var(--tw-container)) / 2)));
}
/* ---------------------------------------------------------------------------
De knop "naar boven" zou tegen de pane aan kunnen komen; hij schuift een
stukje mee zodra de pane in beeld is.
--------------------------------------------------------------------------- */
body.has-subnav-flyout .scroll-to-top {
right: calc(var(--subnav-flyout-rail) + 20px);
transition: opacity 0.3s ease, right var(--subnav-flyout-speed) ease-in-out;
}
/* ---------------------------------------------------------------------------
Kleinere schermen: de pane is bijna schermbreed en gaat open met een tik op
de strip (hover bestaat daar niet).
--------------------------------------------------------------------------- */
@media (max-width: 1023px) {
:root {
--subnav-flyout-width: min(88vw, 340px);
--subnav-flyout-rail: 48px;
--subnav-flyout-gutter: 30px;
}
.subnav-flyout {
padding-top: 1rem;
padding-bottom: 1rem;
}
.subnav-flyout-tab {
min-height: 150px;
}
.subnav-flyout-panel {
padding: 1.2rem 1rem;
}
}
@media (max-width: 640px) {
.subnav-flyout-tab-label {
font-size: 0.875rem;
max-height: 11rem;
}
}
/* Rustige weergave voor wie beweging heeft uitgezet */
@media (prefers-reduced-motion: reduce) {
.subnav-flyout-inner,
.subnav-flyout-panel,
.subnav-flyout-tab i,
.subnav-flyout-tab svg {
transition: none;
}
}
@media print {
.subnav-flyout {
display: none;
}
}
/* --- /templates/xso/css/footer.css --- */
/*
---------------------------
FOOTER
---------------------------
*/
.going-back-up {
margin-top: 12px;
margin-right: 1rem;
z-index: 999 !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-size: 11px !important;
}
.button.going-back-up i {
}
.button.going-back-up:hover i {
transform: translate3d(0px, -50%, 0);
margin-top:-3px;
}
@media (max-width: 640px) {
.going-back-up {
display: none;
}
}
.footer-wrapper .is-relative {
z-index: 9;
}
/*
.footer-wrapper:before {
left: 0;
width: 50%;
transform: translateX(0);
}
*/
.footer-content {
padding: 1rem 0rem 1rem 30px;
}
.footer-content.first {
padding: 1rem 0rem 1rem 30px;
}
.footer-content.helpdesk {
margin-top: -8px;
padding: 1.5rem 1rem 1.5rem 30px;
/* background: #fff; */
border-radius: 5px;
margin-bottom: 20px;
}
.footer-content.helpdesk p {
color: var(--color-primary-950);
}
.footer-content.helpdesk .service-number {
position: relative;
display: inline-block;
font-weight: 700;
font-size: 28px;
line-height: 1;
color: var(--color-primary-950)
}
.footer-content.helpdesk .service-number span {
position: absolute;
top:0;
right: -10px;
width: 8px;
height: 8px;
display: block;
border-radius: 20px;
}
.footer-content.helpdesk .service-info {
display: block;
font-weight: 400;
font-size: 12px;
}
.follow-title {
display: block;
}
@media (max-width: 1280px) {
}
@media (max-width: 1023px) {
.footer-content.first {
}
.footer-logo {
}
.footer-content {
padding-left:30px;
}
.footer-wrapper .columns:last-child {
float: left;
}
}
@media (max-width: 640px) {
}
.footer-content.first .footer-title {
}
.footer-content .footer-title {
font-size: 16px;
margin-bottom: 15px;
font-weight: 700;
}
.footer-content p {
font-size: 16px;
line-height: 1.8;
color: var(--color-primary-950)
}
.footer-content p strong {
font-weight: 700;
margin-right: 5px;
}
.footer-content p a {
color: var(--color-primary-700)
}
.footer-content p a:hover {
color: var(--color-primary-700)
}
/* Table */
.footer-content table tbody,
.footer-content table tfoot,
.footer-content table thead,
.footer-content table,
.footer-content table tr,
.footer-content table tr td {
font-size: 16px;
background: transparent !important;
}
.footer-content table tbody tr:nth-child(even) {
background: transparent !important;
}
.footer-content table tr td {
padding: .2rem .625rem .2rem 0;
color: var(--color-primary-950)
}
/* List items */
.footer-list ul {
list-style: none;
padding:0;
margin:0;
}
.footer-list ul li {
padding:3px;
font-size: 16px;
}
.footer-list ul li a{
position: relative;
padding: 0px 0;
padding-left: 20px;
display: inline-block;
font-size: 16px;
font-weight: 400;
}
.footer-list ul li a:before {
position: absolute;
top: 5px;
left: 0rem;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-size: 14px;
line-height: 1;
content: "";
color: var(--color-primary-950);
/*-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;*/
}
.footer-list ul li a {
color: var(--color-primary-700);
-webkit-transition: color 0.3s ease-in-out 0s;
transition: color 0.3s ease-in-out 0s;
}
/*
[class*=" bg-"]:not(.bg-white):not(.bg-light) .footer-list ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
*/
.footer-list ul li a:hover {
color: var(--color-primary-800) !important;
}
/*
[class*=" bg-"]:not(.bg-white):not(.bg-light) .footer-list ul li a:hover {
color: rgba(255, 255, 255, 1) !important;
}
*/
.footer-wrapper.bg-primary .footer-list ul li a,
.footer-wrapper.bg-secondary .footer-list ul li a,
.footer-wrapper.bg-color3 .footer-list ul li a,
.footer-wrapper.bg-dark .footer-list ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
.footer-wrapper.bg-primary .footer-list ul li a:hover,
.footer-wrapper.bg-secondary .footer-list ul li a:hover,
.footer-wrapper.bg-color3 .footer-list ul li a:hover,
.footer-wrapper.bg-dark .footer-list ul li a:hover {
color: rgba(255, 255, 255, 1) !important;
}
/* Social */
.social-list ul {
list-style: none;
padding:0;
margin:0;
}
.social-list li {
padding:0;
}
.social-list li a{
position: relative;
padding-left: 0rem;
padding: 0rem 0;
display: inline-block;
}
.social-list li a {
color: var(--color-primary-700);
/*-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;*/
}
.social-list li a {
position: relative;
padding-left: 25px;
}
.social-list li a:before {
display: none;
}
.social-list li a i {
position: absolute;
top: 6px;
left: 0;
}
.social-list.inline ul{
display: flex;
align-items: center;
justify-content: flex-start;
}
.social-list.inline li .social-title {
float: left;
padding: 10px 5px;
}
.social-list.inline li a {
width: 48px;
height: 48px;
font-size: 24px;
text-align: center;
border-radius: 100px;
background: var(--color-primary-600);
margin-right: 10px;
}
.social-list.inline li a:hover {
background: var(--color-primary-700);
}
.social-list li a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 20px;
}
@media (max-width: 1023px) {
}
/* Bottom */
.copyright-wrapper {
padding: 40px 0;
}
.copyright-content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 35px;
padding-right: 35px;
}
.copyright-text {
font-size: 14px;
}
.copyright-content .menu {
margin-top: 0px;
}
.copyright-content .menu > li > a {
font-size: 14px;
font-weight: 600;
padding: 0;
margin-right: 15px;
}
/* Payments */
.payment-methods {
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.payment-methods > div > img {
height: 26px;
margin: 0 0px;
}
.payment-methods > div.payment-ideal > img {
height: 42px;
}
.payment-methods > div.payment-mastercard > img {
height: 34px;
}
.payment-methods > div.payment-visa > img {
height: 22px;
}
.payment-methods > div.payment-paypal > img {
height: 26px;
}
/* XSO Software */
.xso {
float: right;
margin-top: 5px;
width: 100px;
opacity: 0.5;
-webkit-transition: opacity 0.3s ease-in-out 0s;
transition: opacity 0.3s ease-in-out 0s;
}
.xso svg {
filter: grayscale(100%);
}
.xso:hover svg {
filter: grayscale(0%);
}
.xso:hover {
opacity: 1;
}
@media (max-width: 1023px) {
.copyright-content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 20px;
padding-left: 15px;
padding-right: 15px;
}
.xso {
right:1rem;
}
}
@media (max-width: 640px) {
.xso {
float: left;
}
}
/* --- /templates/xso/css/modals.css --- */
/*
---------------------------
REVEAL MODALS
---------------------------
*/
.reveal-overlay {
z-index: 99998 !important;
}
.reveal {
outline: 0;
border:0;
border-radius: 5px;
padding: 0;
box-shadow: 0px 10px 61px rgba(0, 0, 0, 0.2);
background-color: #fff;
z-index: 999999999 !important;
}
.reveal.mini {
width: 25%;
}
.reveal.tiny {
width: 35%;
}
.reveal.small {
width: 680px;
padding: 0 !important;
}
.reveal.medium {
width: 60%;
}
.reveal.large {
max-width: 74rem;
margin-bottom: 100px;
}
@media (max-width: 970px) {
.reveal.small {
width: 90%;
max-width: 680px;
padding: 0 !important;
margin:auto;
}
.reveal.dark {
background-color: #04142f;
}
#topNavigation {
width: 100%;
border-radius: 0;
}
}
@media (max-width: 640px) {
.reveal {
border-radius: 0px;
-webkit-overflow-scrolling: touch;
}
.reveal.mini,
.reveal.tiny,
.reveal.small,
.reveal.small {
width: 100%;
max-width: 640px;
padding: 0 !important;
margin:auto;
border-radius: 0;
}
.reveal.dark {
background-color: #04142f;
}
}
.reveal .close-button {
font-family: 'Poppins', sans-serif;
font-weight: 100 !important;
right: 0rem;
top: 0rem;
width: 80px;
height: 60px;
text-align: center;
padding:0;
z-index: 88;
opacity: 0.3;
-webkit-transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.reveal .close-button span {
position: absolute;
top: 50%;
left: 50%;
display: block;
line-height: 1;
font-size: 34px;
transform: translateX(-50%) translateY(-50%);
color: #002164;
/*-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)*/
}
.reveal .close-button:hover {
opacity: 1;
}
.reveal .close-button:hover span {
}
/* Reveal Header */
.reveal-header {
position: relative;
display: block;
width: 100%;
height: 60px;
z-index: 9;
text-align: left;
background: #fff;
padding-left:2rem;
}
.medium .reveal-header {
padding-left:3rem;
}
.reveal-header:after {
position: absolute;
left:0;
bottom: -1px;
width: 100%;
height: 1px;
background: #000;
opacity: 0.08;
content: '';
}
.reveal-header .reveal-title {
line-height: 60px;
font-size: 1.2rem;
display: block;
color: #002164;
font-weight: 600;
margin-top: 0rem;
}
.dark.reveal .close-button span {
color: rgba(255, 255, 255, 0.8);
}
.dark .reveal-header {
background: transparent;
}
.dark .reveal-header:after {
position: absolute;
left:0;
bottom: -1px;
width: 100%;
height: 1px;
background: #ffffff;
opacity: 0.08;
content: '';
}
.dark .reveal-header .reveal-title {
line-height: 70px;
font-size: 1.4rem;
display: block;
color: #fff;
font-weight: 900;
margin-top: 0rem;
}
@media (max-width: 640px) {
.reveal-header .reveal-title {
line-height: 70px;
font-size: 1.2rem;
}
}
/* Reveal SubHeader */
.reveal-subheader {
position: relative;
display: block;
width: 100%;
height: 50px;
z-index: 8;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
.reveal-subheader:after {
position: absolute;
left:0;
bottom: -1px;
width: 100%;
height: 1px;
background: #000;
opacity: 0.08;
content: '';
}
#addObject .reveal-subheader {
/*
position: fixed;
top:80px;
right: 0;
width: 100%;
*/
background: #fff;
}
.reveal-cover {
position: relative;
height: 360px;
}
/* Content */
.reveal-intro {
padding: 0 1rem;
font-weight: 400;
}
.reveal-content {
padding: 0rem 0;
}
.reveal-title {
font-size: 1.3rem;
}
/* Reveal Footer */
.reveal-footer {
position: absolute;
bottom:0;
left:0;
width: 100%;
height: 70px;
z-index: 8;
padding: 0rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08)
}
.reveal-footer:after {
position: absolute;
left:0;
top: -1px;
width: 100%;
height: 1px;
background: #000;
opacity: 0.08;
content: '';
}
.reveal-body {
padding: 2rem 2rem;
background: #fff
}
.reveal.small .reveal-body {
padding: 2rem 1.5rem;
}
.reveal-lead p {
font-family: 'filson-soft', sans-serif;
font-weight: 700;
font-size: 1.1rem;
}
.dark .reveal-body {
background: transparent;
}
@media (max-width: 640px) {
.reveal .reveal-body {
padding: 1rem 1.5rem;
}
}
/*
--------------------------------------
TABS
--------------------------------------
*/
.reveal .tabs {
border:0;
}
.reveal .tabs-title > a {
display: block;
padding: 1.25rem 1.5rem;
font-size: 0.75rem;
line-height: 1;
color: rgba(0, 0, 0, 0.4);
font-weight: 700;
height: 50px;
}
.reveal .tabs-title.is-active > a {
color: #000;
background: transparent;
border-bottom: 4px solid #007afa;
}
.reveal .tabs-panel {
padding:0;
}
.reveal .tabs-content {
border:0;
padding: 2rem 1rem 1rem;
}
.reveal .tabs-content .object-images {
margin: 1rem 0.86rem;
margin-top: 0rem;
}
/*
--------------------------------------
LANGUAGES
--------------------------------------
*/
.languages {
margin: auto;
padding:2rem 2rem;
margin:0;
list-style: none;
}
.languages li {
padding:0;
}
.languages li a {
position: relative;
display: block;
padding: 0.86rem 1rem .76rem 4.5rem;
border: 1px solid rgba(34, 21, 90, 0.1);
margin: 0px 0 6px;
font-size: 14px;
color: #002164;
font-weight: 400;
border-radius: 3px;
}
.languages li.is-active a {
border-color: rgba(0, 33, 100, 1);
font-weight: 600;
}
.languages li a i {
position: absolute;
top:50%;
right: 1.4rem;
font-size: 1.3rem;
transform: translateX(0px) translateY(-50%);
}
/*
.languages li a:before {
position: absolute;
top: 0px;
left:0;
width: 100%;
height: 100%;
content:'';
background-color: #f2f2f2;
opacity: 0;
z-index: -1;
}
*/
.languages li a:hover {
color: #002164;
border-color: rgba(0, 33, 100, 1)
}
.languages li a:after {
position: absolute;
top:50%;
left: 1.9rem;
transform: translateX(0px) translateY(-50%);
content: '';
width: 26px;
height: 26px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 5;
}
.languages li a.nl:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZ5JREFUaAXt271KA1EQBeCZSwhK0EbRynLfQRtLfwo7QyohIiQ+gfoIdoKVQRALG00nBI2lNnkHC8EuYLrEgILjbEgg7nJewHtuk90z29wvhwQSrsrU6pXrWyo/dRNbFdFlH+nU+D9emoh1VbRjEhoLzcbjZJOjjb9VqzPzg+K1P1SZDOJ81dtPKe2vNM+GhRRgrl+8FI0dJZWwyqwNvv1iT3u7tQ1Haacx11jAdDP4p0idIBkBtcPg9VnPxLwVW3MYWaREVkCXUhiuvEAgTB5llBCGMEAAxGwMYYAAiNkYwgABELMxAEYHwy//TYIrK8DGZEXG94QhDBAAMRtDGCAAYjaGMEAAxGwMYYAAiNkYwgABELMxhAECIGZjAEyhfP4ORnHHbAx4/wlDGCAAYjaGMEAAxGwMYYAAiNkYwgABEKeN+QCzaGP/B7IXzOQlWgG0cZPnIMEu0DzWPIg1wsNR8iSqN7Ei5PbtFq2TpD36VioVijV/4C73UHSBNscWf0+XbJ++7mjQAzHx0yeSnj6JYXVdoaNmV63j5H6y4V8Q6UlLHgzLPAAAAABJRU5ErkJggg==');
}
.languages li a.uk:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAC3xJREFUaAXtWwtYjdkafvely64QxSQjlxjk1kiki8oMGtNxi0LRuIUZhmbOOSa7yE6Gmcck41aRTA1pcsghd9GFphRJlGESKinX9q1d7X3W2p2d/Te2qTSmmafveer/17/W+tb63tb/re//3hULahJ3LN8lOu76IllVrQ15/A75YalVt9jtif3uSl1P3H1eq7NTXLiy3mVm3GvbvUGlgvQt47BZ6VNd+4UtmDX0hEoXm94UfvKJ7mMPn9iPy3OO7xQ4T7Yc2MWEPP5DQFEN3EquLPMehiahgjGTPfVKjj/x/DT2/nRfHp0bl/5qJ9SOAEvhIT12BnqZVyFY4Ikkux6IiLkKobiaNvnbibY2B7OmWGDqID1IwrZDfPc+tdGDp6ihBs9mS/97ahxbV9tLZbn8UQWE60Nhf+M8wgWOsBvxrqrqb3MdPKAzdgQ5Y6LoJoQBX6O2DhSlfSw2vIRRsePYkRXGi3TW+0NriAXD8KoLl8AODMbKEVoI8LWFUUflCmO0+asV9HhaWDrPCuvdTGGw6TtIE4hLqZXXm8HpTp4L/o2Txu8v5iac/GV0enYJ6eCOIfZ3If7hJyiEImVj+fNKCEMjMMRqKHaucseuxLs4db4QCuqy/mJiY2WKZTMtoHssEZW7UsAwgssFb+oElA23xepd2Si482QUdb7GZeUiBGxMRWgeB5wgPrRHDWeYXZ2Vgxp+ED7tKcZGviNMTQwY9a25YNheB37LbLDK0QAcwQZUnUlmgMLt2xv6wasQJ++JpQHnKCjUnC5K56sy7FxqEbKuPcTiOS6wcxgJ8a4fIX/yTFmtkEghIuWe/ftg+wovxKSV41DiLdTWtt7lM3Z0TyycZA72gXgIL2WpzFReWbo64M2cgl97D8bmbVm4V/xCvZ6t3K7Vnzx/UYWNW9MRdPYFZPyvoDPOkWzcL3fumvzbkKwKhqduMUIDnUG2O/XureL+nc76CPZzwNL+1aj1XwdZA1C0hg6ETrA/IssM8eXa8w1BUdrAWDHqVmVeLcWignLMmzESLmusIQ6LRm1pmbKJoroaktjD6HzpMkJ85uDwTSliDuZBJqtVV/HW71nkDzjZpS9mO3dF7d79EF27wZgDq50+9Lw9cK19D3z/TSYeVYgZ9eqF36wY9UqJpAbb9mRj5YEHeP6FL3hTJgCcl11qix6Q7W4DXJ/lYofACXQb/LOkx7sdELLGCd5GFahatQ7VDUDRtrMGW8BHaC6L+NOU14JCbdC4YtQNvHGrAp8RxzRjkgWmrRuGql3RqLlTVNdELof06Gnok8AweKEXzpDAcPe+HIjeUmDI5bIxY/IAuA9rD2nELohvF6pPHWyjjtBfMAup0o7YKUgDdRWNkUYBQxVVV8sRHX8dKT93wIoFPuhZcAWSuCNQVMmU48jLyiEM3gxHJ1uMFLhiW2w+Ll4ubswcmt2mf18j+M6zRJeMNAj5JCapqXmpi7xWOmNHQ+TyEb7bl4eMKwUv6xpx12hgVLru3n8O38Dzynd5DgkMa/bsQ/X1/LpqEuBUJaWBk52Lr+bNxM/2ttgelY2nz6Sq7i1y5ely4e0+GB/3ZkEcugWS4lKGXo6pCfR8vHDiARuRq8+DuoSmSpOBoQMoCACHjt/CpaxiLJs/E4Mcfq0LDEV1zkz+/AWEIWF439oS4fxpiDhWhNMXWiYwtBpigs+9BqHdmVOojEpixCTU//EmuqDC1hGCPVeQV1DRVDzq2zcLGFXvh49E4H+dAmW8sM4f7Nh4yH7OVlVDRvwOK68An3m5YYzdaIRGZKGU9GmOtDfQxsLZlnBqJ4To628grVAGYvWquOY9oEN83H9yRNgXcFb56tdXNuPmjYBRjXc6+S7o9r7EewJGjbYhgeE+yJ/+PzAUSyAKj0HvAX2x/QtPxKSUq7o1+upoa4Ylbn3BPZiAypR0Rj+WthZ4HpNwr/8whIRlo/Be3biMRs0osMbPOKBoRj+NXUYOq/sm4SUmouos85uEGqHr5kq2/Y+U/RubqJKlZkAUdQCKF5WMcbUG9gN3rieikx/i8PFfIJe3nCks4i9aThtj2r9faCwwv6+p5Vu8jNZaXvdfWiPr8fSFf9qKac3Ita0YDX+dNmDagNGAgIbHbSumDRgNCGh43LZi2oDRgICGx22RrwZg2l4lDcBwW/IkQS8zQ5LdG4Ye+dmQHEiAQsbkvbUdbFAzdRIMuxlpmM6rH9+6XYHuuZmQHjzK1EmzdB84QDJhArYos3TMhNWrtTXuaYusGC0tNsmoDcLmxQPQNTIM4uh4hgFs405o5/c50oeOgU8g+eJuovgGJuFHsSl46/ngkvRFvdCMISHQuEEb4O/cDl8RYo0SbC0hb5yPGdjPGMvnWqLzxWSIVpG8qxoXTPko3fFOqBw7Ht/GXCdkHpPOaKwBlNSLP1qAtIwHWE7omgGlBRDHHISC5Hqo0NyP8NvtGG5jhfDVbth5+A4oefgm0mxgeDwu4ZyGwKW7AuKQzZCUPGTMg9OtK/QWz8axXxXYS/Ou0qbnXRkKSYFm//yCL2CcUy8sWMcHaz/JGJIsoUpk6Vlg5d7E8jnT8YGDA7YQHprSz82RZgFjbdkVyzwHQv/EcVTuTmbmXSlBPmk8Ho20x5rIq8j/5XFz5qWxD80enUwqJFn/UiydOxHW9oRKjtwPmmemoiB5Z9GOvXhvUH/s+Ocs/HC+FAknbivz1BqVvqKiST6mA3l/Vy61weqxhtAO3oiqUxcYoHD79IJBsB8OcvsQHiqpxUFRnz9lHoJCLmLDRSlqA/2g42zHoJIpc1HFX4dPOpYriThKyDVFGr1inO3MsHhKH3DiD6EyLZMxBkuHEOQeE3G3ryVCtmej6MFzRv0fWaDc1bUbjzDf0wEf2I2AOCIGlOOiQjkvuhGYmmdiy5I5iL9Sif2HbxD66eWZGE1z+90V08VYD0ErHeA7lDi51cGQNQCFHjiiB4/2PukMX0KQv01QVEbR43ChEZfhn1AG8b++hK7rWAaVTFlTET8YU2W3sC3IGRbvGau6arxqXDGUIHcda465H3ZDbXQshFfzGEpY+nrQI07uulFvbPn2crOdHEPpGxboyllMXmEvt8GYLLCGJPwHUH5dKWS3lBxKhCGhdzYSMi7xfndExeZq3BReCYxZt/ZYvsAK5oWkI38PFFIm36s9ygpyj2nYmnAHp5ObHpe8of2v7U5PXETuv4bkXh2xYtGn6HYtgwSGx0BPaFCpJbtn5dpN+JDQt6MEH+F7EhhS6qehMIDhEiZv+sT+mGFtiKrISIgL7jDaszsaQo8Q5JeqO2HH2lQ8ayRBzlDylgq3C59iOQkM3T7uh1kkMJTtjgE926MUGhiSjUP7cg4CyAnVVOI/w6KvMgh/CgzlMY37mXfCivnvwyTrEnkfE39LkJPQW0pC7/WxN5CedatugFb+mwaGcUfykZphQD5VvNGvOB/iH0lgSE6HUaGnxYTfbMMIW2tYBUwhgeFtJKXdo1WPuTo67BTv6UOmuPbhQLJtKyT3imlFvXBMukBv0WycLOESgvwCxBLm9099w1Z8U/JQiJUkMHRx7o15wQFg7YuDjKwWlcguZoJFovIV3u4YY2+PLbuzk1kl9x6P63DuzElp4llGTEIJcurdnzo4Y3NUDnJvNp1aVQ3c8PpnHpmnx3I/mzcMw6tKII6KJYFhA3aT7LJs71kubFMzo1OSo2dj1I93cnp2h0GQH47oW2CJf1KLgtIQpLddfvxUAsGmNGzMqIYikA8dx1GMKchybsYYmL1zUul8JSx9Hz2FUJulo+XOm/YPPBhsjRByMuFOUcsQ5IyRW0mBfpDm5D3CQk8nONPPChoYllf8JIG+8j8/lMB0/ymEfqZ6SIuKY6JTKuYfWnPOhjgu+t8nf2sRimQICc8sS7Lokv75yi8iu5l1PqIy+H/nD5Bh/G1MzwAAAABJRU5ErkJggg==');
}
.languages li a.de:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZ5JREFUaAXt279KA0EQBvDdTYp4ZyOIvoo2Ek6Mf8BOSSVEBPWRDIJY2JjrLMRTNKCFvoqglSYphFtnTweWCfMCuW8hmd1v0+wvk61y1kRjfWd/i5YnxvgVqsv0stH2LE49HeqdjvlGtf94m9/xIauDt9u9ViP5uqQPdHmjntVfj1N3+Jrnk2YAaCTf50AJErabjPwPTQ5str3XsdYUIcb4E/DebDq6RehOwYgF6H45dfS2FoeYk4A1q47KIjCmBJYCDMa0gAPMNEqVAAYwioASo2MAowgoMToGMIqAEqNjFJjmIF1Qtuodo2OU7x8wgFEElBgdAxhFQInRMYBRBJQYHQMYRUCJ0TGAUQSUGB0DGEVAidExgFEElNiOH7LwHxEMIYCfkgDhJWBYQlTACBBeAoYlRAWMAOElYFhCVMAIEF4ChiVEDTAfIsPSmM/wr80XSAgBa56dK82ZiGu/LL3vu1bn6Z665qr2GgxAFvMbw6K6fOeSyTHlA96rbbUm/7egXonGqMh2rbNH0dMn0e7MTqunT7wvL9LO8IZP+Qu9kT3vV8z9KwAAAABJRU5ErkJggg==');
}
.languages li a.ru:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZBJREFUaAXt27FOQkEQBdCZDSQk2KHxV/wCtbFEKwtDFL/HSnwJsbARrKzEUhu+w0qiWEke8UXGWQjRR7g/4N5tYO/Q7OECCfBU/qzPabGvIm2x2Y6IbvvIt/96mYiNRMPQ73Q2atWH5WnnBzez2mRaXPvmaDlI8dZxbuu16omq5pUIkE+LLHWU6BAN3KLwu8fqL59dNRvEAddCwFT3giu1CVIWcJNzneRfbx5vlkep7+w1wvh7DteKwCysBNwuBAJhQBUIQxggAGI2hjBAAMRsDGGAAIjZGABTaV68gFHaMRsDnn/CEAYIgJiNIQwQADEbQxggAGI2hjBAAMRsDGGAAIjZGMIAARCzMQBGx81T/uC2BoeNWYMSI8IQBgiAmI0hDBAAMRtDGCAAYjaGMEAAxLEx72CWcGzjCPOcsAA4uj4FMb0E03RjlU5o3F09mulNugrlk0eLRi8bzD+Vcq2fiUmv/JAEdyr9uYUf3f8E/bs+DlsHYqHl30P41ScSrz5JYY0cYfgt0t3qZ/fLA/8AkaNVEm24aEUAAAAASUVORK5CYII=');
}
.languages li a.au:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAABmJJREFUaAXlW3tQVFUY/927i8v6AIEATQRR1EAc6SGTYGWNgj0cZRpeadOUU1pOUz6mnGzyMWX6h5M5Wj7SHmOKj3KSJsGmdHRQQ83KdISUEpeMeAkaIAts9zvsXe7u3rt7L7uIXs4MnMd3Ht/343yPc86Fgz21WCxJdYEhG85fqBq/ekNxgM1mE0ksL9iZhdqsl1g5dPdmTM3d7USnSmz0QHy8Oo2131i7BS3HTrLyM4bJLL8Nf5GQlbDhBHhuU+HOrAKRR54KV7JennXtjZWnwxrrUialxgS8/foEcBwn9lGVK4HSZ8IDqsb3UCcSchA4zIDNdiA9Jy8vM3O3mXjhaaeYjNznBquVr1/8HtquVCA1OQpawPEESv/5HbushwTXuCyXXW+wbWbAXDOFrA9d9RaPACNgbYVWcPQDSgeGwhaaNSU7L40/V1qdbBg6BMGrlkArOGpAeWXxQY1/tZ7vLpiRuYbKppQVsUODEZMQhT7JSbh5qIjtHMqpTu1Ejx4ShKY9+Yxrc+Y0FJ2skDW0ZFNE9SFQyi5f63lJNXIg7JoQnrzPu2uPo6jYAk87x3VuOe/T3aC8OGucKxvdVY9gXkkNOHIcSF1yd4Ny96D+yHh8FMJCmdOQY8efbbwhLjFzmTjj0Z8sTG3k1Mo0+SE053fYC1KlWwXKYxNjMGZ0OHIz4hEZ3g9j48MRNMCEuNgQlFysFVn3e+4EDM2uBI71zFnYGm4wBvigAWjeX8jK3b1TYqKC8ers+zE4sj9bLyzEjPiRYTjwQxkq/unghxH8/IsT1Mg5xHVZoL2+AdeXr0Gb5WonxR789X0hB4Hpj3a2K5TkomSFrrLNuRkJeC4r0UHb8OnPyD940VFXKpBN2rL9VyWyx3ajGOZ77OVKtGPZuHUn6Mdr8vFIYLW2sSVqapuYjTH1MXhdUrRJX39XChqnNQlR3e2fSMgVa4pw7FQFEu8Jx7gx4YpMk03qaw7ApJSh4HkOSxemCh63As03W/FNwR+K41wJXlWJBtwsPIz/tgk7Q6J1hqjBGLB0IfjgINc53eq+qpLbhB4aJqVEY+HcZAQEMIfLehIoKz88juIzEnPgYQ4icek5u9xsjGxES3bFDgyBwmyOcIygiJniH4qDKB7yYrK8sOMfcldtknT1TljtrbKgCDQytGKinaJ0fKDt29NJapOIFzU2yZVnJ2CGx8jfp5BLlnofUh+ls9WS1yYw3XZd6FbWRZs0c14+Fi0/BJPJu7F25c8BDIHy0Sr3SyZpnCId7HZ8eLPzysJXcHwN/dd9cpoZauL39wtV+PKr81LWVZUZME6gfLDZcfOmBArN7Ha2ahWuLPwAjuhmb1HorwgS7wbK8VOssxQUuasD2YOnD+CQm31qShwWzBnvcLPZ0+MxfepIRea7k8A71Id2igIoclcHigdPGXDUCNDebsOcZ5NYnEL9Rw0PZeejq5XdF/Z74oup0g2NoIgTqgVH7O8pP3ysHDv2OduCrTt+0xR7eJpfK43vKijiQmrAEft6y/3hZr2toZbOa1EfpUm9gaM0zrXdH27Wdc6u1mUj365O1tPjZj6d0CXXLMf3HXGIlGNc2jYooh+GCffSuTMS8Gd5PSqrGnHprzppF81lR4CneeRtNODJySOwbNFEGI083lmQinvHRvjMnS6AIe8l3rlY/r6OvfklPgOjC1Uym40ouVSLfetLMeXhYezKwWpt9wkcXRlfn5BwGawLVXKRyS9VzcDQVxDzhfOM3pNmYEaPCEXaI8NAzxh6TpqBoTtV2jX0KqjnpMr4znv+PgwMMmFgcCA7/dqflVBuaUBzSysuX2nAmo3FusJJ1Y6hk29SYiR7HhVBIRSio4QrTuG5dE/+BV2BQsKoAuZcSTWWvH/ETfiWljZ2p1pe0eBGu9MbVAFDQpaW1aKpudVJ3pq6JlTVNDq16aWiGpghwmugOdAIulHb+20Jsy/00B5xV1+9YOEkh+ojweg44QuDH8uw6Ytf2HPnZ3lnkfHEKPZpxr/V+ts1qrySE5S9pEKqVN1LZNUiZg0vPFwf1TKiN/QVMDlCHydu7A3CapGR57GJ/35XzkEBoe1aBuq5L2FRsCO7kLnr4DaOvmt3/68JPSMgJxvH7bFjIfx7gSSl5e6axtm42cKHMA8KzZESkp6LlcJnQicEILYV5GXtFwX9H+3E/7nnYPXgAAAAAElFTkSuQmCC');
}
.languages li a.at:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZhJREFUaAXt271KA0EUBeB7BwlK0Gb9qXwPbSzVxs6YSogEs76NrTEgFjZmrayMpTZ5C2vBtTIGFL3OLAkkm5wXcM402TmzzXwcNjAwKhMjr6X7Kr+piW2J6IZf0onl//hoIvaqon0T106y9sN4k8XGXxqNxZVB5dq/VB8vxPmrt59SPdnMzocLAWD5o9IRjR0lSFh9yQbf/uFY88PWrkfphZhjJGC65/xXJCVISUDtzPn67JRiTsW2PYysUqIsoOsBhmNWwBFmFqVICEMYIABiNoYwQADEbAxhgACI2RgAo4Phlz+T4CgLsDFlkdGcMIQBAiBmYwgDBEDMxhAGCICYjSEMEAAxG0MYIABiNoYwQADEbAyA0bx2ymOHOThszByUEBGGMEAAxGwMYYAAiNkYwgABELMxhAECIA6NeQNrEceWB5jniAXA1vXJiekFWI03Vmm75O7y0Uxv4lWY3nmwSLqdXvGvNNRqS0y6069EOFPJCgu/9anbJe9HzQMx1/TnEP72iYTbJzEMf/tE+j8iV2tZ53684T+h600K0j8TdgAAAABJRU5ErkJggg==');
}
.languages li a.sa:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAB7NJREFUaAXdW1lwFEUY/mZnMnskYXMRQUJOICSAIBJUUAQBsVCLioUEBbyP8kGrfLPKlzz7YvlglZSWFyggxW1UEOVIGZFDjRRIERJCKhBISAiE7D07/v/E3oBudGeymEn+qqU7vT093d/+/fXXfzcSbrDXa958eM0dT7wyK2/mPVR8G30kvec6fF/uRHDvQUCL3lB7RGR1QL8kQTqkw7E2e/Pab8WoJM48+/GzLr9b/oSyVfx3eW4pVs9YgeLMAv7TMK21Df4vtiJ0tF4UjcBU2uRD6nPjN7/jl3l0k1fe9TEkPCVG2tHbiR8aa9HWcxEl2UXwpLjhGJUOde5sKOWToLWch959VVQfSelURQ8XvH3y2DapauPzD9GM2T3Q6FRZxSOli7GsbClcirOvmq4juL8O/o3bEb0yAgHSpSXy1OUz36bRlg0EjKZrONXRgP3NPyJVTUVhxnhIkgSlKB/OxQ8Yea2xeWTxj4Q0BuY9AsUzEDCiPBAJ4tj533DsQj1uTx+D0ak5kBQFKVMnwznvXujXe40pJuoP71TPFB6T8Di6A1dxoLkO5662ojirAGnkRZLHDXX2nVBnTUe07RKiHZ0Jt2fPipKHgam20rkL19qwt/EAfGEfigggJ3GRI9ML5/w5kAvyoDW1GF5kpW0bPCPJH7w2ubor4gB/zFpUj+J0ZyOtYAchO2TDgxySA/K4sXAtnkee5EGE+SccNtv0kNeXOg6v0LOVKOp6UrChw4XLFgASoxiTlotV05ejIm+mKAILRP+WGgT2HAAikVi53TMGMDkEDFtIl7C9y4mvulQjb7XzLBCfnlGFwsz8WBPaxXb4129B6PCvsTI7Z2R1VFn12ExgtBeQSQdP8URwvzeMq+Q5rSFD/5nuPwvE75sOorO3CxOyiuBKccGRlgp1TsWwEYhyxtjy6l2HgdbLQOk4INVFa7dDx93pYUxPjaA1KFviH0azubvFIGjakKAkq9DgITk3B65F98MxOhusf/RA0DTw/8cDcmlZeXWYpv7ZS8BXR2g6UX5yHpBCzpKt6FjgDeF2NYqmgAxf1NhamepXJKrhRPsp1Db/hHRXOvK9424WiKSFtKZzxD+aqXZvdeUYMPwi3jwfbwZ2/wKku+lXHkubBcIi3xnFooywMdXOEEAabazMmi/sx5HWX/4pEKeU0hI/F3qvD9q5VrPN3rL6NwEj3uIPAXWngJ/oM340MIY4iPmnPAn8E1cgul1QK2bYSiBKjz2+XPcFBCTx0/vKgZeWAOOy+79vIM/5rN0NTq2a4lDw8MQHUTnlUaSm/OeuxOprLD0X12P+3lJLRx//9BJPMv+oSnL4RwjEfU21xs69kOI/Dp67NrCEPObGfnrph31mIbB0FqD85Sysf1j7sAbi/EgwuWRSebWZiGWQ1P3Pp4F9x/u0Tz5xEPNPmUcbtP6xE6ByQUl5tZUO9fiB/QRO/dm+1SsrPXn6x0p/kv2MXDzRGjCiI5e6gZqjQDsF8ph/3BTkS4b+Ee0PVTpoYETHz7T1ETRFPQ0Fzfwj9I9KSrqBwstW9I9o//9OkwYMd5zF629NwN56IDMNKMwlgmb+cQ8//kkqMOJX7SVdVHsC8NHyXjGxr1TsvzwU9qn30Xpvc7slPczNAF6ks4cF0/pH3x2RsK7DbcR9+kvtm0sqMG4VWDkPWD4XcKb0DZp1Tc0VFTtI4wQsbEKHCrqkAMNidQkF7Z5fBPCyzcahhmREBY3GhuCfQQMzvQh4dSkwgXbiwpKxjxJtDVWqqOTyIQuxat5Q8saSN5jCOKD+OcWN2VPYYxK1dGcanpi6DAtLHiAVbT4on+h7zNRTWG+YAWYU7ZWeJB6pvPfmvZIVHrHz7jrhqcQAMhir5gNpFP5kGwyP8EkCnyjwyYKwxuYrWLuuHr+fbBdFQ5YmBEwy4zF8csAnCHySIKyrO4BPNx3HngMUA2bpbAP7V2CYUJlYmWCF8bkTnz+Z5ZEMtxdV0yoxv3CuEfPl9gLBCLZ93YAvd/4Bf4CCzTayuMDwkstLLy/BIm5kVY/w1RG+QsJXSfhKCRt7BXsHewl7ix3tJmBYlLE4Y5HGYo3NKo/wVRH2DvYS9hZhzB/MI8wndjYDGPYKlu8s41nOC7OqR+KdRF64eB0fflGPuiPnRfO2TpU7iD9WkYeUje/vp1UeiXd2fa0niE07TmHH7gY6uo72v8TmuX+cXbMe2d7pRNBE7JYj/Bzp54g/axM2BoHB2LD1JK77LCjIIQbOGIVVHuGrHwuL5xmqldWrMJ4uPG14+gxXUziy9u4Vj+nzIbsLtMH+IMq7bR46zkdOog3FE2jtl31Yv+UEvqMl2C4CLdHxDFCvU9ElqVbS9coBKsSK4wk0FmUszrbUnEYoZK9D+VjHLWSIWg4qkh59n2TcgMDEu+c7HASaBTxijzgcWEsKhgTdhhfW0SK0OvYNZeh+PebkV+BJ2ujleLJiXw0XgRbrsMkMecv6PRur1hirkiZfe1nWvKou6Su4nUk5JVhDG72J2cWxZltar+ETkvB1R4eHQIt13ExGkjZ7I3iZHzE8Rjz7xq63Hls5o/KF2Xl33UNl/L9PwALts80n8M0PjdA0XthHnNGVKekQAfHRtxtX7BSj+xOl7xohbf/dcQAAAABJRU5ErkJggg==');
}
.languages li a.nz:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAABX5JREFUaAXtm2tsVEUUgM/M9kVDW1qlxfSVNhCVoJKIjW1jogm0+IOIJrst2l+Y+IqJIokSMVGJmvIDIUZUaiCaqNuWxBA0YVsTNZICUghRI2lqgGqXQANCW2tLaXvHOcPe7ezuzN57u9tu3e4k7cw987hnvp45c2ZySyCQbvr9q69n5e8923PlgZ17T6Yzxswqkfu8HrjmeUaUC9pbYP2m9pB6fKgoWwIf76wT8pE9n8LNY92i/KRrrcjn4S+c5AAwOAGU7OvwenymjhQL/Z7nmwZffe/0baPXax6uLU9/4+VqIISYbWzlOigZ1Wts9U9QI5zkMiCwERg7Ut/Y2up2ty9CXShaSmYa+dw1MUGHtr0LU/0XobaqBJzAiQZl8ZZbVpagiTt8LWkYcrEWAWYwM//DgubXKaSnAUxMglM4yQPlFkNuQk3rGlrr6O+9V6tcpcWQ17wdnMKxA+WFbZ0O/2qJb87dyHOugbGaHRWleVC+sgQyqlbD+A9dwnIwx2eUY31ZcS6MHfxGaL3IvQG6ui8qHS36FHP5IJTzfw4mfqYONeBWk09x93lnz3HoOumHaJYTPrZq95ltKE8Zf4SrMVvPhWJXsgNHpYG8Jc82lCIYhUfZX1AA4ypV4i2jAgyOagXHGBoOeflcQalll2Ed88OzxlmgPOB4xfgFHmN9sJ71h+gT7wfX8lXut+RBj/7sFz4l3OdMnPkN2PCIaEpzc+DG4Q5Rnm1LKYUR2Gz0QBGMifflc4tZwYbge1IMl0m2rHpcy4RbSmiIGzY8Wso/b++CKf+l6ZpA8Je9uRGy6h+ZlmtKqihZ01QpfpxdALdxLlj3Gb0TOklp8FlXQJ/0JV2hq44qTzPD/KitwisDLEf3ewF/LFOMR4IJvogwXYNM4WMywLB8pemTjkCZ6GfZIawBj+rmfypkY7CL3genyVK4iw3CSj5VXUKflA2TUM1z0yd1k0K+AF3gs2Fl5riWSwkbjnf8CP8e4JYhrTpXyR2Q8+ZWoHm55ljaPNalpB1YUVHDgaCjTpesCqF8QO+BM+R2RQ+1iNQ3tkX4GGVEi34lAAahCJ/DjxEYMWP8g3EQxkMWLkutRZylM/VJshrB7doUKqHwSnS0ZkJL0R0fKOUAE5xkn4Sq2PFJ4SqHgKksV9+n4JYs7z64fHRnq+0vVUOi4RSxUXif+6QXXQ/BDrqGg5kKn7flcxAMQvmoOfKSSY5T5NEijg+vTV9ZxAon1tB/P70bTnFHjamHLIGvSaWsuq2yABMCZXdL8OZNBwVHjjhbTfIrizjAMbfZOQr9tZBoBJTjp0RjGYrq6kB58IwBTqJCfx0ZGlw+aCkaKKqrA+3ZSgFH93JZjltjk9Er4hSUV7Jh2Ghc4Bey4qZRbjonZbGURhxCMTWzC8dsHy0/RpbBIVoR0sRLlzuKPUI6x/hAZwrFfK8dOGZbqzwe26zVO+zWUyfLRzeoFRxdv3B5PLbZ8DFn+qyMfGc6WKL7PcHOz2hrVun9vzhEqhSXZUv5XU0ZG+HOug/66WK4wh12H8mRmzguBwM8xz3nUYe1hh+28pu9NH5w3GL8CquinL7tqp0UYLz8MgrvajBd4pcO35Jyu/PXtksKMFn8LHSO5PFz0f3Qy48A8pWDduYWFUnhY27w+5bd9F4x1R6SbzFle9VJYTH2puqsVQqMhlcKTAqMhoBGnLKYFBgNAY04ZTEpMBoCGnHKYlJgNAQ04pTFRAFzVVO3kMV/U347f3QhE1DNnTP5CT9O/ERVuZBl/AO8ffS7tsZOTuiLhQxCnjuy8H3V0CGcb94Uwe/aI/9rQu6xEMqEHAyw4P9eIKW6TW0bCCNP8w9hHuTiIqkqmYsDAOQEB3HA1+o5bE70P74wvmvc5a9pAAAAAElFTkSuQmCC');
}
.languages li a.ca:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAA6dJREFUaAXtm11IFFEUx/9nZnYzTM3PirJ6CKKohx6CojDLEKGH7EPFsFAEDYSohyDwMQh6iCIIMiEiDNGVConIfOhDCEH6oCAIKs0QK9I0XTfXnb3dO6KOriOaemeW5jzs3jn34/zPb8+dndllCCbrySvPIYTLGdgOgFbwLjJ1z7kZc/vanOfMdsKfExWzHTrTOAaw7wRqZVCqkn1Vj8YGa6LRXlwcE+/33gLCBXwkt3nxMFaIkheeKK3kOefy3HN78srqhhBbku67HDDAxA16q0GsIEqSWUSZrGAp84/wAMeVnqNl2USsaBGjRdXSgoVgovBdUx5VymWIJXZS4SefDBmxoisG28nBICW6RMtQS2kCjGuRBBQXTCQUw+OCccFYELBwuxXjgrEgYOF2K8bJYNiPnxg+XQnx7hRzRMWEGhrBevsQqrvnFC4w7q7tUMMGBqE3PwPFLYPe+tKQoLe9gdL0BCwQgJqVYfTZoU3EtA0MQjpC9x9G5D1yp8HwqZm7IvpkOmzbSpSYYFkRoopoeYJMDhGxpIMJf+oA8w8ZQmjtmghBwkHrRv1inBhvh0nZSnrba4TfvQelpkBvaQU8Hngrz4BSkqbNmZISgaEAgheuAMPDxvmGdX+DsnUz1O3bpp2z0E4pYMIfPkJ/+mKS9uD5S6Al3km+sQM26Efw4lWwr12GK1R7d7RL80gDI2UrqVs2jeU8/s66uhH+/GX82NwIv3qLcHun2WW0FYutFzFwARxSwLBgcAGk8iVUKXINrVIi6Q+aFwSMuO6RZVLAeM5WQNm4YV45ifliHVkmBYy4LvGeOwV17+5/ykvME/PFOrJMyreSkYyqwlNSCFqVhlAtvydio/95zpgoEbTCw9By9s04bDE6pVSMWbiWkwUtO9Pssmyr+/fYAkUIklcx5vR5JQijhDhQIr+Yi48D6+gEpa8G/H6wX31g/QMgXmV2mS1gtGNHoOUf5B/LRPiRGh88RXkTHEKhSf0THXJa0rfSeFomKMJHU47N0MbnSGzYB2ZKkqz/9xSPvYfOAcNvGp1kjgGjrE93Ehc4Box26IALxlEELMQ4pmIs9NnmdsFYoHfBuGAsCFi4RcU4539RC5Hy3axHgGmRH9jpEem5AkbXnS5Tuj5ClZLccOMxY1QjPbhDAwoWyfXVTca3UoBiy8BQ71Ct8mQRfAYLHtH4QUQ8VMDbBb35pTVgSin/0ZE/fQLx9Mn/YPzpE7TqwM3U+urGsYT/AqrN5GiBA6PBAAAAAElFTkSuQmCC');
}
.languages li a.sw:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAjBJREFUaAXt2z9PAjEUAPD3Lko0RI3in8lv4OKmi6O6uIlORg0R+DaOgiRGjIuck5M46uLm4u5s4iEaTwYitb1AUk6KAz5KvNeF3utRrj9e7l4gRdCal8ysIzQyAsQSAM7JIdSG/2NXAIhnBLwX4OQTbv66tchg4U97eyPjfuxUnrTdGojmK158Qnx/3j2sDSmAsY9YATDqKEpCbI8Kvy47O+htplclSlmFuTUFBK458i6SYZCQAIqsI9NnJRTmQxDLEgamWSIsgLMKhttPAYdhfqIEEYZhGIOAIcwZY4AJKl/DGHl4eHEB4tldcCYn2j6r8foGfq4I9YfHtng/D6xmTCcUtXgFpcZsNqsw4UzRIbqN6edR9a3CUC3qL+ZlGIMiwzCMQcAQ5owxwKCXPJC/e9I0U53S66f1o84hzRhTndIrTD/qHFIYylqEcm71xZHC9JoZNt/PMAZ9hrEBo54eVK1RfaeaOpiXNGP83BlQLKBRqYJ/VCSFIa1jfrvyqdJx11MqW+mu45SDpBlDeeHUczOMQZhhGMYgYAhzxgwiTLc6h+IxbzDoGLaaMaY6px91SkcNLWi1jtGuY+C6VjNm4DS0C2IYDUPvMoyuofUZRsPQuwrmRQ9wXwkIT8HcMUZYAG8dEJgLhyN/jJB3EpfHN0LgeeQxmgDKIlEqlIObbw3jaRBQijwOghtYSIi23SWVrdQGCCcl/5qUu09A7T6JQpO7T+D+C+Bkxi1ctRb8DXpmh3Y7jGgDAAAAAElFTkSuQmCC');
}
.languages li a.us:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAA4xJREFUaAXtm0toE0EYgP9Z05hsWmxNH/SFpUVrfRwEq63iAxEfBW/VnqpIUQueBA8ePOjBgxUUDz5ioahV0caDFJFWER+lUEERVBTagqjFWttU+0jTR5JxZtOFbOgks6GG3WZ+2OzOP/9O/v/LPzv/blgEYVLV0LsHMBwjqgqy5ZANhXXP62Hz2/PzOl6cg2EAPIAAdWGQXE63q00dRwl8+5mvNtkeuEmUNWrH/94bBExEmOjBBDgOF7ov+Sy0R5aDjSRTEgYlwhsDNXGNHXtniEO1aG9Dzy6EUXuivTNmxsxSwGi3RKDQa4qQcAII10ukvTVcJ44pAVxJwWTGAyMvIwXOVufGc6oJzkHZFExcsrnUAeuLZaCAFqBIcYMpL3YoPLaVpS5ALgBxgUmzSVCWb1OA7FidtiDBKHWM3sgqljtAmq2J6VRaW2iHjz98uoax3b6iyz7RxrozpsCZArVblmr8PFGVDaW5oQzSdJi4ETVj6ndmgjPVAvLiED86hYqyrLBITZfZwHOWWOBibT74poMQCAL4Zsg+gGFw1A+n7v80JZ6oYKb9GDatCF1keaKzW0MAUwnAGQKm6aWH5zRD2kSdSjQw1/MhCJJ7UD0yNhmE0y390Nnt1XOaoWyjgqGetr4bgXOPfoGfZACPDI354eTdPvik82LMM3YibWKCoc509XjhVscwl18XHv+GPg+9QTW3cIGhIXZ8GY8Z6TiZQmbPFDVIbjA8z/KsFgSWiBVL/SKz7aOuSuHBrMyLXadQMKsKbPDhe+xib/Lg8fDhDXfMDWYNCViVP94A3Oscht6BKViWaYWaygzITQ/dTJaXyFxg1LGMuucHQ8p+Km96vXC5bRBGJgJKu7t/Cl6R6w+FU70hHdYVyURv3vpFCYp8cIOhRdvVZ4Pw5P0oeTysFVoINpNV68XnMdhYwl8QakcxVosbzKFr32J6TpfpPs/fmHZmMOBflcwQzTz6KMAwYAowAgyDAEMtMoYBBnl905GrL8M0udQiYxi/twAjwDAIMNQiYwQYBgGGWmSMAMMgwFAjz/4joo6ZA46YSnNAoSoBRoBhEGCoacYMMfqSWI09FExHEhNghI5eS4DRdUZv8qoRuCTnwxtPMUZ3kpeCNnLKwtnS2K6sSj7kOEr+E2nRmiRhC4FbYUFC17xdMnygbh9gqY5UfOrbJ8lAh7x9Al3k78OmLHdjqxrwP4Rt25EdYEyOAAAAAElFTkSuQmCC');
}
/* --- /templates/xso/css/utilities.css --- */
/* Background Utilities */
.bg-primary-50 { background-color: rgba(var(--color-primary-50-rgb), 1); }
.bg-primary-50\/10 { background-color: rgba(var(--color-primary-50-rgb), 0.10); }
.bg-primary-50\/20 { background-color: rgba(var(--color-primary-50-rgb), 0.20); }
.bg-primary-50\/30 { background-color: rgba(var(--color-primary-50-rgb), 0.30); }
.bg-primary-50\/40 { background-color: rgba(var(--color-primary-50-rgb), 0.40); }
.bg-primary-50\/50 { background-color: rgba(var(--color-primary-50-rgb), 0.50); }
.bg-primary-50\/60 { background-color: rgba(var(--color-primary-50-rgb), 0.60); }
.bg-primary-50\/70 { background-color: rgba(var(--color-primary-50-rgb), 0.70); }
.bg-primary-50\/80 { background-color: rgba(var(--color-primary-50-rgb), 0.80); }
.bg-primary-50\/90 { background-color: rgba(var(--color-primary-50-rgb), 0.90); }
.bg-primary-100 { background-color: rgba(var(--color-primary-100-rgb), 1); }
.bg-primary-100\/10 { background-color: rgba(var(--color-primary-100-rgb), 0.10); }
.bg-primary-100\/20 { background-color: rgba(var(--color-primary-100-rgb), 0.20); }
.bg-primary-100\/30 { background-color: rgba(var(--color-primary-100-rgb), 0.30); }
.bg-primary-100\/40 { background-color: rgba(var(--color-primary-100-rgb), 0.40); }
.bg-primary-100\/50 { background-color: rgba(var(--color-primary-100-rgb), 0.50); }
.bg-primary-100\/60 { background-color: rgba(var(--color-primary-100-rgb), 0.60); }
.bg-primary-100\/70 { background-color: rgba(var(--color-primary-100-rgb), 0.70); }
.bg-primary-100\/80 { background-color: rgba(var(--color-primary-100-rgb), 0.80); }
.bg-primary-100\/90 { background-color: rgba(var(--color-primary-100-rgb), 0.90); }
.bg-primary-200 { background-color: rgba(var(--color-primary-200-rgb), 1); }
.bg-primary-200\/10 { background-color: rgba(var(--color-primary-200-rgb), 0.10); }
.bg-primary-200\/20 { background-color: rgba(var(--color-primary-200-rgb), 0.20); }
.bg-primary-200\/30 { background-color: rgba(var(--color-primary-200-rgb), 0.30); }
.bg-primary-200\/40 { background-color: rgba(var(--color-primary-200-rgb), 0.40); }
.bg-primary-200\/50 { background-color: rgba(var(--color-primary-200-rgb), 0.50); }
.bg-primary-200\/60 { background-color: rgba(var(--color-primary-200-rgb), 0.60); }
.bg-primary-200\/70 { background-color: rgba(var(--color-primary-200-rgb), 0.70); }
.bg-primary-200\/80 { background-color: rgba(var(--color-primary-200-rgb), 0.80); }
.bg-primary-200\/90 { background-color: rgba(var(--color-primary-200-rgb), 0.90); }
.bg-primary-300 { background-color: rgba(var(--color-primary-300-rgb), 1); }
.bg-primary-300\/10 { background-color: rgba(var(--color-primary-300-rgb), 0.10); }
.bg-primary-300\/20 { background-color: rgba(var(--color-primary-300-rgb), 0.20); }
.bg-primary-300\/30 { background-color: rgba(var(--color-primary-300-rgb), 0.30); }
.bg-primary-300\/40 { background-color: rgba(var(--color-primary-300-rgb), 0.40); }
.bg-primary-300\/50 { background-color: rgba(var(--color-primary-300-rgb), 0.50); }
.bg-primary-300\/60 { background-color: rgba(var(--color-primary-300-rgb), 0.60); }
.bg-primary-300\/70 { background-color: rgba(var(--color-primary-300-rgb), 0.70); }
.bg-primary-300\/80 { background-color: rgba(var(--color-primary-300-rgb), 0.80); }
.bg-primary-300\/90 { background-color: rgba(var(--color-primary-300-rgb), 0.90); }
.bg-primary-400 { background-color: rgba(var(--color-primary-400-rgb), 1); }
.bg-primary-400\/10 { background-color: rgba(var(--color-primary-400-rgb), 0.10); }
.bg-primary-400\/20 { background-color: rgba(var(--color-primary-400-rgb), 0.20); }
.bg-primary-400\/30 { background-color: rgba(var(--color-primary-400-rgb), 0.30); }
.bg-primary-400\/40 { background-color: rgba(var(--color-primary-400-rgb), 0.40); }
.bg-primary-400\/50 { background-color: rgba(var(--color-primary-400-rgb), 0.50); }
.bg-primary-400\/60 { background-color: rgba(var(--color-primary-400-rgb), 0.60); }
.bg-primary-400\/70 { background-color: rgba(var(--color-primary-400-rgb), 0.70); }
.bg-primary-400\/80 { background-color: rgba(var(--color-primary-400-rgb), 0.80); }
.bg-primary-400\/90 { background-color: rgba(var(--color-primary-400-rgb), 0.90); }
.bg-primary-500 { background-color: rgba(var(--color-primary-500-rgb), 1); }
.bg-primary-500\/10 { background-color: rgba(var(--color-primary-500-rgb), 0.10); }
.bg-primary-500\/20 { background-color: rgba(var(--color-primary-500-rgb), 0.20); }
.bg-primary-500\/30 { background-color: rgba(var(--color-primary-500-rgb), 0.30); }
.bg-primary-500\/40 { background-color: rgba(var(--color-primary-500-rgb), 0.40); }
.bg-primary-500\/50 { background-color: rgba(var(--color-primary-500-rgb), 0.50); }
.bg-primary-500\/60 { background-color: rgba(var(--color-primary-500-rgb), 0.60); }
.bg-primary-500\/70 { background-color: rgba(var(--color-primary-500-rgb), 0.70); }
.bg-primary-500\/80 { background-color: rgba(var(--color-primary-500-rgb), 0.80); }
.bg-primary-500\/90 { background-color: rgba(var(--color-primary-500-rgb), 0.90); }
.bg-primary-600 { background-color: rgba(var(--color-primary-600-rgb), 1); }
.bg-primary-600\/10 { background-color: rgba(var(--color-primary-600-rgb), 0.10); }
.bg-primary-600\/20 { background-color: rgba(var(--color-primary-600-rgb), 0.20); }
.bg-primary-600\/30 { background-color: rgba(var(--color-primary-600-rgb), 0.30); }
.bg-primary-600\/40 { background-color: rgba(var(--color-primary-600-rgb), 0.40); }
.bg-primary-600\/50 { background-color: rgba(var(--color-primary-600-rgb), 0.50); }
.bg-primary-600\/60 { background-color: rgba(var(--color-primary-600-rgb), 0.60); }
.bg-primary-600\/70 { background-color: rgba(var(--color-primary-600-rgb), 0.70); }
.bg-primary-600\/80 { background-color: rgba(var(--color-primary-600-rgb), 0.80); }
.bg-primary-600\/90 { background-color: rgba(var(--color-primary-600-rgb), 0.90); }
.bg-primary-700 { background-color: rgba(var(--color-primary-700-rgb), 1); }
.bg-primary-700\/10 { background-color: rgba(var(--color-primary-700-rgb), 0.10); }
.bg-primary-700\/20 { background-color: rgba(var(--color-primary-700-rgb), 0.20); }
.bg-primary-700\/30 { background-color: rgba(var(--color-primary-700-rgb), 0.30); }
.bg-primary-700\/40 { background-color: rgba(var(--color-primary-700-rgb), 0.40); }
.bg-primary-700\/50 { background-color: rgba(var(--color-primary-700-rgb), 0.50); }
.bg-primary-700\/60 { background-color: rgba(var(--color-primary-700-rgb), 0.60); }
.bg-primary-700\/70 { background-color: rgba(var(--color-primary-700-rgb), 0.70); }
.bg-primary-700\/80 { background-color: rgba(var(--color-primary-700-rgb), 0.80); }
.bg-primary-700\/90 { background-color: rgba(var(--color-primary-700-rgb), 0.90); }
.bg-primary-800 { background-color: rgba(var(--color-primary-800-rgb), 1); }
.bg-primary-800\/10 { background-color: rgba(var(--color-primary-800-rgb), 0.10); }
.bg-primary-800\/20 { background-color: rgba(var(--color-primary-800-rgb), 0.20); }
.bg-primary-800\/30 { background-color: rgba(var(--color-primary-800-rgb), 0.30); }
.bg-primary-800\/40 { background-color: rgba(var(--color-primary-800-rgb), 0.40); }
.bg-primary-800\/50 { background-color: rgba(var(--color-primary-800-rgb), 0.50); }
.bg-primary-800\/60 { background-color: rgba(var(--color-primary-800-rgb), 0.60); }
.bg-primary-800\/70 { background-color: rgba(var(--color-primary-800-rgb), 0.70); }
.bg-primary-800\/80 { background-color: rgba(var(--color-primary-800-rgb), 0.80); }
.bg-primary-800\/90 { background-color: rgba(var(--color-primary-800-rgb), 0.90); }
.bg-primary-900 { background-color: rgba(var(--color-primary-900-rgb), 1); }
.bg-primary-900\/10 { background-color: rgba(var(--color-primary-900-rgb), 0.10); }
.bg-primary-900\/20 { background-color: rgba(var(--color-primary-900-rgb), 0.20); }
.bg-primary-900\/30 { background-color: rgba(var(--color-primary-900-rgb), 0.30); }
.bg-primary-900\/40 { background-color: rgba(var(--color-primary-900-rgb), 0.40); }
.bg-primary-900\/50 { background-color: rgba(var(--color-primary-900-rgb), 0.50); }
.bg-primary-900\/60 { background-color: rgba(var(--color-primary-900-rgb), 0.60); }
.bg-primary-900\/70 { background-color: rgba(var(--color-primary-900-rgb), 0.70); }
.bg-primary-900\/80 { background-color: rgba(var(--color-primary-900-rgb), 0.80); }
.bg-primary-900\/90 { background-color: rgba(var(--color-primary-900-rgb), 0.90); }
.bg-primary-950 { background-color: rgba(var(--color-primary-950-rgb), 1); }
.bg-primary-950\/10 { background-color: rgba(var(--color-primary-950-rgb), 0.10); }
.bg-primary-950\/20 { background-color: rgba(var(--color-primary-950-rgb), 0.20); }
.bg-primary-950\/30 { background-color: rgba(var(--color-primary-950-rgb), 0.30); }
.bg-primary-950\/40 { background-color: rgba(var(--color-primary-950-rgb), 0.40); }
.bg-primary-950\/50 { background-color: rgba(var(--color-primary-950-rgb), 0.50); }
.bg-primary-950\/60 { background-color: rgba(var(--color-primary-950-rgb), 0.60); }
.bg-primary-950\/70 { background-color: rgba(var(--color-primary-950-rgb), 0.70); }
.bg-primary-950\/80 { background-color: rgba(var(--color-primary-950-rgb), 0.80); }
.bg-primary-950\/90 { background-color: rgba(var(--color-primary-950-rgb), 0.90); }
.bg-text { background-color: rgba(var(--color-text-rgb), 1); }
.bg-text\/10 { background-color: rgba(var(--color-text-rgb), 0.10); }
.bg-text\/20 { background-color: rgba(var(--color-text-rgb), 0.20); }
.bg-text\/30 { background-color: rgba(var(--color-text-rgb), 0.30); }
.bg-text\/40 { background-color: rgba(var(--color-text-rgb), 0.40); }
.bg-text\/50 { background-color: rgba(var(--color-text-rgb), 0.50); }
.bg-text\/60 { background-color: rgba(var(--color-text-rgb), 0.60); }
.bg-text\/70 { background-color: rgba(var(--color-text-rgb), 0.70); }
.bg-text\/80 { background-color: rgba(var(--color-text-rgb), 0.80); }
.bg-text\/90 { background-color: rgba(var(--color-text-rgb), 0.90); }
.bg-success { background-color: rgba(var(--color-success-rgb), 1); }
.bg-success\/10 { background-color: rgba(var(--color-success-rgb), 0.10); }
.bg-success\/20 { background-color: rgba(var(--color-success-rgb), 0.20); }
.bg-success\/30 { background-color: rgba(var(--color-success-rgb), 0.30); }
.bg-success\/40 { background-color: rgba(var(--color-success-rgb), 0.40); }
.bg-success\/50 { background-color: rgba(var(--color-success-rgb), 0.50); }
.bg-success\/60 { background-color: rgba(var(--color-success-rgb), 0.60); }
.bg-success\/70 { background-color: rgba(var(--color-success-rgb), 0.70); }
.bg-success\/80 { background-color: rgba(var(--color-success-rgb), 0.80); }
.bg-success\/90 { background-color: rgba(var(--color-success-rgb), 0.90); }
.bg-warning { background-color: rgba(var(--color-warning-rgb), 1); }
.bg-warning\/10 { background-color: rgba(var(--color-warning-rgb), 0.10); }
.bg-warning\/20 { background-color: rgba(var(--color-warning-rgb), 0.20); }
.bg-warning\/30 { background-color: rgba(var(--color-warning-rgb), 0.30); }
.bg-warning\/40 { background-color: rgba(var(--color-warning-rgb), 0.40); }
.bg-warning\/50 { background-color: rgba(var(--color-warning-rgb), 0.50); }
.bg-warning\/60 { background-color: rgba(var(--color-warning-rgb), 0.60); }
.bg-warning\/70 { background-color: rgba(var(--color-warning-rgb), 0.70); }
.bg-warning\/80 { background-color: rgba(var(--color-warning-rgb), 0.80); }
.bg-warning\/90 { background-color: rgba(var(--color-warning-rgb), 0.90); }
.bg-danger { background-color: rgba(var(--color-danger-rgb), 1); }
.bg-danger\/10 { background-color: rgba(var(--color-danger-rgb), 0.10); }
.bg-danger\/20 { background-color: rgba(var(--color-danger-rgb), 0.20); }
.bg-danger\/30 { background-color: rgba(var(--color-danger-rgb), 0.30); }
.bg-danger\/40 { background-color: rgba(var(--color-danger-rgb), 0.40); }
.bg-danger\/50 { background-color: rgba(var(--color-danger-rgb), 0.50); }
.bg-danger\/60 { background-color: rgba(var(--color-danger-rgb), 0.60); }
.bg-danger\/70 { background-color: rgba(var(--color-danger-rgb), 0.70); }
.bg-danger\/80 { background-color: rgba(var(--color-danger-rgb), 0.80); }
.bg-danger\/90 { background-color: rgba(var(--color-danger-rgb), 0.90); }
.bg-light { background-color: rgba(var(--color-light-rgb), 1); }
.bg-light\/10 { background-color: rgba(var(--color-light-rgb), 0.10); }
.bg-light\/20 { background-color: rgba(var(--color-light-rgb), 0.20); }
.bg-light\/30 { background-color: rgba(var(--color-light-rgb), 0.30); }
.bg-light\/40 { background-color: rgba(var(--color-light-rgb), 0.40); }
.bg-light\/50 { background-color: rgba(var(--color-light-rgb), 0.50); }
.bg-light\/60 { background-color: rgba(var(--color-light-rgb), 0.60); }
.bg-light\/70 { background-color: rgba(var(--color-light-rgb), 0.70); }
.bg-light\/80 { background-color: rgba(var(--color-light-rgb), 0.80); }
.bg-light\/90 { background-color: rgba(var(--color-light-rgb), 0.90); }
.bg-white { background-color: rgba(var(--color-white-rgb), 1); }
.bg-white\/10 { background-color: rgba(var(--color-white-rgb), 0.10); }
.bg-white\/20 { background-color: rgba(var(--color-white-rgb), 0.20); }
.bg-white\/30 { background-color: rgba(var(--color-white-rgb), 0.30); }
.bg-white\/40 { background-color: rgba(var(--color-white-rgb), 0.40); }
.bg-white\/50 { background-color: rgba(var(--color-white-rgb), 0.50); }
.bg-white\/60 { background-color: rgba(var(--color-white-rgb), 0.60); }
.bg-white\/70 { background-color: rgba(var(--color-white-rgb), 0.70); }
.bg-white\/80 { background-color: rgba(var(--color-white-rgb), 0.80); }
.bg-white\/90 { background-color: rgba(var(--color-white-rgb), 0.90); }
/* Border Utilities */
.border-primary-50 { border-color: rgba(var(--color-primary-50-rgb), 1); }
.border-primary-50\/10 { border-color: rgba(var(--color-primary-50-rgb), 0.10); }
.border-primary-50\/20 { border-color: rgba(var(--color-primary-50-rgb), 0.20); }
.border-primary-50\/30 { border-color: rgba(var(--color-primary-50-rgb), 0.30); }
.border-primary-50\/40 { border-color: rgba(var(--color-primary-50-rgb), 0.40); }
.border-primary-50\/50 { border-color: rgba(var(--color-primary-50-rgb), 0.50); }
.border-primary-50\/60 { border-color: rgba(var(--color-primary-50-rgb), 0.60); }
.border-primary-50\/70 { border-color: rgba(var(--color-primary-50-rgb), 0.70); }
.border-primary-50\/80 { border-color: rgba(var(--color-primary-50-rgb), 0.80); }
.border-primary-50\/90 { border-color: rgba(var(--color-primary-50-rgb), 0.90); }
.border-primary-100 { border-color: rgba(var(--color-primary-100-rgb), 1); }
.border-primary-100\/10 { border-color: rgba(var(--color-primary-100-rgb), 0.10); }
.border-primary-100\/20 { border-color: rgba(var(--color-primary-100-rgb), 0.20); }
.border-primary-100\/30 { border-color: rgba(var(--color-primary-100-rgb), 0.30); }
.border-primary-100\/40 { border-color: rgba(var(--color-primary-100-rgb), 0.40); }
.border-primary-100\/50 { border-color: rgba(var(--color-primary-100-rgb), 0.50); }
.border-primary-100\/60 { border-color: rgba(var(--color-primary-100-rgb), 0.60); }
.border-primary-100\/70 { border-color: rgba(var(--color-primary-100-rgb), 0.70); }
.border-primary-100\/80 { border-color: rgba(var(--color-primary-100-rgb), 0.80); }
.border-primary-100\/90 { border-color: rgba(var(--color-primary-100-rgb), 0.90); }
.border-primary-200 { border-color: rgba(var(--color-primary-200-rgb), 1); }
.border-primary-200\/10 { border-color: rgba(var(--color-primary-200-rgb), 0.10); }
.border-primary-200\/20 { border-color: rgba(var(--color-primary-200-rgb), 0.20); }
.border-primary-200\/30 { border-color: rgba(var(--color-primary-200-rgb), 0.30); }
.border-primary-200\/40 { border-color: rgba(var(--color-primary-200-rgb), 0.40); }
.border-primary-200\/50 { border-color: rgba(var(--color-primary-200-rgb), 0.50); }
.border-primary-200\/60 { border-color: rgba(var(--color-primary-200-rgb), 0.60); }
.border-primary-200\/70 { border-color: rgba(var(--color-primary-200-rgb), 0.70); }
.border-primary-200\/80 { border-color: rgba(var(--color-primary-200-rgb), 0.80); }
.border-primary-200\/90 { border-color: rgba(var(--color-primary-200-rgb), 0.90); }
.border-primary-300 { border-color: rgba(var(--color-primary-300-rgb), 1); }
.border-primary-300\/10 { border-color: rgba(var(--color-primary-300-rgb), 0.10); }
.border-primary-300\/20 { border-color: rgba(var(--color-primary-300-rgb), 0.20); }
.border-primary-300\/30 { border-color: rgba(var(--color-primary-300-rgb), 0.30); }
.border-primary-300\/40 { border-color: rgba(var(--color-primary-300-rgb), 0.40); }
.border-primary-300\/50 { border-color: rgba(var(--color-primary-300-rgb), 0.50); }
.border-primary-300\/60 { border-color: rgba(var(--color-primary-300-rgb), 0.60); }
.border-primary-300\/70 { border-color: rgba(var(--color-primary-300-rgb), 0.70); }
.border-primary-300\/80 { border-color: rgba(var(--color-primary-300-rgb), 0.80); }
.border-primary-300\/90 { border-color: rgba(var(--color-primary-300-rgb), 0.90); }
.border-primary-400 { border-color: rgba(var(--color-primary-400-rgb), 1); }
.border-primary-400\/10 { border-color: rgba(var(--color-primary-400-rgb), 0.10); }
.border-primary-400\/20 { border-color: rgba(var(--color-primary-400-rgb), 0.20); }
.border-primary-400\/30 { border-color: rgba(var(--color-primary-400-rgb), 0.30); }
.border-primary-400\/40 { border-color: rgba(var(--color-primary-400-rgb), 0.40); }
.border-primary-400\/50 { border-color: rgba(var(--color-primary-400-rgb), 0.50); }
.border-primary-400\/60 { border-color: rgba(var(--color-primary-400-rgb), 0.60); }
.border-primary-400\/70 { border-color: rgba(var(--color-primary-400-rgb), 0.70); }
.border-primary-400\/80 { border-color: rgba(var(--color-primary-400-rgb), 0.80); }
.border-primary-400\/90 { border-color: rgba(var(--color-primary-400-rgb), 0.90); }
.border-primary-500 { border-color: rgba(var(--color-primary-500-rgb), 1); }
.border-primary-500\/10 { border-color: rgba(var(--color-primary-500-rgb), 0.10); }
.border-primary-500\/20 { border-color: rgba(var(--color-primary-500-rgb), 0.20); }
.border-primary-500\/30 { border-color: rgba(var(--color-primary-500-rgb), 0.30); }
.border-primary-500\/40 { border-color: rgba(var(--color-primary-500-rgb), 0.40); }
.border-primary-500\/50 { border-color: rgba(var(--color-primary-500-rgb), 0.50); }
.border-primary-500\/60 { border-color: rgba(var(--color-primary-500-rgb), 0.60); }
.border-primary-500\/70 { border-color: rgba(var(--color-primary-500-rgb), 0.70); }
.border-primary-500\/80 { border-color: rgba(var(--color-primary-500-rgb), 0.80); }
.border-primary-500\/90 { border-color: rgba(var(--color-primary-500-rgb), 0.90); }
.border-primary-600 { border-color: rgba(var(--color-primary-600-rgb), 1); }
.border-primary-600\/10 { border-color: rgba(var(--color-primary-600-rgb), 0.10); }
.border-primary-600\/20 { border-color: rgba(var(--color-primary-600-rgb), 0.20); }
.border-primary-600\/30 { border-color: rgba(var(--color-primary-600-rgb), 0.30); }
.border-primary-600\/40 { border-color: rgba(var(--color-primary-600-rgb), 0.40); }
.border-primary-600\/50 { border-color: rgba(var(--color-primary-600-rgb), 0.50); }
.border-primary-600\/60 { border-color: rgba(var(--color-primary-600-rgb), 0.60); }
.border-primary-600\/70 { border-color: rgba(var(--color-primary-600-rgb), 0.70); }
.border-primary-600\/80 { border-color: rgba(var(--color-primary-600-rgb), 0.80); }
.border-primary-600\/90 { border-color: rgba(var(--color-primary-600-rgb), 0.90); }
.border-primary-700 { border-color: rgba(var(--color-primary-700-rgb), 1); }
.border-primary-700\/10 { border-color: rgba(var(--color-primary-700-rgb), 0.10); }
.border-primary-700\/20 { border-color: rgba(var(--color-primary-700-rgb), 0.20); }
.border-primary-700\/30 { border-color: rgba(var(--color-primary-700-rgb), 0.30); }
.border-primary-700\/40 { border-color: rgba(var(--color-primary-700-rgb), 0.40); }
.border-primary-700\/50 { border-color: rgba(var(--color-primary-700-rgb), 0.50); }
.border-primary-700\/60 { border-color: rgba(var(--color-primary-700-rgb), 0.60); }
.border-primary-700\/70 { border-color: rgba(var(--color-primary-700-rgb), 0.70); }
.border-primary-700\/80 { border-color: rgba(var(--color-primary-700-rgb), 0.80); }
.border-primary-700\/90 { border-color: rgba(var(--color-primary-700-rgb), 0.90); }
.border-primary-800 { border-color: rgba(var(--color-primary-800-rgb), 1); }
.border-primary-800\/10 { border-color: rgba(var(--color-primary-800-rgb), 0.10); }
.border-primary-800\/20 { border-color: rgba(var(--color-primary-800-rgb), 0.20); }
.border-primary-800\/30 { border-color: rgba(var(--color-primary-800-rgb), 0.30); }
.border-primary-800\/40 { border-color: rgba(var(--color-primary-800-rgb), 0.40); }
.border-primary-800\/50 { border-color: rgba(var(--color-primary-800-rgb), 0.50); }
.border-primary-800\/60 { border-color: rgba(var(--color-primary-800-rgb), 0.60); }
.border-primary-800\/70 { border-color: rgba(var(--color-primary-800-rgb), 0.70); }
.border-primary-800\/80 { border-color: rgba(var(--color-primary-800-rgb), 0.80); }
.border-primary-800\/90 { border-color: rgba(var(--color-primary-800-rgb), 0.90); }
.border-primary-900 { border-color: rgba(var(--color-primary-900-rgb), 1); }
.border-primary-900\/10 { border-color: rgba(var(--color-primary-900-rgb), 0.10); }
.border-primary-900\/20 { border-color: rgba(var(--color-primary-900-rgb), 0.20); }
.border-primary-900\/30 { border-color: rgba(var(--color-primary-900-rgb), 0.30); }
.border-primary-900\/40 { border-color: rgba(var(--color-primary-900-rgb), 0.40); }
.border-primary-900\/50 { border-color: rgba(var(--color-primary-900-rgb), 0.50); }
.border-primary-900\/60 { border-color: rgba(var(--color-primary-900-rgb), 0.60); }
.border-primary-900\/70 { border-color: rgba(var(--color-primary-900-rgb), 0.70); }
.border-primary-900\/80 { border-color: rgba(var(--color-primary-900-rgb), 0.80); }
.border-primary-900\/90 { border-color: rgba(var(--color-primary-900-rgb), 0.90); }
.border-primary-950 { border-color: rgba(var(--color-primary-950-rgb), 1); }
.border-primary-950\/10 { border-color: rgba(var(--color-primary-950-rgb), 0.10); }
.border-primary-950\/20 { border-color: rgba(var(--color-primary-950-rgb), 0.20); }
.border-primary-950\/30 { border-color: rgba(var(--color-primary-950-rgb), 0.30); }
.border-primary-950\/40 { border-color: rgba(var(--color-primary-950-rgb), 0.40); }
.border-primary-950\/50 { border-color: rgba(var(--color-primary-950-rgb), 0.50); }
.border-primary-950\/60 { border-color: rgba(var(--color-primary-950-rgb), 0.60); }
.border-primary-950\/70 { border-color: rgba(var(--color-primary-950-rgb), 0.70); }
.border-primary-950\/80 { border-color: rgba(var(--color-primary-950-rgb), 0.80); }
.border-primary-950\/90 { border-color: rgba(var(--color-primary-950-rgb), 0.90); }
.border-text { border-color: rgba(var(--color-text-rgb), 1); }
.border-text\/10 { border-color: rgba(var(--color-text-rgb), 0.10); }
.border-text\/20 { border-color: rgba(var(--color-text-rgb), 0.20); }
.border-text\/30 { border-color: rgba(var(--color-text-rgb), 0.30); }
.border-text\/40 { border-color: rgba(var(--color-text-rgb), 0.40); }
.border-text\/50 { border-color: rgba(var(--color-text-rgb), 0.50); }
.border-text\/60 { border-color: rgba(var(--color-text-rgb), 0.60); }
.border-text\/70 { border-color: rgba(var(--color-text-rgb), 0.70); }
.border-text\/80 { border-color: rgba(var(--color-text-rgb), 0.80); }
.border-text\/90 { border-color: rgba(var(--color-text-rgb), 0.90); }
.border-success { border-color: rgba(var(--color-success-rgb), 1); }
.border-success\/10 { border-color: rgba(var(--color-success-rgb), 0.10); }
.border-success\/20 { border-color: rgba(var(--color-success-rgb), 0.20); }
.border-success\/30 { border-color: rgba(var(--color-success-rgb), 0.30); }
.border-success\/40 { border-color: rgba(var(--color-success-rgb), 0.40); }
.border-success\/50 { border-color: rgba(var(--color-success-rgb), 0.50); }
.border-success\/60 { border-color: rgba(var(--color-success-rgb), 0.60); }
.border-success\/70 { border-color: rgba(var(--color-success-rgb), 0.70); }
.border-success\/80 { border-color: rgba(var(--color-success-rgb), 0.80); }
.border-success\/90 { border-color: rgba(var(--color-success-rgb), 0.90); }
.border-warning { border-color: rgba(var(--color-warning-rgb), 1); }
.border-warning\/10 { border-color: rgba(var(--color-warning-rgb), 0.10); }
.border-warning\/20 { border-color: rgba(var(--color-warning-rgb), 0.20); }
.border-warning\/30 { border-color: rgba(var(--color-warning-rgb), 0.30); }
.border-warning\/40 { border-color: rgba(var(--color-warning-rgb), 0.40); }
.border-warning\/50 { border-color: rgba(var(--color-warning-rgb), 0.50); }
.border-warning\/60 { border-color: rgba(var(--color-warning-rgb), 0.60); }
.border-warning\/70 { border-color: rgba(var(--color-warning-rgb), 0.70); }
.border-warning\/80 { border-color: rgba(var(--color-warning-rgb), 0.80); }
.border-warning\/90 { border-color: rgba(var(--color-warning-rgb), 0.90); }
.border-danger { border-color: rgba(var(--color-danger-rgb), 1); }
.border-danger\/10 { border-color: rgba(var(--color-danger-rgb), 0.10); }
.border-danger\/20 { border-color: rgba(var(--color-danger-rgb), 0.20); }
.border-danger\/30 { border-color: rgba(var(--color-danger-rgb), 0.30); }
.border-danger\/40 { border-color: rgba(var(--color-danger-rgb), 0.40); }
.border-danger\/50 { border-color: rgba(var(--color-danger-rgb), 0.50); }
.border-danger\/60 { border-color: rgba(var(--color-danger-rgb), 0.60); }
.border-danger\/70 { border-color: rgba(var(--color-danger-rgb), 0.70); }
.border-danger\/80 { border-color: rgba(var(--color-danger-rgb), 0.80); }
.border-danger\/90 { border-color: rgba(var(--color-danger-rgb), 0.90); }
.border-light { border-color: rgba(var(--color-light-rgb), 1); }
.border-light\/10 { border-color: rgba(var(--color-light-rgb), 0.10); }
.border-light\/20 { border-color: rgba(var(--color-light-rgb), 0.20); }
.border-light\/30 { border-color: rgba(var(--color-light-rgb), 0.30); }
.border-light\/40 { border-color: rgba(var(--color-light-rgb), 0.40); }
.border-light\/50 { border-color: rgba(var(--color-light-rgb), 0.50); }
.border-light\/60 { border-color: rgba(var(--color-light-rgb), 0.60); }
.border-light\/70 { border-color: rgba(var(--color-light-rgb), 0.70); }
.border-light\/80 { border-color: rgba(var(--color-light-rgb), 0.80); }
.border-light\/90 { border-color: rgba(var(--color-light-rgb), 0.90); }
.border-white { border-color: rgba(var(--color-white-rgb), 1); }
.border-white\/10 { border-color: rgba(var(--color-white-rgb), 0.10); }
.border-white\/20 { border-color: rgba(var(--color-white-rgb), 0.20); }
.border-white\/30 { border-color: rgba(var(--color-white-rgb), 0.30); }
.border-white\/40 { border-color: rgba(var(--color-white-rgb), 0.40); }
.border-white\/50 { border-color: rgba(var(--color-white-rgb), 0.50); }
.border-white\/60 { border-color: rgba(var(--color-white-rgb), 0.60); }
.border-white\/70 { border-color: rgba(var(--color-white-rgb), 0.70); }
.border-white\/80 { border-color: rgba(var(--color-white-rgb), 0.80); }
.border-white\/90 { border-color: rgba(var(--color-white-rgb), 0.90); }
/* Text (color) Utilities */
.c-primary-50 { color: rgba(var(--color-primary-50-rgb), 1); }
.c-primary-50\/10 { color: rgba(var(--color-primary-50-rgb), 0.10); }
.c-primary-50\/20 { color: rgba(var(--color-primary-50-rgb), 0.20); }
.c-primary-50\/30 { color: rgba(var(--color-primary-50-rgb), 0.30); }
.c-primary-50\/40 { color: rgba(var(--color-primary-50-rgb), 0.40); }
.c-primary-50\/50 { color: rgba(var(--color-primary-50-rgb), 0.50); }
.c-primary-50\/60 { color: rgba(var(--color-primary-50-rgb), 0.60); }
.c-primary-50\/70 { color: rgba(var(--color-primary-50-rgb), 0.70); }
.c-primary-50\/80 { color: rgba(var(--color-primary-50-rgb), 0.80); }
.c-primary-50\/90 { color: rgba(var(--color-primary-50-rgb), 0.90); }
.c-primary-100 { color: rgba(var(--color-primary-100-rgb), 1); }
.c-primary-100\/10 { color: rgba(var(--color-primary-100-rgb), 0.10); }
.c-primary-100\/20 { color: rgba(var(--color-primary-100-rgb), 0.20); }
.c-primary-100\/30 { color: rgba(var(--color-primary-100-rgb), 0.30); }
.c-primary-100\/40 { color: rgba(var(--color-primary-100-rgb), 0.40); }
.c-primary-100\/50 { color: rgba(var(--color-primary-100-rgb), 0.50); }
.c-primary-100\/60 { color: rgba(var(--color-primary-100-rgb), 0.60); }
.c-primary-100\/70 { color: rgba(var(--color-primary-100-rgb), 0.70); }
.c-primary-100\/80 { color: rgba(var(--color-primary-100-rgb), 0.80); }
.c-primary-100\/90 { color: rgba(var(--color-primary-100-rgb), 0.90); }
.c-primary-200 { color: rgba(var(--color-primary-200-rgb), 1); }
.c-primary-200\/10 { color: rgba(var(--color-primary-200-rgb), 0.10); }
.c-primary-200\/20 { color: rgba(var(--color-primary-200-rgb), 0.20); }
.c-primary-200\/30 { color: rgba(var(--color-primary-200-rgb), 0.30); }
.c-primary-200\/40 { color: rgba(var(--color-primary-200-rgb), 0.40); }
.c-primary-200\/50 { color: rgba(var(--color-primary-200-rgb), 0.50); }
.c-primary-200\/60 { color: rgba(var(--color-primary-200-rgb), 0.60); }
.c-primary-200\/70 { color: rgba(var(--color-primary-200-rgb), 0.70); }
.c-primary-200\/80 { color: rgba(var(--color-primary-200-rgb), 0.80); }
.c-primary-200\/90 { color: rgba(var(--color-primary-200-rgb), 0.90); }
.c-primary-300 { color: rgba(var(--color-primary-300-rgb), 1); }
.c-primary-300\/10 { color: rgba(var(--color-primary-300-rgb), 0.10); }
.c-primary-300\/20 { color: rgba(var(--color-primary-300-rgb), 0.20); }
.c-primary-300\/30 { color: rgba(var(--color-primary-300-rgb), 0.30); }
.c-primary-300\/40 { color: rgba(var(--color-primary-300-rgb), 0.40); }
.c-primary-300\/50 { color: rgba(var(--color-primary-300-rgb), 0.50); }
.c-primary-300\/60 { color: rgba(var(--color-primary-300-rgb), 0.60); }
.c-primary-300\/70 { color: rgba(var(--color-primary-300-rgb), 0.70); }
.c-primary-300\/80 { color: rgba(var(--color-primary-300-rgb), 0.80); }
.c-primary-300\/90 { color: rgba(var(--color-primary-300-rgb), 0.90); }
.c-primary-400 { color: rgba(var(--color-primary-400-rgb), 1); }
.c-primary-400\/10 { color: rgba(var(--color-primary-400-rgb), 0.10); }
.c-primary-400\/20 { color: rgba(var(--color-primary-400-rgb), 0.20); }
.c-primary-400\/30 { color: rgba(var(--color-primary-400-rgb), 0.30); }
.c-primary-400\/40 { color: rgba(var(--color-primary-400-rgb), 0.40); }
.c-primary-400\/50 { color: rgba(var(--color-primary-400-rgb), 0.50); }
.c-primary-400\/60 { color: rgba(var(--color-primary-400-rgb), 0.60); }
.c-primary-400\/70 { color: rgba(var(--color-primary-400-rgb), 0.70); }
.c-primary-400\/80 { color: rgba(var(--color-primary-400-rgb), 0.80); }
.c-primary-400\/90 { color: rgba(var(--color-primary-400-rgb), 0.90); }
.c-primary-500 { color: rgba(var(--color-primary-500-rgb), 1); }
.c-primary-500\/10 { color: rgba(var(--color-primary-500-rgb), 0.10); }
.c-primary-500\/20 { color: rgba(var(--color-primary-500-rgb), 0.20); }
.c-primary-500\/30 { color: rgba(var(--color-primary-500-rgb), 0.30); }
.c-primary-500\/40 { color: rgba(var(--color-primary-500-rgb), 0.40); }
.c-primary-500\/50 { color: rgba(var(--color-primary-500-rgb), 0.50); }
.c-primary-500\/60 { color: rgba(var(--color-primary-500-rgb), 0.60); }
.c-primary-500\/70 { color: rgba(var(--color-primary-500-rgb), 0.70); }
.c-primary-500\/80 { color: rgba(var(--color-primary-500-rgb), 0.80); }
.c-primary-500\/90 { color: rgba(var(--color-primary-500-rgb), 0.90); }
.c-primary-600 { color: rgba(var(--color-primary-600-rgb), 1); }
.c-primary-600\/10 { color: rgba(var(--color-primary-600-rgb), 0.10); }
.c-primary-600\/20 { color: rgba(var(--color-primary-600-rgb), 0.20); }
.c-primary-600\/30 { color: rgba(var(--color-primary-600-rgb), 0.30); }
.c-primary-600\/40 { color: rgba(var(--color-primary-600-rgb), 0.40); }
.c-primary-600\/50 { color: rgba(var(--color-primary-600-rgb), 0.50); }
.c-primary-600\/60 { color: rgba(var(--color-primary-600-rgb), 0.60); }
.c-primary-600\/70 { color: rgba(var(--color-primary-600-rgb), 0.70); }
.c-primary-600\/80 { color: rgba(var(--color-primary-600-rgb), 0.80); }
.c-primary-600\/90 { color: rgba(var(--color-primary-600-rgb), 0.90); }
.c-primary-700 { color: rgba(var(--color-primary-700-rgb), 1); }
.c-primary-700\/10 { color: rgba(var(--color-primary-700-rgb), 0.10); }
.c-primary-700\/20 { color: rgba(var(--color-primary-700-rgb), 0.20); }
.c-primary-700\/30 { color: rgba(var(--color-primary-700-rgb), 0.30); }
.c-primary-700\/40 { color: rgba(var(--color-primary-700-rgb), 0.40); }
.c-primary-700\/50 { color: rgba(var(--color-primary-700-rgb), 0.50); }
.c-primary-700\/60 { color: rgba(var(--color-primary-700-rgb), 0.60); }
.c-primary-700\/70 { color: rgba(var(--color-primary-700-rgb), 0.70); }
.c-primary-700\/80 { color: rgba(var(--color-primary-700-rgb), 0.80); }
.c-primary-700\/90 { color: rgba(var(--color-primary-700-rgb), 0.90); }
.c-primary-800 { color: rgba(var(--color-primary-800-rgb), 1); }
.c-primary-800\/10 { color: rgba(var(--color-primary-800-rgb), 0.10); }
.c-primary-800\/20 { color: rgba(var(--color-primary-800-rgb), 0.20); }
.c-primary-800\/30 { color: rgba(var(--color-primary-800-rgb), 0.30); }
.c-primary-800\/40 { color: rgba(var(--color-primary-800-rgb), 0.40); }
.c-primary-800\/50 { color: rgba(var(--color-primary-800-rgb), 0.50); }
.c-primary-800\/60 { color: rgba(var(--color-primary-800-rgb), 0.60); }
.c-primary-800\/70 { color: rgba(var(--color-primary-800-rgb), 0.70); }
.c-primary-800\/80 { color: rgba(var(--color-primary-800-rgb), 0.80); }
.c-primary-800\/90 { color: rgba(var(--color-primary-800-rgb), 0.90); }
.c-primary-900 { color: rgba(var(--color-primary-900-rgb), 1); }
.c-primary-900\/10 { color: rgba(var(--color-primary-900-rgb), 0.10); }
.c-primary-900\/20 { color: rgba(var(--color-primary-900-rgb), 0.20); }
.c-primary-900\/30 { color: rgba(var(--color-primary-900-rgb), 0.30); }
.c-primary-900\/40 { color: rgba(var(--color-primary-900-rgb), 0.40); }
.c-primary-900\/50 { color: rgba(var(--color-primary-900-rgb), 0.50); }
.c-primary-900\/60 { color: rgba(var(--color-primary-900-rgb), 0.60); }
.c-primary-900\/70 { color: rgba(var(--color-primary-900-rgb), 0.70); }
.c-primary-900\/80 { color: rgba(var(--color-primary-900-rgb), 0.80); }
.c-primary-900\/90 { color: rgba(var(--color-primary-900-rgb), 0.90); }
.c-primary-950 { color: rgba(var(--color-primary-950-rgb), 1); }
.c-primary-950\/10 { color: rgba(var(--color-primary-950-rgb), 0.10); }
.c-primary-950\/20 { color: rgba(var(--color-primary-950-rgb), 0.20); }
.c-primary-950\/30 { color: rgba(var(--color-primary-950-rgb), 0.30); }
.c-primary-950\/40 { color: rgba(var(--color-primary-950-rgb), 0.40); }
.c-primary-950\/50 { color: rgba(var(--color-primary-950-rgb), 0.50); }
.c-primary-950\/60 { color: rgba(var(--color-primary-950-rgb), 0.60); }
.c-primary-950\/70 { color: rgba(var(--color-primary-950-rgb), 0.70); }
.c-primary-950\/80 { color: rgba(var(--color-primary-950-rgb), 0.80); }
.c-primary-950\/90 { color: rgba(var(--color-primary-950-rgb), 0.90); }
.c-text { color: rgba(var(--color-text-rgb), 1); }
.c-text\/10 { color: rgba(var(--color-text-rgb), 0.10); }
.c-text\/20 { color: rgba(var(--color-text-rgb), 0.20); }
.c-text\/30 { color: rgba(var(--color-text-rgb), 0.30); }
.c-text\/40 { color: rgba(var(--color-text-rgb), 0.40); }
.c-text\/50 { color: rgba(var(--color-text-rgb), 0.50); }
.c-text\/60 { color: rgba(var(--color-text-rgb), 0.60); }
.c-text\/70 { color: rgba(var(--color-text-rgb), 0.70); }
.c-text\/80 { color: rgba(var(--color-text-rgb), 0.80); }
.c-text\/90 { color: rgba(var(--color-text-rgb), 0.90); }
.c-success { color: rgba(var(--color-success-rgb), 1); }
.c-success\/10 { color: rgba(var(--color-success-rgb), 0.10); }
.c-success\/20 { color: rgba(var(--color-success-rgb), 0.20); }
.c-success\/30 { color: rgba(var(--color-success-rgb), 0.30); }
.c-success\/40 { color: rgba(var(--color-success-rgb), 0.40); }
.c-success\/50 { color: rgba(var(--color-success-rgb), 0.50); }
.c-success\/60 { color: rgba(var(--color-success-rgb), 0.60); }
.c-success\/70 { color: rgba(var(--color-success-rgb), 0.70); }
.c-success\/80 { color: rgba(var(--color-success-rgb), 0.80); }
.c-success\/90 { color: rgba(var(--color-success-rgb), 0.90); }
.c-warning { color: rgba(var(--color-warning-rgb), 1); }
.c-warning\/10 { color: rgba(var(--color-warning-rgb), 0.10); }
.c-warning\/20 { color: rgba(var(--color-warning-rgb), 0.20); }
.c-warning\/30 { color: rgba(var(--color-warning-rgb), 0.30); }
.c-warning\/40 { color: rgba(var(--color-warning-rgb), 0.40); }
.c-warning\/50 { color: rgba(var(--color-warning-rgb), 0.50); }
.c-warning\/60 { color: rgba(var(--color-warning-rgb), 0.60); }
.c-warning\/70 { color: rgba(var(--color-warning-rgb), 0.70); }
.c-warning\/80 { color: rgba(var(--color-warning-rgb), 0.80); }
.c-warning\/90 { color: rgba(var(--color-warning-rgb), 0.90); }
.c-danger { color: rgba(var(--color-danger-rgb), 1); }
.c-danger\/10 { color: rgba(var(--color-danger-rgb), 0.10); }
.c-danger\/20 { color: rgba(var(--color-danger-rgb), 0.20); }
.c-danger\/30 { color: rgba(var(--color-danger-rgb), 0.30); }
.c-danger\/40 { color: rgba(var(--color-danger-rgb), 0.40); }
.c-danger\/50 { color: rgba(var(--color-danger-rgb), 0.50); }
.c-danger\/60 { color: rgba(var(--color-danger-rgb), 0.60); }
.c-danger\/70 { color: rgba(var(--color-danger-rgb), 0.70); }
.c-danger\/80 { color: rgba(var(--color-danger-rgb), 0.80); }
.c-danger\/90 { color: rgba(var(--color-danger-rgb), 0.90); }
.c-light { color: rgba(var(--color-light-rgb), 1); }
.c-light\/10 { color: rgba(var(--color-light-rgb), 0.10); }
.c-light\/20 { color: rgba(var(--color-light-rgb), 0.20); }
.c-light\/30 { color: rgba(var(--color-light-rgb), 0.30); }
.c-light\/40 { color: rgba(var(--color-light-rgb), 0.40); }
.c-light\/50 { color: rgba(var(--color-light-rgb), 0.50); }
.c-light\/60 { color: rgba(var(--color-light-rgb), 0.60); }
.c-light\/70 { color: rgba(var(--color-light-rgb), 0.70); }
.c-light\/80 { color: rgba(var(--color-light-rgb), 0.80); }
.c-light\/90 { color: rgba(var(--color-light-rgb), 0.90); }
.c-white { color: rgba(var(--color-white-rgb), 1); }
.c-white\/10 { color: rgba(var(--color-white-rgb), 0.10); }
.c-white\/20 { color: rgba(var(--color-white-rgb), 0.20); }
.c-white\/30 { color: rgba(var(--color-white-rgb), 0.30); }
.c-white\/40 { color: rgba(var(--color-white-rgb), 0.40); }
.c-white\/50 { color: rgba(var(--color-white-rgb), 0.50); }
.c-white\/60 { color: rgba(var(--color-white-rgb), 0.60); }
.c-white\/70 { color: rgba(var(--color-white-rgb), 0.70); }
.c-white\/80 { color: rgba(var(--color-white-rgb), 0.80); }
.c-white\/90 { color: rgba(var(--color-white-rgb), 0.90); }
/* Fill Utilities */
.fill-primary-50 { fill: rgba(var(--color-primary-50-rgb), 1); }
.fill-primary-50\/10 { fill: rgba(var(--color-primary-50-rgb), 0.10); }
.fill-primary-50\/20 { fill: rgba(var(--color-primary-50-rgb), 0.20); }
.fill-primary-50\/30 { fill: rgba(var(--color-primary-50-rgb), 0.30); }
.fill-primary-50\/40 { fill: rgba(var(--color-primary-50-rgb), 0.40); }
.fill-primary-50\/50 { fill: rgba(var(--color-primary-50-rgb), 0.50); }
.fill-primary-50\/60 { fill: rgba(var(--color-primary-50-rgb), 0.60); }
.fill-primary-50\/70 { fill: rgba(var(--color-primary-50-rgb), 0.70); }
.fill-primary-50\/80 { fill: rgba(var(--color-primary-50-rgb), 0.80); }
.fill-primary-50\/90 { fill: rgba(var(--color-primary-50-rgb), 0.90); }
.fill-primary-100 { fill: rgba(var(--color-primary-100-rgb), 1); }
.fill-primary-100\/10 { fill: rgba(var(--color-primary-100-rgb), 0.10); }
.fill-primary-100\/20 { fill: rgba(var(--color-primary-100-rgb), 0.20); }
.fill-primary-100\/30 { fill: rgba(var(--color-primary-100-rgb), 0.30); }
.fill-primary-100\/40 { fill: rgba(var(--color-primary-100-rgb), 0.40); }
.fill-primary-100\/50 { fill: rgba(var(--color-primary-100-rgb), 0.50); }
.fill-primary-100\/60 { fill: rgba(var(--color-primary-100-rgb), 0.60); }
.fill-primary-100\/70 { fill: rgba(var(--color-primary-100-rgb), 0.70); }
.fill-primary-100\/80 { fill: rgba(var(--color-primary-100-rgb), 0.80); }
.fill-primary-100\/90 { fill: rgba(var(--color-primary-100-rgb), 0.90); }
.fill-primary-200 { fill: rgba(var(--color-primary-200-rgb), 1); }
.fill-primary-200\/10 { fill: rgba(var(--color-primary-200-rgb), 0.10); }
.fill-primary-200\/20 { fill: rgba(var(--color-primary-200-rgb), 0.20); }
.fill-primary-200\/30 { fill: rgba(var(--color-primary-200-rgb), 0.30); }
.fill-primary-200\/40 { fill: rgba(var(--color-primary-200-rgb), 0.40); }
.fill-primary-200\/50 { fill: rgba(var(--color-primary-200-rgb), 0.50); }
.fill-primary-200\/60 { fill: rgba(var(--color-primary-200-rgb), 0.60); }
.fill-primary-200\/70 { fill: rgba(var(--color-primary-200-rgb), 0.70); }
.fill-primary-200\/80 { fill: rgba(var(--color-primary-200-rgb), 0.80); }
.fill-primary-200\/90 { fill: rgba(var(--color-primary-200-rgb), 0.90); }
.fill-primary-300 { fill: rgba(var(--color-primary-300-rgb), 1); }
.fill-primary-300\/10 { fill: rgba(var(--color-primary-300-rgb), 0.10); }
.fill-primary-300\/20 { fill: rgba(var(--color-primary-300-rgb), 0.20); }
.fill-primary-300\/30 { fill: rgba(var(--color-primary-300-rgb), 0.30); }
.fill-primary-300\/40 { fill: rgba(var(--color-primary-300-rgb), 0.40); }
.fill-primary-300\/50 { fill: rgba(var(--color-primary-300-rgb), 0.50); }
.fill-primary-300\/60 { fill: rgba(var(--color-primary-300-rgb), 0.60); }
.fill-primary-300\/70 { fill: rgba(var(--color-primary-300-rgb), 0.70); }
.fill-primary-300\/80 { fill: rgba(var(--color-primary-300-rgb), 0.80); }
.fill-primary-300\/90 { fill: rgba(var(--color-primary-300-rgb), 0.90); }
.fill-primary-400 { fill: rgba(var(--color-primary-400-rgb), 1); }
.fill-primary-400\/10 { fill: rgba(var(--color-primary-400-rgb), 0.10); }
.fill-primary-400\/20 { fill: rgba(var(--color-primary-400-rgb), 0.20); }
.fill-primary-400\/30 { fill: rgba(var(--color-primary-400-rgb), 0.30); }
.fill-primary-400\/40 { fill: rgba(var(--color-primary-400-rgb), 0.40); }
.fill-primary-400\/50 { fill: rgba(var(--color-primary-400-rgb), 0.50); }
.fill-primary-400\/60 { fill: rgba(var(--color-primary-400-rgb), 0.60); }
.fill-primary-400\/70 { fill: rgba(var(--color-primary-400-rgb), 0.70); }
.fill-primary-400\/80 { fill: rgba(var(--color-primary-400-rgb), 0.80); }
.fill-primary-400\/90 { fill: rgba(var(--color-primary-400-rgb), 0.90); }
.fill-primary-500 { fill: rgba(var(--color-primary-500-rgb), 1); }
.fill-primary-500\/10 { fill: rgba(var(--color-primary-500-rgb), 0.10); }
.fill-primary-500\/20 { fill: rgba(var(--color-primary-500-rgb), 0.20); }
.fill-primary-500\/30 { fill: rgba(var(--color-primary-500-rgb), 0.30); }
.fill-primary-500\/40 { fill: rgba(var(--color-primary-500-rgb), 0.40); }
.fill-primary-500\/50 { fill: rgba(var(--color-primary-500-rgb), 0.50); }
.fill-primary-500\/60 { fill: rgba(var(--color-primary-500-rgb), 0.60); }
.fill-primary-500\/70 { fill: rgba(var(--color-primary-500-rgb), 0.70); }
.fill-primary-500\/80 { fill: rgba(var(--color-primary-500-rgb), 0.80); }
.fill-primary-500\/90 { fill: rgba(var(--color-primary-500-rgb), 0.90); }
.fill-primary-600 { fill: rgba(var(--color-primary-600-rgb), 1); }
.fill-primary-600\/10 { fill: rgba(var(--color-primary-600-rgb), 0.10); }
.fill-primary-600\/20 { fill: rgba(var(--color-primary-600-rgb), 0.20); }
.fill-primary-600\/30 { fill: rgba(var(--color-primary-600-rgb), 0.30); }
.fill-primary-600\/40 { fill: rgba(var(--color-primary-600-rgb), 0.40); }
.fill-primary-600\/50 { fill: rgba(var(--color-primary-600-rgb), 0.50); }
.fill-primary-600\/60 { fill: rgba(var(--color-primary-600-rgb), 0.60); }
.fill-primary-600\/70 { fill: rgba(var(--color-primary-600-rgb), 0.70); }
.fill-primary-600\/80 { fill: rgba(var(--color-primary-600-rgb), 0.80); }
.fill-primary-600\/90 { fill: rgba(var(--color-primary-600-rgb), 0.90); }
.fill-primary-700 { fill: rgba(var(--color-primary-700-rgb), 1); }
.fill-primary-700\/10 { fill: rgba(var(--color-primary-700-rgb), 0.10); }
.fill-primary-700\/20 { fill: rgba(var(--color-primary-700-rgb), 0.20); }
.fill-primary-700\/30 { fill: rgba(var(--color-primary-700-rgb), 0.30); }
.fill-primary-700\/40 { fill: rgba(var(--color-primary-700-rgb), 0.40); }
.fill-primary-700\/50 { fill: rgba(var(--color-primary-700-rgb), 0.50); }
.fill-primary-700\/60 { fill: rgba(var(--color-primary-700-rgb), 0.60); }
.fill-primary-700\/70 { fill: rgba(var(--color-primary-700-rgb), 0.70); }
.fill-primary-700\/80 { fill: rgba(var(--color-primary-700-rgb), 0.80); }
.fill-primary-700\/90 { fill: rgba(var(--color-primary-700-rgb), 0.90); }
.fill-primary-800 { fill: rgba(var(--color-primary-800-rgb), 1); }
.fill-primary-800\/10 { fill: rgba(var(--color-primary-800-rgb), 0.10); }
.fill-primary-800\/20 { fill: rgba(var(--color-primary-800-rgb), 0.20); }
.fill-primary-800\/30 { fill: rgba(var(--color-primary-800-rgb), 0.30); }
.fill-primary-800\/40 { fill: rgba(var(--color-primary-800-rgb), 0.40); }
.fill-primary-800\/50 { fill: rgba(var(--color-primary-800-rgb), 0.50); }
.fill-primary-800\/60 { fill: rgba(var(--color-primary-800-rgb), 0.60); }
.fill-primary-800\/70 { fill: rgba(var(--color-primary-800-rgb), 0.70); }
.fill-primary-800\/80 { fill: rgba(var(--color-primary-800-rgb), 0.80); }
.fill-primary-800\/90 { fill: rgba(var(--color-primary-800-rgb), 0.90); }
.fill-primary-900 { fill: rgba(var(--color-primary-900-rgb), 1); }
.fill-primary-900\/10 { fill: rgba(var(--color-primary-900-rgb), 0.10); }
.fill-primary-900\/20 { fill: rgba(var(--color-primary-900-rgb), 0.20); }
.fill-primary-900\/30 { fill: rgba(var(--color-primary-900-rgb), 0.30); }
.fill-primary-900\/40 { fill: rgba(var(--color-primary-900-rgb), 0.40); }
.fill-primary-900\/50 { fill: rgba(var(--color-primary-900-rgb), 0.50); }
.fill-primary-900\/60 { fill: rgba(var(--color-primary-900-rgb), 0.60); }
.fill-primary-900\/70 { fill: rgba(var(--color-primary-900-rgb), 0.70); }
.fill-primary-900\/80 { fill: rgba(var(--color-primary-900-rgb), 0.80); }
.fill-primary-900\/90 { fill: rgba(var(--color-primary-900-rgb), 0.90); }
.fill-primary-950 { fill: rgba(var(--color-primary-950-rgb), 1); }
.fill-primary-950\/10 { fill: rgba(var(--color-primary-950-rgb), 0.10); }
.fill-primary-950\/20 { fill: rgba(var(--color-primary-950-rgb), 0.20); }
.fill-primary-950\/30 { fill: rgba(var(--color-primary-950-rgb), 0.30); }
.fill-primary-950\/40 { fill: rgba(var(--color-primary-950-rgb), 0.40); }
.fill-primary-950\/50 { fill: rgba(var(--color-primary-950-rgb), 0.50); }
.fill-primary-950\/60 { fill: rgba(var(--color-primary-950-rgb), 0.60); }
.fill-primary-950\/70 { fill: rgba(var(--color-primary-950-rgb), 0.70); }
.fill-primary-950\/80 { fill: rgba(var(--color-primary-950-rgb), 0.80); }
.fill-primary-950\/90 { fill: rgba(var(--color-primary-950-rgb), 0.90); }
.fill-text { fill: rgba(var(--color-text-rgb), 1); }
.fill-text\/10 { fill: rgba(var(--color-text-rgb), 0.10); }
.fill-text\/20 { fill: rgba(var(--color-text-rgb), 0.20); }
.fill-text\/30 { fill: rgba(var(--color-text-rgb), 0.30); }
.fill-text\/40 { fill: rgba(var(--color-text-rgb), 0.40); }
.fill-text\/50 { fill: rgba(var(--color-text-rgb), 0.50); }
.fill-text\/60 { fill: rgba(var(--color-text-rgb), 0.60); }
.fill-text\/70 { fill: rgba(var(--color-text-rgb), 0.70); }
.fill-text\/80 { fill: rgba(var(--color-text-rgb), 0.80); }
.fill-text\/90 { fill: rgba(var(--color-text-rgb), 0.90); }
.fill-success { fill: rgba(var(--color-success-rgb), 1); }
.fill-success\/10 { fill: rgba(var(--color-success-rgb), 0.10); }
.fill-success\/20 { fill: rgba(var(--color-success-rgb), 0.20); }
.fill-success\/30 { fill: rgba(var(--color-success-rgb), 0.30); }
.fill-success\/40 { fill: rgba(var(--color-success-rgb), 0.40); }
.fill-success\/50 { fill: rgba(var(--color-success-rgb), 0.50); }
.fill-success\/60 { fill: rgba(var(--color-success-rgb), 0.60); }
.fill-success\/70 { fill: rgba(var(--color-success-rgb), 0.70); }
.fill-success\/80 { fill: rgba(var(--color-success-rgb), 0.80); }
.fill-success\/90 { fill: rgba(var(--color-success-rgb), 0.90); }
.fill-warning { fill: rgba(var(--color-warning-rgb), 1); }
.fill-warning\/10 { fill: rgba(var(--color-warning-rgb), 0.10); }
.fill-warning\/20 { fill: rgba(var(--color-warning-rgb), 0.20); }
.fill-warning\/30 { fill: rgba(var(--color-warning-rgb), 0.30); }
.fill-warning\/40 { fill: rgba(var(--color-warning-rgb), 0.40); }
.fill-warning\/50 { fill: rgba(var(--color-warning-rgb), 0.50); }
.fill-warning\/60 { fill: rgba(var(--color-warning-rgb), 0.60); }
.fill-warning\/70 { fill: rgba(var(--color-warning-rgb), 0.70); }
.fill-warning\/80 { fill: rgba(var(--color-warning-rgb), 0.80); }
.fill-warning\/90 { fill: rgba(var(--color-warning-rgb), 0.90); }
.fill-danger { fill: rgba(var(--color-danger-rgb), 1); }
.fill-danger\/10 { fill: rgba(var(--color-danger-rgb), 0.10); }
.fill-danger\/20 { fill: rgba(var(--color-danger-rgb), 0.20); }
.fill-danger\/30 { fill: rgba(var(--color-danger-rgb), 0.30); }
.fill-danger\/40 { fill: rgba(var(--color-danger-rgb), 0.40); }
.fill-danger\/50 { fill: rgba(var(--color-danger-rgb), 0.50); }
.fill-danger\/60 { fill: rgba(var(--color-danger-rgb), 0.60); }
.fill-danger\/70 { fill: rgba(var(--color-danger-rgb), 0.70); }
.fill-danger\/80 { fill: rgba(var(--color-danger-rgb), 0.80); }
.fill-danger\/90 { fill: rgba(var(--color-danger-rgb), 0.90); }
.fill-light { fill: rgba(var(--color-light-rgb), 1); }
.fill-light\/10 { fill: rgba(var(--color-light-rgb), 0.10); }
.fill-light\/20 { fill: rgba(var(--color-light-rgb), 0.20); }
.fill-light\/30 { fill: rgba(var(--color-light-rgb), 0.30); }
.fill-light\/40 { fill: rgba(var(--color-light-rgb), 0.40); }
.fill-light\/50 { fill: rgba(var(--color-light-rgb), 0.50); }
.fill-light\/60 { fill: rgba(var(--color-light-rgb), 0.60); }
.fill-light\/70 { fill: rgba(var(--color-light-rgb), 0.70); }
.fill-light\/80 { fill: rgba(var(--color-light-rgb), 0.80); }
.fill-light\/90 { fill: rgba(var(--color-light-rgb), 0.90); }
.fill-white { fill: rgba(var(--color-white-rgb), 1); }
.fill-white\/10 { fill: rgba(var(--color-white-rgb), 0.10); }
.fill-white\/20 { fill: rgba(var(--color-white-rgb), 0.20); }
.fill-white\/30 { fill: rgba(var(--color-white-rgb), 0.30); }
.fill-white\/40 { fill: rgba(var(--color-white-rgb), 0.40); }
.fill-white\/50 { fill: rgba(var(--color-white-rgb), 0.50); }
.fill-white\/60 { fill: rgba(var(--color-white-rgb), 0.60); }
.fill-white\/70 { fill: rgba(var(--color-white-rgb), 0.70); }
.fill-white\/80 { fill: rgba(var(--color-white-rgb), 0.80); }
.fill-white\/90 { fill: rgba(var(--color-white-rgb), 0.90); }
/* Shade Gradient Utilities (Linear + Radial) */
.shade-primary-50.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 70%);
}
.shade-primary-100.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 70%);
}
.shade-primary-200.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 70%);
}
.shade-primary-300.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 70%);
}
.shade-primary-400.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 70%);
}
.shade-primary-500.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 70%);
}
.shade-primary-600.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 70%);
}
.shade-primary-700.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 70%);
}
.shade-primary-800.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 70%);
}
.shade-primary-900.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 70%);
}
.shade-primary-950.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 70%);
}
.shade-text.to-t {
background-image: linear-gradient(to top, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-l {
background-image: linear-gradient(to left, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-r {
background-image: linear-gradient(to right, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.radial {
background-image: radial-gradient(circle, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 70%);
}
.shade-success.to-t {
background-image: linear-gradient(to top, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-l {
background-image: linear-gradient(to left, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-r {
background-image: linear-gradient(to right, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.radial {
background-image: radial-gradient(circle, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 70%);
}
.shade-warning.to-t {
background-image: linear-gradient(to top, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-l {
background-image: linear-gradient(to left, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-r {
background-image: linear-gradient(to right, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.radial {
background-image: radial-gradient(circle, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 70%);
}
.shade-danger.to-t {
background-image: linear-gradient(to top, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-l {
background-image: linear-gradient(to left, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-r {
background-image: linear-gradient(to right, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.radial {
background-image: radial-gradient(circle, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 70%);
}
.shade-light.to-t {
background-image: linear-gradient(to top, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-l {
background-image: linear-gradient(to left, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-r {
background-image: linear-gradient(to right, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.radial {
background-image: radial-gradient(circle, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 70%);
}
.shade-white.to-t {
background-image: linear-gradient(to top, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-l {
background-image: linear-gradient(to left, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-r {
background-image: linear-gradient(to right, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.radial {
background-image: radial-gradient(circle, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 70%);
}
/* Box Shadow Utilities */
.shadow-primary-50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 1);
}
.shadow-primary-50\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.10);
}
.shadow-primary-50\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.20);
}
.shadow-primary-50\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.30);
}
.shadow-primary-50\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.40);
}
.shadow-primary-50\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.50);
}
.shadow-primary-50\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.60);
}
.shadow-primary-50\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.70);
}
.shadow-primary-50\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.80);
}
.shadow-primary-50\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.90);
}
.shadow-primary-100 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 1);
}
.shadow-primary-100\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.10);
}
.shadow-primary-100\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.20);
}
.shadow-primary-100\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.30);
}
.shadow-primary-100\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.40);
}
.shadow-primary-100\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.50);
}
.shadow-primary-100\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.60);
}
.shadow-primary-100\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.70);
}
.shadow-primary-100\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.80);
}
.shadow-primary-100\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.90);
}
.shadow-primary-200 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 1);
}
.shadow-primary-200\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.10);
}
.shadow-primary-200\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.20);
}
.shadow-primary-200\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.30);
}
.shadow-primary-200\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.40);
}
.shadow-primary-200\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.50);
}
.shadow-primary-200\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.60);
}
.shadow-primary-200\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.70);
}
.shadow-primary-200\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.80);
}
.shadow-primary-200\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.90);
}
.shadow-primary-300 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 1);
}
.shadow-primary-300\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.10);
}
.shadow-primary-300\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.20);
}
.shadow-primary-300\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.30);
}
.shadow-primary-300\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.40);
}
.shadow-primary-300\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.50);
}
.shadow-primary-300\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.60);
}
.shadow-primary-300\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.70);
}
.shadow-primary-300\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.80);
}
.shadow-primary-300\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.90);
}
.shadow-primary-400 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 1);
}
.shadow-primary-400\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.10);
}
.shadow-primary-400\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.20);
}
.shadow-primary-400\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.30);
}
.shadow-primary-400\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.40);
}
.shadow-primary-400\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.50);
}
.shadow-primary-400\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.60);
}
.shadow-primary-400\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.70);
}
.shadow-primary-400\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.80);
}
.shadow-primary-400\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.90);
}
.shadow-primary-500 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 1);
}
.shadow-primary-500\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.10);
}
.shadow-primary-500\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.20);
}
.shadow-primary-500\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.30);
}
.shadow-primary-500\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.40);
}
.shadow-primary-500\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.50);
}
.shadow-primary-500\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.60);
}
.shadow-primary-500\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.70);
}
.shadow-primary-500\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.80);
}
.shadow-primary-500\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.90);
}
.shadow-primary-600 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 1);
}
.shadow-primary-600\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.10);
}
.shadow-primary-600\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.20);
}
.shadow-primary-600\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.30);
}
.shadow-primary-600\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.40);
}
.shadow-primary-600\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.50);
}
.shadow-primary-600\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.60);
}
.shadow-primary-600\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.70);
}
.shadow-primary-600\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.80);
}
.shadow-primary-600\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.90);
}
.shadow-primary-700 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 1);
}
.shadow-primary-700\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.10);
}
.shadow-primary-700\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.20);
}
.shadow-primary-700\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.30);
}
.shadow-primary-700\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.40);
}
.shadow-primary-700\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.50);
}
.shadow-primary-700\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.60);
}
.shadow-primary-700\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.70);
}
.shadow-primary-700\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.80);
}
.shadow-primary-700\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.90);
}
.shadow-primary-800 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 1);
}
.shadow-primary-800\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.10);
}
.shadow-primary-800\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.20);
}
.shadow-primary-800\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.30);
}
.shadow-primary-800\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.40);
}
.shadow-primary-800\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.50);
}
.shadow-primary-800\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.60);
}
.shadow-primary-800\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.70);
}
.shadow-primary-800\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.80);
}
.shadow-primary-800\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.90);
}
.shadow-primary-900 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 1);
}
.shadow-primary-900\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.10);
}
.shadow-primary-900\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.20);
}
.shadow-primary-900\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.30);
}
.shadow-primary-900\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.40);
}
.shadow-primary-900\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.50);
}
.shadow-primary-900\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.60);
}
.shadow-primary-900\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.70);
}
.shadow-primary-900\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.80);
}
.shadow-primary-900\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.90);
}
.shadow-primary-950 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 1);
}
.shadow-primary-950\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.10);
}
.shadow-primary-950\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.20);
}
.shadow-primary-950\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.30);
}
.shadow-primary-950\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.40);
}
.shadow-primary-950\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.50);
}
.shadow-primary-950\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.60);
}
.shadow-primary-950\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.70);
}
.shadow-primary-950\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.80);
}
.shadow-primary-950\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.90);
}
.shadow-text {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 1);
}
.shadow-text\/10 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.10);
}
.shadow-text\/20 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.20);
}
.shadow-text\/30 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.30);
}
.shadow-text\/40 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.40);
}
.shadow-text\/50 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.50);
}
.shadow-text\/60 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.60);
}
.shadow-text\/70 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.70);
}
.shadow-text\/80 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.80);
}
.shadow-text\/90 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.90);
}
.shadow-success {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 1);
}
.shadow-success\/10 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.10);
}
.shadow-success\/20 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.20);
}
.shadow-success\/30 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.30);
}
.shadow-success\/40 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.40);
}
.shadow-success\/50 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.50);
}
.shadow-success\/60 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.60);
}
.shadow-success\/70 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.70);
}
.shadow-success\/80 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.80);
}
.shadow-success\/90 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.90);
}
.shadow-warning {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 1);
}
.shadow-warning\/10 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.10);
}
.shadow-warning\/20 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.20);
}
.shadow-warning\/30 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.30);
}
.shadow-warning\/40 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.40);
}
.shadow-warning\/50 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.50);
}
.shadow-warning\/60 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.60);
}
.shadow-warning\/70 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.70);
}
.shadow-warning\/80 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.80);
}
.shadow-warning\/90 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.90);
}
.shadow-danger {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 1);
}
.shadow-danger\/10 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.10);
}
.shadow-danger\/20 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.20);
}
.shadow-danger\/30 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.30);
}
.shadow-danger\/40 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.40);
}
.shadow-danger\/50 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.50);
}
.shadow-danger\/60 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.60);
}
.shadow-danger\/70 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.70);
}
.shadow-danger\/80 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.80);
}
.shadow-danger\/90 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.90);
}
.shadow-light {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 1);
}
.shadow-light\/10 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.10);
}
.shadow-light\/20 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.20);
}
.shadow-light\/30 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.30);
}
.shadow-light\/40 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.40);
}
.shadow-light\/50 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.50);
}
.shadow-light\/60 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.60);
}
.shadow-light\/70 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.70);
}
.shadow-light\/80 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.80);
}
.shadow-light\/90 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.90);
}
.shadow-white {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 1);
}
.shadow-white\/10 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.10);
}
.shadow-white\/20 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.20);
}
.shadow-white\/30 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.30);
}
.shadow-white\/40 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.40);
}
.shadow-white\/50 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.50);
}
.shadow-white\/60 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.60);
}
.shadow-white\/70 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.70);
}
.shadow-white\/80 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.80);
}
.shadow-white\/90 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.90);
}
/* Text Shadow Utilities */
.text-shadow-primary-50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 1);
}
.text-shadow-primary-50\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.10);
}
.text-shadow-primary-50\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.20);
}
.text-shadow-primary-50\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.30);
}
.text-shadow-primary-50\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.40);
}
.text-shadow-primary-50\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.50);
}
.text-shadow-primary-50\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.60);
}
.text-shadow-primary-50\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.70);
}
.text-shadow-primary-50\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.80);
}
.text-shadow-primary-50\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.90);
}
.text-shadow-primary-100 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 1);
}
.text-shadow-primary-100\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.10);
}
.text-shadow-primary-100\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.20);
}
.text-shadow-primary-100\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.30);
}
.text-shadow-primary-100\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.40);
}
.text-shadow-primary-100\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.50);
}
.text-shadow-primary-100\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.60);
}
.text-shadow-primary-100\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.70);
}
.text-shadow-primary-100\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.80);
}
.text-shadow-primary-100\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.90);
}
.text-shadow-primary-200 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 1);
}
.text-shadow-primary-200\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.10);
}
.text-shadow-primary-200\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.20);
}
.text-shadow-primary-200\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.30);
}
.text-shadow-primary-200\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.40);
}
.text-shadow-primary-200\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.50);
}
.text-shadow-primary-200\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.60);
}
.text-shadow-primary-200\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.70);
}
.text-shadow-primary-200\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.80);
}
.text-shadow-primary-200\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.90);
}
.text-shadow-primary-300 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 1);
}
.text-shadow-primary-300\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.10);
}
.text-shadow-primary-300\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.20);
}
.text-shadow-primary-300\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.30);
}
.text-shadow-primary-300\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.40);
}
.text-shadow-primary-300\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.50);
}
.text-shadow-primary-300\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.60);
}
.text-shadow-primary-300\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.70);
}
.text-shadow-primary-300\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.80);
}
.text-shadow-primary-300\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.90);
}
.text-shadow-primary-400 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 1);
}
.text-shadow-primary-400\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.10);
}
.text-shadow-primary-400\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.20);
}
.text-shadow-primary-400\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.30);
}
.text-shadow-primary-400\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.40);
}
.text-shadow-primary-400\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.50);
}
.text-shadow-primary-400\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.60);
}
.text-shadow-primary-400\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.70);
}
.text-shadow-primary-400\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.80);
}
.text-shadow-primary-400\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.90);
}
.text-shadow-primary-500 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 1);
}
.text-shadow-primary-500\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.10);
}
.text-shadow-primary-500\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.20);
}
.text-shadow-primary-500\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.30);
}
.text-shadow-primary-500\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.40);
}
.text-shadow-primary-500\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.50);
}
.text-shadow-primary-500\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.60);
}
.text-shadow-primary-500\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.70);
}
.text-shadow-primary-500\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.80);
}
.text-shadow-primary-500\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.90);
}
.text-shadow-primary-600 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 1);
}
.text-shadow-primary-600\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.10);
}
.text-shadow-primary-600\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.20);
}
.text-shadow-primary-600\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.30);
}
.text-shadow-primary-600\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.40);
}
.text-shadow-primary-600\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.50);
}
.text-shadow-primary-600\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.60);
}
.text-shadow-primary-600\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.70);
}
.text-shadow-primary-600\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.80);
}
.text-shadow-primary-600\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.90);
}
.text-shadow-primary-700 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 1);
}
.text-shadow-primary-700\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.10);
}
.text-shadow-primary-700\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.20);
}
.text-shadow-primary-700\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.30);
}
.text-shadow-primary-700\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.40);
}
.text-shadow-primary-700\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.50);
}
.text-shadow-primary-700\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.60);
}
.text-shadow-primary-700\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.70);
}
.text-shadow-primary-700\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.80);
}
.text-shadow-primary-700\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.90);
}
.text-shadow-primary-800 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 1);
}
.text-shadow-primary-800\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.10);
}
.text-shadow-primary-800\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.20);
}
.text-shadow-primary-800\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.30);
}
.text-shadow-primary-800\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.40);
}
.text-shadow-primary-800\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.50);
}
.text-shadow-primary-800\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.60);
}
.text-shadow-primary-800\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.70);
}
.text-shadow-primary-800\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.80);
}
.text-shadow-primary-800\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.90);
}
.text-shadow-primary-900 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 1);
}
.text-shadow-primary-900\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.10);
}
.text-shadow-primary-900\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.20);
}
.text-shadow-primary-900\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.30);
}
.text-shadow-primary-900\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.40);
}
.text-shadow-primary-900\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.50);
}
.text-shadow-primary-900\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.60);
}
.text-shadow-primary-900\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.70);
}
.text-shadow-primary-900\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.80);
}
.text-shadow-primary-900\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.90);
}
.text-shadow-primary-950 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 1);
}
.text-shadow-primary-950\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.10);
}
.text-shadow-primary-950\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.20);
}
.text-shadow-primary-950\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.30);
}
.text-shadow-primary-950\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.40);
}
.text-shadow-primary-950\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.50);
}
.text-shadow-primary-950\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.60);
}
.text-shadow-primary-950\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.70);
}
.text-shadow-primary-950\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.80);
}
.text-shadow-primary-950\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.90);
}
.text-shadow-text {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 1);
}
.text-shadow-text\/10 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.10);
}
.text-shadow-text\/20 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.20);
}
.text-shadow-text\/30 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.30);
}
.text-shadow-text\/40 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.40);
}
.text-shadow-text\/50 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.50);
}
.text-shadow-text\/60 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.60);
}
.text-shadow-text\/70 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.70);
}
.text-shadow-text\/80 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.80);
}
.text-shadow-text\/90 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.90);
}
.text-shadow-success {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 1);
}
.text-shadow-success\/10 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.10);
}
.text-shadow-success\/20 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.20);
}
.text-shadow-success\/30 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.30);
}
.text-shadow-success\/40 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.40);
}
.text-shadow-success\/50 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.50);
}
.text-shadow-success\/60 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.60);
}
.text-shadow-success\/70 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.70);
}
.text-shadow-success\/80 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.80);
}
.text-shadow-success\/90 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.90);
}
.text-shadow-warning {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 1);
}
.text-shadow-warning\/10 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.10);
}
.text-shadow-warning\/20 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.20);
}
.text-shadow-warning\/30 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.30);
}
.text-shadow-warning\/40 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.40);
}
.text-shadow-warning\/50 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.50);
}
.text-shadow-warning\/60 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.60);
}
.text-shadow-warning\/70 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.70);
}
.text-shadow-warning\/80 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.80);
}
.text-shadow-warning\/90 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.90);
}
.text-shadow-danger {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 1);
}
.text-shadow-danger\/10 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.10);
}
.text-shadow-danger\/20 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.20);
}
.text-shadow-danger\/30 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.30);
}
.text-shadow-danger\/40 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.40);
}
.text-shadow-danger\/50 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.50);
}
.text-shadow-danger\/60 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.60);
}
.text-shadow-danger\/70 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.70);
}
.text-shadow-danger\/80 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.80);
}
.text-shadow-danger\/90 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.90);
}
.text-shadow-light {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 1);
}
.text-shadow-light\/10 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.10);
}
.text-shadow-light\/20 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.20);
}
.text-shadow-light\/30 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.30);
}
.text-shadow-light\/40 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.40);
}
.text-shadow-light\/50 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.50);
}
.text-shadow-light\/60 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.60);
}
.text-shadow-light\/70 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.70);
}
.text-shadow-light\/80 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.80);
}
.text-shadow-light\/90 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.90);
}
.text-shadow-white {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 1);
}
.text-shadow-white\/10 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.10);
}
.text-shadow-white\/20 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.20);
}
.text-shadow-white\/30 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.30);
}
.text-shadow-white\/40 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.40);
}
.text-shadow-white\/50 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.50);
}
.text-shadow-white\/60 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.60);
}
.text-shadow-white\/70 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.70);
}
.text-shadow-white\/80 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.80);
}
.text-shadow-white\/90 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.90);
}
/* Radius Utilities */
/* Algemene border-radius classes */
.radius-tiny { border-radius: var(--radius-tiny); }
.radius-small { border-radius: var(--radius-small); }
.radius-medium { border-radius: var(--radius-medium); }
.radius-large { border-radius: var(--radius-large); }
.radius-xlarge { border-radius: var(--radius-xlarge); }
.radius-huge { border-radius: var(--radius-huge); }
.radius-full { border-radius: var(--radius-full); }
/* Alleen bovenkant afgerond */
.radius-top-tiny { border-radius: var(--radius-tiny) var(--radius-tiny) 0 0; }
.radius-top-small { border-radius: var(--radius-small) var(--radius-small) 0 0; }
.radius-top-medium { border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
.radius-top-large { border-radius: var(--radius-large) var(--radius-large) 0 0; }
.radius-top-xlarge { border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0; }
.radius-top-huge { border-radius: var(--radius-huge) var(--radius-huge) 0 0; }
/* Alleen rechterkant afgerond */
.radius-right-tiny { border-radius: 0 var(--radius-tiny) var(--radius-tiny) 0; }
.radius-right-small { border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.radius-right-medium { border-radius: 0 var(--radius-medium) var(--radius-medium) 0; }
.radius-right-large { border-radius: 0 var(--radius-large) var(--radius-large) 0; }
.radius-right-xlarge { border-radius: 0 var(--radius-xlarge) var(--radius-xlarge) 0; }
.radius-right-huge { border-radius: 0 var(--radius-huge) var(--radius-huge) 0; }
/* Alleen linkerkant afgerond */
.radius-left-tiny { border-radius: var(--radius-tiny) 0 0 var(--radius-tiny); }
.radius-left-small { border-radius: var(--radius-small) 0 0 var(--radius-small); }
.radius-left-medium { border-radius: var(--radius-medium) 0 0 var(--radius-medium); }
.radius-left-large { border-radius: var(--radius-large) 0 0 var(--radius-large); }
.radius-left-xlarge { border-radius: var(--radius-xlarge) 0 0 var(--radius-xlarge); }
.radius-left-huge { border-radius: var(--radius-huge) 0 0 var(--radius-huge); }
/* Alleen onderkant afgerond */
.radius-bottom-tiny { border-radius: 0 0 var(--radius-tiny) var(--radius-tiny); }
.radius-bottom-small { border-radius: 0 0 var(--radius-small) var(--radius-small); }
.radius-bottom-medium { border-radius: 0 0 var(--radius-medium) var(--radius-medium); }
.radius-bottom-large { border-radius: 0 0 var(--radius-large) var(--radius-large); }
.radius-bottom-xlarge { border-radius: 0 0 var(--radius-xlarge) var(--radius-xlarge); }
.radius-bottom-huge { border-radius: 0 0 var(--radius-huge) var(--radius-huge); }
/** None **/
/* Padding - All sides */
.padding-none { padding: 0 !important; }
.padding-tiny { padding: var(--space-tiny); }
.padding-xsmall { padding: var(--space-xsmall); }
.padding-small { padding: var(--space-small); }
.padding-medium { padding: var(--space-medium); }
.padding-large { padding: var(--space-large); }
.padding-xlarge { padding: var(--space-xlarge); }
.padding-huge { padding: var(--space-huge); }
/* Padding - Top */
.padding-top-none { padding-top: 0 !important; }
.padding-top-tiny { padding-top: var(--space-tiny); }
.padding-top-xsmall { padding-top: var(--space-xsmall); }
.padding-top-small { padding-top: var(--space-small); }
.padding-top-medium { padding-top: var(--space-medium); }
.padding-top-large { padding-top: var(--space-large); }
.padding-top-xlarge { padding-top: var(--space-xlarge); }
.padding-top-huge { padding-top: var(--space-huge); }
/* Padding - Bottom */
.padding-bottom-none { padding-bottom: 0 !important;}
.padding-bottom-tiny { padding-bottom: var(--space-tiny); }
.padding-bottom-xsmall { padding-bottom: var(--space-xsmall); }
.padding-bottom-small { padding-bottom: var(--space-small); }
.padding-bottom-medium { padding-bottom: var(--space-medium); }
.padding-bottom-large { padding-bottom: var(--space-large); }
.padding-bottom-xlarge { padding-bottom: var(--space-xlarge); }
.padding-bottom-huge { padding-bottom: var(--space-huge); }
/* Padding - Left */
.padding-left-none { padding-left: 0 !important; }
.padding-left-tiny { padding-left: var(--space-tiny); }
.padding-left-xsmall { padding-left: var(--space-xsmall); }
.padding-left-small { padding-left: var(--space-small); }
.padding-left-medium { padding-left: var(--space-medium); }
.padding-left-large { padding-left: var(--space-large); }
.padding-left-xlarge { padding-left: var(--space-xlarge); }
.padding-left-huge { padding-left: var(--space-huge); }
/* Padding - Right */
.padding-right-none { padding-right: 0 !important; }
.padding-right-tiny { padding-right: var(--space-tiny); }
.padding-right-xsmall { padding-right: var(--space-xsmall); }
.padding-right-small { padding-right: var(--space-small); }
.padding-right-medium { padding-right: var(--space-medium); }
.padding-right-large { padding-right: var(--space-large); }
.padding-right-xlarge { padding-right: var(--space-xlarge); }
.padding-right-huge { padding-right: var(--space-huge); }
/* Margin - All sides */
.margin-none { margin: 0 !important; }
.margin-tiny { margin: var(--space-tiny); }
.margin-xsmall { margin: var(--space-xsmall); }
.margin-small { margin: var(--space-small); }
.margin-medium { margin: var(--space-medium); }
.margin-large { margin: var(--space-large); }
.margin-xlarge { margin: var(--space-xlarge); }
.margin-huge { margin: var(--space-huge); }
/* Margin - Top */
.margin-top-none { margin-top: 0 !important; }
.margin-top-tiny { margin-top: var(--space-tiny); }
.margin-top-xsmall { margin-top: var(--space-xsmall); }
.margin-top-small { margin-top: var(--space-small); }
.margin-top-medium { margin-top: var(--space-medium); }
.margin-top-large { margin-top: var(--space-large); }
.margin-top-xlarge { margin-top: var(--space-xlarge); }
.margin-top-huge { margin-top: var(--space-huge); }
/* Margin - Bottom */
.margin-bottom-none { margin-bottom: 0 !important; }
.margin-bottom-tiny { margin-bottom: var(--space-tiny); }
.margin-bottom-xsmall { margin-bottom: var(--space-xsmall); }
.margin-bottom-small { margin-bottom: var(--space-small); }
.margin-bottom-medium { margin-bottom: var(--space-medium); }
.margin-bottom-large { margin-bottom: var(--space-large); }
.margin-bottom-xlarge { margin-bottom: var(--space-xlarge); }
.margin-bottom-huge { margin-bottom: var(--space-huge); }
/* Margin - Left */
.margin-left-none { margin-left: 0 !important; }
.margin-left-tiny { margin-left: var(--space-tiny); }
.margin-left-xsmall { margin-left: var(--space-xsmall); }
.margin-left-small { margin-left: var(--space-small); }
.margin-left-medium { margin-left: var(--space-medium); }
.margin-left-large { margin-left: var(--space-large); }
.margin-left-xlarge { margin-left: var(--space-xlarge); }
.margin-left-huge { margin-left: var(--space-huge); }
/* Margin - Right */
.margin-right-none { margin-right: 0 !important; }
.margin-right-tiny { margin-right: var(--space-tiny); }
.margin-right-xsmall { margin-right: var(--space-xsmall); }
.margin-right-small { margin-right: var(--space-small); }
.margin-right-medium { margin-right: var(--space-medium); }
.margin-right-large { margin-right: var(--space-large); }
.margin-right-xlarge { margin-right: var(--space-xlarge); }
.margin-right-huge { margin-right: var(--space-huge); }
/* Margin - Horizontal / Vertical shorthand */
.margin-y-small { margin-top: var(--space-small); margin-bottom: var(--space-small); }
.margin-x-small { margin-left: var(--space-small); margin-right: var(--space-small); }
/* Opacity */
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }
/* Position */
.position-top-left {
position: absolute;
top: 0;
left: 0;
}
.position-top-center {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.position-top-right {
position: absolute;
top: 0;
left: 0;
}
.position-bottom-left {
position: absolute;
top: 0;
left: 0;
}
.position-bottom-center {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.position-bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
.position-center-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.position-center-center {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.position-center-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
/* Backdrop filter blur */
.with-blur:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
filter: brightness(1.3) contrast(1.4);
border-radius: inherit;
z-index: -1;
}
/* --- /templates/xso/css/wbce.css --- */
/*
---------------------------
WBCE - aanvullingen op de TimeWriter opmaak
---------------------------
Dit bestand bevat uitsluitend regels die nodig zijn omdat de navigatie en de
content nu uit het CMS komen. De originele stylesheets zijn ongewijzigd
gebleven, zodat een update van de vormgeving hier niet in de weg zit.
*/
/* Actieve pagina in de hoofdnavigatie (a of button, zie $tw['menu_click']) */
.topnav > li > a.is-active,
.topnav > li > button.is-active {
color: var(--color-primary-600);
}
/* De streep onder het item is in deze template de taal voor "hier ben je":
* topbar.css laat hem bij hover omhoog schuiven en houdt hem staand bij
* .item-breadcrumb en .hover. De actieve pagina hoorde daarbij, maar kreeg
* hem niet. Nu wel. */
.topnav > li > a.is-active:before,
.topnav > li > button.is-active:before {
transform: translateY(0px);
visibility: visible;
opacity: 1;
}
/* ---------------------------------------------------------------------------
Actieve pagina in de bovenbalk en in het copyrightmenu
show_menu2 zet class="is-active" op het
van de huidige pagina. Foundation
pakt dat op met .menu .is-active > a en zet daar een vol blok #1779ba achter:
zijn eigen standaard-primary, een kleur die in dit palet niet voorkomt. Die
achtergrond werd nergens overschreven, de labelkleur uit topbar.css wel - die
heeft dezelfde specificiteit en staat later, dus die wint. Het resultaat was
antracietgrijze tekst (--color-text) op middenblauw: 2,7:1, ruim onder de
4,5:1 die gewone tekst nodig heeft, en een blok dat op een bijna witte balk
harder roept dan de knop ernaast.
Hieronder gaat het blok weg en komt de taal van de template ervoor terug:
het label in het donkere blauw van het palet (7,3:1 op de balk) met dezelfde
accentstreep eronder die de hoofdnavigatie gebruikt.
--------------------------------------------------------------------------- */
.topbar-extra-content .menu li.is-active > a,
.topbar-extra-content .menu li.active > a {
background: transparent;
color: var(--color-primary-900);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--color-primary-600);
}
.topbar-extra-content .menu li.is-active > a:hover,
.topbar-extra-content .menu li.active > a:hover {
color: var(--color-primary-600);
}
/* Hetzelfde menu staat onderaan bij het copyright. Daar alleen het blok weg;
* kleur en gewicht blijven van de footer zelf. */
.copyright-content .menu li.is-active > a,
.copyright-content .menu li.active > a {
background: transparent;
font-weight: 600;
}
/* ---------------------------------------------------------------------------
Afbeelding op de kaart in het menupaneel
De promokaart in de mega-dropdown toonde de afbeelding op de grootte die het
bestand zelf meebracht: een icoon van 128 px werd 128 px, een foto liep over
de volle kaartbreedte. Daardoor sprong de kaart van formaat zodra iemand een
andere afbeelding koos. Hij staat nu vast op 100 x 100.
Ander formaat? Pas alleen --menupaneel-afbeelding hieronder aan.
object-fit: contain laat de hele afbeelding zien, met ruimte eromheen als
hij niet vierkant is - goed voor iconen en logo's. Zet je er een foto op en
wil je het vierkant helemaal gevuld hebben (bijgesneden), vervang contain
dan door cover.
--------------------------------------------------------------------------- */
.mega-dropdown .card-image {
--menupaneel-afbeelding: 100px;
width: var(--menupaneel-afbeelding);
height: var(--menupaneel-afbeelding);
flex: 0 0 auto;
}
.mega-dropdown .card-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* ---------------------------------------------------------------------------
Subnavigatie in de zijbalk
show_menu2 kan meerdere niveaus diep gaan; hieronder de inspringing.
--------------------------------------------------------------------------- */
.sidebar-subnav ul ul {
margin-left: 15px;
border-left: 1px solid var(--color-primary-100);
}
.sidebar-subnav li.menu-current > a,
.sidebar-subnav li.menu-parent > a {
font-weight: 600;
color: var(--color-primary-600);
}
/* ---------------------------------------------------------------------------
Content uit de WYSIWYG-editor
Basisopmaak voor content zonder .textblock-classes, zodat een gewone
pagina er meteen goed uitziet.
--------------------------------------------------------------------------- */
#page-content > ul,
#page-content > ol {
margin-bottom: 20px;
line-height: 1.9;
}
#page-content img {
max-width: 100%;
height: auto;
}
#page-content table {
width: 100%;
margin-bottom: 25px;
}
#page-content iframe {
max-width: 100%;
}
#page-content > *:last-child {
margin-bottom: 0;
}
/* Meldingen van modules (bijv. formulieren) */
#page-content .message,
#page-content .error {
padding: 15px 20px;
border-radius: 10px;
background: var(--color-primary-50);
margin-bottom: 20px;
}
#page-content .error {
background: rgba(var(--color-alert-rgb), 0.1);
}
/* ---------------------------------------------------------------------------
Toegankelijkheid: link naar de inhoud
--------------------------------------------------------------------------- */
.show-on-focus {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.show-on-focus:focus {
left: 0;
top: 0;
z-index: 999;
width: auto;
height: auto;
clip: auto;
padding: 12px 20px;
background: var(--color-white);
color: var(--color-primary-950);
border-radius: 0 0 10px 0;
}
/* ---------------------------------------------------------------------------
Naar boven
--------------------------------------------------------------------------- */
.scroll-to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary-600);
color: var(--color-white);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
body.is-scrolled .scroll-to-top {
opacity: 1;
pointer-events: auto;
}
.scroll-to-top:hover {
background: var(--color-primary-700);
color: var(--color-white);
}
/* ---------------------------------------------------------------------------
* Homepage (modulegebouwde hero) - toegevoegd voor de modulaire homepage.
* De homepage (bovenste pagina, body.is-home) krijgt een doorlopende lichte
* achtergrond die naar wit vervaagt, zodat een hero uit blok 10 (bv. de
* Cover-module met achtergrond op "transparant") naadloos aansluit op de nav.
* Op de homepage staat bovendien geen kruimelpad (zie index.php / IS_HOME).
* ------------------------------------------------------------------------ */
body.is-home {
background: linear-gradient(180deg, #e7f1ff 0%, #eef5ff 26%, #f6faff 48%, #ffffff 70%);
background-repeat: no-repeat;
}
/* ---------------------------------------------------------------------------
* Blok 'Brede secties (volle breedte)' - .page-content-full
*
* Wordt door index.php gebruikt voor blok 5: de secties lopen edge-to-edge en
* bepalen zelf hun ruimte. Losse tekst die je ertussen typt zou dan tot de schermrand lopen;
* onderstaande regels vangen dat op door gewone tekstelementen alsnog in de
* standaard containerbreedte te zetten (75rem, zelfde gutter als
* .grid-container). Elementen met een eigen class - dus de opmaak van de
* template en de sectiemodules - blijven onaangeroerd volle breedte.
* ------------------------------------------------------------------------ */
/* Zorg dat dit blok zelf nooit zij-padding krijgt, zodat een sectie met een
achtergrond (bv. het CTA-bannerblok) echt tegen de schermranden staat. */
.page-content-full {
padding-left: 0;
padding-right: 0;
}
.page-content-full > p,
.page-content-full > h1,
.page-content-full > h2,
.page-content-full > h3,
.page-content-full > h4,
.page-content-full > h5,
.page-content-full > h6,
.page-content-full > ul,
.page-content-full > ol,
.page-content-full > dl,
.page-content-full > table,
.page-content-full > blockquote,
.page-content-full > pre,
.page-content-full > address,
.page-content-full > form,
.page-content-full > hr,
.page-content-full > figure,
.page-content-full > iframe,
.page-content-full > img,
.page-content-full > div:not([class]) {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
box-sizing: border-box;
}
/* wat lucht boven/onder losse tekst, zodat die niet tegen een sectie plakt */
.page-content-full > p:first-child,
.page-content-full > h1:first-child,
.page-content-full > h2:first-child,
.page-content-full > h3:first-child,
.page-content-full > ul:first-child,
.page-content-full > ol:first-child,
.page-content-full > table:first-child,
.page-content-full > div:not([class]):first-child {
margin-top: 2.5rem;
}
.page-content-full > p:last-child,
.page-content-full > h1:last-child,
.page-content-full > h2:last-child,
.page-content-full > h3:last-child,
.page-content-full > ul:last-child,
.page-content-full > ol:last-child,
.page-content-full > table:last-child,
.page-content-full > div:not([class]):last-child {
margin-bottom: 2.5rem;
}
/* Staat er tekst zowel voor als na een volle-breedte sectie in hetzelfde blok,
dan krijgt elk vervolgstuk dezelfde inspringing als #page-content
(zie content.css), zodat alles netjes op een lijn blijft. */
.page-content-more {
padding-left: 30px;
padding-right: 6rem;
}
@media (max-width: 1023px) {
.page-content-more { padding-left: 15px; padding-right: 1rem; }
}
@media (max-width: 640px) {
.page-content-more { padding-left: 15px; padding-right: 15px; }
}
/* ---------------------------------------------------------------------------
* Achtergronddecoratie achter een eigen hero (blok 'Cover / hero')
*
* De automatische cover-placeholder heeft een kleurvlak, twee gloedcirkels en
* de grote sierlijke cirkels. Vul je blok 10 zelf (bv. met de Cover-module),
* dan rendert die placeholder niet en zou de achtergrond vlak worden. Deze
* laag brengt dezelfde decoratie terug, achter de hero.
* ------------------------------------------------------------------------ */
.cover-decor {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* de cirkels zijn standaard onzichtbaar tot een slider ze activeert */
.cover-decor .circle-wrapper {
opacity: 1 !important;
}
/* de hero zelf boven de decoratie houden */
.cover-wrapper > *:not(.cover-decor) {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------
* Opmaak gelijktrekken: gewone WYSIWYG-content vs. de eigen modules
*
* Een kale / die je in een standaard WYSIWYG-blok typt viel tot nu
* toe terug op de algemene kopregel in basics.css (donker,
* var(--color-primary-950)), terwijl regel 1 van een moduletitel zijn
* zachtere kleur krijgt via "h1 span { color: rgba(0,33,100,0.6) }" (ook
* basics.css) - de modules zetten hun titeltekst namelijk in een .
* Ook de broodtekst verschilde: .textblock-content P (content.css) is
* clamp(1rem -> 1.125rem), een kale (basics.css) blijft 1rem.
*
* Onderstaande regels geven kale koppen en alinea's in de leeskolom
* (#page-content, .page-content-more en het volle-breedte blok
* .page-content-full) dezelfde waarden als de modules. Bewust alleen
* elementen ZONDER class (:not([class])): alles wat al een eigen class
* draagt - moduletitels, c-primary-600-koppen uit de editor
* ("Kop 1 lichtblauw"), sectie-opmaak - blijft volledig ongemoeid.
* :where() houdt de specificiteit laag, zodat bestaande, specifiekere
* regels (bv. .accordion-content .textblock-lead p) blijven winnen.
* ------------------------------------------------------------------------ */
:where(#page-content, .page-content-more, .page-content-full) :is(h3, h4, h5, h6):not([class]) {
color: rgba(0, 33, 100, 0.6); /* zelfde kleur als moduletitel regel 1 */
}
/* Een kale
of is automatisch tweekleurig, net als de tweeregelige
* moduletitels: de eerste GETOONDE regel in de normale kopkleur, alles
* daarna in de lichtblauwe accentkleur. Je hoeft daar in de editor dus geen
* stijl voor te kiezen - typ de kop, breek af met Shift+Enter (of laat de
* browser hem zelf afbreken) en de tweede regel kleurt vanzelf mee. Past de
* kop op een regel, dan oogt hij gewoon als een normale kop.
*
* De h2 hoorde hier vanaf v2.9 bij, maar stond nog in de rij hierboven
* (h2 t/m h6 = een kleur). Die twee regels spreken elkaar tegen en zijn even
* specifiek, dus won de laatste - en dat was de eenkleurige. Daarom staat de
* h2 nu hier en niet meer daar.
*
* Alleen een h1/h2 ZONDER class: moduletitels (.textblock-title) regelen hun
* eigen twee kleuren al met .tw-title-line1/.tw-title-line2 en blijven
* daardoor volledig ongemoeid. Koppen die de stijl "Kop 1/2 tweekleurig"
* uit de editor dragen, hebben class="kop-duo" en krijgen hetzelfde beeld
* verderop in dit bestand.
*
* .cover-wrapper staat er sinds 2.9.2 bij. Dat is de kopband uit index.php,
* met daarin blok 10 - dus de hero. De kop daarvan is de grootste van
* de pagina en viel als enige buiten deze regels, omdat de opsomming
* hierboven alleen de leeskolom noemt; hij bleef daardoor eenkleurig terwijl
* dezelfde kop in een gewoon tekstblok wel tweekleurig werd. */
:where(#page-content, .page-content-more, .page-content-full, .cover-wrapper) :is(h1, h2):not([class]) {
color: var(--color-primary-600);
}
:where(#page-content, .page-content-more, .page-content-full, .cover-wrapper) :is(h1, h2):not([class])::first-line {
color: rgba(0, 33, 100, 0.6);
}
:where(#page-content, .page-content-more, .page-content-full) p:not([class]) {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem); /* zelfde als .textblock-content P */
line-height: 1.9;
}
/* De leadtekst van de modules (Intro Block e.d.) staat als kale tekst in de
* .textblock-lead-span, meestal zonder
eromheen - de bestaande regel
* ".textblock-lead p { line-height: 1.9 }" (content.css) doet dan niets en
* de tekst valt terug op de krappere standaard-regelafstand van de browser.
* Zelfde waarden als de WYSIWYG-alinea's hierboven, op de span zelf, zodat
* lead- en hoofdtekst dezelfde regelafstand hebben. Staat er wel een
in
* de lead, dan blijven de eigen p-regels (o.a. font-weight 600) gewoon
* gelden - de regelafstand is daar al 1.9. */
.textblock-lead {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
line-height: 1.9;
}
/* Tweekleurige kop voor de WYSIWYG-editor ("Kop 1 tweekleurig" in de
* Stijl-lijst, zie wb_config/editor.styles.js): regel 1 in de normale
* kopkleur, elke volgende regel in de lichtblauwe accentkleur - hetzelfde
* beeld als de tweeregelige moduletitels (regel 1 via de "h1 span"-regel in
* basics.css, regel 2 in c-primary-600). ::first-line pakt de eerste
* GETOONDE regel: een nieuwe regel maak je in de editor met Shift+Enter
* (of de kop breekt vanzelf af); past de kop op een regel, dan oogt hij
* gewoon als een normale kop. */
.kop-duo {
color: var(--color-primary-600);
}
.kop-duo::first-line {
color: rgba(0, 33, 100, 0.6); /* zelfde als moduletitel regel 1 */
}
/* ---------------------------------------------------------------------------
* Kopband zonder tekst (v2.5)
*
* De automatische paginatitel + omschrijving in de kopband zijn vervallen
* (zie index.php). Die tekst gaf de band vanzelf hoogte; nu is de sectie
* alleen nog zijn eigen padding hoog. .cover-wrapper trekt zichzelf 160px
* omhoog onder de vaste menubalk, terwijl .cover-placeholder in cover.css
* per breekpunt 160px/180px/110px padding-top heeft. Op smalle schermen
* (110px) zou de band die -160px dus niet meer volledig opvangen en zou de
* eerste content onder de menubalk schuiven. Deze ondergrens houdt de band
* altijd minstens even hoog als de verschuiving.
* ------------------------------------------------------------------------ */
.cover-placeholder {
min-height: 240px;
}
/* --- /templates/xso/css/skins/timewriter.css --- */
/**
* Huisstijl: TimeWriter
* ---------------------------------------------------------------------------
* Wordt na alle basis-CSS geladen. De basis-CSS (css/variables.css e.a.) heeft
* al de TimeWriter-waarden, dus dit bestand hoeft in principe niets te
* overschrijven. De variabelen staan hier toch expliciet, zodat beide
* huisstijlen op dezelfde plek te vinden en aan te passen zijn - pas je hier
* een kleur aan, dan verandert alleen TimeWriter mee.
*/
:root {
/* Primair kleurenpalet */
--color-primary-950: #133358;
--color-primary-900: #185490;
--color-primary-800: #1562B8;
--color-primary-700: #1175D9;
--color-primary-600: #1994F7; /* Primary */
--color-primary-500: #30B0FF;
--color-primary-400: #57CCFF;
--color-primary-300: #8DE0FF;
--color-primary-200: #BBEBFF;
--color-primary-100: #D9F3FF;
--color-primary-50: #EEFAFF;
--color-primary-950-rgb: 19, 51, 88;
--color-primary-900-rgb: 24, 84, 144;
--color-primary-800-rgb: 21, 98, 184;
--color-primary-700-rgb: 17, 117, 217;
--color-primary-600-rgb: 25, 148, 247; /* Primary */
--color-primary-500-rgb: 48, 176, 255;
--color-primary-400-rgb: 87, 204, 255;
--color-primary-300-rgb: 141, 224, 255;
--color-primary-200-rgb: 187, 235, 255;
--color-primary-100-rgb: 217, 243, 255;
--color-primary-50-rgb: 238, 250, 255;
/* Signaalkleuren */
--color-warning: #f7b731;
--color-warning-rgb: 247, 183, 49;
--color-alert: #e74c3c;
}
/* --- Logo in de navigatie ------------------------------------------------ */
.logo {
width: 240px;
background-size: contain;
background-position: 50% 50%;
background-image: url('https://www.timewriter.nl/templates/xso/images/logo-timewriter.svg');
}
/* --- /modules/faqblock/frontend.css --- */
/* FAQ Block - frontend styling
* Scoped under .wb-faq so nothing leaks into the rest of the site.
* Self-contained: no framework or icon font required.
* Uses native /, so the accordions work without any JS.
*/
.wb-faq {
--wb-faq-blue: var(--color-primary-600, #2f86eb);
--wb-faq-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
--wb-faq-blue-dark: var(--color-primary-700, #1f6fd0);
--wb-faq-navy: var(--color-primary-950, #0f2a4a);
--wb-faq-ink: #46586f;
padding: clamp(2rem, 5vw, 5rem) 0;
}
.wb-faq-inner {
/* Breedte, centrering en linker/rechterkantlijn komen van de template's
* eigen .grid-container-class (zie view.php) - dat garandeert exacte
* uitlijning met de rest van de pagina, op elk breakpoint, ook als de
* template die waarden ooit wijzigt. Hier alleen de eigen tweekoloms-
* layout van dit blok. */
display: flex;
align-items: flex-start;
gap: clamp(1.5rem, 5vw, 4rem);
}
/* ---- Left column ------------------------------------------------------- */
.wb-faq-head {
flex: 1 1 40%;
min-width: 0;
/* .wb-faq-inner (via de template's eigen .grid-container-class) levert al
* de gewone rand-tot-tekst-kantlijn - maar overal elders in de template
* krijgt tekst in een sectie daarbovenop nog de "ademruimte" van
* .section-content (35px / 15px). Zonder dat zou deze titel wat te dicht
* tegen de kantlijn staan vergeleken met een sectiekop of kaarttekst
* elders op de pagina. Dezelfde vaste waarden hier herhaald (niet de
* class zelf hergebruikt, want section-content zet ook verticale padding
* die dit blok al op zijn eigen manier regelt). */
padding-left: 35px;
}
@media (max-width: 1023px) {
.wb-faq-head {
padding-left: 15px;
}
}
.wb-faq-intro {
display: inline-block;
color: var(--wb-faq-blue);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1rem;
}
/* Geen eigen titelopmaak meer (v1.0.9). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .wb-faq-title/-line1/-line2 gaven dit blok een eigen
* lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
* meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */
.wb-faq-lead {
color: var(--wb-faq-ink);
font-size: clamp(1rem, 1.3vw, 1.12rem);
line-height: 1.7;
max-width: 34em;
margin: 0 0 1.8rem;
}
/* ---- Left column button ------------------------------------------------ */
.wb-faq-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.wb-faq-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
line-height: 1;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.wb-faq-btn .wb-faq-arrow { transition: transform 0.2s ease; }
.wb-faq-btn:hover .wb-faq-arrow { transform: translateX(3px); }
.wb-faq-btn--primary {
background: var(--wb-faq-blue);
color: #fff;
box-shadow: 0 8px 20px rgba(47, 134, 235, 0.32);
}
.wb-faq-btn--primary:hover {
background: var(--wb-faq-blue-dark);
transform: translateY(-1px);
color: #fff;
}
/* ---- Right column: FAQ list ------------------------------------------- */
.wb-faq-list {
flex: 1 1 60%;
min-width: 0;
}
.wb-faq-item {
border-bottom: 1px solid rgba(15, 42, 74, 0.12);
background: transparent;
}
.wb-faq-item:first-child {
border-top: 1px solid rgba(15, 42, 74, 0.12);
}
.wb-faq-q {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 1.15em 0.25em;
color: var(--wb-faq-navy);
font-weight: 700;
font-size: clamp(1rem, 1.3vw, 1.12rem);
line-height: 1.35;
-webkit-user-select: none;
user-select: none;
list-style: none;
transition: color 0.2s ease;
}
.wb-faq-q::-webkit-details-marker { display: none; }
.wb-faq-q::marker { content: ''; }
.wb-faq-q:hover { color: var(--wb-faq-blue); }
.wb-faq-q:focus-visible {
outline: 2px solid var(--wb-faq-blue);
outline-offset: 2px;
}
.wb-faq-q-text { flex: 1 1 auto; }
/* Round +/- indicator built with CSS (::after rotates when [open]) */
.wb-faq-icon {
position: relative;
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid var(--wb-faq-blue);
transition: background 0.2s ease;
}
.wb-faq-icon::before,
.wb-faq-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--wb-faq-blue);
transform: translate(-50%, -50%);
transition: transform 0.25s ease, opacity 0.2s ease;
}
.wb-faq-icon::before {
width: 12px;
height: 2px;
}
.wb-faq-icon::after {
width: 2px;
height: 12px;
}
/* Open state: minus (hide the vertical bar) + filled icon */
.wb-faq-item[open] > .wb-faq-q .wb-faq-icon {
background: var(--wb-faq-blue);
}
.wb-faq-item[open] > .wb-faq-q .wb-faq-icon::before {
background: #fff;
}
.wb-faq-item[open] > .wb-faq-q .wb-faq-icon::after {
transform: translate(-50%, -50%) scaleY(0);
opacity: 0;
}
.wb-faq-a {
color: var(--wb-faq-ink);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.7;
padding: 0 2.6em 1.4em 0.25em;
}
.wb-faq-a p:first-child { margin-top: 0; }
.wb-faq-a p:last-child { margin-bottom: 0; }
.wb-faq-a img { max-width: 100%; height: auto; }
.wb-faq-a a { color: var(--wb-faq-blue); }
/* ---- Reveal-on-scroll -------------------------------------------------- */
.wb-faq-head,
.wb-faq-list {
opacity: 0;
transform: translateY(24px);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
.wb-faq-list { transition-delay: 120ms; }
.wb-faq.is-visible .wb-faq-head,
.wb-faq.is-visible .wb-faq-list {
opacity: 1;
transform: translateY(0);
}
/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
.wb-faq-head,
.wb-faq-list {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ---- Responsive: stack under 900px ------------------------------------ */
@media (max-width: 900px) {
.wb-faq-inner {
flex-direction: column;
gap: 2rem;
}
.wb-faq-head,
.wb-faq-list {
flex-basis: auto;
width: 100%;
}
}
/* Containerbreedte, centrering en linker/rechterkantlijn komen nu van de
* template's eigen .grid-container-class op hetzelfde element (zie view.php:
* class="wb-faq-inner grid-container") - dat garandeert exacte uitlijning
* met de rest van de pagina op elk breakpoint, ook als de template die
* waarden ooit aanpast. Een eerdere versie dupliceerde die breakpoints hier
* zelf; dat raakte in de praktijk uit sync met de echte .grid-container (de
* bron van het "drie stukken tekst lijnen niet uit"-probleem). Wordt dit
* blok ooit buiten dit template gebruikt, dan ontbreekt .grid-container's
* CSS en valt de breedte terug op 100% - voeg dan zelf een .grid-container
* regel toe in de omgeving waar dit blok draait, in plaats van hier weer een
* eigen kopie te onderhouden. */
/* --- /modules/featurecardsblock/frontend.css --- */
/* Feature Cards Block - frontend
*
* Intentionally (almost) empty.
*
* This module deliberately outputs the website template's OWN markup and
* classes (section-wrapper, section-boxed, grid-container, grid-x,
* section-listing, section-image-usp, bg-primary-800, border-primary-900,
* radius-top-large, data-equalizer, ...). All styling therefore comes from the
* template's stylesheets - the module must not ship a competing design system
* of its own, otherwise the blocks would stop matching the rest of the site.
*
* Only add rules here if the template itself is missing something.
*/
/* ---------------------------------------------------------------------------
* A full-width card (view.php: the "full" card variant) wraps its content in
* its own for the icon/content/image layout -
* but that card already sits inside ONE level of the section's own
* .grid-container/.cell (via .with-section-grid). That inner grid-container
* would apply the template's centering/padding a SECOND time, shifting the
* card's text out of line with the section heading above it and with every
* other left-aligned text on the page. Background and border of the card
* (.section-boxed) are meant to bleed edge to edge - only the text inside
* needs correcting. These rules neutralize that second level and give the
* card the same kantlijn .section-content uses elsewhere on the site (35px
* from 1024px, and .section-content's own with-section-grid rules below
* 1024px - unchanged, those already used the right value).
* ------------------------------------------------------------------------ */
.with-section-grid .section-boxed > .grid-container {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* Geen aparte regel meer voor de .grid-x/.cell daarbinnen (die zette eerder
* ook hun marge en breedte op nul). Dat bleek onnodig: Foundation's eigen
* .grid-margin-x/.cell-marges (de negatieve marge op .grid-x en de
* bijpassende positieve marge op .cell) vallen sowieso al tegen elkaar weg,
* dus zonder die extra regel komt de kaarttekst al even ver uit als met -
* en deze module heeft toch altijd maar één cel per rij, dus dat toont hier
* nooit een verschil. (In de template's eigen sections.css bleek die extra
* regel bij een ANDERE module, met wél twee cellen naast elkaar in dezelfde
* positie, zelfs actief schadelijk - vandaar dat hij hier ook weg is, voor
* het geval deze kaart ooit een meerkoloms variant krijgt.) */
@media (min-width: 1024px) {
.with-section-grid .section-boxed {
padding-left: 35px;
padding-right: 35px;
}
}
/* Geen eigen titelopmaak meer (v1.0.9). De sectietitel is een kale
en
* wordt volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .fcb-title-line1/-line2 en de eigen accentkleur op
* regel 2 (c-primary-600) gaven dit blok een eigen kleurenpaar, en dat is
* precies het verschil dat we niet meer willen. Wil je de kopopmaak wijzigen,
* doe dat in het template. De per-kaart titel (item_title) blijft ongemoeid:
* dat is een kaartlabel, geen sectiekop. */
/* --- /modules/connectionsblock/frontend.css --- */
/* Connections Block - frontend
*
* Intentionally (almost) empty.
*
* This module deliberately outputs the website template's OWN markup and
* classes (section-wrapper section-connections, grid-container, section-heading,
* section-intro, section-title, brands-circle-wrapper, brands-circle-item,
* brands-circle-box rellax, ...). All styling - including the position of every
* logo on the concentric circles - therefore comes from the template's own
* stylesheets; the module must not ship a competing design system of its own,
* otherwise the block would stop matching the rest of the site.
*
* The parallax movement relies on the template's Rellax JS, which the TimeWriter
* template already loads. No JavaScript is shipped with this module either.
*
* Only add rules here if the template itself is missing something.
*/
/* Geen eigen titelopmaak meer (v1.0.4). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .cnb-title-line2-regel gaf dit blok een eigen
* opmaak voor de tweede titelregel, en dat is precies het verschil dat we
* niet meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */
/* --- /modules/textimageblock/frontend.css --- */
/* Text + Image Block - frontend
*
* INTENTIONALLY (almost) EMPTY.
*
* This module outputs the markup and CSS classes of the TimeWriter template
* itself (section-wrapper, section-boxed, grid-container, grid-x, cell,
* section-content, section-intro, section-title, section-lead, section-footer,
* button, radius-medium, bg-primary-*, border-primary-*, c-primary-* ...).
* All styling therefore comes from the template stylesheets, which guarantees
* a pixel-perfect match with the original design.
*
* Do not add a module-specific design system here - if something needs
* restyling, do it in the template CSS or via the "extra CSS class" field.
*/
/* Tiny defensive helper only: keep the image from overflowing its cell in
contexts where the template's own image rules are not loaded. */
.section-wrapper .section-content + .cell img,
.section-wrapper figure img {
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------------------------------
* The "boxed" variant (settings.boxed = 1) renders as the outermost element, with no .grid-container
* around it. .section-boxed has its own width/centering math (see the
* template's css/sections.css) that is NOT tied to the same breakpoints as
* the template's real .grid-container - so on some widths its text ended up
* a little left or right of where the same text sits in every other section
* on the page.
*
* view.php now wraps a boxed section in the template's own .grid-container
* class (plus this module's own "tw-boxed-wrap" marker, so this rule can't
* accidentally affect any other use of .section-boxed on the site). Once
* .section-boxed sits inside a real .grid-container, the template's existing
* ".grid-container .section-boxed { max-width: 100% }" rule (sections.css)
* takes over and makes section-boxed simply fill that correctly-tiered
* container - so all that's left to add here is the same 35px/15px
* "ademruimte" every other section heading gets. The card's own border and
* background still follow section-boxed's own width, not the kantlijn - only
* the text moves.
* ------------------------------------------------------------------------ */
.tw-boxed-wrap.grid-container > .section-boxed {
padding-left: 35px;
padding-right: 35px;
}
@media (max-width: 1023px) {
.tw-boxed-wrap.grid-container > .section-boxed {
padding-left: 15px;
padding-right: 15px;
}
}
/* v1.0.10: de afbeelding zit in een (WebP-srcset, zie
* view.php/functions.php). display:contents laat die wrapper geen eigen box
* maken, zodat de ![]()
met class radius-medium in het template exact dezelfde
* positie houdt als toen hij nog los in figure > .is-relative stond. */
section[id^="textimageblock-"] figure > .is-relative > picture { display: contents; }
/* --- /modules/accordionblocks/frontend.css --- */
/* Accordion module - frontend styling
* Scoped under .wb-accordion so it never leaks into the rest of the site.
* Uses native /, so it works without any JavaScript.
*/
.wb-accordion {
margin: 1em 0;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
}
.wb-accordion-item {
border-bottom: 1px solid #ddd;
background: #fff;
}
.wb-accordion-item:last-child {
border-bottom: none;
}
.wb-accordion-title {
cursor: pointer;
padding: 0.9em 1.2em;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
background: #f7f7f7;
transition: background 0.2s ease;
-webkit-user-select: none;
user-select: none;
list-style: none;
}
.wb-accordion-title::-webkit-details-marker {
display: none;
}
.wb-accordion-title::marker {
content: '';
}
.wb-accordion-title::after {
content: '+';
font-size: 1.3em;
line-height: 1;
flex: 0 0 auto;
transition: transform 0.2s ease;
}
.wb-accordion-item[open] > .wb-accordion-title::after {
transform: rotate(45deg);
}
.wb-accordion-item:hover > .wb-accordion-title {
background: #eee;
}
.wb-accordion-title:focus-visible {
outline: 2px solid #3085d6;
outline-offset: -2px;
}
.wb-accordion-content {
padding: 0 1.2em 1.2em;
line-height: 1.6;
}
.wb-accordion-content p:first-child {
margin-top: 0;
}
.wb-accordion-content p:last-child {
margin-bottom: 0;
}
.wb-accordion-content img {
max-width: 100%;
height: auto;
}
/* The icon span is only used by the "pills" style below; keep it invisible
and out of the flow for the default style so nothing changes visually
for accordions that don't opt in. */
.wb-accordion-icon {
display: none;
}
/* ==========================================================================
Optional alternate style: rounded "pills" with a blue circular +/- icon
on the left of the title (open item gets a blue border).
Enable it per accordion by adding "wb-accordion--pills" in the
"Additional CSS class" field of the accordion settings - it does not
affect accordions that don't use that class.
========================================================================== */
.wb-accordion.wb-accordion--pills {
border: 0;
border-radius: 0;
overflow: visible;
display: flex;
flex-direction: column;
gap: 14px;
}
.wb-accordion--pills .wb-accordion-item {
border: 1.5px solid transparent;
border-radius: 22px;
background: #fff;
box-shadow: 0 1px 4px rgba(15, 42, 74, 0.08);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wb-accordion--pills .wb-accordion-item:last-child {
border-bottom: 1.5px solid transparent;
}
.wb-accordion--pills .wb-accordion-item[open] {
border-color: #2f86eb;
box-shadow: 0 4px 14px rgba(47, 134, 235, 0.15);
}
.wb-accordion--pills .wb-accordion-item:hover > .wb-accordion-title {
background: transparent;
}
.wb-accordion--pills .wb-accordion-title {
background: transparent;
padding: 18px 22px;
gap: 14px;
justify-content: flex-start;
color: #0f2a4a;
font-weight: 700;
font-size: 1.05em;
}
.wb-accordion--pills .wb-accordion-title::after {
content: none;
}
.wb-accordion--pills .wb-accordion-icon {
display: inline-block;
position: relative;
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid #2f86eb;
}
.wb-accordion--pills .wb-accordion-icon::before,
.wb-accordion--pills .wb-accordion-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #2f86eb;
transform: translate(-50%, -50%);
}
.wb-accordion--pills .wb-accordion-icon::before {
width: 12px;
height: 2px;
}
.wb-accordion--pills .wb-accordion-icon::after {
width: 2px;
height: 12px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.wb-accordion--pills .wb-accordion-item[open] .wb-accordion-icon::after {
transform: translate(-50%, -50%) scaleY(0);
opacity: 0;
}
.wb-accordion--pills .wb-accordion-content {
padding: 0 22px 22px 62px;
color: #3d4b5c;
}
/* --- /modules/pricingblock/frontend.css --- */
/* Pricing Block - frontend styling
* Scoped under .wb-pricing so nothing leaks into the rest of the site.
* Self-contained: no framework or icon font required.
*/
.wb-pricing {
--wb-pricing-blue: var(--color-primary-600, #2f86eb);
--wb-pricing-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
--wb-pricing-blue-dark: var(--color-primary-700, #1f6fd0);
--wb-pricing-navy: var(--color-primary-950, #0f2a4a);
--wb-pricing-ink: #46586f;
--wb-pricing-star: var(--color-warning, #f5a524);
position: relative;
padding: clamp(2rem, 5vw, 5rem) 0;
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wb-pricing.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Breedte, centrering en kantlijn komen van de template's eigen .grid-
* container-class op hetzelfde element (zie view.php: class="wb-pricing-
* inner grid-container") - dat garandeert exacte uitlijning met de rest van
* de pagina op elk breakpoint, ook als de template die waarden ooit
* aanpast. */
/* ---- Heading ------------------------------------------------------------ */
.wb-pricing-head {
/* Links uitgelijnd (geen auto-marge) - volgt dezelfde kantlijnconventie
* die .wb-usp-head en de andere sectiekoppen in dit template al
* gebruiken, zodat deze kop even ver inspringt als andere linksuit-
* gelijnde secties op dezelfde pagina. Een eerdere versie centreerde
* deze kop bewust; die keuze is inmiddels vervangen door de vastere
* sitebrede kantlijnregel hierboven. */
max-width: 44rem;
margin: 0 0 2.2rem;
}
@media (max-width: 1023px) {
.wb-pricing-head {
padding-left: 15px;
}
}
/* Geen eigen titelopmaak meer (v1.0.6). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .wb-pricing-title/-line1/-line2 gaven dit blok een
* eigen lettergrootte en kleurenpaar, en dat is precies het verschil dat we
* niet meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */
.wb-pricing-eyebrow {
color: var(--wb-pricing-blue);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 0.6rem;
}
.wb-pricing-lead {
color: var(--wb-pricing-ink);
font-size: clamp(1rem, 1.3vw, 1.12rem);
line-height: 1.65;
margin: 0;
}
/* ---- Month / year switch ------------------------------------------------ */
.wb-pricing-switch {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0 auto 2.6rem;
}
.wb-pricing-switch-label {
color: var(--wb-pricing-ink);
font-size: 0.95rem;
font-weight: 600;
transition: color 0.2s ease;
-webkit-user-select: none;
user-select: none;
}
.wb-pricing-switch-label.is-active {
color: var(--wb-pricing-navy);
}
.wb-pricing-switch-track {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
flex: 0 0 auto;
cursor: pointer;
}
.wb-pricing-toggle {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.wb-pricing-switch-knob {
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(15, 42, 74, 0.18);
transition: background 0.2s ease;
}
.wb-pricing-switch-knob::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(15, 42, 74, 0.25);
transition: transform 0.2s ease;
}
.wb-pricing-toggle:checked + .wb-pricing-switch-knob {
background: var(--wb-pricing-blue);
}
.wb-pricing-toggle:checked + .wb-pricing-switch-knob::before {
transform: translateX(24px);
}
.wb-pricing-toggle:focus-visible + .wb-pricing-switch-knob {
outline: 2px solid var(--wb-pricing-blue);
outline-offset: 2px;
}
/* ---- Card grid ---------------------------------------------------------- */
.wb-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 1.8rem);
align-items: stretch;
}
.wb-pricing-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(15, 42, 74, 0.10);
border-radius: 18px;
padding: 28px;
box-shadow: 0 6px 20px rgba(15, 42, 74, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wb-pricing-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(15, 42, 74, 0.12);
}
/* Highlighted card - stronger border + shadow + ribbon */
.wb-pricing-card--highlight {
border: 2px solid var(--wb-pricing-blue);
box-shadow: 0 18px 40px rgba(47, 134, 235, 0.22);
}
.wb-pricing-ribbon {
position: absolute;
top: 16px;
right: -6px;
background: var(--wb-pricing-blue);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px 0 0 999px;
box-shadow: 0 4px 10px rgba(47, 134, 235, 0.35);
}
.wb-pricing-plan {
color: var(--wb-pricing-navy);
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.9rem;
}
/* ---- Price -------------------------------------------------------------- */
.wb-pricing-pricewrap {
margin-bottom: 1.4rem;
}
.wb-pricing-price {
display: block;
color: var(--wb-pricing-navy);
font-size: clamp(2rem, 3.4vw, 2.6rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.01em;
}
.wb-pricing-price-info {
display: block;
color: var(--wb-pricing-ink);
font-size: 0.85rem;
margin-top: 0.35rem;
}
/* ---- Feature list ------------------------------------------------------- */
.wb-pricing-features {
list-style: none;
margin: 0 0 1.6rem;
padding: 0;
flex: 1 1 auto;
}
.wb-pricing-features li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
color: var(--wb-pricing-ink);
font-size: 0.96rem;
line-height: 1.45;
border-bottom: 1px solid rgba(15, 42, 74, 0.06);
}
.wb-pricing-features li:last-child {
border-bottom: none;
}
.wb-pricing-check {
flex: 0 0 auto;
color: var(--wb-pricing-blue);
margin-top: 1px;
}
/* ---- Button ------------------------------------------------------------- */
.wb-pricing-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 14px 24px;
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
line-height: 1;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
cursor: pointer;
margin-top: auto;
}
.wb-pricing-btn--primary {
background: var(--wb-pricing-blue);
color: #fff;
box-shadow: 0 8px 20px rgba(47, 134, 235, 0.32);
}
.wb-pricing-btn--primary:hover {
background: var(--wb-pricing-blue-dark);
transform: translateY(-1px);
color: #fff;
}
.wb-pricing-btn--hollow {
background: transparent;
color: var(--wb-pricing-navy);
border: 1.5px solid rgba(15, 42, 74, 0.22);
}
.wb-pricing-btn--hollow:hover {
border-color: var(--wb-pricing-blue);
color: var(--wb-pricing-blue);
transform: translateY(-1px);
}
/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.wb-pricing {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.wb-pricing-card,
.wb-pricing-btn {
transition: none !important;
}
}
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
.wb-pricing-grid {
grid-template-columns: 1fr;
max-width: 26rem;
margin: 0 auto;
}
}
/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
* container-class op hetzelfde element (view.php: class="wb-pricing-inner
* grid-container") - zie de toelichting daar. Wordt dit blok ooit buiten dit
* template gebruikt, dan ontbreekt .grid-container's CSS en valt de breedte
* terug op 100%; voeg dan zelf een .grid-container-regel toe in de omgeving
* waar dit blok draait, in plaats van hier weer een eigen kopie bij te
* houden. */
/* --- /modules/uspblock/frontend.css --- */
/* USP Block - frontend styling
* Scoped under .wb-usp so nothing leaks into the rest of the site.
* Self-contained: no framework or icon font required.
*/
.wb-usp {
--wb-usp-blue: var(--color-primary-600, #2f86eb);
--wb-usp-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
--wb-usp-navy: var(--color-primary-950, #0f2a4a);
--wb-usp-ink: #46586f;
--wb-usp-border: rgba(15, 42, 74, 0.08);
padding: clamp(2rem, 5vw, 5rem) 0;
}
/* Breedte, centrering en kantlijn komen van de template's eigen .grid-
* container-class op hetzelfde element (zie view.php: class="wb-usp-inner
* grid-container") - dat garandeert exacte uitlijning met de rest van de
* pagina op elk breakpoint, ook als de template die waarden ooit aanpast. */
/* ---- Section heading --------------------------------------------------- */
.wb-usp-head {
max-width: 46rem;
margin: 0 0 clamp(1.6rem, 4vw, 3rem);
/* Links uitgelijnd (geen auto-marge) - dezelfde 35px "ademruimte" die
* .section-content elders op de site ook geeft aan een sectiekop, zodat
* deze titel exact even ver inspringt als andere linksuitgelijnde
* secties op dezelfde pagina. */
padding-left: 35px;
}
@media (max-width: 1023px) {
.wb-usp-head {
padding-left: 15px;
}
}
.wb-usp-intro {
color: var(--wb-usp-blue);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 0.6rem;
}
/* Geen eigen titelopmaak meer (v1.0.8). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .wb-usp-title/-line1/-line2 gaven dit blok een eigen
* lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
* meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */
.wb-usp-lead {
color: var(--wb-usp-ink);
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.7;
max-width: 34em;
}
.wb-usp-lead p { margin: 0 0 0.6em; }
.wb-usp-lead p:last-child { margin-bottom: 0; }
/* ---- Card grid --------------------------------------------------------- */
.wb-usp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.4vw, 1.75rem);
}
.wb-usp--cols-2 .wb-usp-grid { grid-template-columns: repeat(2, 1fr); }
.wb-usp--cols-3 .wb-usp-grid { grid-template-columns: repeat(3, 1fr); }
.wb-usp--cols-4 .wb-usp-grid { grid-template-columns: repeat(4, 1fr); }
/* ---- Cards ------------------------------------------------------------- */
.wb-usp-card {
background: #fff;
border: 1px solid var(--wb-usp-border);
border-radius: 18px;
padding: clamp(1.4rem, 2.4vw, 1.75rem);
box-shadow: 0 10px 30px rgba(15, 42, 74, 0.06);
/* reveal-on-scroll start state */
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
/* Stagger the cards slightly as the block reveals */
.wb-usp-card:nth-child(2) { transition-delay: 80ms; }
.wb-usp-card:nth-child(3) { transition-delay: 160ms; }
.wb-usp-card:nth-child(4) { transition-delay: 240ms; }
.wb-usp-card:nth-child(5) { transition-delay: 320ms; }
.wb-usp-card:nth-child(6) { transition-delay: 400ms; }
.wb-usp.is-visible .wb-usp-card {
opacity: 1;
transform: translateY(0);
}
.wb-usp-card-icon {
margin-bottom: 1.1rem;
}
.wb-usp-card-icon img {
display: block;
width: 56px;
height: 56px;
object-fit: contain;
}
.wb-usp-card-title {
color: var(--wb-usp-navy);
font-weight: 700;
font-size: 1.15rem;
line-height: 1.3;
margin: 0 0 0.5rem;
}
.wb-usp-card-text {
color: var(--wb-usp-ink);
font-size: 0.98rem;
line-height: 1.65;
}
.wb-usp-card-text p { margin: 0 0 0.5em; }
.wb-usp-card-text p:last-child { margin-bottom: 0; }
/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
.wb-usp-card {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
.wb-usp--cols-3 .wb-usp-grid,
.wb-usp--cols-4 .wb-usp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.wb-usp-grid,
.wb-usp--cols-2 .wb-usp-grid,
.wb-usp--cols-3 .wb-usp-grid,
.wb-usp--cols-4 .wb-usp-grid { grid-template-columns: 1fr; }
}
/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
* container-class op hetzelfde element (view.php: class="wb-usp-inner
* grid-container") - zie de toelichting bovenaan dit bestand. Wordt dit blok
* ooit buiten dit template gebruikt, dan ontbreekt .grid-container's CSS en
* valt de breedte terug op 100%; voeg dan zelf een .grid-container-regel toe
* in de omgeving waar dit blok draait, in plaats van hier weer een eigen
* kopie bij te houden. */
/* --- /modules/ctabannerblock/frontend.css --- */
/* CTA Banner Block - frontend styling
*
* Intentionally (almost) empty: this module outputs the template's own markup
* and classes (section-wrapper, section-cta, gradient-secondary,
* bg-section-image, section-shade, grid-container, section-heading,
* section-intro, section-title, section-lead, section-footer, button ...).
* All styling therefore comes from the TimeWriter template stylesheet, so the
* block always matches the rest of the site. Add project-specific tweaks below
* only if really needed.
*/
/* Geen eigen titelopmaak meer (v1.0.6). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop, inclusief het omgekeerde
* kleurenpaar op een donkere sectieband). Zo ziet een kop uit dit blok er
* exact hetzelfde uit als een kop uit elke andere module of uit de editor -
* de eerdere .ctb-title-line1/-line2 en de eigen lichte tekstkleur op de
* kop (c-primary-100 / c-primary-400) gaven dit blok een eigen kleurenpaar,
* en dat is precies het verschil dat we niet meer willen. Wil je de
* kopopmaak wijzigen, doe dat in het template. */
/* --- /modules/testimonialblock/frontend.css --- */
/* Testimonials Block - frontend styling
* Scoped under .wb-testi so nothing leaks into the rest of the site.
* Self-contained: no framework or icon font required.
*/
.wb-testi {
--wb-testi-blue: var(--color-primary-600, #2f86eb);
--wb-testi-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
--wb-testi-navy: var(--color-primary-950, #0f2a4a);
--wb-testi-ink: #46586f;
--wb-testi-star: var(--color-warning, #f5a524);
--wb-testi-cols: 3;
padding: clamp(2rem, 5vw, 5rem) 0;
}
/* wb-testi-inner: de ENE gedeelde grid-container voor zowel de kop als de
* kaartengrid eronder (zie view.php: class="wb-testi-inner grid-container").
* Beide zitten in dezelfde instantie van deze class, zodat ze per definitie
* dezelfde linkerrand delen op elke breedte - een los "padding-left: 35px"
* op een niet-gecontainerde .wb-testi-head (zoals een vorige versie deed)
* lag toevallig op sommige breedtes goed, maar liep op andere uiteen omdat
* .grid-container zichzelf met "margin:auto" centreert i.p.v. tegen de
* viewportrand te blijven plakken. */
.wb-testi-inner {
/* Breedte, centrering en basisgutter komen van de template's eigen
* .grid-container-class op hetzelfde element - dat garandeert exacte
* uitlijning met de rest van de pagina op elk breakpoint, ook als de
* template die waarden ooit aanpast. */
}
.wb-testi-head {
max-width: 720px;
margin: 0 0 clamp(1.8rem, 4vw, 3rem);
/* Links uitgelijnd, niet gecentreerd: dezelfde kantlijn-conventie die de
* rest van het template hanteert voor sectiekoppen (zie uspblock's
* .wb-usp-head, dat op dezelfde manier binnen zijn eigen
* .wb-usp-inner.grid-container zit) - een sectiekop volgt altijd de
* linker kantlijn van de pagina in plaats van in het midden te zweven.
* text-align hier expliciet op left gezet (niet enkel de oude
* text-align:center weggehaald) zodat dit nooit per ongeluk een
* center-regel van hogerop kan overerven.
*
* padding-left telt op BOVEN de gutter die .grid-container (op de
* .wb-testi-inner-ouder) al geeft - samen exact dezelfde extra
* inspringing als .section-content elders op de site aan een sectiekop
* geeft. Geen padding-right: de kop hoeft alleen aan de linkerkant met
* de kantlijn mee te lopen. */
text-align: left;
padding-left: 35px;
}
@media (max-width: 1023px) {
.wb-testi-head {
padding-left: 15px;
}
}
.wb-testi-intro {
color: var(--wb-testi-blue);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 0.7rem;
}
/* Geen eigen titelopmaak meer (v1.0.9). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .wb-testi-title/-line1/-line2 gaven dit blok een eigen
* lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
* meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */
.wb-testi-lead {
color: var(--wb-testi-ink);
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.7;
margin: 0;
}
.wb-testi-lead p { margin: 0 0 0.6em; }
.wb-testi-lead p:last-child { margin-bottom: 0; }
/* ---- Rij met kaarten (v1.1.0) ------------------------------------------
* Altijd EEN rij. Het ingestelde aantal kolommen bepaalt nu hoeveel kaarten
* er naast elkaar passen; zijn er meer beoordelingen, dan komen die niet
* op een tweede rij maar staan ze rechts buiten beeld en scrol je er
* horizontaal naartoe.
*
* grid-auto-flow:column zet elke kaart in een nieuwe kolom van dezelfde
* breedte, en die breedte is precies "containerbreedte gedeeld door het
* aantal zichtbare kaarten" - inclusief de tussenruimte, zodat de laatste
* zichtbare kaart exact op de rechterkantlijn eindigt en een volgende kaart
* er net buiten valt.
*
* Breedte, centrering en kantlijn komen van de gedeelde .wb-testi-inner
* hierboven (zie diens toelichting) - dit element draagt zelf niet de
* .grid-container-class. */
.wb-testi-grid {
--wb-testi-gap: clamp(1rem, 2.4vw, 1.75rem);
--wb-testi-visible: var(--wb-testi-cols, 3);
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(
(100% - (var(--wb-testi-visible) - 1) * var(--wb-testi-gap))
/ var(--wb-testi-visible)
);
gap: var(--wb-testi-gap);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
/* Ruimte binnen de scroller voor de slagschaduw van de kaarten (die zou
* anders door overflow worden afgeknipt) en voor de scrollbalk eronder.
* De negatieve margin haalt de extra hoogte er visueel weer af, zodat de
* afstand tot het volgende blok gelijk blijft aan voorheen. */
padding: 10px 0 34px;
margin-bottom: -20px;
scrollbar-width: thin;
scrollbar-color: rgba(15, 42, 74, 0.28) rgba(15, 42, 74, 0.06);
}
.wb-testi-grid > .wb-testi-card {
scroll-snap-align: start;
}
/* Zichtbare, slanke scrollbalk: bij een rij die doorloopt is dat de enige
* aanwijzing dat er meer kaarten zijn, dus die verstoppen we niet. */
.wb-testi-grid::-webkit-scrollbar { height: 8px; }
.wb-testi-grid::-webkit-scrollbar-track { background: rgba(15, 42, 74, 0.06); border-radius: 999px; }
.wb-testi-grid::-webkit-scrollbar-thumb { background: rgba(15, 42, 74, 0.28); border-radius: 999px; }
.wb-testi-grid::-webkit-scrollbar-thumb:hover { background: rgba(15, 42, 74, 0.45); }
/* De scroller is toetsenbordbereikbaar (view.php zet tabindex="0" zodra er
* meer dan een kaart is), dus moet de focus ook zichtbaar zijn. */
.wb-testi-grid:focus-visible {
outline: 2px solid var(--wb-testi-accent);
outline-offset: 4px;
}
/* ---- Slepen met de muis (v1.1.1) ---------------------------------------
* .is-scrollable staat erop zodra er meer kaarten zijn dan er passen (door
* het scriptje in view.php gezet, ook bij het wijzigen van de venstermaat);
* .is-dragging staat erop zolang de bezoeker de rij vasthoudt.
*
* Tijdens het slepen moeten drie dingen uit, anders werkt het niet of
* schokkerig: tekstselectie (anders selecteer je de citaten in plaats van te
* schuiven), scroll-snap (dat zou de rij tijdens het slepen terugtrekken) en
* het gladde scrollen (dat animeert elke tussenstap van de sleepbeweging). */
.wb-testi-grid.is-scrollable { cursor: grab; }
.wb-testi-grid.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
scroll-snap-type: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* De kaarten zelf mogen tijdens het slepen ook niets selecteren of als
* afbeelding/tekst weggesleept worden. */
.wb-testi-grid.is-dragging * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wb-testi-grid.is-scrollable img { -webkit-user-drag: none; user-drag: none; }
/* Tablet: hooguit 2 kaarten naast elkaar. Mobiel: 1 kaart, met een randje van
* de volgende in beeld - dat laat meteen zien dat er verder gescrold kan
* worden. */
@media (max-width: 900px) {
.wb-testi-grid { --wb-testi-visible: 2; }
}
@media (max-width: 600px) {
.wb-testi-grid {
--wb-testi-visible: 1;
grid-auto-columns: 86%;
}
}
/* ---- Card -------------------------------------------------------------- */
.wb-testi-card {
margin: 0;
background: #eef4ff;
border: 1px solid rgba(15, 42, 74, 0.08);
border-radius: 16px;
padding: 26px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 6px 18px rgba(15, 42, 74, 0.06);
/* reveal-on-scroll start state */
opacity: 0;
transform: translateY(24px);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.2s ease;
}
/* Stagger the cards slightly as the block reveals */
.wb-testi-card:nth-child(2) { transition-delay: 80ms; }
.wb-testi-card:nth-child(3) { transition-delay: 160ms; }
.wb-testi-card:nth-child(4) { transition-delay: 240ms; }
.wb-testi-card:nth-child(5) { transition-delay: 320ms; }
.wb-testi-card:nth-child(6) { transition-delay: 400ms; }
.wb-testi.is-visible .wb-testi-card {
opacity: 1;
transform: translateY(0);
}
.wb-testi-card:hover {
box-shadow: 0 14px 32px rgba(15, 42, 74, 0.12);
}
/* ---- Stars ------------------------------------------------------------- */
.wb-testi-stars {
display: inline-flex;
gap: 2px;
color: var(--wb-testi-star);
}
/* ---- Quote ------------------------------------------------------------- */
.wb-testi-quote {
margin: 0;
color: var(--wb-testi-ink);
font-size: 1.02rem;
line-height: 1.7;
flex: 1 1 auto;
}
.wb-testi-quote p { margin: 0 0 0.75em; }
.wb-testi-quote p:last-child { margin-bottom: 0; }
/* ---- Footer ------------------------------------------------------------ */
.wb-testi-foot {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.wb-testi-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
display: block;
}
.wb-testi-avatar--initials {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wb-testi-blue);
color: #fff;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1;
}
.wb-testi-person {
display: flex;
flex-direction: column;
min-width: 0;
}
.wb-testi-author {
color: var(--wb-testi-navy);
font-weight: 700;
font-size: 0.98rem;
line-height: 1.3;
}
.wb-testi-meta {
color: var(--wb-testi-ink);
font-size: 0.82rem;
line-height: 1.3;
opacity: 0.85;
}
/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.wb-testi-card {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Ook het gladde scrollen uitzetten: dat is beweging die de gebruiker
* niet heeft gevraagd. */
.wb-testi-grid {
scroll-behavior: auto;
scroll-snap-type: none;
}
}
/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
* container-class op hetzelfde element (view.php: class="wb-testi-grid
* grid-container") - zie de toelichting daar. Wordt dit blok ooit buiten dit
* template gebruikt, dan ontbreekt .grid-container's CSS en valt de breedte
* terug op 100%; voeg dan zelf een .grid-container-regel toe in de omgeving
* waar dit blok draait, in plaats van hier weer een eigen kopie bij te
* houden. */
/* --- /modules/logocarouselblock/frontend.css --- */
/* Logo Carousel Block - frontend
*
* INTENTIONALLY (almost) EMPTY.
*
* This module outputs the xso template's own "brand logos" markup and
* classes (section-wrapper, section-brands, splide, brands-slider,
* splide__track, splide__list, splide__slide, brand-box, brand-logo) -
* exactly what demo.html ships under "SECTION - BRAND LOGOS". The template
* already provides everything the brief asked for:
* - the auto-scrolling motion itself: js/app.js initializes every
* ".brands-slider" with Splide + the auto-scroll extension (both loaded
* on every page by the template's index.php)
* - grayscale-until-hover: .brand-box img is grayscale by default,
* .brand-box:hover img switches to full colour (brands.css)
* - the fade-out at both edges of the row (brands.css, mask-image)
* So this module ships no JavaScript of its own, and only the one small
* rule below - the template's own .brand-box img has a FIXED max-height
* (70px desktop / 30px mobile), and this module's "logo height" setting
* needs to be able to override that with a single admin-chosen value.
*/
/* ---------------------------------------------------------------------------
* view.php sets --lcb-logo-height as an inline custom property on the
* carousel's own wrapper (from the block's "image height" setting), so this
* rule works for every instance of the block independently, each with its
* own height, without needing a separate CSS class per height value.
*
* Most logos never actually need this in the browser: save.php already
* resizes each one server-side (with GD) to this same height, so the image
* file itself typically already has almost exactly this height. This rule
* is the defensive fallback for the logos GD could not resize - svg (no
* "resizing" needed, it is already a vector), gif, or any image that failed
* to resize for some other reason - so every logo still lines up on the row
* regardless of its own original size.
* ------------------------------------------------------------------------ */
.lcb-carousel .brand-box img {
width: auto;
max-height: var(--lcb-logo-height, 60px);
}
/* The template's own .brand-box has a fixed min-height (100px) sized around
its own fixed 70px logo height. With a small admin-chosen height that
leaves a lot of empty space above/below the logo; center it there instead
of just floating in the taller box. Layout-only - grayscale, opacity and
the hover transition are all still the template's own. */
.lcb-carousel .brand-box {
min-height: calc(var(--lcb-logo-height, 60px) + 40px);
}
/* ---------------------------------------------------------------------------
* Geen eigen titelopmaak meer (v1.0.2). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .lcb-title-line2-regel gaf dit blok een eigen opmaak
* voor de tweede titelregel, en dat is precies het verschil dat we niet meer
* willen. Wil je de kopopmaak wijzigen, doe dat in het template.
* ------------------------------------------------------------------------ */
/* --- /modules/coverblock/frontend.css --- */
/* Cover Block - frontend styling
* Scoped under .wb-cover so nothing leaks into the rest of the site.
* Self-contained: no framework or icon font required.
*
* De kleuren volgen de CSS-variabelen van het template (huisstijl), met de
* oorspronkelijke waarden als terugval wanneer de module buiten dat template
* wordt gebruikt. --wb-accent wordt door de huisstijl gezet (bij Stip-t oranje)
* en stuurt de accentonderdelen aan, zoals de badges.
*/
.wb-cover {
--wb-cover-blue: var(--color-primary-600, #2f86eb);
--wb-cover-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
--wb-cover-blue-dark: var(--color-primary-700, #1f6fd0);
--wb-cover-navy: var(--color-primary-950, #0f2a4a);
--wb-cover-ink: #46586f;
--wb-cover-star: var(--color-warning, #f5a524);
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #eaf3ff 0%, #f4f9ff 45%, #ffffff 100%);
/* Weinig ruimte bovenaan zodat de hero direct onder de navigatie begint. */
padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2.5rem, 6vw, 5rem);
}
/* Background variants - use "Transparant" when placing the block inside a
template that already provides its own background (so it blends in). */
.wb-cover.wb-cover--bg-transparent { background: transparent; }
.wb-cover.wb-cover--bg-white { background: #fff; }
/* Als de module als hero in een .cover-wrapper staat (blok 10 "Cover/hero" van
de TimeWriter-template), schuift die wrapper 160px omhoog achter de zwevende
navigatie. Geef de hero dan bovenaan die 160px terug, zodat de tekst netjes
onder de nav blijft (net als de automatische cover-placeholder). Buiten een
cover-wrapper (standalone / gewoon contentblok) geldt dit niet. */
.cover-wrapper .wb-cover {
padding-top: 160px;
}
/* zelfde breekpunten/waarden als .cover-placeholder van de template */
@media (max-width: 1023px) {
.cover-wrapper .wb-cover { padding-top: 180px; }
}
@media (max-width: 640px) {
.cover-wrapper .wb-cover { padding-top: 110px; }
}
.wb-cover-inner {
/* Breedte, centrering en kantlijn komen van de template's eigen
.grid-container-class op hetzelfde element (zie view.php: class=
"wb-cover-inner grid-container") - dat garandeert exacte uitlijning
met de rest van de pagina op elk breakpoint, ook als de template die
waarden ooit aanpast. Hier alleen nog de eigen layout van dit blok. */
display: flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
}
.wb-cover-text {
flex: 1 1 52%;
min-width: 0;
}
@media (min-width: 1024px) {
/* .wb-cover-inner levert al de gewone rand-tot-tekst-kantlijn - maar
overal elders in de template krijgt tekst in een sectie daarbovenop
nog de "ademruimte" van .section-content (35px vanaf 1024px, 15px
daaronder tot aan de stack/centreer-breakpoint hieronder - dezelfde
twee waarden die .section-content zelf ook gebruikt). Onder die
stack/centreer-breakpoint is de titel gecentreerd, dus heeft geen
linkerkantlijn om op uit te lijnen. */
.wb-cover-text {
padding-left: 35px;
}
}
@media (min-width: 901px) and (max-width: 1023px) {
.wb-cover-text {
padding-left: 15px;
}
}
.wb-cover-visual {
flex: 1 1 48%;
min-width: 0;
position: relative;
}
/* ---- Badges ------------------------------------------------------------ */
.wb-cover-badges {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 6px;
background: color-mix(in srgb, var(--wb-cover-accent) 10%, transparent);
border-radius: 999px;
margin-bottom: 1.4rem;
}
.wb-cover-badge {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
}
.wb-cover-badge--solid {
background: var(--wb-cover-accent);
color: #fff;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 2px 6px color-mix(in srgb, var(--wb-cover-accent) 30%, transparent);
}
.wb-cover-badge--text {
color: var(--wb-cover-accent);
}
/* ---- Title / lead ------------------------------------------------------ */
/* Geen eigen titelopmaak meer (v1.0.7). De titel is een kale en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .wb-cover-title/-line1/-line2 gaven dit blok een eigen
* lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
* meer willen. De hero-kop wordt daardoor iets kleiner dan voorheen: hij
* volgt nu de standaard h1-grootte van het template in plaats van zijn eigen,
* iets grotere clamp. Wil je de kopopmaak wijzigen, doe dat in het template. */
.wb-cover-lead {
color: var(--wb-cover-ink);
font-size: clamp(1rem, 1.4vw, 1.18rem);
line-height: 1.7;
max-width: 34em;
margin-bottom: 2rem;
}
.wb-cover-lead p { margin: 0 0 0.6em; }
.wb-cover-lead p:last-child { margin-bottom: 0; }
/* ---- Buttons ----------------------------------------------------------- */
.wb-cover-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 1.8rem;
}
.wb-cover-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
line-height: 1;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.wb-cover-btn .wb-cover-arrow { transition: transform 0.2s ease; }
.wb-cover-btn:hover .wb-cover-arrow { transform: translateX(3px); }
.wb-cover-btn--primary {
background: var(--wb-cover-blue);
color: #fff;
box-shadow: 0 8px 20px rgba(47, 134, 235, 0.32);
}
.wb-cover-btn--primary:hover {
background: var(--wb-cover-blue-dark);
transform: translateY(-1px);
color: #fff;
}
.wb-cover-btn--hollow {
background: transparent;
color: var(--wb-cover-navy);
border: 1.5px solid rgba(15, 42, 74, 0.22);
}
.wb-cover-btn--hollow:hover {
border-color: var(--wb-cover-blue);
color: var(--wb-cover-blue);
transform: translateY(-1px);
}
/* ---- Rating ------------------------------------------------------------ */
.wb-cover-rating {
display: flex;
align-items: center;
gap: 10px;
}
.wb-cover-stars {
display: inline-flex;
gap: 2px;
color: var(--wb-cover-star);
}
.wb-cover-rating-text {
color: var(--wb-cover-ink);
font-size: 0.95rem;
font-weight: 600;
}
/* ---- Image + slide-in animation --------------------------------------- */
.wb-cover-image {
display: block;
max-width: 100%;
height: auto;
border-radius: 14px;
filter: drop-shadow(0 24px 45px rgba(15, 42, 74, 0.20));
will-change: transform, opacity;
opacity: 0;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
transition-delay: 120ms;
}
/* Start states (before reveal) */
.wb-cover--from-bottom .wb-cover-image { transform: translateY(60px) rotate(0deg); }
.wb-cover--from-right .wb-cover-image { transform: translateX(80px) rotate(0deg); }
/* End state (block is in view -> .is-visible added by the inline script) */
.wb-cover.is-visible .wb-cover-image {
opacity: 1;
transform: translateY(0) rotate(-4deg);
}
.wb-cover--from-right.is-visible .wb-cover-image {
transform: translateX(0) rotate(-4deg);
}
/* ---- Desktop: grote, ver doorlopende afbeelding ------------------------
LET OP: dit blok moet NA de basisregels van .wb-cover-image staan, anders
wint de basisregel (max-width:100%) op gelijke specificiteit en blijft de
afbeelding op de kolombreedte hangen.
De beeldkolom breekt uit de gecentreerde container naar de rechter-
viewportrand; .wb-cover heeft overflow:hidden en klipt netjes af, dus er
ontstaat geen horizontale scrollbalk. */
@media (min-width: 1024px) {
.wb-cover-text {
flex: 0 0 46%;
max-width: 620px;
}
.wb-cover-visual {
flex: 0 0 54%;
overflow: visible;
margin-right: calc(50% - 50vw);
}
.wb-cover-image {
width: min(1120px, 70vw);
max-width: none;
}
}
/* v1.1.0: prefers-reduced-motion wordt BEWUST niet meer gehonoreerd.
* Tot v1.0.9 stond hier een blok dat bij die media query opacity/transform/
* transition op !important zette. Windows meldt reduced-motion zodra
* "Animatie-effecten" (Instellingen > Toegankelijkheid > Visuele effecten)
* uitstaat, en op zulke pc's stond de afbeelding dan recht (de -4 graden
* kanteling is een transform en ging mee) en schoof hij niet in beeld.
* Expliciet gekozen: de hero altijd hetzelfde, op elke pc. Wil je de
* instelling toch respecteren, zet dan een blok als dit terug:
* @media (prefers-reduced-motion: reduce) {
* .wb-cover-image { opacity:1 !important; transition:none !important;
* transform: rotate(-4deg) !important; }
* }
* (met rotate(-4deg) in plaats van none, zodat alleen de beweging vervalt en
* niet de kanteling). */
/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
.wb-cover-inner { flex-direction: column; text-align: center; }
.wb-cover-text { flex-basis: auto; }
.wb-cover-visual { flex-basis: auto; width: 100%; margin-top: 1.5rem; }
.wb-cover-lead { margin-left: auto; margin-right: auto; }
.wb-cover-actions,
.wb-cover-rating { justify-content: center; }
.wb-cover.is-visible .wb-cover-image,
.wb-cover--from-right.is-visible .wb-cover-image { transform: translateY(0) rotate(0deg); }
}
/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
* container-class op hetzelfde element (view.php: class="wb-cover-inner
* grid-container") - zie de toelichting daar. Wordt dit blok ooit buiten dit
* template gebruikt, dan ontbreekt .grid-container's CSS en valt de breedte
* terug op 100%; voeg dan zelf een .grid-container-regel toe in de omgeving
* waar dit blok draait, in plaats van hier weer een eigen kopie bij te
* houden. */
/* v1.0.8: de hero-afbeelding zit in een (WebP-srcset, zie
* view.php/functions.php). display:contents laat die wrapper geen eigen box
* maken, zodat .wb-cover-image precies dezelfde plek in de flex-kolom heeft
* als toen hij nog een losse ![]()
was en alle regels hierboven ongewijzigd
* blijven werken. */
.wb-cover-visual > picture { display: contents; }
/* --- /modules/ckeditor/frontend.css --- */
@import url('https://www.timewriter.nl/include/font-awesome/css/font-awesome.min.css');