/* ============================================================ 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:#F5F1E8 !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; -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); 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 .sc-card-kicker, .sc-glass-card .format-feature__kicker, .sc-glass-card .ff-kicker{ font-family:'Manrope',sans-serif; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:#C3C5E8 !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:#F5F1E8 !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:#C3C5E8 !important; } .sc-glass-card p{ color:rgba(245,241,232,.9) !important; /* eine Stufe groesser als der uebrige Fliesstext, damit die Texte in den dunklen Kaesten ebenso gut lesbar sind */ 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:#FFB4A7; } @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{ /* muss die alte Lavendel-Regel .formats .format-feature--gen ueberbieten */ 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:#F5F1E8 !important; } .formats .format-feature.sc-glass-card .format-feature__title em{ color:#C3C5E8 !important; } .formats .format-feature.sc-glass-card .format-feature__kicker{ color:#C3C5E8 !important; } .formats .format-feature.sc-glass-card p{ color:rgba(245,241,232,.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:#F5F1E8 !important; } .ff-gen.sc-glass-card .ff-title em{ color:#C3C5E8 !important; } .ff-gen.sc-glass-card .ff-kicker{ color:#C3C5E8 !important; } .ff-gen.sc-glass-card p{ color:rgba(245,241,232,.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%), rgba(250,247,240,.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 rgba(10,26,79,.15), inset 0 1px 1px rgba(255,255,255,.88), inset 0 -12px 24px rgba(163,173,255,.12) !important; transition:box-shadow .35s, border-color .35s; } /* 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%), rgba(250,247,240,.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%), rgba(250,247,240,.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; } @media (prefers-reduced-motion: reduce){ .sc-glass-light{ transition:none; } } /* ---------- 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 rgba(10,26,79,.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 .3s, box-shadow .3s; } .sc-glass-cell:hover, .sc-glass-cell:focus-within{ transform:none !important; background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.24) 40%, rgba(255,255,255,0) 70%), rgba(252,250,245,.76) !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; } }