.kwevent-dark-shell { background-color: hsl(0 0% 5%); } :has(.kwevent-dark-shell) { background-color: hsl(0 0% 5%); } html:has(.kwevent-dark-shell), body:has(.kwevent-dark-shell) { background-color: hsl(0 0% 5%); overscroll-behavior-y: contain; } body:has(.kwevent-dark-shell) { background-image: linear-gradient(hsl(0 0% 5%), hsl(0 0% 5%)); } .kwevent-mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-feature-settings: 'zero', 'ss01'; } .kwevent-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: hsl(var(--color-accent-runtime)); line-height: 1; } .kwevent-eyebrow::before { content: ''; display: inline-block; height: 0.5rem; width: 0.5rem; background-color: currentColor; flex-shrink: 0; } .kwevent-hero-cinematic { position: relative; background: radial-gradient( ellipse 90% 60% at 50% 0%, hsl(var(--color-accent-runtime) / 0.22) 0%, transparent 55% ), radial-gradient( ellipse 70% 50% at 50% 100%, hsl(var(--color-accent-runtime) / 0.14) 0%, transparent 60% ), hsl(0 0% 5%); isolation: isolate; } .kwevent-hero-overlay { position: absolute; inset: 0; background: radial-gradient( ellipse 120% 80% at 50% 60%, transparent 30%, hsl(0 0% 0% / 0.35) 100% ), linear-gradient( 180deg, hsl(0 0% 0% / 0.40) 0%, hsl(0 0% 0% / 0.50) 45%, hsl(0 0% 0% / 0.88) 100% ); pointer-events: none; z-index: 1; } .kwevent-section-bruchkante { position: relative; } .kwevent-section-bruchkante::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(960px, 70%); height: 1px; background: linear-gradient( 90deg, transparent 0%, hsl(var(--color-accent-runtime) / 0.4) 50%, transparent 100% ); pointer-events: none; } .kwevent-section-bruchkante::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient( 180deg, hsl(var(--color-accent-runtime) / 0.04) 0%, transparent 100% ); pointer-events: none; } .kwevent-service-card { position: relative; background-color: hsl(0 0% 100% / 0.025); border: 1px solid hsl(0 0% 100% / 0.07); border-left: 4px solid hsl(var(--color-accent-runtime)); padding: 2.75rem 2rem 2.5rem; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease, box-shadow 400ms ease, background-color 400ms ease; isolation: isolate; } @media (min-width: 768px) { .kwevent-service-card { padding: 3.25rem 2.5rem 2.75rem; } } .kwevent-service-card:hover { transform: translateY(-6px); border-color: hsl(var(--color-accent-runtime) / 0.55); border-left-color: hsl(var(--color-accent-runtime)); background-color: hsl(0 0% 100% / 0.045); box-shadow: 0 4px 12px hsl(0 0% 0% / 0.25), 0 20px 50px hsl(var(--color-accent-runtime) / 0.22), inset 2px 0 0 0 hsl(var(--color-accent-runtime)), inset 0 1px 0 0 hsl(var(--color-accent-runtime) / 0.08); } @media (prefers-reduced-motion: reduce) { .kwevent-service-card { transition: none; } .kwevent-service-card:hover { transform: none; } } .kwevent-cta-primary { display: inline-flex; align-items: center; gap: 0.5rem; background-color: hsl(var(--color-accent-runtime)); color: hsl(0 0% 8%); border-radius: 9999px; padding: 16px 32px; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; border: none; cursor: pointer; box-shadow: 0 2px 6px hsl(0 0% 0% / 0.20), 0 8px 24px hsl(var(--color-accent-runtime) / 0.30); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), background-color 300ms ease; position: relative; overflow: hidden; isolation: isolate; } .kwevent-cta-primary > span { transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } .kwevent-cta-primary:hover { transform: translateY(-2px); background-color: hsl(98 65% 50%); box-shadow: 0 4px 10px hsl(0 0% 0% / 0.30), 0 18px 48px hsl(var(--color-accent-runtime) / 0.55); } .kwevent-cta-primary:hover > span { transform: translateX(4px); } .kwevent-cta-primary:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .kwevent-cta-primary, .kwevent-cta-primary > span { transition: none; } .kwevent-cta-primary:hover, .kwevent-cta-primary:hover > span { transform: none; } } .kwevent-cta-outline-on-dark { display: inline-flex; align-items: center; gap: 0.5rem; background-color: transparent; color: hsl(0 0% 96%); border: 1.5px solid hsl(0 0% 100% / 0.35); border-radius: 9999px; padding: 14.5px 30px; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; cursor: pointer; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease, background-color 300ms ease; } .kwevent-cta-outline-on-dark:hover { transform: translateY(-2px); border-color: hsl(var(--color-accent-runtime)); background-color: hsl(var(--color-accent-runtime) / 0.10); } @media (prefers-reduced-motion: reduce) { .kwevent-cta-outline-on-dark { transition: none; } .kwevent-cta-outline-on-dark:hover { transform: none; } } .kwevent-gallery-tile { position: relative; overflow: hidden; background-color: hsl(0 0% 8%); cursor: pointer; isolation: isolate; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .kwevent-gallery-tile::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color 400ms ease; pointer-events: none; z-index: 2; } .kwevent-gallery-tile:hover::after { border-color: hsl(var(--color-accent-runtime)); } .kwevent-gallery-tile img { transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease; filter: brightness(0.92); } .kwevent-gallery-tile:hover img { transform: scale(1.06); filter: brightness(1.05); } @media (prefers-reduced-motion: reduce) { .kwevent-gallery-tile, .kwevent-gallery-tile img { transition: none; } .kwevent-gallery-tile:hover img { transform: none; } } .kwevent-footer-diagonal { position: relative; background-color: hsl(0 0% 6%); color: hsl(0 0% 92%); } .kwevent-footer-diagonal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background-color: hsl(0 0% 6%); clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%); transform: translateY(-79px); z-index: 0; } .kwevent-footer-diagonal::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: hsl(var(--color-accent-runtime)); clip-path: polygon(0 50px, 100% 0, 100% 3px, 0 53px); transform: translateY(-79px); z-index: 1; } @media (prefers-reduced-motion: no-preference) { .kw-hero-kenburns { animation: kw-kenburns 28s ease-in-out infinite; will-change: transform; } .kw-beam { animation: kw-beam-puls 7s ease-in-out infinite; } .kw-beam-2 { animation-duration: 9s; animation-delay: 1.5s; } }