https://xtended-temporary-staging.webflow.io/projects/pannonhalmi-apatsag

1<!DOCTYPE html><!-- Last Published: Mon Jun 08 2026 10:56:30 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="xtended-temporary-staging.webflow.io" data-wf-page="664f7bd9c6007c68e10428a0" data-wf-site="663dd89bdc154a041cb40327" lang="en" data-wf-collection="664f7bd8c6007c68e1042843" data-wf-item-slug="pannonhalmi-apatsag"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Pannonhalmi Apátság</title><meta content="Pannonhalmi Apátság" property="og:title"/><meta content="" property="og:image"/><meta content="Pannonhalmi Apátság" name="twitter:title"/><meta content="" name="twitter:image"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="AIzaSyDil6wMWUx39Ya4YBChUdsWwSpML9zcFX8" name="google-site-verification"/><link href="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/css/xtended-temporary-staging.webflow.shared.c96d4e972.css" rel="stylesheet" type="text/css" integrity="sha384-yW1OlyfKxIs/bYtwZYGbt0gGS1DsbZFstzFxKI/Tm1jupCmX3lebRK566Wca3h8I" crossorigin="anonymous"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

1<script type="text/javascript">WebFont.load({  google: {    families: ["Red Hat Display:300,400,500,600,700,800,900","Red Hat Mono:400,500,600,700","Red Hat Text:300,400,500,600,700"]  }});</script>

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/683ee69a85f52bfdcbc0494e_favicon.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/683ee6ec2b240b45dfea1e72_webclip.png" rel="apple-touch-icon"/><!-- Külső stílusok -->
2<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide-core.min.css">
3<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
4
5<style>
6  *:focus-visible {
7    outline: -webkit-focus-ring-color auto 0px !important;
8  }
9
10  .flickity-enabled.is-draggable .flickity-viewport {
11    cursor: move;
12    cursor: -webkit-grab;
13    cursor: grab;
14  }
15
16  .flickity-viewport {
17    overflow: hidden;
18    position: relative;
19    height: 100%;
20    transition: height 0.2s;
21  }
22
23  .flickity-slider {
24    position: absolute;
25    width: 100%;
26    height: 100%;
27  }
28
29  .splide__track {
30    overflow: hidden;
31  }
32
33  .overflow {
34    overflow-x: hidden;
35  }
36
37  iframe {
38    box-shadow: 0 0 0 6px #000;
39    background: black;
40  }
41
42  .carousel-cell {
43    width: 80%;
44  }
45
46  .carousel-cell img {
47    min-width: 50%;
48  }
49
50  /* ✅ Mobil nézet: Flickity slider kikapcsolása, képek egymás alá */
51  @media screen and (max-width: 991px) {
52    .carousel-main {
53      display: flex;
54      flex-direction: column;
55      gap: 1rem;
56    }
57
58    .carousel-cell {
59      width: 100% !important;
60      display: block;
61    }
62  }
63</style>
64
65
66
67</head><body class="cms-page-body"><div class="transition-cover"><div class="transition-text">Page Name</div></div><div class="cms-page-section"><div class="close-wrap"><div class="div-block-2"><a data-page-name="Főoldal" href="https://xtended-temporary-staging.webflow.io/#referencia-section" class="close-form-text page">bezárás</a></div></div><div class="content"><div class="text-7">Pannonhalmi Apátság
68</div><div class="frame-35"><div class="error-7a2904a7-8127-df7a-fd3c-0adfa5c1054b">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div><div class="error-7a2904a7-8127-df7a-fd3c-0adfa5c1054b">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></div></div><div class="overflow"><div class="video-container"><div class="xtended-yt-first"><div class="yt-inner"><p class="cookie-consent-fallback-p">Ezt a tartalmat egy harmadik fél szolgáltatja. A külső tartalom megjelenítésével elfogadod a<a href="https://www.youtube.com/t/terms" target="_blank" class="yt-alt-szerz-felt"> youtube.com általános szerződési feltételeit.</a></p><a data-w-id="e8a4b080-480b-9d78-d227-4d57a6a8ba07" href="#" class="load-video-button w-inline-block"><div class="text-block-2">VIDEÓ BETÖLTÉSE</div></a></div></div><div class="video w-embed w-iframe"><div>
69  <iframe
70    width="100%"
71    style="aspect-ratio: 16/9; max-height: 90vh;"
72    data-src="https://www.youtube.com/embed/hYKZCdlHTx0?rel=0&showinfo=0&vq=hd1080"
73    src=""
74    frameborder="0"
75    allowfullscreen
76  ></iframe></div></div></div></div><div class="yt-consent-js w-embed w-script">

