.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}} :where(html){--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04} :root { --clr-accent-light: var(--blue-6-hsl); --clr-accent-2-light: var(--blue-9-hsl); --clr-text-1-light: var(--indigo-12-hsl); --clr-text-2-light: var(--indigo-9-hsl); --clr-surface-1-light: var(--indigo-0-hsl); --clr-surface-2-light: var(--indigo-2-hsl); --clr-surface-3-light: var(--indigo-3-hsl); --clr-surface-4-light: var(--indigo-4-hsl); --clr-accent: var(--clr-accent-dark); --clr-surface-1: var(--clr-surface-1-dark); --clr-text-1: var(--clr-text-1-dark); --ff-base: var(--ff-sans-serif); --fs-base: var(--step-0, 1.1rem); --font-lineheight-3: 1.5; --font-lineheight-0: 1.1; --clr-headings: var(--clr-text-1); --step-5: clamp(3.4332rem, 3.3005rem + 0.6634vw, 3.8147rem); --step-4: clamp(2.7466rem, 2.6404rem + 0.5307vw, 3.0518rem); --step-3: clamp(2.1973rem, 2.1123rem + 0.4246vw, 2.4414rem); --step-2: clamp(1.7578rem, 1.6899rem + 0.3397vw, 1.9531rem); --step-1: clamp(1.4063rem, 1.3519rem + 0.2717vw, 1.5625rem); --flow-space: var(--space-s, 1em); --flow-space-l: calc(var(--flow-space) * 2); --clr-link: var(--clr-accent); --clr-link-hover: var(--clr-surface-4); --gray-7-hsl: 210 9% 31%; --size-2: .5rem; --size-1: .25rem; --size-relative-4: 1.25ch; --size-content-1: 20ch; --size-3: 1rem; --clr-surface-3: var(--clr-surface-3-dark); --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem); --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem); --border-size-3: 5px; --step--1: clamp(0.9rem, 0.8652rem + 0.1739vw, 1rem); --gap: var(--space-s); --fs-sm: var(--step--1, .75rem); --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem); --clr-surface-4: var(--clr-surface-4-dark); --step--2: clamp(0.72rem, 0.6922rem + 0.1391vw, 0.8rem); --border-size-1: 1px; --radius-round: 1e5px; --font-letterspacing-3: .075em; --article-max-width: 90ch; --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem); --article-space: var(--space-l-xl, 5rem); --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --clr-surface-2: var(--clr-surface-2-dark); --b-color: hsl(var(--clr-text-1)); --b-radius: var(--radius-3, 3px); --shadow: 5px 5px 0 0 hsl(var(--clr-text-1)); --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); --size-5: 1.5rem; --link-underline-thickness: .75rem; --link-underline-offset: -.25rem; --b-size: 3px; --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem); --border-size-2: 2px; --b-radius-sm: var(--radius-2, 1px); --size-relative-6: 1.75ch; --ease-3: cubic-bezier(.25,0,.3,1); --blue-6-hsl: 208 80% 52%; --blue-9-hsl: 209 75% 38%; --indigo-12-hsl: 230 57% 30%; --indigo-9-hsl: 230 57% 50%; --indigo-0-hsl: 223 100% 96%; --indigo-2-hsl: 228 100% 86%; --indigo-3-hsl: 228 100% 78%; --indigo-4-hsl: 228 96% 72%; --clr-accent-dark: var(--blue-3-hsl); --clr-surface-1-dark: var(--indigo-12-hsl); --clr-text-1-dark: var(--indigo-0-hsl); --ff-sans-serif: var(--font-neo-grotesque); --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --clr-surface-3-dark: var(--indigo-9-hsl); --clr-surface-4-dark: var(--indigo-8-hsl); --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem); --clr-surface-2-dark: var(--indigo-10-hsl); --radius-3: 1rem; --radius-2: 5px; --blue-3-hsl: 206 96% 72%; --font-neo-grotesque: Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif; --indigo-8-hsl: 228 69% 55%; --indigo-10-hsl: 230 57% 43%; --ease-2: cubic-bezier(.25,0,.4,1); --animation-fade-in: fade-in .5s var(--ease-3); --ease-elastic-in-2: cubic-bezier(.5,-0.50,.75,1); --ease-4: cubic-bezier(.25,0,.2,1); } /* 1. abstracts */ /* do not import the custom-properties.css - open-jit-props does its work for this file */ /* but optional: put all wanted extra props in here (Maybe some at the end?) */ /* for readable media queries, check the docs */ /* @import "../node_modules/open-props/buttons.min.css"; */ /* 2. base */ /* Import reset/normalize and some general styles */ /* @import 'base/fonts.css'; */ /* --------------------------------------------------------------- */ /* My personal normalize.css */ /* A mixture of */ /* */ /* A (more)) Modern CSS reset by Andy Bell */ /* https://andy-bell.co.uk/a-more-modern-css-reset/ */ /* */ /* and */ /* the normalize.css of Open Props */ /* --------------------------------------------------------------- */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } :where(:not(dialog)) { margin: 0; } /* Color scheme */ :root { --csstools-color-scheme--light: initial; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --csstools-color-scheme--light: ; } } @media (prefers-color-scheme: light) { :root { /* color-scheme: light; */ --clr-accent: var(--clr-accent-light); --clr-accent-2: var(--clr-accent-2-light); --clr-text-1: var(--clr-text-1-light); --clr-text-2: var(--clr-text-2-light); --clr-surface-1: var(--clr-surface-1-light); --clr-surface-2: var(--clr-surface-2-light); --clr-surface-3: var(--clr-surface-3-light); --clr-surface-4: var(--clr-surface-4-light); } } /* Remove default margins */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } } @media (prefers-reduced-motion: no-preference) { :where(:focus-visible) { transition: outline-offset 145ms var(--ease-2); } :where(:not(:active):focus-visible) { transition-duration: .25s; } } :not(:active):focus-visible { outline: 3px solid hsl(var(--clr-accent)); outline-offset: 5px; } body { min-height: 100vh; background: hsl(var(--clr-surface-1) / 50%); /* background: linear-gradient(to bottom right,hsl(var(--clr-surface-2) / 50%),hsl(var(--clr-surface-1))); */ background-attachment: fixed; color: hsl(var(--clr-text-1)); font-family: var(--ff-base); font-size: var(--fs-base); line-height: var(--font-lineheight-3); } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, h5, h6, button, input, label { line-height: var(--font-lineheight-0); color: hsl(var(--clr-headings)); } h1, h2, h3, h4, h5 { text-wrap: balance; @media (max-width: 767px) { /* styles for medium and below viewport */ -webkit-hyphens: auto; hyphens: auto; } } h1 { font-size: var(--step-5) } h2 { font-size: var(--step-4) } h3 { font-size: var(--step-3) } h4 { font-size: var(--step-2) } h5 { font-size: var(--step-1) } /* Vertikaler Rhythmus */ /* vertikaler Rhythmus von Inhaltselementen */ [class*="content-"]:where(:not(:first-child)), :is([class*="content-"], .rte, .layout_latest, .layout_full) > * + * { margin-block-start: var(--flow-space); } [class*="content-"]:has(h2, h3, h4, h5, h6) { margin-block-start: var(--flow-space-l); } /* p, ul, ol, dl, h6, .website-title { font-weight: var(--font-weight-3); } */ /* Make text more readable (add more elements, if needed */ p, li, figcaption { text-wrap: pretty; } :where(:not(fieldset):not(progress):not(meter)) { border-width: 0; border-style: solid; background-origin: border-box; background-repeat: no-repeat; } :where(a, u, ins, abbr) { text-underline-offset: 1px; @supports (-moz-appearance: none) { text-underline-offset: 2px; } } :where(a[href], area, button, input:not([type="text"]):not([type="email"]):not([type="number"]):not([type="password"]):not([type=""]):not([type="tel"]):not([type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"]):not(pre)) { cursor: pointer; } :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } a { color: hsl(var(--clr-link)); text-decoration-color: hsl(var(--clr-link-hover)); transition: all 0.25s ease-in; &:where(:visited) { text-decoration-color: hsl(var(--clr-link-hover)); } &:where(:not(:hover)) { text-decoration: inherit; } h2 &:where(:hover) { -webkit-text-decoration: none; text-decoration: none; } } /* :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; } :where(img, svg, video) { max-inline-size: 100%; block-size: auto; } */ /* Make images and videos easier to work with */ img, picture, video { max-width: 100%; display: block; height: auto; } input, button, textarea, select, input[type="file"]::-webkit-file-upload-button { font: inherit; /* font-size: inherit; */ /* color: inherit; */ /* letter-spacing: inherit; */ } ::-moz-placeholder { color: hsl(var(--gray-7-hsl)); opacity: .75; } ::placeholder { color: hsl(var(--gray-7-hsl)); opacity: .75; } input:not([type="range"]), textarea { padding-inline: var(--size-2); padding-block: var(--size-1); } :where(select) { padding-inline: var(--size-relative-4) 0; padding-block: .75ch; field-sizing: content; } :where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"])) { background-color: hsl(var(--clr-surface-2)); border-radius: var(--b-radius-sm); border: var(--b-size) solid hsl(var(--clr-surface-3)); } :where(textarea) { resize: vertical; field-sizing: content; min-inline-size: var(--size-content-1); min-block-size: 2lh; } :where(input[type="checkbox"], input[type="radio"]) { block-size: var(--size-3); inline-size: var(--size-3); accent-color: hsl(var(--clr-surface-3)); } /* :where(svg:not([width])) { inline-size: var(--size-10); } :where(code, kbd, samp, pre) { font-family: var(--ff-monospace), monospace; } :where(:not(pre) > code, kbd) { white-space: nowrap } :where(pre) { white-space: pre; min-inline-size: 0; max-inline-size: max-content; writing-mode: lr; direction: ltr; } :where(:not(pre) > code) { padding: var(--size-1) var(--size-2); background: var(--surface-2); border-radius: var(--radius-2); writing-mode: lr; } :where(kbd, var) { padding: var(--size-1) var(--size-2); border-width: var(--border-size-1); border-color: var(--surface-4); border-radius: var(--radius-2); } :where(mark) { border-radius: var(--radius-2); padding-inline: var(--size-1); } :where(ol, ul) { padding-inline-start: var(--size-8) } :where(li) { padding-inline-start: var(--size-2) } :where(li, dd, figcaption) { max-inline-size: var(--size-content-2) } :where(p) { max-inline-size: var(--size-content-3); text-wrap: pretty; } :where(dt, summary) { font-weight: var(--font-weight-7) } :where(dt:not(:first-of-type)) { margin-block-start: var(--size-5); } :where(small) { font-size: max(.5em, var(--font-size-0)); max-inline-size: var(--size-content-1); } */ :where(hr) { margin-block: var(--space-2xl) var(--space-l); height: var(--border-size-3); background-color: hsl(var(--clr-text-1)); } :where(figure) { display: grid; grid-gap: var(--size-2); gap: var(--size-2); align-items: center; justify-items: center; place-items: center; & > :where(figcaption) { font-size: var(--step--1); text-wrap: balance; } & + p { margin-block-start: var(--flow-space); } } /* :where(blockquote, :not(blockquote) > cite) { border-inline-start-width: var(--border-size-3); } :where(blockquote) { display: grid; gap: var(--size-3); padding-block: var(--size-3); padding-inline: var(--size-4); max-inline-size: var(--size-content-2); } :where(:not(blockquote) > cite) { padding-inline-start: var(--size-2); } :where(summary) { background: var(--surface-3); padding: var(--size-2) var(--size-3); margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1); border-radius: var(--radius-2); } :where(details) { padding-inline: var(--size-3); padding-block: var(--size-2); background: var(--surface-2); border-radius: var(--radius-2); } :where(details[open] > summary) { margin-bottom: var(--size-2); border-end-start-radius: 0; border-end-end-radius: 0; } :where(fieldset) { border-radius: var(--radius-2); border: var(--border-size-1) solid var(--surface-4); } :where(del) { background: var(--red-9); color: var(--red-2); } :where(ins) { background: var(--green-9); color: var(--green-1); } :where(abbr) { text-decoration-color: var(--blue-5); } :where(dialog) { background-color: var(--surface-1); color: inherit; border-radius: var(--radius-3); box-shadow: var(--shadow-6); } :where(menu) { padding-inline-start: 0; display: flex; gap: var(--size-3); } :where(sup) { font-size: .5em; } :where(table) { width: fit-content; border: 1px solid var(--surface-2); background: var(--surface-2); border-radius: var(--radius-3); --nice-inner-radius: calc(var(--radius-3) - 2px); } :where(table:not(:has(tfoot)) tr:last-child td:first-child) { border-end-start-radius: var(--nice-inner-radius); } :where(table:not(:has(tfoot)) tr:last-child td:last-child) { border-end-end-radius: var(--nice-inner-radius); } :where(table thead tr:first-child th:first-child) { border-start-start-radius: var(--nice-inner-radius); } :where(table thead tr:first-child th:last-child) { border-start-end-radius: var(--nice-inner-radius); } :where(tfoot tr:last-child :is(th,td):first-of-type) { border-end-start-radius: var(--nice-inner-radius); } :where(tfoot tr:last-child :is(th,td):last-of-type) { border-end-end-radius: var(--nice-inner-radius); } :where(th) { color: var(--text-1); background-color: var(--surface-2); } :where(table :is(a, button, [contenteditable]):is(:focus-visible)) { outline-offset: -2px; } :where(td) { background: var(--surface-1); max-inline-size: var(--size-content-2); text-wrap: pretty; } :where(td,th) { text-align: left; padding: var(--size-2); } :where(:is(td,th):not([align])) { text-align: center; } :where(thead) { border-collapse: collapse; } :where(table tr:hover td), :where(tbody tr:nth-child(even):hover td) { background-color: var(--surface-3); } :where(table > caption) { margin: var(--size-3); } :where(tfoot button) { padding-block: var(--size-1); padding-inline: var(--size-3); } */ /* @import 'base/reset.css'; */ /* @import 'base/general.css'; */ /* ------------------- */ /* Utility classes */ /* ------------------- */ /* general */ .flex { display: flex; gap: 1rem; gap: var(--gap, 1rem); } .grid { display: grid; grid-gap: 1rem; grid-gap: var(--gap, 1rem); gap: 1rem; gap: var(--gap, 1rem); } .invisible:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* .skip-to-content { position: absolute; z-index: 9999; background: hsl( var(--clr-white) ); color: hsl( var(--clr-dark) ); padding: .5em 1em; margin-inline: auto; transform: translateY(-100%); transition: transform 250ms ease-in; } .skip-to-content:focus { transform: translateY(0); } */ .accent { background: hsl(var(--clr-accent)); } /* .grey { --clr-headings: var(--clr-white); color: var(--clr-white); background: var(--gradient-grey); } */ .info { display: flex; gap: calc(var(--gap) / 1.5); align-items: flex-end; font-size: var(--fs-sm); & time { margin-inline-end: auto; } /* .layout_full & { padding-block: var(--space-s); } */ } .more { margin-block-start: var(--space-2xs); } .tag { background: hsl(var(--clr-surface-4)); font-size: var(--step--2); border: var(--border-size-1) solid hsl(var(--clr-surface-4)); border-radius: var(--radius-round); letter-spacing: var(--font-letterspacing-3); padding: var(--size-1) var(--size-3); text-transform: uppercase; & a { color: hsl(var(--clr-surface-1)); @media (prefers-color-scheme: dark) { color: hsl(var(--clr-text-1)); } &:where(:hover) { -webkit-text-decoration: none; text-decoration: none; color: hsl(var(--clr-surface-4)); } } &:has(a:hover) { background: hsl(var(--clr-surface-1)); @media (prefers-color-scheme: dark) { background: hsl(var(--clr-text-1)); border-color: hsl(var(--clr-text-1)); } } } /* 3. layout */ /* Contao container classes */ /* General structure body |--#wrapper |--header |--.inside |--#container |--main |--.inside |--.mod_article |--.content-... |--footer |--.inside /* Keep the footer at bottom of the page */ /* adjust the template rows according to the direct child elements */ #wrapper { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; /* header #container footer */ @media (prefers-reduced-motion: no-preference) { opacity: 0; animation: var(--animation-fade-in) forwards; animation-timing-function: var(--ease-elastic-in-2); animation-delay: .05s; animation-duration: .25s; } } /* width and centering for the inside container - classic approach */ :is(header, .mod_article, footer) > .inside { width: 100%; max-width: min(100vw - 3rem, 70rem); max-width: min(100vw - 3rem, var(--article-max-width, 70rem)); margin-inline: auto; } header, footer { padding-block: var(--space-s-m); } header { & .inside { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; & .sitename { font-size: var(--step-3); } & .nav { font-size: var(--step-1); } @media (max-width: 767px) { grid-template-columns: 1fr; justify-items: center; } } } .mod_article { & .inside { --article-max-width: 65ch; } &.wide .inside { --article-max-width: 90ch; } &.full-width .inside { --article-max-width: 100vw; } } /* Abstand zwischen Header, main und Footer */ /* Abstand zwischen Artikeln im Bereich Main content */ /* Bei Custom Layoutbereichen muss dieID des Layoutbereichs muss mit custom- beginnen */ main .mod_article { padding-block: var(--article-space); } .layout_latest { margin-block-start: var(--space-l); padding-block: var(--space-s); background-color: hsl(var(--clr-surface-2)); border: 1px solid var(--b-color); border-radius: var(--b-radius); box-shadow: var(--shadow); & > h2 { margin-block-start: var(--space-3xs); } & > :not(figure) { padding-inline: var(--space-s); } } .layout_full { & > h1 { margin-block-start: var(--space-3xs); } & img { border: 1px solid var(--b-color); border-radius: var(--b-radius); box-shadow: var(--shadow); } } .layout_latest:not(:first-of-type) { margin-block-start: var(--space-l); } /* main .mod_article:first-child { padding-block-end: var(--article-space); } */ /* @import 'layout/container_grid-solution.css'; */ /* @import 'layout/hero.css'; */ /* @import 'layout/hero_grid-solution.css'; */ /* @import 'layout/header.css'; */ /* @import 'layout/header_grid-solution.css'; */ /* @import 'layout/company-links.css'; */ /* @import 'layout/footer.css'; */ /* @import 'layout/footer_grid-solution.css'; */ /* 4. components & modules */ /* @import 'components/ce_text.css'; */ /* @import 'components/alerts.css'; */ /* e.g. error messages) */ /* @import 'components/ce_table.css'; */ /* @import 'components/ce_code.css'; */ /* @import 'components/ce_markdown.css'; */ /* @import 'components/media.css'; */ /* Styles for the content element Galerie */ /* structure of the gallery template */ /*
*/ /* gallery with gridbox - set the custom property --min for the min-width of the images */ .content-gallery ul { --gap: var(--size-5); --min: 250px; list-style: none; padding: 0; margin: 0; display: grid; grid-gap: var(--gap); gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); } /* @import 'modules/navigation-temp.css'; */ /* In Contao give the main navigation the class nav--primary */ /* make the nav horizontal & move main nav to the right */ .nav--primary { inline-size: 100%; & ul { list-style-type: none; display: flex; flex-wrap: wrap; gap: var(--flow-space); justify-content: end; padding-inline-start: 0; } & :is(a, strong) { color: hsl(var(--clr-accent)); -webkit-text-decoration: underline; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--link-underline-thickness); text-underline-offset: var(--link-underline-offset); -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; transition: all 0.25s ease-in; &:is(:hover, :focus, .active) { text-decoration-color: hsl(var(--clr-link-hover)); } } } .sitename { & a { color: hsl(var(--clr-accent)); -webkit-text-decoration: none; text-decoration: none; } } /* @import 'modules/breadcrumb.css'; */ /* @import 'modules/faq.css'; */ /* @import 'modules/news.css'; */ /* @import "components/events.css"; */ /* @import 'components/card.css'; */ /* default comments, used for news and as content element */ .ce_comments { padding-block-start: var(--article-space); & h3:not(:first-of-type) { margin-block: var(--article-space) var(--space-s); } } /* do not show the "Kommentare" heading if there are no comments */ h3:has(+ h3) { display: none; } .comment_default { padding: var(--space-s); margin-block: var(--space-s); background: hsl(var(--clr-surface-2)); border: var(--b-size) solid hsl(var(--clr-surface-3)); border-radius: var(--b-radius); &:last-of-type { margin-block-end: var(--space-m); } } .comment { margin-block-start: var(--space-2xs); } .reply { margin-block-start: var(--space-s); margin-inline-start: var(--space-m); padding: var(--space-s); background: hsl(var(--clr-surface-1)); border: var(--b-size) solid hsl(var(--clr-surface-3)); border-radius: var(--b-radius); } .back { text-align: center; margin-block-start: var(--space-s); } .widget:not(.widget-submit) { display: grid; margin-block-end: var(--space-s); & label { font-size: var(--fs-sm); margin-block-end: var(--space-3xs); } & fieldset { border-width: 0; padding: 0; } } /* Button styles */ /* Kommentar absenden, Weiterlesen ... */ /* Diese Datei kann noch verschlankt werden _bg-light ..dark etc. wird eigentlich nicht benötigt */ :where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])), :where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button { --_bg-light: hsl(var(--clr-surface-2)); --_bg-dark: hsl(var(--clr-surface-2)); --_bg: var(--_bg-light); --_border: hsl(var(--clr-surface-3)); --_highlight-size: 0; --_highlight-light: hsl(var(--clr-accent)); /* blue in hsl */ --_highlight-dark: hsl(var(--clr-accent)); --_highlight: var(--_highlight-light); /* --_ink-shadow-light: 0 1px 0 var(--gray-3); --_ink-shadow-dark: 0 1px 0 hsl(var(--clr-surface-1)); --_ink-shadow: var(--_ink-shadow-light); */ /* font-size: var(--_size); */ background: var(--_bg); /* color: var(--_text); */ border: var(--border-size-2) solid var(--_border); box-shadow: 0 0 hsl(var(--clr-surface-3)), 0 0 0 0 var(--_highlight); box-shadow: 0 0 hsl(var(--clr-surface-3)), 0 0 0 var(--_highlight-size) var(--_highlight) ; /* text-shadow: var(--_ink-shadow); */ display: inline-flex; /* justify-content: center; align-items: center; text-align: center; gap: var(--size-2); font-weight: var(--font-weight-7); */ border-radius: var(--b-radius-sm); padding-block: .75ch; padding-inline: var(--size-relative-6); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-transition: border-color .5s var(--ease-3); transition: border-color .5s var(--ease-3); @media (prefers-color-scheme: dark) { --_highlight: var(--_highlight-dark); --_bg: var(--_bg-dark); --_ink-shadow: var(--_ink-shadow-dark); } @media (prefers-reduced-motion: no-preference) { transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4); } } :where(.btn, button,input:is([type="button"],[type="submit"],[type="reset"])) { /* pressing */ &:where(:not(:active):hover) { --_highlight-size: var(--size-2); transition-duration: .25s; } } /* icons */ /* & > :where(svg) { flex-shrink: 0; filter: drop-shadow(var(--_ink-shadow)); block-size: var(--_icon-size); inline-size: var(--_icon-size); } & > :where(svg > *) { stroke: var(--_icon-color); stroke-width: var(--border-size-2); } } */ :where(.btn:is(a)) { -webkit-text-decoration: none; text-decoration: none; } /* adaptive indigo text */ /* :where([type="submit"], form button:not([type],[disabled])) { --_text: var(--_accent, var(--link)); } */ /* red reset */ /* :where([type="reset"]) { --_text: var(--red-6); --_border: var(--red-3); &:focus-visible { outline-color: var(--red-6); } @media (--OSdark) { --_text: var(--red-2); --_border: hsl(var(--clr-surface-3)); } } */ /* submit, form > button, reset matching hover border color */ :where([type="submit"], [type="reset"], form button:not([type])):is(:hover, :focus-visible):not([disabled]) { --_border: currentColor; } /* file input */ /* :where(input[type="file"]) { max-inline-size: 100%; padding: 0; cursor: initial; align-self: flex-start; border-radius: var(--radius-2); border: var(--border-size-1) solid hsl(var(--clr-surface-2)); box-shadow: var(--inner-shadow-4); color: var(--text-2); } :where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button { margin-inline-end: var(--size-relative-6); cursor: pointer; } */ /* special dark theme styles */ @media (prefers-color-scheme: dark) { :where([type="submit"]), :where(form button:not([type="button"])), :where([type="reset"]), :where([disabled]) { --_bg: var(--_bg-dark); } } /* @import 'components/akkordeon.css'; */ /* @import 'components/downloads.css'; */ /* @import 'modules/newsletter.css'; */ /* Vor-/Zurück-Navigation zwischen Blogbeiträgen */ .post-navigation { display: flex; justify-content: space-between; gap: calc(var(--gap) * 2); } .nav-next { text-align: right; margin-inline-start: auto; & .nav-links__label::after { content: " →"; } } .nav-previous .nav-links__label::before { content: "← "; } .nav-links__label { display: block; font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--font-letterspacing-3); } /* 5. pages */ /* Special styles for specific pages (is this needed?) */ /* 6. themes */ /* Custom styles for this project */ /* @import 'themes/custom.css'; */ @keyframes fade-in { to { opacity: 1 } } /* @keyframes fade-in-bloom { 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) } } @keyframes fade-out { to { opacity: 0 } } @keyframes fade-out-bloom { 100% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 0% { opacity: 1; filter: brightness(1) blur(0) } } @keyframes scale-up { to { transform: scale(1.25) } } @keyframes scale-down { to { transform: scale(.75) } } @keyframes slide-out-up { to { transform: translateY(-100%) } } @keyframes slide-out-down { to { transform: translateY(100%) } } @keyframes slide-out-right { to { transform: translateX(100%) } } @keyframes slide-out-left { to { transform: translateX(-100%) } } @keyframes slide-in-up { from { transform: translateY(100%) } } */ @keyframes slide-in-down { from { transform: translateY(-100%) } } @keyframes slide-in-right { from { transform: translateX(-100%) } } @keyframes slide-in-left { from { transform: translateX(100%) } } /* @keyframes shake-x { 0%, 100% { transform: translateX(0%) } 20% { transform: translateX(-5%) } 40% { transform: translateX(5%) } 60% { transform: translateX(-5%) } 80% { transform: translateX(5%) } } @keyframes shake-y { 0%, 100% { transform: translateY(0%) } 20% { transform: translateY(-5%) } 40% { transform: translateY(5%) } 60% { transform: translateY(-5%) } 80% { transform: translateY(5%) } } */ @keyframes shake-z { 0%, 100% { transform: rotate(0deg) } 20% { transform: rotate(-2deg) } 40% { transform: rotate(2deg) } 60% { transform: rotate(-2deg) } 80% { transform: rotate(2deg) } } /* @keyframes spin { to { transform: rotate(1turn) } } @keyframes ping { 90%, 100% { transform: scale(2); opacity: 0; } } @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .5 } } @keyframes float { 50% { transform: translateY(-25%) } } @keyframes bounce { 25% { transform: translateY(-20%) } 40% { transform: translateY(-3%) } 0%, 60%, 100% { transform: translateY(0) } } @keyframes pulse { 50% { transform: scale(.9,.9) } } @media (--OSdark) { @keyframes fade-in-bloom { 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(0.5) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) } } } @media (--OSdark) { @keyframes fade-out-bloom { 100% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(0.5) blur(10px) } 0% { opacity: 1; filter: brightness(1) blur(0) } } } */