/** Theme Name: PD&O Agency 2025 Author: Flo & Eve Author URI: https://www.pdo-agency.com Description: Theme 2025 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: pdo-agency-2025 Template: astra */ /* * Verhindert einen horizontalen Scrollbalken auf schmaleren Screens: Die * Scroll-Reveal-Animationen (pdo-process-reveal.js, pdo-reveal-text.js) * arbeiten teils mit horizontalen Transforms (z.B. der "learn more"-Button * startet leicht rechts versetzt) - direkt an Section-Raendern kann das je * nach verfuegbarer Breite kurzzeitig ueber die Viewport-Breite hinausragen. * html/body faengt das ab, ohne interne horizontale Scroll-Bereiche (z.B. * das Portfolio-Swiper, das ohnehin sein eigenes overflow:hidden hat) zu * beeintraechtigen. */ html, body { overflow-x: hidden; } /* * Elementors natives Seiten-Setting "Scroll Snap" (Layout -> Scrolling * Effects) steht auf der Startseite noch auf "Ja" - das erzeugt in * Elementors eigenem generierten Page-CSS (post-.css) zusaetzlich * "html { overflow: hidden; }", gedacht fuer Elementors eigene native * CSS-Scroll-Snap-Umsetzung. Diese wurde durch pdo-scroll-snap.js (Lenis- * Snap-Addon) ersetzt (siehe dortiger Kommentar), das alte Setting im * Editor blieb aber aktiv. Auf Desktop fiel das nicht auf, weil Lenis * Wheel-Events per eigenem JS-Listener abfaengt und programmatisch * scrollt (umgeht die CSS-Restriktion) - natives Touch-Scrollen auf * Mobilgeraeten haelt sich dagegen an "overflow: hidden" auf und * blockierte dadurch jedes Swipen auf der Startseite komplett. !important * noetig, da Elementors generiertes CSS nach diesem Theme-Stylesheet * geladen wird. */ html { overflow-y: visible !important; } /* * Header-Kontrast: Logo/Nav-Links/Button werden per JS (siehe * pdo-header-contrast.js) auf Marken-Blau umgefaerbt, sobald der * transparente Sticky-Header ueber einem hellen Abschnitt steht. * #2c4295 = Elementor Global Color "astglobalcolor0" (Marken-Blau). * * Selektor-Form ("body #pdo-header.is-on-light ...") und !important sind * bewusst so gewaehlt, dass sie das alte, ungenutzte Custom-CSS im * Header-Template (Elementor-Widget "Custom CSS", Klasse * ".header-scrolled" - Ueberbleibsel vom frueheren Elementor-Scroll-Effekt, * der NICHT wieder eingefuehrt werden soll) zuverlaessig ueberschreiben, * ohne dieses Custom-CSS selbst anzufassen. */ #pdo-header .elementor-nav-menu a, #pdo-header .elementor-icon svg, #pdo-header .elementor-button { transition: color 0.25s ease, fill 0.25s ease, border-color 0.25s ease; } body #pdo-header.is-on-light .elementor-nav-menu a, body #pdo-header.is-on-light .elementor-icon svg, body #pdo-header.is-on-light .elementor-heading-title, body #pdo-header.is-on-light .elementor-button { color: #2c4295 !important; fill: #2c4295 !important; border-color: #2c4295 !important; } /* * Header-Hintergrund passend zum Kontrast mitschalten (weiss sobald * "is-on-light" aktiv ist, sonst transparent) - die eigentliche Farbe wird * per Inline-Style in pdo-header-contrast.js gesetzt, NICHT hier ueber die * Klasse: eine reine ".is-on-light { background: ... }"-Regel (auch mit * !important) griff nicht zuverlaessig, weil Elementors eigenes Sticky- * Header-Script bei jedem Scroll-Update selbst wieder auf den Style dieses * Elements schreibt (siehe Kommentar dort). Hier nur die Transition, damit * der von JS gesetzte Farbwechsel weich blendet statt hart umzuschalten. */ #pdo-header { transition: background-color 0.25s ease; } /* * Zeilen-Reveal (siehe pdo-line-reveal.js): Klasse "pdo-line-reveal" in * Elementor bei "Advanced -> CSS Classes" eintragen. ".pdo-line-reveal__mask" * ist die Blende (overflow: hidden), ".pdo-line-reveal__inner" das Element, * das GSAP tatsaechlich bewegt (yPercent/opacity). */ .pdo-line-reveal__mask { display: block; overflow: hidden; } .pdo-line-reveal__inner { display: block; } /* * Snap-/Pin-Sections (Startseite: Work/Offer/Contact/More_1, Referenz * Partner; Agency-Seite: What drives us/Our journey/Award-winning work/ * Our Values; Services-Seite: Consultation/Planning/Execution) sollen alle * denselben Abstand vom oberen Section-Rand zum Divider haben. Das greift * bei diesen Sections nicht, weil sie zusaetzlich die global genutzte * Utility-Klasse ".outer_container" tragen, die per Padding-Shorthand * ("padding: 0 10%") padding-top wieder auf 0 zieht - gleiche Spezifitaet * wie Elementors eigene Regel, gewinnt aber durch spaetere Ladereihenfolge. * ".outer_container" selbst NICHT anfassen (site-weit fuer die 10%- * Seitenraender im Einsatz) - stattdessen hier gezielt je Section-ID * wieder auf 2em setzen (Wert der Startseiten-Referenz "Partner"). */ .elementor-element-ade1bc3.outer_container, .elementor-element-c723538.outer_container, .elementor-element-27a0586.outer_container, .elementor-element-c7d6d1e.outer_container, .elementor-element-70d4dc5.outer_container, .elementor-element-4d2c83d.outer_container, .elementor-element-beb0545.outer_container, .elementor-element-4c12397.outer_container, .elementor-element-441a5ba.outer_container, .elementor-element-978a0ee.outer_container, .elementor-element-7155a58.outer_container, .elementor-element-fdc69a6.outer_container, .elementor-element-f9343cb.outer_container { padding-top: 2em !important; } /* * Services-Seite: Fortschritts-Rail links neben den Consultation/Planning/ * Execution-Accordions (siehe pdo-services-pin.js). padding-left schafft * den Platz, die Rail selbst ist absolut positioniert und stoert dadurch * das Accordion-Layout nicht. */ #servicecont, #development, #execution { padding-left: 32px; } .pdo-services-rail { position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; } .pdo-services-rail__track { position: absolute; inset: 0; background-color: rgba(10, 10, 20, 0.12); } .pdo-services-rail__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background-color: #2c4295; } /* * "Explore more of our work"-Projekt-Slider: klassischer Links/Rechts- * Slider, kein Scroll-Pin mehr (siehe pdo-work-horizontal.js, auf Wunsch * entfernt) - identisches Widget (natives Elementor-Pro "Loop Grid") auf * vier Seiten, je eigene Widget-ID: 0942988 (Startseite), 652ab6f (Agency, * "Award-winning work"), 0834644 (Services, "Still curious?"), 47c369e * (Contact, "Still curious?"). 97187b3 ist das neue "Our work"-Loop-Grid * (3 Karten, ebenfalls Startseite) - bekommt dieselbe Slider-Behandlung, * siehe pdo-work-horizontal.js. ".elementor-loop-container" ist ein nativ * horizontal scrollbarer Container - Wischen auf Touch-Geraeten * funktioniert dadurch automatisch, ganz ohne JS. Die Pfeil-Buttons * (".pdo-loop-nav-btn") ergaenzt pdo-work-horizontal.js per JS, verschieben * per row.scrollBy() um je eine Kartenbreite. "position: relative" auf dem * Widget-Container ist der Positionierungs-Anker fuer die Buttons. */ .elementor-element-0942988 .elementor-widget-container, .elementor-element-97187b3 .elementor-widget-container, .elementor-element-652ab6f .elementor-widget-container, .elementor-element-0834644 .elementor-widget-container, .elementor-element-47c369e .elementor-widget-container { position: relative; } .elementor-element-0942988 .elementor-loop-container, .elementor-element-97187b3 .elementor-loop-container, .elementor-element-652ab6f .elementor-loop-container, .elementor-element-0834644 .elementor-loop-container, .elementor-element-47c369e .elementor-loop-container { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; gap: 24px; /* Platz oben fuer den Hover-Bounce der Karten (siehe .portfolioslider:hover unten), unten fuer den Scroll-Snap-Puffer. */ padding: 14px 4px 12px; /* Native Scrollbar ausgeblendet - die Pfeil-Buttons uebernehmen die sichtbare Bedienung auf Desktop, Wischen auf Touch bleibt unveraendert funktionsfaehig (nur die Leiste selbst ist unsichtbar). */ scrollbar-width: none; -ms-overflow-style: none; } .elementor-element-0942988 .elementor-loop-container::-webkit-scrollbar, .elementor-element-97187b3 .elementor-loop-container::-webkit-scrollbar, .elementor-element-652ab6f .elementor-loop-container::-webkit-scrollbar, .elementor-element-0834644 .elementor-loop-container::-webkit-scrollbar, .elementor-element-47c369e .elementor-loop-container::-webkit-scrollbar { display: none; } .elementor-element-0942988 .elementor-loop-container .e-loop-item, .elementor-element-652ab6f .elementor-loop-container .e-loop-item, .elementor-element-0834644 .elementor-loop-container .e-loop-item, .elementor-element-47c369e .elementor-loop-container .e-loop-item { position: relative; flex: 0 0 clamp(300px, 34vw, 480px); width: clamp(300px, 34vw, 480px); scroll-snap-align: start; } /* * "Our work" (97187b3) zeigt bewusst nur eine Karte pro Ansicht (volle * Container-Breite) statt der clamp()-Teilansicht der anderen Slider oben - * auf Wunsch, weil hier je Karte deutlich mehr Inhalt/Bild steht. */ .elementor-element-97187b3 .elementor-loop-container .e-loop-item { position: relative; flex: 0 0 100%; width: 100%; scroll-snap-align: start; } /* * Pfeil-Buttons (per JS erzeugt, siehe pdo-work-horizontal.js): runde, * halbtransparente Buttons vertikal zentriert an den Raendern, klassisches * Slider-Muster. Auch auf Mobile sichtbar (auf Wunsch, zusaetzlich zum * nativen Wischen). */ .pdo-loop-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #2c4295; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; /* Ohne das bleibt der native Tap-Highlight (Mobile Chrome/Safari) nach * dem Klick haengen, weil der Klick sofort ein GSAP-Scrollen der Reihe * ausloest und die Touch-Sequenz dadurch unterbrochen wird - der Button * sieht dann dauerhaft "dunkel" aus, bis woanders getippt wird. */ -webkit-tap-highlight-color: transparent; } .pdo-loop-nav-btn:hover, .pdo-loop-nav-btn:active, .pdo-loop-nav-btn:focus { background: rgba(255, 255, 255, 0.9); } .pdo-loop-nav-btn:hover { transform: translateY(-50%) scale(1.08); } .pdo-loop-nav-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; } .pdo-loop-nav-btn--prev { left: 8px; } .pdo-loop-nav-btn--next { right: 8px; } @media (max-width: 767px) { .pdo-loop-nav-btn { width: 36px; height: 36px; } } /* * Hover: Karten heben sich leicht mit einem kleinen Ueberschwinger nach * oben ab (angelehnt an ctrl.xyz), bewusst kein Rahmen/Border-Reveal. * cubic-bezier(0.34, 1.56, 0.64, 1) ist die uebliche "ease-out-back"-Kurve: * schiesst leicht ueber das Ziel hinaus und federt zurueck - erzeugt den * Bounce-Eindruck rein per CSS-Transition, kein JS/Keyframes noetig. */ .elementor-element-0942988 .portfolioslider, .elementor-element-652ab6f .portfolioslider, .elementor-element-0834644 .portfolioslider, .elementor-element-47c369e .portfolioslider { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .elementor-element-0942988 .portfolioslider:hover, .elementor-element-652ab6f .portfolioslider:hover, .elementor-element-0834644 .portfolioslider:hover, .elementor-element-47c369e .portfolioslider:hover { transform: translateY(-10px); }