@font-face {
font-display: swap;
font-family: "Roboto";
font-style: normal;
font-weight: 100 900;
src: url(//espressolover.dk/wp-content/themes/espressolover/assets/fonts/roboto-latin-var.woff2) format("woff2");
}
:root {
--el-black: #000;
--el-white: #fff;
--el-brown: #8b4513;
--el-grey-text: #666;
--el-nav-text: #303030;
--el-line: #8e8e8e;
--el-faq-bg: #f9f9f9;
--el-faq-line: #ccc;
--el-width: 1200px;
--el-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: var(--el-white);
color: var(--el-black);
font-family: var(--el-font);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
a {
color: var(--el-brown);
font-weight: 600;
text-decoration: none;
}
a:hover,
a:focus {
color: var(--el-black);
}
h1,
h2,
h3,
h4 {
color: var(--el-black);
font-family: var(--el-font);
font-weight: 600;
line-height: 1.2;
}  .el-disclosure {
background: var(--el-white);
text-align: center;
}
.el-disclosure__button,
.el-disclosure__button:hover,
.el-disclosure__button:focus {
background: var(--el-white);
border: 0;
border-radius: 3px;
color: #d60000;
cursor: pointer;
font-family: var(--el-font);
font-size: 15px;
font-weight: 500;
line-height: 1;
padding: 12px 24px;
}
.el-disclosure__button:hover,
.el-disclosure__button:focus-visible {
text-decoration: underline;
}
.el-disclosure__dialog {
border: 0;
box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
color: var(--el-black);
max-width: 580px;
padding: 30px;
width: calc(100% - 40px);
}
.el-disclosure__dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.el-disclosure__dialog h3 {
font-size: 25px;
margin: 0 0 16px;
}
.el-disclosure__dialog p {
margin: 0 0 0.9em;
}
.el-disclosure__close,
.el-disclosure__close:hover,
.el-disclosure__close:focus {
background: none;
border: 0;
color: var(--el-black);
cursor: pointer;
font-size: 24px;
line-height: 1;
padding: 6px 10px;
position: absolute;
right: 6px;
top: 6px;
} .site-header {
background: var(--el-white);
}
.site-header .inside-header {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: var(--el-width);
padding: 20px 0;
}
.site-header .site-branding {
text-align: center;
}
.site-header .main-title {
font-size: 50px;
font-weight: 600;
line-height: 1;
margin: 0;
}
.site-header .main-title a,
.site-header .main-title a:hover {
color: var(--el-black);
font-weight: 600;
}
.site-header .site-description {
display: none;
} .main-navigation {
background: var(--el-white);
}
.main-navigation .inside-navigation {
border-bottom: 1px dotted var(--el-line);
border-top: 1px dotted var(--el-line);
justify-content: center;
margin: 0 auto;
max-width: var(--el-width);
}
.main-navigation .main-nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main-navigation .main-nav ul li a {
color: var(--el-nav-text);
font-size: 15px;
font-weight: 400;
line-height: 20px;
padding: 16px 41px;
}
.main-navigation .main-nav > ul > li > a {
position: relative;
}
.main-navigation .main-nav > ul > li.menu-item-has-children > a {
padding-right: 41px;
}
.main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
padding: 0 0 0 10px;
} .main-navigation .main-nav > ul > li > a::before,
.main-navigation .main-nav > ul > li > a::after {
background: var(--el-black);
content: "";
height: 3px;
left: 0;
opacity: 0;
position: absolute;
transition: opacity 0.3s, transform 0.3s;
width: 100%;
}
.main-navigation .main-nav > ul > li > a::before {
top: 0;
transform: translateY(-10px);
}
.main-navigation .main-nav > ul > li > a::after {
bottom: 0;
transform: translateY(10px);
}
.main-navigation .main-nav > ul > li:hover > a::before,
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li > a:focus-visible::before,
.main-navigation .main-nav > ul > li > a:focus-visible::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::before,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::before,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
opacity: 1;
transform: translateY(0);
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
background: transparent;
color: var(--el-black);
} .main-navigation .main-nav ul ul {
background: var(--el-white);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
width: 260px;
}
.main-navigation .main-nav ul ul li a {
color: #33373d;
font-size: 13px;
font-weight: 500;
line-height: 20px;
padding: 13px 20px;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li.current-menu-item > a {
background: #3f444b;
color: var(--el-white);
} .main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
background: transparent;
color: var(--el-black);
font-size: 15px;
font-weight: 400;
line-height: 52px;
margin: 0 auto;
} .site.grid-container,
.site-content {
max-width: var(--el-width);
}
.site-content {
margin: 0 auto;
} .one-container .site-content,
.separate-containers .inside-article {
padding: 50px 60px 0;
}
.home.one-container .site-content,
.home.separate-containers .inside-article {
padding: 10px 10px 0;
}
.entry-header {
text-align: center;
}
h1.entry-title,
.page-header h1,
h1.page-title {
font-size: 60px;
font-weight: 600;
line-height: 1;
margin: 0 0 30px;
padding: 10px;
text-align: center;
} .el-breadcrumbs {
font-size: 0.85em;
font-weight: 600;
line-height: 1.5;
margin: 0;
padding: 10px 25px;
text-align: center;
}
.el-breadcrumbs p {
margin: 0;
} .entry-content {
margin-top: 10px;
}
.entry-content p,
.entry-content li {
line-height: 2.1;
}
.entry-content p {
margin: 0 0 0.9em;
}
.entry-content ul,
.entry-content ol {
margin: 0 0 0.9em;
padding-left: 40px;
}
.entry-content h2 {
font-size: 30px;
margin: 8px 0 16px;
}
.entry-content h3 {
font-size: 25px;
margin: 8px 0 16px;
}
.entry-content h4 {
font-size: 20px;
margin: 8px 0 16px;
}
.entry-content img {
height: auto;
max-width: 100%;
} .home .entry-content p,
.home .entry-content li {
line-height: 1.5;
}  .el-display,
.entry-content h1.el-display,
.entry-content h2.el-display {
font-size: 45px;
font-weight: 400;
letter-spacing: 4.5px;
line-height: 1.1;
margin: 0;
padding: 16px 0;
text-align: center;
text-transform: uppercase;
}
.el-kicker,
.entry-content p.el-kicker {
font-size: 14px;
font-weight: 500;
letter-spacing: 5px;
line-height: 1;
margin: 0;
padding: 20px 0;
text-align: center;
text-transform: uppercase;
} .el-hero > .wp-block-group__inner-container,
.el-section > .wp-block-group__inner-container,
.el-cta > .wp-block-group__inner-container,
.el-usp > .wp-block-group__inner-container,
.el-usp > .wp-block-group__inner-container > .wp-block-group > .wp-block-group__inner-container,
.el-closing > .wp-block-group__inner-container {
max-width: none;
padding: 0;
}
.el-section {
margin: 0 auto;
padding: 20px 0 0;
} .el-hero {
padding-bottom: 10px;
text-align: center;
}
.el-hero .el-banner,
.entry-content .el-hero p.el-banner {
background: var(--el-black);
color: var(--el-white);
font-size: 20px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1;
margin: 0 50px 20px;
padding: 15px 10px;
}
.el-hero .el-kicker,
.entry-content .el-hero p.el-kicker {
font-weight: 600;
}
.el-hero .el-brandlinks,
.entry-content .el-hero p.el-brandlinks {
color: var(--el-grey-text);
line-height: 1.5;
margin: 0 auto 0.9em;
max-width: 880px;
} .el-cta {
padding-top: 10px;
text-align: center;
}
.el-cta .wp-block-buttons,
.el-cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
padding: 15px;
}
.el-cta .wp-block-button,
.el-cta__buttons > * {
flex: 1 1 0;
margin: 0;
min-width: 220px;
}
.el-button,
.entry-content a.wp-block-button__link:not(.has-background) {
background: var(--el-black);
border: 10px solid var(--el-black);
border-radius: 2px;
box-shadow: 0 12px 39px 0 rgba(0, 0, 0, 0.16);
color: var(--el-white);
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1;
padding: 21px 30px 18px;
text-align: center;
transition: background 0.3s, color 0.3s;
}
.el-button:hover,
.el-button:focus,
.entry-content a.wp-block-button__link:not(.has-background):hover,
.entry-content a.wp-block-button__link:not(.has-background):focus {
background: var(--el-white);
color: var(--el-black);
} .el-usp,
.entry-content .el-usp {
margin: 0;
padding: 10px 10px 20px;
}
.el-usp > .wp-block-group__inner-container {
display: flex;
flex-wrap: wrap;
}
.el-usp > .wp-block-group__inner-container > * {
flex: 1 1 0;
margin: 0;
min-width: 240px;
padding: 10px 10px 10px 53px;
position: relative;
}
.el-usp > .wp-block-group__inner-container > *::before {
background: var(--el-black);
content: "";
height: 25px;
left: 10px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.500'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.500'/%3E%3C/svg%3E") center / contain no-repeat;
position: absolute;
top: 10px;
width: 25px;
}
.el-usp__title,
.entry-content .el-usp p.el-usp__title {
font-size: 14px;
font-weight: 600;
letter-spacing: 1.6px;
line-height: 1.5;
margin: 0 0 10px;
text-transform: uppercase;
}
.entry-content .el-usp p {
line-height: 1.5;
margin: 0;
} .simple-faq-block,
.schema-faq {
margin: 0 0 20px;
}
.simple-faq-item,
.schema-faq-section {
border-bottom: 1px solid var(--el-faq-line);
padding: 1em 0;
}
.simple-faq-item:last-child,
.schema-faq-section:last-child {
border-bottom: 0;
}
.simple-faq-question,
.schema-faq-question,
.entry-content p.simple-faq-question {
background: var(--el-faq-bg);
display: block;
font-weight: 700;
line-height: 1.5;
margin: 0;
padding: 0.5em 1em;
}
.simple-faq-answer,
.schema-faq-answer,
.entry-content p.simple-faq-answer,
.entry-content p.schema-faq-answer {
line-height: 1.5;
margin: 0;
padding: 0.5em 1em;
} .el-closing {
margin-top: 30px;
}
.el-closing > .wp-block-group__inner-container > :last-child {
margin-bottom: 0;
}  .blog .site-main,
.archive .site-main {
display: grid;
gap: 20px 30px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog .site-main > .page-header,
.archive .site-main > .page-header,
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.blog .site-main > .el-archive-intro,
.archive .site-main > .el-archive-intro {
grid-column: 1 / -1;
}
.archive .site-main > .page-header {
margin: 0;
padding: 0;
} .archive .page-header .taxonomy-description {
display: none;
}
.el-archive-intro {
margin-top: 20px;
}
.blog .site-main > article,
.archive .site-main > article,
.one-container.blog .site-main > .post:not(:last-child):not(.is-loop-template-item),
.one-container.archive .site-main > .post:not(:last-child):not(.is-loop-template-item) {
margin: 0;
padding: 0;
}
.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article {
background: var(--el-white);
border-radius: 3px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
height: 100%;
overflow: hidden;
padding: 0;
transition: box-shadow 0.25s;
}
.blog .site-main > article .inside-article:hover,
.archive .site-main > article .inside-article:hover {
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
}
.blog .site-main > article .post-image,
.archive .site-main > article .post-image {
margin: 0;
}
.blog .site-main > article .post-image img,
.archive .site-main > article .post-image img {
aspect-ratio: 353 / 233;
display: block;
object-fit: cover;
width: 100%;
}
.blog .site-main > article .entry-header,
.archive .site-main > article .entry-header {
margin-top: 20px;
padding: 0 30px;
text-align: left;
}
.blog .site-main > article .entry-title,
.archive .site-main > article .entry-title {
font-size: 21px;
font-weight: 600;
line-height: 1.2;
margin: 0 0 25px;
}
.blog .site-main > article .entry-title a,
.archive .site-main > article .entry-title a {
color: var(--el-black);
font-weight: 600;
}
.blog .site-main > article .entry-title a:hover,
.archive .site-main > article .entry-title a:hover {
color: var(--el-brown);
}
.blog .site-main > article .entry-summary,
.blog .site-main > article .entry-meta,
.archive .site-main > article .entry-summary,
.archive .site-main > article .entry-meta {
display: none;
} .single .featured-image,
.page .featured-image {
margin: 0;
padding: 10px;
text-align: center;
}  .el-prefooter {
margin: 0 auto;
max-width: var(--el-width);
padding: 30px 10px 10px;
text-align: center;
}
.el-prefooter p {
margin: 0 0 0.9em;
}
.el-prefooter__title {
font-size: 25px;
font-weight: 600;
line-height: 1;
margin: 20px 0;
}
.el-prefooter__widget {
text-align: left;
} .site-footer {
margin: 0 auto;
max-width: var(--el-width);
}
.site-footer .footer-widgets,
.site-footer .site-info {
background: var(--el-black);
color: var(--el-white);
}
.site-footer .footer-widgets-container {
max-width: none;
padding: 23px 10px 10px;
}
.site-footer .footer-widgets-container .inside-footer-widgets {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
}
.site-footer .footer-widgets-container .inside-footer-widgets > div {
margin-bottom: 0;
}
.site-footer .footer-widgets-container .inner-padding {
padding: 0;
}
.site-footer .inside-footer-widgets > div {
flex: 1 1 0;
min-width: 240px;
padding: 0 20px;
text-align: center;
}
.site-footer .widget {
background: transparent;
color: var(--el-white);
font-size: 14px;
line-height: 1.7;
margin: 0 0 20px;
padding: 0;
}
.site-footer .widget p {
margin: 0 0 0.9em;
}
.site-footer .widget-title,
.site-footer .widget h2 {
color: var(--el-white);
font-size: 18px;
font-weight: 500;
line-height: 1;
margin: 0 0 20px;
} .site-footer .footer-widget-1 .widget-title,
.site-footer .footer-widget-1 .widget:first-child h2 {
font-size: 16px;
font-weight: 600;
}
.site-footer .widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .widget ul li {
line-height: 1.5;
margin: 0;
padding: 0 0 5px;
}
.site-footer .widget a {
color: var(--el-white);
font-weight: 300;
}
.site-footer .widget a:hover,
.site-footer .widget a:focus {
color: var(--el-white);
text-decoration: underline;
} .site-footer .site-info {
font-size: 15px;
font-weight: 300;
line-height: 1.5;
}
.site-footer .inside-site-info {
display: block;
max-width: none;
padding: 10px 20px 24px;
text-align: center;
}
.site-footer .copyright-bar {
border-top: 1px solid var(--el-white);
padding-top: 20px;
} @media (max-width: 1024px) {
.site-header .inside-header {
padding: 20px;
}
.one-container .site-content,
.separate-containers .inside-article {
padding: 30px 20px 0;
}
.blog .site-main,
.archive .site-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
h1.entry-title,
.page-header h1,
h1.page-title {
font-size: 45px;
}
}
@media (max-width: 767px) {
.site-header .main-title {
font-size: 35px;
}
.main-navigation .main-nav > ul {
display: block;
}
.main-navigation .main-nav ul li a {
padding: 12px 20px;
}
.main-navigation .main-nav > ul > li > a::before,
.main-navigation .main-nav > ul > li > a::after {
display: none;
}
.main-navigation .main-nav ul ul {
box-shadow: none;
width: 100%;
}
h1.entry-title,
.page-header h1,
h1.page-title {
font-size: 34px;
margin-bottom: 15px;
}
.el-display,
.entry-content h1.el-display,
.entry-content h2.el-display {
font-size: 28px;
letter-spacing: 2.5px;
}
.el-kicker,
.entry-content p.el-kicker {
letter-spacing: 3px;
line-height: 1.5;
padding: 12px 0;
}
.el-hero .el-banner,
.entry-content .el-hero p.el-banner {
font-size: 17px;
line-height: 1.3;
margin-left: 0;
margin-right: 0;
}
.el-cta .wp-block-buttons,
.el-cta__buttons {
gap: 15px;
padding: 15px 0;
}
.el-cta .wp-block-button,
.el-cta__buttons > * {
flex-basis: 100%;
}
.el-usp > .wp-block-group__inner-container > * {
flex-basis: 100%;
}
.entry-content h2 {
font-size: 25px;
}
.entry-content h3 {
font-size: 21px;
}
.blog .site-main,
.archive .site-main {
grid-template-columns: minmax(0, 1fr);
}
.site-footer .inside-footer-widgets > div {
flex-basis: 100%;
}
}