/**
* RM Import — front-end styles.
*
* Two jobs:
* 1. A minimal Bootstrap-compatible grid + helpers so legacy page content
* (imported from the old nuvofront/nf-rmimport site, which used .container/.row/.col-*)
* lays out correctly without pulling in Bootstrap.
* 2. The brand content components ported from the original theme (.heading, .card,
* .parallax-bg, .country, .kontakt) re-pointed at locally-bundled images and the
* theme.json colour tokens.
*
* Base typography & colours come from theme.json; this file only covers what blocks
* can't express.
*/
/* ---------------------------------------------------------------- tokens */
:root {
--rm-slate: var(--wp--preset--color--primary, #37414b);
--rm-slate-dark: var(--wp--preset--color--primary-dark, #262e36);
--rm-maroon: var(--wp--preset--color--secondary, #9a242a);
--rm-grey-light: var(--wp--preset--color--neutral-light, #dedfe1);
--rm-grey: var(--wp--preset--color--neutral, #8d8d8e);
}
/* ------------------------------------------------------------------ hero */
/* responsive height: short band on mobile, tall on desktop (taller cover = tighter
crop on the dates, matching the live RevSlider) */
/* no blockGap between the top-level template blocks (header / hero / main / footer) */
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.rm-hero { position: relative; min-height: 290px !important; margin-top: 0 !important; }
@media (min-width: 768px) { .rm-hero { min-height: 460px !important; } }
@media (min-width: 1200px) { .rm-hero { min-height: 640px !important; } }
/* make the cover itself the badge's positioning context (the inner-container is
position:relative + collapsed, which broke top:%) */
.rm-hero .wp-block-cover__inner-container { width: 100%; position: static !important; }
/* no dark overlay on the hero image (match live's bright photo) */
.rm-hero .wp-block-cover__background { opacity: 0 !important; }
/* content-page hero banner uses the same responsive heights as the home hero (640px desktop) */
.rm-hero-badge {
position: absolute;
left: 16.6%;
top: 42%;
transform: translateY(-50%);
width: 310px;
height: 310px;
box-sizing: border-box;
padding: 0 2rem; /* keep text off the circle edge */
border-radius: 50%;
background: rgba(150, 22, 26, 0.78); /* translucent muted red, closest to live's blended look */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
font-family: "Times New Roman", Times, Georgia, serif; /* mirror the live serif fallback */
}
/* badge horizontal placement (per-page via _rm_badge_pos meta) */
.rm-hero-badge.is-right { left: auto; right: 16.5%; }
.rm-hero-badge.is-center { left: 50%; transform: translate(-50%, -50%); }
.rm-hero-badge .rm-badge { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
/* show the badge matching the page language (Polylang sets ) */
.rm-hero-badge .rm-badge--en { display: none; }
html[lang^="en"] .rm-hero-badge .rm-badge--da { display: none; }
html[lang^="en"] .rm-hero-badge .rm-badge--en { display: flex; }
.rm-hero-badge__title {
font-family: inherit; /* serif, from .rm-hero-badge */
font-weight: 700;
font-size: 3.625rem; /* 58px, like live */
line-height: 1.0;
text-transform: none; /* mixed-case "Friske dadler", like live */
}
.rm-hero-badge__sub { font-size: 1.75rem; line-height: 1.2; margin-top: 0.5rem; } /* 28px, like live */
@media (max-width: 1199px) {
.rm-hero-badge { width: 250px; height: 250px; }
.rm-hero-badge__title { font-size: 2.8rem; }
.rm-hero-badge__sub { font-size: 1.35rem; }
}
@media (max-width: 767px) {
.rm-hero-badge { width: 165px; height: 165px; left: 5%; }
.rm-hero-badge__title { font-size: 1.7rem; }
.rm-hero-badge__sub { font-size: 0.85rem; margin-top: 0.3rem; }
}
/* ---------------------------------------------------------------- header */
.rm-header { position: relative; z-index: 20; padding-left: 0 !important; padding-right: 0 !important; }
.rm-header .wp-block-site-logo img { display: block; }
/* primary nav (classic menu rendered via [rm_primary_nav]) */
.rm-primary-nav .top-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
text-transform: uppercase;
font-weight: 400;
font-size: 1.375rem;
}
.rm-primary-nav .top-menu li { position: relative; display: flex; align-items: center; }
.rm-primary-nav .top-menu > li { margin-left: 4rem; }
.rm-primary-nav .top-menu a { color: #fff; text-decoration: none; display: flex; align-items: center; transition: color .2s ease; }
.rm-primary-nav .top-menu a:hover { color: var(--rm-grey-light); }
/* dropdown submenus */
.rm-primary-nav .top-menu .sub-menu {
list-style: none;
margin: 0;
padding: 0.5rem 0;
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
background: var(--rm-slate-dark);
box-shadow: 0 12px 30px rgba(0,0,0,.25);
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
z-index: 30;
}
.rm-primary-nav .top-menu li.menu-item-has-children:hover > .sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition-delay: 0s;
}
.rm-primary-nav .top-menu .sub-menu li { margin: 0; }
.rm-primary-nav .top-menu .sub-menu a { padding: 0.55rem 1.25rem; font-size: 1rem; width: 100%; }
/* header bar: full-width, fixed height so the ENG block bleeds flush to the right edge */
.rm-header .alignwide {
max-width: 100%;
width: 100%;
min-height: 101px;
margin-left: 0 !important;
margin-right: 0 !important;
align-items: stretch !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 30px !important;
padding-right: 0 !important;
}
.rm-header .wp-block-site-logo { display: flex; align-items: center; }
/* gap between the menu (…Kontakt os) and the maroon ENG block = 4rem, like the live site */
.rm-header .rm-nav-wrap { align-items: stretch !important; gap: 4rem !important; }
/* language switcher = maroon block linking to the other language (ENG / DAN) */
.rm-header .rm-lang-switcher { display: flex; align-items: stretch; }
.rm-header .rm-lang-btn {
display: inline-flex;
align-items: center;
background: var(--rm-maroon);
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 1.375rem;
padding: 0 30px;
transition: filter .2s ease;
}
.rm-header .rm-lang-btn:hover { filter: brightness(0.9); color: #fff; }
.rm-header .rm-primary-nav { display: flex; align-items: center; }
/* desktop: maroon button shows the short code; full word is used in the mobile drawer */
.rm-lang-full { display: none; }
.rm-lang-short { display: inline; }
/* hamburger button — full-height maroon block, flush to the right edge (mobile only) */
.rm-burger {
display: none;
background: var(--rm-maroon);
border: 0;
cursor: pointer;
width: 64px;
height: 56px;
padding: 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
}
.rm-burger span { display: block; height: 3px; width: 28px; background: #fff; border-radius: 1px; transition: transform .25s ease, opacity .25s ease; }
body.rm-nav-open .rm-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.rm-nav-open .rm-burger span:nth-child(2) { opacity: 0; }
body.rm-nav-open .rm-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* ---- mobile (<992px): compact header + app-style slide-in drawer ---- */
@media (max-width: 991px) {
/* compact bar: ~56px, small logo, logo inset left, menu block flush right */
.rm-header .alignwide {
min-height: 56px !important;
padding-left: 15px !important;
padding-right: 0 !important;
align-items: center !important;
}
.rm-header .wp-block-site-logo { width: auto !important; }
.rm-header .wp-block-site-logo img { width: 150px !important; height: auto !important; }
/* maroon box stays in the header bar; toggles hamburger <-> X in place */
.rm-burger { display: flex; position: relative; z-index: 130; }
/* drawer slides in below the persistent header bar */
.rm-header .rm-nav-wrap {
display: flex !important;
position: fixed;
left: 0;
right: 0;
top: 56px;
bottom: 0;
background: var(--rm-slate);
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 0 !important;
padding: 1rem 0 1.5rem !important;
overflow-y: auto;
transform: translateX(100%);
transition: transform .35s ease;
box-shadow: -12px 0 30px rgba(0,0,0,.3);
z-index: 110;
}
body.rm-nav-open .rm-header .rm-nav-wrap { transform: translateX(0); }
body.rm-nav-open { overflow: hidden; }
/* full-width app-style rows */
.rm-primary-nav { display: block; width: 100%; }
.rm-primary-nav .top-menu { flex-direction: column; align-items: stretch; width: 100%; font-size: 1.25rem; }
.rm-primary-nav .top-menu > li { margin: 0; flex-direction: column; align-items: stretch; }
.rm-primary-nav .top-menu > li > a {
padding: 0.9rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rm-primary-nav .top-menu .sub-menu {
position: static; visibility: visible; opacity: 1; transform: none;
background: rgba(0,0,0,0.18); box-shadow: none; min-width: 0; padding: 0;
}
.rm-primary-nav .top-menu .sub-menu a {
padding: 0.7rem 1.5rem 0.7rem 2.75rem;
font-size: 1rem;
color: var(--rm-grey-light);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* language link pinned to the bottom of the drawer, as plain text */
.rm-header .rm-lang-switcher { margin-top: auto; padding: 1.5rem 1.5rem 0; }
.rm-header .rm-lang-btn { background: transparent; padding: 0; font-size: 1.1rem; color: #fff; text-transform: none; }
.rm-header .rm-lang-btn:hover { filter: none; color: var(--rm-grey-light); }
.rm-lang-short { display: none; }
.rm-lang-full { display: inline; }
}
/* ---------------------------------------------------------------- footer */
/* food-image strip (replaces the old RevSlider carousel) */
.rm-foodstrip { display: flex; width: 100%; }
.rm-foodstrip__item { flex: 1 1 0; aspect-ratio: 1 / 1; background-size: cover; background-position: center; }
@media (max-width: 768px) { .rm-foodstrip__item:nth-child(n+4) { display: none; } }
.rm-footer a { color: #fff; text-decoration: none; }
.rm-footer a:hover { color: var(--rm-grey-light); }
.rm-footer-title { font-size: 1.5rem !important; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 1.25rem; }
.rm-footer-logo-img { max-width: 142px; height: auto; }
/* footer column menus */
.rm-footer-col-nav .footer-col-menu { list-style: none; margin: 0; padding: 0; }
.rm-footer-col-nav .footer-col-menu li { margin-bottom: 0.7rem; text-transform: uppercase; font-size: 1rem; }
.rm-footer-col-nav .footer-col-menu .sub-menu { display: none; }
/* contact block */
.rm-footer-contact { line-height: 2; font-size: 1rem; }
.rm-footer-contact a { color: #fff; }
.rm-footer-contact a:hover { color: var(--rm-grey-light); }
/* social + kontrol */
.rm-footer-social-col .wp-block-social-links { margin-bottom: 1.5rem; gap: 0.85rem; }
.rm-footer .wp-block-social-link,
.rm-footer .wp-block-social-link svg { width: 2.4rem; height: 2.4rem; }
.rm-kontrol img { max-width: 130px; height: auto; }
.rm-copyright { color: var(--rm-grey); }
.rm-copyright p { margin: 0; }
/* back-to-top */
.rm-to-top {
position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50;
width: 2.6rem; height: 2.6rem; border-radius: 4px;
background: var(--rm-maroon); color: #fff; text-decoration: none;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.rm-to-top.is-visible { opacity: 1; pointer-events: auto; }
.rm-to-top:hover { filter: brightness(0.9); color: #fff; }
/* ------------------------------------------------------------------ grid */
.container,
.container-fluid,
.row,
.row > [class*="col-"] { box-sizing: border-box; }
.container,
.container-fluid {
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}
.container { max-width: 1170px; }
.row {
display: flex;
flex-wrap: wrap;
margin-inline: -15px;
}
/* a nested .row (e.g. shortcode output inside a column/row) must fill its line */
.row > .row,
[class*="col-"] > .row { flex: 0 0 100%; width: 100%; margin-inline: 0; }
.row > [class*="col-"] { padding-inline: 15px; }
/* default: full width until a breakpoint class applies */
.row > [class*="col-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) { width: 100%; }
/* xs (always) */
.col-xs-12 { width: 100%; }
.col-xs-6 { width: 50%; }
/* sm >=544 */
@media (min-width: 544px) {
.col-sm-12 { width: 100%; }
.col-sm-6 { width: 50%; }
.col-sm-4 { width: 33.3333%; }
}
/* md >=768 */
@media (min-width: 768px) {
.col-md-2 { width: 16.6667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.3333%; }
.col-md-6 { width: 50%; }
.col-md-8 { width: 66.6667%; }
.col-md-9 { width: 75%; }
}
/* lg >=992 */
@media (min-width: 992px) {
.col-lg-2 { width: 16.6667%; }
.col-lg-3 { width: 25%; }
.col-lg-4 { width: 33.3333%; }
.col-lg-6 { width: 50%; }
}
/* xl >=1200 */
@media (min-width: 1200px) {
.col-xl-2 { width: 16.6667%; }
.col-xl-3 { width: 25%; }
.col-xl-4 { width: 33.3333%; }
.col-xl-6 { width: 50%; }
}
.img-fluid { max-width: 100%; height: auto; display: block; }
.align-center { text-align: center; }
.hidden-md-down { display: none; }
@media (min-width: 992px) { .hidden-md-down { display: block; } }
/* ----------------------------------------------------------- sections */
/* kill the editor blockGap margin so sections butt together (no white gaps) */
main section { margin-top: 0 !important; margin-bottom: 0 !important; }
main section { padding: 5rem 0; }
main section.high { padding: 9rem 0; }
main section.dark-bg { background: var(--rm-grey-light); }
@media (max-width: 768px) {
main section { padding: 3rem 1rem !important; }
}
/* ------------------------------------------------------------ headings */
main .heading { margin-bottom: 4rem; }
main .heading.low { margin-bottom: 1.5rem; }
main .heading.middle { margin-bottom: 3rem; }
main .heading.top { margin-top: 6rem; }
main .heading h1 { text-transform: uppercase; }
main .heading h3 {
font-weight: 400;
color: var(--rm-grey);
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.02em;
}
main .heading strong { color: var(--rm-maroon); }
.first-title { text-transform: uppercase; }
@media (max-width: 768px) {
main .heading { margin-bottom: 2rem; }
main .heading.low { margin-bottom: 1rem; }
main .heading.top { margin-top: 2rem; }
}
/* -------------------------------------------------------------- cards */
main .card { margin-bottom: 4rem; }
main .card.high { margin-bottom: 7rem; }
main .card.top { margin-top: 2rem; }
main .card img { margin-bottom: 2rem; width: 100%; border-radius: 4px; }
main .card h1,
main .card h2 { text-transform: uppercase; margin-bottom: 1rem; }
main .card h1 a,
main .card h2 a { color: inherit; text-decoration: none; }
main .card h1 a:hover,
main .card h2 a:hover { color: var(--rm-maroon); }
@media (max-width: 768px) {
main .card,
main .card.high { margin-bottom: 2rem; }
}
/* dark section text inverts */
main section.dark-bg .heading h3 { color: var(--rm-slate); }
/* --------------------------------------------------------- parallax */
main .parallax-bg {
min-height: 60vh;
padding: 0 !important; /* fill exactly; no section padding (matches live 60vh band) */
background-size: cover !important;
color: #fff;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
main .parallax-bg .row { justify-content: center; }
main .parallax-bg .content {
max-width: 910px;
margin-inline: auto;
padding: 2rem;
text-align: center;
position: relative;
z-index: 1;
}
main .parallax-bg::before {
content: "";
position: absolute;
inset: 0;
background: transparent; /* no dark cast — match live (images carry their own tone) */
}
/* keep white overlay text readable without darkening the photo */
main .parallax-bg .content h1,
main .parallax-bg .content h2,
main .parallax-bg .content h3,
main .parallax-bg .content p { text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4); }
main .parallax-bg h1,
main .parallax-bg h2,
main .parallax-bg h3,
main .parallax-bg p { color: #fff; }
@media (min-width: 1200px) {
main .parallax-bg { background-attachment: fixed !important; }
}
@media (max-width: 768px) { main .parallax-bg { min-height: 48vh; } }
main .parallax-bg.dadler { background: url(../images/parallax-dadler.jpg) center center no-repeat; }
main .parallax-bg.dadler2 { background: url(../images/parallax-dadler2.jpg) center center no-repeat; }
main .parallax-bg.snacks { background: url(../images/parallax-snacks.jpg) center center no-repeat; }
main .parallax-bg.dry { background: url(../images/parallax-dry.jpg) center center no-repeat; }
main .parallax-bg.coconut { background: url(../images/parallax-coconut.jpg) center center no-repeat; }
main .parallax-bg.peach { background: url(../images/parallax-peach.jpg) center center no-repeat; }
main .parallax-bg.dates { background: url(../images/parallax-dates.jpg) center center no-repeat; }
main .parallax-bg.nuts { background: url(../images/parallax-nuts.jpg) center center no-repeat; }
main .parallax-bg.profile { background: url(../images/parallax-profile.jpg) center center no-repeat; }
/* --------------------------------------------------------- country */
main .country {
box-sizing: border-box;
height: 100%; /* fill the (flex-stretched) column so all boxes in a row match */
background: var(--rm-grey-light);
padding: 2rem;
margin: 0;
min-height: 12rem;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* vertical spacing between the wrapped rows of country boxes */
main .row:has(> [class*="col-"] > .country) { row-gap: 1.75rem; }
main .country p { margin-bottom: 0; }
main .country h2 { text-transform: uppercase; }
@media (max-width: 544px) { main .country { min-height: 8rem; } }
/* --------------------------------------------------- contact cards */
.rm-contact-intro {
max-width: 640px;
margin: 0 auto 3rem;
text-align: center;
color: var(--rm-grey);
font-size: 1.15rem;
line-height: 1.7;
}
.rm-contact-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 980px;
margin: 0 auto;
}
/* drop the stray
wpautop injects (a
would otherwise take a grid cell) */
.rm-contact-cards > br,
.rm-contact-card > br { display: none; }
.rm-contact-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.75rem 1.5rem;
background: #fff;
border: 1px solid var(--rm-grey-light);
border-radius: 10px;
text-decoration: none;
color: var(--rm-slate);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rm-contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 36px rgba(29,34,40,0.10);
border-color: var(--rm-maroon);
color: var(--rm-slate);
}
.rm-contact-icon {
width: 68px;
height: 68px;
border-radius: 50%;
background: var(--rm-maroon);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.4rem;
transition: transform .25s ease;
}
.rm-contact-card:hover .rm-contact-icon { transform: scale(1.08); }
.rm-contact-icon svg { width: 30px; height: 30px; }
.rm-contact-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; margin-bottom: 0.6rem; }
.rm-contact-text { color: var(--rm-grey); line-height: 1.65; font-size: 1.05rem; }
@media (max-width: 768px) {
.rm-contact-cards { grid-template-columns: 1fr; max-width: 420px; }
}
/* --------------------------------------------------------- kontakt */
main .kontakt { display: flex; gap: 0.5rem; }
main .kontakt a { color: var(--rm-slate); }
main .kontakt a:hover { color: var(--rm-grey); text-decoration: none; }
main .kontakt-info p { margin-bottom: 0; }
@media (min-width: 992px) { main .kontakt-info label { min-width: 100px; display: inline-block; } }
@media (max-width: 768px) {
main .kontakt { display: block; text-align: center; }
main .kontakt-heading { text-align: center; }
}
/* ----------------------------------------------------- produkt cards */
.rm-produkt-card { text-align: center; margin-bottom: var(--wp--preset--spacing--50, 2.5rem); }
.rm-produkt-card .wp-block-post-featured-image { margin-bottom: 1.25rem; }
.rm-produkt-card .wp-block-post-featured-image img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: 6px;
}
.rm-produkt-card .wp-block-post-title { margin: 0 0 0.5rem; }
.rm-produkt-card .wp-block-post-title a { color: var(--rm-slate); text-decoration: none; }
.rm-produkt-card .wp-block-post-title a:hover { color: var(--rm-maroon); }
.rm-produkt-card .wp-block-post-excerpt { color: var(--rm-grey); }
.rm-produkt-card .wp-block-post-excerpt__more-link { display: none; }
/* ------------------------------------------------------- inquiry form */
.contact-form input,
.contact-form textarea {
box-sizing: border-box; /* keep inputs inside the column so the gutter shows */
width: 100%;
margin-bottom: 1rem;
padding: 0.9rem 1rem;
border: 1px solid var(--rm-grey-light);
border-radius: 4px;
font: inherit;
font-size: 1rem;
background: #fff;
color: var(--rm-slate);
}
.contact-form textarea { min-height: 9.5rem; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--rm-slate); }
.contact-form input.submit,
.contact-form input[type="submit"] {
width: auto;
background: var(--rm-slate);
color: #fff;
border-color: var(--rm-slate);
border: 0;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.03em;
padding: 0.85rem 1.8rem;
cursor: pointer;
transition: filter .2s ease;
}
.contact-form .submit:hover { filter: brightness(0.9); }
.contact-success {
background: #e8f3e8;
border: 1px solid #b9d8b9;
color: #2c6e2c;
padding: 1rem 1.25rem;
border-radius: 4px;
margin-bottom: 1.5rem;
}
/* world map */
main .card img[src*="kort"],
main img[src*="kort"] { max-width: 100%; }