/* --------------------------------------------------------------------------- WCN Dock Portal — theme layer Web Awesome Pro 3.6.0 (vendored at /webawesome), Shoelace theme + palette. The element carries: class="wa-theme-shoelace wa-palette-shoelace wa-brand-green" Brand note: the prototype's navy/orange scheme was invented, not WCN's. Since 2026-09-23 this matches the wcnfoods.com rebuild (the website repo's DESIGN.md is the source): logo green #38aa30 for marks and rules, deep green #1f6b2a for anything that carries text (filled buttons, links), ink #17231a, Figtree throughout. The green ramp is re-keyed on those values so brand-tinted components inherit them. Leave component internals to the theme. --------------------------------------------------------------------------- */ @import url('/webawesome/styles/themes/shoelace.css'); @import url('/webawesome/styles/native.css'); @import url('/webawesome/styles/utilities.css'); /* ---------------------------------------------------- WCN brand ramp */ @layer wa-color-palette { :root { --wa-color-green-95: #f1f7ee; --wa-color-green-90: #e4efdf; --wa-color-green-80: #bfdcb4; --wa-color-green-70: #74c16b; --wa-color-green-60: #38aa30; /* WCN logo green — key */ --wa-color-green-50: #2c8a26; --wa-color-green-40: #1f6b2a; /* website deep green */ --wa-color-green-30: #164f1f; --wa-color-green-20: #0f3a15; --wa-color-green-10: #08210b; --wa-color-green-05: #041306; --wa-color-green: var(--wa-color-green-60); --wa-color-green-key: 60; } } :root { /* Charcoal matches the logo's own field, so the mark sits on the bar without a visible plate behind it. */ --wcn-ink: #17231a; --wcn-ink-2: #3e4c40; --wcn-ink-3: #5b695c; --wcn-tint: #f1f7ee; --wcn-line: #d7e2d2; --wcn-paper: #ffffff; --wa-color-surface-default: #ffffff; --wa-color-surface-lowered: var(--wcn-tint); /* White on the ramp's 50 step (the theme's default loud fill) is ~4:1. Pin loud fills and brand text to the deep green so both clear 4.5:1. */ --wa-color-brand-fill-loud: var(--wa-color-green-40); --wa-color-brand-on-quiet: var(--wa-color-green-40); --wa-color-brand-on-normal: var(--wa-color-green-30); /* Figtree, self-hosted (the CSP's font-src only allows our own files and Google's). DM Mono stays for data fields, timestamps, and reference numbers, where character alignment helps. */ /* Focus ring in the deep green: the logo green is ~2.9:1 on white, under the 3:1 WCAG asks of focus indicators. */ --wa-color-focus: var(--wa-color-green-40); --wa-font-family-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --wa-font-family-heading: 'Figtree', system-ui, -apple-system, sans-serif; --wa-font-family-code: 'DM Mono', ui-monospace, monospace; --wa-font-weight-heading: 700; } @font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; } ::selection { background: var(--wa-color-green-60); color: var(--wcn-ink); } body { margin: 0; color: var(--wcn-ink); background: var(--wcn-paper); min-height: 100vh; } /* Skip link: first stop for keyboard users, shown when focused. */ .skip-link { position: absolute; left: var(--wa-space-m); top: -4rem; z-index: 100; padding: var(--wa-space-xs) var(--wa-space-m); background: var(--wcn-ink); color: #fff; border-radius: var(--wa-border-radius-m); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--wa-space-m); outline: 3px solid var(--wa-color-green-40); outline-offset: 2px; } main:focus { outline: none; } /* Fields marked required: say so in words, not just an asterisk. */ .required-note { margin: 0 0 var(--wa-space-m); font-size: 0.875rem; color: var(--wcn-ink-3); } /* Web Awesome's native layer gives form controls a display value that beats the [hidden] attribute, which otherwise leaks the raw file inputs. */ [hidden] { display: none !important; } /* ---------------------------------------------------- app chrome */ .app-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); padding: 0 var(--wa-space-l); min-height: 72px; background: #fff; border-bottom: 1px solid var(--wcn-line); position: sticky; top: 0; z-index: 10; } .app-bar__brand { display: flex; align-items: center; gap: var(--wa-space-m); } .app-bar__divider { width: 1px; height: 30px; background: var(--wcn-line); } .app-bar__logo { height: 40px; width: auto; display: block; } .app-bar__name { font-family: var(--wa-font-family-heading); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--wcn-ink); line-height: 1.1; } .app-bar__sub { font-size: 0.9375rem; font-weight: 700; color: var(--wcn-ink); } .app-bar__actions { display: flex; align-items: center; gap: var(--wa-space-s); } .app-bar__user { font-size: 0.875rem; color: var(--wcn-ink-3); } .hero { background: var(--wcn-tint); color: var(--wcn-ink); border-bottom: 1px solid var(--wcn-line); padding: var(--wa-space-2xl) 0; } .hero > * { max-width: 900px; margin-inline: auto; padding-inline: var(--wa-space-l); box-sizing: border-box; } .hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin-top: 0; margin-bottom: var(--wa-space-s); text-wrap: balance; } .hero h1 em { font-style: normal; } .hero p { font-size: 1.125rem; line-height: 1.55; color: var(--wcn-ink-2); margin-top: 0; margin-bottom: 0; } .page { max-width: 900px; margin: 0 auto; padding: var(--wa-space-xl) var(--wa-space-l) var(--wa-space-2xl); } .page--wide { max-width: 1200px; } /* Section heading with the prototype's rule-to-the-right treatment. */ .section-label { display: flex; align-items: center; gap: var(--wa-space-s); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-color-brand-40); margin: 0 0 var(--wa-space-m); } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--wa-color-neutral-fill-normal); } .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--wa-space-m); } .field-grid--thirds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .span-all { grid-column: 1 / -1; } /* Monospace is reserved for values where character alignment genuinely helps: confirmation numbers, lot/BOL numbers, and the access link. Everything else — labels, headings, prose, times — uses Figtree. */ .mono { font-family: var(--wa-font-family-code); font-variant-ligatures: none; } /* ---------------------------------------------------- slot picker */ .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--wa-space-xs); } .slot { /* The native layer makes