/* ==================================================================================== Deel skin Toggled by the engine as `.has-skin-deel` on (My Network nav item, aria-pressed). Purple navbar over an animated "deel" flagwave background; the LinkedIn cards stay white and the profile cover keeps its leopard, so this skin only repaints the header and the page ground. Loaded after the Dr. Bombay skin so that when both are on, the Deel navbar, nav colors and logo win - the priority the designer specified. Colors are pulled from the "Direction 01 / Landing / Deel Skin" frame. @related colors ==================================================================================== */ :root { /* @match deel-snoop-iframe - card colour, type colour and link colour restated in the CSS the application embed is skinned with */ --deel-purple: #5938b7; --deel-purple-light: #c4b1f9; --deel-blue-light: #b1d8fc; } /* ------------------------------------- =Page background Animated deel flagwave tiled over the warm cream canvas. The gif keeps its own transparency, so the page color still reads between the marks. Provisional tile size - fine-tune against the artboard in the pixel-perfect pass. ------------------------------------- */ .has-skin-deel { --color-bg-page: var(--cream-warm); } .has-skin-deel body { background-image: url("../../images/deel-flagwave.gif"); /* @match flagwave_tile_size - flagwave tile width, same on both breakpoints */ background-size: 560px auto; background-repeat: repeat; } /* ------------------------------------- =Header / nav Purple bar, light foreground. Light purple is the resting nav color; an item reads light blue while its toggle is on (the skin buttons, via aria-pressed). Home never lights. ------------------------------------- */ .has-skin-deel .site-header { background-color: var(--deel-purple); border-bottom-color: var(--deel-purple); } .has-skin-deel .site-header__search-field { background-color: var(--deel-purple); border-color: var(--deel-purple-light); color: var(--deel-purple-light); } .has-skin-deel .site-header__search-icon { color: var(--deel-purple-light); } .has-skin-deel .site-nav__item { color: var(--deel-purple-light); } .has-skin-deel .site-nav__item[aria-pressed="true"] { color: var(--deel-blue-light); } /* ------------------------------------- =Logo Light-purple box with the "d." knocked out to the bar purple, so the glyph reads as a cutout onto the header behind it. ------------------------------------- */ .has-skin-deel { --logo-color-bg: var(--deel-purple-light); --logo-color-fg: var(--deel-purple); } /* ------------------------------------- =Mobile Three changes, all from the mobile frame: The purple travels with the nav to the bottom bar, and the top bar goes warm cream. The search box does NOT follow it - it keeps the purple fill it has on desktop, sitting on cream instead of on its own bar. The page ground stops being flagwave-over-cream and becomes flat light purple, which is also what the profile cover reads as (the leopard is gone in this skin on mobile). The flagwave itself climbs off the ground and onto a fixed sheet over the whole viewport - third from the top of the mobile order. "Above everything else" is the designer's note verbatim, so the sheet clears the takeover modals too (the media player, the Zoom call, the application peek), not just the artboard's own layers. Hence pointer-events: none, without which the sheet would swallow every tap on the page - and hence Clippy being lifted with it, since Clippy is one of the two things the notes keep on top. The other is the emergency alert, which is above the sheet on the team's instruction rather than the designer's. ------------------------------------- */ @media ( max-width: 1076px ) { .has-skin-deel body { background-color: var(--deel-purple-light); background-image: none; } .has-skin-deel body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-skin-deel-mobile); background-image: url("../../images/deel-flagwave.gif"); /* @match flagwave_tile_size - flagwave tile width, same on both breakpoints */ background-size: 560px auto; background-repeat: repeat; pointer-events: none; } .has-skin-deel .clippy { z-index: var(--z-clippy-mobile); } .has-skin-deel .site-header { background-color: var(--cream-warm); border-bottom-color: var(--cream-warm); } .has-skin-deel .profile-card__cover { background-image: none; background-color: var(--deel-purple-light); } .has-skin-deel .site-nav { background-color: var(--deel-purple); border-top-color: var(--deel-purple); } }