| .atlas { --ink:#173c30; --muted:#647467; position:relative; overflow:hidden; color:var(--ink); background:#f7f8f0; border:1px solid #e0e6d8; border-radius:24px; padding:32px 30px 18px; font-family:Arial,Helvetica,sans-serif; box-shadow:0 12px 50px #234b2910; } |
| .atlas * { box-sizing:border-box; } |
| .atlas-header { display:flex; justify-content:space-between; align-items:center; gap:28px; } |
| .atlas-kicker { font-size:10px; font-weight:700; letter-spacing:1.5px; line-height:1.6; text-transform:uppercase; color:#527261; } |
| .atlas-kicker span { padding:0 8px; color:#9aaa95; } |
| .atlas h1 { font:400 clamp(29px,3.8vw,47px)/1.08 Georgia,'Times New Roman',serif; letter-spacing:-1.5px; margin:12px 0; color:var(--ink); } |
| .atlas h1 span { color:#68a788; } |
| .atlas-header p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; } |
| .atlas-summary-block { min-width:270px; padding-left:26px; border-left:1px solid #dbe3d3; } |
| .atlas-summary { display:flex; align-items:center; gap:12px; margin-top:8px; } |
| .atlas-summary strong { font-size:33px; font-weight:500; letter-spacing:-1.4px; font-variant-numeric:tabular-nums; } |
| .atlas-summary span { font-size:11px; line-height:1.6; color:var(--muted); } |
| .atlas-badge { padding:7px 9px; font-size:13px; background:#dfeedd; color:#285b40; border-radius:8px; white-space:nowrap; } |
| .atlas button { font:inherit; cursor:pointer; } |
| .atlas-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:25px 0 14px; } |
| .atlas-shortcuts { display:flex; flex-wrap:wrap; gap:7px; } |
| .atlas-shortcuts button { border:1px solid #cfdcc9; background:#ffffff80; border-radius:30px; padding:8px 15px; color:#315641; font-size:12px; transition:background .15s; } |
| .atlas-shortcuts button:hover { background:#dfeedd; } |
| .atlas .atlas-back { color:#647467; background:transparent; border:0; font-size:12px; padding:8px; white-space:nowrap; } |
| .atlas-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#6c7d6a; font-size:11px; min-height:20px; } |
| .atlas-breadcrumb button { border:0; background:none; color:inherit; padding:2px 0; } |
| .atlas-breadcrumb button:hover { text-decoration:underline; } |
| .crumb-divider { opacity:.4; } |
| .tree-scroll { overflow-x:auto; overscroll-behavior-x:contain; margin:0 -5px; } |
| .life-tree { display:block; width:100%; height:auto; overflow:visible; } |
| .flow { stroke:none; transition:opacity .15s; } |
| .flow-annotated { fill:#40916f; opacity:.42; } |
| .flow-missing { fill:#cfd5c9; opacity:.6; } |
| .bar-annotated { fill:#287557; } |
| .bar-missing { fill:#bcc4b5; } |
| .bar-outline { fill:none; stroke:#f7f8f0; stroke-width:1; } |
| .tree-node { cursor:pointer; } |
| .tree-node.is-direct { cursor:default; } |
| .tree-hit { fill:transparent; } |
| .tree-node:focus { outline:none; } |
| .tree-node:focus .bar-outline { stroke:#173c30; stroke-width:2; } |
| .tree-node.is-selected .bar-outline { stroke:#173c30; stroke-width:1.5; } |
| .tree-node.is-sibling { opacity:.62; transition:opacity .15s; } |
| .tree-node.is-sibling:hover,.tree-node.is-sibling:focus { opacity:1; } |
| .tree-icon { opacity:.62; transition:opacity .15s; } |
| .tree-node.is-selected .tree-icon { opacity:.85; } |
| .tree-node:not(.is-direct):hover .tree-icon { opacity:.9; } |
| .tree-label,.tree-english,.tree-count { paint-order:stroke; stroke:#f7f8f0; stroke-width:4px; stroke-linejoin:round; } |
| .tree-label { font:600 13px Arial,Helvetica,sans-serif; fill:#254735; transition:fill .15s; } |
| .tree-node.is-selected .tree-label { font-weight:700; fill:#173c30; } |
| .tree-english { font:italic 11.5px Georgia,'Times New Roman',serif; fill:#5d7a66; } |
| .tree-count { font:11px Arial,Helvetica,sans-serif; fill:#697966; } |
| .tree-node:not(.is-direct):hover .tree-label,.tree-node:focus .tree-label { fill:#0f2e22; } |
| .tree-node:not(.is-direct):hover .bar-outline { stroke:#287557; stroke-width:2; } |
| .atlas-footer { display:flex; align-items:center; flex-wrap:wrap; gap:15px; justify-content:space-between; border-top:1px solid #dde4d5; padding-top:14px; color:#6c7a66; font-size:11px; line-height:1.6; } |
| .atlas-legend { display:flex; gap:7px; align-items:center; } |
| .atlas-swatch { width:10px; height:10px; border-radius:2px; } |
| .atlas-annotated { background:#287557; } |
| .atlas-missing { background:#bcc4b5; } |
| .atlas-date { opacity:.8; } |
| .atlas-footnote { font-size:10px; line-height:1.6; color:#77816e; margin-top:12px; max-width:860px; } |
| .atlas-tooltip { position:absolute; z-index:5; pointer-events:none; max-width:290px; padding:12px 15px; border-radius:12px; color:#f5f8ef; background:#1d4334; font-size:12px; line-height:1.7; box-shadow:0 5px 20px #18372122; } |
| .atlas-tooltip[hidden] { display:none; } |
| .atlas button:focus-visible { outline:2px solid #327555; outline-offset:3px; } |
| .atlas-leaf-note { color:#647467; font-size:13px; text-align:center; margin:0 0 20px; } |
| .atlas-mobile-hint { display:none; } |
| @media(max-width:800px) { |
| .atlas { padding:22px 16px 16px; border-radius:18px; } |
| .atlas-header { align-items:flex-start; flex-direction:column; gap:18px; } |
| .atlas-summary-block { border-left:0; padding:0; min-width:0; } |
| .atlas-summary { flex-wrap:wrap; } |
| .atlas h1 { font-size:35px; } |
| .atlas-nav { flex-wrap:wrap; margin-top:18px; } |
| .atlas-mobile-hint { display:inline; } |
| .atlas-footer { gap:9px; } |
| } |
| @media(prefers-reduced-motion:reduce) { .atlas * { transition:none!important; } } |
|
|
