/* * LUCA MOBILE FOUNDATION 1A — app shell + mobile nav foundation. * * "Einfach außen. Stark im Kern." Not a redesign of style.css (which stays completely untouched by this file) - * a small, additive layer on top of it, scoped to mobile widths only. Loaded on the two public-facing layouts * that share theme_1/header.blade.php + theme_1/footer.blade.php (resources/views/frontend/theme_1/app.blade.php * and resources/views/frontend/user/layout/app.blade.php, the Family/customer dashboard shell) - never on * Provider or Back Admin layouts, which don't include this stylesheet at all. * * Breakpoints match this ticket's own product reference: Mobile 0-575, Large Mobile 576-767 (both covered by the * single <768px media query below - this Foundation does not yet differentiate the two), Tablet 768-1023 * (untouched by this file - a future phase), Desktop >=1024 (untouched - every rule below either lives inside a * max-width:767.98px query or targets a brand-new class with no desktop markup to match). */ :root { /* Luca Hat Spaß brand palette. Redeclared here (not reused from family-area-shell.css's --family-* tokens) because that file only loads on the Family layout - this Foundation loads on public pages too, and needs to be self-sufficient on both. Values are identical to the canonical brand palette; nothing new invented. */ --luca-green: #6eaa89; --luca-coral: #e8665d; --luca-turquoise: #8acac7; --luca-dark-red: #a3312e; --luca-yellow: #f2bd48; --luca-mint: #9fdfd7; --luca-blue: #5e7da2; --luca-ink: #302d2a; /* Mobile layout tokens (section 7B of the Mobile Foundation 1A ticket). */ --luca-mobile-page-padding: 16px; --luca-mobile-header-height: 56px; --luca-mobile-bottom-nav-height: 60px; --luca-mobile-radius: 16px; --luca-mobile-card-radius: 14px; --luca-mobile-gap: 12px; --luca-mobile-shadow: 0 -2px 20px rgba(48, 45, 42, 0.08); /* Safe-area foundation (section 7C). env() with a 0px fallback is inert on any device without a notch/home indicator - these only ever resolve non-zero on devices that report one, and only when the viewport meta tag includes viewport-fit=cover (added to app.blade.php / frontend/user/layout/app.blade.php alongside this ticket - the one minimal, necessary change to the existing viewport tag; user-scalable=0 is untouched). Consumed below by the mobile header and bottom nav; also available for a future sticky booking CTA. */ --luca-mobile-safe-top: env(safe-area-inset-top, 0px); --luca-mobile-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ==================================================================================== D. PUBLIC MOBILE APP HEADER FOUNDATION CSS-only polish of the EXISTING header markup/logic (theme_1/header.blade.php) - no JS, no structural rewrite, no change to which actions render or when. Makes the already-sticky `.header` (style.css:7690, position: sticky/fixed, top: 0) sit correctly below a device notch and feel more compact/app-like below the 768px boundary. Desktop (>=768px, and especially >=1024px) is untouched: every rule here is inside this query. ==================================================================================== */ @media (max-width: 767.98px) { .header { padding-top: var(--luca-mobile-safe-top); } .header .navbar.header-nav { min-height: var(--luca-mobile-header-height); padding-top: 6px; padding-bottom: 6px; } /* Tap target: the existing hamburger toggle (#mobile_btn) already works via style.js/bootstrap - only its box size/alignment changes here, never its click behavior. ~44px is the accepted comfortable minimum (section 9/11). */ .header #mobile_btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* The bell / user-menu dropdown block (header.blade.php's "Show this if user is logged in" list) is already d-none below lg by the existing markup - account access on mobile already happens through the hamburger panel's own mobile-only list items (Dashboard/Übersicht, Einstellungen, Logout), untouched here. This Foundation does not change which actions are directly visible vs. behind the hamburger - only later phases (1B+) should revisit that IA decision. */ /* MOBILE FOUNDATION 1B — B. header visual polish: site-wide (every page loads this file, not just Home - unlike the hero/search polish below, which is Home-specific and lives in luca-mobile-home.css instead). style.css already sizes .logo img down to 45px at <=991.98px (!important) - this tightens it further, specifically at the mobile boundary, for a more compact/app-like bar; !important is required to win over that existing !important rule, not a new hack. Alignment/click behavior of the hamburger and both logo links are completely untouched - CSS sizing/spacing only. */ .header-landing .logo img { max-height: 32px !important; } .header .navbar-header { align-items: center; gap: 8px; } } /* ==================================================================================== E. FAMILY / PUBLIC BOTTOM NAVIGATION — FOUNDATION Shell + navigation only. Real routes, resolved server-side in mobile-bottom-nav.blade.php - never invented. Hidden entirely on Admin (that layout never includes this stylesheet or the partial) and on Provider (same - provider/layout/app.blade.php does not load this file, so the class below never has a page to render into there even if markup were ever copy-pasted by mistake). ==================================================================================== */ .luca-mobile-bottom-nav { display: none; } @media (max-width: 767.98px) { .luca-mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; /* above the page (Bootstrap navbar ~1030), below Bootstrap modals (1055) and toasts */ align-items: stretch; justify-content: space-between; background: #ffffff; border-top: 1px solid rgba(48, 45, 42, 0.08); box-shadow: var(--luca-mobile-shadow); padding-bottom: var(--luca-mobile-safe-bottom); height: calc(var(--luca-mobile-bottom-nav-height) + var(--luca-mobile-safe-bottom)); } /* Applied to only on pages that actually render the bottom nav (see the partial's own comment) - reserves clearance so the fixed bar never overlaps footer content or a page's last section. */ body.luca-has-mobile-bottom-nav { padding-bottom: calc(var(--luca-mobile-bottom-nav-height) + var(--luca-mobile-safe-bottom)); } /* Section 14: the bottom nav must never permanently hide the footer - it only adds scroll clearance above it (via body padding-bottom above), the footer itself is never touched/reduced/removed. */ } .luca-mobile-bottom-nav__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 4px 2px; color: var(--luca-ink); opacity: 0.62; text-decoration: none; font-family: 'Asap', sans-serif; font-size: 11px; font-weight: 600; line-height: 1.1; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .luca-mobile-bottom-nav__item i { font-size: 20px; line-height: 1; } .luca-mobile-bottom-nav__item:hover, .luca-mobile-bottom-nav__item:focus-visible { color: var(--luca-green); opacity: 1; } .luca-mobile-bottom-nav__item:focus-visible { outline: 2px solid var(--luca-green); outline-offset: -2px; border-radius: 8px; } /* Selected state = Luca Green (section 10), a subtle lift only - no bounce/scale-in animation. */ .luca-mobile-bottom-nav__item.active { color: var(--luca-green); opacity: 1; transform: translateY(-1px); } .luca-mobile-bottom-nav__item.active i { font-weight: 600; } /* Desktop protection (section 7F, explicit and redundant with the max-width query above on purpose - makes the guarantee readable on its own without having to reason about cascade order). */ @media (min-width: 768px) { .luca-mobile-bottom-nav { display: none !important; } body.luca-has-mobile-bottom-nav { padding-bottom: 0; } } /* ==================== Footer (Home + Services), REAL-DEVICE POLISH ==================== footer.blade.php renders unconditionally on every page (see that file's own comment) and carries no page-specific class of its own - unlike the hero/listing sections, which do. Real-device screenshots showed a large, dark, empty-feeling gap between "In deiner Nähe" and the copyright/ legal line on mobile, on a page that had otherwise been made compact - the shared footer's own desktop-derived padding/spacing was simply never revisited for a mobile app-shell context. footer.blade.php gained ONE small, route-gated class instead - request()->routeIs(['home', 'services']) - true only on the two pages this Mobile track has closed so far; every other page (Events, Rentals, Family, Provider, Admin) keeps this exact same footer, completely unchanged, at every width. Originally Services-only (luca-footer--services-mobile, from the previous ticket); renamed luca-footer--mobile-compact and moved here from luca-mobile-services.css now that a second page uses it, so this file stays the one home for every truly cross-page mobile concern (matching how the bottom nav above lives here too) rather than one page's file reaching into another's. Nothing is removed: copyright, Datenschutzrichtlinie, Cookie-Richtlinie, every footer link column and the GEO "In deiner Nähe" region list all stay, unconditionally rendered - only padding/gaps/font-size are tightened, so content and indexability are identical, just denser. */ @media (max-width: 767.98px) { .luca-footer--mobile-compact .footer-top { padding-top: 22px; padding-bottom: 8px; } .luca-footer--mobile-compact .footer-widget { margin-bottom: 20px !important; } /* "In deiner Nähe" (GEO region links - see web.home.pop_region) */ .luca-footer--mobile-compact .container.mb-4.footer-widget h2, .luca-footer--mobile-compact .footer-widget h4 { font-size: 1.1rem !important; margin-bottom: 10px !important; } .luca-footer--mobile-compact .container.mb-4.footer-widget p { font-size: 0.85rem; line-height: 1.6; } .luca-footer--mobile-compact .footer-instagram { margin-top: 4px; } .luca-footer--mobile-compact .footer-menu-three .footer-title-three { font-size: 0.95rem; margin-bottom: 8px; } .luca-footer--mobile-compact .footer-menu-three ul li { margin-bottom: 4px; font-size: 0.85rem; } .luca-footer--mobile-compact .footer-bottom-landing { padding-top: 14px; padding-bottom: 14px; } .luca-footer--mobile-compact .footer-copy-landing { font-size: 0.78rem; text-align: center; justify-content: center !important; } }