/* ========================================================================= Feature Board "Wall" (2026-06-14) — OC-staff-internal freeform sticky-note wall for a touchscreen display. Notes are absolutely positioned on a pan/zoom canvas, overlap/stack by z-index, and scale with the zoom. Board chrome (page/toolbar/zoom/viewport/zones/labels/modal/reporting) uses --oc-* tokens so it themes for dark automatically. THE STICKY NOTES are a CEO-approved realistic design: real colored paper with dark ink (their colors are intentional CONSTANTS — light paper + dark ink in BOTH themes, like physical notes glowing on the wall — so they're exempt from the tokens-only rule; contrast holds in dark because ink stays dark on light paper). Fonts (Caveat/Gochi/Kalam/Patrick/Permanent Marker/Reenie/Shadows) are loaded via the link in index.html (NOT @import — the deployed CSP). Engine: wwwroot/script/feature-board.js. ========================================================================= */ /* Sticky-paper effect tokens. */ :root { --ocfb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --ocfb-radius: 3px 5px 4px 6px; --ocfb-lift: 0 1px 0 rgba(0,0,0,.04), 8px 12px 16px -8px rgba(40,30,10,.30), 2px 3px 5px -2px rgba(40,30,10,.20); } /* ---- Page shell + toolbar ------------------------------------------------ */ .ocfb-page { display: flex; flex-direction: column; gap: var(--oc-space-4); min-height: 0; height: calc(100vh - var(--oc-shell-topbar-h) - 2 * var(--oc-space-4)); } .ocfb-toolbar { display: flex; align-items: center; gap: var(--oc-space-3); flex-wrap: wrap; } .ocfb-title { margin: 0; font: 700 var(--oc-fs-h1)/var(--oc-lh-tight) var(--oc-font-sans); color: var(--oc-text); letter-spacing: -0.01em; } .ocfb-subtitle { margin: 0; color: var(--oc-text-muted); font-size: var(--oc-fs-sm); } .ocfb-toolbar-spacer { flex: 1 1 auto; } .ocfb-tabs { display: inline-flex; gap: 2px; background: var(--oc-surface-2); border-radius: var(--oc-radius-pill); padding: 3px; } .ocfb-tab { border: 0; background: transparent; cursor: pointer; padding: var(--oc-space-2) var(--oc-space-4); border-radius: var(--oc-radius-pill); color: var(--oc-text-muted); font: 600 var(--oc-fs-sm) var(--oc-font-sans); transition: background var(--oc-dur-fast) var(--oc-ease), color var(--oc-dur-fast) var(--oc-ease); } .ocfb-tab.is-active { background: var(--oc-surface); color: var(--oc-text); box-shadow: var(--oc-shadow-sm); } .ocfb-btn { display: inline-flex; align-items: center; gap: var(--oc-space-2); border: 1px solid var(--oc-border); background: var(--oc-surface); color: var(--oc-text); cursor: pointer; padding: var(--oc-space-2) var(--oc-space-4); border-radius: var(--oc-radius-sm); font: 600 var(--oc-fs-sm) var(--oc-font-sans); min-height: 40px; transition: background var(--oc-dur-fast) var(--oc-ease), box-shadow var(--oc-dur-fast) var(--oc-ease); } .ocfb-btn:hover { background: var(--oc-surface-2); } .ocfb-btn-primary { background: var(--oc-orange); border-color: var(--oc-orange); color: var(--oc-white); } .ocfb-btn-primary:hover { background: var(--oc-orange-600); } /* Zoom controls. */ .ocfb-zoombar { display: inline-flex; align-items: center; gap: var(--oc-space-2); } .ocfb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--oc-border); background: var(--oc-surface); color: var(--oc-text); border-radius: var(--oc-radius-sm); cursor: pointer; } .ocfb-icon-btn:hover { background: var(--oc-surface-2); } .ocfb-zoom-readout { min-width: 3.4em; text-align: center; font: 600 var(--oc-fs-sm) var(--oc-font-sans); color: var(--oc-text-muted); } /* ---- Wall: viewport + zoomable canvas ----------------------------------- */ .ocfb-wall-viewport { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; /* the canvas is panned/zoomed inside */ border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); background: radial-gradient(1100px 600px at 50% -8%, color-mix(in srgb, var(--oc-orange) 6%, transparent), transparent 60%), var(--oc-gray-50); touch-action: none; /* the engine owns all gestures (pan / zoom / drag) */ user-select: none; -webkit-user-select: none; /* never select section/note text while panning */ cursor: grab; } .ocfb-wall-viewport.is-panning { cursor: grabbing; } .ocfb-wall-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; /* pan/zoom math assumes a top-left origin */ will-change: transform; } /* Lane zones — faint vertical bands inside the canvas. */ .ocfb-zone { position: absolute; top: 0; --ocfb-accent: var(--oc-gray-500); /* Clear divider line between stages — you can still stick a note across it (notes float above the zones). Left+right so the first/last edges show too. */ border-left: 2px solid color-mix(in srgb, var(--oc-text) 16%, transparent); background: color-mix(in srgb, var(--ocfb-accent) 6%, transparent); } .ocfb-zone:last-of-type { border-right: 2px solid color-mix(in srgb, var(--oc-text) 16%, transparent); } .ocfb-zone[data-lane="Ideas"] { --ocfb-accent: var(--oc-gray-500); } .ocfb-zone[data-lane="Pending"] { --ocfb-accent: var(--oc-info); } .ocfb-zone[data-lane="Working"] { --ocfb-accent: var(--oc-orange); } .ocfb-zone[data-lane="AwaitingFeedback"] { --ocfb-accent: var(--oc-amber-600); } .ocfb-zone[data-lane="DeployReady"] { --ocfb-accent: var(--oc-emerald-600); } .ocfb-zone[data-lane="Shipped"] { --ocfb-accent: var(--oc-emerald-700); } /* Stage labels — written ON the board (children of the canvas at logical coords). They pan & scale WITH the wall transform exactly like the notes — no JS, no overlay tracking. left/width come from the Razor (the lane's band); font-size is a logical px so it scales with zoom. space-between pins the title to the band's left and the count to its right; because everything lives in the same logical space, the count can never drift past the zone divider into the next section. */ .ocfb-lane-label { position: absolute; top: 18px; box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 0 22px; z-index: 0; /* board chrome: above the zone tint, below the notes */ pointer-events: none; /* board text never eats a drag/tap */ --ocfb-accent: var(--oc-gray-500); color: var(--oc-text); font-size: 44px; /* logical — scales with the wall, like a note */ overflow: hidden; /* soft board-colored halo keeps the handwriting legible if a note slides under it */ text-shadow: 0 0 6px var(--oc-surface), 0 0 6px var(--oc-surface), 0 1px 1px var(--oc-surface); } .ocfb-lane-label[data-lane="Ideas"] { --ocfb-accent: var(--oc-gray-500); } .ocfb-lane-label[data-lane="Pending"] { --ocfb-accent: var(--oc-info); } .ocfb-lane-label[data-lane="Working"] { --ocfb-accent: var(--oc-orange); } .ocfb-lane-label[data-lane="AwaitingFeedback"] { --ocfb-accent: var(--oc-amber-600); } .ocfb-lane-label[data-lane="DeployReady"] { --ocfb-accent: var(--oc-emerald-600); } .ocfb-lane-label[data-lane="Shipped"] { --ocfb-accent: var(--oc-emerald-700); } .ocfb-lane-name { /* Handwritten marker title, written on the board. Inherits the label's logical font-size; ellipsizes only if a title somehow overflows its band. */ font-family: "Caveat", "Comic Sans MS", cursive; font-size: inherit; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ocfb-lane-count { /* The quantity, handwritten, at the section's top-right — never shrinks/wraps. */ font-family: "Caveat", "Comic Sans MS", cursive; font-size: inherit; font-weight: 700; line-height: 1; color: var(--oc-text); opacity: .8; flex: 0 0 auto; } /* =========================================================================== STICKY NOTE — realistic paper (CEO-approved drop-in design). The engine owns position/left/top/z-index inline; the structural bits it needs (position/width/cursor/touch-action/user-select) are added to the base rule below. Everything else is the supplied design. Per-note random tilt comes from an inline --tilt; per-age decay + tape come from emitted state classes. =========================================================================== */ .ocfb-note { /* --- structural (engine contract) --- */ position: absolute; width: 240px; /* logical; must match WallLayout.NoteWidth */ cursor: grab; touch-action: none; /* the engine owns finger gestures on a note */ user-select: none; -webkit-user-select: none; /* --- paper design --- */ --paper-top: #fff6a6; --paper-bot: #f6e873; --ink: #4a431f; --tilt: -1.4deg; --hand: 'Caveat', 'Patrick Hand', cursive; box-sizing: border-box; padding: 16px 16px 12px; color: var(--ink); font-family: var(--hand); font-size: 17px; line-height: 1.25; background: var(--ocfb-grain), linear-gradient(118deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 34%), radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%), linear-gradient(176deg, var(--paper-top) 0%, var(--paper-bot) 100%); background-size: 180px 180px, cover, cover, cover; background-blend-mode: soft-light, normal, normal, normal; border: 1px solid rgba(0,0,0,.05); border-radius: var(--ocfb-radius); box-shadow: inset 0 6px 10px -8px rgba(0,0,0,.28), inset 0 -10px 14px -12px rgba(0,0,0,.10), var(--ocfb-lift); transform: rotate(var(--tilt)); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; will-change: transform; isolation: isolate; } .ocfb-note::after { content:""; position:absolute; right:-1px; bottom:-1px; width:34px; height:34px; background: linear-gradient(135deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.06) 47%, rgba(255,255,255,.55) 52%, var(--paper-bot) 58%, color-mix(in srgb, var(--paper-bot) 70%, #000 12%) 100%); border-bottom-right-radius: var(--ocfb-radius); box-shadow: -3px -3px 6px -3px rgba(0,0,0,.35); clip-path: polygon(100% 0, 100% 100%, 0 100%); transform: rotate(.5deg); pointer-events:none; } .ocfb-paper-1::after, .ocfb-paper-3::after { right:auto; left:-1px; border-bottom-right-radius:0; border-bottom-left-radius: var(--ocfb-radius); background: linear-gradient(225deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.06) 47%, rgba(255,255,255,.55) 52%, var(--paper-bot) 58%, color-mix(in srgb, var(--paper-bot) 70%, #000 12%) 100%); box-shadow: 3px -3px 6px -3px rgba(0,0,0,.35); clip-path: polygon(0 0, 100% 100%, 0 100%); } .ocfb-note.fix-flat::after { display:none; } .ocfb-note.fix-tape::before { content:""; position:absolute; top:-9px; left:50%; width:86px; height:24px; transform: translateX(-50%) rotate(-2.5deg); background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(245,242,225,.20)), repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 6px, rgba(0,0,0,.03) 6px 7px); border-left: 1px solid rgba(255,255,255,.35); border-right:1px solid rgba(255,255,255,.35); box-shadow: 0 2px 4px rgba(0,0,0,.10); opacity:.85; pointer-events:none; } .ocfb-paper-2.fix-tape::before { transform: translateX(-60%) rotate(3deg); } .ocfb-paper-4.fix-tape::before { transform: translateX(-40%) rotate(-4deg); } .ocfb-paper-0 { --paper-top:#fffab0; --paper-bot:#f6e76b; --ink:#5a5118; --tilt:-1.6deg; --hand:'Caveat', cursive; border-radius: 4px 6px 3px 5px; } .ocfb-paper-1 { --paper-top:#bdecff; --paper-bot:#8ed4f7; --ink:#0f4a63; --tilt:1.8deg; --hand:'Shadows Into Light', cursive; border-radius: 6px 3px 6px 4px; } .ocfb-paper-2 { --paper-top:#ffd28a; --paper-bot:#ffb454; --ink:#6e3b07; --tilt:-2.6deg; --hand:'Gochi Hand', cursive; border-radius: 5px 4px 6px 3px; } .ocfb-paper-3 { --paper-top:#d2f4a6; --paper-bot:#a6e072; --ink:#2f4d12; --tilt:2.4deg; --hand:'Patrick Hand', cursive; border-radius: 3px 6px 4px 6px; } .ocfb-paper-4 { --paper-top:#ffc6df; --paper-bot:#ff9ec4; --ink:#7a1f49; --tilt:-0.9deg; --hand:'Kalam', cursive; border-radius: 6px 4px 5px 4px; } .ocfb-note:hover { transform: rotate(calc(var(--tilt) * .35)) translateY(-3px); box-shadow: inset 0 6px 10px -8px rgba(0,0,0,.22), 12px 18px 26px -10px rgba(40,30,10,.38), 3px 5px 8px -3px rgba(40,30,10,.22); } .ocfb-note.is-dragging { box-shadow: inset 0 6px 10px -8px rgba(0,0,0,.18), 26px 40px 50px -18px rgba(20,14,4,.45), 8px 12px 18px -6px rgba(20,14,4,.30); scale: 1.05; filter: saturate(1.05) brightness(1.02); } .ocfb-note.is-aging { box-shadow: 0 0 0 2px rgba(255,176,32,.85), 0 0 0 6px rgba(255,176,32,.28), inset 0 6px 10px -8px rgba(0,0,0,.28), var(--ocfb-lift); animation: ocfb-pulse 2.6s ease-in-out infinite; } @keyframes ocfb-pulse { 0%,100% { box-shadow:0 0 0 2px rgba(255,176,32,.85),0 0 0 6px rgba(255,176,32,.28), inset 0 6px 10px -8px rgba(0,0,0,.28),var(--ocfb-lift); } 50% { box-shadow:0 0 0 2px rgba(255,176,32,.95),0 0 0 10px rgba(255,176,32,.12), inset 0 6px 10px -8px rgba(0,0,0,.28),var(--ocfb-lift); } } /* Decay scale — one class per note, advanced one stage per 30 days of age. */ .ocfb-note.age-1 { transform: rotate(calc(var(--tilt) + .6deg)); box-shadow: inset 0 6px 10px -8px rgba(0,0,0,.30), inset 0 40px 40px -46px rgba(0,0,0,.20), var(--ocfb-lift); } .ocfb-note.age-2 { transform: rotate(calc(var(--tilt) + 1deg)) skewX(-.6deg); filter: contrast(1.06); border-radius: 5px 7px 4px 8px; box-shadow: inset 32px 22px 26px -30px rgba(0,0,0,.30), inset -28px 38px 26px -30px rgba(0,0,0,.26), inset 24px -34px 24px -30px rgba(0,0,0,.22), inset -10px -6px 16px -14px rgba(255,255,255,.45), inset 14px 10px 16px -14px rgba(255,255,255,.40), var(--ocfb-lift); } .ocfb-note.age-3 { transform: rotate(calc(var(--tilt) + 1.2deg)) skewX(-.7deg); filter: contrast(1.04) saturate(.72) brightness(.97) sepia(.06); border-radius: 5px 7px 4px 8px; box-shadow: inset 30px 20px 26px -30px rgba(0,0,0,.28), inset -26px 36px 26px -30px rgba(0,0,0,.24), inset 0 -26px 30px -22px rgba(120,110,90,.40), var(--ocfb-lift); } .ocfb-note.age-3::after { content:""; position:absolute; inset:0; width:auto; height:auto; clip-path:none; transform:none; box-shadow:none; border-radius: inherit; background: radial-gradient(circle at 18% 26%, rgba(90,84,70,.16) 0 1.3px, transparent 2px), radial-gradient(circle at 62% 18%, rgba(90,84,70,.13) 0 1.1px, transparent 2px), radial-gradient(circle at 80% 44%, rgba(90,84,70,.15) 0 1.4px, transparent 2px), radial-gradient(circle at 34% 64%, rgba(90,84,70,.12) 0 1.1px, transparent 2px), radial-gradient(circle at 70% 78%, rgba(90,84,70,.15) 0 1.3px, transparent 2px), radial-gradient(circle at 46% 88%, rgba(90,84,70,.12) 0 1px, transparent 2px), linear-gradient(180deg, rgba(150,144,128,.05), rgba(120,112,96,.16)); opacity:.9; pointer-events:none; } /* age-4 — coffee/food stained (drop positions echoed by age-5 mold) */ .ocfb-note.age-4 { transform: rotate(calc(var(--tilt) + 1.3deg)) skewX(-.8deg); filter: contrast(1.03) saturate(.86) brightness(.96) sepia(.10); border-radius: 8px 11px 6px 10px; box-shadow: inset 26px 18px 24px -28px rgba(0,0,0,.24), inset -24px 30px 24px -28px rgba(0,0,0,.20), inset 0 -30px 30px -24px rgba(96,70,40,.34), inset 0 22px 26px -26px rgba(96,70,40,.22), var(--ocfb-lift); } .ocfb-note.age-4::after { content:""; position:absolute; inset:0; width:auto; height:auto; clip-path:none; transform:none; box-shadow:none; border-radius: inherit; background: radial-gradient(ellipse 30% 24% at 26% 30%, rgba(150,110,64,.05) 0 60%, rgba(116,80,42,.32) 70%, rgba(116,80,42,.10) 80%, transparent 90%), radial-gradient(ellipse 22% 18% at 70% 62%, rgba(150,110,64,.05) 0 58%, rgba(108,74,40,.28) 68%, rgba(108,74,40,.08) 79%, transparent 90%), radial-gradient(ellipse 18% 14% at 48% 82%, rgba(96,58,30,.44) 0 52%, rgba(96,58,30,.18) 72%, transparent 86%), radial-gradient(ellipse 10% 13% at 86% 36%, rgba(120,80,40,.36) 0 56%, transparent 80%), radial-gradient(circle 5px at 40% 50%, rgba(80,50,26,.42), transparent 72%), radial-gradient(circle 3px at 58% 44%, rgba(80,50,26,.38), transparent 72%), radial-gradient(circle 2px at 33% 64%, rgba(80,50,26,.40), transparent 70%), linear-gradient(0deg, rgba(112,80,44,.20), rgba(112,80,44,.04) 34%, transparent 56%); mix-blend-mode: multiply; pointer-events:none; } .ocfb-note.age-4.fix-tape::before { filter: sepia(.35) saturate(.85) brightness(.92); opacity:.78; } /* age-5 — moldy base */ .ocfb-note.age-5 { transform: rotate(calc(var(--tilt) + 1.6deg)) skewX(-.9deg); filter: contrast(1.02) saturate(.55) brightness(.86) sepia(.12); border-radius: 6px 9px 5px 10px; box-shadow: inset 30px 20px 26px -30px rgba(0,0,0,.34), inset -26px 36px 26px -30px rgba(0,0,0,.30), inset 0 -28px 34px -22px rgba(60,66,40,.55), var(--ocfb-lift); } /* MOLD PATTERN 1 (default, age-5/age-6): mold blooms out of the brown drops */ .ocfb-note.age-5::after, .ocfb-note.age-6::after { content:""; position:absolute; inset:0; width:auto; height:auto; clip-path:none; transform:none; box-shadow:none; border-radius: inherit; background: radial-gradient(ellipse 27% 22% at 24% 72%, rgba(96,64,34,.36) 0 60%, transparent 82%), radial-gradient(ellipse 22% 18% at 70% 40%, rgba(96,64,34,.30) 0 58%, transparent 82%), radial-gradient(circle at 22% 74%, rgba(34,46,24,.80) 0 6px, rgba(54,68,34,.34) 11px, rgba(54,68,34,.12) 17px, transparent 26px), radial-gradient(circle at 31% 66%, rgba(58,72,38,.55) 0 4px, rgba(58,72,38,.18) 9px, transparent 16px), radial-gradient(circle at 70% 42%, rgba(28,36,22,.76) 0 5px, rgba(48,60,32,.30) 10px, rgba(48,60,32,.12) 16px, transparent 24px), radial-gradient(circle at 78% 34%, rgba(60,70,40,.5) 0 4px, transparent 13px), radial-gradient(circle at 46% 84%, rgba(30,28,20,.55) 0 2px, transparent 3px), radial-gradient(circle at 40% 50%, rgba(30,28,20,.45) 0 1.4px, transparent 2px), radial-gradient(circle at 62% 60%, rgba(30,28,20,.45) 0 1.4px, transparent 2px), radial-gradient(circle at 50% 60%, rgba(60,56,36,.10), transparent 65%); mix-blend-mode: multiply; pointer-events:none; } /* MOLD PATTERN 2 — corner clusters, blacker */ .ocfb-note.mold-2.age-5::after, .ocfb-note.mold-2.age-6::after { background: radial-gradient(ellipse 24% 20% at 30% 26%, rgba(90,60,32,.34) 0 60%, transparent 82%), radial-gradient(ellipse 20% 24% at 82% 70%, rgba(90,60,32,.30) 0 58%, transparent 82%), radial-gradient(circle at 28% 24%, rgba(26,32,20,.82) 0 7px, rgba(46,58,32,.32) 13px, rgba(46,58,32,.12) 20px, transparent 30px), radial-gradient(circle at 18% 34%, rgba(50,62,34,.5) 0 4px, transparent 14px), radial-gradient(circle at 84% 68%, rgba(24,30,18,.78) 0 6px, rgba(44,56,30,.30) 12px, rgba(44,56,30,.12) 18px, transparent 27px), radial-gradient(circle at 90% 80%, rgba(52,62,36,.48) 0 4px, transparent 12px), radial-gradient(circle at 55% 18%, rgba(30,28,20,.5) 0 2px, transparent 3px), radial-gradient(circle at 60% 46%, rgba(30,28,20,.42) 0 1.4px, transparent 2px), radial-gradient(circle at 35% 70%, rgba(30,28,20,.42) 0 1.4px, transparent 2px), radial-gradient(circle at 50% 50%, rgba(58,54,34,.10), transparent 65%); } /* MOLD PATTERN 3 — big central bloom, greener */ .ocfb-note.mold-3.age-5::after, .ocfb-note.mold-3.age-6::after { background: radial-gradient(ellipse 32% 22% at 52% 58%, rgba(92,64,34,.30) 0 60%, transparent 82%), radial-gradient(circle at 50% 56%, rgba(40,56,28,.72) 0 5px, rgba(60,78,40,.30) 11px, rgba(60,78,40,.12) 18px, transparent 27px), radial-gradient(circle at 64% 66%, rgba(30,40,22,.74) 0 5px, rgba(54,70,36,.28) 10px, transparent 18px), radial-gradient(circle at 40% 64%, rgba(58,74,38,.5) 0 4px, transparent 13px), radial-gradient(circle at 80% 80%, rgba(26,34,20,.76) 0 5px, rgba(48,62,32,.28) 10px, transparent 17px), radial-gradient(circle at 30% 40%, rgba(56,70,38,.45) 0 3px, transparent 11px), radial-gradient(circle at 56% 48%, rgba(30,28,20,.45) 0 1.6px, transparent 2px), radial-gradient(circle at 70% 56%, rgba(30,28,20,.45) 0 1.6px, transparent 2px), radial-gradient(circle at 48% 70%, rgba(30,28,20,.45) 0 1.6px, transparent 2px), radial-gradient(circle at 50% 58%, rgba(58,60,36,.12), transparent 62%); } .ocfb-note.age-5.fix-tape::before { filter: sepia(.5) saturate(.7) brightness(.85); opacity:.7; } /* age-6 — ANCIENT (1yr+): full mold (inherits age-5 ::after, incl. .mold-1/2/3) PLUS a corner cobweb + spider on ::before, on even deader/darker paper. */ .ocfb-note.age-6 { transform: rotate(calc(var(--tilt) + 1.7deg)) skewX(-1deg); filter: contrast(1.0) saturate(.46) brightness(.78) sepia(.16); border-radius: 6px 10px 5px 11px; box-shadow: inset 30px 20px 26px -30px rgba(0,0,0,.40), inset -26px 36px 26px -30px rgba(0,0,0,.34), inset 0 -28px 34px -22px rgba(50,54,34,.60), var(--ocfb-lift); } .ocfb-note.age-6::before { content:""; position:absolute; top:-6px; right:-6px; left:auto; bottom:auto; width:122px; height:122px; transform:none; border:0; box-shadow:none; opacity:.92; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23a9a9a9%27%20stroke-opacity%3D%270.6%27%20stroke-width%3D%271%27%3E%3Cpath%20d%3D%27M160%200%20L0%2012%27%2F%3E%3Cpath%20d%3D%27M160%200%20L10%2042%27%2F%3E%3Cpath%20d%3D%27M160%200%20L30%2095%27%2F%3E%3Cpath%20d%3D%27M160%200%20L70%20140%27%2F%3E%3Cpath%20d%3D%27M160%200%20L120%20155%27%2F%3E%3Cpath%20d%3D%27M160%200%20L156%2092%27%2F%3E%3Cpath%20d%3D%27M104%204%20L108%2014%20L115%2033%20L129%2049%20L146%2054%20L158%2032%27%2F%3E%3Cpath%20d%3D%27M56%207%20L63%2026%20L76%2062%20L102%2091%20L134%20101%20L157%2059%27%2F%3E%3Cpath%20d%3D%27M16%2010%20L25%2036%20L43%2086%20L79%20126%20L124%20140%20L156%2082%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M160%200%20L111%2064%27%20stroke%3D%27%23a9a9a9%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cg%20stroke%3D%27%23211c18%27%20stroke-width%3D%271.6%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M104%2071%20q-18%20-7%20-31%20-3%27%2F%3E%3Cpath%20d%3D%27M105%2074%20q-21%200%20-33%209%27%2F%3E%3Cpath%20d%3D%27M105%2078%20q-18%206%20-28%2017%27%2F%3E%3Cpath%20d%3D%27M106%2081%20q-14%2011%20-20%2023%27%2F%3E%3Cpath%20d%3D%27M117%2071%20q15%20-8%2027%20-6%27%2F%3E%3Cpath%20d%3D%27M118%2074%20q19%20-2%2031%204%27%2F%3E%3Cpath%20d%3D%27M118%2078%20q16%206%2027%2015%27%2F%3E%3Cpath%20d%3D%27M117%2081%20q12%2011%2016%2023%27%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%27111%27%20cy%3D%2779%27%20rx%3D%278.5%27%20ry%3D%2710.5%27%20fill%3D%27%23211c18%27%2F%3E%3Ccircle%20cx%3D%27111%27%20cy%3D%2767%27%20r%3D%275%27%20fill%3D%27%23211c18%27%2F%3E%3Ccircle%20cx%3D%27109%27%20cy%3D%2766%27%20r%3D%271%27%20fill%3D%27%23d9d2c4%27%2F%3E%3Ccircle%20cx%3D%27113%27%20cy%3D%2766%27%20r%3D%271%27%20fill%3D%27%23d9d2c4%27%2F%3E%3C%2Fsvg%3E") no-repeat top right / contain; pointer-events:none; } .ocfb-note-title { margin: 2px 0 10px; font-family: var(--hand); font-weight: 700; font-size: 1.32em; line-height: 1.12; letter-spacing:.2px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-wrap: balance; } .ocfb-note-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding-top:7px; border-top:1px dashed color-mix(in srgb, var(--ink) 35%, transparent); font-size:.82em; } .ocfb-note-who { display:inline-flex; align-items:center; gap:6px; min-width:0; overflow:hidden; } .ocfb-note-owner { font-family: var(--hand); font-weight:700; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ocfb-note-age { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:999px; background: color-mix(in srgb, var(--ink) 12%, transparent); color: color-mix(in srgb, var(--ink) 90%, #000); font-family:'Kalam', var(--hand); font-size:.92em; white-space:nowrap; } .ocfb-note-age i { font-size:.9em; opacity:.85; } .ocfb-note-diff { position:absolute; top:-10px; right:-8px; display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 5px; font-family:'Permanent Marker', cursive; font-size:13px; line-height:1; color:#b32020; background: radial-gradient(circle at 50% 45%, #fff 60%, #fff8 100%); border:2px solid #c63333; border-radius: 56% 44% 60% 40% / 50% 56% 44% 50%; transform: rotate(8deg); box-shadow:0 2px 4px rgba(0,0,0,.18); } @container (max-width: 200px) { .ocfb-note { font-size:15px; } .ocfb-note-title { -webkit-line-clamp:3; } } /* ---- Kiosk / wall mode --------------------------------------------------- */ body.ocfb-kiosk .ocfb-page { position: fixed; inset: 0; z-index: 5000; height: 100vh; margin: 0; padding: var(--oc-space-5); background: var(--oc-gray-50); } body.ocfb-kiosk .ocfb-title { font-size: var(--oc-fs-display); } /* ---- Detail modal (centered full overlay — best for a crowd at a wall) --- */ .ocfb-modal-scrim { position: fixed; inset: 0; z-index: 6000; background: rgba(17, 20, 24, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--oc-space-5); animation: ocfb-fade var(--oc-dur-fast) var(--oc-ease); } @keyframes ocfb-fade { from { opacity: 0; } to { opacity: 1; } } .ocfb-modal { width: min(860px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--oc-surface); color: var(--oc-text); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); box-shadow: var(--oc-shadow-lg); animation: ocfb-pop var(--oc-dur-med) var(--oc-ease); } @keyframes ocfb-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } .ocfb-modal-head { display: flex; align-items: flex-start; gap: var(--oc-space-3); padding: var(--oc-space-5) var(--oc-space-6); border-bottom: 1px solid var(--oc-border); } .ocfb-modal-eyebrow { font: 600 var(--oc-fs-xs) var(--oc-font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--oc-text-muted); } .ocfb-modal-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--oc-text-muted); width: 36px; height: 36px; border-radius: var(--oc-radius-sm); font-size: 1.05rem; } .ocfb-modal-close:hover { background: var(--oc-surface-2); color: var(--oc-text); } .ocfb-modal-body { padding: var(--oc-space-5) var(--oc-space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--oc-space-5); } .ocfb-modal-foot { padding: var(--oc-space-4) var(--oc-space-6); border-top: 1px solid var(--oc-border); display: flex; gap: var(--oc-space-3); align-items: center; } .ocfb-modal-foot .ocfb-toolbar-spacer { flex: 1 1 auto; } .ocfb-field { display: flex; flex-direction: column; gap: var(--oc-space-2); } .ocfb-label { font: 600 var(--oc-fs-sm) var(--oc-font-sans); color: var(--oc-text); } .ocfb-input, .ocfb-textarea, .ocfb-select { width: 100%; box-sizing: border-box; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-sm); background: var(--oc-surface); color: var(--oc-text); padding: var(--oc-space-3); font: 400 1rem var(--oc-font-sans); } .ocfb-textarea { min-height: 140px; resize: vertical; line-height: var(--oc-lh-normal); } .ocfb-input:focus, .ocfb-textarea:focus, .ocfb-select:focus { outline: none; box-shadow: var(--oc-shadow-focus); border-color: var(--oc-orange); } /* Status timeline — one segment per lane, width ∝ time spent, tinted by lane hue. */ .ocfb-timeline { display: flex; width: 100%; height: 14px; border-radius: var(--oc-radius-pill); overflow: hidden; background: var(--oc-surface-2); } .ocfb-timeline-seg { height: 100%; min-width: 3px; } .ocfb-timeline-seg[data-lane="Ideas"] { background: var(--oc-gray-500); } .ocfb-timeline-seg[data-lane="Pending"] { background: var(--oc-info); } .ocfb-timeline-seg[data-lane="Working"] { background: var(--oc-orange); } .ocfb-timeline-seg[data-lane="AwaitingFeedback"] { background: var(--oc-amber-600); } .ocfb-timeline-seg[data-lane="DeployReady"] { background: var(--oc-emerald-600); } .ocfb-timeline-seg[data-lane="Shipped"] { background: var(--oc-emerald-700); } .ocfb-timeline-legend { display: flex; flex-wrap: wrap; gap: var(--oc-space-3); margin-top: var(--oc-space-3); } .ocfb-timeline-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--oc-fs-xs); color: var(--oc-text-muted); } .ocfb-timeline-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } /* ---- Analysis panel (Phase 1 stub) -------------------------------------- */ .ocfb-analysis-stub { border: 1px dashed var(--oc-border); border-radius: var(--oc-radius-md); padding: var(--oc-space-5); text-align: center; color: var(--oc-text-muted); background: var(--oc-surface-muted); } .ocfb-analysis-stub i { font-size: 1.6rem; color: var(--oc-orange-text); display: block; margin-bottom: var(--oc-space-2); } /* ---- Reporting view ------------------------------------------------------ */ .ocfb-report { display: flex; flex-direction: column; gap: var(--oc-space-6); overflow-y: auto; } .ocfb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--oc-space-4); } .ocfb-kpi { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); padding: var(--oc-space-4); box-shadow: var(--oc-shadow-sm); } .ocfb-kpi-num { font: 800 var(--oc-fs-h1) var(--oc-font-sans); color: var(--oc-text); } .ocfb-kpi-lbl { font-size: var(--oc-fs-sm); color: var(--oc-text-muted); } .ocfb-report-card { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); padding: var(--oc-space-5); box-shadow: var(--oc-shadow-sm); } .ocfb-report-card h3 { margin: 0 0 var(--oc-space-4); font: 700 var(--oc-fs-h3) var(--oc-font-sans); color: var(--oc-text); } .ocfb-bar-row { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: var(--oc-space-3); margin-bottom: var(--oc-space-3); } .ocfb-bar-label { font-size: var(--oc-fs-sm); color: var(--oc-text-muted); } .ocfb-bar-track { background: var(--oc-surface-2); border-radius: var(--oc-radius-pill); height: 12px; overflow: hidden; } .ocfb-bar-fill { height: 100%; border-radius: var(--oc-radius-pill); background: var(--oc-orange); } .ocfb-bar-fill[data-lane="Ideas"] { background: var(--oc-gray-500); } .ocfb-bar-fill[data-lane="Pending"] { background: var(--oc-info); } .ocfb-bar-fill[data-lane="Working"] { background: var(--oc-orange); } .ocfb-bar-fill[data-lane="AwaitingFeedback"] { background: var(--oc-amber-600); } .ocfb-bar-fill[data-lane="DeployReady"] { background: var(--oc-emerald-600); } .ocfb-bar-fill[data-lane="Shipped"] { background: var(--oc-emerald-700); } .ocfb-bar-val { font: 600 var(--oc-fs-sm) var(--oc-font-sans); color: var(--oc-text); min-width: 56px; text-align: right; } .ocfb-spark { display: flex; align-items: flex-end; gap: 6px; height: 120px; } .ocfb-spark-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ocfb-spark-bar { width: 100%; background: var(--oc-emerald-600); border-radius: var(--oc-radius-xs) var(--oc-radius-xs) 0 0; min-height: 2px; } .ocfb-spark-lbl { font-size: 10px; color: var(--oc-text-muted); } /* ---- Responsive: phone ---------------------------------------------------- */ @media (max-width: 768px) { .ocfb-page { height: calc(100vh - var(--oc-shell-topbar-h) - var(--oc-shell-bottomnav-h)); } .ocfb-modal { max-height: 100%; height: 100%; width: 100%; border-radius: 0; } .ocfb-modal-scrim { padding: 0; } } /* ---- Dark-mode tweaks (board chrome only; notes are intentional constants) - */ /* (lane labels are now written straight on the board with no pill — a box-shadow would cast a floating rectangle behind transparent text, so it's removed.) */ [data-oc-theme="dark"] .ocfb-modal-scrim { background: rgba(0, 0, 0, 0.6); } [data-oc-theme="dark"] body.ocfb-kiosk .ocfb-page { background: var(--oc-gray-50); } /* ---- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .ocfb-note { transition: none; } .ocfb-note.is-aging { animation: none; } .ocfb-modal, .ocfb-modal-scrim { animation: none; } }