/* Self-hosted Plus Jakarta Sans (variable) – no external requests */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-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: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-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;
}
/* =========================================================
Digitelle - DG Tokens (Fase 1)
Global design tokens, reset, base, accessibility.
Lim inn i WPCodeBox som CSS-snippet:
Name: DG Tokens
Type: CSS
Auto-load: Yes
Location: Site-wide
Priority: 1 (forst)
========================================================= */
/* ---------------------------------------------------------
0. Design tokens (--dig-* / --tjanst-* / typografi / spacing / radius)
--------------------------------------------------------- */
:root {
color-scheme: light dark;
/* Brand
----------------------------------------------------------------
FARGEKONVENSJON (for tilgjengelig kontrast i begge tema):
• --dig-coral / --dig-coral-hover : KUN for border/background og
for hover-tilstander. Som tekst feiler de AA i lyst tema.
• --dig-coral-text : coral brukt som TEKST (color:).
Morkere teal i lyst tema (AA), bright coral i morkt tema.
• --dig-ink-fixed : alltid-mork tekst paa FASTE lyse
flater (tagger, knapper, hopp-lenke) - flipper ikke med tema.
• --dig-black / --dig-white : tema-flippende. IKKE bruk paa
flater med fast farge (da kolliderer tekst/bakgrunn i ett tema).
---------------------------------------------------------------- */
--dig-coral: #05AEB7;
--dig-coral-hover: #06D0DB;
--dig-coral-rgb: 5, 174, 183;
/* Coral som TEKST: morkere i lyst tema for AA-kontrast (>=4.5:1 paa hvit),
bright coral i morkt tema. Bruk denne for color:, ikke for border/background. */
--dig-coral-text: #057B82;
/* Dyp teal og dyp blekk for forside-redesignet (juni 2026) */
--dig-coral-deep: #036065;
--dig-ink-deep: #2E2240;
/* Alltid mork blekk-farge - flipper IKKE med tema. For tekst paa faste
lyse flater (tagger, knapper, hopp-lenke). */
--dig-ink-fixed: #232323;
/* Neutrals
--dig-white er ALLTID hvit (brukes for tekst paa morrke seksjoner og
andre steder der fargen ikke skal flippe i dark mode).
--dg-surface er kortflate/panel som flipper i dark mode. */
--dig-black: #232323;
--dig-body: #333333;
--dig-white: #FFFFFF;
--dg-surface: #FFFFFF;
--dig-cream: #FFFFFF;
--dig-blush: #F8F7F4;
--dig-border: #E3E0DD;
--dig-slate-teal: #413252;
--dg-header-bg: rgba(255, 255, 255, 0.92);
--dg-image-border: transparent;
--dg-shadow-whisper: 0 2px 8px rgba(0, 0, 0, 0.08);
--dg-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* Dark mode: --dig-white beholdes hvit, --dg-surface flippes */
html[data-theme="dark"] {
--dig-black: #FFFFFF;
--dig-body: #C4C6C8;
--dg-surface: #1F242A;
--dig-cream: #121212;
--dig-blush: #000000;
--dig-border: #2D333B;
--dig-coral-hover: #06D0DB;
--dig-coral-text: #06D0DB;
--dg-header-bg: rgba(21, 25, 28, 0.92);
--dg-image-border: #2D333B;
--dg-shadow-whisper: 0 2px 12px rgba(0, 0, 0, 0.4);
--dg-shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] {
--dig-black: #FFFFFF;
--dig-body: #C4C6C8;
--dg-surface: #1F242A;
--dig-cream: #121212;
--dig-blush: #000000;
--dig-border: #2D333B;
--dig-coral-hover: #06D0DB;
--dig-coral-text: #06D0DB;
--dg-header-bg: rgba(21, 25, 28, 0.92);
--dg-image-border: #2D333B;
--dg-shadow-whisper: 0 2px 12px rgba(0, 0, 0, 0.4);
--dg-shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.5);
}
}
/* Dummy-scope for a holde resten av :root-blokken intakt */
:root {
/* Greens */
--dig-leaf: #58B771;
--dig-lime: #B6E761;
/* Tjeneste-farger (beslutning 5) */
--tjanst-wordpress: #FFDD00;
--tjanst-woocommerce: #FF8800;
--tjanst-drift: var(--dig-leaf);
--tjanst-ads: #8F00FF;
--tjanst-design: #FF6039;
--tjanst-app: #FF2929;
--tjanst-brand: #E9C46A;
--tjanst-seo: #44DDC6;
--tjanst-whitelabel: var(--dig-slate-teal);
/* Typografi */
--font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
--font-body: "Plus Jakarta Sans", "Roboto", system-ui, -apple-system, sans-serif;
/* Skrift-storrelser */
--text-hero: clamp(32px, 3.2vw, 48px);
--text-h2-large: clamp(28px, 2.6vw, 56px);
--text-h2: clamp(26px, 2.2vw, 48px);
--text-h3: clamp(18px, 1.2vw, 20px);
--text-body: 18px;
--text-base: 16px;
--text-tag: 13px;
--text-small: 12px;
/* Vekter */
--weight-black: 800;
--weight-bold: 800;
--weight-semibold: 600;
--weight-medium: 600;
--weight-regular: 400;
/* Linjehogder */
--leading-tight: 1.2;
--leading-body: 1.5;
--leading-compact: 1.0;
/* Spacing (4/8/16/24/32/48/64/80/96) */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 80px;
--space-section: 96px;
/* Radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-card: 16px;
--radius-feature: 20px;
--radius-pill: 9999px;
/* Shadows */
--shadow-whisper: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
--shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
/* Layout */
--container-content: 800px;
--container-wide: 1290px;
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 500ms ease;
}
/* ---------------------------------------------------------
1. Overstyr Blocksy-palette med DG-tokens
(Sikrer at Gutenberg-blokker som bruker --theme-palette-color-N
ogsaa faar nye farger uten a redigere hver blokk.)
--------------------------------------------------------- */
:root {
--theme-palette-color-1: var(--dig-coral); /* Brand/teal */
--theme-palette-color-2: var(--dig-slate-teal); /* Dark sections */
--theme-palette-color-3: var(--dig-black); /* Headings */
--theme-palette-color-4: var(--dig-body); /* Body text */
--theme-palette-color-5: var(--dig-white); /* Card surfaces / white text on dark */
--theme-palette-color-6: var(--dig-cream); /* Canvas / page background */
--theme-palette-color-7: var(--dig-blush); /* Soft highlight */
--theme-palette-color-8: var(--dig-border); /* Borders / warm gray */
}
/* ---------------------------------------------------------
2. Reset og base
--------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--dig-body);
background-color: var(--dig-cream);
overflow-x: hidden;
overflow-wrap: break-word;
word-break: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------------------------------------------------------
4. Typografi (F1.3, F1.4)
--------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--dig-black);
line-height: var(--leading-tight);
overflow-wrap: normal;
word-break: normal;
-webkit-hyphens: manual;
hyphens: manual;
}
h1 {
font-size: var(--text-hero);
font-weight: var(--weight-black);
}
h2 {
font-size: var(--text-h2);
font-weight: var(--weight-semibold);
margin-top: var(--space-section);
margin-bottom: var(--space-lg);
}
h3 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
line-height: var(--leading-body);
margin-top: var(--space-2xl);
margin-bottom: var(--space-sm);
}
p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--dig-body);
margin-bottom: var(--space-lg);
}
p:last-child { margin-bottom: 0; }
ul, ol {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--dig-body);
margin-bottom: var(--space-lg);
padding-left: var(--space-lg);
}
li { margin-bottom: var(--space-sm); }
img {
max-width: 100%;
height: auto;
display: block;
}
/* H2/H3 margin resets for komponenter */
.dg-section-head h2,
.dg-hero-title,
.dg-page-header h1,
.dg-feature-card h3,
.dg-deliverable h3,
.dg-step-card h3,
.dg-price-card h3,
.dg-testimonial h3,
.dg-service-card h3,
.dg-section--dark h2,
.dg-hero--dark h2 {
margin-top: 0;
}
.dg-section-head p,
.dg-feature-card p,
.dg-deliverable p,
.dg-step-card p:last-child,
.dg-service-card p,
.dg-testimonial p {
margin-bottom: 0;
}
.dg-feature-card h3,
.dg-deliverable h3 {
margin-bottom: var(--space-sm);
}
.dg-price-card h3,
.dg-price-card p,
.dg-price-card ul,
.dg-footer-col ul,
.dg-footer-col li,
.dg-nav__list li,
.dg-submenu li {
margin-bottom: 0;
}
.dg-footer-col ul,
.dg-nav__list,
.dg-submenu {
padding-left: 0;
}
/* Innholdsbilder i seksjoner */
.dg-section img:not(.dg-service-card__media):not(.dg-blog-card__media):not(.dg-case-card__media img) {
border-radius: var(--radius-feature);
}
/* ---------------------------------------------------------
5. Form-input - fix "hvit tekst paa hvit bg" (F1.10)
--------------------------------------------------------- */
input.dg-input,
textarea.dg-input {
color: var(--dig-black);
background-color: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-md);
padding: 12px 14px;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
width: 100%;
transition: border-color var(--transition-base);
}
.dg-input::placeholder {
color: #777;
}
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible,
.dg-input:focus-visible {
border-color: var(--dig-coral);
outline: 3px solid var(--dig-slate-teal);
outline-offset: 2px;
}
/* ---------------------------------------------------------
6. Knapper - CTA-kontrast
Hvit tekst pa moerk teal #047A80 = 4.9:1 AA
--------------------------------------------------------- */
input[type="submit"],
button[type="submit"] {
background-color: #047A80;
color: var(--dig-white);
font-family: var(--font-body);
font-weight: var(--weight-bold);
font-size: var(--text-base);
line-height: var(--leading-compact);
border: none;
border-radius: var(--radius-pill);
padding: 14px 28px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-decoration: none;
transition: background-color var(--transition-base), transform var(--transition-fast);
}
input[type="submit"]:hover,
button[type="submit"]:hover {
background-color: #036267;
color: var(--dig-white);
transform: translateY(-1px);
}
input[type="submit"]:active,
button[type="submit"]:active {
transform: translateY(0);
}
input[type="submit"][disabled],
button[type="submit"][disabled] {
background-color: #D4D4D4;
color: #777;
cursor: not-allowed;
transform: none;
}
/* ---------------------------------------------------------
7. Fokus - :focus-visible ring (F1.7)
--------------------------------------------------------- */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 3px solid var(--dig-slate-teal);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.wp-element-button:focus-visible,
.ct-button:focus-visible,
button.dg-btn:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible {
outline: 3px solid var(--dig-slate-teal);
outline-offset: 3px;
}
/* Pa morke seksjoner, bruk hvit fokusring for kontrast */
.dg-section--dark :focus-visible,
.dg-hero--dark :focus-visible,
[style*="background-color: var(--dig-slate-teal)"] :focus-visible {
outline-color: var(--dig-white);
}
/* ---------------------------------------------------------
8. Reduced motion (F1.8, WCAG 2.3.3)
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.dg-marquee,
.dg-marquee__track,
.dg-keyword-strip,
.dg-keyword-strip__track {
animation: none !important;
transform: none !important;
}
.dg-feature-card,
.dg-service-card,
.dg-price-card,
.dg-case-card,
.dg-blog-card {
transition: none !important;
}
.dg-service-card:hover,
.dg-case-card:hover,
.dg-blog-card:hover {
transform: none !important;
}
.dg-blog-card:hover .dg-blog-card__media {
transform: none !important;
}
}
/* Honeypot - visuelt og semantisk skjult (Fase 5.1) */
.dg-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------------------------------------------------------
9. Utility-klasser
--------------------------------------------------------- */
.dg-container {
width: 100%;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.dg-container--narrow {
max-width: var(--container-content);
}
.dg-container--medium {
max-width: 900px;
}
/* Skip link for tastatur-brukere */
.skip-link {
position: absolute;
top: -100px;
left: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--dig-ink-fixed);
color: var(--dig-white);
border-radius: var(--radius-md);
z-index: 1000;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-md);
color: var(--dig-white);
}
/* =========================================================
Digitelle - DG Components (Fase 2)
Felles komponent-stiler bygget pa DG Tokens (Fase 1).
Lim inn i WPCodeBox som CSS-snippet:
Name: DG Components
Type: CSS
Auto-load: Yes
Location: Site-wide
Priority: 2 (etter DG Tokens)
========================================================= */
/* ---------------------------------------------------------
F2.1 Knapp-system (.dg-btn-*)
Near Black tekst pa teal = 5.2:1 AA (beslutning 3)
--------------------------------------------------------- */
.dg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 14px 28px;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: var(--leading-compact);
border: 1.5px solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
text-decoration: none;
transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}
.dg-btn--lg { padding: 18px 36px; font-size: var(--text-body); }
.dg-btn-primary {
background-color: #047A80;
color: var(--dig-white);
border-color: #047A80;
font-weight: var(--weight-bold);
}
.dg-btn-primary:hover {
background-color: #036267;
border-color: #036267;
color: var(--dig-white);
transform: translateY(-1px);
}
.dg-btn-primary:active {
background-color: #036267;
border-color: #036267;
transform: translateY(0);
}
.dg-btn-secondary {
background-color: var(--dg-surface);
color: var(--dig-black);
border-color: var(--dig-black);
}
.dg-btn-secondary:hover {
background-color: var(--dig-black);
color: var(--dg-surface);
}
.dg-btn-ghost {
background: transparent;
color: var(--dig-black);
border-color: var(--dig-black);
border-width: 2px;
}
.dg-btn-ghost:hover {
background: var(--dig-black);
color: var(--dg-surface);
}
.dg-btn[disabled],
.dg-btn[aria-disabled="true"] {
background: #D4D4D4;
color: #777;
border-color: transparent;
cursor: not-allowed;
transform: none;
pointer-events: none;
}
.dg-btn[aria-busy="true"] {
position: relative;
color: transparent;
pointer-events: none;
}
.dg-btn[aria-busy="true"]::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-top-color: var(--dig-black);
border-radius: 50%;
animation: dg-spin 700ms linear infinite;
}
@keyframes dg-spin { to { transform: rotate(360deg); } }
/* CTA pa morke seksjoner: ghost faar hvit tekst */
.dg-section--dark .dg-btn-ghost {
color: var(--dig-white);
border-color: rgba(255, 255, 255, 0.35);
}
.dg-section--dark .dg-btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--dig-white);
color: var(--dig-white);
}
/* ---------------------------------------------------------
F2.2 Kort-system (.dg-card-*)
--------------------------------------------------------- */
.dg-case-card {
background: var(--dg-surface);
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--dig-border);
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
a.dg-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 2px 12px rgba(var(--dig-coral-rgb), 0.06);
border-color: rgba(var(--dig-coral-rgb), 0.3);
}
.dg-case-card__media img {
aspect-ratio: 16 / 10;
object-fit: cover;
width: 100%;
}
.dg-case-card__body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dg-case-card__body h3 {
margin: var(--space-sm) 0 var(--space-xs);
}
.dg-case-card__body p {
margin-bottom: 0;
}
.dg-blog-card {
background: var(--dg-surface);
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--dig-border);
display: flex;
flex-direction: column;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.dg-blog-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.dg-blog-card__media {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
transition: transform var(--transition-base);
}
.dg-blog-card:hover .dg-blog-card__media { transform: scale(1.02); }
.dg-blog-card__body {
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
}
.dg-blog-card h3 {
font-size: var(--text-h3);
line-height: 1.3;
margin: 0;
}
.dg-blog-card h3 a {
color: var(--dig-black);
text-decoration: none;
}
.dg-blog-card h3 a:hover { color: var(--dig-coral); }
.dg-blog-card__excerpt {
color: var(--dig-body);
margin: 0;
}
/* ---------------------------------------------------------
F2.3 Service-tag-system (.dg-tag--*)
Bruksregel: kun pa case-kort + diskret pa tjenestesider.
--------------------------------------------------------- */
.dg-tag {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: var(--text-tag);
font-weight: var(--weight-medium);
line-height: 1.2;
color: var(--dig-black);
background: var(--dig-border);
text-decoration: none;
}
/* Tekstfarge paa tagger maa vaere FAST (ikke tema-flippende --dig-black/white),
siden tag-bakgrunnene er faste merkevarefarger. Lyse bakgrunner -> mork blekk,
morke bakgrunner (ads, whitelabel) -> hvit. */
/* ---------------------------------------------------------
F2.4 Hero-seksjoner (.dg-hero-*)
--------------------------------------------------------- */
.dg-hero {
background: var(--dig-cream);
padding: var(--space-4xl) 0;
}
body.home > main > .dg-hero:first-child {
padding-top: calc(var(--space-4xl) * 2);
padding-bottom: calc(var(--space-4xl) * 2);
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse 110% 70% at 50% -10%, #070c1d 0%, transparent 80%),
linear-gradient(180deg, #0a0f22 0%, #131a35 55%, #1a2240 100%);
}
body.home > main > .dg-hero:first-child::before {
content: "";
position: absolute;
inset: -30%;
z-index: -1;
background:
radial-gradient(ellipse 50% 45% at 22% 88%, rgba(95, 35, 120, 0.65), transparent 60%),
radial-gradient(ellipse 45% 40% at 92% 78%, rgba(20, 95, 130, 0.6), transparent 60%);
animation: dg-hero-gradient-drift 18s ease-in-out infinite alternate;
will-change: transform;
}
body.home > main > .dg-hero:first-child:hover::before,
body.home > main > .dg-hero:first-child:focus-within::before {
animation-play-state: paused;
}
@keyframes dg-hero-gradient-drift {
0% { transform: translate3d(-3%, -2%, 0) scale(1); }
50% { transform: translate3d(4%, 3%, 0) scale(1.08); }
100% { transform: translate3d(-2%, -4%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
body.home > main > .dg-hero:first-child::before {
animation: none;
}
}
@media (max-width: 768px) {
body.home > main > .dg-hero:first-child {
padding-top: var(--space-4xl);
}
}
.dg-hero--dark {
background: var(--dig-slate-teal);
color: var(--dig-white);
}
.dg-hero--dark .dg-hero-title,
.dg-hero--dark .dg-hero-ingress { color: var(--dig-white); }
.dg-hero-title {
font-size: var(--text-hero);
line-height: var(--leading-tight);
font-weight: var(--weight-black);
margin: 0 0 var(--space-md);
color: var(--dig-black);
}
.dg-hero-ingress {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--dig-body);
max-width: 60ch;
margin: 0 0 var(--space-xl);
}
.dg-hero-cta {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.dg-hero-title mark {
background: var(--dig-coral);
color: var(--dig-ink-fixed);
padding: 0 6px;
border-radius: var(--radius-sm);
}
.dg-hero--centered { text-align: center; }
.dg-hero--centered .dg-hero-title,
.dg-hero--centered .dg-hero-ingress {
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.dg-hero--centered .dg-hero-cta { justify-content: center; }
/* ---------------------------------------------------------
F2.5 Morrk seksjon (.dg-section--dark)
--------------------------------------------------------- */
.dg-section {
padding: var(--space-4xl) 0;
}
.dg-section--dark {
background: var(--dig-slate-teal);
color: var(--dig-white);
}
.dg-section--dark h2,
.dg-section--dark h3,
.dg-section--dark h4 { color: var(--dig-white); }
/* Loepende lenker i moerke seksjoner - den globale a-fargen er
nesten svart og forsvinner mot moerk bakgrunn i lyst tema. */
.dg-section--dark a:not(.dg-btn) {
color: var(--dig-white);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.dg-section--dark a:not(.dg-btn):hover { color: var(--dig-coral-hover); }
/* ---------------------------------------------------------
F2.6 Marquee (.dg-marquee)
--------------------------------------------------------- */
.dg-marquee {
overflow: hidden;
padding: var(--space-xl) 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.dg-marquee__track {
display: flex;
gap: var(--space-2xl);
align-items: center;
animation: dg-marquee-scroll var(--dg-marquee-speed, 30s) linear infinite;
width: max-content;
}
.dg-marquee:hover .dg-marquee__track,
.dg-marquee:focus-within .dg-marquee__track {
animation-play-state: paused;
}
.dg-marquee__track img {
height: 48px;
width: auto;
opacity: 0.7;
filter: grayscale(1);
transition: opacity var(--transition-base), filter var(--transition-base);
}
.dg-marquee__track img:hover {
opacity: 1;
filter: grayscale(0);
}
@keyframes dg-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------------------------------------------------------
F2.7 Keyword-strip (.dg-keyword-strip)
--------------------------------------------------------- */
.dg-keyword-strip {
overflow: hidden;
padding: var(--space-lg) 0;
background: var(--dig-black);
color: var(--dig-white);
}
.dg-keyword-strip:hover .dg-keyword-strip__track,
.dg-keyword-strip:focus-within .dg-keyword-strip__track {
animation-play-state: paused;
}
.dg-keyword-strip__track {
display: flex;
gap: var(--space-xl);
align-items: center;
animation: dg-marquee-scroll var(--dg-keyword-speed, 40s) linear infinite;
width: max-content;
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.dg-keyword-strip__track span[aria-hidden="true"] {
color: var(--dig-coral-text);
}
/* ---------------------------------------------------------
F2.9 Testimonial-karusell (.dg-testimonial-carousel)
Custom vanilla-JS (scroll-snap + pil-knapper + tastatur).
--------------------------------------------------------- */
.dg-testimonial-carousel {
position: relative;
padding: var(--space-xl) 0;
}
.dg-testimonial-carousel__track {
display: flex;
gap: var(--space-lg);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: var(--space-md) 0;
}
.dg-testimonial-carousel__track::-webkit-scrollbar { display: none; }
.dg-testimonial {
flex: 0 0 min(480px, 85%);
scroll-snap-align: center;
background: var(--dg-surface);
border-radius: var(--radius-card);
padding: var(--space-xl);
border: 1px solid var(--dig-border);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
blockquote.dg-testimonial__quote {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--dig-black);
margin: 0;
padding: 0;
}
.dg-testimonial__quote::before { content: "\201C"; color: var(--dig-coral-text); margin-right: 4px; }
.dg-testimonial__quote::after { content: "\201D"; color: var(--dig-coral-text); margin-left: 4px; }
.dg-testimonial__author {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: auto;
}
cite.dg-testimonial__name,
.dg-testimonial__name {
font-style: normal;
font-weight: var(--weight-semibold);
color: var(--dig-black);
margin: 0;
font-size: var(--text-base);
display: block;
}
.dg-testimonial__role {
font-size: var(--text-tag);
color: var(--dig-body);
margin: 0;
}
/* ---------------------------------------------------------
F2.10 Blogg-komponenter
--------------------------------------------------------- */
body.single-post { background: var(--dig-cream); }
.dg-blog-hero {
padding: var(--space-3xl) 0 var(--space-xl);
text-align: center;
}
.dg-blog-hero h1 {
max-width: 800px;
margin: var(--space-md) auto;
}
.dg-blog-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
align-items: center;
color: var(--dig-body);
font-size: var(--text-base);
}
.dg-blog-meta > * {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.dg-blog-featured-image {
max-width: 1168px;
margin: var(--space-xl) auto;
}
.dg-blog-featured-image img {
width: 100%;
aspect-ratio: 73 / 49;
object-fit: cover;
border-radius: var(--radius-feature);
}
.dg-blog-layout {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.dg-blog-content {
max-width: 800px;
margin: 0 auto;
background: var(--dg-surface);
padding: var(--space-3xl) var(--space-xl);
border-radius: var(--radius-card);
color: var(--dig-body);
font-size: var(--text-body);
line-height: var(--leading-body);
overflow: hidden;
/* Map WordPress-preset spacing brukt i innleggene til vår skala
så inline padding-stiler fra eksporten faktisk har en verdi. */
--wp--preset--spacing--20: var(--space-sm);
--wp--preset--spacing--30: var(--space-md);
--wp--preset--spacing--40: var(--space-lg);
--wp--preset--spacing--50: var(--space-xl);
--wp--preset--spacing--60: var(--space-2xl);
}
.dg-blog-content iframe {
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.dg-blog-content .wp-block-embed,
.dg-blog-content figure {
max-width: 100%;
overflow: hidden;
}
.dg-blog-content .wp-block-media-text {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-xl);
align-items: center;
background: var(--dig-blush);
/* Individuelle properties slår inline styles på samme spesifisitet. */
padding-top: var(--space-xl);
padding-right: var(--space-xl);
padding-bottom: var(--space-xl);
padding-left: var(--space-xl);
border-radius: var(--radius-card);
margin: var(--space-xl) 0;
}
.dg-blog-content .wp-block-media-text__media {
margin: 0;
overflow: visible;
}
.dg-blog-content .wp-block-media-text__media img {
display: block;
/* Nullstill vertikalmargen fra .dg-prose img, ellers blir boksen
48px hoyere enn innholdet i begge ender. */
margin: 0;
width: 100%;
max-width: 200px;
height: auto;
border-radius: 50%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.dg-blog-content .wp-block-media-text__content > :first-child { margin-top: 0; }
.dg-blog-content .wp-block-media-text__content > :last-child { margin-bottom: 0; }
.dg-blog-content .wp-block-media-text .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-md);
margin-top: var(--space-sm);
}
.dg-blog-content .wp-block-media-text .wp-block-button { margin: 0; }
.dg-blog-content .wp-block-media-text .wp-element-button {
display: inline-block;
padding: 0;
background: transparent;
border: 0;
color: var(--dig-coral-text);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.dg-blog-content .wp-block-media-text .wp-element-button:hover,
.dg-blog-content .wp-block-media-text .wp-element-button:focus-visible {
color: var(--dig-coral-hover);
text-decoration: underline;
}
@media (max-width: 600px) {
.dg-blog-content .wp-block-media-text {
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-top: var(--space-lg);
padding-right: var(--space-lg);
padding-bottom: var(--space-lg);
padding-left: var(--space-lg);
}
.dg-blog-content .wp-block-media-text__media img {
width: 200px;
height: 200px;
max-width: 200px;
}
}
.dg-blog-content table {
max-width: 100%;
overflow-x: auto;
display: block;
}
.dg-blog-content h2 { margin-top: var(--space-xl); scroll-margin-top: 100px; }
.dg-blog-content h3 { margin-top: var(--space-lg); scroll-margin-top: 100px; }
.dg-blog-content p { margin: 0 0 var(--space-md); }
.dg-blog-content .wp-block-spacer { height: 0 !important; }
.dg-blog-content ul, .dg-blog-content ol { margin: 0 0 var(--space-md) var(--space-md); }
.dg-blog-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--dig-coral);
transform: scaleX(var(--dg-scroll, 0));
transform-origin: left;
z-index: 1000;
transition: transform 50ms linear;
width: 100%;
}
.dg-cta-inline {
background: var(--dig-slate-teal);
color: var(--dig-white);
padding: var(--space-xl);
border-radius: var(--radius-feature);
margin: var(--space-xl) 0;
text-align: center;
}
.dg-cta-inline h3,
.dg-prose .dg-cta-inline h3 { color: var(--dig-white); margin: 0 0 var(--space-md); }
.dg-cta-inline p,
.dg-prose .dg-cta-inline p { color: rgba(255, 255, 255, 0.85); margin: 0 0 var(--space-md); }
.dg-cta-inline .dg-btn-primary { background: #047A80; color: #fff; }
/* ---------------------------------------------------------
F2.11 Form-system (.dg-form-*)
Utvider F1.10 fra dg-tokens.css.
--------------------------------------------------------- */
.dg-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dg-form-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dg-form-label {
font-weight: var(--weight-medium);
color: var(--dig-black);
font-size: var(--text-base);
}
.dg-form-hint {
font-size: var(--text-tag);
color: var(--dig-body);
}
/* ---------------------------------------------------------
F2.12 Container-system (.dg-container)
Definert i Fase 1 - duplikat utelatt her.
--------------------------------------------------------- */
/* ---------------------------------------------------------
Ekstra: Chip-filter (for kundereferanser og blogg-arkiv)
--------------------------------------------------------- */
.dg-filter-chip {
padding: 8px 16px;
border-radius: var(--radius-pill);
background: var(--dg-surface);
border: 1px solid var(--dig-border);
color: var(--dig-black);
font-family: var(--font-body);
font-weight: var(--weight-medium);
font-size: var(--text-base);
cursor: pointer;
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.dg-filter-chip:hover { border-color: var(--dig-coral); }
.dg-filter-chip[aria-pressed="true"] {
background: var(--dig-black);
color: var(--dig-white);
border-color: var(--dig-black);
}
/* ---------------------------------------------------------
Ekstra: FAQ native details
--------------------------------------------------------- */
.dg-faq {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dg-faq details {
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
padding: var(--space-lg);
}
.dg-faq summary {
cursor: pointer;
font-weight: var(--weight-semibold);
color: var(--dig-black);
position: relative;
padding-right: var(--space-xl);
list-style: none;
}
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--dig-coral-text);
font-size: 24px;
line-height: 1;
transition: transform var(--transition-base);
}
.dg-faq details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.dg-faq details > *:not(summary) {
margin-top: var(--space-md);
color: var(--dig-body);
}
/* ---------------------------------------------------------
Ekstra: Prosess-steg (.dg-step) - brukt paa flere sider
--------------------------------------------------------- */
.dg-step {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.dg-step__number {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--dig-coral);
color: var(--dig-ink-fixed);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 24px;
font-weight: var(--weight-black);
flex-shrink: 0;
}
.dg-step__body h3 { margin: 0 0 var(--space-xs); }
.dg-step__body p { margin: 0; color: var(--dig-body); }
/* Timeline-variant (wordpress-drift) */
/* =========================================================
Digitelle - DG Per-side (Fase 3)
Side-spesifikke layouts og komponenter pa toppen av
DG Tokens (Fase 1) + DG Components (Fase 2).
Lim inn i WPCodeBox som CSS-snippet:
Name: DG Per-side
Type: CSS
Auto-load: Yes
Location: Site-wide
Priority: 3 (etter Components)
========================================================= */
/* ---------------------------------------------------------
06 Forsiden - service-card med bilde
--------------------------------------------------------- */
.dg-service-card {
display: flex;
flex-direction: column;
background: var(--dg-surface);
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--dig-border);
transition: transform var(--transition-base), box-shadow var(--transition-base);
text-decoration: none;
color: inherit;
}
.dg-service-card,
.dg-service-card:hover,
.dg-service-card:focus { text-decoration: none; }
.dg-service-card h3,
.dg-service-card p { text-decoration: none; }
.dg-service-card {
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.dg-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(var(--dig-coral-rgb), 0.3);
}
.dg-service-card__media {
aspect-ratio: 16 / 10;
object-fit: cover;
width: 100%;
display: block;
}
.dg-service-card__body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
}
.dg-service-card h3 { margin: 0; }
/* ---------------------------------------------------------
07 Hjemmeside-wordpress - feature-grid med redusert antall
--------------------------------------------------------- */
.dg-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-lg);
}
/* To kolonner (2x2) for fire likeverdige kort, f.eks. paa om-oss */
.dg-feature-grid--two {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.dg-feature-grid--two { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------
08 WooCommerce - feature-split layout (3 primary + 6 secondary)
--------------------------------------------------------- */
/* ---------------------------------------------------------
09 WordPress-drift - risiko-kort med tjeneste-farger
--------------------------------------------------------- */
/* ---------------------------------------------------------
10 Annonsering - plattform-accordion og resultat-stat
--------------------------------------------------------- */
/* ---------------------------------------------------------
11 Grafisk design - portefolje-grid med overlay
--------------------------------------------------------- */
.dg-portfolio-item:focus-within img {
transform: scale(1.05);
}
.dg-portfolio-item:focus-within .dg-portfolio-item__overlay {
opacity: 1;
}
/* ---------------------------------------------------------
12 Logo og profilering - logo-grid og deliverables
--------------------------------------------------------- */
.dg-deliverable-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-md);
}
.dg-deliverable {
background: var(--dg-surface);
padding: var(--space-md);
border-radius: var(--radius-card);
border: 1px solid var(--dig-border);
}
.dg-deliverable h3 {
font-size: var(--text-body);
margin: 0 0 var(--space-xs);
}
.dg-deliverable p {
color: var(--dig-body);
margin: 0;
font-size: var(--text-base);
}
/* ---------------------------------------------------------
13 SEO - pillar-grid og pillar-card
--------------------------------------------------------- */
/* ---------------------------------------------------------
14 White label - maalgruppe-signal, trust-band, NDA-badge
--------------------------------------------------------- */
/* ---------------------------------------------------------
15 Kundereferanser - case-grid varianter + portefolje-liste
--------------------------------------------------------- */
.dg-case-grid {
display: grid;
gap: var(--space-xl);
}
.dg-case-card--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: center;
padding: var(--space-lg);
}
.dg-case-card--split h2 {
margin: var(--space-sm) 0;
}
.dg-case-card--split blockquote {
margin: 0;
padding: var(--space-md) 0;
font-style: italic;
color: var(--dig-body);
}
.dg-case-card--split cite {
font-style: normal;
color: var(--dig-black);
font-weight: var(--weight-semibold);
}
.ref-note {
font-size: var(--text-small);
color: var(--dig-body);
margin-top: calc(var(--space-xs) * -0.5);
font-style: italic;
}
@media (max-width: 768px) {
.dg-case-card--split { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------
16 Om oss - team-grid, why-list, office-image
--------------------------------------------------------- */
.dg-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-xl);
align-items: start;
}
@media (max-width: 480px) {
.dg-team-grid { grid-template-columns: 1fr; }
}
.dg-team-member {
display: grid;
grid-template-columns: 120px 1fr;
column-gap: var(--space-lg);
row-gap: var(--space-xs);
align-items: start;
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
padding: var(--space-lg);
}
.dg-team-member__portrait {
grid-column: 1;
grid-row: 1 / span 2;
width: 120px;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-card);
align-self: start;
}
.dg-team-member > h3,
.dg-team-member > .dg-team-member__role { grid-column: 2; }
.dg-team-member h3 {
margin: 0;
align-self: end;
}
.dg-team-member__role { align-self: start; }
.dg-team-member__bio {
grid-column: 1 / -1;
margin-top: var(--space-md);
}
.dg-team-member__role {
color: var(--dig-coral-text);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
margin: 0 0 var(--space-sm);
}
.dg-team-member__bio {
color: var(--dig-body);
font-size: var(--text-base);
line-height: var(--leading-body);
margin: 0;
}
.dg-office-image {
border-radius: var(--radius-feature);
overflow: hidden;
}
.dg-office-image figcaption {
padding: var(--space-sm) var(--space-md);
background: var(--dg-surface);
font-size: var(--text-tag);
color: var(--dig-body);
}
/* ---------------------------------------------------------
17 Priser - pris-kort med "Mest populaer"-badge
--------------------------------------------------------- */
.dg-price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
}
.dg-price-card {
background: var(--dg-surface);
border-radius: var(--radius-feature);
padding: var(--space-xl);
border: 1px solid var(--dig-border);
display: flex;
flex-direction: column;
gap: var(--space-md);
position: relative;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.dg-price-card:hover {
border-color: rgba(var(--dig-coral-rgb), 0.4);
box-shadow: 0 4px 16px rgba(var(--dig-coral-rgb), 0.08);
}
.dg-price-card--featured {
border-color: var(--dig-coral);
border-width: 2px;
box-shadow: 0 8px 24px rgba(var(--dig-coral-rgb), 0.15);
}
.dg-price-card--featured:hover {
border-color: var(--dig-coral);
box-shadow: 0 4px 20px rgba(var(--dig-coral-rgb), 0.15);
}
.dg-price-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--dig-coral);
color: var(--dig-ink-fixed);
padding: 4px 16px;
border-radius: var(--radius-pill);
font-size: var(--text-tag);
font-weight: var(--weight-bold);
white-space: nowrap;
}
.dg-price-amount {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 48px);
font-weight: var(--weight-black);
color: var(--dig-black);
line-height: var(--leading-compact);
}
.dg-price-amount__suffix {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--dig-body);
}
.dg-price-meta {
color: var(--dig-body);
font-size: var(--text-base);
}
.dg-price-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dg-price-list li {
padding-left: var(--space-md);
position: relative;
color: var(--dig-body);
}
.dg-price-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 12px;
height: 12px;
background: var(--dig-coral);
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.dg-callout {
background: var(--dig-blush);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
}
.dg-callout strong { color: var(--dig-black); }
/* ---------------------------------------------------------
18 Kontakt oss - contact-options, layout, map
--------------------------------------------------------- */
.dg-contact-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-sm);
margin: var(--space-xl) 0;
}
.dg-contact-option {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--dg-surface);
border-radius: var(--radius-card);
border: 1px solid var(--dig-border);
text-decoration: none;
color: var(--dig-black);
transition: border-color var(--transition-base);
}
.dg-contact-option:hover { border-color: var(--dig-coral); }
.dg-contact-option__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(var(--dig-coral-rgb), 0.08);
color: var(--dig-coral-text);
flex-shrink: 0;
}
.dg-contact-option__icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.dg-contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: start;
}
@media (max-width: 768px) {
.dg-contact-layout { grid-template-columns: 1fr; }
}
.dg-contact-form-wrap {
background: var(--dg-surface);
padding: var(--space-lg);
border-radius: var(--radius-card);
border: 1px solid var(--dig-border);
}
.dg-contact-form-wrap > h2:first-child { margin-top: 0; }
.dg-contact-map {
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--dig-border);
aspect-ratio: 1 / 1;
position: sticky;
top: 100px;
}
.dg-contact-map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ---------------------------------------------------------
19 Blogg-arkiv - grid + featured layout
--------------------------------------------------------- */
.dg-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-xl);
}
/* =========================================================
Digitelle - Site additions
Header, nav, footer og GH Pages-spesifikke tillegg.
Lagt paa toppen av DG Tokens + DG Components + DG Per-side.
========================================================= */
html { scroll-padding-top: 96px; }
a { color: var(--dig-black); text-decoration: none; }
a:hover { color: var(--dig-coral-hover); }
main { display: block; }
/* ---------------------------------------------------------
Site header
--------------------------------------------------------- */
.dg-site-header {
position: sticky;
top: 0;
z-index: 9999;
background: var(--dg-header-bg);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--dig-border);
}
.dg-site-header__inner {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-md) var(--space-lg);
}
.dg-site-header .dg-theme-toggle {
flex-shrink: 0;
order: 20;
}
.dg-site-header .dg-nav__toggle {
order: 4;
}
/* Desktop: "flat" header der nav-lenkene, theme-toggle og Kontakt oss-knappen
ligger som soskenen til logoen, ved hjelp av display:contents. */
@media (min-width: 1025px) {
.dg-site-header .dg-logo { margin-right: auto; order: 1; }
.dg-site-header .dg-nav { display: contents; }
.dg-site-header .dg-nav__list { display: contents; }
.dg-site-header .dg-nav__list > li {
display: flex;
align-items: center;
order: 10;
}
.dg-site-header .dg-nav__list > li:has(.dg-nav__cta) { order: 30; }
}
.dg-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.dg-logo img {
height: 36px;
width: auto;
}
.dg-logo img.dg-logo__img--dark { display: none; }
html[data-theme="dark"] .dg-logo img.dg-logo__img--light { display: none; }
html[data-theme="dark"] .dg-logo img.dg-logo__img--dark { display: block; }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-logo img.dg-logo__img--light { display: none; }
html[data-theme="auto"] .dg-logo img.dg-logo__img--dark { display: block; }
}
.dg-nav {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dg-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: var(--space-md);
}
.dg-nav__list a {
color: var(--dig-black);
text-decoration: none;
font-weight: var(--weight-medium);
font-size: var(--text-base);
padding: 8px 4px;
border-bottom: 2px solid transparent;
transition: color var(--transition-base), border-color var(--transition-base);
}
.dg-nav__list a:hover { color: var(--dig-coral-hover); }
.dg-nav__list a[aria-current="page"] {
color: var(--dig-black);
border-color: var(--dig-coral);
}
/* Submenu - dropdown for tjenester */
.dg-nav__item--has-submenu { position: relative; }
.dg-nav__item--has-submenu > .dg-submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
padding: 8px var(--space-sm) var(--space-sm);
box-shadow: var(--shadow-card-hover);
list-style: none;
margin: 0;
display: none;
z-index: 10;
}
@media (hover: hover) and (min-width: 1025px) {
.dg-nav__item--has-submenu:hover > .dg-submenu,
.dg-nav__item--has-submenu:focus-within > .dg-submenu {
display: block;
}
}
.dg-submenu li { margin: 0; }
.dg-submenu a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-md);
font-size: var(--text-base);
border-bottom: 0;
color: var(--dig-black);
}
.dg-submenu a:hover {
background: var(--dig-cream);
color: var(--dig-coral-hover);
}
.dg-nav__list a.dg-nav__cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: #047A80;
color: var(--dig-white);
padding: 14px 28px;
border-radius: var(--radius-pill);
font-weight: var(--weight-bold);
font-size: var(--text-base);
line-height: var(--leading-compact);
text-decoration: none;
border: 1.5px solid #047A80;
transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}
.dg-nav__list a.dg-nav__cta:hover {
background: #036267;
border-color: #036267;
color: var(--dig-white);
transform: translateY(-1px);
}
.dg-nav__toggle {
display: none;
background: transparent;
border: 0;
border-radius: var(--radius-md);
padding: 8px 10px;
cursor: pointer;
color: var(--dig-black);
}
/* Theme-toggle (lys/morrk) */
.dg-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--dig-black);
cursor: pointer;
padding: 0;
transition: background-color var(--transition-base);
}
.dg-theme-toggle:hover { background: var(--dg-surface); }
.dg-theme-toggle__icon { display: none; }
/* Vis sol i dark mode (klikk bytter til lys), maane i light mode */
html[data-theme="light"] .dg-theme-toggle__icon--moon { display: block; }
html[data-theme="dark"] .dg-theme-toggle__icon--sun { display: block; }
/* Auto: foelger systemet - viser maane som default (lys), sol hvis systemet er morrk */
html[data-theme="auto"] .dg-theme-toggle__icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-theme-toggle__icon--moon { display: none; }
html[data-theme="auto"] .dg-theme-toggle__icon--sun { display: block; }
}
.dg-nav__toggle-icon {
width: 22px;
height: 2px;
background: currentColor;
display: block;
position: relative;
}
.dg-nav__toggle-icon::before,
.dg-nav__toggle-icon::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 2px;
background: currentColor;
}
.dg-nav__toggle-icon::before { top: -7px; }
.dg-nav__toggle-icon::after { top: 7px; }
.dg-nav__toggle-icon,
.dg-nav__toggle-icon::before,
.dg-nav__toggle-icon::after {
transition: transform var(--transition-base), top var(--transition-base), background-color var(--transition-base);
}
/* Hamburger -> X naar meny er aapen */
.dg-nav__toggle[aria-expanded="true"] .dg-nav__toggle-icon { background: transparent; }
.dg-nav__toggle[aria-expanded="true"] .dg-nav__toggle-icon::before { top: 0; transform: rotate(45deg); }
.dg-nav__toggle[aria-expanded="true"] .dg-nav__toggle-icon::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1024px) {
.dg-site-header__inner {
gap: var(--space-sm);
}
.dg-site-header .dg-theme-toggle {
order: 3;
margin-left: auto;
margin-right: 0;
position: relative;
z-index: 101;
}
.dg-nav__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
order: 4;
position: relative;
z-index: 101;
}
.dg-logo { position: relative; z-index: 101; }
.dg-site-header .dg-nav {
position: static;
margin-left: 0;
order: 5;
}
/* Fullskjerm-takeover naar aapen.
JS teleporterer listen til for aa unnslippe headerens
stacking-kontekst (sticky + backdrop-filter). Vi bruker derfor
klasse paa selve listen i stedet for forelder-attributt. */
.dg-nav__list {
display: none;
position: fixed;
inset: 0;
z-index: 9998;
padding: 72px var(--space-md) 16px;
overflow-y: auto;
background: var(--dg-surface);
border: 0;
border-radius: 0;
margin: 0;
flex-direction: column;
align-items: stretch;
min-width: 0;
}
.dg-nav__list.is-open,
.dg-nav[aria-expanded="true"] .dg-nav__list { display: flex; }
body.dg-menu-open { overflow: hidden; }
.dg-nav__toggle:focus { outline: none; }
.dg-nav__toggle:focus-visible { outline: 2px solid var(--dig-coral); outline-offset: 2px; }
.dg-theme-toggle:focus { outline: none; }
.dg-theme-toggle:focus-visible { outline: 2px solid var(--dig-coral); outline-offset: 2px; }
.dg-nav__list > li {
border-bottom: 1px solid rgba(227, 224, 221, 0.7);
}
.dg-nav__list > li:last-child { border-bottom: 0; }
.dg-nav__list a {
display: flex;
align-items: center;
padding: 14px 0 13px;
border-bottom: 0;
border-radius: 0;
font-size: 21px;
font-weight: var(--weight-regular);
color: var(--dig-black);
letter-spacing: -0.02em;
line-height: 1.2;
}
.dg-nav__list a:hover { background: transparent; color: var(--dig-coral-hover); }
.dg-nav__list a[aria-current="page"] {
background: transparent;
color: var(--dig-coral-hover);
font-weight: var(--weight-medium);
}
/* Submenu: kollapset som standard, utvides naar li har .is-open */
.dg-nav__item--has-submenu > a {
display: flex;
justify-content: space-between;
align-items: center;
}
.dg-nav__item--has-submenu > a::after {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid var(--dig-black);
border-bottom: 1.5px solid var(--dig-black);
transform: rotate(45deg) translate(-3px, -3px);
transition: transform var(--transition-base);
flex-shrink: 0;
margin-left: var(--space-md);
margin-right: 9px;
opacity: 0.5;
}
.dg-nav__item--has-submenu.is-open > a::after {
transform: rotate(-135deg) translate(-3px, -3px);
opacity: 1;
}
.dg-nav__item--has-submenu > .dg-submenu {
position: static;
box-shadow: none;
border: 0;
padding: 0 0 var(--space-md) 0;
margin: 0;
background: transparent;
display: none;
}
.dg-nav__item--has-submenu.is-open > .dg-submenu { display: block; }
.dg-submenu > li { border-top: 0; }
.dg-submenu a {
font-size: 16px;
padding: 8px 0 8px var(--space-md);
font-weight: var(--weight-regular);
color: var(--dig-body);
letter-spacing: -0.01em;
}
/* CTA: full-bredde pill nederst, primaer teal */
.dg-nav__list > li:has(.dg-nav__cta) {
border-bottom: 0;
padding: var(--space-lg) 0 0;
margin-top: auto;
}
.dg-nav__list .dg-nav__cta {
display: flex;
width: 100%;
margin: 0;
padding: 14px var(--space-xl);
border-radius: var(--radius-pill);
background: #047A80;
color: var(--dig-white);
font-size: 17px;
font-weight: var(--weight-semibold);
align-self: stretch;
justify-content: center;
letter-spacing: -0.01em;
}
.dg-nav__list .dg-nav__cta:hover {
background: #036267;
color: var(--dig-white);
}
/* Google Reviews badge i mobil-meny */
}
/* ---------------------------------------------------------
Site footer
--------------------------------------------------------- */
.dg-site-footer {
background: #1a1a1a;
color: rgba(255, 255, 255, 0.9);
padding: var(--space-3xl) 0 var(--space-xl);
margin-top: 0;
}
.dg-site-footer,
.dg-site-footer p,
.dg-site-footer li,
.dg-site-footer span {
color: rgba(255, 255, 255, 0.9);
}
.dg-site-footer h2 {
color: var(--dig-coral);
}
.dg-site-footer a { color: #fff; text-decoration: none; }
.dg-site-footer a:hover { color: var(--dig-coral); }
.dg-site-footer .dg-logo img.dg-logo__img--light { display: none; }
.dg-site-footer .dg-logo img.dg-logo__img--dark { display: block; }
.dg-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-xl);
}
@media (max-width: 768px) {
.dg-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.dg-footer-grid { grid-template-columns: 1fr; }
}
.dg-footer-col h2 {
color: var(--dig-coral);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
margin: 0 0 var(--space-md);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.dg-footer-col h2 + ul + h2 {
margin-top: var(--space-lg);
}
.dg-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.dg-footer-col p { margin: 0 0 var(--space-sm); }
.dg-footer-bottom {
margin-top: var(--space-2xl);
padding-top: var(--space-md);
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.7);
}
.dg-footer-bottom a { color: rgba(255, 255, 255, 0.85); }
/* ---------------------------------------------------------
Generic content blocks
--------------------------------------------------------- */
.dg-prose {
color: var(--dig-body);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
max-width: var(--container-content);
margin: 0 auto;
}
.dg-prose h2 {
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--weight-semibold);
color: var(--dig-black);
line-height: 1.3;
margin-top: var(--space-2xl);
margin-bottom: 12px;
}
.dg-prose h2:first-child { margin-top: 0; }
.dg-prose h3 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
color: var(--dig-black);
line-height: 1.3;
margin-top: var(--space-lg);
margin-bottom: var(--space-xs);
}
.dg-prose p { margin: 0 0 12px; }
.dg-prose p:last-child { margin-bottom: 0; }
/* Adresseblokk i prose: rett skrift og eget avsnittsmellomrom, siden
p:last-child-regelen nuller margen paa avsnittet inni. */
.dg-prose address {
font-style: normal;
margin: 0 0 var(--space-md);
}
.dg-prose ul, .dg-prose ol { margin: 0 0 var(--space-lg) var(--space-lg); }
.dg-prose li { margin-bottom: 6px; }
.dg-prose img,
.dg-prose figure {
margin: var(--space-2xl) 0;
border-radius: var(--radius-feature);
overflow: hidden;
width: 100%;
height: auto;
}
.dg-prose figcaption {
font-size: var(--text-tag);
color: var(--dig-body);
text-align: center;
padding-top: 4px;
}
.dg-prose blockquote {
margin: var(--space-lg) 0;
padding: var(--space-lg);
background: var(--dig-blush);
border-radius: var(--radius-md);
font-style: italic;
}
.dg-prose a { color: var(--dig-coral-text); text-decoration: underline; text-underline-offset: 0.15em; }
.dg-prose a:hover { text-decoration-thickness: 0.12em; }
/* Knapper inni prose skal IKKE arve lenke-stilen (farge/understrek) */
.dg-prose a.dg-btn { text-decoration: none; }
.dg-prose a.dg-btn-primary { color: var(--dig-white); }
.dg-prose a.dg-btn-primary:hover { color: var(--dig-white); }
.dg-prose a.dg-btn-secondary { color: var(--dig-black); }
/* ---------------------------------------------------------
Tekstlenker (WCAG 1.4.1 Bruk av farge)
Klasselose lenker i brodtekst skiller seg ikke nok fra teksten
paa farge alene -> understrek dem. Lenker med klasse (knapper,
kort, tagger, nav) er unntatt via :not([class]).
--------------------------------------------------------- */
main :is(p, li, span) a:not([class]),
.dg-callout a:not([class]),
.dg-footnote a:not([class]),
.dg-team-member__bio a:not([class]) {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* ---------------------------------------------------------
Importerte WordPress-innholdsblokker med innebygd bakgrunnsfarge.
Bakgrunnen ligger inline i innholdet og er FAST (tema-uavhengig),
men tekstfargen arvet temaets brodtekstfarge -> for lav kontrast.
Tving lesbar tekst (og dypere teal der hvit trengs) i begge tema.
--------------------------------------------------------- */
/* Step-cards (SEO 10-stegs metode o.l.) */
.dg-step-card {
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
}
.dg-step-card h3 {
margin-top: 0;
margin-bottom: var(--space-sm);
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
color: var(--dig-black);
}
.dg-step-card p { margin: 0 0 var(--space-md); }
.dg-step-card p:last-child { margin-bottom: 0; }
.dg-step-card img {
border-radius: var(--radius-card);
width: 100%;
height: auto;
margin-top: var(--space-md);
}
/* Two-column intro grid */
.dg-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
@media (max-width: 768px) {
.dg-two-col { grid-template-columns: 1fr; }
}
/* Toppjustert variant: kolonneinnhold starter øverst og første
element i hver kolonne har ingen marg på toppen, slik at H2 og
tilstøtende liste/tekst flukter på linje. */
.dg-two-col--top { align-items: start; }
.dg-two-col--top > div > :first-child { margin-top: 0; }
.dg-section .dg-two-col > div > :first-child { margin-top: 0; }
/* Tjenester-oversikt: seksjonsinnhold skal starte øverst og ha luft
mellom blokkene (pris, FAQ, knapper). */
[id^="tjeneste-"].dg-section .dg-two-col { align-items: start; }
[id^="tjeneste-"].dg-section .dg-two-col > div > :first-child { margin-top: 0; }
[id^="tjeneste-"].dg-section .dg-faq { margin-top: var(--space-lg); }
[id^="tjeneste-"].dg-section .dg-price-amount { margin-top: var(--space-lg); }
[id^="tjeneste-"].dg-section .dg-hero-cta { margin-top: var(--space-xl); }
.dg-two-col img {
border-radius: var(--radius-feature);
}
/* Section heading + lead */
.dg-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-2xl);
}
.dg-section-head h2 {
font-size: var(--text-h2);
margin: 0 0 var(--space-md);
}
.dg-section-head p {
font-size: var(--text-body);
color: var(--dig-body);
margin: 0;
}
/* Feature-kort med stroke-ikon i lys teal-boks (design-revision3) */
.dg-feature-card {
background: var(--dg-surface);
border-radius: var(--radius-card);
padding: var(--space-xl);
border: 1.5px solid var(--dig-border);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
html[data-theme="dark"] .dg-feature-card {
background: var(--dig-slate-teal);
border-color: var(--dig-slate-teal);
}
html[data-theme="dark"] .dg-feature-card h3,
html[data-theme="dark"] .dg-feature-card--link h3 { color: #fff; }
html[data-theme="dark"] .dg-feature-card p { color: rgba(255, 255, 255, 0.85); }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-feature-card {
background: var(--dig-slate-teal);
border-color: var(--dig-slate-teal);
}
html[data-theme="auto"] .dg-feature-card h3,
html[data-theme="auto"] .dg-feature-card--link h3 { color: #fff; }
html[data-theme="auto"] .dg-feature-card p { color: rgba(255, 255, 255, 0.85); }
}
.dg-feature-card:hover {
border-color: var(--dig-coral);
box-shadow: 0 2px 12px rgba(var(--dig-coral-rgb), 0.08);
}
.dg-feature-card h3 {
margin: 0 0 var(--space-sm);
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
color: var(--dig-black);
}
.dg-feature-card p {
margin: 0;
color: var(--dig-body);
line-height: var(--leading-body);
}
.dg-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(var(--dig-coral-rgb), 0.08);
color: var(--dig-coral-text);
margin-bottom: var(--space-lg);
}
.dg-feature-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Prosess-tidslinje (design-revision3) */
.dg-process-timeline {
position: relative;
max-width: var(--container-content);
margin: var(--space-2xl) auto 0;
padding-left: 80px;
}
.dg-process-timeline::before {
content: "";
position: absolute;
left: 27px;
top: 28px;
bottom: 28px;
width: 2px;
background: var(--dig-border);
}
.dg-process-step {
position: relative;
padding-bottom: var(--space-2xl);
}
.dg-process-step:last-child { padding-bottom: 0; }
.dg-process-step__number {
position: absolute;
left: -80px;
top: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--dig-cream);
border: 2px solid var(--dig-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 20px;
font-weight: var(--weight-bold);
color: var(--dig-coral-text);
z-index: 1;
}
.dg-process-step h3 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
color: var(--dig-black);
margin: 4px 0 var(--space-sm);
}
.dg-process-step p {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--dig-body);
margin: 0 0 var(--space-sm);
}
.dg-process-step p:last-child { margin-bottom: 0; }
.dg-process-step img,
.dg-process-step .dg-video-embed {
margin-top: var(--space-md);
}
@media (max-width: 640px) {
.dg-process-timeline { padding-left: 60px; }
.dg-process-step__number {
left: -60px;
width: 44px;
height: 44px;
font-size: 16px;
}
.dg-process-timeline::before {
left: 21px;
top: 22px;
bottom: 22px;
}
}
/* Logo-strip uten marquee (statisk grid) */
/* Side header (subpages) */
.dg-page-header {
padding: var(--space-3xl) 0 var(--space-xl);
text-align: center;
}
.dg-page-header h1 {
margin: 0 0 var(--space-md);
}
.dg-page-header p {
color: var(--dig-body);
font-size: var(--text-body);
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 768px) {
.dg-page-header {
padding-bottom: 0;
}
.dg-page-header + .dg-section {
padding-top: var(--space-3xl);
}
}
/* Skjema-suksess/feilmeldinger */
.dg-form-status {
padding: var(--space-md);
border-radius: var(--radius-md);
margin-top: var(--space-md);
display: none;
}
.dg-form-status--success {
background: rgba(88, 183, 113, 0.12);
color: #1f5f30;
border: 1px solid #58B771;
}
.dg-form-status--error {
background: rgba(192, 57, 43, 0.08);
color: #8a1d10;
border: 1px solid #C0392B;
}
/* Aksent-bakgrunn for "card-on-cream" seksjoner */
.dg-section--soft { background: var(--dig-blush); }
/* Image card med caption */
/* Tjeneste-paraply-grid (services landing) */
.dg-tjeneste-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-lg);
}
/* Pillar-item med icon-tag */
/* Blogg-meta (forfatter + dato) */
/* ---------------------------------------------------------
Google Reviews badge i nav (Fase 1.1)
--------------------------------------------------------- */
/* ---------------------------------------------------------
Hero tillitssignal (Fase 1.3)
--------------------------------------------------------- */
/* ---------------------------------------------------------
Logokarusell (Fase 1.2)
--------------------------------------------------------- */
/* ---------------------------------------------------------
Dark hero - ghost-knapp og tillitssignal (Fase 2.1)
--------------------------------------------------------- */
.dg-hero--dark .dg-btn-ghost {
color: var(--dig-white);
border-color: rgba(255, 255, 255, 0.3);
}
.dg-hero--dark .dg-btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--dig-white);
color: var(--dig-white);
}
/* ---------------------------------------------------------
Device-mockup frame (Fase 4.3)
--------------------------------------------------------- */
/* ---------------------------------------------------------
Tjeneste-tags / service-pills (Fase 2.2)
--------------------------------------------------------- */
.dg-tag {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-body);
font-size: var(--text-tag);
font-weight: var(--weight-medium);
line-height: var(--leading-compact);
border-radius: var(--radius-pill);
white-space: nowrap;
}
.dg-service-card__body .dg-tag {
align-self: flex-start;
}
/* ---------------------------------------------------------
Prisindikasjon på tjenestekort (Fase 3.1)
--------------------------------------------------------- */
.dg-service-card__price {
font-family: var(--font-body);
font-size: var(--text-tag);
font-weight: var(--weight-semibold);
color: var(--dig-slate-teal);
margin-top: auto;
padding-top: var(--space-sm);
}
html[data-theme="dark"] .dg-service-card__price {
color: var(--dig-coral-hover);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-service-card__price {
color: var(--dig-coral-hover);
}
}
/* ---------------------------------------------------------
White label kompakt (Fase 3.2)
--------------------------------------------------------- */
/* ---------------------------------------------------------
Kontaktskjema inline - dark section (Fase 3.4)
--------------------------------------------------------- */
.dg-form--dark .dg-input:focus,
.dg-form--dark .dg-input:focus-visible {
background: rgba(255, 255, 255, 0.08);
border-color: var(--dig-coral);
outline: 2px solid var(--dig-coral);
outline-offset: 2px;
}
.dg-form-field {
margin-bottom: var(--space-md);
}
.dg-form-label {
display: block;
font-weight: var(--weight-medium);
font-size: var(--text-base);
color: var(--dig-black);
margin-bottom: var(--space-xs);
}
.dg-topic-chip input:focus-visible + span {
outline: 3px solid var(--dig-white);
outline-offset: 2px;
}
/* ---------------------------------------------------------
CTA-seksjoner - konsekvent spacing
--------------------------------------------------------- */
/* Type A: Avsluttende CTA (siste seksjon foer footer) */
.dg-section--dark h2 {
margin-top: 0;
margin-bottom: var(--space-md);
}
.dg-section--dark p {
margin-bottom: var(--space-xl);
}
.dg-section--dark p:last-of-type {
margin-bottom: var(--space-lg);
}
/* Inline CTA (midt i innhold) */
/* ---------------------------------------------------------
Utility-klasser for inline-stil-erstatning
--------------------------------------------------------- */
.dg-text-center { text-align: center; }
.dg-text-white { color: var(--dig-white); }
.dg-callout-centered {
max-width: var(--container-content);
margin-left: auto;
margin-right: auto;
text-align: center;
}
.dg-note {
max-width: var(--container-content);
margin: var(--space-lg) auto 0;
color: var(--dig-body);
}
.dg-note--center { text-align: center; }
.dg-note--sm { font-size: var(--text-sm, 14px); }
.dg-grid-cards {
display: grid;
gap: var(--space-md);
}
.dg-grid-cards--narrow {
max-width: var(--container-content);
margin: var(--space-xl) auto 0;
}
.dg-grid-cards--medium {
max-width: 900px;
margin: var(--space-xl) auto 0;
}
.dg-info-card {
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
padding: var(--space-lg);
}
.dg-info-card--compact {
padding: var(--space-md);
}
.dg-info-card h3 { margin-top: 0; }
.dg-hero-checks {
list-style: none;
padding: 0;
margin: var(--space-lg) 0 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
color: var(--dig-body);
}
.dg-hero-checks li {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 0;
}
.dg-hero-checks .dg-check {
color: var(--dig-coral-hover);
}
.dg-hero-checks .dg-inline-icon-item {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 0;
}
.dg-hero-actions {
margin-top: var(--space-lg);
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
.dg-dark-cta-text {
color: rgba(255, 255, 255, 0.85);
max-width: 600px;
margin: 0 auto var(--space-lg);
}
/* Phase 9 utilities: replace inline style="" attributes */
.dg-cta-center { text-align: center; margin-top: var(--space-lg); }
.dg-text-accent { color: var(--dig-coral-text); }
.dg-img-cover { aspect-ratio: 4/3; object-fit: cover; }
.dg-img-cover--16-9 { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dg-img-feature { border-radius: var(--radius-feature); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.dg-img-rounded { border-radius: var(--radius-card); width: 100%; height: auto; }
.dg-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); text-align: center; }
.dg-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.dg-checklist-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.dg-btn-group { display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; }
.dg-badge-dark { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--dig-slate-teal); color: var(--dig-white); border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.dg-form-hint { font-size: var(--text-tag); color: var(--dig-body); margin: 0; }
.dg-checkbox-label { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--dig-body); font-size: var(--text-base); }
.dg-checkbox-input { margin-top: 4px; }
.dg-narrow-centered { max-width: 900px; margin: 0 auto; }
.dg-text-center-narrow { text-align: center; color: var(--dig-body); max-width: 700px; margin: 0 auto; }
.dg-info-list { margin: 0; padding-left: 1.2em; color: var(--dig-body); display: grid; gap: 6px; }
.dg-price-intro { color: var(--dig-body); font-size: var(--text-base); margin-top: var(--space-lg); }
.dg-footnote { text-align: center; margin-top: var(--space-4xl); color: var(--dig-body); }
.dg-price-amount--h2 { font-size: var(--text-h2); }
.dg-mt-lg { margin-top: var(--space-lg); }
.dg-mt-xl { margin-top: var(--space-xl); }
.dg-mt-2xl { margin-top: var(--space-2xl); }
.dg-video-embed {
margin-top: var(--space-md);
aspect-ratio: 16 / 9;
}
.dg-video-embed iframe {
width: 100%;
height: 100%;
border: 0;
border-radius: var(--radius-card);
}
/* Pris-komponent utilities */
.dg-price-amount {
font-size: var(--text-xl, 24px);
color: var(--dig-coral-text);
font-weight: var(--weight-bold);
margin: 0;
}
.dg-price-meta {
margin-top: var(--space-md);
color: var(--dig-body);
font-size: var(--text-sm, 14px);
}
.dg-price-features {
list-style: none;
padding: 0;
margin: var(--space-md) 0 0;
display: grid;
gap: 6px;
color: var(--dig-body);
font-size: var(--text-sm, 14px);
}
.dg-price-features li { margin-bottom: 0; }
.dg-price-includes {
margin: var(--space-sm) 0 0;
padding-left: 1.4em;
color: var(--dig-body);
}
.dg-price-includes li { margin-bottom: var(--space-xs); }
.dg-step-card .dg-price-meta {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--dig-border);
font-size: var(--text-base);
}
.dg-price-note {
color: var(--dig-body);
font-size: var(--text-sm, 14px);
margin: 0;
}
.dg-price-note--top {
margin-top: var(--space-md);
}
.dg-price-note--muted {
opacity: 0.85;
}
.dg-price-grid--services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-lg);
}
/* ---------------------------------------------------------
Phase 5: Accessibility utilities
--------------------------------------------------------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------
Phase 5: Submenu toggle button (mobile nav a11y)
--------------------------------------------------------- */
.dg-nav__submenu-toggle {
background: none;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-align: left;
}
.dg-nav__submenu-toggle:focus-visible {
outline: 2px solid var(--dig-coral);
outline-offset: 2px;
}
@media (max-width: 1024px) {
.dg-nav__submenu-toggle {
padding: 14px 0 13px;
font-size: 21px;
font-weight: var(--weight-regular);
color: var(--dig-black);
letter-spacing: -0.02em;
line-height: 1.2;
}
.dg-nav__submenu-toggle::after {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid var(--dig-black);
border-bottom: 1.5px solid var(--dig-black);
transform: rotate(45deg) translate(-3px, -3px);
transition: transform var(--transition-base);
flex-shrink: 0;
margin-left: var(--space-md);
margin-right: 9px;
opacity: 0.5;
}
.dg-nav__submenu-toggle[aria-expanded="true"]::after {
transform: rotate(-135deg) translate(-3px, -3px);
opacity: 1;
}
}
@media (min-width: 1025px) {
.dg-nav__submenu-toggle {
color: var(--dig-black);
font-weight: var(--weight-medium);
font-size: var(--text-base);
padding: 8px 4px;
border-bottom: 2px solid transparent;
border-radius: 0;
transition: color var(--transition-base), border-color var(--transition-base);
}
.dg-nav__submenu-toggle:hover {
color: var(--dig-coral-hover);
}
.dg-nav__item--has-submenu:hover > .dg-submenu,
.dg-nav__item--has-submenu:focus-within > .dg-submenu {
display: block;
}
}
/* Theme toggle role=switch focus */
.dg-theme-toggle:focus-visible {
outline: 2px solid var(--dig-coral);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Phase 11: Package cards */
.dg-package-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.dg-package-card {
display: flex;
flex-direction: column;
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
padding: var(--space-lg);
gap: var(--space-md);
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.dg-package-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(var(--dig-coral-rgb), 0.3);
}
.dg-package-card__body {
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
}
.dg-package-card h3 {
margin: 0;
}
.dg-package-card__label {
margin: var(--space-xs) 0 0;
font-weight: 600;
}
.dg-package-card__list {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dg-package-card__list a {
color: var(--dig-coral-text);
text-decoration: none;
}
.dg-package-card__list a:hover,
.dg-package-card__list a:focus {
text-decoration: underline;
}
.dg-package-card__price {
margin: var(--space-xs) 0 0;
font-style: italic;
color: var(--dg-text-muted, inherit);
opacity: 0.85;
}
.dg-package-card__cta {
margin-top: auto;
}
.dg-package-card__cta .dg-btn {
width: 100%;
text-align: center;
}
/* ---------------------------------------------------------
Forside-restruktur (Oppgave 1): eyebrow, trust-stripe,
klikkbare feature-kort, kundelogo-strip
--------------------------------------------------------- */
.dg-feature-card--link {
display: block;
text-decoration: none;
color: inherit;
transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.dg-feature-card--link:hover,
.dg-feature-card--link:focus-visible {
border-color: var(--dig-coral);
box-shadow: 0 4px 16px rgba(var(--dig-coral-rgb), 0.10);
transform: translateY(-2px);
}
.dg-feature-card--link h3 { color: var(--dig-black); }
.dg-card-link {
margin-top: var(--space-md);
font-weight: var(--weight-semibold);
color: var(--dig-coral-text);
}
.dg-feature-card--link:hover .dg-card-link,
.dg-feature-card--link:focus-visible .dg-card-link {
color: var(--dig-coral-hover);
}
.dg-faq--narrow {
max-width: 820px;
margin: 0 auto;
}
/* FAQ-side: hopp-til-kategori og kategori-overskrifter */
.dg-faq-jump {
max-width: 820px;
margin: 0 auto var(--space-2xl);
padding: var(--space-lg);
background: var(--dg-surface);
border: 1px solid var(--dig-border);
border-radius: var(--radius-card);
}
.dg-faq-jump__heading {
margin: 0 0 var(--space-md);
font-size: var(--text-small);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--dig-body);
}
.dg-faq-jump ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
}
.dg-faq-jump li { margin: 0; }
.dg-faq-jump a {
display: inline-block;
padding: 4px 12px;
border: 1px solid var(--dig-border);
border-radius: 999px;
color: var(--dig-black);
text-decoration: none;
font-size: var(--text-small);
font-weight: var(--weight-semibold);
transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.dg-faq-jump a:hover,
.dg-faq-jump a:focus-visible {
border-color: var(--dig-coral);
color: var(--dig-coral);
}
.dg-faq-category {
max-width: 820px;
margin: 0 auto var(--space-2xl);
scroll-margin-top: 96px;
}
.dg-faq-category > h2 {
font-size: var(--text-h3);
margin: 0 0 var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--dig-border);
color: var(--dig-black);
}
.dg-faq-category:last-child { margin-bottom: 0; }
.dg-cta-center--stack {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
margin-top: var(--space-lg);
}
/* Metode-side: faseliste som vertikal tidslinje */
.dg-phase-list {
list-style: none;
padding: 0;
margin: 0;
max-width: 860px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
.dg-phase {
position: relative;
scroll-margin-top: 96px;
}
/* Trekk en lett vertikal linje mellom fase-bobler så det leses som tidslinje */
.dg-phase:not(:last-child)::before {
content: "";
position: absolute;
left: 27px;
top: 64px;
bottom: calc(-1 * var(--space-2xl) + 8px);
width: 2px;
background: var(--dig-border);
z-index: 0;
}
.dg-phase .dg-step { position: relative; z-index: 1; }
.dg-phase h2 {
font-size: var(--text-h3);
margin: 0 0 var(--space-xs);
color: var(--dig-black);
}
.dg-phase__meta {
margin: 0 0 var(--space-md);
font-size: var(--text-small);
color: var(--dig-body);
line-height: 1.5;
}
.dg-phase__meta strong { color: var(--dig-black); font-weight: var(--weight-semibold); }
.dg-phase__bullets {
margin: var(--space-md) 0 0;
padding-left: var(--space-lg);
color: var(--dig-body);
}
.dg-phase__bullets li { margin-bottom: var(--space-xs); }
.dg-phase__bullets li:last-child { margin-bottom: 0; }
@media (max-width: 540px) {
.dg-phase-list { gap: var(--space-xl); }
.dg-phase:not(:last-child)::before { left: 23px; top: 56px; }
.dg-phase .dg-step__number { width: 48px; height: 48px; font-size: 20px; }
}
/* Les ogsaa-blokk paa artikkelsider (generert av build.js fra related.json) */
.dg-related-posts {
margin: var(--space-xl) 0;
padding: var(--space-lg);
background: rgba(var(--dig-coral-rgb), 0.06);
border-radius: var(--radius-md);
}
.dg-related-posts h2 {
font-size: var(--text-base);
margin: 0 0 var(--space-sm);
}
.dg-related-posts ul {
margin: 0;
padding-left: 1.2em;
}
.dg-related-posts li + li {
margin-top: var(--space-xs);
}
/* === Heading-hierarki (WCAG 1.3.1): riktige nivaaer som beholder gammelt utseende === */
h2.dg-h3,
.dg-prose h2.dg-h3,
.dg-blog-content h2.dg-h3 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
line-height: var(--leading-body);
margin-top: var(--space-lg);
margin-bottom: var(--space-sm);
scroll-margin-top: 100px;
}
.dg-blog-card h2 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
line-height: 1.3;
margin: 0;
}
.dg-blog-card h2 a {
color: var(--dig-black);
text-decoration: none;
}
.dg-blog-card h2 a:hover { color: var(--dig-coral); }
.dg-service-card h2 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
line-height: var(--leading-body);
margin: 0;
text-decoration: none;
}
/* =========================================================
Forside-redesign (juni 2026)
Hero-accent, situasjonskort med sitat-glyf, ikon-tjenestekort,
moerk "Hvorfor oss"-seksjon, featured referanse og FAQ-ikon.
========================================================= */
/* --- 1. Hero --------------------------------------------- */
.dg-hero-title .accent {
color: var(--dig-coral-hover);
white-space: nowrap;
}
body.home > main > .dg-hero:first-child {
background:
radial-gradient(700px 420px at 12% 110%, rgba(6, 208, 219, .08), transparent 55%),
radial-gradient(ellipse 110% 70% at 50% -10%, #070c1d 0%, transparent 80%),
linear-gradient(180deg, #0a0f22 0%, #131a35 55%, #1a2240 100%);
}
/* --- 2. Situasjonskort: lilla med hvit tekst i begge tema - */
.dg-feature-card--quote,
html[data-theme="dark"] .dg-feature-card--quote {
background: var(--dig-slate-teal);
border-color: var(--dig-slate-teal);
}
.dg-feature-card--link.dg-feature-card--quote h3 { color: #fff; }
.dg-feature-card--quote p { color: rgba(255, 255, 255, 0.85); }
.dg-feature-card--link.dg-feature-card--quote:hover .dg-card-link,
.dg-feature-card--link.dg-feature-card--quote:focus-visible .dg-card-link {
color: #fff;
}
.dg-feature-card--quote:hover,
.dg-feature-card--quote:focus-visible {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
border-color: var(--dig-coral);
}
.dg-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dg-card-link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
transition: transform .2s;
}
.dg-feature-card--quote:hover .dg-card-link svg,
.dg-feature-card--quote:focus-visible .dg-card-link svg {
transform: translateX(4px);
}
/* --- 3. Tjenestekort med ikoner --------------------------- */
.dg-tjeneste-grid--icons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1081px) {
.dg-tjeneste-grid--icons {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.dg-tjeneste-grid--icons {
grid-template-columns: 1fr;
}
}
.dg-service-card--icon {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: var(--space-lg);
}
.dg-service-card--icon:hover {
transform: translateY(-3px);
border-color: var(--dig-coral);
box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
}
.dg-service-card--icon .icon-chip {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(var(--dig-coral-rgb), .10);
color: var(--dig-coral-text);
display: grid;
place-items: center;
margin-bottom: 18px;
flex-shrink: 0;
}
.dg-service-card--icon .icon-chip svg {
width: 24px;
height: 24px;
}
.dg-service-card--icon h3 {
position: relative;
margin: 0 0 var(--space-xs);
}
.dg-service-card--icon .price {
position: relative;
font-weight: 700;
color: var(--dig-coral-text);
font-size: 15.5px;
margin: 0 0 var(--space-sm);
}
/* Beskrivelsen dytter .more til bunnen av kortet */
.dg-service-card--icon > p:not(.price):not(.more) {
position: relative;
flex: 1;
font-size: var(--text-base);
margin: 0;
}
.dg-service-card--icon .more {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-md);
font-weight: var(--weight-semibold);
color: var(--dig-coral-text);
}
.dg-service-card--icon .more svg {
width: 18px;
height: 18px;
flex-shrink: 0;
transition: transform .2s;
}
.dg-service-card--icon:hover .more svg,
.dg-service-card--icon:focus-visible .more svg {
transform: translateX(4px);
}
/* --- 4. Hvorfor smaabedrifter velger oss (moerk) ---------- */
.dg-why {
background:
radial-gradient(800px 400px at 90% 0%, rgba(6, 208, 219, .10), transparent 60%),
var(--dig-slate-teal);
}
.dg-why .dg-section-head h2 { color: var(--dig-white); }
.dg-why .dg-section-head p { color: #D9D4E3; }
.dg-why-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-xl) var(--space-lg);
}
@media (max-width: 920px) {
.dg-why-grid { grid-template-columns: 1fr; }
}
.dg-why-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
}
.dg-why-item__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .14);
/* Paa denne moerke flaten brukes teal KUN som --dig-coral-hover
(#06D0DB) for tekst/ikoner - #05AEB7 har for lav kontrast. */
color: var(--dig-coral-hover);
display: grid;
place-items: center;
}
.dg-why-item__icon svg {
width: 22px;
height: 22px;
}
.dg-why-item h3 {
color: var(--dig-white);
font-size: 18px;
margin: 0 0 var(--space-xs);
}
.dg-why-item p {
color: #CFC9DC;
font-size: 15.5px;
margin: 0;
}
.dg-why .dg-btn-ghost {
color: var(--dig-white);
border-color: rgba(255, 255, 255, .35);
}
.dg-why .dg-btn-ghost:hover {
background: rgba(255, 255, 255, .08);
border-color: var(--dig-white);
color: var(--dig-white);
}
/* Dark mode: behold #413252-flaten, men skill den fra #121212-canvas */
html[data-theme="dark"] .dg-why {
border-top: 1px solid var(--dig-border);
border-bottom: 1px solid var(--dig-border);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-why {
border-top: 1px solid var(--dig-border);
border-bottom: 1px solid var(--dig-border);
}
}
/* --- 5. Referanser: featured sitat + to mindre kort -------- */
.quote-featured {
position: relative;
max-width: 840px;
margin: 0 auto var(--space-2xl);
text-align: center;
}
.quote-featured::before {
content: "\201C";
position: absolute;
top: -70px;
left: 50%;
transform: translateX(-50%);
font-size: 240px;
font-weight: 800;
line-height: 1;
color: rgba(var(--dig-coral-rgb), .12);
pointer-events: none;
}
.quote-featured blockquote {
position: relative;
margin: 0 0 var(--space-lg);
font-size: clamp(22px, 2vw, 32px);
font-weight: 600;
line-height: 1.4;
color: var(--dig-black);
}
.quote-featured figcaption {
position: relative;
color: var(--dig-body);
}
.quote-featured figcaption strong {
display: block;
color: var(--dig-black);
}
.dg-testimonial-grid--duo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg);
max-width: 920px;
margin: 0 auto;
}
@media (max-width: 720px) {
.dg-testimonial-grid--duo { grid-template-columns: 1fr; }
}
.dg-testimonial-grid--duo .dg-testimonial { flex: none; }
/* --- 6. FAQ: plussikon roterer 45 grader naar aapen -------- */
.dg-faq summary::after {
transition: transform .2s;
}
/* --- Tverrgaaende: fokus og redusert bevegelse ------------- */
.dg-feature-card--quote:focus-visible,
.dg-service-card--icon:focus-visible,
.dg-why .dg-btn:focus-visible,
.dg-why a:focus-visible {
outline: 3px solid var(--dig-coral);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.dg-feature-card--quote,
.dg-service-card--icon,
.dg-card-link svg,
.dg-service-card--icon .more svg,
.dg-faq summary::after {
transition: none !important;
}
.dg-feature-card--quote:hover,
.dg-feature-card--quote:focus-visible,
.dg-service-card--icon:hover {
transform: none !important;
}
.dg-feature-card--quote:hover .dg-card-link svg,
.dg-feature-card--quote:focus-visible .dg-card-link svg,
.dg-service-card--icon:hover .more svg,
.dg-service-card--icon:focus-visible .more svg {
transform: none !important;
}
}
/* Mobil: navn og rolle i referansekort under hverandre */
@media (max-width: 720px) {
.dg-testimonial__author {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
}
/* Situasjonskort-lenker i standard teal lenkefarge.
Hoey nok spesifisitet til aa slaa .dg-feature-card p (som ellers
overstyrer .dg-card-link); hover beholder eksisterende coral-hover. */
.dg-feature-card .dg-card-link { color: var(--dig-coral-text); }
html[data-theme="dark"] .dg-feature-card .dg-card-link { color: var(--dig-coral-text); }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-feature-card .dg-card-link { color: var(--dig-coral-text); }
}
/* Situasjonskortene er lilla i begge tema: lenkene trenger den lyse
coral-varianten for kontrast mot --dig-slate-teal. */
.dg-feature-card--quote .dg-card-link,
html[data-theme="dark"] .dg-feature-card--quote .dg-card-link {
color: var(--dig-coral-hover);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .dg-feature-card--quote .dg-card-link { color: var(--dig-coral-hover); }
}