@charset "UTF-8"; /* * Vertex Medic: homepage, mobile-first. * * Architecture * ------------ * 1. TOKENS surfaces, ink, semantic state colours, type, spacing, chrome, focus * 2. BASE resets, document, shared primitives * 3. NOTATION the provenance system: marks and chips * 4. BLOCKS one scoped block per section, prefixed vx- * 5. STATE .is-* state classes, the .vx-js progressive-enhancement layer * 6. RESPONSIVE narrow phone, then the first width step towards desktop * * Naming: .vx-block__element--modifier. Every selector is prefixed vx- so the * page can be embedded anywhere without collision, and so a desktop layer can * be added by width alone rather than by renaming. * * Progressive enhancement: every collapsed or pre-animation state lives behind * .vx-js on . With JavaScript off (or failed) the page renders fully * expanded and every figure is already in the markup. */ /* ======================================================================== 0. FONTS Self-hosted. Newsreader, Hanken Grotesk and Fragment Mono are all licensed under the SIL Open Font License 1.1, which permits self-hosting and redistribution provided the copyright notice and licence travel with the files: they are in assets/fonts/OFL-*.txt. Provenance, versions and hashes are in FONTS.md. These are the same latin-subset files Google serves, fetched once from fonts.gstatic.com and referenced with the same unicode-range, so the rendering is identical rather than merely similar. Only the latin subset is shipped, because that is the only subset the pages ever needed: the one character outside it (U+2190, the back arrow) fell through to a system font before and still does. Newsreader and Hanken Grotesk are variable fonts. Google declares one face per weight against the same file; here each file is declared once with a font-weight RANGE instead. The rendering is identical — the browser instances the wght axis at the requested weight either way — but one declaration per file means a preload is actually reused, where repeated declarations made the browser fetch the same file twice. The opsz axis stays free for font-variation-settings: "opsz" to drive. ======================================================================== */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/newsreader-roman-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-italic-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The upper bound is 600, not 500. Nothing asks for 600 by name, but and ask for 700 and CSS font matching clamps that to the top of the range. Lowering it would make every bold word on the site lighter. */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/hankengrotesk-roman-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fragmentmono-roman-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fragment Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fragmentmono-italic-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ======================================================================== 1. TOKENS ======================================================================== */ :root { /* -- paper surfaces -- */ --vx-paper: #F7F5F0; /* page */ --vx-paper-raised: #EFECE4; /* the account instrument, key rows */ --vx-paper-sunk: #E7E3DA; /* chips, empty bar track */ /* -- ink -- */ --vx-ink: #121417; /* primary text, rules that must read as structure */ --vx-ink-2: #42474F; /* secondary text */ --vx-ink-3: #5F656E; /* labels, captions, mono keys */ --vx-ink-inverse: var(--vx-paper); /* -- rules -- */ --vx-rule: #D8D3C8; /* within a block */ --vx-rule-strong: #BFB9AB; /* between blocks */ /* -- semantic state: the provenance and commercial colour system -- green verified reconciled to a clinic record amber open an unresolved commercial position, being worked blue clinical anything that belongs to a clinician, never the desk red stop a thing Vertex cannot do at all */ --vx-verified: #186A47; --vx-verified-bg: #E1EEE6; --vx-open: #925708; --vx-open-bg: #F7E9CF; --vx-clinical: #3A5876; --vx-clinical-bg: #E1E8F0; --vx-stop: #A3251B; --vx-gold: #CFAE6B; /* the one warm accent, on the dark close only */ /* -- typography -- */ --vx-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --vx-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --vx-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --vx-t-micro: 9px; /* smallest mono key */ --vx-t-nano: 9.5px; --vx-t-label: 10px; /* the standard mono label */ --vx-t-label-lg: 10.5px; --vx-t-mono: 11px; --vx-t-xs: 12px; --vx-t-sm: 12.5px; --vx-t-base: 13.5px; --vx-t-body: 14.5px; --vx-t-root: 15px; --vx-t-figure: 17px; /* a number in a row */ --vx-t-figure-lg: 20px; --vx-t-display: 30px; /* section heading */ --vx-t-hero: 46px; --vx-track-label: .12em; /* mono label letter-spacing */ --vx-track-eyebrow: .18em; /* -- spacing -- */ --vx-gut: 20px; /* the page gutter; every full-bleed block uses it */ --vx-s-1: 4px; --vx-s-2: 8px; --vx-s-3: 12px; --vx-s-4: 14px; --vx-s-5: 18px; --vx-s-6: 20px; --vx-s-7: 24px; --vx-s-8: 34px; --vx-section-y: 38px; /* -- sticky chrome: measured at runtime, defaulted for no-JS -- Every sticky offset and every scroll destination derives from these two. */ --vx-chrome: 44px; /* the masthead */ --vx-acc-h: 120px; /* the account instrument head */ /* -- focus -- */ --vx-focus-color: var(--vx-ink); --vx-focus-color-inverse: var(--vx-paper); --vx-focus-width: 2px; --vx-focus-offset: 3px; /* -- targets -- */ --vx-tap: 44px; /* -- motion -- */ --vx-ease: cubic-bezier(.2, .7, .2, 1); --vx-dur-fast: .25s; --vx-dur: .4s; --vx-dur-slow: .7s; } /* ======================================================================== 2. BASE ======================================================================== */ /* Elements only, not pseudo-elements: the notation marks' ::before boxes size from their content, which is what gives the Illustrative mark its 8px dotted square rather than a 6px one. */ * { box-sizing: border-box; } * { -webkit-text-size-adjust: 100%; } html { background: var(--vx-paper); scroll-behavior: smooth; } body { margin: 0; background: var(--vx-paper); color: var(--vx-ink); font-family: var(--vx-sans); font-size: var(--vx-t-root); line-height: 1.5; letter-spacing: -.004em; } h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } [hidden] { display: none !important; } /* These four blocks are real tables whose rows are laid out on a grid. Changing display drops the implicit table roles, so the markup restores them with explicit role attributes. See README, "tables". */ table { border-collapse: collapse; border-spacing: 0; } th, td { padding: 0; } /* a row header is a heading in the accessibility tree, not in the type scale */ th { font-weight: inherit; text-align: left; } .vx-va, .vx-stmt__lines, .vx-proof, .vx-gov, .vx-why { display: block; } .vx-va > tbody, .vx-stmt__lines > tbody, .vx-proof > tbody, .vx-gov > tbody, .vx-why > tbody { display: block; } caption { text-align: left; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; } /* -- focus -------------------------------------------------------------- */ :focus-visible { outline: var(--vx-focus-width) solid var(--vx-focus-color); outline-offset: var(--vx-focus-offset); } .vx-cta :focus-visible, .vx-skip:focus-visible { outline-color: var(--vx-focus-color-inverse); } .vx-field__plot:focus-visible { outline-offset: 4px; } /* -- screen-reader only ------------------------------------------------- */ .vx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .vx-skip { position: absolute; left: var(--vx-gut); top: 0; z-index: 200; transform: translateY(-140%); padding: 11px 14px; background: var(--vx-ink); color: var(--vx-paper); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-label); text-transform: uppercase; text-decoration: none; min-height: var(--vx-tap); display: inline-flex; align-items: center; } .vx-skip:focus { transform: translateY(6px); } /* -- shared primitives -------------------------------------------------- */ .vx-wrap { padding-left: var(--vx-gut); padding-right: var(--vx-gut); } /* The eyebrow is a block-level label holding an inline run. The paragraph keeps the body's line box, exactly as the approved design's inline span did, and the span carries the notation type. */ .vx-eyebrow { font-size: var(--vx-t-root); line-height: 1.5; color: var(--vx-ink-3); } .vx-eyebrow > span { font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-eyebrow); text-transform: uppercase; } .vx-h2 { font-family: var(--vx-serif); font-weight: 400; font-size: var(--vx-t-display); line-height: 1.04; letter-spacing: -.022em; margin-top: var(--vx-s-3); font-variation-settings: "opsz" 36; text-wrap: balance; } .vx-h2 em { font-style: italic; } .vx-lede { margin-top: var(--vx-s-3); font-size: var(--vx-t-body); line-height: 1.5; color: var(--vx-ink-2); max-width: 36ch; } .vx-lede b { font-weight: 500; color: var(--vx-ink); } /* a numbered panel inside the account instrument */ .vx-panel { padding: var(--vx-s-8) 0 30px; border-bottom: 1px solid var(--vx-rule-strong); } /* A disclosure control. Hidden until JavaScript can honour it; without it the panel it would open is already open. */ .vx-toggle { display: none; } .vx-js .vx-toggle { display: inline-flex; align-items: center; gap: var(--vx-s-2); margin: var(--vx-s-3) var(--vx-gut) 0; padding: 9px 12px; border: 1px solid var(--vx-rule-strong); background: var(--vx-paper); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink); position: relative; min-height: 40px; } /* the box stays 40px; the target is 44px */ .vx-toggle::after { content: ""; position: absolute; inset: -2px 0; } .vx-toggle svg { width: 12px; height: 12px; transition: transform var(--vx-dur-fast) var(--vx-ease); } .vx-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* a panel a .vx-toggle controls: open unless JavaScript collapses it */ .vx-js .vx-disclosure { display: none; } .vx-js .vx-disclosure.is-open { display: block; } /* ======================================================================== 3. NOTATION: the provenance system ======================================================================== */ .vx-mark { display: inline-flex; align-items: center; gap: 5px; font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .13em; text-transform: uppercase; padding: 3.5px 6px 3.5px 5px; border: 1px solid currentColor; line-height: 1; white-space: nowrap; vertical-align: middle; } .vx-mark::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; background: currentColor; } /* verified: reconciled to a clinic record */ .vx-mark--verified { color: var(--vx-verified); } /* sourced: an external fact, with its source */ .vx-mark--sourced { color: var(--vx-ink-2); } .vx-mark--sourced::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } /* modelled: arithmetic with a stated assumption */ .vx-mark--modelled { color: var(--vx-ink-2); } .vx-mark--modelled::before { background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 2.5px); } /* illustrative: synthetic demonstration */ .vx-mark--illustrative { color: var(--vx-open); } .vx-mark--illustrative::before { background: transparent; border: 1px dotted currentColor; } /* open: an unresolved commercial position */ .vx-mark--open { color: var(--vx-open); } .vx-mark--open::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } /* clinical: belongs to a clinician */ .vx-mark--clinical { color: var(--vx-clinical); } .vx-mark--clinical::before { border-radius: 50%; } /* calculated: arithmetic on recorded numbers */ .vx-mark--calculated { color: var(--vx-ink-2); } .vx-mark--calculated::before { background: linear-gradient(180deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; } .vx-chip { font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; background: var(--vx-paper-sunk); color: var(--vx-ink-2); white-space: nowrap; } .vx-chip--verified { background: var(--vx-verified-bg); color: var(--vx-verified); } .vx-chip--clinical { background: var(--vx-clinical-bg); color: var(--vx-clinical); } .vx-chip--open { background: var(--vx-open-bg); color: var(--vx-open); } /* ======================================================================== 4. BLOCKS ======================================================================== */ /* -- masthead ----------------------------------------------------------- */ .vx-masthead { position: sticky; top: 0; z-index: 80; background: var(--vx-paper); display: flex; align-items: baseline; justify-content: space-between; gap: var(--vx-s-3); padding: 13px var(--vx-gut) 11px; border-bottom: 1px solid var(--vx-ink); } .vx-masthead__mark { font-family: var(--vx-serif); font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1; } .vx-masthead__mark span { font-weight: 400; color: var(--vx-ink-2); } .vx-masthead__role { font-family: var(--vx-mono); font-size: var(--vx-t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--vx-ink-3); text-align: right; line-height: 1.4; } /* -- 1. hero ------------------------------------------------------------ */ .vx-hero { padding-top: 28px; padding-bottom: var(--vx-s-2); } .vx-hero__title { font-family: var(--vx-serif); font-weight: 400; font-size: var(--vx-t-hero); line-height: 1; letter-spacing: -.028em; margin-top: var(--vx-s-4); font-variation-settings: "opsz" 72; text-wrap: balance; } .vx-hero__title em { font-style: italic; } .vx-hero__lead { margin-top: var(--vx-s-4); font-size: 16px; line-height: 1.5; color: var(--vx-ink); max-width: 34ch; } .vx-hero__lead b { font-weight: 500; } .vx-hero__sub { margin-top: var(--vx-s-2); font-size: var(--vx-t-body); line-height: 1.5; color: var(--vx-ink-2); max-width: 34ch; } /* -- the enquiry field -------------------------------------------------- */ .vx-field { padding: var(--vx-s-3) var(--vx-gut) 0; } .vx-field__row { display: grid; grid-template-columns: 1fr 128px; gap: var(--vx-s-4); align-items: start; } /* One composite widget, one tab stop. The 412 marks are decoration; the selected position is announced through .vx-pick, which is the status region. See README, "the field". */ .vx-field__plot { display: block; width: 100%; cursor: pointer; touch-action: manipulation; } .vx-field__plot svg { display: block; width: 100%; height: auto; } .vx-field__plot rect { fill: var(--vx-ink); transition: fill var(--vx-dur) var(--vx-ease), stroke var(--vx-dur) var(--vx-ease); } .vx-field__plot rect.is-treated { fill: var(--vx-verified); } .vx-field__plot rect.is-open { fill: transparent; stroke: var(--vx-open); stroke-width: .13; } .vx-field__plot rect.is-open.is-closed { fill: var(--vx-ink); stroke: var(--vx-ink); } .vx-field__plot rect.is-selected { stroke: var(--vx-ink); stroke-width: .22; } .vx-field__plot rect.is-cursor { stroke: var(--vx-ink); stroke-width: .3; stroke-dasharray: .25 .15; } .vx-field__plot rect.is-open.is-selected { fill: var(--vx-open-bg); } .vx-field__key { font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--vx-ink-3); line-height: 1.6; } .vx-field__key li { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--vx-rule); } .vx-field__key li:last-child { border-bottom: 0; } .vx-field__key b { color: var(--vx-ink); font-weight: 400; font-size: var(--vx-t-xs); } .vx-field__key .vx-field__key--sub { padding-left: var(--vx-s-3); } .vx-field__swatch { width: 8px; height: 8px; background: var(--vx-ink); flex: 0 0 auto; } .vx-field__swatch--treated { background: var(--vx-verified); } .vx-field__swatch--open { background: transparent; box-shadow: inset 0 0 0 1px var(--vx-open); } /* the selected position, and the only live region in the hero */ .vx-pick { margin-top: var(--vx-s-3); min-height: var(--vx-tap); padding: 9px 11px; border: 1px solid var(--vx-rule-strong); background: var(--vx-paper-raised); font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); line-height: 1.5; color: var(--vx-ink-2); display: flex; justify-content: space-between; gap: 10px; align-items: center; } .vx-pick b { color: var(--vx-ink); font-weight: 400; } .vx-pick--accounted b { color: var(--vx-verified); } .vx-pick--open b { color: var(--vx-open); } .vx-pick__go { position: relative; color: var(--vx-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; } /* lift the hit area to the 44px target without moving anything */ .vx-pick__go::after { content: ""; position: absolute; inset: -15px -11px; } .vx-pick__mark { flex: 0 0 auto; } /* -- the account instrument --------------------------------------------- */ .vx-account { position: relative; background: var(--vx-paper-raised); border-top: 1px solid var(--vx-ink); scroll-margin-top: var(--vx-chrome); margin-top: var(--vx-s-5); } /* every scroll destination clears the masthead, and anything inside the account also clears the account head */ .vx-account .vx-panel, .vx-account .vx-stmt { scroll-margin-top: calc(var(--vx-chrome) + var(--vx-acc-h)); } .vx-section, .vx-cta { scroll-margin-top: var(--vx-chrome); } .vx-account__head { position: sticky; top: var(--vx-chrome); z-index: 70; background: var(--vx-paper-raised); border-bottom: 1px solid var(--vx-rule-strong); padding: 10px var(--vx-gut); } .vx-account__who { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .vx-account__clinic { font-family: var(--vx-mono); font-size: var(--vx-t-mono); letter-spacing: var(--vx-track-label); text-transform: uppercase; line-height: 1.5; } .vx-account__name { font: inherit; font-weight: 400; } .vx-account__asof { display: block; font-size: var(--vx-t-nano); color: var(--vx-ink-3); letter-spacing: .1em; } .vx-counter { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vx-s-3); margin-top: 2px; } .vx-odo { font-family: var(--vx-mono); font-size: 44px; line-height: 1; letter-spacing: 0; color: var(--vx-open); display: inline-flex; align-items: flex-start; transform-origin: left center; } .vx-odo__col { display: block; height: 1em; overflow: hidden; max-width: 1.04ch; transition: max-width .45s var(--vx-ease); } .vx-odo__col.is-blank { max-width: 0; } .vx-odo__strip { display: block; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform .52s var(--vx-ease); } .vx-odo__strip i { display: block; height: 1em; font-style: normal; } .vx-counter__label { font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--vx-ink-2); text-align: right; line-height: 1.55; } .vx-counter__label b { display: block; color: var(--vx-ink); font-weight: 400; } .vx-counter__value { display: block; color: var(--vx-open); font-size: 13px; letter-spacing: .02em; margin-top: 2px; } .vx-counter__done { display: none; } .vx-account.is-zero .vx-odo { color: var(--vx-verified); animation: vx-settle .42s var(--vx-ease) both; } .vx-account.is-zero .vx-counter__todo { display: none; } .vx-account.is-zero .vx-counter__done { display: block; color: var(--vx-verified); } @keyframes vx-settle { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } } .vx-strip { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--vx-s-2); } .vx-strip__mark { position: relative; display: block; width: 7px; height: 7px; box-shadow: inset 0 0 0 1px var(--vx-open); background: transparent; transition: background .3s var(--vx-ease), box-shadow .3s var(--vx-ease); } .vx-strip__mark.is-closed { background: var(--vx-ink); box-shadow: inset 0 0 0 1px var(--vx-ink); } .vx-strip__mark.is-selected { box-shadow: inset 0 0 0 2px var(--vx-ink); } /* three beats, then it rests on its ring. Nothing repaints forever. */ .vx-strip__mark.is-selected::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vx-open-bg); animation: vx-pulse 1.4s ease-in-out 3 both; } @keyframes vx-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .vx-account.is-zero .vx-strip__mark.is-closed { background: var(--vx-verified); box-shadow: inset 0 0 0 1px var(--vx-verified); } /* -- 2. value account ---------------------------------------------------- */ .vx-va { margin: var(--vx-s-6) var(--vx-gut) 0; border-top: 1px solid var(--vx-ink); } .vx-va__row { display: grid; grid-template-columns: 1fr auto; gap: var(--vx-s-1) var(--vx-s-3); padding: 11px 0 var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); align-items: baseline; } .vx-va__key { font-size: var(--vx-t-body); color: var(--vx-ink); font-weight: 400; text-align: left; } .vx-va__key small { display: block; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .06em; color: var(--vx-ink-3); margin-top: 2px; } .vx-va__val { font-family: var(--vx-mono); font-size: 19px; letter-spacing: -.02em; text-align: right; white-space: nowrap; line-height: 1.1; } .vx-va__val small { display: block; font-size: var(--vx-t-label); letter-spacing: .06em; color: var(--vx-ink-3); margin-top: 3px; } .vx-va__bar { grid-column: 1 / -1; height: 9px; position: relative; background: transparent; margin-top: 2px; } .vx-va__bar::before { content: ""; position: absolute; inset: 0; background: var(--vx-paper-sunk); } .vx-va__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); background: var(--vx-ink); transform-origin: left; transition: transform var(--vx-dur-slow) var(--vx-ease); } .vx-va__fill--verified { background: var(--vx-verified); } .vx-va__fill--open { background: var(--vx-open-bg); box-shadow: inset 0 0 0 1px var(--vx-open); } .vx-va__fill--modelled { background: repeating-linear-gradient(45deg, var(--vx-ink-3) 0 1px, transparent 1px 4px); } .vx-va__fill--spend { background: var(--vx-rule-strong); } .vx-va__prov { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--vx-s-2); flex-wrap: wrap; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); margin-top: 3px; } .vx-va__row--open .vx-va__key, .vx-va__row--open .vx-va__val { color: var(--vx-open); } .vx-va__row--open .vx-va__key small { color: var(--vx-ink-3); } .vx-va__row--modelled .vx-va__val { color: var(--vx-ink-2); } .vx-va__note { margin: var(--vx-s-4) var(--vx-gut) 0; padding: 11px var(--vx-s-3); border: 1px solid var(--vx-rule-strong); font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); line-height: 1.7; letter-spacing: .04em; color: var(--vx-ink-2); } .vx-va__note b { color: var(--vx-ink); font-weight: 400; text-transform: uppercase; letter-spacing: var(--vx-track-label); } .vx-va__note .vx-va__final { display: block; margin-top: var(--vx-s-1); color: var(--vx-ink); } /* -- 3. one position ----------------------------------------------------- */ .vx-pos__head { margin: var(--vx-s-5) var(--vx-gut) 0; border: 1px solid var(--vx-ink); background: var(--vx-paper); } .vx-pos__id { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); font-family: var(--vx-mono); font-size: var(--vx-t-mono); } .vx-pos__id small { color: var(--vx-ink-3); letter-spacing: .1em; text-transform: uppercase; font-size: var(--vx-t-nano); margin-left: 6px; } .vx-token { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: var(--vx-s-2); box-shadow: inset 0 0 0 1.5px var(--vx-open); background: var(--vx-open-bg); } .vx-token.is-closed { background: var(--vx-ink); box-shadow: inset 0 0 0 1.5px var(--vx-ink); } .vx-pos__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--vx-rule); } .vx-pos__meta > div { background: var(--vx-paper); padding: 9px 10px; } .vx-pos__meta dt { font-family: var(--vx-mono); font-size: var(--vx-t-micro); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-3); display: block; } .vx-pos__meta dd { font-family: var(--vx-mono); font-size: 15px; letter-spacing: -.01em; margin-top: var(--vx-s-1); display: block; line-height: 1.2; } .vx-pos__meta dd small { display: block; font-family: var(--vx-mono); font-size: var(--vx-t-micro); letter-spacing: .06em; color: var(--vx-ink-3); margin-top: 3px; } .vx-pos__meta dd.vx-pos__meta-text { font-family: var(--vx-sans); font-size: var(--vx-t-base); } .vx-pos__meta dd.vx-pos__meta--open { color: var(--vx-open); } .vx-pos__clock { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px var(--vx-s-3); border-top: 1px solid var(--vx-rule); background: var(--vx-paper-raised); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } .vx-pos__gauge { position: relative; height: 8px; border-left: 1px solid var(--vx-ink); border-right: 1px solid var(--vx-ink); } .vx-pos__gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--vx-rule-strong); } .vx-pos__gauge i { position: absolute; top: 3px; left: 0; height: 1px; width: var(--p, 0%); background: var(--vx-open); transition: width .6s var(--vx-ease); } .vx-pos__gauge b { position: absolute; top: -4px; left: calc(var(--p, 0%) - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--vx-ink); transition: left .6s var(--vx-ease); } .vx-pos__elapsed { font-size: 13px; color: var(--vx-ink); letter-spacing: 0; text-transform: none; } .vx-steps { margin: 16px var(--vx-gut) 0; position: relative; } .vx-step { display: grid; grid-template-columns: 54px 22px 1fr auto; gap: 0 var(--vx-s-2); align-items: start; padding: 9px 0; border-bottom: 1px solid var(--vx-rule); transition: opacity .35s var(--vx-ease), transform .35s var(--vx-ease); } .vx-js .vx-steps--compact .vx-step:not(.vx-step--key) { display: none; } .vx-step__at { font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); color: var(--vx-ink-2); padding-top: 3px; letter-spacing: .02em; } .vx-step__dot { width: 12px; height: 12px; margin-top: 3px; background: var(--vx-paper); box-shadow: inset 0 0 0 1.5px var(--vx-ink-3); } .vx-step--patient .vx-step__dot { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--vx-ink); } .vx-step--auto .vx-step__dot { background: var(--vx-ink-3); box-shadow: none; } .vx-step--desk .vx-step__dot { background: var(--vx-open); box-shadow: none; } .vx-step--clinician .vx-step__dot { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--vx-clinical); } .vx-step--clinic .vx-step__dot { background: var(--vx-ink); box-shadow: none; } .vx-step--verified .vx-step__dot { background: var(--vx-verified); box-shadow: none; } .vx-step__what { font-size: var(--vx-t-body); line-height: 1.3; } .vx-step__what small { display: block; font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); margin-top: 3px; } .vx-step--desk .vx-step__what small { color: var(--vx-open); } .vx-step--clinician .vx-step__what small { color: var(--vx-clinical); } .vx-step--verified .vx-step__what small { color: var(--vx-verified); } .vx-step__side { font-family: var(--vx-mono); font-size: var(--vx-t-mono); text-align: right; white-space: nowrap; padding-top: 2px; color: var(--vx-ink-2); } .vx-step__side b { display: block; font-weight: 400; color: var(--vx-ink); font-size: 13px; } .vx-step__side--open b { color: var(--vx-open); } .vx-step__side--verified b { color: var(--vx-verified); } .vx-step__side--clinical b { color: var(--vx-clinical); } .vx-step__boundary { grid-column: 3 / -1; margin-top: 6px; padding: 7px 10px; border-left: 2px solid var(--vx-clinical); background: var(--vx-clinical-bg); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .06em; color: var(--vx-clinical); line-height: 1.5; } .vx-pos__foot { margin: var(--vx-s-4) var(--vx-gut) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--vx-rule-strong); border: 1px solid var(--vx-rule-strong); } .vx-pos__foot > div { background: var(--vx-paper); padding: 11px var(--vx-s-3); } .vx-pos__foot dt { font-family: var(--vx-mono); font-size: var(--vx-t-micro); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-3); display: block; } .vx-pos__foot dd { display: block; } .vx-pos__foot-v { font-family: var(--vx-mono); font-size: var(--vx-t-figure-lg); letter-spacing: -.02em; display: block; margin-top: var(--vx-s-1); } .vx-pos__foot-v--open { color: var(--vx-open); } .vx-pos__foot-v--verified { color: var(--vx-verified); } .vx-pos__foot-note { display: block; font-size: var(--vx-t-xs); color: var(--vx-ink-2); margin-top: var(--vx-s-1); line-height: 1.35; } .vx-pos__foot-note .vx-mark { margin-left: var(--vx-s-1); } .vx-pos__foot > div.vx-pos__foot--full { grid-column: 1 / -1; } /* the token flying home to the strip on reconciliation */ .vx-fly { position: fixed; z-index: 200; width: 12px; height: 12px; background: var(--vx-open-bg); box-shadow: inset 0 0 0 1.5px var(--vx-open); pointer-events: none; } /* -- 4. intelligence ----------------------------------------------------- */ .vx-why { margin: var(--vx-s-5) var(--vx-gut) 0; border-top: 1px solid var(--vx-ink); } .vx-why__row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--vx-s-3); padding: 11px 0 var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); align-items: baseline; } .vx-why__reason { font-size: var(--vx-t-body); font-weight: 400; } .vx-why__reason small { display: block; font-size: var(--vx-t-sm); color: var(--vx-ink-2); margin-top: 2px; line-height: 1.4; } .vx-why__count { font-family: var(--vx-mono); font-size: var(--vx-t-figure); letter-spacing: -.02em; text-align: right; white-space: nowrap; color: var(--vx-ink); } .vx-why__count small { display: block; font-size: var(--vx-t-label); letter-spacing: .06em; color: var(--vx-ink-3); margin-top: 3px; white-space: normal; max-width: 150px; margin-left: auto; line-height: 1.45; } .vx-why__marks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--vx-s-1); margin-top: 6px; } .vx-why__marks i { display: block; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--vx-open); background: transparent; } .vx-why__marks i.vx-why__mark--clinic { box-shadow: inset 0 0 0 1px var(--vx-ink-2); } .vx-why__marks i.vx-why__mark--clinical { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--vx-clinical); } .vx-learn { margin: var(--vx-s-4) var(--vx-gut) 0; display: grid; gap: 1px; background: var(--vx-rule-strong); border: 1px solid var(--vx-rule-strong); } .vx-learn > div { background: var(--vx-paper); padding: 11px var(--vx-s-3); display: grid; grid-template-columns: auto 1fr; gap: var(--vx-s-3); align-items: baseline; } .vx-learn dt { font-family: var(--vx-mono); font-size: var(--vx-t-figure-lg); letter-spacing: -.02em; color: var(--vx-ink); min-width: 70px; } .vx-learn dt small { display: block; font-size: var(--vx-t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); margin-top: 2px; } .vx-learn dd { font-size: var(--vx-t-base); line-height: 1.4; color: var(--vx-ink-2); } .vx-learn dd b { color: var(--vx-ink); font-weight: 500; } /* -- 5. capacity --------------------------------------------------------- */ .vx-sites { margin: var(--vx-s-5) var(--vx-gut) 0; display: grid; gap: var(--vx-s-3); } .vx-site { border: 1px solid var(--vx-ink); background: var(--vx-paper); } .vx-site__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); } .vx-site__name { font-family: var(--vx-serif); font-weight: 400; font-size: 22px; letter-spacing: -.015em; font-variation-settings: "opsz" 24; } .vx-site__head span { font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } .vx-site__body { display: grid; grid-template-columns: auto 1fr; gap: var(--vx-s-3); padding: 10px var(--vx-s-3); align-items: start; } .vx-slots { display: grid; grid-template-columns: repeat(11, 10px); gap: 3px; } .vx-slots i { display: block; width: 10px; height: 10px; background: var(--vx-paper); box-shadow: inset 0 0 0 1px var(--vx-ink-3); } .vx-slots i.vx-slot--booked { background: var(--vx-ink); box-shadow: none; } /* Over-capacity slots. The prototype pulsed these for ever, repainting 38 boxes a second; they are a state, so they hold their state. */ .vx-slots i.vx-slot--over { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vx-open); } .vx-slots i.vx-slot--expected { background: var(--vx-verified-bg); box-shadow: inset 0 0 0 1px var(--vx-verified); } .vx-site__nums { font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); letter-spacing: .04em; color: var(--vx-ink-2); line-height: 1.75; } .vx-site__nums b { color: var(--vx-ink); font-weight: 400; font-size: 15px; letter-spacing: -.01em; } .vx-site__nums b.vx-num--open { color: var(--vx-open); } .vx-site__nums b.vx-num--free { color: var(--vx-verified); } .vx-site__rec { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px var(--vx-s-3); border-top: 1px solid var(--vx-rule); background: var(--vx-paper-raised); } .vx-tag { font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); letter-spacing: .14em; text-transform: uppercase; padding: 6px var(--vx-s-2); border: 1.5px solid currentColor; white-space: nowrap; } .vx-tag--hold { color: var(--vx-open); } .vx-tag--inc { color: var(--vx-verified); } .vx-tag--red { color: var(--vx-ink); } .vx-site__rec p { font-size: 13px; line-height: 1.4; color: var(--vx-ink-2); } .vx-site__rec p b { color: var(--vx-ink); font-weight: 500; } .vx-site__toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px var(--vx-s-3); min-height: 48px; } .vx-site__toggle .vx-site__name { font-size: var(--vx-t-figure-lg); } .vx-site__meta { display: flex; align-items: center; gap: var(--vx-s-2); font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } /* the collapsed header lets its verdict tag wrap; the recommendation row does not */ .vx-site__meta .vx-tag { font-size: var(--vx-t-nano); letter-spacing: var(--vx-track-label); padding: 4px 7px; white-space: normal; } .vx-site__toggle svg { display: none; width: 12px; height: 12px; flex: 0 0 auto; color: var(--vx-ink-3); transition: transform var(--vx-dur-fast) var(--vx-ease); } .vx-js .vx-site__toggle svg { display: block; } .vx-site__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* collapsed only when JavaScript is running */ .vx-site__heading { margin: 0; font: inherit; } .vx-js .vx-site--collapsible .vx-site__panel { display: none; } .vx-js .vx-site--collapsible.is-open .vx-site__panel { display: block; } .vx-cap-note { margin: var(--vx-s-4) var(--vx-gut) 0; font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); line-height: 1.7; letter-spacing: .04em; color: var(--vx-ink-2); padding: 11px var(--vx-s-3); border: 1px solid var(--vx-rule-strong); } .vx-cap-note b { color: var(--vx-ink); font-weight: 400; text-transform: uppercase; letter-spacing: var(--vx-track-label); } /* -- 6. statement -------------------------------------------------------- */ .vx-stmt { padding: 30px 0 28px; } .vx-stmt__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--vx-s-3); padding: 0 var(--vx-gut); margin-top: var(--vx-s-7); } .vx-stmt__head h3 { font-family: var(--vx-serif); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 36; } .vx-stmt__period { font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--vx-ink-3); text-align: right; line-height: 1.6; } .vx-stmt__cont { margin: 10px var(--vx-gut) 0; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); line-height: 1.7; } .vx-stmt__lines { margin: var(--vx-s-5) var(--vx-gut) 0; border-top: 1px solid var(--vx-ink); } .vx-stmt__line { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--vx-s-3); padding: 10px 0; border-bottom: 1px solid var(--vx-rule); align-items: baseline; transition: opacity var(--vx-dur) ease; } .vx-stmt__k { font-size: 14px; color: var(--vx-ink-2); min-width: 0; font-weight: 400; text-align: left; } .vx-stmt__v { font-family: var(--vx-mono); font-size: var(--vx-t-figure); letter-spacing: -.02em; text-align: right; white-space: nowrap; } .vx-stmt__basis { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px var(--vx-s-2); min-width: 0; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } .vx-stmt__line--key { background: var(--vx-paper-raised); margin: 0 calc(-1 * var(--vx-gut)); padding: var(--vx-s-3) var(--vx-gut); border-bottom: 1px solid var(--vx-rule-strong); } .vx-stmt__line--key .vx-stmt__k { color: var(--vx-ink); font-weight: 500; } .vx-stmt__line--key .vx-stmt__v { font-size: 22px; } .vx-stmt__line--rec .vx-stmt__v { color: var(--vx-open); white-space: normal; font-size: var(--vx-t-body); line-height: 1.3; text-align: right; } .vx-prov { margin: var(--vx-s-4) var(--vx-gut) 0; display: grid; gap: 7px; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .04em; color: var(--vx-ink-2); } .vx-prov > div { display: flex; align-items: center; gap: var(--vx-s-2); } .vx-prov dt { flex: 0 0 auto; } .vx-prov dt .vx-mark { min-width: 112px; justify-content: flex-start; } .vx-prov dd { margin: 0; } /* -- continuation sections ---------------------------------------------- */ .vx-section { padding: var(--vx-section-y) 0 var(--vx-s-8); border-bottom: 1px solid var(--vx-rule-strong); } .vx-section .vx-lede { max-width: 38ch; } /* -- 7. the operating desk ----------------------------------------------- */ .vx-desk { margin: var(--vx-s-5) var(--vx-gut) 0; border: 1px solid var(--vx-ink); background: var(--vx-paper); } .vx-desk__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); } .vx-desk__who { font-family: var(--vx-mono); font-size: var(--vx-t-mono); letter-spacing: var(--vx-track-label); text-transform: uppercase; } .vx-desk__who small { display: block; font-size: var(--vx-t-nano); color: var(--vx-ink-3); margin-top: 2px; } .vx-desk__clock { font-family: var(--vx-mono); font-size: 19px; letter-spacing: -.01em; } .vx-desk__clock small { font-size: var(--vx-t-nano); letter-spacing: var(--vx-track-label); color: var(--vx-ink-3); margin-left: 6px; } .vx-desk__q { display: flex; justify-content: space-between; padding: 7px var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); background: var(--vx-paper-raised); font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-3); } .vx-desk__q b { color: var(--vx-ink); font-weight: 400; } /* The prototype's .dk-it:last-of-type never matched, because the queue's last sibling was the footer div, so the last item's bottom rule sat doubled with the footer's top rule. The list is an
    now, so the selector matches. */ .vx-desk__item { border-bottom: 1px solid var(--vx-rule); } .vx-desk__item:last-of-type { border-bottom: 0; } .vx-desk__summary { display: block; width: 100%; padding: 11px var(--vx-s-3) var(--vx-s-3); } button.vx-desk__summary { min-height: var(--vx-tap); } .vx-desk__l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .vx-desk__group { font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); letter-spacing: .14em; text-transform: uppercase; color: var(--vx-open); } .vx-desk__item--hot .vx-desk__group { color: var(--vx-stop); } .vx-desk__item--clinical .vx-desk__group { color: var(--vx-clinical); } .vx-desk__item--clinic .vx-desk__group { color: var(--vx-ink); } .vx-desk__due { font-family: var(--vx-mono); font-size: var(--vx-t-mono); color: var(--vx-ink-2); white-space: nowrap; letter-spacing: .02em; } .vx-desk__item--hot .vx-desk__due { color: var(--vx-stop); } .vx-desk__l2 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-top: 5px; } .vx-desk__l2 .vx-desk__desc { font-size: var(--vx-t-body); line-height: 1.35; } .vx-desk__l2 .vx-desk__val { font-family: var(--vx-mono); font-size: var(--vx-t-sm); white-space: nowrap; color: var(--vx-ink); } .vx-desk__l3 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-top: 5px; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } .vx-desk__owner { color: var(--vx-open); } .vx-desk__owner::before { content: ""; display: inline-block; width: 7px; height: 7px; background: currentColor; margin-right: 6px; vertical-align: 0; } .vx-desk__item--clinical .vx-desk__owner { color: var(--vx-clinical); } .vx-desk__item--clinical .vx-desk__owner::before { border-radius: 50%; } .vx-desk__item--clinic .vx-desk__owner { color: var(--vx-ink); } .vx-desk__panel { padding: 0 var(--vx-s-3) var(--vx-s-4); border-top: 1px dashed var(--vx-rule-strong); } .vx-js .vx-desk__panel { display: none; } .vx-js .vx-desk__item.is-open .vx-desk__panel { display: block; } .vx-desk__k { font-family: var(--vx-mono); font-size: var(--vx-t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--vx-ink-3); margin: 11px 0 5px; } .vx-desk__draft { padding: 9px 11px; background: var(--vx-paper-raised); border-left: 2px solid var(--vx-open); font-size: var(--vx-t-base); line-height: 1.45; } .vx-desk__draft i { font-family: var(--vx-serif); font-style: italic; font-size: var(--vx-t-body); } .vx-desk__item--clinical .vx-desk__draft { border-left-color: var(--vx-clinical); } .vx-desk__chain { display: flex; flex-wrap: wrap; gap: var(--vx-s-1); } .vx-desk__chain li { font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border: 1px solid currentColor; color: var(--vx-ink-3); } .vx-desk__chain li.vx-desk__chain--desk { color: var(--vx-open); } .vx-desk__caps { display: flex; flex-wrap: wrap; gap: 5px; } .vx-desk__act { display: flex; gap: var(--vx-s-2); margin-top: var(--vx-s-3); } .vx-desk__act li { flex: 1; text-align: center; padding: 10px var(--vx-s-2); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-label); text-transform: uppercase; border: 1px solid var(--vx-rule-strong); color: var(--vx-ink-2); } .vx-desk__act li.vx-desk__act--go { background: var(--vx-ink); color: var(--vx-paper); border-color: var(--vx-ink); } .vx-desk__never { margin-top: 9px; font-family: var(--vx-mono); font-size: var(--vx-t-nano); line-height: 1.6; letter-spacing: .04em; color: var(--vx-ink-3); } .vx-desk__never b { color: var(--vx-stop); font-weight: 400; letter-spacing: var(--vx-track-label); text-transform: uppercase; } .vx-desk__foot { display: flex; justify-content: space-between; padding: 9px var(--vx-s-3); border-top: 1px solid var(--vx-rule); font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } .vx-desk__foot b { color: var(--vx-verified); font-weight: 400; } .vx-desk__note { margin: var(--vx-s-3) var(--vx-gut) 0; font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } /* -- 8. proof ------------------------------------------------------------ */ .vx-proof { margin: var(--vx-s-5) var(--vx-gut) 0; border-top: 1px solid var(--vx-ink); } .vx-proof__row { display: grid; grid-template-columns: auto 1fr; gap: var(--vx-s-1) var(--vx-s-3); padding: 11px 0; border-bottom: 1px solid var(--vx-rule); align-items: baseline; } .vx-proof__n { font-family: var(--vx-mono); font-size: var(--vx-t-figure); letter-spacing: -.02em; white-space: nowrap; min-width: 96px; max-width: 118px; font-weight: 400; text-align: left; } .vx-proof__n small { display: block; font-size: var(--vx-t-nano); letter-spacing: .06em; color: var(--vx-ink-3); margin-top: 3px; white-space: normal; } .vx-proof__w { font-size: var(--vx-t-base); line-height: 1.42; color: var(--vx-ink-2); } .vx-proof__w b { color: var(--vx-ink); font-weight: 500; } .vx-proof__prov { grid-column: 1 / -1; justify-self: start; } .vx-wave { margin: var(--vx-s-6) var(--vx-gut) 0; } .vx-wave__card { margin-top: var(--vx-s-4); border: 1px solid var(--vx-rule-strong); background: var(--vx-paper); } .vx-wave__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--vx-rule); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-3); } .vx-wave__head b { color: var(--vx-ink); font-weight: 400; } .vx-wave__att { color: var(--vx-verified); } .vx-wave__att--dim { color: var(--vx-ink-2); } .vx-wave__card svg { display: block; width: 100%; height: auto; padding: 10px 11px 6px; } .vx-wave__card svg rect { fill: var(--vx-ink); transition: opacity .35s var(--vx-ease); } .vx-wave__card svg rect.vx-wave__m--att { fill: var(--vx-verified); } .vx-wave__card svg rect.vx-wave__m--hollow { fill: transparent; stroke: var(--vx-rule-strong); stroke-width: .12; } .vx-wave__card svg rect.vx-wave__m--hollow.vx-wave__m--att { fill: var(--vx-verified); stroke: none; } .vx-wave__foot { padding: 7px 11px 9px; font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .06em; color: var(--vx-ink-3); line-height: 1.5; } .vx-wave__diff { margin-top: var(--vx-s-3); display: grid; grid-template-columns: auto 1fr; gap: var(--vx-s-3); align-items: center; padding: var(--vx-s-3); border: 1px solid var(--vx-verified); background: var(--vx-verified-bg); } .vx-wave__n { font-family: var(--vx-mono); font-size: 28px; letter-spacing: -.02em; color: var(--vx-verified); line-height: 1; } .vx-wave__n small { display: block; font-size: var(--vx-t-nano); letter-spacing: .08em; color: var(--vx-ink-2); margin-top: var(--vx-s-1); } .vx-wave__claim { margin-top: var(--vx-s-2); font-size: 13px; line-height: 1.4; color: var(--vx-ink-2); } .vx-wave__claim b { color: var(--vx-ink); font-weight: 500; } .vx-wave__marks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; } /* -- 9. protect ---------------------------------------------------------- */ .vx-gov { margin: var(--vx-s-5) var(--vx-gut) 0; border-top: 1px solid var(--vx-ink); } .vx-gov__row { display: grid; grid-template-columns: 24px 1fr; gap: 0 var(--vx-s-3); padding: 11px 0; border-bottom: 1px solid var(--vx-rule); } .vx-gov__n { font-family: var(--vx-mono); font-size: var(--vx-t-mono); color: var(--vx-ink-3); padding-top: 2px; font-weight: 400; text-align: left; } .vx-gov__a { font-size: 14px; line-height: 1.35; } .vx-gov__by { display: block; line-height: 1.5; margin-top: var(--vx-s-1); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-ink-3); } .vx-gov__by em { font-style: normal; color: var(--vx-open); } .vx-gov__by em.vx-gov__by--clinical { color: var(--vx-clinical); } .vx-gov__by em.vx-gov__by--lead { color: var(--vx-ink); } .vx-gov__row--none { background: rgba(163, 37, 27, .06); margin: 0 calc(-1 * var(--vx-gut)); padding: 11px var(--vx-gut); } .vx-gov__row--none .vx-gov__a, .vx-gov__row--none .vx-gov__by { color: var(--vx-stop); } .vx-gov__row--none .vx-gov__by s { opacity: .55; } .vx-gov__note { margin: var(--vx-s-3) var(--vx-gut) 0; font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); letter-spacing: .06em; line-height: 1.6; color: var(--vx-ink-2); } .vx-gov__note b { color: var(--vx-ink); font-weight: 400; text-transform: uppercase; letter-spacing: var(--vx-track-label); } /* -- 10. around the clinic ----------------------------------------------- */ .vx-around { margin: 16px var(--vx-gut) 0; } .vx-around svg { display: block; width: 100%; height: auto; } .vx-around .vx-around__ring { fill: none; stroke: var(--vx-open); stroke-width: 1.2; stroke-dasharray: 4 3; } .vx-around .vx-around__ln { stroke: var(--vx-rule-strong); stroke-width: 1; } .vx-around .vx-around__ln--outer { stroke: var(--vx-ink); } .vx-around .vx-around__node { fill: var(--vx-paper); stroke: var(--vx-ink); stroke-width: 1; } .vx-around .vx-around__node--clinical { stroke: var(--vx-clinical); } .vx-around text { font-family: var(--vx-mono); font-size: 8.6px; letter-spacing: .08em; text-transform: uppercase; fill: var(--vx-ink); } .vx-around text.vx-around__vx { fill: var(--vx-open); } .vx-around text.vx-around__big { font-family: var(--vx-serif); font-size: 15px; letter-spacing: -.01em; text-transform: none; } .vx-around__table { margin: var(--vx-s-4) var(--vx-gut) 0; border-top: 1px solid var(--vx-ink); } .vx-around__row { display: grid; grid-template-columns: 96px 1fr; gap: 0 var(--vx-s-3); padding: 9px 0; border-bottom: 1px solid var(--vx-rule); align-items: baseline; } .vx-around__row dt { font-size: var(--vx-t-base); color: var(--vx-ink); } .vx-around__row dd { font-size: var(--vx-t-sm); line-height: 1.4; color: var(--vx-ink-2); } .vx-around__row dd b { display: block; font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--vx-verified); font-weight: 400; margin-top: 2px; } .vx-around__row dd b.vx-around__no { color: var(--vx-ink-3); } /* -- 11. proof sprint ---------------------------------------------------- */ .vx-sprint { margin: var(--vx-s-5) var(--vx-gut) 0; position: relative; padding-left: 66px; } .vx-sprint::before { content: ""; position: absolute; left: 52px; top: 6px; bottom: 6px; width: 1px; background: var(--vx-rule-strong); } .vx-sprint::after { content: ""; position: absolute; left: 52px; top: 6px; width: 1px; height: calc(var(--p, 100) * 1%); background: var(--vx-ink); transition: height 1.2s var(--vx-ease); } .vx-sprint__m { position: relative; padding: 0 0 var(--vx-s-5); } .vx-sprint__day { position: absolute; left: -66px; width: 44px; text-align: right; font-family: var(--vx-mono); font-size: var(--vx-t-label); color: var(--vx-ink-3); padding-top: 2px; letter-spacing: .04em; } .vx-sprint__day b { display: block; font-size: 14px; color: var(--vx-ink); font-weight: 400; letter-spacing: -.01em; } .vx-sprint__m::before { content: ""; position: absolute; left: -18px; top: 6px; width: 9px; height: 9px; background: var(--vx-ink); box-shadow: inset 0 0 0 1px var(--vx-ink); } .vx-sprint__m--verified::before { background: var(--vx-verified); box-shadow: inset 0 0 0 1px var(--vx-verified); } .vx-sprint__w { font-size: var(--vx-t-body); line-height: 1.35; } .vx-sprint__w small { display: block; font-size: var(--vx-t-sm); color: var(--vx-ink-2); margin-top: 3px; line-height: 1.4; } .vx-sprint__m .vx-mark { margin-top: 6px; } .vx-sprint__terms { margin: var(--vx-s-4) var(--vx-gut) 0; display: grid; gap: 1px; background: var(--vx-rule-strong); border: 1px solid var(--vx-rule-strong); } .vx-sprint__terms > div { background: var(--vx-paper); padding: 10px var(--vx-s-3); font-size: var(--vx-t-base); line-height: 1.4; color: var(--vx-ink-2); display: grid; grid-template-columns: auto 1fr; gap: 10px; } .vx-sprint__terms dt { font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink); min-width: 84px; padding-top: 2px; } .vx-sprint__terms b { color: var(--vx-ink); font-weight: 500; } /* -- 12. close ----------------------------------------------------------- */ .vx-cta { padding: 40px var(--vx-gut) 44px; background: var(--vx-ink); color: var(--vx-paper); } .vx-cta .vx-eyebrow { color: #8E939A; } .vx-cta h2 { font-family: var(--vx-serif); font-weight: 400; font-size: 36px; line-height: 1.02; letter-spacing: -.025em; font-variation-settings: "opsz" 48; margin-top: var(--vx-s-3); text-wrap: balance; } .vx-cta h2 em { font-style: italic; color: var(--vx-gold); } .vx-cta__lede { margin-top: var(--vx-s-4); color: #B9BDC3; font-size: var(--vx-t-body); line-height: 1.5; max-width: 34ch; } .vx-cta__btn { display: flex; justify-content: space-between; align-items: center; gap: var(--vx-s-3); margin-top: var(--vx-s-7); padding: 15px 16px; background: var(--vx-paper); color: var(--vx-ink); text-decoration: none; font-family: var(--vx-mono); font-size: var(--vx-t-mono); letter-spacing: .14em; text-transform: uppercase; min-height: var(--vx-tap); } .vx-cta__btn svg { width: 14px; height: 14px; flex: 0 0 auto; } .vx-cta__alt { position: relative; display: inline-block; margin-top: var(--vx-s-4); font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: #B9BDC3; text-decoration: underline; text-underline-offset: 3px; } .vx-cta__alt::after { content: ""; position: absolute; inset: -15px -8px; } .vx-cta__three { margin-top: var(--vx-s-5); border-top: 1px solid #3A3F46; display: grid; } .vx-cta__three li { padding: 10px 0; border-bottom: 1px solid #3A3F46; display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--vx-t-base); line-height: 1.4; color: #B9BDC3; } .vx-cta__three li b { color: var(--vx-paper); font-weight: 500; } .vx-cta__three i { width: 8px; height: 8px; background: #6FBF97; margin-top: 6px; } .vx-cta__fine { margin-top: var(--vx-s-5); font-size: 13px; line-height: 1.5; color: #9BA0A7; max-width: 34ch; } .vx-footer { margin-top: 26px; padding: 16px var(--vx-gut) var(--vx-s-8); background: var(--vx-ink); font-family: var(--vx-mono); font-size: var(--vx-t-nano); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: #6E737A; line-height: 1.9; } /* ======================================================================== 5. STATE: progressive enhancement Every rule below only applies once JavaScript has taken over. Without it the page renders in its finished state: nothing is hidden, nothing waits for a scroll event, and every figure is already in the markup. ======================================================================== */ .vx-js .vx-va__fill { transform: scaleX(0); } .vx-js .vx-va.is-revealed .vx-va__fill { transform: scaleX(1); transition-delay: calc(var(--k) * 90ms); } .vx-js .vx-step { opacity: .3; transform: translateY(4px); } .vx-js .vx-step.is-revealed { opacity: 1; transform: none; } .vx-js .vx-stmt__line { opacity: .3; } .vx-js .vx-stmt.is-revealed .vx-stmt__line { opacity: 1; transition-delay: calc(var(--k) * 120ms); } .vx-js .vx-wave__card svg rect { opacity: 0; } .vx-js .vx-wave.is-revealed .vx-wave__card svg rect { opacity: 1; } .vx-wave__card svg rect:nth-child(n+27) { transition-delay: 90ms; } .vx-wave__card svg rect:nth-child(n+53) { transition-delay: 180ms; } .vx-wave__card svg rect:nth-child(n+79) { transition-delay: 270ms; } .vx-wave__card svg rect:nth-child(n+105) { transition-delay: 360ms; } .vx-wave__card svg rect:nth-child(n+131) { transition-delay: 450ms; } .vx-wave__card svg rect:nth-child(n+157) { transition-delay: 540ms; } .vx-wave__card svg rect:nth-child(n+183) { transition-delay: 630ms; } .vx-js .vx-sprint { --p: 0; } .vx-js .vx-sprint__m::before { background: var(--vx-paper); box-shadow: inset 0 0 0 1px var(--vx-ink-3); } .vx-js .vx-sprint__m.is-revealed::before { background: var(--vx-ink); box-shadow: inset 0 0 0 1px var(--vx-ink); } .vx-js .vx-sprint__m--verified.is-revealed::before { background: var(--vx-verified); box-shadow: inset 0 0 0 1px var(--vx-verified); } .vx-js .vx-around__ln--outer { stroke: var(--vx-rule-strong); transition: stroke var(--vx-dur) var(--vx-ease); } .vx-js .vx-around.is-revealed .vx-around__ln--outer { stroke: var(--vx-ink); } /* ======================================================================== 6. RESPONSIVE ======================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* narrow phones: 320px and up to 340px */ @media (max-width: 340px) { :root { --vx-gut: 16px; --vx-t-hero: 40px; } .vx-eyebrow > span { font-size: var(--vx-t-nano); letter-spacing: .13em; } .vx-odo { font-size: 40px; } .vx-counter__label { font-size: var(--vx-t-nano); letter-spacing: .11em; } .vx-field__row { grid-template-columns: 1fr 104px; } .vx-slots { grid-template-columns: repeat(9, 10px); } .vx-step { grid-template-columns: 46px 20px 1fr auto; } .vx-account__clinic { font-size: var(--vx-t-label); } .vx-proof__n { min-width: 80px; font-size: 15px; } .vx-around__row { grid-template-columns: 84px 1fr; } .vx-sprint { padding-left: 60px; } .vx-sprint::before, .vx-sprint::after { left: 46px; } .vx-sprint__day { left: -60px; width: 40px; } .vx-cta h2 { font-size: 31px; } } /* the first step beyond the phone. Desktop layout is a later task: this only stops the measure from running away on a tablet. */ @media (min-width: 760px) { .vx-wrap, .vx-masthead, .vx-account__head, .vx-field, .vx-va, .vx-va__note, .vx-pos__head, .vx-steps, .vx-toggle, .vx-pos__foot, .vx-why, .vx-learn, .vx-sites, .vx-cap-note, .vx-stmt__head, .vx-stmt__cont, .vx-stmt__lines, .vx-prov, .vx-desk, .vx-desk__note, .vx-proof, .vx-wave, .vx-gov, .vx-gov__note, .vx-around, .vx-around__table, .vx-sprint, .vx-sprint__terms, .vx-cta, .vx-footer { margin-left: auto; margin-right: auto; max-width: 720px; } .vx-hero__title { font-size: 64px; } } /* ======================================================================== 7. DESKTOP: the same instrument, opened across a wider work surface. Everything here sits behind min-width: 1024px. Nothing above this line changes on a phone. Width is used to show relationships that a phone has to show one after another: the field beside the claim, bars in a column, the queue beside the prepared action, the two proof waves side by side, all three sites at once, the approval levels as a row. ======================================================================== */ /* -- the desktop nav: markup is present at every width, shown from 1024px -- */ .vx-nav { display: none; } @media (min-width: 1024px) { :root { --vx-gut: 32px; --vx-max: 1120px; --vx-inset: max(var(--vx-gut), calc((100vw - var(--vx-max)) / 2)); --vx-t-display: 34px; --vx-t-hero: 66px; --vx-section-y: 56px; } /* -- one measure ------------------------------------------------------ */ .vx-wrap, .vx-field, .vx-va, .vx-va__note, .vx-pos__head, .vx-steps, .vx-toggle, .vx-pos__foot, .vx-why, .vx-learn, .vx-sites, .vx-cap-note, .vx-stmt__head, .vx-stmt__cont, .vx-stmt__lines, .vx-prov, .vx-desk, .vx-desk__note, .vx-proof, .vx-wave, .vx-gov, .vx-gov__note, .vx-around, .vx-around__table, .vx-sprint, .vx-sprint__terms { max-width: var(--vx-max); } .vx-h2 { font-size: var(--vx-t-display); } .vx-lede { max-width: 52ch; font-size: 16px; } .vx-panel { padding: 48px 0 44px; } .vx-section { padding: var(--vx-section-y) 0 48px; } /* -- masthead: full bleed bar, centred measure, restrained nav --------- */ .vx-masthead { max-width: none; margin: 0; padding: 14px var(--vx-inset) 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 40px; } .vx-masthead__mark { font-size: 21px; } .vx-masthead__role { line-height: 1.35; } .vx-nav { display: flex; align-items: center; gap: 26px; font-family: var(--vx-mono); font-size: var(--vx-t-label-lg); letter-spacing: .14em; text-transform: uppercase; color: var(--vx-ink-2); } .vx-nav a { text-decoration: none; padding: 6px 0; position: relative; } .vx-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--vx-dur-fast) var(--vx-ease); } .vx-nav a:hover::after, .vx-nav a:focus-visible::after { transform: scaleX(1); } .vx-nav__cta { color: var(--vx-ink); border: 1px solid var(--vx-ink); padding: 8px 12px !important; margin-left: 6px; } .vx-nav__cta::after { display: none; } .vx-nav__cta:hover { background: var(--vx-ink); color: var(--vx-paper); } /* -- hero beside the field --------------------------------------------- */ main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } main > * { grid-column: 1 / -1; } main > .vx-hero { grid-column: 1; max-width: none; margin: 0; padding: 64px 32px 24px var(--vx-inset); align-self: end; } main > .vx-field { grid-column: 2; max-width: none; margin: 0; padding: 64px var(--vx-inset) 24px 32px; align-self: end; } .vx-hero__title { font-size: var(--vx-t-hero); line-height: .98; } .vx-hero__lead { font-size: 18px; max-width: 40ch; margin-top: 22px; } .vx-hero__sub { max-width: 40ch; font-size: 15px; } .vx-field__row { grid-template-columns: 1fr 150px; gap: 22px; } .vx-field__key { font-size: var(--vx-t-label-lg); } .vx-field__key b { font-size: 15px; } .vx-pick { margin-top: 16px; } /* -- the account head: one bar, three things on it --------------------- */ .vx-account { margin-top: 28px; } .vx-account__head { max-width: none; margin: 0; padding: 10px var(--vx-inset); display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 40px; align-items: center; } .vx-account__who { grid-column: 1; } .vx-counter { grid-column: 2; margin-top: 0; align-items: center; gap: 18px; } .vx-odo { font-size: 48px; } .vx-strip { grid-column: 3; margin-top: 0; justify-content: flex-end; max-width: 320px; justify-self: end; } .vx-account__clinic { font-size: 12px; } /* -- 2. value account: a ledger, bars in their own column --------------- */ .vx-va { margin-top: 28px; } .vx-va__row { grid-template-columns: 250px minmax(120px, 1fr) 150px 300px; grid-template-areas: "key bar val prov"; column-gap: 28px; align-items: center; padding: 13px 0; } .vx-va__key { grid-area: key; } .vx-va__val { grid-area: val; font-size: 21px; } .vx-va__bar { grid-area: bar; margin-top: 0; height: 10px; } .vx-va__prov { grid-area: prov; margin-top: 0; flex-wrap: nowrap; justify-content: space-between; } .vx-va__prov > span:first-child { white-space: normal; } .vx-va__note { margin-left: var(--vx-inset); margin-right: auto; max-width: 620px; } /* -- 3. one position: record beside its timeline ------------------------ */ #record { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 48px; padding-left: var(--vx-inset); padding-right: var(--vx-inset); } #record > .vx-wrap { grid-column: 1 / -1; padding: 0; max-width: none; } #record > .vx-pos__head { grid-column: 1; grid-row: 2 / span 3; margin: 22px 0 0; max-width: none; align-self: start; position: sticky; top: calc(var(--vx-chrome) + var(--vx-acc-h) + 20px); } #record > .vx-steps { grid-column: 2; grid-row: 2; margin: 22px 0 0; max-width: none; } #record > .vx-toggle { grid-column: 2; grid-row: 3; margin-left: 0; margin-right: 0; max-width: none; } #record > .vx-pos__foot { grid-column: 2; grid-row: 4; margin: 14px 0 0; max-width: none; } .vx-step { grid-template-columns: 64px 22px 1fr auto; padding: 11px 0; } .vx-pos__meta dd { font-size: 16px; } /* -- 4. intelligence: reasons, marks and value in one line -------------- */ #intel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; padding-left: var(--vx-inset); padding-right: var(--vx-inset); } #intel > .vx-wrap { grid-column: 1 / -1; padding: 0; max-width: none; } #intel > .vx-why { grid-column: 1; margin: 22px 0 0; max-width: none; } #intel > .vx-learn { grid-column: 2; grid-row: 2; margin: 22px 0 0; max-width: none; align-self: start; position: sticky; top: calc(var(--vx-chrome) + var(--vx-acc-h) + 20px); } .vx-why__row { grid-template-columns: minmax(0, 1fr) 250px 210px; grid-template-areas: "reason marks count"; column-gap: 24px; align-items: center; padding: 13px 0; } .vx-why__reason { grid-area: reason; } .vx-why__count { grid-area: count; } .vx-why__count small { max-width: none; } .vx-why__marks { grid-area: marks; margin-top: 0; } .vx-learn > div { grid-template-columns: 1fr; gap: 8px; padding: 16px; } .vx-learn dt { font-size: 32px; } /* -- 5. capacity: all three sites at once --------------------------------- */ .vx-sites { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; } .vx-js .vx-site--collapsible .vx-site__panel { display: flex; flex-direction: column; flex: 1; } .vx-site__toggle { pointer-events: none; cursor: default; padding: 10px var(--vx-s-3); border-bottom: 1px solid var(--vx-rule); } .vx-site__toggle svg, .vx-js .vx-site__toggle svg { display: none; } .vx-site__toggle .vx-site__name { font-size: 22px; } .vx-site__meta .vx-tag { display: none; } .vx-site { display: flex; flex-direction: column; } .vx-site__rec { margin-top: auto; } .vx-lede__touch { display: none; } .vx-site__body { grid-template-columns: auto 1fr; padding: 12px var(--vx-s-3); } .vx-site__rec { min-height: 118px; align-items: start; grid-template-columns: 1fr; gap: 8px; } .vx-site__rec .vx-tag { justify-self: start; } .vx-cap-note { margin-top: 18px; } /* -- 6. the statement: a signed document, centred, with room ------------- */ .vx-stmt { padding: 60px 0 56px; } .vx-stmt__head, .vx-stmt__cont, .vx-stmt__lines, .vx-prov { max-width: 920px; } .vx-stmt__head h3 { font-size: 38px; } .vx-stmt__cont { margin-top: 14px; } .vx-stmt__lines { margin-top: 26px; } .vx-stmt__line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; grid-template-areas: "k basis v"; column-gap: 24px; align-items: center; padding: 15px 0; } .vx-stmt__k { grid-area: k; font-size: 15px; } .vx-stmt__v { grid-area: v; font-size: 20px; } .vx-stmt__basis { grid-area: basis; justify-content: flex-start; gap: 12px; flex-wrap: nowrap; } .vx-stmt__line--key { margin: 0 -16px; padding: 18px 16px; } .vx-stmt__line--key .vx-stmt__v { font-size: 26px; } .vx-stmt__line--rec .vx-stmt__v { font-size: 15px; } .vx-prov { grid-template-columns: repeat(5, auto); justify-content: space-between; margin-top: 22px; } .vx-prov > div { flex-direction: column; align-items: flex-start; gap: 6px; } .vx-prov dt .vx-mark { min-width: 0; } /* -- 7. the desk: queue on the left, the prepared action on the right ---- */ .vx-desk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 26px; } .vx-desk__head, .vx-desk__q, .vx-desk__foot { grid-column: 1 / -1; } .vx-desk__list { grid-column: 1; position: relative; border-right: 1px solid var(--vx-rule); min-height: 344px; } .vx-desk::after { content: "Select a job to see what the desk has prepared, and who approves it"; grid-column: 2; grid-row: 3; align-self: center; justify-self: center; max-width: 26ch; text-align: center; font-family: var(--vx-mono); font-size: var(--vx-t-label); letter-spacing: var(--vx-track-label); text-transform: uppercase; color: var(--vx-ink-3); line-height: 1.8; } .vx-desk__panel { position: absolute; left: 100%; top: 0; width: 100%; height: 100%; overflow: auto; z-index: 1; background: var(--vx-paper); border-top: 0; padding: 6px 22px 22px; } .vx-desk__k:first-child { margin-top: 12px; } .vx-desk__summary { padding: 14px var(--vx-s-4) 15px; } /* -- 8. proof: the two waves side by side, the difference beside them ----- */ .vx-wave { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 26px; } .vx-wave__card { margin-top: 0; } .vx-wave__diff { grid-column: 1 / -1; margin-top: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 32px; padding: 18px 22px; } .vx-wave__n { font-size: 44px; display: flex; align-items: baseline; gap: 16px; } .vx-wave__n small { display: block; } .vx-wave__claim { font-size: 14.5px; max-width: 46ch; } .vx-wave__marks { justify-content: flex-end; } #proof > .vx-toggle { display: none; } .vx-js #vx-proof-method { display: block; } .vx-proof { margin-top: 24px; border-top: 0; } .vx-proof > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; } .vx-proof__row { display: block; border-bottom: 0; border-top: 1px solid var(--vx-ink); padding: 14px 0 0; } .vx-proof__n { display: block; max-width: none; min-width: 0; font-size: 22px; } .vx-proof__w { display: block; margin-top: 10px; } .vx-proof__prov { display: inline-flex; margin-top: 12px; } /* -- 9. protect: the six levels as a row, the last one apart ------------- */ .vx-gov { border-top: 0; margin-top: 26px; } .vx-gov > tbody { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .vx-gov__row { display: block; border-bottom: 0; border-top: 2px solid var(--vx-rule-strong); padding: 14px 0 0; } .vx-gov__n { display: block; font-size: 30px; color: var(--vx-ink); padding: 0; letter-spacing: -.02em; } .vx-gov__a { display: block; margin-top: 12px; font-size: 15px; } .vx-gov__by { margin-top: 10px; } .vx-gov__row--none { margin: 0; padding: 14px 14px 14px; border-top-color: var(--vx-stop); } .vx-gov__note { margin-top: 22px; } /* -- 10. around the clinic: the ring beside what it means ---------------- */ #around { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; padding-left: var(--vx-inset); padding-right: var(--vx-inset); } #around > .vx-wrap { grid-column: 1 / -1; padding: 0; max-width: none; } #around > .vx-around { grid-column: 1; margin: 22px 0 0; max-width: 520px; } #around > .vx-around__table { grid-column: 2; margin: 22px 0 0; max-width: none; align-self: center; } .vx-around text { font-size: 8px; } .vx-around__row { grid-template-columns: 120px 1fr; padding: 14px 0; } .vx-around__row dt { font-size: 16px; } .vx-around__row dd { font-size: 14px; } /* -- 11. the sprint: a horizontal rail ------------------------------------ */ .vx-sprint { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 22px; padding: 56px 0 0; margin-top: 30px; } .vx-sprint::before { left: 0; right: calc((100% - 110px) / 6); top: 22px; bottom: auto; height: 1px; width: auto; } .vx-sprint::after { left: 0; top: 22px; height: 1px; width: calc((100% - (100% - 110px) / 6) * var(--p, 100) / 100); transition: width 1.2s var(--vx-ease); } .vx-sprint__m { padding: 0 8px 0 0; } .vx-sprint__m::before { left: 0; top: -38px; width: 9px; height: 9px; } .vx-sprint__day { position: static; width: auto; text-align: left; display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .vx-sprint__day b { display: inline; font-size: 20px; } .vx-sprint__w { font-size: 15px; } .vx-sprint__terms { grid-template-columns: 1fr 1fr; margin-top: 30px; } /* -- 12. the close --------------------------------------------------------- */ .vx-cta { max-width: none; margin: 0; padding: 72px var(--vx-inset) 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; } .vx-cta > .vx-eyebrow { grid-column: 1; grid-row: 1; } .vx-cta > h2 { grid-column: 1; grid-row: 2; font-size: 52px; } .vx-cta__lede { grid-column: 1; grid-row: 3; font-size: 16px; } .vx-cta__three { grid-column: 2; grid-row: 1 / 5; align-self: center; margin-top: 0; } .vx-cta__three li { padding: 14px 0; font-size: 15px; } .vx-cta__btn { grid-column: 1; grid-row: 4; justify-self: start; gap: 28px; padding: 17px 22px; margin-top: 30px; } .vx-cta__alt { grid-column: 1; grid-row: 5; } .vx-cta__fine { grid-column: 2; grid-row: 5; margin-top: 18px; } .vx-footer { max-width: none; margin: 0; padding: 18px var(--vx-inset) 40px; } } @media (min-width: 1280px) { :root { --vx-gut: 40px; --vx-max: 1200px; --vx-t-display: 38px; --vx-t-hero: 74px; } main > .vx-hero { padding-right: 48px; } main > .vx-field { padding-left: 48px; } .vx-va__row { grid-template-columns: 320px minmax(200px, 1fr) 180px 360px; } #record { grid-template-columns: 440px minmax(0, 1fr); column-gap: 64px; } #intel { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 64px; } .vx-proof > tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } @media (min-width: 1728px) { :root { --vx-max: 1320px; --vx-t-hero: 80px; } .vx-stmt__head, .vx-stmt__cont, .vx-stmt__lines, .vx-prov { max-width: 980px; } }