76<script>
77document.addEventListener("DOMContentLoaded", function () {
78  const consentGiven = localStorage.getItem("youtubeConsent") === "true";
79  const consentDate = parseInt(localStorage.getItem("youtubeConsentDate"), 10);
80  const now = Date.now();
81  const thirtyDays = 1000 * 60 * 60 * 24 * 30;
82  const validConsent = consentGiven && consentDate && (now - consentDate < thirtyDays);
83
84  document.querySelectorAll(".video-container").forEach(container => {
85    const iframe = container.querySelector("iframe[data-src]");
86    const overlay = container.querySelector(".xtended-yt-first");
87    const button = container.querySelector(".load-video-button");
88
89    if (!iframe) return;
90
91    const activateVideo = () => {
92      iframe.setAttribute("src", iframe.dataset.src);
93      if (overlay) {
94        overlay.style.display = "none";
95        // Extra, biztos ami biztos
96        const btn = overlay.querySelector(".load-video-button");
97        if (btn) btn.style.setProperty("display", "none", "important");
98      }
99    };
100
101    if (validConsent) {
102      activateVideo();
103    } else {
104      if (button) {
105        button.addEventListener("click", e => {
106          e.preventDefault();
107          localStorage.setItem("youtubeConsent", "true");
108          localStorage.setItem("youtubeConsentDate", Date.now().toString());
109          activateVideo();
110        });
111      }
112    }
113  });
114});
115</script>

115</div>

115<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=663dd89bdc154a041cb40327" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

115<script src="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/js/webflow.schunk.36b8fb49256177c8.js" type="text/javascript" integrity="sha384-4abIlA5/v7XaW1HMXKBgnUuhnjBYJ/Z9C1OSg4OhmVw9O3QeHJ/qJqFBERCDPv7G" crossorigin="anonymous"></script>

115<script src="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/js/webflow.schunk.f383f5e6d5965c7d.js" type="text/javascript" integrity="sha384-QnOp7fbOcrKXZDi7+0fkHJk90FV9G/AoswfyaoltjC7RwYWcCfFhbXP4nXa9dqGz" crossorigin="anonymous"></script>

115<script src="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/js/webflow.schunk.2c6a1c75387a516c.js" type="text/javascript" integrity="sha384-gUGp/lzss6FXquTR8xx2ofj3FeNneZaYw119y6qeO9i6HZ/NtdYqkov+LVZQno3U" crossorigin="anonymous"></script>

115<script src="https://cdn.prod.website-files.com/663dd89bdc154a041cb40327/js/webflow.7d5ef0eb.aad4b35678a0f500.js" type="text/javascript" integrity="sha384-WP2nooeESywxvP6LpVFx/p3KRpeFjA43FmEgfntdX9SOUNbI4rqyIwRBno8LDwMl" crossorigin="anonymous"></script>

115<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>

115<script src="https://cdn.prod.website-files.com/gsap/3.15.0/TextPlugin.min.js" type="text/javascript"></script>

115<script src="https://cdn.prod.website-files.com/gsap/3.15.0/SplitText.min.js" type="text/javascript"></script>

115<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>

115<script type="text/javascript">gsap.registerPlugin(TextPlugin,SplitText,ScrollTrigger);</script>

115<script src="https://cdn.finsweet.com/cookie-consent/cookie-consent.js"></script>

115
116
117

