/* ---------- header --------------------------------------------------- Ruba asked whether the header should be removed or redesigned. This is both: it hides on the way down and returns on the way up, so for most of the time you are reading, it is not there. Two states, one bar. Over the hero film it has no ground at all and the film reads straight through the blur. Past the hero it takes a white ground, because transparent-plus-blur over a light section is invisible. Pink is spent on one thing only - the Packages pill. Everything else inherits the bar's colour, which is what makes the pill readable as the single action rather than one more link. */ [data-fh-nav]{ position:fixed;inset-block-start:0;inset-inline:0;z-index:26; display:flex;align-items:center;justify-content:space-between;gap:24px; /* Scales with the viewport rather than sitting at one fixed height. 72px is right on a 13in laptop and undersized on a 27in monitor; the old header was ~120px with a 75px logo, which is what made this read as small next to it. */ block-size:clamp(72px,5.4vw,92px);padding-inline:clamp(20px,4vw,56px); opacity:1;pointer-events:auto; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-block-end:1px solid transparent; will-change:transform; transition:transform .32s cubic-bezier(.4,0,.2,1),background-color .3s ease,border-color .3s ease,color .3s ease; } /* Not bare transparent. Cream type needs a floor under it, and a hero is whatever the page happens to be showing - here a dark film, on staging a lab video with white walls in it. The scrim is the header carrying its own contrast rather than trusting the footage. */ [data-fh-nav][data-fh-navmode="over"]{background-color:transparent;color:#FAF6F2; background-image:linear-gradient(to bottom,rgba(12,8,10,.58),rgba(12,8,10,.22) 62%,rgba(12,8,10,0));} /* Opaque, not 88%. Translucent white over a warm page is not white - it picks up 12% of whatever is behind it and reads beige. The blur is only useful in the "over" state; behind an opaque ground it does nothing but cost a compositor layer. */ [data-fh-nav][data-fh-navmode="solid"]{background-color:#FFFFFF;color:#2B2B2B;border-block-end-color:rgba(18,8,12,.10);backdrop-filter:none;-webkit-backdrop-filter:none;} [data-fh-nav][data-fh-navhide="1"]{transform:translate3d(0,-100%,0);} /* The real lockup, not a typeset stand-in. Two-tone: the wordmark takes the bar's state, the droplet keeps the brand pink in both. Over the film the maroon would be invisible, so it goes cream there. */ [data-fh-nav] .fh-nav-logo{display:flex;align-items:center;text-decoration:none;} [data-fh-nav] .fh-nav-logo:focus-visible{outline:2px solid #F2537A;outline-offset:6px;border-radius:4px;} [data-fh-nav] .fh-nav-mark{block-size:clamp(40px,3.2vw,54px);inline-size:auto;display:block;} [data-fh-nav] .fh-nav-drop{fill:#DC4064;} [data-fh-nav] .fh-nav-word{transition:fill .3s ease;} [data-fh-nav][data-fh-navmode="over"] .fh-nav-word{fill:#FAF6F2;} [data-fh-nav][data-fh-navmode="solid"] .fh-nav-word{fill:#782039;} @media (max-width:560px){[data-fh-nav] .fh-nav-mark{block-size:32px;}} [data-fh-nav] .fh-nav-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);} [data-fh-nav] .fh-nav-links a{font-family:"Satoshi",system-ui,sans-serif;font-size:clamp(15px,1.06vw,17px);font-weight:500;color:inherit;text-decoration:none;white-space:nowrap;opacity:.82;transition:opacity .2s ease;} [data-fh-nav] .fh-nav-links a:hover{opacity:1;} [data-fh-nav] .fh-nav-links a:focus-visible{outline:2px solid #F2537A;outline-offset:4px;border-radius:3px;} /* a.fh-nav-cta, not .fh-nav-cta: the link rule above carries a type selector and would otherwise win the colour on specificity alone. */ [data-fh-nav] .fh-nav-links a.fh-nav-cta{opacity:1;color:#FFFFFF;background:#F2537A;font-weight:600;padding-block:clamp(10px,.78vw,13px);padding-inline:clamp(18px,1.4vw,24px);border-radius:999px;box-shadow:0 6px 22px -10px rgba(242,83,122,.9);transition:transform .2s ease,box-shadow .2s ease;} [data-fh-nav] .fh-nav-links a.fh-nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px -10px rgba(242,83,122,1);} [data-fh-nav] .fh-nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;inline-size:40px;block-size:40px;align-items:center;background:none;border:1px solid currentColor;border-radius:999px;opacity:.7;cursor:pointer;transition:opacity .2s ease;} [data-fh-nav] .fh-nav-burger:hover{opacity:1;} [data-fh-nav] .fh-nav-burger span{display:block;inline-size:16px;block-size:1.5px;background:currentColor;} @media (max-width:1000px){ [data-fh-nav] .fh-nav-links a:not(.fh-nav-cta){display:none;} [data-fh-nav] .fh-nav-burger{display:inline-flex;} } @media (max-width:560px){ [data-fh-nav]{block-size:64px;} [data-fh-nav] .fh-nav-cta{padding-inline:14px;font-size:14px;} } @media (prefers-reduced-motion: reduce){ [data-fh-nav]{transition:background-color .3s ease,color .3s ease;} [data-fh-nav][data-fh-navhide="1"]{transform:none;} } /* ---------- the globe, one screen ----------------------------------- Sized against the viewport HEIGHT, not just its width. A fixed 560px globe fits a tall window and overflows a short one; min(...,44vh) means the whole section - heading, globe, hint and readout - lands inside one screen on any laptop rather than only on mine. calc(80vh - 262px), not a flat fraction. Measured across seven window heights, everything around the globe - padding, eyebrow, heading, hint, readout - costs 0.064h + 249px. The globe gets the remainder, so the space left over is a near-constant ~15px at every size rather than swinging between 129px unused and 46px overflowing. The padding is asymmetric on purpose. A tight top keeps the heading near the section above; the bottom carries the gap to whatever follows. That gap is set to ~230px because that is what the site already uses between its own sections - measured on the live homepage, cards to the News heading - so this section keeps the page's existing rhythm rather than inventing its own. The globe formula pays for it. */ .fh-globe-wrap{width:max(300px,min(820px,calc(80vh - 262px),100%)) !important;margin-block-start:clamp(6px,1vh,14px) !important; margin-block-end:30px !important;} .fh-globe-read{margin-block-start:10px !important;} .fh-globe-read b{font-size:clamp(17px,1.55vw,21px) !important;} .fh-globe-read span{font-size:14.5px !important;} .fh-globe-hint{inset-block-end:-23px !important;} /* ---------- where you are, and where you are pointing ---------------- Ruba's call, 6 Sept: the brand pink marks the page you are on, and follows the pointer on the way there. So the pill stops being a standing call to action parked on Packages - every link can take it, one at a time, and only one ever has it. The links carry the padding all the time, so nothing shifts when the pill appears; the gap shrinks to pay for it. */ [data-fh-nav] .fh-nav-links{gap:clamp(2px,.55vw,10px);} [data-fh-nav] .fh-nav-links a{ padding-block:clamp(9px,.7vw,12px); padding-inline:clamp(13px,1.05vw,19px); border-radius:999px; transition:background-color .2s ease,color .2s ease,opacity .2s ease;} [data-fh-nav] .fh-nav-links a:hover, [data-fh-nav] .fh-nav-links a.fh-nav-here{ background:#F2537A;color:#FFFFFF;opacity:1;} /* The pill used to be Packages' own. It is now whichever link has it, so the standing treatment is undone - written after the rule it overrides, and at the same specificity. */ [data-fh-nav] .fh-nav-links a.fh-nav-cta{ background:transparent;color:inherit;font-weight:500;box-shadow:none; opacity:.82; padding-block:clamp(9px,.7vw,12px); padding-inline:clamp(13px,1.05vw,19px);} [data-fh-nav] .fh-nav-links a.fh-nav-cta:hover, [data-fh-nav] .fh-nav-links a.fh-nav-cta.fh-nav-here{ background:#F2537A;color:#FFFFFF;opacity:1; transform:none;box-shadow:none;} /* ---------- Regenerative medicine: a menu, as on the live site --------- The button wears exactly what a link wears - same face, padding and pill - so the bar reads as one row. The menu is a white card under it whatever the bar is doing (over a hero or solid), with the items in ink, because it sits over page content, not over the bar. */ [data-fh-nav] .fh-nav-dd{position:relative;} [data-fh-nav] .fh-nav-dd-btn{ display:inline-flex;align-items:center;gap:7px; font-family:"Satoshi",system-ui,sans-serif;font-size:clamp(15px,1.06vw,17px); font-weight:500;line-height:inherit;color:inherit;white-space:nowrap; background:transparent;border:0;cursor:pointer;opacity:.82; padding-block:clamp(9px,.7vw,12px);padding-inline:clamp(13px,1.05vw,19px); border-radius:999px; transition:background-color .2s ease,color .2s ease,opacity .2s ease;} [data-fh-nav] .fh-nav-dd-btn svg{transition:transform .25s ease;} [data-fh-nav] .fh-nav-dd:hover .fh-nav-dd-btn, [data-fh-nav] .fh-nav-dd.is-open .fh-nav-dd-btn, [data-fh-nav] .fh-nav-dd-btn.fh-nav-here{background:#F2537A;color:#FFFFFF;opacity:1;} [data-fh-nav] .fh-nav-dd:hover .fh-nav-dd-btn svg, [data-fh-nav] .fh-nav-dd.is-open .fh-nav-dd-btn svg{transform:rotate(180deg);} [data-fh-nav] .fh-nav-dd-btn:focus-visible{outline:2px solid #F2537A;outline-offset:4px;} /* the gap between button and card is bridged by padding, not margin, so the pointer can travel down into the menu without it closing */ [data-fh-nav] .fh-nav-dd-menu{ position:absolute;inset-block-start:100%;inset-inline-start:50%; translate:-50% 0;padding-block-start:10px;min-inline-size:300px;isolation:isolate; visibility:hidden;opacity:1;pointer-events:auto; transition:opacity .18s ease,visibility 0s linear .18s;} [data-fh-nav] .fh-nav-dd-menu::before{ content:"";position:absolute;inset:10px 0 0;z-index:-1;border-radius:22px; background:#FFFFFF;border:1px solid rgba(36,28,42,.10); box-shadow:0 22px 44px -22px rgba(36,28,42,.35);} [data-fh-nav] .fh-nav-dd:hover .fh-nav-dd-menu, [data-fh-nav] .fh-nav-dd.is-open .fh-nav-dd-menu, [data-fh-nav] .fh-nav-dd:focus-within .fh-nav-dd-menu{ visibility:visible;opacity:1;pointer-events:auto;transition:opacity .18s ease;} [data-fh-nav] .fh-nav-links .fh-nav-dd-menu a.fh-nav-dd-item{ display:block;margin:6px;padding:13px 16px;border-radius:14px; font-size:15.5px;font-weight:500;line-height:1.35;white-space:normal; color:#241C2A;opacity:1;background:transparent;} /* Each item keeps the colour it has on the live site's menu (read off live post-12.css, 16 Sept): Exosomes blue with white type, Adipose yellow with black type - on hover, and on the page it points at. */ [data-fh-nav] .fh-nav-links .fh-nav-dd-menu a.fh-nav-dd-item:hover, [data-fh-nav] .fh-nav-links .fh-nav-dd-menu a.fh-nav-dd-item.fh-nav-here{ background:#1758A7;color:#FFFFFF;} [data-fh-nav] .fh-nav-links .fh-nav-dd-menu a.fh-nav-dd-item.fh-nav-dd-adipose:hover, [data-fh-nav] .fh-nav-links .fh-nav-dd-menu a.fh-nav-dd-item.fh-nav-dd-adipose.fh-nav-here{ background:#FFCE07;color:#000000;} [data-fh-nav] .fh-nav-dd-menu a.fh-nav-dd-item:first-child{margin-block-start:16px;} [data-fh-nav] .fh-nav-dd-menu a.fh-nav-dd-item:last-child{margin-block-end:6px;} @media (max-width:1000px){ [data-fh-nav] .fh-nav-dd{display:none;} } /* ---------- the phone menu ------------------------------------------ Under 1000px the row of links is gone and the burger is the whole navigation, so it opens a real menu rather than putting the theme's old bar back - which was the placeholder, and read as two different sites in one. A full sheet, not a drawer off the side: on a phone there is nothing worth keeping visible behind it, and a sheet can hold the two Regenerative medicine pages as themselves instead of burying them in a second level. It starts below the bar, so the logo and the close never move - the burger becomes the X in place. The bar goes white while it is open. Over a hero it is in its cream "over" state, and cream type on a white sheet is nothing at all. */ [data-fh-nav] .fh-nav-burger span{ transition:transform .28s cubic-bezier(.4,0,.2,1);} [data-fh-nav] .fh-nav-burger[aria-expanded="true"]{opacity:1;} [data-fh-nav] .fh-nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg);} [data-fh-nav] .fh-nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg);} /* The live theme paints EVERY