/* Hero + sliders — baggrund begrænset til sektion, ikke hele */ .page-hero { --hero-red: #d92323; background: var(--hero-red); color: #fff; display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; } /* ── Hero tekst ── */ .page-hero .hero-text { padding: 3.75rem 5rem 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; } .page-hero .headline { font-family: var(--font-sans); font-size: clamp(1.65rem, 4.5vw, 3.35rem); font-weight: 700; color: #ffffff; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; max-width: 58rem; margin: 0; } .page-hero .headline__l1, .page-hero .headline__l2 { white-space: nowrap; } @media (max-width: 360px) { .page-hero .headline__l1, .page-hero .headline__l2 { white-space: normal; } } .page-hero .subheadline { font-family: var(--font-sans); font-size: clamp(1rem, 1.9vw, 1.1875rem); font-weight: 500; font-style: normal; color: rgba(255, 255, 255, 0.82); line-height: 1.55; max-width: 40rem; margin: 0; text-wrap: balance; } .page-hero .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; } .page-hero .cta-primary, .page-hero .cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; } .page-hero .cta-primary { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: #d92323; background: #ffffff; padding: 14px 32px; border-radius: 100px; text-decoration: none; border: 2px solid transparent; transition: background 0.2s, color 0.2s, transform 0.15s; } .page-hero .cta-primary:hover, .page-hero .cta-primary:focus-visible { background: #f5f5f5; } .page-hero .cta-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .page-hero .cta-secondary { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, 0.15); padding: 14px 32px; border-radius: 100px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.3); transition: background 0.2s, border-color 0.2s; } .page-hero .cta-secondary:hover, .page-hero .cta-secondary:focus-visible { background: rgba(255, 255, 255, 0.25); } .page-hero .cta-secondary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ── Video “reel” (egen blok, dominerer visuelt) ── */ .page-hero__reel { width: 100%; min-height: 0; padding: 0.25rem 0 0.5rem; } /* ── Video slider ── */ .page-hero__reel .video-outer, .page-hero .video-outer { width: 100%; overflow: hidden; padding: 0.5rem 0 0.35rem; contain: layout style; isolation: isolate; } .page-hero .video-track { display: flex; gap: 14px; width: max-content; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; } .page-hero .video-card { position: relative; flex-shrink: 0; width: 220px; height: 390px; border-radius: 16px; overflow: hidden; background: #111; contain: content; } .page-hero .video-card video { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #111; } /* Pladsholder / “loading” indtil WebM er klar */ .page-hero .video-card__loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: linear-gradient( 150deg, #1a0a0b 0%, #2a1210 40%, #8b2018 100% ); text-align: center; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s ease; } .page-hero .video-card--ready .video-card__loading { opacity: 0; visibility: hidden; } .page-hero .video-card__loading-inner { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 9rem; } .page-hero .video-card__loading-inner::after { content: ""; width: 2.5rem; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.55) 30% 70%, transparent ); margin-top: 0.1rem; animation: video-load-shine 1.2s ease-in-out infinite; } .page-hero .video-card--ready .video-card__loading-inner::after { animation: none; } .page-hero .video-card__loading-logo { display: block; width: 2.6rem; height: 2.6rem; object-fit: contain; object-position: center; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); opacity: 0.95; } .page-hero .video-card__loading-title { font-family: var(--font-sans); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.1; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } @keyframes video-load-shine { 0%, 100% { transform: scaleX(0.45); opacity: 0.4; } 50% { transform: scaleX(1.05); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .page-hero .video-card__loading { transition-duration: 0.2s; } .page-hero .video-card__loading-inner::after { animation: none; transform: none; opacity: 0.5; } } @media (max-width: 1024px) { .page-hero .headline { font-size: clamp(1.35rem, 5vw, 2.85rem); letter-spacing: 0.035em; } .page-hero .hero-text { padding: 2.5rem 1.5rem 1.5rem; } } @media (max-width: 600px) { .page-hero .headline { font-size: clamp(1.05rem, 5.5vw, 2.05rem); letter-spacing: 0.03em; } .page-hero .hero-text { padding: 1.75rem 1.25rem 1.25rem; } .page-hero .cta-primary, .page-hero .cta-secondary { width: 100%; max-width: 20rem; } } @media (max-width: 480px) { .page-hero__reel { padding-bottom: 0.4rem; } } /* Færre GPU-animationer under indlæsning på små skærme */ @media (max-width: 767px) { .page-hero .video-card__loading-inner::after { animation: none; transform: scaleX(0.75); opacity: 0.55; } } /* ── Logo-bånd (embed-stil, samme rAF som video) ── */ .page-hero__brands { width: 100%; flex: 0 0 auto; contain: layout style; isolation: isolate; } .page-hero .logo-outer { position: relative; width: 100%; overflow: hidden; padding: 16px 0 24px; contain: content; } .page-hero .logo-track { display: flex; width: max-content; gap: 12px; /* 133+12 = LOGO_STRIDE i hero.js */ will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; } .page-hero .logo-card { box-sizing: border-box; flex-shrink: 0; width: 133px; height: 90px; /* Lys “glas”-felt på brandrød — som reference: afrundet, lys kant, ingen mørk bund */ background: rgba(255, 255, 255, 0.16); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 18px 16px; border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); contain: content; } /* Samme max-højde for alle logoer → roligt visuelt hierarki */ .page-hero .logo-card img { width: auto; max-width: 100%; height: auto; max-height: 48px; object-fit: contain; object-position: center; display: block; } /* Filer med meget indre tomrum — større logo (layout + zoom). NB: `contain: content` på .logo-card kan klippe transform på til den lille layoutboks, så zoom “virker ikke” — derfor contain: none her. */ .page-hero .logo-card--tight-crop { contain: none; overflow: hidden; padding: 14px 15px; } .page-hero .logo-card--tight-crop img { max-height: 54px; max-width: 104%; width: auto; height: auto; object-fit: contain; transform: scale(1.55); transform-origin: center center; } /* Mindre bevægelse: pause animation i JS, men sikr statisk layout */ @media (prefers-reduced-motion: reduce) { .page-hero .video-track, .page-hero .logo-track { will-change: auto; } }