/* ============================================================ MADSEN STUDIO — main.css (v1, Session 1) Nav + Hero only. Subsequent sections added in later sessions. ============================================================ */ /* -------- Reset -------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* iOS: fjern grå tap-flash på interaktive elementer (touch). */ a, button { -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* overflow-x: hidden would force overflow-y: auto (CSS spec quirk), which makes the scroll container — that breaks window/document scroll event listeners. overflow-x: clip cuts horizontal overflow without creating a scroll container. */ overflow-x: clip; min-height: 100vh; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; } ::selection { background: var(--ink); color: var(--paper); } /* Inline emphasis — Fraunces italic serif set against the Plus Jakarta sans body (Luke-style type-mixing). Specific spots (cases-title, footer-brand) override color. */ em, .em { font-family: var(--f-display); font-style: italic; font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 1; } /* Film-grain overlay — subtil analog tekstur. Screen-blend så de mørke noise-specks læser som lette korn på det near-black lærred. Intensitet = opacity (skrueknap). */ .grain { position: fixed; inset: 0; z-index: 90; /* over indhold + nav, under loaderen (9999) */ pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: 0.5; mix-blend-mode: screen; } /* -------- Lenis smooth scroll (required helper CSS) -------- */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } /* Lenis owns smoothing — kill native smooth */ .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* -------- Utilities -------- */ .mono { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .mono-l { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.06em; text-transform: uppercase; } .dim { color: var(--ink-3); } @media (max-width: 800px) { .hide-sm { display: none !important; } } /* -------- Eyebrow accent — Shrikhand fat display serif on section kicker-labels. Mixed-case (Shrikhand's contrast reads best un-capitalised), no letter-spacing, bumped size so the heavy serif registers. Per-section colors stay as-is. This is the ONE place the brand uses Shrikhand — a deliberate accent. -------- */ .cases-eyebrow span, .hvorfor-eyebrow span, .about-eyebrow span, .pakker-eyebrow span, .proces-eyebrow span, .faq-eyebrow span, .kontakt-eyebrow span { font-family: var(--f-accent); font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0.005em; font-size: 17px; line-height: 1.1; } /* -------- Layout container -------- */ .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } /* -------- Nav -------- */ /* Nav: floating glassy pill, centered, with progress-ring tracing its edge. Hidden by default (opacity 0); JS reveals after scroll has passed the hero. */ .nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 1280px; z-index: 50; padding: 12px 24px 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); border-radius: 999px; background: rgba(18, 18, 22, 0.55); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid rgba(236, 234, 226, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Opacity is driven frame-by-frame by the intro timeline (rAF), so no CSS transition here — a transition would lag behind the JS-set values. */ opacity: 0; pointer-events: none; } .nav.is-revealed { pointer-events: auto; } /* Progress ring — sun-gold stroke that traces the rounded nav edge. stroke-dashoffset is driven by JS based on overall page scroll progress. */ .nav-progress-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .nav-progress-path { fill: none; stroke: var(--warm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* pathLength=100 normalizes path total to 100 units. dasharray "100 100" = one dash + one gap (each 100 long). dashoffset 100 = hidden, 0 = drawn. */ stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px rgba(212, 168, 91, 0.55)) drop-shadow(0 0 12px rgba(212, 168, 91, 0.25)); transition: stroke-dashoffset 80ms linear; } .brand { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: 0.02em; font-variation-settings: "opsz" 14, "SOFT" 50, "WONK" 0; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px; } .brand-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); margin: 0 2px 2px 0; transform: translateY(-3px); } .brand-suffix { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-left: var(--s-3); font-weight: 400; } .nav-links { display: flex; align-items: center; gap: var(--s-6); list-style: none; } .nav-links a { font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--ink-2); position: relative; padding: 4px 0; transition: color 200ms ease; } .nav-links a:hover { color: var(--ink); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--clay); transition: width 250ms cubic-bezier(0.4, 0.05, 0.3, 1); } .nav-links a:hover::after { width: 100%; } .nav-right { display: flex; align-items: center; gap: var(--s-5); } .nav-phone { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); letter-spacing: 0.02em; } .nav-phone:hover { color: var(--ink); } .nav-cta { font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--paper); background: var(--warm); padding: 10px 18px; border-radius: 999px; transition: background 250ms ease, transform 250ms cubic-bezier(0.4, 0.05, 0.3, 1), box-shadow 250ms ease; letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(212, 168, 91, 0.24); } .nav-cta:hover { background: var(--warm-deep); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212, 168, 91, 0.32); } /* Mobile toggle (hidden on desktop; shown ≤820px) */ .nav-toggle { display: none; width: 28px; height: 28px; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-toggle svg { width: 100%; height: 100%; } /* Mobile slide-in menu + backdrop. Siblings of

; revealed by JS (.is-open). Only reachable ≤820px where .nav-toggle becomes visible. */ .nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(10, 10, 11, 0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 360ms ease; } .nav-backdrop.is-open { opacity: 1; pointer-events: auto; } .nav-mobile { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(82vw, 360px); display: flex; flex-direction: column; justify-content: center; gap: var(--s-7); padding: var(--s-9) var(--s-7) calc(var(--s-7) + env(safe-area-inset-bottom)); background: rgba(15, 15, 18, 0.97); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-left: 1px solid rgba(236, 234, 226, 0.12); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: transform 420ms cubic-bezier(0.4, 0.05, 0.3, 1); visibility: hidden; } .nav-mobile.is-open { transform: translateX(0); visibility: visible; } .nav-mobile-links { display: flex; flex-direction: column; gap: var(--s-5); } .nav-mobile-links a { font-family: var(--f-display); font-style: italic; font-size: 32px; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; transition: color 200ms ease; } .nav-mobile-links a:active, .nav-mobile-links a:hover { color: var(--warm); } .nav-mobile-foot { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-6); border-top: 1px solid rgba(236, 234, 226, 0.12); } .nav-mobile-phone { font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.04em; color: var(--ink-2); -webkit-tap-highlight-color: transparent; } .nav-mobile-cta { font-family: var(--f-body); font-weight: 600; font-size: 16px; text-align: center; color: var(--paper); background: var(--warm); padding: 15px 20px; border-radius: 999px; -webkit-tap-highlight-color: transparent; } /* ============================================================ HERO REBUILD — Loader-ritual + Fullscreen Video + Hero-Mark ============================================================ */ /* -------- Loader: 3.5s beige ritual, infinity-stroke draws continuously, fades after min-delay revealing the video underneath. -------- */ .loader { position: fixed; inset: 0; z-index: 9999; background: #0A0A0B; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; transition: opacity 600ms ease; pointer-events: auto; } .loader.is-out { opacity: 0; pointer-events: none; } /* MS-cube mark — strokes draw on in sequence to assemble the monogram, then the finished mark holds with a slow breath so the 3.5s ritual stays alive. */ .loader-mark { width: 188px; height: auto; overflow: visible; animation: lm-breathe 2.6s ease-in-out 2.1s infinite; } .lm { fill: none; stroke: var(--ink); stroke-width: 5; /* bolder weight, closer to Jens' reference mark (~3.9px rendered) */ stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; /* pathLength=1 → normalised draw */ stroke-dashoffset: 1; animation: lm-draw 1.0s cubic-bezier(0.65, 0, 0.35, 1) forwards; } /* Assembly order: roof first, then the two legs, the M-notch, finally the base. */ .lm-roof { animation-delay: 0.10s; } .lm-vleft { animation-delay: 0.55s; } .lm-vright { animation-delay: 0.65s; } .lm-mid { animation-delay: 1.05s; } .lm-base { animation-delay: 1.55s; } @keyframes lm-draw { to { stroke-dashoffset: 0; } } @keyframes lm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } .loader-word { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 13px; color: rgba(236, 234, 226, 0.45); letter-spacing: 0.36em; text-transform: lowercase; font-variation-settings: "opsz" 14, "SOFT" 80, "WONK" 1; padding-left: 0.36em; /* visual centering w/ the letter-spacing */ } /* Loader count-up — big mono 0→100 in the corner (awwwards-style "loading" moment). */ .loader-count { position: absolute; right: clamp(24px, 5vw, 64px); bottom: clamp(20px, 4vw, 52px); font-family: var(--f-mono); font-weight: 500; font-size: clamp(40px, 6vw, 82px); line-height: 1; letter-spacing: 0.01em; color: rgba(236, 234, 226, 0.55); font-variant-numeric: tabular-nums; } /* -------- Hero: pinned fullscreen background video. position:fixed makes it stay in the viewport while subsequent sections scroll up OVER it. The hero-spacer below reserves 100vh of flow so the page document is taller than just the fixed hero. -------- */ .hero { position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 1; overflow: hidden; background: var(--ink-bg); isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; /* above the video (z0), below the wordmark/menu — inside the isolated hero */ pointer-events: none; /* Soft cinematic scrim — darkens the centre so the difference-blended wordmark (+ menu) pops crisp, while the lion/foreground edges stay bright. A subtle filmic vignette. */ background: radial-gradient(ellipse 78% 64% at 50% 42%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.24) 46%, transparent 78%); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; /* Ken Burns zoom during the intro is applied via inline transform (scale). */ transform-origin: center; will-change: transform; } /* -------- Scroll lock during the cinematic intro -------- */ html.intro-lock, html.intro-lock body { overflow: hidden; /* touch-action none stops mobile momentum scroll during the lock */ touch-action: none; overscroll-behavior: none; } /* -------- Scroll cue — fades in after the intro, invites scrolling -------- */ .scroll-cue { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 800ms ease; pointer-events: none; mix-blend-mode: difference; color: #fff; } .scroll-cue.show { opacity: 0.85; } .scroll-cue-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; padding-left: 0.34em; } .scroll-cue-track { position: relative; width: 1px; height: 42px; background: rgba(255, 255, 255, 0.35); overflow: hidden; } .scroll-cue-dot { position: absolute; top: 0; left: 0; width: 1px; height: 14px; background: #fff; animation: scroll-cue-fall 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes scroll-cue-fall { 0% { transform: translateY(-14px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(42px); opacity: 0; } } /* ============================================================ HERO MENU — big vertical TextRoll navigation (skiper58 → vanilla) ============================================================ */ .hero-menu { position: fixed; inset: 0; z-index: 20; /* above the rising content (z10) so menu words eject OVER it during the handoff */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 0.5vh, 8px); opacity: 0; pointer-events: none; transition: opacity 900ms ease; } .hero-menu.is-revealed { opacity: 1; } .hero-menu.is-revealed .hm-link { pointer-events: auto; } .hero-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.5vh, 8px); } /* TextRoll link — two stacked letter layers inside an overflow-hidden box. On hover the word rolls vertically: white letters roll up & out, sun-gold duplicates roll up into place. Per-letter delay = center-out stagger. */ .hm-link { position: relative; display: block; overflow: hidden; text-decoration: none; cursor: pointer; font-family: var(--f-grotesk); /* Anton — tall condensed display */ font-weight: 400; /* Anton is single-weight, inherently heavy */ font-style: normal; /* Anton is condensed, so it can go bigger without the long words overflowing. */ font-size: clamp(36px, 7vw, 116px); line-height: 0.98; letter-spacing: 0.025em; /* a touch open for the condensed caps */ text-transform: uppercase; color: #fff; } .hm-layer { display: block; white-space: nowrap; } .hm-layer.hm-bottom { position: absolute; inset: 0; } .hm-letter { display: inline-block; transition: transform 560ms cubic-bezier(0.7, 0, 0.3, 1); transition-delay: var(--d, 0s); will-change: transform; } /* top layer rests in place, rolls up and out on hover (or .is-demo auto-wave) */ .hm-top .hm-letter { transform: translateY(0); } .hm-link:hover .hm-top .hm-letter, .hm-link:focus-visible .hm-top .hm-letter, .hm-link.is-demo .hm-top .hm-letter { transform: translateY(-100%); } /* bottom layer (sun-gold) sits hidden below, rolls up into place on hover/demo */ .hm-bottom .hm-letter { transform: translateY(100%); color: var(--warm); } .hm-link:hover .hm-bottom .hm-letter, .hm-link:focus-visible .hm-bottom .hm-letter, .hm-link.is-demo .hm-bottom .hm-letter { transform: translateY(0); } /* -------- Hero backdrop blur — snaps in when the intro finishes -------- */ .hero-video { transition: filter 700ms ease, transform 700ms ease; } .hero.is-blurred .hero-video { filter: blur(9px); transform: scale(1.06); } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; /* over the video (0), under the menu (hero-menu is outside .hero) */ background: rgba(15, 18, 22, 0.38); opacity: 0; transition: opacity 700ms ease; pointer-events: none; } .hero.is-blurred::after { opacity: 1; } /* -------- Pill-nav links: hidden at the hero (big menu owns navigation there), fade in once the user scrolls past the hero. Logo + CTA stay visible. -------- */ .nav .nav-links, .nav .nav-phone { opacity: 0; pointer-events: none; transition: opacity 400ms ease; } .nav.links-visible .nav-links, .nav.links-visible .nav-phone { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .hero-menu { transition: none; } .hm-letter { transition: none; } .hero-video { transition: none; } .hero::after { transition: none; } } /* ============================================================ HJEMMESIDER — first service section. Sticky pin + grayish-beige. Info on the LEFT; the RIGHT column is reserved for the next section. ============================================================ */ .ydelse-hjem { height: 300vh; /* pins through the 5-beat step walkthrough (~40vh per beat) */ background: var(--beige); /* grayish beige (see tokens) */ color: var(--ink); } .ydelse-hjem-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gutter); padding: 0 var(--gutter); overflow: hidden; } /* Ambient sun-dust — faint sun-gold motes drift up behind each segment's content, like dust in a warm sunbeam (pairs with the sun-bloom). Canvas is injected into each pin by JS, sits BEHIND content (content wrappers are z-index:1) and is clipped by the pin's overflow:hidden. pointer-events:none so it never touches pins/handoffs/flightline. Purely decorative — gated by IntersectionObserver + reduced-motion in JS. */ .seg-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Soft hero → beige divider, shaped as a gentle ARCH (∩, rainbow-like) instead of a straight line. A wide blurred beige "dome" sits at the section's top edge and bulges up into the hero in the middle; the blur feathers it into a soft overgang. Lives on the section (not the pin) so it isn't clipped by the pin's overflow and rises with the section's top edge as it scrolls up over the fixed hero. */ .ydelse-hjem::before { content: ""; position: absolute; top: -58vh; /* peak leads high so the arch starts creeping in early (≈ when the first menu word flies off) */ left: -32.5%; width: 165%; /* wide, but narrow enough that the rainbow arch reads */ height: 70vh; /* arch curve (top ~46vh) + a straight beige "neck" that connects down into the section as it rises */ /* Sun-bloom: a warm sun-gold glow rises with the arch (Luke-style warm bloom on dark). */ background: radial-gradient(ellipse 115% 72% at 50% 30%, rgba(212, 168, 91, 0.20) 0%, rgba(212, 168, 91, 0.05) 42%, transparent 68%), var(--beige); /* Fixed vertical radius (46vh) keeps the gentle rainbow curve while the extra height becomes a straight neck — so the leading edge can sit high without detaching from the section's beige. */ border-top-left-radius: 50% 46vh; border-top-right-radius: 50% 46vh; filter: blur(30px); /* feathers the arch into a soft, blurred overgang */ z-index: 0; /* behind the pin content, above the fixed hero */ pointer-events: none; } .ydelse-hjem-left { position: relative; z-index: 1; max-width: 36ch; } .ydelse-hjem-eyebrow { display: block; font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: var(--s-5); /* Fades in after the heading has landed. */ opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .ydelse-hjem-title { font-family: var(--f-grotesk); /* Anton — matches the menu word it hands off from */ font-weight: 400; /* Same size as .hm-link (7vw) so it fits the left column (no bleed under the mockup) AND the handoff becomes a pure glide — no resize, landScale = 1. */ font-size: clamp(36px, 7vw, 116px); line-height: 0.9; letter-spacing: 0.025em; /* matches .hm-link exactly so the swap is pixel-perfect (no width jump) */ text-transform: uppercase; color: var(--ink); margin: 0; /* Hidden handoff target: the menu word scrubs ON to this exact spot, then this is revealed INSTANTLY (no fade) as the word hides in the same frame — a seamless swap with no crossfade dip, so there's no flash/"blis". */ opacity: 0; } .ydelse-hjem-text { font-family: var(--f-body); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 42ch; margin-top: var(--s-5); /* Fades in after the heading has landed. */ opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } /* Reveal sequence once the menu word has landed as the heading. */ .ydelse-hjem.is-landed .ydelse-hjem-title { opacity: 1; } .ydelse-hjem.is-landed .ydelse-hjem-eyebrow { opacity: 1; transform: none; transition-delay: 0.18s; } .ydelse-hjem.is-landed .ydelse-hjem-text { opacity: 1; transform: none; transition-delay: 0.30s; } .ydelse-hjem-right { position: relative; z-index: 1; } /* -------- Walkthrough beats (left) — absolutely stacked so they crossfade in the SAME slot; JS drives each beat's opacity (linear crossfade) + a small rise as you scrub. The whole stack reveals once the heading lands. -------- */ .yw-beats { position: relative; margin-top: var(--s-6); min-height: 288px; /* reserve space for the tallest beat (incl. 2-line heads) so it never overflows into the CTA */ opacity: 0; transition: opacity 0.5s ease; } .ydelse-hjem.is-landed .yw-beats { opacity: 1; transition-delay: 0.22s; } .yw-beat { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px); /* Stepped: JS toggles .is-active on exactly ONE beat; the whole transition plays as a CSS animation, so you never rest in a half-faded overlap. */ transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.3, 0, 0.2, 1); will-change: opacity, transform; } .yw-beat.is-active { opacity: 1; transform: none; } .yw-beat-no { display: block; font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.2em; color: var(--clay-deep); margin-bottom: var(--s-3); } .yw-beat-head { font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 3vw, 46px); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--s-4); } .yw-beat-copy { font-family: var(--f-body); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 34ch; } /* -------- Browser mockup (right) — a CSS mini-site in the studio's own design language. The page inside scrolls vertically as you scrub (JS translateY). -------- */ .yw-stage { position: relative; width: 100%; max-width: 540px; margin-inline: auto; opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.6s ease, transform 0.6s ease; } .ydelse-hjem.is-landed .yw-stage { opacity: 1; transform: none; transition-delay: 0.28s; } .yw-browser { border-radius: 14px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--hairline); box-shadow: var(--shadow-card-soft); } /* Scroll-velocity skew — JS sets --vskew from scroll speed (0deg at rest). Applied only to non-pinned / non-measured elements, so the pin / handoff / eject geometry is untouched. */ .yw-browser, .cases-grid, .footer-inner { transform: skewY(var(--vskew, 0deg)); } .yw-browser { will-change: transform; } /* -------- Paper-plane flightline (sun-gold thread + plane, scroll-drawn over the 5 segments) -------- */ .flightline { position: absolute; left: 0; width: 100%; z-index: 12; /* above segment scenes (z10), below seg-fly clones (z40) + nav */ pointer-events: none; overflow: visible; } .flightline svg { display: block; width: 100%; height: 100%; overflow: visible; } .fl-trail { fill: none; stroke: var(--warm); stroke-width: 2; stroke-linecap: round; opacity: 0.6; filter: drop-shadow(0 0 6px rgba(212, 168, 91, 0.5)); } .fl-plane { fill: var(--ink); filter: drop-shadow(0 0 5px rgba(212, 168, 91, 0.65)); } .yw-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--paper-2); border-bottom: 1px solid var(--hairline); } .yw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-2); } .yw-url { margin-left: 8px; flex: 1; max-width: 230px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); background: var(--paper); border-radius: 999px; padding: 4px 12px; text-align: center; } .yw-screen { position: relative; height: 348px; /* the mock viewport */ overflow: hidden; background: var(--paper); } .yw-page { position: absolute; top: 0; left: 0; right: 0; /* Steps between screens in sync with the beats (JS sets the target offset). */ transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .yw-m { padding: 22px 24px; } .yw-m-hero { background: var(--ink-bg); color: var(--paper-on-ink); padding: 30px 24px 34px; display: flex; flex-direction: column; gap: 7px; } .yw-m-brand { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em; color: rgba(240, 245, 250, 0.7); } .yw-m-h1 { font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1.0; margin-top: 4px; } .yw-m-sub { font-family: var(--f-body); font-size: 12px; color: rgba(240, 245, 250, 0.72); } .yw-m-btn { align-self: flex-start; margin-top: 12px; background: var(--warm); color: var(--ink); font-family: var(--f-body); font-weight: 600; font-size: 11px; padding: 8px 16px; border-radius: 999px; } .yw-m-band { display: flex; flex-direction: column; gap: 11px; padding: 30px 24px; } .yw-m-line { height: 9px; border-radius: 4px; background: var(--hairline-2); } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .yw-m-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; background: var(--paper-2); } .yw-m-col { display: flex; flex-direction: column; gap: 9px; } .yw-m-h2 { font-family: var(--f-display); font-weight: 500; font-size: 19px; color: var(--ink); margin-bottom: 3px; } .yw-m-img { height: 100px; border-radius: 8px; background: linear-gradient(135deg, var(--sage), var(--clay)); } .yw-m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .yw-m-card { height: 82px; border-radius: 8px; background: var(--paper-3); border: 1px solid var(--hairline); } .yw-m-cta { background: var(--ink-bg); color: var(--paper-on-ink); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 24px; text-align: center; } .yw-m-cta .yw-m-h2 { color: var(--paper-on-ink); } .yw-m-foot { height: 58px; background: var(--paper-3); padding: 0; } /* -------- Phone frame — fades in on the "Mobil-først" beat (JS toggles .is-on) -------- */ .yw-phone { position: absolute; right: -4px; bottom: -30px; width: 132px; height: 270px; border-radius: 26px; background: #15151A; padding: 9px; box-shadow: var(--shadow-card-hover); opacity: 0; transform: translateY(22px) rotate(3deg); transition: opacity 0.5s ease, transform 0.5s ease; will-change: opacity, transform; } .yw-phone.is-on { opacity: 1; transform: translateY(0) rotate(3deg); } .yw-phone-screen { width: 100%; height: 100%; border-radius: 18px; background: var(--paper); overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 15px 13px; } .yw-pm-brand { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.25em; color: var(--ink-3); } .yw-pm-h1 { font-family: var(--f-display); font-weight: 500; font-size: 20px; line-height: 0.98; color: var(--ink); } .yw-pm-btn { align-self: flex-start; background: var(--warm); color: var(--ink); font-family: var(--f-body); font-weight: 600; font-size: 9px; padding: 5px 11px; border-radius: 999px; margin: 3px 0 7px; } .yw-pm-line { height: 7px; border-radius: 3px; background: var(--hairline-2); } .yw-pm-line.w80 { width: 80%; } .yw-pm-line.w60 { width: 60%; } .yw-pm-card { height: 58px; border-radius: 8px; background: linear-gradient(135deg, var(--sage), var(--clay)); margin-top: 5px; } /* -------- Sweet little scroll guide — greets you on beat 1 and invites scrolling through the 5 trin; fades the moment you advance. Mirrors the hero cue's thin-track + falling-dot, tuned for the beige stage (ink/clay, serif label). -------- */ .yw-scrollcue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.55s ease; pointer-events: none; } .yw-scrollcue.is-on { opacity: 0.78; } .yw-scrollcue-label { font-family: var(--f-display); font-style: italic; font-size: 14px; letter-spacing: 0.01em; color: var(--clay-deep); } .yw-scrollcue-track { position: relative; width: 1px; height: 38px; background: var(--hairline-2); overflow: hidden; } .yw-scrollcue-dot { position: absolute; top: 0; left: 0; width: 1px; height: 12px; background: var(--clay-deep); animation: yw-cue-fall 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes yw-cue-fall { 0% { transform: translateY(-12px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .yw-beats, .yw-stage, .yw-phone, .yw-beat, .yw-page, .yw-scrollcue { transition: none; } .yw-scrollcue-dot { animation: none; } } /* -------- Handoff word in Hjemmesider beat 5 — the "webdesign" word that flies off to become the next segment's heading. Subtly marked so it reads as live. -------- */ .yw-handoff-word { /* Reads like normal copy — the handoff fires on scroll regardless. nowrap keeps it on one line so the fly-source glyph measurement stays clean. */ white-space: nowrap; } /* Flying clone (one per segment-handoff, created in JS) that morphs a word from the previous segment's last beat into the next segment's heading. Anton, uppercase, matched letter-spacing; font-size is set per-instance in JS to match the TARGET title (titles can differ in size), so the f=1 pixel-swap to the real

is seamless. / .seg-fly { position: fixed; top: 0; left: 0; z-index: 40; / above sections, below the nav pill / margin: 0; font-family: var(--f-grotesk); font-weight: 400; font-size: clamp(36px, 7vw, 116px); / fallback — JS overrides per target title / line-height: 0.9; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transform-origin: top left; opacity: 0; pointer-events: none; will-change: transform, left, top, opacity; } / -------- Per-segment CTA — small + slick (showcase first, contact second). -------- / .yw-cta { display: inline-block; / content-sized box; sits left (Hjem) / right (Web) per column / margin-top: var(--s-6); padding: var(--s-4) var(--s-5); text-align: left; / keep box content left-aligned even in the right-aligned Web column / / Rounded glassy box, echoing the nav pill / header. / border-radius: 24px; background: rgba(18, 18, 22, 0.55); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(236, 234, 226, 0.14); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); opacity: 0; transition: opacity 0.5s ease; } .yw-cta.is-on { opacity: 1; } / JS toggles this on the LAST beat of each segment / .yw-cta-label { display: block; font-family: var(--f-display); font-style: italic; font-size: var(--t-body); color: var(--ink-2); margin-bottom: var(--s-2); } .yw-cta-links { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.04em; } .yw-cta-links a { color: var(--clay-deep); text-decoration: none; border-bottom: 1px solid var(--hairline-2); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; } .yw-cta-links a:hover { color: var(--warm-deep); border-color: var(--warm); } .yw-cta-sep { color: var(--ink-3); margin: 0 0.4em; } / ============================================================ WEBDESIGN — Ydelse 02. MIRRORED ping-pong: mockup LEFT, info RIGHT (right-aligned). Reuses the generic .yw-* beat + browser machinery. ============================================================ / .ydelse-web { position: relative; z-index: 10; height: 280vh; / 4 beats / background: var(--beige); color: var(--ink); } .ydelse-web-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gutter); padding: 0 var(--gutter); overflow: hidden; } .ydelse-web-stage { position: relative; z-index: 1; } / mockup (left) / .ydelse-web-info { position: relative; z-index: 1; max-width: 36ch; margin-left: auto; / push the block to the right edge / text-align: right; / mirror of Hjemmesider / } .ydelse-web-eyebrow { display: block; font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: var(--s-5); opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .ydelse-web-title { font-family: var(--f-grotesk); font-weight: 400; font-size: clamp(36px, 7vw, 116px); line-height: 0.9; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink); margin: 0; opacity: 0; / revealed on pin (later: handoff target for the flying word) / } / Right-align the beats for the mirror. / .ydelse-web .yw-beat-copy { margin-left: auto; } / Reveal sequence once the Webdesign section pins. / .ydelse-web.is-landed .ydelse-web-title { opacity: 1; } .ydelse-web.is-landed .ydelse-web-eyebrow { opacity: 1; transform: none; transition-delay: 0.18s; } .ydelse-web.is-landed .yw-beats { opacity: 1; transition-delay: 0.22s; } .ydelse-web.is-landed .yw-stage { opacity: 1; transform: none; transition-delay: 0.28s; } / Webdesign mockup hero — bolder/cooler than the clinic, to feel "designed". / .yw-m-hero--web { background: linear-gradient(135deg, #161A24 0%, #34506E 95%); } / ============================================================ ANIMATIONSFIGURER — Ydelse 03. VENSTRE (info venstre, mockup højre, som Hjem). ============================================================ / .ydelse-anim { position: relative; z-index: 10; height: 280vh; / 4 beats / background: var(--beige); color: var(--ink); } .ydelse-anim-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gutter); padding: 0 var(--gutter); overflow: hidden; } .ydelse-anim-info { position: relative; z-index: 1; max-width: 36ch; } / info venstre / .ydelse-anim-stage { position: relative; z-index: 1; } / mockup højre / .ydelse-anim-eyebrow { display: block; font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: var(--s-5); opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .ydelse-anim-title { font-family: var(--f-grotesk); font-weight: 400; / Lang titel ("ANIMATIONSFIGURER") → mindre display-size så den bliver på ÉN linje (handoff'et matcher en 1-linjes klon). Klonen får samme size via JS. / font-size: clamp(26px, 4.4vw, 72px); line-height: 0.9; letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap; color: var(--ink); margin: 0; opacity: 0; } .ydelse-anim.is-landed .ydelse-anim-title { opacity: 1; } .ydelse-anim.is-landed .ydelse-anim-eyebrow { opacity: 1; transform: none; transition-delay: 0.18s; } .ydelse-anim.is-landed .yw-beats { opacity: 1; transition-delay: 0.22s; } .ydelse-anim.is-landed .yw-stage { opacity: 1; transform: none; transition-delay: 0.28s; } / Playful, warm hero + a simple character placeholder. / .yw-m-hero--anim { background: linear-gradient(135deg, #2E2418 0%, #C8924A 110%); } .yw-m-figure { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 2px solid rgba(255, 255, 255, 0.6); margin: 2px 0 2px; } / ============================================================ LOGODESIGN — Ydelse 04. HØJRE (mockup venstre, info højre, som Webdesign). ============================================================ / .ydelse-logo { position: relative; z-index: 10; height: 280vh; background: var(--beige); color: var(--ink); } .ydelse-logo-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gutter); padding: 0 var(--gutter); overflow: hidden; } .ydelse-logo-stage { position: relative; z-index: 1; } / mockup venstre / .ydelse-logo-info { position: relative; z-index: 1; max-width: 36ch; margin-left: auto; / højre / text-align: right; } .ydelse-logo-eyebrow { display: block; font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: var(--s-5); opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .ydelse-logo-title { font-family: var(--f-grotesk); font-weight: 400; font-size: clamp(36px, 7vw, 116px); line-height: 0.9; letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap; color: var(--ink); margin: 0; opacity: 0; } .ydelse-logo .yw-beat-copy { margin-left: auto; } / højrestil beats / .ydelse-logo.is-landed .ydelse-logo-title { opacity: 1; } .ydelse-logo.is-landed .ydelse-logo-eyebrow { opacity: 1; transform: none; transition-delay: 0.18s; } .ydelse-logo.is-landed .yw-beats { opacity: 1; transition-delay: 0.22s; } .ydelse-logo.is-landed .yw-stage { opacity: 1; transform: none; transition-delay: 0.28s; } / Elegant, mono hero + a simple logo-mark. / .yw-m-hero--logo { background: #101014; align-items: flex-start; } .yw-m-mark { width: 46px; height: 46px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 7px; position: relative; margin-bottom: 6px; } .yw-m-mark::after { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 3px; } .yw-m-hero--logo .yw-m-h1 { letter-spacing: 0.12em; font-family: var(--f-mono); font-size: 22px; } / ============================================================ IT-SYSTEMER — Ydelse 05 (sidste). VENSTRE (info venstre, mockup højre, som Hjem). ============================================================ / .ydelse-it { position: relative; z-index: 10; height: 280vh; background: var(--beige); color: var(--ink); } .ydelse-it-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gutter); padding: 0 var(--gutter); overflow: hidden; } .ydelse-it-info { position: relative; z-index: 1; max-width: 36ch; } / info venstre / .ydelse-it-stage { position: relative; z-index: 1; } / mockup højre / .ydelse-it-eyebrow { display: block; font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: var(--s-5); opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .ydelse-it-title { font-family: var(--f-grotesk); font-weight: 400; font-size: clamp(36px, 7vw, 116px); line-height: 0.9; letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap; color: var(--ink); margin: 0; opacity: 0; } .ydelse-it.is-landed .ydelse-it-title { opacity: 1; } .ydelse-it.is-landed .ydelse-it-eyebrow { opacity: 1; transform: none; transition-delay: 0.18s; } .ydelse-it.is-landed .yw-beats { opacity: 1; transition-delay: 0.22s; } .ydelse-it.is-landed .yw-stage { opacity: 1; transform: none; transition-delay: 0.28s; } / Cool, techy dashboard hero. / .yw-m-hero--it { background: linear-gradient(135deg, #14222E 0%, #0E141C 100%); } / -------- Reduced motion: the hero choreography + scroll-walkthroughs don't run (the scroll controller is gated off), so present a clean STATIC layout — else the pinned segments stay blank (content is revealed by .is-landed, never set) and the fixed menu never ejects. Only affects RM users. -------- / @media (prefers-reduced-motion: reduce) { .hero { position: relative; } / un-fix → scrolls away normally / .hero-menu { display: none; } / motion-only showcase; services are the sections below / .hero-spacer { height: 0; } / no eject zone needed / .ydelse-hjem::before { display: none; } / the rising arch is a motion effect / .yw-scrollcue { display: none; } .nav .nav-links, .nav .nav-phone { opacity: 1; pointer-events: auto; } .ydelse-hjem, .ydelse-web, .ydelse-anim, .ydelse-logo, .ydelse-it { height: auto; } .ydelse-hjem-pin, .ydelse-web-pin, .ydelse-anim-pin, .ydelse-logo-pin, .ydelse-it-pin { position: static; min-height: 0; padding: var(--rhythm) var(--gutter); } .yw-beats { min-height: 0; } .yw-beat { position: static; opacity: 1; transform: none; margin-bottom: var(--s-7); } .seg-fly { display: none; } .flightline { display: none; } / paper-plane thread is a scroll-motion effect / / Reveal everything normally gated behind .is-landed / the handoff. / .ydelse-hjem-title, .ydelse-web-title, .ydelse-anim-title, .ydelse-logo-title, .ydelse-it-title, .ydelse-hjem-eyebrow, .ydelse-web-eyebrow, .ydelse-anim-eyebrow, .ydelse-logo-eyebrow, .ydelse-it-eyebrow, .yw-beats, .yw-stage, .yw-cta { opacity: 1; transform: none; } } / -------- Hero menu eject: each link's --x (slide) + --o (fade) are driven per scroll frame by JS. Bottom 4 services fly off-side one at a time; Hjemmesider drifts left + shrinks (--s) and fades as the lead heading takes over. -------- / .hm-link { transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); opacity: var(--o, 1); / left-center origin → the left edge + vertical center stay put under scale, so the Hjemmesider land transform is a straight left-center delta to the heading's box (see measureLand in main.js). / transform-origin: left center; / Constant-speed fly-out: JS flips the target (in/out) at each word's own scroll point; the transition carries it all the way at a fixed pace. 'Hjemmesider' also glides + recolors into the section heading (color). / transition: transform 0.62s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.45s ease, color 0.5s ease; } / -------- Hero-spacer: 100vh of empty flow representing where the (fixed) hero lives. Following sections start after this and scroll up over the hero. -------- / .hero-spacer { display: block; height: 190vh; / eject zone: room for the 4 words to fly out one-at-a-time + Hjemmesider to land / pointer-events: none; } / All sections after the spacer sit ABOVE the hero (z-index > .hero's 1) so they cover/overlap the pinned hero as they scroll into view. / .ydelse-hjem, .cases, .hvorfor, .about, .pakker, .proces, .faq, .kontakt, .footer { position: relative; z-index: 10; } / -------- Hero-mark: floats over video, scroll-scrubs to nav-position. Lives outside .hero in the DOM so position:fixed works without ancestor transform/perspective interference. Clickable (href="#top"). -------- / .hero-mark { position: fixed; top: 50vh; left: 50vw; z-index: 55; transform: translate(-50%, -50%); text-decoration: none; color: inherit; pointer-events: auto; will-change: top, left; mix-blend-mode: difference; line-height: 1; } .hero-mark-name { / Madsen is the anchor (in normal flow). Studio is absolute BELOW Madsen, offset controlled by --studio-offset which the JS intro animates from far (2.3em ≈ Studio's hero position) down to tight (0.6em ≈ joined logo). The container is always visible; each row reveals itself via its own --madsen-reveal / --studio-reveal variable, driven by the intro timeline. / display: block; position: relative; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(84px, 16vw, 280px); / stort + imposing, men kontrolleret — popper skarpt mod hero-scrimmet (scrubber til nav-size bagefter) / line-height: 1; color: #fff; / white for difference-blend / letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; will-change: font-size; text-align: center; white-space: nowrap; } / Madsen — in normal flow, the layout anchor. Reveals via --madsen-reveal: clip-mask rises from the bottom + a slight lift + fade. / .hero-mark-row--top { display: block; / Luke-style contrast: "Madsen" in clean upright sans against the italic-serif "Studio." / font-family: var(--f-body); font-style: normal; font-weight: 700; font-variation-settings: normal; font-size: 1em; letter-spacing: -0.035em; line-height: 0.86; / Eksplosiv samling: zoomer ind fra stor + motion-blur, slår skarpt på plads (eased af intro-timelinen). / opacity: var(--madsen-reveal, 0); transform: scale(calc(1 + (1 - var(--madsen-reveal, 0)) 0.5)); filter: blur(calc((1 - var(--madsen-reveal, 0)) * 9px)); transform-origin: 50% 58%; will-change: opacity, transform, filter; } /* Studio — absolute BELOW Madsen, offset by JS-driven --studio-offset, and fades in via --studio-reveal as it flies up to join Madsen. / .hero-mark-row--bot { position: absolute; left: 50%; top: calc(100% + var(--studio-offset, 1.1em)); transform: translateX(-50%) scale(calc(1 + (1 - var(--studio-reveal, 0)) 0.65)); font-size: 0.48em; letter-spacing: 0.05em; line-height: 1; font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1; opacity: var(--studio-reveal, 0); filter: blur(calc((1 - var(--studio-reveal, 0)) * 9px)); will-change: opacity, top, transform, filter; } /* -------- Nav brand: hidden underneath the hero-mark. Visibility hidden preserves layout, so hero-mark lands precisely where brand-name would render. Dot + suffix opacity scrub-driven. -------- / .brand-name { visibility: hidden; } .brand-dot, .brand-suffix { opacity: var(--brand-detail-opacity, 0); } / -------- Primary button (preserved for kontakt form submit) -------- / .btn-primary { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--paper); background: var(--warm); padding: 16px 28px; border-radius: 999px; letter-spacing: 0.01em; transition: background 250ms ease, transform 250ms cubic-bezier(0.4, 0.05, 0.3, 1), box-shadow 250ms ease; box-shadow: 0 6px 18px rgba(212, 168, 91, 0.26); position: relative; will-change: transform; } .btn-primary:hover { background: var(--warm-deep); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212, 168, 91, 0.36); } .btn-primary svg { transition: transform 250ms cubic-bezier(0.4, 0.05, 0.3, 1); } .btn-primary:hover svg { transform: translateX(3px); } / -------- Reduced motion: skip loader + entrance, statisk poster -------- / @media (prefers-reduced-motion: reduce) { .loader { display: none; } .hero-mark-name { opacity: 1; transform: none; transition: none; } .hero-mark-row--top { opacity: 1; transform: none; filter: none; } .hero-mark-row--bot { opacity: 1; transform: translateX(-50%); filter: none; } .hero-video { / Reduce CPU on aware UAs (Safari respects this). / animation: none; } } / -------- Kinetic display-text (per-letter stagger reveal, never breaks mid-word) -------- / .kinetic .word { display: inline-block; white-space: nowrap; / keep letters in a word together / } .kinetic .letter { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .kinetic.in .letter { opacity: 1; transform: translateY(0); } / -------- Marquee strip (USPs running infinitely) -------- / .marquee { position: relative; overflow: hidden; padding: var(--s-5) 0; background: var(--ink); color: var(--paper); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .marquee-track { display: flex; gap: var(--s-7); width: max-content; animation: marquee-scroll 38s linear infinite; } .marquee-item { display: inline-flex; align-items: center; gap: var(--s-7); font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.2vw, 32px); font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0; letter-spacing: -0.01em; color: var(--paper); white-space: nowrap; } .marquee-item::after { / Diamond divider between items / content: "◇"; font-family: var(--f-body); font-style: normal; font-size: 14px; color: var(--warm); margin-left: var(--s-5); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee:hover .marquee-track { animation-play-state: paused; } / -------- Cases section — frosted-glass veil over the pinned hero. First section after hero — it rises from below on scroll and acts as the "tunnel" that visually closes off the hero. Semi-transparent black + backdrop blur means you can still see the hero faintly through it. Top edge fades to transparent via mask-image so the transition from hero to veil is gradient, not a hard line. -------- / / -------- Om Jens — "manden bag" (draft; Jens omskriver teksten) -------- / .about { position: relative; z-index: 10; / over den fixed hero, som segmenterne / background: var(--paper); padding: calc(var(--rhythm) 1.15) var(--gutter); overflow: hidden; } .about::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Varmt lys på baggrunden — blødt sol-skær, stærkere mod portræt-siden (højre). Skrueknap = alpha. / background: radial-gradient(ellipse 60% 72% at 68% 40%, rgba(212, 168, 91, 0.18) 0%, rgba(212, 168, 91, 0.06) 40%, transparent 72%), radial-gradient(ellipse 95% 60% at 28% 28%, rgba(212, 168, 91, 0.05) 0%, transparent 64%); } .about-canvas { position: absolute; inset: 0; z-index: 0; / bag indholdet (z1), oven på glow-skæret / width: 100%; height: 100%; pointer-events: none; } .about-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(36px, 6vw, 92px); align-items: center; } .about-portrait { position: relative; aspect-ratio: 3 / 4; } .about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; / Sort-baggrunds-headshot smelter ind i det mørke lærred via en blød edge-fade-maske. / -webkit-mask-image: radial-gradient(ellipse 84% 92% at 50% 40%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 84% 92% at 50% 40%, #000 50%, transparent 100%); } @media (max-width: 820px) { .about-inner { grid-template-columns: 1fr; } .about-portrait { max-width: 340px; margin-top: var(--s-6); aspect-ratio: 4 / 5; } } .about-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .about-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .about-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 6vw, 88px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; margin-bottom: var(--s-7); } .about-title em { color: var(--warm); } .about-body { display: flex; flex-direction: column; gap: var(--s-5); max-width: 62ch; } .about-lead { font-family: var(--f-body); font-size: clamp(20px, 1.7vw, 27px); line-height: 1.6; color: rgba(236, 234, 226, 0.84); } .about-lead em { color: var(--ink); } .about-highlights { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-4); max-width: 62ch; } .about-highlights li { font-family: var(--f-body); font-size: 18px; color: rgba(236, 234, 226, 0.74); display: flex; gap: var(--s-3); align-items: baseline; } .about-hl-mark { color: var(--warm); font-family: var(--f-mono); flex: none; } / -------- Bliv min næste case — ærlig social-proof/CTA-afslutning -------- / .naeste { position: relative; z-index: 10; background: var(--paper); padding: calc(var(--rhythm) 1.35) var(--gutter); overflow: hidden; text-align: center; } .naeste::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 72% at 50% 48%, rgba(212, 168, 91, 0.13) 0%, transparent 64%); pointer-events: none; } .naeste-inner { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; } .naeste-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm); margin-bottom: var(--s-5); } .naeste-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 5.4vw, 82px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; max-width: 17ch; margin: 0 auto var(--s-6); } .naeste-title em { color: var(--warm); } .naeste-sub { font-family: var(--f-body); font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0 auto var(--s-8); } .naeste-cta { display: flex; gap: var(--s-5); justify-content: center; align-items: center; flex-wrap: wrap; } .naeste-btn { font-family: var(--f-body); font-weight: 600; font-size: 16px; color: var(--paper); background: var(--warm); padding: 16px 30px; border-radius: 999px; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 6px 20px rgba(212, 168, 91, 0.28); transition: background 250ms ease, box-shadow 250ms ease; display: inline-block; } .naeste-btn:hover { background: var(--warm-deep); box-shadow: 0 10px 30px rgba(212, 168, 91, 0.40); } .naeste-link { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hairline-2); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; } .naeste-link:hover { color: var(--ink); border-color: var(--warm); } .cases { position: relative; padding: calc(var(--rhythm) * 1.3) var(--gutter); color: rgba(240, 245, 250, 0.92); } .cases::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(15, 18, 22, 0.78); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); /* Soft fade at the top — bg + blur ramp up over 220px so there's no hard edge with the hero below. / mask-image: linear-gradient(to bottom, transparent 0px, black 220px); -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 220px); pointer-events: none; } / Dark-theme overrides for cases section text/cards / .cases .cases-eyebrow { color: rgba(240, 245, 250, 0.65); } .cases .cases-eyebrow::before { background: rgba(240, 245, 250, 0.35); } .cases-count { color: var(--warm); } .cases .cases-title { color: #F0F5FA; } .cases .cases-title em { color: var(--warm); } .cases .cases-note { color: rgba(240, 245, 250, 0.7); } .cases .case { background: rgba(240, 245, 250, 0.05); border-color: rgba(240, 245, 250, 0.12); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20), 0 22px 44px -14px rgba(0, 0, 0, 0.32); } .cases .case:hover { border-color: rgba(240, 245, 250, 0.25); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), 0 36px 80px -18px rgba(0, 0, 0, 0.48); } .cases .case-meta { color: rgba(240, 245, 250, 0.55); } .cases .case-meta span:not(:last-child)::after { color: rgba(240, 245, 250, 0.45); } .cases .case-name { color: #F0F5FA; } .cases .case-desc { color: rgba(240, 245, 250, 0.72); } .cases-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; } .cases-header { display: flex; align-items: end; justify-content: space-between; gap: var(--s-7); margin-bottom: var(--s-9); flex-wrap: wrap; / Scrubbed as one block (JS sets --enter) so the heading rises + sharpens just ahead of the tiles — the whole Cases section arrives as a single motion. Defaults to 1 (visible) for reduced-motion / no-JS / pre-init. Gentler than the tiles (it's text). / --enter: 1; opacity: var(--enter); transform: translateY(calc((1 - var(--enter)) 46px)); filter: blur(calc((1 - var(--enter)) * 3px)); will-change: transform, opacity; } .cases-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .cases-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .cases-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; max-width: 14ch; } .cases-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--clay); } .cases-note { font-family: var(--f-body); font-size: var(--t-small); color: var(--ink-3); max-width: 36ch; line-height: 1.5; } .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } .case { /* --enter: 0 = below the entrance zone, 1 = fully settled. SCRUBBED by scroll (JS), so each tile rises + tilts up + sharpens AS the user scrolls through the section (a one-shot reveal fires before the eye arrives = "nothing happened"). Defaults to 1 so no-JS / reduced-motion / pre-init (cards load far below the fold) stay visible with no flash. / --enter: 1; --tilt-y: 0deg; --tilt-x: 0deg; position: relative; background: var(--paper-2); border-radius: 14px; border: 1px solid var(--hairline); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; opacity: var(--enter); transform: translateY(calc((1 - var(--enter)) 160px)) scale(calc(0.86 + var(--enter) * 0.14)) perspective(1200px) rotateY(var(--tilt-y)) rotateX(calc(var(--tilt-x) + (1 - var(--enter)) * 28deg)); transform-origin: 50% 100%; transform-style: preserve-3d; filter: blur(calc((1 - var(--enter)) * 10px)); /* No transition on the scrubbed props (transform/opacity/filter) — they track scroll 1:1. Only the hover feedback (border + shadow) eases. / transition: border-color 600ms ease, box-shadow 600ms ease; box-shadow: 0 6px 14px rgba(42, 58, 82, 0.05), 0 22px 44px -14px rgba(42, 58, 82, 0.14); will-change: transform, opacity, filter; } .case:hover { border-color: rgba(92, 143, 184, 0.25); box-shadow: 0 12px 24px rgba(42, 58, 82, 0.08), 0 36px 80px -18px rgba(42, 58, 82, 0.24); } .case-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-bg); } .case-media img { width: 100%; height: 100%; object-fit: cover; / Luke-style: client-site screenshots sit in B&W, bloom to full colour on hover. / filter: grayscale(1) contrast(1.03) brightness(0.9); transition: transform 1400ms cubic-bezier(0.4, 0.05, 0.3, 1), filter 900ms cubic-bezier(0.4, 0.05, 0.3, 1); } .case:hover .case-media img { transform: scale(1.05); filter: grayscale(0) contrast(1) brightness(1); } / Editorial affordances: persistent number index (top-right) + "+" expand (top-left). / .cases-grid { counter-reset: caseidx; } .case { counter-increment: caseidx; } .case-media::before { content: "0" counter(caseidx); position: absolute; top: 16px; right: 18px; z-index: 3; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(236, 234, 226, 0.7); } .case-media::after { content: "+"; position: absolute; top: 13px; left: 15px; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 17px; line-height: 1; color: var(--ink); border: 1px solid rgba(236, 234, 226, 0.32); border-radius: 50%; background: rgba(10, 10, 11, 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform 500ms cubic-bezier(0.4, 0.05, 0.3, 1), background 300ms ease, color 300ms ease, border-color 300ms ease; } .case:hover .case-media::after { transform: rotate(45deg); background: var(--warm); color: #0A0A0B; border-color: var(--warm); } .case-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15, 15, 15, 0.7) 100%); display: flex; align-items: flex-end; padding: var(--s-6); opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0.05, 0.3, 1); } .case:hover .case-overlay { opacity: 1; } .case-overlay-text { color: var(--ink); transform: translateY(8px); transition: transform 600ms cubic-bezier(0.4, 0.05, 0.3, 1); } .case:hover .case-overlay-text { transform: translateY(0); } .case-overlay-text small { display: inline-block; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-bottom: 4px; } .case-overlay-text span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-size: 14px; font-weight: 600; } .case-overlay-text span::after { content: "→"; transition: transform 350ms cubic-bezier(0.4, 0.05, 0.3, 1); } .case:hover .case-overlay-text span::after { transform: translateX(4px); } .case-body { padding: clamp(22px, 2.4vw, 30px) clamp(26px, 2.8vw, 36px); display: flex; flex-direction: column; gap: var(--s-3); } .case-meta { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .case-meta span:not(:last-child)::after { content: "·"; margin-left: var(--s-3); color: var(--ink-3); } .case-name { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); font-variation-settings: "opsz" 96; } .case-desc { font-family: var(--f-body); font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 38ch; } / -------- Hvorfor Madsen Studio — differentiation tiles -------- / .hvorfor { padding: var(--rhythm) var(--gutter); background: var(--ink-bg); color: var(--paper-on-ink); position: relative; overflow: hidden; } .hvorfor::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: 0.45; mix-blend-mode: screen; pointer-events: none; } .hvorfor::after { / Subtle radial accent in the upper-right / content: ""; position: absolute; top: -20%; right: -10%; width: 60%; height: 80%; background: radial-gradient(ellipse at center, rgba(212, 168, 91, 0.10) 0%, transparent 60%); pointer-events: none; } .hvorfor-inner { max-width: var(--max); margin: 0 auto; position: relative; } .hvorfor-header { max-width: 720px; margin-bottom: var(--s-9); } .hvorfor-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 245, 250, 0.6); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .hvorfor-eyebrow::before { content: ""; width: 32px; height: 1px; background: rgba(240, 245, 250, 0.4); } .hvorfor-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--paper-on-ink); font-variation-settings: "opsz" 144; margin-bottom: var(--s-6); } .hvorfor-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--warm); } .hvorfor-lead { font-family: var(--f-body); font-size: var(--t-lead); line-height: 1.55; color: rgba(240, 245, 250, 0.78); max-width: 60ch; } .hvorfor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } .hvorfor-tile { --hover-y: 0px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: clamp(28px, 3vw, 40px); transform: translateY(var(--hover-y)); transition: transform 700ms cubic-bezier(0.4, 0.05, 0.3, 1), border-color 500ms ease, background 500ms ease; position: relative; overflow: hidden; } .hvorfor-tile::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 91, 0.4) 50%, transparent 100%); opacity: 0; transition: opacity 600ms ease; } .hvorfor-tile:hover { --hover-y: -6px; border-color: rgba(212, 168, 91, 0.32); background: rgba(255, 255, 255, 0.06); transition-duration: 400ms; } .hvorfor-tile:hover::before { opacity: 1; } .hvorfor-tile-number { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .hvorfor-tile-number::after { content: ""; flex-grow: 1; height: 1px; background: rgba(255, 255, 255, 0.12); } .hvorfor-tile-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.015em; color: var(--paper-on-ink); margin-bottom: var(--s-4); font-variation-settings: "opsz" 96; } .hvorfor-tile-text { font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: rgba(240, 245, 250, 0.7); } .hvorfor-tile-text strong { color: var(--paper-on-ink); font-weight: 500; } / -------- About — "Hej, jeg er Jens" -------- / .about { padding: var(--rhythm) var(--gutter); background: var(--paper); position: relative; overflow: hidden; } .about-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 120px); align-items: center; } .about-figure { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 520px; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #C8D6E5 0%, #B5C5D8 60%, #8AA3BC 100%); box-shadow: 0 40px 80px -24px rgba(42, 58, 82, 0.32), 0 16px 32px -12px rgba(42, 58, 82, 0.20); } .about-figure::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: 0.7; mix-blend-mode: multiply; pointer-events: none; } .about-figure-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); z-index: 1; } .about-figure-placeholder svg { width: 88px; height: 88px; color: rgba(42, 58, 82, 0.30); } .about-figure-placeholder span { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(42, 58, 82, 0.46); } .about-figure-caption { position: absolute; bottom: 24px; left: 24px; right: 24px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); display: flex; justify-content: space-between; z-index: 2; } .about-body { max-width: 520px; } .about-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .about-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .about-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; margin-bottom: var(--s-6); } .about-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--clay); } .about-text { font-family: var(--f-body); font-size: 17px; line-height: 1.65; color: var(--ink-2); margin-bottom: var(--s-5); } .about-text strong { font-weight: 600; color: var(--ink); } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--hairline); } .about-stat-value { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1; color: var(--ink); font-variation-settings: "opsz" 96; margin-bottom: 6px; letter-spacing: -0.02em; } .about-stat-label { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; } / -------- Pakker — 3-card grid -------- / .pakker { padding: var(--rhythm) var(--gutter); background: var(--paper-2); position: relative; } .pakker::before { / Faint noise overlay / content: ""; position: absolute; inset: 0; background: var(--noise); opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; } .pakker-inner { max-width: var(--max); margin: 0 auto; position: relative; } .pakker-header { display: flex; align-items: end; justify-content: space-between; gap: var(--s-7); margin-bottom: var(--s-9); flex-wrap: wrap; } .pakker-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .pakker-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .pakker-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; max-width: 14ch; } .pakker-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--clay); } .pakker-note { font-family: var(--f-body); font-size: var(--t-small); color: var(--ink-3); max-width: 32ch; line-height: 1.55; } .pakker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); align-items: stretch; } .pakke { --hover-y: 0px; --idle-y: 0px; position: relative; background: var(--paper); border-radius: 14px; border: 1px solid var(--hairline); padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) clamp(32px, 3.5vw, 44px); display: flex; flex-direction: column; transform: translateY(calc(var(--hover-y) + var(--idle-y))); transition: transform 800ms cubic-bezier(0.4, 0.05, 0.3, 1), border-color 500ms ease, box-shadow 500ms ease; box-shadow: 0 6px 14px rgba(42, 58, 82, 0.04), 0 22px 44px -14px rgba(42, 58, 82, 0.12); animation: pakke-float 6.5s ease-in-out infinite; } .pakke:nth-child(1) { animation-delay: -0.7s; animation-duration: 6.1s; } .pakke:nth-child(2) { animation-delay: -2.4s; animation-duration: 6.9s; } .pakke:nth-child(3) { animation-delay: -1.5s; animation-duration: 7.3s; } @keyframes pakke-float { 0%, 100% { --idle-y: 0px; } 50% { --idle-y: -4px; } } @property --idle-y { syntax: ""; inherits: false; initial-value: 0px; } @property --hover-y { syntax: ""; inherits: false; initial-value: 0px; } .pakke:hover { --hover-y: -10px; border-color: rgba(92, 143, 184, 0.30); box-shadow: 0 14px 28px rgba(42, 58, 82, 0.08), 0 40px 80px -20px rgba(42, 58, 82, 0.24); transition-duration: 400ms; } .pakke--highlight { border-color: rgba(212, 168, 91, 0.40); box-shadow: 0 12px 22px rgba(212, 168, 91, 0.10), 0 32px 64px -18px rgba(212, 168, 91, 0.20), 0 22px 44px -14px rgba(42, 58, 82, 0.14); } .pakke--highlight:hover { border-color: rgba(212, 168, 91, 0.60); } .pakke-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--warm); color: var(--paper); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(212, 168, 91, 0.32); } .pakke-name { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); } .pakke-price { font-family: var(--f-display); font-weight: 400; line-height: 1; margin-bottom: var(--s-2); color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; letter-spacing: -0.025em; display: flex; align-items: baseline; gap: 8px; } .pakke-price-prefix { font-family: var(--f-display); font-style: italic; font-size: clamp(18px, 1.8vw, 24px); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; color: var(--ink-3); margin-right: 2px; } .pakke-price-amount { font-size: clamp(40px, 4.4vw, 64px); } .pakke-price-unit { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; } .pakke-tagline { font-family: var(--f-body); font-size: 14px; color: var(--ink-3); margin-bottom: var(--s-6); line-height: 1.5; } .pakke-divider { height: 1px; background: var(--hairline); margin: var(--s-4) 0 var(--s-5); } .pakke-features { list-style: none; padding: 0; margin: 0 0 var(--s-7); flex-grow: 1; } .pakke-features li { position: relative; padding-left: 22px; font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s-3); } .pakke-features li::before { display: none; } .pakke-features li.muted { color: var(--ink-3); } .check-icon { position: absolute; left: 0; top: 0.18em; width: 16px; height: 16px; display: inline-block; color: var(--clay); } .check-icon svg { width: 100%; height: 100%; display: block; } .check-icon svg circle { stroke: var(--clay); fill: var(--clay-soft); stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 700ms cubic-bezier(0.4, 0.05, 0.3, 1); transition-delay: var(--check-delay, 0ms); } .check-icon svg polyline { stroke: var(--clay); stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 400ms cubic-bezier(0.4, 0.05, 0.3, 1); transition-delay: calc(var(--check-delay, 0ms) + 350ms); } .pakke.in-view .check-icon svg circle, .pakke.in-view .check-icon svg polyline { stroke-dashoffset: 0; } .pakke-features li.muted .check-icon { color: var(--ink-3); opacity: 0.5; } .pakke-features li.muted .check-icon svg circle { fill: transparent; stroke: var(--hairline-2); } .pakke-features li.muted .check-icon svg polyline { display: none; } .pakke-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; font-family: var(--f-body); font-size: 15px; font-weight: 600; padding: 14px 22px; border-radius: 999px; letter-spacing: 0.01em; transition: background 250ms ease, color 250ms ease, transform 250ms cubic-bezier(0.4, 0.05, 0.3, 1), box-shadow 250ms ease; } .pakke-cta--ghost { color: var(--ink); background: transparent; border: 1px solid var(--ink); } .pakke-cta--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); } .pakke-cta--primary { color: var(--paper); background: var(--warm); border: 1px solid var(--warm); box-shadow: 0 6px 16px rgba(212, 168, 91, 0.26); } .pakke-cta--primary:hover { background: var(--warm-deep); border-color: var(--warm-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(212, 168, 91, 0.34); } .pakke-cta svg { transition: transform 250ms cubic-bezier(0.4, 0.05, 0.3, 1); } .pakke-cta:hover svg { transform: translateX(3px); } .pakker-footer { text-align: center; margin-top: var(--s-7); font-family: var(--f-body); font-size: var(--t-small); color: var(--ink-3); } .pakker-footer strong { color: var(--ink-2); font-weight: 500; } / -------- Proces — 5-step vertical timeline -------- / .proces { padding: var(--rhythm) var(--gutter); background: var(--paper); position: relative; } .proces-inner { max-width: var(--max); margin: 0 auto; } .proces-header { display: flex; align-items: end; justify-content: space-between; gap: var(--s-7); margin-bottom: var(--s-9); flex-wrap: wrap; } .proces-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .proces-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .proces-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; max-width: 16ch; } .proces-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--clay); } .proces-note { font-family: var(--f-body); font-size: var(--t-small); color: var(--ink-3); max-width: 36ch; line-height: 1.55; } .proces-timeline { position: relative; } .proces-timeline::before { / Vertical spine line / content: ""; position: absolute; left: 60px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--hairline-2) 8%, var(--hairline-2) 92%, transparent 100%); } .step { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-7); padding: var(--s-7) 0; position: relative; align-items: start; } .step + .step { border-top: 1px solid var(--hairline); } .step-marker { position: relative; z-index: 1; } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--paper); border: 1px solid var(--hairline-2); font-family: var(--f-display); font-size: 22px; color: var(--ink); font-variation-settings: "opsz" 96; transition: background 500ms ease, border-color 500ms ease, color 500ms ease, transform 700ms cubic-bezier(0.4, 0.05, 0.3, 1); } .step:hover .step-number { background: var(--clay); border-color: var(--clay); color: var(--paper); transform: scale(1.05); } .step-body { padding-top: var(--s-3); } .step-meta { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm); margin-bottom: var(--s-3); } .step-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); margin-bottom: var(--s-3); font-variation-settings: "opsz" 96; } .step-text { font-family: var(--f-body); font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; } .step-text strong { color: var(--ink); font-weight: 500; } / -------- FAQ — hover-open accordion -------- / .faq { padding: var(--rhythm) var(--gutter); background: var(--paper-2); position: relative; } .faq::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: 0.35; mix-blend-mode: multiply; pointer-events: none; } .faq-inner { max-width: 980px; margin: 0 auto; position: relative; } .faq-header { text-align: center; margin-bottom: var(--s-9); } .faq-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: inline-flex; align-items: center; gap: var(--s-3); } .faq-eyebrow::before, .faq-eyebrow::after { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .faq-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; margin: 0 auto; max-width: 16ch; } .faq-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--clay); } .faq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-2); } .faq-item { border-bottom: 1px solid var(--hairline-2); padding: 0; cursor: pointer; outline: none; position: relative; } .faq-q { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-6) 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; color: var(--ink); letter-spacing: -0.015em; font-variation-settings: "opsz" 96; transition: color 250ms ease; } .faq-item:hover .faq-q, .faq-item:focus-within .faq-q { color: var(--clay); } .faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hairline-2); color: var(--ink-2); transition: transform 400ms cubic-bezier(0.4, 0.05, 0.3, 1), background 300ms ease, border-color 300ms ease, color 300ms ease; flex-shrink: 0; } .faq-icon svg { width: 12px; height: 12px; } .faq-item:hover .faq-icon, .faq-item:focus-within .faq-icon { background: var(--clay); border-color: var(--clay); color: var(--paper); transform: rotate(45deg); } .faq-a { max-height: 0; opacity: 0; overflow: hidden; padding-right: 64px; font-family: var(--f-body); font-size: 16px; line-height: 1.6; color: var(--ink-2); transition: max-height 600ms cubic-bezier(0.4, 0.05, 0.3, 1), opacity 350ms ease, padding-bottom 600ms cubic-bezier(0.4, 0.05, 0.3, 1); } .faq-item:hover .faq-a, .faq-item:focus-within .faq-a { max-height: 360px; opacity: 1; padding-bottom: var(--s-6); transition-delay: 0ms, 120ms, 0ms; } .faq-a p { margin-bottom: var(--s-3); } .faq-a p:last-child { margin-bottom: 0; } .faq-a strong { color: var(--ink); font-weight: 500; } / -------- Kontakt — 2-col pitch + form -------- / .kontakt { padding: var(--rhythm) var(--gutter); background: var(--paper); } .kontakt-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .kontakt-pitch { position: sticky; top: 120px; } .kontakt-eyebrow { font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); } .kontakt-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); } .kontakt-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 144; margin-bottom: var(--s-6); } .kontakt-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--clay); } .kontakt-lead { font-family: var(--f-body); font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 38ch; margin-bottom: var(--s-7); } .kontakt-direct { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-family: var(--f-mono); font-size: var(--t-mono-l); letter-spacing: 0.04em; color: var(--ink-2); } .kontakt-direct a { display: inline-flex; align-items: center; gap: var(--s-3); transition: color 200ms ease; } .kontakt-direct a:hover { color: var(--warm); } .kontakt-direct svg { width: 14px; height: 14px; color: var(--ink-3); } .kontakt-form { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 14px; padding: clamp(28px, 3vw, 44px); box-shadow: 0 6px 14px rgba(42, 58, 82, 0.04), 0 22px 44px -14px rgba(42, 58, 82, 0.10); } .kontakt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } .kontakt-form-field { display: flex; flex-direction: column; gap: var(--s-2); } .kontakt-form-field.full { grid-column: 1 / -1; } .kontakt-form label { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .kontakt-form input, .kontakt-form select, .kontakt-form textarea { font-family: var(--f-body); font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline-2); border-radius: 6px; padding: 12px 14px; transition: border-color 200ms ease, background 200ms ease; width: 100%; } .kontakt-form input:focus, .kontakt-form select:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--clay); background: var(--paper); box-shadow: 0 0 0 3px var(--clay-soft); } .kontakt-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; } .kontakt-form-submit { margin-top: var(--s-5); } .kontakt-form-honeypot { position: absolute; left: -9999px; } .kontakt-form-note { margin-top: var(--s-4); font-family: var(--f-body); font-size: 13px; color: var(--ink-3); line-height: 1.5; } / -------- Footer -------- / .footer { / Warm sun-bloom rising from the top edge — a soft "sunset" close. / background: radial-gradient(ellipse 75% 85% at 50% 0%, rgba(212, 168, 91, 0.10) 0%, transparent 62%), var(--ink-bg); color: var(--paper-on-ink); padding: calc(var(--s-9) 1.25) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom)); position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: 0.35; mix-blend-mode: screen; pointer-events: none; } .footer-inner { max-width: var(--max); margin: 0 auto; position: relative; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); margin-bottom: var(--s-9); } .footer-brand-display { font-family: var(--f-display); font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -0.02em; color: var(--paper-on-ink); font-variation-settings: "opsz" 144; margin-bottom: var(--s-5); } .footer-brand-display em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--warm); } .footer-tagline { font-family: var(--f-body); font-size: var(--t-small); color: rgba(240, 245, 250, 0.6); max-width: 36ch; line-height: 1.55; } .footer-col-title { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240, 245, 250, 0.5); margin-bottom: var(--s-4); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: var(--s-3); } .footer-col a { font-family: var(--f-body); font-size: 15px; color: rgba(240, 245, 250, 0.78); transition: color 200ms ease; } .footer-col a:hover { color: var(--warm); } /* -------- Animated text-link — center-out underline reveal. skiper40 "Link003" ported to vanilla. Reusable via .ulink; also applied to footer links. Uses currentColor so the underline auto-matches the link's (hover) color in any context. scaleX from center = grows out to both edges. / .ulink, .footer-col a { position: relative; display: inline-block; text-decoration: none; } .ulink::after, .footer-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 320ms cubic-bezier(0.4, 0.05, 0.3, 1); pointer-events: none; } .ulink:hover::after, .ulink:focus-visible::after, .footer-col a:hover::after, .footer-col a:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .ulink::after, .footer-col a::after { transition: none; } } .footer-meta { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-5); border-top: 1px solid rgba(240, 245, 250, 0.10); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240, 245, 250, 0.5); flex-wrap: wrap; gap: var(--s-4); } / -------- Reveal animations — fade + lift + scale (premium enter) -------- / .reveal { opacity: 0; transform: translateY(28px) scale(0.97); transform-origin: left bottom; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .reveal.in-view { opacity: 1; transform: translateY(0) scale(1); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 320ms; } / -------- Scroll-linked char-reveal — initial dimmed state, opacity set via JS -------- / .scroll-char { opacity: 0.22; transition: opacity 80ms linear; display: inline-block; } / Scroll progress is now drawn around the nav-pill edge — see .nav-progress-ring. / / -------- Responsive -------- / @media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; gap: var(--s-7); } .hero-figure { max-width: 420px; margin: 0 auto; justify-self: center; } .cases-grid { grid-template-columns: 1fr; } } / ---- Unified mobile breakpoint: hamburger nav + linariserede walkthroughs ---- / @media (max-width: 820px) { / Mobile nav: brand + hamburger only; links/phone/CTA flytter ind i slide-in-panelet. / .nav-links, .nav-phone, .nav-cta { display: none; } .nav-toggle { display: block; } .brand-suffix { display: none; } / Linariser de 5 pinned walkthroughs (samme idé som reduced-motion-fallbacken): un-pin, stak info + mockup i 1 kolonne, vis alle beats. JS gater den pinnede scrub/handoff/auto-spring på SAMME breakpoint (linearize), så intet sætter modstridende inline-styles. Den cinematiske intro + hero beholdes (gated separat). / .hero-menu { display: none; } / showcase-only; ydelserne er sektionerne nedenfor / .ydelse-hjem::before { display: none; } / den stigende sol-bue er en desktop-motion-effekt / .yw-scrollcue, .scroll-cue { display: none; } .flightline, .seg-fly { display: none; } / papirfly-tråd + flyvende ord-kloner / .ydelse-hjem, .ydelse-web, .ydelse-anim, .ydelse-logo, .ydelse-it { height: auto; } .ydelse-hjem-pin, .ydelse-web-pin, .ydelse-anim-pin, .ydelse-logo-pin, .ydelse-it-pin { position: static; min-height: 0; grid-template-columns: 1fr; / stak info over mockup / gap: var(--s-7); padding: var(--rhythm) var(--gutter); } .yw-beats { min-height: 0; } .yw-beat { position: static; opacity: 1; transform: none; margin-bottom: var(--s-6); } .yw-stage { max-width: 100%; } / Reveal alt der normalt er gated bag .is-landed / ord→overskrift-handoff. / .ydelse-hjem-title, .ydelse-web-title, .ydelse-anim-title, .ydelse-logo-title, .ydelse-it-title, .ydelse-hjem-eyebrow, .ydelse-web-eyebrow, .ydelse-anim-eyebrow, .ydelse-logo-eyebrow, .ydelse-it-eyebrow, .yw-beats, .yw-stage, .yw-cta { opacity: 1; transform: none; } } @media (max-width: 800px) { .hero { padding-top: 110px; } .cases-header { flex-direction: column; align-items: flex-start; } .about-inner { grid-template-columns: 1fr; gap: var(--s-7); } .footer-top { grid-template-columns: 1fr; gap: var(--s-6); } .footer-meta { flex-direction: column; align-items: flex-start; gap: var(--s-3); } } / ---- Telefon-finish (≤600px): nye sektioners type/knapper + hero-wordmark-cap ---- / @media (max-width: 600px) { / Hero-wordmark: cap så den store intro-samling (1,5× slam) aldrig overflower vandret. / .hero-mark-name { font-size: clamp(48px, 15vw, 72px); } / About-typografi et trin ned for behagelig mobil-læsning. / .about-lead { font-size: 18px; line-height: 1.62; } .about-highlights li { font-size: 16px; } / "Bliv min næste case": stak CTA, gør knappen bred + tap-venlig. / .naeste { padding: calc(var(--rhythm) 1.05) var(--gutter); } .naeste-cta { flex-direction: column; gap: var(--s-4); } .naeste-btn { width: 100%; max-width: 320px; padding: 16px 24px; } }