/* Seitenmenü www.bali.place – Desktop-Fassung (entschieden mit Thomas am 30.09.2026, Prototyp: notes/entwuerfe-2026-09-30/seitenmenue/prototyp/). Quelle: notes/tools/seitenmenue/site-menu.css → per einbauen.mjs nach website/css/site-menu.css kopiert. book.bali.place hat dasselbe Aussehen (SiteMenu.tsx). Klasse "gm" auf (setzt einbauen.mjs), --gm-s = Faktor für die Abstände der Seitenleiste (Kopf-Skript + site-menu.js). Handy (< 992 px) bleibt vorerst wie bisher (Thomas: „mobile schauen wir uns separat an, nach den go-live“). */ /* ---------- Kopfzeile: Seiten in einem Rahmen · Promotions mittig (nur wenn im Seitenmenü vorhanden) · Social rechts ---------- */ .gm-topbar, .gm-side-note { display: none; } @media (min-width: 992px) { .gm { --gm-side: 280px; } .gm body.bloc-padding { padding-top: 90px; padding-left: var(--gm-side) !important; } .gm .gm-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 90px; padding: 0 28px 0 calc(var(--gm-side) + 28px); background: rgba(250,250,248,.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } .gm .gm-group { display: flex; align-items: center; height: 44px; padding: 0 8px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff; } .gm .gm-topbar a { position: relative; color: #3c3a34 !important; text-decoration: none !important; font: 700 15px/1 "RalewayThin-ExtraLight", Raleway, sans-serif; letter-spacing: .02em; white-space: nowrap; } .gm .gm-group a { padding: 0 14px; } .gm .gm-topbar a span { display: inline-block; padding: 5px 0; background: linear-gradient(#da4141, #da4141) no-repeat 0 100% / 0 1px; transition: background-size .3s ease; } .gm .gm-topbar a:is(:hover, :focus-visible) span { background-size: 100% 1px; } .gm .gm-topbar a:focus-visible { outline: none; } /* aktuelle Seite: kurzer roter Strich links vom Wort (wie im Seitenmenü) */ .gm .gm-group a.is-here::before { content: ""; position: absolute; left: 5px; top: 50%; width: 2px; height: 62%; transform: translateY(-50%); border-radius: 2px; background: #da4141; } .gm .gm-topbar a.gm-promo { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff; color: #da4141 !important; transition: border-color .2s; } .gm .gm-topbar a.gm-promo:is(:hover, :focus-visible), .gm .gm-topbar a.gm-promo.is-here { border-color: #da4141; } .gm .gm-social { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff; } .gm .gm-topbar .gm-social a { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 100%; font: 700 13.5px/1 "RalewayThin-ExtraLight", Raleway, sans-serif; color: #3c3a34 !important; } .gm .gm-social svg { width: 17px; height: 17px; fill: var(--c); transition: transform .25s; } .gm .gm-topbar .gm-social a:is(:hover, :focus-visible) svg { transform: scale(1.15); } } /* schmalere Fenster: 1240–1365 alles etwas enger · 1100–1239 Social nur Symbole · 992–1099 Social oben weg (bleibt im Footer) */ @media (min-width: 1240px) and (max-width: 1365.98px) { .gm .gm-topbar { padding-right: 20px; padding-left: calc(var(--gm-side) + 20px); gap: 10px; } .gm .gm-group { padding: 0 4px; } .gm .gm-group a { padding: 0 10px; } .gm .gm-topbar a.gm-promo { padding: 0 18px; } .gm .gm-social { padding: 0 6px; } .gm .gm-topbar .gm-social a { padding: 0 7px; } } @media (min-width: 992px) and (max-width: 1239.98px) { .gm .gm-social { padding: 0 4px; } .gm .gm-topbar .gm-social a { padding: 0 9px; } .gm .gm-topbar .gm-social a span { display: none; } } @media (min-width: 992px) and (max-width: 1199.98px) { .gm .gm-topbar { padding-right: 20px; padding-left: calc(var(--gm-side) + 20px); gap: 8px; } .gm .gm-group { padding: 0 4px; } .gm .gm-group a { padding: 0 9px; } .gm .gm-topbar a.gm-promo { padding: 0 18px; } } @media (min-width: 992px) and (max-width: 1099.98px) { .gm .gm-social { display: none; } .gm .gm-topbar { justify-content: flex-start; } .gm .gm-topbar a.gm-promo { margin-left: 16px; } } /* ---------- Seitenleiste: Logo · Ubud · Seminyak · „Book direct for the best rate“ – ohne Linien, Abstände wachsen mit der Fensterhöhe (× --gm-s) ---------- */ @media (min-width: 992px) { .gm .eldar-sidebar { width: var(--gm-side); padding-left: 26px; padding-right: 22px; z-index: 32; background-color: transparent !important; border-right-color: transparent !important; } .gm .eldar-sidebar::before { content: ""; position: fixed; top: 90px; bottom: 0; left: 0; width: var(--gm-side); background: #fafaf8; z-index: -1; } .gm .eldar-sidebar nav.navbar { display: none !important; } .gm .eldar-sidebar .container, .gm .eldar-sidebar .row, .gm .eldar-sidebar .col-lg-12 { padding-top: 0 !important; margin-top: 0 !important; } .gm .eldar-sidebar .eldar-logo-div { height: 90px; margin: -7px 0 0 !important; display: flex; align-items: center; } .gm .eldar-sidebar .eldar-logo-div img { width: 170px !important; max-width: none; height: auto; margin: 0 !important; } .gm .eldar-sidebar div:has(> p > a.eldar-category) { margin: calc(24px * var(--gm-s, 1)) 0 calc(24px * var(--gm-s, 1)) -10px; padding: calc(14px * var(--gm-s, 1)) 10px calc(20px * var(--gm-s, 1)) 22px; } .gm .eldar-sidebar nav + div:has(> p > a.eldar-category) { margin-top: calc(40px * var(--gm-s, 1)) !important; } .gm .eldar-sidebar div:has(> p > a.eldar-category) > p:first-child { margin-bottom: calc(8px * var(--gm-s, 1)) !important; } .gm .eldar-sidebar .eldar-project-link { width: 100%; padding: calc(5px * var(--gm-s, 1)) 8px; } .gm .eldar-sidebar .eldar-project-a { font-size: 15px !important; letter-spacing: .02em; color: #5f5c55 !important; } .gm .eldar-sidebar .eldar-category { font-size: 13.1px !important; } .gm .eldar-sidebar .eldar-category-sub { margin-top: 4px; } .gm .eldar-sidebar div:has(> p > a.eldar-category) .btn.book-direct-button { margin-top: calc(16px * var(--gm-s, 1)) !important; font-size: 17px !important; padding: 5px 12px !important; } /* „Book direct for the best rate“ – wie die Guest-Favourite-Karte der Bewertungen; Lage/Breite setzt site-menu.js (gleicher Abstand wie zwischen den Blöcken) */ .gm .gm-side-note { display: block; visibility: hidden; position: fixed; z-index: 33; top: 0; margin: 0; overflow: hidden; box-sizing: border-box; padding: calc(14px * var(--gm-s, 1)) 10px calc(16px * var(--gm-s, 1)) 30px; border: 1px solid color-mix(in srgb, #AD332A 38%, transparent); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, #EED7D1 85%, #fff) 0%, #fffdfb 78%); box-shadow: 0 10px 30px color-mix(in srgb, #AD332A 12%, transparent); color: #AD332A !important; font: 23px/1.2 "CormorantGaramondLight-Regular", "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; pointer-events: none; } .gm .gm-side-note.is-on { visibility: visible; animation: gmNoteIn .9s cubic-bezier(.2,.7,.2,1) .5s both; } .gm .gm-side-note::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%); transform: skewX(-18deg); opacity: 0; } .gm .gm-side-note.is-on::after { animation: gmSheen 8s ease-in-out 2.2s infinite; } } @keyframes gmNoteIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes gmSheen { 0% { opacity: 0; left: -60%; } 4% { opacity: 1; } 18% { opacity: 1; left: 120%; } 19%, 100% { opacity: 0; left: 120%; } } /* ---------- Kopfbild, NUR Desktop ab 992 px: kein Vorhang; Bild + Text blenden ein (1,2 s), Bild gleitet 100 → 106 % in 4,5 s; oben links 12 px rund ---------- Start erst, wenn das Kopfbild geladen UND entpackt ist (site-menu.js setzt html.gm-hero-ready, spätestens nach 3,5 s). Kopfbild = erster .bloc-fill-screen. Farbfläche/Vorschau davor entfernt (30.9. nachts, Thomas: „die hero gehen so nicht, das sieht furchtbar aus“) – stattdessen lädt site-menu.js die Kopfbilder aller Seiten vor. Handy/Tablet < 992 px: alles wie ursprünglich, mit Vorhang (Thomas: „kann es sein, dass du mobile den vorhang entfernt hast …“). */ @media (min-width: 992px) { #page-transition-anim { display: none !important; } .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) { position: relative; overflow: hidden; } /* Titel erst zusammen mit dem Bild einblenden, wenn Bild UND Schrift da sind – sonst hüpfen sie beim Schriftwechsel („die titel im hero hüpfen auch“, Thomas 30.9.) */ .gm:not(.gm-hero-ready) .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) > .container { opacity: 0; } .gm.gm-hero-ready .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) > .container { animation: gmFade 1.2s ease-out both; } .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax) { isolation: isolate; } .gm:not(.gm-hero-ready) .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) .parallax, .gm:not(.gm-hero-ready) .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax)::before { opacity: 0; } .gm.gm-hero-ready .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) .parallax { animation: gmFade 1.2s ease-out both, gmZoom 4.5s cubic-bezier(.33,0,.2,1) both; } /* Gallery u.ä.: Bild hängt direkt am Block → eigene Bildebene, damit nur das Bild zoomt, nicht der Text */ .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax)::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; pointer-events: none; } .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax) > * { position: relative; z-index: 1; } .gm.gm-hero-ready .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax)::before { animation: gmFade 1.2s ease-out both, gmZoom 4.5s cubic-bezier(.33,0,.2,1) both; } @media (min-width: 992px) { .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) { border-top-left-radius: 12px; } /* Parallax-Bild steht fest (position: fixed) → Rundung über clip-path auf dem Bildausschnitt */ .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) .parallax__container, .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen)::before { clip-path: inset(0 round 12px 0 0 0); } } @keyframes gmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes gmZoom { from { scale: 1; } to { scale: 1.06; } } @media (prefers-reduced-motion: reduce) { .gm .page-container > .bloc-fill-screen, .gm .page-container > .bloc-fill-screen .parallax, .gm .page-container > .bloc-fill-screen::before, .gm .gm-side-note.is-on, .gm .gm-side-note.is-on::after { animation: none !important; opacity: 1 !important; } } } /* ---------- weicher Seitenwechsel (Chrome, Safari 18.2+): Kopfzeile + Seitenleiste stehen still ---------- */ @view-transition { navigation: auto; } .gm-topbar { view-transition-name: gm-top; } @media (min-width: 992px) { .gm #bloc-1 { view-transition-name: gm-side; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; } ::view-transition-group(gm-top), ::view-transition-group(gm-side) { animation: none; } ::view-transition-old(gm-top), ::view-transition-old(gm-side) { display: none; } ::view-transition-new(gm-top), ::view-transition-new(gm-side) { animation: none; } /* ---------- Verfügbarkeitsfeld (Buchungsleiste der Ubud-Villen): Raleway Regular statt Light/ExtraLight (Thomas: „die schrift da drin ist einfach zu schwach“) ---------- */ .bp-avail :is(select, option, .bp-avail-hint, small), .bp-avail label ~ * span:not(.bp-avail-book), .bp-avail button:not(.bp-avail-book) span, .bp-avail-hint, .bp-avail-hint span, .bp-avail-price, .bp-avail-price small { font-family: "RalewayThin-Regular", Raleway, sans-serif !important; font-weight: 400 !important; }