:root {
--doppelpunkt-primary-color: #FF7847;
--doppelpunkt-secondary-color: #FFFCF7;
--doppelpunkt-text-color: #42454D;
--doppelpunkt-background-color: #4D4B4E;
--doppelpunkt-light-muted-color: #888888;
--doppelpunkt-dark-muted-color: #666666;
--doppelpunkt-shadow-color: rgba(0, 0, 0, .95);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
h1, h2, h3, h4 {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
}
h6 {
font-weight: bold;
}
a {
text-decoration: none;
color: var(--doppelpunkt-primary-color);
}
a:hover {
color: var(--doppelpunkt-text-color)
}
*:focus {
outline: none;
}
label {
padding: 0 !important;
}
input,
textarea {
margin-top: 2px;
border-radius: 4px;
height: initial !important;
border: none;
width: 100%
}
input[type="email"],
input[type="text"] {
padding: 6px 12px !important;
line-height: 24px !important;
}
input[type="email"]:focus-visible,
input[type="text"]:focus-visible {
border: 1px solid var(--doppelpunkt-primary-color);
}
input[type="submit"] {
background-color: var(--doppelpunkt-primary-color) !important;
border-color: var(--doppelpunkt-primary-color) !important;
width: 100% !important;
font-size: 1rem !important;
padding: 6px !important;
}
input[type="submit"]:hover {
background-color: #e56b40 !important;
border-color: #e56b40 !important;
width: 100% !important;
font-size: 1rem !important;
padding: 6px !important;
}
input[type="checkbox"] {
border: 1px solid rgba(0, 0, 0, 0.25);
appearance: none;
background-color: white;
height: 1rem !important;
width: 1rem !important;
margin-right: 0.4rem;
}
input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
background-color: var(--doppelpunkt-primary-color);
}
.subtitle {
color: var(--doppelpunkt-primary-color);
}
figure figcaption {
text-align: center;
} a.anchor {
display: block;
position: relative;
top: -4rem;
visibility: hidden;
}
.mdi {
display: inline-block;
height: 1.1rem;
width: 1.1rem;
color: white;
} #navbar {
background-color: var(--doppelpunkt-background-color);
width: 100%;
text-transform: lowercase;
font-size: 110%;
align-items: center;
}
#navbar #mobile-top {
align-items: center;
}
#navbar .icon {
background-image: url(//ensemble-doppelpunkt.de/wp-content/themes/doppelpunkt/assets/images/doppelpunkt_icon_w.webp);
background-size: 3rem 3rem;
background-repeat: no-repeat;
height: 3rem;
width: 3rem;
padding-right: 3.8rem;
margin-left: 1rem;
}
#navbar ul {
list-style-type: none;
line-height: 4rem;
margin: 0;
padding: 0;
}
#navbar ul li a {
display: block;
height: 100%;
color: white;
}
#navbar ul li a:hover {
color: var(--doppelpunkt-primary-color);
}
#navbar ul li.current-menu-item {
font-weight: bold;
}
#navbar .burger {
height: 4rem;
margin-right: 1rem;
}
#navbar .burger a {
width: 2rem;
}
#navbar .menu li {
color: white;
}
#navbar .menu li a:hover {
background-color: var(--doppelpunkt-dark-muted-color);
} #buffer {
width: 100%;
height: 4rem;
background-color: var(--doppelpunkt-background-color);
} #hero {
position: relative;
width: 100%;
height: 50vw;
overflow-x: hidden;
}
#hero img {
position: absolute;
bottom: 4vh;
left: 0;
right: 0;
margin: 0 auto;
}
#hero #goto-content-start {
display: none;
} #not-found-logo {
background-image: url(//ensemble-doppelpunkt.de/wp-content/themes/doppelpunkt/assets/images/404.webp);
background-size: cover;
background-position: center center;
}
#not-found-logo h1 {
margin-bottom: 0;
padding-bottom: 3rem;
} section:not(.background),
section.background .layer {
padding: 1.5rem 1.5rem;
}
section:not(.background) {
background-color: rgba(255, 252, 247, .95);
}
section.background {
background-size: auto 100%;
-moz-background-size: auto 100%;
-webkit-background-size: auto 100%;
-o-background-size: auto 100%;
background-repeat: no-repeat;
background-position: top center;
}
section.background .layer,
#not-found-logo .layer {
background-color: rgba(0, 0, 0, .3);
}
section.background h1 {
text-align: center;
vertical-align: middle;
padding: 6rem 0 !important;
display: block;
}
section.background h1,
section.background h2 {
margin: 0;
}
#not-found-logo h1,
section.background h1,
section.background h2,
section.background p,
section.background details,
section.background figcaption,
section.background ul {
color: white;
text-shadow: 2px 2px 8px var(--doppelpunkt-shadow-color);
}
section.background label,
section.background input[type="submit"] {
color: white;
} .tnp-field {
margin-bottom: 8px !important;
}
.tnp-subscription,
.wpcf7 {
width: 50% !important;
max-width: initial !important;
margin: 1rem auto !important;
} #footer {
background-color: var(--doppelpunkt-background-color);
color: var(--doppelpunkt-light-muted-color);
}
#footer ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#footer .widget_edpkt_contactinfo div,
#footer li {
margin-bottom: 0.8rem;
}
#footer h4 {
font-family: 'Playfair Display', serif;
color: white;
font-size: 1.35rem;
font-weight: bold;
}
#footer #copyright {
color: var(--doppelpunkt-light-muted-color);
font-size: 80%;
}
#footer a {
color: inherit;
}
#footer a:hover {
color: var(--doppelpunkt-primary-color);
}
a.wp-block-social-link-anchor:hover {
color: white !important;
} .wp-block-image {
display: inline;
}
.wp-block-image:first-child .aligncenter,
.wp-block-image:first-child .alignleft,
.wp-block-image:first-child .alignright {
margin-top: 0;
}
@media only screen and (max-width: 767.98px) {
#navbar #mobile-top {
width: 100%;
}
#navbar .menu {
width: 100%;
}
#navbar .menu li a {
padding-left: 1rem;
}
#navbar .menu:not(.mobile) li {
display: none;
}
#hero img {
width: 60%;
}
.ribbon {
display: none;
}
} @media only screen and (min-width: 768px) {
#navbar.hidden {
position: fixed;
top: -4rem;
} #navbar {
display: initial;
transition: top 0.3s;
justify-content: center;
}
#navbar .menu li {
display: table-cell;
}
#navbar .icon {
border-right: 1px solid white;
}
#navbar .burger {
display: none;
}
#navbar .menu li a {
padding: 0 0.6rem;
}
#buffer.mobile {
display: none;
}
#hero {
width: 100%;
height: 100vh;
}
#hero img {
bottom: 8vh;
}
#hero #goto-content-start {
display: inline-block;
position: absolute;
left: 0;
right: 0;
bottom: 0.5vh;
margin: 0 auto;
height: 4rem;
width: 4rem;
color: white;
}
#hero #page-start:hover {
color: var(--doppelpunkt-primary-color);
}
section.background {
background-attachment: fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
section:not(.background),
section.background .layer {
padding: 5rem 12rem;
}
.ribbon {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: bold;
margin: 0;
background: var(--doppelpunkt-primary-color);
color: white;
padding: .5em 1em;
position: absolute;
top: 0;
right: 0;
transform: translateX(30%) translateY(0%) rotate(45deg);
transform-origin: top left;
box-shadow: 0 0 5px var(--doppelpunkt-shadow-color);
text-align: center;
}
.ribbon a {
color: white;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
top: 0;
margin: 0 -5px; width: 100%;
height: 100%;
background: var(--doppelpunkt-primary-color);
z-index: -1;
box-shadow: 0px 5px 5px -5px   var(--doppelpunkt-shadow-color);
}
.ribbon:before {
right: 100%;
}
.ribbon:after {
left: 100%;
}
}