/* ========================================================================= GRADE BIO — gradebio.com site.css — page composition only. ⛔ This file defines NO ink token. Every value below is composed from the seven inks locked in 00_SYSTEM/grade.css, the way a press builds a tint from a percentage of one ink. No third hue, no radius, no shadow, no gradient, no card. The one place this file OVERRIDES the reference sheets is contrast on the orange field. The reference small type on the field is mixed at black 55-62%, which measures 2.6:1 to 3.0:1 against #E2551A and fails WCAG AA for text under 18px. --field-quiet is the same ink at 90%, which measures 4.58:1 and passes. Same two inks, correct density. ========================================================================= */ :root { /* a screen of black on the orange field, at a density that passes AA */ --field-quiet: color-mix(in srgb, var(--black) 90%, var(--orange)); /* a lighter screen, only ever used on rules and hairlines, never on type */ --field-hair: color-mix(in srgb, var(--black) 26%, var(--orange)); } /* ---- 0. GLOBAL SAFETY -------------------------------------------------- Identifiers, addresses and long mono strings must never push a sheet wider than the viewport. A register that scrolls sideways inside its own block is correct; a page that scrolls sideways is a defect. */ body { overflow-wrap: break-word; } /* The system sets display on .btn, .state and .pcell, and a class-level display beats the user-agent [hidden] rule. Anything the page hides in JS has to actually disappear. */ [hidden] { display: none !important; } .tblwrap { overflow-x: auto; min-width: 0; } .tblwrap table.reg { margin: 0; } /* the skip link is the first thing in the tab order on every sheet */ .skip { position: absolute; left: -9999px; top: 0; font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .skip:focus { position: fixed; left: var(--s5); top: var(--s5); z-index: 60; background: var(--strong); color: var(--ground); padding: 11px 16px; outline: 2px solid var(--field-deep); outline-offset: 2px; } /* ---- 1. RUNNING HEAD --------------------------------------------------- The head carries the mark, four document routes and the sheet's own control block. It is a running head, not a navigation bar: the routes are set as document names, and the sheet number travels with them. */ .rh-nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; } .rh-nav a { font-family: var(--data); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); border-bottom: var(--w-hair) solid transparent; padding-bottom: 2px; white-space: nowrap; transition: color 120ms linear, border-color 120ms linear; } .rh-nav a:hover { color: var(--strong); border-bottom-color: var(--field-deep); } .rh-nav a[aria-current="page"] { color: var(--strong); border-bottom-color: var(--strong); } .runhead__doc { flex: none; } @media (max-width: 1120px) { .rh-desc { display: none; } } @media (max-width: 900px) { .rh-nav { margin-left: 0; gap: var(--s4); } } @media (max-width: 480px) { .rh-nav { gap: 14px; } .rh-nav a { font-size: 10px; letter-spacing: .08em; } } /* A printed running head does not follow the reader down the page, and on a narrow sheet the head wraps to two rows. Below 640 it releases the top. */ @media (max-width: 640px) { .runhead { position: static; } } /* ---- 2. THE SHEET INDEX ------------------------------------------------ This replaces the navigation bar. Fourteen numbered documents, listed the way the contents of a technical binder are listed, on the field. */ .sheets { border-top: var(--w-slug) solid var(--strong); padding-top: var(--s4); } .sheets__h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); margin-bottom: var(--s3); flex-wrap: wrap; } .sheets__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gut); } .sheets a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: var(--w-hair) solid var(--hair-soft); color: var(--strong); transition: background 110ms linear; } .sheets a:hover { background: var(--ground-alt); } .sheets a[aria-current="page"] { background: var(--ground-alt); } .sheets a .n { font-family: var(--data); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--field-deep); } .sheets a .t { font-size: 14.5px; line-height: 1.25; } .on-field .sheets { border-top-color: var(--black); } .on-field .sheets__h { color: var(--field-quiet); } .on-field .sheets a { color: var(--black); border-bottom-color: var(--field-hair); } .on-field .sheets a .n { color: var(--field-quiet); } /* The tint that marks the current row has to run TOWARD the stock, not toward the black. Screening the orange down with 9% black put near black type on it at 4.33:1 and the folio number at 3.94:1. Screening it up with the stock lifts both over 4.5:1 and still reads as one ink on one ground. */ .on-field .sheets a:hover, .on-field .sheets a[aria-current="page"] { background: color-mix(in srgb, var(--ground) 20%, var(--orange)); } .on-field .sheets a[aria-current="page"] .n, .on-field .sheets a:hover .n { color: var(--black); } @media (max-width: 1000px) { .sheets__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sheets__l { grid-template-columns: 1fr; } } /* ---- 3. FIELD CONTRAST CORRECTIONS ------------------------------------- Every small type role the reference sheets set at black 55-62% on the field is reset to --field-quiet. Same inks, AA density. */ .field .quiet, .on-field .toc__h, .on-field .toc a .n, .on-field .toc a .p, .crumb, .legend div, .idblock__ids span, .mast__facts span, .field .searchbar input.f::placeholder { color: var(--field-quiet); } .crumb a:hover { color: var(--black); } /* ---- 3b. MASTHEAD FOOTING ---------------------------------------------- The deck and the three control figures, set as the footing of the plate. Not a stat row, not cards: a rule, three figures, three legends. */ .mast__two { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--gut); margin-top: var(--s5); align-items: start; } .mast__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); border-top: var(--w-bar) solid var(--black); padding-top: var(--s4); } .mast__facts b { display: block; font-family: var(--disp); font-weight: 700; font-size: clamp(27px, 3.2vw, 38px); line-height: .94; letter-spacing: -.018em; color: var(--black); } .mast__facts span { display: block; font-family: var(--data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.55; margin-top: 8px; color: var(--field-quiet); } @media (max-width: 1000px) { .mast__two { grid-template-columns: 1fr; } } @media (max-width: 520px) { .mast__facts { grid-template-columns: 1fr; gap: var(--s3); } } /* ---- 4. PLATES --------------------------------------------------------- Photography is one black separation multiplied onto the orange field. Every plate reserves its own height, so a sheet holds its layout whether or not the separation has been made yet. */ /* Until a separation has been made, the plate still has to behave like a plate. The box holds its own height from aspect-ratio, and the alt text sets small inside it and is clipped by it, so a file that has not landed yet never disturbs the sheet around it. */ .plate img { overflow: hidden; font-family: var(--data); font-size: 9.5px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: var(--field-quiet); } .pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; background: var(--strong); border: var(--w-rule) solid var(--strong); } /* A plate whose separation has not been made yet still has to behave like a plate. The entry sets in mono in the bottom of the box. */ .plate[data-plate]::before { content: attr(data-plate); position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; font-family: var(--data); font-size: 9.5px; line-height: 1.55; letter-spacing: .12em; text-transform: uppercase; color: var(--field-quiet); } /* This rule used to read "when the photograph lands it multiplies down on top of it and covers it," and that is the one thing multiply cannot do: it only darkens, so the caption survived wherever the separation was light. With the twelve vial plates landed, every cell in the register carried PLATE 01 · SERMORELIN stamped across the glass. A placeholder is for an empty box, so it is withdrawn the moment the box is not empty. The [data-plate] is repeated rather than dropped: :has() takes the specificity of its argument, so a bare .plate:has(img)::before scores below the rule above it and loses silently — measured, the caption stayed on screen with the override loaded and matching. */ .plate[data-plate]:has(img)::before { content: none; } .plate img { position: relative; z-index: 1; } .pcell { background: var(--ground); min-width: 0; display: flex; flex-direction: column; } .pcell[hidden] { display: none; } .pcell .plate { aspect-ratio: 4 / 5; } .pcell__c { padding: 9px 11px 12px; border-top: var(--w-hair) solid var(--hair-soft); font-family: var(--data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); line-height: 1.6; } .pcell__c b { display: block; font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--strong); line-height: 1.1; margin-bottom: 5px; } .pcell a.pcell__c:hover { background: var(--ground-alt); } .pcell a.pcell__c { display: block; } @media (max-width: 1180px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 820px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* an editorial band of plates, run to the full measure of the sheet */ .band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--strong); border-top: var(--w-bar) solid var(--strong); border-bottom: var(--w-bar) solid var(--strong); } .band .plate { aspect-ratio: 5 / 4; } .band--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band--2 .plate { aspect-ratio: 16 / 10; } @media (max-width: 760px) { .band, .band--2 { grid-template-columns: 1fr; } } /* a single subject plate beside its reading column */ .figcol { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gut); align-items: start; } .figcol--l { grid-template-columns: 380px minmax(0, 1fr); } @media (max-width: 900px) { .figcol, .figcol--l { grid-template-columns: 1fr; } } /* the vial plates are shot on a dark ground, so the separation is inverted before it is multiplied down. Without it the plate closes to solid ink. */ .plate--inv img { filter: grayscale(1) invert(1) contrast(1.22) brightness(1.02); } :root[data-theme="dark"] .plate--inv img { filter: grayscale(1) contrast(1.22); mix-blend-mode: screen; } /* ---- 5. TWO-COLUMN READING SETTING ------------------------------------- */ .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); } .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); } @media (max-width: 900px) { .two, .three { grid-template-columns: 1fr; } } /* ---- 6. A NUMBERED REGISTER OF QUESTIONS ------------------------------- */ .qa { border-top: var(--w-rule) solid var(--strong); } .qa__i { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0; border-bottom: var(--w-hair) solid var(--hair-soft); } .qa__n { font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--field-deep); padding-top: 6px; } .qa h3 { font-size: 20px; line-height: 1.08; margin-bottom: 9px; } .qa p { font-size: 15.5px; margin-bottom: var(--s4); } .qa p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .qa__i { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); } } /* Stacked, the answer holds its 64ch measure and leaves the right third of the sheet empty for fourteen rows running. Set the question against the answer instead: the row then spans the page without the prose exceeding its measure, and it reads the way the .step rows on the other sheets do. */ @media (min-width: 1000px) { .qa__i > div:last-child { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s4) var(--gut); align-items: start; } .qa__i > div:last-child > h3 { grid-column: 1; margin-bottom: 0; } .qa__i > div:last-child > p { grid-column: 2; } } /* ---- 7. NUMBERED CLAUSES (privacy, terms) ------------------------------ */ .leg > section { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0; border-bottom: var(--w-hair) solid var(--hair-soft); } .leg > section:first-child { border-top: var(--w-rule) solid var(--strong); } .leg .cl { font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--field-deep); padding-top: 6px; } .leg h2 { font-size: 21px; line-height: 1.06; margin-bottom: 10px; } .leg p { font-size: 15.5px; } .leg ul { margin: 0 0 var(--s5); padding-left: 1.1em; max-width: 66ch; } .leg li { font-size: 15.5px; line-height: 1.55; padding: 3px 0; } @media (max-width: 640px) { .leg > section { grid-template-columns: 60px minmax(0, 1fr); gap: var(--s4); } } /* Same correction as the question register: a stacked clause leaves most of the sheet blank for ten clauses running. The heading sits against its clause. */ @media (min-width: 1000px) { .leg > section > div:last-child { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s4) var(--gut); align-items: start; } .leg > section > div:last-child > h2 { grid-column: 1; margin-bottom: 0; } .leg > section > div:last-child > :is(p, ul, ol, div, table) { grid-column: 2; } } /* ---- 8. FORMS ---------------------------------------------------------- Labels sit above inputs. Validation is shown on the field. Submit stays disabled while a field is unresolved and says which one. */ label.f > span .req { color: var(--field-deep); } textarea.f { width: 100%; font-family: var(--data); font-size: 14px; letter-spacing: .02em; padding: 9px 10px; color: var(--strong); background: var(--ground); border: var(--w-rule) solid var(--strong); outline-offset: 2px; line-height: 1.55; resize: vertical; min-height: 132px; } textarea.f::placeholder { color: var(--quiet); opacity: 1; } textarea.f:focus-visible { outline: 2px solid var(--field-deep); outline-offset: 2px; } textarea.f[aria-invalid="true"] { border-color: var(--field-deep); outline: var(--w-rule) solid var(--field-deep); outline-offset: -3px; } select.f[aria-invalid="true"] { border-color: var(--field-deep); outline: var(--w-rule) solid var(--field-deep); outline-offset: -3px; } input[type="file"].f { padding: 8px 10px; font-size: 12.5px; } input[type="date"].f { min-height: 38px; } .fset { border: 0; padding: 0; margin: 0 0 var(--s7); min-width: 0; } .fset > legend { display: flex; align-items: baseline; gap: var(--s4); width: 100%; border-bottom: var(--w-bar) solid var(--strong); padding: 0 0 var(--s2); margin-bottom: var(--s5); } .fset > legend .n { font-family: var(--data); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--field-deep); } .fset > legend .t { font-family: var(--disp); font-weight: 700; text-transform: uppercase; font-size: 26px; letter-spacing: -.008em; color: var(--strong); line-height: 1; } .fset > legend .meta { margin-left: auto; font-family: var(--data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); } @media (max-width: 620px) { .fset > legend { flex-wrap: wrap; } .fset > legend .meta { margin-left: 0; width: 100%; } } .fg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); } .fg3 .span2 { grid-column: span 2; } .fg3 .span3 { grid-column: 1 / -1; } @media (max-width: 820px) { .fg3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fg3 .span2, .fg3 .span3 { grid-column: 1 / -1; } } @media (max-width: 560px) { .fg3 { grid-template-columns: 1fr; } } /* The system stylesheet styles input.f and select.f. A message field and a file field are neither, so they are brought onto the same footing here. */ textarea.f { width: 100%; font-family: var(--data); font-size: 14px; letter-spacing: .02em; line-height: 1.6; padding: 9px 10px; color: var(--strong); background: var(--ground); border: var(--w-rule) solid var(--strong); outline-offset: 2px; min-height: 168px; resize: vertical; display: block; } textarea.f::placeholder { color: var(--quiet); opacity: 1; } textarea.f:focus-visible { outline: 2px solid var(--field-deep); outline-offset: 2px; } input[type="file"].f { padding: 8px 10px; font-size: 12.5px; } input[type="file"].f::file-selector-button { font-family: var(--data); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; background: var(--strong); color: var(--ground); border: 0; padding: 6px 11px; margin-right: 11px; cursor: pointer; } label.f > span .req { color: var(--field-deep); } label.f > span .opt { color: var(--quiet); } input.f[aria-invalid="true"], select.f[aria-invalid="true"], textarea.f[aria-invalid="true"] { /* a doubled rule, drawn inside the box so nothing shifts. No shadow: the ink law allows none, and an outline is a rule rather than a glow. */ border-color: var(--field-deep); outline: var(--w-rule) solid var(--field-deep); outline-offset: -3px; } /* The form runs full width and lets each fieldset own its own grid. The system's .fgrid splits into two columns, which halves every field on a twenty three field sheet. */ .gform { min-width: 0; } .gform > * { min-width: 0; } /* A disabled submit still has to be readable: it is the control the reason line underneath is talking about. The system's opacity of .42 takes the label under 2:1 against its own ground. */ .btn[disabled], .btn[disabled]:hover { opacity: 1; background: transparent; color: var(--quiet); border-color: var(--hair); cursor: not-allowed; } .fgrid { min-width: 0; } .fgrid > * { min-width: 0; } /* the honeypot. Present in the DOM, off the sheet, out of the tab order. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* attestations: six separate affirmations, each stored with its own wording */ .att { border-top: var(--w-rule) solid var(--strong); } .att__i { display: grid; grid-template-columns: 34px 16px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; cursor: pointer; border-bottom: var(--w-hair) solid var(--hair-soft); transition: background 110ms linear; } .att__i:hover { background: var(--ground-alt); } .att__i .n { font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--field-deep); padding-top: 3px; } .att__i input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--orange); border: var(--w-rule) solid var(--strong); flex: none; } .att__i input:focus-visible { outline: 2px solid var(--field-deep); outline-offset: 2px; } .att__i .w { font-size: 15px; line-height: 1.5; color: var(--body); } .att__i[data-invalid="true"] { background: var(--wash-12); } @media (max-width: 560px) { .att__i { grid-template-columns: 26px 16px minmax(0, 1fr); gap: 9px; } } /* the typed signature is the signature */ .sig { border: var(--w-rule) solid var(--strong); } .sig__h { background: var(--strong); color: var(--ground); font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px; } .sig__b { padding: var(--s5) 16px 16px; } .sig__line { border-bottom: var(--w-bar) solid var(--strong); } input.f.sig__in { border: 0; border-bottom: 0; font-family: var(--text); font-size: 26px; letter-spacing: .01em; padding: 6px 0 8px; background: transparent; } input.f.sig__in::placeholder { font-size: 17px; letter-spacing: .02em; } /* the Turnstile mount. The box is drawn so the sheet holds its height whether or not the widget has been keyed yet. */ .turnstile-mount { border: var(--w-hair) dashed var(--hair); min-height: 68px; display: flex; align-items: center; padding: 0 16px; font-family: var(--data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); } .turnstile-mount:not(:empty) { border-style: none; padding: 0; } /* submit block: the button and the one line that says what is unresolved */ .subm { border-top: var(--w-bar) solid var(--strong); padding-top: var(--s5); margin-top: var(--s7); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; } .subm .btn { flex: none; } .subm__why { font-family: var(--data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--field-deep); line-height: 1.6; min-width: 0; } .subm__why[data-ok="true"] { color: var(--quiet); } /* ---- 9. FORM RESULT STATES --------------------------------------------- */ .state { border: var(--w-bar) solid var(--strong); } .state__h { background: var(--strong); color: var(--ground); padding: 11px 18px; font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } .state__b { padding: var(--s6) 18px var(--s6); } .state__b h2 { font-size: 30px; margin-bottom: var(--s4); } .state__b p { font-size: 16px; } .state[hidden] { display: none; } /* ---- 10. A KEY / VALUE CONTACT BLOCK ----------------------------------- */ .kv { border-top: var(--w-rule) solid var(--strong); } .kv__r { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s5); padding: 11px 0; border-bottom: var(--w-hair) solid var(--hair-soft); } .kv__k { font-family: var(--data); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--quiet); padding-top: 4px; } .kv__v { font-size: 15.5px; line-height: 1.45; min-width: 0; } .kv__v a { border-bottom: var(--w-hair) solid var(--hair); } .kv__v a:hover { color: var(--field-deep); border-bottom-color: var(--field-deep); } @media (max-width: 640px) { .kv__r { grid-template-columns: 1fr; gap: 2px; } } /* ---- 11. THE 404 SHEET -------------------------------------------------- */ .nf { padding: var(--s9) 0 var(--s8); } .nf__n { font-family: var(--disp); font-weight: 700; line-height: .82; font-size: clamp(96px, 26vw, 300px); letter-spacing: -.04em; color: var(--black); } /* ---- 11b. THE SPECIFICATION SHEET -------------------------------------- Lifted from the approved press-product.html, which carried these rules in a page-local