/*
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
.be_om_tilbud_mega{
display: none !important;
}
.ast-container, .ast-container-fluid {
padding-left: 30px;
padding-right: 30px;
}
.astra-advanced-hook-598 {
display: none;
}
.home #primary .ast-article-single, .toppbilde #primary .ast-article-single{
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.toppbilde .ast-container h1.entry-title, .toppbilde .ast-container .ingress{
display: none;
}
.toppbilde #primary {
margin: 0 !important;
}
.toppbilde .ast-container #toppbilde{
display: none;
}
.toppbilde .ast-single-post-featured-section {
display: none; /*Skjuler fremhevet bilde, hvis toppbilde skal vises*/
}
.torader p{
font-size:21px;
line-height:1.4
}
.inline-search-form {
display: flex;
flex-wrap: nowrap;
gap: 10px;
max-width: 100%;
align-items: center;
}
.search-form .search-field{
min-width: 300px;
}
.inline-search-form .search-field {
flex: 1;
padding: 8px;
font-size: 16px;
}
.inline-search-form .search-submit {
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.custom-inline-search-form {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 20px;
max-width: 100%;
}
.custom-inline-search-form input.search-field {
flex: 1;
padding: 8px;
font-size: 16px;
}
.custom-inline-search-form button.search-submit {
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.ast-scroll-top{
bottom: 80px;
}
html {
scroll-behavior: smooth;
}
#primary{
margin-top: 50px !important;
}
#topp_innhold{
padding: 0px !important;
}
h1{
font-size: 48px !important;
line-height: 56px !important;
margin-top: 0.5em !important;
}
figure.wp-block-image.alignfull figcaption{
padding: 2px 30px !important;
}
.ingress{
font-size: 24px !important;
line-height: 32px !important;
font-weight: 500 !important;
}
.jet-listing-grid__item .ingress{
font-size: 20px !important;
line-height: 28px !important;
font-weight: 400 !important;
}
/* Zoom ut på hover – JetEngine listing grid (Kadence-bilde) */
.jet-listing-grid__item .kb-is-ratio-image {
overflow: hidden;
}
.jet-listing-grid__item .kb-is-ratio-image img.kb-img {
transform: scale(1.05);
transition: transform .6s cubic-bezier(.2, .6, .3, 1);
will-change: transform;
}
.jet-listing-grid__item:hover .kb-is-ratio-image img.kb-img {
transform: scale(1);
}
.kb-advanced-slide-inner h2{
font-size: 53px !important;
line-height: 64px !important;
}
.site-content h2{
font-size: 36px !important;
line-height: 42px !important;
}
.site-content .jet-listing-grid__item h2{
font-size: 28px !important;
line-height: 36px !important;
}
body.menu-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
body{
font-size: 20px !important;
line-height: 26px !important;
}
/*Gutenberg*/
.kb-button.kb-btn-global-fill {
background-color: #fff !important;
}
.kt-button{
background-color: #fff !important;
border: 1px solid #000 !important;
border-radius: 30px !important;
padding: 12px 30px !important;
color: #000 !important;
transition: background-color 0.4s ease;
}
.kt-button:hover{
background-color: #065339 !important;
border: 1px solid #065339 !important;
border-radius: 30px !important;
padding: 12px 30px!important;
color: #fff !important;
}
p {
margin-bottom: 1.3em;
}
p:empty {
display: block;
min-height: 1em; /* optional: makes it visibly take up space */
}
.wp-block-kadence-advancedbtn .kb-button {
padding: 12px 30px !important;
}
.kt-btn-inner-text{
font-size: 17px !important;
line-height: 25px !important;
}
/* Reset native numbering */
.wp-block-list.punktliste {
counter-reset: punktliste-counter;
list-style: none;
padding-left: 0;
}
/* Style each */
.wp-block-list.punktliste li {
background-color: #E8F0FA;
padding: 0.75em 1em;
margin-bottom: 6px;
border-radius: 4px;
position: relative;
padding-left: 2.5em;
}
/* Custom blue number before each */
.wp-block-list.punktliste li::before {
counter-increment: punktliste-counter;
content: counter(punktliste-counter) ".";
color: #126EDB;
font-weight: bold;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
}
.ast-custom-header a{
color: #000;
}
.ast-custom-header a:hover{
text-decoration: underline;
}
.kb-navigation .sub-menu{
margin-left: 0px !important;
}
.kb-nav-dropdown-toggle-btn .kb-nav-arrow-svg {
width: 32px !important;
height: 32px !important;
}
.ingress{
font-size: 21px;
font-weight: 400;
line-height: 27px;
max-width: 992px;
margin-bottom: 15px;
}
.kb-query-item .ingress, .jet-listing-grid__item .ingress{
font-size: 18px;
font-weight: 400;
line-height: 27px;
margin-bottom: 0px;
}
.jet-listing-grid--blocks{
width: 100%;
}
.home .entry-header{
/*display: none;*/
}
.home #primary{
margin-top: 0px !important;
}
.page .entry-header, .post .entry-header {
margin-bottom: 1.5em;
max-width: 880px;
margin-left: 0px;
margin-right: auto;
}
.my-category-button {
background: #000;
font-weight: bold;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
padding-top: 12px;
padding-right: 30px;
padding-bottom: 14px;
padding-left: 30px;
color: #fff;
/*text-transform: lowercase; */
font-size: 18px;
}
.my-category-button::first-letter {
text-transform: uppercase; /* make only the first letter uppercase */
}
.my-category-button:hover {
/*background-color: #000;*/
color: #fff;
}
.kb-button.knapp-hvit{
background-color: #fff !important;
padding: 15px 30px;
font-size: 18px;
color: #000;
border-radius: 5px !important;;
transition: background-color 0.4s ease, color 0.4s ease;
margin: 0px 10px 10px 0px;
}
.kb-button.knapp-hvit:hover{
background-color: #000 !important;
color: #fff !important;
}
.kb-button.kb-btn-global-outline{
background-color: transparent !important;
padding: 15px 30px !important;
font-size: 18px !important;
color: #fff !important;
border-radius: 5px !important;
border: 1px solid #fff !important;
transition: background-color 0.4s ease, color 0.4s ease;
backdrop-filter: blur(10px);
}
.kb-button.kb-btn-global-outline:hover{
background-color: #000 !important;
border: 1px solid #000 !important;
}
/*Google*/
.ti-inner {
background-color: #fff !important;
}
/*Card*/
.img_parent {
overflow: hidden;
border-radius: 8px;
}
.card{
border-radius: 8px;
}
.card .img_parent .kb-img {
transition: transform 0.3s ease;
}
.card:hover .img_parent .kb-img {
transform: scale(1.05);
}
.card .image-is-svg {
transition: transform 0.3s ease;
display: inline-block; /* or block, depending on layout */
}
/* On card hover, move arrow to the right */
.card:hover .image-is-svg {
transform: translateX(10px); /* adjust distance as needed */
}
figcaption{
font-size: 16px;
}
footer{
border-top: 1px solid #000;
}
footer a{
color: #fff;
text-decoration: underline;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
footer a:hover{
color: #fff;
text-decoration: underline;
}
.kt-svg-icon-link {
display: flex;
align-items: flex-start; /* Align icon and text to top */
}
.kb-svg-icon-wrap {
display: inline-flex;
align-self: flex-start; /* Ensures icon aligns at the top within flex */
}
.entry-content iframe {
display: block;
}
#kontaktpersoner h4{
font-size: 23px !important;
}
#kontaktpersoner ul {
margin: 0 0 0 0;
list-style: none;
line-height: 1.4em;
}
.ansatt_info{
background-color: #fff;
padding: 15px 20px;
border-radius: 6px;
}
/* Hamburger Styles */
#hamburger-toggle{
margin-left: 30px;
}
.hamburger {
width: 30px;
height: 24px;
box-sizing: content-box; /* så padding legger seg utenpå de 24px */
padding: 10px; /* gjør hele flaten klikkbar, også mellom stripene */
margin: 0 0 12px; /* margin-bottom */
cursor: pointer;
position: relative;
z-index: 999;
}
.hamburger span {
pointer-events: none; /* klikk treffer alltid .hamburger, aldri en enkelt stripe */
display: block;
position: absolute;
left: 0;
width: 30px;
height: 4px;
border-radius: 4px;
background: #1E293B;
transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
/* Active = X */
.hamburger.active span:nth-child(1) {
top: 10px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: 10px;
transform: rotate(-45deg);
}
button.hamburger {
all: unset;
box-sizing: content-box;
display: block;
width: 30px;
height: 24px;
padding: 0px;
margin: 0 0 12px;
cursor: pointer;
position: relative;
z-index: 999;
}
/* Custom visible focus only on keyboard navigation */
button.hamburger:focus-visible {
outline: 1px dotted #000; /* Customize color/thickness */
outline-offset: 4px;
border-radius: 4px;
}
/* Megamenu Dropdown */
/*Position absolute*/
#astra_megamenu {
display: none;
position: absolute;
top: 100%; /* Just below the toggle button */
right: 0;
width: 50%;
z-index: 999;
box-shadow:
0 12px 24px -8px rgba(0, 0, 0, 0.14),
0 4px 8px -4px rgba(0, 0, 0, 0.08);
}
@media (max-width:1400px){
#astra_megamenu{
width: 60% !important;
}
}
@media (max-width:1024px){
#astra_megamenu{
width: 100% !important;
}
}
#astra_megamenu {
display: none;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.4s ease;
/*margin-top: 1px;*/
}
/* Optional: For internal padding/styling */
#astra_megamenu .inner {
padding: 20px;
background: #f3f3f3;
}
#astra_megamenu ul.menu > li{
padding: 0px 0px;
/*border-bottom: 1px solid #000;*/
}
#astra_megamenu ul.menu li a{
display: block;
}
/* Den animerte understreken er fjernet – menylenkene har nå
pille-hover fra megameny-blokken lenger ned i fila. */
/*Be om tilbud*/
:root{
--rb-fjell-hoyde: clamp(90px, 16vw, 220px);
}
/* Hindrer at full-bredde-bakgrunnen skaper vannrett rulling.
Kan fjernes hvis temaet allerede håndterer dette. */
html{
overflow-x:clip;
}
/* --- Selve seksjonen ------------------------------------------------ */
.rb-fjell,
.astra-advanced-hook-30 > .kb-row-layout-wrap{
position:relative;
padding-bottom:calc(var(--rb-fjell-hoyde) * .55);
}
/* Innholdet skal ligge over fjellene */
.rb-fjell > *,
.astra-advanced-hook-30 > .kb-row-layout-wrap > *{
position:relative;
z-index:1;
}
/* --- Fjellene: alltid 100 % av skjermbredden ------------------------ */
.rb-fjell::before,
.astra-advanced-hook-30 > .kb-row-layout-wrap::before{
content:"";
position:absolute;
bottom:0;
left:50%;
/* 110vw gir litt overheng i hver ende, slik at mønsteret dekker hele
skjermbredden også når seksjonen er innrammet eller ligger litt
ute av senter. Bakgrunnen strekkes ~10 % – det synes ikke. */
width:110vw;
transform:translateX(-50%);
height:var(--rb-fjell-hoyde);
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201340%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.10'%20d='M0%20320V214l112-58%2096%2044%20104-96%20118%2078%2096-52%20132%2096%20108-138%20122%20104%2096-56%20118%2074%20100-46%20138%2092v64z'/%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.18'%20d='M0%20320V262l128-46%20118%2062%20132-84%20122%2074%20108-52%20140%2096%20118-118%20136%20112%20122-64%20116%2078%20100-34v134z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center bottom;
background-size:100% 100%;
pointer-events:none;
z-index:0;
}
/* --- Variant: fjell øverst i seksjonen ------------------------------ */
.rb-fjell--topp{
padding-bottom:0;
padding-top:calc(var(--rb-fjell-hoyde) * .55);
}
.rb-fjell--topp::before{
top:0;
bottom:auto;
background-position:center top;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201340%20320'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,320)%20scale(1,-1)'%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.10'%20d='M0%20320V214l112-58%2096%2044%20104-96%20118%2078%2096-52%20132%2096%20108-138%20122%20104%2096-56%20118%2074%20100-46%20138%2092v64z'/%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.18'%20d='M0%20320V262l128-46%20118%2062%20132-84%20122%2074%20108-52%20140%2096%20118-118%20136%20112%20122-64%20116%2078%20100-34v134z'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- Varianter: lavere / høyere fjell ------------------------------- */
.rb-fjell--lav{ --rb-fjell-hoyde:clamp(70px,12vw,160px); }
.rb-fjell--stor{ --rb-fjell-hoyde:clamp(120px,22vw,300px); }
/* --- Enklere fjell på mobil ----------------------------------------- */
/* Silhuetten med mange topper blir smal og rotete på mobil, så under
767px byttes den ut med en roligere variant med tre brede topper.
Juster grensen hvis du vil ha den enkle varianten også på nettbrett. */
@media (max-width:767px){
.rb-fjell::before,
.astra-advanced-hook-30 > .kb-row-layout-wrap::before{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.10'%20d='M0%20320V225l150-105%20170%20120%20200-140%20280%20165V320z'/%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.18'%20d='M0%20320V275l190-90%20200%20105%20190-120%20220%20135V320z'/%3E%3C/svg%3E");
}
.rb-fjell--topp::before{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20320'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,320)%20scale(1,-1)'%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.10'%20d='M0%20320V225l150-105%20170%20120%20200-140%20280%20165V320z'/%3E%3Cpath%20fill='%2300663a'%20fill-opacity='.18'%20d='M0%20320V275l190-90%20200%20105%20190-120%20220%20135V320z'/%3E%3C/g%3E%3C/svg%3E");
}
}
@media only screen and (max-width: 1999px) {
.ast-plain-container.ast-no-sidebar #primary {
margin-top: 40px;
margin-bottom: 0px;
}
}
@media (min-width: 1201px) {
.ast-container {
max-width: 1400px;
}
}
@media only screen and (min-width: 992px) {
.single .entry-content > *:not(.alignwide):not(.alignfull) {
max-width: 880px !important; /*Ønsket maksbredde på innhold, må være mindre enn innholdsbredde satt i Astra -> Tilpass -> Single Page, eller Astra -> Tilpass ▸ Enkeltinnlegg.*/
margin-left: auto !important; /*0px: innhold justeres til venstre, auto: innholdet sentreres*/
margin-right: auto !important;
}
.page .entry-content > *:not(.alignwide):not(.alignfull) {
max-width: 880px !important; /*Ønsket maksbredde på innhold, må være mindre enn innholdsbredde satt i Astra -> Tilpass -> Single Page, eller Astra -> Tilpass ▸ Enkeltinnlegg.*/
margin-left: 0 !important; /*0px: innhold justeres til venstre, auto: innholdet sentreres*/
margin-right: auto !important;
}
.alignwide{
max-width: 100% !important;
}
.alignfull {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
max-width: 100vw !important;
width: 100vw !important;
}
.site .site-content #primary .ast-article-single, .ast-separate-container .site-content #secondary .widget {
padding-top: 50px;
/*padding-left: 30px;
padding-right: 30px;*/
}
}
/* =====================================================================
Ringebu Bilruter – modernisert megameny (#astra_megamenu)
---------------------------------------------------------------------
Alt er scopet til #astra_megamenu og rører ingenting annet på siden.
Merk: en del !important er nødvendig fordi Kadence legger egne
responsive regler på de samme elementene.
===================================================================== */
#astra_megamenu{
--rb-green:#00663a;
--rb-green-dark:#004a29;
--rb-mint:#d9e7e1;
--rb-mint-soft:#eef5f1;
--rb-line:#dbe7e1;
--rb-ink:#1e293b;
--rb-muted:#64748b;
}
/* --- 1. Selve panelet ----------------------------------------------- */
#astra_megamenu{
background:linear-gradient(180deg,#ffffff 0%,var(--rb-mint-soft) 100%) !important;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:0 24px 60px -30px rgba(0,73,41,.45), 0 1px 0 rgba(0,73,41,.06);
overflow:hidden;
}
#astra_megamenu > .kt-row-column-wrap{
padding-top:clamp(24px,3vw,40px);
padding-bottom:clamp(24px,3vw,40px);
}
/* --- 2. Overskrifter ------------------------------------------------ */
#astra_megamenu h4{
font-size:12px !important;
font-weight:700;
letter-spacing:.16em !important;
text-transform:uppercase;
color:var(--rb-muted);
margin:0 0 14px !important;
}
#astra_megamenu .wp-block-kadence-iconlist + h4,
#astra_megamenu h4:not(:first-of-type){margin-top:28px !important}
/* --- 3. Kontaktinfo som kort ---------------------------------------- */
#astra_megamenu .kt-svg-icon-list{
display:grid;
gap:8px;
margin:0;
padding:0;
list-style:none;
}
#astra_megamenu .kt-svg-icon-list-item-wrap{
position:relative;
display:flex;
align-items:center;
gap:12px;
margin:0;
padding:12px 14px;
background:#fff;
border:1px solid var(--rb-line);
border-radius:14px;
transition:border-color .2s ease, box-shadow .2s ease;
}
/* Punkter der Kadence legger lenken rundt hele listepunktet mangler
flex-oppsettet de andre får fra li-elementet – da blir avstanden
mellom ikon og tekst mindre enn på resten. */
#astra_megamenu .kt-svg-icon-list-item-wrap > a.kt-svg-icon-link{
display:flex !important;
align-items:center;
gap:12px;
flex:1 1 auto;
min-width:0;
}
/* Hele kortet blir klikkbart – lenken strekkes ut over hele flaten.
Punkter uten lenke (adressen) blir ikke berørt. */
#astra_megamenu .kt-svg-icon-list-item-wrap:has(a){cursor:pointer}
/* Gjelder både lenker i teksten og Kadence sin egen ikon-lenke */
#astra_megamenu .kt-svg-icon-list-item-wrap a::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
}
#astra_megamenu .kb-svg-icon-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
flex:none;
width:34px;
height:34px;
border-radius:10px;
background:var(--rb-mint);
color:var(--rb-green);
}
#astra_megamenu .kb-svg-icon-wrap svg{width:16px;height:16px}
#astra_megamenu .kt-svg-icon-list-text{
font-size:15.5px !important;
font-weight:600;
color:var(--rb-ink);
line-height:1.35;
}
#astra_megamenu .kt-svg-icon-list-item-wrap a{
color:inherit;
text-decoration:none !important;
}
/* --- 4. Menylenkene ------------------------------------------------- */
/* Full bredde på hver lenke, uansett skjermstørrelse */
#astra_megamenu .kb-navigation{
display:grid !important;
grid-template-columns:1fr !important;
justify-content:stretch !important;
justify-items:stretch !important;
gap:2px !important;
}
#astra_megamenu .kb-navigation > li{
display:block;
width:100%;
justify-self:stretch !important;
margin:0 !important;
padding:0 !important;
}
#astra_megamenu .kb-link-wrap{
display:block !important;
width:100% !important;
}
#astra_megamenu a.kb-nav-link-content{
position:relative;
display:flex !important;
align-items:center;
justify-content:flex-start !important;
width:100% !important;
font-size:16.5px !important;
font-weight:600;
color:var(--rb-ink);
padding:12px 40px 12px 14px !important;
border-radius:12px;
text-decoration:none;
/* Bare farge endrer seg – teksten står stille, så listen ikke hopper */
transition:background-color .2s ease, color .2s ease;
}
/* Liten overskrift over menylenkene, så kolonnen balanserer kontaktsiden.
Slett denne regelen hvis du ikke vil ha den. */
#astra_megamenu .kb-navigation::before{
content:"Sider";
display:block;
font-size:12px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--rb-muted);
padding:0 0 10px 14px;
}
/* Pil som toner inn. Den ligger fast på plass og flytter ingenting. */
#astra_megamenu a.kb-nav-link-content::after{
content:"→";
position:absolute;
right:16px;
font-size:1.05em;
line-height:1;
opacity:0;
transition:opacity .2s ease;
}
/* --- 5. "Be om tilbud" som tydelig hovedknapp ------------------------ */
#astra_megamenu .kb-button{
background:var(--rb-green) !important;
border:1px solid var(--rb-green) !important;
color:#fff !important;
border-radius:999px !important;
font-weight:700;
padding:13px 26px !important;
/*box-shadow:0 10px 24px -14px rgba(0,73,41,.8);*/
transition:background-color .2s ease, box-shadow .2s ease;
}
#astra_megamenu .kb-buttons-wrap{margin-top:22px}
/* --- 6. Søkefeltet --------------------------------------------------- */
#astra_megamenu .wp-block-search{
gap:10px;
margin-top:clamp(20px,2.5vw,32px);
}
#astra_megamenu .wp-block-search__input{
border:1px solid var(--rb-line) !important;
border-radius:999px !important;
background:#fff;
padding:12px 20px;
font-size:15px;
color:var(--rb-ink);
box-shadow:none;
transition:border-color .2s ease, box-shadow .2s ease;
}
#astra_megamenu .wp-block-search__input::placeholder{color:var(--rb-muted)}
#astra_megamenu .wp-block-search__input:focus{
border-color:var(--rb-green) !important;
box-shadow:0 0 0 3px rgba(0,102,58,.15);
outline:none;
}
#astra_megamenu .wp-block-search__button{
background:var(--rb-green) !important;
border:1px solid var(--rb-green) !important;
color:#fff !important;
border-radius:999px !important;
padding:12px 26px;
font-weight:700;
transition:background-color .2s ease;
}
/* --- 7. Hover-effekter — bare på mus -------------------------------- */
/* Uten denne sperren henger hover-tilstanden igjen etter et trykk på
mobil, og menyen føles urolig. */
@media (hover:hover) and (pointer:fine){
/* Bare kort som faktisk har en lenke får hover-ramme */
#astra_megamenu .kt-svg-icon-list-item-wrap:has(a):hover{
border-color:var(--rb-green);
box-shadow:0 10px 22px -14px rgba(0,73,41,.55);
}
#astra_megamenu .kt-svg-icon-list-item-wrap:has(a):hover .kt-svg-icon-list-text a{
color:var(--rb-green);
}
#astra_megamenu a.kb-nav-link-content:hover{
background:var(--rb-mint);
color:var(--rb-green);
}
#astra_megamenu a.kb-nav-link-content:hover::after{opacity:1}
#astra_megamenu .kb-button:hover{
background:var(--rb-green-dark) !important;
border-color:var(--rb-green-dark) !important;
box-shadow:0 14px 28px -14px rgba(0,73,41,.9);
}
#astra_megamenu .wp-block-search__button:hover{
background:var(--rb-green-dark) !important;
border-color:var(--rb-green-dark) !important;
}
}
/* Tastaturnavigasjon skal virke uansett enhet */
#astra_megamenu a.kb-nav-link-content:focus-visible{
background:var(--rb-mint);
color:var(--rb-green);
outline:2px solid var(--rb-green);
outline-offset:2px;
}
#astra_megamenu a.kb-nav-link-content:focus-visible::after{opacity:1}
/* --- 8. Mobil -------------------------------------------------------- */
@media (max-width:921px){
#astra_megamenu{
border-radius:0;
box-shadow:none;
width: 100% !important;
}
#astra_megamenu .kb-navigation::before{padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
#astra_megamenu *{transition:none !important}
}
/* =====================================================================
Ringebu Bilruter – kontaktkort i footeren
---------------------------------------------------------------------
Samme kortstil som i megamenyen, men tilpasset mørk grønn bakgrunn:
halvgjennomsiktige kort i stedet for hvite.
Slår automatisk inn på "Kontakt oss"-kolonnen i footeren.
Vil du bruke stilen på en annen kolonne også: åpne kolonnen i
editoren → Avansert → "Ekstra CSS-klasse(r)" → skriv rb-kontaktkort
===================================================================== */
/* Kolonnen "Kontakt oss" i dagens footer. Bytt ut denne linja hvis
blokken bygges på nytt og får en ny klasse – eller sett klassen
rb-kontaktkort på kolonnen i editoren og slett linja. */
.ast-custom-footer .kadence-column27462_d6fd4e-de,
.rb-kontaktkort{
--rb-kort-bg:rgba(255,255,255,.07);
--rb-kort-bg-hover:rgba(255,255,255,.13);
--rb-kort-kant:rgba(255,255,255,.16);
--rb-kort-kant-hover:rgba(255,255,255,.45);
--rb-kort-ikon:rgba(255,255,255,.14);
}
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list,
.rb-kontaktkort .kt-svg-icon-list{
display:grid !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
/* --- Selve kortet ---------------------------------------------------- */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap,
.rb-kontaktkort .kt-svg-icon-list-item-wrap{
position:relative;
display:flex;
align-items:center;
gap:12px !important;
margin:0 !important;
padding:12px 14px !important;
background:var(--rb-kort-bg);
border:1px solid var(--rb-kort-kant);
border-radius:14px;
transition:background-color .2s ease, border-color .2s ease;
}
/* Punkter der Kadence legger lenken rundt hele listepunktet (f.eks.
org.nr.) mangler flex-oppsettet de andre får fra li-elementet.
Uten dette blir avstanden mellom ikon og tekst mindre enn på resten. */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap > a.kt-svg-icon-link,
.rb-kontaktkort .kt-svg-icon-list-item-wrap > a.kt-svg-icon-link{
display:flex !important;
align-items:center;
gap:12px;
flex:1 1 auto;
min-width:0;
}
/* Hele kortet klikkbart der det finnes en lenke */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap:has(a),
.rb-kontaktkort .kt-svg-icon-list-item-wrap:has(a){cursor:pointer}
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap a::after,
.rb-kontaktkort .kt-svg-icon-list-item-wrap a::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
}
/* --- Ikon ------------------------------------------------------------ */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kb-svg-icon-wrap,
.rb-kontaktkort .kb-svg-icon-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
flex:none;
width:34px;
height:34px;
border-radius:10px;
background:var(--rb-kort-ikon);
color:#fff;
}
.ast-custom-footer .kadence-column27462_d6fd4e-de .kb-svg-icon-wrap svg,
.rb-kontaktkort .kb-svg-icon-wrap svg{
width:16px !important;
height:16px !important;
}
/* --- Tekst ----------------------------------------------------------- */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-text,
.rb-kontaktkort .kt-svg-icon-list-text{
font-size:15.5px !important;
font-weight:600;
color:#fff;
line-height:1.35;
}
/* Gjelder både lenker i teksten og Kadence sin egen ikon-lenke */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap a,
.rb-kontaktkort .kt-svg-icon-list-item-wrap a{
color:#fff !important;
text-decoration:none !important;
}
/* --- Hover: bare på mus, og bare på kort som har lenke --------------- */
@media (hover:hover) and (pointer:fine){
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap:has(a):hover,
.rb-kontaktkort .kt-svg-icon-list-item-wrap:has(a):hover{
background:var(--rb-kort-bg-hover);
border-color:var(--rb-kort-kant-hover);
}
}
/* Tastaturnavigasjon */
.ast-custom-footer .kadence-column27462_d6fd4e-de .kt-svg-icon-list-item-wrap:focus-within,
.rb-kontaktkort .kt-svg-icon-list-item-wrap:focus-within{
background:var(--rb-kort-bg-hover);
border-color:var(--rb-kort-kant-hover);
outline:2px solid rgba(255,255,255,.7);
outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
.rb-kontaktkort *{transition:none !important}
}
/* =====================================================================
Ringebu Bilruter – kontaktstripe og tilbudsknapp i headeren
---------------------------------------------------------------------
Kontaktpunktene får samme kortstil som i megamenyen, men liggende
ved siden av hverandre som piller. "Be om tilbud" får samme høyde og
form som pillene, i merkevaregrønt.
Treffer dagens blokker automatisk. Bygges blokkene på nytt og får
nye klasser: sett klassen rb-kontaktstripe på kolonnen med ikonlista,
og rb-topp-knapp på knappeblokken (Avansert → Ekstra CSS-klasse(r)).
===================================================================== */
/* --- Kontaktpiller ---------------------------------------------------- */
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list,
.rb-kontaktstripe .kt-svg-icon-list{
display:flex !important;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
gap:8px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap,
.rb-kontaktstripe .kt-svg-icon-list-item-wrap{
position:relative;
display:flex;
align-items:center;
gap:10px !important;
margin:0 !important;
padding:7px 14px 7px 8px !important;
background:#fff;
border:1px solid #dbe7e1;
border-radius:999px;
transition:border-color .2s ease, box-shadow .2s ease;
}
/* Hele pillen er klikkbar der det finnes en lenke */
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap:has(a),
.rb-kontaktstripe .kt-svg-icon-list-item-wrap:has(a){cursor:pointer}
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap a::after,
.rb-kontaktstripe .kt-svg-icon-list-item-wrap a::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
}
/* Punkter der Kadence pakker hele listepunktet i lenken */
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap > a.kt-svg-icon-link,
.rb-kontaktstripe .kt-svg-icon-list-item-wrap > a.kt-svg-icon-link{
display:flex !important;
align-items:center;
gap:10px;
flex:1 1 auto;
min-width:0;
}
/* Ikon */
.ast-custom-header .kadence-column27461_9e4195-b2 .kb-svg-icon-wrap,
.rb-kontaktstripe .kb-svg-icon-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
flex:none;
width:28px;
height:28px;
margin:0 !important;
border-radius:999px;
background:#d9e7e1;
color:#00663a;
}
.ast-custom-header .kadence-column27461_9e4195-b2 .kb-svg-icon-wrap svg,
.rb-kontaktstripe .kb-svg-icon-wrap svg{
width:14px !important;
height:14px !important;
}
/* Tekst */
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-text,
.rb-kontaktstripe .kt-svg-icon-list-text{
font-size:14.5px !important;
font-weight:600;
color:#1e293b;
line-height:1.2;
white-space:nowrap;
}
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap a,
.rb-kontaktstripe .kt-svg-icon-list-item-wrap a{
color:inherit !important;
text-decoration:none !important;
}
/* --- "Be om tilbud" – samme form og høyde som pillene ---------------- */
.ast-custom-header .kb-btns27461_2ee6a6-f2 .kb-button,
.rb-topp-knapp .kb-button{
display:inline-flex !important;
align-items:center;
justify-content:center;
height:44px;
padding:0 22px !important;
font-size:14.5px !important;
font-weight:700;
line-height:1.2;
background:#00333c !important;
border:1px solid #00333c !important;
color:#fff !important;
border-radius:999px !important;
/*box-shadow:0 10px 24px -14px rgba(0,73,41,.8);*/
transition:background-color .2s ease, box-shadow .2s ease;
}
/* --- Hover: bare på mus ---------------------------------------------- */
@media (hover:hover) and (pointer:fine){
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap:has(a):hover,
.rb-kontaktstripe .kt-svg-icon-list-item-wrap:has(a):hover{
border-color:#00663a;
box-shadow:0 8px 18px -12px rgba(0,73,41,.55);
}
.ast-custom-header .kb-btns27461_2ee6a6-f2 .kb-button:hover,
.rb-topp-knapp .kb-button:hover{
background:#004a29 !important;
border-color:#004a29 !important;
box-shadow:0 12px 26px -14px rgba(0,73,41,.9);
}
}
/* Tastaturnavigasjon */
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap:focus-within,
.rb-kontaktstripe .kt-svg-icon-list-item-wrap:focus-within{
border-color:#00663a;
outline:2px solid #00663a;
outline-offset:2px;
}
/* --- Nedtrapping i headeren ------------------------------------------
1078px – e-postpillen går, headeren begynner å bli trang
767px – "Be om tilbud" går, skjemaet nås fortsatt fra menyen
379px – telefonpillen går, bare logo og meny står igjen
-------------------------------------------------------------------- */
@media (max-width:1199px){
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list,
.rb-kontaktstripe .kt-svg-icon-list{
justify-content:center;
}
/* Finner e-postpunktet på mailto-lenken, ikke på plassering, så
regelen holder selv om rekkefølgen endres. */
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list-item-wrap:has(a[href^="mailto"]),
.rb-kontaktstripe .kt-svg-icon-list-item-wrap:has(a[href^="mailto"]){
display:none !important;
}
}
@media (max-width:992px){
.ast-separate-container #primary {
padding: 0em 0;
}
}
@media (max-width:767px){
.be_om_tilbud_mega{
display: block !important;
}
.ast-custom-header .kb-btns27461_2ee6a6-f2,
.rb-topp-knapp{
display:none !important;
}
.ast-custom-header .kadence-column27461_9e4195-b2 .kt-svg-icon-list,
.rb-kontaktstripe .kt-svg-icon-list{
display:none !important;
}
}
@media (prefers-reduced-motion:reduce){
.rb-kontaktstripe *,
.rb-topp-knapp *{transition:none !important}
}
/* =====================================================================
Ringebu Bilruter – synlig merke på AI-genererte bilder
---------------------------------------------------------------------
SLIK BRUKER DU DEN
Sett klassen rb-ai på blokken i editoren:
Blokk → Avansert → "Ekstra CSS-klasse(r)" → rb-ai
(IKKE i feltet "Egendefinert CSS" – da blir teksten tolket som en
CSS-erklæring, og elementet får aldri klassen.)
Klassen kan settes på ett enkelt bilde, eller på en beholder
(f.eks. bildekarusellen) – da merkes alle bildene inni.
VIKTIG
Dette merket ligger i CSS, ikke i bildefila. Lastes bildet ned eller
deles videre, følger merket ikke med. For innhold som må være merket
etter AI Act, bør merket i tillegg brennes inn i selve bildet.
Legg gjerne "AI-generert" i alt-teksten også, for skjermlesere.
===================================================================== */
/* --- Ankerpunkt ------------------------------------------------------ */
/* Bildeblokker: merket festes til boksen rundt bildet.
Karusellen står bevisst ikke her – dens indre slide-wrapper er
position:absolute fra Kadence, og overstyres den til relative,
kollapser hele karusellen. Slide-elementet er allerede relative. */
.rb-ai .kb-is-ratio-image,
.rb-ai figure:not(:has(.kb-is-ratio-image)),
figure.rb-ai:not(:has(.kb-is-ratio-image)){
position:relative;
}
/* --- Selve merket ---------------------------------------------------- */
.rb-ai .kb-is-ratio-image::after,
.rb-ai .kb-advanced-slide::after,
.rb-ai figure:not(:has(.kb-is-ratio-image))::after,
figure.rb-ai:not(:has(.kb-is-ratio-image))::after{
content:var(--rb-ai-tekst,"AI-generert");
position:absolute;
right:var(--rb-ai-avstand,12px);
bottom:var(--rb-ai-avstand,12px);
z-index:3;
padding:5px 11px;
border-radius:999px;
background:rgba(15,23,42,.6);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
color:#fff;
font-family:"Mulish",system-ui,sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
line-height:1;
text-transform:uppercase;
white-space:nowrap;
pointer-events:none;
}
/* --- Varianter ------------------------------------------------------- */
/* Plassering – legg til ved siden av rb-ai */
.rb-ai--venstre .kb-is-ratio-image::after,
.rb-ai--venstre .kb-advanced-slide::after,
.rb-ai--venstre figure::after,
figure.rb-ai--venstre::after{
right:auto;
left:var(--rb-ai-avstand,12px);
}
.rb-ai--topp .kb-is-ratio-image::after,
.rb-ai--topp .kb-advanced-slide::after,
.rb-ai--topp figure::after,
figure.rb-ai--topp::after{
bottom:auto;
top:var(--rb-ai-avstand,12px);
}
/* Egen tekst eller avstand på ett enkelt bilde: sett variabelen i
blokkens egen stil, f.eks.
--rb-ai-tekst: "AI-illustrasjon";
--rb-ai-avstand: 20px; */
/* --- Mindre skjermer -------------------------------------------------- */
@media (max-width:600px){
.rb-ai .kb-is-ratio-image::after,
.rb-ai .kb-advanced-slide::after,
.rb-ai figure:not(:has(.kb-is-ratio-image))::after,
figure.rb-ai:not(:has(.kb-is-ratio-image))::after{
font-size:10px;
padding:4px 9px;
right:var(--rb-ai-avstand,8px);
bottom:var(--rb-ai-avstand,8px);
}
}
@media only screen and (max-width: 767px) {
h1{
font-size: 30px !important;
line-height: 40px !important;
}
body, p{
font-size: 18px !important;
line-height: 26px !important;
}
#astra_megamenu ul.menu li a {
font-size: 22px;
}
#astra_megamenu .menu{
margin-bottom: 30px;
}
#astra_megamenu .menu .kb-nav-link-content{
padding: 6px 0px;
}
#astra_megamenu ul.menu > li{
padding: 10px 0px;
/*border-bottom: 1px solid #000;*/
}
.kb-advanced-slide-inner h2, .toppbilde_innhold h2{
font-size: 53px !important;
line-height: 64px !important;
}
.site .site-content #primary .ast-article-single {
padding-left: 15px !important;
padding-right: 15px !important;
}
/*To rad kandence blokk*/
.wp-block-kadence-rowlayout h2{
font-size: 21px !important;
line-height: 29px !important;
margin-bottom: 10px;
}
.wp-block-kadence-rowlayout p{
font-size: 16px !important;
line-height: 22px !important;
}
.kb-button {
padding: 10px 20px !important;
}
.kt-btn-inner-text{
font-size: 15px !important;
line-height: 20px !important;
}
.with_frm_style input[type=text], .with_frm_style input[type=email], .with_frm_style input[type=number], .with_frm_style input[type=url], .with_frm_style input[type=tel], .with_frm_style input[type=phone], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, input::placeholder, textarea::placeholder {
font-size: 16px !important;
line-height: 22px !important;
}
.frm_section_heading h3{
font-size: 24px !important;
border-bottom: 1px solid #000 !important;
}
.ingress p{
font-size: 18px !important;
line-height: 28px !important;
}
.site .site-content #primary .ast-article-single {
padding-left: 0px;
padding-right: 0px;
}
.ast-plain-container.ast-no-sidebar .entry-content > .alignfull,
.ast-page-builder-template .ast-no-sidebar .entry-content > .alignfull {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
max-width: calc(100vw);
width: calc(100vw);
}
}
@media only screen and (max-width: 1200px) {
#astra_megamenu{
border-radius:0;
box-shadow:none;
width: 100% !important;
}
.ast-separate-container .entry-content > .alignfull, .ast-separate-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content .alignfull {
margin-left: auto;
margin-right: auto;
}
.jet-container--content-justify-flex-start {
justify-content: flex-start;
width: 100% !important;
}
}
@media (min-width: 1200px) {
.ast-plain-container.ast-no-sidebar #primary {
margin-top: 0px;
margin-bottom: 0px;
}
}
/*
Kadence:
• Mobile: Screens less than 768 px wide
• Tablet: Screens 768 px to 1024 px wide.
• Desktop: Screens greater than 1024 px wide.
Astra
• 544px = covers all phones in portrait mode (including older devices).
• 545px–921px = covers nearly all tablets (portrait and landscape).
• 922px+ = treats larger screens as desktop/laptop.
Bootstrap 5 Breakpoints
• Extra small xs (implicit) < 576px col-12
• Small sm ≥ 576px col-sm-6
• Medium md ≥ 768px col-md-4
• Large lg ≥ 992px col-lg-3
• Extra large xl ≥ 1200px col-xl-2
• XXL (Extra-extra large) xxl ≥ 1400px col-xxl-1
*/