/* ══════════════════════════════════════════════════════════════════════ LaFa 2.0 · page.css — Rahmen der Unterseiten (noch ohne Inhalt) ══════════════════════════════════════════════════════════════════════ */ /* Der Generator setzt --accent / --accent-2 direkt als Inline-Stil auf — je nach Palette der Kachel. Die Werte hier sind nur der Rückfall, falls eine Seite ohne Angabe geöffnet wird. */ body { --accent: var(--spice); --accent-2: var(--spice-glow); } /* ══ Atmosphäre, ruhiger als auf der Landing ═════════════════════════ */ .atmos--page .atmos__wash { background: radial-gradient(60% 44% at 16% 4%, color-mix(in oklab, var(--accent-2) 34%, transparent) 0%, transparent 62%), radial-gradient(54% 46% at 86% 22%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%), radial-gradient(58% 46% at 62% 98%, color-mix(in oklab, var(--sky) 20%, transparent) 0%, transparent 64%); } /* ══ Kopfzeile mit Zurück-Weg ════════════════════════════════════════ */ .top__back { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .95rem .5rem .6rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in oklab, var(--paper) 62%, transparent); backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); transition: color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); } .top__back:hover { color: var(--ink); border-color: color-mix(in oklab, var(--accent) 42%, transparent); box-shadow: var(--shadow-sm); } .top__back svg { width: 15px; height: 15px; transition: transform var(--t-mid) var(--ease-out); } .top__back:hover svg { transform: translateX(-3px); } /* ══ Blanko-Bühne ════════════════════════════════════════════════════ */ .blank { position: relative; z-index: 10; min-height: calc(100dvh - 7rem); /* lässt Platz für die Fußzeile */ display: grid; align-content: center; gap: 1.15rem; padding: 7rem 0 2rem; } .blank__title { font-family: var(--font-title, var(--font-display)); font-size: clamp(2.4rem, 6.6vw, 5.4rem); letter-spacing: -.05em; } /* Display-Schriften wie Dune Rise laufen deutlich breiter und stehen nur in Versalien gut. Der Generator setzt dafür .blank__title--display. */ .blank__title--display { font-size: clamp(1.9rem, 5vw, 4.1rem); letter-spacing: .01em; line-height: 1.14; text-transform: uppercase; font-weight: 400; } /* Farbverlauf in der Akzentfarbe der jeweiligen Seite */ .blank__title .grad { background: linear-gradient(102deg, color-mix(in oklab, var(--accent) 88%, #000 12%) 0%, var(--accent) 42%, var(--accent-2) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .blank__lead { font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--ink-soft); max-width: 48ch; text-wrap: pretty; } /* Platzhalter-Fläche: markiert, dass hier Inhalt hinkommt */ .slot { margin-top: .8rem; min-height: clamp(8rem, 19vh, 12.5rem); display: grid; align-content: center; justify-items: center; gap: .5rem; padding: 1.6rem; border-radius: var(--r-xl); border: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--line)); background: linear-gradient(color-mix(in oklab, var(--paper) 46%, transparent), color-mix(in oklab, var(--paper) 46%, transparent)), repeating-linear-gradient(-45deg, color-mix(in oklab, var(--accent) 4%, transparent) 0 11px, transparent 11px 22px); backdrop-filter: blur(12px); text-align: center; color: var(--ink-faint); transition: border-color var(--t-slow) var(--ease-out), background-position 12s linear; } .slot:hover { border-color: color-mix(in oklab, var(--accent) 52%, transparent); } .slot b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-soft); font-weight: 600; letter-spacing: -.01em; } .slot span { font-size: .84rem; max-width: 42ch; } .blank__foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem; }