/* ========================================================================= wnp-app-shell.css -- My WNP's own header, sidebar and bottom bar. File location in the WNP Site repo: /wnp-app-shell.css. Paired with wnp-app-shell.js, which adds html.wnp-app when somebody is signed in and inside the app, and draws everything styled here. Navigation is calmer than content. The red is for the one thing on a screen that books or pays; the menus are green and grey, and "you are here" is a pale fill and a bolder label, not a slab of colour. Version it in the link tag (?v=...) and bump it on every change. ========================================================================= */ html.wnp-app{ --wapp-head-h:60px; --wapp-side-w:244px; --wapp-bar-h:62px; --wapp-green:#0F6939; --wapp-deep:#0A4A28; --wapp-ink:#232620; --wapp-muted:#5B6259; --wapp-line:rgba(35,38,32,.10); --wapp-on:#EAF2EC; } /* ---------- THE WEBSITE GOES ---------- Inside the app the public header, breadcrumbs, footer, notice bar and the floating Ask Pickle button are all replaced by the shell. Hidden rather than removed, so the page underneath is the same page whichever way it is opened. */ html.wnp-app nav.site-nav, html.wnp-app nav.crumbs, html.wnp-app body > footer, html.wnp-app #wnpFabWrap, html.wnp-app #wnpNotice, html.wnp-app .switchover, html.wnp-app #wnpMobileNav{display:none !important;} html.wnp-app body{padding-top:calc(var(--wapp-head-h) + env(safe-area-inset-top,0px));} /* A page that joins the app (Book, Partner Finder, the calendar) keeps its own heading but not its marketing band: inside the app the heading is the screen's title, sized like every other section's, and the first thing to choose is on screen without scrolling. */ html.wnp-app .hero{background:none;color:var(--wapp-deep);padding:22px 16px 6px;overflow:visible;} html.wnp-app .hero::before,html.wnp-app .hero::after{display:none;} html.wnp-app .hero .eyebrow,html.wnp-app .hero .hero-sub,html.wnp-app .hero .hero-ctas{display:none;} html.wnp-app .hero h1.hero-title,html.wnp-app .hero-sm h1.hero-title{font-size:26px;line-height:1.2; letter-spacing:-.02em;color:var(--wapp-deep);margin:0;} @media (min-width:1000px){html.wnp-app .hero{padding:26px 32px 8px;}} /* "Signed in as ..." says what the header already says. */ html.wnp-app .wnp-authbar.in{display:none !important;} html.wnp-app.wapp-has-for body{padding-top:calc(var(--wapp-head-h) + 36px + env(safe-area-inset-top,0px));} /* ---------- NOT THE WEBSITE'S