/* ========================================================================== Stress & Trivsel — fælles stilark Varm, rolig, personlig. Newsreader (display) + Karla (brødtekst). ========================================================================== */ :root { /* Farver — varme, dæmpede toner */ --paper: oklch(97.3% 0.013 78); /* cremehvid baggrund */ --paper-deep: oklch(94.6% 0.024 72); /* sektionstone */ --ink: oklch(29% 0.028 52); /* varm mørkebrun tekst */ --ink-soft: oklch(45% 0.022 52); /* sekundær tekst */ --rose: oklch(56% 0.082 26); /* støvet rosa — dekorative accenter */ --rose-deep: oklch(47% 0.088 26); /* CTA-flade, links (AA på paper) */ --rose-dark: oklch(39% 0.085 26); /* CTA hover */ --rose-tint: oklch(91.5% 0.032 28); /* lys rosa flade */ --sage: oklch(42% 0.052 148); /* dæmpet grøn — familievejledning (AA på sage-tint) */ --sage-tint: oklch(92% 0.026 148); --line: oklch(86% 0.02 65); /* skillelinjer */ --font-display: "Newsreader", Georgia, serif; --font-body: "Karla", "Helvetica Neue", sans-serif; /* Type scale — sizes from the Anthropic/Claude spec (display weight 400, graduated leading + tracking applied per tier on the elements below). Display tiers are fluid: each one interpolates linearly from its phone size at 360px viewport to its spec size at 1280px. The rem intercept + vw slope are solved for those two endpoints, so the clamp bounds are hit exactly at the edges instead of the middle term bottoming out early — that is what used to flatten the whole 360–830px range onto the min and leave section headings barely larger than body text on phones. */ --text-xs: 0.75rem; /* 12px — eyebrows, tags, caption-uppercase */ --text-sm: 0.875rem; /* 14px — nav, buttons, captions, footer */ --text-base: 1.0625rem; /* 17px — body (kept over the spec's 16px for legibility) */ --text-lede: clamp(1.1875rem, 1.163rem + 0.109vw, 1.25rem); /* 19 → 20px lede/intro */ --text-h3: clamp(1.5rem, 1.402rem + 0.435vw, 1.75rem); /* 24 → 28px display-sm */ --text-quote: clamp(1.625rem, 1.380rem + 1.087vw, 2.25rem); /* 26 → 36px display-md */ --text-h2: clamp(1.875rem, 1.435rem + 1.957vw, 3rem); /* 30 → 48px display-lg */ --text-h1: clamp(2.5rem, 1.913rem + 2.609vw, 4rem); /* 40 → 64px display-xl */ /* Spacing scale — Anthropic/Claude ladder (4px base) */ --space-xxs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-xxl: 3rem; /* 48px */ --space-section: 6rem; /* 96px */ --container: 1120px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; /* ankerlinks må ikke lande under sticky header */ } /* Lenis styrer selv ankerruller. Native smooth-scroll skal være slået fra, mens den kører — ellers trækker to motorer i den samme scrollposition. Touch-enheder får ikke Lenis og beholder derfor den native smooth-scroll. Kun .lenis, ikke .lenis-smooth: i denne build sættes .lenis-smooth kun, mens en rulning er i gang, og det er for sent — konflikten opstår i det klik, der starter den. .lenis ligger på , så længe instansen kører. */ html.lenis { scroll-behavior: auto; } html.lenis [data-lenis-prevent] { overscroll-behavior: contain; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--rose-deep); } :focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--rose-tint); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--space-xs) var(--space-md); z-index: 100; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* -------------------------------------------------------------------------- Typografi -------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; } h1 { font-size: var(--text-h1); line-height: 1.05; letter-spacing: -0.022em; } h2 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.02em; } h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.011em; } /* Leading og tracking ovenfor er trimmet til de store desktopgrader. Når overskrifterne skalerer ned og brydes over flere linjer på telefon, skal luften tilbage — ellers klumper linjerne sammen. */ @media (max-width: 640px) { h1 { line-height: 1.12; letter-spacing: -0.018em; } h2 { line-height: 1.16; letter-spacing: -0.015em; } h3 { line-height: 1.25; letter-spacing: -0.008em; } .pull-quote, .home-testimonial blockquote { line-height: 1.28; } } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .accent-i { font-style: italic; font-weight: 450; color: var(--rose-deep); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: var(--space-md); } .eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--rose); } .lede { font-size: var(--text-lede); line-height: 1.5; color: var(--ink-soft); max-width: 34em; } /* -------------------------------------------------------------------------- Knapper -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); text-decoration: none; border-radius: 999px; padding: var(--space-sm) var(--space-lg); transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out); } /* Tryk kvitterer med det samme; slippet får lov at sætte sig blødere. */ .btn:active { transform: scale(0.98); transition-property: transform; transition-duration: 0.1s; } .btn-primary { background: var(--rose-deep); color: oklch(98% 0.008 80); } .btn-primary:hover { background: var(--rose-dark); } .btn-ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); } .btn svg { flex: none; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 4.5rem; } .brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 540; letter-spacing: -0.01em; } .brand img { width: 2.1rem; height: auto; } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); } .site-nav > a:not(.btn), .nav-dropdown > summary { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: var(--text-sm); transition: color 0.2s; } .site-nav > a:not(.btn):hover, .site-nav > a[aria-current="page"], .nav-dropdown > summary:hover, .nav-dropdown.is-current > summary { color: var(--ink); } .nav-dropdown { position: relative; } .nav-dropdown > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-xxs); } .nav-dropdown > summary::-webkit-details-marker { display: none; } .nav-dropdown > summary::after { content: ""; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.08rem; transition: rotate 0.2s var(--ease-out), translate 0.2s var(--ease-out); } .nav-dropdown[open] > summary::after { rotate: -135deg; translate: 0 0.1rem; } .nav-submenu { position: absolute; top: calc(100% + var(--space-sm)); left: calc(var(--space-sm) * -1); min-width: 14.5rem; display: grid; gap: 0.1rem; padding: var(--space-xs); background: var(--paper); border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: 0 14px 30px -22px oklch(34% 0.04 55 / 0.55); opacity: 0; pointer-events: none; translate: 0 -0.35rem; transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out); z-index: 80; } .nav-submenu a { color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: var(--space-xs) var(--space-sm); border-radius: 0.45rem; border: 0; } .nav-submenu a:hover, .nav-submenu a[aria-current="page"] { color: var(--ink); background: color-mix(in oklab, var(--rose-tint) 55%, transparent); } @media (min-width: 861px) { .nav-dropdown:focus-within > .nav-submenu, .nav-dropdown[open] > .nav-submenu { opacity: 1; pointer-events: auto; translate: 0 0; } } /* Hover-åbning kun på rigtige pegeredskaber. En touch-bærbar over 861px udløser ellers falsk hover på det tryk, der var ment som navigation. */ @media (min-width: 861px) and (hover: hover) and (pointer: fine) { .nav-dropdown:hover > .nav-submenu { opacity: 1; pointer-events: auto; translate: 0 0; } } .site-nav .btn { padding: var(--space-xs) var(--space-lg); font-size: var(--text-sm); } .nav-toggle { display: none; } @media (max-width: 860px) { .nav-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: none; background: none; color: var(--ink); cursor: pointer; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--space-xs) var(--gutter) var(--space-lg); display: flex; visibility: hidden; opacity: 0; translate: 0 -0.6rem; clip-path: inset(0 0 100% 0); box-shadow: 0 20px 32px -30px oklch(34% 0.04 55 / 0.7); transition: clip-path 0.3s var(--ease-out), translate 0.3s var(--ease-out), opacity 0.2s var(--ease-out), visibility 0s linear 0.3s; } .site-nav.is-open { visibility: visible; opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); transition: clip-path 0.32s var(--ease-out), translate 0.32s var(--ease-out), opacity 0.18s var(--ease-out), visibility 0s; } /* Menupunkterne folder sig ud i rækkefølge, når panelet åbner. */ .site-nav > a, .site-nav > details { opacity: 0; translate: 0 -0.45rem; transition: opacity 0.24s var(--ease-out), translate 0.28s var(--ease-out); } .site-nav.is-open > a, .site-nav.is-open > details { opacity: 1; translate: 0 0; } .site-nav.is-open > :nth-child(1) { transition-delay: 70ms; } .site-nav.is-open > :nth-child(2) { transition-delay: 110ms; } .site-nav.is-open > :nth-child(3) { transition-delay: 150ms; } .site-nav.is-open > :nth-child(4) { transition-delay: 190ms; } .site-nav.is-open > :nth-child(5) { transition-delay: 230ms; } .site-nav.is-open > :nth-child(6) { transition-delay: 270ms; } .site-nav > a:not(.btn) { padding: var(--space-sm) 0; font-size: var(--text-base); border-bottom: 1px solid var(--line); } .nav-dropdown { border-bottom: 1px solid var(--line); } .nav-dropdown > summary { padding: var(--space-sm) 0; font-size: var(--text-base); display: flex; justify-content: space-between; } .nav-submenu { position: static; min-width: 0; padding: 0 0 var(--space-md) var(--space-md); border: 0; border-radius: 0; box-shadow: none; background: transparent; opacity: 1; pointer-events: auto; translate: none; display: none; } .nav-dropdown[open] .nav-submenu { display: grid; } .nav-submenu a { font-size: var(--text-sm); padding: var(--space-xs) 0; border-radius: 0; } .nav-submenu a:hover, .nav-submenu a[aria-current="page"] { background: transparent; } .site-nav .btn { margin-top: var(--space-md); justify-content: center; } } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { overflow: hidden; } .hero .container { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); } .hero-points { list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-lg) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); font-size: var(--text-sm); color: var(--ink-soft); } .hero-points li { display: inline-flex; align-items: center; gap: var(--space-xs); } .hero-points svg { color: var(--sage); flex: none; } .hero-figure { position: relative; margin: 0; justify-self: end; width: min(100%, 25rem); } .hero-figure::before { content: ""; position: absolute; inset: 8% -6% -4% 6%; background: var(--rose-tint); border-radius: 49% 51% 47% 53% / 55% 48% 52% 45%; z-index: -1; } .hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 34% center; border-radius: 12rem 12rem 1rem 1rem; } @media (max-width: 860px) { .hero .container { grid-template-columns: 1fr; padding-block: clamp(1.75rem, 5vw, 2.75rem) clamp(2.25rem, 6vw, 3.5rem); } .hero-figure { justify-self: center; order: -1; width: min(100%, 26rem); } .hero-figure img { aspect-ratio: 4 / 3; object-position: 38% center; border-radius: 7rem 7rem 1rem 1rem; } .hero-cta { margin-top: var(--space-lg); } .hero-points { margin-top: var(--space-lg); padding-top: var(--space-md); gap: var(--space-xs) var(--space-lg); } } /* -------------------------------------------------------------------------- Sektioner -------------------------------------------------------------------------- */ .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .areas-section { padding-top: clamp(2.5rem, 5vw, 4.5rem); } .section-head { max-width: 38em; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head .lede { margin-top: var(--space-md); } .home-testimonial { margin: clamp(3rem, 7vw, 5.5rem) 0 0; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem); background: var(--rose-tint); border-left: 3px solid var(--rose); } .home-testimonial blockquote { max-width: 28em; margin: 0; font-family: var(--font-display); font-size: var(--text-quote); font-weight: 400; line-height: 1.2; letter-spacing: -0.014em; } .home-testimonial figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); color: var(--ink-soft); font-size: var(--text-sm); } .home-testimonial a { color: var(--rose-deep); font-weight: 700; text-underline-offset: 0.2em; } /* Områdeliste — redaktionelle rækker frem for kort */ .area-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .area-row { border-bottom: 1px solid var(--line); } .area-link { display: grid; grid-template-columns: 3.5rem 1fr 2.5rem; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.4rem, 3vw, 2rem) var(--space-xxs); text-decoration: none; color: inherit; transition: background-color 0.25s var(--ease-out); } .area-link:hover { background: color-mix(in oklab, var(--rose-tint) 45%, transparent); } /* Indrykningen sker på indholdet, ikke på rækkens padding: 0,75rem er præcis det spring, padding-left lavede før, men uden at ombryde teksten hver frame. */ .area-num, .area-body { transition: translate 0.25s var(--ease-out); } .area-num { font-family: var(--font-display); font-style: italic; font-size: var(--text-base); color: var(--rose-deep); } /* Rækketitlen er h3 på forsiden og h2 på /behandlinger/ — samme komponent, samme visuelle tier. */ .area-body :is(h2, h3) { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); font-size: var(--text-quote); } .area-tag { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); background: var(--sage-tint); border-radius: 999px; padding: var(--space-xxs) var(--space-sm); translate: 0 -0.2em; } .area-body p { margin: var(--space-xs) 0 0; color: var(--ink-soft); max-width: 44em; } .area-arrow { align-self: center; color: var(--rose-deep); transition: translate 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .area-link:hover .area-num, .area-link:hover .area-body { translate: 0.75rem 0; } .area-link:hover .area-arrow { translate: 0.4rem 0; } } .family-paths { padding-block: clamp(3rem, 7vw, 5.5rem); background: color-mix(in oklab, var(--sage-tint) 54%, var(--paper)); } .family-paths .section-head { max-width: 44rem; } .family-path-list { border-color: color-mix(in oklab, var(--sage) 24%, var(--line)); } .family-path-list .area-row { border-color: color-mix(in oklab, var(--sage) 24%, var(--line)); } .family-path-list .area-num, .family-path-list .area-arrow { color: var(--sage); } .family-path-list .area-link:hover { background: color-mix(in oklab, var(--sage-tint) 72%, transparent); } @media (max-width: 640px) { .area-link { grid-template-columns: 1fr 2rem; } .area-num { display: none; } } /* Om Gitte */ .about { background: var(--paper-deep); } .about .container { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .about-figure { margin: 0; position: relative; } .about-figure img { border-radius: 1rem; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 24px 50px -30px oklch(35% 0.05 50 / 0.6); } .about-figure figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--ink-soft); text-align: center; } .pull-quote { font-family: var(--font-display); font-style: italic; font-weight: 450; font-size: var(--text-quote); line-height: 1.2; letter-spacing: -0.014em; margin: var(--space-lg) 0 var(--space-lg); text-wrap: balance; } .signature { margin-top: var(--space-lg); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; } .signature small { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-xxs); } .about .btn { margin-top: var(--space-lg); } @media (max-width: 860px) { .about .container { grid-template-columns: 1fr; } .about-figure { max-width: 22rem; margin-inline: auto; } .about-figure img { aspect-ratio: 1 / 1; } } /* Sådan foregår det — tre trin */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); counter-reset: step; } .step { position: relative; padding-top: var(--space-lg); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: var(--rose); opacity: 0.55; position: absolute; top: calc(var(--space-md) * -1); left: 0; line-height: 1; } .step h3 { margin-bottom: var(--space-xs); position: relative; } .step p { color: var(--ink-soft); font-size: var(--text-sm); } @media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: var(--space-xl); } } /* Familievejledning-bånd (B2B) */ .pro-band { background: var(--sage-tint); } .pro-band .container { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); } .pro-band .eyebrow { color: var(--sage); } .pro-band .eyebrow::before { background: var(--sage); } .pro-band p { color: var(--ink-soft); max-width: 38em; } .pro-band .btn-ghost { justify-self: start; } @media (min-width: 861px) { .pro-band .btn-ghost { justify-self: end; } } @media (max-width: 860px) { .pro-band .container { grid-template-columns: 1fr; } } /* CTA-bånd */ .cta-band { background: var(--paper); } .cta-band .container { text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem); display: grid; justify-items: center; gap: var(--space-lg); } .cta-band h2 { max-width: 18em; } .cta-band .lede { max-width: 36em; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg); } .cta-phone { font-weight: 700; color: var(--ink); text-decoration: none; } .cta-phone:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Behandlinger - detaljesider -------------------------------------------------------------------------- */ .treatment-hero { padding-bottom: clamp(1rem, 3vw, 2rem); } .treatment-content { padding-top: 0; } .treatment-stack { max-width: 48rem; display: grid; gap: var(--space-md); } .treatment-stack h2 { margin-bottom: var(--space-xs); } .treatment-stack h3 { margin-top: var(--space-lg); font-size: var(--text-h3); } .check-list, .dash-list { margin: var(--space-xxs) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); color: var(--ink-soft); } .check-list li, .dash-list li { position: relative; padding-left: var(--space-lg); } .check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0.02em; color: var(--sage); font-weight: 700; } .dash-list li::before { content: "-"; position: absolute; left: 0; top: 0; color: var(--rose-deep); font-weight: 700; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: oklch(26% 0.025 50); color: oklch(88% 0.015 70); font-size: var(--text-sm); } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { color: oklch(98% 0.01 80); text-decoration: underline; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-xl); } .footer-brand .brand { color: oklch(96% 0.01 80); font-size: 1.15rem; } .footer-brand p { color: oklch(76% 0.018 65); margin-top: var(--space-md); max-width: 26em; } .site-footer h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(76% 0.02 65); margin: 0 0 var(--space-md); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); } .footer-meta { border-top: 1px solid oklch(36% 0.02 50); padding-block: var(--space-lg); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: oklch(76% 0.018 65); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Cinematisk bevægelsessystem -------------------------------------------------------------------------- */ .reveal, .motion-item, .motion-intro { opacity: 1; transform: none; clip-path: none; } @media (prefers-reduced-motion: no-preference) { /* Headeren sætter sig på plads før resten af siden folder sig ud. */ .motion-ready .site-header { opacity: 0; translate: 0 -0.7rem; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), translate 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .motion-ready.page-loaded .site-header { opacity: 1; translate: 0 0; } .motion-ready .motion-intro { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(60ms + var(--motion-order, 0) * 50ms); } .motion-ready.page-loaded .motion-intro { opacity: 1; transform: translate3d(0, 0, 0); } /* Herobilledet er sidens LCP-element og hentes med fetchpriority="high". Ingen clip-path her: en fuldt beskåret flade maler nul pixels og tæller ikke som LCP-kandidat, og clip-path komponeres ikke — den gentegner hver frame netop mens hovedtråden har travlest. Kun opacity og transform. */ .motion-ready .hero-figure.motion-intro { transform: translate3d(0, 1rem, 0) scale(1.02); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 80ms; } .motion-ready.page-loaded .hero-figure.motion-intro { transform: translate3d(0, 0, 0) scale(1); } .motion-ready .motion-item { opacity: 0; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--motion-delay, 0ms); } .motion-ready .motion-item.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Section headings announce a new editorial chapter from the reading edge. */ .motion-ready .motion-heading-left { transform: translate3d(-1.4rem, 0, 0); } /* Right-hand copy and actions converge toward the section they belong to. */ .motion-ready .motion-copy-right { transform: translate3d(1.5rem, 0, 0); } /* Service routes arrive as complete rows, preserving immediate readability. Fuld transition-shorthand frem for positionel transition-duration — den ombandt sig lydløst til de forkerte properties, hvis rækkefølgen i .motion-item nogensinde blev byttet om. Bemærk at shorthand nulstiller transition-delay, så den skal gentages. */ .motion-ready .motion-row-settle { transform: translate3d(-1rem, 0, 0); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--motion-delay, 0ms); } /* Photography arrives as a physical layer rather than another text fade. */ .motion-ready .motion-media-reveal { opacity: 1; transform: none; } /* Clip-path bliver liggende her: portrættet er lazy-loaded og under folden, så gentegningen rammer aldrig den kritiske sti. */ .motion-ready .motion-media-reveal img { clip-path: inset(100% 0 0 0 round 1rem); transform: scale(1.045); transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .motion-ready .motion-media-reveal.is-visible img { clip-path: inset(0 0 0 0 round 1rem); transform: scale(1); } /* Testimonials settle forward to create a brief trust pause. */ .motion-ready .motion-quote { transform: scale(0.965); transform-origin: 12% 50%; } /* The three-step process advances horizontally in sequence. */ .motion-ready .motion-step-sequence { transform: translate3d(-1.1rem, 0, 0) scale(0.985); } /* Lists disclose their evidence without moving the surrounding reading flow. */ .motion-ready .motion-list-reveal { opacity: 1; transform: none; } .motion-ready .motion-list-reveal > li { opacity: 0; transform: translate3d(-0.8rem, 0, 0); transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .motion-ready .motion-list-reveal.is-visible > li { opacity: 1; transform: translate3d(0, 0, 0); } .motion-ready .motion-list-reveal.is-visible > li:nth-child(2) { transition-delay: 55ms; } .motion-ready .motion-list-reveal.is-visible > li:nth-child(3) { transition-delay: 110ms; } .motion-ready .motion-list-reveal.is-visible > li:nth-child(4) { transition-delay: 165ms; } .motion-ready .motion-list-reveal.is-visible > li:nth-child(5) { transition-delay: 220ms; } /* Ordinary introductory copy only gains presence; it does not travel. */ .motion-ready .motion-fade-only { transform: none; } /* The final conversion moment gently resolves into focus as one composition. */ .motion-ready .motion-cta-focus { transform: scale(0.975); transform-origin: 50% 60%; } /* Ingen transition-override her længere: basisreglen holder trykket på 100 ms og løftet på 200 ms. Hover er bevægelse på en pegeenhed og gates, så et tryk på touch ikke efterlader knappen løftet efter navigationen. */ @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translate3d(0, -0.18rem, 0); box-shadow: 0 0.9rem 2.2rem -1.35rem color-mix(in oklab, var(--rose-deep) 62%, transparent); } } .btn:active { transform: translate3d(0, 0, 0) scale(0.98); } .hero-figure::before { animation: hero-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes hero-breathe { from { transform: translate3d(-0.35rem, 0.4rem, 0) rotate(-1.2deg) scale(0.985); } to { transform: translate3d(0.45rem, -0.45rem, 0) rotate(1.1deg) scale(1.025); } } } @media (max-width: 860px) and (prefers-reduced-motion: no-preference) { .motion-ready .motion-intro, .motion-ready .motion-heading-left, .motion-ready .motion-copy-right, .motion-ready .motion-row-settle, .motion-ready .motion-step-sequence { transform: translate3d(0, 1.1rem, 0); } .motion-ready.page-loaded .motion-intro, .motion-ready .motion-item.is-visible { transform: translate3d(0, 0, 0); } .motion-ready .hero-figure.motion-intro { transform: translate3d(0, 0.85rem, 0) scale(1.02); } .motion-ready.page-loaded .hero-figure.motion-intro { transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Reduceret bevægelse betyder færre og mildere animationer — ikke ingen. Alt der flytter, skalerer, roterer eller beskærer slås fra; opacitet og farve beholder deres overgange, så tilstandsskift stadig kan aflæses. */ *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, box-shadow, visibility !important; transition-duration: 0.15s !important; transition-delay: 0s !important; } .reveal, .motion-item, .motion-intro, .motion-media-reveal img, .motion-list-reveal > li { opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; } /* Hover-forskydninger ville ellers springe i stedet for at glide. */ .btn:hover, .btn:active { transform: none !important; } .area-link:hover .area-num, .area-link:hover .area-body, .area-link:hover .area-arrow { translate: none !important; } /* Panelerne skal tone frem på plads, ikke hoppe de 0,45–0,6rem ind. */ .site-nav, .site-nav > a, .site-nav > details, .nav-submenu { translate: none !important; } } /* -------------------------------------------------------------------------- Undersider - fælles redaktionelt system -------------------------------------------------------------------------- */ .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 1.35rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out); } .menu-lines { position: relative; } .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; } .menu-lines::before { top: -0.38rem; } .menu-lines::after { top: 0.38rem; } /* Burger bliver til et kryds, mens panelet folder sig ud. */ .nav-toggle.is-open .menu-lines { background: transparent; } .nav-toggle.is-open .menu-lines::before { transform: translateY(0.38rem) rotate(45deg); } .nav-toggle.is-open .menu-lines::after { transform: translateY(-0.38rem) rotate(-45deg); } .inner-hero { border-bottom: 1px solid var(--line); background: radial-gradient(circle at 87% 18%, color-mix(in oklab, var(--rose-tint) 72%, transparent) 0 12rem, transparent 12.1rem), var(--paper); } .pro-page .inner-hero { background: radial-gradient(circle at 87% 18%, color-mix(in oklab, var(--sage-tint) 80%, transparent) 0 12rem, transparent 12.1rem), var(--paper); } .inner-hero .container { padding-block: clamp(3.5rem, 9vw, 7rem); } .inner-hero h1 { max-width: 15ch; } .inner-hero .lede { margin-top: var(--space-lg); max-width: 40rem; } .pro-page .inner-hero .eyebrow, .pro-page .inner-content a { color: var(--sage); } .pro-page .inner-hero .eyebrow::before { background: var(--sage); } .inner-content { padding-top: clamp(3rem, 7vw, 5.5rem); } .prose { max-width: 49rem; margin-inline: auto; font-size: var(--text-base); } .prose > h2 { font-size: var(--text-h3); margin: clamp(2.5rem, 6vw, 4rem) 0 var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--line); } .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose > p { max-width: 44rem; } .prose strong { color: var(--ink); } .prose .check-list { gap: var(--space-sm); margin-block: var(--space-lg); } .prose .check-list li { padding-left: var(--space-xl); } .prose .check-list li::before { width: 1.15rem; height: 1.15rem; display: grid; place-items: center; top: 0.25em; border-radius: 50%; background: var(--sage-tint); font-size: 0.72rem; } /* Interviewspørgsmål i testimonials — markerer et skift i stemme, ikke et nyt afsnit. Må derfor ikke bære h2'ens streg og luft. */ .prose .interview-q { margin: var(--space-xl) 0 var(--space-md); font-family: var(--font-display); font-style: italic; font-size: var(--text-lede); line-height: 1.4; color: var(--ink-soft); } .inline-action { margin-top: var(--space-lg); } .inline-action a { display: inline-flex; font-weight: 700; text-underline-offset: 0.2em; } .credentials-page .prose { max-width: 60rem; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); } .credentials-page .prose h2, .credentials-page .prose ul, .credentials-page .prose p { break-inside: avoid; } .credentials-page .prose h2:first-child { margin-top: 0; } .contact-grid, .about-page-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: start; } .contact-grid h2, .about-page-grid h2 { margin-bottom: var(--space-lg); } .contact-details, .hours { margin: var(--space-xl) 0 clamp(2.5rem, 5vw, 4rem); } .contact-details div, .hours div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: 1px solid var(--line); } .contact-details dt, .hours dt { color: var(--ink-soft); } .contact-details dd, .hours dd { margin: 0; font-weight: 700; } .contact-form { display: grid; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper-deep); border: 1px solid var(--line); border-radius: 1rem; } .contact-form p { color: var(--ink-soft); } .contact-form label { margin: var(--space-md) 0 var(--space-xxs); font-size: var(--text-sm); font-weight: 700; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid color-mix(in oklab, var(--ink-soft) 55%, var(--line)); border-radius: 0.45rem; background: var(--paper); color: var(--ink); font: inherit; padding: var(--space-sm); } .contact-form textarea { resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--rose-deep); outline-offset: 2px; } .contact-form .btn { justify-self: start; border: 0; cursor: pointer; margin-top: var(--space-lg); } .contact-form .form-note { margin-top: var(--space-sm); font-size: var(--text-sm); } .about-page-grid .about-figure { position: sticky; top: 7rem; } .success-panel { min-height: calc(100dvh - 4.5rem); display: grid; place-items: center; padding-block: clamp(4rem, 10vw, 8rem); } .success-card { max-width: 40rem; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: var(--space-lg); padding: clamp(2rem, 7vw, 5rem); background: var(--rose-tint); border-radius: 1.25rem; } .success-card .eyebrow { margin-bottom: 0; } .success-card .eyebrow::before { display: none; } @media (max-width: 780px) { .credentials-page .prose { columns: 1; } .contact-grid, .about-page-grid { grid-template-columns: 1fr; } .about-page-grid .about-figure { position: static; max-width: 22rem; margin-inline: auto; } } @media (max-width: 520px) { .inner-hero { background: var(--paper); } .contact-details div, .hours div { grid-template-columns: 1fr; gap: 0; } }