/** * SwiftSpot logo appearance switch * * Canonical branding: * - Light UI → social mark + dark SWIFTSPOT (`Color logo - no background-current.png`) * - Dark UI → social mark + white SWIFTSPOT (`Color-logo-dark.png`) * Favicon/AppIcon use the v3 swoosh mark (no wordmark). * * Visibility is owned only by this file. Page CSS may size/position logos but * must not force `display:block` on both light and dark imgs (both share * `.swiftspot-logo` in Discover / nav markup). * * Theme class lives on (theme-init.js). Body `.dark` is * also honored for legacy shells. */ :root { --swiftspot-main-nav-logo-height: 3.25rem; /* Match light logo canvas so light/dark render the same box (width derived from height). */ --swiftspot-logo-aspect-ratio: 3162 / 1086; --swiftspot-logo-width: calc(var(--swiftspot-main-nav-logo-height) * var(--swiftspot-logo-aspect-ratio)); } /* --------------------------------------------------------------------------- * Shared variant aliases (templates use several naming conventions) * --------------------------------------------------------------------------- */ /* Default (light mode): light lockup only */ .swiftspot-logo-light, .checkout-topbar__logo--light, .direct-book-topbar__logo--light, .host-hero-brand-mark__logo--light, .marketing-about-final-cta__logo--light, .swiftspot-site-info-footer__logo--light, .renter-mobile-brand-bar__logo-img--light, .host-mobile-brand-bar__logo-img--light, .swiftspot-site-info-mobile-bar__logo-img--light { display: block !important; } .swiftspot-logo-dark, .checkout-topbar__logo--dark, .direct-book-topbar__logo--dark, .host-hero-brand-mark__logo--dark, .marketing-about-final-cta__logo--dark, .swiftspot-site-info-footer__logo--dark, .renter-mobile-brand-bar__logo-img--dark, .host-mobile-brand-bar__logo-img--dark, .swiftspot-site-info-mobile-bar__logo-img--dark { display: none !important; } /* Dark mode: dark lockup (white wordmark) only */ html.dark .swiftspot-logo-light, html.dark .checkout-topbar__logo--light, html.dark .direct-book-topbar__logo--light, html.dark .host-hero-brand-mark__logo--light, html.dark .marketing-about-final-cta__logo--light, html.dark .swiftspot-site-info-footer__logo--light, html.dark .renter-mobile-brand-bar__logo-img--light, html.dark .host-mobile-brand-bar__logo-img--light, html.dark .swiftspot-site-info-mobile-bar__logo-img--light, body.dark .swiftspot-logo-light, body.dark .checkout-topbar__logo--light, body.dark .direct-book-topbar__logo--light, body.dark .host-hero-brand-mark__logo--light, body.dark .marketing-about-final-cta__logo--light, body.dark .swiftspot-site-info-footer__logo--light, body.dark .renter-mobile-brand-bar__logo-img--light, body.dark .host-mobile-brand-bar__logo-img--light, body.dark .swiftspot-site-info-mobile-bar__logo-img--light { display: none !important; } html.dark .swiftspot-logo-dark, html.dark .checkout-topbar__logo--dark, html.dark .direct-book-topbar__logo--dark, html.dark .host-hero-brand-mark__logo--dark, html.dark .marketing-about-final-cta__logo--dark, html.dark .swiftspot-site-info-footer__logo--dark, html.dark .renter-mobile-brand-bar__logo-img--dark, html.dark .host-mobile-brand-bar__logo-img--dark, html.dark .swiftspot-site-info-mobile-bar__logo-img--dark, body.dark .swiftspot-logo-dark, body.dark .checkout-topbar__logo--dark, body.dark .direct-book-topbar__logo--dark, body.dark .host-hero-brand-mark__logo--dark, body.dark .marketing-about-final-cta__logo--dark, body.dark .swiftspot-site-info-footer__logo--dark, body.dark .renter-mobile-brand-bar__logo-img--dark, body.dark .host-mobile-brand-bar__logo-img--dark, body.dark .swiftspot-site-info-mobile-bar__logo-img--dark { display: block !important; } /* * Prefer html:not(.dark) as well so a stray inner .dark utility cannot flip * only the dark asset without the theme root. */ html:not(.dark) .swiftspot-logo-light, html:not(.dark) .checkout-topbar__logo--light, html:not(.dark) .direct-book-topbar__logo--light, html:not(.dark) .host-hero-brand-mark__logo--light, html:not(.dark) .marketing-about-final-cta__logo--light, html:not(.dark) .swiftspot-site-info-footer__logo--light, html:not(.dark) .renter-mobile-brand-bar__logo-img--light, html:not(.dark) .host-mobile-brand-bar__logo-img--light, html:not(.dark) .swiftspot-site-info-mobile-bar__logo-img--light { display: block !important; } html:not(.dark) .swiftspot-logo-dark, html:not(.dark) .checkout-topbar__logo--dark, html:not(.dark) .direct-book-topbar__logo--dark, html:not(.dark) .host-hero-brand-mark__logo--dark, html:not(.dark) .marketing-about-final-cta__logo--dark, html:not(.dark) .swiftspot-site-info-footer__logo--dark, html:not(.dark) .renter-mobile-brand-bar__logo-img--dark, html:not(.dark) .host-mobile-brand-bar__logo-img--dark, html:not(.dark) .swiftspot-site-info-mobile-bar__logo-img--dark { display: none !important; } /* --------------------------------------------------------------------------- * Sizing — color-only swap, same footprint * --------------------------------------------------------------------------- */ .swiftspot-logo-light, .swiftspot-logo-dark, img.swiftspot-logo, nav.swiftspot-main-nav .swiftspot-main-nav__logo img[alt="SwiftSpot Logo"], .discover-top-bar .swiftspot-logo, .discover-top-bar img.swiftspot-logo { width: var(--swiftspot-logo-width) !important; min-width: var(--swiftspot-logo-width) !important; max-width: var(--swiftspot-logo-width) !important; height: var(--swiftspot-main-nav-logo-height) !important; min-height: var(--swiftspot-main-nav-logo-height) !important; max-height: var(--swiftspot-main-nav-logo-height) !important; object-fit: contain !important; object-position: left center !important; } /* Discover uses its own height token at breakpoints. */ .discover-top-bar .swiftspot-logo, .discover-top-bar img.swiftspot-logo { --swiftspot-logo-width: calc(var(--discover-logo-height, 34px) * var(--swiftspot-logo-aspect-ratio)); width: var(--swiftspot-logo-width) !important; min-width: var(--swiftspot-logo-width) !important; max-width: var(--swiftspot-logo-width) !important; height: var(--discover-logo-height, 34px) !important; min-height: var(--discover-logo-height, 34px) !important; max-height: var(--discover-logo-height, 34px) !important; } /* Desktop: slight upward nudge for optical alignment in top-left */ @media (min-width: 768px) { nav.swiftspot-main-nav .swiftspot-main-nav__logo { position: relative; top: -1px; } .discover-top-bar .discover-toolbar-logo { position: relative; top: -1px; } }