/* ───────────────────────────────────────── Tokens */ :root { /* Aliases onto the shared Wilder Insights Lab tokens (static/css/wil-tokens.css). */ --bg: var(--wil-bg); --card: var(--wil-card); --card-grad: var(--wil-card); --forest: var(--wil-forest); --primary: var(--wil-primary); --sage: var(--wil-sage); --sand: var(--wil-sand); --roest: var(--wil-roest); --amber: var(--wil-amber); /* Readable pairs — see the note in wil-tokens.css. Use these for `color:`, the plain ones for fills, borders and chart series. */ --sage-text: var(--wil-sage-text); --roest-text: var(--wil-roest-text); --amber-text: var(--wil-amber-text); --text: var(--wil-text); --text-2: var(--wil-text-2); --border: var(--wil-border); --hairline: var(--wil-hairline); --shadow: var(--wil-shadow); --radius: var(--wil-radius); --font-sans: var(--wil-font-sans); --font-mono: var(--wil-font-mono); /* The deep panels: the two big dark blocks on the live page (the bird just heard, and "in vogelvlucht"). Their fill and every level of text on them is a token, because a partner house style replaces the fill -- and then cream-on-forest would be cream on navy, or cream on yellow. The template overrides this whole set with colours computed from the brand colour, so the type contrasts with whatever the panel became. */ --deep: var(--forest); --on-deep: #EFE9DA; --on-deep-strong: #F4EFE3; --on-deep-soft: rgba(239,233,218,.82); --on-deep-mute: rgba(239,233,218,.6); --deep-label: #9DBDB3; --deep-border: #1F2A24; } .wil-dashboard * { box-sizing: border-box; } .wil-dashboard { background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; } .wil-dashboard a { color: inherit; text-decoration: none; } .wil-dashboard button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* Inline icons (see templates/_wil_icons.html) — sized like a glyph so they drop into the same slots the Font Awesome elements used to fill. */ .wil-ic { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; } .wil-dashboard .mono { font-family: 'DM Mono', ui-monospace, monospace; } .wil-dashboard .serif { font-family: var(--font-sans); font-weight: 600; } /* ───────────────────────────────────────── Layout */ .wil-dashboard .app { max-width: 1440px; margin: 0 auto; } /* ───────────────────────────────────────── Header */ .wil-dashboard .header { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; border-bottom: 1px solid var(--border); background: rgba(250, 250, 247, .85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .wil-dashboard .brand { display: flex; align-items: center; gap: 10px; } .wil-dashboard .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--forest); display: grid; place-items: center; } .wil-dashboard .brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 14px; } .wil-dashboard .brand-tag { font-size: 11px; color: var(--text-2); margin-top: -2px; letter-spacing: 0.02em; } .wil-dashboard .selector { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); transition: border-color .2s; } .wil-dashboard .selector:hover { border-color: var(--sage); } .wil-dashboard .selector-label { font-weight: 500; font-size: 13px; } .wil-dashboard .chev { width: 14px; height: 14px; opacity: .6; } .wil-dashboard .pill { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(123, 160, 152, .14); color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .wil-dashboard .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); } .wil-dashboard .header-right { display: flex; align-items: center; gap: 12px; } .wil-dashboard .period { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--card); } .wil-dashboard .icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; transition: border-color .2s; } .wil-dashboard .icon-btn:hover { border-color: var(--sage); } .wil-dashboard .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; color: var(--forest); font-size: 12px; font-weight: 600; } /* ───────────────────────────────────────── Live status bar */ .wil-dashboard .live-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 10px 32px; border-bottom: 1px solid var(--border); background: var(--card); } .wil-dashboard .live-left { display: flex; align-items: center; gap: 10px; font-size: 12px; } .wil-dashboard .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ea66f; box-shadow: 0 0 0 0 rgba(78, 166, 111, .6); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(78,166,111,.55); } 70% { box-shadow: 0 0 0 8px rgba(78,166,111,0); } 100% { box-shadow: 0 0 0 0 rgba(78,166,111,0); } } .wil-dashboard .live-label { font-family: 'DM Mono', monospace; letter-spacing: .04em; color: var(--primary); font-weight: 500; } /* Not measuring: no pulse, and a colour that does not read as "on air". Stale and offline are amber (something to look at), unknown is grey. */ .wil-dashboard .live-bar:not([data-measure="measuring"]) .live-dot { animation: none; box-shadow: none; background: var(--amber-text, #8a5a16); } .wil-dashboard .live-bar[data-measure="unknown"] .live-dot { background: var(--text-2); } .wil-dashboard .live-bar:not([data-measure="measuring"]) .live-label { color: var(--amber-text, #8a5a16); } .wil-dashboard .live-bar[data-measure="unknown"] .live-label { color: var(--text-2); } .wil-dashboard .live-note { color: var(--text-2); flex-basis: 100%; } .wil-dashboard .pill[data-measure]:not([data-measure="measuring"]) { background: rgba(200,146,74,.15); color: var(--amber-text, #8a5a16); } .wil-dashboard .pill[data-measure]:not([data-measure="measuring"]) .dot { background: var(--amber-text, #8a5a16); } .wil-dashboard .pill[data-measure="unknown"] { background: var(--bg); color: var(--text-2); } .wil-dashboard .pill[data-measure="unknown"] .dot { background: var(--text-2); } @media (prefers-reduced-motion: reduce) { .wil-dashboard .live-dot { animation: none; } } .wil-dashboard .live-meta { color: var(--text-2); } .wil-dashboard .sparkline { height: 24px; width: 360px; } .wil-dashboard .live-right { text-align: right; font-size: 11px; color: var(--text-2); letter-spacing: .03em; } /* ───────────────────────────────────────── Sections */ .wil-dashboard .section { padding: 32px; } .wil-dashboard .section + .section { padding-top: 8px; } .wil-dashboard .section-head { margin-bottom: 20px; } .wil-dashboard .eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; margin-bottom: 8px; } .wil-dashboard .section-title { font-family: var(--font-sans); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 6px; } .wil-dashboard .section-sub { color: var(--text-2); max-width: 640px; } /* ───────────────────────────────────────── Card */ .wil-dashboard .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; transition: border-color .25s ease; } .wil-dashboard .card:hover { border-color: rgba(123, 160, 152, .55); } .wil-dashboard .card-eyebrow { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; } /* ───────────────────────────────────────── Hero grid */ .wil-dashboard .hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; } /* Score card */ .wil-dashboard .score-card { padding: 32px; display: flex; flex-direction: column; min-height: 460px; } .wil-dashboard .score-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .wil-dashboard .trend-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(123, 160, 152, .15); color: var(--primary); font-size: 12px; font-weight: 500; } .wil-dashboard .trend-pill .arrow { display: inline-block; opacity: 0; transform: translateY(2px); animation: arrowIn .5s .8s forwards; } @keyframes arrowIn { to { opacity: 1; transform: translateY(0); } } .wil-dashboard .score-body { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; flex: 1; } /* Round version of the comparison glider: a full-circle gradient scale (roest→forest, low→high) with an external pointer at the score and the value in the middle. */ .wil-dashboard .score-gauge { position: relative; width: 168px; height: 168px; } /* 0 at the top (dark red), sweeping clockwise up to dark green near the top again — so a higher score visibly climbs from red round to green. */ .wil-dashboard .sg-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #B85C3A, #C8924A, #7BA098, #2D4A3E); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px)); mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px)); } /* The pointer orbits just OUTSIDE the ring, pointing inward. */ .wil-dashboard .sg-arrow { position: absolute; inset: 0; transform-origin: 50% 50%; transform: rotate(0deg); /* 0-score start (top); JS animates to score */ transition: transform 1.3s cubic-bezier(.22,.61,.36,1); } .wil-dashboard .sg-tip { position: absolute; top: -15px; left: 50%; margin-left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 14px solid var(--amber); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); } .wil-dashboard .sg-center { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; } .wil-dashboard .sg-center .sg-val { display: inline-flex; align-items: baseline; } .wil-dashboard .sg-center .sg-num { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .wil-dashboard .sg-center .sg-unit { font-size: 20px; color: var(--text-2); margin-left: 2px; } .wil-dashboard .score-num { display: flex; align-items: baseline; gap: 8px; } .wil-dashboard .score-num .big { font-family: var(--font-sans); font-weight: 600; font-size: 132px; line-height: .9; color: var(--amber-text); letter-spacing: -.02em; } .wil-dashboard .score-num .denom { font-family: var(--font-sans); font-weight: 600; font-size: 32px; color: #C7C2B5; } .wil-dashboard .score-label { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--text); margin-top: 6px; } .wil-dashboard .score-explain { margin-top: 24px; color: var(--text-2); max-width: 540px; line-height: 1.55; } /* The one reading under the score: where the level name used to stand. */ .wil-dashboard .score-explain.score-reading { margin-top: 6px; color: var(--text); font-size: 18px; font-weight: 500; } /* Nuance that used to hide in a hover title, and what the strict score leaves out: small, quiet, but on the page. */ .wil-dashboard .score-drift-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2); } .wil-dashboard .score-awaiting-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2); } .wil-dashboard .score-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); } .wil-dashboard .stat { padding: 0 18px; border-right: 1px solid var(--border); } .wil-dashboard .stat:first-child { padding-left: 0; } .wil-dashboard .stat:last-child { border-right: none; padding-right: 0; } .wil-dashboard .stat-num { font-family: var(--font-sans); font-weight: 600; font-size: 22px; color: var(--text); display: flex; align-items: baseline; gap: 8px; } .wil-dashboard .stat-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; display: flex; align-items: center; gap: 6px; } .wil-dashboard .arrow-up { color: #4ea66f; opacity: 0; animation: arrowIn .5s 1s forwards; } .wil-dashboard .arrow-roest { color: var(--roest-text); opacity: 0; animation: arrowIn .5s 1.1s forwards; } /* Right column cards */ .wil-dashboard .right-col { display: flex; flex-direction: column; gap: 20px; } .wil-dashboard .feed-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .wil-dashboard .feed-title { font-family: var(--font-sans); font-weight: 600; font-size: 20px; } /* No bullets and no default ul indent: the list shares the left edge of the "Now audible" heading (Bootstrap gives ul a 2rem padding otherwise). */ .wil-dashboard .feed-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .wil-dashboard .feed-row { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); transition: background .2s; } .wil-dashboard .feed-row:first-child { border-top: none; padding-top: 12px; } .wil-dashboard .feed-row:hover { background: rgba(123, 160, 152, .05); } .wil-dashboard .feed-time { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-2); } .wil-dashboard .feed-time.now { color: var(--primary); font-weight: 500; } .wil-dashboard .feed-bird { width: 32px; height: 32px; border-radius: 50%; background: rgba(123, 160, 152, .12); display: grid; place-items: center; } .wil-dashboard .feed-name { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px; } .wil-dashboard .badge-new { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: rgba(184, 92, 58, .14); color: var(--roest-text); font-weight: 500; } .wil-dashboard .sensor-tag { font-family: 'DM Mono', monospace; font-size: 10px; padding: 3px 7px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-2); } .wil-dashboard .speaker { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); } .wil-dashboard .speaker:hover { background: var(--bg); color: var(--primary); } .wil-dashboard .feed-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--primary); font-weight: 500; } .wil-dashboard .feed-foot:hover { color: var(--forest); } /* Card B — soort van de week */ .wil-dashboard .week-card { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; } .wil-dashboard .week-img { width: 96px; height: 96px; border-radius: 10px; background: var(--card); display: grid; place-items: center; border: 1px solid var(--border); } .wil-dashboard .week-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .wil-dashboard .week-name { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1; } .wil-dashboard .week-latin { color: var(--text-2); font-size: 13px; margin-top: 4px; margin-bottom: 8px; } .wil-dashboard .week-context { color: var(--text-2); font-size: 13px; line-height: 1.5; margin-bottom: 10px; } .wil-dashboard .badge-roest { display: inline-block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 8px; border-radius: 4px; background: rgba(184, 92, 58, .12); color: var(--roest-text); } /* ───────────────────────────────────────── Section 2 grid */ .wil-dashboard .why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .wil-dashboard .why-card { display: flex; flex-direction: column; gap: 14px; } .wil-dashboard .why-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(45,74,62,.06); display: grid; place-items: center; color: var(--primary); } .wil-dashboard .why-head { display: flex; align-items: center; justify-content: space-between; } .wil-dashboard .why-title { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.1; } .wil-dashboard .why-key { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .wil-dashboard .why-key-num { font-family: var(--font-sans); font-weight: 600; font-size: 28px; color: var(--text); } .wil-dashboard .why-key-label { color: var(--text-2); font-size: 13px; } .wil-dashboard .why-trend { font-size: 12px; padding: 3px 8px; border-radius: 4px; background: rgba(123,160,152,.14); color: var(--primary); font-weight: 500; } .wil-dashboard .why-trend.amber { background: rgba(200,146,74,.15); color: var(--amber-text); } .wil-dashboard .why-body { color: var(--text-2); font-size: 13px; line-height: 1.55; } .wil-dashboard .contrib { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .wil-dashboard .contrib-label { font-size: 12px; color: var(--text-2); } .wil-dashboard .contrib-label .v { color: var(--text); font-weight: 500; } .wil-dashboard .bars { display: inline-flex; gap: 3px; } .wil-dashboard .bar { width: 6px; height: 14px; border-radius: 2px; background: var(--border); } .wil-dashboard .bar.on { background: var(--amber); } .wil-dashboard .bar.on.low { background: var(--roest); } /* Sparkline (component 1) */ .wil-dashboard .mini-line { width: 100%; height: 56px; } /* Stacked dominance bar */ .wil-dashboard .stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .wil-dashboard .stack > span { display: block; height: 100%; } .wil-dashboard .top-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .wil-dashboard .top-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; } .wil-dashboard .swatch { width: 10px; height: 10px; border-radius: 2px; } .wil-dashboard .top-name { font-weight: 500; } .wil-dashboard .top-pct { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-2); } /* Indicator list */ .wil-dashboard .ind-list { display: flex; flex-direction: column; } .wil-dashboard .ind-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; } .wil-dashboard .ind-row:first-child { border-top: none; } .wil-dashboard .ind-status { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; } .wil-dashboard .ind-status.ok { background: rgba(123,160,152,.18); color: var(--primary); } .wil-dashboard .ind-status.warn { background: rgba(200,146,74,.2); color: var(--amber-text); } .wil-dashboard .ind-status.miss { background: rgba(184,92,58,.16); color: var(--roest-text); } .wil-dashboard .ind-name { font-weight: 500; } .wil-dashboard .ind-state { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-2); } .wil-dashboard .ind-state.ok { color: var(--primary); } .wil-dashboard .ind-state.warn { color: var(--amber-text); } .wil-dashboard .ind-state.miss { color: var(--roest-text); } /* ───────────────────────────────────────── Insight block (forest) */ .wil-dashboard .insight { margin-top: 24px; background: var(--forest); color: #EFE9DA; border-radius: var(--radius); padding: 36px 40px; position: relative; overflow: hidden; border: 1px solid var(--forest); } .wil-dashboard .insight::before { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: transparent; pointer-events: none; } .wil-dashboard .insight-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); } .wil-dashboard .insight-quote { font-family: var(--font-sans); font-weight: 600; font-size: 26px; line-height: 1.35; max-width: 920px; margin-top: 14px; color: #F4EFE3; letter-spacing: -0.005em; text-wrap: pretty; } .wil-dashboard .insight-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--sage-text); font-weight: 500; font-size: 14px; } .wil-dashboard .insight-cta:hover { color: #A6C4BD; } /* ───────────────────────────────────────── Section 3: Heartbeat */ .wil-dashboard .heartbeat-card { display: grid; grid-template-columns: 240px 1fr 200px; gap: 32px; padding: 28px; } .wil-dashboard .hb-left { display: flex; flex-direction: column; gap: 14px; } .wil-dashboard .hb-title { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.15; } .wil-dashboard .hb-sub { color: var(--text-2); font-size: 13px; line-height: 1.5; } .wil-dashboard .toggles { display: flex; gap: 6px; flex-wrap: wrap; } .wil-dashboard .toggle { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-weight: 500; } .wil-dashboard .toggle.active { background: rgba(123,160,152,.18); border-color: rgba(123,160,152,.4); color: var(--primary); } .wil-dashboard .legend { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text-2); } .wil-dashboard .legend-row { display: flex; align-items: center; gap: 8px; } .wil-dashboard .legend-key { width: 22px; height: 2px; } .wil-dashboard .legend-key.solid { background: #2D4A3E; } .wil-dashboard .legend-key.dash { border-top: 2px dashed currentColor; height: 0; height: 2px; } .wil-dashboard .legend-key.vert { width: 2px; height: 12px; background: var(--roest); } .wil-dashboard .hb-chart { position: relative; min-height: 240px; } .wil-dashboard .hb-chart svg { width: 100%; height: 240px; display: block; } .wil-dashboard .interv-flag { position: absolute; top: 8px; transform: translateX(8px); background: var(--card); border: 1px solid var(--border); border-left: 2px solid var(--roest); border-radius: 6px; padding: 8px 10px; font-size: 11px; line-height: 1.4; box-shadow: var(--shadow); max-width: 180px; } .wil-dashboard .interv-flag .ttl { font-family: 'DM Mono', monospace; color: var(--roest-text); font-weight: 500; letter-spacing: .04em; margin-bottom: 2px; } .wil-dashboard .interv-flag .body { color: var(--text); } .wil-dashboard .hb-stats { display: flex; flex-direction: column; gap: 10px; } .wil-dashboard .mini-stat { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); } .wil-dashboard .mini-stat.hl { background: transparent; border-color: rgba(123,160,152,.35); } .wil-dashboard .mini-stat .lbl { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; } .wil-dashboard .mini-stat .num { font-family: var(--font-sans); font-weight: 600; font-size: 28px; line-height: 1; margin: 4px 0 4px; color: var(--text); } .wil-dashboard .mini-stat.hl .num { color: var(--primary); } .wil-dashboard .mini-stat .desc { font-size: 11.5px; color: var(--text-2); line-height: 1.4; } /* Section 3 row 2 */ .wil-dashboard .ev-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; } .wil-dashboard .ev-card { display: flex; flex-direction: column; gap: 14px; } .wil-dashboard .hours { display: flex; align-items: flex-end; gap: 2px; height: 100px; padding-top: 8px; } .wil-dashboard .hour { flex: 1; background: var(--border); border-radius: 2px 2px 0 0; position: relative; min-height: 2px; transition: background .2s; } .wil-dashboard .hour:hover { background: var(--primary); } .wil-dashboard .hour:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--forest); color: #EFE9DA; padding: 4px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; font-family: 'DM Mono', monospace; margin-bottom: 6px; pointer-events: none; } .wil-dashboard .hours-axis { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text-2); margin-top: 6px; letter-spacing: .03em; } .wil-dashboard .recent-list { display: flex; flex-direction: column; } .wil-dashboard .recent-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); align-items: center; } .wil-dashboard .recent-row:first-child { border-top: none; padding-top: 4px; } .wil-dashboard .recent-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(123,160,152,.14); display: grid; place-items: center; } .wil-dashboard .recent-name { font-weight: 500; font-size: 14px; } .wil-dashboard .recent-meta { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--text-2); margin-top: 2px; } .wil-dashboard .recent-context { font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.4; } .wil-dashboard .decline-card { border-left: 3px solid var(--roest); background: rgba(184,92,58,.03); } .wil-dashboard .decline-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); align-items: center; } .wil-dashboard .decline-row:first-child { border-top: none; padding-top: 4px; } .wil-dashboard .decline-warn { width: 22px; height: 22px; border-radius: 50%; background: rgba(184,92,58,.14); color: var(--roest-text); display: grid; place-items: center; } .wil-dashboard .decline-name { font-weight: 500; font-size: 14px; } .wil-dashboard .decline-context { font-size: 11.5px; color: var(--text-2); margin-top: 2px; line-height: 1.4; } .wil-dashboard .decline-pct { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--roest-text); font-weight: 500; } .wil-dashboard .insight-italic { color: var(--text-2); font-size: 13px; line-height: 1.5; } /* ───────────────────────────────────────── Section 4: Benchmark */ .wil-dashboard .bench-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; } .wil-dashboard .bench-card { padding: 32px; display: flex; flex-direction: column; gap: 22px; } .wil-dashboard .bench-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(184,92,58,.12); color: var(--roest-text); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; font-weight: 500; align-self: flex-start; } .wil-dashboard .bench-claim { font-family: var(--font-sans); font-weight: 600; font-size: 30px; line-height: 1.25; letter-spacing: -0.005em; color: var(--text); text-wrap: pretty; max-width: 640px; } .wil-dashboard .bench-claim .accent { color: var(--primary); } .wil-dashboard .dist-wrap { position: relative; padding-top: 28px; } .wil-dashboard .dist-svg { width: 100%; height: 110px; display: block; } .wil-dashboard .dist-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .04em; color: var(--text-2); } .wil-dashboard .dist-marker { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .wil-dashboard .dist-marker .flag { background: var(--roest); color: #FFF6EE; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .04em; padding: 4px 8px; border-radius: 4px; white-space: nowrap; font-weight: 500; animation: bounceIn .6s 1s backwards cubic-bezier(.34,1.56,.64,1); } .wil-dashboard .dist-marker .stem { width: 2px; flex: 1; background: var(--roest); margin-top: 0; } @keyframes bounceIn { 0% { opacity: 0; transform: translateY(-12px) scale(.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .wil-dashboard .dist-median { position: absolute; top: 28px; transform: translateX(-50%); font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text-2); letter-spacing: .04em; } .wil-dashboard .bench-progress { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: rgba(123,160,152,.1); border: 1px solid rgba(123,160,152,.25); } .wil-dashboard .bench-progress .arr { width: 26px; height: 26px; border-radius: 50%; background: rgba(123,160,152,.25); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .wil-dashboard .bench-progress .txt { font-size: 13px; color: var(--text); } .wil-dashboard .bench-progress .txt strong { color: var(--primary); font-weight: 600; } .wil-dashboard .bench-foot { font-size: 12px; color: var(--text-2); line-height: 1.5; padding-top: 12px; border-top: 1px solid var(--border); } /* Ranking card */ .wil-dashboard .rank-list { display: flex; flex-direction: column; gap: 14px; } .wil-dashboard .rank-row { display: flex; flex-direction: column; gap: 6px; } .wil-dashboard .rank-head { display: flex; align-items: baseline; justify-content: space-between; } .wil-dashboard .rank-name { font-weight: 500; font-size: 13px; } .wil-dashboard .rank-tag { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .04em; } .wil-dashboard .rank-tag.good { color: var(--primary); } .wil-dashboard .rank-tag.mid { color: var(--amber-text); } .wil-dashboard .rank-tag.low { color: var(--roest-text); } .wil-dashboard .rank-track { height: 6px; border-radius: 3px; background: var(--border); position: relative; } .wil-dashboard .rank-marker { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--border); } .wil-dashboard .rank-marker.good { background: var(--sage); box-shadow: 0 0 0 1px var(--primary); } .wil-dashboard .rank-marker.mid { background: var(--amber); } .wil-dashboard .rank-marker.low { background: var(--roest); } /* small forest insight (B) */ .wil-dashboard .insight-sm { background: var(--forest); color: #EFE9DA; border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; border: 1px solid var(--forest); } .wil-dashboard .insight-sm::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; background: transparent; pointer-events: none; } .wil-dashboard .insight-sm .eb { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); } .wil-dashboard .insight-sm .q { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.4; margin-top: 10px; color: #F4EFE3; text-wrap: pretty; } .wil-dashboard .insight-sm .cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--sage-text); font-weight: 500; font-size: 13px; } .wil-dashboard .insight-sm .cta:hover { color: #A6C4BD; } /* ───────────────────────────────────────── Section 5: Action */ .wil-dashboard .action-intro { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--forest); max-width: 920px; text-wrap: pretty; margin-bottom: 24px; letter-spacing: -0.005em; } .wil-dashboard .action-intro strong { font-style: normal; color: var(--primary); font-weight: 400; border-bottom: 2px solid rgba(123,160,152,.4); } .wil-dashboard .actions-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; } .wil-dashboard .act-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; } .wil-dashboard .act-hero { border: 1.5px solid rgba(123,160,152,.55); background: var(--card); } .wil-dashboard .act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wil-dashboard .act-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .08em; font-weight: 500; } .wil-dashboard .act-badge.hot { background: rgba(184,92,58,.14); color: var(--roest-text); animation: pulseBadge 2.4s ease-in-out infinite; } @keyframes pulseBadge { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,92,58,.35); } 50% { box-shadow: 0 0 0 6px rgba(184,92,58,0); } } .wil-dashboard .act-badge.mid { background: rgba(212,196,168,.45); color: #8a6f3d; } .wil-dashboard .act-badge.win { background: rgba(123,160,152,.18); color: var(--primary); } .wil-dashboard .act-title { font-family: var(--font-sans); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.005em; } .wil-dashboard .act-title.sm { font-size: 21px; } .wil-dashboard .act-body { color: var(--text-2); font-size: 13px; line-height: 1.55; } .wil-dashboard .impact-block { background: rgba(212,196,168,.18); border: 1px solid rgba(212,196,168,.55); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .wil-dashboard .impact-stat { display: flex; flex-direction: column; gap: 4px; } .wil-dashboard .impact-stat .num { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1.05; color: var(--text); } .wil-dashboard .impact-stat .num .arrow-rt { color: var(--text-2); margin: 0 4px; font-size: 18px; } .wil-dashboard .impact-stat .num .to { color: var(--primary); } .wil-dashboard .impact-stat .lbl { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--text-2); text-transform: uppercase; } .wil-dashboard .impact-mini { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .wil-dashboard .impact-mini .num { font-family: var(--font-sans); font-weight: 600; font-size: 22px; color: var(--text); line-height: 1; } .wil-dashboard .impact-mini .lbl { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--text-2); text-transform: uppercase; } .wil-dashboard .progress-mini { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; } .wil-dashboard .progress-mini .fill { display: block; height: 100%; background: var(--sage); border-radius: 2px; } .wil-dashboard .actions-list { display: flex; flex-direction: column; gap: 4px; } .wil-dashboard .action-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); align-items: flex-start; transition: background .2s, padding .2s; } .wil-dashboard .action-row:first-child { border-top: none; } .wil-dashboard .action-row:hover { background: rgba(123,160,152,.05); padding-left: 6px; } .wil-dashboard .action-check { width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: 6px; display: grid; place-items: center; color: transparent; margin-top: 2px; transition: border-color .2s, background .2s, color .2s; } .wil-dashboard .action-row:hover .action-check { border-color: var(--sage); color: var(--sage-text); background: rgba(123,160,152,.08); } .wil-dashboard .action-icon-sm { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; } .wil-dashboard .action-name { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .wil-dashboard .action-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .wil-dashboard .effort-tag { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; white-space: nowrap; border: 1px solid var(--border); color: var(--text-2); align-self: flex-start; margin-top: 2px; } .wil-dashboard .effort-tag.low { background: rgba(123,160,152,.1); color: var(--primary); border-color: rgba(123,160,152,.3); } .wil-dashboard .effort-tag.mid { background: rgba(212,196,168,.25); color: #8a6f3d; border-color: rgba(212,196,168,.6); } .wil-dashboard .effort-tag.high { background: rgba(184,92,58,.1); color: var(--roest-text); border-color: rgba(184,92,58,.25); } .wil-dashboard .compact-actions { display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .wil-dashboard .compact-action { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); line-height: 1.45; } .wil-dashboard .compact-action:first-child { border-top: none; padding-top: 4px; } .wil-dashboard .compact-action svg { color: var(--primary); } .wil-dashboard .act-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wil-dashboard .act-foot a { color: var(--primary); font-weight: 500; font-size: 13px; } .wil-dashboard .info-i { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); } .wil-dashboard .info-i .ic { width: 14px; height: 14px; border-radius: 50%; background: var(--border); color: var(--text-2); display: grid; place-items: center; font-size: 9px; font-family: 'DM Mono', monospace; font-weight: 600; } /* mini month bars (card 3) */ .wil-dashboard .month-bars { display: flex; align-items: flex-end; gap: 3px; height: 50px; } .wil-dashboard .month-bars .mb { flex: 1; background: var(--border); border-radius: 2px 2px 0 0; min-height: 4px; } .wil-dashboard .month-axis { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-2); margin-top: 4px; letter-spacing: .03em; } /* Impact simulation */ .wil-dashboard .sim-wrap { margin-top: 28px; background: transparent; border: 1px solid rgba(123,160,152,.3); border-radius: var(--radius); padding: 32px; } .wil-dashboard .sim-head { margin-bottom: 22px; } .wil-dashboard .sim-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--primary); text-transform: uppercase; } .wil-dashboard .sim-title { font-family: var(--font-sans); font-weight: 600; font-size: 26px; margin-top: 6px; } .wil-dashboard .sim-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; } .wil-dashboard .sim-chart-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; } .wil-dashboard .sim-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11.5px; color: var(--text-2); } .wil-dashboard .sim-legend .row { display: flex; align-items: center; gap: 6px; } .wil-dashboard .sim-legend .key { width: 18px; height: 2px; background: var(--primary); } .wil-dashboard .sim-legend .key.dash { border-top: 2px dashed currentColor; height: 0; } .wil-dashboard .sim-legend .key.gray { background: #C5C0B5; } .wil-dashboard .sim-svg { width: 100%; height: 220px; display: block; } .wil-dashboard .sim-foot { font-size: 11.5px; color: var(--text-2); margin-top: 10px; line-height: 1.45; } .wil-dashboard .sim-stats { display: flex; flex-direction: column; gap: 10px; } .wil-dashboard .sim-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .wil-dashboard .sim-stat .num { font-family: var(--font-sans); font-weight: 600; font-size: 30px; line-height: 1; color: var(--primary); } .wil-dashboard .sim-stat.ts .num { color: var(--text); } .wil-dashboard .sim-stat .lbl { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--text-2); text-transform: uppercase; margin-top: 6px; } .wil-dashboard .sim-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 8px; background: var(--roest); color: #FFF6EE; font-weight: 500; font-size: 13px; margin-top: 4px; border: 1px solid #9C4B2D; transition: background .2s; } .wil-dashboard .sim-cta:hover { background: #9C4B2D; } .wil-dashboard .closing-strip { margin: 24px 0 0; padding: 14px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--text-2); flex-wrap: wrap; } .wil-dashboard .closing-strip a { color: var(--primary); } /* ───────────────────────────────────────── Section 6: Share */ .wil-dashboard .share-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .wil-dashboard .share-card { display: flex; flex-direction: column; gap: 14px; } .wil-dashboard .share-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); position: relative; box-shadow: 0 1px 3px rgba(28,35,30,.04); } .wil-dashboard .ratio-1 { aspect-ratio: 1 / 1; } .wil-dashboard .ratio-16-9 { aspect-ratio: 16 / 9; } .wil-dashboard .ratio-4-5 { aspect-ratio: 4 / 5; } .wil-dashboard .preview-pad { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px; } .wil-dashboard .preview-1 { background: var(--forest); color: #F4EFE3; } .wil-dashboard .preview-1::before { content: ""; position: absolute; inset: 0; background: transparent; } .wil-dashboard .preview-1 .top { display: flex; gap: 8px; align-items: center; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; opacity: .85; position: relative; z-index: 1; } .wil-dashboard .preview-1 .logo-dot { width: 14px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.15); display: inline-block; } .wil-dashboard .preview-1 .hero { font-family: var(--font-sans); font-weight: 600; font-size: 26px; line-height: 1.1; margin-top: auto; position: relative; z-index: 1; letter-spacing: -0.01em; text-wrap: balance; } .wil-dashboard .preview-1 .sub { font-family: 'DM Sans'; font-size: 12px; color: var(--sage-text); margin-top: 6px; position: relative; z-index: 1; } .wil-dashboard .preview-1 .stamp { position: absolute; right: 14px; bottom: 12px; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .1em; opacity: .55; } .wil-dashboard .preview-2 { background: #FFFFFF; color: var(--text); } .wil-dashboard .preview-2 .top { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 8.5px; color: var(--text-2); letter-spacing: .06em; } .wil-dashboard .preview-2 .ttl { font-family: var(--font-sans); font-weight: 600; font-size: 16px; margin-top: 6px; line-height: 1.1; } .wil-dashboard .preview-2 .interp { font-size: 10px; color: var(--text-2); margin-top: 2px; line-height: 1.3; } .wil-dashboard .preview-2 .mini-chart { flex: 1; display: flex; align-items: stretch; margin: 8px 0; } .wil-dashboard .preview-2 .mini-chart svg { width: 100%; height: 100%; } .wil-dashboard .preview-2 .ftr { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 7.5px; color: var(--text-2); letter-spacing: .06em; padding-top: 6px; border-top: 1px solid var(--border); } .wil-dashboard .preview-3 { background: #FFFFFF; color: var(--text); padding: 0 !important; } .wil-dashboard .preview-3 .img { flex: 0 0 60%; background: var(--sand); display: grid; place-items: center; position: relative; } .wil-dashboard .preview-3 .info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .wil-dashboard .preview-3 .name { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1; } .wil-dashboard .preview-3 .latin { font-size: 10px; color: var(--text-2); } .wil-dashboard .preview-3 .ctx { font-size: 11px; color: var(--text); margin-top: 2px; line-height: 1.3; } .wil-dashboard .preview-3 .meta { font-family: 'DM Mono', monospace; font-size: 8px; color: var(--text-2); letter-spacing: .06em; margin-top: auto; padding-top: 4px; } .wil-dashboard .share-buttons { display: flex; gap: 8px; } .wil-dashboard .btn { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-size: 12.5px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .2s, background .2s; } .wil-dashboard .btn:hover { border-color: var(--sage); background: rgba(123,160,152,.06); } .wil-dashboard .btn.primary { background: var(--primary); color: #F4EFE3; border-color: var(--primary); } .wil-dashboard .btn.primary:hover { background: var(--forest); border-color: var(--forest); } .wil-dashboard .share-cta-strip { margin-top: 20px; padding: 16px 20px; border: 1px dashed var(--border); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; } .wil-dashboard .share-cta-strip a { color: var(--primary); font-weight: 500; } /* ───────────────────────────────────────── Section 7: Export */ .wil-dashboard .export-section { display: grid; grid-template-columns: 460px 1fr; gap: 32px; align-items: flex-start; } .wil-dashboard .export-head { display: flex; flex-direction: column; gap: 6px; } .wil-dashboard .export-title { font-family: 'DM Sans'; font-weight: 600; font-size: 18px; color: var(--text); } .wil-dashboard .export-card { padding: 24px; display: flex; flex-direction: column; gap: 18px; } .wil-dashboard .pill-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 14px; } .wil-dashboard .pill-tab { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--bg); color: var(--text-2); border: 1px solid var(--border); font-family: 'DM Sans'; } .wil-dashboard .pill-tab.active { background: rgba(123,160,152,.18); color: var(--primary); border-color: rgba(123,160,152,.4); } .wil-dashboard .export-list { display: flex; flex-direction: column; gap: 8px; } .wil-dashboard .export-list .lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; margin-bottom: 4px; } .wil-dashboard .export-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .wil-dashboard .export-list li { font-size: 12.5px; color: var(--text); padding-left: 18px; position: relative; line-height: 1.45; } .wil-dashboard .export-list li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 5px; height: 5px; border-radius: 1px; background: var(--sage); } .wil-dashboard .date-range { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; } .wil-dashboard .date-range .lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--text-2); } .wil-dashboard .date-range .val { font-weight: 500; } .wil-dashboard .export-buttons { display: flex; gap: 10px; } .wil-dashboard .export-meta { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--text-2); letter-spacing: .04em; } .wil-dashboard .export-aside { padding: 24px; border-radius: 10px; background: rgba(123,160,152,.06); border: 1px solid rgba(123,160,152,.2); color: var(--text-2); font-size: 13px; line-height: 1.55; } .wil-dashboard .export-aside .ttl { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--text); margin-bottom: 8px; } /* ───────────────────────────────────────── Section 8: Detail table */ .wil-dashboard .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; } .wil-dashboard .search-input { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); font-size: 13px; color: var(--text-2); } .wil-dashboard .search-input svg { color: var(--text-2); } .wil-dashboard .filter-pill { padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; background: var(--card); display: inline-flex; align-items: center; gap: 6px; color: var(--text); } .wil-dashboard .filter-pill .chev { width: 12px; height: 12px; opacity: .55; } .wil-dashboard .toggle-pills { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .wil-dashboard .toggle-pills .tp { padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--text-2); font-weight: 500; } .wil-dashboard .toggle-pills .tp.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(28,35,30,.06); } .wil-dashboard .data-table { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .wil-dashboard .data-table table { width: 100%; border-collapse: collapse; } .wil-dashboard .data-table th, .wil-dashboard .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } .wil-dashboard .data-table th { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 500; background: rgba(232,228,219,.4); border-bottom: 1px solid var(--border); } .wil-dashboard .data-table tr:last-child td { border-bottom: none; } .wil-dashboard .data-table tr:hover td { background: rgba(123,160,152,.04); } .wil-dashboard .sp-cell { display: flex; align-items: center; gap: 10px; } .wil-dashboard .sp-thumb { width: 32px; height: 32px; border-radius: 6px; background: rgba(123,160,152,.12); display: grid; place-items: center; flex-shrink: 0; } .wil-dashboard .sp-name { font-weight: 500; } .wil-dashboard .sp-latin { color: var(--text-2); font-size: 11.5px; } .wil-dashboard .det-cell { display: flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 12px; } .wil-dashboard .det-cell svg { flex-shrink: 0; } .wil-dashboard .trend-up { color: var(--primary); font-family: 'DM Mono', monospace; font-size: 12px; } .wil-dashboard .trend-flat { color: var(--text-2); font-family: 'DM Mono', monospace; font-size: 12px; } .wil-dashboard .trend-down { color: var(--roest-text); font-family: 'DM Mono', monospace; font-size: 12px; } .wil-dashboard .trend-new { color: var(--roest-text); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 2px 6px; background: rgba(184,92,58,.12); border-radius: 4px; } .wil-dashboard .date-mono { font-family: 'DM Mono', monospace; font-size: 11.5px; color: var(--text-2); } .wil-dashboard .sensor-pills { display: inline-flex; gap: 3px; } .wil-dashboard .sp-tag { font-family: 'DM Mono', monospace; font-size: 9.5px; padding: 2px 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); color: var(--text-2); } .wil-dashboard .sp-tag.on { background: rgba(123,160,152,.18); color: var(--primary); border-color: rgba(123,160,152,.4); } .wil-dashboard .status-badge { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .06em; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; } .wil-dashboard .status-reg { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); } .wil-dashboard .status-ind { background: rgba(123,160,152,.18); color: var(--primary); } .wil-dashboard .status-new { background: rgba(184,92,58,.12); color: var(--roest-text); } .wil-dashboard .status-att { background: rgba(200,146,74,.18); color: var(--amber-text); } .wil-dashboard .row-actions { display: flex; gap: 6px; } .wil-dashboard .row-actions button { width: 28px; height: 28px; border-radius: 6px; color: var(--text-2); display: grid; place-items: center; } .wil-dashboard .row-actions button:hover { background: var(--bg); color: var(--primary); } .wil-dashboard .table-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--border); background: rgba(250,250,247,.55); font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-2); letter-spacing: .04em; } .wil-dashboard .table-foot .pager { display: flex; align-items: center; gap: 12px; } .wil-dashboard .table-foot button { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-family: 'DM Sans'; font-size: 12px; color: var(--text); } .wil-dashboard .table-foot button:hover { border-color: var(--sage); } .wil-dashboard .table-foot a { color: var(--primary); font-family: 'DM Sans'; font-weight: 500; font-size: 12.5px; } .wil-dashboard .table-context { margin-top: 10px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-2); letter-spacing: .04em; } /* ───────────────────────────────────────── Page footer */ .wil-dashboard .page-footer { margin-top: 48px; background: var(--forest); color: #C8C2B0; padding: 48px 32px 24px; position: relative; overflow: hidden; } .wil-dashboard .page-footer::before { content: ""; position: absolute; left: -80px; top: -80px; width: 320px; height: 320px; background: transparent; pointer-events: none; } .wil-dashboard .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; max-width: 1376px; margin: 0 auto; position: relative; } .wil-dashboard .footer-brand { display: flex; flex-direction: column; gap: 12px; } .wil-dashboard .footer-brand .row { display: flex; align-items: center; gap: 10px; } .wil-dashboard .footer-brand .nm { font-family: 'DM Sans'; font-weight: 600; color: #F4EFE3; font-size: 15px; } .wil-dashboard .footer-brand .tag { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--sage-text); max-width: 320px; line-height: 1.3; } .wil-dashboard .footer-col-ttl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); margin-bottom: 12px; } .wil-dashboard .footer-links { display: flex; flex-direction: column; gap: 8px; } .wil-dashboard .footer-links a { color: #C8C2B0; font-size: 13px; } .wil-dashboard .footer-links a:hover { color: #F4EFE3; } .wil-dashboard .footer-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .wil-dashboard .footer-meta .k { color: #8a9489; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } .wil-dashboard .footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(196,191,176,.15); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .04em; color: #8a9489; max-width: 1376px; margin-left: auto; margin-right: auto; position: relative; } .wil-dashboard .status-ok { color: #7BA098; } .wil-dashboard .status-ok::before { content: "● "; } /* Footer placeholder */ .wil-dashboard .next { margin: 32px; padding: 20px 24px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--text-2); font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .04em; } /* ───────────────────────────────────────── Count-up wrapper */ .wil-dashboard .countup { display: inline-block; } /* small svg icons */ .wil-dashboard .ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .wil-dashboard .ico-sm { width: 14px; height: 14px; } .wil-dashboard .ico-lg { width: 22px; height: 22px; } /* ───────────────────────────────────────────────────────────────────── TYPOGRAPHY OVERRIDE — neutral, system-driven sans-serif throughout. Hierarchy via size · weight · spacing only. No serif, no italics, no expressive type. "Default but refined." ───────────────────────────────────────────────────────────────────── */ /* Force the sans stack everywhere */ html, body, .wil-dashboard .serif, .wil-dashboard .section-title, .wil-dashboard .feed-title, .wil-dashboard .week-name, .wil-dashboard .why-title, .wil-dashboard .hb-title, .wil-dashboard .bench-claim, .wil-dashboard .act-title, .wil-dashboard .sim-title, .wil-dashboard .insight-quote, .wil-dashboard .insight-sm .q, .wil-dashboard .action-intro, .wil-dashboard .score-num .big, .wil-dashboard .score-num .denom, .wil-dashboard .score-label, .wil-dashboard .stat-num, .wil-dashboard .why-key-num, .wil-dashboard .mini-stat .num, .wil-dashboard .impact-stat .num, .wil-dashboard .impact-mini .num, .wil-dashboard .sim-stat .num, .wil-dashboard .ring-center, .wil-dashboard .preview-3 .name, .wil-dashboard .export-aside .ttl, .wil-dashboard .footer-brand .tag, .wil-dashboard .sp-latin { font-family: var(--font-sans) !important; font-style: normal !important; } /* Mono only retained for tabular / metadata micro-labels */ .wil-dashboard .mono, .wil-dashboard .live-label, .wil-dashboard .eyebrow, .wil-dashboard .card-eyebrow, .wil-dashboard .feed-time, .wil-dashboard .badge-new, .wil-dashboard .sensor-tag, .wil-dashboard .badge-roest, .wil-dashboard .top-pct, .wil-dashboard .ind-state, .wil-dashboard .insight-eyebrow, .wil-dashboard .interv-flag .ttl, .wil-dashboard .mini-stat .lbl, .wil-dashboard .hours-axis, .wil-dashboard .recent-meta, .wil-dashboard .decline-pct, .wil-dashboard .dist-axis, .wil-dashboard .dist-marker .flag, .wil-dashboard .dist-median, .wil-dashboard .rank-tag, .wil-dashboard .insight-sm .eb, .wil-dashboard .act-badge, .wil-dashboard .impact-stat .lbl, .wil-dashboard .impact-mini .lbl, .wil-dashboard .effort-tag, .wil-dashboard .month-axis, .wil-dashboard .sim-eyebrow, .wil-dashboard .sim-stat .lbl, .wil-dashboard .footer-col-ttl, .wil-dashboard .det-cell { font-family: var(--font-mono) !important; } /* Body baseline */ body { font-size: 14px; line-height: 1.55; letter-spacing: -0.005em; } /* Calmer, system-driven hierarchy */ .wil-dashboard .section-title { font-size: 26px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; } .wil-dashboard .section-sub { font-size: 14px; color: var(--text-2); line-height: 1.55; } .wil-dashboard .eyebrow, .wil-dashboard .card-eyebrow, .wil-dashboard .insight-eyebrow, .wil-dashboard .insight-sm .eb, .wil-dashboard .sim-eyebrow, .wil-dashboard .footer-col-ttl, .wil-dashboard .mini-stat .lbl, .wil-dashboard .impact-stat .lbl, .wil-dashboard .impact-mini .lbl, .wil-dashboard .sim-stat .lbl, .wil-dashboard .hours-axis, .wil-dashboard .recent-meta, .wil-dashboard .month-axis { font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } /* Hero score — refined, not editorial */ .wil-dashboard .score-num .big { font-size: 116px; font-weight: 600; letter-spacing: -0.04em; line-height: 0.9; } .wil-dashboard .score-num .denom { font-size: 28px; font-weight: 400; letter-spacing: -0.02em; } .wil-dashboard .score-label { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.4; } .wil-dashboard .ring-center { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; } .wil-dashboard .ring-center .pct { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } /* Numeric stats — tighter, weight-based emphasis */ .wil-dashboard .stat-num, .wil-dashboard .why-key-num, .wil-dashboard .mini-stat .num, .wil-dashboard .impact-stat .num, .wil-dashboard .impact-mini .num, .wil-dashboard .sim-stat .num { font-weight: 600; letter-spacing: -0.02em; } .wil-dashboard .stat-num { font-size: 20px; } .wil-dashboard .why-key-num { font-size: 26px; } .wil-dashboard .mini-stat .num { font-size: 24px; } .wil-dashboard .impact-stat .num { font-size: 22px; } .wil-dashboard .impact-mini .num { font-size: 20px; } .wil-dashboard .sim-stat .num { font-size: 26px; } /* Card / feed / week titles — calm and precise */ .wil-dashboard .feed-title, .wil-dashboard .week-name, .wil-dashboard .why-title, .wil-dashboard .hb-title, .wil-dashboard .preview-3 .name, .wil-dashboard .export-aside .ttl, .wil-dashboard .footer-brand .tag { font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; } .wil-dashboard .feed-title { font-size: 18px; } .wil-dashboard .week-name { font-size: 19px; } .wil-dashboard .why-title { font-size: 19px; } .wil-dashboard .hb-title { font-size: 19px; } .wil-dashboard .preview-3 .name { font-size: 16px; } .wil-dashboard .export-aside .ttl { font-size: 16px; } .wil-dashboard .footer-brand .tag { font-size: 15px; line-height: 1.4; } /* Headline-feeling claims — same family, restrained scale */ .wil-dashboard .bench-claim { font-size: 24px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.3; } .wil-dashboard .bench-claim strong { font-weight: 600; } .wil-dashboard .act-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .wil-dashboard .act-title.sm { font-size: 18px; letter-spacing: -0.012em; } .wil-dashboard .sim-title { font-size: 22px; font-weight: 600; letter-spacing: -0.018em; } /* Insight quotes — quiet emphasis through weight, not italics */ .wil-dashboard .insight-quote { font-size: 22px; font-weight: 500; letter-spacing: -0.014em; line-height: 1.4; } .wil-dashboard .insight-sm .q { font-size: 16px; font-weight: 500; letter-spacing: -0.008em; line-height: 1.45; } .wil-dashboard .action-intro { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; } /* Latin names — keep secondary tone via weight + color, not italics */ .wil-dashboard .sp-latin { font-weight: 400; } .wil-dashboard .insight-italic { font-weight: 400; } /* Brand mark stays neutral too */ .wil-dashboard .brand-name { font-weight: 600; letter-spacing: -0.012em; } /* Buttons / pills retained but tightened */ .wil-dashboard .pill { font-weight: 500; letter-spacing: 0; } /* ───────────────────────────────────────────────────────────────────── RESPONSIVE — collapse the fixed multi-column grids on tablet/phone. The Bootstrap rows in sections 3–4 already reflow via col-* classes; these rules cover the custom CSS grids (hero, score, why, etc.) and scale down the oversized hero number so nothing overflows on mobile. Same visual language — only the layout adapts. ───────────────────────────────────────────────────────────────────── */ /* Never let a wide child force a horizontal scroll on small screens */ .wil-dashboard { overflow-x: hidden; } .wil-dashboard .card, .wil-dashboard .insight, .wil-dashboard .insight-sm, .wil-dashboard .sim-wrap { min-width: 0; } @media (max-width: 900px) { /* Section-2 component cards drop from 3 → 2 columns before going to 1 */ .wil-dashboard .why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .wil-dashboard { font-size: 14px; } /* Tighter section rhythm */ .wil-dashboard .section { padding: 22px 16px; } .wil-dashboard .section + .section { padding-top: 4px; } .wil-dashboard .section-head { margin-bottom: 16px; } .wil-dashboard .section-title { font-size: 22px; } /* Cards lose some breathing room so content keeps its width */ .wil-dashboard .card { padding: 18px; } .wil-dashboard .insight { padding: 24px 22px; } .wil-dashboard .sim-wrap { padding: 22px; } /* Live bar: stop forcing a 3-column grid — wrap instead */ .wil-dashboard .live-bar { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 10px 16px; } .wil-dashboard .live-right { text-align: left; } /* Hero: stack the score card above the live/feed column */ .wil-dashboard .hero-grid { grid-template-columns: 1fr; gap: 16px; } .wil-dashboard .score-card { padding: 22px; min-height: 0; } .wil-dashboard .score-head { margin-bottom: 18px; } /* Score body: ring on top, text below, both centred */ .wil-dashboard .score-body { grid-template-columns: 1fr; gap: 18px; text-align: center; } .wil-dashboard .score-gauge { margin: 0 auto; } .wil-dashboard .score-num { justify-content: center; } .wil-dashboard .score-num .big { font-size: 84px; } .wil-dashboard .score-explain { margin: 16px auto 0; } .wil-dashboard .score-explain.score-reading { margin: 6px auto 0; } /* Section 2 + every other custom multi-column grid → single column */ .wil-dashboard .why-grid, .wil-dashboard .heartbeat-card, .wil-dashboard .ev-grid, .wil-dashboard .bench-grid, .wil-dashboard .actions-grid, .wil-dashboard .sim-grid, .wil-dashboard .share-grid, .wil-dashboard .export-section, .wil-dashboard .impact-block, .wil-dashboard .footer-grid { grid-template-columns: 1fr; } /* Score stats: 4 across gets cramped once the card is full-width, so drop to a tidy 2×2 with the divider only between the two columns. */ .wil-dashboard .score-stats { grid-template-columns: 1fr 1fr; row-gap: 16px; } .wil-dashboard .stat { padding: 0 16px; } .wil-dashboard .stat:nth-child(2n) { border-right: none; padding-right: 0; } .wil-dashboard .stat:nth-child(2n+1) { padding-left: 0; } /* Trend chart a touch shorter so it isn't dominant on a phone */ .wil-dashboard #dashTrendChart { max-height: 240px; } } @media (max-width: 480px) { .wil-dashboard .section-title { font-size: 20px; } .wil-dashboard .score-num .big { font-size: 64px; } .wil-dashboard .score-num .denom { font-size: 22px; } /* Stack the three hero stats — three columns get cramped under ~360px */ .wil-dashboard .score-stats { grid-template-columns: 1fr; margin-top: 20px; padding-top: 16px; } .wil-dashboard .stat { padding: 12px 0; border-right: none; border-bottom: 1px solid var(--border); text-align: center; } .wil-dashboard .stat:first-child { padding-top: 0; } .wil-dashboard .stat:last-child { border-bottom: none; padding-bottom: 0; } .wil-dashboard .stat-num { justify-content: center; } } /* ───────────────────────────────────────────────────────────────────── ADDED INFOGRAPHICS — radar, score-trend area, momentum gauge, balance/dominance gauges, top-species bars, comparison gauges. All reuse the existing token palette so they sit inside the same visual language as the rest of the dashboard. ───────────────────────────────────────────────────────────────────── */ /* Canvas wrappers give Chart.js a fixed box to fill (it is responsive with maintainAspectRatio:false). */ .wil-dashboard .chart-box { position: relative; width: 100%; } .wil-dashboard .chart-box.radar { height: 300px; } .wil-dashboard .chart-box.area { height: 240px; } .wil-dashboard .chart-box.gauge { height: 190px; } .wil-dashboard .chart-box.donut { height: 220px; } /* Momentum gauge — value overlaid in the doughnut hole. The value sits on a single baseline-aligned line so the whole line (not a stacked block) centres inside the ring. */ .wil-dashboard .gauge-wrap { position: relative; } .wil-dashboard .gauge-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .wil-dashboard .gauge-center .g-line { display: flex; align-items: baseline; gap: 3px; } .wil-dashboard .gauge-center .g-num { font-family: var(--font-sans); font-size: 38px; font-weight: 600; letter-spacing: -0.03em; color: var(--primary); line-height: 1; } .wil-dashboard .gauge-center .g-unit { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); } /* Balance & dominance horizontal gauges */ .wil-dashboard .gauge-list { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; } .wil-dashboard .metric-gauge .mg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .wil-dashboard .metric-gauge .mg-label { font-size: 13px; font-weight: 500; color: var(--text); } .wil-dashboard .metric-gauge .mg-val { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); } .wil-dashboard .metric-gauge .mg-track { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .wil-dashboard .metric-gauge .mg-fill { height: 100%; border-radius: 4px; width: 0; background: var(--primary); transition: width 1.1s cubic-bezier(.22,.61,.36,1); } .wil-dashboard .metric-gauge .mg-fill.amber { background: transparent; } .wil-dashboard .metric-gauge .mg-note { font-size: 11.5px; color: var(--text-2); margin-top: 5px; line-height: 1.4; } /* Top-species proportional bars */ .wil-dashboard .tsp-item { padding: 8px 0; border-bottom: 1px solid var(--border); } .wil-dashboard .tsp-item:last-child { border-bottom: none; } .wil-dashboard .tsp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .wil-dashboard .tsp-name { font-size: 13px; font-weight: 500; } .wil-dashboard .tsp-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); } .wil-dashboard .tsp-track { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; } .wil-dashboard .tsp-fill { height: 100%; border-radius: 3px; background: var(--primary); } /* Comparison "glider" gauges (section 04) — a numbered horizontal scale with a downward "your result" marker, mirroring a slider/benchmark chart. */ .wil-dashboard .glider { margin-top: 40px; position: relative; } .wil-dashboard .glider-track { position: relative; height: 14px; border-radius: 7px; } /* Left card: low→high biodiversity gradient (benchmark feel). */ .wil-dashboard .glider--benchmark .glider-track { background: transparent; } /* Right card: neutral track, the highlighted band carries the meaning. */ .wil-dashboard .glider--range .glider-track { background: rgba(123, 160, 152, .16); } .wil-dashboard .glider-band { position: absolute; top: 0; height: 100%; border-radius: 7px; background: rgba(45, 74, 62, .32); } .wil-dashboard .glider--range .glider-band { background: rgba(45, 74, 62, .28); } .wil-dashboard .glider-median { position: absolute; top: -3px; width: 2px; height: 20px; background: var(--text); transform: translateX(-50%); opacity: .55; } /* Downward marker + label sitting above the track. */ .wil-dashboard .glider-marker { position: absolute; top: -30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 3; } .wil-dashboard .glider-marker .gm-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--text); white-space: nowrap; background: var(--card); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; box-shadow: var(--shadow); } .wil-dashboard .glider-marker .gm-arrow { width: 0; height: 0; margin-top: 3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--primary); } .wil-dashboard .glider-marker.behind .gm-arrow { border-top-color: var(--amber); } .wil-dashboard .glider-axis { position: relative; height: 14px; margin-top: 8px; } .wil-dashboard .glider-axis .gx { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--text-2); } .wil-dashboard .glider-caption { text-align: center; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .wil-dashboard .glider-note { font-size: 12px; color: var(--text-2); margin-top: 14px; line-height: 1.45; } .wil-dashboard .cmp-foot { font-size: 12px; color: var(--text-2); margin-top: 10px; line-height: 1.45; } .wil-dashboard .cmp-foot strong { color: var(--primary); } /* Recently-appeared chips (section 03) */ .wil-dashboard .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .wil-dashboard .appeared-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(123, 160, 152, .1); border: 1px solid rgba(123, 160, 152, .28); font-size: 13px; font-weight: 500; color: var(--primary); } .wil-dashboard .appeared-chip .ac-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); background: var(--card); border-radius: 999px; padding: 2px 8px; } /* Share-the-story card (section 06) */ .wil-dashboard .story-card { display: grid; grid-template-columns: 300px 1fr; gap: 0; overflow: hidden; padding: 0; } .wil-dashboard .story-media { position: relative; min-height: 280px; background: var(--forest); } .wil-dashboard .story-media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } .wil-dashboard .story-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--forest); color: rgba(244,239,227,.5); font-size: 48px; } .wil-dashboard .story-media-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 40px 18px 16px; background: transparent; color: #F4EFE3; } .wil-dashboard .story-media-cap .smc-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); } .wil-dashboard .story-media-cap .smc-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .wil-dashboard .story-media-cap .smc-latin { font-size: 12px; color: rgba(244,239,227,.7); } .wil-dashboard .story-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; } .wil-dashboard .story-text { font-size: 15px; line-height: 1.6; color: var(--text); max-width: 62ch; } .wil-dashboard .story-text p { margin: 0 0 10px; } .wil-dashboard .story-text p:last-child { margin-bottom: 0; } .wil-dashboard .story-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; } .wil-dashboard .story-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--primary); color: #F4EFE3; font-weight: 600; font-size: 14px; border: 1px solid var(--primary); transition: background .2s, transform .1s; } .wil-dashboard .story-share-btn:hover { background: var(--forest); } .wil-dashboard .story-share-btn:active { transform: translateY(1px); } .wil-dashboard .story-share-btn.copied { background: var(--sage); border-color: var(--sage); } @media (max-width: 768px) { .wil-dashboard .story-card { grid-template-columns: 1fr; } .wil-dashboard .story-media { min-height: 200px; } } /* ───────────────────────────────────────────────────────────────────────── Partner live dashboard — a big-screen kiosk for entrance halls and ABRI billboards. It must read across a room and grab attention at a glance, so the design leads with a single live hero — the bird that was just heard — and keeps everything else quiet and disciplined. Locked to one viewport (100vh, no scroll) in landscape; a scrolling column on a phone. Written for the browser it actually runs on. The screen this was made for is a Samsung QM43R-T (Tizen 4, SSSP6) whose browser is roughly Chromium 56: no CSS grid, no flexbox `gap`, no `clamp()`, no `aspect-ratio`, no `inset`, no `color-mix()`, no `transform-box`, no `:has()`. There used to be a second stylesheet layer (`.pl-legacy`) restating every size in pixels for exactly that screen, and it drifted out of step with the first. So: one layer, flexbox with margins, and every size in vh/vw — which is also what makes the page scale to a 1080p signage panel, a laptop and a phone from the same numbers. At 1920×1080, 1vh = 10.8px. Reuses the WIL-dashboard tokens/cards above. */ body.partner-live { margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); --pin: var(--primary); /* Province fills. A partner house style replaces these with its own colour faded into the card (see branding.py); without one the map keeps the Wilder greens. */ --map-land: #eff2ed; --map-land-sensor: #dde7df; } /* ── Header ────────────────────────────────────────────────────────────── Three zones: maker/partner branding (left), the place as the headline (centre), live state + clock (right). A flex row with two equal 1fr sides keeps the middle truly centred whatever the sides weigh — what a grid used to do, without the grid. */ .partner-live .pl-header { display: flex; align-items: center; flex: 0 0 auto; padding: 1.2vh 1.8vw .6vh; } .partner-live .pl-brand { flex: 1 1 0; min-width: 0; display: flex; align-items: center; } .partner-live .pl-powered { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; } .partner-live .pl-powered:hover .pl-wil-logo { opacity: .8; } .partner-live .pl-powered-label { font-family: 'DM Mono', monospace; font-size: 1vh; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); } .partner-live .pl-wil-logo { height: 2.3vh; width: auto; display: block; margin-top: .3vh; } .partner-live .pl-partner-logo { height: 2.8vh; width: auto; display: block; margin-left: 1.4vw; } .partner-live .pl-partner-block { flex: 0 0 auto; padding: 0 1.2vw; text-align: center; } .partner-live .pl-partner-eyebrow { font-family: 'DM Mono', monospace; font-size: 1.1vh; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); margin-bottom: .2vh; } /* Back up to the partner a location page was opened under. */ .partner-live .pl-back { color: var(--primary-text, var(--primary)); text-decoration: none; display: inline-flex; align-items: center; gap: .2em; } .partner-live .pl-back:hover, .partner-live .pl-back:focus-visible { text-decoration: underline; } .partner-live .pl-back .wil-ic { width: 1.1em; height: 1.1em; } /* The place name, the largest type on the page: the brand colour when there is one (darkened until it reads), the house near-black otherwise. */ .partner-live .pl-partner { font-family: var(--font-sans); font-weight: 600; font-size: 3.2vh; line-height: 1.05; color: var(--primary-text, var(--text)); white-space: nowrap; } .partner-live .pl-header-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; } .partner-live .pl-header-right > * + * { margin-left: 1vw; } .partner-live .pl-header-live { /* The one thing on this row allowed to shrink; the ellipsis lives on the ago-span below, which is the part that actually overflows. */ flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; white-space: nowrap; gap: .3vw; font-family: 'DM Mono', monospace; font-size: 1.25vh; letter-spacing: .12em; color: var(--primary-text, var(--primary)); } /* A quiet or silent scope drops the green: the badge is a status, not a decoration, and colour is never the only thing that says so (the word changes too). */ .partner-live .pl-header-ago { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .partner-live .pl-header-live.is-delayed, .partner-live .pl-header-live.is-offline, .partner-live .pl-header-live.is-never { color: var(--text-2); } .partner-live .pl-header-live > * + * { margin-left: .4vw; } .partner-live .pl-header-ago { color: var(--text-2); letter-spacing: 0; text-transform: none; font-weight: 400; } .partner-live .pl-header-ago [data-live] { color: var(--text); } .partner-live .pl-clock { font-family: 'DM Mono', monospace; font-size: 2.6vh; color: var(--text); } .partner-live .pl-fs-btn { display: inline-flex; align-items: center; justify-content: center; width: 3.4vh; height: 3.4vh; padding: 0; border-radius: .9vh; border: 1px solid var(--border); background: var(--card); color: var(--text-2); cursor: pointer; transition: border-color .2s, color .2s; } .partner-live .pl-fs-btn .wil-ic { width: 1.4vh; height: 1.4vh; } .partner-live .pl-fs-btn:hover { border-color: var(--sage); color: var(--primary-text, var(--primary)); } /* Language: NL | EN, one segmented pill. Small on purpose -- it is a way out for a visitor who cannot read the page, not a control the screen is about -- and it keeps its place on a phone, where the kiosk buttons are hidden. */ .partner-live .pl-lang { /* Never squeezed: the status text beside it is variable-length (a sensor that has been quiet says more than one that has not), and the toggle was losing its second button to it. Controls hold their size; prose gives. */ flex: 0 0 auto; display: inline-flex; align-items: stretch; overflow: hidden; /* margin-block, not margin: the header spaces its children with a margin-left rule, and a shorthand here would zero that out. */ margin-block: 0; border: 1px solid var(--border); border-radius: .9vh; background: var(--card); } .partner-live .pl-lang-btn { padding: .5vh .7vw; border: 0; background: none; cursor: pointer; line-height: 1; font-family: 'DM Mono', monospace; font-size: 1.1vh; letter-spacing: .1em; color: var(--text-2); transition: background .2s, color .2s; } .partner-live .pl-lang-btn + .pl-lang-btn { border-left: 1px solid var(--border); } .partner-live .pl-lang-btn:hover { color: var(--primary-text, var(--primary)); } .partner-live .pl-lang-btn.is-on { background: var(--primary); color: var(--on-primary, #fff); } /* The sound button shares the fullscreen button's shape; it only appears when a browser refused to play a bird by itself. */ /* Sound is a state, and the two states have to be told apart across a hall: green speaker when it is playing, quiet crossed-out speaker when it is not. Semantic colours, never the partner accent -- on a page that can be branded in any colour, "on" must not depend on which colour that is. */ .partner-live .pl-sound-btn[aria-pressed="true"] { color: var(--wil-sage-text, #3f5f52); border-color: rgba(123, 160, 152, .55); background: var(--wil-tint-primary, rgba(123, 160, 152, .14)); } .partner-live .pl-sound-btn[aria-pressed="false"] { color: var(--text-2); border-color: var(--border); } /* DEMO badge — only shown in ?demo=1 mode so simulated data is never mistaken for real detections on a public screen. */ .partner-live .pl-demo-badge { font-family: 'DM Mono', monospace; font-size: 1.1vh; letter-spacing: .1em; text-transform: uppercase; padding: .4vh .6vw; border-radius: 999px; background: var(--amber); color: #fff; font-weight: 500; } /* ── Hero ──────────────────────────────────────────────────────────────── The thesis: the bird just heard, large, next to the ones before it. */ .partner-live .pl-hero { flex: 0 0 auto; display: flex; padding: .8vh 1.8vw 1.2vh; } .partner-live .pl-hero-feature { flex: 0 0 24vw; min-width: 0; display: flex; align-items: center; background: var(--deep); border: 1px solid var(--deep-border); color: var(--on-deep); border-radius: 1.1vh; padding: 1.4vh 1.2vw; } .partner-live .pl-hero-photo { width: 14vh; height: 14vh; border-radius: 1vh; flex: 0 0 auto; /* contain, not cover: a species photo is a cut-out on white, and cropping one to a square cuts the bird's tail off. */ object-fit: contain; object-position: center; background: #fff; /* uniform white ground: transparent-bg species match the white-bg ones */ box-shadow: 0 .5vh 1.8vh rgba(0,0,0,.22); } /* The photo box is a uniform white ground, so the placeholder is a muted forest rather than the cream that suited the old dark box (1.06:1 on white — the feather was invisible). */ .partner-live .pl-hero-photo.is-empty { display: flex; align-items: center; justify-content: center; color: rgba(45,74,62,.3); } .partner-live .pl-hero-photo.is-empty .wil-ic { width: 5vh; height: 5vh; } /* min-width:0 lets the text column shrink so long names wrap instead of overflowing the card and being clipped. */ .partner-live .pl-hero-body { min-width: 0; flex: 1 1 auto; margin-left: 1.1vw; } .partner-live .pl-hero-eyebrow { display: flex; align-items: center; font-family: 'DM Mono', monospace; font-size: 1.15vh; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-label); } .partner-live .pl-hero-eyebrow > * + * { margin-left: .4vw; } /* The label next to the dot is a bare text node, which the sibling margins above never reach -- the gap has to come from the dot itself, wide enough for its pulse ring. */ .partner-live .live-dot { flex: 0 0 auto; margin-right: .8em; } /* Clamp to two lines so a long name can't grow the hero card and jog the layout as birds cycle through. */ .partner-live .pl-hero-name { font-family: var(--font-sans); font-weight: 600; font-size: 3vh; line-height: 1.06; color: var(--on-deep-strong); margin-top: .5vh; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .partner-live .pl-hero-latin { color: var(--on-deep-mute); font-size: 1.4vh; margin-top: .2vh; } .partner-live .pl-hero-meta { font-family: 'DM Mono', monospace; font-size: 1.3vh; color: var(--on-deep-soft); margin-top: 1vh; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Recent strip — the birds heard just before, as a photo row. */ .partner-live .pl-strip-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin-left: 1.2vw; } .partner-live .pl-strip-title { font-family: 'DM Mono', monospace; font-size: 1.15vh; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: .7vh; } /* The strip scrolls on to older birds (static/js/live_gallery.js keeps the place of whoever is scrolling while new ones arrive). No scrollbar on a screen nobody touches; a thin one where there is a mouse to drag it. */ .partner-live .pl-strip { display: flex; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; overflow-anchor: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .partner-live .pl-strip::-webkit-scrollbar { display: none; } @media (hover: hover) and (pointer: fine) { .partner-live .pl-strip { scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding-bottom: .6vh; } .partner-live .pl-strip::-webkit-scrollbar { display: block; height: 6px; } .partner-live .pl-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } } /* A fixed 1/7.5 width (not flex:1) so the cards never resize when the list has fewer than eight items — otherwise fewer chips would each grow wider and the photos would balloon, making the whole gallery jump. The half card at the end is deliberate: a conveyor-belt hint that the strip keeps shifting, like the home-page gallery. */ .partner-live .pl-chip { flex: 0 0 calc((100% - 7 * .7vw) / 7.5); min-width: 0; display: flex; flex-direction: column; margin-right: .7vw; } .partner-live .pl-chip-photo { width: 100%; height: 12.6vh; border-radius: 1vh; display: block; object-fit: contain; object-position: center; background: #fff; border: 1px solid var(--border); } .partner-live .pl-chip-photo.is-empty { display: flex; align-items: center; justify-content: center; color: var(--text-2); } .partner-live .pl-chip-name { font-weight: 600; font-size: 1.35vh; color: var(--text); margin-top: .5vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-chip-loc { font-size: 1.15vh; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-chip-time { font-family: 'DM Mono', monospace; font-size: 1.1vh; color: var(--text-2); margin-top: .1vh; } /* Arrival animation — a new bird slides in at the front, like the home page. */ @keyframes pl-bump-in { 0% { opacity: 0; transform: translateX(-24px) scale(0.96); } 60% { opacity: 1; transform: translateX(3px) scale(1.02); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .partner-live .pl-bump { animation: pl-bump-in 0.5s ease both; } @media (prefers-reduced-motion: reduce) { .partner-live .pl-bump { animation: none; } } /* ── Main ──────────────────────────────────────────────────────────────── The map takes the left column whole; the right column carries four fixed numbers and the two rotating panels under them. */ .partner-live .pl-main { flex: 1 1 auto; min-height: 0; padding: 0 1.8vw 1.2vh; display: flex; } .partner-live .pl-card { min-height: 0; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 1.1vh; box-shadow: var(--shadow); display: flex; flex-direction: column; /* The page is one viewport with no scroll, so a card that cannot fit its content must clip it rather than paint over the card below. */ overflow: hidden; } .partner-live .card-eyebrow { flex: 0 0 auto; font-size: 1.05vh; letter-spacing: .08em; } .partner-live .pl-empty { font-size: 1.3vh; color: var(--text-2); } .partner-live .pl-map-card { flex: 0 0 36%; padding: 1.3vh 1vw; } .partner-live .pl-map { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* The map fills whatever the card has left. Absolutely positioned inside a relative box, because an inline SVG with height:100% against a flex item of indefinite height resolves to nothing on the signage browser — which is exactly why the map card was empty on the screen in the hall. The box has a definite height, so the SVG has one too. */ .partner-live .pl-map-inner { position: relative; flex: 1 1 auto; min-height: 0; margin-top: .8vh; } .partner-live .pl-map-inner .pl-nlmap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; } .partner-live .pl-map-card .card-eyebrow b { color: var(--primary-text, var(--primary)); font-weight: 700; } /* Bats: a small panel under the map for the locations that listen for them, showing one species at a time (see the rotation in the page script). */ .partner-live .pl-bats { flex: 0 0 auto; margin-top: 1vh; padding-top: 1vh; border-top: 1px solid var(--border); } .partner-live .pl-bats-title { display: flex; align-items: center; font-family: 'DM Mono', monospace; font-size: 1vh; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .partner-live .pl-bats-title .wil-ic { width: 1.2vh; height: 1.2vh; margin-right: .4vw; } .partner-live .pl-bats-list { margin-top: .7vh; } .partner-live .pl-bat { display: flex; align-items: center; min-width: 0; } .partner-live .pl-bat[hidden] { display: none; } .partner-live .pl-bat-photo { width: 4.2vh; height: 4.2vh; border-radius: .9vh; object-fit: contain; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; margin-right: .6vw; } .partner-live .pl-bat-body { min-width: 0; display: flex; flex-direction: column; } .partner-live .pl-bat-name { font-weight: 600; font-size: 1.45vh; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-bat-meta, .partner-live .pl-bats-meta { font-size: 1.1vh; color: var(--text-2); } .partner-live .pl-bats-meta { margin-top: .6vh; } .partner-live .pl-map-caption { flex: 0 0 auto; margin-top: 1vh; display: flex; align-items: center; font-family: 'DM Mono', monospace; font-size: 1.05vh; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .partner-live .pl-map-caption .wil-ic { width: 1.3vh; height: 1.3vh; margin-right: .4vw; color: var(--primary-text, var(--primary)); } /* The partner's other ground, as the way to it: a link that reads as one. */ .partner-live .pl-map-back { display: inline-flex; align-items: center; margin-left: .4em; color: var(--primary-text, var(--primary)); font-weight: 500; text-decoration: underline; text-underline-offset: .25em; } .partner-live .pl-map-back:hover, .partner-live .pl-map-back:focus-visible { text-decoration-thickness: 2px; } .partner-live .pl-map-back .wil-ic { margin: 0 0 0 .2em; } /* ── Right column ────────────────────────────────────────────────────── */ .partner-live .pl-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin-left: 1vw; } /* In a nutshell — four numbers in a strip, not a panel. As a panel it took a third of the page height to say four things. */ .partner-live .pl-vogelvlucht { flex: 0 0 auto; min-width: 0; padding: 1.3vh 1.4vw 1.5vh; background: var(--deep); border: 1px solid var(--deep-border); color: var(--on-deep); border-radius: 1.1vh; display: flex; flex-direction: column; overflow: hidden; } .partner-live .pl-vogelvlucht .card-eyebrow { color: var(--deep-label); } .partner-live .pl-vv-rows { display: flex; margin-top: 1vh; } .partner-live .pl-vv-row { flex: 1 1 0; min-width: 0; } .partner-live .pl-vv-row + .pl-vv-row { margin-left: 1vw; } .partner-live .pl-vv-num { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 3.4vh; line-height: 1; color: var(--on-deep-strong); } .partner-live .pl-vv-label { display: block; font-size: 1.3vh; color: var(--on-deep-soft); margin-top: .5vh; } /* ── The two rotating panels ───────────────────────────────────────────── Species on the left, patterns on the right. They alternate, so only one thing on the page changes at a time (the half-period tick in the page script), and each carries a progress bar saying how long the current slide still has. */ .partner-live .pl-rotators { flex: 1 1 auto; min-height: 0; display: flex; margin-top: 1.2vh; } .partner-live .pl-rot { position: relative; flex: 1 1 0; padding: 1.3vh 1vw 1.6vh; } .partner-live .pl-rot-b { margin-left: 1vw; } .partner-live .pl-rot-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } .partner-live .pl-rot-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-dots { display: flex; flex: 0 0 auto; margin-left: .6vw; align-items: center; } /* The dot is the visible mark; the button around it carries the tap area, so a finger on a screen in a hall has something to hit (6.7 / section 8). */ .partner-live .pl-dot { width: 2.2vh; height: 2.2vh; min-width: 22px; min-height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 50%; } .partner-live .pl-dot::before { content: ''; width: .7vh; height: .7vh; min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--border); display: block; } .partner-live .pl-dot.is-on::before { background: var(--primary); } .partner-live .pl-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .partner-live .pl-slide { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: .6vh; overflow: hidden; animation: pl-fade .45s ease both; } .partner-live .pl-slide[hidden] { display: none; } @keyframes pl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* The progress bar. A new bar element is created on every slide change (see the script), which is what restarts the animation — Chromium 56 will not replay a running one just because a class changed. */ /* A countdown nobody asked for should not be the brightest thing on the card: thin, neutral grey, no track behind it (6.7). The duration is set from the script, so it follows the configured rotation instead of a number baked in here. */ .partner-live .pl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; } .partner-live .pl-progress-bar { height: 100%; width: 0; background: var(--text-2); opacity: .25; animation: pl-progress 12s linear both; } @keyframes pl-progress { from { width: 0; } to { width: 100%; } } /* Species rows (top species by day / by night) */ .partner-live .pl-splist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .partner-live .pl-sprow { display: flex; align-items: center; padding: .55vh 0; border-bottom: 1px solid var(--hairline); } /* 2.9 -- the photograph is what carries a species, so it grows with the room the row has instead of sitting at one pixel size in a card of any height. clamp() keeps both ends honest: never smaller than a thumbnail you can recognise across a desk, never so large it pushes the name and the bar out of the row. The floor is what the phone breakpoint used to hard-code, so a small screen loses nothing. */ .partner-live .pl-sp-photo { /* Fallback first: an older Chromium (Samsung signage and TV browsers) drops a clamp()/min() declaration whole and would draw the image at its natural size, hundreds of pixels across. */ width: 7vh; height: 7vh; min-width: 48px; min-height: 48px; max-width: 104px; max-height: 104px; width: clamp(48px, min(7vh, 12vw), 104px); height: clamp(48px, min(7vh, 12vw), 104px); border-radius: .8vh; object-fit: contain; aspect-ratio: 1; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; margin-right: .6vw; } .partner-live .pl-sp-body { flex: 1 1 auto; min-width: 0; } .partner-live .pl-sp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45vh; } .partner-live .pl-sp-name { font-size: 1.45vh; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-sp-count { font-family: 'DM Mono', monospace; font-size: 1.15vh; color: var(--text-2); flex: 0 0 auto; margin-left: .5vw; } .partner-live .pl-sp-track { height: .6vh; border-radius: .3vh; background: var(--border); overflow: hidden; } .partner-live .pl-sp-fill { display: block; height: 100%; border-radius: .3vh; background: var(--primary); } .partner-live .pl-dn-note { flex: 0 0 auto; font-size: 1.15vh; color: var(--text-2); margin-top: .6vh; } /* Indicator species — heard, and expected but still silent */ .partner-live .pl-ind-intro { flex: 0 0 auto; font-size: 1.3vh; color: var(--text-2); line-height: 1.45; } .partner-live .pl-indlist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; margin-top: .4vh; overflow: hidden; } .partner-live .pl-indrow { display: flex; align-items: center; padding: .5vh 0; border-bottom: 1px solid var(--hairline); } /* 2.9 -- two species at opposite ends of an empty card read as a broken table, not as two birds. Under four rows they sit at the top with a little more room each, the rule the twelve-month list already used. */ .partner-live .pl-indlist.is-short, .partner-live .pl-splist.is-short { justify-content: flex-start; } .partner-live .pl-indlist.is-short .pl-indrow + .pl-indrow, .partner-live .pl-splist.is-short .pl-sprow + .pl-sprow { margin-top: 1.4vh; } .partner-live .pl-ind-photo { width: 6vh; height: 6vh; min-width: 44px; min-height: 44px; max-width: 88px; max-height: 88px; /* see .pl-sp-photo */ width: clamp(44px, min(6vh, 11vw), 88px); height: clamp(44px, min(6vh, 11vw), 88px); border-radius: .8vh; object-fit: contain; aspect-ratio: 1; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; margin-right: .6vw; } /* A species that belongs here but has not been heard yet: its own picture, drawn back and dashed. The visitor is being asked to listen out for this bird, so it has to be recognisable; the treatment, not the absence of a photo, is what keeps the two lists apart. */ .partner-live .pl-ind-photo.is-awaited { border-style: dashed; border-color: var(--wil-sand); opacity: 0.55; filter: saturate(0.35); } .partner-live .pl-ind-body { flex: 1 1 auto; min-width: 0; } .partner-live .pl-ind-name { font-size: 1.45vh; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-ind-habitat { font-size: 1.2vh; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-live .pl-pill { flex: 0 0 auto; display: inline-flex; align-items: center; margin-left: .6vw; font-family: 'DM Mono', monospace; font-size: 1vh; letter-spacing: .06em; text-transform: uppercase; padding: .35vh .5vw; border-radius: 999px; white-space: nowrap; } .partner-live .pl-pill .wil-ic { width: 1.1vh; height: 1.1vh; margin-right: .3vw; } /* Semantic, never partner-coloured: present and expected mean the same thing on every page of the product. */ .partner-live .pl-pill.is-heard { color: var(--wil-sage-text); background: var(--wil-tint-primary); } .partner-live .pl-pill.is-expected { color: var(--amber-text); background: rgba(200,146,74,.14); } /* ── Charts ────────────────────────────────────────────────────────────── Both are inline SVG the server hands over finished. They are stretched to the card (preserveAspectRatio="none"), so no type lives inside them: the axes and the labels are HTML, positioned in percentages the view computed. Stretching an SVG stretches its letters with it. */ .partner-live .pl-chart { position: relative; flex: 1 1 auto; min-height: 0; margin-top: .6vh; } .partner-live .pl-trend-svg, .partner-live .pl-hours-svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; } .partner-live .pl-trend-grid { stroke: var(--hairline); stroke-width: 1; } .partner-live .pl-trend-line { fill: none; vector-effect: non-scaling-stroke; } .partner-live .pl-trend-line.is-detections { stroke: var(--primary-text, var(--primary)); stroke-width: 2.5; } .partner-live .pl-trend-line.is-species { stroke: var(--roest); stroke-width: 2; } /* The running month: it counts through yesterday, so joining it solidly to a completed month would claim a drop that is only the month being young. */ .partner-live .pl-trend-line.is-running { stroke-dasharray: 4 4; opacity: .6; } .partner-live .pl-trend-dot.is-det { fill: var(--primary-text, var(--primary)); } .partner-live .pl-trend-dot.is-sp { fill: var(--roest); } /* The two axes sit in the margins the plot box leaves free (40 and 36 of 600 viewBox units — see TREND_L / TREND_R in the view). */ .partner-live .pl-axis { position: absolute; top: 0; bottom: 0; } .partner-live .pl-axis span { position: absolute; transform: translateY(-50%); white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 1vh; } .partner-live .pl-axis.is-left { left: 0; width: 6.5%; } .partner-live .pl-axis.is-left span { right: 0; padding-right: .3vw; color: var(--primary-text, var(--primary)); } .partner-live .pl-axis.is-right { right: 0; width: 6%; } .partner-live .pl-axis.is-right span { left: 0; padding-left: .3vw; color: var(--roest-text); } .partner-live .pl-trend-labels { position: absolute; left: 6.5%; right: 6%; bottom: 0; height: 1.4vh; } .partner-live .pl-trend-labels span, .partner-live .pl-hours-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 1vh; color: var(--text-2); } .partner-live .pl-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; margin-top: .8vh; font-size: 1.15vh; color: var(--text-2); } .partner-live .pl-legend-item { display: inline-flex; align-items: center; } .partner-live .pl-legend-item + .pl-legend-item { margin-left: 1.2vw; } .partner-live .pl-legend-line { width: 1.1vw; height: 2px; display: block; margin-right: .35vw; } .partner-live .pl-legend-line.is-detections { background: var(--primary-text, var(--primary)); } .partner-live .pl-legend-line.is-species { background: var(--roest); } .partner-live .pl-legend-line.is-running { height: 0; border-top: 2px dashed var(--text-2); } .partner-live .pl-sofar { flex: 0 0 auto; display: flex; align-items: baseline; flex-wrap: wrap; font-size: 1.2vh; color: var(--text-2); } .partner-live .pl-sofar-label { font-family: 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; font-size: 1vh; color: var(--amber-text); margin-right: .6vw; } .partner-live .pl-sofar-num { font-family: var(--font-sans); font-weight: 600; font-size: 2vh; color: var(--text); } .partner-live .pl-sofar-unit { margin-left: .4vw; } /* The loudest moment of the day */ .partner-live .pl-peak-head { flex: 0 0 auto; font-weight: 600; font-size: 2.2vh; line-height: 1.15; color: var(--text); } .partner-live .pl-peak-sub { flex: 0 0 auto; font-size: 1.3vh; color: var(--text-2); margin-top: .3vh; } .partner-live .pl-hours { margin-top: 1vh; } .partner-live .pl-hours-axis { stroke: var(--border); stroke-width: 1; } /* Three strengths of the one brand colour: the loudest hour, the daylight hours, and the night. fill-opacity rather than a mixed colour — there is no color-mix() on the screen this is for. */ .partner-live .pl-hour-bar { fill: var(--primary); } .partner-live .pl-hour-bar.is-peak { fill-opacity: 1; } .partner-live .pl-hour-bar.is-day { fill-opacity: .5; } .partner-live .pl-hour-bar.is-night { fill-opacity: .28; } .partner-live .pl-sun-line { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .partner-live .pl-sun-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; align-items: center; white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 1vh; color: var(--amber-text); } .partner-live .pl-sun-mark .wil-ic { width: 1.2vh; height: 1.2vh; margin-right: .2vw; } .partner-live .pl-hours-labels { position: absolute; left: 0; right: 0; bottom: 0; height: 1.4vh; } /* Twelve-month rankings (species, and locations on a partner page): compact rows that fill the card, in CSS so they need no chart library. */ .partner-live .pl-hist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; margin-top: .2vh; overflow: hidden; } .partner-live .pl-hist-photo { width: 5.2vh; height: 5.2vh; min-width: 40px; min-height: 40px; max-width: 80px; max-height: 80px; /* see .pl-sp-photo */ width: clamp(40px, min(5.2vh, 10vw), 80px); height: clamp(40px, min(5.2vh, 10vw), 80px); border-radius: .6vh; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; margin-right: .5vw; } .partner-live .pl-hist-row { display: flex; align-items: center; min-width: 0; } .partner-live .pl-hist-name { flex: 0 0 34%; min-width: 0; margin-right: .5vw; font-size: 1.35vh; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Location names are longer than species names and worth reading whole. */ .partner-live .pl-hist.is-locations .pl-hist-name { flex: 0 0 38%; } /* A row that leads to that location's page. Underlined only under the cursor and on focus: on a screen in a hall nobody clicks, and a column of underlines there is noise the ranking does not need. */ .partner-live a.pl-hist-name { text-decoration: none; color: inherit; } .partner-live a.pl-hist-name:hover, .partner-live a.pl-hist-name:focus-visible { text-decoration: underline; color: var(--primary-text, inherit); } /* A short list is not spread over the whole card. A partner with two locations got one row at the top and one at the bottom with a hole between them, which reads as a broken table rather than as two places. Under five rows they sit at the top, each with a little more room. */ .partner-live .pl-hist.is-short { justify-content: flex-start; flex: 0 0 auto; } .partner-live .pl-hist.is-short .pl-hist-row + .pl-hist-row { margin-top: 1.8vh; } .partner-live .pl-hist.is-short .pl-hist-name { font-size: 1.6vh; } .partner-live .pl-hist.is-short .pl-hist-track { height: 1.1vh; } .partner-live .pl-hist.is-short .pl-hist-value { font-size: 1.35vh; } .partner-live .pl-hist-track { flex: 1 1 auto; min-width: 0; height: .8vh; border-radius: 999px; background: var(--wil-tint-primary); overflow: hidden; display: block; } /* The unit rides with the number, quieter than it: the figure is the news, what it counts is the fine print that keeps it from being misread. */ .partner-live .pl-hist-unit { display: block; font-size: .85em; color: var(--text-2); letter-spacing: .02em; } .partner-live .pl-hist-note { flex: 0 0 auto; margin-top: .8vh; font-size: 1.15vh; color: var(--text-2); } .partner-live .pl-hist-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); } .partner-live .pl-hist-value { flex: 0 0 auto; margin-left: .5vw; font-family: 'DM Mono', monospace; font-size: 1.15vh; color: var(--text-2); min-width: 3.2vw; text-align: right; } /* ── Province map ──────────────────────────────────────────────────────── Inline SVG (design handoff "Nederland Sensorkaart"): quiet land tones, drop pins in the pin colour, a tooltip per pin. The land takes the partner's colour where there is one (--map-land / --map-land-sensor). */ .partner-live .pl-prov { fill: var(--map-land); stroke: #ffffff; stroke-width: 1.4; transition: fill .18s ease; } .partner-live .pl-prov.has-sensor { fill: var(--map-land-sensor); } .partner-live .pl-prov:hover { fill: var(--map-land-sensor); } .partner-live .pl-nlmap-outline { fill: none; stroke: #c3cdc4; stroke-width: 1; stroke-linejoin: round; pointer-events: none; } .partner-live .pl-npin { cursor: pointer; outline: none; } .partner-live .pl-npin-shape { transition: transform .16s ease; } .partner-live .pl-npin:hover .pl-npin-shape, .partner-live .pl-npin.on .pl-npin-shape, .partner-live .pl-npin:focus .pl-npin-shape { transform: scale(1.18); } .partner-live .pl-npin.is-own:hover .pl-npin-shape, .partner-live .pl-npin.is-own.on .pl-npin-shape { transform: scale(1.32); } .partner-live .pl-npin.is-hot .pl-npin-shape, .partner-live .pl-npin.is-own.is-hot .pl-npin-shape { transform: scale(1.5); } .partner-live .pl-npin path { fill: var(--pin); } /* The dot in the pin head: the bright accent when the house style has one that reads on the panels, white otherwise — the same rule the eyebrows follow, so the pin belongs to the same set of marks. */ .partner-live .pl-npin circle { fill: #ffffff; } .partner-live .pl-npin .pl-npin-shape circle { fill: var(--pin-dot, #ffffff); } .partner-live .pl-npin:focus path { stroke: var(--roest); stroke-width: 2; } .partner-live .pl-npin-shadow { fill: #1f2d27; opacity: .14; } /* The rest of the network: quiet dots, so the pins of this page's own locations are unmistakably the subject. They carry no name and no hover — they are context, not something to click through. */ .partner-live .pl-npin.is-other { cursor: default; pointer-events: none; } /* Quieter than they were: the page is about the pins, and the dots are the company those pins are measured against. */ .partner-live .pl-npin.is-other .pl-npin-dot { fill: var(--pin); opacity: .26; r: 3; } .partner-live .pl-npin.is-own .pl-npin-shape { filter: drop-shadow(0 1px 2px rgba(31,45,39,.35)); transform: scale(1.15); } /* A halo, so a pin separates from a province fill of nearly its own value instead of relying on the drop shadow alone. */ .partner-live .pl-npin-halo { fill: var(--wil-bg, #FAFAF7); opacity: .62; } .partner-live .pl-npin.is-own:hover .pl-npin-halo, .partner-live .pl-npin.is-own:focus-visible .pl-npin-halo { opacity: .9; } /* A pin that leads somewhere says so. The cursor is on .pl-npin already; this is the part a keyboard and a careful eye need. */ .partner-live .pl-npin.is-link:hover .pl-npin-shape { transform: scale(1.32); } .partner-live .pl-npin.is-link:focus-visible .pl-npin-shape { transform: scale(1.32); } .partner-live .pl-npin.is-link:focus-visible path { stroke: var(--roest); stroke-width: 2; } /* The partner's other ground, on a page opened under a partner (/partners//live//): a pin, so it reads as a place and not as network noise, at two thirds the weight of the one the page is about. The order on the map is the order of the tiers — quiet dot, kin pin, own pin — and nothing here may out-shout the own pin. Hovering brings a kin pin up to full strength; it is a link, and a link that stays grey under the cursor does not look like one. */ .partner-live .pl-npin.is-kin .pl-npin-shape { transform: scale(.78); opacity: .68; } .partner-live .pl-npin.is-kin path { fill: var(--pin); } .partner-live .pl-npin.is-kin:hover .pl-npin-shape, .partner-live .pl-npin.is-kin.on .pl-npin-shape, .partner-live .pl-npin.is-kin:focus-visible .pl-npin-shape { transform: scale(.95); opacity: 1; } /* The ping animates the radius, not a transform: scaling an SVG element from its own centre needs transform-box, which the signage browser does not have, and without it the ring flew off the map. */ .partner-live .pl-npin-ping { fill: none; stroke: var(--pin); stroke-width: 2; opacity: 0; } .partner-live .pl-npin.is-hot .pl-npin-ping { animation: pl-ping-r 1.6s ease-out infinite; } @keyframes pl-ping-r { 0% { r: 7; opacity: .9; } 100% { r: 34; opacity: 0; } } /* ── Region inset ──────────────────────────────────────────────────────── The same map zoomed to one region (frontend/_region_inset.html): the province rules above do the land and the pins, these add what only a zoomed map needs — water behind the municipalities, names on the map, a frame and a scale. */ .partner-live .pl-rwater { fill: #e6ebe6; } .partner-live .pl-rframe { fill: none; stroke: var(--border); stroke-width: 1; pointer-events: none; } /* Names get a paper halo (paint-order, then a fat stroke under the fill), so a label stays readable where it crosses a border or a pin's shadow. */ .partner-live .pl-rlabel { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .04em; fill: var(--text); paint-order: stroke; stroke: #fbfbf8; stroke-width: 3.2; stroke-linejoin: round; pointer-events: none; } .partner-live .pl-rgem { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .12em; fill: var(--text-2); opacity: .7; paint-order: stroke; stroke: #fbfbf8; stroke-width: 3; stroke-linejoin: round; pointer-events: none; } .partner-live .pl-rscale line { stroke: var(--text-2); stroke-width: 1; opacity: .55; } .partner-live .pl-rscale text { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .1em; fill: var(--text-2); opacity: .8; } /* ── Region callout ────────────────────────────────────────────────────── The region on the national map twice over (frontend/_region_callout.html): a rectangle where it is, two lines out of it, and the same ground drawn large in a panel on the sea. The panel's own insides are the rules above; these are only the marks that tie it to the country. */ .partner-live .pl-callout-cone { fill: var(--pin); opacity: .055; pointer-events: none; } .partner-live .pl-callout-line { stroke: var(--pin); stroke-width: 1.3; opacity: .6; pointer-events: none; } .partner-live .pl-callout-rect { fill: var(--pin); fill-opacity: .1; stroke: var(--pin); stroke-width: 1.6; pointer-events: none; } /* The sheet: a shadow, then paper just past the panel's edge, so the map under it reads as under it and not as a hole in the country. */ .partner-live .pl-callout-shadow { fill: #1f2d27; opacity: .15; pointer-events: none; } .partner-live .pl-callout-mat { fill: #fbfbf8; pointer-events: none; } .partner-live .pl-callout-panel .pl-rframe { stroke: var(--text-2); opacity: .4; } .partner-live .pl-nlmap-tip { pointer-events: none; } .partner-live .pl-nlmap-tip.is-off { display: none; } .partner-live .pl-nlmap-tip rect { fill: #ffffff; stroke: var(--border); stroke-width: 1; } .partner-live .pl-nlmap-tip text { font-family: var(--font-sans); font-size: 12.5px; fill: var(--text); } @media (prefers-reduced-motion: reduce) { .partner-live .pl-npin.is-hot .pl-npin-ping { animation: none; opacity: .6; } .partner-live .pl-slide { animation: none; } .partner-live .pl-progress-bar { animation: none; } .partner-live .live-dot { animation: none; } } /* ── Footer ──────────────────────────────────────────────────────────── */ .partner-live .pl-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .9vh 1.8vw 1vh; border-top: 1px solid var(--border); background: var(--card); } .partner-live .pl-footer-text { margin: 0; font-size: 1.15vh; line-height: 1.5; color: var(--text-2); max-width: 60vw; } .partner-live .pl-footer-brand { display: inline-flex; align-items: center; margin-left: 1.2vw; text-decoration: none; color: var(--text-2); font-family: 'DM Mono', monospace; font-size: 1vh; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .partner-live .pl-footer-brand > * + * { margin-left: .4vw; } .partner-live .pl-footer-brand img { height: 1.7vh; width: auto; } .partner-live .pl-footer-brand:hover { color: var(--primary-text, var(--primary)); } /* ── Portrait and narrow screens (ABRI portrait, phones) ───────────────── One scrolling column: the landscape kiosk layout is too wide for a phone, and vh-sized type in a scrolling column needs a floor under it, which the cards' own min-heights provide. */ @media (max-aspect-ratio: 1/1), (max-width: 900px) { body.partner-live { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; } .partner-live .pl-hero { flex-direction: column; } .partner-live .pl-hero-feature { flex: 0 0 auto; } .partner-live .pl-strip-wrap { margin: 1.2vh 0 0; } .partner-live .pl-main { flex-direction: column; } .partner-live .pl-map-card { flex: 0 0 auto; min-height: 52vh; } .partner-live .pl-right { margin: 1.2vh 0 0; } .partner-live .pl-rotators { flex-direction: column; } .partner-live .pl-rot { min-height: 40vh; } .partner-live .pl-rot-b { margin: 1.2vh 0 0; } /* Declutter the cramped mobile header — the LIVE state is implied by the hero, and fullscreen is a kiosk feature. */ .partner-live .pl-clock, .partner-live .pl-header-live, .partner-live .pl-fs-btn { display: none; } .partner-live .pl-partner { white-space: normal; } /* The two logos stack instead of sitting side by side, and "Measured by" goes: side by side they ran into the place name on a phone. The name takes what is left of the row rather than claiming its full width. */ .partner-live .pl-brand { flex: 0 0 auto; flex-direction: column; align-items: flex-start; } .partner-live .pl-powered-label { display: none; } .partner-live .pl-wil-logo { height: 16px; margin-top: 0; } .partner-live .pl-partner-logo { height: 22px; max-width: 30vw; object-fit: contain; object-position: left; margin: 2px 0 0; } .partner-live .pl-partner-block { flex: 1 1 auto; min-width: 0; padding: 0 12px; } .partner-live .pl-header-right { flex: 0 0 auto; } /* Fewer, larger recent-heard cards; the last still clipped in half. */ .partner-live .pl-chip { flex: 0 0 calc((100% - 3 * .7vw) / 3.5); } .partner-live .pl-footer { flex-direction: column; align-items: flex-start; } .partner-live .pl-footer-text { max-width: none; } .partner-live .pl-footer-brand { margin: 1.2vh 0 0; } /* Type floors. Every size on this page is in vh, which is what makes it scale to a signage panel -- but a scrolling phone column is 700-900 CSS px tall, and 1.05vh of that is 8px. The kiosk minimums were set for a screen read from across a room, not a phone in the hand. */ .partner-live .pl-powered-label, .partner-live .pl-hero-eyebrow, .partner-live .pl-strip-title, .partner-live .pl-chip-time, .partner-live .pl-map-caption, .partner-live .pl-bats-title, .partner-live .pl-partner-eyebrow, .partner-live .pl-sofar-label, .partner-live .pl-header-live, .partner-live .pl-footer-brand, .partner-live .card-eyebrow, .partner-live .pl-demo-badge, .partner-live .pl-pill, .partner-live .pl-axis span, .partner-live .pl-trend-labels span, .partner-live .pl-hours-labels span, .partner-live .pl-sun-mark, .partner-live .pl-lang-btn { font-size: 11px; } /* The one header control that stays on a phone, so it gets a thumb's worth of height rather than a signage panel's fraction of one. */ .partner-live .pl-lang-btn { padding: 8px 10px; } .partner-live .pl-lang { border-radius: 8px; } .partner-live .pl-chip-loc, .partner-live .pl-hero-meta, .partner-live .pl-sofar, .partner-live .pl-dn-note, .partner-live .pl-sp-count, .partner-live .pl-hist-value, .partner-live .pl-ind-habitat, .partner-live .pl-legend { font-size: 12px; } .partner-live .pl-chip-name, .partner-live .pl-hero-latin, .partner-live .pl-vv-label, .partner-live .pl-sp-name, .partner-live .pl-ind-name, .partner-live .pl-hist-name, .partner-live .pl-bat-name, .partner-live .pl-ind-intro, .partner-live .pl-peak-sub, .partner-live .pl-empty { font-size: 13px; } .partner-live .pl-footer-text { font-size: 12.5px; } .partner-live .pl-vv-num { font-size: 26px; } .partner-live .pl-peak-head { font-size: 19px; } .partner-live .pl-sofar-num { font-size: 17px; } /* The floor is in the clamp() on each photo now, so nothing is pinned here: on a large phone the rows may still use the room they have. */ .partner-live .pl-bat-photo { width: 40px; height: 40px; } /* Four species, not five. A phone card has room for four rows at a size where the bird is recognisable; squeezing a fifth in clipped it at the bottom edge, which is the one thing worse than showing one fewer. */ .partner-live .pl-splist .pl-sprow:nth-child(n+5) { display: none; } /* The eyebrow may wrap, but it must not GROW: in a column card flex-grow makes it swallow the height the map needs, which is what left the map card three-quarters empty on a phone. */ .partner-live .pl-card .card-eyebrow { flex: 0 0 auto; min-width: 0; } /* A phone has room for the whole "where · when" line. */ .partner-live .pl-hero-meta { -webkit-line-clamp: 3; } /* Touch targets: the two links that are really links. */ .partner-live .pl-powered, .partner-live .pl-footer-brand { min-height: 44px; display: inline-flex; align-items: center; } .partner-live .pl-powered { flex-direction: column; align-items: flex-start; justify-content: center; } } /* Export format menu (wil-export.js): opens under a download icon, anywhere on the page, so it is not scoped to .wil-dashboard. */ .viz-dl-menu { position: fixed; z-index: 1000; min-width: 196px; padding: 6px; background: var(--wil-card, #fff); border: 1px solid var(--wil-border, #E8E4DB); border-radius: 10px; box-shadow: 0 4px 18px rgba(28, 35, 30, .10); display: flex; flex-direction: column; gap: 2px; font-family: var(--wil-font-sans, 'DM Sans', system-ui, sans-serif); } .viz-dl-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; color: var(--wil-text, #1A1F1B); font: inherit; line-height: 1.3; } .viz-dl-opt b { font-family: var(--wil-font-mono, 'DM Mono', monospace); font-weight: 500; font-size: 12px; letter-spacing: .04em; } .viz-dl-opt span { font-size: 11.5px; color: var(--wil-text-2, #5A645C); } .viz-dl-opt:hover, .viz-dl-opt:focus-visible { background: var(--wil-tint-primary, rgba(123,160,152,.14)); outline: none; } /* A download that produced nothing has to say so where the person is looking: they pressed a button and are waiting for a file. Same anchoring as the format menu; it clears itself after a few seconds. */ .viz-dl-error { position: fixed; z-index: 1001; max-width: 300px; padding: 9px 12px; background: var(--wil-card, #fff); border: 1px solid var(--amber-text, #8a5a16); border-left-width: 3px; border-radius: 10px; box-shadow: 0 4px 18px rgba(28, 35, 30, .12); font-family: var(--wil-font-sans, 'DM Sans', system-ui, sans-serif); font-size: 13px; line-height: 1.4; color: var(--wil-text, #1A1F1B); } /* ───────────────────────────────────────────────────────────────────────── Wild Score dashboard v2 — additions. */ .wil-dashboard .live-bar { flex-wrap: wrap; gap: 8px 16px; } .wil-dashboard .live-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wil-dashboard .live-sep { width: 1px; height: 14px; background: var(--border); display: inline-block; } .wil-dashboard .live-right { display: flex; align-items: center; gap: 12px; } .wil-dashboard .section-sub { color: var(--text-2); max-width: 720px; font-size: 14px; margin-top: 6px; } .wil-dashboard .wild-expand { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-2); text-transform: none; letter-spacing: 0; } .wil-dashboard .trend-pill.down { background: rgba(200,146,74,.15); color: var(--amber-text); } /* A change too small to mean anything keeps the neutral grey: the score looks back twelve months, so a point either way is drift. */ .wil-dashboard .trend-pill.flat { background: var(--surface-2, rgba(0,0,0,.04)); color: var(--text-2); } .wil-dashboard .stat-unit { font-size: 13px; color: var(--text-2); font-family: 'DM Sans', sans-serif; margin-left: 4px; } .wil-dashboard .score-context { font-size: 12px; color: var(--text-2); margin-top: 8px; } /* Info toggles + panels */ .wil-dashboard .info-btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 10px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; } .wil-dashboard .info-btn:hover, .wil-dashboard .info-btn.open { background: var(--primary); color: #fff; border-color: var(--primary); } .wil-dashboard .info-panel { margin: 12px 0 4px; padding: 14px 16px; border-radius: 10px; background: rgba(123,160,152,.08); border: 1px solid rgba(123,160,152,.25); font-size: 13px; line-height: 1.55; color: var(--text); } .wil-dashboard .info-panel p { margin: 0 0 8px; } .wil-dashboard .info-panel ul { margin: 0 0 8px; padding-left: 18px; } .wil-dashboard .info-panel li { margin-bottom: 4px; } .wil-dashboard .info-title { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 6px 0 4px; } /* Tier progress under the score label */ .wil-dashboard .tier-progress { margin-top: 12px; max-width: 420px; } .wil-dashboard .tier-track { position: relative; height: 8px; border-radius: 4px; background: var(--border); overflow: visible; } .wil-dashboard .tier-fill { height: 100%; border-radius: 4px; background: var(--primary); } .wil-dashboard .tier-mark { position: absolute; top: -3px; width: 1px; height: 14px; background: var(--text-2); opacity: .4; } .wil-dashboard .tier-text { font-size: 12px; color: var(--text-2); margin-top: 6px; } /* Pride species card */ .wil-dashboard .pride-body { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; margin-top: 10px; } .wil-dashboard .pride-body:hover .week-name { color: var(--primary); } .wil-dashboard .pride-img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; } .wil-dashboard .pride-why { font-size: 12px; color: var(--text-2); margin-top: 6px; line-height: 1.45; } .wil-dashboard .week-name { font-size: 22px; line-height: 1.15; } /* Component cards v2 */ .wil-dashboard .why-headline { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; } .wil-dashboard .why-num { font-size: 40px; line-height: 1; color: var(--text); } .wil-dashboard .why-unit { font-size: 14px; color: var(--text-2); } .wil-dashboard .why-qualifier { font-size: 13px; color: var(--text); margin-top: 6px; line-height: 1.45; } .wil-dashboard .why-subtext { font-size: 11px; color: var(--text-2); margin-top: 6px; } /* Diversity measures infographic */ .wil-dashboard .metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .wil-dashboard .metric-tile { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); display: flex; flex-direction: column; gap: 6px; } .wil-dashboard .metric-tile.hl { border-color: rgba(123,160,152,.6); background: rgba(123,160,152,.08); } .wil-dashboard .mt-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); display: flex; justify-content: space-between; gap: 6px; } .wil-dashboard .mt-sym { color: var(--primary); text-transform: none; letter-spacing: 0; } .wil-dashboard .mt-val { font-size: 28px; line-height: 1; color: var(--text); } .wil-dashboard .metric-tile.hl .mt-val { color: var(--primary); } .wil-dashboard .mt-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.45; } .wil-dashboard .mt-track { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .wil-dashboard .mt-fill { height: 100%; width: 0; background: var(--primary); border-radius: 3px; transition: width .9s ease; } .wil-dashboard .mt-fill.amber { background: var(--amber); } .wil-dashboard .metric-foot { font-size: 12px; color: var(--text-2); margin-top: 14px; line-height: 1.5; } @media (max-width: 1100px) { .wil-dashboard .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .wil-dashboard .metric-grid { grid-template-columns: 1fr 1fr; } } /* Indicator species list (with the shared species visual in front of the name) */ .wil-dashboard .ind-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .wil-dashboard .ind-img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; } .wil-dashboard .ac-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; } .wil-dashboard .ind-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .wil-dashboard .ind-name { color: var(--text); text-decoration: none; } .wil-dashboard a.ind-name:hover { color: var(--primary); text-decoration: underline; } .wil-dashboard .ind-name.muted { color: var(--text-2); } .wil-dashboard .ind-state { font-family: 'DM Mono', monospace; font-size: 11px; white-space: nowrap; } /* Calls to action */ .wil-dashboard .cta-box { border: 1px dashed rgba(123,160,152,.7); border-radius: 12px; padding: 18px 20px; background: rgba(123,160,152,.06); } .wil-dashboard .cta-title { font-family: var(--font-sans); font-weight: 600; font-size: 20px; margin-bottom: 6px; } .wil-dashboard .cta-box p { font-size: 13px; color: var(--text-2); margin-bottom: 12px; } .wil-dashboard .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 0; background: var(--primary); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; } .wil-dashboard .cta-btn:hover { background: var(--forest); color: #fff; } .wil-dashboard .cta-btn.sm { padding: 6px 12px; font-size: 12px; } .wil-dashboard .cta-btn.light { background: var(--sage); color: var(--forest); } /* Inline "your profile is still empty" notice on the cards that lean on it (see management/_dash_profile_hint.html). Quieter than a .cta-box: it sits inside a card that already has content, not in place of it. */ .wil-dashboard .profile-hint { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(123,160,152,.7); background: rgba(123,160,152,.06); font-size: 12px; line-height: 1.5; color: var(--text-2); } .wil-dashboard .profile-hint i { color: var(--sage-text); margin-top: 2px; } .wil-dashboard .profile-hint a { color: var(--primary); text-decoration: underline; } /* Score-over-time legend + activity card */ /* What the activity bars compare: equal windows, named. */ .wil-dashboard .activity-window { font-size: 11px; color: var(--text-2); margin-top: 8px; } .wil-dashboard .legend-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--text-2); } .wil-dashboard .lg { display: inline-flex; align-items: center; gap: 6px; } .wil-dashboard .lg-line { width: 18px; height: 2px; background: var(--primary); display: inline-block; } .wil-dashboard .lg-vert { width: 2px; height: 12px; border-left: 2px dashed var(--roest); display: inline-block; } .wil-dashboard .activity-num { font-size: 44px; line-height: 1; margin-top: 14px; color: var(--text); } .wil-dashboard .activity-num.up { color: var(--primary); } .wil-dashboard .activity-num.down { color: var(--amber-text); } .wil-dashboard .activity-sub { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-2); margin-top: 6px; } /* Activity bars: shown whatever we can compare. Without a year of history there is no headline percentage, so these carry the comparison on their own. */ .wil-dashboard .activity-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .wil-dashboard .activity-bar-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; } .wil-dashboard .activity-bar-label { font-size: 11px; color: var(--text-2); line-height: 1.15; } .wil-dashboard .activity-bar-track { height: 10px; border-radius: 999px; background: rgba(123, 160, 152, .16); overflow: hidden; } .wil-dashboard .activity-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--sage, #7BA098); } .wil-dashboard .activity-bar-fill.is-current { background: var(--primary); } .wil-dashboard .activity-bar-value { font-family: 'DM Mono', monospace; font-size: 11.5px; color: var(--text-2); } /* Opportunities + "I've done this" */ .wil-dashboard .opp-actions { list-style: none; padding: 0; margin: 8px 0 0; } .wil-dashboard .opp-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; } .wil-dashboard .opp-action-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wil-dashboard .opp-horizon { font-size: 10.5px; color: var(--text-2); } .wil-dashboard .opp-action.is-done .opp-text { color: var(--text-2); text-decoration: line-through; } .wil-dashboard .opp-action.is-done .fa-check-circle { color: var(--sage-text); text-decoration: none; } .wil-dashboard .done-btn { border: 1px solid var(--border); background: var(--card); color: var(--primary); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } .wil-dashboard .done-btn:hover { border-color: var(--sage); background: rgba(123,160,152,.12); } .wil-dashboard .done-form { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: rgba(123,160,152,.08); } .wil-dashboard .done-form[hidden] { display: none; } .wil-dashboard .done-form .form-control { max-width: 170px; } .wil-dashboard .done-label { font-size: 12px; color: var(--text-2); margin: 0; } .wil-dashboard .opp-action-btns { display: flex; gap: 6px; flex-wrap: wrap; } /* A planned measure keeps its place on the list -- nothing has changed on the ground yet, so it is not ticked off, only marked. */ .wil-dashboard .opp-action.is-planned .opp-text { color: var(--text-2); } .wil-dashboard .opp-planned { font-size: 11px; color: var(--roest-text); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .wil-dashboard .interv-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .wil-dashboard .interv-date { color: var(--roest-text); font-size: 11px; white-space: nowrap; } .wil-dashboard .interv-note { color: var(--text-2); } .wil-dashboard .interv-del { border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 2px 6px; } .wil-dashboard .interv-del:hover { color: var(--roest-text); } .wil-dashboard .interv-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .wil-dashboard .interv-form input[type=text] { flex: 1 1 220px; } .wil-dashboard .interv-form input[type=date] { max-width: 170px; } /* Comparison (Strava-style) */ .wil-dashboard .cmp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .wil-dashboard .cmp-tab { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .wil-dashboard .cmp-tab.active { background: var(--forest); color: #EFE9DA; border-color: var(--forest); } .wil-dashboard .cmp-n { font-family: 'DM Mono', monospace; font-size: 10px; } .wil-dashboard .cmp-grid { display: grid; grid-template-columns: auto auto 1fr; gap: 28px; align-items: end; } .wil-dashboard .cmp-big { font-size: 56px; line-height: 1; color: var(--text); } .wil-dashboard .cmp-big.muted { color: var(--text-2); font-size: 40px; } .wil-dashboard .cmp-unit { font-size: 20px; margin-left: 2px; } .wil-dashboard .cmp-lbl { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-top: 6px; } .wil-dashboard .cmp-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .wil-dashboard .cmp-badge { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); color: var(--text); } .wil-dashboard .cmp-badge.good { background: rgba(123,160,152,.18); color: var(--primary); border-color: rgba(123,160,152,.4); } .wil-dashboard .cmp-badge.mid { background: rgba(200,146,74,.15); color: var(--amber-text); border-color: rgba(200,146,74,.35); } .wil-dashboard .cmp-badge.rank { background: var(--forest); color: #EFE9DA; border-color: var(--forest); } .wil-dashboard .cmp-claim { font-size: 15px; margin: 18px 0 14px; line-height: 1.5; } .wil-dashboard .hist { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; height: 110px; align-items: end; } .wil-dashboard .hist-col { position: relative; height: 100%; display: flex; align-items: flex-end; } .wil-dashboard .hist-bar { width: 100%; min-height: 3px; border-radius: 4px 4px 2px 2px; background: rgba(123,160,152,.45); transition: height .6s ease; } .wil-dashboard .hist-col.mine .hist-bar { background: var(--roest); } .wil-dashboard .hist-you { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--roest-text); } .wil-dashboard .hist-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-2); margin-top: 6px; } .wil-dashboard .hist-note { font-size: 12px; color: var(--text-2); margin-top: 8px; } @media (max-width: 700px) { .wil-dashboard .cmp-grid { grid-template-columns: 1fr 1fr; } .wil-dashboard .cmp-badges { grid-column: 1 / -1; justify-content: flex-start; } } /* Deeper section */ .wil-dashboard .sofar { font-size: 11px; color: var(--amber-text); margin-top: 4px; } .wil-dashboard .sofar strong { color: var(--text); } .wil-dashboard .chart-link { display: block; text-decoration: none; color: inherit; } .wil-dashboard .tsp-link { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; } .wil-dashboard .tsp-link:hover .tsp-name { color: var(--primary); } .wil-dashboard .tsp-img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; } .wil-dashboard .tsp-body { flex: 1 1 auto; min-width: 0; } .wil-dashboard a.appeared-chip { text-decoration: none; color: inherit; } .wil-dashboard a.appeared-chip:hover { border-color: var(--sage); color: var(--primary); } .wil-dashboard .deep-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wil-dashboard .deep-link { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; background: var(--card); } .wil-dashboard .deep-link:hover { border-color: var(--sage); } .wil-dashboard .deep-link i { color: var(--primary); width: 18px; text-align: center; } .wil-dashboard .deep-link span { display: flex; flex-direction: column; } .wil-dashboard .deep-link small { color: var(--text-2); font-size: 11px; } .wil-dashboard .story-powered { position: absolute; right: 12px; bottom: 10px; font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.4); } .wil-dashboard .story-media { position: relative; } .wil-dashboard .data-card { background: var(--bg); box-shadow: none; } .wil-dashboard .feed-link { color: var(--text); text-decoration: none; } .wil-dashboard .feed-link:hover { color: var(--primary); } /* Share studio */ .wil-dashboard .share-chips { display: flex; gap: 6px; flex-wrap: wrap; } .wil-dashboard .share-chip { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer; } .wil-dashboard .share-chip.active { background: var(--forest); color: #EFE9DA; border-color: var(--forest); } .wil-dashboard .share-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; } .wil-dashboard .share-preview canvas { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow); } /* The studio waits for the moment's bird before it offers the visual, and says so when the bird could not be loaded (see shareStudio()). */ .wil-dashboard .share-preview canvas.is-loading { opacity: .55; } .wil-dashboard .share-status { margin: 8px 0 0; padding: 9px 12px; font-size: 13px; line-height: 1.4; color: var(--text); background: var(--card, #fff); border: 1px solid var(--amber-text, #8a5a16); border-left-width: 3px; border-radius: 10px; } .wil-dashboard .share-side { display: flex; flex-direction: column; gap: 10px; } .wil-dashboard .share-label { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .wil-dashboard .share-side textarea { font-size: 13px; line-height: 1.5; } .wil-dashboard .share-actions { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 900px) { .wil-dashboard .share-grid { grid-template-columns: 1fr; } } /* Season score strip inside the Wild Score card */ .wil-dashboard .season-strip { margin-top: 24px; padding: 14px 16px; border-radius: 10px; background: rgba(212,196,168,.18); border: 1px solid rgba(212,196,168,.6); } .wil-dashboard .season-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wil-dashboard .season-flag { font-size: 10.5px; color: var(--amber-text); letter-spacing: .06em; text-transform: uppercase; } .wil-dashboard .season-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; } .wil-dashboard .season-num { font-size: 40px; line-height: 1; color: var(--text); } .wil-dashboard .season-val { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.1; color: var(--text); } .wil-dashboard .season-val.up { color: var(--primary); } .wil-dashboard .season-val.down { color: var(--amber-text); } .wil-dashboard .season-lbl { font-size: 11px; color: var(--text-2); margin-top: 3px; } /* ─── Fase D: personalisation line, metrics row, scale bar, explanations ─── */ .wil-dashboard .profile-line { font-size: 11.5px; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; } .wil-dashboard .feed-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: #fff; border: 1px solid var(--border); } .wil-dashboard .explain-list { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .wil-dashboard .lg-tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--roest); display: inline-block; } .wil-dashboard .ind-state.expected { color: var(--wil-status-expected); } /* Species of a habitat that borders the location but is not part of it: reported, never scored. */ .wil-dashboard .ind-state.context { color: var(--sage); } .wil-dashboard .ind-context { border-top: 1px solid var(--border); } .wil-dashboard .ind-secondary { border-top: 1px solid var(--border); } /* Score breakdown: staff and full-scope validators only. */ .wil-dashboard .sb-card { border-color: rgba(200, 146, 74, .35); } .wil-dashboard .sb-sum { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; } .wil-dashboard .sb-part-label { font-family: 'DM Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); } .wil-dashboard .sb-part-val { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; } .wil-dashboard .sb-part-val.strong { color: var(--primary); font-size: 34px; } .wil-dashboard .sb-part-sub { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-2); } .wil-dashboard .sb-plus { font-size: 20px; color: var(--text-2); padding-bottom: 6px; } .wil-dashboard .sb-open { border-left: 2px solid var(--amber); padding-left: 12px; font-size: 12.5px; } .wil-dashboard .sb-table { font-size: 12.5px; } .wil-dashboard .sb-table th { font-family: 'DM Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: 500; } .wil-dashboard .sb-sci { display: block; font-style: italic; font-size: 11px; color: var(--text-2); } .wil-dashboard .sb-await { color: var(--amber-text); } .wil-dashboard .sb-missing td { opacity: .6; } .wil-dashboard .sb-validate { font-size: 11.5px; white-space: nowrap; } .wil-dashboard .sb-derive { border-top: 1px solid var(--border); padding-top: 12px; } /* Score page: the arithmetic on the left, the same thing in words on the right. Two columns on a desk-sized screen, stacked below that. */ .wil-dashboard .sb-top { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; } .wil-dashboard .sb-numbers { min-width: 0; } .wil-dashboard .sb-story { min-width: 0; border-left: 1px solid var(--border); padding-left: 24px; } .wil-dashboard .sb-story .sb-plain:last-child { margin-bottom: 0; } .wil-dashboard .sb-aside { color: var(--text-2); } .wil-dashboard .sb-derive-context { color: var(--text-2); } @media (max-width: 992px) { .wil-dashboard .sb-top { grid-template-columns: minmax(0, 1fr); gap: 18px; } .wil-dashboard .sb-story { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; } } /* The one species table: its head, its filters and the tags in its rows. */ .wil-dashboard .sb-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wil-dashboard .sb-count { font-size: 11.5px; color: var(--text-2); } .wil-dashboard .sb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .wil-dashboard .sb-filters input[type="search"] { max-width: 220px; } .wil-dashboard .sb-filters select { width: auto; max-width: 220px; } .wil-dashboard .sb-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1.5; white-space: nowrap; } .wil-dashboard .sb-tag.ind { background: var(--wil-tint-primary); color: var(--primary); border: 1px solid rgba(123,160,152,.4); } .wil-dashboard .sb-tag.ind2 { background: rgba(123,160,152,.12); color: var(--text-2); border: 1px solid var(--border); } .wil-dashboard .sb-tag.ctx { background: transparent; color: var(--text-2); border: 1px dashed var(--border); } .wil-dashboard .sb-nil { color: var(--text-2); } .wil-dashboard .sb-flyover { color: var(--roest-text); } .wil-dashboard tr.sb-flyover td, .wil-dashboard tr.sb-context td { opacity: .75; } /* Plain-language paragraphs on the score-breakdown page: the arithmetic in words, for the readers who validate rather than derive. */ .wil-dashboard .sb-plain { font-size: 13px; line-height: 1.6; max-width: 68ch; margin: 0 0 8px; } .wil-dashboard .sb-derive-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; max-width: 380px; } .wil-dashboard .sb-derive-row.strong { font-weight: 600; } .wil-dashboard .sb-sym { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-2); display: inline-block; min-width: 52px; } .wil-dashboard .ind-state.await { color: var(--amber-text); } .wil-dashboard .ind-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wil-dashboard .ind-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--wil-tint-primary); border: 1px solid rgba(123, 160, 152, .3); color: var(--primary); text-decoration: none; } .wil-dashboard a.ind-chip:hover { border-color: rgba(123, 160, 152, .6); } .wil-dashboard .ind-group + .ind-group { margin-top: 12px; } .wil-dashboard .ind-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .wil-dashboard .ind-group-name { font-size: 12.5px; font-weight: 500; } .wil-dashboard .ind-group-count { font-size: 11px; color: var(--text-2); } .wil-dashboard .ind-group-bar { flex: 1; height: 4px; border-radius: 2px; background: #e0ddd6; overflow: hidden; max-width: 160px; } .wil-dashboard .ind-group-bar span { display: block; height: 100%; background: var(--sage); } .wil-dashboard .ind-state.miss { color: var(--wil-status-absent); } /* D2 metrics: typographic only, separated by hairlines. The collapse this block used to own now lives one level up, on the whole measured layer. */ .wil-dashboard .metrics-body { display: grid; grid-template-rows: 1fr; } .wil-dashboard .metrics-body-inner { min-height: 0; } /* Section 02's fold: conclusions above it, everything measured inside. */ .wil-dashboard .deeper-block { border-top: 1px solid var(--border); padding-top: 12px; } .wil-dashboard .deeper-summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; } .wil-dashboard .deeper-summary::-webkit-details-marker { display: none; } .wil-dashboard .deeper-summary::before { content: '\203A'; transition: transform .2s ease; display: inline-block; } .wil-dashboard .deeper-block[open] > .deeper-summary::before { transform: rotate(90deg); } .wil-dashboard .deeper-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; } .wil-dashboard .deeper-body { padding-top: 8px; } @media (prefers-reduced-motion: reduce) { .wil-dashboard .deeper-summary::before { transition: none; } } /* "What has changed": one dated line per event, with a small mark whose colour says which kind it is. A planned measure is outlined, not filled -- it has not happened yet. */ .wil-dashboard .chg-list { list-style: none; margin: 0; padding: 0; } .wil-dashboard .chg-row { display: grid; grid-template-columns: 96px 12px 1fr; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; } .wil-dashboard .chg-row:first-child { border-top: 0; } .wil-dashboard .chg-date { font-size: 11px; color: var(--text-2); white-space: nowrap; } .wil-dashboard .chg-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--sage, #7BA098); justify-self: center; transform: translateY(-2px); } .wil-dashboard .chg-measure .chg-mark { background: var(--roest-text, #B85C3A); } .wil-dashboard .chg-planned .chg-mark { background: transparent; border: 1.5px solid var(--roest-text, #B85C3A); } .wil-dashboard .chg-start .chg-mark { background: var(--primary); } .wil-dashboard .chg-note { color: var(--text-2); font-size: 12.5px; } .wil-dashboard .chg-body a { color: inherit; } @media (max-width: 520px) { .wil-dashboard .chg-row { grid-template-columns: 12px 1fr; } .wil-dashboard .chg-date { grid-column: 1 / -1; } } /* A chart that can name its own conclusion says it here, with the descriptive line demoted to a subtitle underneath. */ .wil-dashboard .chart-title { font-size: 17px; line-height: 1.3; margin: 0 0 4px; } /* Section 02 primary layer: one conclusion per tile, nothing else. */ .wil-dashboard .insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .wil-dashboard .insight-tile-title { font-size: 17px; line-height: 1.3; margin: 0; } .wil-dashboard .insight-tile-title a { color: inherit; text-decoration: none; } .wil-dashboard .insight-tile-title a:hover { text-decoration: underline; } .wil-dashboard .insight-tile-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 8px 0 0; } .wil-dashboard .metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; } .wil-dashboard .metric { padding: 12px 18px 12px 0; border-left: 1px solid var(--border); padding-left: 18px; } .wil-dashboard .metric:first-child { border-left: 0; padding-left: 0; } .wil-dashboard .metric-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .wil-dashboard .metric-name { font-size: 12px; color: var(--text-2); } .wil-dashboard .metric-sym { font-family: var(--font-mono); color: var(--text); margin-left: 4px; } .wil-dashboard .metric-val { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; } .wil-dashboard .metric-of { font-size: 14px; font-weight: 400; color: var(--text-2); margin-left: 4px; } .wil-dashboard .metric-ctx { font-size: 12px; color: var(--text-2); margin-top: 4px; min-height: 16px; } @media (max-width: 640px) { .wil-dashboard .metric-row { grid-template-columns: 1fr; } .wil-dashboard .metric { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); } .wil-dashboard .metric:first-child { border-top: 0; } } /* D4 scale bar */ .wil-dashboard .cmp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 44px; } .wil-dashboard .cmp-select-label { font-size: 12px; color: var(--text-2); } .wil-dashboard .cmp-select { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; background: var(--card); color: var(--text); max-width: 100%; } .wil-dashboard .cmp-n { font-size: 11px; color: var(--text-2); } .wil-dashboard .scale { margin: 46px 0 8px; } .wil-dashboard .scale-track { position: relative; height: 18px; border-radius: 9px; background: var(--wil-hairline); } .wil-dashboard .scale-range { position: absolute; top: 0; bottom: 0; background: rgba(123,160,152,.22); border-radius: 9px; } .wil-dashboard .scale-segment { position: absolute; top: -4px; bottom: -4px; border-radius: 6px; border: 1px dashed var(--text-2); opacity: .5; } .wil-dashboard .scale-mean { position: absolute; top: -10px; bottom: -10px; width: 2px; background: var(--text-2); transform: translateX(-1px); } .wil-dashboard .scale-mean-label { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--text-2); } .wil-dashboard .scale-you { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--primary); transform: translate(-50%, -50%); } .wil-dashboard .scale-you-label { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--primary); font-weight: 500; } .wil-dashboard .scale-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-2); margin-top: 30px; } .wil-dashboard .cmp-claim { font-size: 16px; margin: 14px 0 4px; } .wil-dashboard .cmp-note { font-size: 12px; color: var(--text-2); margin: 0; } .wil-dashboard .cmp-note a { color: var(--primary); text-decoration: underline; } .wil-dashboard .done-details { margin-top: 8px; } .wil-dashboard .done-details summary { cursor: pointer; font-size: 12px; color: var(--text-2); } .wil-dashboard .done-details .interv-del { font-size: 11px; }