@charset "UTF-8"; /** * Estrel Header — Pixel-perfect from Figma 208:1424 (header initial state). * * Pill specs (Menu + Zimmer anfragen): * - bg #FED3CD (Watermelon), text #14172D (Deep Sea) * - GT Alpina italic 250 weight, 16px, line-height 20px, letter-spacing 0.8 * - corner-radius 41.5px * - Menu pill: ~104×28px, "Zimmer anfragen": ~200×28px * * Logo: peach #FED3CD ("estrel" + small "TOWER" subtitle) */ /* ============================ Zimmer anfragen pill (header right slot on category pages) ============================ */ .estrel-header-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 18px; box-sizing: border-box; background: #FED3CD; color: #14172D; font-family: var(--font-alpina, Georgia, serif); font-style: italic; font-weight: 250; font-size: 16px; line-height: 20px; letter-spacing: 0.8px; text-decoration: none; border: 0; border-radius: 41.5px; transition: filter 0.18s ease, transform 0.15s ease; white-space: nowrap; } .estrel-header-pill:hover, .estrel-header-pill:focus-visible { filter: brightness(0.96); transform: translateY(-1px); } .estrel-header-pill__icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; color: #14172D; flex-shrink: 0; } .estrel-header-pill__icon svg { width: 100%; height: 100%; color: currentColor; } .estrel-header-pill__label { line-height: 1; display: inline-block; } /* ============================ Theme lock + page-modifier hooks ============================ */ .estrel-page.has-category-pill { /* Hook for theme-toggle JS to short-circuit on these pages. */ } /* Hide the global sticky bottom-right "Zimmer buchen" pill on category pages — redundant with the header-pill ("Zimmer anfragen") + booking-bar on detail. */ .estrel-page.has-category-pill .estrel-sticky-booking { display: none !important; } /* ============================ Category-page color scheme (Figma 208:16 / 208:1065 frame fill = #FFFAF6) This is the unified cream used across navbar, cat-nav, title, gallery bg. ============================ */ .estrel-page.has-category-pill { --zimmer-bg: #FFFAF6; background: #FFFAF6; } /* Lift cream up to / so the area outside .estrel-page (scroll-bar gutter, ~15px right) doesn't show the dark bg. */ html:has(.estrel-page.has-category-pill), html:has(.estrel-page.has-category-pill) body { background: #FFFAF6; } /* ============================ Eventtyp-Detail dark theme — Figma 467:5487 Navy BG, cream/pink text, cream cat-nav, cream room-title. ============================ */ /* Eventtyp-Detail-rules — only the navbar + room-title section get the navy background. The rest of the page keeps the cream theme so Space-Cards, CTA-Banner and the rest render unchanged. Double-class scope ensures specificity wins over the cream `.has-category-pill` rules. */ /* Navbar + Logo: navy, cream estrel-Logo, pink pills. Background gated to .is-scrolled — at scroll-top the navbar is transparent so the navy room-title/hero bleeds through; the navy bg fades in on shrink. */ .estrel-page.is-eventtyp-detail.has-category-pill .estrel-navbar.is-scrolled { background: #14172D !important; border-bottom: 0 !important; } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-navbar a > img, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-navbar svg { filter: brightness(0) invert(0.92) sepia(0.15) saturate(1.4) hue-rotate(330deg); } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-pill { background: #FED3CD !important; color: #14172D !important; } /* Room-title section: navy bg, cream text. Inline cat-nav inherits via color cascading on the nav-link. Vertical rhythm per Figma 467:5487: navbar-bottom → cat-nav-top = 84u (padding-top of section) title-bottom → hero-karussell-top = 123u (padding-bottom of section). margin-top: -8px closes the cream gap that bleeds through between the navy navbar and the navy title section (5-8px from .mod_article block wrapper margin in the page chrome). */ .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title { background: #14172D !important; color: #FEF5EC; padding: calc(84 * var(--u)) calc(40 * var(--u)) calc(123 * var(--u)) !important; margin-top: -8px !important; box-shadow: 0 -8px 0 0 #14172D; } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title__heading, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title__main, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title__accent { color: #FEF5EC; } /* Inline cat-nav (above the title) inverts to cream on navy */ .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title .estrel-zimmer-hero__nav-link { color: rgba(254, 245, 236, 0.5); } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title .estrel-zimmer-hero__nav-item.is-active .estrel-zimmer-hero__nav-link, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title .estrel-zimmer-hero__nav-link:hover { color: #FEF5EC; } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-room-title .estrel-zimmer-hero__nav-item.is-active .estrel-zimmer-hero__nav-label { text-decoration: underline; text-underline-offset: calc(6 * var(--u, 1px)); text-decoration-thickness: calc(1 * var(--u, 1px)); } /* Sticky cat-nav (when scrolled past inline) on dark theme. Higher specificity (`body…` + double-class) overrides the `body.has-sticky-cat-nav .estrel-page.is-detail .estrel-cat-nav__sticky` default rule that paints the bar cream via --cat-nav-bg. */ body.has-sticky-cat-nav .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__sticky { background: #14172D !important; border-top: 1px solid rgba(254, 245, 236, 0.08) !important; border-bottom: 1px solid rgba(254, 245, 236, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__sticky-link { color: rgba(254, 245, 236, 0.55) !important; } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__sticky-link:hover, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__sticky-item.is-active .estrel-cat-nav__sticky-link { color: #FEF5EC !important; } .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__breadcrumb, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__breadcrumb-main, .estrel-page.is-eventtyp-detail.has-category-pill .estrel-cat-nav__breadcrumb-accent { color: #FEF5EC !important; } /* Opaque cream navbar on category pages — solid #FFFAF6 bg, no image bleed-through, no gradient. Menu pill text sentence-case italic. Gated to .is-scrolled: at scroll-top the navbar is transparent so the page hero/image extends behind it; the cream bg fades in once shrink engages. */ .estrel-page.has-category-pill .estrel-navbar.is-scrolled { background: #FFFAF6 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-mask: none !important; mask: none !important; border-bottom: 1px solid rgba(20, 23, 45, 0.08); } .estrel-page.has-category-pill .estrel-navbar::before { display: none; } .estrel-page.has-category-pill .estrel-pill { text-transform: none; letter-spacing: 0.02em; font-size: 14px; } /* Menu pill text — "Menu" italic alpina, per Figma */ .estrel-page.has-category-pill .estrel-pill > span:last-child { font-family: var(--font-alpina); font-style: italic; font-weight: 250; } html { scroll-behavior: smooth; } #booking-bar { scroll-margin-top: 140px; } /* ============================ Mobile ============================ */ @media (max-width: 767px) { .estrel-header-pill { position: relative; font-size: 14px; height: 26px; padding: 0 14px; gap: 6px; } .estrel-header-pill::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: var(--touch-target-min); transform: translateY(-50%); pointer-events: none; } .estrel-header-pill__icon { width: 12px; height: 12px; } } @media (max-width: 480px) { .estrel-header-pill__label { display: none; } .estrel-header-pill { padding: 0 9px; gap: 0; } }