/** * Widget tool shell: white “card” column, full viewport height, inset from page edges. * Logo (site-logo.png) top-left → weatherfile.com. Canvas outside shell is light grey. * * Markup:

…

… * Load after widget-fonts.css. Logo URL is relative to this file (widget/images/). */ :root { --wf-app-shell-canvas: #eef0f5; --wf-app-shell-bg: #ffffff; --wf-app-shell-border: #e2e4e8; --wf-app-shell-shadow: 0 2px 14px rgba(15, 18, 40, 0.07); /** Gutter between viewport and shell — closer to edges than a narrow content column */ --wf-app-shell-inset: clamp(8px, 2vw, 18px); --wf-app-shell-max-width: 1120px; } body.wf-app { margin: 0; min-height: 100vh; font-family: var(--wf-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); background: var(--wf-app-shell-canvas); padding: var(--wf-app-shell-inset); box-sizing: border-box; -webkit-font-smoothing: antialiased; } .wf-app-shell { max-width: var(--wf-app-shell-max-width); width: 100%; margin: 0 auto; min-height: calc(100vh - 2 * var(--wf-app-shell-inset)); display: flex; flex-direction: column; background: var(--wf-app-shell-bg); border: 1px solid var(--wf-app-shell-border); border-radius: 12px; box-shadow: var(--wf-app-shell-shadow); overflow: hidden; } .wf-app-shell__header { flex-shrink: 0; position: sticky; top: 0; z-index: 50; padding: 12px clamp(14px, 3vw, 22px); border-bottom: 1px solid var(--wf-app-shell-border); background: var(--wf-app-shell-bg); } .wf-app-shell__brand { display: block; width: min(220px, 58vw); height: clamp(34px, 5.5vw, 48px); max-width: 100%; background: url('../images/site-logo.png') no-repeat left center; background-size: contain; text-decoration: none; } .wf-app-shell__brand:hover { opacity: 0.9; } .wf-app-shell__brand:focus-visible { outline: 2px solid #000099; outline-offset: 3px; border-radius: 4px; } .wf-app-shell__main { flex: 1 1 auto; min-height: 0; padding: clamp(12px, 2.5vw, 22px) clamp(12px, 2.5vw, 26px) clamp(18px, 3.5vw, 28px); }