:root {
--gap: 3rem;
--regular: 300;
--bold: 600;
--gradient: linear-gradient(90deg, var(--bg), var(--border, var(--txt)), var(--bg));
--highlight: #8875c8;
--shadow: 0px 0px var(--gap) rgba(0,0,0,.3);
--sans: 'Montserrat', sans-serif;
--serif: 'Cormorant SC', serif;
}
@font-face {
font-family: 'Montserrat';
src: url(//equestris.de/wp-content/themes/equestris/fonts/Montserrat-VariableFont_wght.ttf) format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//equestris.de/wp-content/themes/equestris/fonts/Montserrat-Italic-VariableFont_wght.ttf) format('truetype');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Cormorant SC';
src: url(//equestris.de/wp-content/themes/equestris/fonts/CormorantSC-Light.ttf) format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-size: 10px;
font-family: var(--sans, sans-serif);
color: var(--txt);
}
body {
font-size: 1.6rem;
font-weight: var(--regular);
line-height: 1.5;
display: flex;
flex-direction: column;
max-width: 138rem;
width: 100%;
margin: auto;
min-height: 100vh;
align-items: flex-start;
justify-content: flex-start;
padding: 0 var(--gap);
gap: var(--gap) 5em;
background-color: var(--bg); background-size: auto !important;
background-attachment: fixed !important;
background-position: center !important;
background-blend-mode: multiply !important;
background-repeat: repeat !important;
}
main {
flex-grow: 1;
align-self: stretch;
}
main, section, article, .content,
.wp-block-latest-posts li {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: .5em;
}
section {
width: 100%
}
a {
color: inherit;
text-decoration-color: var(--highlight);
transition: all .3s ease;
}
ul, ol {
margin-left: 1em;
list-style: disc;
}
body > * { }
button,
.button,
input[type="submit"] {
border: none;
border-top: 1px solid var(--border, var(--txt));
border-bottom: 1px solid var(--border, var(--txt));
padding: .25em 0;
background: none;
text-decoration: none;
display: block;
width: fit-content;
position: relative;
font-family: var(--serif, serif);
font-size: 1.2em;
transition: all .3s ease;
cursor: pointer;
line-height: 1
}
a:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
color: var(--highlight);
}
button:after,
.button:after,
input[type="submit"]:after {
content: '';
background-color: var(--highlight);
opacity: .25;
display: block;
position: absolute;
left: calc(100% + .5em);
top: 50%;
transform: translate(0%, -50%);
height: 1.5em;
width: 1em;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 66%, 33% 50%, 0% 33%);
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.wp-block-heading,
.wp-block-latest-posts__post-title,
.heading { font-family: var(--serif, serif);
margin-top: .5em;
margin-bottom: .5em;
position: relative;
width: fit-content;
z-index: 1;
line-height: 1
}
.h1 {
text-align: center;
width: 100%
} .h2:after,
.h3:after,
.h4:after,
.h5:after,
.h6:after,
.heading:after,
.wp-block-heading:after {
content: '';
display: block;
position: absolute;
z-index: -1;
background-color: var(--highlight);
opacity: .25;
width: 100%;
height: .66em;
left: 50%;
bottom: -0.22em;
transform: translate(-50%, 0);
pointer-events: none
}
strong {
font-weight: var(--bold);
}
.h1,
h1.wp-block-heading {
font-size: 1.5em;
}
.h2,
h2.wp-block-heading {
font-size: 1.4em;
}
.h3,
.wp-block-latest-posts__post-title,
h3.wp-block-heading {
font-size: 1.3em;
}
.h4,
h4.wp-block-heading {
font-size: 1.2em;
}
.h5,
h5.wp-block-heading {
font-size: 1.2em;
}
.h6,
h6.wp-block-heading {
font-size: 1.0em;
}
nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0 var(--gap);
margin: 0;
overflow: hidden;
align-items: center;
justify-content: center;
flex-direction: column;
}
nav a {
text-decoration: none;
font-family: var(--serif, serif);
font-size: 1.2em;
position: relative;
}
.hamburger {
position: fixed;
width: 5rem;
height: 5rem;
right: 1em;
top: 1em;
border-radius: 50%;
box-shadow: var(--shadow);
background-color: var(--bg);
z-index: 11;
transform: rotate(11deg);
transition: all .3s ease;
}
.hamburger:hover {
transform: none;
}
.hamburger:before {
content: '';
height: 33%;
width: 50%;
display: block;
border-top: 2px solid var(--highlight);
border-bottom: 2px solid var(--highlight);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .3s ease;
}
.hamburger:after {
content: '';
height: 2px;
width: 50%;
display: block;
background-color: var(--highlight);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
clip-path: none;
transition: all .3s ease;
}
.hamburger[aria-expanded="true"]:before {
border-width: 1px;
height: 0%;
transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger[aria-expanded="true"]:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 768px) {
#main_menu { position: fixed;
top: 0;
right: 0;
width: 0vw;
height: 100%;
overflow: hidden;
background-color: var(--bg);
padding: 5em 0;
transition: all .3s ease;
opacity: 0;
pointer-events: none;
z-index: 10
}
#main_menu ul {
width: calc(100vw - var(--gap) * 2);
}
#main_menu[aria-hidden="false"] {
padding: 5em var(--gap);
width: 100vw;
opacity: 1;
pointer-events: all;
}
}
nav li:not(:last-child) a:after { }
header, footer {
padding: 1em 0;
background: inherit;
background-blend-mode: inherit;
position: relative;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: .5em;
width: 100%
}
.h1 {
margin-top: calc(0px - var(--gap));
padding-top: 1rem;
padding-bottom: 1rem;
position: relative;
margin-bottom: var(--gap);
line-height: 1.3
}
.h1:after,
header:after,
footer:before {
content: '';
display: block;
width: 100%;
height: .1rem;
background-image: var(--gradient);
position: absolute;
left: 0
}
h1:after,
header:after {
bottom: 0;
}
footer:before {
top: 0;
}
#site-title svg,
#site-title picture > * {
width: 100%;
height: auto;
max-width: 35rem;
object-fit: contain;
}
#site-title svg path {
fill: var(--txt)
}
ul.wp-block-latest-posts,
.grid {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
align-items: stretch;
list-style: none;
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
picture, img {
max-width: 100%;
height: auto;
}
main picture {
position: relative;
z-index: 1;
}
main .intro picture:after {
height: 50%;
bottom: 0;
top: auto;
left: 0
}
main picture:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: calc(var(--gap) / 2);
top: calc(var(--gap) / 2);
background-color: var(--highlight);
opacity: .25;
z-index: -1;
}
.wp-block-latest-posts li,
.grid .content {
padding: var(--gap);
background-color: var(--bg);
border: 1px solid var(--border, var(--txt));
position: relative;
z-index: 1;
flex-grow: 1;
align-items: center;
box-shadow: var(--shadow);
}
.grid .content > p:last-of-type {
margin-bottom: 1em;
}
.grid .content .h3 {
margin-top: 0
}
.grid article > picture {
margin-bottom: calc(0px - var(--gap));
transform: translateX( calc(0px - var(--gap) / 2 ) );
aspect-ratio: 1.25;
}
.grid article > picture img {
aspect-ratio: inherit;
object-fit: cover;
}
.grid article .button {
margin: auto auto 0;
} section {
z-index: 1
}
section#author {
position: relative;
margin-top: var(--gap);
padding-top: calc(var(--gap) * 2);
padding-bottom: calc(var(--gap) * 2);
--highlight: #6482d1;
}
section#author:before {
content: '';
background-color: #153fad;
opacity: .2;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1
}
section#band1 {
position: relative;
margin-top: -0.5em;
padding-top: calc(var(--gap) * 2);
padding-bottom: calc(var(--gap) * 2);
--highlight: #814398;
justify-content: center;
flex-direction: row-reverse;
}
section#band1:before {
content: '';
background-color: #1c1a4c;
opacity: .2;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1
}
section#band2 {
position: relative;
margin-top: -0.5em;
padding-top: calc(var(--gap) * 2);
padding-bottom: calc(var(--gap) * 2);
--highlight: #bad272;
justify-content: center;
}
section#band2:before {
content: '';
background-color: #1a5a31;
opacity: .2;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1
}
.home main picture.book,
picture.book {
height: auto;
width: auto;
flex-grow: 0;
display: block;
position: relative;
margin-top: var(--gap);
margin-right: var(--gap);
}
picture.book:before {
content: '';
height: var(--gap);
width: 100%;
bottom: 100%;
left: 0;
transform-origin: left bottom;
display: block;
position: absolute;
background-color: #ddd;
transform: skewX(-45deg);
}
picture.book:after {
content: '';
width: var(--gap);
height: 100%;
left: 100%;
top: 0;
transform-origin: left bottom;
display: block;
position: absolute;
background-color: #ccc;
transform: skewY(-45deg);
opacity: 1
}
picture.book img {
max-height: 40vmin;
max-width: 30rem;
height: auto;
width: auto;
display: block;
}
.progressbar:first-of-type {
margin-top: 1em;
}
.progressbar {
position: relative;
z-index: 1;
display: block;
width: 100%;
border: 1px solid var(--border, var(--txt));
padding: .125em .25em;
}
.progressbar .bar {
display: flex;
align-items:baseline;
justify-content: space-between;
gap: 1em;
}
.progressbar .bar:after{
content: '';
position: absolute;
width: var(--width);
height: 100%;
background-color: var(--highlight);
left: 0;
top: 0;
z-index: -1;
opacity: .25;
}