/* * 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 */ --collapsed-panel-width: 50px; /* The width of the #expand-button */ --logo-margin: 10px; --logo-transition-speed: 0.35s; /* Use safe area for top positioning to avoid the notch on mobile */ --logo-top-position: calc(var(--logo-margin) + var(--safe-area-inset-top)); /* Define logo sizes in one place for easy maintenance */ --logo-height-mobile: 60px; --logo-height-desktop: 75px; } #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, transform var(--logo-transition-speed) ease-in-out; } #logo-container:hover { transform: scale(1.03); /* Slightly enlarge on hover */ } #logo-container svg { display: block; width: auto; transition: height var(--logo-transition-speed) ease-in-out, filter var(--logo-transition-speed) ease-in-out; filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.5)); /* Use clamp for fluid height: min 60px, preferred 10vw, max 75px */ height: clamp(var(--logo-height-mobile), 10vw, var(--logo-height-desktop)); } /* * --- Mobile Styles (up to 768px) --- * Your client.js should add these classes to the tag when the * respective panels are shown. */ @media (max-width: 768px) { /* Shrink the logo when a panel is active to save screen space. */ body.list-panel-visible #logo-container svg, body.detail-panel-visible #logo-container svg { height: calc(var(--logo-height-mobile) * 0.55) !important; /* 'Shrunk' size, use !important to override clamp */ } /* Restore the logo size when panels are sliding off screen. */ body.list-panel-sliding-off #logo-container svg, body.detail-panel-sliding-off #logo-container svg { height: var(--logo-height-mobile); /* Restore original mobile size */ } } /* --- Desktop Styles (769px and wider) --- */ /* This breakpoint should match the one in client.css for consistency */ @media (min-width: 769px) { #logo-container { left: calc(var(--list-panel-width) + (var(--logo-margin) * 4)); } /* When the list panel is collapsed, move the logo to the far left. */ body.list-panel-collapsed #logo-container { left: calc(var(--collapsed-panel-width) + var(--logo-margin)); } }