/* * Styles for the responsive logo. * This file works in conjunction with client.html and client.js. */ :root { /* Adjust these variables to match your design */ --list-panel-width: 360px; /* The width of #list-panel on desktop */ --logo-margin: 16px; --logo-transition-speed: 0.35s; --logo-brand-color: #007bff; /* Matches your PWA theme-color */ /* Use safe area for top positioning to avoid the notch on mobile */ --logo-top-position: calc(var(--logo-margin) + var(--safe-area-inset-top)); } .logo-container { position: fixed; top: var(--logo-top-position); left: var(--logo-margin); z-index: 1500; /* Must be higher than map, but can be lower than modals */ transition: left var(--logo-transition-speed) ease-in-out; } .logo-container svg { display: block; height: 65px; width: auto; transition: height var(--logo-transition-speed) ease-in-out, filter var(--logo-transition-speed) ease-in-out, opacity var(--logo-transition-speed) ease-in-out; filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.5)); opacity: .85; position: relative; top: 0px; left: 5px; } /* * MOBILE: Shrink the logo when a panel is active. * Your client.js should add these classes to the tag when the * respective panels are shown. */ body.list-panel-active .logo-container svg, body.detail-panel-visible .logo-container svg { height: 32.5px; /* 'Shrunk' size, 50% of original mobile size (65px) */ } /* --- Desktop Styles (e.g., 768px and wider) --- */ /* Adjust this breakpoint to match your client.css layout */ @media (min-width: 768px) { /* By default on desktop, the panel is visible. Position the logo next to it. */ .logo-container { left: calc(var(--list-panel-width) + var(--logo-margin)); } .logo-container svg { height: 80px; /* A bit bigger on desktop */ } /* When the list panel is collapsed, move the logo to the far left. */ body.list-panel-collapsed .logo-container { left: var(--logo-margin); } } /* * MOBILE: Restore the logo size when panels are sliding off screen. * This assumes your JavaScript removes the classes when the animation is complete. */ body.list-panel-sliding-off .logo-container svg, body.detail-panel-sliding-off .logo-container svg { height: 65px; /* Restore original mobile size */ }