og footeren — som daekker alt, hvad man rent faktisk ser, saa selve siden er uaendret. */ html.theme-hero-dark, html.theme-hero-dark body { background: #030303; } html.theme-hero-dark main { background: var(--surface); padding-bottom: 0; } html.theme-hero-dark:has(.page-pricing) main, html.theme-hero-dark:has(.page-contact) main, html.theme-hero-dark:has(.page-about) main, html.theme-hero-dark:has(.page-services) main, html.theme-hero-dark:has(.page-service-detail) main, html.theme-hero-dark:has(.page-portfolio) main { background: #030303; } /* Footeren er selv sort nu, og html/body er sorte i forvejen, saa rubber-band-feltet i bunden matcher pladen uden hjaelp. Den fastgjorte hvide plade der foer holdt undersiden hvid er derfor fjernet — den ville lyse op under den moerke footer. */ html.theme-hero-dark .footer { margin-top: 0; } body { margin: 0; font-family: var(--font-display); font-variation-settings: "slnt" 0; font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--surface); } /* ===== Typografiske roller ===== Alt arver --font-display fra body. Herunder ligger "sub"-registret: den lille, tekniske tekst der omkranser overskrifterne — kickers, labels, tags, undertekster, meta. Det er det eneste sted --font-mono bruges, saa kontrasten mellem titel og sub bliver et bevidst signal og ikke stoej. Mono-glyffer er bredere end sans, saa sporingen trimmes en anelse. */ .section-title, .trusted-marquee-band__label, .stat-label, .timeline-year, .pf-carousel__tag, .svc-showcase__kicker, .svc-hl__kicker, .mkt-hl__kicker, .svc-tile__tag, .tag, .badge, .form-group label, .footer, .page-headline, .pf-headline-sub, .pf-highlights__lede, .mkt-hl__desc-body, .sf-folder__count, .sf-folder__hint, .sub-hero .lede, .hero-immersive__sub, .pcard__feat-label, .pcard__badge, .pcard__split span { font-family: var(--font-mono); } /* Knapper og formularfelter arver ikke font-family fra body — UA-stylesheettet giver dem systemfonten. Uden det her rendrer bl.a. mobilmenuens knap og lightboxens piletaster i Arial midt i resten af siden. */ button, input, select, textarea, optgroup { font-family: inherit; } /* Kode-elementer hoerer til mono-registret, ikke browserens generiske monospace. */ code, kbd, samp, pre { font-family: var(--font-mono); } h1, h2, h3, h4, h5, h6 { line-height: 1.14; } h3, h4, h5, h6 { /* Mindre overskrifter braekker oftere over to linjer i smalle kort; 1.14 bliver for klemt i den skala. */ line-height: 1.25; } h1, h2 { letter-spacing: -0.03em; } /* Loebende sub-tekst i mono: lidt strammere sporing og luftigere linjer, ellers bliver den bred og hakket i laengere saetninger. */ .hero-immersive__sub, .pf-headline-sub, .pf-highlights__lede, .mkt-hl__desc-body, .sub-hero .lede, .page-headline { letter-spacing: -0.015em; } img { max-width: 100%; height: auto; display: block; vertical-align: middle; } a { color: var(--orange); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } /* Nav */ .site-header { /* Slanten låses også her: navbaren må aldrig rendere kursivt, heller ikke hvis en forfædre-regel en dag sætter font-variation-settings om. */ font-family: var(--font-display); font-style: normal; font-variation-settings: "slnt" 0; position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* space-between centrerer kun midterlinkene hvis logo og Kontakt os er lige brede — det er de ikke. Tre grid-kolonner med 1fr i hver side lægger midterkolonnen præcis midt i navbaren uanset sidernes bredde. Kun desktop; mobilmenuen har en fjerde knap (menu-toggle) og bliver i flex. */ @media (min-width: 861px) { .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; } /* start/end holder logo og CTA i deres egen bredde — som grid-items ville de ellers strække sig ud over hele 1fr-kolonnen og gøre klikfladen større. */ .nav-inner > .logo { justify-self: start; } .nav-inner > .nav-cta { justify-self: end; } } .logo { /* Basisfarven bor i en variabel, så hero-navbarens hvide logo kan genbruge den samme hover-gradient uden at duplikere den. */ --logo-base: var(--ink); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--logo-base); letter-spacing: -0.02em; } .logo:hover { text-decoration: none; color: var(--orange); } /* Hover-wipe: gradienten er meget bredere end ordet og klippes til bogstaverne. I hvile står den skudt helt til højre (kun basisfarve synlig); på hover glider den til venstre, så orange løber ind over teksten. Vinklen (145deg) gør kanten kraftigt diagonal — ~55° fra lodret — så farven rammer øverste venstre hjørne først og flyder skråt ned og ud over resten af ordet. Bredden er 340% og ikke 300%: jo skråere kanten er, jo mere af den stikker ind i det synlige udsnit, og den ekstra luft holder hvile- og hover-enden rene (ingen orange stribe i toppen når musen er ude). @supports-hegnet sikrer at teksten ikke bliver usynlig i browsere uden background-clip: text — der falder den tilbage på det simple farveskift. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .logo { background-image: linear-gradient( 145deg, var(--orange) 0%, var(--orange) 42%, var(--logo-base) 58%, var(--logo-base) 100% ); background-size: 340% 100%; background-position: 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .logo:hover, .logo:focus-visible { background-position: 0 0; } @media (prefers-reduced-motion: reduce) { .logo { transition: none; } } } .nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .nav-links a, .nav-cta { color: var(--muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; } /* a:hover (0,1,1) sætter underline globalt og slår den bare .nav-cta-klasse (0,1,0) — derfor fik kun "Kontakt os" en streg under teksten på hover. :hover-varianten her vejer (0,2,0) og lukker den for begge. */ .nav-links a:hover, .nav-cta:hover { color: var(--orange); text-decoration: none; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.25rem; font-family: inherit; font-weight: 600; font-size: 0.9375rem; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--orange); color: #fff; } .btn-primary:hover { background: var(--orange-hover); text-decoration: none; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--orange-border); color: var(--orange); text-decoration: none; } /* Glass CTA — header (Figma: Glass Buttons, node 105:14) */ .btn-glass { /* Nuancer fra heatColor() i hero-ascii.js; den lyse ende er #e6dfce. */ --glass-glow-core: 230, 223, 206; --glass-glow-mid: 192, 187, 174; --glass-glow-edge: 155, 151, 142; --glass-glow-wash: 192, 187, 174; --glass-glow-inset: 211, 205, 190; --glass-glow-base: 230, 223, 206; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 28px; border: 0.5px solid #918f90; border-radius: 74px; background: linear-gradient( 180deg, #1d1c1b 0%, #191718 81.191%, #252120 96.354% ); color: #f1edee; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: normal; white-space: nowrap; text-shadow: 0 0 2px rgba(241, 237, 238, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter 0.18s ease, transform 0.1s ease; } /* Den indre "glas"-kant: alle inset-skygger fra Figma */ .btn-glass::after { content: ""; position: absolute; inset: -0.5px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0.25px 1.25px #262524, inset 3px 5px 2px -4.75px #ffffff, inset 1.25px 1.5px 0 0 rgba(0, 0, 0, 0.75), inset 0 4.75px 0.25px -2.5px #fbfbfb, inset 1px 1px 3px 3px #1a1818, inset 0 -3px 1px 0 rgba(0, 0, 0, 0.5), inset 2.5px -2px 3px 0 rgba(124, 108, 94, 0.75), inset 0 -3px 3px 1px rgba(255, 245, 221, 0.1); } .btn-glass:hover { color: #ffffff; text-decoration: none; } .btn-glass:active { transform: scale(0.98); filter: brightness(0.93); } .btn-glass:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* Indhold ligger over gloss-laget (::before) */ .btn-glass > span { position: relative; z-index: 1; } /* Pilen: 3.5x6 px synligt felt, SVG'en er 9x11.5 px pga. glød-blur */ .btn-glass__icon { position: relative; z-index: 1; flex: 0 0 auto; width: 3.5px; height: 6px; } .btn-glass__icon img { position: absolute; top: -2.75px; left: -2.75px; width: 9px; height: 11.5px; max-width: none; display: block; } /* Orange glas: Figmas lag-stak farve for farve. Hvert inset beholder sit præcise offset/blur/spread fra noden — kun kuløren er drejet, så dybden og den hårfine topstreg læser 1:1 med den mørke variant. Kroppen holdes mørk, som i noden; det orange kommer frem som glød i kant og bund. */ .btn-glass--orange { --glass-glow-core: 255, 158, 60; --glass-glow-mid: 255, 124, 24; --glass-glow-edge: 255, 110, 10; --glass-glow-wash: 255, 116, 20; --glass-glow-inset: 255, 150, 60; --glass-glow-base: 255, 176, 92; border-color: #c07840; background: linear-gradient( 180deg, #6b2905 0%, #571f03 81.191%, #8a3a10 96.354% ); color: #ffffff; text-shadow: 0 0 2px rgba(255, 241, 228, 0.5); } .btn-glass--orange::after { box-shadow: inset 0 0 0.25px 1.25px #4d1e06, inset 3px 5px 2px -4.75px #ffffff, inset 1.25px 1.5px 0 0 rgba(0, 0, 0, 0.7), inset 0 4.75px 0.25px -2.5px #ffeeda, inset 1px 1px 3px 3px #331002, inset 0 -3px 1px 0 rgba(30, 10, 0, 0.55), inset 2.5px -2px 3px 0 rgba(255, 162, 80, 0.8), inset 0 -3px 3px 1px rgba(255, 222, 180, 0.34); } /* Gløden: et lag inde i glasset, ikke omkring det. Det ligger mellem baggrunden og kant-ringen (::after tegnes efter ::before), så kanten forbliver skarp mens kroppen lyser op indefra. Begge varianter deler effekt og overgang; farverne sættes på knappen. Slukket i hvile. */ .btn-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.28s ease; background: /* lyskilden sidder lavt i pillen og bløder opad */ radial-gradient( 78% 135% at 50% 106%, rgba(var(--glass-glow-core), 0.9) 0%, rgba(var(--glass-glow-mid), 0.42) 46%, rgba(var(--glass-glow-edge), 0) 76% ), /* et blødt bloom hen over hele kroppen */ radial-gradient( 95% 170% at 50% 50%, rgba(var(--glass-glow-wash), 0.5) 0%, rgba(var(--glass-glow-wash), 0) 72% ); box-shadow: inset 0 0 12px 2px rgba(var(--glass-glow-inset), 0.5), inset 0 -7px 11px -3px rgba(var(--glass-glow-base), 0.6); } .btn-glass:hover::before { opacity: 1; } /* Hero-CTA: samme glas, bare større — og over ASCII-canvasset */ .btn-glass--hero { z-index: 1; padding: 0.78rem 2.15rem; font-size: 1rem; font-weight: 450; letter-spacing: -0.005em; box-shadow: 0 8px 22px rgba(234, 88, 12, 0.2), 0 3px 10px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; } @media (max-width: 860px) { .btn-glass { gap: 8px; padding: 8px 16px; font-size: 0.875rem; } } .menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.4rem 0.65rem; cursor: pointer; font-size: 1rem; } @media (max-width: 860px) { .menu-toggle { display: block; } .nav-links { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.5rem; background: #fff; border-bottom: 1px solid var(--line); display: none; } .nav-links.is-open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.75rem 1rem; } } /* —— Homepage: dark nav over hero (Grainient-inspireret fuldskærm hero) */ html.theme-hero-dark .site-header--hero { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(5, 5, 5, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } html.theme-hero-dark .site-header--hero .logo { --logo-base: #fff; color: #fff; } html.theme-hero-dark .site-header--hero .logo:hover { color: var(--orange); } /* Alt skrift i hero-navbaren er rent hvidt — den aktive side skelnes udelukkende på vægt (600 mod 300), ikke på farve. Hover løfter et inaktivt link op i samme vægt som det aktive. */ html.theme-hero-dark .site-header--hero .nav-links a, html.theme-hero-dark .site-header--hero .nav-cta { color: #fff; font-weight: 300; } html.theme-hero-dark .site-header--hero .nav-links a:hover, html.theme-hero-dark .site-header--hero .nav-links a[aria-current="page"], html.theme-hero-dark .site-header--hero .nav-cta:hover, html.theme-hero-dark .site-header--hero .nav-cta[aria-current="page"] { color: #fff; font-weight: 600; } /* Fed tekst er bredere end tynd, så et vægtskift på hover ville skubbe nabolinkene. ::before lægger den fede udgave af teksten ind usynligt (height 0), så linket altid er lige så bredt som i vægt 600 — uanset hvilken vægt der faktisk vises. Kun på desktop; mobilmenuen er fuldbredde-blokke og kan ikke skubbe noget. */ @media (min-width: 861px) { html.theme-hero-dark .site-header--hero .nav-links a, html.theme-hero-dark .site-header--hero .nav-cta { display: block; text-align: center; } html.theme-hero-dark .site-header--hero .nav-links a::before, html.theme-hero-dark .site-header--hero .nav-cta::before { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; } } html.theme-hero-dark .site-header--hero .menu-toggle { border-color: rgba(255, 255, 255, 0.22); color: #fff; } @media (max-width: 860px) { html.theme-hero-dark .site-header--hero .nav-links { background: #0c0c0c; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } } /* Sections */ .section { padding: 4rem 0; } .section-muted { background: var(--orange-soft); } .section-label { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.375rem; padding: 0 0.35rem; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--orange); border-radius: 4px; } .section-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } /* Hero (legacy / inner pages) */ .hero { padding-top: 2rem; padding-bottom: 3rem; } .hero h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; max-width: 18ch; margin: 0 0 1rem; } .hero-lede { font-size: 1.125rem; color: var(--muted); max-width: 42ch; margin: 0 0 1.75rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 768px) { .hero-grid { grid-template-columns: 1fr; } } .placeholder-lines { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.25rem; } .ph { height: 0.875rem; border-radius: 4px; background: linear-gradient(90deg, var(--line) 0%, #f5f5f4 100%); } .ph.sm { max-width: 85%; } .ph.md { max-width: 70%; } .hero-visual { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(234, 88, 12, 0.25); } .hero-visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } /* Homepage: fuldskærm mørk hero */ .hero-immersive { position: relative; isolation: isolate; min-height: 100svh; min-height: 100vh; width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background: #030303; padding: clamp(5rem, 10svh, 7rem) 1.5rem clamp(8rem, 18svh, 12rem); overflow: hidden; } .hero-immersive__noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* * ASCII skål-form (browser-sikker polygon): * - høj i siderne * - dyb dip i midten * - matcher referenceformen (halv-cirkel/U-bund) */ .hero-immersive__ascii { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100vw; max-width: 100vw; height: min(70vh, 780px); min-height: 300px; z-index: 1; pointer-events: none; box-sizing: border-box; overflow: visible; mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.12) min(20%, 3rem), rgba(0, 0, 0, 0.5) min(46%, 7rem), #000 min(72%, 12rem), #000 100% ); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.12) min(20%, 3rem), rgba(0, 0, 0, 0.5) min(46%, 7rem), #000 min(72%, 12rem), #000 100% ); animation: none; will-change: auto; } .hero-immersive__ascii canvas { display: block; width: 100%; height: 100%; box-sizing: border-box; } @keyframes asciiBowlFlow { 0% { transform: translateX(-50%) translateY(0px) rotate(0deg) skewX(0deg); } 12% { transform: translateX(calc(-50% + 20px)) translateY(-10px) rotate(0.8deg) skewX(0.9deg); } 24% { transform: translateX(calc(-50% + 12px)) translateY(-20px) rotate(0.35deg) skewX(-0.55deg); } 38% { transform: translateX(calc(-50% - 8px)) translateY(-14px) rotate(-0.45deg) skewX(-0.95deg); } 52% { transform: translateX(calc(-50% - 22px)) translateY(-6px) rotate(-0.85deg) skewX(-0.25deg); } 66% { transform: translateX(calc(-50% - 14px)) translateY(-18px) rotate(-0.4deg) skewX(0.7deg); } 82% { transform: translateX(calc(-50% + 10px)) translateY(-12px) rotate(0.5deg) skewX(0.3deg); } 100% { transform: translateX(-50%) translateY(0px) rotate(0deg) skewX(0deg); } } .hero-immersive__inner { position: relative; z-index: 2; max-width: 44rem; margin-inline: auto; } .hero-immersive__title { margin: 0 0 1.25rem; font-size: clamp(2.35rem, 6.5vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.045em; color: #fafaf9; } .hero-immersive__sub { margin: 0 auto 3.5rem; /* 38ch var maalt paa DM Sans. Mono-glyffer er bredere, saa den samme saetning braekker anderledes — maalet er stadig 3-4 linjer. */ max-width: 46ch; font-size: clamp(0.9375rem, 2vw, 1.0625rem); line-height: 1.65; color: rgba(245, 245, 244, 0.68); font-weight: 400; } .page-home main, .page-pricing main, .page-contact main { padding-top: 0; } /* Trusted by — dark band + marquee (under hero) */ .trusted-marquee-band { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; background: #030303; color: #e7e7e5; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1.35rem 0 1.5rem; } .trusted-marquee-band__head { text-align: center; } .trusted-marquee-band__label { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #a8a29e; } .trusted-marquee { overflow: hidden; } .trusted-marquee--fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; mask-image: linear-gradient( to right, transparent, black 10%, black 90%, transparent ); -webkit-mask-image: linear-gradient( to right, transparent, black 10%, black 90%, transparent ); } .trusted-marquee__track { display: flex; width: max-content; } /* rullen sættes først i gang, når JS har klonet rækken (ellers ender den i et hul) */ .trusted-marquee__track.is-looping { animation: trusted-marquee-x 80s linear infinite; } .trusted-marquee:hover .trusted-marquee__track { animation-play-state: paused; } /* Har JS fat i båndet, kører rullen på transform i stedet: så kan den bremse blødt, trækkes med musen og rulle ud efter et kast. CSS-loopet ovenfor bliver stående som fallback, hvis scriptet aldrig når frem. */ .trusted-marquee.has-drag { cursor: grab; /* lodret sidescroll skal stadig kunne komme igennem på touch */ touch-action: pan-y; } .trusted-marquee.has-drag.is-dragging { cursor: grabbing; } .trusted-marquee.has-drag .trusted-marquee__track { animation: none; will-change: transform; } .trusted-marquee.has-drag .trusted-marquee__item { user-select: none; -webkit-user-select: none; } .trusted-marquee.has-drag .trusted-marquee__logo { -webkit-user-drag: none; } .trusted-marquee__group { display: flex; flex-shrink: 0; align-items: center; gap: clamp(2rem, 5vw, 3.5rem); padding-right: clamp(2rem, 5vw, 3.5rem); } .trusted-marquee__item { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.55rem; } .trusted-marquee__logo { height: var(--logo-h, 1.5rem); width: auto; max-width: 13rem; flex-shrink: 0; object-fit: contain; /* tvinger ethvert logo til flad hvid — virker kun på filer med gennemsigtig baggrund */ filter: brightness(0) invert(1); opacity: 0.92; } .trusted-marquee__name { white-space: nowrap; font-size: clamp(1rem, 2.1vw, 1.35rem); font-weight: 500; letter-spacing: -0.02em; color: rgba(245, 245, 244, 0.92); } /* logoet er selv navnetrækket — navnet bliver kun stående for skærmlæsere */ .trusted-marquee__item--wordmark .trusted-marquee__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); } /* mangler logofilen, falder feltet tilbage til ren tekst */ .trusted-marquee__item.is-logo-missing .trusted-marquee__name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; } @keyframes trusted-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .trusted-marquee--fullbleed { mask-image: none; -webkit-mask-image: none; } /* .is-looping vejer tungere end en ren klasse — den skal nævnes eksplicit, ellers ruller den stille liste alligevel ud af skærmen */ .trusted-marquee__track, .trusted-marquee__track.is-looping { animation: none; flex-wrap: wrap; row-gap: 0.75rem; column-gap: 1.5rem; width: 100%; max-width: 100%; justify-content: flex-start; } .trusted-marquee__group[aria-hidden="true"] { display: none; } .trusted-marquee__name { white-space: normal; } } /* Stats + services */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.5rem; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; text-align: center; } .stat-num { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--orange); line-height: 1.1; } .stat-label { font-size: 0.875rem; color: var(--muted); } @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* Services — dark band, four pillars */ .section-services-dark { background: #000; color: #fafaf9; color-scheme: dark; overflow: visible; } .section-label--on-dark .section-title { color: #fafaf9; } .badge--on-dark { background: rgba(255, 255, 255, 0.12); color: #fafaf9; border: 1px solid rgba(255, 255, 255, 0.2); } .page-headline--on-dark { color: #d6d3d1; } .section-services-dark__head { margin-bottom: 0.75rem; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); padding-inline: clamp(1rem, 4vw, 2.5rem); box-sizing: border-box; display: flex; justify-content: center; text-align: center; } .section-services-dark__head .section-label { justify-content: center; } /* Forsidens kontaktstribe følger mappernes bredde med et tyndt lysspor. */ .home-guidance { --beam: linear-gradient(90deg, transparent, #a84614 12%, #f99042 36%, #fff0d5 54%, #ffb56d 68%, #a84614 88%, transparent); position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: calc(100% - 2 * clamp(1rem, 4vw, 2.5rem)); min-height: 64px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0.5rem clamp(0.25rem, 2vw, 1.5rem); background: linear-gradient(0deg, rgba(234, 88, 12, 0.045), transparent 85%); color: #efebe5; text-decoration: none; } .home-guidance::before, .home-guidance::after { content: ""; position: absolute; inset: auto 0 0; z-index: 0; pointer-events: none; background: var(--beam); } .home-guidance::before { z-index: 1; height: 1px; } .home-guidance::after { /* Hold gløden statisk; kun kontaktteksten skifter farve ved hover. */ bottom: -12px; height: 24px; background: radial-gradient(ellipse at center, rgba(255, 155, 78, 0.24), rgba(238, 102, 29, 0.1) 40%, transparent 72%); } .home-guidance__copy, .home-guidance__cta { position: relative; z-index: 1; } .home-guidance__copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; min-width: 0; font-size: 0.9375rem; line-height: 1.5; } .home-guidance__title { font-weight: 500; letter-spacing: -0.015em; } .home-guidance__text { color: #aaa39b; font-size: 0.875rem; } .home-guidance__cta { display: inline-flex; align-items: center; gap: 0.875rem; flex-shrink: 0; min-height: 44px; color: #f2c7a0; font-size: 0.875rem; white-space: nowrap; transition: color 180ms ease; } .home-guidance__arrow { font-size: 1.125rem; line-height: 1; } .home-guidance:hover { color: #efebe5; text-decoration: none; } .home-guidance:focus-visible .home-guidance__cta { color: #fff0d5; } @media (hover: hover) and (pointer: fine) { .home-guidance:hover .home-guidance__cta { color: #fff0d5; } } .home-guidance:focus-visible { outline: 2px solid #f2c7a0; outline-offset: 6px; } @media (max-width: 720px) { .home-guidance { gap: 1rem; } .home-guidance__copy { font-size: 0.875rem; } .home-guidance__text { display: none; } .home-guidance__cta { gap: 0.625rem; font-size: 0.8125rem; } } @media (prefers-reduced-motion: reduce) { .home-guidance__cta { transition: none; } } /* --- Service-mapper (3D mappe, fan-out, lightbox) --- */ .sf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; justify-items: center; margin-top: 0.5rem; overflow: visible; } .sf-grid--fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; box-sizing: border-box; padding-inline: clamp(1rem, 4vw, 2.5rem); justify-items: stretch; gap: clamp(1rem, 2.2vw, 2rem); margin-top: 0; } @media (max-width: 1100px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sf-grid { grid-template-columns: 1fr; } } .sf-folder { --sf-card: oklch(0.205 0 0); --sf-line: rgba(255, 255, 255, 0.1); --sf-muted: oklch(0.708 0 0); position: relative; /* Brug IKKE z-index:auto+perspective på samme node — ødelægger 3D (alle mapper så forkerte ud). Perspektiv ligger på .sf-folder__stage. */ display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0; width: 100%; max-width: none; min-height: clamp(320px, 38vh, 420px); padding: clamp(2.65rem, 5.5vw, 4rem) clamp(2.35rem, 4.5vw, 3.5rem); border-radius: 1rem; cursor: default; background: var(--sf-card); border: 1px solid var(--sf-line); overflow: visible; transition: box-shadow 0.5s ease-out, border-color 0.5s ease-out; } .sf-folder:hover, .sf-folder:focus-within { /* Kun den aktive kolonne må ligge øverst (senere kolonner i grid maler normalt hen over tidligere), men uden at blande perspektiv ind på samme element. */ z-index: 15; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 25px 50px -12px rgba(234, 88, 12, 0.1); border-color: rgba(255, 255, 255, 0.22); } .sf-folder__glow { position: absolute; inset: 0; border-radius: 1rem; pointer-events: none; /* Radial aksent-highlight på hover */ background: radial-gradient( circle at 50% 70%, rgba(234, 88, 12, 0.22) 0%, rgba(234, 88, 12, 0.06) 35%, transparent 70% ); opacity: 0; transition: opacity 0.5s ease-out; } .sf-folder:hover .sf-folder__glow, .sf-folder:focus-within .sf-folder__glow { opacity: 0.08; } .sf-folder__stage { position: relative; /* Eksport: bag 940×790 — forside-PNG er 736 men boks matcher bag så målestok er ens; grafik bundjusteres */ --sf-folder-w: 132px; --sf-ar-w: 940; --sf-back-h: calc(var(--sf-folder-w) * 790 / var(--sf-ar-w)); --sf-front-h: var(--sf-back-h); --sf-shell-top: calc(50% - var(--sf-back-h) / 2 - 6px); --sf-front-top: calc(50% + var(--sf-back-h) / 2 - var(--sf-front-h) - 6px); /* Lidt ned — justér 6–16 efter smag (skaleret fra 940px reference) */ --sf-front-shift-y: calc(var(--sf-folder-w) * 10 / 940); --sf-front-top-drawn: calc(var(--sf-front-top) + var(--sf-front-shift-y)); /* Papir: næsten fuld bredde; lodret: front-PNG har typisk tom margin øverst — vi retter mod 736px-artboard */ --sf-paper-w: calc(var(--sf-folder-w) * 0.92); --sf-paper-h: calc(var(--sf-back-h) * 0.22); /* top = front-boks-top + indryk (Matcher tegnet lomme) − lip (synlig hvid kant) • Justér --sf-paper-flap-inset-num (0–40): højere = papir længere ned, mindre synligt • Justér --sf-paper-lip-num (0–8): lavere = mindre hvid kant over lommen */ --sf-paper-flap-inset-num: 100; --sf-paper-lip-num: 2; --sf-paper-flap-inset: calc(var(--sf-front-h) * var(--sf-paper-flap-inset-num) / 790); --sf-paper-lip: calc(var(--sf-folder-w) * var(--sf-paper-lip-num) / 940); /* Striber: 18px × 940 i reference — skaleret + minimum så de ses */ --sf-strip-h: max(2.5px, calc(var(--sf-folder-w) * 18 / var(--sf-ar-w))); --sf-strip-shadow: max(1px, calc(var(--sf-folder-w) * 6 / var(--sf-ar-w))); width: 200px; height: 168px; margin-bottom: 1rem; flex-shrink: 0; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 50%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: translateZ(0); /* Egen stacking-context: z-index (8/9/11/30/50) på børn virker konsekvent */ isolation: isolate; } /* Bag: statisk PNG (sf-folder-back). Forside: PNG der roterer med rotateX. */ .sf-folder__shell { position: absolute; left: 50%; top: var(--sf-shell-top); width: var(--sf-folder-w); height: var(--sf-back-h); margin-left: calc(-0.5 * var(--sf-folder-w)); /* Ingen translateZ — blandet Z + preserve-3d gav forkert dybdesortering (papir/låg) */ transform: none; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: bottom center; z-index: 8; pointer-events: none; } .sf-folder:hover .sf-folder__shell, .sf-folder:focus-within .sf-folder__shell { transform: none; } .sf-folder__back-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1)); } .sf-folder__paper { position: absolute; left: 50%; top: calc(var(--sf-front-top-drawn) + var(--sf-paper-flap-inset) - var(--sf-paper-lip)); width: var(--sf-paper-w); height: var(--sf-paper-h); margin-left: calc(-0.5 * var(--sf-paper-w)); z-index: 11; pointer-events: none; box-sizing: border-box; background: #ffffff; border-radius: clamp(5px, calc(var(--sf-folder-w) * 10 / 940), 9px); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95); } .sf-folder__front { position: absolute; left: 50%; top: var(--sf-front-top-drawn); width: var(--sf-folder-w); height: var(--sf-front-h); margin-left: calc(-0.5 * var(--sf-folder-w)); box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; transform-origin: bottom center; transform: rotateX(0deg); transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 30; pointer-events: none; background: transparent; border: none; box-shadow: none; } .sf-folder__front-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; } /* Horisontale “fold” striber (Community-mappe / dit strip-snippet), orange toner */ .sf-folder__strip { position: absolute; left: 0; right: 0; width: 100%; z-index: 1; height: var(--sf-strip-h); background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 calc(-1 * var(--sf-strip-shadow)) var(--sf-strip-shadow) rgba(205, 103, 0, 0.1) inset, 0 var(--sf-strip-shadow) var(--sf-strip-shadow) rgba(205, 103, 0, 0.1); border-radius: 0.5px; pointer-events: none; } /* Afstande ca. som 692px / 729px langs 736px-front i Figmaeksport */ .sf-folder__strip--upper { bottom: calc(var(--sf-front-h) * 0.095); } .sf-folder__strip--lower { bottom: calc(var(--sf-front-h) * 0.038); } .sf-folder__cards { position: absolute; top: 50%; left: 50%; width: 0; height: 0; /* Kun 2D-transform + z-index (ingen translateZ i stacken) — undgår WebKit dybdesortering-bugs. Lukket: under papir (11) og låg (30). Åben: z 50 så kort tegnes over låget. */ z-index: 9; transform: translate3d(-50%, -50%, 0); transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .sf-folder:hover .sf-folder__cards, .sf-folder:focus-within .sf-folder__cards { transform: translate3d(-50%, -50%, 0); z-index: 50; } /* Kort uden aktiv hover fanger ikke klik */ .sf-folder:not(:hover):not(:focus-within) .sf-card { pointer-events: none; } .sf-card { position: absolute; left: -40px; top: -56px; width: 80px; height: 112px; padding: 0; margin: 0; border: 1px solid var(--sf-line); border-radius: 0.5rem; overflow: hidden; cursor: pointer; background: var(--sf-card); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.35); /* rækkefølge: translate → rotate → scale */ transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); opacity: 0; transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; } .sf-card:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; } .sf-card:hover, .sf-card:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 20px 25px -5px rgba(0, 0, 0, 0.5); } .sf-card--i0 { z-index: 10; transition-delay: 0ms, 0ms, 0ms; } .sf-card--i1 { z-index: 9; transition-delay: 80ms, 80ms, 0ms; } .sf-card--i2 { z-index: 8; transition-delay: 160ms, 160ms, 0ms; } .sf-folder:hover .sf-card, .sf-folder:focus-within .sf-card { opacity: 1; } .sf-folder:hover .sf-card--i0, .sf-folder:focus-within .sf-card--i0 { /* Dybde på .sf-folder__cards; kun 2d-fan på selve .sf-card */ transform: translate3d(-55px, -90px, 0) rotate(-12deg) scale(1); } .sf-folder:hover .sf-card--i1, .sf-folder:focus-within .sf-card--i1 { transform: translate3d(0, -90px, 0) rotate(0deg) scale(1); } .sf-folder:hover .sf-card--i2, .sf-folder:focus-within .sf-card--i2 { transform: translate3d(55px, -90px, 0) rotate(12deg) scale(1); } .sf-card.sf-card--picked { opacity: 0 !important; pointer-events: none; } .sf-card img { display: block; width: 100%; height: 100%; object-fit: cover; } .sf-card__cap { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 10px; font-weight: 600; line-height: 1.2; color: #fafaf9; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); pointer-events: none; z-index: 2; } /* Nedre vignet på projektbilleder */ .sf-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(250, 250, 250, 0.45), transparent 55%); pointer-events: none; } /* Som reference: .apps — 200px @ 940px (Websites/Apps); Marketing 180; AI Optimization 125 */ .sf-folder__front-text { position: relative; z-index: 3; box-sizing: border-box; width: 100%; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 clamp(2px, 4%, 8px); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: calc(var(--sf-folder-w) * 200 / 940); line-height: normal; color: #e6773f; text-shadow: 0 calc(var(--sf-folder-w) * 6 / 940) calc(var(--sf-folder-w) * 6 / 940) rgba(255, 255, 255, 0.2); pointer-events: none; } .sf-folder__front-text--marketing { font-size: calc(var(--sf-folder-w) * 180 / 940); } .sf-folder__front-text--ai { font-size: calc(var(--sf-folder-w) * 135 / 940); padding: 0 clamp(1px, 2%, 4px); } .sf-folder:hover .sf-folder__front, .sf-folder:focus-within .sf-folder__front { transform: rotateX(-25deg) translateY(8px); } .sf-folder__title { margin: 1rem 0 0; font-size: 1.125rem; font-weight: 600; color: #fafaf9; letter-spacing: -0.02em; transition: transform 0.3s ease; } .sf-folder:hover .sf-folder__title, .sf-folder:focus-within .sf-folder__title { transform: translateY(4px); } .sf-folder__count { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--sf-muted); transition: opacity 0.3s ease; } .sf-folder:hover .sf-folder__count, .sf-folder:focus-within .sf-folder__count { opacity: 0.7; } .sf-folder__hint { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); margin: 0; font-size: 0.75rem; color: var(--sf-muted); opacity: 0.6; white-space: nowrap; transition: opacity 0.3s ease, transform 0.3s ease; } .sf-folder:hover .sf-folder__hint, .sf-folder:focus-within .sf-folder__hint { opacity: 0; transform: translateX(-50%) translateY(10px); } /* Lightbox */ .sf-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; opacity: 1; transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1); } .sf-lightbox.sf-lightbox--closing { opacity: 0; } .sf-lightbox[hidden] { display: none !important; } .sf-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1); } .sf-lightbox--open .sf-lightbox__backdrop { opacity: 1; } .sf-lightbox--closing .sf-lightbox__backdrop { opacity: 0; } .sf-lightbox__close, .sf-lightbox__prev, .sf-lightbox__next { position: absolute; z-index: 210; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(41, 37, 36, 0.65); color: #d6d3d1; border-radius: 999px; transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease; opacity: 0; font-size: 1.5rem; line-height: 1; } .sf-lightbox--complete .sf-lightbox__close { opacity: 1; transform: translateY(0); top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; } .sf-lightbox--complete .sf-lightbox__prev { opacity: 1; transform: translateX(0); left: 1rem; top: 50%; margin-top: -1.5rem; width: 3rem; height: 3rem; } .sf-lightbox--complete .sf-lightbox__next { opacity: 1; transform: translateX(0); right: 1rem; top: 50%; margin-top: -1.5rem; width: 3rem; height: 3rem; } .sf-lightbox__close:not(:disabled):hover, .sf-lightbox__prev:not(:disabled):hover, .sf-lightbox__next:not(:disabled):hover { background: rgba(68, 64, 60, 0.85); color: #fafaf9; } .sf-lightbox__prev:disabled, .sf-lightbox__next:disabled { opacity: 0 !important; pointer-events: none; } .sf-lightbox__inner { position: relative; z-index: 205; width: 100%; max-width: 48rem; transform-origin: center center; } .sf-lightbox__panel { border-radius: 16px; overflow: hidden; background: #292524; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } .sf-lightbox__viewport { position: relative; overflow: hidden; background: #0c0a09; } .sf-lightbox__track { display: flex; width: 100%; transform: translateX(0); will-change: transform; } .sf-lightbox__slide { flex: 0 0 100%; width: 100%; min-width: 100%; max-height: 70vh; height: auto; object-fit: contain; vertical-align: middle; } .sf-lightbox__vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(41, 37, 36, 0.2), transparent 40%, rgba(41, 37, 36, 0.08)); } .sf-lightbox__chrome { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; } .sf-lightbox__meta { flex: 1; min-width: 0; } .sf-lightbox__chrome.sf-lightbox__chrome--visible { opacity: 1; transform: translateY(0); } .sf-lightbox__title { margin: 0; font-size: 1.125rem; font-weight: 600; color: #fafaf9; letter-spacing: -0.02em; line-height: 1.3; } .sf-lightbox__navrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.25rem; } .sf-lightbox__kbdhint { margin: 0; font-size: 0.875rem; color: #a8a29e; } .sf-lightbox__kbdhint kbd { display: inline-block; padding: 0.1rem 0.35rem; margin: 0 0.1rem; font-size: 0.7rem; font-weight: 600; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.25rem; color: #d6d3d1; } .sf-lightbox__dots { display: flex; align-items: center; gap: 0.35rem; } .sf-lightbox__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.28); cursor: pointer; transition: transform 0.3s ease, background 0.3s ease; } .sf-lightbox__dot.is-active { background: #fafaf9; transform: scale(1.1); } .sf-lightbox__view { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; font-family: inherit; color: #a8a29e; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.5rem; cursor: default; } @media (min-width: 768px) { .sf-lightbox { padding: 2rem; } .sf-lightbox--complete .sf-lightbox__prev { left: 2rem; } .sf-lightbox--complete .sf-lightbox__next { right: 2rem; } } /* Touch / enheder uden hover: samme geometri som hover */ @media (hover: none) { .sf-folder .sf-folder__cards { transform: translate3d(-50%, -50%, 0); z-index: 50; } .sf-folder .sf-card { pointer-events: auto; opacity: 1; } .sf-folder .sf-folder__shell { transform: none; } .sf-folder .sf-folder__front { transform: rotateX(-25deg) translateY(8px); } .sf-folder .sf-card--i0 { transform: translate3d(-55px, -90px, 0) rotate(-12deg) scale(1); } .sf-folder .sf-card--i1 { transform: translate3d(0, -90px, 0) rotate(0deg) scale(1); } .sf-folder .sf-card--i2 { transform: translate3d(55px, -90px, 0) rotate(12deg) scale(1); } .sf-folder .sf-folder__glow { opacity: 0.08; } .sf-folder .sf-folder__title { transform: translateY(4px); } .sf-folder .sf-folder__count { opacity: 0.7; } .sf-folder .sf-folder__hint { opacity: 0; transform: translateX(-50%) translateY(10px); } } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .services-grid { grid-template-columns: 1fr; } } .service-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; background: var(--surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .service-card:hover { border-color: var(--orange-border); box-shadow: 0 8px 24px -12px rgba(234, 88, 12, 0.2); } .service-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--orange-soft); margin-bottom: 0.85rem; } .service-card h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; } .service-card .ph { margin-top: 0.65rem; max-width: 180px; } /* Products */ .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 768px) { .products-grid { grid-template-columns: 1fr; } } .product-card { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--surface); } .product-visual { position: relative; aspect-ratio: 16 / 11; } .product-visual img { width: 100%; height: 100%; object-fit: cover; } .product-body { padding: 1.25rem 1.35rem 1.5rem; } .product-body h3 { margin: 0 0 0.5rem; font-size: 1.1rem; } .product-body .ph { margin-bottom: 0.5rem; } .link-arrow { font-weight: 600; font-size: 0.9375rem; margin-top: 0.75rem; display: inline-block; } /* Portfolio — samme sort som zoom-slut + ydelser-kort (#000), ingen lys kant */ #portfolio.section { padding-top: 0; padding-bottom: 0; background-color: #000000; } .pf-highlights { background: #1d1d1f; color: #f5f5f7; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; --pf-inline: max(1.25rem, calc((100vw - min(92vw, var(--max))) / 2)); --pf-vpad: clamp(1rem, 3vw, 1.5rem); /* Ét «fullscreen»-bånd under sticky nav (som Apple product bands) */ min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; padding-top: clamp(1.35rem, 3.25vw, 2.25rem); padding-bottom: 0; } .pf-highlights__intro { flex-shrink: 0; margin-bottom: var(--pf-vpad); } /* Lodret balance: viewport fylder under intro; rails fjernet (undgå tom “bar”) */ .pf-highlights__viewport { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: var(--pf-vpad); box-sizing: border-box; } .pf-highlights__title { margin: 0 0 0.65rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: #f5f5f7; } .pf-highlights__lede { margin: 0; font-size: 1rem; line-height: 1.55; color: #a1a1a6; max-width: 58ch; } .pf-carousel__strip { display: flex; gap: 24px; flex: 0 0 auto; min-height: 0; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 0; padding-inline: var(--pf-inline); } /* Under JS-scroll: snap dræber easing (hop direkte til næste slide) */ .pf-carousel__strip.pf-carousel__strip--no-snap { scroll-snap-type: none; } .pf-carousel__strip.pf-carousel__strip--no-snap .pf-carousel__slide { scroll-snap-align: none; } .pf-carousel__strip::-webkit-scrollbar { display: none; } .pf-carousel__slide { flex: 0 0 min(92vw, var(--max)); scroll-snap-align: center; min-width: 0; display: flex; flex-direction: column; align-self: stretch; } .pf-carousel__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); align-items: stretch; box-sizing: border-box; width: 100%; flex: none; height: auto; min-height: 0; /* Samme maxbredde som .container / header; lidt lavere profil */ aspect-ratio: 2.18 / 1; border-radius: 28px; overflow: hidden; background: #000000; border: 1px solid rgba(255, 255, 255, 0.08); } .pf-carousel__copy { padding: clamp(1.15rem, 2.75vw, 2rem); display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; } .pf-carousel__tag { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange); } .pf-carousel__headline { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: #f5f5f7; } .pf-carousel__body { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #a1a1a6; max-width: 38ch; } .pf-carousel__visual { position: relative; min-height: 0; background: #0a0a0a; } .pf-carousel__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pf-carousel__controls { flex-shrink: 0; display: flex; justify-content: center; padding: 0 var(--pf-inline); margin-block: var(--pf-vpad); } .pf-carousel__pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); } .pf-carousel__dots { display: flex; align-items: center; gap: 0.4rem; } .pf-carousel__dot { position: relative; overflow: hidden; width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.28); cursor: pointer; transition: width 0.28s ease, background 0.2s ease, opacity 0.2s ease; flex-shrink: 0; } /* Mørk overlay fra højre = tid tilbage; væk ved 100 % → ren solid prik */ .pf-carousel__dot-fill { position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.24); transform: scaleX(0); transform-origin: right center; pointer-events: none; } .pf-carousel__dot:not(.is-active):hover { background: rgba(255, 255, 255, 0.45); } /* Som oprindeligt: lys ensfarvet “kapsel”, ikke grå track + hvid kant */ .pf-carousel__dot.is-active { width: 28px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); } .pf-carousel__dot:not(.is-active) .pf-carousel__dot-fill { opacity: 0; } .pf-carousel__play { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin: 0; border: none; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; flex-shrink: 0; } .pf-carousel__play:hover { color: #fff; } .pf-carousel__play:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 2px; } .pf-carousel__play-icon { display: block; } .pf-carousel__play[aria-pressed="true"] .pf-carousel__play-icon--play, .pf-carousel__play[aria-pressed="false"] .pf-carousel__play-icon--pause { display: none; } @media (max-width: 720px) { .pf-carousel__slide { align-self: stretch; } .pf-carousel__card { aspect-ratio: unset; max-height: none; grid-template-columns: 1fr; grid-template-rows: auto minmax(200px, 46vw); min-height: min(72vh, 560px); height: auto; } .pf-carousel__copy { padding-bottom: 0.5rem; } .pf-carousel__visual { min-height: 0; } .pf-carousel__visual img { position: absolute; inset: 0; aspect-ratio: unset; height: 100%; } } @media (prefers-reduced-motion: reduce) { .pf-carousel__strip { scroll-behavior: auto; } .pf-carousel__dot { transition: none; } } /* Portfolio cinematic (scroll-scrubbed 3D tiles — Grainient-ish) */ #portfolio { overflow-x: clip; } .pf-highlights + .pf-stage-track { margin-top: 0; } /* Stable viewport units keep the timeline fixed while mobile browser bars open/close. JS measures the sticky element's actual travel below the nav. */ .pf-stage-track { position: relative; width: 100%; min-height: 410vh; min-height: 410svh; background: #000000; margin-top: 0; } /* Pinner scenen. Ligger uden for perspektiv-laget, så copy'en kan være søskende til billedfeltet i stedet for barn af det (se .pf-headline-wrap). */ .pf-stage-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); width: 100%; } .pf-image-wrap { position: absolute; inset: 0; /* Klipper kort der er zoomet “forbi” — undgår at skulle fade scenen ud */ overflow: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective: 980px; -webkit-perspective: 980px; perspective-origin: 50% 48%; isolation: isolate; } .pf-scene { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; pointer-events: none; } .pf-tile { position: absolute; width: clamp(160px, var(--tile-w, 18vw), 520px); transform-origin: center center; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; z-index: 2; } .pf-tile--wide { width: clamp(240px, calc(var(--tile-w, 18vw) + 7vw), 620px); } .pf-tile--narrow { width: clamp(120px, calc(var(--tile-w, 18vw) - 3.2vw), 300px); } .pf-tile-inner { width: 100%; aspect-ratio: 16 / 10; border-radius: calc(var(--radius) - 4px); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04); transform-origin: center center; transform-style: preserve-3d; background: #111; will-change: transform; } .pf-tile-inner img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Grainient-lignende felt: hele frame fyldes, men med fri midte. */ .pf-scene .pf-tile:nth-child(1) { --tile-w: 21vw; top: 11%; left: 1%; } .pf-scene .pf-tile:nth-child(2) { --tile-w: 16.5vw; top: 61%; left: 87%; } .pf-scene .pf-tile:nth-child(3) { --tile-w: 22.5vw; top: 82%; left: 8%; } .pf-scene .pf-tile:nth-child(4) { --tile-w: 18.2vw; top: 19%; left: 61%; } .pf-scene .pf-tile:nth-child(5) { --tile-w: 15.2vw; top: 43%; left: 34%; } .pf-scene .pf-tile:nth-child(6) { --tile-w: 26vw; top: 11%; left: 39%; } .pf-scene .pf-tile:nth-child(7) { --tile-w: 12.2vw; top: 86%; left: 54%; } .pf-scene .pf-tile:nth-child(8) { --tile-w: 15.4vw; top: 58%; left: 6%; } .pf-scene .pf-tile:nth-child(9) { --tile-w: 15.8vw; top: 16%; left: 93%; } .pf-scene .pf-tile:nth-child(10) { --tile-w: 24.5vw; top: 86%; left: 79%; } .pf-scene .pf-tile:nth-child(11) { --tile-w: 11.2vw; top: 67%; left: 99%; } .pf-scene .pf-tile:nth-child(12) { --tile-w: 10.8vw; top: 9%; left: 98%; } .pf-scene .pf-tile:nth-child(13) { --tile-w: 10.4vw; top: 92%; left: 24%; } /* Copy'en ligger UDEN FOR perspektiv-laget. Før lå den inde i det med translateZ(420px) for at holde sig foran kortene — men perspektivet forstørrede den så 980/(980-420) = 1,75×: teksten blev sat op i 28px og vist i 49px, altså rasteriseret for småt og skaleret op (= pixeleret). Nu ligger den i 2D, holdes foran af z-index alene, og typografien er sat 1,75× op så den rammer nøjagtig samme størrelse på skærmen — bare i sin rigtige opløsning. */ .pf-headline-wrap { --pf-copy-boost: 1.75; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; /* Luft til skærmkanten — en skærm-afstand, ikke typografi, så den boostes ikke */ padding: 1.5rem 1.25rem; z-index: 40; } #portfolio .pf-headline-wrap #pf-headline, #portfolio .pf-headline-sub { opacity: 0; transition: none; } #portfolio .pf-headline-wrap #pf-headline { transform: scale(0.46); } #portfolio .pf-headline-sub { transform: translateY(10px) scale(0.78); } .pf-headline-wrap #pf-headline { margin: 0; font-size: calc(clamp(1.15rem, 3.2vw, 1.75rem) * var(--pf-copy-boost)); font-weight: 600; line-height: 1.38; letter-spacing: -0.03em; color: #f5f5f4; max-width: 22ch; text-wrap: balance; } .pf-headline-line { display: block; white-space: nowrap; } .pf-mark { /* Apple-stil highlight: kassen er font-boksen — den hugger teksten vandret (kun glyffernes egne sidebearings som luft) og henter hoejden fra ascender/descender, saa den fylder linjen ud i stedet for at svaeve som en pille. Skarpe hjoerner + flad farve = en rigtig overstregningstusch. #b62b4d er Marketing-knappens (.svc-tile--mkt) faktiske farve maalt paa skaermen — ikke et enkelt gradient-stop. Stoppet #f43f5e alene er for lyst, for det daekker kun knappens nederste hjoerne. */ padding: 0.02em 0.06em; margin: 0; background: #b62b4d; /* Arver farve + vaegt fra overskriften, saa det markerede ord er praecis samme tekst som resten af saetningen — kun baggrunden skiller sig ud. (mark har UA-defaults, saa de skal saettes eksplicit.) */ color: inherit; font-weight: inherit; box-decoration-break: clone; } .pf-headline-sub { margin: calc(0.85rem * var(--pf-copy-boost)) 0 0; font-size: calc(0.9375rem * var(--pf-copy-boost)); color: #a8a29e; max-width: 30ch; line-height: 1.45; } @media (max-width: 720px) { #pf-headline { font-size: calc(1.05rem * var(--pf-copy-boost)) !important; max-width: 26ch !important; } .pf-stage-track { min-height: 330vh; min-height: 330svh; margin-top: 0; } /* Kompositionen skal være den samme som på desktop — kortene skal bare skaleres ned med skærmen. Derfor rent vw her, uden px-gulv: gulvet i .pf-tile (160px) løfter hvert kort til ~41vw på en telefon, og fordi ALLE kort rammer gulvet ender de i samme bredde. Det er både dobbelt så bredt som på desktop og udvisker størrelsesforskellen mellem kortene, som er det spredningen bygger på. */ .pf-tile { width: var(--tile-w, 18vw); } .pf-tile--wide { width: calc(var(--tile-w, 18vw) + 7vw); } .pf-tile--narrow { width: calc(var(--tile-w, 18vw) - 3.2vw); } .pf-headline-wrap { /* Mobil løftede før copy'en 240px i Z → 980/(980-240) = 1,324× forstørrelse */ --pf-copy-boost: 1.3243; } } /* Kun tablet. Under 721px skal kortene stå hvor de står på desktop, og bredden her (46vw) ville gøre kort 5 halvt så bredt som skærmen på en telefon. */ @media (min-width: 721px) and (max-width: 980px) { .pf-scene .pf-tile:nth-child(5) { top: 42%; left: 20%; width: clamp(168px, 46vw, 280px); } .pf-scene .pf-tile:nth-child(13) { top: 68%; left: 14%; } } @media (prefers-reduced-motion: reduce) { .pf-stage-track { min-height: auto; padding-block: 2.75rem; } .pf-stage-sticky { position: static; height: auto; } .pf-image-wrap { position: relative; top: auto; height: auto; min-height: 0; padding: 0 1rem; perspective: none; overflow: visible; isolation: auto; } .pf-scene { display: none !important; } .pf-tile { display: none !important; } .pf-headline-wrap { position: relative; inset: auto; pointer-events: auto; padding: 0; transform: none; z-index: auto; } #portfolio .pf-stage-track .pf-headline-wrap #pf-headline, #portfolio .pf-stage-track .pf-headline-sub { opacity: 1 !important; transform: none !important; } } /* Service showcase — fuld viewport, neutral mørk (ikke “varm” kulør på sektionen) */ #ydelser.svc-showcase.section { padding-block: 0; } .svc-showcase { position: relative; isolation: isolate; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding-inline: 0; overflow: clip; color: #fafaf9; color-scheme: dark; border-top: none; background: #000000; } .svc-showcase__frame { position: relative; z-index: 1; width: min(100% - 2.5rem, var(--max)); margin-inline: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.75rem, 4.5vw, 2.75rem); box-sizing: border-box; } .svc-showcase__kicker { margin: 0 0 0.5rem; text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } .svc-showcase__heading { margin: 0 auto 1.5rem; max-width: 24ch; text-align: center; font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: #ffffff; } .svc-showcase__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.65rem); width: 100%; } .svc-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; height: 100%; padding: clamp(1.15rem, 2.4vw, 1.65rem) clamp(1rem, 2vw, 1.35rem); border-radius: clamp(22px, 3vw, 30px); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; transition: none; } /* gradient border: bright at top-left, fades around to dark at bottom-right */ /* shared ring setup */ .svc-tile::before, .svc-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; transition: opacity 0.15s ease; } /* bright ring — 1.5 px, fades out toward bright corner */ .svc-tile::before { padding: 1.5px; opacity: calc(1 - var(--hd, 0)); } /* dark ring — 2.5 px, fully opaque, fades in toward bright corner */ .svc-tile::after { padding: 2.5px; background: radial-gradient(circle at var(--cx, 100%) var(--cy, 100%), rgba(30, 30, 30, 0.85) 0%, rgba(20, 20, 20, 0.4) 30%, transparent 58%); opacity: var(--hd, 0); } .svc-tile--web::before { background: radial-gradient(circle at var(--cx, 0%) var(--cy, 0%), rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.3) 35%, transparent 65%); } .svc-tile--apps::before { background: radial-gradient(circle at var(--cx, 0%) var(--cy, 0%), rgba(186, 230, 253, 0.85) 0%, rgba(14, 165, 233, 0.28) 35%, transparent 65%); } .svc-tile--ai::before { background: radial-gradient(circle at var(--cx, 0%) var(--cy, 0%), rgba(165, 180, 252, 0.85) 0%, rgba(99, 102, 241, 0.28) 35%, transparent 65%); } .svc-tile--mkt::before { background: radial-gradient(circle at var(--cx, 0%) var(--cy, 0%), rgba(252, 165, 165, 0.85) 0%, rgba(244, 63, 94, 0.28) 35%, transparent 65%); } .svc-tile:hover { text-decoration: none; color: #fff; } .svc-tile__cta:hover { transform: scale(1.05); } .svc-tile:focus-visible { outline: 2px solid rgba(212, 255, 58, 0.85); outline-offset: 3px; } .svc-tile--web { background: linear-gradient(148deg, #6c1d0e 0%, #c2410c 38%, #f59e0b 72%, #fde047 100%); } .svc-tile--apps { background: linear-gradient(158deg, #0a1628 0%, #1e3a5f 42%, #0ea5e9 78%, #bae6fd 100%); } .svc-tile--ai { background: linear-gradient(162deg, #1a1033 0%, #5b21b6 48%, #8b5cf6 78%, #ddd6fe 100%); } .svc-tile--mkt { background: linear-gradient(150deg, #3f0d1a 0%, #9f1239 45%, #f43f5e 82%, #fecdd3 100%); } .svc-tile__grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.85; mix-blend-mode: overlay; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px); background-size: 3px 3px; } .svc-tile__grain::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 65%); mix-blend-mode: soft-light; opacity: 1; } .svc-tile__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; width: 100%; height: 100%; } .svc-tile__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); } .svc-tile__body { margin: 0; max-width: 26ch; font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.45; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } /* frosted bar — pinned to bottom edge, ignores tile padding */ .svc-tile__bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; align-items: center; padding: 0.7rem 1.2rem; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, 0.15); z-index: 1; } /* push inner content up so bar doesn't overlap it */ .svc-tile--web, .svc-tile--apps { padding-bottom: 3.5rem; } .svc-tile__tag { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.3rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.9); white-space: nowrap; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .svc-tile__tag:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.6); color: #fff; } .svc-tile__tag.is-active { background: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.75); color: #fff; } .svc-tile__features { display: flex; flex-direction: column; width: 100%; margin-top: 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .svc-tile__feature { padding: 0.7rem 1.25rem; font-size: clamp(1rem, 1.9vw, 1.2rem); font-weight: 600; line-height: 1.3; text-align: center; color: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .svc-tile--web, .svc-tile--apps { padding-inline: 0.65rem; } .svc-tile__cta { margin-top: 0.75rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1.4rem; padding-block: 0.65rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; flex-shrink: 0; transition: transform 0.15s ease, filter 0.15s ease; } .svc-tile__cta--lime { background: #d4ff3a; color: #0a0a0a; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset; } .svc-tile__cta--lime:hover { filter: brightness(1.05); } .svc-tile__cta--glass { background: rgba(0, 0, 0, 0.38); color: #fafaf9; border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); } .svc-tile__cta--glass:hover { background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.3); } @media (max-width: 640px) { .svc-showcase__grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); flex: 1; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .svc-tile, .svc-tile:hover .svc-tile__cta { transition: none; transform: none; } .svc-tile:hover { transform: none; } } /* ── Website feature highlight ──────────────────────────────────── */ .svc-hl { min-height: 100vh; background: #000; overflow: hidden; } .svc-hl__layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } /* left column */ .svc-hl__media { position: relative; background: #000; overflow: hidden; } .svc-hl__screenshot-wrap { position: absolute; top: 65%; left: 0; transform: translateY(-50%); width: 165%; max-width: none; pointer-events: none; display: flex; align-items: center; } .svc-hl__screenshot { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); } /* right content */ .svc-hl__content { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: clamp(3rem, 6vw, 6rem); background: #000; } .svc-hl__kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0; } .svc-hl__heading { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0; color: #fff; } .svc-hl__body { font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.65; color: rgba(255,255,255,0.6); margin: 0; max-width: 42ch; } .svc-hl__points { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 0.5rem; padding-top: 1.5rem; } .svc-hl__point { display: flex; align-items: flex-start; gap: 1rem; } .svc-hl__point-icon { font-size: 1.6rem; line-height: 1; color: rgba(255,255,255,0.7); flex-shrink: 0; margin-top: 0.1rem; } .svc-hl__point-text { display: flex; flex-direction: column; gap: 0.2rem; } .svc-hl__point-text strong { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 700; color: #fff; letter-spacing: -0.02em; } .svc-hl__point-text span { font-size: 0.9rem; color: rgba(255,255,255,0.5); } /* 860px, samme brydepunkt som headeren (.menu-toggle bliver synlig der). Stod før på 768px, så mellem 769 og 860px var menuen foldet sammen mens sektionerne stadig lå i to spalter — teksten blev klemt ned i en halv skærmbredde. */ @media (max-width: 860px) { .svc-hl__layout { grid-template-columns: 1fr; min-height: auto; } .svc-hl__media { height: 50vh; min-height: 260px; } /* Var `none`, hvilket gav 107 tegn pr. linje ved 860px, hvor spalten er 820px bred. 60ch er samme loft som .svc-hl--apps bruger, og på en telefon (350px ≈ 45ch) rammer det aldrig — der fylder teksten stadig hele bredden. */ .svc-hl__body { max-width: min(60ch, 100%); } } /* ── Apps highlight: device mockups ──────────────────────────────── */ .svc-hl--websites .svc-hl__content { padding-left: clamp(10rem, 20vw, 20rem); padding-right: 2rem; } .svc-hl--websites .svc-hl__media { padding: 0; } .svc-hl--apps .svc-hl__content { padding-left: clamp(5.5rem, 13vw, 11.5rem); padding-right: clamp(2.75rem, 7vw, 6rem); } .svc-hl--apps .svc-hl__body { max-width: min(60ch, 100%); } /* Stakket layout — samme brydepunkt som headerens menuknap. Blokken SKAL ligge efter reglerne ovenfor. De er sektionsspecifikke (.svc-hl--websites/--apps + .svc-hl__content) og vejer derfor lige så meget som reglerne her, så det er kildeordenen der afgør. En tidligere media query ville tabe — det var netop hvad der skete med den gamle apps-padding oppe i 768px-blokken, som derfor aldrig gjorde noget. */ @media (max-width: 860px) { /* Teksten helt ud til venstre. Desktop-indrykket blev aldrig nulstillet: clamp(10rem, 20vw, 20rem) rammer sit gulv på 10rem = 160px på en 390px skærm, så tekstspalten blev kun 198px bred og lå midt på skærmen. Apps havde samme problem med 5,5rem. 1,25rem svarer til .container's sidemargin, så teksten flugter med resten af siden. */ .svc-hl--websites .svc-hl__content, .svc-hl--apps .svc-hl__content { padding-inline: 1.25rem; padding-block: clamp(2.5rem, 9vw, 4rem); } /* Apps har enhederne før teksten i HTML, fordi de står til venstre på desktop. Stakket giver det billede over tekst — her vendes det, så begge sektioner følger samme mønster: tekst øverst, billede lige under. Ingen af blokkene indeholder links eller felter, så der er ingen tab-rækkefølge at bryde. */ .svc-hl--apps .svc-hl__content { order: -1; } /* Skærmbilledet er sat op til at bløde ud over højre kant på desktop: width: 165% forankret i left: 0, lodret centreret om top: 65%. Stakket er beholderen kun én skærm bred, så man ser de venstre ~61 % af billedet, beskåret både foroven og forneden — det læses som et tilfældigt udsnit. Her vises hele mockuppen i stedet, direkte under teksten. */ .svc-hl--websites .svc-hl__media { height: auto; min-height: 0; padding-inline: 1.25rem; padding-bottom: clamp(2.5rem, 9vw, 4rem); } .svc-hl--websites .svc-hl__screenshot-wrap { position: static; width: 100%; transform: none; } } .svc-hl__devices { position: relative; background: #000; } /* iPad — landscape asset */ .svc-hl__ipad { position: absolute; left: 45%; top: 50%; transform: translate(-50%, -50%); height: 58%; width: auto; max-width: 86%; aspect-ratio: 11708 / 8972; z-index: 1; overflow: visible; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* iPhone — full device asset, nudged left from the right edge */ .svc-hl__iphone { position: absolute; right: 0%; bottom: 15%; height: 54%; width: auto; max-width: 28%; aspect-ratio: 3632 / 7520; z-index: 2; overflow: visible; display: flex; align-items: center; justify-content: center; pointer-events: none; } .svc-hl__device-img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Kun iPad: let dybde — drop-shadow på iPhone gav mørk “plet” bag metalrammen */ .svc-hl__ipad .svc-hl__device-img { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45)); } /* 860px: enhederne skal skifte samtidig med at layoutet stakker, ellers får de mobil-placeringer mens de stadig sidder i en halvbred spalte. */ @media (max-width: 860px) { .svc-hl__devices { height: 60vh; min-height: 320px; } .svc-hl__ipad { height: 48%; max-width: 94%; left: 50%; transform: translate(-50%, -50%); } .svc-hl__iphone { height: 46%; max-width: 34%; right: 22%; bottom: 18%; } } /* ===== Marketing highlight section ===== */ .mkt-hl { min-height: 100vh; background: #000; overflow: hidden; display: flex; align-items: center; } .mkt-hl__inner { display: flex; flex-direction: column; align-items: center; padding: clamp(2rem, 4vh, 3.5rem) 0; gap: clamp(1.25rem, 2.5vh, 2.5rem); } .mkt-hl__header { text-align: center; } .mkt-hl__kicker { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: rgba(255,255,255,0.28); margin: 0 0 0.75rem; font-family: var(--font-mono); } .mkt-hl__title { font-size: clamp(2.75rem, 6.5vw, 5.5rem); font-weight: 700; color: #fff; letter-spacing: -0.04em; margin: 0; line-height: 1; } /* ===== Studio Display pairs scroll (Marketing) — dark, sticky center + slide-in ===== */ .mkt-hl.sdpairs { min-height: auto; background: #000; color: #fff; /* overflow: hidden on .mkt-hl breaks position: sticky — must be visible */ overflow: visible; display: block; align-items: stretch; } .mkt-hl.sdpairs .sdpairs__wrap { overflow: visible; } .mkt-hl.sdpairs .mkt-hl__inner { align-items: stretch; gap: 0; padding-top: clamp(2.5rem, 5vh, 4rem); padding-bottom: clamp(2rem, 4vh, 3rem); } .mkt-hl.sdpairs .mkt-hl__kicker { color: rgba(255, 255, 255, 0.28); } .mkt-hl.sdpairs .mkt-hl__title { color: #fff; } .sdpairs__intro { text-align: center; width: 100%; margin-bottom: clamp(1rem, 2vh, 1.75rem); } .sdpairs__track { position: relative; width: 100vw; margin-left: calc(50% - 50vw); } .sdpairs__pin { position: relative; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; } .sdpairs__overflow { min-height: min(72vh, 640px); overflow: hidden; width: 100%; background: #000; } .sdpairs__stage { position: relative; width: 100%; height: 100%; max-width: 100%; margin: 0 auto; background: #000; } /* Sticky scroll scene (enhanced + JS drives --sdp-* ) */ .sdpairs--enhanced .sdpairs__track { padding-top: 10vh; padding-top: 10svh; min-height: 248vh; min-height: 248svh; } .sdpairs--enhanced .sdpairs__pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); } .sdpairs--enhanced .sdpairs__overflow { flex: 1; min-height: 0; overflow-x: clip; overflow-y: hidden; } .sdpairs--enhanced .sdpairs__stage { display: flex; align-items: center; justify-content: center; height: 100%; } /* Display centered; clusters tuck just slightly under bottom corners */ .sdpairs__deck { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; width: 100%; max-width: min(100%, 1620px); margin: 0 auto; padding: 0 clamp(0.5rem, 2vw, 1.5rem); box-sizing: border-box; column-gap: 0; overflow: visible; } .sdpairs__cluster { display: flex; align-items: flex-end; flex: 0 0 auto; opacity: 0; will-change: transform, opacity; min-width: 0; z-index: 7; } .sdpairs__cluster--left { grid-column: 1; justify-self: end; justify-content: flex-end; margin-right: clamp(-4.5rem, -13vw, -7.75rem); } .sdpairs__cluster--right { grid-column: 3; justify-self: start; justify-content: flex-start; margin-left: clamp(-4.5rem, -13vw, -7.75rem); overflow: visible; } .sdpairs__main { position: relative; grid-column: 2; justify-self: center; width: min(50vw, 720px); z-index: 5; pointer-events: none; overflow: hidden; contain: paint; } .sdpairs__img { display: block; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* Base display — centered in frame */ .sdpairs__main .sdpairs__img--main { position: relative; z-index: 1; width: 100%; height: auto; display: block; margin-inline: auto; object-fit: contain; object-position: center bottom; } /* Fade layer — aligned to main */ .sdpairs__main .sdpairs__img--main-fade { position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; z-index: 2; width: 100%; height: auto; opacity: 0; object-fit: contain; object-position: center bottom; } /* Left pair — height-led so MacBook can read larger on the right */ .sdpairs__cluster--left .sdpairs__img--left-back { position: relative; z-index: 1; width: auto; height: clamp(210px, 28.5vh, 312px); max-width: min(33vw, 360px); flex-shrink: 1; object-fit: contain; object-position: right bottom; } .sdpairs__cluster--left .sdpairs__img--left-front { position: relative; z-index: 2; width: min(14vw, 168px); max-width: 100%; flex-shrink: 1; margin-left: clamp(-3.25rem, -6vw, -1.75rem); will-change: transform; object-position: right bottom; } /* Right: iPhone + MacBook (largest side device; display stays hero in center) */ .sdpairs__cluster--right .sdpairs__img--right-front { position: relative; z-index: 2; width: min(9vw, 112px); max-width: 100%; flex-shrink: 1; will-change: transform; object-position: left bottom; } .sdpairs__cluster--right .sdpairs__img--right-back { position: relative; z-index: 1; width: auto; height: clamp(212px, 29vh, 318px); max-width: none; flex-shrink: 0; margin-left: clamp(-4.5rem, -8vw, -2.5rem); object-fit: contain; object-position: left bottom; } .sdpairs__copy { flex-shrink: 0; text-align: center; padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 3vh, 2.5rem); max-width: 40rem; margin-inline: auto; position: relative; z-index: 2; transform: translateY(-3rem); opacity: 0; } /* No-JS: show end frame */ .sdpairs--enhanced:not(.sdpairs--js) .sdpairs__img--main-fade, .sdpairs--enhanced:not(.sdpairs--js) .sdpairs__copy { opacity: 1; } .sdpairs--enhanced:not(.sdpairs--js) .sdpairs__cluster { opacity: 1; transform: none; } .sdpairs__headline { margin: 0 0 0.65rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #fff; } .sdpairs__paragraph { margin: 0; font-size: clamp(1rem, 1.8vw, 1.1875rem); line-height: 1.5; color: rgba(255, 255, 255, 0.55); max-width: 42ch; margin-inline: auto; } .sdpairs__paragraph .highlight, .sdpairs__paragraph strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; } .mkt-hl.sdpairs .mkt-hl__desc { border-top-color: rgba(255, 255, 255, 0.08); padding-top: clamp(2rem, 4vh, 3rem); margin-top: clamp(1rem, 3vh, 2rem); } /* Tablet og mobil: hele kompositionen udtrykkes i én skaleringsenhed (--sdp-u), saa den skalerer proportionalt med skaermen i stedet for at braekke ud over kanterne. Alle billeder er bredde-styret her — hoejde- styring afhaenger af filernes intrinsic aspect og kan derfor ikke bruges til at holde en samlet bredde. Summen giver et spaend fra 3u til 97u. */ @media (max-width: 1068px), (max-height: 600px) { .sdpairs--enhanced .sdpairs__track { padding-top: 8vh; padding-top: 8svh; min-height: 210vh; min-height: 210svh; } .sdpairs__deck { /* Faelles skaleringsenhed for hele kompositionen — normalt 1vw. */ --sdp-u: 1vw; padding-inline: 0; } /* 54u i midten => 23u til hver side-kolonne */ .sdpairs__main { width: calc(54 * var(--sdp-u)); } /* Venstre klynge = 18 + 9.5 - 2.5 = 25u, tucket 5u ind under displayet */ .sdpairs__cluster--left { margin-right: calc(-5 * var(--sdp-u)); } .sdpairs__cluster--left .sdpairs__img--left-back { width: calc(18 * var(--sdp-u)); height: auto; max-width: none; flex-shrink: 0; } .sdpairs__cluster--left .sdpairs__img--left-front { width: calc(9.5 * var(--sdp-u)); margin-left: calc(-2.5 * var(--sdp-u)); flex-shrink: 0; } /* Hoejre klynge = 7 + 21 - 2.5 = 25.5u, tucket 5.5u ind under displayet */ .sdpairs__cluster--right { margin-left: calc(-5.5 * var(--sdp-u)); } .sdpairs__cluster--right .sdpairs__img--right-front { width: calc(7 * var(--sdp-u)); height: auto; flex-shrink: 0; } .sdpairs__cluster--right .sdpairs__img--right-back { width: calc(21 * var(--sdp-u)); height: auto; margin-left: calc(-2.5 * var(--sdp-u)); flex-shrink: 0; } /* Desktop trækker teksten 3rem op i den hoeje scene. Paa lavere skaerme er der ikke plads til det, og overskriften ville lande oven i billederne. */ .sdpairs__copy { transform: none; } } /* Also fit short desktop windows and zoomed displays: reserve space for the caption before sizing the devices, so images cannot cover the headline. */ @media (max-height: 600px) { .sdpairs__deck { --sdp-u: min(1vw, max(1px, calc((100vh - var(--nav-h) - 10rem) / 42))); --sdp-u: min(1vw, max(1px, calc((100svh - var(--nav-h) - 10rem) / 42))); } } @media (max-width: 734px) { .sdpairs--enhanced .sdpairs__track { padding-top: 6vh; padding-top: 6svh; min-height: 188vh; min-height: 188svh; } } /* Portraet: kompositionen er lav og bred, mens skaermen er hoej og smal. Uden dette ligger den som en smal stribe midt i et stort sort felt — visual og tekst samles i stedet som en kompakt gruppe midt paa den pinnede skaerm. Landskab (fx tablet 1024x768) har allerede den rigtige balance. */ @media (max-width: 1068px) and (max-aspect-ratio: 1 / 1) { .sdpairs--enhanced .sdpairs__pin { justify-content: center; } .sdpairs--enhanced .sdpairs__overflow { flex: 0 0 auto; } .sdpairs__copy { padding-top: clamp(1.75rem, 7vw, 3rem); } } @media (prefers-reduced-motion: reduce) { .sdpairs--enhanced .sdpairs__track { padding-top: 0 !important; min-height: auto !important; } .sdpairs--enhanced .sdpairs__pin { position: relative !important; height: auto !important; } .sdpairs--enhanced .sdpairs__overflow { min-height: min(72vh, 640px); } } /* Stage */ .mkt-hl__stage { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1.5rem, 3.5vw, 3.5rem); width: 100%; position: relative; } .mkt-hl__stage::before { content: ""; position: absolute; inset: -20% -30%; background: radial-gradient(ellipse 55% 50% at 50% 60%, rgba(234,88,12,0.12) 0%, transparent 70%), radial-gradient(ellipse 35% 40% at 20% 70%, rgba(139,92,246,0.08) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 80% 70%, rgba(16,185,129,0.06) 0%, transparent 60%); pointer-events: none; } .mkt-hl__device { position: relative; z-index: 1; } /* ── Poster ── */ .mkt-hl__poster-wrap { transform: rotate(-5deg) translateY(18px); flex-shrink: 0; } .mkt-hl__poster { width: 178px; height: clamp(180px, 25vh, 260px); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.09); } .mkt-hl__poster-bg { position: absolute; inset: 0; background: linear-gradient(148deg, #1a0533 0%, #7c1f8c 42%, #ea580c 78%, #fbbf24 100%); } .mkt-hl__poster-content { position: relative; z-index: 1; flex: 1; padding: 18px 15px 10px; display: flex; flex-direction: column; gap: 8px; } .mkt-hl__poster-tag { width: 52%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.38); } .mkt-hl__poster-h1 { width: 92%; height: 15px; border-radius: 5px; background: rgba(255,255,255,0.9); margin-top: 6px; } .mkt-hl__poster-h2 { width: 68%; height: 11px; border-radius: 4px; background: rgba(255,255,255,0.65); } .mkt-hl__poster-body { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .mkt-hl__poster-line { width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); } .mkt-hl__poster-line--short { width: 72%; } .mkt-hl__poster-cta { width: 62%; height: 26px; border-radius: 13px; background: #fff; margin-top: 18px; } .mkt-hl__poster-footer { position: relative; z-index: 1; padding: 9px 15px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: space-between; } .mkt-hl__poster-logo { width: 38%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.45); } .mkt-hl__poster-social { display: flex; gap: 5px; } .mkt-hl__poster-social span { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,0.22); } /* ── Laptop ── */ .mkt-hl__laptop-wrap { flex-shrink: 0; } .mkt-hl__laptop { display: flex; flex-direction: column; align-items: center; } .mkt-hl__laptop-lid { width: 390px; background: #1c1c1e; border-radius: 12px 12px 4px 4px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.1); box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04); } .mkt-hl__laptop-chrome { height: 22px; background: #2c2c2e; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.06); } .mkt-hl__laptop-cam { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); } .mkt-hl__laptop-screen { height: clamp(160px, 20vh, 238px); overflow: hidden; background: #0a0a0a; } /* Dashboard UI inside laptop */ .mkt-hl__dash { height: 100%; display: flex; flex-direction: column; } .mkt-hl__dash-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #111; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .mkt-hl__dash-logo { width: 55px; height: 7px; border-radius: 3px; background: rgba(255,255,255,0.55); flex-shrink: 0; } .mkt-hl__dash-nav { display: flex; gap: 6px; flex: 1; } .mkt-hl__dash-nav span { width: 34px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.13); } .mkt-hl__dash-actions { display: flex; gap: 5px; } .mkt-hl__dash-actions span { width: 22px; height: 7px; border-radius: 4px; } .mkt-hl__dash-actions span:first-child { background: rgba(234,88,12,0.65); } .mkt-hl__dash-actions span:last-child { background: rgba(255,255,255,0.12); } .mkt-hl__dash-body { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr) 2fr 1.5fr; grid-template-rows: auto 1fr; gap: 6px; padding: 8px; overflow: hidden; } .mkt-hl__dash-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .mkt-hl__dash-stat-val { width: 55%; height: 10px; border-radius: 4px; } .mkt-hl__dash-stat-lbl { width: 78%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.18); } .mkt-hl__dash-stat--a .mkt-hl__dash-stat-val { background: rgba(234,88,12,0.75); } .mkt-hl__dash-stat--b .mkt-hl__dash-stat-val { background: rgba(139,92,246,0.75); } .mkt-hl__dash-stat--c .mkt-hl__dash-stat-val { background: rgba(16,185,129,0.75); } .mkt-hl__dash-chart { grid-column: 1 / 5; grid-row: 2; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 5px; } .mkt-hl__dash-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; } .mkt-hl__dash-bars span { flex: 1; height: var(--h, 50%); border-radius: 3px 3px 0 0; background: rgba(234,88,12,0.4); } .mkt-hl__dash-bars span:nth-child(4), .mkt-hl__dash-bars span:nth-child(6) { background: rgba(234,88,12,0.85); } .mkt-hl__dash-chart-lbl { width: 38%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); flex-shrink: 0; } .mkt-hl__dash-list { grid-column: 5 / -1; grid-row: 2; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .mkt-hl__dash-row { width: 100%; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.09); } .mkt-hl__dash-row--short { width: 68%; } .mkt-hl__laptop-hinge { width: 412px; height: 5px; background: linear-gradient(to bottom, #2c2c2e, #1a1a1c); border-radius: 0 0 2px 2px; } .mkt-hl__laptop-base { width: 434px; height: 34px; background: #1c1c1e; border-radius: 0 0 10px 10px; border: 1.5px solid rgba(255,255,255,0.08); border-top: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 18px; } .mkt-hl__laptop-keys { display: flex; gap: 3px; width: 100%; } .mkt-hl__laptop-keys span { flex: 1; height: 7px; border-radius: 2px; background: rgba(255,255,255,0.06); } .mkt-hl__laptop-trackpad { width: 58px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.06); } /* ── iPhone ── */ .mkt-hl__phone-wrap { transform: rotate(5deg) translateY(18px); flex-shrink: 0; } .mkt-hl__phone { width: 132px; height: clamp(210px, 28vh, 272px); background: #111; border-radius: 38px; border: 2px solid rgba(255,255,255,0.11); box-shadow: 0 24px 64px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); display: flex; flex-direction: column; align-items: center; padding: 12px 8px 8px; overflow: hidden; } .mkt-hl__phone-island { width: 52px; height: 13px; background: #000; border-radius: 12px; margin-bottom: 8px; flex-shrink: 0; } .mkt-hl__phone-screen { flex: 1; width: 100%; overflow: hidden; border-radius: 6px; } .mkt-hl__social { height: 100%; background: #0a0a0a; display: flex; flex-direction: column; padding: 7px; gap: 6px; } .mkt-hl__social-nav { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .mkt-hl__social-avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #ea580c, #8b5cf6); flex-shrink: 0; } .mkt-hl__social-handle { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.38); } .mkt-hl__social-follow { width: 30px; height: 13px; border-radius: 7px; background: rgba(234,88,12,0.7); flex-shrink: 0; } .mkt-hl__social-post { flex-shrink: 0; height: clamp(60px, 9vh, 88px); border-radius: 8px; background: linear-gradient(148deg, #1a0533 0%, #7c1f8c 50%, #ea580c 100%); } .mkt-hl__social-actions { display: flex; gap: 8px; flex-shrink: 0; } .mkt-hl__social-actions span { width: 14px; height: 14px; border-radius: 3px; background: rgba(255,255,255,0.18); } .mkt-hl__social-caption { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .mkt-hl__social-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); } .mkt-hl__social-line--short { width: 65%; } .mkt-hl__social-stories { display: flex; gap: 4px; flex-shrink: 0; } .mkt-hl__social-stories span { flex: 1; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(234,88,12,0.38); } .mkt-hl__social-feed { display: flex; gap: 3px; flex: 1; min-height: 0; } .mkt-hl__social-tile { flex: 1; border-radius: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); } .mkt-hl__phone-home { width: 42px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); flex-shrink: 0; margin-top: 6px; } /* ── Description ── */ .mkt-hl__desc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3rem; width: 100%; padding-top: clamp(1.5rem, 3vh, 2.5rem); border-top: 1px solid rgba(255,255,255,0.08); } .mkt-hl__desc-title { font-size: 0.9375rem; font-weight: 600; color: #fff; margin: 0 0 0.45rem; } .mkt-hl__desc-body { font-size: 0.875rem; line-height: 1.65; color: rgba(255,255,255,0.42); margin: 0; } /* ── Responsive ── */ @media (max-width: 900px) { .mkt-hl__laptop-lid { width: 300px; } .mkt-hl__laptop-screen { height: clamp(140px, 18vh, 183px); } .mkt-hl__laptop-hinge { width: 318px; } .mkt-hl__laptop-base { width: 335px; } .mkt-hl__stage { gap: 1.5rem; } } @media (max-width: 680px) { .mkt-hl__poster-wrap, .mkt-hl__phone-wrap { display: none; } .mkt-hl__desc { grid-template-columns: 1fr; } } /* Quotes */ .quotes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 720px) { .quotes-grid { grid-template-columns: 1fr; } } .quote { padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .quote blockquote { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.55; } .quote footer { display: flex; align-items: center; gap: 0.85rem; font-size: 0.9rem; } .quote-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* ===== Footer ===== Forsiden aabner i en sort ASCII-hero; footeren lukker samme sted. Pladen samler hele afslutningen: kontakt-CTA (den orange baand-CTA, siderne foer sluttede paa, er absorberet herind), sidekort, lokal tid og et wordmark tegnet i ASCII af footer.js. Alt herunder ligger paa moerk bund, saa farverne kommer fra --footer-*-tokens og ikke fra sidens lyse palette. */ .footer { position: relative; /* isolation gir footeren sin egen stacking context, saa .footer__veil paa z-index: -1 lander mellem baggrunden og indholdet — og ikke bag hele siden. */ isolation: isolate; overflow: hidden; /* Clip the decorative glow without creating another scroll container at the page boundary. Keep hidden above as a fallback for older browsers. */ overflow: clip; margin-top: 0; padding: clamp(3.5rem, 7vw, 6rem) 0 1.75rem; background: var(--footer-bg); color: var(--footer-dim); font-size: 0.9rem; } /* Haarfin lysstribe i samlingen mellem det hvide indhold og pladen. Orange i midten, saa overgangen faar samme glimt som heroens knap. */ .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(245, 242, 240, 0.14) 18%, rgba(234, 88, 12, 0.55) 50%, rgba(245, 242, 240, 0.14) 82%, transparent 100% ); } /* Lyset i pladen: en orange glod nede i venstre hjoerne (bag wordmarket) og et koeligt anstroeg oppe til hoejre, saa fladen ikke er doed sort. */ .footer__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 95% at 10% 118%, rgba(234, 88, 12, 0.20) 0%, rgba(234, 88, 12, 0) 60%), radial-gradient(85% 70% at 88% -12%, rgba(245, 242, 240, 0.07) 0%, rgba(245, 242, 240, 0) 62%); } .footer__inner { position: relative; } /* --- Oeverste raekke: CTA til venstre, sidekort til hoejre --- */ .footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--footer-line); } .footer__headline { margin: 0 0 0.85rem; font-family: var(--font-display); font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--footer-ink); } .footer__lede { margin: 0 0 1.9rem; max-width: 44ch; line-height: 1.62; color: var(--footer-dim); } .footer__cta { /* Samme glas-knap som heroens "Get Started": siden aabner og lukker paa den samme knap. */ text-decoration: none; } .footer__cols { display: flex; gap: clamp(2rem, 5vw, 4rem); } .footer__coltitle { margin: 0 0 1.05rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 242, 240, 0.38); } .footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.62rem; } .footer__col a { color: var(--footer-dim); text-decoration: none; transition: color 0.15s ease; } .footer__col a:hover { color: var(--footer-ink); text-decoration: none; } .footer__col a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .footer__static { color: rgba(245, 242, 240, 0.38); } /* --- Wordmark --- Teksten er default-tilstanden: uden JS (eller uden canvas) staar "DespotSoft" som stort typografisk wordmark. Naar footer.js har tegnet ASCII-versionen, saetter den .is-ascii, og teksten traeder tilbage til kun at vaere tilgaengelighedsnavn. */ .footer__mark { position: relative; padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.25rem); /* Wordmarket maales mod pladen selv, ikke mod viewporten, saa cqi-graden nedenfor rammer den faktiske bredde uanset containerens margener. */ container-type: inline-size; } .footer__markcanvas { display: none; width: 100%; height: auto; } .footer__marktext { display: block; font-family: var(--font-display); /* "DespotSoft" staar altid paa én linje — bliver pladen smallere, bliver skriften mindre i stedet for at braekke i "Despot" over "Soft". Derfor er der ingen nedre graense paa stoerrelsen; en fast minimumsstoerrelse er netop det, der tvinger ordet om paa to linjer. cqi maaler pladen selv, saa ordet fylder den uanset margener; vw er fallback uden container-enheder. */ white-space: nowrap; font-size: min(9.5rem, 13vw); font-size: min(9.5rem, 15cqi); font-weight: 700; line-height: 0.86; letter-spacing: -0.045em; color: rgba(245, 242, 240, 0.88); } .footer__mark.is-ascii .footer__markcanvas { display: block; } .footer__mark.is-ascii .footer__marktext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Bundlinjen --- */ .footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--footer-line); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 242, 240, 0.72); } /* Linket til privatlivspolitikken skal staa som de øvrige punkter i striben og først vise sig som et link, naar man er paa vej hen til det. */ .footer__legal a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .footer__legal a:hover, .footer__legal a:focus-visible { color: rgba(245, 242, 240, 0.72); text-decoration: underline; text-underline-offset: 4px; } /* Sprogvaelger. To rigtige links, ikke en knap — hvert sprog har sin egen URL. Det aktive sprog staar lysere end det passive, saa man kan se hvor man er. */ .footer__lang { display: inline-flex; gap: 0.9rem; } .footer__lang a { color: rgba(245, 242, 240, 0.32); text-decoration: none; transition: color 0.2s ease; } .footer__lang a:hover, .footer__lang a:focus-visible { color: rgba(245, 242, 240, 0.82); } .footer__lang a[aria-current="true"] { color: rgba(245, 242, 240, 0.68); } @media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; gap: 2.5rem; } .footer__cols { gap: 2.5rem; } } .page-headline { font-size: 0.9375rem; color: var(--muted); max-width: 66ch; margin: -0.5rem 0 2rem; } /* Subpages & shared */ .nav-links a[aria-current="page"], .nav-cta[aria-current="page"] { color: var(--orange); font-weight: 600; } .sub-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--line); } .sub-hero h1 { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 3.5vw, 2.35rem); letter-spacing: -0.03em; max-width: 20ch; } .sub-hero .lede { margin: 0; color: var(--muted); font-size: 0.9375rem; max-width: 62ch; } .sub-hero-grid { display: grid; grid-template-columns: 1fr minmax(200px, 380px); gap: 2rem; align-items: center; } @media (max-width: 720px) { .sub-hero-grid { grid-template-columns: 1fr; } } .sub-hero-visual { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .sub-hero-visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .timeline { position: relative; padding-left: 1.75rem; border-left: 2px solid var(--orange-border); margin: 2rem 0; } .timeline-item { margin-bottom: 1.75rem; padding-left: 0.25rem; } .timeline-item:last-child { margin-bottom: 0; } .timeline-year { font-size: 0.8rem; font-weight: 700; color: var(--orange); letter-spacing: 0.04em; } .timeline-item h3 { margin: 0.2rem 0 0.35rem; font-size: 1.05rem; } .values-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 900px) { .values-row { grid-template-columns: repeat(2, 1fr); } } .team-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 900px) { .team-row { grid-template-columns: repeat(2, 1fr); } } .team-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1rem; text-align: center; background: var(--surface); } .team-card img { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 0.75rem; object-fit: cover; } .team-card .role { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.35rem; } .team-card .ph { margin: 0.5rem auto 0; max-width: 100px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .tag { padding: 0.45rem 0.75rem; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; background: var(--orange-soft); color: var(--orange-hover); border: 1px solid var(--orange-border); } .award-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (max-width: 600px) { .award-row { grid-template-columns: 1fr; } } .award { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .award img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; } .service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--line); } .service-detail:last-of-type { border-bottom: none; } @media (max-width: 768px) { .service-detail { grid-template-columns: 1fr; } } .service-detail h2 { margin: 0 0 0.5rem; font-size: 1.25rem; } .service-detail img { border-radius: var(--radius); width: 100%; aspect-ratio: 16/10; object-fit: cover; border: 1px solid var(--line); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } } .price-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.35rem; background: var(--surface); display: flex; flex-direction: column; } .price-card.featured { border-color: var(--orange); box-shadow: 0 12px 40px -20px rgba(234, 88, 12, 0.45); } .price-card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; } .price-card .price { font-size: 2rem; font-weight: 700; color: var(--orange); margin: 0.5rem 0 1rem; } .price-card ul { margin: 0 0 1.25rem; padding-left: 1.2rem; color: var(--muted); font-size: 0.9375rem; flex: 1; } .price-card li { margin-bottom: 0.4rem; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.65rem 0.75rem; font-family: inherit; font-size: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); } .form-group textarea { min-height: 120px; resize: vertical; } /* Fejlbesked under feltet. Den staar kun frem, naar der er noget at melde — markuppen bliver skrevet af contact-validate.js. */ .form-error { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: #dc2626; } .form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"], .form-group select[aria-invalid="true"] { border-color: #dc2626; } /* Hjaelpetekst under et felt. Staar altid — modsat .form-error, der kun dukker op naar der er noget galt. */ .form-hint { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); } /* Honeypot. display:none ville en del bots springe over, saa feltet bliver flyttet ud af billedet i stedet — usynligt for øjet, men til stede i DOM'en. */ .form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form__submit { margin-top: 1.5rem; } .contact-form button[type="submit"]:disabled { opacity: 0.6; cursor: progress; } /* Oplysningspligten under Send-knappen. Samme lille skala som feltnoterne, saa den oplyser uden at konkurrere med knappen lige over. */ .form-consent { margin: 0.9rem 0 0; max-width: 46ch; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); } /* Fejl paa hele indsendelsen: netvaerket er nede, endpointet svarer ikke. Samme udtryk som feltfejlene — ren rød tekst uden ramme og flade. */ .form-status { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #dc2626; } /* ===== Kvittering ===== Kvitteringen tager formularens plads, saa der ikke er tvivl om, at beskeden gik igennem. Der er ingen kant og ingen farvet flade. Paa denne side staar formularen direkte paa det sorte — en indrammet kasse ville vaere det eneste kort paa siden. Bekraeftelsen laener sig i stedet op ad sidens egen typografi: mono kicker, stor display-overskrift og en haarfin linje, som paa faq og tal-striberne. */ /* Kvitteringen bliver staaende i formularens spor: samme side, samme spalte, resten af siden urørt. */ .form-success { padding: 0.75rem 0; outline: none; } .form-success__title { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; } .form-success__text { margin: 0; max-width: 46ch; font-size: clamp(0.9375rem, 2vw, 1.0625rem); line-height: 1.65; letter-spacing: -0.015em; color: var(--muted); } .form-success__foot { margin: 1.75rem 0 0; padding-top: 1.25rem; max-width: 46ch; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.6; color: var(--muted); } .contact-aside img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; aspect-ratio: 4/3; object-fit: cover; } .contact-lines { margin-top: 1.25rem; color: var(--muted); font-size: 0.9375rem; } .contact-lines p { margin: 0 0 0.5rem; } .bundle-note { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--orange-soft); border-radius: var(--radius); border: 1px dashed var(--orange-border); font-size: 0.9375rem; color: var(--muted); } /* ===== Pricing board (Finament-kort på forsidens sort) ===== */ .page-pricing { background: #030303; color: #f5f2f0; } .pricing-board { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: #030303; padding: calc(var(--nav-h) + 4.5rem) 1.5rem 5.5rem; } .pricing-board__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .pricing-board__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, #000 20%, transparent 78%); } .pricing-hero { position: relative; z-index: 1; text-align: center; max-width: 42rem; margin: 0 auto 5rem; } .pricing-hero__title { margin: 0 0 0.85rem; font-family: var(--font-display); font-size: clamp(2.35rem, 5.5vw, 3.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.08; color: #fafaf9; max-width: none; } .pricing-hero__sub { margin: 0 auto; max-width: 42ch; font-family: var(--font-display); font-size: clamp(0.9375rem, 2vw, 1.0625rem); line-height: 1.65; letter-spacing: -0.015em; color: rgba(245, 242, 240, 0.68); font-weight: 400; } .pgrid { position: relative; z-index: 1; width: min(100%, 1240px); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: stretch; overflow: visible; } .pgrid::before { content: ""; position: absolute; left: 50%; top: 0; width: 52%; height: 88%; transform: translateX(-50%); background: radial-gradient(ellipse 70% 55% at 50% 28%, rgba(234, 88, 12, 0.2), transparent 72%), radial-gradient(ellipse 50% 40% at 50% 8%, rgba(255, 237, 213, 0.16), transparent 70%); pointer-events: none; z-index: 0; } .pcard { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding: 2.25rem 2rem 2.5rem; border-radius: 22px; background: #151413; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.65); overflow: hidden; color: inherit; text-decoration: none; cursor: pointer; transform: none; } a.pcard:hover { color: inherit; text-decoration: none; transform: none; } .pcard--featured { z-index: 2; border-color: rgba(234, 88, 12, 0.35); background: #1b1714; } .pcard--featured::after { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 3px; background: linear-gradient(90deg, transparent, #fdba74 20%, #fff7ed 50%, #fdba74 80%, transparent); pointer-events: none; } .pcard__badge { position: absolute; top: 1.15rem; right: 1.15rem; padding: 0.28rem 0.65rem; border-radius: 999px; border: 0; background: rgba(234, 88, 12, 0.16); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; color: #e4e4e7; } .pcard__name { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; color: #fafaf9; } /* "Fra" står over beløbet og ikke ved siden af: modelkortets pris er et udgangspunkt, og det skal læses før tallet — ikke som en fodnote bagefter. */ .pcard__from { display: block; margin: 1.5rem 0 0.35rem; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 242, 240, 0.64); } .pcard__price { margin: 1.5rem 0 0; font-family: var(--font-display); font-size: clamp(1.85rem, 2.4vw, 2.35rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: #fafaf9; } .pcard__from + .pcard__price { margin-top: 0; } .pcard__price span { margin-left: 0.15rem; font-size: 1rem; font-weight: 450; letter-spacing: -0.02em; color: rgba(245, 242, 240, 0.48); } /* Månedsprisen får sin egen linje under engangsprisen. Den lægges aldrig ind i tallet ovenover — det ene er at bygge tingen, det andet er at holde den i luften. */ .pcard__mo { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 450; letter-spacing: -0.015em; color: rgba(245, 242, 240, 0.7); } .pcard__mo--none { color: rgba(245, 242, 240, 0.6); } .pcard__desc { margin: 1.4rem 0 2rem; min-height: 3.2em; font-family: var(--font-display); font-size: 0.875rem; line-height: 1.65; color: rgba(245, 242, 240, 0.74); } .pcard__cta { width: 100%; justify-content: center; box-sizing: border-box; } .pcard__split { display: flex; align-items: center; gap: 0.75rem; margin: 1.85rem 0 1.25rem; } .pcard__split::before, .pcard__split::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); } .pcard__split span, .pcard__feat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 242, 240, 0.64); } .pcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.95rem; } .pcard__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-family: var(--font-display); font-size: 0.875rem; line-height: 1.4; color: rgba(245, 242, 240, 0.78); } .pcard__check { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.12rem; background: no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.2 6.4 11.3 12.8 4.4' stroke='%2378716c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pcard--featured .pcard__check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.2 6.4 11.3 12.8 4.4' stroke='%232dd4bf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (max-width: 900px) { .pricing-board { padding: calc(var(--nav-h) + 2.5rem) 1.15rem 4rem; } .pgrid { grid-template-columns: 1fr; max-width: 480px; align-items: stretch; } .pcard { padding: 2rem 1.5rem; } .pgrid::before { width: 90%; top: 28%; } .pcard__desc { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .pcard, a.pcard:hover { transform: none; transition: none; } } /* Tilbage til vaelgeren — sidder over titlen paa plan-siden */ .pricing-hero__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.35rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 242, 240, 0.5); text-decoration: none; transition: color 0.2s ease; } .pricing-hero__back::before { content: "←"; font-family: var(--font-display); letter-spacing: 0; } .pricing-hero__back:hover { color: #fafaf9; text-decoration: none; } /* ===== Ydelseskort (pricing.html og services.html) ===== Fire ydelser som store kort — mediefeltet er en tom grå flade indtil der ligger billeder. På prissiden er kortet ét , så hele fladen er klikbar; "Se priser" er derfor en , ikke et link i et link. På ydelsessiden viser de samme kort bare ydelserne og er

og ikke links: der findes ingen caseside at gå videre til, så hvert kort bærer selv sin case. */ .page-portfolio { background: #030303; color: #f5f2f0; } .pfol { position: relative; isolation: isolate; /* Rækkerne går ud til skærmkanten. Klipningen her holder dem fra at skabe en vandret rullebjælke på hele siden. */ overflow: hidden; background: #030303; /* Karrusellens egne mål, arvet ned til hver række. --pf-inline er den polstring, der centrerer ét kort i vinduet; resten af siden retter ind efter samme kant, så overskrifter og tal står på linje med kortene. */ --pf-inline: max(1.25rem, calc((100vw - min(92vw, var(--max))) / 2)); --pf-vpad: clamp(1rem, 3vw, 1.5rem); padding: calc(var(--nav-h) + 5rem) 0 6rem; } .pfol__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .pfol__glow { position: absolute; left: 50%; top: 0; width: min(120%, 1500px); height: min(60%, 720px); transform: translateX(-50%); z-index: 0; pointer-events: none; background: radial-gradient(ellipse 52% 46% at 50% 4%, rgba(234, 88, 12, 0.32), transparent 72%), radial-gradient(ellipse 30% 26% at 50% 0%, rgba(255, 237, 213, 0.1), transparent 74%); } .pfol__inner { position: relative; z-index: 1; } /* ----- Hero ----- */ .pfol-hero { margin: 0 0 clamp(2.75rem, 6vw, 4.5rem); padding-inline: var(--pf-inline); text-align: center; } .pfol__title { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5.2vw, 4rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; text-wrap: balance; color: #fafaf9; } .pfol__sub { margin: 1.25rem auto 0; max-width: 52ch; font-size: clamp(0.9375rem, 2vw, 1.0625rem); line-height: 1.6; letter-spacing: -0.015em; color: rgba(245, 242, 240, 0.6); } /* ----- Række ----- */ .pfol-rail { margin-top: clamp(3.5rem, 8vw, 6rem); } .pfol-rail__head { margin-bottom: clamp(1.35rem, 3vw, 2rem); padding-inline: var(--pf-inline); } .pfol-rail__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: #fafaf9; } .pfol-rail__sub { margin: 0.55rem 0 0; max-width: 46ch; font-size: 0.9375rem; line-height: 1.55; color: rgba(245, 242, 240, 0.5); } /* Feltet omkring karrusellen. Selve rullen, kortene og prikkerne er forsidens .pf-carousel — der er ingen egen udgave her. Kortene er sorte, fordi båndet på forsiden er lyst grå; her er siden selv næsten sort, så kortet får et løft for at have en kant at stå på. */ .page-portfolio .pf-carousel__card { background: #131315; } /* Resultatet står forrest i sætningen: det er tallet, der afgør om resten er værd at læse. */ .page-portfolio .pf-carousel__body strong { font-weight: 700; color: #f5f5f7; } /* ----- Tal ----- */ .pfol-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(4rem, 9vw, 7rem) var(--pf-inline) 0; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid rgba(245, 242, 240, 0.12); border-bottom: 1px solid rgba(245, 242, 240, 0.12); } .pfol-stat { text-align: center; padding-inline: 1rem; border-inline-start: 1px solid rgba(245, 242, 240, 0.1); } .pfol-stat:first-child { border-inline-start: 0; } .pfol-stat__num { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: #fafaf9; } .pfol-stat__label { /*

arver en indrykning fra browseren, som ville stille labelen forskudt under sit eget tal. */ margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; color: rgba(245, 242, 240, 0.5); } .pfol__foot { margin: clamp(2.75rem, 5vw, 3.5rem) 0 0; padding-inline: var(--pf-inline); text-align: center; font-size: 0.9375rem; color: rgba(245, 242, 240, 0.5); } .pfol__foot a { color: #fafaf9; text-underline-offset: 4px; } /* ----- Mindre skærme ----- */ @media (max-width: 900px) { .pfol { padding: calc(var(--nav-h) + 2.5rem) 0 4rem; } .pfol-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 2rem) 0; } /* I to kolonner er det kun midterlinjen, der giver mening. */ .pfol-stat:nth-child(odd) { border-inline-start: 0; } } /* Legal information stays readable on small screens and with a keyboard. */ .footer__static { overflow-wrap: anywhere; } .footer__legal { align-items: center; } .footer__legal a { display: inline-flex; align-items: center; min-height: 2rem; } .footer__lang a { color: rgba(245, 242, 240, 0.72); } .legal-note { margin: .8rem 0; color: #c5c3c0; font-size: .875rem; line-height: 1.65; } .legal-note a { color: #fdba74; text-decoration: underline; text-underline-offset: .2em; } .legal-note--pricing { max-width: 60ch; } .spick__hero .legal-note--pricing, .pricing-hero .legal-note--pricing { max-width: none; margin: 1rem 0 0; font-size: .8125rem; } .draft-option { margin: 1rem 0; } .draft-choice { display: flex; align-items: flex-start; gap: .65rem; color: #e8e6e3; font-size: .875rem; line-height: 1.5; cursor: pointer; } .draft-choice input { appearance: auto; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: #ea580c; } .draft-option .legal-note { margin-top: .4rem; max-width: 65ch; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #fdba74; outline-offset: 4px; } .skip-link { position: fixed; z-index: 10000; left: 1rem; top: 1rem; padding: .8rem 1.2rem; color: #fff; background: #151515; border: 2px solid #fdba74; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); }