/* =========================================================================== SolutionsDataHub -- SHARED product-UI language for every AVATAR DATA HUB picture on the page (hero film now; 画面イメージ / 特長 / 選ばれる理由 later). One product, drawn one way: component files (datahub-*.css) build on these classes and tokens and never redefine them. Identity: the product colour #1B6FB3 IS the site's --blue, so colour alone cannot mark this page the way purple marks SALES and green marks CHATOPS. Two materials do it instead: monospace for SQL / endpoints (.dh-mono, .dh-sql) and a faint spreadsheet grid (wide cells, 64 x 24px) on every stage behind a product picture (--dh-stage-bg). Every hex is a site token or a mix of tokens (noted on the line). Contrast (WCAG 2.x, computed 2026-10-03): #FFF on --dh-acc 5.29 · --dh-acc-ink on --dh-tint 6.3, on #FFF 7.1 · --dh-acc on --dh-tint 4.74 · --muted on --dh-tint 4.92, on --dh-rail 5.20, on --dh-flat 4.93 · --dh-chrome-tx on --dh-chrome 9.62 · on --dh-code: text 12.07, keyword 9.29, literal 9.07, #FFF on a source chip 9.95 · --navy on the stage >= 12. =========================================================================== */ :root { --dh-acc: #1B6FB3; /* AVATAR DATA HUB accent (= --blue) */ --dh-acc-ink: #195C91; /* accent text on tints: 50/50 mix of --blue and --navy-mid */ --dh-tint: #E9F4FD; /* 20% --blue-pale on white: AI marks + the sources being read */ --dh-mark: rgba(27, 111, 179, 0.18); /* key of a condition the AI read out of a question */ --dh-chrome: #102A43; /* product top bar (navy, like every Solutions mock) */ --dh-chrome-tx: #C6D3E0; /* = --on-dark-muted */ --dh-rail: #F7F9FB; /* = --surface: source rail */ --dh-hair: #E2E8EE; /* = --line: hairlines inside a window */ --dh-rule: #C6D3E0; /* = --on-dark-muted: rules between rows OUTSIDE a window (lists, timeline) */ --dh-flat: #F1F3F5; /* flat label chip: a fact, never AI, never clickable */ --dh-code: #0B2036; /* = --navy-deep: SQL pane, endpoint */ --dh-code-tx: #D2DEEA; /* = --on-dark-soft */ --dh-code-kw: #8FC9F5; /* = --blue-pale: SQL keywords, HTTP verb */ --dh-code-lit: #F2B705; /* = --amber: literals only, a few glyphs per picture */ --dh-code-src: rgba(143, 201, 245, 0.22); /* chip behind a source name inside SQL */ --dh-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'Noto Sans JP', monospace; --dh-grid: rgba(27, 111, 179, 0.075); --dh-stage-bg: linear-gradient(var(--dh-grid) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, var(--dh-grid) 1px, transparent 1px) 0 0 / 64px 100%, linear-gradient(145deg, #DCEBF8 0%, #E6EDF4 60%, #E4EAF1 100%); } /* ---- window: white app frame, product bar on top ------------------------- Type floor inside every window (round 7, design-qa-gate §7): 13px for any text with Japanese, 12px for Latin-only bits (times, hosts, endpoints). */ .dh-win { overflow: hidden; background: var(--white); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.6; color: var(--ink); word-break: auto-phrase; } .dh-win p, .dh-win ul, .dh-win ol, .dh-win h4 { margin: 0; } .dh-win ul, .dh-win ol { padding: 0; list-style: none; } .dh-win svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .dh-top { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--dh-chrome); color: var(--dh-chrome-tx); white-space: nowrap; } .dh-brand { display: inline-flex; align-items: center; gap: 7px; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--white); } /* brand mark = a 2 x 2 table: the accent square cut by two navy rules */ .dh-brand::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(90deg, transparent 6px, var(--dh-chrome) 6px 8px, transparent 8px), linear-gradient(transparent 6px, var(--dh-chrome) 6px 8px, transparent 8px), var(--dh-acc); } /* ---- AI mark: with the sources being read, the only place the tint appears -- */ .dh-ai { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--dh-tint); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--dh-acc-ink); white-space: nowrap; } .dh-ai::before { content: ""; width: 9px; height: 9px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .dh-chip { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 3px; background: var(--dh-flat); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--muted); white-space: nowrap; } /* ---- monospace material: SQL pane, endpoints, the ASK key ------------------ */ .dh-mono { font-family: var(--dh-mono); font-variant-ligatures: none; letter-spacing: 0; } .dh-sql { padding: 10px 12px; border-radius: 6px; background: var(--dh-code); font-size: 13px; line-height: 1.75; color: var(--dh-code-tx); } .dh-sql-k { font-weight: 700; color: var(--dh-code-kw); } .dh-sql-s { padding: 0 3px; border-radius: 3px; background: var(--dh-code-src); color: var(--white); } .dh-sql-v { color: var(--dh-code-lit); } /* ---- required caption under every product picture -------------------------- */ .dh-cap { margin: 14px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.9; color: var(--muted); } /* ---- glossary popovers (.dc-term, the blue "?" buttons) ------------------- Look and open rules live in home-prototype.css; behaviour (tap-to-focus on Safari, Esc, placement) is the shared solutions-chatops-terms.js, loaded as is. These two rules are the page-level half of that pattern, copied from SolutionsChatops.html's