/* Sensus Communis | glass-cards.css Komponente: Glas-Karten und Glas-Buttons. Geladen von: annual-en, annual, colloquium-en, colloquium, contact-en, contact, danke, datenschutz-en, datenschutz, en, fellows-en, fellows, founding-member-en, founding-member, impressum-en, impressum, index, papers-en, papers, podcast-en, podcast, thank-you, tradition-en, tradition, zeitgeist-en, zeitgeist Reihenfolge je Seite: fonts, tokens, [subpage], Seite, glass-cards, motion, Seite.layers, site */ /* ============================================================ Sensus Communis — Glas-Kärtchen (navy, leuchtend) ------------------------------------------------------------ Eine gemeinsame Datei fuer alle Seiten. Optik abgeleitet vom .sc-glass-cta Button (Zeitgeist-Seite), aber als Karte statt Pille. Verwendung:
...
Einbinden: als LETZTES Element im , damit die Regeln die alten Inline-Styles der Seiten ueberschreiben. ============================================================ */ .sc-glass-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px !important; padding: 34px 38px !important; margin: 24px 0; color: var(--c-cream) !important; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 60%), linear-gradient(168deg, rgba(30,52,140,.95) 0%, rgba(16,33,98,.96) 48%, rgba(9,20,66,.97) 100%) !important; /* Nov. 2026: keine Hintergrund-Unschaerfe mehr. Die Flaeche deckt zu 95-97 %, die Unschaerfe war unsichtbar, musste aber beim Scrollen in jedem Bild neu berechnet werden. */ border: 1px solid rgba(163,173,255,.36) !important; border-left: 1px solid rgba(163,173,255,.36) !important; box-shadow: 0 18px 44px rgba(6,12,45,.34), 0 0 38px rgba(72,98,222,.20), inset 0 1px 1px rgba(255,255,255,.46), inset 0 -16px 34px rgba(44,66,170,.24), inset 0 -1px 1px rgba(163,173,255,.18) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } /* Inhalt liegt ueber den Glanzlichtern */ .sc-glass-card > * { position: relative; z-index: 2; } /* Glanzpunkte — dieselbe Idee wie beim Button, ruhiger dosiert */ .sc-glass-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(2.2px 2.2px at 9% 24%, #fff, transparent 60%), radial-gradient(1.8px 1.8px at 23% 68%, rgba(255,255,255,.94), transparent 60%), radial-gradient(2.1px 2.1px at 41% 18%, #fff, transparent 60%), radial-gradient(1.7px 1.7px at 58% 74%, rgba(255,255,255,.9), transparent 60%), radial-gradient(2.3px 2.3px at 76% 30%, #fff, transparent 60%), radial-gradient(1.8px 1.8px at 91% 62%, rgba(255,255,255,.92), transparent 60%); animation: scCardGlintA 3.2s ease-in-out infinite; } .sc-glass-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.9px 1.9px at 16% 52%, #fff, transparent 60%), radial-gradient(2.2px 2.2px at 34% 86%, rgba(255,255,255,.92), transparent 60%), radial-gradient(1.7px 1.7px at 52% 38%, #fff, transparent 60%), radial-gradient(2px 2px at 69% 12%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1.8px 1.8px at 86% 84%, #fff, transparent 60%); animation: scCardGlintB 4.1s ease-in-out .9s infinite; } @keyframes scCardGlintA{ 0%,100%{opacity:.28;} 50%{opacity:.9;} } @keyframes scCardGlintB{ 0%,100%{opacity:.3;} 45%{opacity:.85;} } .sc-glass-card:hover { transform: translateY(-2px); border-color: rgba(186,196,255,.5) !important; box-shadow: 0 24px 56px rgba(6,12,45,.4), 0 0 52px rgba(84,112,240,.28), inset 0 1px 1px rgba(255,255,255,.58), inset 0 -16px 34px rgba(52,76,190,.28) !important; } @media (prefers-reduced-motion: reduce) { .sc-glass-card::before, .sc-glass-card::after { animation: none; opacity: .5; } .sc-glass-card:hover { transform: none; } } /* ---------- Typografie in der Karte ---------- */ .sc-glass-card .ff-kicker { font-family: "Manrope",sans-serif; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--c-lavender) !important; opacity: 1 !important; margin-bottom: 12px; } .sc-glass-card .format-feature__title, .sc-glass-card .ff-title, .sc-glass-card h2, .sc-glass-card h3 { font-family: "EB Garamond",Georgia,serif; font-weight: 500; font-size: clamp(25px,3vw,35px); color: var(--c-cream) !important; margin: 0 0 12px; line-height: 1.12; } .sc-glass-card .format-feature__title em, .sc-glass-card .ff-title em, .sc-glass-card h2 em, .sc-glass-card h3 em { font-style: italic; color: var(--c-lavender) !important; } .sc-glass-card p { color: rgb(var(--c-cream-rgb) / .9) !important; font-size: 18px !important; opacity: 1 !important; max-width: 70ch; margin: 0; line-height: 1.62; } .sc-glass-card p + p { margin-top: 12px; } .sc-glass-card a { color: var(--c-coral-soft); } @media (max-width:720px) { .sc-glass-card { padding: 26px 22px !important; border-radius: 16px !important; } .sc-glass-card p { font-size: 17px !important; } } /* ---------- Seiten-spezifische Ueberschreibungen ---------- */ /* Startseite: alte Lavendel-Regeln der .format-feature--gen aushebeln */ .formats .format-feature.sc-glass-card { background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 60%), linear-gradient(168deg, rgba(30,52,140,.95) 0%, rgba(16,33,98,.96) 48%, rgba(9,20,66,.97) 100%) !important; border-color: rgba(163,173,255,.36) !important; border-left-color: rgba(163,173,255,.36) !important; } .formats .format-feature.sc-glass-card .format-feature__title { color: var(--c-cream) !important; } .formats .format-feature.sc-glass-card .format-feature__title em { color: var(--c-lavender) !important; } .formats .format-feature.sc-glass-card p { color: rgb(var(--c-cream-rgb) / .9) !important; opacity: 1 !important; } /* Fellows & Team: alte .ff-gen Lavendel-Regeln aushebeln */ .ff-gen.sc-glass-card { border-left-color: rgba(163,173,255,.36) !important; } .ff-gen.sc-glass-card .ff-title { color: var(--c-cream) !important; } .ff-gen.sc-glass-card .ff-title em { color: var(--c-lavender) !important; } .ff-gen.sc-glass-card .ff-kicker { color: var(--c-lavender) !important; } .ff-gen.sc-glass-card p { color: rgb(var(--c-cream-rgb) / .9) !important; opacity: 1 !important; } /* ============================================================ Helle Glasflaechen — vereinheitlicht die bisher weissen Boxen ------------------------------------------------------------ .sc-glass-light freistehende Karte (Rundung, Rand, Schatten) .sc-glass-light--text dasselbe, aber deckender: fuer lange Lesetexte .sc-glass-cell Rasterzelle: nur Oberflaeche, Komposition des Rasters bleibt unangetastet ============================================================ */ .sc-glass-light { position: relative; border-radius: 16px !important; background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,0) 68%), rgb(var(--c-paper-rgb) / .60) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,.58) !important; box-shadow: 0 14px 34px rgb(var(--c-navy-rgb) / .15), inset 0 1px 1px rgba(255,255,255,.88), inset 0 -12px 24px rgba(163,173,255,.12) !important; } /* Lesetexte brauchen mehr Deckung, sonst leidet der Kontrast */ .sc-glass-light--text { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,0) 62%), rgb(var(--c-paper-rgb) / .90) !important; } /* Rasterzellen: gleiche Glas-Oberflaeche, aber keine eigene Rundung/Schatten, damit das Raster als ein Block lesbar bleibt */ .sc-glass-cell { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,0) 70%), rgb(var(--c-paper-rgb) / .62) !important; -webkit-backdrop-filter: blur(12px) saturate(145%); backdrop-filter: blur(12px) saturate(145%); box-shadow: inset 0 1px 1px rgba(255,255,255,.75) !important; } /* ---------- Hover-Feedback fuer die hellen Glasflaechen ---------- Angelehnt an die Buttons: das Glas hellt auf, der Rand nimmt einen Hauch Lavendel an, der Schatten wird tiefer. Freistehende Karten heben sich zusaetzlich leicht an; Rasterzellen bleiben an Ort und Stelle, damit das Raster als Block ruhig bleibt. */ .sc-glass-light:hover, .sc-glass-light:focus-within { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.26) 38%, rgba(255,255,255,0) 68%), rgba(252,250,245,.72) !important; border-color: rgba(255,255,255,.80) !important; box-shadow: 0 20px 46px rgb(var(--c-navy-rgb) / .20), 0 0 26px rgba(132,135,214,.16), inset 0 1px 1px rgba(255,255,255,1), inset 0 -12px 24px rgba(163,173,255,.16) !important; } .sc-glass-light--text:hover, .sc-glass-light--text:focus-within { background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.22) 34%, rgba(255,255,255,0) 62%), rgba(252,250,246,.95) !important; } .sc-glass-light { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s, border-color .3s; } .sc-glass-cell { transition: background .45s ease, box-shadow .45s ease; } .sc-glass-cell:hover, .sc-glass-cell:focus-within { transform: none !important; background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.30) 40%, rgba(255,255,255,.08) 70%), rgba(253,251,247,.86) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(132,135,214,.22), inset 0 -14px 26px rgba(163,173,255,.14) !important; } @media (prefers-reduced-motion: reduce) { .sc-glass-light:hover, .sc-glass-light:focus-within { transform: none; } .sc-glass-light, .sc-glass-cell { transition: none; } } /* ============================================================ Nachtglas fuer die Zitatkarten "Auf den Schultern von Riesen" ------------------------------------------------------------ Dieselbe Glasfamilie wie .sc-glass-card, aber im Verhaeltnis zurueckgenommen: vier Karten nebeneinander mit langen Zitaten, auf einem Sternenhimmel. Deshalb durchscheinender, ruhigere Glanzpunkte, Lesbarkeit der Zitate zuerst. ============================================================ */ .lineage :is(.giants-grid, .lineage-rail) .thinker { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 55%), linear-gradient(168deg, rgba(46,68,170,.42) 0%, rgba(20,38,110,.34) 52%, rgba(10,22,70,.40) 100%) !important; -webkit-backdrop-filter: blur(14px) saturate(165%); backdrop-filter: blur(14px) saturate(165%); border: 1px solid rgba(163,173,255,.30) !important; box-shadow: 0 18px 42px rgba(3,8,32,.42), 0 0 30px rgba(72,98,222,.12), inset 0 1px 1px rgba(255,255,255,.34), inset 0 -16px 32px rgba(44,66,170,.18) !important; transition: box-shadow .45s ease, border-color .45s ease, background .45s ease; } .lineage :is(.giants-grid, .lineage-rail) .thinker > * { position: relative; z-index: 2; } .lineage :is(.giants-grid, .lineage-rail) .thinker::before, .lineage :is(.giants-grid, .lineage-rail) .thinker::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .lineage :is(.giants-grid, .lineage-rail) .thinker::before { background-image: radial-gradient(1.8px 1.8px at 12% 9%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1.7px 1.7px at 88% 71%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 21% 93%, rgba(255,255,255,.85), transparent 60%); animation: scCardGlintA 4.6s ease-in-out infinite; opacity: .4; } .lineage :is(.giants-grid, .lineage-rail) .thinker::after { background-image: radial-gradient(1.5px 1.5px at 56% 5%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 94% 38%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1.4px 1.4px at 6% 58%, #fff, transparent 60%); animation: scCardGlintB 5.8s ease-in-out 1.3s infinite; opacity: .35; } .lineage :is(.giants-grid, .lineage-rail) .thinker:hover, .lineage :is(.giants-grid, .lineage-rail) .thinker.is-lit { transform: none !important; background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 55%), linear-gradient(168deg, rgba(56,80,190,.52) 0%, rgba(24,44,124,.44) 52%, rgba(12,26,80,.48) 100%) !important; border-color: rgba(186,196,255,.48) !important; box-shadow: 0 24px 54px rgba(3,8,32,.50), 0 0 46px rgba(84,112,240,.24), inset 0 1px 1px rgba(255,255,255,.48), inset 0 -16px 32px rgba(52,76,190,.24) !important; } @media (prefers-reduced-motion: reduce) { .lineage :is(.giants-grid, .lineage-rail) .thinker::before, .lineage :is(.giants-grid, .lineage-rail) .thinker::after { animation: none; } .lineage :is(.giants-grid, .lineage-rail) .thinker:hover, .lineage :is(.giants-grid, .lineage-rail) .thinker.is-lit { transform: none; } } /* Tradition: Karussell bekommt Luft, damit jede Glaskarte als eigene Karte mit Rand und Schatten lesbar wird */ .lineage .lineage-rail { gap: 18px !important; padding: 18px 4px 34px !important; scroll-padding-left: 4px; } .lineage .lineage-rail .thinker { border-right: 1px solid rgba(163,173,255,.30) !important; } @media (max-width:600px) { .lineage .lineage-rail .thinker:hover, .lineage .lineage-rail .thinker.is-lit { transform: none !important; } }