/* ============================================================================ tokens.css — YCGlobe design tokens ---------------------------------------------------------------------------- Every value below is transcribed verbatim from _source/index.html. Provenance is noted per block as (CSS Lnn) or (JS Lnn) line references into that file. Nothing here is invented, rounded or "harmonised" — where the source is irregular (it often is), the irregularity is preserved and noted. Load order: tokens.css first, then any feature stylesheet. ========================================================================== */ :root{ /* == 1. BRAND CORE ========================================================= The seven variables the original declares in its own :root (CSS L31). At runtime JS re-writes all seven from CFG.theme (JS L941-943) with identical values, so these are both the static and the effective set. */ --brand: #FB651E; /* primary orange — buttons, accents, active states */ --paper: #FFF7F0; /* warm off-white page ground */ --border: #f0d9c6; /* warm tan hairline */ --ink: #20140c; /* near-black brown — body text */ --graphite: #6b5443; /* warm grey-brown — secondary text */ --acc: #FB651E; /* alias of --brand; used on section labels */ --regdot: #EF8438; /* region dot fill */ /* Brand orange also ships as the PWA theme-color #F5651E (HTML L17). That is a one-step-off duplicate of --brand in the source; --brand is canonical. */ --brand-meta: #F5651E; /* Brand tints the source derives with color-mix(). Named here so features reference them instead of re-deriving. Percentages are the real ones. */ --brand-06: color-mix(in srgb, var(--brand) 6%, #fff); /* db row hover */ --brand-07: color-mix(in srgb, var(--brand) 7%, #fff); /* dbsub-co hover */ --brand-08: color-mix(in srgb, var(--brand) 8%, #fff); /* chip hover */ --brand-09: color-mix(in srgb, var(--brand) 9%, #fff); /* sitem hover */ --brand-10: color-mix(in srgb, var(--brand) 10%, #fff); /* dbsug row hover */ --brand-12: color-mix(in srgb, var(--brand) 12%, #fff); /* icon-btn hover */ --brand-14: color-mix(in srgb, var(--brand) 14%, #fff); /* tile hover */ --brand-16: color-mix(in srgb, var(--brand) 16%, #fff); /* rowflash start */ --brand-20: color-mix(in srgb, var(--brand) 20%, #fff); /* panel border */ --brand-22: color-mix(in srgb, var(--brand) 22%, #fff); /* modal border */ --brand-24: color-mix(in srgb, var(--brand) 24%, #fff); /* resetFly border */ --brand-30: color-mix(in srgb, var(--brand) 30%, #fff); /* dbglobe border */ --brand-35: color-mix(in srgb, var(--brand) 35%, #fff); /* unipin border */ --brand-38: color-mix(in srgb, var(--brand) 38%, #fff); /* hb-fill.lite */ --brand-45: color-mix(in srgb, var(--brand) 45%, #fff); /* mail btn border */ --brand-55: color-mix(in srgb, var(--brand) 55%, #fff); /* rz-grab, focus */ --brand-60: color-mix(in srgb, var(--brand) 60%, #fff); /* rz-top handle */ --brand-88: color-mix(in srgb, var(--brand) 88%, #000); /* dbBtn hover */ /* Paper tints — every glass panel is paper-over-transparent. */ --paper-62: color-mix(in srgb, var(--paper) 62%, transparent); /* resetFly */ --paper-66: color-mix(in srgb, var(--paper) 66%, transparent); /* panel */ --paper-70: color-mix(in srgb, var(--paper) 70%, transparent); /* sidebar */ --paper-72: color-mix(in srgb, var(--paper) 72%, transparent); /* tile btns */ --paper-78: color-mix(in srgb, var(--paper) 78%, transparent); /* tipop */ --paper-93: color-mix(in srgb, var(--paper) 93%, transparent); /* dbpanel */ --paper-94: color-mix(in srgb, var(--paper) 94%, transparent); /* tipop arw */ --paper-95: color-mix(in srgb, var(--paper) 95%, transparent); /* fbpanel */ --paper-97: color-mix(in srgb, var(--paper) 97%, transparent); /* dbhead */ /* == 2. MAP / GLOBE THEME ================================================== CFG.theme (JS L920-923). Applied to the OpenFreeMap "positron" style on style.load (JS L1037-1043) and to map.setSky() (JS L1032-1035). */ --map-ocean: #FFDBBB; /* fill-color of the "water" layer */ --map-land: #F0873C; /* background-color of every background layer */ --map-land-alt: #EF8438; /* landcover|landuse|park|wood|sand fills */ --map-boundary: #d9691f; /* line-color of every /boundary/ line layer */ --map-label-text: #5a2c0e; /* text-color on every symbol layer */ --map-label-halo: #FFE9D6; /* text-halo-color on every symbol layer */ --map-sky: #FFE3CC; /* setSky sky-color */ --map-horizon: #FFEEDD; /* setSky horizon-color */ --map-fog: #FFF3E9; /* setSky fog-color */ /* Non-colour map constants that travel with the theme (JS L1020-1064) */ --map-style-url: "https://tiles.openfreemap.org/styles/positron"; --map-center: -38 22; /* CFG.center [lng,lat] */ --map-zoom: 2.0; /* CFG.zoom */ --map-min-zoom: 1.2; --map-logo-opacity: 0.16; /* brandlogo raster-opacity */ --map-dot-opacity: 0.92; /* dots circle-opacity */ --map-flow-base-opacity: 0.14; --map-flow-opacity: 0.85; /* == 3. INDUSTRY COLOUR SCALE ============================================== const IND (JS L932-937). Drives the map dot fill, the .dbind badge and every industry legend swatch. Nine categories, one fallback. */ --ind-b2b: #1F3A93; --ind-consumer: #7A2FB0; --ind-fintech: #0E7C5A; --ind-healthcare: #C0392B; --ind-industrials: #1A1A1A; --ind-realestate: #5C3A16; /* "Real Estate and Construction" */ --ind-education: #1C6FA8; --ind-government: #3d566e; --ind-unspecified: #8a765f; --ind-fallback: #8a765f; /* colorExpr default (JS L1051) */ /* == 4. STATUS & SEMANTIC COLOURS ========================================== */ --ok: #16a34a; /* "Active" status dot (CSS L548, HTML L748/810) */ --ok-alt: #2e9e5b; /* .hire "hiring" badge */ --ok-text: #1c7a4f; /* .fb-note.ok */ --danger: #e4141f; /* .offbanner text; inactive dot (JS L1712) */ --danger-strong: #ff0000; /* .reddot, .rb-dot.off, offline dot stroke */ --danger-text: #c0392b; /* .fb-note.err */ --invalid-mail: #d64545; /* .ec-mail input.bad */ --invalid-form: #d9534f; /* #fbText.bad, #fbEmail.bad */ /* Entity key colours — coloured pills in the database search dropdown (.dbsug .ds-k, CSS L547-548) and the .subind company badge. */ --key-founder: #FB651E; /* .ds-k.f — same value as --brand */ --key-company: #2C6E8F; /* .ds-k.c and .subind */ --key-uni: #7c3aed; /* .ds-k.u */ --key-industry: #1B2A6B; /* .ds-k.i */ --key-location: #8a765f; /* .ds-k.l */ --key-batch: #16a34a; /* .ds-k.b */ --linkedin: #0a66c2; /* .fcard a.li, .subli */ /* == 5. NEUTRALS & ONE-OFF GREYS =========================================== */ --white: #fff; /* by far the most-used literal (99 uses) */ --black: #000; --divider-warm: #f3ece5; /* .sitem bottom border */ --img-placeholder: #eee; /* .fcard img / .influ-row .ip empty bg */ --tour-ink: #1A1D21; /* #tourTip .tt-title / .tt-lead */ --tour-muted: #5a6470; /* #tourTip .tt-type */ --tour-skip: #999; /* #tourTip .tt-skip */ --tour-dot-off: #ddd; /* #tourTip .tt-dots i */ --pulse-default: #1e1e1e; /* .pulse var(--pc) fallback */ --particle-crimson: #c24a0a; /* CRIMSON, entry click detonation (JS L2452) */ /* Ink-based translucent surfaces */ --ink-tip: rgba(32,20,12,0.94); /* .tip map tooltip */ --ink-sctip: rgba(32,20,12,0.92); /* #sctip chart tooltip */ --scrim-modal: rgba(20,12,6,0.42); /* #dbmodal / #fbmodal / #bmcmodal */ --scrim-tour: rgba(18,11,6,0.5); /* #tour.greet #tourScrim */ --scrim-hole: rgba(18,11,6,0.55); /* #tourHole 9999px spread */ --scrim-mobile: rgba(0,0,0,0.4); /* #moscrim */ --ini-ink: rgba(0,0,0,0.6); /* initials-avatar letters */ /* Initials-avatar pastel palette — RZ_COLORS (JS L1131), indexed by a char-code hash of the entity name (colOf, JS L1133). 12 values. */ --ini-1: #FCE1D6; --ini-2: #E7E0FA; --ini-3: #D6ECFB; --ini-4: #DAF3E4; --ini-5: #FDECC8; --ini-6: #FADAE4; --ini-7: #E3E9D7; --ini-8: #D9EFF0; --ini-9: #F3DEEA; --ini-10: #E6E9F5; --ini-11: #FBE4CF; --ini-12: #E0F0E8; /* == 6. GLASS SURFACES ===================================================== The white-over-blur recipe repeated across cards, chips and buttons. */ --glass-fill-50: rgba(255,255,255,0.50); /* .rz-card, .socbtn, .fcard */ --glass-fill-52: color-mix(in srgb, #fff 52%, transparent); /* db controls */ --glass-fill-55: color-mix(in srgb, #fff 55%, transparent); /* .ftag */ --glass-fill-58: color-mix(in srgb, #fff 58%, transparent); /* .kpi .scard */ --glass-fill-60: color-mix(in srgb, #fff 60%, transparent); /* .fb-kind */ --glass-fill-62: rgba(255,255,255,0.62); /* .tsearch .mag, .rzone */ --glass-fill-66: color-mix(in srgb, #fff 66%, transparent); /* #fbText */ --glass-fill-68: rgba(255,255,255,0.68); /* .dbsub */ --glass-fill-72: rgba(255,255,255,0.72); /* .rz-card:hover, .cb-msg.bot */ --glass-fill-78: color-mix(in srgb, #fff 78%, transparent); /* focus state */ --glass-fill-85: rgba(255,255,255,0.85); /* .ec-mail input, .unipin-label */ --glass-fill-90: rgba(255,255,255,0.9); /* .dbsug */ --glass-fill-92: rgba(255,255,255,0.92); /* .unipin-db */ --glass-edge-60: rgba(255,255,255,0.6); /* .socbtn, .fcard, .rz-card */ --glass-edge-65: rgba(255,255,255,0.65); /* .estw */ --glass-edge-70: rgba(255,255,255,0.7); /* .tsearch, .rzone */ --glass-edge-75: rgba(255,255,255,0.75); /* .kpi, .scard */ --glass-edge-80: rgba(255,255,255,0.8); /* .dbsearch input, .dbsel */ --glass-edge-85: rgba(255,255,255,0.85); /* .estw top edge, .ftag */ --glass-edge-90: rgba(255,255,255,0.9); /* #tourHole */ --estw-gradient: linear-gradient(135deg, rgba(255,251,246,0.5), rgba(255,251,246,0.18)); /* == 7. BACKDROP BLUR SCALE ================================================ Blur radius always pairs with a saturate() boost. Phones override .panel down to blur(10px) saturate(1.15) — six 18px layers over WebGL jank. */ --blur-xs: blur(3px); /* modal scrims */ --blur-sm: blur(7px); /* tour greet scrim */ --blur-8: blur(8px); /* .tsearch .mag */ --blur-card: blur(8px) saturate(1.1); /* .rz-card */ --blur-10: blur(10px); /* .dbhead, #mofilter */ --blur-md: blur(10px) saturate(1.15); /* db controls, mobile panels */ --blur-kpi: blur(12px) saturate(1.15); /* .kpi, .scard */ --blur-tile: blur(12px) saturate(1.2); /* #dbBtn and friends */ --blur-14: blur(14px); /* .dbsug */ --blur-lg: blur(14px) saturate(1.2); /* .rzone, #resetFly, .tipop */ --blur-panel: blur(18px) saturate(1.2); /* .panel, #chatbox */ --blur-est: blur(18px) saturate(1.35); /* .estw — highest saturation */ --blur-sidebar: blur(20px) saturate(1.3); /* .sidebar */ --blur-detail: blur(22px) saturate(1.25); /* .detail */ --blur-xl: blur(24px) saturate(1.25); /* .dbpanel */ /* == 8. TYPOGRAPHY ========================================================= Two families only, plus a mono for numerals. Inter is the body/default (CSS L35); Space Grotesk is the display / UI-label face. */ --font-body: "Inter", system-ui, sans-serif; --font-display: "Space Grotesk", system-ui, sans-serif; --font-mono: ui-monospace, "IBM Plex Mono", monospace; --font-mono-short: ui-monospace, monospace; /* used interchangeably */ --font-particle: 800 150px 'Space Grotesk','Inter',system-ui,sans-serif; /* entry canvas raster JS L2461 */ /* Type scale — every distinct font-size in the sheet. Note the half-pixel steps: this is a 0.5px scale, not a 4px one. */ --fs-3xs: 8px; /* #mofilter .mf-grp */ --fs-2xs: 8.5px; /* .estx-ini */ --fs-xs: 9px; /* .badge, .subind, .ds-k */ --fs-xs-p: 9.5px; /* .rzc-ini, .rzc-co, .hire, #mofilter .mfc */ --fs-sm: 10px; /* .grp .lbl, .fh, .rb-head, .est-l, .chip */ --fs-sm-p: 10.5px; /* .ec-note, .fmeta, .influ-co, .ftag, .dbhead .dbc */ --fs-md: 11px; /* .head p, .kv, .sub, .count, .uni .ct */ --fs-md-p: 11.5px; /* .hb-l, .tipop, #resetFly, mobile panel titles */ --fs-base: 12px; /* .search input, select, .ph-sub, .cb-msg */ --fs-base-p: 12.5px; /* .ec-sub, .chk, .snm, .body p, .dbrow .dbc */ --fs-lg: 13px; /* .fn, .fb-body inputs, .sc-t, #fbSend */ --fs-lg-p: 13.5px; /* .ec-btn, .ph-title, .tt-lead */ --fs-xl: 14px; /* .rz-logo span, .rzone .rz-mag */ --fs-2xl: 15px; /* .ph-btn, mobile .detail h2 */ --fs-16: 16px; /* iOS no-zoom input floor; .tt-title */ --fs-17: 17px; /* .detail h2, .flogo.ini, #tourBtn */ --fs-18: 18px; /* .detail .x */ --fs-19: 19px; /* .head h1, .brandlogo span, .bmchead .x */ --fs-20: 20px; /* #entryCard .ec-title, .dbclose */ --fs-21: 21px; /* .est-n (also mobile .kpi .k-v) */ --fs-26: 26px; /* .kpi .k-v — largest UI size */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* .est-n, #tourBtn, .unipin-badge */ --lh-tight: 1; /* icon buttons, .est-n */ --lh-snug: 1.35; /* .fcard .fmeta */ --lh-body: 1.4; /* .head p, .cb-msg, .cb-greet */ --lh-mail: 1.45; /* #entryCard .ec-sub, #sctip */ --lh-relaxed: 1.5; /* .tt-lead, .tt-type, .tipop, #fbText */ --lh-loose: 1.55; /* .detail .body p, .fb-lead, .ds-hint */ --ls-tight: -0.02em; /* .head h1, .est-n, .kpi .k-v, .detail h2 */ --ls-none: 0; --ls-01: .01em; /* #dbBtn .db-lab */ --ls-05: 0.05em; /* .dbhead .dbc, .ds-k */ --ls-06: 0.06em; /* .detail .chip */ --ls-08: .08em; /* #mofilter .mf-grp */ --ls-09: .09em; /* .est-l, .fb-body label */ --ls-10: 0.1em; /* .badge, .grp .lbl, .fsec .fh */ --ls-12: 0.12em; /* .rb-head */ --ls-16: .16em; /* #entryTitle .et-eyebrow — widest tracking */ --ls-03px: .3px; /* .rz-card .rzc-ini */ /* == 9. SPACING RHYTHM ===================================================== The source is NOT on a 4px grid. Gaps run 2,4,5,6,7,8,9,10,11,12 and paddings freely use odd values (3, 7, 9, 11, 13, 15px). The scale below is the set of values actually in use, kept 1:1. */ --sp-1: 2px; --sp-2: 3px; --sp-3: 4px; --sp-4: 5px; --sp-5: 6px; --sp-6: 7px; --sp-7: 8px; --sp-8: 9px; --sp-9: 10px; --sp-10: 11px; --sp-11: 12px; --sp-12: 13px; --sp-13: 14px; --sp-14: 15px; --sp-15: 16px; --sp-16: 18px; --sp-17: 20px; --sp-18: 24px; --sp-19: 26px; --sp-20: 30px; --sp-21: 34px; --sp-22: 40px; /* The three gaps that carry most of the layout */ --gap-tight: 6px; /* chips, toggles, socrow */ --gap-row: 9px; /* .head .row, .sitem, .panel-head, .influ-row */ --gap-grid: 12px; /* .stat-kpis, .stat-grid */ /* == 10. RADII ============================================================= Full set, ranked by frequency. There is no single "default" — 6px, 8px and 50% dominate; the big glass surfaces sit at 16-18px. */ --r-2: 2px; /* .rz-top::before handle */ --r-3: 3px; /* .uni-bar */ --r-5: 5px; /* .mafbar-logo, mobile .rz-logo */ --r-6: 6px; /* most-used: small avatars, key pills, icon buttons */ --r-7: 7px; /* .chk, .brandlogo, .dbfoto, .influ-row .ip */ --r-8: 8px; /* .tg, .suggest, .socbtn, .tt-next */ --r-9: 9px; /* select, .fcard img, .db-seg, .dbsub-co */ --r-10: 10px; /* .search, .rz-card, .dblogo, #chatin, .dbsel */ --r-11: 11px; /* .fcard, tile buttons, #fbSend, .dbsearch input */ --r-12: 12px; /* .ec-btn, .ec-mail, .tipop, .dbsug, .subind */ --r-13: 13px; /* mobile .estw */ --r-14: 14px; /* #tourTip, .dbglobe */ --r-16: 16px; /* .estw, .panel, #chatbox, #tourHole, #mofilter */ --r-18: 18px; /* .sidebar, .detail, .dbpanel, .fbpanel, .bmcpanel */ --r-20: 20px; /* .chip-f, .tg pills, .unipin-db, .ftag, .dbind */ --r-22: 22px; /* .rzone */ --r-full: 999px; /* .fb-kind */ --r-circle: 50%; /* dots, avatars, rings */ /* Chat bubble asymmetric radii */ --r-bubble-you: 11px 11px 3px 11px; --r-bubble-bot: 11px 11px 11px 3px; --r-bar-fill: 0 4px 4px 0; /* .hb-fill */ /* == 11. ELEVATION / SHADOWS =============================================== Every shadow in the sheet is a downward, heavily-negative-spread soft drop. Grouped by role rather than by an invented 1-5 ladder. */ /* ring / inset accents */ --sh-ring-soft: 0 0 0 3px rgba(0,0,0,0.04); /* .sitem .sdot */ --sh-ring-danger: 0 0 0 3px rgba(255,0,0,0.15); /* .reddot */ --sh-pulse: 0 0 0 2.5px #fff, 0 1px 6px rgba(0,0,0,0.35); /* .pulse */ --sh-tour-hole: 0 0 0 9999px rgba(18,11,6,0.55); /* #tourHole cutout */ /* level 1 — chips, small glass cards */ --sh-1: 0 2px 8px -3px rgba(0,0,0,0.3); /* .unipin-label */ --sh-1-tight: 0 3px 10px -8px rgba(0,0,0,0.3); /* .ftag */ --sh-1-card: 0 3px 10px -5px rgba(0,0,0,0.2); /* .socbtn, .fcard */ --sh-1-rzcard: 0 3px 10px -5px rgba(0,0,0,0.22); /* .rz-card */ --sh-1-mag: 0 3px 10px -4px rgba(0,0,0,0.28); /* .tsearch .mag */ /* level 2 — floating controls */ --sh-2: 0 4px 12px -6px rgba(0,0,0,0.35); /* .unipin-db */ --sh-2-badge: 0 4px 14px -4px rgba(0,0,0,0.4); /* .unipin-badge */ --sh-2-search: 0 4px 14px -6px rgba(0,0,0,0.3); /* .tsearch.open */ --sh-2-inset: 0 6px 18px -14px rgba(0,0,0,0.25); /* db controls */ --sh-2-chart: 0 8px 24px -10px rgba(0,0,0,0.4); /* #sctip */ --sh-2-pill: 0 8px 22px -8px rgba(0,0,0,0.35); /* .rzone */ /* level 3 — tiles, popovers, dropdowns */ --sh-3-kpi: 0 10px 28px -18px rgba(0,0,0,0.22); /* .kpi, .scard */ --sh-3-btn: 0 10px 24px -12px rgba(0,0,0,0.35); /* .ec-btn:hover */ --sh-3-tile: 0 10px 26px -12px rgba(0,0,0,0.4); /* #dbBtn siblings */ --sh-3-reset: 0 10px 26px -14px rgba(0,0,0,0.4); /* #resetFly */ --sh-3-brand: 0 12px 28px -10px color-mix(in srgb, var(--brand) 55%, transparent); /* #dbBtn primary */ --sh-3-tipop: 0 12px 30px -16px rgba(0,0,0,0.35); /* .tipop */ --sh-3-mofilter: 0 12px 34px -16px rgba(0,0,0,0.45); /* #mofilter */ --sh-3-suggest: 0 14px 30px -12px rgba(0,0,0,0.3); /* .suggest */ /* level 4 — large glass panels */ --sh-4-dbsug: 0 16px 40px -16px rgba(0,0,0,0.4); /* .dbsug */ --sh-4-chat: 0 16px 44px -20px rgba(0,0,0,0.45); /* #chatbox */ --sh-4-est: 0 18px 42px -22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.55); /* .estw */ --sh-4-panel: 0 18px 46px -22px rgba(0,0,0,0.4); /* .panel */ --sh-4-sidebar: 0 22px 55px -24px rgba(0,0,0,0.4); /* .sidebar */ --sh-4-detail: 0 22px 55px -24px rgba(0,0,0,0.42); /* .detail */ /* level 5 — hover-lifted / modal */ --sh-5-est-hover: 0 26px 60px -24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6); /* .estw:hover */ --sh-5-tour: 0 20px 60px -18px rgba(0,0,0,0.55); /* #tourTip */ --sh-5-modal: 0 30px 80px -20px rgba(0,0,0,0.5); /* db / fb / bmc */ /* == 12. MOTION ============================================================ Durations are all sub-second except the entry fades. Easing is almost always the CSS default `ease`; one bespoke bezier drives the tour hole. */ --dur-100: .1s; /* .rb-dot transform */ --dur-120: .12s; /* .ec-btn transform / shadow / background */ --dur-140: .14s; /* .ec-mail button background / color */ --dur-150: .15s; /* chevron rotations, .rz-top::before width */ --dur-180: .18s; /* .tsearch input width */ --dur-200: .2s; /* mobile .sidebar opacity / transform */ --dur-280: .28s; /* .estw hover scale */ --dur-300: .3s; /* #tourScrim background / backdrop-filter */ --dur-320: .32s; /* .est-x max-height / opacity / margin reveal */ --dur-350: .35s; /* #tourTip left / top */ --dur-400: .4s; /* #tourHole geometry + opacity */ --dur-550: .55s; /* #entry opacity (the exit fade) */ --dur-600: .6s; /* .tipop opacity */ --dur-700: .7s; /* #entryCard opacity */ --dur-800: .8s; /* #entryTitle opacity; dashboard chrome fade-in */ --dur-1100: 1.1s; /* #entryStats .est opacity — slowest transition */ --delay-card: .1s; /* #entryCard transition-delay */ --delay-est-2: .15s; /* staggered stat tiles */ --delay-est-3: .3s; --delay-est-4: .45s; --ease: ease; /* the default, used everywhere */ --ease-out: ease-out; /* pring keyframes */ --ease-in-out: ease-in-out; /* estfloat keyframes */ --ease-step: step-end; /* ttblink caret */ --ease-tour: cubic-bezier(.3,.7,.3,1); /* #tourHole spotlight move */ /* Named keyframe timings */ --anim-estfloat: 8.5s; /* estfloat, infinite alternate */ --anim-pring-badge: 2.4s; /* .unipin-badge::after */ --anim-pring-dot: 3s; /* .pulse::before/::after */ --anim-pring-delay: 1.5s; /* .pulse::after animation-delay */ --anim-ttblink: 1s; /* typewriter caret */ --anim-rowflash: 2.4s; /* .dbrow.rowflash */ /* JS-side motion constants for the particle intro (JS L2497-2500, 2597) */ --particle-assemble: 1300ms; /* A — swarm into the wordmark */ --particle-hold: 800ms; /* B — hold the wordmark */ --particle-morph: 2400ms; /* Cm — wordmark dissolves into the globe */ --particle-rot: 0.0016; /* ROT, radians per frame */ --entry-exit-hide: 620ms; /* display:none after .gone */ --entry-idle-failsafe: 9000ms; /* ENTRY_IDLE auto-resolve (JS L960) */ /* == 13. Z-INDEX LAYERS ==================================================== Every z-index in the sheet, lowest first. The gaps are the source's. */ --z-panel-inner: 1; /* internal stacking inside panels */ --z-panel-inner-2: 2; /* .dbhead sticky, .grip */ --z-tsearch: 3; /* .tsearch, #entryStats .est */ --z-searchwrap: 5; /* .searchwrap, .detail .x */ --z-est-hover: 6; /* hovered stat tile, .rz-top, .dbsug */ --z-chat-ctrl: 7; /* .cb-x, .cb-clr */ --z-sidebar: 10; --z-panel: 12; /* unibox / influbox / mafiabox / resultsbar */ --z-rzone: 14; /* "search this area" pill */ --z-tip: 20; /* map hover tooltip; mobile panels */ --z-chatbox: 22; --z-detail: 30; /* company detail card */ --z-suggest: 40; /* sidebar search dropdown */ --z-moscrim: 55; --z-detail-mobile: 56; --z-sidebar-mobile: 60; --z-tilebtn: 900; /* #dbBtn #tourBtn #coffeeBtn #fbBtn */ --z-resetfly: 901; --z-tipop: 950; /* coffee / db hint popups */ --z-dbmodal: 1000; --z-modal: 1100; /* #fbmodal, #bmcmodal */ --z-sctip: 1300; /* chart tooltip — above every modal */ --z-entry: 2000; /* the particle intro overlay */ --z-tour: 3000; /* onboarding spotlight — the top layer */ /* == 14. LAYOUT CONSTANTS ================================================== Fixed pixel geometry the chrome depends on. */ --sidebar-w: 296px; --sidebar-inset: 12px; /* top / left / bottom of .sidebar */ --detail-w: 330px; --detail-inset: 16px; --detail-max-w: calc(100vw - 332px); --chat-w: 300px; --chat-h: 208px; --chat-min-h: 132px; --entrycard-w: min(340px, 90vw); --estw-w: 184px; --estw-w-mobile: 138px; --tourtip-w: min(300px, calc(100vw - 24px)); --dbpanel-w: min(1160px, calc(100vw - 56px)); --dbpanel-h: min(88vh, 900px); --dbtable-min-w: 900px; --modal-w: min(420px, 94vw); --bmc-h: min(640px, 88dvh); /* Entry-screen geometry (CSS L38-46) */ --entry-title-top: 10%; /* 12% on phones */ --entry-card-bottom: 8%; /* 6% on phones */ --entry-brand-mask-w: 160px; --entry-brand-mask-h: 31px; /* Tile-button row, absolute lefts (desktop, CSS L369-372) */ --tile-size: 38px; --tile-top: 12px; --tile-db-left: 320px; --tile-tour-left: 441px; --tile-coffee-left: 487px; --tile-fb-left: 533px; /* Database grid column templates (--dbcols) */ --dbcols-companies: 44px minmax(190px,1.7fr) 116px 150px 92px minmax(130px,1.3fr) 60px 110px; --dbcols-founders: 44px minmax(150px,0.9fr) minmax(160px,1.1fr) 100px 84px minmax(190px,1.4fr) 130px 60px; --dbcols-mafias: 56px minmax(170px,0.9fr) 96px 130px minmax(130px,1fr) minmax(200px,1.5fr); --dbcols-insights: 1fr; /* Breakpoints — the sheet has exactly one width breakpoint plus one compound height query for short phones. */ --bp-mobile: 768px; --bp-short-phone-h: 620px; } /* -- Reduced motion --------------------------------------------------------- The source handles this in JS only (the particle intro checks prefers-reduced-motion and zeroes its A/B/Cm phases, JS L2453 + L2497) and never in CSS. This block is an addition, not an extraction. */ @media (prefers-reduced-motion: reduce){ :root{ --dur-100:.01ms; --dur-120:.01ms; --dur-140:.01ms; --dur-150:.01ms; --dur-180:.01ms; --dur-200:.01ms; --dur-280:.01ms; --dur-300:.01ms; --dur-320:.01ms; --dur-350:.01ms; --dur-400:.01ms; --dur-550:.01ms; --dur-600:.01ms; --dur-700:.01ms; --dur-800:.01ms; --dur-1100:.01ms; } }