/* * BIOTEN Developer V2.3 * Design read: targeted evolution for packaging developers and engineering teams. * Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 6. * Theme: continuous light engineering canvas. Blue is interaction; green is verified state and primary action. * Shape system: panels 18px, cards 14px, actions 8px, status labels 6px. */ :root { --dv23-section-space: clamp(64px, 6.2vw, 88px); --dv23-section-space-compact: clamp(54px, 5.4vw, 76px); --dv23-card-gap: clamp(10px, 1.15vw, 14px); --dv23-rail-bg: rgba(255, 255, 255, .9); } body.dv23-page { text-rendering: optimizeLegibility; } body.dv23-page .dv2-section { padding-block: var(--dv23-section-space); } body.dv23-page .dv2-section__head, body.dv23-page .dv21-section-intro { max-width: 800px; margin-bottom: clamp(28px, 3.2vw, 40px); } body.dv23-page .dv2-section__head h2, body.dv23-page .dv21-section-intro h2 { max-width: 780px; font-size: clamp(2.15rem, 3.75vw, 3.75rem); line-height: 1.035; } body.dv23-page .dv2-section__head p, body.dv23-page .dv21-section-intro > p:last-child { max-width: 62ch; margin-top: 14px; line-height: 1.68; } body.dv23-page .dv2-actions { gap: 10px; margin-top: 24px; } body.dv23-page .dv2-action:active { transform: translateY(1px) scale(.985); } body.dv23-page .dv2-final { padding-block: clamp(72px, 7vw, 96px); } body.dv23-page .dv2-final h2 { max-width: 850px; font-size: clamp(2.35rem, 4.5vw, 4.45rem); } body.dv23-page .dv2-final p { margin-top: 18px; line-height: 1.68; } /* Homepage: the field choice follows the hero without an intervening directory strip. */ body.dv23-page .dv21-hero__grid { min-height: min(700px, calc(100dvh - 72px)); grid-template-columns: minmax(0, 1.06fr) minmax(440px, .94fr); gap: clamp(30px, 3.8vw, 56px); } body.dv23-page .dv21-hero__copy { padding-block: 64px 58px; } html body.dv23-page.dv21-page #main-content .dv21-hero h1 { max-width: 680px !important; font-size: clamp(3rem, 4vw, 3.55rem) !important; line-height: 1.045 !important; } body.dv23-page .dv21-hero__lead { max-width: 570px; margin-top: 20px; font-size: clamp(.98rem, 1.12vw, 1.08rem); line-height: 1.68; } body.dv23-page .dv21-hero__media { min-height: 440px; max-height: 500px; grid-template-rows: minmax(0, 1fr); margin-block: 34px; } body.dv23-page .dv21-hero__media figcaption { bottom: 16px; } body.dv23-page .dv2-local-nav__inner { min-height: 50px; } body.dv23-page .dv21-domain-explorer { padding-block: clamp(64px, 6.8vw, 92px) clamp(70px, 7.4vw, 102px); } body.dv23-page .dv21-domain-tabs { gap: 12px; } html body.dv23-page.dv21-page #main-content button.dv21-domain-tab { min-height: 270px !important; padding-bottom: 18px !important; } body.dv23-page .dv21-domain-tab__media { height: 118px; margin-bottom: 16px; } body.dv23-page .dv21-domain-tab__number, body.dv23-page .dv21-domain-tab > strong, body.dv23-page .dv21-domain-tab__copy { margin-inline: 18px; } body.dv23-page .dv21-domain-tab > strong { margin-top: 7px; } body.dv23-page .dv21-domain-tab__copy { margin-top: 7px; line-height: 1.5; } body.dv23-page .dv21-domain-panels { margin-top: 16px; } body.dv23-page .dv21-domain-panel { padding: clamp(26px, 3vw, 38px); } body.dv23-page .dv21-domain-panel__intro { grid-template-columns: minmax(245px, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 4.5vw, 64px); padding-bottom: 24px; } body.dv23-page .dv21-domain-panel__intro h3 { margin-top: 9px; font-size: clamp(1.6rem, 2.5vw, 2.45rem); } body.dv23-page .dv21-domain-panel__intro > p { font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.55; } body.dv23-page .dv21-domain-panel__body { grid-template-columns: 1fr; gap: 0; padding-top: 24px; } body.dv23-page .dv21-problem-list ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 14px; border-top: 1px solid var(--dv22-line); border-bottom: 1px solid var(--dv22-line); } body.dv23-page .dv21-problem-list li { min-height: 70px; display: flex; align-items: center; padding: 12px 16px 12px 28px; border-right: 1px solid var(--dv22-line); font-size: .8rem; line-height: 1.48; } body.dv23-page .dv21-problem-list li:last-child { border-right: 0; } body.dv23-page .dv21-problem-list li::before { top: 50%; left: 14px; } body.dv23-page .dv21-domain-panel__actions { margin-top: 22px; padding-top: 20px; } body.dv23-page .dv21-boundary-note { margin-top: 14px; } /* One compact common path replaces repeated field-level five-step lists. */ body.dv23-page .dv21-progressive { padding-block: clamp(64px, 6.2vw, 82px); } body.dv23-page .dv21-progressive .dv21-section-intro--split { max-width: 850px; grid-template-columns: 1fr; gap: 0; align-items: start; } body.dv23-page .dv21-progressive .dv21-section-intro--split > p { max-width: 62ch; margin: 14px 0 0 !important; } body.dv23-page .dv21-progressive-steps li, body.dv23-page .dv21-progressive-steps li:not(:first-child) { min-height: 142px; padding: 22px 20px; } body.dv23-page .dv21-progressive-steps strong { margin-top: 0; font-size: 1rem; } body.dv23-page .dv21-progressive-steps p { margin-top: 9px; line-height: 1.55; } /* Homepage resources: four route cards instead of a complete data directory. */ body.dv23-page .dv2-asset-map { gap: var(--dv23-card-gap); } body.dv23-page .dv2-asset, body.dv23-page .dv2-asset:nth-child(n) { min-height: 214px; grid-column: span 6; padding: 22px; } body.dv23-page .dv2-asset:nth-child(1) { grid-column: span 7; } body.dv23-page .dv2-asset:nth-child(2) { grid-column: span 5; } body.dv23-page .dv2-asset:nth-child(3) { grid-column: span 5; } body.dv23-page .dv2-asset:nth-child(4) { grid-column: span 7; } body.dv23-page .dv2-asset h3 { margin: 28px 0 10px; font-size: clamp(1.22rem, 1.8vw, 1.75rem); } body.dv23-page .dv2-asset p { line-height: 1.6; } body.dv23-page .dv2-asset .dv2-text-link { padding-top: 18px; } /* Three high-frequency tools remain on the homepage; the full tool page carries the rest. */ body.dv23-page .dv2-tool-row { grid-template-columns: 104px minmax(210px, .72fr) minmax(280px, 1fr) auto; min-height: 92px; gap: 20px; padding: 14px 8px; } body.dv23-page .dv2-tool-row strong { font-size: clamp(1.08rem, 1.55vw, 1.42rem); } body.dv23-page .dv2-tool-row p { line-height: 1.55; } .dv23-tools-all { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; } .dv23-tools-all p { max-width: 58ch; margin: 0; color: var(--dv22-muted); font-size: .78rem; line-height: 1.55; } /* Evidence boundaries and publication review are one decision block. */ .dv23-boundary-definitions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: clamp(30px, 3.5vw, 46px); border-block: 1px solid var(--dv22-line); } .dv23-boundary-definitions article { min-height: 136px; padding: 20px 18px; border-right: 1px solid var(--dv22-line); } .dv23-boundary-definitions article:last-child { border-right: 0; } .dv23-boundary-definitions strong { display: block; font-size: .85rem; line-height: 1.42; } .dv23-boundary-definitions span { display: block; margin-top: 18px; color: var(--dv22-muted); font-size: .72rem; line-height: 1.55; } body.dv23-page .dv2-evidence-contract { grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr); gap: clamp(40px, 5.5vw, 76px); } body.dv23-page .dv2-evidence-contract__intro { top: 140px; } body.dv23-page .dv2-evidence-contract__intro h2 { font-size: clamp(2.05rem, 3.5vw, 3.45rem); } body.dv23-page .dv2-evidence-contract__intro p { margin-top: 16px; line-height: 1.65; } body.dv23-page .dv2-gate { grid-template-columns: 88px minmax(170px, .48fr) 1fr; gap: 20px; padding-block: 20px; } body.dv23-page .dv2-gate p { line-height: 1.55; } /* Participation uses flat editorial columns so the field selector remains the primary card system. */ body.dv23-page .dv21-network-grid article { min-height: 218px; padding-block: 24px; } body.dv23-page .dv21-network-grid h3 { margin-top: 30px; } body.dv23-page .dv21-network-grid p { margin: 12px 0 20px; line-height: 1.62; } /* Desktop long-page locator. It communicates position and uses no scroll listener. */ .dv23-journey-nav { position: fixed; z-index: 15; top: 50%; right: 14px; width: 82px; display: grid; gap: 3px; padding: 8px; border: 1px solid rgba(22, 107, 199, .18); border-radius: 14px; background: var(--dv23-rail-bg); box-shadow: 0 14px 36px rgba(31, 84, 120, .1); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transform: translateY(-50%); } .dv23-journey-nav a { position: relative; min-height: 36px; display: grid; place-items: center; padding: 7px 6px; border-radius: 8px; color: var(--dv22-muted); font-size: .66rem; font-weight: 720; line-height: 1.25; text-align: center; text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease; } .dv23-journey-nav a:hover { background: var(--dv22-blue-pale); color: var(--dv22-blue-strong); transform: translateX(-2px); } .dv23-journey-nav a[aria-current="step"] { background: linear-gradient(135deg, var(--dv22-blue-soft), var(--dv22-green-soft)); color: var(--dv22-blue-strong); box-shadow: inset 3px 0 0 var(--dv22-green); } .dv23-journey-nav a:focus-visible { outline: 3px solid var(--dv2-focus); outline-offset: 2px; } #domain-explorer, #workflow, #engineering-records, #developer-tools-preview, #evidence-review, #participation, #project-inputs { /* Global scroll-padding already reserves the sticky shell. Avoid doubling it. */ scroll-margin-top: 0; } /* Domain pages: two-line desktop headlines and shorter decision sections. */ body.dv23-page .dv21-domain-hero { padding: 24px 0 clamp(54px, 5.7vw, 76px); } body.dv23-page .dv21-domain-hero__layout { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: clamp(42px, 5vw, 70px); padding-top: clamp(40px, 4.8vw, 64px); } html body.dv23-page.dv21-domain-page #main-content .dv21-domain-hero h1 { max-width: 830px !important; font-size: clamp(3rem, 4.15vw, 4.15rem) !important; line-height: 1.03 !important; } body.dv23-page .dv21-domain-hero .dv2-lead { max-width: 710px; margin-top: 18px; line-height: 1.66; } body.dv23-page .dv21-domain-summary article { padding: 17px 20px; } body.dv23-page .dv21-domain-summary strong { margin-top: 6px; line-height: 1.48; } .dv23-scope-gate { display: grid; grid-template-columns: minmax(180px, .85fr) repeat(3, minmax(0, 1fr)); align-items: stretch; margin-top: 34px; overflow: hidden; border: 1px solid var(--dv22-line); border-radius: 14px; background: rgba(255, 255, 255, .82); box-shadow: 0 16px 42px rgba(31, 84, 120, .055); } .dv23-scope-gate > strong, .dv23-scope-gate article { min-height: 76px; display: grid; align-content: center; padding: 14px 18px; } .dv23-scope-gate > strong { color: var(--dv22-ink); font-size: .88rem; } .dv23-scope-gate article { position: relative; border-left: 1px solid var(--dv22-line); } .dv23-scope-gate article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--dv22-green); } .dv23-scope-gate article:nth-of-type(2)::before { background: #e0a52f; } .dv23-scope-gate article:nth-of-type(3)::before { background: #d06755; } .dv23-scope-gate span { color: var(--dv22-ink); font-size: .78rem; font-weight: 760; } .dv23-scope-gate p { margin: 4px 0 0; color: var(--dv22-muted); font-size: .68rem; line-height: 1.4; } body.dv23-page .dv21-domain-switch a { min-height: 50px; display: flex; align-items: center; padding: 12px 18px; } body.dv23-page .dv21-problem-grid { gap: 10px; } body.dv23-page .dv21-problem-grid article { min-height: 188px; padding: 20px; } body.dv23-page .dv21-problem-grid h3 { margin-top: 0; } body.dv23-page .dv21-problem-grid p { margin-top: 10px; line-height: 1.6; } body.dv23-page .dv21-domain-stages li { grid-template-columns: 1fr; gap: 0; padding-block: 18px; } body.dv23-page .dv21-domain-stages p { max-width: 760px; margin-top: 6px; line-height: 1.58; } body.dv23-page .dv21-deep-links { gap: 10px; } body.dv23-page .dv21-deep-links a { min-height: 210px; padding: 20px; } body.dv23-page .dv21-deep-links strong { margin-top: 28px; } body.dv23-page .dv21-deep-links p { margin-top: 10px; line-height: 1.56; } body.dv23-page .dv21-boundary { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: clamp(34px, 5vw, 70px); } body.dv23-page .dv21-boundary h2 { font-size: clamp(2rem, 3.35vw, 3.35rem); } body.dv23-page .dv21-boundary > div:last-child { line-height: 1.65; } /* Domain-aware context on shared professional pages. */ .dv23-context-bar { border-bottom: 1px solid var(--dv22-line); background: linear-gradient(90deg, var(--dv22-blue-pale), #fff 58%, var(--dv22-green-soft)); } .dv23-context-bar__inner { min-height: 64px; display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 14px; } .dv23-context-bar span { color: var(--dv22-blue-strong); font-family: var(--dv2-mono); font-size: .65rem; font-weight: 760; } .dv23-context-bar strong { color: var(--dv22-ink); font-size: .86rem; } .dv23-context-bar p { margin: 0; color: var(--dv22-muted); font-size: .72rem; line-height: 1.45; } .dv23-context-bar a { color: var(--dv22-blue-strong); font-size: .73rem; font-weight: 720; text-decoration: none; } .dv23-context-bar a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Challenges and shared page intros. */ body.dv23-page .dv2-page-intro { padding-block: clamp(54px, 5.8vw, 78px); } body.dv23-page .dv2-page-intro h1 { font-size: clamp(2.85rem, 5.2vw, 5rem); } body.dv23-page .dv2-domain-panel { min-height: 430px; } body.dv23-page .dv2-domain-panel__intro { padding: 26px; } body.dv23-page .dv2-domain-panel__issues { padding: 22px 26px; } body.dv23-page .dv2-issue { min-height: 112px; padding: 15px; } body.dv23-page .dv2-challenge { gap: 18px; padding: 20px; } body.dv23-page .dv2-filter-status { width: fit-content; margin: -8px 0 18px; padding: 8px 12px; border: 1px solid rgba(22, 107, 199, .2); border-radius: 999px; background: linear-gradient(135deg, var(--dv22-blue-pale), var(--dv22-green-soft)); color: var(--dv22-blue-strong); font-family: var(--dv2-mono); font-size: .68rem; font-weight: 760; } body.dv23-page .dv2-challenge[hidden] { display: none; } body.dv23-page .dv2-review-chain article { min-height: 152px; padding: 20px; } body.dv23-page .dv2-review-chain strong { margin-top: 28px; } @media (max-width: 1260px) { .dv23-journey-nav { display: none; } } @media (max-width: 1080px) { body.dv23-page .dv21-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(390px, .88fr); } body.dv23-page .dv2-tool-row { grid-template-columns: 84px minmax(190px, .68fr) 1fr; } body.dv23-page .dv2-tool-row .dv2-text-link { grid-column: 2 / -1; } .dv23-boundary-definitions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv23-boundary-definitions article:nth-child(3) { border-right: 0; } .dv23-boundary-definitions article:nth-child(n+4) { border-top: 1px solid var(--dv22-line); } } @media (max-width: 880px) { body.dv23-page .dv21-hero__grid, body.dv23-page .dv21-domain-hero__layout, body.dv23-page .dv21-boundary, body.dv23-page .dv2-evidence-contract { grid-template-columns: 1fr; } body.dv23-page .dv21-hero__copy { padding-block: 58px 42px; } body.dv23-page .dv21-hero__media { min-height: 0; margin: 0 0 34px; } body.dv23-page .dv21-domain-panel__intro { grid-template-columns: 1fr; gap: 16px; } body.dv23-page .dv21-problem-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.dv23-page .dv21-problem-list li:nth-child(2) { border-right: 0; } body.dv23-page .dv21-problem-list li:nth-child(n+3) { border-top: 1px solid var(--dv22-line); } body.dv23-page .dv2-evidence-contract__intro { position: static; } body.dv23-page .dv21-domain-hero__layout { gap: 28px; } .dv23-context-bar__inner { grid-template-columns: auto 1fr auto; padding-block: 12px; } .dv23-context-bar p { grid-column: 1 / -1; grid-row: 2; } .dv23-context-bar a:last-child { display: none; } } @media (max-width: 620px) { :root { --dv23-section-space: 52px; --dv23-section-space-compact: 46px; } body.dv23-page .dv2-section__head, body.dv23-page .dv21-section-intro { margin-bottom: 26px; } body.dv23-page .dv2-section__head h2, body.dv23-page .dv21-section-intro h2 { font-size: clamp(2rem, 9.6vw, 2.65rem); line-height: 1.06; } body.dv23-page .dv2-section__head p, body.dv23-page .dv21-section-intro > p:last-child { line-height: 1.62; } body.dv23-page .dv2-final { padding-block: 54px; } body.dv23-page .dv2-final h2 { font-size: clamp(2.2rem, 10.6vw, 3rem); } body.dv23-page .dv2-actions .dv2-action { width: 100%; } body.dv23-page .dv21-hero__copy { padding-block: 42px 34px; } html body.dv23-page.dv21-page #main-content .dv21-hero h1 { font-size: clamp(2.35rem, 10.8vw, 3rem) !important; line-height: 1.045 !important; } body.dv23-page .dv21-hero__lead { margin-top: 16px; font-size: .94rem; line-height: 1.62; } body.dv23-page .dv21-hero__media { border-radius: 12px; } body.dv23-page .dv21-hero__media img { aspect-ratio: 16 / 8.4; object-fit: cover; } body.dv23-page .dv21-hero__media figcaption { bottom: 8px; font-size: .58rem; } body.dv23-page .dv21-domain-explorer { padding-block: 50px 56px; } body.dv23-page .dv21-domain-tabs { gap: 8px; } html body.dv23-page.dv21-page #main-content button.dv21-domain-tab { min-height: 174px !important; padding-bottom: 13px !important; } body.dv23-page .dv21-domain-tab__media { height: 76px; margin-bottom: 10px; } body.dv23-page .dv21-domain-tab__number, body.dv23-page .dv21-domain-tab > strong, body.dv23-page .dv21-domain-tab__copy { margin-inline: 11px; } body.dv23-page .dv21-domain-tab__number { font-size: .54rem; } body.dv23-page .dv21-domain-tab > strong { font-size: .83rem; line-height: 1.35; } body.dv23-page .dv21-domain-panel { padding: 20px 16px; } body.dv23-page .dv21-domain-panel__intro { padding-bottom: 18px; } body.dv23-page .dv21-domain-panel__intro h3 { font-size: 1.55rem; } body.dv23-page .dv21-domain-panel__intro > p { font-size: .94rem; } body.dv23-page .dv21-domain-panel__body { padding-top: 18px; } body.dv23-page .dv21-problem-list li { min-height: 62px; padding: 10px 10px 10px 22px; font-size: .71rem; } body.dv23-page .dv21-problem-list li::before { left: 9px; } body.dv23-page .dv21-domain-panel__actions { align-items: stretch; gap: 14px; margin-top: 18px; padding-top: 18px; } body.dv23-page .dv21-progressive { padding-block: 50px; } body.dv23-page .dv21-progressive-steps, body.dv23-page .dv2-tool-list, body.dv23-page .dv21-deep-links, body.dv23-page .dv21-domain-summary { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(238px, 82%); gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 0 10px; border: 0; background: transparent; scroll-snap-type: inline mandatory; scrollbar-color: rgba(22, 107, 199, .28) transparent; scrollbar-width: thin; } body.dv23-page .dv21-progressive-steps::before { display: none; } body.dv23-page .dv21-progressive-steps li, body.dv23-page .dv21-progressive-steps li:not(:first-child) { min-height: 154px; padding: 20px; border: 1px solid rgba(22, 107, 199, .18); border-radius: 12px; background: rgba(255, 255, 255, .72); scroll-snap-align: start; } body.dv23-page .dv2-asset-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.dv23-page .dv2-asset, body.dv23-page .dv2-asset:nth-child(n) { min-height: 206px; grid-column: span 1; padding: 15px; } body.dv23-page .dv2-asset h3 { margin-top: 20px; font-size: 1.02rem; } body.dv23-page .dv2-asset p { font-size: .72rem; line-height: 1.52; } body.dv23-page .dv2-asset .dv2-text-link { padding-top: 14px; font-size: .73rem; } body.dv23-page .dv2-tool-row { min-height: 214px; grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--dv22-line); border-radius: 12px; background: #fff; scroll-snap-align: start; } body.dv23-page .dv2-tool-row p, body.dv23-page .dv2-tool-row .dv2-text-link { grid-column: 1; } .dv23-tools-all { align-items: flex-start; flex-direction: column; padding-top: 12px; } .dv23-boundary-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; } .dv23-boundary-definitions article { min-height: 142px; padding: 16px 14px; border-top: 1px solid var(--dv22-line); } .dv23-boundary-definitions article:nth-child(-n+2) { border-top: 0; } .dv23-boundary-definitions article:nth-child(2n) { border-right: 0; } .dv23-boundary-definitions article:last-child { grid-column: 1 / -1; min-height: 118px; } .dv23-boundary-definitions span { margin-top: 12px; } body.dv23-page .dv2-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; background: transparent; } body.dv23-page .dv2-gate { min-height: 210px; grid-template-columns: 1fr; align-content: start; gap: 9px; padding: 16px; border: 1px solid var(--dv22-line); border-radius: 12px; } body.dv23-page .dv2-gate p { grid-column: 1; font-size: .72rem; } body.dv23-page .dv21-network-grid article { min-height: 0; padding-block: 20px; } body.dv23-page .dv21-network-grid h3 { margin-top: 20px; } body.dv23-page .dv21-domain-hero { padding: 16px 0 46px; } body.dv23-page .dv21-domain-hero__layout { gap: 24px; padding-top: 34px; } html body.dv23-page.dv21-domain-page #main-content .dv21-domain-hero h1 { font-size: clamp(2.25rem, 10.4vw, 2.75rem) !important; line-height: 1.045 !important; } body.dv23-page .dv21-domain-hero .dv2-lead { margin-top: 15px; font-size: .92rem; line-height: 1.58; } body.dv23-page .dv21-domain-summary article { min-height: 150px; padding: 16px; border: 1px solid var(--dv22-line); border-radius: 12px; scroll-snap-align: start; } .dv23-scope-gate { grid-template-columns: 1fr; margin-top: 20px; } .dv23-scope-gate > strong, .dv23-scope-gate article { min-height: 0; padding: 12px 15px; } .dv23-scope-gate article { grid-template-columns: minmax(94px, .7fr) 1fr; align-items: center; border-top: 1px solid var(--dv22-line); border-left: 0; } .dv23-scope-gate p { margin: 0; } body.dv23-page .dv21-domain-switch { position: sticky; top: var(--header-height, 64px); } body.dv23-page .dv21-domain-switch .dv2-shell { width: 100%; display: flex; overflow-x: auto; scroll-snap-type: inline mandatory; scrollbar-width: none; } body.dv23-page .dv21-domain-switch .dv2-shell::-webkit-scrollbar { display: none; } body.dv23-page .dv21-domain-switch a { min-width: 43%; min-height: 54px; flex: 0 0 auto; justify-content: center; padding: 10px 12px; border-bottom: 0; font-size: .68rem; text-align: center; scroll-snap-align: start; } body.dv23-page .dv21-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.dv23-page .dv21-problem-grid article { min-height: 170px; padding: 15px; } body.dv23-page .dv21-problem-grid h3 { font-size: .92rem; } body.dv23-page .dv21-problem-grid p { font-size: .72rem; line-height: 1.52; } body.dv23-page .dv21-domain-stages li { grid-template-columns: 1fr; padding-block: 15px; } body.dv23-page .dv21-deep-links a { min-height: 214px; padding: 18px; scroll-snap-align: start; } body.dv23-page .dv21-deep-links strong { margin-top: 24px; } body.dv23-page .dv21-boundary { gap: 20px; } body.dv23-page .dv21-boundary h2 { font-size: clamp(2rem, 9.5vw, 2.55rem); } body.dv23-page .dv21-boundary > div:last-child { padding-top: 0; line-height: 1.58; } body.dv23-page .dv2-page-intro { padding-block: 46px; } body.dv23-page .dv2-page-intro h1 { font-size: clamp(2.55rem, 11.8vw, 3.45rem); } body.dv23-page .dv2-domain-panel { min-height: 0; } body.dv23-page .dv2-domain-panel__intro, body.dv23-page .dv2-domain-panel__issues { padding: 20px 16px; } body.dv23-page .dv2-issue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; background: transparent; } body.dv23-page .dv2-issue { min-height: 128px; border: 1px solid var(--dv22-line); border-radius: 10px; } body.dv23-page .dv2-challenge { gap: 10px; padding: 16px; } body.dv23-page .dv2-review-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.dv23-page .dv2-review-chain article, body.dv23-page .dv2-review-chain article:nth-child(n) { min-height: 150px; padding: 16px; } body.dv23-page .dv2-review-chain article:nth-child(2) { border-top: 0; } body.dv23-page .dv2-review-chain article:nth-child(odd) { border-left: 0; } .dv23-context-bar__inner { grid-template-columns: 1fr auto; gap: 7px 12px; } .dv23-context-bar span { display: none; } .dv23-context-bar strong { font-size: .8rem; } .dv23-context-bar p { grid-column: 1 / -1; } html body.dv23-page footer.formal-site-footer:not(#dv22-dark-footer) .footer-directory.footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 18px !important; } } @media (max-width: 360px) { body.dv23-page .dv2-asset-map { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 8px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: inline mandatory; scrollbar-width: thin; } body.dv23-page .dv2-asset, body.dv23-page .dv2-asset:nth-child(n) { min-height: 212px; scroll-snap-align: start; } body.dv23-page .dv21-problem-grid { grid-template-columns: 1fr; } body.dv23-page .dv21-problem-grid article { min-height: 142px; } body.dv23-page .dv2-gates { grid-template-columns: 1fr; } body.dv23-page .dv2-gate { min-height: 0; } } @media (max-width: 420px) { html body.dv23-page footer.formal-site-footer:not(#dv22-dark-footer) .footer-directory.footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* * V2.3 compact typography regression guard. * developer-v200 ends with deliberately forceful title rules; these scoped * overrides keep only the five shared professional pages on the V2.3 scale. */ html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-page-intro h1 { font-size: clamp(2.85rem, 5.2vw, 5rem) !important; line-height: 1.01 !important; } html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-section__head h2, html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-evidence-contract__intro h2 { font-size: clamp(2.15rem, 3.75vw, 3.75rem) !important; line-height: 1.035 !important; } html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-final h2 { font-size: clamp(2.35rem, 4.5vw, 4.45rem) !important; } @media (max-width: 620px) { html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-page-intro h1 { font-size: clamp(2.55rem, 11.8vw, 2.85rem) !important; } html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-section__head h2, html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-evidence-contract__intro h2 { font-size: clamp(2rem, 9.6vw, 2.65rem) !important; line-height: 1.06 !important; } html body.dv23-page.dv2-page:not(.dv21-page):not(.dv21-domain-page):not(.dv22-challenges-page) #main-content .dv2-final h2 { font-size: clamp(2.2rem, 10.6vw, 3rem) !important; } } @media (prefers-reduced-motion: reduce) { html body.dv22-page.dv23-page.dv21-page #main-content button.dv21-domain-tab, html body.dv22-page.dv23-page.dv21-page #main-content button.dv21-domain-tab:hover, html body.dv22-page.dv23-page.dv21-page #main-content button.dv21-domain-tab[aria-selected="true"], body.dv23-page .dv21-domain-tab, body.dv23-page .dv21-domain-tab:hover, body.dv23-page .dv21-domain-tab[aria-selected="true"], body.dv23-page .dv23-journey-nav a, body.dv23-page .dv2-action, body.dv23-page .dv21-deep-links a { transform: none !important; transition: none !important; } body.dv23-page :is(.dv21-progressive-steps, .dv2-tool-list, .dv21-deep-links, .dv21-domain-summary) { scroll-behavior: auto !important; } } @media (forced-colors: active) { .dv23-journey-nav, .dv23-context-bar, .dv23-boundary-definitions article { forced-color-adjust: auto; } }