/* =========================================================================== LNMD — assets/theme.css THE ONLY FILE YOU NEED TO OPEN TO CHANGE HOW THE SITE LOOKS. =========================================================================== Colours, fonts, sizes and image shapes all live here as named knobs. Change a value, save, reload the page. Nothing else to touch, no build step, no other file. It is loaded AFTER assets/style.css on every page, so anything set here wins. style.css keeps its own copies as fallbacks — if you delete a line below, the old value comes back rather than the page breaking. READ THEME-GUIDE.md IN THE PROJECT ROOT BEFORE CHANGING COLOURS. Every pair of colours on this site was measured for legibility (WCAG contrast) and the measured numbers are written beside them. If you change a ground you must re-check the ink on it: node verify-v2.mjs G3 ------------------------------------------------------------------------ CONTENTS 1 Colour — the grounds the background of each kind of section 2 Colour — the ink text. Rarely change these 3 Colour — the accent links, borders, badges 4 Colour — the dark chrome header strip and footer 5 Type font family and every text size 6 Shape and spacing rounding, rule weights, gaps 7 Images the shape of every picture slot ========================================================================= */ :root { /* ======================================================================= 1. THE GROUNDS — the background colour of each kind of section ======================================================================= A section's colour says what KIND of section it is, and the same colour means the same thing on all nine pages: paper default: hero, prose, anything unclassified bone PEOPLE: the roster, the principal investigator, alumni clay THE WORK: devices, research directions ash ARCHIVE: publications, patents, press oxide ACT NOW: contact, join us, open positions They run light to dark in that order. Keep that order when you change them, or the page loses its sense of depth. Current set: light sky blue, low saturation. --------------------------------------------------------------------- */ --paper: #EEF4FB; /* lightest — the page itself */ --bone: #E1EBF5; --clay: #CBDCEC; --ash: #B7CCE0; /* darkest ground. Anything darker must be re-measured */ --oxide: #D6E7F4; /* The one deep colour, used by the photo bands only. */ --indigo: #16324F; --dream: #16324F; /* same value; two names because two components use it */ /* How much of the page texture shows through a section. 1 = fully solid, 0.82 = the default, 0.6 = very see-through. */ --ground-alpha: 82%; /* ======================================================================= 2. THE INK — text colour. THE SAFEST THING TO LEAVE ALONE. ======================================================================= Measured against the five grounds above: paper bone clay ash oxide --ink 14.74 13.53 11.65 9.89 12.90 --ink-2 10.69 9.81 8.45 7.17 9.35 The floor is 4.5 for body text. Everything above has a wide margin — that margin is what lets you retint the grounds without breaking legibility. Spend it on the grounds, not on the ink. --------------------------------------------------------------------- */ --ink: #16212B; /* headings, body text */ --ink-2: #28394A; /* captions, author lists, metadata */ /* ======================================================================= 3. THE ACCENT — links, borders, badges ======================================================================= Four variants, because one colour cannot do all four jobs and stay readable. If you want a different accent, change all four together. (The names date from the original earth-toned build. They are kept because the whole stylesheet refers to them; only the values change.) --------------------------------------------------------------------- */ --accent-line: #2C6E9E; /* BORDERS AND FILLS ONLY — never a letter of text */ --accent-text: #0E4570; /* every link and small label. 9.02 on paper */ --accent-lift: #8FC7EA; /* links on the dark header and footer. 9.65 */ --accent-deep: #103551; /* the deepest tone, for diagrams */ --on-accent: #FFFFFF; /* text sitting on an --accent-line fill. 5.48 */ /* Wiring. Do not edit these five lines — edit the five above. */ --rust: var(--accent-line); --rust-ink: var(--accent-text); --rust-lit: var(--accent-lift); --rust-deep: var(--accent-deep); --on-rust: var(--on-accent); /* Hairline rules between rows of a long list. */ --hair: #A8BCD0; /* ======================================================================= 4. THE DARK CHROME — the strip above the header, and the footer ======================================================================= */ --sumi: #0E1A26; /* the dark ground */ --on-dark: #DCE7F2; /* text on it. 14.03 */ --on-dark-2: #C3D4E4; /* secondary text on it. 11.60 */ --on-dream: #FFFFFF; /* text on a photo band. 13.10 */ /* ======================================================================= 5. TYPE ======================================================================= NO WEB FONTS anywhere on this site. Nothing is downloaded from another host, so nothing can be blocked, tracked or slow. If you add a web font you also have to change the security policy in the of all nine pages — see THEME-GUIDE.md before you do. To use a different installed font, put its name FIRST in the list and leave the rest as the fallbacks. --------------------------------------------------------------------- */ --font: "Helvetica Neue", Helvetica, /* macOS, iOS */ Arial, /* Windows — same metrics */ "Liberation Sans", "Nimbus Sans", /* Linux — same metrics */ sans-serif; /* Used for numbers, dates, patent numbers, citation keys. A fixed-width font makes columns of figures line up. */ --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* --- Every text size on the site. clamp(min, scales-with-screen, max) --- */ --size-body: 1.0625rem; /* paragraphs */ --size-lede: 1.2rem; /* the opening paragraph */ --size-h1: clamp(2.4rem, 5.5vw, 4rem); /* page title */ --size-h2: clamp(1.7rem, 3.2vw, 2.5rem); /* section title */ --size-h3: 1.2rem; --size-h4: 1rem; --size-small: 0.9rem; /* captions, metadata */ --size-tiny: 0.78rem; /* badges, tags */ --line-body: 1.65; /* space between lines of a paragraph */ --line-head: 1.05; /* space between lines of a heading */ /* Headings are UPPERCASE by default. Set both to `none` for normal case. */ --case-h1: uppercase; --case-h2: uppercase; /* Negative tracking tightens big headings. 0 turns it off. */ --track-head: -0.02em; /* ======================================================================= 6. SHAPE AND SPACING ======================================================================= */ /* The lopsided corner used on cards, buttons and photographs. It is meant to look cut rather than machined. Past about 20px it stops reading as a torn edge and starts reading as an ordinary rounded card. For plain square corners: --edge: 0; For an ordinary rounded card: --edge: 10px; */ --edge: 14px 3px 12px 4px / 4px 13px 3px 15px; --bd: 1px solid var(--ink); /* ordinary border */ --bd-heavy: 3px solid var(--ink); /* the border that means "important" */ /* The spacing scale. Everything on the site is a multiple of one of these, so changing --s-6 changes the rhythm of the whole page at once. */ --s-1: 0.5rem; --s-2: 0.875rem; --s-3: 1.375rem; --s-4: 2.25rem; --s-5: 3rem; --s-6: clamp(3.5rem, 7vw, 5.5rem); /* the gap between two sections */ --wrap: 80rem; /* how wide the content column is allowed to grow */ /* How far the top of a section sits below the section above it. Section headings sit at the very top of their section — see THEME-GUIDE.md. */ --head-gap: var(--s-4); /* ======================================================================= 7. IMAGES — the shape of every picture slot ======================================================================= Every picture is cropped to the shape set here, whatever size the file is. Drop a new file in at the same path and it fits automatically. Change one of these and every picture in that slot re-crops. 3 / 4 = tall portrait 4 / 3 = ordinary photograph 16 / 9 = wide 3 / 1 = a long strip --------------------------------------------------------------------- */ --shape-portrait: 3 / 4; /* people-*.jpg, betal-portrait.jpg */ --shape-photo: 4 / 3; /* device-*.jpg, research-*.jpg */ --shape-wide: 16 / 9; --shape-group: 3 / 1; /* group-photo.jpg */ /* The Home picture is a published figure, not a photograph: set this to the file's OWN ratio so none of it is cropped away. 1600 x 900 = 16/9. */ --shape-hero: 16 / 9; /* the picture at the top of the Home page */ /* How tall the logo in the header is. The width follows automatically. */ --logo-height: 2.6rem; /* THE BOX A FUNDING-AGENCY LOGO HAS TO FIT INSIDE — both numbers matter. Pinning height alone does not work for a row of logos: a wide wordmark (IHFC is nearly 4:1) comes out enormous beside a stacked roundel (ICMR is 2.3:1) at the same height. Each logo is scaled to fit the box and keeps its own proportions, so no artwork is ever stretched. Raise the height to make every logo bigger; lower the width to stop the widest one dominating the row. */ --funder-logo-height: 5rem; --funder-logo-width: 11rem; } /* =========================================================================== THE PAGE TEXTURE =========================================================================== Faint stains and a crossed weave, drawn with gradients — no image file, about a kilobyte, sharp at any screen size. To turn the texture off completely, delete this whole block. To make it stronger or weaker, change the three alpha values (the last number in each rgba). Keep them at or below 0.06: past that the texture starts eating the legibility margin measured in section 2. ========================================================================= */ body { background-image: radial-gradient(60rem 40rem at 12% 8%, rgba( 44, 110, 158, 0.055), transparent 70%), radial-gradient(52rem 52rem at 88% 34%, rgba( 22, 50, 79, 0.045), transparent 72%), radial-gradient(70rem 45rem at 38% 94%, rgba( 22, 33, 43, 0.050), transparent 70%), repeating-linear-gradient( 58deg, rgba(22, 33, 43, 0.018) 0 1px, transparent 1px 3px), repeating-linear-gradient(-32deg, rgba(22, 33, 43, 0.014) 0 1px, transparent 1px 4px); } /* The platform statement sits directly under a section heading on two pages, and its own top rule then doubled the heading's rule. */ .section-head + .platform { border-top: 0; padding-top: 0; } /* =========================================================================== WIRING — the knobs above applied to the elements that use them. You should not need to edit anything below this line. ========================================================================= */ body { font-size: var(--size-body); line-height: var(--line-body); } h1, h2, h3, h4 { line-height: var(--line-head); letter-spacing: var(--track-head); } h1 { font-size: var(--size-h1); text-transform: var(--case-h1); } h2 { font-size: var(--size-h2); text-transform: var(--case-h2); } h3 { font-size: var(--size-h3); } h4 { font-size: var(--size-h4); } .g-bone, .g-clay, .g-ash, .g-oxide { background-color: color-mix(in srgb, var(--ground) var(--ground-alpha), transparent); } /* Section headings sit at the top of their section, flush left, on every page. The old build stepped them in and out on alternate sections. */ .section-head { margin-bottom: var(--head-gap); max-width: 60rem; } .section-head p { margin-top: var(--s-2); } @media (min-width: 60rem) { .section-head, .section:nth-of-type(even) .section-head { margin-left: 0; margin-right: 0; } } .mech .lede { font-size: var(--size-lede); } /* Picture shapes */ .photo { aspect-ratio: var(--shape-photo); } .photo.portrait { aspect-ratio: var(--shape-portrait); } .photo.wide { aspect-ratio: var(--shape-wide); } .person img { aspect-ratio: var(--shape-portrait); } .group-photo img { aspect-ratio: var(--shape-group); } .hero-figure img { aspect-ratio: var(--shape-hero); } .brand-logo { height: var(--logo-height); } .funder-logo { max-height: var(--funder-logo-height); max-width: min(100%, var(--funder-logo-width)); }