/* === Lokale fonts: Inter + IBM Plex Mono === Filerne forventes at ligge i /fonts/ i roden af sitet. Fjern Google Fonts-linket fra , når denne CSS bruges. */ @font-face { font-family: "Inter"; src: url("/fonts/Inter_18pt-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: "Inter"; src: url("/fonts/Inter_18pt-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: optional; } @font-face { font-family: "Inter"; src: url("/fonts/Inter_18pt-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; } @font-face { font-family: "Inter"; src: url("/fonts/Inter_18pt-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional; } @font-face { font-family: "Inter"; src: url("/fonts/Inter_28pt-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: optional; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: optional; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional; } :root { --red: #E21339; --purple: #392F94; --orange: #E11339; --cream: #FEF7EE; --ink: #110f18; --paper: #fff8ef; --white: #ffffff; --active-color: #E21339; --shadow: 0 32px 90px rgba(17, 15, 24, 0.22); --ease: cubic-bezier(.2, .82, .2, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-snap-type: y mandatory; scroll-padding-top: 0; } body { margin: 0; color: var(--white); background: var(--paper); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; } body.nav-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button { color: inherit; } video, img { display: block; max-width: 100%; } ::selection { background: var(--orange); color: var(--ink); } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 3.4vw, 52px); color: var(--white); pointer-events: none; transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease; } .site-header.is-scrolled { background: rgba(17, 15, 24, .22); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); } .site-header > * { pointer-events: auto; } .brand { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; letter-spacing: -0.04em; text-shadow: 0 1px 16px rgba(0,0,0,.12); } .brand-main { font-size: clamp(1.15rem, 1.8vw, 1.75rem); line-height: 1; } .brand-code { color: var(--red); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: clamp(.78rem, .95vw, .95rem); letter-spacing: -0.04em; } .site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-size: clamp(.95rem, 1.05vw, 1.15rem); font-weight: 600; } .site-nav a { opacity: .92; transition: opacity .2s ease, transform .2s ease; } .site-nav a:hover { opacity: 1; transform: translateY(-1px); } .nav-toggle { display: none; } .hero-cycle { position: relative; height: calc(var(--slide-count, 3) * 100vh); height: calc(var(--slide-count, 3) * 100svh); background: var(--active-color); } .hero-sticky { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--active-color); transition: background-color .35s ease; } .hero-scroll-spacer { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; height: calc(var(--slide-count, 3) * 100vh); height: calc(var(--slide-count, 3) * 100svh); pointer-events: none; } .hero-step, .snap-section { scroll-snap-align: start; scroll-snap-stop: always; } .hero-step { height: 100vh; height: 100svh; } .hero-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 55.5vw) minmax(0, 44.5vw); } .visual-track, .copy-track { min-width: 0; min-height: 0; height: 100%; position: relative; overflow: hidden; } .visual-track { background: radial-gradient(circle at 22% 24%, rgba(255,255,255,.45), transparent 15rem), radial-gradient(circle at 84% 80%, rgba(226,19,57,.30), transparent 17rem), linear-gradient(135deg, #ffd0d6 0%, #f9a9b4 100%); border-right: 1px solid rgba(17, 15, 24, .10); } .visual-panel, .copy-panel { position: absolute; inset: 0; min-height: 100%; will-change: transform; transform: translate3d(0, 0, 0); } .visual-panel { overflow: hidden; } .visual-panel:nth-child(2) { background: radial-gradient(circle at 82% 24%, rgba(255,168,61,.50), transparent 14rem), radial-gradient(circle at 16% 80%, rgba(226,19,57,.32), transparent 17rem), linear-gradient(135deg, #e9ddff 0%, #b8a5ff 100%); } .visual-panel:nth-child(3) { background: radial-gradient(circle at 20% 22%, rgba(255,255,255,.62), transparent 15rem), radial-gradient(circle at 84% 78%, rgba(57,47,148,.24), transparent 16rem), linear-gradient(135deg, #ffe6bd 0%, #ffba58 100%); } .copy-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(84px, 9vw, 138px) clamp(30px, 4vw, 70px) clamp(34px, 4vw, 62px); background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.10), transparent 18rem), var(--theme); color: var(--white); overflow: hidden; text-align: center; } .copy-panel-orange { color: var(--white); } .video-shell { position: absolute; inset: 0; overflow: hidden; } .video-shell video, .video-fallback { position: absolute; inset: 0; width: 100%; height: 100%; } .video-shell video { object-fit: cover; opacity: 0; transition: opacity .35s ease; z-index: 2; } .video-shell video.is-ready { opacity: 1; } .video-shell video.is-ready + .video-fallback { opacity: 0; } .video-fallback { z-index: 1; overflow: hidden; opacity: 1; transition: opacity .3s ease; } .copy-inner { max-width: 760px; width: 100%; } .centered-copy { display: grid; justify-items: center; } .eyebrow, .section-kicker { margin: 0 0 20px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: clamp(.78rem, .9vw, .95rem); letter-spacing: .02em; opacity: .76; } h1, h2 { margin: 0; font-size: clamp(2.9rem, 4.9vw, 6.4rem); line-height: .96; letter-spacing: -0.078em; font-weight: 800; text-wrap: balance; } .lead { max-width: 680px; font-size: clamp(1.2rem, 1.65vw, 1.95rem); line-height: 1.18; letter-spacing: -0.045em; opacity: .92; text-wrap: balance; } .panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 23px; border-radius: 999px; border: 1px solid currentColor; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; transition: transform .2s var(--ease), background .2s ease, color .2s ease; } .button:hover { transform: translateY(-2px); } .button.light { background: var(--white); color: var(--red); border-color: var(--white); } .button.light.intext {margin-top:25px;} .button.dark { width: fit-content; background: var(--ink); color: var(--white); border-color: var(--ink); } .copy-panel:nth-child(2) .button.light { color: var(--purple); } .hero-controls { position: absolute; z-index: 8; top: 50%; right: clamp(18px, 2.2vw, 44px); transform: translateY(-50%); display: grid; gap: 18px; } .hero-controls button { width: 3px; height: 70px; border: 0; padding: 0; background: rgba(17,15,24,.20); cursor: pointer; overflow: hidden; } .hero-controls span { display: block; width: 100%; height: 100%; background: currentColor; transform: scaleY(.18); transform-origin: bottom; opacity: .6; transition: transform .32s var(--ease), opacity .32s ease; } .hero-controls button.is-active span { transform: scaleY(1); opacity: 1; } /* Fallback-visuals, så heroen stadig ser designet ud før videoerne er lagt ind */ .fallback-one { background: radial-gradient(circle at 10% 14%, rgba(255,255,255,.38), transparent 19rem), radial-gradient(circle at 84% 78%, rgba(255,255,255,.20), transparent 18rem), linear-gradient(145deg, #ffd0d6 0%, #f1a0aa 100%); } .mock-browser { position: absolute; top: 12%; right: 10%; width: min(44vw, 480px); aspect-ratio: 1.35; border-radius: 18px; background: rgba(255,255,255,.46); border: 2px solid rgba(57,47,148,.62); box-shadow: 0 30px 70px rgba(226,19,57,.18); transform: rotate(2deg); } .mock-browser span { position: absolute; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); } .mock-browser span:nth-child(1) { left: 18px; } .mock-browser span:nth-child(2) { left: 35px; background: var(--orange); } .mock-browser span:nth-child(3) { left: 52px; background: var(--purple); } .mock-search { position: absolute; top: 48px; left: 42px; right: 42px; height: 24px; border: 2px solid var(--purple); border-radius: 999px; opacity: .8; } .mock-hero { position: absolute; left: 42px; right: 42px; top: 100px; height: 88px; border-radius: 16px; background: var(--orange); box-shadow: 20px 20px 45px rgba(226,19,57,.22); } .mock-row { position: absolute; left: 42px; right: 42px; bottom: 38px; display: flex; gap: 16px; } .mock-row i { height: 70px; flex: 1; border-radius: 12px; background: var(--purple); } .mock-row i:nth-child(2) { background: var(--red); } .floating-tablet { position: absolute; left: 28%; bottom: 12%; width: min(28vw, 310px); aspect-ratio: .7; border-radius: 26px; border: 12px solid var(--ink); background: linear-gradient(90deg, var(--red) 0 22%, rgba(255,255,255,.82) 22% 100%); transform: rotate(10deg); box-shadow: 0 32px 70px rgba(17,15,24,.24); } .floating-stack { position: absolute; left: 15%; bottom: 12%; display: grid; gap: 7px; } .floating-stack b { width: 78px; height: 16px; border-radius: 4px; background: var(--orange); box-shadow: 12px 12px 24px rgba(226,19,57,.12); } .fallback-two { background: radial-gradient(circle at 78% 20%, rgba(255,168,61,.42), transparent 13rem), radial-gradient(circle at 20% 82%, rgba(226,19,57,.32), transparent 16rem), linear-gradient(145deg, #ece6ff 0%, #b8a5ff 100%); } .ai-core { position: absolute; inset: 50% auto auto 50%; width: min(28vw, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: var(--white); box-shadow: 0 40px 90px rgba(57,47,148,.34); } .ai-core span { font-size: clamp(3rem, 7vw, 7rem); font-weight: 800; letter-spacing: -.08em; } .ai-core i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); } .ai-core i:nth-child(2) { left: 12%; top: 24%; } .ai-core i:nth-child(3) { right: 14%; top: 30%; background: var(--red); } .ai-core i:nth-child(4) { left: 30%; bottom: 12%; background: var(--white); } .ai-core i:nth-child(5) { right: 28%; bottom: 16%; } .ai-card { position: absolute; padding: 18px 24px; border-radius: 999px; background: rgba(255,255,255,.78); color: var(--ink); font-weight: 800; letter-spacing: -.04em; box-shadow: 0 25px 70px rgba(57,47,148,.20); } .ai-one { left: 12%; top: 18%; } .ai-two { right: 10%; top: 30%; background: var(--orange); } .ai-three { left: 22%; bottom: 17%; background: var(--red); color: var(--white); } .fallback-three { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.52), transparent 15rem), radial-gradient(circle at 82% 82%, rgba(57,47,148,.22), transparent 16rem), linear-gradient(145deg, #ffe7be 0%, #ffb34f 100%); color: var(--ink); } .server-stack { position: absolute; left: 50%; top: 50%; width: min(42vw, 470px); display: grid; gap: 14px; transform: translate(-50%, -50%) rotate(-2deg); } .server-stack div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px 28px; border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 25px 70px rgba(17,15,24,.14); } .server-stack span { width: 13px; height: 13px; border-radius: 50%; background: var(--red); } .server-stack strong { font-size: 1.2rem; letter-spacing: -.04em; } .server-stack em { font-style: normal; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--purple); } .service-orbit { position: absolute; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; } .orbit-one { width: 34vw; height: 34vw; right: -8vw; bottom: -10vw; } .orbit-two { width: 17vw; height: 17vw; left: 10%; top: 12%; } .page-section { min-height: 100vh; min-height: 100svh; padding: clamp(82px, 8vw, 126px) clamp(22px, 5vw, 82px); display: grid; align-content: center; overflow: hidden; } .section-kicker { color: inherit; opacity: .8; } .section-heading { max-width: 1100px; margin: 0 auto clamp(34px, 5vw, 72px); text-align: center; } .section-heading h2 { font-size: clamp(3rem, 7vw, 8rem); } .section-heading p:not(.section-kicker) { max-width: 720px; margin: 24px auto 0; font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.42; opacity: .82; } .intro-section { background: var(--red); color: var(--white); } .intro-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(28px, 6vw, 92px); align-items: end; } .intro-copy h2 { max-width: 1050px; font-size: clamp(2.8rem, 5.6vw, 7.4rem); } .intro-copy p { max-width: 800px; margin: 30px 0 0; font-size: clamp(1.12rem, 1.55vw, 1.55rem); line-height: 1.45; opacity: .9; } .intro-card { border-radius: 34px; padding: 32px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 35px 90px rgba(17,15,24,.12); } .intro-card span { display: block; margin-bottom: 22px; font-family: "IBM Plex Mono", ui-monospace, monospace; opacity: .72; } .intro-card ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: clamp(1.05rem, 1.25vw, 1.28rem); font-weight: 700; line-height: 1.25; } .intro-card li { display: flex; gap: 12px; } .intro-card li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: .42em; border-radius: 50%; background: var(--orange); } .customers-section { background: var(--cream); color: var(--ink); } .dark-heading .section-kicker { color: var(--red); opacity: 1; } .logo-marquee { width: min(100%, 1500px); margin: 0 auto; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-track { display: flex; width: max-content; animation: logoSlide 30s linear infinite; } .logo-set { display: flex; gap: 18px; padding-right: 18px; } .logo-set span { width: clamp(220px, 18vw, 340px); height: clamp(130px, 11vw, 190px); display: flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 18px; overflow: hidden; } .logo-set span a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; color: inherit; } .logo-set span a img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: brightness(0) saturate(100%); opacity: .9; } .logo-marquee:hover .logo-track { animation-play-state: paused; } @keyframes logoSlide { to { transform: translateX(-50%); } } .projects-section { background: var(--purple); color: var(--white); } .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(100%, 1380px); margin: 0 auto; } .project-card { min-height: clamp(280px, 32vw, 470px); padding: clamp(24px, 3vw, 42px); border-radius: 36px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 90px rgba(17,15,24,.12); } .project-card span { width: fit-content; padding: 9px 13px; border-radius: 999px; background: var(--orange); color: var(--ink); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85rem; font-weight: 700; } .project-card h3 { margin: auto 0 0; font-size: clamp(1.8rem, 3vw, 3.65rem); line-height: .96; letter-spacing: -.07em; font-weight: 600; } .project-card p { margin: 22px 0 0; font-size: clamp(1rem, 1.18vw, 1.18rem); line-height: 1.45; opacity: .82; } .featured-project { background: var(--red); transform: translateY(-16px); } .contact-section { background: var(--orange); color: var(--ink); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 92px); align-items: center; } .contact-form-panel h2 { font-size: clamp(2.7rem, 5.2vw, 6.6rem); } .contact-form { display: grid; gap: 14px; max-width: 720px; margin-top: 34px; } .contact-form label { display: grid; gap: 8px; font-weight: 800; letter-spacing: -.04em; } .contact-form span { font-size: .9rem; opacity: .72; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid rgba(17,15,24,.16); border-radius: 18px; padding: 15px 16px; color: var(--ink); background: rgba(255,255,255,.62); outline: none; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--purple); background: rgba(255,255,255,.9); } .contact-image-panel { min-height: clamp(420px, 66svh, 760px); border-radius: 44px; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.68), transparent 14rem), radial-gradient(circle at 80% 82%, rgba(226,19,57,.28), transparent 16rem), linear-gradient(145deg, #ffd18b, #ffb34f); border: 1px solid rgba(17,15,24,.10); display: grid; place-items: center; overflow: hidden; box-shadow: 0 35px 100px rgba(17,15,24,.12); } .portrait-card { width: min(74%, 440px); aspect-ratio: .82; border-radius: 38px; padding: 28px; background: rgba(255,255,255,.62); box-shadow: 0 40px 100px rgba(17,15,24,.14); display: flex; flex-direction: column; justify-content: flex-end; position: relative; transform: rotate(3deg); } .portrait-shape { position: absolute; left: 50%; top: 12%; width: 58%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50% 50% 44% 44%; background: var(--purple); box-shadow: 0 24px 70px rgba(57,47,148,.25); } .portrait-shape::after { content: ""; position: absolute; left: 50%; bottom: -38%; width: 145%; height: 75%; transform: translateX(-50%); border-radius: 50% 50% 22% 22%; background: var(--red); } .portrait-lines { position: absolute; inset: 24px 24px auto auto; display: grid; gap: 6px; } .portrait-lines span { display: block; width: 62px; height: 7px; border-radius: 999px; background: var(--orange); } .portrait-lines span:nth-child(2) { width: 44px; background: var(--red); } .portrait-lines span:nth-child(3) { width: 54px; background: var(--purple); } .portrait-card strong { position: relative; z-index: 1; font-size: clamp(1.6rem, 2.4vw, 2.8rem); line-height: 1; letter-spacing: -.07em; } .portrait-card p { position: relative; z-index: 1; margin: 12px 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .95rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } } @media (max-width: 1100px) { .project-grid { grid-template-columns: 1fr; } .project-card { min-height: 220px; } .featured-project { transform: none; } } @media (max-width: 940px) { .site-header { height: 70px; } .nav-toggle { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; background: rgba(17,15,24,.18); cursor: pointer; } .nav-toggle span { width: 17px; height: 2px; background: currentColor; grid-area: 1 / 1; transition: transform .22s ease; } .nav-toggle span:first-child { transform: translateY(-4px); } .nav-toggle span:last-child { transform: translateY(4px); } body.nav-open .nav-toggle span:first-child { transform: rotate(45deg); } body.nav-open .nav-toggle span:last-child { transform: rotate(-45deg); } .site-nav { position: fixed; inset: 70px 14px auto 14px; display: grid; gap: 0; padding: 18px; border-radius: 24px; background: rgba(17,15,24,.88); backdrop-filter: blur(18px); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } body.nav-open .site-nav { transform: translateY(0); opacity: 1; pointer-events: auto; } .site-nav a { width: 100%; padding: 14px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.12); } .site-nav a:last-child { border-bottom: 0; } .hero-grid { grid-template-columns: 1fr; grid-template-rows: 52svh 48svh; grid-template-areas: "copy" "visual"; } .copy-track { grid-area: copy; } .visual-track { grid-area: visual; border-right: 0; border-top: 1px solid rgba(17,15,24,.10); } .copy-panel { padding: 86px 22px 42px; justify-content: center; } h1, h2 { font-size: clamp(2.05rem, 10.5vw, 4.2rem); line-height: .98; } .lead { margin-top: 16px; font-size: clamp(1rem, 4.2vw, 1.32rem); line-height: 1.18; } .panel-actions { margin-top: 22px; } .button { min-height: 44px; padding: 11px 17px; } .hero-controls { top: auto; right: 22px; bottom: calc(48svh + 18px); transform: none; display: flex; gap: 8px; } .hero-controls button { width: 44px; height: 3px; } .hero-controls span { transform: scaleX(.28); transform-origin: left; } .hero-controls button.is-active span { transform: scaleX(1); } .mock-browser { width: 66vw; top: 10%; right: 6%; } .floating-tablet { width: 36vw; left: 22%; bottom: 8%; border-width: 8px; } .floating-stack { left: 9%; bottom: 10%; } .ai-core { width: min(48vw, 250px); } .ai-card { font-size: .9rem; padding: 12px 16px; } .server-stack { width: min(78vw, 390px); } .page-section { padding: 82px 22px 44px; } .intro-layout, .contact-section { grid-template-columns: 1fr; gap: 28px; } .intro-card { padding: 24px; } .contact-image-panel { min-height: 36svh; border-radius: 32px; } .portrait-card { width: min(62%, 300px); padding: 20px; } } @media (max-width: 620px) { html { scroll-snap-type: y proximity; } .brand-code { display: none; } .hero-grid { grid-template-rows: 55svh 45svh; } .copy-panel { padding: 82px 18px 34px; } .eyebrow, .section-kicker { margin-bottom: 12px; } .lead { max-width: 94vw; } .hero-controls { right: 18px; bottom: calc(45svh + 14px); } .page-section { min-height: 100svh; padding: 78px 18px 40px; } .section-heading { margin-bottom: 28px; } .section-heading h2 { font-size: clamp(2.5rem, 15vw, 5.2rem); } .intro-copy h2, .contact-form-panel h2 { font-size: clamp(2.3rem, 13vw, 4.6rem); } .intro-copy p { margin-top: 20px; font-size: 1.02rem; } .logo-set { gap: 12px; padding-right: 12px; } .logo-set span { width: 136px; height: 82px; border-radius: 22px; } .project-card { padding: 22px; border-radius: 28px; min-height: 210px; } .contact-form { margin-top: 24px; gap: 10px; } .contact-form input, .contact-form textarea, .contact-form select { padding: 12px 13px; border-radius: 14px; } } /* === Back-to-basics justeringer fra Kim === */ .cursor-ring { position: fixed; left: 0; top: 0; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.86); border-radius: 50%; pointer-events: none; z-index: 3000; opacity: 0; transform: translate3d(calc(var(--cursor-x, -100px) - 50%), calc(var(--cursor-y, -100px) - 50%), 0) scale(1); transition: opacity .18s ease, transform .16s ease, width .18s ease, height .18s ease, border-color .18s ease; mix-blend-mode: difference; } body.cursor-ready .cursor-ring { opacity: 1; } body.cursor-hover .cursor-ring { width: 57px; height: 57px; border-color: rgba(255,255,255,1); } .hero-grid { grid-template-columns: minmax(0, 50vw) minmax(0, 50vw); } .visual-track { order: 1; } .copy-track { order: 2; } .video-shell video { object-fit: cover; object-position: center; } .button { min-height: 52px; border-radius: 0; padding: 14px 22px; background: var(--white); color: var(--ink); border-color: var(--white); gap: 12px; } .button::after { content: "→"; display: inline-block; transform: translateX(0); transition: transform .2s var(--ease); } .button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); transform: translateY(-2px); } .button:hover::after { transform: translateX(5px); } .button.light, .button.dark, .copy-panel:nth-child(2) .button.light { background: var(--white); color: var(--ink); border-color: var(--white); } .button.light:hover, .button.dark:hover, .copy-panel:nth-child(2) .button.light:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .customers-section .section-heading { margin-bottom: clamp(24px, 4vw, 50px); } .logo-marquees { display: grid; gap: clamp(14px, 2vw, 24px); width: min(100%, 1500px); margin: 0 auto; } .logo-marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-track { display: flex; width: max-content; animation: logoSlide 28s linear infinite; } .logo-track.reverse { animation-name: logoSlideReverse; animation-duration: 34s; } .logo-set { display: flex; gap: 18px; padding-right: 18px; } .logo-set span { width: clamp(140px, 12vw, 210px); height: clamp(72px, 6.5vw, 108px); border-radius: 0; } .logo-marquees:hover .logo-track { animation-play-state: paused; } @keyframes logoSlideReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } .projects-section { padding-top: clamp(78px, 7vw, 110px); padding-bottom: clamp(38px, 5vw, 70px); } .projects-section .section-heading { margin-bottom: clamp(20px, 3vw, 34px); } .projects-section .section-heading h2 { font-size: clamp(2.5rem, 5.6vw, 6rem); } .projects-section .section-heading p:not(.section-kicker) { margin-top: 16px; font-size: clamp(1rem, 1.2vw, 1.18rem); } .project-grid { gap: clamp(14px, 1.7vw, 22px); align-items: stretch; } .project-card { min-height: 0; padding: clamp(14px, 1.6vw, 22px); border-radius: 0; display: grid; grid-template-rows: auto 1fr; gap: 18px; justify-content: initial; overflow: hidden; } .featured-project { transform: none; } .project-screenshot { --screenshot-window: clamp(150px, 22svh, 255px); position: relative; height: var(--screenshot-window); overflow: hidden; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); } .project-screenshot img { position: relative; z-index: 2; width: 100%; min-height: 100%; height: auto; object-fit: cover; object-position: top center; transform: translateY(0); transition: transform var(--scroll-time, 8s) linear; will-change: transform; max-width:100% !important; } .project-card:hover .project-screenshot img:not(.is-missing), .project-screenshot:hover img:not(.is-missing) { transform: translateY(calc(-100% + var(--screenshot-window))); } .project-screenshot img.is-missing { display: none; } .project-screenshot-fallback { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: "IBM Plex Mono", ui-monospace, monospace; color: rgba(255,255,255,.72); background: linear-gradient(180deg, rgba(255,255,255,.16) 0 24%, transparent 24% 100%), repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 12px, transparent 12px 34px), rgba(17,15,24,.18); } .project-content { display: grid; align-content: start; gap: 12px; } .project-card h3 { margin: 0; font-size: clamp(1.35rem, 2.1vw, 2.4rem); line-height: 1; } .project-card p { margin: 0; font-size: clamp(.95rem, 1vw, 1.05rem); line-height: 1.38; } .project-card span { border-radius: 0; } .site-footer { scroll-snap-align: start; background: #050505; color: var(--white); min-height: 42svh; padding: clamp(54px, 7vw, 92px) clamp(22px, 5vw, 82px); display: grid; align-items: center; } .footer-inner { width: min(100%, 1380px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .7fr) auto; gap: clamp(28px, 5vw, 82px); align-items: end; } .footer-brand p { max-width: 560px; margin: 24px 0 0; font-size: clamp(1.05rem, 1.35vw, 1.45rem); line-height: 1.35; opacity: .76; } .footer-data { display: grid; gap: 12px; } .footer-data p { margin: 0; display: grid; gap: 4px; } .footer-data span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78rem; color: var(--red); } .footer-data a, .footer-data strong { font-size: 1rem; font-weight: 700; } .footer-social { display: flex; gap: 10px; justify-content: flex-start; margin-top:25px; } .footer-social a { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: background .2s ease, transform .2s var(--ease), border-color .2s ease; } .footer-social a:hover { background: var(--white); border-color: var(--white); transform: translateY(-2px); } .footer-social svg { width: 22px; height: 22px; fill: currentColor; } .footer-social a:hover svg { fill: var(--ink); } @media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } } @media (max-width: 1100px) { .project-grid { grid-template-columns: 1fr; } .project-screenshot { --screenshot-window: clamp(145px, 26svh, 240px); } .footer-inner { grid-template-columns: 1fr; align-items: start; } .footer-social { justify-content: flex-start; } } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; grid-template-rows: 52svh 48svh; } .visual-track { order: initial; } .copy-track { order: initial; } } @media (max-width: 620px) { .logo-marquees { gap: 12px; } .logo-set { gap: 12px; padding-right: 12px; } .logo-set span { width: 132px; height: 72px; } .project-screenshot { --screenshot-window: 150px; } .site-footer { min-height: 50svh; padding: 54px 18px; } } /* === codepusher header/menu update === */ .codepusher-brand { align-items: flex-start; flex-direction: column; gap: 3px; line-height: 1; } .codepusher-brand .brand-main { font-size: clamp(1.8rem, 3.1vw, 1.9rem); font-weight: 800; letter-spacing: -0.085em; } .codepusher-brand .brand-code { min-height: 1.15em; color: var(--red); font-size: clamp(.74rem, .9vw, .98rem); letter-spacing: -0.02em; white-space: nowrap; } .brand-caret { display: inline-block; width: .58em; height: 1em; margin-left: 3px; border-right: 2px solid currentColor; transform: translateY(.16em); animation: brandBlink .8s steps(1) infinite; } @keyframes brandBlink { 50% { opacity: 0; } } /* Logoet er synligt fra start. Selve menuen vises først efter scroll. */ .site-header .site-nav, .site-header .nav-toggle { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .24s ease, transform .24s var(--ease), visibility .24s ease; } .site-header.is-scrolled .site-nav, .site-header.is-scrolled .nav-toggle, body.nav-open .site-nav, body.nav-open .nav-toggle { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .site-nav a { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(.82rem, .88vw, .96rem); text-transform: none; } .site-nav a:hover { color: var(--red); } @media (min-width: 941px) { .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle { display: none; } } .footer-logo { display: inline-block; font-size: clamp(2.6rem, 5.2vw, 6.8rem); line-height: .9; letter-spacing: -0.09em; font-weight: 800; } .footer-logo:hover { color: var(--red); } .site-footer code { color: var(--red); } @media (max-width: 940px) { .codepusher-brand .brand-main { font-size: clamp(1.55rem, 7vw, 2.8rem); } .codepusher-brand .brand-code { font-size: .74rem; } .site-header { align-items: flex-start; padding-top: 16px; } .site-header.is-scrolled .nav-toggle, body.nav-open .nav-toggle { display: grid; } body.nav-open .site-nav { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } } @media (max-width: 620px) { .brand-code { display: inline-flex; } .codepusher-brand .brand-main { font-size: clamp(1.35rem, 8vw, 2.2rem); } .codepusher-brand .brand-code { max-width: 58vw; overflow: hidden; } } /* === Mobilmenu v2: fullscreen slide-in fra højre === */ .site-nav .mobile-menu-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); } .mobile-menu-contact { display: none; } @media (max-width: 940px) { .site-header { height: 74px; align-items: center; padding-top: 0; } .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .nav-toggle { position: relative; z-index: 4002; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #ffffff; color: #DD1339; box-shadow: 0 14px 38px rgba(17, 15, 24, .18); opacity: 1; transform: none; } .nav-toggle span { grid-area: 1 / 1; display: block; width: 20px; height: 2px; margin: 0; background: currentColor; border-radius: 999px; } .nav-toggle span:first-child { transform: translateY(-4px); } .nav-toggle span:last-child { transform: translateY(4px); } .nav-toggle[aria-expanded="true"] span:first-child, body.nav-open .nav-toggle span:first-child { transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child, body.nav-open .nav-toggle span:last-child { transform: rotate(-45deg); } .site-nav, .site-header.is-scrolled .site-nav { position: fixed; inset: 0; z-index: 4000; width: 100vw; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px); border-radius: 0; background: #DD1339; color: #ffffff; box-shadow: none; backdrop-filter: none; opacity: 1; visibility: hidden; pointer-events: none; transform: translate3d(100%, 0, 0); transition: transform .42s var(--ease), visibility .42s step-end; } body.nav-open .site-nav { visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition: transform .42s var(--ease), visibility 0s step-start; } .site-nav .mobile-menu-links { display: grid; align-content: center; gap: clamp(10px, 2.2svh, 18px); } .site-nav a { width: fit-content; padding: 0; border: 0; color: #ffffff; opacity: 1; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(2.2rem, 10.5vw, 5.5rem); line-height: .9; letter-spacing: -0.075em; font-weight: 800; } .site-nav a:hover { color: #ffffff; transform: translateX(8px); } .mobile-menu-contact { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.32); } .mobile-menu-contact p { margin: 0; display: grid; gap: 4px; } .mobile-menu-contact span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .82rem; color: rgba(255,255,255,.72); } .mobile-menu-contact a { font-size: clamp(1.35rem, 5.4vw, 2.3rem); line-height: 1.05; letter-spacing: -0.045em; } } @media (max-width: 520px) { .site-nav, .site-header.is-scrolled .site-nav { padding-inline: 22px; } .site-nav a { font-size: clamp(2rem, 12vw, 4.2rem); } } /* === Fixes: smooth mobile slide-in, menu font and heavier headings === */ h1, h2 { font-weight: 800; } .site-nav a { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } @media (max-width: 940px) { .site-nav, .site-header.is-scrolled .site-nav { opacity: 1 !important; visibility: visible !important; pointer-events: none; transform: translate3d(110%, 0, 0) !important; transition: transform .62s cubic-bezier(.19, 1, .22, 1) !important; will-change: transform; } body.nav-open .site-nav, .site-nav.is-open, .site-header.is-menu-open .site-nav { pointer-events: auto; transform: translate3d(0, 0, 0) !important; } .site-nav a, .mobile-menu-contact, .mobile-menu-contact span, .mobile-menu-contact a { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } } /* === Hero visual update: farvet baggrund + billede fra bunden === */ .hero-cycle { background: var(--active-color); } .visual-track { background: var(--active-color); } .hero-visual { display: grid; place-items: end center; padding: clamp(74px, 7vw, 118px) clamp(22px, 4.8vw, 78px) 0; isolation: isolate; background: var(--theme); } .hero-visual::before, .hero-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero-visual::before { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.34), transparent 17rem), radial-gradient(circle at 80% 80%, rgba(255,255,255,.16), transparent 18rem), linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.06)); } .hero-visual::after { opacity: .42; background: linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%); } .hero-visual-red { background: radial-gradient(circle at 18% 12%, rgba(255,168,61,.38), transparent 18rem), linear-gradient(135deg, #E21339 0%, #BD0F2F 100%); } .hero-visual-purple { background: radial-gradient(circle at 80% 18%, rgba(255,168,61,.40), transparent 18rem), linear-gradient(135deg, #392F94 0%, #241D68 100%); } .hero-visual-orange { color: var(--ink); background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.55), transparent 17rem), radial-gradient(circle at 76% 84%, rgba(226,19,57,.22), transparent 18rem), linear-gradient(135deg, #FFA83D 0%, #F18A10 100%); } .hero-art-shell { position: relative; z-index: 1; width: min(76%, 620px); max-height: calc(100svh - 96px); aspect-ratio: .86; display: grid; align-items: end; justify-items: center; margin-inline: auto; transform: translateY(20%); opacity: 0; transition: transform .85s var(--ease), opacity .55s ease; transition-delay: 0s; will-change: transform, opacity; } .hero-visual.is-active .hero-art-shell { transform: translateY(0); opacity: 1; transition-delay: 1s; } .hero-art-glow { position: absolute; left: 50%; bottom: 0; width: 92%; height: 50%; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: rgba(255,255,255,.18); filter: blur(18px); z-index: -1; } .hero-art-image, .hero-art-placeholder { width: 100%; max-height: 100%; object-fit: contain; object-position: bottom center; align-self: end; justify-self: center; } .hero-art-image { position: relative; z-index: 3; filter: drop-shadow(0 30px 70px rgba(17,15,24,.28)); } .hero-art-image.is-missing { display: none; } .hero-art-placeholder { position: absolute; inset: auto 0 0; min-height: min(82%, 650px); display: grid; align-items: end; justify-items: center; z-index: 2; } .browser-window, .ai-window, .hosting-window { width: min(100%, 520px); border: 2px solid rgba(255,255,255,.44); background: rgba(255,255,255,.20); box-shadow: 0 34px 90px rgba(17,15,24,.24); backdrop-filter: blur(10px); } .browser-window { min-height: clamp(360px, 62svh, 670px); padding: 30px; display: grid; align-content: start; gap: 18px; } .browser-window span { width: 13px; height: 13px; border-radius: 50%; background: #ffffff; display: inline-block; margin-right: 7px; } .browser-window strong { margin-top: clamp(38px, 8svh, 84px); font-size: clamp(3rem, 7vw, 7.6rem); line-height: .82; letter-spacing: -.09em; font-weight: 800; color: #ffffff; } .browser-window i { display: block; width: 100%; height: clamp(44px, 7svh, 80px); background: rgba(255,255,255,.22); } .browser-window i:nth-of-type(2) { width: 78%; } .browser-window i:nth-of-type(3) { width: 56%; background: rgba(255,168,61,.8); } .ai-window { min-height: clamp(350px, 60svh, 650px); padding: clamp(28px, 4vw, 46px); display: grid; align-content: end; gap: 12px; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 24%, rgba(255,168,61,.95), transparent 8rem), rgba(255,255,255,.18); } .ai-window strong { font-size: clamp(5rem, 12vw, 13rem); line-height: .76; letter-spacing: -.11em; font-weight: 800; color: #ffffff; } .ai-window span { width: fit-content; padding: 12px 16px; background: rgba(255,255,255,.18); color: #ffffff; font-weight: 800; } .ai-window span:nth-child(3) { margin-left: auto; background: rgba(226,19,57,.58); } .ai-window span:nth-child(4) { background: rgba(255,168,61,.88); color: var(--ink); } .hosting-window { min-height: clamp(340px, 58svh, 630px); padding: clamp(26px, 3.6vw, 42px); display: grid; align-content: end; gap: 14px; background: rgba(255,255,255,.34); color: var(--ink); } .hosting-window div { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; background: rgba(255,255,255,.44); } .hosting-window b { width: 14px; height: 14px; border-radius: 50%; background: var(--red); } .hosting-window span { font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 800; letter-spacing: -.04em; } .hosting-window em { font-style: normal; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; color: var(--purple); } @media (max-width: 940px) { .hero-visual { padding: 24px 18px 0; } .hero-art-shell { width: min(70%, 360px); max-height: 45svh; transform: translateY(18%); } .browser-window, .ai-window, .hosting-window { width: min(100%, 340px); } .browser-window, .ai-window, .hosting-window { min-height: 38svh; padding: 20px; } .browser-window strong { font-size: clamp(2.4rem, 11vw, 4.2rem); } .ai-window strong { font-size: clamp(4.2rem, 18vw, 7rem); } } @media (max-width: 620px) { .hero-art-shell { width: min(82%, 330px); max-height: 43svh; } .browser-window, .ai-window, .hosting-window { min-height: 34svh; } } /* === Komplet hero-scene: baggrund + forgrundsfigur + mouse parallax === */ .hero-grid { grid-template-columns: 50% 50%; } .visual-track { background: transparent; } .hero-visual { display: block; padding: 0; overflow: hidden; background: var(--theme); } .hero-visual::before, .hero-visual::after { display: none; } .hero-scene { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; isolation: isolate; background: var(--theme); } .hero-scene-bg { position: absolute; inset: -4%; z-index: 1; background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0; transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.06); transition: opacity .45s ease, transform .16s linear; will-change: transform, opacity; } .hero-scene::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.20) 58%, rgba(0,0,0,.38) 100%), radial-gradient(circle at 50% 96%, rgba(255,255,255,.06), transparent 36%); pointer-events: none; } .hero-scene-figure-wrap { position: absolute; left: 50%; bottom: 0; z-index: 3; width: min(85%, 85vh); max-height: 92%; transform: translateX(-50%) translateY(84px); opacity: 0; transition: transform .75s var(--ease), opacity .5s ease; transition-delay: 0s; will-change: transform, opacity; } .hero-scene-figure { display: block; width: 100%; height: auto; max-height: 92svh; object-fit: contain; object-position: center bottom; transform: translate3d(var(--fg-x, 0px), var(--fg-y, 0px), 0); transition: transform .12s linear; filter: drop-shadow(0 34px 48px rgba(0,0,0,.42)); will-change: transform; } .hero-visual.is-active .hero-scene-bg { opacity: 1; } .hero-visual.is-active .hero-scene-figure-wrap { transform: translateX(-50%) translateY(0); opacity: 1; transition-delay: 1s; } .hero-scene-figure.is-missing { display: none; } .hero-visual-red .hero-scene { background: #E21339; } .hero-visual-purple .hero-scene { background: #392F94; } .hero-visual-orange .hero-scene { background: #FFA83D; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; grid-template-rows: 52svh 48svh; grid-template-areas: "copy" "visual"; } .copy-track { grid-area: copy; } .visual-track { grid-area: visual; } .hero-scene-bg { inset: -2%; transform: scale(1.03) !important; } .hero-scene-figure-wrap { width: min(62%, 330px); max-height: 46svh; transition-delay: 0s; } .hero-visual.is-active .hero-scene-figure-wrap { transition-delay: .6s; } .hero-scene-figure { max-height: 46svh; transform: none !important; } } @media (max-width: 620px) { .hero-scene-figure-wrap { width: min(70%, 300px); } } .hero-scene-figure-wrap { position: absolute; left: 50%; bottom: 0; z-index: 3; width: min(85%, 85vh); max-height: 92%; opacity: 0; transform: translateX(-50%) translateY(110%); transition: transform .78s cubic-bezier(.2, .82, .2, 1), opacity .48s ease; transition-delay: 0s; will-change: transform, opacity; } /* Aktiv hero-slide: figuren kommer op efter 1 sekund */ .visual-panel.is-active .hero-scene-figure-wrap, .hero-visual.is-active .hero-scene-figure-wrap { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 1s; } /* Når slidet forlades, skal billedet væk med det samme */ .visual-panel:not(.is-active) .hero-scene-figure-wrap, .hero-visual:not(.is-active) .hero-scene-figure-wrap { transition-delay: 0s; } /* Selve billedet/parallax-laget */ .hero-scene-figure { display: block; width: 100%; height: auto; max-height: 92svh; object-fit: contain; object-position: center bottom; transform: translate3d(var(--fg-x, 0px), var(--fg-y, 0px), 0); transition: transform .12s linear; filter: drop-shadow(0 34px 48px rgba(0,0,0,.42)); will-change: transform; margin-bottom:-50px; } .hero-scene-figure.is-missing { display: none; } /* Baggrunden fader ind sammen med aktivt slide */ .hero-scene-bg { position: absolute; inset: -4%; z-index: 1; background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0; transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.06); transition: opacity .45s ease, transform .16s linear; will-change: transform, opacity; } .visual-panel.is-active .hero-scene-bg, .hero-visual.is-active .hero-scene-bg { opacity: 1; } /* Mobil: samme 1 sekund delay, men mindre figur */ @media (max-width: 940px) { .hero-scene-figure-wrap { width: min(62%, 330px); max-height: 46svh; transform: translateX(-50%) translateY(110%); transition-delay: 0s; } .visual-panel.is-active .hero-scene-figure-wrap, .hero-visual.is-active .hero-scene-figure-wrap { transform: translateX(-50%) translateY(0); transition-delay: 1s; } .hero-scene-figure { max-height: 46svh; } .hero-scene-bg { inset: -2%; transform: scale(1.03); } } @media (max-width: 620px) { .hero-scene-figure-wrap { width: min(70%, 300px); } } /* === Loader screen: Batman-agtig zoom ind/ud === */ .page-loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: #110F18; pointer-events: auto; opacity: 1; visibility: visible; transition: opacity .45s ease, visibility .45s ease; } .page-loader img { width: 300px; height: 300px; object-fit: contain; transform: scale(0); animation: loaderBatmanZoom 1.65s cubic-bezier(.2, .82, .2, 1) forwards; filter: drop-shadow(0 28px 50px rgba(0,0,0,.28)); } .page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } body.is-loading { overflow: hidden; } @keyframes loaderBatmanZoom { 0% { transform: scale(0) rotate(-3deg); opacity: 0; } 45% { transform: scale(1.08) rotate(0deg); opacity: 1; } 62% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(0) rotate(3deg); opacity: 0; } } @media (max-width: 620px) { .page-loader img { width: 220px; height: 220px; } } /* === Vinker-link i sektionen Kort fortalt === */ .intro-section { position: relative; } .intro-wave-link { --intro-wave-peek: 50px; --intro-wave-hover-shift: 50px; position: absolute; right: calc(-1 * var(--intro-wave-peek)); top: clamp(28px, 5.4vw, 82px); z-index: 6; display: block; width: clamp(180px, 17vw, 330px); opacity: 0; transform: translateX(calc(100% + var(--intro-wave-peek))); filter: drop-shadow(0 24px 42px rgba(17, 15, 24, .24)); will-change: transform, opacity; transition: transform .34s var(--ease), opacity .55s ease, filter .28s ease; } .intro-wave-link.is-visible { opacity: 1; transform: translateX(0); } .intro-wave-link.is-visible:hover, .intro-wave-link.is-visible:focus-visible { transform: translateX(calc(-1 * var(--intro-wave-hover-shift))); } .intro-wave-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 7px; } .intro-wave-link img { display: block; width: 100%; height: auto; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .intro-wave-link { opacity: 1; transform: translateX(0); } .intro-wave-link.is-visible:hover, .intro-wave-link.is-visible:focus-visible { transform: translateX(-50px); } } @media (max-width: 940px) { .intro-wave-link { width: clamp(130px, 24vw, 210px); top: auto; bottom: 22px; } } @media (max-width: 620px) { .intro-wave-link { width: clamp(110px, 34vw, 170px); top: auto; bottom: 18px; } } /* === Universal includes + mobile burger-only header v9 === */ .include-mount { display: contents; } .site-header { will-change: background, backdrop-filter, border-color; } @media (min-width: 941px) { .site-header.is-scrolled, .site-header.is-menu-open { background: rgba(17, 15, 24, .22); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .site-header .site-nav { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); } .site-header.is-scrolled .site-nav, body.nav-open .site-header .site-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle { display: none !important; } } @media (max-width: 940px) { /* Mobil: ingen logo, ingen glass-header. Kun burger-knappen. */ .site-header, .site-header.is-scrolled, .site-header.is-menu-open { position: static !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; } .site-header .brand, .site-header .codepusher-brand, .site-header .brand-main, .site-header .brand-code { display: none !important; } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; z-index: 4002 !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; border: 0 !important; border-radius: 50% !important; background: #ffffff !important; color: #DD1339 !important; box-shadow: 0 14px 38px rgba(17, 15, 24, .18) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } .site-header .site-nav, .site-header.is-scrolled .site-nav { position: fixed !important; inset: 0 !important; z-index: 4000 !important; width: 100vw !important; height: 100vh !important; height: 100svh !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 34px !important; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px) !important; background: #DD1339 !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; transform: translate3d(110%, 0, 0) !important; transition: transform .62s cubic-bezier(.19, 1, .22, 1) !important; } body.nav-open .site-header .site-nav, .site-header.is-menu-open .site-nav, .site-header .site-nav.is-open { pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; } } /* === v10: mobil-hero, off-canvas overflow og page-turn fix === */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } body { overscroll-behavior-x: none; } main, .hero-cycle, .hero-sticky, .hero-grid, .page-section, .snap-section, .site-footer { max-width: 100%; } .hero-step, .snap-section, .page-section, .site-footer { scroll-snap-align: start; scroll-snap-stop: always; } .hero-cycle { scroll-snap-align: start; scroll-snap-stop: always; } .page-section { min-height: 100vh; min-height: 100svh; } body.nav-open { overflow: hidden; touch-action: none; } @supports (overflow: clip) { html, body { overflow-x: clip; } } /* Skjul elementer der animerer ind fra siden, så de ikke skaber vandret scroll. */ .intro-section, .customers-section, .projects-section, .contact-section, .site-footer { overflow-x: clip; } @media (max-width: 940px) { html { scroll-snap-type: y mandatory !important; } body { position: relative; overflow-x: hidden !important; } .site-header, .site-header.is-scrolled, .site-header.is-menu-open { position: fixed !important; inset: 0 0 auto auto !important; width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; } .site-header .brand, .site-header .codepusher-brand, .site-header .brand-main, .site-header .brand-code { display: none !important; } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; z-index: 5002 !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; border: 0 !important; border-radius: 50% !important; background: #ffffff !important; color: #DD1339 !important; box-shadow: 0 14px 38px rgba(17, 15, 24, .18) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } .site-header .site-nav, .site-header.is-scrolled .site-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; z-index: 5000 !important; width: 100vw !important; width: 100dvw !important; max-width: 100vw !important; max-width: 100dvw !important; height: 100vh !important; height: 100svh !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 34px !important; margin: 0 !important; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px) !important; border-radius: 0 !important; background: #DD1339 !important; color: #ffffff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; visibility: hidden !important; pointer-events: none !important; overflow-x: hidden !important; overflow-y: auto !important; transform: translate3d(100%, 0, 0) !important; transition: transform .42s var(--ease), visibility 0s linear .42s !important; contain: paint; } body.nav-open .site-header .site-nav, .site-header.is-menu-open .site-nav, .site-header .site-nav.is-open { visibility: visible !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; transition: transform .42s var(--ease), visibility 0s linear 0s !important; } .site-nav .mobile-menu-links { display: grid !important; align-content: center !important; gap: clamp(10px, 2.2svh, 18px) !important; } .site-nav a { width: fit-content !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; color: #ffffff !important; opacity: 1 !important; font-size: clamp(2.1rem, 10.5vw, 5.5rem) !important; line-height: .9 !important; letter-spacing: -0.075em !important; font-weight: 800 !important; overflow-wrap: anywhere; } .mobile-menu-contact { display: grid !important; } .hero-cycle { height: calc(var(--slide-count, 3) * 100vh) !important; height: calc(var(--slide-count, 3) * 100svh) !important; overflow-x: hidden !important; } .hero-sticky { height: 100vh !important; height: 100svh !important; overflow: hidden !important; } .hero-grid { width: 100% !important; height: 100vh !important; height: 100svh !important; min-height: 100svh !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 55svh) minmax(0, 45svh) !important; grid-template-areas: "copy" "visual" !important; overflow: hidden !important; } .copy-track { grid-area: copy !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .visual-track { grid-area: visual !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; border: 0 !important; } .copy-panel { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: clamp(72px, 10svh, 96px) 18px 24px !important; display: grid !important; place-items: center !important; align-content: center !important; justify-content: center !important; text-align: center !important; overflow: hidden !important; } .copy-inner, .centered-copy { width: min(100%, 620px) !important; max-width: 94vw !important; } .eyebrow, .section-kicker { margin-bottom: 10px !important; } .copy-panel h1, .copy-panel h2 { max-width: 100% !important; font-size: clamp(2rem, 10.8vw, 4.3rem) !important; line-height: .95 !important; letter-spacing: -0.078em !important; } .lead { max-width: 92vw !important; margin-top: 14px !important; font-size: clamp(.98rem, 3.85vw, 1.25rem) !important; line-height: 1.16 !important; } .panel-actions { margin-top: 18px !important; } .button { min-height: 44px !important; padding: 11px 17px !important; } .hero-visual, .hero-scene { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } .hero-scene-bg { inset: -2% !important; background-position: center bottom !important; transform: scale(1.03) !important; } .hero-scene-figure-wrap { left: 50% !important; bottom: 0 !important; width: min(76vw, 350px) !important; max-height: 45svh !important; transform: translateX(-50%) translateY(110%) !important; } .visual-panel.is-active .hero-scene-figure-wrap, .hero-visual.is-active .hero-scene-figure-wrap { transform: translateX(-50%) translateY(0) !important; } .hero-scene-figure { width: 100% !important; height: auto !important; max-height: 45svh !important; object-fit: contain !important; object-position: center bottom !important; margin-bottom: -18px !important; transform: none !important; } .hero-controls { top: auto !important; right: 18px !important; bottom: calc(45svh + 14px) !important; transform: none !important; display: flex !important; gap: 8px !important; } .hero-controls button { width: 44px !important; height: 3px !important; } .hero-controls span { transform: scaleX(.28) !important; transform-origin: left !important; } .hero-controls button.is-active span { transform: scaleX(1) !important; } } @media (max-width: 620px) { html { scroll-snap-type: y mandatory !important; } .hero-grid { grid-template-rows: minmax(0, 58svh) minmax(0, 42svh) !important; } .copy-panel { padding: clamp(70px, 10svh, 88px) 16px 20px !important; } .copy-panel h1, .copy-panel h2 { font-size: clamp(1.86rem, 10.6vw, 3.8rem) !important; } .lead { font-size: clamp(.94rem, 3.75vw, 1.1rem) !important; } .hero-scene-figure-wrap { width: min(78vw, 300px) !important; max-height: 42svh !important; } .hero-scene-figure { max-height: 42svh !important; margin-bottom: -14px !important; } .hero-controls { bottom: calc(42svh + 12px) !important; } } /* === v11 fixes: mobile menu + mobile hero slide visibility === */ @media (max-width: 940px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } body.nav-open { overflow: hidden !important; touch-action: none; } /* Mobil: kun burger-knappen. Headeren må ikke lave glass-bar eller logo. */ .site-header, .site-header.is-scrolled, .site-header.is-menu-open { position: fixed !important; inset: 0 0 auto auto !important; width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-header .brand, .site-header .codepusher-brand, .site-header .brand-main, .site-header .brand-code { display: none !important; } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; z-index: 9002 !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Menuen ligger ikke længere fysisk ude til højre, så man kan ikke scrolle ud og se den. */ .site-nav, .site-header .site-nav, .site-header.is-scrolled .site-nav { position: fixed !important; inset: 0 !important; z-index: 9000 !important; width: 100vw !important; width: 100dvw !important; max-width: 100vw !important; height: 100vh !important; height: 100svh !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 34px !important; margin: 0 !important; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px) !important; border-radius: 0 !important; background: #DD1339 !important; color: #ffffff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow-x: hidden !important; overflow-y: auto !important; transform: none !important; clip-path: inset(0 0 0 100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: clip-path .42s var(--ease), opacity .22s ease, visibility 0s linear .42s !important; } body.nav-open .site-nav, body.nav-open .site-header .site-nav, .site-nav.is-open, .site-header .site-nav.is-open, .site-header.is-menu-open .site-nav { clip-path: inset(0 0 0 0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition: clip-path .42s var(--ease), opacity .22s ease, visibility 0s linear 0s !important; } .site-nav .mobile-menu-links { display: grid !important; align-content: center !important; gap: clamp(10px, 2.2svh, 18px) !important; } .site-nav a { width: fit-content !important; max-width: 100% !important; color: #ffffff !important; opacity: 1 !important; overflow-wrap: anywhere; } .mobile-menu-contact { display: grid !important; } /* Mobil-hero: inline transforms fra JS må ikke flytte tekstpanelerne ud af den lille mobil-copy-række. */ .copy-track .copy-panel, .visual-track .visual-panel { transform: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .24s ease, visibility 0s linear .24s !important; } .copy-track .copy-panel.is-active, .visual-track .visual-panel.is-active { transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: opacity .24s ease, visibility 0s linear 0s !important; } .hero-grid { grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 58svh) minmax(0, 42svh) !important; grid-template-areas: "copy" "visual" !important; } .copy-track { grid-area: copy !important; overflow: hidden !important; } .visual-track { grid-area: visual !important; overflow: hidden !important; } .copy-panel { padding: clamp(70px, 10svh, 88px) 16px 20px !important; } .copy-panel h1, .copy-panel h2 { font-size: clamp(1.86rem, 10.4vw, 3.8rem) !important; line-height: .95 !important; } .copy-panel .lead { font-size: clamp(.94rem, 3.72vw, 1.1rem) !important; line-height: 1.16 !important; } .hero-controls { z-index: 20 !important; bottom: calc(42svh + 12px) !important; } } /* === v12 hard fixes: mobilmenu + mobil hero slides === */ html, body { max-width: 100% !important; overflow-x: hidden !important; } @supports (overflow: clip) { html, body { overflow-x: clip !important; } } @media (max-width: 940px) { /* Headeren må ikke være en synlig/glass bar på mobil. Kun burgeren vises. */ .site-header, .site-header.is-scrolled, .site-header.is-menu-open { position: fixed !important; inset: 0 0 auto auto !important; z-index: 9001 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; } .site-header .brand, .site-header .codepusher-brand, .site-header .brand-main, .site-header .brand-code { display: none !important; } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle, [data-nav-toggle] { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; z-index: 10002 !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #ffffff !important; color: #DD1339 !important; box-shadow: 0 14px 38px rgba(17, 15, 24, .18) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } [data-nav-toggle] span { grid-area: 1 / 1 !important; display: block !important; width: 20px !important; height: 2px !important; border-radius: 999px !important; background: currentColor !important; } [data-nav-toggle] span:first-child { transform: translateY(-4px) !important; } [data-nav-toggle] span:last-child { transform: translateY(4px) !important; } body.nav-open [data-nav-toggle] span:first-child { transform: rotate(45deg) !important; } body.nav-open [data-nav-toggle] span:last-child { transform: rotate(-45deg) !important; } /* Lukket mobilmenu: display none, så den hverken kan ses eller skabe vandret scroll. */ .site-nav, .site-header .site-nav, .site-header.is-scrolled .site-nav, .site-header.is-menu-open .site-nav { position: fixed !important; inset: 0 !important; z-index: 10000 !important; width: 100vw !important; width: 100dvw !important; max-width: 100vw !important; height: 100vh !important; height: 100svh !important; margin: 0 !important; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px) !important; border: 0 !important; border-radius: 0 !important; background: #DD1339 !important; color: #ffffff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow-x: hidden !important; overflow-y: auto !important; transform: none !important; clip-path: none !important; display: none !important; } body.nav-open .site-nav, body.nav-open .site-header .site-nav, body.nav-open .site-header.is-scrolled .site-nav, .site-nav.is-open, .site-header .site-nav.is-open, .site-header.is-menu-open .site-nav { display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 34px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.nav-open { overflow: hidden !important; touch-action: none !important; } .site-nav .mobile-menu-links { display: grid !important; align-content: center !important; gap: clamp(10px, 2.2svh, 18px) !important; } .site-nav a { display: inline-block !important; width: fit-content !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; color: #ffffff !important; opacity: 1 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(2.1rem, 10.5vw, 5.5rem) !important; line-height: .9 !important; letter-spacing: -0.075em !important; font-weight: 800 !important; overflow-wrap: anywhere !important; } .mobile-menu-contact { display: grid !important; gap: 16px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,.32) !important; } .mobile-menu-contact p { margin: 0 !important; display: grid !important; gap: 4px !important; } .mobile-menu-contact span { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: .82rem !important; color: rgba(255,255,255,.72) !important; } /* Mobil-hero: sektion 2 og 3 vises med aktiv slide i stedet for transform-positioner. */ .hero-cycle, .hero-sticky, .hero-grid { overflow: hidden !important; } .hero-grid { width: 100% !important; height: 100vh !important; height: 100svh !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 58svh) minmax(0, 42svh) !important; grid-template-areas: "copy" "visual" !important; } .copy-track, .visual-track { position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } .copy-track { grid-area: copy !important; } .visual-track { grid-area: visual !important; } .copy-track .copy-panel, .visual-track .visual-panel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 0 !important; } .copy-track .copy-panel { display: grid !important; place-items: center !important; align-content: center !important; padding: clamp(70px, 10svh, 88px) 16px 20px !important; text-align: center !important; } .visual-track .visual-panel { display: block !important; } .copy-track .copy-panel.is-active, .visual-track .visual-panel.is-active, .hero-cycle[data-active-slide="0"] .copy-track .copy-panel[data-copy-slide="0"], .hero-cycle[data-active-slide="1"] .copy-track .copy-panel[data-copy-slide="1"], .hero-cycle[data-active-slide="2"] .copy-track .copy-panel[data-copy-slide="2"], .hero-cycle[data-active-slide="0"] .visual-track .visual-panel[data-visual-slide="0"], .hero-cycle[data-active-slide="1"] .visual-track .visual-panel[data-visual-slide="1"], .hero-cycle[data-active-slide="2"] .visual-track .visual-panel[data-visual-slide="2"] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 2 !important; transform: none !important; } .copy-panel .copy-inner { width: min(100%, 620px) !important; max-width: 620px !important; } .copy-panel h1, .copy-panel h2 { font-size: clamp(1.86rem, 10.4vw, 3.8rem) !important; line-height: .95 !important; letter-spacing: -0.078em !important; } .copy-panel .lead { max-width: 92vw !important; margin-top: 14px !important; font-size: clamp(.94rem, 3.72vw, 1.1rem) !important; line-height: 1.16 !important; } .copy-panel .panel-actions { margin-top: 18px !important; } .hero-scene, .hero-scene-bg { width: 100% !important; height: 100% !important; } .hero-scene-figure-wrap { width: min(78vw, 300px) !important; max-height: 42svh !important; } .hero-scene-figure { max-height: 42svh !important; margin-bottom: -14px !important; } .hero-controls { z-index: 30 !important; bottom: calc(42svh + 12px) !important; } } @media (max-width: 620px) { .hero-grid { grid-template-rows: minmax(0, 58svh) minmax(0, 42svh) !important; } .copy-panel { padding-top: clamp(68px, 9svh, 82px) !important; } .copy-panel h1, .copy-panel h2 { font-size: clamp(1.72rem, 10.2vw, 3.35rem) !important; } } /* === codepusher v14: sticky hero + mobilmenu fix === * Problem: tidligere mobilregler satte overflow:hidden på .hero-cycle. * Det bryder position:sticky i heroen, så slide 2 og 3 scroller ud af viewport. */ @media (max-width: 940px) { body { overflow-x: hidden !important; } .hero-cycle { position: relative !important; height: calc(var(--slide-count, 3) * 100vh) !important; height: calc(var(--slide-count, 3) * 100svh) !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } .hero-sticky { position: sticky !important; top: 0 !important; height: 100vh !important; height: 100svh !important; overflow: hidden !important; } .hero-scroll-spacer { margin-top: -100vh !important; margin-top: -100svh !important; height: calc(var(--slide-count, 3) * 100vh) !important; height: calc(var(--slide-count, 3) * 100svh) !important; } .hero-grid { width: 100% !important; height: 100vh !important; height: 100svh !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 58svh) minmax(0, 42svh) !important; grid-template-areas: "copy" "visual" !important; overflow: hidden !important; } .copy-track, .visual-track { position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } .copy-track { grid-area: copy !important; } .visual-track { grid-area: visual !important; border: 0 !important; } .copy-track .copy-panel, .visual-track .visual-panel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 0 !important; transition: opacity .24s ease, visibility 0s linear .24s !important; } .copy-track .copy-panel.is-active, .visual-track .visual-panel.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 2 !important; transform: none !important; transition: opacity .24s ease, visibility 0s linear 0s !important; } .copy-track .copy-panel { display: grid !important; place-items: center !important; align-content: center !important; padding: clamp(70px, 10svh, 88px) 16px 20px !important; text-align: center !important; } .visual-track .visual-panel { display: grid !important; } .hero-controls { top: calc(58svh - 18px) !important; right: 18px !important; bottom: auto !important; transform: translateY(-100%) !important; display: flex !important; gap: 8px !important; z-index: 20 !important; } .hero-controls button { width: 44px !important; height: 3px !important; } .hero-controls span { transform: scaleX(.28) !important; transform-origin: left !important; } .hero-controls button.is-active span { transform: scaleX(1) !important; } /* Mobilmenu: CSS styrer animationen. JS må kun skifte body.nav-open / .is-open. */ .site-header { height: 74px !important; align-items: center !important; pointer-events: none !important; } .site-header > * { pointer-events: auto !important; } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle, [data-nav-toggle] { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; z-index: 10002 !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #ffffff !important; color: #DD1339 !important; box-shadow: 0 14px 38px rgba(17, 15, 24, .18) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } [data-nav-toggle] span { grid-area: 1 / 1 !important; display: block !important; width: 20px !important; height: 2px !important; border-radius: 999px !important; background: currentColor !important; transition: transform .22s ease !important; } [data-nav-toggle] span:first-child { transform: translateY(-4px) !important; } [data-nav-toggle] span:last-child { transform: translateY(4px) !important; } body.nav-open [data-nav-toggle] span:first-child, [data-nav-toggle][aria-expanded="true"] span:first-child { transform: rotate(45deg) !important; } body.nav-open [data-nav-toggle] span:last-child, [data-nav-toggle][aria-expanded="true"] span:last-child { transform: rotate(-45deg) !important; } .site-nav, .site-header .site-nav, .site-header.is-scrolled .site-nav, .site-header.is-menu-open .site-nav { position: fixed !important; inset: 0 !important; z-index: 10000 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 34px !important; width: 100vw !important; width: 100dvw !important; max-width: 100vw !important; height: 100vh !important; height: 100svh !important; margin: 0 !important; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px) !important; border: 0 !important; border-radius: 0 !important; background: #DD1339 !important; color: #ffffff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; visibility: hidden !important; pointer-events: none !important; overflow-x: hidden !important; overflow-y: auto !important; transform: translate3d(100%, 0, 0) !important; transition: transform .46s cubic-bezier(.19, 1, .22, 1), visibility 0s linear .46s !important; will-change: transform !important; } body.nav-open .site-nav, body.nav-open .site-header .site-nav, body.nav-open .site-header.is-scrolled .site-nav, .site-nav.is-open, .site-header .site-nav.is-open, .site-header.is-menu-open .site-nav { visibility: visible !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; transition: transform .46s cubic-bezier(.19, 1, .22, 1), visibility 0s linear 0s !important; } body.nav-open { overflow: hidden !important; touch-action: none !important; } .site-nav .mobile-menu-links { display: grid !important; align-content: center !important; gap: clamp(10px, 2.2svh, 18px) !important; } .site-nav a { display: inline-block !important; width: fit-content !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; color: #ffffff !important; opacity: 1 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(2.1rem, 10.5vw, 5.5rem) !important; line-height: .9 !important; letter-spacing: -0.075em !important; font-weight: 800 !important; overflow-wrap: anywhere !important; } .mobile-menu-contact { display: grid !important; gap: 16px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,.32) !important; } .mobile-menu-contact p { margin: 0 !important; display: grid !important; gap: 4px !important; } .mobile-menu-contact span { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: .82rem !important; color: rgba(255,255,255,.72) !important; } } /* === codepusher v14.1: root overflow fix for sticky on mobile === * Root/body overflow-x:hidden/clip changes the computed vertical overflow to auto in Chrome, * which makes sticky hero sections scroll away. Keep root overflow visible; off-canvas menu * uses transform and does not need root clipping. */ @media (max-width: 940px) { html, body { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } body.nav-open { overflow: hidden !important; touch-action: none !important; } .hero-cycle { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } } /* === codepusher v15: ekstra mobilmenu-safety === */ @media (max-width: 940px) { body:has([data-nav-toggle][aria-expanded="true"]) .site-nav { visibility: visible !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; } } /* === codepusher v16: CSS-only mobilmenu fallback === * Menuen kan nu åbne uden JavaScript via checkbox + label. * JS bruges kun til aria-sync og til at lukke menuen ved linkklik/Escape. */ .nav-state { position: fixed !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important; } @media (max-width: 940px) { .site-header { z-index: 2147483000 !important; pointer-events: none !important; } .site-header > * { pointer-events: auto !important; } .site-header .nav-toggle, .site-header.is-scrolled .nav-toggle, body.nav-open .site-header .nav-toggle, html.menu-open .site-header .nav-toggle { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; z-index: 2147483647 !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #ffffff !important; color: #DD1339 !important; box-shadow: 0 14px 38px rgba(17, 15, 24, .18) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; cursor: pointer !important; } .site-header .nav-toggle span { grid-area: 1 / 1 !important; display: block !important; width: 20px !important; height: 2px !important; margin: 0 !important; border-radius: 999px !important; background: currentColor !important; transition: transform .22s ease !important; } .site-header .nav-toggle span:first-child { transform: translateY(-4px) !important; } .site-header .nav-toggle span:last-child { transform: translateY(4px) !important; } .site-header .nav-state:checked + .nav-toggle span:first-child, body.nav-open .site-header .nav-toggle span:first-child, html.menu-open .site-header .nav-toggle span:first-child, .site-header .nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg) !important; } .site-header .nav-state:checked + .nav-toggle span:last-child, body.nav-open .site-header .nav-toggle span:last-child, html.menu-open .site-header .nav-toggle span:last-child, .site-header .nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg) !important; } .site-header .site-nav, .site-header.is-scrolled .site-nav, .site-nav { position: fixed !important; inset: 0 !important; z-index: 2147483600 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 34px !important; width: 100vw !important; width: 100dvw !important; max-width: 100vw !important; height: 100vh !important; height: 100svh !important; margin: 0 !important; padding: clamp(92px, 14svh, 132px) clamp(24px, 7vw, 54px) clamp(30px, 7vw, 54px) !important; border: 0 !important; border-radius: 0 !important; background: #DD1339 !important; color: #ffffff !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; overflow-x: hidden !important; overflow-y: auto !important; transform: translate3d(100%, 0, 0) !important; transition: transform .46s cubic-bezier(.19, 1, .22, 1) !important; will-change: transform !important; } .site-header .nav-state:checked ~ .site-nav, body.nav-open .site-header .site-nav, html.menu-open .site-header .site-nav, .site-header.is-menu-open .site-nav, .site-header .site-nav.is-open, body:has(.nav-state:checked) .site-nav { pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; } body:has(.nav-state:checked), body.nav-open, html.menu-open body { overflow: hidden !important; touch-action: none !important; } .site-nav .mobile-menu-links { display: grid !important; align-content: center !important; gap: clamp(10px, 2.2svh, 18px) !important; } .site-nav a { display: inline-block !important; width: fit-content !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; color: #ffffff !important; opacity: 1 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(2.1rem, 10.5vw, 5.5rem) !important; line-height: .9 !important; letter-spacing: -0.075em !important; font-weight: 800 !important; text-align: left !important; overflow-wrap: anywhere !important; } .mobile-menu-contact { display: grid !important; gap: 16px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,.32) !important; } .mobile-menu-contact p { margin: 0 !important; display: grid !important; gap: 4px !important; } .mobile-menu-contact span { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: .82rem !important; color: rgba(255,255,255,.72) !important; } .mobile-menu-contact a { font-size: clamp(1.35rem, 5.4vw, 2.3rem) !important; line-height: 1.05 !important; letter-spacing: -0.045em !important; } } /* === codepusher v17: mobilmenu kopieret fra den fungerende webdesign-side === * Brug en rigtig