/* ================================================== Dr. Bombay skin @related colors ================================================== */ :root { --bombay-blue: #1142ba; --bombay-pink: #eaafe7; --bombay-beige: var(--cream-warm); --bombay-yellow: #fef9c1; } /* ------------------------------------- =Page background Painted on : its own fill would cover an image set on . ------------------------------------- */ .has-skin-bombay body { background-color: var(--bombay-beige); background-image: url("../../images/leopard-print.png"); background-image: image-set(url("../../images/leopard-print.webp") type("image/webp"), url("../../images/leopard-print.png") type("image/png")); /* @match leopard_tile_size - leopard ground tile width */ background-size: 457.5px auto; background-repeat: repeat; } /* ------------------------------------- =Surfaces ------------------------------------- */ .has-skin-bombay { --color-bg-surface: var(--bombay-beige); } /* ------------------------------------- =Header / nav ------------------------------------- */ .has-skin-bombay .site-header { background-color: var(--bombay-blue); border-bottom-color: var(--bombay-blue); } .has-skin-bombay .site-header__search-field { background-color: var(--bombay-blue); border-color: var(--bombay-pink); color: var(--bombay-pink); } .has-skin-bombay .site-header__search-icon { color: var(--bombay-pink); } .has-skin-bombay .site-nav__item { color: var(--bombay-pink); } .has-skin-bombay .site-nav__item[aria-pressed="true"] { color: var(--bombay-yellow); } /* ------------------------------------- =Logo ------------------------------------- */ .has-skin-bombay { --logo-color-bg: var(--bombay-pink); --logo-color-fg: var(--bombay-blue); } /* ------------------------------------- =Profile cover Desktop only - mobile keeps the leopard, so min-width scoping avoids restating the image. ------------------------------------- */ @media ( min-width: 1077px ) { .has-skin-bombay .profile-card__cover { background-image: none; background-color: var(--bombay-pink); } } /* ------------------------------------- =Mobile ------------------------------------- */ @media ( max-width: 1076px ) { /* @match leopard_tile_size_mobile - leopard tile width on mobile, shared with the profile cover */ .has-skin-bombay body { background-size: 230px auto; } .has-skin-bombay .site-header { background-color: transparent; border-bottom-color: transparent; } .has-skin-bombay .site-nav { background-color: var(--bombay-blue); border-top-color: var(--bombay-blue); } }