/* * Skjelbreid Poirée — main.css * Tokens fra DESIGN.md v1.0.0. Fonter self-hostet (WOFF2 i assets/fonts/) — * ingen Google Fonts-kall (perf + GDPR). latin + latin-ext, font-display: swap. */ @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-garamond-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root { --sp-teal: #0D2E2E; --sp-sage: #5E7A6D; --sp-sand: #DBC3A9; --sp-sand-text: #7A5C2E; --sp-sage-text: #3F574A; --sp-cream: #F5EFE8; --sp-ink: #1F1F1F; --sp-line: #E5DDCF; /* aliaser brukt av header/footer-skjelettet */ --c-primary: var(--sp-teal); --c-heading: var(--sp-teal); --c-body: var(--sp-ink); --c-muted: var(--sp-sage-text); --c-border: var(--sp-line); --c-bg: var(--sp-cream); --c-bg-soft: #fff; --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-body: 'Manrope', system-ui, sans-serif; --container: 1520px; --gutter: 40px; --gutter-sm: 24px; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --section: 7.5rem; /* 120px scandinavisk pust */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } } body { font-family: var(--ff-body); color: var(--sp-ink); background: var(--sp-cream); line-height: 1.65; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } ul { list-style: none; } a { color: var(--sp-sand-text); text-decoration: none; } /* :where() holder regelen på samme vekt som «a», så knapper og komponentlenker beholder egen farge i hover/fokus. */ a:where(:hover, :focus-visible) { color: var(--sp-teal); } :focus-visible { outline: 2px solid var(--sp-sand-text); outline-offset: 2px; border-radius: 3px; } /* A11Y */ .skip-link.screen-reader-text { position: absolute; left: -9999px; top: 0; background: var(--sp-teal); color: #fff; padding: .5rem 1rem; z-index: 200; border-radius: 4px; } .skip-link.screen-reader-text:focus { left: 1rem; top: 1rem; width: auto; height: auto; } body.is-dev::before { content: 'DEV — ikke offentlig'; display: block; background: #FEF3C7; color: #78350F; text-align: center; font-size: .75rem; padding: .25rem; font-family: ui-monospace, monospace; letter-spacing: .5px; } /* Shared */ .sp-wrap { max-width: none; margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 4.5rem); } .sp-section { padding-block: var(--section); } .sp-section--lys { background: #fff; } .sp-section--sand { background: #EFE7D6; } .sp-label { font-family: var(--ff-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #455852; margin-bottom: .95rem; } .sp-label--light { color: var(--sp-sand); } .sp-h2 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.35rem, 5vw, 3.6rem); line-height: 1.13; color: var(--sp-teal); text-wrap: balance; } .sp-h2--light { color: var(--sp-cream); } .sp-ingress { font-family: var(--ff-display); font-style: italic; font-size: 1.55rem; line-height: 1.45; color: #3d4040; margin-top: 1.1rem; max-width: 56ch; } .sp-prose { max-width: 62ch; margin-top: 1.35rem; } .sp-prose p { margin-bottom: 1rem; font-size: 1.08rem; line-height: 1.62; } .sp-btn { display: inline-block; font-family: var(--ff-body); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 100px; padding: .8rem 1.9rem; border: 1px solid transparent; transition: background .15s, color .15s; } .sp-btn--ghost { background: transparent; border-color: var(--sp-sand); color: var(--sp-sand); } .sp-btn--ghost:hover { background: var(--sp-sand); color: var(--sp-teal); } .sp-btn--solid { background: var(--sp-sand); border-color: var(--sp-sand); color: var(--sp-teal); } .sp-btn--solid:hover { background: #e8d6c1; border-color: #e8d6c1; } .sp-btn--ghost-dark { background: transparent; border-color: var(--sp-teal); color: var(--sp-teal); margin-top: 1.4rem; } .sp-btn--ghost-dark:hover { background: var(--sp-teal); color: var(--sp-cream); } /* Header */ .site-header { background: var(--sp-cream); border-bottom: 1px solid var(--sp-line); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; min-height: 92px; } .site-brand { font-family: var(--ff-display); font-weight: 400; font-size: 1.85rem; letter-spacing: .02em; color: var(--sp-teal); } .main-nav__list { display: flex; gap: var(--space-md); } .main-nav a { font-size: .95rem; font-weight: 500; color: var(--sp-ink); } .mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--sp-teal); } .mobile-toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; } .mobile-menu { display: none; } .mobile-menu.is-open { display: block; padding: var(--space-sm) var(--gutter); border-top: 1px solid var(--sp-line); } /* Hero — fullbredde foto, immersiv */ .sp-hero { position: relative; min-height: 58vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem; color: var(--sp-cream); background: linear-gradient(160deg, #0D2E2E, #15403c); background-size: cover; background-position: center; } .sp-hero.has-img { color: #fff; } .sp-hero__inner { max-width: 840px; margin: 0 auto; } .sp-hero__kicker { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sp-sand); margin-bottom: 1.1rem; } .sp-hero__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.05; letter-spacing: .01em; } .sp-hero__tag { font-size: 1.2rem; color: #eef3f0; margin-top: 1.1rem; max-width: 42ch; margin-inline: auto; } .sp-hero__sted { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,239,232,.72); margin-top: 1rem; } .sp-hero__cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .sp-cta__btns { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; } @media (max-width: 560px) { .sp-cta__btns { gap: .55rem; } } /* Intro */ .sp-intro { text-align: center; } .sp-intro__inner { max-width: 64ch; margin: 0 auto; } .sp-intro .sp-ingress { margin-inline: auto; } /* Tekst + bilde */ .sp-tb__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .sp-tb__inner:not(:has(.sp-tb__media)) { grid-template-columns: 1fr; max-width: 72ch; margin-inline: auto; text-align: center; } .sp-tb__inner:not(:has(.sp-tb__media)) .sp-prose, .sp-tb__inner:not(:has(.sp-tb__media)) .sp-label { margin-inline: auto; } .sp-tb.is-pos-hoyre .sp-tb__media { order: 2; } .sp-tb__media img { display: block; width: 100%; height: auto; border-radius: 8px; } .sp-tb__body .sp-prose { color: #4a443b; } .sp-tb__body .sp-prose blockquote { margin: 0 0 1.9rem; padding: 0; border: 0; font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.28; color: var(--sp-teal); max-width: 26ch; } .sp-tb__body .sp-btn { align-self: flex-start; } .sp-tb__body .sp-prose blockquote p { font-size: inherit; line-height: inherit; margin: 0; } .sp-tb__body .sp-prose blockquote + p { font-size: 1.05rem; line-height: 1.65; max-width: 42ch; } .sp-tb__body .sp-prose p em { font-style: normal; display: inline-block; margin-top: 1rem; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sage-text); } /* Tekst+bilde — full-bredde (bilde til kant) + sand-bakgrunn (møterom-oppsett som original) */ .sp-tb--sand { background: #E9DEC9; } .sp-section.sp-tb--bleed { padding-block: 0; } .sp-tb--bleed .sp-tb__inner { max-width: none; padding: 0; gap: 0; align-items: stretch; } /* Ingen gap: bildekanten skal ligge midt på siden uansett side bildet står på. */ .sp-tb--bleed .sp-tb__media img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; border-radius: 0; } .sp-tb--bleed .sp-tb__body { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 6vw, 5.5rem); padding-inline: clamp(2.5rem, 6vw, 6rem); max-width: 820px; } .sp-tb--bleed .sp-tb__body .sp-prose ul { columns: 2; column-gap: 2rem; } @media (max-width: 860px) { .sp-tb--bleed .sp-tb__inner { grid-template-columns: 1fr; } .sp-tb--bleed .sp-tb__media img { min-height: 280px; } .sp-tb--bleed .sp-tb__body { max-width: none; padding-inline: var(--gutter); } .sp-tb--bleed .sp-tb__body .sp-prose ul { columns: 1; } } /* CTA-band */ .sp-cta { text-align: center; padding-block: 5.5rem; } .sp-cta__inner { max-width: none; margin: 0 auto; } .sp-cta__tekst { font-family: var(--ff-display); font-style: italic; font-size: 1.4rem; color: #dfe8e3; margin-top: .6rem; max-width: none; margin-inline: auto; } .sp-cta .sp-btn { margin-top: 1.6rem; } .sp-cta--mork { background: var(--sp-teal); color: var(--sp-cream); } .sp-cta--lys { background: #EFE7D6; } .sp-cta--lys .sp-label--light { color: var(--sp-sand-text); } .sp-cta--lys .sp-h2--light { color: var(--sp-teal); } .sp-cta--lys .sp-cta__tekst { color: #3f3a33; } .sp-cta--lys .sp-btn--ghost { border-color: rgba(13,46,46,.4); color: var(--sp-teal); } .sp-cta--lys .sp-btn--ghost:hover { background: var(--sp-teal); color: var(--sp-cream); } /* Footer */ .site-footer { background: var(--sp-teal); color: #cdd8d2; padding-block: var(--space-lg); } .site-footer .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .site-footer__copy { font-size: .82rem; color: rgba(245,239,232,.6); } /* Responsive */ @media (max-width: 900px) { .header-inner, .sp-wrap, .site-footer .container { padding-inline: var(--gutter-sm); } .main-nav { display: none; } .mobile-toggle { display: block; } .sp-tb__inner { grid-template-columns: 1fr; } .sp-tb.is-pos-hoyre .sp-tb__media { order: 0; } .sp-section { padding-block: 4rem; } } /* ── Fase 2b/3-seksjoner ── */ .sp-section__head { text-align: center; max-width: 62ch; margin: 0 auto 3.75rem; } .sp-section__head .sp-ingress { max-width: 60ch; } .sp-section__head .sp-label { margin-inline: auto; } /* Priser */ .sp-priser__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .sp-pris-kort { background: #fff; border: 1px solid var(--sp-line); border-radius: 10px; padding: 2rem 1.75rem; } .sp-pris-kort__navn { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; color: var(--sp-teal); } .sp-pris-kort__pris { font-family: var(--ff-display); font-size: 2rem; color: var(--sp-teal); margin: .4rem 0; } .sp-pris-kort__pris span { font-family: var(--ff-body); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-sage-text); vertical-align: middle; } .sp-pris-kort__pris small { font-size: .9rem; color: var(--sp-sage-text); } .sp-pris-kort__merknad { font-size: .9rem; color: var(--sp-sage-text); } .sp-pris-kort__inkl { margin-top: 1rem; display: grid; gap: .4rem; } .sp-pris-kort__inkl li { position: relative; padding-left: 1.3rem; font-size: .95rem; } .sp-pris-kort__inkl li::before { content: '✓'; position: absolute; left: 0; color: var(--sp-sage); } /* Personer */ .sp-personer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; } .sp-person { background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: 12px; padding: 2.1rem 2rem 2.2rem; } .sp-section--dark .sp-person { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); } .sp-person__rolle { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sand-text); margin-bottom: .7rem; } .sp-section--dark .sp-person__rolle { color: var(--sp-sand); } .sp-person__navn { font-family: var(--ff-display); font-weight: 500; font-size: 1.95rem; color: var(--sp-teal); line-height: 1.08; margin-bottom: .8rem; } .sp-section--dark .sp-person__navn { color: #fff; } .sp-person__bio { font-size: .96rem; line-height: 1.65; color: #4a443b; } .sp-section--dark .sp-person__bio { color: rgba(255,255,255,.78); } .sp-person__vm { margin-top: .7rem; font-size: .78rem; font-style: italic; color: var(--sp-sage); } .sp-section--dark .sp-person__vm { color: rgba(255,255,255,.55); } /* Aktivitetsbokser */ .sp-akt__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .sp-akt-boks { position: relative; min-height: 460px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; background: var(--sp-teal); } .sp-akt-boks__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s ease; } .sp-akt-boks.has-foto::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5,22,20,.98) 0%, rgba(5,22,20,.82) 34%, rgba(5,22,20,.4) 64%, rgba(5,22,20,.08) 100%); } .sp-akt-boks:hover .sp-akt-boks__bg { transform: scale(1.05); } .sp-akt-boks__inner { position: relative; z-index: 2; padding: 1.9rem; color: #fff; } .sp-akt-boks__navn { font-family: var(--ff-display); font-weight: 400; font-size: 1.75rem; color: #fff; margin-bottom: .45rem; } .sp-akt-boks__besk { color: rgba(255,255,255,.88); font-size: .96rem; line-height: 1.5; } .sp-akt-boks__partner { margin-top: .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-sand); } .sp-akt-boks__partner a { color: var(--sp-sand); } /* Tre innganger */ .sp-tre__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.75rem; } .sp-inngang { background: var(--sp-teal); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .sp-inngang__foto { aspect-ratio: 16 / 11; overflow: hidden; } .sp-inngang__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-inngang__body { padding: 1.7rem 1.8rem 1.9rem; display: flex; flex-direction: column; flex: 1; } .sp-inngang__navn { font-family: var(--ff-display); font-weight: 500; font-size: 1.6rem; color: #fff; margin-bottom: .55rem; } .sp-inngang__body p { margin: 0 0 1.4rem; font-size: .96rem; line-height: 1.55; color: rgba(245,239,232,.78); } .sp-inngang__lenke { margin-top: auto; align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-sand); text-decoration: none; border: 1px solid rgba(219,195,169,.45); padding: 12px 24px; border-radius: 100px; transition: background .2s, color .2s; } .sp-inngang__lenke:hover { background: var(--sp-sand); color: var(--sp-teal); } /* Brødtekst */ .sp-brod__inner { max-width: 68ch; margin: 0 auto; } .sp-brod__inner .sp-h2 { margin-bottom: 1rem; } /* Sitat */ .sp-sitat { background: var(--sp-sand); } .sp-sitat__inner { max-width: 760px; margin: 0 auto; text-align: center; border: 0; } .sp-sitat__tekst { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.3; color: var(--sp-teal); } .sp-sitat__navn { display: block; margin-top: 1.2rem; font-family: var(--ff-body); font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-sand-text); } /* FAQ (accordion) */ .sp-faq__wrap { max-width: 820px; } .sp-faq__list { margin-top: 2rem; } .sp-faq__item { border-bottom: 1px solid var(--sp-line); } .sp-faq__item:first-child { border-top: 1px solid var(--sp-line); } .sp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.25rem 0; font-family: var(--ff-body); font-weight: 600; font-size: 1.05rem; color: var(--sp-teal); } .sp-faq__q::-webkit-details-marker { display: none; } .sp-faq__icon { position: relative; flex: none; width: 20px; height: 20px; } .sp-faq__icon::before, .sp-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--sp-sand-text); transform: translate(-50%, -50%); transition: transform .2s; } .sp-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .sp-faq__item[open] .sp-faq__icon::after { transform: translate(-50%, -50%) rotate(0); } .sp-faq__a { padding: 0 0 1.4rem; max-width: 68ch; } .sp-faq__a p { font-size: .98rem; line-height: 1.6; color: #3d4040; margin: 0 0 .8rem; } .sp-faq__a p:last-child { margin-bottom: 0; } .sp-faq__q:focus-visible { outline: 2px solid var(--sp-sand-text); outline-offset: 3px; border-radius: 3px; } .sp-section--dark .sp-faq__q { color: var(--sp-cream); } .sp-section--dark .sp-faq__item, .sp-section--dark .sp-faq__item:first-child { border-color: rgba(255,255,255,.16); } .sp-section--dark .sp-faq__icon::before, .sp-section--dark .sp-faq__icon::after { background: var(--sp-sand); } .sp-section--dark .sp-faq__a p { color: rgba(255,255,255,.82); } /* Fasiliteter */ .sp-fas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } .sp-fas__item { padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 8px; border-left: 3px solid var(--sp-sage); } .sp-fas__tittel { display: block; font-weight: 600; color: var(--sp-teal); } .sp-fas__tekst { display: block; font-size: .9rem; color: var(--sp-sage-text); margin-top: .2rem; } /* Anmeldelser */ .sp-anm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .sp-anm-kort { background: #fff; border: 1px solid var(--sp-line); border-radius: 10px; padding: 1.75rem; } .sp-anm-kort blockquote { font-family: var(--ff-display); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: #3f4a45; } .sp-anm-kort figcaption { margin-top: 1rem; font-size: .85rem; } .sp-anm-kort figcaption strong { color: var(--sp-teal); } .sp-anm-kort figcaption span { color: var(--sp-sage-text); } @media (max-width: 700px) { .sp-tre__grid, .sp-priser__grid, .sp-akt__grid, .sp-anm__grid { grid-template-columns: 1fr; } } /* ── Fase 4: header/footer-chrome ── */ .site-header { position: sticky; top: 0; z-index: 50; } .main-nav__list { gap: 1.6rem; } .main-nav a { letter-spacing: .01em; } .main-nav a:hover { color: var(--sp-sand-text); } .header-inner__right { display: flex; align-items: center; gap: 1.8rem; } .site-header__cta { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-teal); border: 1px solid var(--sp-teal); border-radius: 100px; padding: .55rem 1.25rem; white-space: nowrap; transition: background .15s, color .15s; } .site-header__cta:hover { background: var(--sp-teal); color: var(--sp-cream); } @media (max-width: 900px) { .site-header__cta { display: none; } } .site-brand--logo img { height: 54px; width: auto; display: block; } .sp-topnav__logo--img { display: flex; align-items: center; } .sp-topnav__logo--img img { height: 34px; width: auto; display: block; } /* ════════════════════════════════════════════════════════════ FORSIDE — tro replika av Claude-mockup (1. designrunde) ════════════════════════════════════════════════════════════ */ /* Top-nav (mockup) */ .sp-topnav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(1760px, calc(100% - 2.5rem)); z-index: 100; background: var(--sp-cream); border-radius: 100px; box-shadow: 0 8px 30px rgba(13,46,46,.16); display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 30px; height: 66px; } .admin-bar .sp-topnav { top: 48px; } @media (max-width: 782px) { .admin-bar .sp-topnav { top: 56px; } } .sp-topnav__logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; } .sp-topnav__logo b { font-family: var(--ff-display); font-size: 18px; font-weight: 400; letter-spacing: .12em; color: var(--sp-teal); } .sp-topnav__logo span { font-family: var(--ff-body); font-size: 9px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sp-sage); margin-top: 2px; } .sp-topnav__links { display: flex; gap: 36px; list-style: none; } .sp-topnav__links a { font-size: 15.5px; font-weight: 500; letter-spacing: .04em; color: var(--sp-teal); opacity: .8; position: relative; padding-bottom: 5px; } .sp-topnav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--sp-sand); transform: scaleX(0); transition: transform .2s ease; } .sp-topnav__links a:hover { opacity: 1; color: var(--sp-teal); } .sp-topnav__links a:hover::after, .sp-topnav__links .current-menu-item > a::after, .sp-topnav__links .current_page_item > a::after, .sp-topnav__links .current-menu-parent > a::after { transform: scaleX(1); } .sp-topnav__links .current-menu-item > a, .sp-topnav__links .current_page_item > a { opacity: 1; } .sp-topnav__cta { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--sp-teal); padding: 11px 24px; border-radius: 100px; white-space: nowrap; } .sp-topnav__cta:hover { color: #fff; background: #15403c; } .sp-topnav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 4px; } .sp-topnav__burger span { width: 22px; height: 1.5px; background: var(--sp-teal); display: block; transition: transform .22s ease, opacity .18s ease; transform-origin: center; } .sp-topnav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .sp-topnav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .sp-topnav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } body { padding-top: 0; } /* Hero (foto, innhold nederst) */ .fs-hero { height: 100vh; min-height: 700px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 80px; color: #fff; background-size: cover; background-position: center; background-color: #12382f; } .fs-hero__coords { position: absolute; bottom: 32px; left: 56px; font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.5); } .fs-hero__scroll { position: absolute; bottom: 32px; right: 56px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); writing-mode: vertical-rl; } .fs-hero__ctas { display: flex; gap: 16px; position: relative; z-index: 2; } .fs-hero__ctas a { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.65); padding: 14px 36px; border-radius: 100px; backdrop-filter: blur(4px); transition: background .25s, border-color .25s; } .fs-hero__ctas a:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; } /* Intro (monogram + tittel) */ .fs-intro { background: var(--sp-cream); text-align: center; padding: 100px clamp(1.5rem, 5vw, 4.5rem) 80px; } .fs-intro__mono { font-family: var(--ff-display); font-size: 64px; font-weight: 300; font-style: italic; color: var(--sp-sage); opacity: .45; line-height: 1; margin-bottom: 32px; } .fs-intro__label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sage); display: block; margin-bottom: 14px; } .fs-intro h1 { font-family: var(--ff-display); font-size: clamp(46px, 7vw, 80px); font-weight: 400; letter-spacing: .07em; color: var(--sp-teal); line-height: 1.05; margin-bottom: 20px; } .fs-intro__tag { font-family: var(--ff-display); font-size: 22px; font-style: italic; color: var(--sp-sage); opacity: .85; line-height: 1.5; max-width: 560px; margin: 0 auto; } /* Vertikal divider */ .fs-vdiv { display: flex; justify-content: center; padding: 8px 0; background: var(--sp-cream); } .fs-vdiv::after { content: ''; width: 1px; height: 80px; background: var(--sp-sand); } /* Portals (3 kort) */ .fs-portals { background: var(--sp-cream); padding: 20px clamp(1.5rem, 5vw, 4.5rem) 100px; } .fs-portals__head { text-align: center; margin-bottom: 52px; } .fs-portals__head .fs-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sage); display: block; margin-bottom: 14px; } .fs-portals__head h2 { font-family: var(--ff-display); font-size: 42px; font-weight: 400; color: var(--sp-teal); letter-spacing: .03em; } .fs-portals__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .fs-card { background: #fff; overflow: hidden; border-radius: 4px; } .fs-card__img { width: 100%; aspect-ratio: 4/3; display: block; background-size: cover; background-position: center; background-color: var(--sp-sand); } .fs-card__body { padding: 28px 28px 32px; } .fs-card__body h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-teal); margin-bottom: 10px; } .fs-card__body p { font-size: 14px; line-height: 1.65; color: #4a5050; margin-bottom: 24px; } .fs-btn-sm { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-teal); border: 1px solid var(--sp-teal); padding: 10px 24px; border-radius: 100px; transition: background .2s, color .2s; } .fs-btn-sm:hover { background: var(--sp-teal); color: #fff; } /* Mørk split (Om stedet) */ .fs-dark { background: var(--sp-teal); display: grid; grid-template-columns: 55fr 45fr; min-height: 560px; } .fs-dark__img { background-size: cover; background-position: center; } .fs-dark__content { display: flex; flex-direction: column; justify-content: center; padding: 80px 72px; } .fs-dark__content .fs-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sand); display: block; margin-bottom: 14px; } .fs-dark__content h2 { font-family: var(--ff-display); font-size: 46px; font-weight: 300; color: #fff; line-height: 1.25; letter-spacing: .02em; margin-bottom: 24px; } .fs-dark__content p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.68); margin-bottom: 40px; max-width: 380px; } .fs-btn-light { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--sp-sand); border: 1px solid var(--sp-sand); padding: 13px 32px; border-radius: 100px; transition: background .2s, color .2s; } .fs-btn-light:hover { background: var(--sp-sand); color: var(--sp-teal); } /* Eierne (bilde + sitat) */ .fs-owner { background: var(--sp-cream); display: grid; grid-template-columns: 45fr 55fr; min-height: 520px; } .fs-owner__img { background-size: cover; background-position: center; background-color: var(--sp-sand); } .fs-owner__content { display: flex; flex-direction: column; justify-content: center; padding: 80px 80px 80px 72px; } .fs-owner__content .fs-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sage); display: block; margin-bottom: 14px; } .fs-owner__quote { font-family: var(--ff-display); font-size: 28px; font-style: italic; color: var(--sp-teal); line-height: 1.5; margin-bottom: 24px; } .fs-owner__body { font-size: 15px; line-height: 1.75; color: #4a5050; margin-bottom: 32px; max-width: 400px; } .fs-owner__sign { font-family: var(--ff-display); font-size: 22px; font-style: italic; color: var(--sp-sage); letter-spacing: .04em; } /* Fasiliteter (runde ikoner) */ .fs-fac { background: var(--sp-cream); padding: 90px clamp(1.5rem, 5vw, 4.5rem); text-align: center; border-top: 1px solid rgba(13,46,46,.06); } .fs-fac .fs-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sage); display: block; margin-bottom: 14px; } .fs-fac h2 { font-family: var(--ff-display); font-size: 44px; font-weight: 300; color: var(--sp-teal); letter-spacing: .03em; margin-bottom: 16px; } .fs-fac__sub { font-family: var(--ff-display); font-size: 20px; font-style: italic; color: var(--sp-sage); opacity: .8; margin-bottom: 60px; } .fs-fac__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; max-width: 1080px; margin: 0 auto; } .fs-fac__item { display: flex; flex-direction: column; align-items: center; gap: 12px; } .fs-fac__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sp-sand); display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(219,195,169,.12); } .fs-fac__label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-teal); opacity: .75; line-height: 1.4; } /* Galleri (mosaikk) */ .fs-gallery { display: grid; gap: 7px; background: #F5EEE8; grid-auto-rows: 260px; } .fs-gallery--strek-mork { background: var(--sp-teal); } .fs-gallery__item { position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: var(--sp-sage); } /* med srcset/lazy i stedet for bakgrunnsbilde — cover + senter gir samme utsnitt som før. */ .fs-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Fotokreditering — felles hjørnemerke (sp_foto_kred()). Containeren må ha position: relative. */ .sp-kred { position: absolute; right: 8px; bottom: 8px; z-index: 5; max-width: calc(100% - 16px); font-family: var(--ff-body); font-size: .66rem; line-height: 1.4; letter-spacing: .02em; font-weight: 400; text-transform: none; color: #fff; background: rgba(0,0,0,.6); padding: 2px 8px; border-radius: 4px; pointer-events: none; } .sp-tb__media, .sp-inngang__foto { position: relative; } /* Editorial foto-hero: rammen ligger 26px inne (15px på mobil) — merket sitter utenfor den, nede til høyre, uten å berøre koordinater/scroll-hint. */ .sp-phero--editorial .sp-kred { right: 8px; bottom: 3px; } @media (max-width: 640px) { .sp-phero--editorial .sp-kred { right: 22px; bottom: 22px; } } /* Foto & takk — rolig, venstrestilt liste over fotografer */ .sp-foto__inner { max-width: 840px; margin-inline: auto; } .sp-intro:has(+ .sp-foto) { padding-bottom: 2.5rem; } /* Samme bakgrunn som intro rett over → ikke doble seksjonsmarginer */ .sp-intro.sp-section--sand + .sp-foto.sp-section--sand, .sp-intro.sp-section--dark + .sp-foto.sp-section--dark, .sp-intro:not(.sp-section--sand):not(.sp-section--dark) + .sp-foto:not(.sp-section--sand):not(.sp-section--dark) { padding-top: 0; } .sp-foto__head { margin-bottom: 2.25rem; } .sp-foto__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sp-line); } .sp-foto__rad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--sp-line); } .sp-foto__navn { font-family: var(--ff-display); font-size: 1.5rem; line-height: 1.25; color: var(--sp-teal); } .sp-foto__navn a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sp-sand); padding-bottom: 1px; transition: border-color .15s, color .15s; } .sp-foto__navn a:hover, .sp-foto__navn a:focus-visible { color: var(--sp-sage-text); border-bottom-color: var(--sp-sage-text); } .sp-foto__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sp-foto__merknad { font-size: .9rem; color: var(--sp-sage-text); } .sp-section--sand .sp-foto__liste, .sp-section--sand .sp-foto__rad { border-color: rgba(13,46,46,.14); } .sp-section--dark .sp-foto__liste, .sp-section--dark .sp-foto__rad { border-color: rgba(255,255,255,.16); } .sp-section--dark .sp-foto__navn, .sp-section--dark .sp-foto__navn a { color: #fff; } .sp-section--dark .sp-foto__navn a:hover, .sp-section--dark .sp-foto__navn a:focus-visible { color: var(--sp-sand); border-bottom-color: var(--sp-sand); } .sp-section--dark .sp-foto__merknad { color: rgba(245,239,232,.78); } /* Count-drevne oppsett: aldri tomme celler for 3–6 bilder */ .fs-gallery--n3 { grid-template-columns: 2fr 1fr; grid-auto-rows: 196px; } .fs-gallery--n3 .fs-gallery__item:first-child { grid-row: 1 / 3; } .fs-gallery--n4 { grid-template-columns: 1fr 1fr; } .fs-gallery--n5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 260px 260px; } .fs-gallery--n5 .fs-gallery__item:first-child { grid-column: 1; grid-row: 1 / 3; } .fs-gallery--n6 { grid-template-columns: repeat(3, 1fr); } /* Anmeldelser (gullstjerner) */ .fs-reviews { background: var(--sp-cream); padding: 90px clamp(1.5rem, 5vw, 4.5rem); text-align: center; } .fs-reviews__rating { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 52px; } .fs-reviews__label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-teal); } .fs-stars { font-size: 18px; color: #806210; letter-spacing: 2px; } .fs-reviews__count { font-size: 12px; color: #888; } .fs-reviews__count a { color: var(--sp-sage-text); } .fs-reviews__count a:hover { color: var(--sp-teal); } .fs-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); } .fs-review { background: #fff; padding: 28px 24px 24px; border-radius: 4px; text-align: left; } .fs-review__stars { font-size: 14px; color: #806210; margin-bottom: 14px; } .fs-review__text { font-size: 14px; line-height: 1.7; color: #3a4040; margin-bottom: 16px; font-style: italic; } .fs-review__author { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--sp-sage); text-transform: uppercase; } /* Booking-CTA */ .fs-booking { background: var(--sp-teal); padding: 100px clamp(1.5rem, 5vw, 4.5rem); text-align: center; } .fs-booking .fs-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sand); display: block; margin-bottom: 16px; } .fs-booking h2 { font-family: var(--ff-display); font-size: 52px; font-weight: 300; color: #fff; letter-spacing: .04em; margin-bottom: 16px; } .fs-booking p { font-size: 15px; color: rgba(255,255,255,.6); margin-bottom: 44px; line-height: 1.6; } .fs-booking__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .fs-btn-primary { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; background: var(--sp-sand); color: var(--sp-teal); padding: 14px 36px; border-radius: 100px; } .fs-btn-primary:hover { background: #e8d6c1; color: var(--sp-teal); } .fs-btn-secondary { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.4); padding: 14px 36px; border-radius: 100px; } .fs-btn-secondary:hover { background: rgba(255,255,255,.1); color: #fff; } /* Footer (mockup) */ .fs-footer { background: var(--sp-teal); border-top: 1px solid rgba(255,255,255,.06); padding: 72px 80px 48px; } .fs-footer__grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr; gap: 48px; margin-bottom: 64px; } .fs-footer__logo { margin-bottom: 18px; } .fs-footer__logo img { width: 250px; max-width: 80%; height: auto; display: block; } .fs-footer__tag { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.78); max-width: 250px; } .fs-footer__h { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sp-sand); opacity: .95; margin-bottom: 20px; } .fs-footer__col ul { list-style: none; } .fs-footer__col li { margin-bottom: 10px; } .fs-footer__col a { font-size: 15px; color: rgba(255,255,255,.88); } .fs-footer__col a:hover { color: #fff; } .fs-footer__col address { font-style: normal; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.85); } .fs-footer__col address a { color: rgba(255,255,255,.88); font-size: 15px; } .fs-footer__col address a:hover { color: #fff; } .fs-footer__org { display: inline-block; margin-top: .4rem; font-size: 14px; color: rgba(255,255,255,.82); } .fs-footer__finn { display: inline-block; margin-top: 1.1rem; padding: 10px 20px; border: 1px solid rgba(219,195,169,.4); border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--sp-sand); text-decoration: none; transition: background .2s, color .2s; } .fs-footer__finn:hover { background: var(--sp-sand); color: var(--sp-teal); } .fs-footer__social { display: flex; gap: 16px; margin-top: 18px; } .fs-footer__social a { font-size: 14px; color: rgba(255,255,255,.88); } .fs-footer__social a:hover { color: var(--sp-sand); } .fs-footer__bottom { border-top: 1px solid rgba(219,195,169,.2); margin-top: 44px; padding-top: 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .fs-footer__bottom span, .fs-footer__bottom a { font-size: 13px; color: rgba(255,255,255,.72); letter-spacing: .06em; } .fs-footer__bottom a:hover { color: rgba(255,255,255,.6); } .fs-footer__cookiebtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 13px; color: rgba(255,255,255,.72); letter-spacing: .06em; cursor: pointer; } .fs-footer__cookiebtn:hover { color: rgba(255,255,255,.6); } /* Complianz preferanse-panel: mørkere kategori-rader så cream-tekst består WCAG (default lys-grå ble for lys på mørk banner) */ .cmplz-cookiebanner .cmplz-category { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; } .cmplz-cookiebanner .cmplz-always-active { color: #8fcb9b !important; } .sp-akt__mer { text-align: center; margin-top: 2.75rem; } .sp-akt__mer a { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-teal); text-decoration: none; border-bottom: 1px solid var(--sp-sand); padding-bottom: 3px; } .sp-akt__mer a:hover, .sp-akt__mer a:focus-visible { color: var(--sp-sage); } .sp-infogrid__mer { text-align: center; margin-top: 2.75rem; } .sp-infogrid__mer a { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-teal); text-decoration: none; border-bottom: 1px solid var(--sp-sand); padding-bottom: 3px; } .sp-infogrid__mer a:hover, .sp-infogrid__mer a:focus-visible { color: var(--sp-sage); } .sp-section--dark .sp-infogrid__mer a { color: var(--sp-sand); } @media (max-width: 760px) { .fs-footer { padding: 48px 24px 36px; } .fs-footer__grid { grid-template-columns: 1fr; gap: 32px; } } /* Footer — lys variant (footer_tema i SP-innstillinger). Mørk grå/teal på varm lys bunn, AA-kontrast verifisert. */ .fs-footer--lys { background: #EFE7D6; border-top-color: rgba(13,46,46,.14); } .fs-footer--lys .fs-footer__tag { color: #3f3a33; } .fs-footer--lys .fs-footer__h { color: var(--sp-teal); } .fs-footer--lys .fs-footer__col a { color: var(--sp-teal); } .fs-footer--lys .fs-footer__col a:hover { color: var(--sp-sand-text); } .fs-footer--lys .fs-footer__col address { color: #3f3a33; } .fs-footer--lys .fs-footer__col address a { color: var(--sp-teal); } .fs-footer--lys .fs-footer__col address a:hover { color: var(--sp-sand-text); } .fs-footer--lys .fs-footer__org { color: #5c574c; } .fs-footer--lys .fs-footer__finn { border-color: rgba(13,46,46,.35); color: var(--sp-teal); } .fs-footer--lys .fs-footer__finn:hover { background: var(--sp-teal); color: var(--sp-cream); } .fs-footer--lys .fs-footer__social a { color: var(--sp-teal); } .fs-footer--lys .fs-footer__social a:hover { color: var(--sp-sand-text); } .fs-footer--lys .fs-footer__bottom { border-top-color: rgba(13,46,46,.14); } .fs-footer--lys .fs-footer__bottom span, .fs-footer--lys .fs-footer__bottom a { color: #5c574c; } .fs-footer--lys .fs-footer__bottom a:hover { color: var(--sp-teal); } .fs-footer--lys .fs-footer__cookiebtn { color: #5c574c; } .fs-footer--lys .fs-footer__cookiebtn:hover { color: var(--sp-teal); } /* Responsiv forside */ @media (max-width: 900px) { .sp-topnav { padding: 0 20px; height: 64px; } .sp-topnav__links, .sp-topnav__cta { display: none; } .sp-topnav__burger { display: flex; } .sp-topnav { top: 10px; height: 62px; padding: 0 18px; } .sp-topnav__logo--img img { height: 30px; } .fs-portals { padding: 20px 24px 64px; } .fs-portals__grid, .fs-reviews__grid { grid-template-columns: 1fr; } .fs-reviews__grid { padding-inline: 0; } .fs-dark, .fs-owner { grid-template-columns: 1fr; } .fs-dark__img, .fs-owner__img { min-height: 260px; } .fs-dark__content, .fs-owner__content { padding: 48px 24px; } .fs-fac { padding: 56px 24px; } .fs-fac__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .fs-gallery, .fs-gallery--n3, .fs-gallery--n4, .fs-gallery--n5, .fs-gallery--n6 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 190px; } .fs-gallery__item:first-child { grid-column: auto; grid-row: auto; } .fs-gallery--n3 .fs-gallery__item:first-child, .fs-gallery--n5 .fs-gallery__item:first-child { grid-column: 1 / 3; } .fs-intro h1 { font-size: 38px; } .fs-intro, .fs-reviews { padding-left: 24px; padding-right: 24px; } } /* Match sp.nettsmed.dev — noe større fonter + tydeligere kontrast */ .fs-intro__tag { font-size: clamp(19px, 2.6vw, 26px); color: #3d4040; opacity: 1; } .fs-intro__label, .fs-portals__head .fs-label, .fs-fac .fs-label, .fs-owner .fs-label { color: #455852; } .fs-portals__head h2 { font-size: clamp(28px, 4.5vw, 46px); } .fs-fac h2 { font-size: clamp(30px, 5vw, 48px); } .fs-card__body p { color: #3d4040; } .fs-fac__label { opacity: .92; } .sp-topnav__links a { color: #3d3b3b; opacity: 1; } .sp-topnav__links a:hover { color: var(--sp-teal); } .fs-reviews__count { color: #555; } /* Kontaktskjema (Gravity Forms) — tilpasset temaet */ .sp-skjema__inner { max-width: 680px; } .sp-skjema .gform_wrapper { margin-top: 2.5rem; } .sp-skjema .gfield { margin-bottom: 1.1rem; } .sp-skjema .gfield_label, .sp-skjema .gform_wrapper label { font-family: var(--ff-body); font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: var(--sp-teal); margin-bottom: .35rem; display: block; } .sp-skjema .gfield_required { color: var(--sp-sand-text); } .sp-skjema .gform_wrapper input[type=text], .sp-skjema .gform_wrapper input[type=email], .sp-skjema .gform_wrapper input[type=tel], .sp-skjema .gform_wrapper input[type=number], .sp-skjema .gform_wrapper textarea, .sp-skjema .gform_wrapper select { width: 100%; border: 1px solid var(--sp-line); border-radius: 6px; padding: .7rem .9rem; font-family: var(--ff-body); font-size: 1rem; background: #fff; color: var(--sp-ink); } .sp-skjema .gform_wrapper input:focus, .sp-skjema .gform_wrapper textarea:focus, .sp-skjema .gform_wrapper select:focus { outline: 2px solid var(--sp-sage); outline-offset: 1px; border-color: var(--sp-sage); } .sp-skjema .gform_wrapper textarea { min-height: 130px; } .sp-skjema .gform_footer { margin-top: 1.5rem; } .sp-skjema .gform_footer input[type=submit], .sp-skjema .gform_footer button, .sp-skjema .gform_wrapper .gform_button, .sp-skjema button.gform_button { font-family: var(--ff-body) !important; font-size: .8rem !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; background: var(--sp-teal) !important; color: var(--sp-cream) !important; border: 0 !important; border-radius: 100px !important; padding: .9rem 2.2rem !important; cursor: pointer; transition: background .15s; width: auto !important; } .sp-skjema .gform_footer input[type=submit]:hover, .sp-skjema .gform_footer button:hover, .sp-skjema button.gform_button:hover { background: #15403c !important; } .sp-skjema .gform_confirmation_message, .sp-skjema .gform_validation_errors { font-family: var(--ff-body); color: var(--sp-ink); } /* ════════ Bespoke undersider (replika av sp.nettsmed.dev) ════════ */ /* Foto-hero med tittel-overlay */ /* Bildet kommer som --sp-phero-bg (+ --sp-phero-bg-m, mindre fil på mobil) fra malen; inc/ytelse.php preloader samme URL-er. */ .sp-phero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; padding: 7rem clamp(1.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem); color: #fff; background-image: var(--sp-phero-bg); background-size: cover; background-position: center; background-color: #12382f; } .sp-phero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,22,20,.98) 0%, rgba(7,28,25,.75) 40%, rgba(13,46,46,.22) 70%), linear-gradient(to right, rgba(5,22,20,.9) 0%, rgba(7,28,25,.42) 44%, rgba(5,18,16,.08) 68%); } @media (max-width: 640px) { .sp-phero { background-image: var(--sp-phero-bg-m, var(--sp-phero-bg)); } .sp-phero::after { background: linear-gradient(to top, rgba(5,20,18,.99) 0%, rgba(6,26,23,.92) 42%, rgba(9,34,30,.62) 78%, rgba(9,34,30,.42) 100%); } .sp-phero { min-height: 86vh; padding-top: 6rem; } .sp-phero--editorial { min-height: 90vh; } .sp-phero__body { max-width: none; } } .sp-phero__inner { position: relative; z-index: 2; max-width: 600px; margin: 0; } .sp-phero__kicker { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sp-sand); margin-bottom: 1rem; } .sp-phero__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; } .sp-phero__body { font-size: 1.1rem; color: #eef3f0; margin-top: 1.1rem; max-width: 46ch; } .sp-phero__cta { display: flex; gap: .9rem; justify-content: flex-start; flex-wrap: wrap; margin-top: 2rem; } /* Stats-panel ved siden av tekst */ .sp-statsrow { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; } .sp-statsrow__text { max-width: 60ch; } .sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; } .sp-stat { background: var(--sp-teal); color: var(--sp-cream); padding: 2rem 1.25rem; text-align: center; } .sp-stat b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 2.6rem; line-height: 1; } .sp-stat span { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-sand); margin-top: .5rem; } /* Pakke-sammenligning — lyse kort */ .sp-pakker { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(13,46,46,.12); } .sp-pakke { background: #fff; padding: 2.6rem 2.4rem; display: flex; flex-direction: column; } .sp-pakke + .sp-pakke { border-left: 1px solid var(--sp-line); } .sp-pakke--mork { background: var(--sp-teal); } .sp-pakke--mork, .sp-pakke--mork + .sp-pakke { border-left-color: transparent; } .sp-pakke__badge { display: inline-block; align-self: flex-start; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sand-text); background: rgba(219,195,169,.22); padding: .4rem .9rem; border-radius: 100px; margin-bottom: 1.1rem; } .sp-pakke--mork .sp-pakke__badge { color: var(--sp-teal); background: var(--sp-sand); } .sp-pakke__navn { font-family: var(--ff-display); font-weight: 400; font-size: 1.95rem; color: var(--sp-teal); } .sp-pakke--mork .sp-pakke__navn { color: #fff; } .sp-pakke__intro { margin-top: .7rem; font-size: .96rem; line-height: 1.55; color: #4a443b; } .sp-pakke--mork .sp-pakke__intro { color: rgba(255,255,255,.82); } .sp-pakke__priser { margin: 1.6rem 0 1.2rem; display: grid; gap: .6rem; } .sp-pakke__pris { display: flex; flex-direction: column; gap: .1rem; } .sp-pakke__pris b { font-family: var(--ff-display); font-size: 2.4rem; font-weight: 400; line-height: 1.05; color: var(--sp-teal); } .sp-pakke__pris small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sage-text); } .sp-pakke--mork .sp-pakke__pris b { color: var(--sp-sand); } .sp-pakke--mork .sp-pakke__pris small { color: rgba(255,255,255,.7); } .sp-pakke__inkl { display: grid; gap: 0; margin: 1.4rem 0 1.8rem; } .sp-pakke__inkl li { position: relative; padding: .7rem 0 .7rem 1.6rem; font-size: .95rem; color: #4a443b; line-height: 1.4; border-bottom: 1px solid var(--sp-line); } .sp-pakke__inkl li::before { content: '—'; position: absolute; left: 0; color: var(--sp-sage); } .sp-pakke--mork .sp-pakke__inkl li { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.14); } .sp-pakke--mork .sp-pakke__inkl li::before { color: var(--sp-sand); } .sp-pakke .sp-btn { margin-top: auto; align-self: flex-start; } .sp-pakke--mork .sp-btn--solid { background: var(--sp-sand); color: var(--sp-teal); } .sp-pakke__tillegg { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--sp-line); } .sp-pakke__tillegg-label { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sage-text); margin-bottom: .7rem; } .sp-pakke__tillegg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem; margin-bottom: 1.6rem; } .sp-pakke__tillegg-item { background: var(--sp-cream); border-radius: 10px; padding: .7rem .5rem; text-align: center; } .sp-pakke__tillegg-item b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 1.2rem; color: var(--sp-teal); line-height: 1.1; } .sp-pakke__tillegg-item span { display: block; font-size: .72rem; color: var(--sp-sage-text); margin-top: .2rem; line-height: 1.3; } .sp-pakke--mork .sp-pakke__tillegg { border-top-color: rgba(255,255,255,.18); } .sp-pakke--mork .sp-pakke__tillegg-label { color: rgba(255,255,255,.7); } .sp-pakke--mork .sp-pakke__tillegg-item { background: rgba(255,255,255,.08); } .sp-pakke--mork .sp-pakke__tillegg-item b { color: var(--sp-sand); } .sp-pakke--mork .sp-pakke__tillegg-item span { color: rgba(255,255,255,.7); } /* Info-grid (4 kolonner) */ .sp-infogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } .sp-info h3 { font-family: var(--ff-body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-teal); margin-bottom: .6rem; } .sp-info p { font-size: .95rem; color: #4a443b; line-height: 1.6; } /* Bildestripe (revisjonsnotat: mange bilder nedover) */ .sp-imgstrip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; } .sp-imgstrip__item { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--sp-sand); } .sp-imgstrip__item:first-child { grid-row: span 2; aspect-ratio: auto; } @media (max-width: 820px) { .sp-statsrow, .sp-pakker { grid-template-columns: 1fr; grid-auto-flow: row; } .sp-pakke + .sp-pakke { border-left: 0; border-top: 1px solid var(--sp-line); } .sp-infogrid { grid-template-columns: 1fr 1fr; } .sp-imgstrip { grid-template-columns: 1fr 1fr; } .sp-imgstrip__item:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 16/9; } } /* Fasiliteter — split (tekst venstre + ikoner høyre), som original */ .sp-facsplit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; } .sp-facsplit__text { max-width: 56ch; } /* Fasilitet-split — sentrert (kun ikoner) */ .sp-facsplit--sentrert { text-align: center; } .sp-facsplit--sentrert .sp-section__head { max-width: none; } .sp-facsplit--sentrert .sp-section__head .sp-ingress { max-width: 56ch; } .sp-facsplit__icons.sp-facsplit__icons--sentrert { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(1.1rem, 2.6vw, 3rem); max-width: none; margin: 2.6rem auto 0; } .sp-facsplit__icons--sentrert .sp-facsplit__item { flex: 0 0 auto; } .sp-facsplit__icons--sentrert .sp-facsplit__icon { width: 50px; height: 50px; } .sp-facsplit__icons--sentrert .sp-facsplit__label { white-space: nowrap; } @media (max-width: 640px) { .sp-facsplit__icons.sp-facsplit__icons--sentrert { flex-wrap: wrap; gap: 1.5rem 1.8rem; } } /* Foto-hero — sentrert (forside) */ .sp-phero--sentrert { justify-content: center; text-align: center; } .sp-phero--sentrert .sp-phero__inner { margin: 0 auto; max-width: 720px; } .sp-phero--sentrert .sp-phero__cta { justify-content: center; } /* Foto-hero — editorial-forside (ramme + monogram-vannmerke + vignett) */ /* Forsiden fyller hele skjermen på desktop (unntak fra «seksjon 2 synlig», Eirik 6.11: elegansen veier tyngre her). Sløret er samlet nede til venstre bak teksten, så peisen og vinduene til høyre står lyse. Målt 6.11: kicker 7,9–13,6:1, tittel 11,6–16,7:1 ved 1024–1920 px. */ .sp-phero--editorial { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding: 8rem clamp(1.5rem,5vw,4.5rem) clamp(4rem,7vw,5.5rem); } .sp-phero--editorial::after { background: radial-gradient(118% 116% at 50% 42%, transparent 50%, rgba(5,18,16,.45) 100%), radial-gradient(125% 125% at 0% 100%, rgba(5,18,16,.95) 0%, rgba(5,18,16,.88) 30%, rgba(5,18,16,.62) 50%, rgba(5,18,16,.22) 70%, rgba(5,18,16,0) 86%), linear-gradient(to right, rgba(5,18,16,.5) 0%, rgba(5,18,16,.26) 40%, rgba(5,18,16,0) 60%); } .sp-phero__frame { position: absolute; inset: 26px; border: 1px solid rgba(219,195,169,.4); border-radius: 5px; z-index: 2; pointer-events: none; } .sp-phero__wm { position: absolute; top: 4%; right: 6%; z-index: 1; font-family: var(--ff-display); font-style: italic; font-size: clamp(7rem, 15vw, 13rem); line-height: 1; color: rgba(255,255,255,.1); pointer-events: none; } .sp-phero--editorial .sp-phero__inner { max-width: 760px; z-index: 3; } .sp-phero__rule { display: block; width: 66px; height: 1px; background: var(--sp-sand); margin-bottom: 1.7rem; } .sp-phero--editorial .sp-phero__kicker { letter-spacing: .22em; margin-bottom: 1.4rem; } .sp-phero--editorial .sp-phero__title { font-size: clamp(3rem, 6.8vw, 5.2rem); line-height: .98; font-weight: 500; } .sp-phero--editorial .sp-phero__body { font-size: 1.2rem; max-width: 34ch; margin-top: 1.5rem; } .sp-phero--editorial .sp-phero__cta { align-items: center; } .sp-phero__link { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(219,195,169,.7); padding-bottom: 6px; } .sp-phero__coords { position: absolute; right: 40px; bottom: 44px; transform: rotate(180deg); writing-mode: vertical-rl; z-index: 3; font-size: 12px; letter-spacing: .22em; color: var(--sp-sand); font-weight: 600; text-shadow: 0 1px 12px rgba(5,18,16,.75); } .sp-phero__scroll { position: absolute; left: 50%; bottom: 1.7rem; transform: translateX(-50%); z-index: 3; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: 0 1px 12px rgba(5,18,16,.75); } @media (max-width: 700px) { .sp-phero--editorial { min-height: 86vh; } .sp-phero__frame { inset: 15px; } .sp-phero__wm { font-size: 6rem; } .sp-phero__coords { display: none; } } /* Tekst+bilde — mørk (teal) variant */ .sp-tb--mork .sp-label { color: var(--sp-sand); } .sp-tb--mork .sp-h2 { color: #fff; } .sp-tb--mork .sp-tb__body .sp-prose, .sp-tb--mork .sp-tb__body .sp-prose p { color: rgba(255,255,255,.78); } .sp-tb--mork .sp-tb__body .sp-prose em { color: rgba(255,255,255,.6); } .sp-tb--mork .sp-btn--ghost-dark { border-color: rgba(255,255,255,.5); color: #fff; } .sp-facsplit__icons { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem 1rem; } .sp-facsplit__item { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; } .sp-facsplit__icon { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--sp-sand); display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(219,195,169,.14); } .sp-facsplit__label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-teal); opacity: .82; line-height: 1.3; } /* Praktisk info — kort med ikon (mer interessant) */ .sp-infogrid { grid-template-columns: repeat(4, 1fr); } .sp-info { background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: 12px; padding: 1.75rem 1.5rem; } .sp-info__icon { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--sp-line); color: var(--sp-teal); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .sp-section--dark .sp-info { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); } .sp-section--dark .sp-info__icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--sp-sand); } .sp-section--dark .sp-info h3 { color: #fff; } .sp-section--dark .sp-info p { color: rgba(255,255,255,.78); } .sp-info__icon svg, .sp-facsplit__icon svg { width: 22px; height: 22px; } .sp-facsplit__icon { color: var(--sp-teal); } .sp-info h3 { font-family: var(--ff-body); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-teal); margin-bottom: .5rem; } /* Rommene-seksjon + brudesuite-callout */ .sp-rommene { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; } .sp-rommene__media { aspect-ratio: 4/3; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--sp-sand); } .sp-suite { margin-top: 1.5rem; background: var(--sp-teal); color: var(--sp-cream); border-radius: 12px; padding: 1.5rem 1.75rem; } .sp-suite b { display: block; font-family: var(--ff-display); font-size: 1.5rem; color: #fff; } .sp-suite span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sand); } @media (max-width:820px){ .sp-facsplit, .sp-rommene { grid-template-columns: minmax(0, 1fr); } .sp-infogrid { grid-template-columns: 1fr 1fr; } } /* Mørk «pust»-seksjon (rytme tilbake) */ .sp-section--dark { background: var(--sp-teal); display: flow-root; } .sp-404 { text-align: center; background: #fff; } .sp-404__inner { max-width: 640px; margin-inline: auto; padding-block: 3rem; } .sp-404__lenker { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } .sp-404__nav { margin-top: 2.75rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .sp-404__nav a { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-sage-text); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; } .sp-404__nav a:hover, .sp-404__nav a:focus-visible { border-bottom-color: var(--sp-sage); color: var(--sp-teal); } .sp-section--dark .sp-ingress { color: rgba(255,255,255,.82); } .sp-section--dark .sp-h2 { color: var(--sp-cream); } .sp-section--dark .sp-label { color: var(--sp-sand); } .sp-section--dark .sp-prose p, .sp-section--dark .sp-prose li { color: rgba(245,239,232,.85); } .sp-section--dark .sp-prose strong { color: #fff; } .sp-section--dark .sp-stats { background: rgba(255,255,255,.1); } .sp-section--dark .sp-stat { background: rgba(255,255,255,.05); } .sp-section--dark .sp-btn--ghost-dark { border-color: var(--sp-sand); color: var(--sp-sand); } .sp-section--dark .sp-btn--ghost-dark:hover { background: var(--sp-sand); color: var(--sp-teal); } /* Mobilmeny-panel (pille-header) */ .sp-mobile-menu { display: none; } .sp-mobile-menu.is-open { display: block; position: fixed; top: 76px; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 3rem)); z-index: 99; background: var(--sp-cream); border-radius: 20px; box-shadow: 0 10px 34px rgba(13,46,46,.18); padding: .75rem 1.5rem; } .admin-bar .sp-mobile-menu.is-open { top: 108px; } .sp-mobile-menu__list { display: flex; flex-direction: column; list-style: none; } .sp-mobile-menu__list a { display: block; padding: .8rem .25rem; font-size: 1.05rem; color: var(--sp-teal); border-bottom: 1px solid var(--sp-line); } .sp-mobile-menu__list li:last-child a { border-bottom: 0; } /* «Anbefalt av»-tillitsstripe */ .sp-anbefalt { background: var(--sp-cream); padding: 3rem var(--gutter); text-align: center; } .sp-anbefalt__label { font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sp-sage-text); margin-bottom: 1.3rem; } .sp-anbefalt__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.4rem, 4vw, 3.2rem); } .sp-anbefalt__item { font-family: var(--ff-display); font-style: italic; font-size: clamp(1rem, 1.7vw, 1.3rem); color: var(--sp-teal); opacity: .8; letter-spacing: .02em; transition: opacity .15s; } .sp-anbefalt__item:hover { opacity: 1; color: var(--sp-teal); } @media (max-width: 600px) { .sp-anbefalt__row { gap: 1.1rem 2rem; } } /* Kontakt (info + skjema) */ .sp-kontakt__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .sp-kontakt__ingress { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; color: #4a443b; max-width: 42ch; } .sp-kontakt__finn { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 2.25rem; padding: 1.2rem 1.4rem; background: var(--sp-teal); border-radius: 12px; text-decoration: none; transition: background .2s; } .sp-kontakt__finn:hover { background: #0a2421; } .sp-kontakt__finn-ikon { flex: 0 0 auto; color: var(--sp-sand); display: flex; } .sp-kontakt__finn-tekst { flex: 1; font-size: .9rem; line-height: 1.45; color: rgba(245,239,232,.9); } .sp-kontakt__finn-pil { flex: 0 0 auto; color: var(--sp-sand); font-size: 1.15rem; } .sp-kontakt__blokker { display: grid; gap: 1.4rem; } .sp-kontakt__blokk { padding-top: 1.4rem; border-top: 1px solid var(--sp-line); } .sp-kontakt__blokk h3 { font-family: var(--ff-body); font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sage-text); margin-bottom: .5rem; } .sp-kontakt__blokk p { font-size: 1rem; line-height: 1.7; color: #3d4040; } .sp-kontakt__lenker { list-style: none; padding: 0; margin: 0; } .sp-kontakt__lenker li { margin-bottom: .25rem; } .sp-kontakt__lenker a { color: var(--sp-teal); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .sp-kontakt__lenker a:hover { border-color: var(--sp-sand); } .sp-kontakt__sosialt { display: flex; gap: .7rem; margin-top: 1rem; } .sp-kontakt__sosialt a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sp-line); display: flex; align-items: center; justify-content: center; color: var(--sp-teal); transition: background .2s, color .2s, border-color .2s; } .sp-kontakt__sosialt a:hover { background: var(--sp-teal); color: var(--sp-cream); border-color: var(--sp-teal); } .sp-kontakt__form { background: var(--sp-teal); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: clamp(1.8rem, 3vw, 2.6rem); } .sp-kontakt__form h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.9rem; color: var(--sp-cream); margin-bottom: .45rem; } .sp-kontakt__form > p, .sp-kontakt__form .gform_wrapper label, .sp-kontakt__form .gfield_label, .sp-kontakt__form .gform_description { color: rgba(255,255,255,.82); } .sp-kontakt__form .gfield_required { color: var(--sp-sand); } .sp-kontakt__form-ingress { font-size: .96rem; color: #4a443b; margin-bottom: 1.6rem; line-height: 1.55; } @media (max-width: 860px) { .sp-kontakt__grid { grid-template-columns: 1fr; } } /* Kart (Finn oss) — høyt, smalt gråtone-kart */ .sp-kart__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .sp-kart__embed { aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; border: 1px solid var(--sp-line); width: 100%; } .sp-kart__embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); } .sp-kart--mork .sp-kart__embed { border-color: rgba(255,255,255,.16); } .sp-kart--mork .sp-kart__embed iframe { filter: grayscale(1) invert(.92) contrast(.9); } @media (max-width: 860px) { .sp-kart__grid { grid-template-columns: 1fr; } .sp-kart__embed { aspect-ratio: 16 / 10; } } /* Tidslinje (intro + vertikal historie) */ .sp-tidslinje__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .sp-tidslinje__liste { list-style: none; margin: 0; padding: 0; position: relative; } .sp-tidslinje__liste::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 14px; width: 1px; background: var(--sp-line); } .sp-tidslinje__punkt { position: relative; padding: 0 0 2.4rem 2.5rem; } .sp-tidslinje__punkt:last-child { padding-bottom: 0; } .sp-tidslinje__punkt::before { content: ''; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--sp-cream); border: 2px solid var(--sp-sand); } .sp-tidslinje__aar { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-sage-text); margin-bottom: .4rem; } .sp-tidslinje__navn { font-family: var(--ff-display); font-weight: 500; font-size: 1.55rem; color: var(--sp-teal); margin-bottom: .5rem; } .sp-tidslinje__tekst { font-size: 1rem; line-height: 1.65; color: #4a443b; max-width: 54ch; } @media (max-width: 820px) { .sp-tidslinje__grid { grid-template-columns: 1fr; } } /* Gravity Forms i kontakt-kortet — merkevare-styling */ .sp-kontakt__form .gform_fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 13px 16px !important; } .sp-kontakt__form .gform_fields > .gfield { grid-column: auto !important; margin: 0 !important; } .sp-kontakt__form .gform_fields > .gfield--type-textarea, .sp-kontakt__form .gform_fields > .gfield--type-html, .sp-kontakt__form .gform_fields > .gfield--type-consent { grid-column: 1 / -1 !important; } .sp-kontakt__form .gfield textarea { min-height: 120px; } .sp-kontakt__form .gform_footer { margin-top: 16px !important; padding-top: 0 !important; } .sp-kontakt__form .ginput_container { margin-top: 5px !important; } @media (max-width: 460px) { .sp-kontakt__form .gform_fields { grid-template-columns: 1fr !important; } } .sp-kontakt__form input[type=text], .sp-kontakt__form input[type=email], .sp-kontakt__form input[type=tel], .sp-kontakt__form input[type=date], .sp-kontakt__form input[type=number], .sp-kontakt__form textarea, .sp-kontakt__form select { width: 100%; padding: 12px 14px; border: 1px solid var(--sp-line); border-radius: 8px; font-family: var(--ff-body); font-size: .95rem; background: #fdfbf7; color: #2c2c2a; } .sp-kontakt__form input:focus, .sp-kontakt__form textarea:focus, .sp-kontakt__form select:focus { border-color: var(--sp-sage); box-shadow: 0 0 0 3px rgba(94,122,109,.4); } .sp-kontakt__form .gform_button, .sp-kontakt__form input[type=submit] { background: var(--sp-sand) !important; color: var(--sp-teal) !important; border: 0 !important; padding: 15px 30px !important; border-radius: 100px !important; font-family: var(--ff-body) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; cursor: pointer; width: 100%; transition: background .2s; } .sp-kontakt__form .gform_button:hover, .sp-kontakt__form input[type=submit]:hover { background: #e9d3b6 !important; } .sp-kontakt__form .gfield_label { font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .04em; color: rgba(255,255,255,.82) !important; } .sp-kontakt__form .gfield_required { color: var(--sp-sage-text) !important; font-weight: 400; } /* Seksjonsbibliotek (intern) */ .sp-phero--biblio::after { display: none; } .sp-phero__inner--center { max-width: 760px; margin: 0 auto; text-align: center; } .sp-phero__body--center { margin-inline: auto; max-width: 62ch; } /* Lys hero-variant: lyst slør + mørk tekst, bildet forblir lyst */ .sp-phero--lys { color: var(--sp-teal); background-color: #e8e0d5; } .sp-phero--lys::after { background: linear-gradient(to top, rgba(245,239,232,.97) 0%, rgba(245,239,232,.72) 34%, rgba(245,239,232,.10) 66%), linear-gradient(to right, rgba(245,239,232,.88) 0%, rgba(245,239,232,.40) 42%, rgba(245,239,232,.04) 66%); } @media (max-width: 640px) { .sp-phero--lys::after { background: linear-gradient(to top, rgba(245,239,232,.98) 0%, rgba(245,239,232,.88) 44%, rgba(245,239,232,.30) 100%); } } .sp-phero--lys.sp-phero--editorial::after { background: linear-gradient(to top, rgba(245,239,232,.97) 0%, rgba(245,239,232,.70) 36%, rgba(245,239,232,.08) 68%), linear-gradient(to right, rgba(245,239,232,.85) 0%, rgba(245,239,232,.35) 46%, rgba(245,239,232,.02) 70%); } .sp-phero--lys .sp-phero__kicker { color: var(--sp-sand-text, #8a6d47); } .sp-phero--lys .sp-phero__title { color: var(--sp-teal); } .sp-phero--lys .sp-phero__body { color: #3f3a33; } .sp-phero--lys .sp-phero__rule { background: var(--sp-sand-text, #8a6d47); } .sp-phero--lys .sp-phero__link { color: var(--sp-teal); border-bottom-color: rgba(13,46,46,.4); } .sp-phero--lys .sp-phero__coords { color: var(--sp-sand-text, #8a6d47); text-shadow: none; } .sp-phero--lys .sp-phero__scroll { color: rgba(13,46,46,.6); text-shadow: none; } .sp-phero--lys .sp-phero__wm { color: rgba(13,46,46,.05); } .sp-phero--lys .sp-phero__frame { border-color: rgba(13,46,46,.18); } .sp-phero--lys .sp-btn--ghost { border-color: rgba(13,46,46,.4); color: var(--sp-teal); } .sp-phero--lys .sp-btn--ghost:hover { background: var(--sp-teal); color: var(--sp-cream); } .sp-biblio { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .sp-biblio__kort { background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: 10px; padding: 1.25rem 1.4rem; } section[style*="#fff"] .sp-biblio__kort { background: #fbf8f3; } .sp-biblio__kort h3 { font-family: var(--ff-display); font-size: 1.3rem; color: var(--sp-teal); margin-bottom: .35rem; } .sp-biblio__kort p { font-size: .92rem; color: #4a443b; line-height: 1.5; } .sp-biblio__brukt { display: inline-block; margin-top: .8rem; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-sage-text); } /* Kort-grid (tekstkort, valgfri mørk) */ .sp-kortgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .sp-kortgrid__kort { background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: 12px; padding: 1.75rem; } .sp-section--dark .sp-kortgrid__kort { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .sp-kortgrid__badge { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-sage-text); margin-bottom: .6rem; } .sp-kortgrid__kort h3 { font-family: var(--ff-display); font-size: 1.55rem; color: var(--sp-teal); margin-bottom: .5rem; } .sp-section--dark .sp-kortgrid__kort h3 { color: var(--sp-sand); } .sp-kortgrid__kort p { font-size: .96rem; line-height: 1.55; color: #4a443b; } .sp-section--dark .sp-kortgrid__kort p { color: rgba(255,255,255,.8); } /* Fasilitet-split — mørk variant */ .sp-section--dark .sp-facsplit__icon { border-color: rgba(255,255,255,.32); color: var(--sp-sand); background: rgba(255,255,255,.06); } .sp-section--dark .sp-facsplit__icon svg { stroke: var(--sp-sand); } .sp-section--dark .sp-facsplit__label { color: rgba(255,255,255,.82); } /* Sammenhengende mørke seksjoner leses som én (f.eks. «Plass til alle» + romkort) */ .sp-section--dark + .sp-section--dark { padding-top: 0; } .sp-section__head:empty { display: none; } .sp-section--dark + .sp-section--dark .sp-kortgrid { margin-top: 0; } /* Kontrast (UU): badge mot mørk bakgrunn = sand, ikke sage */ .sp-section--dark .sp-kortgrid__badge { color: var(--sp-sand); } .sp-kortgrid__kort--lenke { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; } .sp-kortgrid__kort--lenke:hover, .sp-kortgrid__kort--lenke:focus-visible { border-color: var(--sp-sage); transform: translateY(-2px); } .sp-kortgrid__pil { margin-top: auto; padding-top: 1rem; color: var(--sp-sage-text); font-size: 1.15rem; } .sp-section--dark .sp-kortgrid__pil { color: var(--sp-sand); } /* Tema-utvidelse: mørk variant for redaksjonelle innholdsseksjoner */ .sp-section--dark.sp-sitat { background: var(--sp-teal); } .sp-section--dark .sp-sitat__tekst { color: var(--sp-cream); } .sp-section--dark .sp-sitat__navn { color: var(--sp-sand); } .sp-section--dark .sp-fas__item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .sp-section--dark .sp-fas__tittel { color: #fff; } .sp-section--dark .sp-fas__tekst { color: rgba(255,255,255,.78); } .sp-section--dark .sp-anm-kort { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .sp-section--dark .sp-anm-kort blockquote { color: rgba(255,255,255,.9); } .sp-section--dark .sp-anm-kort figcaption strong { color: var(--sp-sand); } .sp-section--dark .sp-anm-kort figcaption span { color: rgba(255,255,255,.6); } .sp-section--dark .sp-tidslinje__liste::before { background: rgba(255,255,255,.2); } .sp-section--dark .sp-tidslinje__punkt::before { background: var(--sp-teal); border-color: var(--sp-sand); } .sp-section--dark .sp-tidslinje__aar { color: rgba(255,255,255,.6); } .sp-section--dark .sp-tidslinje__navn { color: var(--sp-sand); } .sp-section--dark .sp-tidslinje__tekst { color: rgba(255,255,255,.82); } .sp-section--dark .sp-pris-kort { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .sp-section--dark .sp-pris-kort__navn, .sp-section--dark .sp-pris-kort__pris { color: var(--sp-cream); } .sp-section--dark .sp-pris-kort__pris span, .sp-section--dark .sp-pris-kort__pris small, .sp-section--dark .sp-pris-kort__merknad { color: rgba(255,255,255,.7); } .sp-section--dark .sp-pris-kort__inkl li { color: rgba(255,255,255,.85); } .sp-section--dark .sp-pris-kort__inkl li::before { color: var(--sp-sand); } .sp-section--dark .sp-akt__mer a { color: var(--sp-sand); border-bottom-color: rgba(219,195,169,.5); } /* Tilbudsband (slankt promo-band, som original-vintertilbud) */ .sp-tilbud { background: var(--sp-teal); color: #fff; padding-block: 1.05rem; } .sp-tilbud__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 1.75rem; flex-wrap: wrap; } .sp-tilbud__left { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .sp-tilbud__merke { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-teal); background: var(--sp-sand); padding: .45rem 1rem; border-radius: 100px; white-space: nowrap; } .sp-tilbud__tekst { font-size: .98rem; color: rgba(255,255,255,.88); margin: 0; } .sp-tilbud__tekst strong, .sp-tilbud__tekst b { color: #fff; font-weight: 600; } .sp-tilbud__kode { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sand); border: 1px solid rgba(219,195,169,.5); padding: .5rem 1.1rem; border-radius: 100px; white-space: nowrap; } /* Footer — mørkere teal + sand-skille gir tydelig luft fra CTA-bandet over */ .sp-footer { background: #0A1F1E; color: #c2cfc9; border-top: 1px solid rgba(219,195,169,.28); padding-block: 3.5rem 1.5rem; } .sp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } .sp-footer__name { font-family: var(--ff-display); font-size: 1.6rem; color: var(--sp-cream); margin-bottom: .6rem; } .sp-footer__head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-sand); margin-bottom: .7rem; } .sp-footer a { color: #c2cfc9; } .sp-footer a:hover { color: var(--sp-sand); } .sp-footer p { margin-bottom: .35rem; font-size: .92rem; } .sp-footer__menu, .sp-footer__social { display: grid; gap: .4rem; font-size: .92rem; } .sp-footer__bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(245,239,232,.12); } .sp-footer__bottom p { font-size: .8rem; color: rgba(245,239,232,.55); margin: 0; } @media (max-width: 760px) { .sp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .sp-footer__grid { grid-template-columns: 1fr; } } /* ===== Tilgjengelighetskalender (section-kalender.php + assets/js/kalender.js) ===== Kortet er alltid hvitt, så dagrutene har samme kontrast på lys, sand og mørk seksjon. Opptatt = gjennomstreket (ikke rødt), reservert = stiplet ramme: status leses uten farge. */ .sp-kal [hidden] { display: none !important; } .sp-kal__kort { max-width: 960px; margin: 0 auto; background: #fff; border: 1px solid var(--sp-line); border-radius: 14px; padding: clamp(16px, 3vw, 32px); color: var(--sp-ink); } .spk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; } .spk-status { font-family: var(--ff-display); font-size: 1.15rem; color: var(--sp-teal); text-align: center; margin: 0; } .spk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Månedsvelgeren står der månedsnavnet sto: ser ut som overskriften, men kan åpnes for å hoppe frem. */ .spk-hopp { position: relative; display: inline-flex; align-items: center; } .spk-hopp select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; border-radius: 100px; font-family: var(--ff-display); font-size: 1.15rem; color: var(--sp-teal); padding: .35rem 2rem .35rem .9rem; cursor: pointer; text-align: center; } .spk-hopp::after { content: ""; position: absolute; right: .8rem; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--sp-teal); border-bottom: 1.5px solid var(--sp-teal); transform: rotate(45deg); pointer-events: none; } .spk-hopp select:hover { border-color: var(--sp-line); } .spk-hopp select:focus-visible { outline: 2px solid var(--sp-sand-text); outline-offset: 2px; } .spk-pil { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--sp-teal); background: #fff; color: var(--sp-teal); font-size: 1.1rem; cursor: pointer; } .spk-pil:disabled { border-color: #cfc6b8; color: #8a857c; background: transparent; cursor: not-allowed; } .spk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 280px; } .spk-grid[data-to="1"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .spk-laster { align-self: center; text-align: center; color: #4f4f49; } .spk-mnd__h { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; color: var(--sp-teal); margin: 0 0 .6rem; } .spk-mnd__h span { font-size: .8em; } /* Én måned (mobil): navnet står allerede mellom pilene. */ .spk-grid[data-to="0"] .spk-mnd__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .spk-ukedager, .spk-dager { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .spk-ukedager { margin-bottom: 4px; } .spk-ukedager span { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4f4f49; text-align: center; padding: 4px 0; } .spk-tom { display: block; } .spk-dag { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; min-height: 36px; font-family: var(--ff-body); font-size: .95rem; font-variant-numeric: tabular-nums; border-radius: 8px; border: 1px solid #d6c7b2; background: #fff; color: var(--sp-teal); cursor: pointer; padding: 0; } .spk-dag:hover:not(:disabled) { background: #efe3d3; } .spk-dag:disabled { opacity: 1; } .spk-dag.is-today { box-shadow: inset 0 -3px 0 var(--sp-sand-text); } .spk-dag.is-past { background: transparent; border-color: transparent; color: #66665f; cursor: default; } .spk-dag.is-booked { background: #ebe5dc; border-color: #ebe5dc; color: #4b4b45; text-decoration: line-through; text-decoration-thickness: 2px; cursor: not-allowed; } .spk-dag.is-res { border: 2px dashed var(--sp-sand-text); background: #fbf6ee; color: #5a4220; } .spk-dag.is-range { background: var(--sp-sand); border-color: var(--sp-sand); color: var(--sp-teal); border-radius: 4px; } .spk-dag.is-res.is-range { border-style: dashed; border-color: var(--sp-sand-text); } .spk-dag.is-start, .spk-dag.is-end { background: var(--sp-teal); border-color: var(--sp-teal); color: var(--sp-cream); font-weight: 700; } .spk-dag--demo { width: 32px; min-height: 32px; height: 32px; font-size: .82rem; cursor: default; flex: none; } .spk-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 1.2rem 0 0; padding: 0; list-style: none; } .spk-legende li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: #3f3f39; } .spk-valg { margin-top: 1.2rem; padding: 16px 18px; background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: 10px; } .spk-valg__tekst { font-family: var(--ff-display); font-size: 1.3rem; line-height: 1.3; color: var(--sp-teal); margin: 0; } .spk-valg__merk { font-size: .9rem; color: #5a4220; margin: .5rem 0 0; } .spk-valg__knapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 22px; margin-top: .8rem; } .spk-knapp { font-family: var(--ff-body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--sp-teal); color: var(--sp-cream); border: 1px solid var(--sp-teal); border-radius: 100px; padding: .8rem 1.6rem; cursor: pointer; } .spk-knapp:hover { background: #164343; } .spk-knapp:disabled { background: #d9d3c9; border-color: #d9d3c9; color: #55554f; cursor: not-allowed; } .spk-lenke { font: inherit; font-size: .9rem; background: none; border: 0; padding: 4px 0; color: var(--sp-sand-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; } .spk-lenke:hover { color: var(--sp-teal); } .spk-liten { font-size: .85rem; color: #4f4f49; margin: .6rem 0 0; } .spk-liten .spk-lenke { font-size: inherit; } .spk-fot { font-size: .82rem; line-height: 1.5; color: #4f4f49; margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--sp-line); } .spk-feil { max-width: 62ch; margin: 0 auto; text-align: center; } .sp-kal :focus-visible { outline: 3px solid var(--sp-teal); outline-offset: 2px; } .sp-kal .spk-knapp:focus-visible { outline-color: var(--sp-sand-text); } .sp-section--dark .spk-feil { color: var(--sp-cream); } /* Foto-hero «Kompakt» (Høyde-valget): lav topp så innholdet under synes ved første visning. Tittelen får full bredde, så korte titler holder seg på én linje. */ .sp-phero.sp-phero--kompakt { min-height: clamp(320px, 44vh, 440px); padding-top: 7.5rem; padding-bottom: clamp(2rem, 4vw, 3rem); } .sp-phero--kompakt .sp-phero__inner { max-width: 900px; } .sp-phero--kompakt .sp-phero__title { font-size: clamp(2.3rem, 4.8vw, 3.8rem); } .sp-phero--kompakt .sp-phero__body { max-width: 58ch; margin-top: .8rem; } .sp-phero--kompakt .sp-phero__cta { margin-top: 1.4rem; } @media (max-width: 640px) { .sp-phero.sp-phero--kompakt { min-height: 0; padding-top: 6.5rem; padding-bottom: 2rem; } } /* Kalenderen rett under en kompakt hero: kortere luft, og hodet venstrestilt på kortets bredde. */ .sp-phero--kompakt + .sp-kal { padding-top: clamp(2.25rem, 4vw, 3.5rem); } .sp-kal .sp-section__head { text-align: left; max-width: 960px; margin: 0 auto 1.75rem; } .sp-kal .sp-section__head .sp-label { margin-inline: 0; } .sp-kal .sp-section__head .sp-ingress { font-family: var(--ff-body); font-style: normal; font-size: 1.05rem; line-height: 1.6; max-width: 62ch; margin-top: .6rem; } /* Kontrast i det mørke skjemaet: Gravity Forms' egne farger på «(Påkrevd)» (1,85:1) og personvernteksten (2,72:1) vinner over regelen over, derfor !important. */ .sp-kontakt__form .gform_wrapper .gfield_required, .sp-kontakt__form .gform_wrapper .gfield_required * { color: var(--sp-sand) !important; } .sp-kontakt__form .gfield--type-html, .sp-kontakt__form .gfield--type-html * { color: rgba(255,255,255,.78) !important; } /* Editorial-hero (forsiden) på mobil: bildet over, teksten under på teal. Sløret fra hjørnet ble for tynt bak teksten på smale skjermer (kicker 2,1:1 mot vinduene). Bildet vises rent i ::before (via --sp-phero-bg fra malen); desktop er uendret. */ @media (max-width: 640px) { .sp-phero.sp-phero--editorial { display: block; min-height: 0; padding: 0; background-image: none !important; background-color: var(--sp-teal); } .sp-phero--editorial::before { content: ''; display: block; height: clamp(260px, 48svh, 460px); background-image: var(--sp-phero-bg-m, var(--sp-phero-bg)); background-size: cover; background-position: center; } .sp-phero--editorial::after, .sp-phero--editorial .sp-phero__frame, .sp-phero--editorial .sp-phero__wm, .sp-phero--editorial .sp-phero__rule, .sp-phero--editorial .sp-phero__scroll { display: none; } .sp-phero--editorial .sp-phero__inner { max-width: none; padding: 1.75rem 1.5rem 2.25rem; } .sp-phero--editorial .sp-phero__kicker { margin-bottom: 1rem; } .sp-phero--editorial .sp-phero__body { margin-top: 1rem; } .sp-phero--editorial .sp-kred { top: calc(clamp(260px, 48svh, 460px) - 26px); bottom: auto; right: 8px; } .sp-phero--lys.sp-phero--editorial { background-color: var(--sp-cream); } } /* Kicker-linjen over hero-tittelen: sandfarget 11–12 px tekst målte 3,1–4,0:1 mot lyse partier i bildene (forside, Aktiviteter, Privat leie), sandbrun på lys hero 2,7–3,7:1 (Bryllup). Krem på mørk hero og teal på lys hero holder 4,5:1 med samme slør. */ .sp-phero .sp-phero__kicker, .sp-phero__coords { color: var(--sp-cream); } .sp-phero--lys .sp-phero__kicker { color: var(--sp-teal); } /* Info-grid på mobil (Noomi 23.10): to kolonner med 1fr ble presset bredere enn skjermen av lange titler (siden ble 411 px på 390) og ga smale, høye bokser. minmax(0,1fr) hindrer overflyt; under 560 px én kolonne med ikonet til venstre, så boksene blir lave og fyller bredden. */ .sp-infogrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sp-info h3 { overflow-wrap: break-word; hyphens: auto; } @media (max-width: 820px) { .sp-infogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sp-infogrid { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .sp-info { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.1rem 1.2rem; } .sp-info__icon { width: 40px; height: 40px; margin-bottom: 0; grid-row: span 3; } .sp-info__icon svg { width: 20px; height: 20px; } .sp-info h3 { margin: .55rem 0 .3rem; } .sp-info p { font-size: .92rem; } } /* Footer på mobil (Noomi 23.10): var 1 092 px høy. Lenkekolonnene står side om side, mindre luft. Kun under 760 px — desktop er uendret. */ @media (max-width: 760px) { .fs-footer { padding: 40px 24px 28px; } .fs-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; margin-bottom: 0; } .fs-footer__grid > :first-child, .fs-footer__grid > .fs-footer__col:last-child { grid-column: 1 / -1; } .fs-footer__logo { margin-bottom: 20px; } .fs-footer__logo img { width: 190px; } .fs-footer__social { margin-top: 12px; } .fs-footer__h { margin-bottom: 10px; } .fs-footer__col li { margin-bottom: 6px; } .fs-footer__col address { line-height: 1.65; } .fs-footer__bottom { margin-top: 28px; padding-top: 20px; flex-direction: column; gap: 8px; } .fs-footer__bottom span, .fs-footer__bottom a, .fs-footer__cookiebtn { line-height: 1.9; } } /* ===== Foto-hero: valget «Slør over bildet» (Noomi 23.10: mørkt/lyst bare der teksten står) ===== tekst = sløret dekker tekstsiden, resten av bildet er fritt spot = mykt, rundt slør bak tekstblokken panel = svakt slør + tekst i et panel; på mobil bildet over og teksten under (som forsiden) Mørk slør: rgb(6,26,23). Lys slør: krem rgb(245,239,232). */ .sp-phero--slor-tekst::after { background: linear-gradient(to right, rgba(6,26,23,.9) 0%, rgba(6,26,23,.82) 34%, rgba(6,26,23,.5) 52%, rgba(6,26,23,0) 72%), linear-gradient(to top, rgba(6,26,23,.45) 0%, rgba(6,26,23,0) 45%); } .sp-phero--lys.sp-phero--slor-tekst::after { background: linear-gradient(to right, rgba(245,239,232,.93) 0%, rgba(245,239,232,.86) 34%, rgba(245,239,232,.55) 52%, rgba(245,239,232,0) 72%), linear-gradient(to top, rgba(245,239,232,.5) 0%, rgba(245,239,232,0) 45%); } .sp-phero--slor-spot::after { background: radial-gradient(ellipse 62% 78% at 22% 74%, rgba(6,26,23,.92) 0%, rgba(6,26,23,.8) 42%, rgba(6,26,23,.38) 72%, rgba(6,26,23,0) 100%); } .sp-phero--lys.sp-phero--slor-spot::after { background: radial-gradient(ellipse 62% 78% at 22% 74%, rgba(245,239,232,.95) 0%, rgba(245,239,232,.85) 42%, rgba(245,239,232,.42) 72%, rgba(245,239,232,0) 100%); } .sp-phero--slor-panel::after { background: linear-gradient(to top, rgba(6,26,23,.35) 0%, rgba(6,26,23,0) 50%); } .sp-phero--lys.sp-phero--slor-panel::after { background: linear-gradient(to top, rgba(245,239,232,.35) 0%, rgba(245,239,232,0) 50%); } .sp-phero--slor-panel .sp-phero__inner { background: rgba(9,32,30,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(219,195,169,.22); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); } .sp-phero--lys.sp-phero--slor-panel .sp-phero__inner { background: rgba(245,239,232,.92); border-color: rgba(13,46,46,.12); } @media (max-width: 640px) { .sp-phero--slor-tekst::after { background: linear-gradient(to top, rgba(6,26,23,.97) 0%, rgba(6,26,23,.92) 45%, rgba(6,26,23,.6) 62%, rgba(6,26,23,0) 80%); } .sp-phero--lys.sp-phero--slor-tekst::after { background: linear-gradient(to top, rgba(245,239,232,.98) 0%, rgba(245,239,232,.93) 45%, rgba(245,239,232,.62) 62%, rgba(245,239,232,0) 80%); } .sp-phero--slor-spot::after { background: radial-gradient(ellipse 150% 62% at 35% 78%, rgba(6,26,23,.96) 0%, rgba(6,26,23,.88) 48%, rgba(6,26,23,.4) 78%, rgba(6,26,23,0) 100%); } .sp-phero--lys.sp-phero--slor-spot::after { background: radial-gradient(ellipse 150% 62% at 35% 78%, rgba(245,239,232,.97) 0%, rgba(245,239,232,.9) 48%, rgba(245,239,232,.42) 78%, rgba(245,239,232,0) 100%); } /* Panel på mobil: bildet rent øverst, teksten under på teal/krem (samme grep som forsiden). */ .sp-phero.sp-phero--slor-panel { display: block; min-height: 0; padding: 0; background-image: none !important; background-color: var(--sp-teal); } .sp-phero--slor-panel::before { content: ''; display: block; height: clamp(240px, 42svh, 420px); background-image: var(--sp-phero-bg-m, var(--sp-phero-bg)); background-size: cover; background-position: center; } .sp-phero--slor-panel::after { display: none; } .sp-phero--slor-panel .sp-phero__inner { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; max-width: none; padding: 1.75rem 1.5rem 2.25rem; } .sp-phero--lys.sp-phero--slor-panel { background-color: var(--sp-cream); } .sp-phero--lys.sp-phero--slor-panel .sp-phero__inner { background: none; } .sp-phero--slor-panel .sp-kred { top: calc(clamp(240px, 42svh, 420px) - 26px); bottom: auto; } } /* Justert etter måling 27.10: tekstblokken er høy (kicker opptil 76 % opp), så sløret må nå høyere på tekstsiden. Gjelder også lys standard, som strøk på kicker (3,0–3,9:1) på flere bilder. */ .sp-phero--lys::after { background: linear-gradient(to top, rgba(245,239,232,.97) 0%, rgba(245,239,232,.8) 40%, rgba(245,239,232,.35) 75%, rgba(245,239,232,.12) 100%), linear-gradient(to right, rgba(245,239,232,.9) 0%, rgba(245,239,232,.6) 45%, rgba(245,239,232,.05) 72%); } .sp-phero--slor-tekst::after { background: linear-gradient(to right, rgba(6,26,23,.92) 0%, rgba(6,26,23,.88) 45%, rgba(6,26,23,.55) 60%, rgba(6,26,23,0) 78%); } .sp-phero--lys.sp-phero--slor-tekst::after { background: linear-gradient(to right, rgba(245,239,232,.94) 0%, rgba(245,239,232,.9) 45%, rgba(245,239,232,.55) 60%, rgba(245,239,232,0) 78%); } .sp-phero--slor-spot::after { background: radial-gradient(ellipse 80% 110% at 25% 65%, rgba(6,26,23,.93) 0%, rgba(6,26,23,.88) 45%, rgba(6,26,23,.45) 75%, rgba(6,26,23,0) 100%); } .sp-phero--lys.sp-phero--slor-spot::after { background: radial-gradient(ellipse 80% 110% at 25% 65%, rgba(245,239,232,.95) 0%, rgba(245,239,232,.9) 45%, rgba(245,239,232,.45) 75%, rgba(245,239,232,0) 100%); } @media (max-width: 640px) { .sp-phero--lys::after { background: linear-gradient(to top, rgba(245,239,232,.98) 0%, rgba(245,239,232,.88) 44%, rgba(245,239,232,.30) 100%); } .sp-phero--slor-tekst::after { background: linear-gradient(to top, rgba(6,26,23,.97) 0%, rgba(6,26,23,.93) 58%, rgba(6,26,23,.6) 72%, rgba(6,26,23,0) 88%); } .sp-phero--lys.sp-phero--slor-tekst::after { background: linear-gradient(to top, rgba(245,239,232,.98) 0%, rgba(245,239,232,.94) 58%, rgba(245,239,232,.6) 72%, rgba(245,239,232,0) 88%); } .sp-phero--slor-spot::after { background: radial-gradient(ellipse 150% 75% at 35% 70%, rgba(6,26,23,.96) 0%, rgba(6,26,23,.9) 50%, rgba(6,26,23,.45) 80%, rgba(6,26,23,0) 100%); } .sp-phero--lys.sp-phero--slor-spot::after { background: radial-gradient(ellipse 150% 75% at 35% 70%, rgba(245,239,232,.97) 0%, rgba(245,239,232,.92) 50%, rgba(245,239,232,.45) 80%, rgba(245,239,232,0) 100%); } } /* Complianz-cookietabellen (Informasjonskapsler) på mobil: høyre kolonne ble 427 px på 390 px skjerm og kuttet teksten. minmax(0,1fr) + linjebryting på lange cookienavn. */ .cmplz-document .cookies-per-purpose { grid-template-columns: minmax(84px, 30%) minmax(0, 1fr) !important; } .cmplz-document .cookies-per-purpose > div, .cmplz-document .cookies-per-purpose * { overflow-wrap: anywhere; min-width: 0; } /* Kartet før samtykke (Complianz-plassholder): sidens knappestil i stedet for Complianz' grå boks, som var hvit tekst på 50 % svart over lys bakgrunn (3,9:1). */ .sp-kart .cmplz-blocked-content-container { background-color: #fff; } .sp-kart .cmplz-blocked-content-notice { background: var(--sp-teal); color: var(--sp-cream); border: 0; border-radius: 100px; padding: .8rem 1.4rem; max-width: min(88%, 24rem); font: 600 .875rem/1.45 var(--ff-body); cursor: pointer; } .sp-kart .cmplz-blocked-content-notice:hover { background: #081f1f; } .sp-kart .cmplz-blocked-content-notice:focus-visible { outline: 2px solid var(--sp-sand-text); outline-offset: 3px; } .sp-kart--mork .cmplz-blocked-content-container { background-color: #143a38; } .sp-kart--mork .cmplz-blocked-content-notice { background: var(--sp-sand); color: var(--sp-teal); } /* ===== UU-runde 29.10 (WCAG 2.1 AA) ===== */ /* Fokusring på mørke flater: sandbrun ring (#7A5C2E) målte 2,4:1 mot teal. Sand gir 8,6:1. Kalenderkortet er hvitt også i mørk seksjon og beholder sin egen teal ring. */ .fs-footer:not(.fs-footer--lys) :focus-visible, .sp-section--dark:not(.sp-kal) :focus-visible, .sp-cta--mork :focus-visible, .sp-tb--mork :focus-visible, .sp-tilbud :focus-visible, .sp-inngang :focus-visible, .sp-pakke--mork :focus-visible, .sp-kontakt__form :focus-visible, .sp-phero:not(.sp-phero--lys) :focus-visible, .sp-kart--mork .cmplz-blocked-content-notice:focus-visible { outline-color: var(--sp-sand); } /* Knappelignende lenker i fokus speiler hover, så tastatur og mus ser likt ut. */ .sp-topnav__cta:focus-visible { color: #fff; background: #15403c; } .sp-inngang__lenke:focus-visible { background: var(--sp-sand); color: var(--sp-teal); } /* Lenker i løpende tekst skilles ikke bare med farge (1.4.1): sandbrun mot brødtekst var 1,6:1. */ .sp-prose a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sp-section--dark .sp-prose a:not([class]), .sp-tb--mork .sp-prose a:not([class]) { color: var(--sp-sand); } .sp-section--dark .sp-prose a:not([class]):where(:hover, :focus-visible), .sp-tb--mork .sp-prose a:not([class]):where(:hover, :focus-visible) { color: #fff; } /* Privat leie ved 320 px: fasilitetsrutene (tre kolonner) presset siden til 343 px, «Turmuligheter» får ikke plass i en tredjedel. Kolonnene kan krympe, og under 360 px blir det to. */ @media (max-width: 820px) { .sp-facsplit__icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 359px) { .sp-facsplit__icons:not(.sp-facsplit__icons--sentrert) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sp-facsplit__label { overflow-wrap: anywhere; hyphens: auto; } /* Kontakt med tekstavstand (1.4.12) ved 320 px: samme min-content-felle i én-kolonne-gridet. */ @media (max-width: 860px) { .sp-kontakt__grid { grid-template-columns: minmax(0, 1fr); } } /* Lange ord i overskrifter ved 320 px og stor tekst: bryt heller enn å skyve siden bredere (1.4.10). */ h1, h2 { overflow-wrap: anywhere; } /* ingen hyphens:auto: delte «Skjel-breid» i overskriftene */ /* Gravity Forms-feil i det mørke skjemaet: GF-rødt #C02B0A var 2,5:1 mot teal. Lys korall ≈ 6,3:1. GF-temaets egne regler vinner ellers, derfor !important (som for «(Påkrevd)» over). */ .sp-kontakt__form .gfield_validation_message, .sp-kontakt__form .validation_message, .sp-kontakt__form .gform_validation_errors, .sp-kontakt__form .gform_validation_errors *, .sp-kontakt__form .gform_submission_error { color: #FF8A70 !important; } .sp-kontakt__form .gform_validation_errors { background: rgba(255,138,112,.08) !important; border-color: rgba(255,138,112,.55) !important; } .sp-kontakt__form .gfield_error input, .sp-kontakt__form .gfield_error select, .sp-kontakt__form .gfield_error textarea { border-color: #FF8A70 !important; } /* Skjemafelt: 16 px hindrer at iOS zoomer inn ved fokus, og 44 px gir trykkflate på mobil. */ .sp-kontakt__form input[type=text], .sp-kontakt__form input[type=email], .sp-kontakt__form input[type=tel], .sp-kontakt__form input[type=date], .sp-kontakt__form input[type=number], .sp-kontakt__form select, .sp-kontakt__form textarea { font-size: 16px !important; } .sp-kontakt__form input[type=text], .sp-kontakt__form input[type=email], .sp-kontakt__form input[type=tel], .sp-kontakt__form input[type=date], .sp-kontakt__form input[type=number], .sp-kontakt__form select { min-height: 44px !important; } /* Ankre under den faste pille-headeren (16 + 66 px desktop, 10 + 62 px mobil, + adminlinje). */ #skjema, #kalender, #pakker { scroll-margin-top: 96px; } .admin-bar :is(#skjema, #kalender, #pakker) { scroll-margin-top: 128px; } @media (max-width: 900px) { #skjema, #kalender, #pakker { scroll-margin-top: 84px; } } /* Burgerknappen: trykkflate 44 × 44 (var 30 × 23). Ikonet er like stort og står på samme sted. */ .sp-topnav__burger { justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 15px 11px; margin-right: -7px; } /* Toppmenyen: punktene brøt over to linjer ved 1024 px og logoen ble klemt (28 px bred). Logo og punkter krymper ikke; tettere meny under 1280 px, burger under 1100 px. */ .sp-topnav { gap: 20px; } .sp-topnav__logo { flex: none; } .sp-topnav__links a { white-space: nowrap; } @media (max-width: 1279px) { .sp-topnav { padding-left: 24px; } .sp-topnav__links { gap: 20px; } .sp-topnav__links a { font-size: 14px; letter-spacing: .02em; } .sp-topnav__cta { padding: 11px 18px; letter-spacing: .08em; } } @media (max-width: 1099px) { .sp-topnav__links, .sp-topnav__cta { display: none; } .sp-topnav__burger { display: flex; } } @media (min-width: 901px) and (max-width: 1099px) { .sp-mobile-menu.is-open { top: 90px; } .admin-bar .sp-mobile-menu.is-open { top: 122px; } } /* Mobil (6.11, Eirik): alle toppbilder viser bildet først og helt, teksten under på teal/krem. Samme grep som forsiden og tekstpanelet; sløret over bildet trengs da ikke (tekst på ensfarget flate). .sp-phero.sp-phero for å slå de eldre mobilreglene for kompakt/standard. */ @media (max-width: 640px) { .sp-phero.sp-phero { display: block; min-height: 0; padding: 0; background-image: none !important; background-color: var(--sp-teal); } .sp-phero.sp-phero::before { content: ''; display: block; height: clamp(260px, 48svh, 460px); background-image: var(--sp-phero-bg-m, var(--sp-phero-bg)); background-size: cover; background-position: center; } .sp-phero.sp-phero::after, .sp-phero .sp-phero__frame, .sp-phero .sp-phero__wm, .sp-phero .sp-phero__rule, .sp-phero .sp-phero__scroll { display: none; } .sp-phero.sp-phero .sp-phero__inner { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; max-width: none; padding: 1.75rem 1.5rem 2.25rem; } .sp-phero.sp-phero--lys { background-color: var(--sp-cream); } .sp-phero.sp-phero .sp-kred { top: calc(clamp(260px, 48svh, 460px) - 26px); bottom: auto; right: 8px; } } /* Default page template (page.php fallback: legal pages, Complianz documents). Readable column, clears the fixed header. */ .container.section { max-width: calc(820px + 2 * var(--gutter)); margin: 0 auto; padding: calc(92px + 4.5rem) var(--gutter) 6rem; } .container.section h1 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; color: var(--sp-teal); margin-bottom: 2rem; } .container.section h2, .container.section h3 { font-family: var(--ff-display); font-weight: 400; color: var(--sp-teal); line-height: 1.2; margin: 2.4rem 0 .8rem; } .container.section h2 { font-size: 1.9rem; } .container.section h3 { font-size: 1.4rem; } .container.section p, .container.section li { font-size: 1.02rem; line-height: 1.7; color: #3d4040; } .container.section p, .container.section ul, .container.section ol { margin-bottom: 1rem; } .container.section ul, .container.section ol { padding-left: 1.3rem; } .container.section a { color: var(--sp-teal); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .container.section { padding: calc(62px + 2.5rem) var(--gutter-sm) 4rem; } }