118<script>
119document.addEventListener('DOMContentLoaded', function() {
120    // Select all anchor (<a>) tags that do not have a target="_blank" attribute.
121    const links = document.querySelectorAll('a:not([target="_blank"])');
122    
123    // Select the transition cover element, a div used to overlay the screen for transition animations.
124    const transitionCover = document.querySelector('.transition-cover');
125    
126    // Select the text element inside the transition cover where the page name is displayed during transitions.
127    const pageNameText = transitionCover.querySelector('.transition-text');
128
129    // Function to handle the start of the transition animation when navigating to a new page.
130    const startTransitionAnimation = (nextPageName, targetURL) => {
131        // Set the next page's name inside the transition text element.
132        pageNameText.textContent = nextPageName;
133
134        // Initially, keep the transition cover hidden (off-screen and invisible).
135        gsap.set(transitionCover, { display: "none", autoAlpha: 0 });
136
137        // Show the transition cover after a slight delay to prevent the flash.
138        setTimeout(() => {
139            // Display the transition cover and animate it sliding down.
140            gsap.set(transitionCover, { display: "flex" });
141
142            gsap.to(transitionCover, {
143                duration: 0.25,  // Total transition time
144                y: "0%", // Slide the cover down
145                autoAlpha: 1,  // Fade in the cover
146                ease: "power3.out",
147                onComplete: function() {
148                    // Once the cover is in place, fade in the transition text
149                    gsap.to(pageNameText, {
150                        duration: 0.25,
151                        autoAlpha: 1,
152                        onComplete: function() {
153                            // After displaying the transition text, preload the next page in the background
154                            preloadNextPage(targetURL);
155
156                            // Start the transition to the next page after the animation
157                            setTimeout(function() {
158                                window.location.href = targetURL;
159                            }, 250); // Small delay to allow the transition to complete
160                        }
161                    });
162                }
163            });
164        }, 100); // Small delay before showing the cover
165    };
166
167    // Function to preload the next page in the background
168    const preloadNextPage = (url) => {
169        const link = document.createElement('a');
170        link.href = url;
171        link.style.display = "none";
172        document.body.appendChild(link);
173        link.click();
174        document.body.removeChild(link);
175    };
176
177    // Function to handle the end of the transition animation when arriving at a new page.
178    const endTransitionAnimation = () => {
179        // Retrieve the next page's name from sessionStorage.
180        const transitionName = sessionStorage.getItem('nextPageTransitionName');
181        pageNameText.textContent = transitionName;
182
183        // Set the transition cover to show initially.
184        gsap.set(transitionCover, { y: "0%", display: "flex", autoAlpha: 1 });
185
186        // Fade in the transition text.
187        gsap.to(pageNameText, {
188            duration: 0.25,  // Total time for text fade-in
189            autoAlpha: 1,
190            ease: "power3.out",
191            onComplete: function() {
192                // Slide the transition cover up and hide it in 0.25 seconds
193                gsap.to(transitionCover, {
194                    duration: 0.25,  // Total time for cover sliding up
195                    y: "-100%",
196                    ease: "power3.inOut",
197                    onComplete: function() {
198                        // Hide the transition cover after the animation is complete.
199                        gsap.set(transitionCover, { display: "none" });
200                    }
201                });
202            }
203        });
204    };
205
206    // Check if there's a nextPageTransitionName stored in sessionStorage.
207    const transitionName = sessionStorage.getItem('nextPageTransitionName');
208    if (transitionName) {
209        // If a transition name is found, trigger the ending animation for the new page.
210        endTransitionAnimation();
211        // Remove the stored transition name from sessionStorage.
212        sessionStorage.removeItem('nextPageTransitionName');
213    }
214
215    // Attach click event listeners to all selected anchor tags.
216    links.forEach(link => {
217        link.addEventListener('click', function(e) {
218            // Check if the data-page-name attribute is set on the clicked link.
219            const nextPageName = link.getAttribute('data-page-name');
220            if (nextPageName) {
221                // If data-page-name is set, prevent the default link behavior.
222                e.preventDefault();
223
224                // Store the next page's name in sessionStorage for use in the transition animation.
225                sessionStorage.setItem('nextPageTransitionName', nextPageName);
226
227                // Start the transition animation to the next page.
228                startTransitionAnimation(nextPageName, link.href);
229            } else {
230                // If data-page-name is not set, follow the link normally.
231                window.location.href = link.href;
232            }
233        });
234    });
235});
236</script>

236
237
238
239<style>
240  * {
241    -webkit-tap-highlight-color: transparent;
242    -webkit-tap-highlight-color: rgba(0,0,0,0);
243    -webkit-focus-ring-color: rgba(0,0,0,0);
244    outline: none;
245  }
246</style>
247
248<style>
249  a[href^="tel"],
250  a[href^="mailto"] {
251    color: inherit;
252    text-decoration: none;
253  }
254</style>
255

256<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272<!-- Flickity library -->

273<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

273

274<script src="https://cdn.jsdelivr.net/npm/[email protected]/flickity-imagesloaded.js"></script>

274
275

276<script>
277  document.addEventListener("DOMContentLoaded", function () {
278    if (window.innerWidth > 991) {
279      var $carousel = $('.carousel-main').flickity({
280        // options
281        cellAlign: 'left',
282        contain: true,
283        prevNextButtons: false,
284        pageDots: false,
285        adaptiveHeight: true,
286        wrapAround: true,
287        lazyLoad: 3,
288        imagesLoaded: true
289      });
290
291      var flkty = $carousel.data('flickity');
292      // elements
293      var $cellButtonGroup = $('.button-group--cells');
294      var $cellButtons = $cellButtonGroup.find('.button');
295
296      // previous
297      $('.button--previous').on('click', function () {
298        $carousel.flickity('previous');
299      });
300
301      // next
302      $('.button--next').on('click', function () {
303        $carousel.flickity('next');
304      });
305    }
306  });
307</script>

307
308
309<!-- Lenis scroll -->

310<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.js"></script>

310

311<script>
312  const isDesktop = window.innerWidth > 991;
313
314  const lenis = new Lenis({
315    duration: 1.2,
316    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
317    direction: 'vertical',
318    gestureDirection: 'vertical',
319    smooth: isDesktop,
320    smoothTouch: false,
321    mouseMultiplier: 1,
322    touchMultiplier: 2,
323    infinite: false,
324  });
325
326  lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
327    console.log({ scroll, limit, velocity, direction, progress });
328  });
329
330  function raf(time) {
331    lenis.raf(time);
332    requestAnimationFrame(raf);
333  }
334
335  requestAnimationFrame(raf);
336</script>

336
337</body></html>