/* Secretech Biosciences — base: fonts, tokens, global elements. */ /* Fonts, served from this site. * * They used to come from cdn.jsdelivr.net, which meant every visitor's IP * reached a third party before the page had asked for consent — and a banner * cannot fix that one: consent-gating the body typeface means showing an * unstyled site to anyone who declines. docs/tokens.md asked for self-hosting; * the implementation had drifted. * * Licences travel with the files, as both require: LICENSE-barlow.txt (OFL) and * LICENSE-clear-sans.txt (Apache-2.0), beside the woff2 in assets/fonts. * * Clear Sans has no 600. The theme declared one anyway, pointing at a URL that * has always returned 404, so every weight-600 run of body text — in an * article, among others — was a browser-synthesised faux bold off the 400 file. * Only the weights that exist are declared now; CSS weight matching resolves a * request for 600 upward to the real 700, which is what a bold should be. */ @font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Barlow';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2');} @font-face{font-family:'Clear Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/clear-sans-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Clear Sans';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/clear-sans-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Clear Sans';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/clear-sans-latin-700-normal.woff2') format('woff2');} /* The registered sign, borrowed from Barlow for Clear Sans text. * * The two faces draw U+00AE very differently: measured at the same size, Barlow's * is 43% of the font size — small and raised, the conventional treatment — while * Clear Sans draws it at 89%, full height on the baseline. So "Vesicode®" looked * like two different marks depending on whether it sat in a heading or in body * copy. Only ® diverges like this; ™ and © measure within 6% of each other, so * they are left alone. * * unicode-range does this without touching any markup, which matters because the * character is typed into block attributes by editors and rendered through * esc_html() — there is nothing to hook. These faces must stay *after* the * unrestricted ones above: both cover the codepoint, and the later declaration * wins. * * These mirror the weights that actually exist, and that is load-bearing. A 600 * was declared here at first, reasoning that weight-600 body text should take its * ® from Barlow 600. It broke the whole weight: an exact 600 match won the * family lookup, Clear Sans 700 was then never fetched at all, and every * weight-600 run fell back to a synthesised bold off the 400 file — the exact * fault this change set out to remove. Without it, 600 resolves to 700 for every * character, and the ® inside comes from the Barlow 700 face below. */ @font-face{font-family:'Clear Sans';font-weight:400;font-style:normal;font-display:swap;unicode-range:U+00AE;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Clear Sans';font-weight:500;font-style:normal;font-display:swap;unicode-range:U+00AE;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Clear Sans';font-weight:700;font-style:normal;font-display:swap;unicode-range:U+00AE;src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2');} :root{ --st-pine:#055757;--st-dark-pine:#1e3333;--st-black:#162727;--st-red:#df4a54;--st-red-ink:#c83f49; --st-euc:#bcdcbd;--st-grey:#edf0f2;--st-line:#dfe4e8;--st-white:#fff;--st-ink:#1e3333;--st-mute:#5a6a6a; /* Cool Grey scale (Figma brand tokens) */ --st-grey-50:#f2f4f4;--st-grey-100:#e3e6e6;--st-grey-200:#d0d4d4;--st-grey-600:#596968;--st-grey-900:#1e3333;--st-grey-1000:#111919; --st-grey-50-005:rgba(242,244,244,.05); /* Figma "Cool Grey/050 005" */ --st-barlow:'Barlow',system-ui,sans-serif;--st-clear:'Clear Sans','Barlow',system-ui,sans-serif; --st-pill:999px;--st-ease:cubic-bezier(0.16,1,0.3,1); /* Figma web sketches (node 144:4): the content column is 1320px inside a 96px * gutter at 1512, and 366px inside an 18px gutter at 402. The calc is the line * through those two anchors — 18px at 402vw, 96px at 1512vw — so both sketch * widths land on their drawn values and everything between scales smoothly. */ --st-maxw:1320px; --st-gutter:clamp(18px,calc(7.027vw - 10.25px),96px); /* Section padding: 96px above and below every module band at full width, * easing to 48px on a phone. Figma's rhythm (144:513) also wants 96px between * two adjacent light sections, which modules.css gets by halving this on each * side of that seam rather than by carrying a second, smaller token. * * 8vw, not the 6.35vw the old token used: that was the line through Figma's * 1512 artboard, so it only reached 96px on a screen at least that wide and a * 1440 laptop got 91px. This saturates at 1200px, so every desktop gets the * 96px, and still eases to the 48px floor on a phone. */ --st-section:clamp(48px,8vw,96px); --st-num:var(--st-red-ink); /* one accessible red for all ordinal/step numbers (AA on light) */ /* Sticky header inset: 32px into the hero at 1512, 18px at 402 (sketch 144:108 * / 174:1360). --st-admin-offset keeps the logged-in admin bar clear of it. */ --st-header-top:32px; --st-admin-offset:0px; /* Flow height of the header, used to pull a leading hero up behind it. These * are the sketch values; modules.js overwrites them with the measured height, * because the desktop nav wraps to two or three rows at mid widths and a * constant would leave the pill hanging off the hero's top edge. */ --st-headerh:80px; } /* WP publishes --wp-admin--admin-bar--height (32px, 46px under 782px) only while * the admin bar is rendered, so the 0px fallback covers logged-out visitors. * Under 600px WP switches the bar to position:absolute and it scrolls away — no * offset there, or the pinned header would float on a 46px gap. */ @media(min-width:601px){ :root{--st-admin-offset:var(--wp-admin--admin-bar--height,0px);} } @media(max-width:781px){ :root{--st-header-top:18px;--st-headerh:64px;} } body{font-family:var(--st-clear);color:var(--st-ink);background:var(--st-white);line-height:1.6;-webkit-font-smoothing:antialiased;} /* Figma sets every heading in Barlow SemiBold, not Bold. */ h1,h2,h3,h4{font-family:var(--st-barlow);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--st-ink);} /* Section heading — 40px at 1512 (149:848, 157:971), 24px at 402 (241:224). */ .st-h,.st-process__title,.st-compare__title{font-size:clamp(1.5rem,2.646vw,2.5rem);} .st-h{margin:0;} a{color:var(--st-pine);} /* Dark sections: keep section headings/lede legible */ .st-on-dark .st-h,.st-on-dark h1,.st-on-dark h2,.st-on-dark h3,.st-on-dark h4{color:#fff;} .st-on-dark .st-lede{color:rgba(255,255,255,.82);} /* No gap between top-level regions (header / main / footer) */ .wp-site-blocks > *{margin-block-start:0;margin-block-end:0;} .wp-site-blocks main{margin-block-start:0;} /* Module bands butt directly against each other — the editor's blockGap would otherwise open a strip of page background between two same-coloured bands. */ .st-full{margin-block:0!important;} ::selection{background:var(--st-pine);color:#fff;} :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--st-pine);outline-offset:3px;border-radius:3px;} html{scroll-behavior:smooth;} /* The wrap's box is gutter + 1320 + gutter, so its content column is exactly the * 1320px the sketches draw and every band lines up on the same two edges. * border-box is load-bearing: with the default content-box the max-width would * cap the content at 1320 + 2 gutters and the column would grow to 1512 on any * viewport wider than 1512 — drifting out of line with the header pill. */ .st-wrap{box-sizing:border-box;max-width:calc(var(--st-maxw) + 2 * var(--st-gutter));margin-inline:auto;padding-inline:var(--st-gutter);} /* The logo block. .st-logo was the class on the old core/image and the header's * layout rules still reach for it, so it stays. */ .st-logo{line-height:0;} .st-logo__link{display:inline-block;line-height:0;} .st-logo__img{display:block;width:100%;max-width:100%;height:auto;} /* Btn (144:122 / 144:70): 56px tall, 27px inline padding, pill, Barlow SemiBold 18/1.2, * 2px border. 48px / 16px on the 402 sketch (174:1257). */ /* Contact Form 7's submit is listed with .st-btn rather than restyled elsewhere, * so a form placed anywhere on the site gets the real button and cannot drift * from these values. It takes the primary look; there is no second CF7 style. */ .st-btn, .wpcf7-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--st-barlow);font-weight:600;font-size:1.125rem;line-height:1.2;letter-spacing:-.02em;border-radius:var(--st-pill);min-height:56px;padding:0 27px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s var(--st-ease),background .2s,color .2s;} @media(max-width:781px){.st-btn,.wpcf7-submit{min-height:48px;font-size:1rem;}} .st-btn:active,.wpcf7-submit:active{transform:translateY(1px);} .st-btn--primary,.wpcf7-submit{background:var(--st-pine);color:#fff;} .st-btn--primary:hover,.wpcf7-submit:hover{background:#04494a;color:#fff;} .st-btn--light{background:#fff;color:var(--st-dark-pine);} .st-btn--light:hover{background:var(--st-grey);color:var(--st-dark-pine);} /* On dark: 2px solid white over a 5% Cool Grey 50 wash, blurred. */ .st-btn--outline{background:var(--st-grey-50-005);color:#fff;border-color:#fff;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);} .st-btn--outline:hover{background:rgba(255,255,255,.16);color:#fff;} .st-btn--outline-dark{background:transparent;color:var(--st-dark-pine);border-color:var(--st-dark-pine);} .st-btn--outline-dark:hover{background:rgba(5,87,87,.08);color:var(--st-pine);border-color:var(--st-pine);} .st-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--st-ease),transform .7s var(--st-ease);} .st-reveal.is-in{opacity:1;transform:none;} body.privacy-policy .st-article__inner.st-reveal{opacity:1;transform:none;transition:none;} /* Form inputs (reusable) */ .st-input{font:inherit;color:var(--st-ink);background:#fff;border:1px solid var(--st-line);border-radius:12px;padding:.7rem 1rem;width:100%;transition:border-color .2s var(--st-ease),box-shadow .2s var(--st-ease);} .st-input::placeholder{color:var(--st-mute);} .st-input:focus-visible{outline:none;border-color:var(--st-pine);box-shadow:0 0 0 3px rgba(5,87,87,.12);} .st-field{display:flex;flex-direction:column;gap:.4rem;} .st-field > span{font-family:var(--st-barlow);font-weight:600;font-size:.9rem;color:var(--st-dark-pine);} .st-check{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--st-ink);} .st-check input{accent-color:var(--st-pine);width:1.05rem;height:1.05rem;} /* Site header / footer — logotype is 173x40 in the 1512 sketch, 139x32 at 402. The block markup carries an inline width, so height drives it and width yields. */ .st-siteheader img{height:40px;width:auto!important;max-width:none;} @media(max-width:781px){.st-siteheader img{height:32px;}} /* The footer is the secretech/site-footer module, so it sits on .st-wrap and inherits the same gutter + 1320 content column as every other band. */ /* ============================================================ Navigation — "the molecular network menu" Each item is a node: the pine→eucalyptus link draws itself in on approach; the current page keeps the single lit red node (echoing the one red node in the hero canvas). Frosted instrument-panel header that tightens as you scroll. ============================================================ */ /* Frosted, sticky instrument-panel header. WP wraps the header group in a template-part
that is only as tall as its content, so the sticky context must live on that wrapper — not the inner group, which would have no room to stick. */ /* Floating, rounded, sticky top bar. Sketch 144:108: the pill is the full 1320px content column, 32px down from the top, 80px tall, solid white with a 1px Cool Grey 100 hairline and a 24px radius. At 402 (174:1361) it is 18px in, 64px tall, 20px radius. No shadow and no frosted wash — the sketch has neither. */ .wp-site-blocks > .wp-block-template-part:has(> .st-siteheader){position:sticky;top:calc(var(--st-header-top) + var(--st-admin-offset));z-index:100;} .st-siteheader{ --st-bar-h:80px; max-width:var(--st-maxw);width:calc(100% - 2 * var(--st-gutter));margin-inline:auto; border:1px solid var(--st-grey-100)!important;border-radius:24px; box-sizing:border-box;min-height:var(--st-bar-h); padding:0 20px!important; } .st-siteheader.has-background{background:#fff!important;} /* The pill spans the whole content column, so its inner flex row must not be re-constrained to the narrower global contentSize. Its own min-height is the bar height less the 1px hairlines, so the border box lands on exactly 80px. */ .st-siteheader > .wp-block-group{max-width:none!important;width:100%;min-height:calc(var(--st-bar-h) - 2px);align-items:stretch!important;} .st-siteheader > .wp-block-group > .st-logo{align-self:center;} .st-siteheader .wp-block-navigation__responsive-container-open{align-self:center;} @media(max-width:781px){ .st-siteheader{--st-bar-h:64px;border-radius:20px;padding:0 16px!important;} } /* The hero runs edge to edge behind the bar (the sketch has the pill floating on the gradient), so pull a leading hero up by the height the bar takes in flow. */ /* !important because .st-full zeroes block margins on every band. */ .wp-site-blocks > .wp-block-template-part:has(> .st-siteheader) + main .st-hero:first-child{ margin-top:calc(-1 * var(--st-headerh))!important; } /* The logotype does not move on hover — the sketches give it no hover state. */ /* Top-level nav links — Barlow Medium 18/1.2, 12px padding, items 8px apart, and each item full-bar height so its marker rule lands on the pill's bottom edge (sketch 144:54). At 402 the single "Menu" item is 16px. */ /* Tighten the row: the nav container inherits theme.json's 1.2rem blockGap, which pushed the labels 51px apart. 8px here plus the 12px label padding on each side is the 32px the sketch draws (144:54 sits 8px from 144:124). */ .st-siteheader .wp-block-navigation{--navigation-layout-gutter:0;align-self:stretch;} .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container{gap:8px;} /* WP nests the nav behind four wrappers that are all content-height by default. Carry the bar height down every one of them so a nav item is as tall as the pill and its marker rule can sit on the pill's bottom edge. Skipped while the mobile overlay is open — there the container is a fixed full-screen dialog. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open){height:100%;} .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content,.wp-block-navigation__container){height:100%;align-items:stretch;} /* Item = the sketch's Btn (169:1203): full bar height, carrying the 2px bottom rule that marks the current page, and the 12px side padding of the label pill. Sketch 169:1210 puts the hover pill around the label AND its chevron, which WP renders as two sibling elements, so the pill is a pseudo-element on the item rather than a background on the link. Scoped to the closed desktop nav — the mobile overlay has its own treatment further down. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item{ position:relative;margin:0; display:flex;align-items:center;gap:4px; padding-inline:12px; border-bottom:2px solid transparent; } .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item::before{ content:"";position:absolute;z-index:0;inset-inline:0; top:50%;translate:0 -50%; /* label line box (18px x 1.2) plus the pill's 12px top and bottom padding */ height:calc(1.35rem + 24px); border-radius:8px;background:transparent; transition:background-color .2s var(--st-ease); } /* Hover / keyboard focus: the label sits on a Cool Grey 50 pill (169:1210). */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover::before, .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within::before{ background:var(--st-grey-50); } /* Current page: a solid 2px Primary/Red rule on the pill's bottom edge (169:1203). A submenu whose own child is the current page gets the same rule. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.current-menu-item,.current-menu-ancestor){ border-bottom-color:var(--st-red); } .st-siteheader .wp-block-navigation-item__content{ position:relative;z-index:1;display:inline-flex;align-items:center; font-family:var(--st-barlow);font-weight:500;font-size:1.125rem;letter-spacing:-.02em; color:var(--st-dark-pine); padding-block:12px;line-height:1.2; } .st-siteheader .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon{position:relative;z-index:1;} @media(max-width:781px){.st-siteheader .wp-block-navigation-item__content{font-size:1rem;}} /* Submenu chevron — rotates as its node opens */ .st-siteheader .wp-block-navigation__submenu-icon svg{transition:transform .3s var(--st-ease);} .st-siteheader .has-child:hover > .wp-block-navigation__submenu-icon svg, .st-siteheader .wp-block-navigation__submenu-icon[aria-expanded="true"] svg{transform:rotate(180deg);} /* Dropdown — a dark pine card of connected nodes */ .st-siteheader .wp-block-navigation__submenu-container{ background:var(--st-dark-pine)!important; border:1px solid rgba(188,220,189,.14)!important; border-radius:12px;padding:8px;min-width:224px;margin-top:12px; box-shadow:0 22px 48px -16px rgba(5,55,55,.55); } /* Invisible bridge across the 12px gap: the submenu is a DOM child of the
  • , so keeping the pointer over it (or this ::before) means the
  • never fires pointerleave — you can travel down into the dropdown without it closing. */ .st-siteheader .has-child > .wp-block-navigation__submenu-container::before{ content:"";position:absolute;left:0;right:0;top:-14px;height:16px; } /* A third level prints inside its parent's dropdown, indented, instead of flying out to the side — one panel to read rather than two to chase. WP builds it as an absolutely-positioned panel that is hidden until its own parent is hovered, so all of that has to come off: back into the flow, permanently visible, and stripped of the card chrome it inherits from the level-two container. Scoped to the closed desktop nav; the mobile overlay already nests in-flow. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ position:static;display:block;visibility:visible;opacity:1;transform:none; /* WP collapses a nested submenu with height:0 + overflow:hidden, not just * visibility — without both of these the items measure correctly and still * paint nothing. */ height:auto;overflow:visible; width:auto;min-width:0; /* No indent: every level in the panel shares one left edge, so the nested * items line up with their parent rather than stepping in from it. The * smaller, dimmer level-two label is what marks the grouping instead. */ margin:0;padding:0; background:transparent!important;border:0!important;box-shadow:none;border-radius:0; } /* A level-two item is a flex ROW (label beside its chevron). With the third level back in the flow it becomes another item in that row, landing beside the label in whatever width is left over. Stacking the item puts the nested list under its parent, which is the whole point. flex-start rather than stretch: stretching sizes the parent's own link to the item's min-content width, which the long nested labels drive past the panel edge — giving that link a hover highlight hanging outside the card. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .has-child{ flex-direction:column;align-items:flex-start; } /* The bar is right-justified, and that alignment reaches the nested list once it is back in the flow — which would push these labels to the panel's right edge instead of indenting them under their parent. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item{ align-items:flex-start;justify-content:flex-start;text-align:left; } .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ width:100%; } /* A panel carrying a third level needs more room: the indent plus labels like "Profiling Services Based on our Kits" wrap at the 224px a plain two-level dropdown gets, and a fixed floor just moves the problem — the nested items set the parent item's min-content width, which then overflows whatever floor is chosen. max-content lets the panel take exactly the width its longest line needs; the cap keeps a stray long label from running off the bar. Only panels that actually nest are affected. */ .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container:has(.wp-block-navigation__submenu-container){ width:max-content;max-width:min(420px,calc(100vw - 2 * var(--st-gutter))); } /* No gap to bridge and nothing to expand once the level is always open. */ .st-siteheader .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container::before{display:none;} .st-siteheader .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-icon{display:none;} .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item{margin:0;} .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ /* border-box or the 12px side padding lands outside the 100% width, pushing the * link 24px wider than its item — which shows as a hover highlight hanging off * the panel's edge. */ box-sizing:border-box; width:100%;color:rgba(255,255,255,.82);font-weight:500; padding:9px 12px;border-radius:8px; transition:background-color .2s var(--st-ease),color .2s var(--st-ease); } .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{display:none;} .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{ background:rgba(188,220,189,.1);color:#fff; } .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before, .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::before{opacity:1;transform:translateY(-50%) scale(1);} .st-siteheader .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content{color:#fff;} /* A menu item with no link is structure, not a control. Core renders it as an * with no href, which already refuses clicks and focus; these rules stop it * looking otherwise — no hover fill, no pointer, and no caret, since the level * below it is printed inline in the same panel and has nothing to toggle. */ .st-siteheader .wp-block-navigation-item__content:not([href]){cursor:default;} /* A grouping label inside a dropdown is set smaller and dimmer than the links it * heads, so the eye reads it as a heading rather than a destination it failed to * click. Dimmed to .55 rather than further: white at that opacity over the panel * still clears 5:1, and the label is real content, not decoration. */ /* The size goes on the inner label, not the link. Core pads a submenu link with * 0.5em 1em, so shrinking the link shrinks its padding too — which pulled the * label's text 5px left of every link in the panel. Sizing the span keeps the * link at 18px, and with it the padding that puts all the text on one edge. */ .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href]){ color:rgba(255,255,255,.55); } .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href]) .wp-block-navigation-item__label{ font-size:0.8125rem; } /* A little air above the label, so it reads as heading the items below it rather * than trailing the ones above. The 9px the row already carries plus 5. Not on * the first item in a panel: there the panel's own padding is the space, and * doubling it would push the whole list off its top edge. */ .st-siteheader .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(:first-child) > .wp-block-navigation-item__content:not([href]){ padding-top:14px; } .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href]):hover, .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href]):focus-visible{ background:none;color:rgba(255,255,255,.55); } /* Only inside a dropdown. A top-level item keeps its caret even with no link: * there the caret means "this opens a panel", which is still true. One level * down the panel below is printed inline, so the caret would promise nothing. */ .st-siteheader .wp-block-navigation__submenu-container .wp-block-navigation-submenu:has(> .wp-block-navigation-item__content:not([href])) > .wp-block-navigation__submenu-icon{display:none;} /* Mobile overlay — the network at full screen */ .wp-block-navigation__responsive-container.is-menu-open{ background:var(--st-dark-pine)!important; } /* Left-align the whole overlay (desktop nav is right-justified; that reads inconsistently once items stack, especially against indented submenus). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container,.wp-block-page-list,.wp-block-navigation-item,.wp-block-navigation__submenu-container){ align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ color:#fff;font-family:var(--st-barlow);font-weight:600;font-size:1.35rem;padding:10px 4px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{left:4px;right:auto;width:34px;bottom:2px;} .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ background:transparent!important;border:none!important;box-shadow:none;min-width:0;margin-top:2px; } /* Every level on one left edge, the same decision the desktop dropdown made. * Core indents each level 2rem, so a third level sat 64px in and ate the line * length the long labels need at 390px. Nothing is lost: the type already says * which level a row is — 21.6px semibold for a top-level item, 16.8px medium for * a link, 14px at 55% white for a grouping label. * * The selector is long because it has to be. Core indents with * * .wp-block-navigation__responsive-container.is-menu-open:where(:not(...)) * .wp-block-navigation__responsive-container-content * .has-child .wp-block-navigation__submenu-container * * which is five classes (:where() counts for nothing), declared after this * stylesheet. Mirroring it and prefixing .st-siteheader makes six, so this wins * on specificity rather than on !important. */ .st-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{ padding-left:0; /* The list also carries 8px underneath, which stacked on top of the label * padding below it: a group of level-3 links ended 42px from the next label * and 58px from the next top-level heading, where the same breaks elsewhere * are 34 and 50. The spacing after a group should not depend on how deep the * group was. */ padding-bottom:0; } /* The list's padding was only half of it: core also gives a submenu link * padding:0.5em 1em, and that 1em is 16.8px at the submenu's own font size. So * the boxes lined up while the text still sat 17px in — which is what the eye * reads. Measuring the anchor box instead of the text is how the desktop * dropdown looked fixed once before while still being indented. */ .st-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ padding-left:0; } /* A top-level item opens a group, so the break before it is wider than anything * inside one. This is the only spacing between top-level rows, so it reads as * the grouping rather than as loose line spacing. */ .st-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ /* 42, not 34: removing the submenu's bottom padding took 8px off every break * that follows a nested group, which is most of them, and the top-level * separation fell with it. This puts that back without returning the extra * air under a level-3 group. */ gap:42px; } /* A grouping label introduces the links beneath it, so it has to sit closer to * them than to whatever precedes it — otherwise it reads as a trailing note on * the row above. With the indent gone that spacing is the only thing saying * which links belong to it. * * It was the wrong way round: 26-34px above but 39px below, because the label's * own descender space and the link's padding stack up under it. Tightening the * line box and dropping the padding beneath closes that side; the padding above * stays well under the 50-58px that separates two top-level groups, so the three * levels of break stay distinguishable. */ .st-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href]){ padding-top:26px;padding-bottom:0; } .st-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href]) .wp-block-navigation-item__label{ line-height:1.2; } .st-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:not([href]) ~ .wp-block-navigation__submenu-container{ margin-top:0; } /* A label's children belong to it, so the first of them sits tighter than the * 30px a top-level heading gives its first link — that distance is what says the * links under a label are its own and not a continuation of the list above. */ /* `~`, not `+`: WP puts a