/* ========================================================================== HolonomiX responsive layer -------------------------------------------------------------------------- Loaded by every page after the design-system stylesheets. The pages are authored with inline styles; media queries cannot be. So this file is the one place breakpoint behaviour lives, and it addresses pages only through a small, named set of data-attribute hooks: data-hx-navbar the sticky header's 1240 container data-hx-navmain header nav group 1 (Products / Technology / Industries) data-hx-navutil header nav group 2 (About / Contact / Glossary | Docs / App / Verification) data-hx-navtoggle the disclosure button that replaces both groups when compact data-hx-mobilenav the disclosure panel (built at runtime by nav-dd.js, appended to ) data-hx-shell a max-width:1240px page container (gutter control) data-hx-shell="section" ... that is also a section body (vertical rhythm control) data-hx-cells="N" a bordered cell grid of N equal columns, internal hairlines data-hx-cells="3-1" a 3-up strip that must never split 2+1 (an ordered sequence); holds 3 columns to 640, then goes straight to 1 data-hx-split an asymmetric two-column content split (copy + figure/card) data-hx-row a label/value row grid (glossary, ledger, plate spec) data-hx-relaxwrap a headline that is white-space:nowrap by design at desktop BREAKPOINT SPEC >=1241 full layout. 1240 shell, 32px gutters, all grids as authored. 1024 shell goes fluid. Gutters hold at 32px. 1023 header nav collapses to the disclosure panel. Cell grids of 3+ reflow to 2 columns, internal hairlines re-derived. 899 two-column splits stack. Gutters 24px. nowrap headlines relax. 767 cell grids reflow to 1 column, internal hairlines re-derived. 639 gutters 20px. Section vertical padding 64px. Label/value rows stack. Footer link columns stack. Minimum supported width: 360px. Rules use !important because they override inline styles. That is the contract of this file and is not a pattern to copy elsewhere. ========================================================================== */ /* ---- skip link: off-screen until focused ------------------------------ */ [data-hx-skip] { position: absolute; left: -9999px; top: 0; z-index: 100; font-family: var(--font-sans); font-weight: 600; font-size: 14px; text-decoration: none; } [data-hx-skip]:focus { left: 8px; top: 8px; padding: 11px 16px; background: #0FC2B0; color: #000000; border-radius: 2px; outline: 2px solid #FFFFFF; outline-offset: 2px; } /* ---- header: disclosure button is desktop-hidden ----------------------- */ [data-hx-navtoggle] { display: none; } /* ---- runtime disclosure panel (styled here, built in nav-dd.js) -------- The panel is appended to , outside the page's data-theme="dark" root, so it carries literal colors rather than theme tokens. */ [data-hx-mobilenav] { position: fixed; top: 64px; left: 0; right: 0; z-index: 59; display: none; flex-direction: column; max-height: calc(100vh - 64px); overflow-y: auto; padding: 6px 20px 22px; background: rgba(10, 11, 13, 0.98); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } [data-hx-mobilenav][data-open] { display: flex; } [data-hx-mobilenav] a { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: #E6E9ED; text-decoration: none; display: block; padding: 14px 4px; min-height: 44px; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: color .12s ease; } [data-hx-mobilenav] a:hover { color: #FFFFFF; } [data-hx-mobilenav] a:focus-visible { outline: 2px solid #0FC2B0; outline-offset: 2px; border-radius: 2px; } [data-hx-mobilenav] a[data-hx-sub] { padding-left: 20px; font-size: 15px; color: #A9AFB8; } [data-hx-mobilenav] a[aria-current="page"] { color: #FFFFFF; } [data-hx-mobilegroup] + [data-hx-mobilegroup] { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.10); } @media (min-width: 1024px) { [data-hx-mobilenav] { display: none !important; } } /* ---- 1023: header collapses ------------------------------------------- */ @media (max-width: 1023px) { [data-hx-navmain], [data-hx-navutil] { display: none !important; } [data-hx-navtoggle] { display: inline-flex !important; } } /* ---- 1023: cell grids of 3+ reflow to two columns ---------------------- */ @media (max-width: 1023px) and (min-width: 768px) { [data-hx-cells="3"], [data-hx-cells="4"], [data-hx-cells="5"], [data-hx-cells="6"] { grid-template-columns: repeat(2, 1fr) !important; } /* spans authored for the desktop column count are meaningless at 2 */ [data-hx-cells] > * { grid-column: auto !important; grid-row: auto !important; } /* re-derive the internal hairlines for a 2-up flow */ [data-hx-cells="3"] > *, [data-hx-cells="4"] > *, [data-hx-cells="5"] > *, [data-hx-cells="6"] > * { border-top: 1px solid var(--border-hairline) !important; border-left: 1px solid var(--border-hairline) !important; } [data-hx-cells="3"] > *:nth-child(odd), [data-hx-cells="4"] > *:nth-child(odd), [data-hx-cells="5"] > *:nth-child(odd), [data-hx-cells="6"] > *:nth-child(odd) { border-left: 0 !important; } [data-hx-cells="3"] > *:nth-child(-n+2), [data-hx-cells="4"] > *:nth-child(-n+2), [data-hx-cells="5"] > *:nth-child(-n+2), [data-hx-cells="6"] > *:nth-child(-n+2) { border-top: 0 !important; } } /* ---- 899: splits stack, gutters tighten, nowrap relaxes --------------- */ @media (max-width: 899px) { [data-hx-shell] { padding-left: 24px !important; padding-right: 24px !important; } [data-hx-split] { grid-template-columns: 1fr !important; gap: 36px !important; } [data-hx-relaxwrap] { white-space: normal !important; } } /* ---- 767: cell grids go single column --------------------------------- */ @media (max-width: 767px) { [data-hx-cells]:not([data-hx-cells="3-1"]) { grid-template-columns: 1fr !important; } [data-hx-cells]:not([data-hx-cells="3-1"]) > * { grid-column: auto !important; grid-row: auto !important; border-left: 0 !important; border-top: 1px solid var(--border-hairline) !important; } [data-hx-cells]:not([data-hx-cells="3-1"]) > *:first-child { border-top: 0 !important; } } /* ---- 639: ordered 3-up strips go straight to one column --------------- */ @media (max-width: 639px) { [data-hx-cells="3-1"] { grid-template-columns: 1fr !important; } [data-hx-cells="3-1"] > * { border-left: 0 !important; border-top: 1px solid var(--border-hairline) !important; } [data-hx-cells="3-1"] > *:first-child { border-top: 0 !important; } } /* ---- 639: narrowest supported band ------------------------------------ */ @media (max-width: 639px) { [data-hx-shell] { padding-left: 20px !important; padding-right: 20px !important; } [data-hx-shell="section"] { padding-top: 64px !important; padding-bottom: 64px !important; } [data-hx-row] { grid-template-columns: 1fr !important; gap: 8px !important; } [data-hx-footcols] { gap: 28px !important; } } /* ---- anchored rows clear the sticky header ---------------------------- */ [data-hx-row][id] { scroll-margin-top: 88px; } /* ---- media never overflows its column --------------------------------- */ [data-hx-shell] img { max-width: 100%; } /* ---- card grids (gapped, self-bordered cards) ------------------------- */ /* data-hx-cards="4": 4 up on desktop, 2x2 in the mid band, 1 up on phones. Distinct from data-hx-cells: these cards own all four borders, so the hairline re-derivation must not apply. */ @media (max-width: 1023px) and (min-width: 640px) { [data-hx-cards="4"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 639px) { [data-hx-cards="4"] { grid-template-columns: 1fr !important; } } /* ---- artifact ledger: stage | artifacts | value -> stacked on narrow --- */ @media (max-width: 899px) { [data-hx-artifacts] > [data-hx-row] { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ---- cells="4-tight": a compact numeric ladder ------------------------ */ /* 4 narrow cells (a scale ladder, ~118px each) hold four columns well past 1023, so they are exempt from the 3+ -> 2-up rule and reflow later. */ @media (min-width: 560px) { [data-hx-cells="4-tight"] { grid-template-columns: repeat(4, 1fr) !important; } [data-hx-cells="4-tight"] > * { border-top: 0 !important; } [data-hx-cells="4-tight"] > * + * { border-left: 1px solid var(--border-hairline) !important; } } @media (max-width: 559px) { [data-hx-cells="4-tight"] { grid-template-columns: repeat(2, 1fr) !important; } [data-hx-cells="4-tight"] > * { border-left: 1px solid var(--border-hairline) !important; border-top: 1px solid var(--border-hairline) !important; } [data-hx-cells="4-tight"] > *:nth-child(odd) { border-left: 0 !important; } [data-hx-cells="4-tight"] > *:nth-child(-n+2) { border-top: 0 !important; } } /* ---- cells-lastspan: odd cell count in a 2-up reflow ------------------ */ /* An odd number of cells leaves the last one orphaned at half width once the authored spans are cleared. Let it span the full row instead. */ @media (max-width: 1023px) and (min-width: 768px) { [data-hx-cells-lastspan] > *:last-child { grid-column: 1 / -1 !important; border-left: 0 !important; } }