/* ============================================================================ FADE KIT ยท page curtain + scroll reveals (owner's kit from the Adira site, round 45) Adapted to this site: dark curtain with the gold brand name, Pinyon Script. Switch off: app/config.php 'fx' => false. Script: assets/js/fade-kit.js (tags the blocks itself). Round 48: curtain + homepage hero on all devices; on desktop also kit fade for cards / booking box / FAQ and a soft fade for the rest. Phones: no scroll effects. ========================================================================= */ :root { --fk-curtain-bg: #1A202C; /* site background */ --fk-curtain-text: #E4C97B; /* gold */ --fk-curtain-font: "Pinyon Script", Georgia, serif; --fk-ease-out: cubic-bezier(.16, 1, .3, 1); /* soft, luxurious settle */ --fk-ease-io: cubic-bezier(.76, 0, .24, 1); --fk-reveal-time: 1.4s; /* how long a fade-in takes */ --fk-reveal-shift: 34px; /* how far elements rise */ --fk-reveal-blur: 6px; /* soft focus pull, 0 to disable */ } /* ---------- 1. Page curtain (fades out on load, back in when leaving) ---------- */ .fk-curtain { position: fixed; inset: 0; z-index: 2147483600; /* above header, chat button and contact bar */ display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #232b3b 0%, var(--fk-curtain-bg) 70%); pointer-events: none; opacity: 0; transition: opacity .55s ease; } .fk-js .fk-curtain { opacity: 1; } .fk-js.fk-loaded .fk-curtain { opacity: 0; transition-duration: .9s; } .fk-js.fk-leaving .fk-curtain { opacity: 1; transition-duration: .45s; } .fk-curtain__mark { font-family: var(--fk-curtain-font); font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--fk-curtain-text); text-shadow: 0 0 18px rgba(201,168,76,0.35); opacity: 0; transition: opacity .6s; } .fk-js:not(.fk-loaded) .fk-curtain__mark, .fk-js.fk-leaving .fk-curtain__mark { opacity: 1; } /* round 74: the page name under the brand; brand + name together sit exactly in the middle of the screen */ /* round 77: the text block is pinned to a fixed point (middle of the smallest screen height, so phone toolbars showing / hiding never move it) and both lines have a fixed height (no shift when the fonts finish loading) */ .fk-curtain__inner { position: absolute; left: 0; right: 0; top: 50vh; top: 50svh; transform: translateY(-50%); } .fk-curtain__mark { display: block; height: 1.25em; line-height: 1.25; white-space: nowrap; } .fk-curtain__page { display: block; height: 1.4em; white-space: nowrap; } .fk-curtain__inner { transition: opacity .25s ease; } html:not(.fk-fonts) .fk-curtain__inner { opacity: 0; } /* round 78: shown once its fonts are ready (no jump in Chrome) */ .fk-curtain__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.9rem; padding: 0 1.5rem; } .fk-curtain__page { font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: 0.08em; color: rgba(240,237,232,0.82); line-height: 1.4; opacity: 0; transition: opacity .6s ease .1s; /* round 76: fade only, no movement */ } .fk-curtain__page:empty { display: none; } @media (min-width: 969px) { .fk-curtain__page { display: none; } } /* round 75: page name on phones only */ .fk-curtain__page::before, .fk-curtain__page::after { content: '\2726'; display: inline-block; line-height: 1; font-style: normal; font-size: 0.55em; color: var(--fk-curtain-text); vertical-align: middle; margin: 0 0.8em; } .fk-js:not(.fk-loaded) .fk-curtain__page, .fk-js.fk-leaving .fk-curtain__page { opacity: 1; } .fk-js.fk-leaving .fk-curtain__mark, .fk-js.fk-leaving .fk-curtain__page { transition-duration: .3s; transition-delay: 0s; } /* ---------- 2. Fade + rise + focus pull: data-reveal ---------- */ .fk-js [data-reveal] { opacity: 0; transform: translateY(var(--fk-reveal-shift)); filter: blur(var(--fk-reveal-blur)); transition: opacity var(--fk-reveal-time) var(--fk-ease-out) var(--d, 0ms), transform var(--fk-reveal-time) var(--fk-ease-out) var(--d, 0ms), filter 1.1s ease var(--d, 0ms); } .fk-js [data-reveal="fade"] { transform: none; } /* fade only, no movement */ .fk-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; } /* ---------- 3. Soft fade (round 44 style, desktop): data-soft ---------- */ .fk-js [data-soft] { opacity: 0; transform: translateY(26px); transition: opacity .95s ease var(--d, 0ms), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); } .fk-js [data-soft="left"] { transform: translateX(-34px); } .fk-js [data-soft="zoom"] { transform: scale(.96); } .fk-js [data-soft].is-in { opacity: 1; transform: none; } /* ---------- 3b. Photo unveils from bottom to top: data-unveil (homepage hero photo, round 49) ---------- Only the photo itself is unveiled (the gold frame stays), with a slow settle from a slight zoom. */ .fk-js [data-unveil] img { clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 1.6s var(--fk-ease-io) var(--d, 0ms), transform 2.4s var(--fk-ease-out) var(--d, 0ms), filter .8s ease; } .fk-js [data-unveil].is-in img { clip-path: inset(0 0 0 0); transform: none; } /* ---------- 4. Headline words rise one by one: data-split ---------- */ .fk-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em .25em .25em; margin: -.2em -.25em -.25em; } /* room for script swashes, same spacing */ .fk-w > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--fk-ease-out) var(--wd, 0ms); } .is-in .fk-w > span { transform: none; } /* ---------- 5. Respect visitors who prefer less motion ---------- */ @media (prefers-reduced-motion: reduce) { .fk-js .fk-curtain { opacity: 0 !important; } .fk-js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; } .fk-js [data-soft] { opacity: 1; transform: none; transition: none; } .fk-js [data-unveil] img { clip-path: none; transform: none; transition: none; } .fk-w > span { transform: none; transition: none; } }