/* ============================================================ Mandalo.de – Deko-Effekt: animierte Würfel (Quadrate) Partner-Datei zu assets/js/cubes.js. Diese SEPARATE CSS-Datei enthält nur den Würfeleffekt für die blauen Streifen der Startseite (Hero + CTA-Band) und die graue Sektion der Vorteile-Seite: kleine Quadrate, die von ihrer Ecke aus wachsen, sich 2½ Mal drehen, ausblenden und im 12-s-Zyklus erneut aufblühen. Die festen Positionen/Farben/Verzögerungen sind nur der FALLBACK ohne JavaScript – cubes.js überschreibt sie pro Würfel und Runde per Inline-Style (Position, Dauer, Zielgröße über die CSS-Variable --cube-scale, Farbe). Zugehöriges HTML: pro Streifen ein Container ============================================================ */ /* 1. ANKER-SEKTIONEN Die Streifen werden zum Bezugspunkt für die absolut positionierten Würfel und bekommen einen eigenen Stacking-Kontext (z-index: 0), damit die Würfel nie mit anderen Teilen der Seite (z. B. Navbar) kollidieren. Der Streifen-Inhalt (.container bzw. .auth-card) liegt per z-index: 1 darüber – Text & Buttons bleiben sichtbar und klickbar. */ .hero, .cta-band, .cubes-anchor { position: relative; z-index: 0; } /* Inhalt über der Würfelschicht (z-index 0): .container auf allen Seiten; zusätzlich .auth-card (Login/Registrierung) – sie ist KEINE .container, muss aber ebenfalls darüber liegen, weil absolut positionierte Elemente mit z-index sonst über nicht positionierten Elementen gerendert würden. */ .hero .container, .cta-band .container, .cubes-anchor .container, .cubes-anchor .auth-card { position: relative; z-index: 1; } /* 2. WÜRFEL-CONTAINER: deckt den kompletten Streifen ab (inset: 0). overflow: hidden = gewachsene Würfel werden am Bandrand abgeschnitten; pointer-events: none = die Deko blockt nie Klicks, Links oder Textselektion */ .cubes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* 3. EINZELNER WÜRFEL (Basis-Stil) 10 px Quadrat mit 1 px Rand in Blauton T1 (dunkelblau). - transform-origin: top left -> Wachstum UND Drehung um die obere linke Ecke (nicht wie üblich um die Mitte) - transform: scale(0) -> wenn die Animation nicht läuft: unsichtbar (Streckfaktor 0) - animation: 12 s, ease-in (langsam anlaufend), infinite Die Keyframes unten treiben: scale(0) -> scale(var(--cube-scale)) (10 px -> Zielgröße, Default 20 = 200 px; cubes.js setzt die Variable pro Würfel zufällig auf 10–24) rotate(0deg) -> rotate(960deg) (2½ Umdrehungen) opacity 1 -> 0 (Ausblenden) Danach springt der Würfel unsichtbar auf den Anfang – der 12-s-Zyklus läuft durchgehend weiter. */ .cube { position: absolute; top: 80%; left: 45%; width: 10px; height: 10px; border: solid 1px; /* T1 = dunkelblau (Basis-Ton, ≈ #003399) */ transform-origin: top left; transform: scale(0) rotate(0deg) translate(-50%, -50%); animation: cube 12s ease-in infinite; /* kein "forwards" nötig: infinite wiederholt ohnehin endlos */ } /* FARB-PALETTE der drei Blautöne als rgba (Projekt-Konvention), 1:1 mit der Blau-Palette in cubes.js: T1 rgba(0, 51, 153, 0.99) ≈ #003399 dunkelblau T2 rgba(0, 82, 245, 0.99) ≈ #0052F5 leuchtend blau T3 rgba(92, 203, 255, 0.99) ≈ #5CCBFF helles Himmelblau T2 an allen GERADEN Würfeln (2n), T3 an allen durch 3 teilbaren (3n; steht nach 2n und gewinnt bei Würfel 6) – Fallback-Verteilung ohne JS: 1=T1, 2=T2, 3=T3, 4=T2, 5=T1, 6=T3. Mit JS überschreibt cubes.js die Farbe pro Würfel/Runde (Inline-Style). */ .cube:nth-child(2n) { border-color: rgba(0, 82, 245, 0.99); /* T2 = leuchtend blau */ } .cube:nth-child(3n) { border-color: rgba(92, 203, 255, 0.99); /* T3 = helles Himmelblau */ } /* 3a. BLAU-VARIANTE (.cubes-blue, Startseite: Hero + CTA-Band): gleiche drei Töne als eigene Regeln unter der Zusatzklasse – Specificity (0,3,0) schlägt die Basis (0,2,0) zuverlässig */ .cubes-blue .cube { border-color: rgba(0, 51, 153, 0.99); /* T1 = dunkelblau */ } .cubes-blue .cube:nth-child(2n) { border-color: rgba(0, 82, 245, 0.99); /* T2 = leuchtend blau */ } .cubes-blue .cube:nth-child(3n) { border-color: rgba(92, 203, 255, 0.99); /* T3 = helles Himmelblau */ } /* 3b. GRAU-VARIANTE (.cubes-gray, graue Sektion der Vorteile-Seite, Hintergrund #f5f5f7): gleiche Würfel und Animation, nur andere Randfarbe (Apple-Grautöne aus style.css als rgba): G1 rgba(58, 58, 60, 0.9) ≈ #3a3a3c dunkles Grau G2 rgba(110, 110, 115, 0.9) ≈ #6e6e73 mittleres Grau G3 rgba(210, 210, 215, 0.9) ≈ #d2d2d7 helles Grau Gleiche Fallback-Logik wie Blau (G2 an 2n, G3 an 3n) */ .cubes-gray .cube { border-color: rgba(58, 58, 60, 0.9); /* G1 = dunkles Grau */ } .cubes-gray .cube:nth-child(2n) { border-color: rgba(110, 110, 115, 0.9); /* G2 = mittleres Grau */ } .cubes-gray .cube:nth-child(3n) { border-color: rgba(210, 210, 215, 0.9); /* G3 = helles Grau */ } /* 4. POSITION & STARTVERSATZ JEDER EINZELNER WÜRFEL FESTER FALLBACK (nur ohne JavaScript sichtbar): jeder Würfel steht an einer eigenen Stelle (in % von Breite/Höhe) und startet gestaffelt später, so "blühen" sie nacheinander auf und überlappen sich im 12-s-Zyklus. Mit JS übernimmt cubes.js die Steuerung (Inline-Styles überschreiben diese Regeln). */ .cube:nth-child(2) { animation-delay: 1s; left: 25%; top: 40%; } .cube:nth-child(3) { animation-delay: 3s; left: 75%; top: 50%; } .cube:nth-child(4) { animation-delay: 5s; left: 90%; top: 10%; } .cube:nth-child(5) { animation-delay: 7s; left: 10%; top: 85%; } .cube:nth-child(6) { animation-delay: 9s; left: 50%; top: 10%; } /* 5. ANIMATION: wachsen + drehen + fade (siehe oben) */ @keyframes cube { from { transform: scale(0) rotate(0deg) translate(-50%, -50%); opacity: 1; } to { /* --cube-scale: Ziel-Streckfaktor als CSS-Variable, wird pro Würfel von cubes.js gesetzt (Wert 10–24); Fallback 20 */ transform: scale(var(--cube-scale, 20)) rotate(960deg) translate(-50%, -50%); opacity: 0; } } /* 6. BARREIERFREIHEIT: Nutzer mit "Bewegung reduzieren" – Animation stoppen, die Würfel bleiben bei scale(0) und sind damit komplett unsichtbar */ @media (prefers-reduced-motion: reduce) { .cube { animation: none; } }