/* ================================================================== SHARE-MENÜ — 3×3-Grid, das aus dem Hub-Button aufklappt Farben: Lime #D8F024 / Creme #F7F5EF / Dunkel #1A1B1A Markup: .share > .share__hub + 8 × .share__card (der Hub steht fest in der Mitte, die 8 Kacheln füllen die Zellen drumherum automatisch auf) JS: share-menu.js setzt data-open="true|false" ================================================================== */ .share{ /* --- Farben --- */ --lime: #D8F024; --cream: #F7F5EF; --ink: #121312; --surface: #1A1B1A; --line: #2E2F2E; /* --- Maße --- */ --size: 58px; /* Kachelgröße */ --gap: 10px; /* Abstand */ --radius: 18px; /* Kachel-Rundung */ --cell: calc(var(--size) + var(--gap)); /* Rastermaß */ /* --- Timing --- */ --open-dur: 460ms; --close-dur: 240ms; --stagger: 45ms; --spring: cubic-bezier(.34, 1.56, .64, 1); /* leichtes Überschwingen */ --ease-in: cubic-bezier(.4, 0, 1, 1); display: grid; grid-template-columns: repeat(3, var(--size)); grid-template-rows: repeat(3, var(--size)); gap: var(--gap); width: max-content; } /* ------------------------------------------------------------------ Hub — der Auslöser, sitzt fest in der Mitte ------------------------------------------------------------------ */ .share__hub{ grid-area: 2 / 2; display: grid; place-items: center; width: var(--size); height: var(--size); padding: 0; border: 0; border-radius: var(--radius); background: var(--lime); color: var(--ink); cursor: pointer; z-index: 2; transition: transform 260ms var(--spring), box-shadow 200ms ease; } .share__hub:hover, .share__hub:focus-visible{ transform: scale(1.06); box-shadow: 0 0 0 1px var(--lime), 0 12px 28px -8px color-mix(in srgb, var(--lime) 55%, transparent); } /* aufgeklappt: Hub sitzt minimal tiefer — wirkt wie eingedrückt */ .share[data-open="true"] .share__hub{ transform: scale(.94); } .share[data-open="true"] .share__hub:hover{ transform: scale(1); } /* ------------------------------------------------------------------ Kacheln — füllen die 8 Zellen um den Hub herum auf ------------------------------------------------------------------ */ .share__card{ --x: 0; /* Spaltenversatz zur Mitte, siehe Zuweisung unten */ --y: 0; /* Zeilenversatz */ --ring: 1; /* 1 = Kreuz, 2 = Ecken — steuert den Stagger */ display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: var(--radius); border: 1.5px solid transparent; background: var(--cream); color: var(--ink); text-decoration: none; cursor: pointer; /* --delay wird unten je nach Zustand umgesetzt */ --delay: calc(var(--ring) * var(--stagger)); visibility: visible; transition-property: transform, opacity, visibility, border-color, box-shadow, background-color; transition-duration: var(--open-dur), calc(var(--open-dur) * .55), 0s, 180ms, 180ms, 180ms; transition-timing-function: var(--spring), ease, linear, ease, ease, ease; transition-delay: var(--delay), var(--delay), 0s, 0s, 0s, 0s; will-change: transform, opacity; } /* zugeklappt: alles fährt in die Mitte und schrumpft weg. visibility (statt nur opacity) nimmt die Kacheln aus der Tab-Reihenfolge — sonst tabbt man ins Unsichtbare. Sie schaltet erst um, wenn die Bewegung durch ist. */ .share[data-open="false"] .share__card{ /* beim Schließen laufen die Ecken zuerst rein */ --delay: calc((2 - var(--ring)) * var(--stagger) * .6); opacity: 0; visibility: hidden; transform: translate( calc(var(--x) * var(--cell) * -1), calc(var(--y) * var(--cell) * -1) ) scale(.35); transition-duration: var(--close-dur), var(--close-dur), 0s, 180ms, 180ms, 180ms; transition-timing-function: var(--ease-in), var(--ease-in), linear, ease, ease, ease; transition-delay: var(--delay), var(--delay), calc(var(--delay) + var(--close-dur)), 0s, 0s, 0s; } /* Kachel unter dem Zeiger */ .share__card:hover, .share__card:focus-visible{ transform: scale(1.06); border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 14px 30px -10px color-mix(in srgb, var(--lime) 55%, transparent); outline: none; } .share__card svg, .share__card img, .share__hub svg{ width: 22px; height: 22px; display: block; pointer-events: none; } /* Leerer Platz — fliegt mit auf, ist aber nicht bedienbar. Zum Befüllen: Klasse entfernen und wie die anderen Kacheln mit href, aria-label und Icon versehen. */ .share__card--empty{ background: transparent; border-color: var(--line); cursor: default; pointer-events: none; } /* ------------------------------------------------------------------ Küsschen-Kachel — kein Link, nur zum Draufhalten. Beim Hovern pustet das Gesicht Küsse nach rechts oben raus. ------------------------------------------------------------------ */ .share__card--kiss{ position: relative; cursor: default; } .share__card--kiss:hover{ transform: scale(1.04); border-color: transparent; box-shadow: none; } .kiss__face{ font-size: 25px; line-height: 1; user-select: none; } .share__card--kiss:hover .kiss__face{ animation: kiss-pucker 1.5s ease-in-out infinite; } .kiss__fly{ --fx: 40px; --fy: -46px; --fr: 12deg; --fd: 0s; position: absolute; inset: 50% auto auto 50%; margin: -9px 0 0 -9px; font-size: 18px; line-height: 1; opacity: 0; pointer-events: none; user-select: none; animation-delay: var(--fd); } .share__card--kiss:hover .kiss__fly{ animation-name: kiss-fly; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; } @keyframes kiss-fly{ 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.15) rotate(var(--fr)); } } @keyframes kiss-pucker{ 0%, 55%, 100% { transform: scale(1) rotate(0deg); } 12% { transform: scale(1.2) rotate(-7deg); } 28% { transform: scale(1) rotate(0deg); } } /* ------------------------------------------------------------------ Position der 8 Kacheln Der Hub liegt fest auf 2/2, deshalb füllen die Kacheln in DOM-Reihenfolge die übrigen Zellen von selbst auf: 1/1 1/2 1/3 2/1 HUB 2/3 3/1 3/2 3/3 Jede Kachel bekommt im HTML ihren Versatz zur Mitte mit: --x -1 links / 0 Mitte / 1 rechts --y -1 oben / 0 Mitte / 1 unten --ring 1 für die vier Kreuz-Positionen, 2 für die vier Ecken (steuert nur die Verzögerung beim Auffliegen) Reihenfolge im HTML, passend zur Auffüllung oben: 1: --x:-1 --y:-1 --ring:2 5: --x: 1 --y: 0 --ring:1 2: --x: 0 --y:-1 --ring:1 6: --x:-1 --y: 1 --ring:2 3: --x: 1 --y:-1 --ring:2 7: --x: 0 --y: 1 --ring:1 4: --x:-1 --y: 0 --ring:1 8: --x: 1 --y: 1 --ring:2 ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Reduzierte Bewegung: klappt auf, aber ohne Flug und Stagger ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .share__card, .share__hub{ transition: opacity 120ms linear, border-color 120ms linear; transition-delay: 0s; } .share[data-open="false"] .share__card{ transform: none; transition-delay: 0s; } .share[data-open="true"] .share__hub, .share[data-open="true"] .share__hub:hover, .share__card:hover, .share__hub:hover{ transform: none; } /* Küsschen bleiben stecken */ .share__card--kiss:hover .kiss__face, .share__card--kiss:hover .kiss__fly{ animation: none; } } /* STEP62AG · Share-Kacheln leicht im aktuellen Menü-Farbton aufhellen Damit sie besser sichtbar sind, ohne die 1zu1-Animation zu verlieren. */ .share__card{ background: color-mix(in srgb, var(--cream) 84%, var(--lime) 16%); border-color: color-mix(in srgb, var(--lime) 24%, rgba(17,18,17,.06)); box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--lime) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.72); } .share__card:hover, .share__card:focus-visible{ background: color-mix(in srgb, var(--cream) 70%, var(--lime) 30%); } .share__card--empty{ background: color-mix(in srgb, transparent 76%, var(--lime) 24%); border-color: color-mix(in srgb, var(--lime) 24%, var(--line)); } /* STEP62AJ · linke leere Share-Kachel ausblenden, Layout bleibt stabil */ .share .share__card--empty:first-of-type{ background:transparent!important; border-color:transparent!important; box-shadow:none!important; opacity:0!important; }