/* ─── TOKENS ─── */ :root { --navy: #1A2A5E; --blue: #2f6fe0; --blue-dk: #1f56c3; --white: #ffffff; --black: #1d1d1f; --muted: #6e6e73; --soft: #86868b; --green: #00b67a; --border: rgba(0,0,0,0.08); --serif: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --sf: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --nav-h: 68px; --pad-x: clamp(2rem, 5vw, 5.5rem); /* Låste "scene"-bredder: indhold spreder sig ikke på store skærme (>1600px) */ --hero-stage: 1600px; --port-stage: 1180px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --sh-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --sh-md: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --sh-lg: 0 24px 64px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.05); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; /* OBS: Saet ALDRIG overflow-x paa — det stopper overflow-propageringen, goer til scroll-container og braekker hero'ens position:sticky. Brug 'clip' (ikke 'hidden') paa body: clip laaser KUN vandret akse uden at lave en scroll-container, saa hero'ens position:sticky bevares. 'hidden' er desuden upaalidelig til at stoppe vandret scroll paa iOS Safari. */ overflow-x: clip; } /* ─── KEYFRAMES ─── */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollCueMove { 0%, 100% { transform: translateY(0); opacity: 0.52; } 50% { transform: translateY(6px); opacity: 1; } } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes newsletterArrowPrimary { 0%, 58% { transform: translateX(0); opacity: 1; } 72% { transform: translateX(4px); opacity: 0; } 73%, 100% { transform: translateX(4px); opacity: 0; } } @keyframes newsletterArrowSecondary { 0%, 58% { transform: translateX(-4px); opacity: 0; } 72% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @keyframes newsletterCheckDraw { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } } /* ─── HERO FADE-IN UTILITY ─── */ .hero-fade-in { opacity: 0; animation: heroFadeUp 0.65s var(--ease-out) var(--delay, 0ms) both; } @media (prefers-reduced-motion: reduce) { .hero-fade-in { opacity: 1; animation: none; } } /* ─── NAV ─── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.25rem); background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); } body.nav-visible .nav { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav__brand { display: inline-flex; align-items: center; gap: 0.78rem; text-decoration: none; color: var(--black); font-family: var(--sf); font-size: 0.96rem; font-weight: 600; letter-spacing: -0.015em; flex-shrink: 0; } .nav__logo { width: 28px; height: 28px; object-fit: contain; display: block; flex-shrink: 0; } .nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.4rem); margin-inline: auto; } .nav__links a { color: rgba(29,29,31,0.72); text-decoration: none; font-family: var(--sf); font-size: 0.84rem; font-weight: 500; letter-spacing: -0.015em; transition: color 160ms var(--ease-out); } .nav__links a:hover { color: var(--black); } .nav__right { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; } .nav__login { color: rgba(29,29,31,0.72); text-decoration: none; font-family: var(--sf); font-size: 0.84rem; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; transition: color 160ms var(--ease-out); } .nav__login:hover { color: var(--black); } .nav__cta { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.65rem 1.25rem; background: var(--navy); color: #fff; font-family: var(--sf); font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; border-radius: 999px; white-space: nowrap; transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out); } .nav__cta:hover { background: #13214f; transform: translateY(-1px); } /* ─── NAV HAMBURGER ─── */ .nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5.5px; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; border-radius: 10px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .nav__hamburger:hover { background: rgba(0,0,0,0.05); } .nav__hamburger-bar { display: block; width: 22px; height: 1.5px; background: var(--navy); border-radius: 99px; transform-origin: center; transition: transform 0.28s var(--ease-out), opacity 0.2s var(--ease-out), width 0.2s var(--ease-out); } .nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) { opacity: 0; width: 0; } .nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── MOBIL MENU OVERLAY ─── */ .nav__mobile-overlay { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 290; background: rgba(255,255,255,0.98); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(0,0,0,0.07); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out); overflow-y: auto; overscroll-behavior: contain; } .nav__mobile-overlay.is-open { opacity: 1; pointer-events: auto; transform: none; } .nav__mobile-inner { display: flex; flex-direction: column; padding: 0.75rem 0.75rem 2rem; flex: 1; } .nav__mobile-link { display: flex; align-items: center; min-height: 56px; padding: 0 1rem; font-family: var(--sf); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.022em; color: rgba(29,29,31,0.88); text-decoration: none; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: background 0.12s, color 0.12s; } .nav__mobile-link:active { background: rgba(0,0,0,0.05); } .nav__mobile-sep { height: 1px; background: rgba(0,0,0,0.07); margin: 0.5rem 1rem; } .nav__mobile-foot { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.65rem; } .nav__mobile-cta-btn { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; border-radius: 14px; background: var(--navy); color: #fff; font-family: var(--sf); font-size: 0.97rem; font-weight: 700; letter-spacing: -0.015em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .nav__mobile-cta-btn:active { background: #13214f; } .nav__mobile-login-btn { display: flex; align-items: center; justify-content: center; min-height: 3rem; border-radius: 14px; background: transparent; color: var(--navy); border: 1px solid rgba(26,42,94,0.18); font-family: var(--sf); font-size: 0.97rem; font-weight: 600; letter-spacing: -0.015em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .nav__mobile-login-btn:active { background: rgba(26,42,94,0.04); } body.nav-menu-open { overflow: hidden; } /* Desktop: skjul overlay fuldstændigt */ @media (min-width: 821px) { .nav__mobile-overlay { display: none; } } /* ─── CINEMATIC HERO ─── */ .hero { position: relative; background: #ffffff; } .hero__track { position: relative; height: 165vh; } .hero__sticky { position: sticky; top: 0; height: 100svh; overflow: clip; background: #ffffff; } /* shared absolute-fill layers */ .hero__backdrop, .hero__aura, .hero__opening, .hero__transition { position: absolute; inset: 0; } /* Lås de to forsider til en fast scene-bredde og centrér dem, så indholdet ikke spreder sig på skærme bredere end --hero-stage. Baggrund/aura forbliver fuld bredde. Påvirker først ved viewport > --hero-stage; ingen ændring på normale laptops. (transform bruges af scroll-animationen og røres ikke.) */ .hero__opening, .hero__transition { max-width: var(--hero-stage); margin-inline: auto; } .hero__backdrop { background: #ffffff; z-index: 0; } .hero__aura { inset: 8% -6% auto auto; width: min(68vw, 960px); height: min(68vw, 960px); border-radius: 50%; filter: blur(160px); background: radial-gradient(circle, rgba(47,111,224,0.18) 0%, rgba(47,111,224,0) 72%); z-index: 1; pointer-events: none; opacity: 0; } /* ─── OPENING LAYER ─── */ .hero__opening { z-index: 5; pointer-events: none; display: flex; align-items: center; justify-content: flex-start; padding: calc(var(--nav-h) + clamp(1.2rem, 4vh, 2rem)) clamp(2rem, 4vw, 4rem) clamp(4.5rem, 9vh, 6rem) 36%; pointer-events: auto; will-change: opacity, transform; } .hero__opening-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 2.2vh, 1.8rem); width: 100%; position: relative; z-index: 2; } /* Daniel cutout – big image anchored bottom-left */ .hero__cutout { position: absolute; bottom: 0; left: -13%; /* HELE Daniel skal altid vises – aldrig beskåret i siderne. Derfor object-fit:contain (ingen crop). Bagsiden er at contain skalerer efter højden, så billedet med den hvide luft i siderne bliver meget bredt på høje skærme og skubber ham ind under teksten. 43vw-loftet på højden holder hans samlede bredde nede, så hele hans silhuet (ikke bare ansigtet) altid ender til venstre for tekst-kolonnen (padding-left 36%) – uanset skærmforhold. På lave/brede skærme er 83svh mindre og styrer, så han vises så stor som muligt uden at ramme teksten. */ height: min(83svh, 43vw); width: auto; object-fit: contain; object-position: bottom left; z-index: 1; pointer-events: none; user-select: none; mix-blend-mode: multiply; } /* "Danmarks største..." headline */ .hero__opening-title { margin: 0; display: flex; flex-direction: column; align-items: center; font-family: var(--sf); font-size: clamp(5.1rem, 6vw, 7.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; color: var(--navy); text-align: center; width: 100%; } .hero__opening-title-line { display: block; white-space: nowrap; } .hero__opening-title-accent { color: var(--blue); } /* ─── STATS ROW ─── */ .hero__stats { display: flex; align-items: flex-start; justify-content: center; gap: 0; width: min(100%, 680px); position: relative; z-index: 1; } .hero__stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0 clamp(0.75rem, 2.5vw, 2rem); text-align: center; } .hero__stat-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; } .hero__stat-number { font-family: var(--sf); font-size: clamp(2.6rem, 4.2vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--navy); font-variant-numeric: tabular-nums; } .hero__stat-star { font-size: clamp(2.6rem, 4.2vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--green); } .hero__stat-label { font-family: var(--mono); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(26,42,94,0.5); line-height: 1.45; white-space: nowrap; } .hero__stat-divider { width: 1px; height: 4.5rem; background: rgba(26,42,94,0.13); align-self: center; flex-shrink: 0; } /* ─── PRESS MARQUEE ─── */ .hero__marquee { width: min(100%, 640px); overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); } .hero__marquee-track { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); width: max-content; animation: marqueeScroll 28s linear infinite; padding: 0.5rem 0; } .hero__marquee:hover .hero__marquee-track { animation-play-state: paused; } .hero__marquee-logo { height: clamp(26px, 3.2vw, 36px); width: auto; max-width: 140px; object-fit: contain; opacity: 0.45; filter: grayscale(1) brightness(0.7); transition: opacity 0.22s, filter 0.22s; flex-shrink: 0; display: block; } .hero__marquee-logo--large { height: clamp(26px, 3.2vw, 36px); max-width: 140px; } .hero__marquee-logo--small { height: clamp(18px, 2.2vw, 26px); max-width: 100px; } .hero__marquee-link { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .hero__marquee-link:hover .hero__marquee-logo { opacity: 1; filter: grayscale(1) brightness(1.15) contrast(1.1); } .hero__marquee:hover .hero__marquee-logo { opacity: 0.6; filter: grayscale(1) brightness(0.85); } /* ─── SCROLL CUE ─── */ .hero__scroll-cue { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 7; pointer-events: auto; cursor: pointer; background: none; border: none; padding: 0.5rem; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); } .hero__scroll-cue.is-hidden { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); } .hero__scroll-label { display: block; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(26,42,94,0.72); animation: scrollCueMove 2.2s ease-in-out infinite; white-space: nowrap; } /* ─── TRANSITION LAYER (fades in as opening fades out) ─── */ .hero__transition { z-index: 6; pointer-events: none; opacity: 0; will-change: opacity; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44vw); align-items: start; gap: clamp(2rem, 4vw, 4rem); padding: calc(var(--nav-h) + clamp(2.5rem, 5vh, 4rem)) clamp(2rem, 4vw, 4rem) clamp(2rem, 5vh, 3rem) clamp(2rem, 6vw, 5rem); } /* white wash that crossfades over the cream background */ .hero__transition-bg { position: absolute; inset: 0; background: var(--white); opacity: 0; z-index: 0; will-change: opacity; pointer-events: none; } .hero__transition-copy { display: flex; flex-direction: column; position: relative; z-index: 1; pointer-events: auto; will-change: transform; } .hero__transition-brand { display: grid; gap: 0.18em; font-family: var(--sf); font-size: clamp(5.2rem, 8.4vw, 9.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; color: #000; will-change: transform; } .hero__transition-brand > span:first-child { font-size: inherit; } .hero__transition-brand-line { display: inline-flex; align-items: flex-end; gap: 0.04em; white-space: nowrap; } .hero__transition-dot { display: inline-block; width: 0.18em; height: 0.18em; margin-bottom: 0.08em; border-radius: 50%; background: var(--blue); flex-shrink: 0; } .hero__transition-lead { max-width: 18ch; margin-top: 2.4rem; font-family: var(--sf); font-size: clamp(1.85rem, 2.8vw, 3rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.055em; color: rgba(21,21,24,0.94); text-wrap: balance; will-change: transform; } .hero__transition-list { margin-top: 2rem; list-style: none; display: grid; gap: 0.9rem; color: rgba(31,54,117,0.76); font-family: var(--sf); font-size: clamp(1.45rem, 1.6vw, 1.8rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; will-change: transform; } .hero__transition-list li { display: flex; align-items: flex-start; gap: 0.8rem; } .hero__transition-list li::before { content: "→"; color: rgba(31,54,117,0.92); line-height: 1; transform: translateY(0.08em); } .hero__transition-list .price { color: var(--blue); } .hero__transition-list a { color: inherit; text-decoration: underline; text-decoration-color: rgba(31,54,117,0.28); text-underline-offset: 3px; transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out); } .hero__transition-list a:hover { color: var(--blue); text-decoration-color: var(--blue); } .hero__transition-actions { margin-top: 1.6rem; display: flex; align-items: center; gap: 0.9rem; } .hero__transition-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.85rem 1.4rem; border-radius: 999px; background: var(--navy); color: var(--white); font-family: var(--sf); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; box-shadow: 0 14px 30px rgba(26,42,94,0.14); transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); } .hero__transition-cta:hover { background: #13214f; transform: translateY(-1px); box-shadow: 0 18px 34px rgba(26,42,94,0.18); } /* photo card on right */ .hero__transition-photo { justify-self: end; align-self: start; width: min(calc(100% + clamp(2rem, 4vw, 4rem)), 38rem); margin-right: calc(clamp(1rem, 3vw, 2.25rem) - clamp(2rem, 4vw, 4rem)); margin-top: clamp(0.35rem, 1vh, 0.9rem); border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(26,42,94,0.06); box-shadow: 0 28px 64px rgba(15,23,42,0.14), 0 10px 28px rgba(24,34,72,0.08); position: relative; z-index: 1; will-change: transform; } .hero__transition-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } /* scanline effect */ .hero__scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--navy); box-shadow: 0 0 16px 3px rgba(26,42,94,0.25); opacity: 0; z-index: 10; pointer-events: none; will-change: transform, opacity; } /* ─── COURSES SECTION ─── */ .courses { position: relative; scroll-margin-top: calc(var(--nav-h) + 0.75rem); padding: clamp(4.25rem, 6vw, 5.75rem) clamp(1.5rem, 4vw, 4rem) clamp(4.5rem, 8vw, 8rem); isolation: isolate; overflow-x: clip; } .courses::before { content: ''; position: absolute; inset: 0; border-radius: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem) 0 0; background: radial-gradient(circle at 50% 0%, rgba(47,111,224,0.08) 0%, rgba(47,111,224,0) 56%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); box-shadow: 0 -18px 52px rgba(15,23,42,0.05), 0 20px 48px rgba(24,34,72,0.03); z-index: -2; } .courses::after { content: ''; position: absolute; top: 0; left: 50%; width: min(76vw, 680px); height: clamp(92px, 13vw, 128px); background: radial-gradient(ellipse at center, rgba(47,111,224,0.12) 0%, rgba(47,111,224,0) 72%); filter: blur(10px); opacity: 0; transform: translate(-50%, -42%) scaleX(0.82); transform-origin: center; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); z-index: -1; pointer-events: none; } .courses.is-visible::after { opacity: 0.68; transform: translate(-50%, -34%) scaleX(1); } @media (prefers-reduced-motion: reduce) { .courses::after { transition: none; opacity: 1; transform: translate(-50%, -34%) scaleX(1); } .course-card--light, .course-card--dark { opacity: 1; translate: none; transition: none; } } /* grid */ .courses__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr); gap: clamp(1.25rem, 2.6vw, 2.25rem); max-width: 1180px; margin: 0 auto; align-items: stretch; padding: clamp(0.45rem, 1.2vw, 0.9rem) 0 1rem; } .courses__grid::before { content: ''; position: absolute; top: 1rem; bottom: 3.25rem; left: 50%; width: 1px; background: linear-gradient(180deg, rgba(47,111,224,0.18), rgba(47,111,224,0.05) 62%, transparent); opacity: 0; transform: translateX(-50%) scaleY(0.72); transform-origin: top; transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; } .courses.is-visible .courses__grid::before { opacity: 1; transform: translateX(-50%) scaleY(1); } /* cards */ [id^="kursus-"] { /* Ved klik på intro-knapperne ("Investering for Begyndere" / "Investeringskursus") skal kort-rækken (≈40rem høj) centreres i skærmen i stedet for at blive scrollet helt op under menuen (føltes som at man kom for langt ned). Vi centrerer via (skærmhøjde − korthøjde)/2, men aldrig højere end lige under menuen – så på lave skærme, hvor kortene er højere end pladsen, falder den tilbage til top-justering. */ scroll-margin-top: max(calc(var(--nav-h) + 1rem), calc((100svh - 40rem) / 2)); } /* Det mørke kursus-kort er hævet 1,5rem (margin-top: -1.5rem), så det lyse begynder-kort sidder 1,5rem lavere. Uden kompensation scroller et klik på begynder-knappen 1,5rem længere ned end på kursus-knappen. Vi lægger 1,5rem til, så begge intro-knapper lander præcis samme sted. */ #kursus-begyndere { scroll-margin-top: calc(max(calc(var(--nav-h) + 1rem), calc((100svh - 40rem) / 2)) + 1.5rem); } .course-card { position: relative; overflow: visible; border-radius: clamp(1.5rem, 2vw, 2rem); padding: clamp(2rem, 3.5vw, 3rem); padding-top: clamp(3.8rem, 4.5vw, 4.75rem); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .course-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .course-card--light { background: var(--white); border: 1px solid rgba(0,0,0,0.08); box-shadow: var(--sh-md); margin-right: -0.55rem; z-index: 1; opacity: 0; translate: -88px 26px; transition: translate 1.4s var(--ease-out), opacity 0.9s var(--ease-out), transform 0.3s ease, box-shadow 0.3s ease; } .course-card--dark { background: var(--navy); color: var(--white); box-shadow: 0 20px 60px rgba(26,42,94,0.3), 0 4px 16px rgba(26,42,94,0.2); margin-left: -1.65rem; margin-top: -1.5rem; z-index: 2; opacity: 0; translate: 88px 44px; transition: translate 1.4s var(--ease-out) 100ms, opacity 0.9s var(--ease-out) 100ms, transform 0.3s ease, box-shadow 0.3s ease; } .courses.is-visible .course-card--light, .courses.is-visible .course-card--dark { opacity: 1; translate: 0px 0px; } .card-badge { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.3rem; width: fit-content; } .card-badge::before { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; flex-shrink: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: 0; } .course-card--light .card-badge { color: rgba(26,42,94,0.72); } .course-card--dark .card-badge { color: rgba(255,255,255,0.72); } .course-card--light .card-badge::before { content: "1"; background: #eef4ff; color: var(--blue); } .course-card--dark .card-badge::before { content: "2"; background: rgba(255,255,255,0.08); color: var(--white); } .card-kicker { font-family: var(--serif); font-style: italic; font-size: 0.9rem; font-weight: 400; margin-bottom: 0.5rem; } .course-card--light .card-kicker { color: var(--muted); } .course-card--dark .card-kicker { color: rgba(255,255,255,0.55); } .card-headline { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 0.85rem; } .course-card--light .card-headline { color: var(--black); } .course-card--dark .card-headline { color: var(--white); font-size: clamp(2.2rem, 3.5vw, 3.1rem); max-width: 10ch; } .card-body { font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.6rem; } .course-card--light .card-body { color: var(--muted); } .course-card--dark .card-body { color: rgba(255,255,255,0.6); } .card-points { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; flex: 1; } .card-point { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; line-height: 1.55; } .card-point-arrow { flex-shrink: 0; font-size: 0.75rem; line-height: 1.55; font-weight: 700; } .course-card--light .card-point { color: rgba(29,29,31,0.8); } .course-card--light .card-point-arrow { color: var(--blue); } .course-card--dark .card-point { color: rgba(255,255,255,0.75); } .course-card--dark .card-point-arrow { color: rgba(255,255,255,0.5); } .card-footer { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid; gap: 1rem; flex-wrap: wrap; } .course-card--light .card-footer { border-color: rgba(0,0,0,0.08); } .course-card--dark .card-footer { border-color: rgba(255,255,255,0.1); } .card-price-label { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3rem; } .course-card--light .card-price-label { color: var(--soft); } .course-card--dark .card-price-label { color: rgba(255,255,255,0.4); } .card-price { display: flex; align-items: flex-end; gap: 0.35rem; line-height: 1; } .card-price-amount { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; } .course-card--light .card-price-amount { color: var(--navy); } .course-card--dark .card-price-amount { color: var(--white); } .card-price-term { font-family: var(--mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 0.3rem; } .course-card--light .card-price-term { color: var(--soft); } .course-card--dark .card-price-term { color: rgba(255,255,255,0.45); } .card-cta { display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; border-radius: 999px; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; white-space: nowrap; } .card-cta--navy { background: var(--navy); color: #fff; } .card-cta--navy:hover { background: #132047; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,42,94,0.3); } .card-cta--blue { background: var(--blue); color: #fff; box-shadow: 0 4px 16px rgba(47,111,224,0.35); } .card-cta--blue:hover { background: var(--blue-dk); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(47,111,224,0.45); } /* ─── CONTENT FEED ─── */ .content-feed { position: relative; padding: clamp(4.25rem, 6vw, 5.75rem) var(--pad-x); background: #f7faff; } .content-feed__shell { max-width: 1240px; margin: 0 auto; } .content-feed__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; } .content-feed__title { font-family: var(--sf); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.045em; color: var(--navy); margin-bottom: 0.5rem; } .content-feed__lead { font-size: 1rem; color: var(--muted); margin-bottom: 0; } .content-feed__channel-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.8rem 1.25rem; border-radius: 999px; border: 1px solid rgba(26,42,94,0.12); background: rgba(255,255,255,0.85); color: var(--navy); text-decoration: none; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out); } .content-feed__channel-link:hover { transform: translateY(-1px); background: #ffffff; border-color: rgba(47,111,224,0.28); } .content-feed__body { border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,249,255,0.98) 100%); border: 1px solid rgba(26,42,94,0.08); box-shadow: 0 24px 64px rgba(26,42,94,0.08), 0 6px 18px rgba(15,23,42,0.04); min-height: 400px; } .content-feed__body--youtube { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr); gap: clamp(1.25rem, 2.5vw, 2rem); padding: clamp(1.25rem, 2vw, 1.75rem); } .content-feed__featured { display: grid; gap: 0; min-width: 0; position: relative; } .content-feed__player-frame { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(135deg, rgba(11,32,68,0.96) 0%, rgba(26,42,94,0.92) 42%, rgba(47,111,224,0.88) 100%); box-shadow: 0 24px 48px rgba(15,23,42,0.16); aspect-ratio: 16 / 9; } .content-feed__player { width: 100%; height: 100%; border: 0; } .content-feed__player-preview { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; overflow: hidden; background: #0f172a; } .content-feed__player-preview-image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); } .content-feed__featured-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 1.8vw, 1.5rem); pointer-events: none; background: linear-gradient(180deg, rgba(8,14,31,0) 0%, rgba(8,14,31,0.72) 100%); } .content-feed__featured-title { font-family: var(--sf); max-width: min(82%, 18ch); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; color: #ffffff; text-shadow: 0 8px 24px rgba(0,0,0,0.35); } .content-feed__rail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1rem; border-radius: 24px; border: 1px solid rgba(26,42,94,0.08); background: rgba(255,255,255,0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .content-feed__rail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .content-feed__rail-title { font-family: var(--sf); font-size: 1rem; font-weight: 650; letter-spacing: -0.03em; color: var(--navy); } .content-feed__rail-status { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26,42,94,0.5); white-space: nowrap; } .content-feed__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-content: start; } .content-feed__item { width: 100%; border: 1px solid rgba(26,42,94,0.08); border-radius: 20px; background: #ffffff; color: inherit; text-align: left; text-decoration: none; padding: 0.8rem; transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s var(--ease-out); } button.content-feed__item { appearance: none; cursor: pointer; font: inherit; } .content-feed__item:hover { transform: translateY(-1px); border-color: rgba(47,111,224,0.24); box-shadow: 0 14px 28px rgba(15,23,42,0.08); } .content-feed__item.is-active { border-color: rgba(47,111,224,0.34); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,247,255,1) 100%); box-shadow: 0 16px 30px rgba(47,111,224,0.12); } .content-feed__item-inner { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: start; } .content-feed__thumb { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(11,32,68,0.9), rgba(47,111,224,0.72)); } .content-feed__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .content-feed__item-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; } .content-feed__item-badge { display: inline-flex; align-items: center; width: fit-content; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(47,111,224,0.92); } .content-feed__item-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.95rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.025em; color: var(--navy); } .content-feed__item-meta { font-size: 0.84rem; line-height: 1.45; color: var(--muted); } .content-feed__item--placeholder { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 1rem 1.05rem; } @media (max-width: 1120px) { .content-feed__body--youtube { grid-template-columns: minmax(0, 1fr); } .content-feed__featured-meta { max-width: none; } .content-feed__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ─── SAMMENLIGNING ─── */ .cmp { background: #ffffff; padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem); position: relative; border-top: 1px solid rgba(26,42,94,0.08); } .cmp__shell { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; } .cmp__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; } .cmp__header-left { flex: 1 1 auto; min-width: 0; } .cmp__label { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 0.75rem; } .cmp__label--sub { margin: 0.5rem 0 0; color: rgba(26,42,94,0.38); font-weight: 600; letter-spacing: 0.12em; } .cmp__title { font-family: var(--sf); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; color: var(--navy); margin: 0; } .cmp__title-dot { color: var(--blue); } /* Toggle */ .cmp__toggle-wrap { flex: 0 0 auto; position: relative; display: flex; align-items: center; background: rgba(26,42,94,0.05); border: 1px solid rgba(26,42,94,0.14); border-radius: 999px; padding: 4px; gap: 0; } .cmp__toggle-bubble { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); background: var(--navy); border-radius: 999px; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 0; } .cmp__tab { position: relative; z-index: 1; background: none; border: none; cursor: pointer; pointer-events: auto; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); padding: 0.6rem 1.25rem; border-radius: 999px; white-space: nowrap; transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1); line-height: 1; } .cmp__tab[aria-selected="true"] { background: var(--navy); color: #fff; } .cmp__tab[aria-selected="false"] { color: rgba(26,42,94,0.55); } .cmp__tab[aria-selected="false"]:hover { color: var(--navy); background: rgba(26,42,94,0.06); } /* Hairline */ .cmp__hairline { width: 100%; height: 1px; background: rgba(26,42,94,0.10); } .cmp__hairline--bottom { margin-top: 2.5rem; } /* Panels */ .cmp__panels { padding-top: 2.5rem; position: relative; } .cmp__panel { display: none; } .cmp__panel.is-active { display: block; } /* Grid */ .cmp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } /* Card */ .cmp__card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem; background: #ffffff; border: 1px solid rgba(26,42,94,0.10); border-radius: 10px; box-shadow: 0 1px 3px rgba(26,42,94,0.06), 0 4px 12px rgba(26,42,94,0.04); transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background 540ms cubic-bezier(0.4, 0, 0.2, 1), border-color 540ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; } .cmp__card:hover { transform: translateY(-4px); background: #1F3272; border-color: #1F3272; box-shadow: 0 4px 12px rgba(15,23,42,0.22), 0 20px 60px rgba(15,23,42,0.32); } /* Begynderkurset: lys blå hover (samme som bag "1"-tallet) */ #panel-begynder .cmp__card:hover { background: #d1e1ff; border-color: rgba(47,111,224,0.25); box-shadow: 0 4px 12px rgba(47,111,224,0.1), 0 20px 60px rgba(47,111,224,0.16); } #panel-begynder .cmp__card:hover .cmp__card-num { color: var(--blue); } #panel-begynder .cmp__card:hover .cmp__card-title { color: var(--navy); } #panel-begynder .cmp__card:hover .cmp__card-desc { color: rgba(26,42,94,0.7); } #panel-begynder .cmp__card:hover .cmp__card-dur { color: rgba(26,42,94,0.5); border-top-color: rgba(47,111,224,0.18); } #panel-begynder .cmp__card:hover .cmp__card-dur span[aria-hidden] { color: var(--blue); } #panel-begynder .cmp__card:hover .cmp__card-expand { color: rgba(47,111,224,0.5); } /* Begynder-tab aktiv: lys blå (samme som bag "1"-tallet) */ #tab-begynder[aria-selected="true"] { background: #eef4ff; color: var(--blue); } /* Når Begynder er aktiv, skal den glidende boble matche den lyseblå fane, så den navyfarvede boble ikke stikker ud som en mørk kant i højre side. */ .cmp__toggle-wrap:has(#tab-begynder[aria-selected="true"]) .cmp__toggle-bubble { background: #eef4ff; } .cmp__card:hover .cmp__card-num { color: rgba(255,255,255,0.55); } .cmp__card:hover .cmp__card-title { color: #ffffff; } .cmp__card:hover .cmp__card-desc { color: rgba(255,255,255,0.72); } .cmp__card:hover .cmp__card-dur { color: rgba(255,255,255,0.50); border-top-color: rgba(255,255,255,0.12); } .cmp__card:hover .cmp__card-dur span[aria-hidden] { color: #5b9cf6; } .cmp__card-num { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); transition: color 480ms cubic-bezier(0.4, 0, 0.2, 1); } .cmp__card-title { font-family: var(--sf); font-size: 1rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.3; color: var(--navy); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: color 480ms cubic-bezier(0.4, 0, 0.2, 1); } .cmp__card-desc { font-family: var(--sf); font-size: 0.82rem; font-weight: 400; line-height: 1.55; color: rgba(26,42,94,0.65); margin: 0; flex: 1; transition: color 480ms cubic-bezier(0.4, 0, 0.2, 1); } .cmp__card-dur { display: flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,42,94,0.50); margin-top: auto; padding-top: 0.65rem; border-top: 1px solid rgba(26,42,94,0.07); transition: color 480ms cubic-bezier(0.4, 0, 0.2, 1), border-top-color 480ms cubic-bezier(0.4, 0, 0.2, 1); } .cmp__card-dur span[aria-hidden] { font-size: 0.4rem; color: var(--blue); line-height: 1; flex-shrink: 0; transition: color 480ms cubic-bezier(0.4, 0, 0.2, 1); } .cmp__card-expand { position: absolute; top: 1rem; right: 1rem; font-size: 0.78rem; color: rgba(26,42,94,0.25); transition: color 280ms var(--ease-out), transform 280ms var(--ease-out); line-height: 1; } .cmp__card:hover .cmp__card-expand { color: rgba(255,255,255,0.5); transform: translate(2px, -2px); } /* ─── MODUL MODAL ─── */ .mod-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .mod-modal[hidden] { display: none; } .mod-modal__backdrop { position: absolute; inset: 0; background: rgba(10,18,40,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; animation: modalBackdropIn 220ms var(--ease-out) both; } .mod-modal__card { position: relative; z-index: 1; background: #ffffff; border-radius: 20px; padding: clamp(2rem, 4vw, 3rem); width: min(100%, 560px); max-height: 90svh; overflow-y: auto; box-shadow: 0 32px 80px rgba(10,18,40,0.28), 0 8px 24px rgba(10,18,40,0.12); animation: modalCardIn 300ms var(--ease-out) both; } .mod-modal__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; background: rgba(26,42,94,0.06); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--navy); transition: background 160ms, transform 160ms; } .mod-modal__close:hover { background: rgba(26,42,94,0.12); transform: scale(1.08); } .mod-modal__close svg { width: 16px; height: 16px; } .mod-modal__num { display: inline-block; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.75rem; } .mod-modal__title { font-family: var(--sf); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--navy); margin: 0 0 1rem; padding-right: 2rem; } .mod-modal__desc { font-size: 0.95rem; line-height: 1.65; color: var(--muted); margin: 0 0 1.5rem; } .mod-modal__lessons { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.75rem; padding: 0; } .mod-modal__lessons li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.85rem; background: rgba(47,111,224,0.04); border-radius: 8px; border-left: 2px solid rgba(47,111,224,0.25); } .mod-modal__lessons li::before { content: "→"; color: var(--blue); font-size: 0.8rem; flex-shrink: 0; margin-top: 0.15em; } .mod-modal__lesson-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .mod-modal__lesson-title { font-size: 0.9rem; font-weight: 600; line-height: 1.45; color: var(--navy); } .mod-modal__lesson-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .mod-modal__lesson-time { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(26,42,94,0.55); } .mod-modal__lesson-tools { font-family: var(--sf); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--blue); background: rgba(47,111,224,0.1); padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; } .mod-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(26,42,94,0.08); flex-wrap: wrap; } .mod-modal__dur { font-family: var(--mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,42,94,0.5); } .mod-modal__cta { display: inline-flex; align-items: center; padding: 0.6rem 1.25rem; background: var(--navy); color: #fff; font-family: var(--sf); font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; border-radius: 999px; transition: background 0.18s, transform 0.18s; } .mod-modal__cta:hover { background: #13214f; transform: translateY(-1px); } @keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalCardIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Summary strip */ .cmp__summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.25rem; flex-wrap: wrap; } .cmp__summary-meta { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,42,94,0.50); } .cmp__summary-cta { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); text-decoration: none; position: relative; } .cmp__summary-cta::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--navy); transition: width 0.22s var(--ease-out); } .cmp__summary-cta:hover::after { width: 100%; } .cmp__card--wip { opacity: 0.6; } .cmp__card--wip .cmp__card-num::after { content: ' · KOMMER SNART'; color: rgba(26,42,94,0.40); } /* Card stagger animation */ @keyframes cmpCardIn { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .cmp__card.is-entering { animation: cmpCardIn 520ms var(--ease-out) both; will-change: opacity, transform; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .cmp__toggle-bubble { transition: none; } .cmp__card { transition: none; } .cmp__card:hover { transform: none; } .cmp__card.is-entering { animation: none; opacity: 1; } } /* Responsive */ @media (max-width: 960px) { .cmp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .cmp__header { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .cmp__toggle-wrap { width: 100%; } .cmp__tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: normal; line-height: 1.4; padding: 0.6rem 0.75rem; } .cmp__title { font-size: clamp(2rem, 8vw, 2.8rem); } } @media (max-width: 480px) { .cmp__grid { grid-template-columns: 1fr; } .cmp { padding: 3rem 1rem; } .cmp__tab { font-size: 0.66rem; letter-spacing: 0.04em; padding: 0.6rem 0.4rem; } } /* ─── YOUTUBE SECTION ─── */ @keyframes ytPulseRing { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.6); opacity: 0; } } @keyframes ytGreenBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } @keyframes ytSkeletonShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .yt-section { scroll-margin-top: calc(var(--nav-h) + 0.75rem); padding: clamp(4.25rem, 6vw, 5.75rem) var(--pad-x); background: #f7faff; position: relative; } .yt-shell { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } /* ─── Headline block ─── */ .yt-headline { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; } .yt-headline__left { flex: 0 0 auto; min-width: 0; } .yt-label { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.85rem; } .yt-title { font-family: var(--sf); font-size: clamp(2rem, 4.2vw, 3.8rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; color: var(--navy); margin: 0; } .yt-title__dot { color: #2B6FE0; } /* subs count to the right, vertically centered with title */ .yt-subs-inline { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; } .yt-hand { font-family: 'Caveat', cursive; line-height: 1.1; display: block; } .yt-hand--subs { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 500; color: #2B6FE0; opacity: 0.82; transform: rotate(-2deg); transform-origin: left center; white-space: nowrap; } .yt-underline { width: 100%; max-width: 190px; height: 14px; display: block; margin-top: -0.2rem; opacity: 0.7; } .yt-hand--growth { font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 500; color: #2B6FE0; transform: rotate(-2deg); transform-origin: left center; opacity: 0.82; } /* ─── Sub-info strip ─── */ .yt-strip { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(26,42,94,0.13); } .yt-strip__live { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(26,42,94,0.6); } .yt-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: ytGreenBlink 2s ease-in-out infinite; flex-shrink: 0; } .yt-channel-link { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); text-decoration: none; white-space: nowrap; position: relative; transition: color 0.18s var(--ease-out); } .yt-channel-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--blue); transition: width 0.22s var(--ease-out); } .yt-channel-link:hover { color: var(--blue); } .yt-channel-link:hover::after { width: 100%; } /* ─── Main content area ─── */ .yt-main { display: block; } /* (kept for potential future use) */ .yt-featured { display: none; } .yt-player-wrap { position: relative; border-radius: 20px; overflow: hidden; background: #0b1428; aspect-ratio: 16 / 9; border: 1px solid rgba(26,42,94,0.08); box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.08), 0 24px 64px rgba(15,23,42,0.10); } /* Preview thumbnail overlay (JS-created) */ .yt-preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #0b1428; border: 0; padding: 0; width: 100%; overflow: hidden; } .yt-preview__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out), opacity 0.35s ease; transform: scale(1.02); } .yt-preview:hover .yt-preview__img { transform: scale(1.05); opacity: 0.86; } /* Circular play button (JS-created inside .yt-preview) */ .yt-play-btn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12); flex-shrink: 0; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .yt-preview:hover .yt-play-btn { transform: scale(1.08); box-shadow: 0 14px 44px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.16); } .yt-play-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.65); animation: ytPulseRing 2s var(--ease-out) infinite; pointer-events: none; } .yt-play-icon { width: 28px; height: 28px; margin-left: 5px; display: block; } /* iframe (hidden until preview click; visible initially for no-JS) */ .yt-player { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* metadata below player */ .yt-featured-meta { display: flex; flex-direction: column; gap: 0.4rem; } .yt-featured-title { font-family: var(--sf); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -0.03em; color: var(--navy); line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; } .yt-featured-stats { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(26,42,94,0.45); margin: 0; } /* ─── Grid container ─── */ .yt-grid-container { position: relative; } /* ─── Annotation (floating above first card) ─── */ .yt-annotation { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; pointer-events: none; } .yt-hand--newest { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; color: var(--navy); transform: rotate(-8deg); transform-origin: left center; } .yt-arrow-doodle { width: 38px; height: 68px; margin-left: 1.2rem; margin-top: -0.25rem; opacity: 0.85; } .yt-hand--hint { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; color: #2B6FE0; transform: rotate(3deg); transform-origin: left center; line-height: 1.3; opacity: 0.88; } /* ─── Latest videos 3-grid ─── */ .yt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; } .yt-card { display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; color: inherit; transition: transform 0.22s var(--ease-out); position: relative; } .yt-card:hover { transform: translateY(-3px); } .yt-card__thumb { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0b1428 0%, #1a2a5e 100%); border: 1px solid rgba(26,42,94,0.08); } .yt-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.42s var(--ease-out); } .yt-card:hover .yt-card__thumb img { transform: scale(1.04); } /* mini play button overlay on grid cards */ .yt-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; } .yt-card__play-inner { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 4px 16px rgba(0,0,0,0.22); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .yt-card:hover .yt-card__play-inner { transform: scale(1.14); box-shadow: 0 6px 22px rgba(0,0,0,0.28); } .yt-card__play-inner svg { width: 14px; height: 14px; margin-left: 2px; display: block; } .yt-card__title { font-family: var(--sf); font-size: 0.93rem; font-weight: 650; line-height: 1.38; letter-spacing: -0.022em; color: var(--navy); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .yt-card__meta { font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(26,42,94,0.42); } /* skeleton loading state */ .yt-card--skeleton .yt-card__thumb { background: linear-gradient(90deg, rgba(26,42,94,0.04) 0px, rgba(26,42,94,0.09) 60px, rgba(26,42,94,0.04) 120px ); background-size: 800px 100%; animation: ytSkeletonShimmer 1.6s infinite linear; } /* ─── Favorite card annotation ─── */ .yt-card-wrap { position: relative; padding-bottom: 1.8rem; /* space for the tag below */ } .yt-card-wrap--favorite .yt-card::before { content: ''; position: absolute; inset: -10px; border: 2.5px solid #2B6FE0; border-radius: 14px 22px 18px 16px / 20px 14px 24px 18px; transform: rotate(-1.8deg); pointer-events: none; opacity: 0.6; } .yt-favorite-tag { position: absolute; bottom: 0; right: 4px; font-family: 'Caveat', cursive; font-size: 1.3rem; font-weight: 500; color: #2B6FE0; transform: rotate(3.5deg); transform-origin: left bottom; white-space: nowrap; pointer-events: none; } /* status element (hidden, kept for JS aria-live) */ .yt-feed-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { .yt-pulse-dot { animation: none; } .yt-play-ring { animation: none; opacity: 0; } .yt-card--skeleton .yt-card__thumb { animation: none; } .yt-card:hover { transform: none; } .yt-preview:hover .yt-preview__img { transform: none; opacity: 1; } } /* ─── Responsive ─── */ @media (max-width: 768px) { /* Titel + "80.000 abonnenter!" maa ikke tvinge vandret scroll: lad raekken ombryde, saa abonnent-blokken falder ned under titlen paa smalle skaerme. */ .yt-headline { flex-wrap: wrap; } .yt-hand--subs { font-size: clamp(1.1rem, 5vw, 1.5rem); } .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .yt-card-wrap--favorite .yt-card::before { display: none; } .yt-favorite-tag { display: none; } } @media (max-width: 560px) { .yt-section { padding: 2.5rem 1rem 3rem; } .yt-shell { gap: 1.25rem; } .yt-title { font-size: clamp(1.7rem, 8vw, 2.4rem); } .yt-grid { grid-template-columns: 1fr; } .yt-strip { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .yt-arrow-doodle { display: none; } .yt-hand--newest { font-size: 1.4rem; transform: rotate(-4deg); } } @media (max-width: 820px) { .content-feed__header { align-items: flex-start; flex-direction: column; } .content-feed__list { grid-template-columns: 1fr; } .content-feed__item-inner { grid-template-columns: 1fr; } } /* ─── RENTERS RENTE KALKULATOR ─── */ .calc { padding: clamp(2.25rem, 3vw, 3rem) var(--pad-x); background: var(--navy); position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: center; } .calc::before { content: ''; position: absolute; top: -40%; right: -10%; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(47,111,224,0.18) 0%, transparent 70%); pointer-events: none; } .calc__shell { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.25rem, 2vw, 1.75rem); } .calc__header { max-width: 680px; } .calc__label { display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; } .calc__title { font-family: var(--sf); font-size: clamp(1.5rem, 5.2vw, 3.8rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; color: #fff; margin: 0 0 0.5rem; white-space: nowrap; } .calc__title-dot { color: var(--blue); } .calc__lead { font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; } .calc__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; } /* min-width:0 forhindrer at lange tal "blæser" grid-kolonnen op og ændrer card-størrelsen */ .calc__controls, .calc__result { min-width: 0; } .calc__controls { display: flex; flex-direction: column; gap: 1.25rem; } .calc__field { display: flex; flex-direction: column; gap: 0.55rem; } .calc__field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .calc__field-label { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .calc__field-star { display: inline-block; vertical-align: super; font-size: 0.85em; line-height: 0; margin-left: 0.1em; } .calc__field-value { font-family: var(--sf); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; white-space: nowrap; } .calc__editable { cursor: text; border-bottom: 1px dashed rgba(255,255,255,0.35); padding: 0 0.1em 1px; border-radius: 3px; outline: none; transition: background 0.15s, border-color 0.15s; } .calc__editable:hover { border-bottom-color: rgba(255,255,255,0.6); } .calc__editable:focus { background: rgba(255,255,255,0.1); border-bottom-color: var(--blue); border-bottom-style: solid; } .calc__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px; background: linear-gradient( to right, var(--blue) 0%, var(--blue) var(--fill, 50%), rgba(255,255,255,0.15) var(--fill, 50%), rgba(255,255,255,0.15) 100% ); outline: none; cursor: pointer; } .calc__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer; transition: transform 0.15s; } .calc__slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .calc__slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer; border: none; } .calc__years-wrap { display: flex; flex-direction: column; gap: 0.55rem; } .calc__year-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; } .calc__year-btn { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.55); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.18s var(--ease-out); } .calc__year-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; } .calc__year-btn--active { background: var(--blue); border-color: var(--blue); color: #fff; } .calc__result { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 1rem; } .calc__result-sub { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .calc__result-number { display: flex; align-items: flex-end; gap: 0.4rem; line-height: 1; min-width: 0; overflow: hidden; white-space: nowrap; } #calc-result { font-family: var(--sf); font-size: clamp(2.4rem, 4.5vw, 4rem); font-weight: 700; letter-spacing: -0.04em; color: #fff; } .calc__result-kr { font-family: var(--sf); font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 600; color: rgba(255,255,255,0.55); padding-bottom: 0.2em; } .calc__breakdown { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; background: rgba(0,0,0,0.18); border-radius: 12px; } .calc__breakdown-item { display: flex; align-items: center; gap: 0.65rem; font-family: var(--sf); font-size: 0.88rem; color: rgba(255,255,255,0.6); min-width: 0; } .calc__breakdown-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .calc__breakdown-item strong { margin-left: auto; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calc__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.75rem; background: var(--blue); color: #fff; font-family: var(--sf); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; border-radius: 999px; transition: background 0.18s, transform 0.18s; align-self: flex-start; } .calc__cta:hover { background: var(--blue-dk); transform: translateY(-1px); } .calc__disclaimer { font-size: 0.72rem; color: rgba(255,255,255,0.3); line-height: 1.5; margin: 0; } @media (max-width: 860px) { .calc__body { grid-template-columns: 1fr; } } @media (max-width: 600px) { .calc__year-btns { gap: 0.4rem; } .calc__year-btn { padding: 0.4rem 0.8rem; font-size: 0.65rem; } } /* ─── FAQ ─── */ .faq { background: #ffffff; /* samme dimensioner som .cmp / .yt-section (sidepadding + shell-bredde) */ padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem); border-top: 1px solid rgba(26,42,94,0.08); overflow-x: clip; /* sikkerhedsnet: intet barn kan skabe vandret scroll (som .courses) */ } .faq__shell { max-width: 1240px; margin: 0 auto; } .faq__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .faq__kicker { display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.75rem; } .faq__title { font-family: var(--sf); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; color: var(--navy); margin: 0; } .faq__title-dot { color: var(--blue); } .faq__lead { margin: 0.9rem auto 0; max-width: 48ch; font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.6; color: rgba(26,42,94,0.6); } .faq__lead a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .faq__list { border-top: 1px solid rgba(26,42,94,0.10); } .faq__item { border-bottom: 1px solid rgba(26,42,94,0.10); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.35rem 0.25rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--sf); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; letter-spacing: -0.02em; color: var(--navy); transition: color 0.18s var(--ease-out); } .faq__q:hover { color: var(--blue); } .faq__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } .faq__icon { flex-shrink: 0; width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); } .faq__item.is-open .faq__icon { transform: rotate(180deg); } /* Accordion: grid-rows trick. Uden JS staar svarene aabne (fallback). */ .faq__a { display: grid; grid-template-rows: 1fr; } .faq--ready .faq__a { transition: grid-template-rows 0.32s var(--ease-out); } .faq--ready .faq__item:not(.is-open) .faq__a { grid-template-rows: 0fr; } .faq__a-inner { overflow: hidden; } .faq__a p, .faq__a ul { margin: 0 0 1.1rem; padding-right: clamp(0rem, 2vw, 2.5rem); font-size: clamp(0.95rem, 1.25vw, 1.02rem); line-height: 1.65; color: rgba(26,42,94,0.74); } .faq__a-inner > :last-child { margin-bottom: 1.4rem; } .faq__a a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .faq__points { list-style: none; padding: 0; display: grid; gap: 0.55rem; } .faq__points li { position: relative; padding-left: 1.6rem; } .faq__points li::before { content: "→"; position: absolute; left: 0; color: var(--blue); } @media (prefers-reduced-motion: reduce) { .faq__a, .faq__icon, .faq__q { transition: none; } } /* ── FAQ: ren hvid flade, alt i EEN kolonne ── De generelle/faelles grupper er rene accordion-lister med god luft imellem. Kursus-spoergsmaalene bruger SAMME toggle-moenster som ".cmp" ("Se praecis hvad du faar"), saa FAQ'en matcher resten af sidens designsprog. */ .faq__stack { display: grid; gap: clamp(2.75rem, 5.5vw, 4.5rem); } .faq__group-title { font-family: var(--sf); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--navy); margin: 0 0 0.35rem; } /* svar-tekst holdes paa laesbar bredde i den brede kolonne */ .faq__group .faq__a p, .faq__group .faq__a ul { max-width: 74ch; } /* Kursus-toggle: titel til venstre + pille-toggle til hoejre (som .cmp) */ .faq__courses-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem 1.5rem; padding-bottom: 1.35rem; margin-bottom: 0; border-bottom: 1px solid rgba(26,42,94,0.10); } .faq__courses-head .faq__group-title { margin: 0; } .faq__toggle-wrap { position: relative; display: flex; align-items: center; background: rgba(26,42,94,0.05); border: 1px solid rgba(26,42,94,0.14); border-radius: 999px; padding: 4px; } .faq__toggle-bubble { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); background: var(--navy); border-radius: 999px; transition: transform 300ms cubic-bezier(0.4,0,0.2,1), width 300ms cubic-bezier(0.4,0,0.2,1); pointer-events: none; z-index: 0; } .faq__tab { position: relative; z-index: 1; background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(26,42,94,0.55); padding: 0.6rem 1.15rem; border-radius: 999px; white-space: nowrap; line-height: 1; transition: color 300ms cubic-bezier(0.4,0,0.2,1); } .faq__tab[aria-selected="true"] { background: var(--navy); color: #fff; } .faq__tab[aria-selected="false"] { color: rgba(26,42,94,0.55); } .faq__tab[aria-selected="false"]:hover { color: var(--navy); background: rgba(26,42,94,0.06); } .faq__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } /* Begynder aktiv: lyseblå som paa sammenligningssektionen (samme som bag "1") */ #faqtab-begynder[aria-selected="true"] { background: #eef4ff; color: var(--blue); } .faq__toggle-wrap:has(#faqtab-begynder[aria-selected="true"]) .faq__toggle-bubble { background: #eef4ff; } /* Paneler — kun eet kursus ad gangen (fallback uden JS: vis begge) */ .faq__panel { display: none; } .faq__panel.is-active { display: block; } .faq:not(.faq--ready) .faq__panel { display: block; } .faq:not(.faq--ready) .faq__panel + .faq__panel { margin-top: 0.5rem; } /* Ingen tekst maa loebe ud over skaermen: lange ord/mails brydes, og spoergsmaals-teksten kan ombryde frit. */ .faq__q span { min-width: 0; overflow-wrap: anywhere; } .faq__lead, .faq__a p, .faq__a ul, .faq__a a { overflow-wrap: break-word; } /* Mobil: titel over toggle, og toggle-labels ombrydes (som .cmp) saa intet loeber ud over skaermen. */ @media (max-width: 768px) { .faq__courses-head { flex-direction: column; align-items: stretch; gap: 1.1rem; } .faq__toggle-wrap { width: 100%; } .faq__tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: normal; line-height: 1.35; padding: 0.6rem 0.6rem; } .faq__q { gap: 0.85rem; } .faq__a p, .faq__a ul { padding-right: 0; } } @media (max-width: 480px) { .faq__tab { font-size: 0.66rem; letter-spacing: 0.04em; padding: 0.55rem 0.4rem; } } /* ─── NEWSLETTER ─── */ .newsletter { scroll-margin-top: calc(var(--nav-h) + 0.75rem); position: relative; z-index: 2; padding: clamp(4.25rem, 6vw, 5.75rem) var(--pad-x); background: #f7faff; } .newsletter__shell { max-width: 1040px; margin: 0 auto; } .newsletter__card { position: relative; display: grid; grid-template-columns: 45fr 55fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; padding: clamp(2rem, 4vw, 3rem); border: 1px solid rgba(26,42,94,0.08); border-radius: 28px; background: #ffffff; box-shadow: 0 18px 52px rgba(26,42,94,0.12), 0 4px 14px rgba(26,42,94,0.06); } /* Left column */ .newsletter__left { display: flex; flex-direction: column; align-items: flex-start; } .newsletter__label { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.1rem; } .newsletter__title { font-family: var(--sf); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: var(--navy); margin: 0 0 0.9rem; } .newsletter__title-line { display: block; overflow: hidden; } .newsletter__title-word { display: inline-block; margin-right: 0.22em; } .newsletter__title-line > .newsletter__title-word:last-child { margin-right: 0; } /* Benefits */ .newsletter__benefits { list-style: none; padding: 0; margin: 0 0 1.8rem; display: flex; flex-direction: column; gap: 0.65rem; width: 100%; } .newsletter__benefit { display: flex; align-items: flex-start; gap: 0.6rem; padding-left: 0.85rem; border-left: 1px solid var(--navy); font-size: 0.93rem; font-weight: 500; color: var(--navy); line-height: 1.5; } .newsletter__benefit-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .newsletter__benefit-check svg { width: 18px; height: 18px; overflow: visible; } .newsletter__benefit-check-path { stroke: #2B6FE0; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .newsletter__benefit-text { display: inline-block; min-width: 0; } /* Form */ .newsletter__form-block { position: relative; width: 100%; } .newsletter__form { width: 100%; display: flex; flex-direction: column; gap: 0; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); } .newsletter__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; } .newsletter__field { position: relative; min-width: 0; --field-line-offset: 0.35rem; padding-top: 0.45rem; padding-bottom: 0.35rem; } .newsletter__field--email { --field-line-offset: 0.35rem; padding-bottom: 0.35rem; } .newsletter__field::before, .newsletter__field::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--field-line-offset); pointer-events: none; } .newsletter__field::before { height: 1px; background: rgba(15,27,61,0.20); } .newsletter__field::after { height: 2px; background: #2B6FE0; transform: scaleX(0); transform-origin: left center; transition: transform 250ms ease-out; } .newsletter__field:focus-within::after { transform: scaleX(1); } .newsletter__field-label { position: absolute; left: 0; top: 1rem; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15,27,61,0.60); pointer-events: none; opacity: 0; transform: translateY(0) scale(1); transform-origin: left center; transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out); } .newsletter__field:focus-within .newsletter__field-label, .newsletter__field.has-value .newsletter__field-label { opacity: 1; transform: translateY(-22px) scale(0.85); } .newsletter__input { width: 100%; background: transparent; border: none; border-radius: 0; padding: 1rem 0 0.7rem; font: inherit; font-size: 0.95rem; color: var(--navy); outline: none; appearance: none; -webkit-appearance: none; transition: color 180ms var(--ease-out); } .newsletter__field--email .newsletter__input { padding-right: 2rem; } .newsletter__input::placeholder { color: rgba(15,27,61,0.42); transition: color 180ms var(--ease-out); } .newsletter__field:focus-within .newsletter__input::placeholder, .newsletter__field.has-value .newsletter__input::placeholder { color: transparent; } .newsletter__field-status { position: absolute; top: 0.95rem; right: 0; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } .newsletter__field-icon { position: absolute; inset: 0; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.9); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .newsletter__field-icon--valid { color: #2B6FE0; } .newsletter__field-icon--invalid { color: #c2472c; } .newsletter__field.is-valid .newsletter__field-icon--valid, .newsletter__field.is-invalid .newsletter__field-icon--invalid { opacity: 1; transform: scale(1); } .newsletter__field-hint { position: absolute; left: 0; bottom: 0; font-size: 0.77rem; color: #c2472c; opacity: 0; transform: translateY(-4px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .newsletter__field.is-invalid .newsletter__field-hint { opacity: 1; transform: translateY(0); } .newsletter__cta { width: 100%; min-height: 3.55rem; padding: 0.95rem 1.5rem; border: none; border-radius: 12px; background: var(--navy); color: var(--white); font: inherit; font-size: 0.97rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(15,27,61,0.14); transform: translate3d(var(--cta-mx, 0px), var(--cta-my, 0px), 0) scale(var(--cta-scale, 1)); transition: transform var(--cta-transition-duration, 250ms) ease, background 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .newsletter__cta:disabled { cursor: wait; } .newsletter__disclaimer { margin: 0.85rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted); text-align: center; } .newsletter__cta-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.42rem; padding: 0 1.2rem; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .newsletter__cta-state--loading, .newsletter__cta-state--success { opacity: 0; transform: translateY(8px); } .newsletter__cta-label { white-space: nowrap; } .newsletter__cta-arrows { position: relative; width: 1.1em; height: 1em; overflow: hidden; } .newsletter__cta-arrow { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; } .newsletter__cta-arrow--secondary { opacity: 0; transform: translateX(-4px); } .newsletter__cta.is-loading .newsletter__cta-state--default, .newsletter__cta.is-success .newsletter__cta-state--default { opacity: 0; transform: translateY(-8px); } .newsletter__cta.is-loading .newsletter__cta-state--loading { opacity: 1; transform: translateY(0); } .newsletter__cta.is-success { background: var(--green); box-shadow: 0 12px 32px rgba(0,182,122,0.26); } .newsletter__cta.is-success .newsletter__cta-state--success { opacity: 1; transform: translateY(0); } .newsletter__cta-check { width: 18px; height: 18px; } .newsletter__cta-check-path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; } .newsletter__cta.is-success .newsletter__cta-check-path { animation: newsletterCheckDraw 400ms cubic-bezier(0.65, 0, 0.35, 1) both; } .newsletter__success { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 0; text-align: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); } .newsletter__success[hidden] { display: none; } .newsletter__success-kicker { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2B6FE0; } .newsletter__success-message { max-width: 34ch; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.25; color: var(--navy); } .newsletter__form-block.is-confirmed .newsletter__form { opacity: 0; transform: translateY(-14px); pointer-events: none; } .newsletter__form-block.is-confirmed .newsletter__success { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Error alert from Kit */ .newsletter__form .formkit-alert { display: none; list-style: none; margin: 0 0 0.85rem; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid transparent; font-size: 0.88rem; } .newsletter__form .formkit-alert:not(:empty) { display: block; } .newsletter__form .formkit-alert-error { background: rgba(242,100,59,0.1); border-color: rgba(242,100,59,0.24); color: #b13a17; } /* Right column - Video */ .newsletter__right { display: flex; align-items: stretch; } .newsletter__video-stage { position: relative; width: 100%; } .newsletter__video-ratio { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transform: scale(1); transition: transform 300ms var(--ease-out); } .newsletter__video-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 18px; } .newsletter :is(button, input, iframe):focus-visible { outline: 2px solid #2B6FE0; outline-offset: 2px; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .newsletter__cta:hover:not(:disabled) { --cta-scale: 1.02; background: #0f1f52; box-shadow: 0 12px 40px rgba(43,111,224,0.25); } .newsletter__cta:hover:not(:disabled) .newsletter__cta-arrow--primary { animation: newsletterArrowPrimary 1.5s var(--ease-out) infinite; } .newsletter__cta:hover:not(:disabled) .newsletter__cta-arrow--secondary { animation: newsletterArrowSecondary 1.5s var(--ease-out) infinite; } .newsletter__cta:active:not(:disabled) { --cta-scale: 0.98; --cta-transition-duration: 100ms; } .newsletter__video-stage:hover .newsletter__video-ratio, .newsletter__video-stage:focus-within .newsletter__video-ratio { transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { .newsletter__video-ratio, .newsletter__cta, .newsletter__cta-state, .newsletter__form, .newsletter__success { animation: none !important; transition: none !important; } .newsletter__cta.is-success .newsletter__cta-check-path { animation: none !important; stroke-dashoffset: 0; } .newsletter__cta-arrow--secondary { display: none; } } /* ─── FOOTER ─── */ .footer { padding: clamp(3rem, 5vw, 4.5rem) var(--pad-x) 2rem; border-top: 1px solid var(--border); background: var(--white); } .footer__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .footer__brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--navy); font-family: var(--sf); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } .footer__brand img { width: 24px; height: 24px; object-fit: contain; } .footer__tagline { margin: 0.85rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 24ch; } .footer__col { display: flex; flex-direction: column; gap: 0.55rem; } .footer__col-title { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy); margin: 0 0 0.35rem; } .footer__link { font-size: 0.88rem; color: var(--muted); text-decoration: none; transition: color 0.15s; width: fit-content; } .footer__link:hover { color: var(--blue); } .footer__text { font-size: 0.88rem; color: var(--muted); line-height: 1.4; } .footer__social { display: flex; gap: 0.6rem; } .footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(26,42,94,0.12); color: var(--navy); transition: color 0.18s, border-color 0.18s, transform 0.18s; } .footer__social a:hover { color: var(--blue); border-color: var(--blue); transform: translateY(-2px); } .footer__social svg { width: 19px; height: 19px; } .footer__bottom { max-width: 1180px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--soft); letter-spacing: 0.01em; } @media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } .footer__brand-col { grid-column: 1 / -1; } } @media (max-width: 460px) { .footer__inner { grid-template-columns: 1fr; } } /* ─── PORTEFØLJE TRANSPARENS ─── */ .port { scroll-margin-top: calc(var(--nav-h) + 0.75rem); padding: clamp(4.25rem, 6vw, 5.75rem) var(--pad-x); background: #ffffff; position: relative; } .port::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(47,111,224,0.08); } .port__shell { max-width: var(--port-stage); margin: 0 auto; display: grid; gap: clamp(0.9rem, 1.9vw, 1.3rem); } .port__header, .port__stats, .port__card { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .port.is-visible .port__header { opacity: 1; transform: none; } .port.is-visible .port__stats { opacity: 1; transform: none; transition-delay: 80ms; } .port__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem 1.4rem; align-items: start; } .port.is-visible .port__card { opacity: 1; transform: none; transition-delay: 160ms; } .port__header-main { display: flex; flex-direction: column; gap: 0; } .port__tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); white-space: nowrap; margin-bottom: 0.6rem; } .port__title { font-family: var(--sf); font-size: clamp(2.2rem, 4.4vw, 4.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--navy); margin: 0; text-wrap: balance; } .port__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; } .port__stat { background: #ffffff; border: 1px solid rgba(190, 208, 234, 0.72); border-radius: 24px; box-shadow: 0 8px 24px rgba(53, 83, 140, 0.06); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 1rem 1.15rem 1.05rem; text-align: left; min-height: 124px; } .port__stat-val { margin-top: 0.65rem; font-family: var(--sf); font-size: clamp(2.1rem, 3vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; color: var(--navy); font-variant-numeric: tabular-nums; } .port__stat-val--accent { color: #2f6fe0; } .port__stat-label { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8c9ab2; } .port__stat-sub { font-family: var(--sans); font-size: 0.82rem; color: #92a0b7; line-height: 1.35; margin-top: 0.45rem; } .port__card { background: #ffffff; border: 1px solid rgba(190, 208, 234, 0.72); border-radius: 28px; box-shadow: 0 14px 34px rgba(53, 83, 140, 0.08); overflow: hidden; } .port__body { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(250px, 0.78fr); gap: 1rem; padding: 1rem; align-items: stretch; } .port__chart { padding: 0.55rem 0.25rem 0 0.25rem; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; position: relative; } .port__svg { cursor: crosshair; } .port__y-label { font-family: var(--sf); font-size: 11.5px; fill: #a8b5c9; text-anchor: end; } .port__tooltip { position: absolute; transform: translate(-50%, -120%); background: var(--navy); color: #fff; font-family: var(--sf); font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(26,42,94,0.25); z-index: 5; line-height: 1.3; } .port__tooltip[hidden] { display: none; } .port__tooltip .port__tooltip-year { display: block; font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); } .port__alloc { padding: 1rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.95rem; background: #f4f7fc; border-radius: 22px; } .port__chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .port__chart-headings { display: flex; flex-direction: column; gap: 0.4rem; } .port__chart-title { margin: 0; font-family: var(--sf); font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--navy); } .port__chart-figure { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue); } .port__legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 0.2rem; } .port__legend-item { display: flex; align-items: center; gap: 0.48rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: #9aa6ba; } .port__legend-line { display: block; width: 14px; height: 3px; border-radius: 999px; flex-shrink: 0; } .port__legend-line--port { background: #2f6fe0; } .port__legend-line--msci { background: repeating-linear-gradient( to right, #bfc9da 0, #bfc9da 5px, transparent 5px, transparent 10px ); border-radius: 999px; } .port__svg { display: block; width: 100%; height: auto; overflow: visible; } .port__axis-label { font-family: var(--sans); font-size: 11.5px; fill: #a8b5c9; text-anchor: middle; } .port-area { opacity: 0.88; } .port-line { filter: drop-shadow(0 6px 14px rgba(47, 111, 224, 0.12)); } .port__disclaimer { margin: 0; font-family: var(--sans); font-size: 0.7rem; color: #b1bccd; line-height: 1.5; } .port__alloc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .port__alloc-title { margin: 0; font-family: var(--sf); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--navy); } .port__alloc-note { font-family: var(--mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #b0bccf; white-space: nowrap; padding-top: 0.2rem; } .port__donut-wrap { position: relative; width: min(170px, 68%); margin: 0 auto; } .port__donut { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient( from -90deg, #2f6fe0 0deg 147.6deg, #0b2044 147.6deg 284.4deg, #79adff 284.4deg 316.8deg, #f97316 316.8deg 345.6deg, #64748b 345.6deg 360deg ); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), filter 0.26s ease; } .port__donut::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: #eef5ff; } .port__donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; pointer-events: none; text-align: center; } .port__donut-overline { font-family: var(--mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #9cacbf; } .port__donut-pct { font-family: var(--serif); font-size: 1.82rem; font-weight: 700; letter-spacing: -0.055em; color: #0b2044; line-height: 0.9; } .port__donut-caption { font-family: var(--sans); font-size: 0.74rem; color: #a5b2c5; } .port__alloc-legend { list-style: none; display: flex; flex-direction: column; gap: 0.72rem; margin-top: auto; } .port__alloc-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; } .port__alloc-dot { display: block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .port__alloc-name { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: #1c2f50; line-height: 1.3; } .port__alloc-pct { font-family: var(--sf); font-size: 0.88rem; font-weight: 700; letter-spacing: -0.03em; } .port__alloc-pct--blue { color: #2f6fe0; } .port__alloc-pct--navy { color: #0b2044; } .port__alloc-pct--sky { color: #79adff; } .port__alloc-pct--orange { color: #f97316; } .port__alloc-pct--slate { color: #0b2044; } /* ─── DONUT HOVER: fremhæv det segment musen er over ─── */ .port__donut { cursor: default; } .port__donut-highlight { position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; transform: scale(1); transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), filter 0.26s ease; -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 32%); mask: radial-gradient(circle, transparent 0 32%, #000 32%); filter: drop-shadow(0 5px 10px rgba(11, 32, 68, 0.12)); } .port__donut-wrap.is-hovering .port__donut { transform: scale(0.975); filter: blur(0.7px) saturate(0.78) opacity(0.72); } .port__donut-wrap.is-hovering .port__donut-highlight { opacity: 1; transform: scale(1.035); } /* Navnet på det hoverede segment (fx "Tesla") vises sort i stedet for den lysegrå standard-caption, så man tydeligt kan læse hvad farven er. */ .port__donut-wrap.is-hovering .port__donut-caption { color: #0b2044; font-weight: 600; } /* Legende: fremhæv den række der matcher det hoverede segment, dæmp resten */ .port__alloc-legend li { transition: opacity 0.26s ease, filter 0.26s ease; } .port__alloc-legend:has(li.is-active) li:not(.is-active) { opacity: 0.42; filter: blur(0.25px); } /* ─── RESPONSIVE ─── */ @media (min-width: 821px) and (max-width: 1500px) { /* Behold Daniel ved siden af teksten, men beskær ham til en smal portræt-boks. Billedet er Daniel centreret i en bred 1.5-ramme; uden beskæring blev boksen skaleret efter højden og rakte hans krop langt ind under overskriften på fx 13"-skærme. Cover-beskæring fjerner de brede (usynlige) marginer, og teksten får nok venstre-margin til altid at rydde ham. */ .hero__cutout { left: 0; height: min(78svh, 640px); width: clamp(300px, 32vw, 430px); object-fit: cover; object-position: center bottom; } .hero__opening { padding-left: clamp(340px, 36vw, 500px); } .hero__opening-title { font-size: clamp(2.8rem, 4.4vw, 5.2rem); line-height: 1.05; } } @media (max-width: 1180px) { .nav__links { gap: 0.95rem; } .nav__links a, .nav__login { font-size: 0.78rem; } .nav__cta { padding-inline: 1rem; } .content-feed__body--youtube { grid-template-columns: minmax(0, 1fr); } .content-feed__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .newsletter__fields { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .port { padding: clamp(3.75rem, 6vw, 5rem) 1rem; } .port__header { grid-template-columns: 1fr; } .port__header-main { grid-template-columns: 1fr; gap: 0.6rem; } .port__tag { padding-top: 0; } .port__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .port__body { grid-template-columns: 1fr; } .port__chart { padding: 0; } .courses__grid { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0; } .courses__grid::before { display: none; } .course-card--light, .course-card--dark { margin: 0; } .course-card--light { translate: 0px 52px; } .course-card--dark { translate: 0px 72px; } .course-card--dark .card-headline { max-width: none; } .hero__transition { grid-template-columns: 1fr; } .hero__transition-photo { display: none; } .hero__transition-actions { margin-top: 1.4rem; } .newsletter__card { grid-template-columns: 1fr; } .newsletter__title { max-width: 20ch; } .newsletter__right { min-height: 300px; } } @media (max-width: 980px) { .nav__login { display: none; } .nav { gap: 0.75rem; padding-inline: 1rem; } .nav__brand { font-size: 0.88rem; } .nav__links { display: flex; flex: 1 1 auto; min-width: 0; gap: 0.55rem; margin-inline: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav__links::-webkit-scrollbar { display: none; } .nav__links a { flex: 0 0 auto; font-size: 0.76rem; white-space: nowrap; } .nav__cta { min-height: 2.35rem; padding-inline: 0.95rem; font-size: 0.74rem; } .content-feed { padding-inline: 1rem; } .content-feed__header { align-items: flex-start; flex-direction: column; gap: 1rem; } .content-feed__body { border-radius: 24px; } .content-feed__body--youtube { padding: 1rem; } .content-feed__list { grid-template-columns: 1fr; } .content-feed__featured-title { max-width: min(88%, 14ch); font-size: clamp(1.2rem, 3vw, 1.65rem); } .course-card--light, .course-card--dark { margin: 0; translate: none; } .course-card--dark { margin-top: 0; } } @media (max-width: 820px) { :root { --nav-h: 62px; } .nav { padding-inline: 0.9rem; } .nav__brand { font-size: 0.86rem; } .nav__logo { width: 24px; height: 24px; } .nav__links { display: none; } .nav__login { display: none; } .nav__hamburger { display: flex; } .nav__cta { min-height: 2.3rem; padding-inline: 0.95rem; font-size: 0.72rem; } /* Hero på mobil: vis kun åbningsvisning, ingen scroll-animation */ .hero__transition, .hero__transition-bg { display: none; } .hero__scanline { display: none; } .port { padding: 2.75rem 1rem; } .port__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .port__stat { min-height: auto; padding: 0.9rem 1rem 0.85rem; } .port__stat-val { font-size: clamp(1.7rem, 5vw, 2.2rem); } .port__stat-sub { font-size: 0.75rem; } .port__body { gap: 1rem; padding: 1rem; } .port__legend { gap: 0.9rem; } .port__legend-item { font-size: 0.82rem; } .port__alloc { padding: 1.15rem; } .port__alloc-legend li { gap: 0.6rem; } .port__alloc-name, .port__alloc-pct { font-size: 0.92rem; } .hero__track { height: 100svh; } .hero__opening { /* Bundpadding = cutout-højden, så teksten centreres i det frie rum over fotoet */ padding: calc(var(--nav-h) + 1rem) 1.25rem 52svh; align-items: center; justify-content: flex-start; } .hero__opening-inner { gap: clamp(1rem, 2.5vh, 1.75rem); justify-content: center; } .hero__opening-title { max-width: 100%; width: 100%; font-size: clamp(1.55rem, 6.6vw, 2.2rem); line-height: 1.06; display: flex; flex-direction: column; align-items: center; text-align: center; margin-inline: auto; } .hero__opening-title-line { display: block; white-space: nowrap; } .hero__cutout { display: block; bottom: 0; left: 50%; right: auto; height: 52svh; width: auto; translate: -50% 0; /* CSS individual transform — doesn't conflict with heroFadeUp's `transform` */ object-position: center bottom; mix-blend-mode: multiply; animation: none; opacity: 1; } .hero__sticky::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 18svh; background: linear-gradient(to top, rgba(255,255,255,0.92), transparent); z-index: 3; pointer-events: none; } .hero__stats { width: 100%; gap: 0; align-items: center; } .hero__stat { min-width: 0; flex: 1 1 0; padding: 0 clamp(0.5rem, 2.5vw, 1.5rem); } .hero__stat-divider { height: 3.5rem; flex-shrink: 0; } .hero__stat-number, .hero__stat-star { font-size: clamp(2rem, 7vw, 2.8rem); } .hero__marquee { width: 100%; } .hero__marquee-track { gap: 1.15rem; } .hero__marquee-logo { height: 22px; max-width: 86px; } .hero__marquee-logo--large { height: 28px; max-width: 104px; } .hero__transition { padding: calc(var(--nav-h) + 1.5rem) 1rem 1.5rem; } .hero__transition-brand { font-size: clamp(2.6rem, 10vw, 4rem); } .hero__transition-brand > span:first-child { font-size: clamp(3rem, 12vw, 4.8rem); } .hero__transition-lead { margin-top: 1.2rem; font-size: clamp(1.2rem, 5vw, 1.6rem); max-width: 100%; } .hero__transition-list { margin-top: 1rem; gap: 0.7rem; font-size: 1rem; } .courses { padding: 3.5rem 1rem 4rem; } .course-card--light, .course-card--dark { margin: 0; translate: none; } .course-card--dark { margin-top: 0; } .newsletter { margin-top: 1.5rem; padding: 0 1rem 2.5rem; } .newsletter__card { padding: 1.5rem; border-radius: 24px; } .newsletter__fields { grid-template-columns: 1fr; } .footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } @media (max-width: 600px) { .nav { gap: 0.6rem; } .nav__brand span { display: none; } .nav__cta { min-height: 2.15rem; padding-inline: 0.8rem; font-size: 0.68rem; } .hero__opening { padding: calc(var(--nav-h) + 0.4rem) 1rem 52svh; } .hero__opening-title { font-size: clamp(1.4rem, 6.2vw, 1.85rem); line-height: 1.05; max-width: 100%; } .hero__stats { gap: 0; align-items: center; width: 100%; } .hero__stat { align-items: center; text-align: center; padding: 0 clamp(0.35rem, 2vw, 0.75rem); } .hero__stat-number, .hero__stat-star { font-size: clamp(1.85rem, 7.5vw, 2.6rem); } .hero__stat-divider { height: 3rem; flex-shrink: 0; } .hero__marquee-track { gap: 0.9rem; } .hero__scroll-label { font-size: 0.66rem; letter-spacing: 0.14em; } /* Forhindrer iOS Safari i at zoome ind på input-felter */ .newsletter__input { font-size: 1rem; } .course-card { padding: 1.5rem; padding-top: 3.4rem; } .card-badge::before { width: 2.7rem; height: 2.7rem; font-size: 1.25rem; } .card-footer { align-items: flex-start; flex-direction: column; } .card-cta { width: 100%; justify-content: center; } .content-feed { padding-top: 3.25rem; padding-bottom: 3.5rem; } .content-feed__title { font-size: clamp(1.7rem, 8vw, 2.2rem); } .content-feed__lead { font-size: 0.94rem; } .content-feed__channel-link { width: 100%; } .content-feed__featured-title { max-width: min(92%, 12ch); font-size: clamp(1.05rem, 6vw, 1.45rem); } .content-feed__rail { padding: 0.85rem; } .content-feed__item { padding: 0.7rem; } .newsletter__benefit { font-size: 0.88rem; } .newsletter__cta { min-height: 3.2rem; font-size: 0.92rem; } .port__title { font-size: clamp(2.2rem, 12vw, 3.2rem); } .port__chart-title { font-size: clamp(1.45rem, 7vw, 1.95rem); } .port__legend { flex-direction: column; align-items: flex-start; gap: 0.55rem; padding-top: 0; } .port__donut-wrap { width: min(190px, 70%); } .port__donut-pct { font-size: 2rem; } .port__disclaimer { font-size: 0.72rem; } .hero__transition-actions { width: 100%; } .hero__transition-cta { width: 100%; } .newsletter { margin-top: 1rem; padding-bottom: 2rem; } .newsletter__title { max-width: 100%; font-size: clamp(1.75rem, 9vw, 2.3rem); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__marquee-track { animation: none; } .hero__scroll-cue { display: none !important; } .nav, .hero__opening, .hero__transition { transition: none !important; } .hero__track { height: 100svh; } .hero__sticky { position: relative; overflow: visible; } .hero__opening { opacity: 1 !important; transform: none !important; } .hero__transition { opacity: 1 !important; } .hero__transition-bg { opacity: 1 !important; } .hero__scanline { display: none; } } /* ─── STORE SKÆRME (1600px → 3440px+) ─── */ @media (min-width: 1600px) { :root { --pad-x: clamp(3.5rem, 5vw, 6.5rem); } .courses__grid { max-width: 1440px; } .cmp__shell { max-width: 1440px; } .yt-shell { max-width: 1440px; } .faq__shell { max-width: 1440px; } .content-feed__shell{ max-width: 1440px; } .newsletter__shell { max-width: 1200px; } /* Portefølje er låst til --port-stage (vokser ikke med skærmen) */ .port__shell { max-width: var(--port-stage); } /* Opening-laget (Daniel + "Danmarks største") forbliver låst til --hero-stage. Transition-laget må derimod vokse med skærmen, så "Daniels Pengetips", teksten, kurserne og fotoet bliver større på store skærme i stedet for at stå småt i en låst 1600px-scene. Bredde + fotokolonne + skrift skaleres trinvist herunder. */ .hero__transition { max-width: 1720px; grid-template-columns: minmax(0, 1fr) minmax(300px, 640px); } .hero__transition-photo { width: min(calc(100% + clamp(2rem, 4vw, 4rem)), 42rem); } } @media (min-width: 1920px) { :root { --pad-x: clamp(4rem, 6vw, 9rem); } .courses__grid { max-width: min(82vw, 1800px); } .cmp__shell { max-width: min(82vw, 1800px); } .yt-shell { max-width: min(82vw, 1800px); } .faq__shell { max-width: min(82vw, 1800px); } .content-feed__shell{ max-width: min(82vw, 1800px); } .newsletter__shell { max-width: min(74vw, 1500px); } /* .port__shell og .hero forbliver låst (se 1600px-blokken) */ /* CMP: 5 columns */ .cmp__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .courses__grid { gap: clamp(1.5rem, 2.5vw, 3rem); } /* Transition-laget vokser videre (opening forbliver låst) */ .hero__transition { max-width: 1880px; grid-template-columns: minmax(0, 1fr) minmax(300px, 720px); } .hero__transition-photo { width: min(calc(100% + clamp(2rem, 4vw, 4rem)), 48rem); } .hero__transition-brand { font-size: clamp(9.5rem, 8.6vw, 11rem); } .hero__transition-lead { font-size: clamp(3rem, 3vw, 3.5rem); } .hero__transition-list { font-size: clamp(1.8rem, 1.7vw, 2rem); } .hero__transition-cta { font-size: 1.05rem; min-height: 3.4rem; padding: 1rem 1.7rem; } } @media (min-width: 2560px) { :root { --pad-x: clamp(5rem, 7vw, 12rem); } .courses__grid { max-width: min(80vw, 2400px); } .cmp__shell { max-width: min(80vw, 2400px); } .yt-shell { max-width: min(80vw, 2400px); } .faq__shell { max-width: min(80vw, 2400px); } .content-feed__shell{ max-width: min(80vw, 2400px); } .newsletter__shell { max-width: min(70vw, 1900px); } /* .port__shell og opening-laget forbliver låst (se 1600px-blokken) */ /* Transition-laget vokser videre på meget store skærme */ .hero__transition { max-width: 2200px; grid-template-columns: minmax(0, 1fr) minmax(300px, 860px); } .hero__transition-photo { width: min(calc(100% + clamp(2rem, 4vw, 4rem)), 56rem); } .hero__transition-brand { font-size: clamp(11rem, 8.6vw, 12rem); } .hero__transition-lead { font-size: clamp(3.5rem, 3vw, 4.2rem); } .hero__transition-list { font-size: clamp(2rem, 1.7vw, 2.4rem); } .hero__transition-cta { font-size: 1.2rem; min-height: 3.8rem; padding: 1.15rem 2rem; } } @media (min-width: 3200px) { :root { --pad-x: clamp(6rem, 8vw, 14rem); } .courses__grid { max-width: min(78vw, 2800px); } .cmp__shell { max-width: min(78vw, 2800px); } .yt-shell { max-width: min(78vw, 2800px); } .faq__shell { max-width: min(78vw, 2800px); } .content-feed__shell{ max-width: min(78vw, 2800px); } .newsletter__shell { max-width: min(68vw, 2200px); } /* .port__shell og .hero forbliver låst (se 1600px-blokken) */ }