/* ============================================================================ ATOMIC LAB — ELEMENT DETAIL PAGE The page takes its accent from the element's own family colour (--fam is set on ), so every element feels distinct without a bespoke stylesheet. ========================================================================== */ .pg-element { --sect-y: clamp(2.75rem, 5vw, 5rem); } /* --------------------------------------------------------------------------- HERO ------------------------------------------------------------------------- */ .el-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.25rem)); padding-bottom: clamp(1.75rem, 4vw, 3rem); overflow: hidden; } .el-hero__glow { position: absolute; inset: -30% -10% auto -10%; height: 130%; background: radial-gradient(48% 60% at 22% 30%, color-mix(in srgb, var(--fam, var(--beam)) 22%, transparent), transparent 70%), radial-gradient(60% 50% at 85% 10%, rgba(169,139,255,0.10), transparent 70%); pointer-events: none; z-index: -1; } .el-hero__grid { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(1rem, 2vw, 1.5rem); } /* --- The big tile --- */ .el-tile { position: relative; aspect-ratio: 1 / 1.14; display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 2.4vw, 1.75rem); border-radius: var(--r-5); background: linear-gradient(155deg, color-mix(in srgb, var(--fam, var(--beam)) 26%, transparent), color-mix(in srgb, var(--fam, var(--beam)) 5%, transparent) 60%), rgba(6, 9, 16, 0.6); border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 42%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 24px 70px -22px color-mix(in srgb, var(--fam, var(--beam)) 60%, transparent); overflow: hidden; isolation: isolate; } .el-tile__orb { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; z-index: -1; } .el-tile__z { font-size: var(--t-sm); color: color-mix(in srgb, var(--fam, var(--beam)) 55%, white 45%); } .el-tile__sym { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 8vw, 5.6rem); line-height: 0.88; letter-spacing: -0.05em; color: #fff; text-shadow: 0 4px 40px color-mix(in srgb, var(--fam, var(--beam)) 70%, transparent); margin: 0.15em 0 0.1em; } .el-tile__name { font-size: var(--t-md); color: var(--ink); font-weight: 500; } .el-tile__mass { font-size: var(--t-xs); color: var(--ink-2); margin-top: 0.25rem; } .el-tile__frame { position: absolute; inset: 10px; border-radius: calc(var(--r-5) - 6px); border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 22%, transparent); pointer-events: none; } /* --- Identity column --- */ .el-id__chips { margin-bottom: 1rem; } .el-id__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; } .el-id__sub { font-size: var(--t-sm); color: var(--ink-3); letter-spacing: 0.08em; margin-top: 0.5rem; } .el-id__sig { margin-top: 1.1rem; font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); max-width: 60ch; } .el-id__quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1px; margin-top: 1.6rem; background: var(--edge-soft); border: 1px solid var(--edge-soft); border-radius: var(--r-3); overflow: hidden; } .qk { padding: 0.85rem 1rem; background: rgba(6,9,16,0.55); min-width: 0; } .qk--wide { grid-column: span 2; } .qk__k { display: block; font-size: var(--t-3xs); letter-spacing: 0.14em; color: var(--ink-3); } .qk__v { display: block; font-size: var(--t-md); font-weight: 500; margin-top: 0.2rem; } .qk__v small { font-size: 0.7em; color: var(--ink-3); } .qk__v--cfg { font-size: var(--t-sm); color: color-mix(in srgb, var(--fam, var(--beam)) 55%, white 45%); overflow-wrap: anywhere; } .el-id__nav { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; } .elnav { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border: 1px solid var(--edge); border-radius: var(--r-2); font-size: var(--t-sm); color: var(--ink-2); transition: all var(--d-2) var(--e-out); } .elnav span { display: inline-flex; align-items: baseline; gap: 0.35rem; font-family: var(--font-display); font-weight: 600; color: var(--ink); } .elnav small { font-size: 0.7em; color: var(--ink-3); } .elnav:hover { border-color: color-mix(in srgb, var(--fam, var(--beam)) 50%, transparent); background: color-mix(in srgb, var(--fam, var(--beam)) 10%, transparent); transform: translateY(-1px); } .elnav--table { color: var(--ink-3); } @media (max-width: 780px) { .el-hero__grid { grid-template-columns: 1fr; } .el-tile { max-width: 200px; aspect-ratio: 1 / 1.14; } .qk--wide { grid-column: span 1; } } /* --------------------------------------------------------------------------- SECTION RAIL ------------------------------------------------------------------------- */ .el-rail { position: sticky; top: var(--nav-h); z-index: 80; background: rgba(5,8,14,0.88); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-block: 1px solid var(--edge); } .el-rail__inner { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; } .el-rail__inner::-webkit-scrollbar { display: none; } .el-rail__link { position: relative; padding: 0.85rem 0.9rem; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; transition: color var(--d-2); } .el-rail__link:hover { color: var(--ink); } .el-rail__link.is-active { color: var(--fam, var(--beam)); } .el-rail__link.is-active::after { content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0; height: 2px; background: var(--fam, var(--beam)); box-shadow: 0 0 10px var(--fam, var(--beam)); } /* --------------------------------------------------------------------------- ATOM VIEWER ------------------------------------------------------------------------- */ .atom { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: clamp(1rem, 2.4vw, 1.75rem); align-items: stretch; } .atom__stage { position: relative; min-height: 420px; border: 1px solid var(--edge); border-radius: var(--r-4); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fam, var(--beam)) 8%, transparent), transparent 65%), rgba(5, 8, 14, 0.55); overflow: hidden; } .atom__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .atom__hud { position: absolute; top: 1rem; left: 1rem; } .atom__meta { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; font-size: var(--t-2xs); color: var(--ink-3); letter-spacing: 0.06em; display: flex; gap: 1.2rem; flex-wrap: wrap; pointer-events: none; } .atom__meta b { color: var(--ink); font-weight: 500; } .atom__reset { position: absolute; top: 1rem; right: 1rem; } .atom__side { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } .atom__tabs { width: 100%; } .atom__tabs .segmented__btn { flex: 1; text-align: center; justify-content: center; } .atom__panel { flex: 1; padding: 1.1rem; border: 1px solid var(--edge); border-radius: var(--r-3); background: rgba(255,255,255,0.02); } .atom__panel.is-hidden { display: none; } .atom__hint { font-size: var(--t-3xs); letter-spacing: 0.15em; margin-bottom: 0.75rem; } .atom__note { font-size: var(--t-2xs); line-height: 1.6; color: var(--ink-2); margin-top: 0.9rem; } .subshells { display: flex; flex-wrap: wrap; gap: 0.35rem; } .subshell { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.65rem; border: 1px solid var(--edge); border-radius: var(--r-2); font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-2); transition: all var(--d-2) var(--e-out); } .subshell:hover { border-color: var(--edge-strong); color: var(--ink); background: rgba(255,255,255,0.04); } .subshell.is-on { border-color: color-mix(in srgb, var(--fam, var(--beam)) 60%, transparent); background: color-mix(in srgb, var(--fam, var(--beam)) 15%, transparent); color: #fff; } .subshell sup { font-size: 0.75em; opacity: 0.7; } .shells { display: flex; flex-direction: column; gap: 0.5rem; } .shell { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.6rem; } .shell__n { font-size: var(--t-3xs); color: var(--ink-3); } .shell__dots { display: flex; flex-wrap: wrap; gap: 2px; } .shell__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fam, var(--beam)); box-shadow: 0 0 5px var(--fam, var(--beam)); display: block; } .shell__c { font-size: var(--t-2xs); color: var(--ink-2); } .atom__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--edge-soft); border: 1px solid var(--edge-soft); border-radius: var(--r-3); overflow: hidden; } .atom__facts > div { padding: 0.7rem 0.85rem; background: rgba(6,9,16,0.6); } .atom__facts dt { font-size: var(--t-3xs); color: var(--ink-3); letter-spacing: 0.08em; } .atom__facts dt small { opacity: 0.6; } .atom__facts dd { font-size: var(--t-sm); color: var(--ink); margin-top: 0.15rem; } @media (max-width: 900px) { .atom { grid-template-columns: 1fr; } .atom__stage { min-height: 340px; } } /* --------------------------------------------------------------------------- PROPERTY SHEET ------------------------------------------------------------------------- */ .props { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .props__group { min-width: 0; } .props__h { font-size: var(--t-3xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fam, var(--beam)); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--edge-soft); } .props__list { display: flex; flex-direction: column; } .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k v' 'bar pct'; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--edge-soft); } .prow__k { grid-area: k; font-size: var(--t-xs); color: var(--ink-2); } .prow__v { grid-area: v; font-size: var(--t-sm); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .prow__v small { color: var(--ink-3); font-size: 0.78em; } .prow__est { color: var(--warn); font-size: 0.9em; margin-left: 0.15em; cursor: help; } .prow__bar { grid-area: bar; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.07); overflow: hidden; align-self: center; } .prow__bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--fam, var(--beam)) 40%, transparent), var(--fam, var(--beam))); animation: gauge-in 900ms var(--e-out) both; transform-origin: left; } .prow__pct { grid-area: pct; font-size: var(--t-3xs); color: var(--ink-3); align-self: center; min-width: 2.5em; text-align: right; } .prow.is-empty .prow__v { color: var(--ink-3); } .prow--text { grid-template-areas: 'k v'; grid-template-columns: auto 1fr; } .prow--text .prow__v { text-align: right; white-space: normal; } .props__list--plain .prow { padding: 0.55rem 0; } .props__foot { font-size: var(--t-3xs); margin-top: 1.5rem; letter-spacing: 0.04em; } /* --------------------------------------------------------------------------- POSITION ------------------------------------------------------------------------- */ .pos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; } .pos__table { padding: clamp(0.75rem, 2vw, 1.25rem); border: 1px solid var(--edge); border-radius: var(--r-4); background: rgba(255,255,255,0.018); } .pos__copy p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; } .pos__copy strong { color: var(--ink); } .pos__peers-label { font-size: var(--t-3xs); letter-spacing: 0.16em; margin: 1.25rem 0 0.6rem; } .pos__peers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.25rem; } .peer { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.35rem 0.6rem; border: 1px solid var(--edge); border-radius: var(--r-2); font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs); color: var(--ink-2); transition: all var(--d-2) var(--e-out); } .peer__z { font-size: 0.72em; color: var(--ink-3); } .peer:hover { color: #fff; border-color: color-mix(in srgb, var(--fam, var(--beam)) 55%, transparent); background: color-mix(in srgb, var(--fam, var(--beam)) 14%, transparent); transform: translateY(-2px); } /* Highlighted tile in the position map */ .ptable .el.is-here { outline: 2px solid #fff; outline-offset: 1px; z-index: 12; animation: here-pulse 2.6s var(--e-inout) infinite; } @keyframes here-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); } 55% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } } @media (max-width: 900px) { .pos { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- STORY / LONG-FORM ------------------------------------------------------------------------- */ .el-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .el-split__side { display: flex; flex-direction: column; gap: 0.85rem; position: sticky; top: calc(var(--nav-h) + 4.5rem); } .disc__list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.9rem; } .disc__list > div { display: flex; flex-direction: column; gap: 0.15rem; } .disc__list dt { font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .disc__list dd { font-size: var(--t-sm); color: var(--ink); } .dyk { border-color: color-mix(in srgb, var(--fam, var(--beam)) 30%, transparent); } .dyk__text { margin-top: 0.7rem; font-size: var(--t-sm); line-height: 1.65; color: var(--ink); } .factlist { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.9rem; } .factlist li { position: relative; padding-left: 1.1rem; font-size: var(--t-xs); line-height: 1.62; color: var(--ink-2); } .factlist li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--fam, var(--beam)); } .longform { position: relative; } .longform .prose h3 { font-family: var(--font-display); color: var(--ink); font-size: var(--t-lg); margin-top: 2em; padding-bottom: 0.4em; border-bottom: 1px solid var(--edge-soft); } .longform .prose h3:first-child { margin-top: 0; } .longform .prose h4 { color: color-mix(in srgb, var(--fam, var(--beam)) 55%, white 45%); font-size: var(--t-md); margin-top: 1.6em; } .longform--safety { border-color: rgba(255,201,77,0.22); } .hazard { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; background: rgba(255,201,77,0.08); border: 1px solid rgba(255,201,77,0.28); border-radius: var(--r-3); font-size: var(--t-sm); color: #ffe2a3; line-height: 1.6; } .hazard svg { flex: none; margin-top: 2px; color: var(--warn); } .hazard strong { color: #fff; } .abund { margin-bottom: 1.75rem; } .abund__bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; } .abund__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--fam, var(--beam)) 35%, transparent), var(--fam, var(--beam))); animation: gauge-in 1.1s var(--e-out) both; transform-origin: left; } .abund__label { font-size: var(--t-2xs); color: var(--ink-3); margin-top: 0.5rem; letter-spacing: 0.04em; } @media (max-width: 900px) { .el-split { grid-template-columns: 1fr; } .el-split__side { position: static; } } /* --------------------------------------------------------------------------- PREV / NEXT ------------------------------------------------------------------------- */ .el-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.85rem; } .el-next__card { --fam: var(--f-unknown); display: grid; grid-template-areas: 'dir dir' 'sym name' 'sym meta'; grid-template-columns: auto 1fr; align-items: center; gap: 0.1rem 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--edge); border-radius: var(--r-4); background: linear-gradient(100deg, color-mix(in srgb, var(--fam) 10%, transparent), rgba(255,255,255,0.015) 60%); transition: all var(--d-3) var(--e-out); } .el-next__card--r { text-align: right; grid-template-areas: 'dir dir' 'name sym' 'meta sym'; grid-template-columns: 1fr auto; } .el-next__dir { grid-area: dir; font-size: var(--t-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; } .el-next__sym { grid-area: sym; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; letter-spacing: -0.04em; color: var(--fam); } .el-next__name { grid-area: name; font-size: var(--t-md); font-weight: 500; } .el-next__meta { grid-area: meta; font-size: var(--t-3xs); color: var(--ink-3); letter-spacing: 0.06em; } .el-next__card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--fam) 45%, transparent); box-shadow: var(--lift-2); } /* --------------------------------------------------------------------------- SIZE + THERMAL VISUALISATIONS ------------------------------------------------------------------------- */ .twoviz { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0.85rem; } .viz-card { display: flex; flex-direction: column; } .viz-card__h { margin: 0.6rem 0 1.25rem; } .viz-card__note { margin-top: auto; padding-top: 1.1rem; font-size: var(--t-2xs); line-height: 1.65; color: var(--ink-2); } .viz-card__note strong { color: var(--ink); } /* --- Size to scale --- */ .sizeviz { position: relative; height: 190px; display: flex; align-items: flex-end; justify-content: space-around; gap: 0.5rem; } .sizeviz__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; } .sizeviz__disc { border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 85%, white 15%), color-mix(in srgb, var(--c) 55%, transparent) 65%, transparent 72%); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); transition: transform var(--d-3) var(--e-out); animation: disc-in 700ms var(--e-out) both; } @keyframes disc-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } } .sizeviz__item:hover .sizeviz__disc { transform: scale(1.06); } .sizeviz__lbl { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-3); text-align: center; letter-spacing: 0.06em; } .sizeviz__lbl b { display: block; color: var(--ink); font-size: var(--t-2xs); font-weight: 500; } .sizeviz__item.is-here .sizeviz__lbl b { color: var(--fam, var(--beam)); } /* --- Thermal scale --- */ .thermo { --row-h: 1.15rem; position: relative; padding-top: calc(var(--ref-rows, 2) * var(--row-h) + 0.5rem); } .thermo__refs, .thermo__keys { position: relative; } .thermo__refs { height: calc(var(--ref-rows, 2) * var(--row-h)); margin-bottom: 0.3rem; } .thermo__keys { height: calc(var(--key-rows, 1) * var(--row-h) + 0.9rem); margin-top: 0.35rem; } .thermo__track { position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--edge-soft); } .thermo__seg { position: absolute; top: 0; bottom: 0; } .thermo__seg--solid { background: linear-gradient(90deg, #6d80a0, #9db0cf); } .thermo__seg--liquid { background: linear-gradient(90deg, #2f9fd6, #6ad3ff); } .thermo__seg--gas { background: linear-gradient(90deg, #e0a83c, #ffd98a); } .thermo__seg--unknown { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 6px, transparent 6px 12px); } .thermo__ref { position: absolute; top: calc(var(--row, 0) * var(--row-h)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .thermo__ref span { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-3); white-space: nowrap; letter-spacing: 0.04em; } .thermo__ref i { width: 1px; background: var(--edge-strong); height: calc((var(--ref-rows, 2) - var(--row, 0)) * var(--row-h) - 0.2rem); margin-top: 2px; } .thermo__key { position: absolute; top: calc(var(--row, 0) * var(--row-h)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .thermo__key i { width: 1px; height: calc(var(--row, 0) * var(--row-h) + 0.4rem); background: var(--fam, var(--beam)); box-shadow: 0 0 8px var(--fam, var(--beam)); margin-bottom: 2px; } .thermo__key span { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--fam, var(--beam)); white-space: nowrap; letter-spacing: 0.04em; } /* Anchor end labels inward so they never leave the card */ .thermo__ref.is-edge-r, .thermo__key.is-edge-r { align-items: flex-end; transform: translateX(-100%); } .thermo__ref.is-edge-l, .thermo__key.is-edge-l { align-items: flex-start; transform: none; } .thermo__ref.is-edge-r i, .thermo__key.is-edge-r i { margin-right: 0; align-self: flex-end; } .thermo__ref.is-edge-l i, .thermo__key.is-edge-l i { align-self: flex-start; } .thermo__ticks { position: relative; height: 1.1rem; margin-top: 0.9rem; border-top: 1px solid var(--edge-soft); padding-top: 0.35rem; } .thermo__tick { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-3); opacity: 0.65; } .thermo__tick.is-first { transform: none; } .thermo__tick.is-last { transform: translateX(-100%); } .thermo__unit { position: absolute; right: 0; top: 1.5rem; font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-3); opacity: 0.5; letter-spacing: 0.06em; } .thermo__legend { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; } .thermo__legend span { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-3); letter-spacing: 0.06em; } .sw { width: 10px; height: 10px; border-radius: 2px; display: block; } .sw--solid { background: #8fa3c4; } .sw--liquid { background: #4fc3f7; } .sw--gas { background: #ffd166; } /* ============================================================================ FULL-LENGTH ARTICLE TREATMENT ---------------------------------------------------------------------------- Nothing on this page is collapsed any more. Roughly 2,000 words per element are on screen at once, so the work moves from *hiding* length to *making it navigable*: a measured column, headings that read as landmarks, data pulled out of the flow, and a rail that tracks position. ========================================================================== */ .prose--article { /* Long-form wants a tighter measure than a full-width panel gives it. */ max-width: 74ch; font-size: var(--t-md); line-height: 1.78; } .prose--article > * + * { margin-top: 1.25em; } /* Section headings become landmarks with a family-coloured rule and a tick */ .prose--article h3 { position: relative; font-size: var(--t-xl); letter-spacing: -0.025em; color: var(--ink); margin-top: 2.75em; padding-top: 1.25em; padding-left: 0; border-top: 1px solid var(--edge-soft); scroll-margin-top: calc(var(--nav-h) + 5rem); } .prose--article h3::before { content: ''; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--fam, var(--beam)); box-shadow: 0 0 12px var(--fam, var(--beam)); } .prose--article h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose--article h3:first-child::before { display: none; } .prose--article h4 { font-size: var(--t-md); color: color-mix(in srgb, var(--fam, var(--beam)) 62%, white 38%); margin-top: 2em; letter-spacing: -0.01em; } /* First paragraph of each section gets a lead-in weight so the eye can find where a section starts without counting headings. */ .prose--article h3 + p, .prose--article h4 + p { color: var(--ink); } .prose--article strong { color: #fff; font-weight: 600; } /* Lists in long-form get more air than inline prose lists */ .prose--article ul > li { padding-left: 1.35em; } .prose--article ul > li::before { top: 0.72em; width: 6px; height: 6px; background: var(--fam, var(--beam)); box-shadow: 0 0 8px color-mix(in srgb, var(--fam, var(--beam)) 70%, transparent); } .prose--article li + li { margin-top: 0.6em; } /* The discovery article inside the story column */ .article { margin-top: 2.5rem; } .article__h { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--edge-soft); } /* --------------------------------------------------------------------------- IN-SECTION NAVIGATION — generated from the h3s inside each long-form block ------------------------------------------------------------------------- */ .subnav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--edge-soft); } .subnav__label { width: 100%; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.15rem; } .subnav__link { padding: 0.35rem 0.75rem; font-size: var(--t-2xs); color: var(--ink-2); border: 1px solid var(--edge); border-radius: var(--r-pill); transition: all var(--d-2) var(--e-out); } .subnav__link:hover { color: #fff; border-color: color-mix(in srgb, var(--fam, var(--beam)) 50%, transparent); background: color-mix(in srgb, var(--fam, var(--beam)) 12%, transparent); transform: translateY(-1px); } /* --------------------------------------------------------------------------- READING PROGRESS — a hairline under the section rail, because the page is now long enough that "how much is left" is a real question. ------------------------------------------------------------------------- */ .el-rail__read { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--read, 0%); background: linear-gradient(90deg, var(--fam, var(--beam)), var(--pulse)); box-shadow: 0 0 10px color-mix(in srgb, var(--fam, var(--beam)) 70%, transparent); transition: width 90ms linear; pointer-events: none; } .el-rail { position: sticky; } /* --------------------------------------------------------------------------- STORY CONTENTS RAIL Built by element-page.js from the headings inside the narrative. Caps its own height and scrolls internally so a 30-entry story does not push the Discovery card off a sticky column. ------------------------------------------------------------------------- */ .railtoc { padding-block: 1rem; } .railtoc__list { list-style: none; margin: 0.6rem 0 0; padding: 0 0 0 0.9rem; max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--edge-soft); scrollbar-width: thin; } .railtoc__item { position: relative; } .railtoc__link { display: block; padding: 0.34rem 0 0.34rem 0.7rem; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-3); text-decoration: none; transition: color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out); } .railtoc__item.is-sub .railtoc__link { padding-left: 1.5rem; font-size: var(--t-3xs); } .railtoc__link:hover { color: var(--ink); transform: translateX(2px); } /* The marker sits on the rule, so the active entry reads as a position in the article rather than as a selected menu item. */ .railtoc__link::before { content: ''; position: absolute; left: -1px; top: 0.72rem; width: 1px; height: 0; background: var(--fam, var(--beam)); transition: height var(--d-2) var(--e-out); } .railtoc__link.is-on { color: var(--fam, var(--beam)); font-weight: 600; } .railtoc__link.is-on::before { height: 0.95rem; box-shadow: 0 0 8px var(--fam, var(--beam)); } @media (max-width: 960px) { .railtoc { display: none; } } /* Pressure qualifier on a property row — "at 3.6 MPa". Sized down and dimmed so the number still reads first, but the caveat is not separable from it. */ .prow__qual { margin-left: 0.45rem; font-size: var(--t-3xs); color: var(--ink-3); letter-spacing: 0.02em; white-space: nowrap; }