/* Alcolm-Intro: Vollbild-Wortmarke «alcolm» in Space Age. Eigenstaendig: braucht keine Variablen der Zielseite. Farben bei Bedarf unten anpassen. */ @font-face { font-family: 'Alcolm Space Age'; src: url('fonts/space-age.woff2') format('woff2'); font-display: block; } :root { --ai-bg: #ffffff; --ai-text: #101525; --ai-text-dezent: #4c5a70; --ai-blau: #067ffe; --ai-blau-hell: #1f8cfe; --ai-cyan: #22d3ee; --ai-verlauf: linear-gradient(135deg, #067ffe 0%, #2f9bff 55%, #22d3ee 100%); --ai-einfach: cubic-bezier(0.16, 1, 0.3, 1); } /* Dunkelmodus: folgt dem System, oder data-theme="dark" auf , falls die Seite einen Umschalter hat. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ai-bg: #0b0b0d; --ai-text: #f8f8fb; --ai-text-dezent: #b8bcc9; --ai-blau-hell: #4da5fe; } } :root[data-theme='dark'] { --ai-bg: #0b0b0d; --ai-text: #f8f8fb; --ai-text-dezent: #b8bcc9; --ai-blau-hell: #4da5fe; } .alcolm-intro { display: none; } html[data-intro='laeuft'] { overflow: hidden; } html[data-intro='laeuft'] .alcolm-intro { display: grid; } .alcolm-intro { position: fixed; inset: 0; z-index: 2147483000; place-items: center; overflow: hidden; background: var(--ai-bg); cursor: pointer; clip-path: inset(0 0 0 0 round 0); -webkit-font-smoothing: antialiased; } .alcolm-intro__licht { position: absolute; inset: -20%; background: radial-gradient(40% 35% at 50% 52%, color-mix(in srgb, var(--ai-blau) 26%, transparent), transparent 70%), radial-gradient(30% 30% at 30% 40%, color-mix(in srgb, var(--ai-cyan) 14%, transparent), transparent 70%), radial-gradient(30% 30% at 72% 62%, color-mix(in srgb, var(--ai-blau-hell) 16%, transparent), transparent 70%); filter: blur(20px); opacity: 0; } .alcolm-intro--laeuft .alcolm-intro__licht, .alcolm-intro--ende .alcolm-intro__licht { animation: aiLicht 2.4s var(--ai-einfach) forwards; } .alcolm-intro__buehne { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vw, 26px); } .alcolm-intro__wort { position: relative; display: flex; font-family: 'Alcolm Space Age', sans-serif; font-size: clamp(2.6rem, 14vw, 10rem); font-weight: normal; line-height: 1; letter-spacing: 0.04em; color: var(--ai-text); white-space: nowrap; } .alcolm-intro__buchstabe { display: inline-block; opacity: 0; transform: translateY(0.45em) scale(0.92); filter: blur(14px); } .alcolm-intro--laeuft .alcolm-intro__buchstabe, .alcolm-intro--ende .alcolm-intro__buchstabe { animation: aiBuchstabe 0.9s var(--ai-einfach) forwards; animation-delay: calc(0.12s + var(--i) * 0.075s); } /* Glanz: dieselbe Wortmarke im Markenverlauf, von einer wandernden Maske freigelegt. */ .alcolm-intro__glanz { position: absolute; inset: 0; background: var(--ai-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%); mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; } .alcolm-intro--laeuft .alcolm-intro__glanz, .alcolm-intro--ende .alcolm-intro__glanz { animation: aiGlanz 1.25s cubic-bezier(0.65, 0, 0.35, 1) 0.95s forwards; } .alcolm-intro__linie { width: min(56vw, 520px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ai-blau), var(--ai-cyan), transparent); transform: scaleX(0); opacity: 0; } .alcolm-intro--laeuft .alcolm-intro__linie, .alcolm-intro--ende .alcolm-intro__linie { animation: aiLinie 1s var(--ai-einfach) 0.7s forwards; } .alcolm-intro__zusatz { /* ANPASSUNG Alcolm-Website: Die Seite liefert Inter selbst aus, aber unter dem Namen «Inter Variable». Ohne diesen Eintrag griffe hier Segoe UI bzw. die Systemschrift, nicht Inter wie in der Vorlage. */ font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(0.72rem, 1.4vw, 0.95rem); font-weight: 500; letter-spacing: 0.9em; margin-right: -0.9em; text-transform: lowercase; color: var(--ai-text-dezent); opacity: 0; } .alcolm-intro--laeuft .alcolm-intro__zusatz, .alcolm-intro--ende .alcolm-intro__zusatz { animation: aiZusatz 1.1s var(--ai-einfach) 1s forwards; } /* Abgang: Wortmarke zieht leicht nach oben weg, der Vorhang hebt sich mit gerundeter Kante. */ .alcolm-intro--ende { animation: aiVorhang 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards; } .alcolm-intro--ende .alcolm-intro__buehne { animation: aiBuehneWeg 0.7s cubic-bezier(0.7, 0, 0.84, 0) forwards; } @keyframes aiBuchstabe { to { opacity: 1; transform: none; filter: blur(0); } } @keyframes aiGlanz { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; } } @keyframes aiLinie { to { transform: scaleX(1); opacity: 1; } } @keyframes aiZusatz { from { opacity: 0; letter-spacing: 1.6em; margin-right: -1.6em; } to { opacity: 1; letter-spacing: 0.9em; margin-right: -0.9em; } } @keyframes aiLicht { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes aiBuehneWeg { to { opacity: 0; transform: translateY(-6vh) scale(1.04); filter: blur(8px); } } @keyframes aiVorhang { from { clip-path: inset(0 0 0 0 round 0); } to { clip-path: inset(0 0 100% 0 round 0 0 50% 50%); } } @media (prefers-reduced-motion: reduce) { .alcolm-intro { display: none !important; } } @media print { .alcolm-intro { display: none !important; } }