/* Secretech module blocks — styles. Uses --st-* tokens from base.css. */ /* ============================ HERO (M01) ============================ * Two SEPARATE layers: a background (Pine→Eucalyptus gradient in 4 directions, * a brand solid, or an uploaded image) and an optional node-link PATTERN layer * (the brand motif as a CSS mask) whose gradient direction + scale are set * independently of the background. Content sits above both. */ /* Sketch 144:68 is 1512x800 with 176px top / 128px bottom padding; 174:1252 is * 402x640 with 118/36. The vw terms hit both drawn values exactly. */ .st-hero{box-sizing:border-box;position:relative;overflow:hidden;min-height:clamp(640px,52.9vw,800px);display:flex;align-items:center;padding-top:clamp(118px,11.64vw,176px);padding-bottom:clamp(36px,8.47vw,128px);background:var(--st-grey-900);} /* --- Layer 1: background (shared: .st-bg is reusable by any band; hero aliases it) --- */ .st-hero__bg,.st-bg{position:absolute;inset:0;z-index:0;} .st-hero__bg--grad-tb,.st-bg--grad-tb{background:linear-gradient(180deg,var(--st-pine),var(--st-euc));} .st-hero__bg--grad-bt,.st-bg--grad-bt{background:linear-gradient(0deg,var(--st-pine),var(--st-euc));} .st-hero__bg--grad-lr,.st-bg--grad-lr{background:linear-gradient(90deg,var(--st-pine),var(--st-euc));} .st-hero__bg--grad-rl,.st-bg--grad-rl{background:linear-gradient(270deg,var(--st-pine),var(--st-euc));} .st-hero__bg--pine,.st-bg--pine{background:var(--st-pine);} .st-hero__bg--grey50,.st-bg--grey50{background:var(--st-grey-50);} .st-hero__bg--grey900,.st-bg--grey900{background:var(--st-grey-900);} .st-hero__bg--image,.st-bg--image{background:var(--st-bg) center/cover no-repeat;} /* --- Layer 2: node-link pattern (masked brand motif; .st-ptn is reusable) --- */ /* The mask is driven by four variables so a motif swap is one declaration block * and the sweep animation below, which clips to the same stencil, follows along * instead of staying pinned to the node-link tile. */ .st-hero__pattern,.st-ptn{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.18; --st-ptn-src:url(../img/patterns/nodes.svg); --st-ptn-pos:center; --st-ptn-size:var(--st-pat,820px); --st-ptn-repeat:repeat; -webkit-mask:var(--st-ptn-src) var(--st-ptn-pos) / var(--st-ptn-size) var(--st-ptn-repeat); mask:var(--st-ptn-src) var(--st-ptn-pos) / var(--st-ptn-size) var(--st-ptn-repeat);} .st-hero__pattern--small,.st-ptn--small{--st-pat:460px;} .st-hero__pattern--medium,.st-ptn--medium{--st-pat:820px;} .st-hero__pattern--large,.st-ptn--large{--st-pat:1300px;} /* Motif: the single right-hand network graphic (Figma 162:1008). The crop is * baked into the asset's viewBox, so it needs no repeat and no scale variants — * it is sized to the band's height and pinned to the right edge. */ .st-hero__pattern--motif-right,.st-ptn--motif-right{ --st-ptn-src:url(../img/patterns/vector-right.svg); --st-ptn-pos:right center; --st-ptn-size:auto 100%; --st-ptn-repeat:no-repeat;} .st-hero__pattern--grad-tb,.st-ptn--grad-tb{background:linear-gradient(180deg,var(--st-pine),var(--st-euc));} .st-hero__pattern--grad-bt,.st-ptn--grad-bt{background:linear-gradient(0deg,var(--st-pine),var(--st-euc));} .st-hero__pattern--grad-lr,.st-ptn--grad-lr{background:linear-gradient(90deg,var(--st-pine),var(--st-euc));} .st-hero__pattern--grad-rl,.st-ptn--grad-rl{background:linear-gradient(270deg,var(--st-pine),var(--st-euc));} .st-hero__pattern--pine,.st-ptn--pine{background:var(--st-pine);} .st-hero__pattern--eucalyptus,.st-ptn--eucalyptus{background:var(--st-euc);} .st-hero__pattern--grey200,.st-ptn--grey200{background:var(--st-grey-200);} .st-hero__pattern--white,.st-ptn--white{background:#fff;} /* Pattern animations: pulsing size, or a rotating gradient (static by default) */ @property --st-ang{syntax:"";inherits:false;initial-value:0deg;} .st-hero__pattern--anim-pulse,.st-ptn--anim-pulse{transform-origin:center;animation:st-ptn-pulse 6s ease-in-out infinite;will-change:transform;} .st-hero__pattern--anim-gradient,.st-ptn--anim-gradient{background:linear-gradient(var(--st-ang),var(--st-pine),var(--st-euc));animation:st-ptn-rotate 8s linear infinite;} /* Light sweep: a bright band travelling diagonally through the node-link net, * clipped to the same motif mask and screen-blended so it reads as light/energy. */ .st-hero__pattern--anim-sweep::after,.st-ptn--anim-sweep::after{content:"";position:absolute;inset:0; -webkit-mask:var(--st-ptn-src) var(--st-ptn-pos) / var(--st-ptn-size) var(--st-ptn-repeat); mask:var(--st-ptn-src) var(--st-ptn-pos) / var(--st-ptn-size) var(--st-ptn-repeat); background:linear-gradient(115deg,transparent 42%,rgba(234,250,240,.95) 50%,transparent 58%); background-repeat:no-repeat;background-size:260% 260%;mix-blend-mode:screen; animation:st-ptn-sweep 5s linear infinite;} @keyframes st-ptn-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}} @keyframes st-ptn-rotate{to{--st-ang:360deg;}} @keyframes st-ptn-sweep{0%{background-position:120% -20%;}100%{background-position:-40% 120%;}} @media(prefers-reduced-motion:reduce){ .st-hero__pattern--anim-pulse,.st-ptn--anim-pulse,.st-hero__pattern--anim-gradient,.st-ptn--anim-gradient{animation:none;transform:none;} .st-hero__pattern--anim-sweep::after,.st-ptn--anim-sweep::after{animation:none;display:none;} } /* legibility scrim over image backgrounds */ .st-hero--scrim::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 82% 72% at 50% 50%,rgba(12,22,22,.5),rgba(12,22,22,.12) 75%);} /* Over a gradient the 1512 sketch has no scrim at all — the text sits on the dark * Pine end. The 402 sketch adds a Pine→transparent cover (198:1692) because the * gradient runs out of contrast in the narrower frame. */ .st-hero--cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,var(--st-pine),rgba(5,87,87,0));} @media(min-width:782px){.st-hero--cover::before{display:none;}} .st-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(120deg,rgba(12,22,22,.72),rgba(12,22,22,.42) 60%,rgba(5,55,55,.42));} /* --- content --- * Left-aligned against the 96px gutter, text capped at 960px so the node-link * artwork keeps the right half of the frame (sketch 144:77). .st-hero is a flex * container, so the .st-wrap item needs width:100% to hold its content column. */ .st-hero__inner{position:relative;z-index:2;width:100%;text-align:left;} .st-hero__title{font-family:var(--st-barlow);font-weight:600;letter-spacing:-.02em;line-height:1.1;font-size:clamp(2.5rem,6.88vw,6.5rem);margin:0;max-width:960px;} .st-hero__lede{margin:24px 0 0;max-width:720px;color:var(--st-mute);font-size:clamp(1.125rem,1.46vw,1.375rem);letter-spacing:-.02em;line-height:1.5;} .st-on-dark .st-hero__lede{color:#fff;} .st-hero__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start;margin-top:48px;} /* 402 sketch (174:1256): the two buttons stack full-width, 12px apart, and the * group is pushed to the bottom of the frame (justify-between). */ @media(max-width:600px){ .st-hero{align-items:stretch;} .st-hero__inner{display:flex;flex-direction:column;} .st-hero__cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:48px;} } /* ============================ COMPARISON (M06) ============================ * Bulk vs single across dimensions, cycled around a central node. */ .st-compare{background:var(--st-grey);padding-block:var(--st-section);} .st-compare__title{text-align:center;margin:0 auto 3rem;max-width:20ch;} .st-cmp{max-width:1000px;margin-inline:auto;} .st-cmp__slide{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3.5vw,3rem);align-items:center;margin-bottom:1.5rem;} .st-cmp.is-enhanced .st-cmp__slide{display:none;margin-bottom:0;} .st-cmp.is-enhanced .st-cmp__slide.is-active{display:grid;animation:st-fade .4s var(--st-ease);} .st-cmp__card{border-radius:16px;padding:clamp(1.5rem,2.5vw,2rem);} .st-cmp__card--bulk{background:#fff;border:1px solid var(--st-line);} .st-cmp__card--pba{background:var(--st-dark-pine);color:#fff;} /* Micro-labels stay sentence case. The sketches use no uppercase anywhere, and * the wide positive tracking that made 11px caps readable is an uppercase-only * device — so these take the brand's Barlow Medium at a size that carries * lowercase, with the -.02em tracking every other label uses. */ .st-cmp__side{display:block;font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;margin-bottom:.6rem;} .st-cmp__card--bulk .st-cmp__side{color:var(--st-mute);} .st-cmp__card--pba .st-cmp__side{color:var(--st-euc);} .st-cmp__text{margin:0;line-height:1.5;} .st-cmp__card--bulk .st-cmp__text{color:var(--st-mute);} .st-cmp__hub{position:relative;display:grid;place-items:center;text-align:center;} .st-cmp__hub::before,.st-cmp__hub::after{content:"";position:absolute;top:50%;width:clamp(.5rem,3vw,2.5rem);height:2px;background:var(--st-line);} .st-cmp__hub::before{right:100%;}.st-cmp__hub::after{left:100%;} .st-cmp__node{width:clamp(96px,11vw,132px);aspect-ratio:1;border-radius:50%;background:var(--st-pine);color:#fff;display:grid;place-items:center;padding:.5rem;font-family:var(--st-barlow);font-weight:700;font-size:.98rem;line-height:1.1;letter-spacing:-.01em;} .st-cmp__caption{margin-top:.7rem;font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;color:var(--st-mute);} .st-cmp__dots{display:flex;justify-content:center;gap:.6rem;margin-top:2rem;} .st-cmp__dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#c2cfcf;cursor:pointer;transition:background .2s,transform .2s;} .st-cmp__dot[aria-selected="true"]{background:var(--st-pine);transform:scale(1.25);} @media(max-width:781px){ .st-cmp__slide{grid-template-columns:1fr;gap:1rem;} .st-cmp__hub{order:-1;} .st-cmp__hub::before,.st-cmp__hub::after{display:none;} } /* ============================ COOKIE DECLARATION ============================ * Cookiebot's table is as wide as its content needs and knows nothing about the * column it lands in — on a 390px screen it measured 463px inside a 354px column * and pushed the whole document sideways. It scrolls inside its own box instead, * the same treatment the article module gives a wide table. */ .st-cookiedecl{overflow-x:auto;} .st-cookiedecl table{max-width:100%;} /* ============================ SINGLE POST ============================ * templates/single.html. A post is not built from module bands — it is written * with ordinary blocks — so it gets the reading column and the band padding * directly, the same 760px and --st-section the Article module uses. Without a * template of its own a post fell through to index.html and rendered as a linked * title and a one-line excerpt, with no body at all. */ .st-single{padding-block:var(--st-section);} .st-single__title{margin:0;font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;letter-spacing:-.02em;} .st-single__date{margin:.75rem 0 0;font-family:var(--st-barlow);font-weight:500;font-size:.9375rem;color:var(--st-grey-600);} /* The content follows the date, and its own first block carries no top margin of * its own — core's flow spacing starts between siblings, not before the first. */ .st-single .entry-content{margin-top:2.5rem;} .st-single .entry-content > *{max-width:100%;} /* ============================ LOOSE BLOCKS ON A PAGE ============================ * A core block dropped straight onto the canvas is a sibling of the module * bands, not inside one, so it gets theme.json's 760px column but none of the * 96px band padding — on /products/ ten of them sat between two modules with * 19px of air, and a lone image elsewhere had 24px. * * A run of them only needs the padding at its two ends: the blocks inside a run * keep their own rhythm. So the first one after a band takes the space above and * the last one before a band takes the space below, which is what these two * selectors say. Nothing needs to know how long the run is. * * Doing it here rather than by wrapping each run in a section also leaves an * alignwide image at its 1320px — inside a reading column it would be capped to * 760 — and keeps working for whatever an editor drops in next. */ .wp-block-post-content > .st-full + :not(.st-full){margin-top:var(--st-section);} .wp-block-post-content > :not(.st-full):has(+ .st-full){margin-bottom:var(--st-section);} /* ============================ SITE FOOTER (M) ============================ * A Cool Grey 50 band. The menu takes the whole content column as four balanced * columns, then the brand symbol and the legal row share the row beneath it — * symbol left, legal right. * * This replaces an earlier 408fr/864fr split that put the symbol in a column of * its own on the left: it left the menu in 57% of the width with a large empty * field beside it, and no amount of column gap fixed that. The hairline above * the legal row went with it; the whitespace does that work now. * * The column count lives in secretech_footer_split_columns() as well as in the * grid — PHP decides which groups share a column, CSS only sizes the tracks. */ .st-footer{background:var(--st-grey-50);color:var(--st-ink);padding-block:clamp(56px,5.5vw,80px) clamp(32px,3.5vw,56px);} .st-footer__grid{display:grid;gap:clamp(64px,7vw,112px);} .st-footer__symbol{display:block;width:168px;max-width:100%;height:auto;} .st-footer__cols{display:grid;grid-template-columns:repeat(var(--st-footer-cols,4),minmax(0,1fr));gap:clamp(24px,2.5vw,48px);} /* 24px, not the 48 this had: measured as a ratio inside the reference sketch * (scale-independent), the gap between two groups is 1.47x the gap from a * heading to its first link. At 48px it was 2.14x and the two groups in the * first column read as unrelated blocks. */ .st-footer__col{display:flex;flex-direction:column;gap:24px;min-width:0;} /* align-items:flex-end lands the legal row on the symbol's baseline rather than * its top, which is what keeps the two reading as one row. */ .st-footer__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,3vw,48px);flex-wrap:wrap;} .st-footer__group{display:flex;flex-direction:column;gap:8px;} .st-footer__list{list-style:none;margin:0;padding:0;} /* The sketch stacks a group's links on one 1.5 leading with no extra gap, so the * list rhythm comes from line-height alone. */ .st-footer__h,.st-footer__link{font-family:var(--st-barlow);font-weight:500;font-size:1.125rem;letter-spacing:-.02em;line-height:1.5;text-decoration:none;transition:color .2s var(--st-ease);} .st-footer__h{color:var(--st-grey-600);} .st-footer__link{color:var(--st-ink);display:block;} /* Only anchors: a grouping label renders as a span, and underlining it on hover * would offer a link that is not there. */ a.st-footer__h:hover,a.st-footer__h:focus-visible, a.st-footer__link:hover,a.st-footer__link:focus-visible{color:var(--st-pine);text-decoration:underline;} /* A second-level grouping and the entries under it. The indent is what carries * the nesting, since the sub-heading looks the same as a column heading. */ .st-footer__sub{margin-top:8px;} .st-footer__sub:first-child{margin-top:0;} .st-footer__sub > .st-footer__list{padding-left:16px;margin-top:2px;} .st-footer__legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:24px;font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;line-height:1.5;color:var(--st-grey-600);} /* The consent control is a button, so it has to be told to look like the links * beside it — a button carries a UA background, border, font and padding that a * link does not. */ .st-footer__legal a, .st-footer__pref{color:inherit;text-decoration:none;transition:color .2s var(--st-ease);} .st-footer__pref{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;} .st-footer__legal a:hover,.st-footer__legal a:focus-visible, .st-footer__pref:hover,.st-footer__pref:focus-visible{color:var(--st-pine);text-decoration:underline;} /* Four columns need roughly 200px each to hold "News & Upcoming Events" on one * line, so they halve before the mobile breakpoint rather than at it. */ @media(max-width:1080px){ .st-footer__cols{grid-template-columns:repeat(min(2,var(--st-footer-cols,4)),minmax(0,1fr));row-gap:clamp(40px,5vw,64px);} } /* 402 sketch: one column, the symbol below the links, legal stacked above it. * The order is explicit rather than a column-reverse, because the symbol and the * legal row are a left/right pair on desktop and a top/bottom one here. */ @media(max-width:781px){ .st-footer{padding-block:72px 36px;} .st-footer__grid{gap:72px;} .st-footer__symbol{width:126px;} .st-footer__cols{grid-template-columns:1fr;gap:36px;} .st-footer__col{gap:36px;} .st-footer__group{gap:6px;} .st-footer__bottom{flex-direction:column;align-items:flex-start;gap:36px;} .st-footer__brand{order:2;} .st-footer__legal{order:1;flex-direction:column;justify-content:flex-start;gap:16px;} } /* ============================ LIGHT BAND RHYTHM ============================ * Sketch 144:513: the light sections share one Cool Grey 50 surface, 96px in * from the band's edges and 96px *between* two adjacent sections. * * Every module now carries the full --st-section, so where two of these touch * they would stack to 192px. Each side of that seam takes half instead, which is * the 48 + 48 the sketch draws. Stated this way round the default is the 96px * every band gets, and the exception is only where one is actually needed — the * rule used to run the other way, which left these three at 48px on every page * where they stand alone. */ :is(.st-intro,.st-features,.st-process):has(+ :is(.st-intro,.st-features,.st-process)){padding-bottom:calc(var(--st-section) / 2);} :is(.st-intro,.st-features,.st-process) + :is(.st-intro,.st-features,.st-process){padding-top:calc(var(--st-section) / 2);} /* ============================ PROCESS (M05) ============================ * Sketch 241:187 (1512): four equal columns, no gap between them — the gutter * comes from each step's own right padding, which is also what stops the * hairline short of the next ordinal. 241:223 (402) reuses every part and * pivots the rail: the rule stands up and runs down a left gutter instead. */ .st-process{background:var(--st-grey-50);padding-block:var(--st-section);} .st-process__title{margin:0 0 48px;} /* One equal column per step, taken from the children rather than a step count * the container used to publish as --n: steps are inner blocks now, and * grid-auto-flow already follows however many actually rendered. */ .st-proc{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;counter-reset:st-proc;} .st-proc__step{display:flex;flex-direction:column;gap:16px;counter-increment:st-proc;} .st-proc__rail{display:flex;align-items:center;gap:16px;padding-right:16px;} /* The ordinal is a counter for the same reason the columns are automatic. */ .st-proc__rail::before{content:counter(st-proc,decimal-leading-zero);font-family:var(--st-barlow);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;color:var(--st-red);} .st-proc__line{flex:1 0 0;height:1px;min-width:1px;background:var(--st-grey-200);} .st-proc__body{display:flex;flex-direction:column;gap:16px;padding-right:24px;} .st-proc__t{margin:0;font-size:1.5rem;} .st-proc__b{margin:0;color:var(--st-ink);font-size:1.125rem;letter-spacing:-.02em;line-height:1.5;} @media(max-width:781px){ .st-proc{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;} .st-proc__step{flex-direction:row;align-items:stretch;gap:12px;} /* items-start keeps the rule flush with the ordinal's left edge, which is * where the sketch puts it — not centred under the number. */ .st-proc__rail{flex-direction:column;align-items:flex-start;gap:8px;min-width:32px;padding-right:0;padding-bottom:8px;} .st-proc__rail::before{font-size:1.25rem;} .st-proc__line{flex:1 0 0;width:1px;height:auto;min-width:0;min-height:1px;} .st-proc__body{gap:8px;padding-right:0;padding-bottom:16px;} .st-proc__t{font-size:1.25rem;} } /* ============================ FEATURE GRID (M04) ============================ * "Core innovations" (149:870): title + body, no glyphs, each item closed by a * Cool Grey 200 hairline BELOW it with 48px of breathing room; 48px grid gaps. */ .st-features{background:var(--st-grey-50);padding-block:var(--st-section);} .st-features__title{margin:0 0 48px;} .st-features__grid{display:grid;gap:48px;} .st-features__grid[data-cols="2"]{grid-template-columns:repeat(2,1fr);} .st-features__grid[data-cols="3"]{grid-template-columns:repeat(3,1fr);} .st-features__grid[data-cols="4"]{grid-template-columns:repeat(4,1fr);} .st-feature{border-bottom:1px solid var(--st-grey-200);padding-bottom:48px;} .st-feature__t{margin:0 0 16px;font-size:clamp(1.25rem,1.59vw,1.5rem);} .st-feature__b{margin:0;color:var(--st-ink);font-size:clamp(1rem,1.19vw,1.125rem);letter-spacing:-.02em;line-height:1.5;} /* Numbered variant ("Key applications of PBA", 157:970): white cards on the band, * 24px radius, no border, 32px padding, led by a Primary/Red ordinal at 24px — * large-text size, so the full brand red clears AA here (the smaller ordinals * elsewhere keep the darkened --st-num). * * The ordinal is a CSS counter, not a rendered span: features are inner blocks, * so a child cannot know its own position — and counting here keeps the numbers * right the moment one is reordered or removed in the editor. */ .st-features__grid--num{counter-reset:st-feature;} .st-features__grid--num .st-feature{border:0;border-radius:24px;background:#fff;padding:32px;counter-increment:st-feature;} .st-features__grid--num .st-feature__t{display:flex;gap:16px;align-items:center;margin:0 0 16px;} .st-features__grid--num .st-feature__t::before{content:counter(st-feature,decimal-leading-zero); font-family:var(--st-barlow);font-weight:600;color:var(--st-red);line-height:1.1;flex:0 0 auto;} .st-features__grid--num .st-feature__b{margin-top:0;} @media(max-width:900px){.st-features__grid[data-cols="4"]{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.st-features__grid[data-cols="2"],.st-features__grid[data-cols="3"],.st-features__grid[data-cols="4"]{grid-template-columns:1fr;}} @keyframes st-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} /* ============================ INTRO (M) ============================ * Sketch 157:918: two equal 636px columns 48px apart on the Cool Grey 50 band, * closed by a Cool Grey 200 hairline that spans the content column. */ .st-intro{background:var(--st-grey-50);padding-block:var(--st-section);} /* These sit on .st-wrap, which is border-box — add the gutters back so the text * measure stays the 820/760px it was meant to be. */ .st-intro__inner{max-width:calc(820px + 2 * var(--st-gutter));} /* Split layout: heading left, body right */ .st-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;} .st-intro__grid .st-intro__h{font-size:clamp(1.75rem,2.646vw,2.5rem);line-height:1.1;} /* Grid child, so the rule ends on the content column — not on the wrap's gutter. */ .st-intro__grid::after{content:"";grid-column:1/-1;height:1px;background:var(--st-grey-200);margin-top:var(--st-section);} @media(max-width:781px){.st-intro__grid{grid-template-columns:1fr;gap:1.25rem;}} .st-intro__h{font-size:clamp(1.6rem,3vw,2.35rem);margin:0;} .st-intro__rule{width:64px;height:4px;border:0;background:var(--st-red);margin:1.5rem 0;} .st-intro__body{margin:0;color:var(--st-ink);font-size:clamp(1.125rem,1.46vw,1.375rem);letter-spacing:-.02em;line-height:1.5;max-width:none;} .st-intro--quote .st-intro__inner{max-width:calc(760px + 2 * var(--st-gutter));margin-inline:auto;text-align:center;position:relative;} .st-intro--quote .st-intro__mark{display:block;font-family:var(--st-barlow);font-weight:700;font-size:4rem;line-height:.6;color:var(--st-euc);} .st-intro--quote .st-intro__body{margin-inline:auto;} /* ============================ MEDIA BREAK (M) ============================ */ /* Sketch 149:722 is 1512x524 with 96px padding all round, left-aligned, an 80px * headline capped at 960px and a 22px sub capped at 720px — both solid white. */ .st-mediabreak{box-sizing:border-box;position:relative;overflow:hidden;background-color:var(--st-grey-1000);display:flex;align-items:center;min-height:clamp(360px,34.66vw,524px);padding-block:var(--st-section);} .st-mediabreak__inner{position:relative;z-index:2;width:100%;text-align:left;} .st-mediabreak__h{color:#fff;font-size:clamp(2rem,5.29vw,5rem);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:960px;} /* The CTA's sub-text is this same line — one rule for both bands, so the two * cannot drift apart, which is the point of adding it to the CTA at all. */ .st-mediabreak__sub, .st-cta__sub{color:#fff;margin:24px 0 0;max-width:720px;font-size:clamp(1.125rem,1.46vw,1.375rem);letter-spacing:-.02em;line-height:1.5;} /* ============================ CTA (M) ============================ */ .st-cta{position:relative;overflow:hidden;background-color:var(--st-grey-900);padding-block:var(--st-section);color:#fff;} /* Left-aligned like every other band in the sketches (the CTA has no sketch of * its own; it follows the Banner, 149:722). */ .st-cta__inner{position:relative;z-index:2;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:1.75rem;} .st-cta__h{color:#fff;font-size:clamp(2rem,5.29vw,5rem);line-height:1.1;letter-spacing:-.02em;max-width:960px;margin:0;} /* ============================ CARDS (M) ============================ */ .st-cards{background:#fff;padding-block:var(--st-section);} .st-cards--dark{background:var(--st-dark-pine);} .st-cards__grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(2,1fr);} @media(max-width:781px){.st-cards__grid{grid-template-columns:1fr;}} .st-card{background:#fff;border-radius:16px;padding:clamp(1.75rem,2.4vw,2.15rem);display:flex;flex-direction:column;gap:.6rem;box-shadow:0 12px 30px rgba(22,39,39,.08);transition:transform .2s var(--st-ease),box-shadow .2s var(--st-ease);} .st-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(22,39,39,.13);} .st-cards--dark .st-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:none;} .st-cards--dark .st-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);box-shadow:none;} /* The title's old top margin held it off the glyph that used to sit above it; * with the glyph gone the card's own flex gap sets the rhythm. */ .st-card__t{margin:0;font-size:1.3rem;} .st-cards--dark .st-card__t{color:#fff;} .st-card__b{margin:0;color:#41504f;line-height:1.55;flex:1;} .st-cards--dark .st-card__b{color:rgba(255,255,255,.75);} /* The two links are grouped so the space between them is their own, tighter than * the card's .6rem rhythm — they read as one call to action with two routes. A * card with a single link is unchanged: one child means no gap is applied. */ .st-card__links{display:flex;flex-direction:column;gap:.35rem;} .st-card__link{font-family:var(--st-barlow);font-weight:600;color:var(--st-pine);text-decoration:none;} .st-cards--dark .st-card__link{color:var(--st-euc);} @media(prefers-reduced-motion:reduce){.st-card,.st-card:hover{transform:none;transition:none;}} /* ============================ SPECS (M) ============================ */ .st-specs{background:var(--st-grey);padding-block:var(--st-section);} .st-specs__title{margin:0 0 2.5rem;} .st-specs__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--st-line);counter-reset:st-spec;} .st-spec{display:flex;align-items:baseline;gap:.9rem;padding:1.4rem 1rem 1.4rem 0;border-bottom:1px solid var(--st-line);counter-increment:st-spec;} /* The ordinal is a counter, not a rendered span: specifications are inner blocks * now, so a child cannot know its own position — and counting here renumbers the * grid the moment one is reordered or removed in the editor. */ .st-spec::before{content:counter(st-spec,decimal-leading-zero);font-family:var(--st-barlow);font-weight:700;color:var(--st-num);font-size:.9rem;} .st-spec__l{font-family:var(--st-barlow);font-weight:600;font-size:1.15rem;color:var(--st-ink);} @media(max-width:781px){.st-specs__grid{grid-template-columns:1fr;}} /* ============================ WORKFLOW (M) ============================ */ .st-workflow{background:#fff;padding-block:var(--st-section);} /* Was an inline max-width on the wrap; the steps read badly much wider. */ .st-workflow__inner{max-width:820px;margin-inline:auto;} .st-workflow__title{margin:0 0 2.5rem;} .st-wf{list-style:none;margin:0;padding:0;counter-reset:st-wf;} .st-wf__step{display:flex;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--st-line);counter-increment:st-wf;} .st-wf__step:last-child{border-bottom:1px solid var(--st-line);} /* Same counter reasoning as the specifications grid above. */ .st-wf__step::before{content:counter(st-wf,decimal-leading-zero);flex:0 0 auto;font-family:var(--st-barlow);font-weight:700;font-size:1.1rem;color:var(--st-num);width:2.5rem;} .st-wf__t{margin:0 0 .35rem;font-size:1.25rem;} .st-wf__b{margin:0;color:var(--st-mute);line-height:1.55;max-width:60ch;} /* ============================ GALLERY (M) ============================ */ .st-gallery{background:var(--st-grey);padding-block:var(--st-section);} .st-gallery__title{margin:0 0 2.25rem;} .st-gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:clamp(.75rem,1.4vw,1.15rem);} .st-gallery__fig{margin:0;overflow:hidden;border-radius:14px;background:#0d1414;cursor:zoom-in;} /* Tile size is chosen per image, not by position: the old :nth-child(1)/(4) rules * only produced the intended rhythm at exactly five images. */ .st-gallery__fig--wide{grid-column:span 2;} .st-gallery__fig--large{grid-column:span 2;grid-row:span 2;} .st-gallery__fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--st-ease);} .st-gallery__fig:hover img{transform:scale(1.05);} @media(max-width:781px){.st-gallery__grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;}.st-gallery__fig--wide,.st-gallery__fig--large{grid-column:span 2;}} .st-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(10,16,16,.94);padding:5vw;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;cursor:zoom-out;} .st-lightbox.is-open{opacity:1;visibility:visible;} .st-lightbox img{max-width:100%;max-height:90vh;border-radius:10px;} .st-lightbox__close{position:absolute;top:1.25rem;right:1.5rem;width:2.75rem;height:2.75rem;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;} /* ============================ LOCATIONS (M) ============================ */ .st-locations{background:#fff;padding-block:var(--st-section);} .st-locations__title{margin:0 0 2.75rem;} /* A grid, not wrapping flex. Flex items grow to fill their row, so a lab that * wrapped on its own stretched to the full width while its neighbours above sat * in quarters — and the first lab, whose left padding was removed to line it up * with the heading, ended up narrower than the rest. * * The divider is drawn half a gap past each lab, i.e. centred between columns, * and the container clips: for whichever lab ends a row that half-gap falls * outside, so no rule is left hanging at a row's edge. This is what lets the * column count stay automatic — CSS can select the last child, but not the last * child of a row. */ .st-locs{--st-loc-gap:clamp(1.25rem,2.5vw,2.5rem); display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); column-gap:calc(var(--st-loc-gap) * 2);row-gap:clamp(2.5rem,5vw,4rem); overflow:hidden;} .st-loc{position:relative;} .st-loc::after{content:"";position:absolute;top:0;bottom:0;right:calc(-1 * var(--st-loc-gap)); width:1px;background:var(--st-line);} /* Clipping only catches a lab that ends a full row. A lab that ends a partly * filled last row sits inside the container, and it is always the last child. */ .st-loc:last-child::after{display:none;} /* Was an aria-hidden
in the markup; it is decoration, so it lives here. */ .st-loc::before{content:"";display:block;width:44px;height:4px;background:var(--st-red);margin:0 0 1.5rem;} .st-loc__c{margin:0;font-family:var(--st-barlow);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.05;} .st-loc__n{margin:.5rem 0 0;color:var(--st-pine);font-weight:600;} .st-loc__a{margin:.9rem 0 0;color:var(--st-mute);line-height:1.5;} @media(max-width:781px){ /* Stacked: one column, and the rule turns horizontal between labs. */ .st-locs{grid-template-columns:1fr;row-gap:0;} .st-loc{padding:1.5rem 0;border-top:1px solid var(--st-line);} .st-loc:first-child{padding-top:0;border-top:0;} .st-loc::after{display:none;} } /* ============================ PUBLICATIONS (M) ============================ * One card per paper, following the old site's /information/publications: year * badge + journal, title and authors on the left; research field, sample type * and the link to the paper on the right. Labels are sentence case, not the * original's small caps — the theme carries no uppercase micro-labels. */ .st-pubs{background:var(--st-grey-50);padding-block:var(--st-section);} .st-pubs__title{margin:0 0 48px;} .st-pubs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;} .st-pub{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px 48px; background:#fff;border-radius:24px;padding:32px;} .st-pub.is-hidden{display:none;} .st-pub__main{min-width:0;} .st-pub__facts{min-width:0;display:flex;flex-direction:column;align-items:flex-start;} .st-pub__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;} .st-pub__year{font-family:var(--st-barlow);font-weight:600;font-size:.9375rem;letter-spacing:-.02em;line-height:1; color:var(--st-red-ink);border:1px solid currentColor;border-radius:6px;padding:5px 8px;} .st-pub__journal{font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;color:var(--st-grey-600);} /* Featured card: the newest paper, above the filters so it stays put while the * list below reacts to them. Bigger title, facts on one row, and the New flag * pinned to the top-right corner — the original's shape, in brand colours. */ .st-pubfeat{position:relative;background:#fff;border-radius:24px;padding:40px;margin:0 0 48px; border-bottom:4px solid var(--st-red);box-shadow:0 22px 48px -28px rgba(5,55,55,.28);} .st-pubfeat__new{position:absolute;top:24px;right:0; font-family:var(--st-barlow);font-weight:600;font-size:.8125rem;letter-spacing:.02em;line-height:1;text-transform:uppercase; color:#fff;background:var(--st-red);padding:8px 16px 8px 20px; clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);} .st-pubfeat__t{margin:0;font-size:clamp(1.5rem,2.38vw,2.25rem);line-height:1.15;letter-spacing:-.02em;} .st-pubfeat .st-pub__head{margin-bottom:20px;} .st-pubfeat__facts{display:grid;grid-template-columns:1fr 1fr auto;gap:24px 48px;align-items:end; margin-top:24px;padding-top:24px;border-top:1px solid var(--st-grey-200);} .st-pubfeat__facts .st-pub__label{margin-top:0;} .st-pubfeat__facts .st-pub__link{margin-top:0;padding-top:0;} .st-pub__t{margin:0;font-size:clamp(1.125rem,1.32vw,1.25rem);line-height:1.3;} .st-pub__label{margin:16px 0 4px;font-family:var(--st-barlow);font-weight:500;font-size:.9375rem; letter-spacing:-.02em;line-height:1.4;color:var(--st-grey-600);} .st-pub__facts .st-pub__label:first-child{margin-top:0;} .st-pub__authors,.st-pub__val{margin:0;font-size:1rem;line-height:1.5;letter-spacing:-.02em;color:var(--st-ink);} .st-pub__link{margin-top:auto;padding-top:16px;font-family:var(--st-barlow);font-weight:600;font-size:1rem; letter-spacing:-.02em;color:var(--st-pine);text-decoration:underline;text-underline-offset:3px; transition:color .2s var(--st-ease);} .st-pub__link:hover,.st-pub__link:focus-visible{color:var(--st-dark-pine);} .st-pubs__empty{margin:0;color:var(--st-grey-600);} /* Toolbar is injected by modules.js, so it is styled but never authored. */ .st-pubs__toolbar,.st-events__toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px;} .st-pubs__search,.st-events__search{flex:1 1 260px;min-width:200px;box-sizing:border-box;padding:.7rem 1.1rem; border:1px solid var(--st-grey-200);border-radius:var(--st-pill);font:inherit;color:var(--st-ink);background:#fff; transition:border-color .2s var(--st-ease),box-shadow .2s var(--st-ease);} .st-pubs__search::placeholder,.st-events__search::placeholder{color:var(--st-grey-600);} .st-pubs__search:focus-visible,.st-events__search:focus-visible{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} .st-pubs__select,.st-events__select{box-sizing:border-box;padding:.7rem 2.2rem .7rem 1.1rem;border:1px solid var(--st-grey-200); border-radius:var(--st-pill);font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em; color:var(--st-ink);background:#fff;cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%231e3333' stroke-width='2'%3E%3Cpath d='M4 7l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8rem center;background-size:14px;} .st-pubs__select:focus-visible,.st-events__select:focus-visible{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} .st-pubs__reset,.st-events__reset{border:0;background:none;padding:.7rem .4rem;cursor:pointer; font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;color:var(--st-pine);text-decoration:underline;text-underline-offset:3px;} .st-pubs__count,.st-events__count{margin:0 0 16px;font-size:1rem;letter-spacing:-.02em;color:var(--st-grey-600);} @media(max-width:781px){ .st-pub{grid-template-columns:1fr;gap:16px;padding:24px;} .st-pub__link{margin-top:0;} .st-pubfeat{padding:24px;margin-bottom:32px;} .st-pubfeat__facts{grid-template-columns:1fr;gap:16px;align-items:start;} .st-pubfeat__new{top:16px;} .st-pubs__toolbar,.st-events__toolbar{flex-direction:column;align-items:stretch;} .st-pubs__select,.st-pubs__search,.st-events__select,.st-events__search{flex:1 1 auto;width:100%;} .st-pubs__reset,.st-events__reset{text-align:left;} } /* ============================ EVENTS (M) ============================ * One bordered card per event, following the old site's /information/events: * topic tags as coloured text rather than pills, then title, description, and a * footer row with the date and place on the left and the link on the right. * Past events keep the border but drop the fill, so they read as recessed * against the upcoming ones without needing a second colour. */ .st-events{background:var(--st-grey-50);padding-block:var(--st-section);} .st-events__title{margin:0 0 48px;} .st-events__intro{margin:0 0 40px;max-width:80ch;font-size:1.0625rem;line-height:1.6;letter-spacing:-.02em;color:var(--st-grey-600);} .st-events__group + .st-events__group{margin-top:48px;} .st-events__group.is-empty{display:none;} .st-events__grouph{margin:0 0 24px;font-size:clamp(1.25rem,1.85vw,1.75rem);} .st-events__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;} .st-event{background:#fff;border:1px solid var(--st-grey-200);border-radius:24px;padding:28px 32px;} .st-event.is-hidden{display:none;} [data-group="past"] .st-event{background:transparent;} .st-event__tags{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 8px;} .st-event__tag{font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;color:var(--st-red-ink);} .st-event__t{margin:0;font-size:clamp(1.125rem,1.32vw,1.25rem);line-height:1.3;} .st-event__desc{margin:12px 0 0;font-size:1rem;line-height:1.5;letter-spacing:-.02em;color:var(--st-grey-600);max-width:80ch;} /* Footer row: meta left, link right. Wraps to two rows before it ever crowds. */ .st-event{display:flex;flex-direction:column;} .st-event__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 0; font-size:1rem;letter-spacing:-.02em;color:var(--st-ink);} .st-event__sep{color:var(--st-grey-200);} .st-event__link{align-self:flex-start;margin-top:12px;font-family:var(--st-barlow);font-weight:600;font-size:1rem; letter-spacing:-.02em;color:var(--st-pine);text-decoration:underline;text-underline-offset:3px; transition:color .2s var(--st-ease);} .st-event__link:hover,.st-event__link:focus-visible{color:var(--st-dark-pine);} .st-event__link::after{content:" \203A";} @media(min-width:600px){ /* Wide enough to sit the link opposite the meta, as the source does. */ .st-event__meta{margin-right:auto;} .st-event{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:32px;} .st-event__tags,.st-event__t,.st-event__desc{grid-column:1/-1;} .st-event__link{align-self:end;margin-top:20px;} } .st-events__empty{margin:0;color:var(--st-grey-600);} @media(max-width:781px){ .st-event{padding:24px;} .st-events__group + .st-events__group{margin-top:36px;} } /* ============================ DOWNLOADS (M) ============================ */ .st-downloads{background:var(--st-grey);padding-block:var(--st-section);} .st-downloads__title{margin:0 0 2rem;} .st-downloads__toolbar{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;margin:0 0 1.25rem;} .st-downloads__search{flex:1 1 240px;min-width:200px;padding:.7rem 1.1rem;border:1px solid var(--st-line);border-radius:var(--st-pill);font:inherit;color:var(--st-ink);background:#fff;transition:border-color .2s var(--st-ease),box-shadow .2s var(--st-ease);} .st-downloads__search::placeholder{color:var(--st-mute);} .st-downloads__search:focus-visible{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} .st-downloads__empty{color:var(--st-mute);text-align:center;padding:2.5rem 0;} .st-doc__dl--soon{color:var(--st-mute);font-weight:600;font-family:var(--st-barlow);cursor:default;} .st-downloads__toolbar .st-downloads__tabs{margin:0;border-bottom:0;padding-bottom:0;flex:0 1 auto;} .st-downloads__tabs{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:0 0 1.25rem;border-bottom:1px solid var(--st-line);padding-bottom:.25rem;} .st-downloads__tab{background:none;border:0;cursor:pointer;padding:.5rem 0;font-family:var(--st-barlow);font-weight:600;color:var(--st-mute);position:relative;} .st-downloads__tab[aria-selected="true"]{color:var(--st-ink);} .st-downloads__tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-.28rem;height:2px;background:var(--st-pine);} .st-doc{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.3rem 0;border-bottom:1px solid var(--st-line);} .st-doc__main{flex:1 1 260px;} .st-doc__t{display:block;font-family:var(--st-barlow);font-weight:600;font-size:1.1rem;color:var(--st-ink);} .st-doc__meta{display:block;margin-top:.2rem;font-size:.85rem;color:var(--st-mute);} .st-doc__dl{flex:0 0 auto;text-decoration:none;font-family:var(--st-barlow);font-weight:600;color:var(--st-ink);display:inline-flex;align-items:center;gap:.4rem;transition:gap .3s,color .3s;} .st-doc__dl:hover{color:var(--st-pine);gap:.7rem;} .st-doc__dl svg{width:1.05em;height:1.05em;} .st-doc.is-hidden{display:none;} /* ============================ PROTEIN DB (M) ============================ * Two views in one section: the landing (a wide autocomplete over every gene, * then one card per panel) and the panel view (a toolbar over a sortable table). * The table is the one place on the site allowed to scroll sideways — six columns * of reference data do not reflow into a phone, and pretending otherwise would * cost the visitor the columns they came for. */ .st-pdb{background:var(--st-grey-50);padding-block:var(--st-section);} .st-pdb__title{margin:0 0 40px;text-align:center;} /* --- search field, shared by the landing and the panel bar --- */ .st-pdb__field{position:relative;display:flex;align-items:center;gap:12px;box-sizing:border-box; background:#fff;border:1px solid var(--st-grey-200);border-radius:var(--st-pill);padding:14px 20px; transition:border-color .2s var(--st-ease),box-shadow .2s var(--st-ease);} .st-pdb__field:focus-within{border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} .st-pdb__icon{width:20px;height:20px;flex:0 0 auto;color:var(--st-grey-600);} .st-pdb__input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;letter-spacing:-.02em;color:var(--st-ink);outline:none;} .st-pdb__input::placeholder{color:var(--st-grey-600);} .st-pdb__input::-webkit-search-cancel-button{display:none;} .st-pdb__clear{flex:0 0 auto;border:0;background:none;padding:0;cursor:pointer;color:var(--st-grey-600); display:flex;transition:color .2s var(--st-ease);} /* An author display always beats the UA's [hidden] rule — restate it. */ .st-pdb__clear[hidden]{display:none;} .st-pdb__clear:hover{color:var(--st-ink);} .st-pdb__clear svg{width:20px;height:20px;} .st-pdb__searchwrap{position:relative;max-width:720px;margin:0 auto 64px;} /* --- autocomplete panel --- */ .st-pdb__ac{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px); background:#fff;border:1px solid var(--st-grey-200);border-radius:20px; box-shadow:0 18px 48px rgba(12,22,22,.14);overflow:hidden auto;max-height:min(60vh,520px);} .st-pdb__achead{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:baseline; padding:14px 20px;border-bottom:1px solid var(--st-grey-100); font-size:.9375rem;letter-spacing:-.02em;color:var(--st-grey-600);} .st-pdb__achint{font-size:.875rem;} .st-pdb__none{margin:0;padding:18px 20px;letter-spacing:-.02em;color:var(--st-grey-600);} .st-pdb__hit{padding:14px 20px;cursor:pointer;border-bottom:1px solid var(--st-grey-100); transition:background .15s var(--st-ease);} .st-pdb__hit:last-child{border-bottom:0;} .st-pdb__hit.is-active{background:rgba(188,220,189,.28);} .st-pdb__hittop{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;} .st-pdb__hitgene{font-family:var(--st-barlow);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em;color:var(--st-ink);} .st-pdb__hitpanel{flex:0 0 auto;border:1px solid var(--st-grey-200);border-radius:var(--st-pill); padding:3px 12px;font-size:.8125rem;letter-spacing:-.01em;color:var(--st-grey-600);} /* Two columns on wide dropdowns so a long protein class does not push the * UniProt ID out of sight, one column when there is no room. */ .st-pdb__hitmeta{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:8px 0 0; font-size:.9375rem;line-height:1.45;letter-spacing:-.02em;} .st-pdb__hitmeta dt{color:var(--st-grey-600);} .st-pdb__hitmeta dd{margin:0;color:var(--st-ink);} .st-pdb__ac mark{background:rgba(223,74,84,.16);color:inherit;border-radius:3px;padding:0 1px;} /* --- panel cards --- */ .st-pdb__panels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px;} .st-pdb__card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;height:100%; box-sizing:border-box;text-align:left;cursor:pointer;font:inherit; background:#fff;border:1px solid var(--st-grey-200);border-radius:24px;padding:clamp(28px,3vw,40px); transition:border-color .2s var(--st-ease),box-shadow .2s var(--st-ease),transform .2s var(--st-ease);} .st-pdb__card:hover,.st-pdb__card:focus-visible{border-color:var(--st-pine);box-shadow:0 12px 32px rgba(12,22,22,.08);transform:translateY(-2px);} .st-pdb__cardt{margin:0;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.02em;color:var(--st-ink);} .st-pdb__cardb{margin:0;color:var(--st-grey-600);line-height:1.55;letter-spacing:-.02em;} .st-pdb__more{margin-top:auto;padding-top:12px;font-family:var(--st-barlow);font-weight:600;letter-spacing:-.02em;color:var(--st-pine);} .st-pdb__noscript{margin:32px 0 0;color:var(--st-grey-600);} /* --- panel view: toolbar --- */ .st-pdb__bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px;} .st-pdb__back{order:-1;border:0;background:none;padding:8px 4px;cursor:pointer; font-family:var(--st-barlow);font-weight:600;font-size:1rem;letter-spacing:-.02em;color:var(--st-pine); transition:color .2s var(--st-ease);} .st-pdb__back:hover{color:var(--st-dark-pine);} .st-pdb__pick{flex:0 0 auto;} .st-pdb__select{box-sizing:border-box;padding:.7rem 2.2rem .7rem 1.1rem;border:1px solid var(--st-grey-200); border-radius:var(--st-pill);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596968' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center/16px; font:inherit;letter-spacing:-.02em;color:var(--st-ink);appearance:none;cursor:pointer;} .st-pdb__select:focus-visible{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} .st-pdb__field--bar{flex:1 1 260px;min-width:220px;padding:8px 16px;} .st-pdb__dl{flex:0 0 auto;margin-left:auto;text-decoration:none; background:var(--st-red-ink);color:#fff;border-radius:var(--st-pill);padding:.7rem 1.4rem; font-family:var(--st-barlow);font-weight:600;font-size:1rem;letter-spacing:-.02em; transition:background .2s var(--st-ease);} .st-pdb__dl:hover,.st-pdb__dl:focus-visible{background:#a8333c;color:#fff;} /* --- panel view: table --- */ .st-pdb__tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--st-grey-200);border-radius:24px;} .st-pdb__table{width:100%;border-collapse:collapse;font-size:.9375rem;letter-spacing:-.02em;} .st-pdb__table th,.st-pdb__table td{text-align:left;vertical-align:top;padding:14px 20px;border-bottom:1px solid var(--st-grey-100);} .st-pdb__table tbody tr:last-child th,.st-pdb__table tbody tr:last-child td{border-bottom:0;} /* No sticky header row: the wrap scrolls sideways, which makes it the scroll * container, and a vertically sticky cell inside it never meets the viewport. */ .st-pdb__table thead th{background:#fff;white-space:nowrap; border-bottom:1px solid var(--st-grey-200); font-family:var(--st-barlow);font-weight:600;font-size:.8125rem;text-transform:uppercase; letter-spacing:.04em;color:var(--st-grey-600);} .st-pdb__sort{border:0;background:none;padding:0;cursor:pointer;font:inherit;text-transform:inherit; letter-spacing:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px; transition:color .2s var(--st-ease);} .st-pdb__sort:hover{color:var(--st-ink);} /* The caret doubles as the sort indicator: dimmed when the column is idle. */ .st-pdb__sort::after{content:"";width:8px;height:8px;flex:0 0 auto;opacity:.4; background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%);} .st-pdb__sort.is-asc::after{opacity:1;} .st-pdb__sort.is-desc::after{opacity:1;transform:rotate(180deg);} .st-pdb__row:nth-child(even){background:var(--st-grey-50);} .st-pdb__row.is-marked{background:rgba(188,220,189,.42);} .st-pdb__c-id{width:1%;white-space:nowrap;color:var(--st-grey-600);} .st-pdb__c-gene{white-space:nowrap;font-family:var(--st-barlow);font-weight:600;color:var(--st-ink);} .st-pdb__c-uni{white-space:nowrap;} .st-pdb__c-prot{min-width:22ch;} .st-pdb__c-syn{min-width:18ch;color:var(--st-grey-600);} .st-pdb__c-class{min-width:24ch;color:var(--st-grey-600);} /* --- panel view: pagination --- */ .st-pdb__foot{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:center;margin:24px 0 0;} .st-pdb__page{display:flex;align-items:center;justify-content:center;width:40px;height:40px; border:1px solid var(--st-grey-200);border-radius:50%;background:#fff;cursor:pointer; font-size:1.25rem;line-height:1;color:var(--st-ink); transition:border-color .2s var(--st-ease),color .2s var(--st-ease);} .st-pdb__page:hover:not(:disabled){border-color:var(--st-pine);color:var(--st-pine);} .st-pdb__page:disabled{opacity:.35;cursor:default;} .st-pdb__range{margin:0;font-size:1rem;letter-spacing:-.02em;color:var(--st-grey-600);} .st-pdb__goto{display:flex;align-items:center;gap:8px;margin-left:auto; font-size:1rem;letter-spacing:-.02em;color:var(--st-grey-600);} .st-pdb__gotoinput{width:5rem;box-sizing:border-box;padding:.5rem .7rem;border:1px solid var(--st-grey-200); border-radius:12px;background:#fff;font:inherit;color:var(--st-ink);} .st-pdb__gotoinput:focus-visible{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} @media(max-width:781px){ .st-pdb__searchwrap{margin-bottom:40px;} .st-pdb__panels{grid-template-columns:1fr;gap:16px;} .st-pdb__hitmeta{grid-template-columns:1fr;} .st-pdb__hitmeta dt{margin-top:4px;} .st-pdb__dl{margin-left:0;} .st-pdb__field--bar{flex-basis:100%;} .st-pdb__table th,.st-pdb__table td{padding:12px 16px;} .st-pdb__foot{justify-content:space-between;} .st-pdb__goto{margin-left:0;flex-basis:100%;justify-content:flex-end;} } /* ============================ ARTICLE TEXT (M) ============================ * A reading column for long-form copy. The children are ordinary editor blocks, * so everything here styles core output rather than markup of our own — and it * is scoped to .st-article__inner so it cannot leak into the other modules. * * 760px is the whole point of the module: the measure stays comfortable however * wide the screen gets, and nothing inside is allowed to break it. */ .st-article{padding-block:var(--st-section);} .st-article--white{background:#fff;} .st-article--grey{background:var(--st-grey-50);} .st-article__inner{max-width:760px;margin-inline:auto;} .st-article__inner > *{max-width:100%;} /* --- body copy. On the type scale in docs/tokens.md: `base` 1rem, with tracking * left normal, because that scale reserves the tight -.02em for Barlow headings * and puts body copy at none. * * This ran at 1.0625rem with -.01em. Every other run of body copy on the site * measures 16px — the prose module, card descriptions, location addresses, the * body element itself — and -.01em is used nowhere else at all. It did not even * hold within the module: the lists below were on normal, so paragraphs and list * items were set differently. * * 1.7 rather than the scale's 1.6 is deliberate and shared with the prose * module: the two long-form modules agree with each other, and the site's short * copy stays at 1.6. --- */ .st-article__inner p{margin:0 0 1.15rem;font-size:1rem;line-height:1.7;color:#2c3a3a;} .st-article__inner > :last-child{margin-bottom:0;} .st-article__inner strong{font-weight:600;color:var(--st-ink);} .st-article__inner a{color:var(--st-pine);text-decoration:underline;text-underline-offset:3px;transition:color .2s var(--st-ease);} .st-article__inner a:hover,.st-article__inner a:focus-visible{color:var(--st-dark-pine);} /* --- subheadings. Barlow, like every other heading on the site, and with more * space above than below so a heading binds to the text it introduces. --- */ .st-article__inner :is(h1,h2,h3,h4){font-family:var(--st-barlow);font-weight:600;letter-spacing:-.02em;color:var(--st-ink);} /* h1: the module is the long-form one, so it has to be able to carry a page's * own title — a legal page is an article with a heading, not a band with a * strapline. Matches .st-prose__title, which is the scale's `3xl`. */ .st-article__inner h1{margin:0 0 1.5rem;font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;} /* Sizes land on the scale's `2xl`, `xl` and `lg` at full width, with their * line-heights, and clamp down on narrow screens the way every other heading on * the site does. They previously capped at 1.875 and 1.375rem — between two * steps of the scale and matching nothing. */ .st-article__inner h2{margin:2.5rem 0 .85rem;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.2;} .st-article__inner h3{margin:2rem 0 .7rem;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.3;} .st-article__inner h4{margin:1.6rem 0 .6rem;font-size:1.125rem;line-height:1.3;} .st-article__inner > :is(h2,h3,h4):first-child{margin-top:0;} /* --- lists --- */ .st-article__inner :is(ul,ol){margin:0 0 1.15rem;padding-left:1.35rem;font-size:1rem;line-height:1.7;color:#2c3a3a;} .st-article__inner li{margin:0 0 .4rem;} .st-article__inner li::marker{color:var(--st-pine);} .st-article__inner :is(ul,ol) :is(ul,ol){margin:.4rem 0 0;} /* --- quote: a pine hairline rather than a coloured block, so it reads as an * aside inside the text and not as another band. --- */ .st-article__inner blockquote{margin:1.75rem 0;padding:0 0 0 1.25rem;border-left:2px solid var(--st-euc);} .st-article__inner blockquote p{font-size:1.125rem;line-height:1.6;color:var(--st-ink);} .st-article__inner blockquote cite{display:block;margin-top:.5rem;font-family:var(--st-barlow);font-size:.875rem;line-height:1.5;font-style:normal;color:var(--st-grey-600);} /* --- figures and tables --- */ .st-article__inner figure{margin:1.75rem 0;} .st-article__inner img{display:block;width:100%;height:auto;border-radius:14px;} .st-article__inner figcaption{margin-top:.6rem;font-size:.875rem;line-height:1.5;color:var(--st-grey-600);} .st-article__inner .wp-block-table{overflow-x:auto;} .st-article__inner table{width:100%;border-collapse:collapse;font-size:1rem;} .st-article__inner :is(th,td){text-align:left;vertical-align:top;padding:.7rem .9rem;border-bottom:1px solid var(--st-grey-100);} .st-article__inner th{font-family:var(--st-barlow);font-weight:600;color:var(--st-ink);} .st-article__inner hr{margin:2.5rem 0;border:0;border-top:1px solid var(--st-grey-200);} /* --- blocks with no typographic rule of their own. The rules above cover what * an article is written from — paragraphs, headings, lists, quotes, figures, * tables. A gallery, a video or a set of buttons dragged in has none, and would * sit flush against the paragraph before it. One margin, matching the figures, * so anything dropped in keeps the same vertical rhythm. --- */ .st-article__inner > :is(.wp-block-gallery,.wp-block-video,.wp-block-audio,.wp-block-file,.wp-block-embed,.wp-block-buttons,.wp-block-columns,.wp-block-group,.wp-block-media-text,.wp-block-pullquote){margin-block:1.75rem;} .st-article__inner > :first-child{margin-top:0;} /* ============================ CONTACT (M) ============================ */ .st-contact{background:var(--st-grey);padding-block:var(--st-section);} .st-contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start;} .st-contact__intro{color:var(--st-mute);font-size:1.125rem;line-height:1.55;margin:1rem 0 0;max-width:36ch;} .st-contact__dl{margin:2rem 0 0;display:grid;gap:1.25rem;} .st-contact__dl dt{font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.02em;color:var(--st-pine);} .st-contact__dl dd{margin:.25rem 0 0;color:var(--st-ink);line-height:1.5;} .st-contact__dl a{color:var(--st-ink);} /* The real form sits in the same white card as the placeholder it replaces, so * choosing a Contact Form 7 form changes what the module does, not how it looks. * The card goes on .wpcf7 rather than the form element to keep CF7's response * line inside it. */ .st-form, .st-cf7 .wpcf7{background:#fff;border:1px solid var(--st-line);border-radius:18px;padding:clamp(1.75rem,3vw,2.25rem);box-sizing:border-box;} .st-form *, .st-cf7 .wpcf7 *{box-sizing:border-box;} .st-frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;} .st-frow .st-field{margin-bottom:0;min-width:0;} .st-field{margin-bottom:1rem;min-width:0;} .st-field label{display:block;font-family:var(--st-barlow);font-weight:600;font-size:.9rem;margin-bottom:.35rem;} /* Contact Form 7 emits its own markup, so its controls are listed alongside * .st-inp rather than given a copy of these values — one definition, and the two * cannot drift apart. */ .st-inp, .st-cf7 :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],select,textarea){display:block;width:100%;box-sizing:border-box;font-family:var(--st-clear);font-size:1rem;color:var(--st-ink);background:#fff;border:1px solid #c2cccc;border-radius:8px;padding:11px 13px;} .st-inp:focus, .st-cf7 :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],select,textarea):focus{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.18);} textarea.st-inp, .st-cf7 textarea{min-height:110px;resize:vertical;} .st-form__note{font-size:.8rem;color:var(--st-mute);margin:.9rem 0 0;} /* ---- Contact Form 7 inside the Contact module ------------------------------- * CF7 wraps every field of one form body in a single

separated by
, so * the grid goes on that

and the breaks are hidden. The two-column split and * the full-width phone and message mirror the module's own placeholder layout. * * The .sr-form-grid hook is a div written into form 288's body, so it is content * rather than theme. If someone rewrites the form body without it the fields * stay full-width and styled and only the two-column split is lost — which is * why the field styling above is keyed on .st-cf7 instead. */ .st-cf7 .sr-form-grid > p{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0;} .st-cf7 .sr-form-grid br{display:none;} .st-cf7 .wpcf7-form-control-wrap{display:block;min-width:0;} .st-cf7 .wpcf7-form-control-wrap[data-name="phone"], .st-cf7 .wpcf7-form-control-wrap[data-name="message"]{grid-column:1 / -1;} .st-cf7 ::placeholder{color:var(--st-mute);opacity:1;} /* The submit is an , which .st-btn already covers via base.css; only its * paragraph wrapper and the spinner beside it need placing. */ .st-cf7 .wpcf7-form > p:last-of-type{margin:1.25rem 0 0;display:flex;align-items:center;gap:.75rem;} .st-cf7 .wpcf7-spinner{margin:0;} /* Validation and the response line. CF7 puts the state on the form element. */ .st-cf7 .wpcf7-not-valid{border-color:var(--st-red-ink);} .st-cf7 .wpcf7-not-valid-tip{color:var(--st-red-ink);font-size:.85rem;line-height:1.4;margin-top:.35rem;} .st-cf7 .wpcf7-response-output{margin:1rem 0 0;padding:.7rem .95rem;border:1px solid var(--st-line);border-radius:8px;font-size:.9rem;line-height:1.5;} .st-cf7 form.sent .wpcf7-response-output{border-color:var(--st-pine);color:var(--st-pine);} .st-cf7 :is(form.invalid,form.unaccepted,form.failed,form.aborted) .wpcf7-response-output{border-color:var(--st-red-ink);color:var(--st-red-ink);} @media(max-width:781px){.st-contact__grid{grid-template-columns:1fr;}.st-frow{grid-template-columns:1fr;}.st-cf7 .sr-form-grid > p{grid-template-columns:1fr;}} /* ============================ PROSE (M) ============================ */ /* Same 760px measure as .st-article__inner, and for the same reason it needs its * own element: .st-wrap is border-box with padding-inline:var(--st-gutter), so a * 760px cap on the wrap itself is 760px *including* the gutter — 568px of text at * a 1600px viewport. The cap belongs on a child of the wrap, never on the wrap. */ .st-prose{background:#fff;padding-block:var(--st-section);} .st-prose__inner{max-width:760px;margin-inline:auto;} /* With an image the module becomes a split. The text keeps the wider column — * it is a reading module, and 1.1fr lands its measure near 660px at the widest * wrap, well inside the 760px cap. The ratio is stated per * side rather than once, because the image is first in the DOM when it sits on * the left, so "the text column" is a different track in each case. * * margin-inline:auto is dropped in the split: the inner is a grid item there and * auto margins would centre it inside its own track, pulling the text away from * the edge the rest of the page lines up on. */ .st-prose__split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start;} .st-prose--right .st-prose__split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);} .st-prose--left .st-prose__split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);} .st-prose__split .st-prose__inner{margin-inline:0;} .st-prose__figure{margin:0;min-width:0;} /* 14px matches the article module's figures, so an image reads the same wherever * it sits in a page's stack. */ .st-prose__img{display:block;width:100%;height:auto;border-radius:14px;} /* Both selectors restated rather than one !important: the per-side rules above * are two classes deep, so a single .st-prose__split here would lose to them. */ @media(max-width:781px){ .st-prose--right .st-prose__split, .st-prose--left .st-prose__split{grid-template-columns:1fr;gap:2rem;} } .st-prose__title{font-size:clamp(2rem,4vw,2.75rem);margin:0 0 1.5rem;} .st-prose p{margin:0 0 1.15rem;line-height:1.7;color:#2c3a3a;} /* ============================ DESIGN GUIDE ============================ */ .st-dg__intro{background:linear-gradient(120deg,#12201f,#055757);padding-block:clamp(3.5rem,7vw,5.5rem);} .st-dg__title{color:#fff;font-size:clamp(2.25rem,5vw,3.5rem);margin:0;} .st-dg__lede{color:rgba(255,255,255,.8);font-size:1.125rem;line-height:1.55;max-width:60ch;margin:1rem 0 0;} .st-dg__label{background:var(--st-dark-pine);color:#fff;padding-block:12px;font-family:var(--st-barlow);font-weight:600;font-size:.85rem;} .st-dg__label .st-dg__code{color:var(--st-red);font-weight:700;margin-right:.5rem;} .st-dg__label .st-dg__slug{color:rgba(255,255,255,.5);font-family:ui-monospace,Menlo,monospace;font-size:.8rem;margin-left:.5rem;} /* ============================ DESIGN SYSTEM (foundations page) ============================ */ .st-ds__block{padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--st-line);} .st-ds__h{font-family:var(--st-barlow);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2rem);color:var(--st-dark-pine);margin:0 0 1.5rem;} .st-ds__note{color:var(--st-mute);margin:-.75rem 0 1.5rem;max-width:60ch;} .st-ds__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem;} .st-ds__swatch{margin:0;} .st-ds__chip{display:flex;align-items:flex-end;justify-content:flex-end;height:96px;border-radius:14px;padding:.6rem .8rem;font-family:ui-monospace,Menlo,monospace;font-size:.8rem;border:1px solid rgba(30,51,51,.08);} .st-ds__chip.is-dark{color:rgba(255,255,255,.85);} .st-ds__chip.is-light{color:var(--st-dark-pine);} .st-ds__swatch figcaption{margin-top:.6rem;display:flex;flex-direction:column;gap:.15rem;} .st-ds__swatch figcaption strong{font-family:var(--st-barlow);font-weight:600;color:var(--st-dark-pine);} .st-ds__swatch figcaption span{font-size:.82rem;color:var(--st-mute);line-height:1.4;} .st-ds__grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;} .st-ds__grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;} .st-ds__tile{margin:0;} .st-ds__tile figcaption{margin-top:.6rem;font-size:.85rem;color:var(--st-mute);} .st-ds__grad{display:block;height:120px;border-radius:14px;border:1px solid rgba(30,51,51,.08);} .st-ds__pat{position:relative;display:block;height:150px;border-radius:14px;overflow:hidden;border:1px solid rgba(30,51,51,.08);} .st-ds__type{display:grid;gap:.4rem 2rem;grid-template-columns:1fr;margin-bottom:2rem;} .st-ds__label{font-family:var(--st-barlow);font-weight:600;font-size:.85rem;color:var(--st-mute);margin:.5rem 0 0;} .st-ds__spec{font-size:2rem;margin:0;color:var(--st-dark-pine);} .st-ds__scale > *{margin:0 0 .6rem;} .st-ds__scale h1{font-size:clamp(2.4rem,5vw,3.4rem);line-height:1.05;} .st-ds__lede{font-size:1.2rem;color:var(--st-mute);max-width:60ch;} .st-ds__small{font-size:.85rem;color:var(--st-mute);} .st-ds__btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:1rem;} .st-ds__btns--dark{background:var(--st-dark-pine);border-radius:14px;padding:1.25rem;} .st-ds__form{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:640px;} .st-ds__form .st-field--full,.st-ds__form .st-check{grid-column:1/-1;} .st-ds__radius{display:block;height:96px;background:var(--st-pine);} .st-ds__spacing{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.5rem;margin-top:1.5rem;} .st-ds__space{display:flex;flex-direction:column;align-items:center;gap:.4rem;} .st-ds__space span{display:block;background:var(--st-pine);border-radius:3px;} .st-ds__space em{font-style:normal;font-size:.78rem;color:var(--st-mute);} .st-ds__logo{display:flex;align-items:center;justify-content:center;height:120px;border-radius:14px;padding:1.5rem;border:1px solid rgba(30,51,51,.08);} .st-ds__logo img{max-width:180px;width:100%;height:auto;} @media(max-width:600px){.st-ds__form{grid-template-columns:1fr;}} /* ---- Profiles + Profile ---------------------------------------------------- * One grid, four text positions. The photo is first in the markup and the * position is expressed in CSS (column / column-reverse / row / row-reverse), * so a screen reader always meets the photo then the name, whichever way the * eye reads it. A profile's own text-position class sits after the section's * rules at the same specificity, so it wins without !important. */ .st-profiles{padding-block:var(--st-section);} .st-profiles--white{background:#fff;} .st-profiles--grey{background:var(--st-grey-50);} .st-profiles--dark{background:var(--st-dark-pine);} .st-profiles__title{margin:0 0 1rem;} .st-profiles__intro{margin:0 0 2.5rem;max-width:720px;color:var(--st-mute);font-size:1.125rem;line-height:1.55;} .st-profiles--dark .st-profiles__intro{color:rgba(255,255,255,.75);} .st-profiles__title + .st-profiles__grid{margin-top:2.25rem;} .st-profiles__intro + .st-profiles__grid{margin-top:0;} .st-profiles__grid{display:grid;gap:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2.4vw,2.25rem);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;} .st-profiles--photo-small{--st-pp:180px;} .st-profiles--photo-medium{--st-pp:300px;} .st-profiles--photo-large{--st-pp:440px;} .st-profile{display:flex;flex-direction:column;gap:1.1rem;min-width:0;} .st-profile--wide{grid-column:span 2;} .st-profile__photo{margin:0;flex:0 0 auto;width:min(100%,var(--st-pp,200px));aspect-ratio:1;overflow:hidden;background:var(--st-grey-100);} .st-profile__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%;} .st-profiles--square .st-profile__photo{border-radius:14px;} .st-profiles--portrait .st-profile__photo{border-radius:14px;aspect-ratio:4/5;} .st-profile__body{min-width:0;flex:1 1 auto;} .st-profile__name{margin:0;font-size:1.3rem;line-height:1.2;} .st-profile__role{margin:.3rem 0 0;font-family:var(--st-barlow);font-weight:500;font-size:1rem;letter-spacing:-.01em;color:var(--st-pine);} .st-profile__bio{margin:.75rem 0 0;font-size:.97rem;line-height:1.6;color:#41504f;} .st-profile__link{display:inline-block;margin-top:.85rem;font-family:var(--st-barlow);font-weight:600;color:var(--st-pine);text-decoration:none;} .st-profile__link:hover,.st-profile__link:focus-visible{text-decoration:underline;text-underline-offset:3px;} .st-profiles--dark .st-profile__name{color:#fff;} .st-profiles--dark .st-profile__role,.st-profiles--dark .st-profile__link{color:var(--st-euc);} .st-profiles--dark .st-profile__bio{color:rgba(255,255,255,.75);} .st-profiles--dark .st-profile__photo{background:rgba(255,255,255,.08);} /* Text position. "below" and "above" stack; "right" and "left" sit beside the photo. */ .st-profiles--text-below .st-profile{flex-direction:column;} .st-profiles--text-above .st-profile{flex-direction:column-reverse;} .st-profiles--text-right .st-profile{flex-direction:row;align-items:flex-start;gap:clamp(1rem,2vw,1.6rem);} .st-profiles--text-left .st-profile{flex-direction:row-reverse;align-items:flex-start;gap:clamp(1rem,2vw,1.6rem);} .st-profiles .st-profile--text-below{flex-direction:column;align-items:stretch;gap:1.1rem;} .st-profiles .st-profile--text-above{flex-direction:column-reverse;align-items:stretch;gap:1.1rem;} .st-profiles .st-profile--text-right{flex-direction:row;align-items:flex-start;gap:clamp(1rem,2vw,1.6rem);} .st-profiles .st-profile--text-left{flex-direction:row-reverse;align-items:flex-start;gap:clamp(1rem,2vw,1.6rem);} /* Beside the photo the photo keeps its size rather than shrinking to share the row. */ .st-profiles .st-profile--text-right .st-profile__photo,.st-profiles .st-profile--text-left .st-profile__photo, .st-profiles--text-right .st-profile__photo,.st-profiles--text-left .st-profile__photo{width:var(--st-pp,200px);max-width:45%;} .st-profiles .st-profile--text-below .st-profile__photo,.st-profiles .st-profile--text-above .st-profile__photo{width:min(100%,var(--st-pp,200px));max-width:none;} /* Centred text centres the stacked photo with it; beside the photo it only aligns the text. */ .st-profiles--align-center .st-profile__body{text-align:center;} .st-profiles--align-center .st-profile:is(.st-profile--text-below,.st-profile--text-above){align-items:center;} .st-profiles--align-center.st-profiles--text-below .st-profile:not([class*="st-profile--text-"]), .st-profiles--align-center.st-profiles--text-above .st-profile:not([class*="st-profile--text-"]){align-items:center;} @media(max-width:781px){ .st-profiles__grid{grid-template-columns:1fr;} .st-profile--wide{grid-column:auto;} } @media(max-width:560px){ .st-profiles .st-profile--text-right,.st-profiles .st-profile--text-left, .st-profiles--text-right .st-profile,.st-profiles--text-left .st-profile{flex-direction:column;} .st-profiles--text-right .st-profile__photo,.st-profiles--text-left .st-profile__photo, .st-profiles .st-profile--text-right .st-profile__photo,.st-profiles .st-profile--text-left .st-profile__photo{width:min(100%,var(--st-pp,200px));max-width:none;} } /* Grid layout: three columns on desktop. Text position and photo size work as in * the list; "fill" makes the photo as wide as its column (grid only). "Span two * columns" does not apply. */ .st-profiles--photo-fill{--st-pp:100%;} .st-profiles.st-profiles--layout-grid .st-profiles__grid{grid-template-columns:repeat(3,minmax(0,1fr));} .st-profiles.st-profiles--layout-grid .st-profile{grid-column:auto;} @media(max-width:1024px){.st-profiles.st-profiles--layout-grid .st-profiles__grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:640px){.st-profiles.st-profiles--layout-grid .st-profiles__grid{grid-template-columns:1fr;}} /* ---- Hero numbers ------------------------------------------------------- * Large figures with a caption under each. The figure is set in Barlow at a * weight the body face does not carry: at this size the difference between 600 * and 700 is the difference between a number and a statement. * * The colour is one custom property set by a modifier on the section, so the * five-way choice is written once rather than per element. * * The column count is not an author setting — it follows from how many of the * four slots are filled (data-n), which is what keeps every row the same length * at every width. Two figures sit on the four-column rhythm, spanning two each, * so they line up with the four-up case rather than drifting wider. */ .st-heronums{padding-block:var(--st-section);} .st-heronums--white{background:#fff;} .st-heronums--grey{background:var(--st-grey-50);} .st-heronums--dark{background:var(--st-dark-pine);} .st-heronums--num-red{--st-hn:var(--st-red);} .st-heronums--num-pine{--st-hn:var(--st-pine);} .st-heronums--num-eucalyptus{--st-hn:var(--st-euc);} .st-heronums--num-ink{--st-hn:var(--st-ink);} .st-heronums--num-white{--st-hn:#fff;} .st-heronums__title{margin:0;text-align:center;} .st-heronums__intro{margin:.75rem auto 0;max-width:62ch;text-align:center;color:var(--st-grey-600);} .st-heronums--dark .st-heronums__intro{color:rgba(255,255,255,.75);} .st-heronums__title + .st-heronums__grid, .st-heronums__intro + .st-heronums__grid{margin-top:clamp(2rem,4vw,3.25rem);} .st-heronums__grid{--st-hn-gap:clamp(1.5rem,3vw,2.5rem); display:grid;align-items:start; gap:clamp(2.25rem,4vw,3.5rem) var(--st-hn-gap);} /* Desktop */ .st-heronums__grid[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr));} .st-heronums__grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));} .st-heronums__grid[data-n="2"]{grid-template-columns:repeat(4,minmax(0,1fr));} .st-heronums__grid[data-n="2"] > .st-heronum{grid-column:span 2;} /* One figure is centred and held to a single three-up column, so it reads at the * same scale as it would with two others beside it. */ .st-heronums__grid[data-n="1"]{grid-template-columns:minmax(0,1fr);justify-items:center;} .st-heronums__grid[data-n="1"] > .st-heronum{width:100%; max-width:calc((100% - 2 * var(--st-hn-gap)) / 3);} /* The caption's 24ch cap is what a figure needs beside three others; on its own * it would shrink the box inside the column it is supposed to match, because * justify-items:center sizes a grid item to its content. */ .st-heronums__grid[data-n="1"] .st-heronum__l{max-width:none;} .st-heronum{display:flex;flex-direction:column;gap:.75rem;min-width:0;text-align:center;} .st-heronum__v{margin:0;font-family:var(--st-barlow);font-weight:700;line-height:1; font-size:clamp(2.25rem,4.4vw,3.5rem);letter-spacing:-.01em;color:var(--st-hn,var(--st-red)); font-variant-numeric:tabular-nums;} .st-heronum__l{margin:0;margin-inline:auto;max-width:24ch;font-family:var(--st-clear); font-size:.9375rem;line-height:1.45;color:var(--st-grey-600);} .st-heronums--dark .st-heronum__l{color:rgba(255,255,255,.78);} /* Tablet: the even counts halve, three stays three, one stays one. */ @media(max-width:900px){ .st-heronums__grid[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr));} .st-heronums__grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));} .st-heronums__grid[data-n="2"] > .st-heronum{grid-column:auto;} .st-heronums__grid[data-n="1"] > .st-heronum{max-width:min(100%,36ch);} } /* Phone: one per row for every count — two columns here would leave an odd * count with a single figure on the last row. */ @media(max-width:640px){ .st-heronums__grid[data-n="1"], .st-heronums__grid[data-n="2"], .st-heronums__grid[data-n="3"], .st-heronums__grid[data-n="4"]{grid-template-columns:minmax(0,1fr);} .st-heronums__grid[data-n="2"] > .st-heronum{grid-column:auto;} .st-heronums__grid[data-n="1"] > .st-heronum{max-width:none;} .st-heronums__grid[data-n="1"] .st-heronum__l{max-width:24ch;} }