/* Self-contained styles for the marketing "Things you like" looping treemap. * Everything is scoped under .rn-treemap-embed so it can't leak into the host page. * Ported from the app (static/styles.css .trending-treemap / .treemap-* + the dark * 20-pillar palette). The app's --tier-accent (normally off ) * is inlined here as --rn-accent (marketing green) — change that one line to retint. */ .rn-treemap-embed { /* --- knobs --- */ --rn-accent: #4ade80; /* marketing green (date ticker / progress) */ --rn-treemap-h: 340px; /* hero height; override per layout */ /* --- dark 20-pillar palette (fixed identity per pillar; matches the app) --- */ --pillar-ai: #5CE6FF; --pillar-travel: #56C7F5; --pillar-education: #64B5F6; --pillar-technology: #4D8FE8; --pillar-business: #8893F2; --pillar-psychology: #B79CFF; --pillar-news-society: #B388E8; --pillar-careers: #D88FD8; --pillar-music: #E879C6; --pillar-creative-design: #FB8FB0; --pillar-entertainment: #FB7185; --pillar-marketing: #F59E0B; --pillar-food-drink: #FBBF24; --pillar-personal-development: #F2C94C; --pillar-sports: #B4E157; --pillar-finance: #4ADE80; --pillar-health-fitness: #34D399; --pillar-science: #C77BE8; --pillar-productivity: #5EEAD4; --pillar-home-diy: #D6A06A; /* --- foundation tokens (dark) the treemap chrome needs --- */ --rn-border: rgba(255, 255, 255, 0.10); --rn-surface-2: rgba(255, 255, 255, 0.06); --rn-text-meta: rgba(255, 255, 255, 0.55); --rn-type-meta-size: 0.72rem; display: block; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* treemap.js sizes each tile to EXACTLY tile the container, assuming padding sits INSIDE that box — i.e. border-box. The app gets this from a global reset; the standalone bundle must scope its own, or tiles render content-box and the bottom- anchored labels get pushed down + clipped. */ .rn-treemap-embed, .rn-treemap-embed *, .rn-treemap-embed *::before, .rn-treemap-embed *::after { box-sizing: border-box; } /* The treemap surface — a rounded, hairline-bordered block; tiles clip to it. */ .rn-treemap-embed .rn-treemap { position: relative; width: 100%; height: var(--rn-treemap-h); border: 0.5px solid var(--rn-border); border-radius: 12px; overflow: hidden; } @media (max-width: 560px) { .rn-treemap-embed .rn-treemap { height: 300px; } } /* Each tile = a pillar, area ∝ count, in its fixed pillar colour (var(--c)) with a gentle WinDirStat cushion. Positioned by treemap.js (inline left/top/width/height). */ .rn-treemap-embed .treemap-tile { position: absolute; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 10px; color: #fff; text-decoration: none; background: radial-gradient(135% 135% at 28% 22%, rgba(255,255,255,.18), rgba(255,255,255,0) 46%), radial-gradient(150% 150% at 76% 86%, rgba(0,0,0,.22), rgba(0,0,0,0) 54%), var(--c); } .rn-treemap-embed .treemap-tile--empty { opacity: 0; pointer-events: none; } .rn-treemap-embed .treemap-nm { font-size: 0.72rem; font-weight: 600; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; transition: opacity 200ms ease; } .rn-treemap-embed .treemap-tile.sm { padding: 4px 6px; } .rn-treemap-embed .treemap-tile.vert { padding: 8px 6px; } .rn-treemap-embed .treemap-tile.vert .treemap-nm { display: block; -webkit-line-clamp: unset; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; } .rn-treemap-embed .treemap-tile.tiny .treemap-nm { display: none; } /* Tiles tween between timeline frames ONLY while the loop is animating (so the initial paint + window resizes stay instant). */ .rn-treemap-embed .rn-treemap--animating .treemap-tile { transition: left 300ms ease, top 300ms ease, width 300ms ease, height 300ms ease, opacity 300ms ease; } @media (prefers-reduced-motion: reduce) { .rn-treemap-embed .rn-treemap--animating .treemap-tile { transition: none; } } /* Subtle date ticker under the treemap (the "grows over time" cue). */ .rn-treemap-embed .rn-treemap-date { display: flex; justify-content: flex-end; margin-top: 10px; padding: 0 2px; min-height: 1em; } .rn-treemap-embed .rn-treemap-date span { font-size: var(--rn-type-meta-size); letter-spacing: 0.04em; color: var(--rn-accent); font-variant-numeric: tabular-nums; opacity: 0.9; }