/* weekly-report.css — full-screen weekly "Wrapped" report. Namespaced .wkr-*. Cosmic-glass on base.css tokens. Appended to (escapes Easy-View zoom). */ .wkr-overlay { position: fixed; inset: 0; z-index: 2147483400; display: flex; flex-direction: column; background: radial-gradient(circle at 28% 16%, var(--col-navy), var(--col-void) 72%); color: var(--text-primary); font-family: var(--font-body, Inter, system-ui, sans-serif); opacity: 0; transition: opacity 0.3s var(--ease-out); overflow: hidden; } .wkr-overlay.is-open { opacity: 1; } .wkr-overlay::after { /* subtle drifting particle sheen */ content: ''; position: absolute; inset: -20%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(56,189,248,0.10), transparent 60%); animation: wkr-drift 18s ease-in-out infinite alternate; } @keyframes wkr-drift { from { transform: translate(-6%, -4%); } to { transform: translate(6%, 5%); } } .wkr-head { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; } .wkr-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .wkr-head-actions { display: inline-flex; align-items: center; gap: 8px; } .wkr-pdf { padding: 7px 14px; border-radius: 100px; border: 1px solid var(--glass-border-2); background: var(--glass-2); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); } .wkr-pdf:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); } .wkr-close { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-2); color: var(--text-muted); cursor: pointer; transition: all var(--t-fast); } .wkr-close:hover { color: var(--accent-rose); border-color: var(--accent-rose); } .wkr-track { position: relative; z-index: 1; flex: 1 1 auto; display: flex; width: 100%; min-height: 0; transition: transform 0.55s var(--ease-spring, cubic-bezier(0.34, 1.2, 0.4, 1)); will-change: transform; } .wkr-section { flex: 0 0 100%; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 16px 24px 90px; overflow-y: auto; } .wkr-sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 6px; } .wkr-empty { color: var(--text-dim); font-size: 13px; padding: 20px; } /* grade palette */ .g-a { --grade: var(--accent-emerald); } .g-b { --grade: var(--accent-cyan); } .g-c { --grade: var(--accent-amber); } .g-d { --grade: #fb923c; } .g-f { --grade: var(--accent-rose); } /* hero */ .wkr-hero-range { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .wkr-hero-label { font-size: 13px; color: var(--text-muted); } .wkr-hero-scorewrap { display: flex; align-items: baseline; gap: 12px; color: var(--grade, var(--accent-cyan)); } .wkr-hero-score { font-family: var(--font-display, inherit); font-size: clamp(76px, 15vw, 172px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; filter: drop-shadow(0 4px 30px currentColor); } .wkr-hero-grade { font-size: clamp(30px, 5vw, 46px); font-weight: 700; opacity: 0.85; } .wkr-hero-status { max-width: 440px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; } /* bars (breakdowns, leaderboard, alerts) */ .wkr-bar { position: relative; display: inline-block; flex: 1 1 auto; height: 8px; border-radius: 100px; background: var(--glass-2); overflow: hidden; min-width: 60px; } .wkr-bar-fill { display: block; height: 100%; width: 0; border-radius: 100px; transition: width 0.8s var(--ease-out); } .wkr-bar-fill.is-in { width: var(--to); } .c-cyan { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-teal)); } .c-amber { background: linear-gradient(90deg, var(--accent-amber), #fb923c); } .c-rose { background: linear-gradient(90deg, var(--accent-rose), var(--accent-purple)); } /* celebrate (employee / most improved) */ .wkr-celebrate { } .wkr-crown { font-size: 40px; filter: drop-shadow(0 0 18px var(--accent-amber)); animation: wkr-pop 0.6s var(--ease-spring, ease) both; } .wkr-avatar { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display, inherit); font-size: 40px; font-weight: 700; color: var(--col-void); background: linear-gradient(140deg, var(--accent-cyan), var(--accent-violet)); box-shadow: 0 12px 44px rgba(56,189,248,0.4); animation: wkr-pop 0.6s var(--ease-spring, ease) both; } .wkr-avatar.alt { background: linear-gradient(140deg, var(--accent-emerald), var(--accent-cyan)); box-shadow: 0 12px 44px rgba(52,211,153,0.4); } @keyframes wkr-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } } .wkr-big-name { font-family: var(--font-display, inherit); font-size: clamp(30px, 6vw, 54px); font-weight: 700; } .wkr-cite { color: var(--text-secondary); font-size: 14px; max-width: 420px; } .wkr-bd { width: min(420px, 90%); display: flex; flex-direction: column; gap: 9px; margin-top: 8px; } .wkr-bd-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); } .wkr-bd-l { text-align: left; } .wkr-bd-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .wkr-improve-row { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display, inherit); font-weight: 700; } .wkr-improve-old { font-size: 34px; color: var(--text-dim); } .wkr-improve-arrow { color: var(--accent-cyan); } .wkr-improve-new { font-size: 46px; color: var(--accent-emerald); } .wkr-improve-delta { font-size: 15px; padding: 3px 10px; border-radius: 100px; background: rgba(52,211,153,0.16); color: var(--accent-emerald); } /* leaderboard */ .wkr-lb { width: min(560px, 92%); display: flex; flex-direction: column; gap: 6px; } .wkr-lb-row { display: grid; grid-template-columns: 24px 30px 1fr 90px 40px 44px; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); background: var(--glass-1); border: 1px solid transparent; } .wkr-lb-row.is-me { border-color: var(--accent-cyan); background: var(--glow-cyan); } .wkr-lb-rank { font-family: var(--font-display, inherit); font-weight: 700; color: var(--text-muted); } .wkr-lb-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--col-void); background: linear-gradient(140deg, var(--accent-cyan), var(--accent-violet)); } .wkr-lb-name { text-align: left; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wkr-lb-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .wkr-trend { font-size: 10px; font-weight: 700; text-align: right; } .wkr-trend.up { color: var(--accent-emerald); } .wkr-trend.down { color: var(--accent-rose); } .wkr-trend.flat { color: var(--text-dim); } /* badges */ .wkr-badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); gap: 14px; justify-content: center; max-width: 640px; } .wkr-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border-radius: var(--r-lg, 16px); background: var(--glass-2); border: 1px solid var(--glass-border-2); animation: wkr-pop 0.5s var(--ease-spring, ease) both; } .wkr-badge-ico { font-size: 34px; filter: drop-shadow(0 0 12px rgba(56,189,248,0.5)); } .wkr-badge-label { font-size: 12.5px; font-weight: 700; } .wkr-badge-who { font-size: 10.5px; color: var(--text-dim); } /* room grades */ .wkr-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); gap: 12px; justify-content: center; max-width: 720px; } .wkr-room { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: var(--r-lg, 16px); background: var(--glass-2); border: 1px solid var(--glass-border); border-top: 3px solid var(--grade, var(--accent-cyan)); } .wkr-room.is-trophy { box-shadow: 0 10px 40px rgba(251,191,36,0.22); } .wkr-room-trophy { position: absolute; top: -12px; right: -8px; font-size: 22px; } .wkr-room-grade { font-family: var(--font-display, inherit); font-size: 40px; font-weight: 700; line-height: 1; color: var(--grade, var(--accent-cyan)); } .wkr-room-name { font-weight: 700; font-size: 13px; } .wkr-room-score { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .wkr-room-insight { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; } /* highlights */ .wkr-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 170px)); gap: 14px; justify-content: center; max-width: 640px; } .wkr-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; border-radius: var(--r-lg, 16px); background: var(--glass-2); border: 1px solid var(--glass-border-2); } .wkr-tile-val { font-family: var(--font-display, inherit); font-size: 40px; font-weight: 700; color: var(--accent-cyan); font-variant-numeric: tabular-nums; } .wkr-tile-label { font-size: 11px; color: var(--text-muted); } .wkr-champs { display: flex; gap: 22px; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; justify-content: center; } .wkr-champs b { color: var(--text-primary); } /* alert breakdown */ .wkr-ab { width: min(460px, 90%); display: flex; flex-direction: column; gap: 12px; } .wkr-ab-row { display: grid; grid-template-columns: 84px 1fr 30px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); } .wkr-ab-l { text-align: left; } .wkr-ab-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); } /* 8-week trend */ .wkr-trend-wrap { width: min(420px, 92%); } .wkr-trend-svg { width: 100%; height: auto; } .wkr-trend-line { fill: none; stroke: var(--accent-cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: wkr-draw 1.1s var(--ease-out) 0.2s forwards; } @keyframes wkr-draw { to { stroke-dashoffset: 0; } } .wkr-trend-svg circle { fill: var(--accent-cyan); opacity: 0.6; } .wkr-trend-svg circle.wkr-trend-cur { fill: var(--accent-amber); opacity: 1; } .wkr-trend-cap { font-size: 12px; color: var(--text-dim); max-width: 340px; } /* best note + tony */ .wkr-note-card { max-width: 520px; padding: 24px; border-radius: var(--r-lg, 16px); background: var(--glass-2); border: 1px solid var(--glass-border-2); border-left: 3px solid var(--accent-violet); } .wkr-note-quote { font-size: 17px; line-height: 1.6; color: var(--text-primary); font-style: italic; } .wkr-note-by { margin-top: 12px; font-size: 12px; color: var(--text-dim); } .wkr-tony-msg { max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); font-style: italic; } .wkr-tony-input { width: min(520px, 92%); padding: 12px 14px; border-radius: var(--r-md); background: var(--glass-1); border: 1px solid var(--glass-border-2); color: var(--text-primary); font: inherit; font-size: 14px; resize: vertical; outline: none; } .wkr-tony-input:focus { border-color: var(--accent-cyan); } .wkr-tony-foot { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; } .wkr-tony-save { padding: 8px 16px; border-radius: 100px; border: 0; background: var(--accent-cyan); color: var(--col-void); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .wkr-tony-status { font-size: 12px; color: var(--accent-emerald); } /* next week */ .wkr-nw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap: 12px; justify-content: center; max-width: 720px; } .wkr-nw-card { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--glass-border); text-align: left; } .wkr-nw-when { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-cyan); } .wkr-nw-label { font-size: 13px; color: var(--text-secondary); } .wkr-fin { margin-top: 22px; font-family: var(--font-display, inherit); font-size: 20px; font-weight: 700; color: var(--text-primary); } /* nav */ .wkr-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--glass-border-2); background: var(--glass-2); color: var(--text-secondary); cursor: pointer; transition: all var(--t-fast); } .wkr-nav:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); } .wkr-prev { left: 18px; } .wkr-next { right: 18px; } .wkr-nav.is-hidden { opacity: 0; pointer-events: none; } .wkr-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 8px; } .wkr-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--glass-3); cursor: pointer; transition: all var(--t-fast); } .wkr-dot.is-on { background: var(--accent-cyan); box-shadow: 0 0 8px var(--glow-cyan); transform: scale(1.2); } /* light theme — the overlay bg is a dark cosmic gradient by design; keep it dark in both themes (a takeover surface), just soften shadows handled by tokens. */ @media (max-width: 768px) { .wkr-nav { width: 38px; height: 38px; } .wkr-lb-row { grid-template-columns: 20px 26px 1fr 60px 34px 38px; gap: 7px; padding: 8px; } .wkr-section { padding: 14px 16px 84px; } } @media (prefers-reduced-motion: reduce) { .wkr-track { transition: none; } .wkr-overlay::after, .wkr-crown, .wkr-avatar, .wkr-badge { animation: none; } .wkr-trend-line { animation: none; stroke-dashoffset: 0; } .wkr-bar-fill { transition: none; } } /* PDF export — print all sections stacked, hide the app + nav chrome */ @media print { body { display: none !important; } .wkr-overlay { position: static !important; opacity: 1 !important; height: auto; background: #fff; color: #111; } .wkr-overlay::after { display: none; } .wkr-track { display: block !important; transform: none !important; height: auto; } .wkr-section { page-break-after: always; height: auto; min-height: 40vh; } .wkr-nav, .wkr-dots, .wkr-close, .wkr-pdf { display: none !important; } .wkr-hero-score, .wkr-room-grade, .wkr-tile-val, .wkr-big-name { color: #111 !important; filter: none !important; } }