opens above it. Both layers are absolutely positioned at the top of the document and pointer-transparent, so nothing here participates in layout. ========================================================================== */ .has-blue { position: relative; } /* Inner pages open on a shorter, lighter field; the home page goes deeper. */ .is-front { --blue-top: #04173a; } .has-blue::before, .has-blue::after { content: ""; position: absolute; top: 0; left: 0; right: 0; /* Script pins this to the hero's exact bottom; the clamp is the fallback. */ height: var(--blue-h, clamp(620px, 86vh, 900px)); z-index: 0; pointer-events: none; } /* Base field. The gradient lands on the paper colour itself — not on transparent — and gets there by 86%, comfortably above where the next section starts. The lineup band is opaque, so it covers the tail of this layer; if the tail were still blue at that point you would see a hard line. Landing on #f5f5f7 means there is nothing to see wherever the cut happens to fall. */ .has-blue::before { background: linear-gradient( 180deg, var(--blue-top, #0a2f6f) 0%, #0a3a86 22%, #0a51bd 48%, #0b6ee5 68%, #63a6e8 84%, #cbdcee 93%, /* Script sets --blue-land from the section that actually follows, so the final pixel is exactly the colour it meets. Document pages end on white and catalog pages on paper; one fixed colour left a step on whichever it did not match. The fallback covers the no-JS case. */ var(--blue-land, #ffffff) 100% ); } /* Drifting glow. Three soft lobes on a very slow, offset loop — the movement should be felt rather than watched. */ .has-blue::after { background: radial-gradient(46% 40% at 22% 24%, rgba(90, 190, 255, 0.42) 0%, transparent 68%), radial-gradient(40% 36% at 78% 34%, rgba(128, 96, 255, 0.34) 0%, transparent 70%), radial-gradient(52% 44% at 52% 78%, rgba(0, 224, 255, 0.26) 0%, transparent 72%); filter: blur(14px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 84%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 84%); will-change: transform; } @keyframes aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1.04); } 33% { transform: translate3d(4%, 3%, 0) scale(1.16); } 66% { transform: translate3d(-2%, 4%, 0) scale(1.06); } 100% { transform: translate3d(-3%, -2%, 0) scale(1.04); } } .js .has-blue::after { animation: aurora 26s ease-in-out infinite; } /* Ribbon, header and hero all sit on the field ------------------------------ */ .has-blue .ruo, .has-blue .nav, .has-blue main { position: relative; z-index: 1; } .has-blue .ruo { background: transparent; color: rgba(255, 255, 255, 0.72); } /* Header is invisible over the field, and becomes itself once you scroll past. */ .has-blue .nav:not(.solid) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .has-blue .nav:not(.solid) .brand span, .has-blue .nav:not(.solid) .nav__links a, .has-blue .nav:not(.solid) .ico { color: #fff; } .has-blue .nav:not(.solid) .brand em { color: rgba(255, 255, 255, 0.66); } .has-blue .nav:not(.solid) .nav__links a:hover, .has-blue .nav:not(.solid) .nav__links a[aria-current="page"], .has-blue .nav:not(.solid) .ico:hover { background: rgba(255, 255, 255, 0.16); } .has-blue .nav:not(.solid) .burger span, .has-blue .nav:not(.solid) .burger span::before, .has-blue .nav:not(.solid) .burger span::after { background: #fff; } /* Hero type on the field ----------------------------------------------------- */ .is-front .hero { color: #fff; } .is-front .hero .d1 { color: #fff; /* A whisper of shadow keeps the headline crisp where a glow lobe passes behind it, without reading as a drop shadow. */ text-shadow: 0 2px 40px rgba(3, 18, 48, 0.35); } .is-front .hero .lede { color: rgba(255, 255, 255, 0.82); } .is-front .hero .btn--blue { background: #fff; color: #0a2a66; } .is-front .hero .btn--blue:hover { background: rgba(255, 255, 255, 0.9); } .is-front .hero .btn--wire { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .is-front .hero .btn--wire:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.65); } /* Peptide on blue ------------------------------------------------------------ Luminous rather than faint: white strokes with a soft bloom, nodes that pulse along the chain, and a bright signal running the backbone. -------------------------------------------------------------------------- */ .is-front .hero__pep { /* Fades on all four edges over the blue, so the chain passes through the frame rather than stopping at it. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); mask-composite: intersect; } .is-front .pep__g { stroke: rgba(255, 255, 255, 0.9); --pep-op: 0.3; filter: drop-shadow(0 0 10px rgba(140, 205, 255, 0.75)) drop-shadow(0 0 26px rgba(60, 150, 255, 0.35)); } .is-front .pep__o, .is-front .pep__r, .is-front .pep__a { fill: #0a3f8f; } /* The signal. A short bright dash chasing the backbone, forever. */ .pep__flow { display: none; } .is-front .pep__flow { display: block; opacity: 0; /* Its own level, far above the structure it runs along. */ --pep-op: 0.62; stroke: #dff0ff; stroke-width: 3.6; stroke-linecap: round; fill: none; /* Two dashes on the ~5200-unit path, so a glint is almost always somewhere on screen rather than appearing once every seven seconds. */ stroke-dasharray: 110 2490; filter: drop-shadow(0 0 5px rgba(235, 248, 255, 0.85)) drop-shadow(0 0 14px rgba(170, 220, 255, 0.6)) drop-shadow(0 0 30px rgba(100, 185, 255, 0.4)); } @keyframes pep-signal { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } } .js .is-front .pep__flow { animation: pep-signal 6s linear 1.2s infinite backwards, pep-in 0.8s var(--ease) 1.2s both; } /* Nodes brighten in sequence, so the chain reads as active rather than static. */ @keyframes pep-pulse { 0%, 72%, 100% { opacity: 0.55; r: 5; } 80% { opacity: 1; r: 7; } } .js .is-front .pep__a { animation: pep-in 0.9s var(--ease) 0.55s both, pep-pulse 7s ease-in-out calc(1.7s + var(--n) * 0.28s) infinite; } /* The carbonyl oxygens and side-chain nodes ripple on the same travelling stagger. They only brighten - no radius change - because they are drawn at two different radii and a shared r keyframe would resize one of them. */ @keyframes pep-glim { 0%, 76%, 100% { opacity: var(--pep-op); } 84% { opacity: calc(var(--pep-op) * 2.2); } } .js .is-front .pep__o, .js .is-front .pep__r { animation: pep-in 0.9s var(--ease) 0.55s both, pep-glim 7s ease-in-out calc(1.9s + var(--n) * 0.28s) infinite; } /* Below 700px the field is shorter, so the chain sits higher in it. */ @media (max-width: 700px) { /* No --blue-h override here any more. This used to force clamp(560px, 78vh, 720px). The script measures the hero and sets --blue-h from it, and the ::before that paints the gradient is sized from the same value, so overriding one and not the other pulled them apart: on an 844px screen the gradient was painted 658px tall under a hero ending at 671px, and the blue stopped dead 13px early instead of fading out. Desktop had no override, which is why the fade was smooth there and abrupt on a phone. */ .is-front .pep__g { --pep-op: 0.26; } } @media (prefers-reduced-motion: reduce) { .js .is-front::after, .js .is-front .pep__flow, .js .is-front .pep__o, .js .is-front .pep__r, .js .is-front .pep__a { animation: none !important; } /* The signal is motion by definition; without it, hide it rather than leave a stray dash sitting on the backbone. */ .is-front .pep__flow { display: none; } } /* ===================== WOOCOMMERCE COMPATIBILITY ========================= WooCommerce ships its own stylesheet and it is enqueued alongside this one. Its image rules are written for square catalogue photography and assume a product image should fill its container. These vials are 742x1100 portrait cutouts, so left alone they get stretched to the column width. Everything here is a geometry correction. No colour, no type - those come from the design system above. ========================================================================== */ /* --- Catalogue tiles ----------------------------------------------------- */ /* Restated with .woocommerce in front so it outranks the plugin stylesheet regardless of enqueue order. object-fit is the load-bearing property: it keeps the vial's aspect inside a box whose shape is set by the tile. */ .woocommerce .pc__fig img, .woocommerce-page .pc__fig img, .pc__fig img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; max-width: none; } /* WooCommerce renders the loop as ul.products > li.product. The theme's card is the product element itself, so the list wrapper has to stop looking like a list and start behaving like the design's grid. */ .woocommerce ul.products, ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1.1rem, 2.2vw, 1.9rem); margin: 0; padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } .woocommerce ul.products li.product, ul.products li.product { width: auto; margin: 0; float: none; clear: none; } /* --- Single product ------------------------------------------------------ */ /* .product__media had no rules at all, which is what let the vial stretch. */ .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; } .product__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-tile); overflow: hidden; background: linear-gradient(168deg, #fbfdff 0%, #dfeaf8 55%, #cfe0f4 100%); } .product__media img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; max-width: none; } /* WooCommerce wraps the gallery in its own divs and gives them inline widths. */ .product__media .woocommerce-product-gallery, .product__media .woocommerce-product-gallery__wrapper, .product__media figure { position: static; width: 100% !important; margin: 0; } .product__media .flex-viewport { position: static; } /* The thumbnail strip is noise for a single-image product. */ .product__media .flex-control-thumbs { display: none; } @media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); } } /* --- Notices and buttons ------------------------------------------------- */ /* WooCommerce's default button is a grey pill that ignores the design. */ .woocommerce .summary button.button, .woocommerce .summary a.button, .woocommerce .summary .single_add_to_cart_button { border-radius: 999px; padding: 0.85rem 1.6rem; font-weight: 560; background: var(--blue); color: var(--white); } .woocommerce .summary .price { font-family: var(--display); font-size: var(--t-h3); font-weight: 620; color: var(--fg); } /* --- --blue-h fallback ----------------------------------------------------- --blue-h is measured by the script from the page's .hero or .phead. A page with neither used to inherit whatever height the gradient defaulted to, and painted a blue field over content styled for a light ground: the cart and account pages rendered their text black on blue. Defaulting to zero makes the failure mode safe. No anchor, no field, and the page simply renders on paper as its content expects. */ :root { --blue-h: 0px; } /* ===================== WOOCOMMERCE PAGES ================================= Cart, checkout and account keep WooCommerce's markup and logic — that is where the money is handled and it should stay their tested code. These rules only bring the typography, colour and spacing in line so the pages do not read as a different website. ========================================================================== */ .woocommerce-page .band .wrap { max-width: var(--w-tight, 62rem); } /* Tables: the cart and order summary. */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: var(--t-sm); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); color: var(--fg); text-align: left; } .woocommerce table.shop_table th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-mute); background: var(--sunk, #f6f8fa); } .woocommerce table.shop_table img { width: 56px; height: auto; border-radius: 8px; } /* Form fields, matching the contact form. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page input.input-text { width: 100%; min-height: 44px; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--fg); font: inherit; } .woocommerce form .form-row label, .woocommerce-page label { color: var(--fg); font-size: var(--t-sm); } .woocommerce form .form-row input.input-text:focus, .woocommerce-page input.input-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 110, 229, 0.16); } /* Buttons. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.7rem 1.5rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font-weight: 560; font-size: var(--t-sm); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--blue-dark, #0a51bd); color: var(--white); } .woocommerce .button.alt { background: var(--blue); } /* Notices. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px; background: var(--sunk, #f6f8fa); color: var(--fg); font-size: var(--t-sm); list-style: none; } .woocommerce-error { border-left-color: #b3261e; } /* Account navigation. */ .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .woocommerce-MyAccount-navigation a { display: inline-block; padding: 0.5rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font-size: var(--t-sm); } .woocommerce-MyAccount-navigation .is-active a { background: var(--blue); border-color: var(--blue); color: var(--white); } @media (max-width: 700px) { .woocommerce table.shop_table th { display: none; } .woocommerce table.shop_table td { display: block; border-bottom: 0; padding: 0.45rem 1rem; } .woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--line); padding-block: 0.6rem; } } /* ===================== MOBILE PROPORTIONS ================================ The phone layout was correct but not proportional to the desktop one: desktop mobile (before) hero / viewport 632/900 70% 444/844 53% headline / hero 102/632 16% 47/444 11% The hero sat lower on the screen and its headline was smaller within it, so the page read as a narrow version of the design rather than the same design on a phone. The limit is the longest word. "Documented." is eleven characters, and at 353px of usable width it stops fitting at around 58px, so the desktop's 16% ratio cannot be reached on a 390px screen without hyphenating. This takes it as far as the type allows. ========================================================================== */ @media (max-width: 700px) { /* svh, not vh: on iOS vh counts the area behind the browser chrome, so a vh-sized hero is taller than the visible screen and the buttons start below the fold. */ .hero { display: grid; align-content: center; /* The hero takes the whole first screen, so nothing of the section below shows before you scroll. 68svh left 128-217px of the catalogue peeking depending on the phone. --hdr-h is measured rather than assumed: the ribbon above the header wraps to two lines at 390px and one at 430px, so the space to subtract is 97px on one and 82px on the other. The fallback matches the taller case, so the hero is never short if the script has not run yet. */ min-height: calc(100svh - var(--hdr-h, 97px)); /* Even padding. The three blocks inside distribute themselves down the hero, so there is no pooled space to push around from out here. */ padding-block: clamp(1.6rem, 5vw, 2.4rem); align-content: stretch; } /* Up from 47px. Held just under the point where the longest word wraps. */ /* "Performance." is the longest word and it sets the ceiling. With text-wrap: balance the heading shrink-wraps, so the measurement that matters is the widest line against the container, not against the heading's own box: 430px widest 331 of 393 available 62px spare 390px widest 314 of 353 39px spare 360px widest 302 of 323 21px spare 320px widest 285 of 285 0px spare Only the smallest phones are actually tight, so they are handled separately below rather than by shrinking every size. */ .hero__title { font-size: clamp(3rem, 1.9rem + 6vw, 3.6rem); } /* The supporting line and the buttons grow with it, or the headline starts to look detached from what follows it. */ .hero__lede { font-size: 1.12rem; line-height: 1.5; } .hero .acts { gap: 0.7rem; } .hero .btn { min-height: 50px; padding-inline: 1.35rem; font-size: 1rem; } /* Section headings carry the same relationship to the hero as on desktop. */ .band .d2 { font-size: clamp(2.35rem, 1.6rem + 3.4vw, 2.9rem); } } /* ===================== MOBILE CATALOGUE AND QUICK VIEW =================== Two columns on a phone, and a quick view that fits on the screen. ========================================================================== */ @media (max-width: 700px) { /* One tile per screen means three quarters of the viewport per product and 38 screens to reach the end of the catalogue. Two columns is the normal phone storefront pattern and puts about three times as many in view. */ .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } /* The tile is half as wide now, so its text has to come down with it or every product name wraps to three lines. */ .pc__n { font-size: 1rem; line-height: 1.2; } .pc__m, .pc__doc { font-size: 0.72rem; } .pc__price { font-size: 0.95rem; } /* The long disclaimer does not survive a 160px column, and it is repeated verbatim in the quick view and on the product itself. */ .pc__note { display: none; } .pc__code { top: 0.55rem; left: 0.6rem; font-size: 0.62rem; } .pc__dots { transform: scale(0.85); transform-origin: left center; } /* Quick view. The figure was 1:1 — a full 390px of image before a word of text, which pushed the price and Add to cart below the fold. Sizing it against the screen instead of its own width leaves room for the detail. */ .qv { align-items: flex-end; } .qv__card { max-height: 94dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; } .qv__fig { aspect-ratio: auto; height: 30dvh; /* 34dvh left the card 27px taller than the screen */ min-height: 190px; border-radius: var(--r-xl) var(--r-xl) 0 0; } .qv__body { padding: 1.1rem 1.15rem 1.4rem; } .qv__n { font-size: 1.18rem; } .qv__price { margin-top: 0.35rem; font-size: 1.15rem; } .qv__spec { margin-top: 0.7rem; font-size: 0.8rem; } .qv__spec > div { padding-block: 0.36rem; } .qv__buy { margin-top: 0.9rem; } .qv__note { margin-top: 0.7rem; font-size: 0.7rem; line-height: 1.45; } .qv__cat { font-size: 0.65rem; } .qv__code { font-size: 0.62rem; top: 0.7rem; left: 0.8rem; } .qv__x { width: 34px; height: 34px; top: 0.7rem; right: 0.7rem; } } /* Very narrow phones cannot carry two columns without the vial becoming a thumbnail, so they keep the single column. */ @media (max-width: 359px) { /* At 320px the headline had no room left at all. This is the only width that needs it, so the rest of the range keeps its size. */ .hero__title { font-size: clamp(2.6rem, 1.5rem + 6.2vw, 2.95rem); } .grid { grid-template-columns: minmax(0, 1fr); } .pc__note { display: block; } } /* ===================== MEMBERSHIP CALL TO ACTION ========================= The one place on the site with a deliberately loud control. It closes the home page on a dark band, so the glow is a halo behind the button rather than a shadow under it — a shadow would disappear against the dark ground. The halo is a separate ::before that is blurred and scaled, so the button's own edge stays crisp; blurring the element itself would soften the label. ========================================================================== */ .acts--solo { margin-bottom: 1.6rem; } .btn--glow { position: relative; isolation: isolate; padding: 1rem 2rem; border: 0; border-radius: 999px; background: linear-gradient(120deg, #0b6ee5 0%, #3f8ff0 52%, #0a51bd 100%); color: var(--white); font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em; } .btn--glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; filter: blur(17px); opacity: 0.55; transform: scale(1.04); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .btn--glow:hover { color: var(--white); } .btn--glow:hover::before { opacity: 0.85; transform: scale(1.1); } .btn--glow:active { transform: scale(0.985); } .btn--glow:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } /* The single loudest control on the site, closing the home page. */ .btn--xl { padding: 1.35rem 3rem; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); font-weight: 620; letter-spacing: -0.012em; } .btn--xl svg { width: 18px; height: 18px; } /* A slow breath, so it reads as lit rather than as a flashing advert. */ @keyframes glow-breathe { 0%, 100% { opacity: 0.45; transform: scale(1.03); } 50% { opacity: 0.8; transform: scale(1.09); } } .js .btn--glow::before { animation: glow-breathe 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .js .btn--glow::before { animation: none; } .btn--glow::before, .btn--glow:hover::before { transition: none; } } @media (max-width: 700px) { .btn--glow { width: 100%; justify-content: center; padding-inline: 1.2rem; } .acts--solo { margin-bottom: 1.1rem; } } /* ========================== SITEWIDE SALE POP-UP ========================== A real modal: fixed layer, dimmed backdrop, its own scroll if the card is taller than a short window. It is hidden by default and shown by script rather than the other way round, because the age gate is also a modal and gets to go first. Two stacked dialogs is the failure mode this ordering exists to avoid. The glow is a blurred copy of the card behind itself, not a shadow — on a dark blue card a shadow is invisible, where a halo reads as lit. ========================================================================= */ .promo { position: fixed; inset: 0; z-index: 220; display: grid; justify-items: center; /* safe: a card taller than the window would otherwise centre itself with its top above the scroll origin, where it cannot be reached. */ align-content: safe center; padding: clamp(1rem, 4vw, 2rem); /* The overlay scrolls, never the card. Scrolling the card made a scroll container of it, which forced the other axis to auto as well, and the halo — a ::before scaled past the card's box on purpose — tripped the horizontal bar. Two bars then drew inside the rounded rectangle and squared off two corners. */ overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: rgba(6, 20, 44, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s; } .promo[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; } .promo__card { position: relative; isolation: isolate; width: min(420px, 100%); /* No max-height and no overflow: the overlay above handles a window too short for the card, and any overflow context here clips the halo and grows scrollbars inside the rounded corners. */ padding: clamp(1.9rem, 5vw, 2.6rem) clamp(1.5rem, 5vw, 2.2rem) clamp(1.5rem, 4vw, 1.9rem); border-radius: var(--r-xl); background: linear-gradient(157deg, #0a51bd 0%, #0b6ee5 42%, #063a8f 100%); color: var(--white); text-align: center; transform: translateY(14px) scale(0.97); transition: transform 0.45s var(--spring); } .promo[data-open="true"] .promo__card { transform: none; } .promo__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; filter: blur(26px); opacity: 0.5; transform: scale(1.04); } .promo__pct { font-family: var(--display); font-size: clamp(3.4rem, 2.4rem + 4vw, 4.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.94; font-variant-numeric: tabular-nums; } .promo__pct span { font-size: 0.34em; font-weight: 560; letter-spacing: -0.01em; margin-left: 0.15em; } .promo__h { margin-top: 0.7rem; font-size: var(--t-h3); font-weight: 620; letter-spacing: -0.022em; line-height: 1.24; text-wrap: balance; } .promo__sub { margin-top: 0.5rem; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.78); } .promo__code { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-top: 1.3rem; padding: 0.6rem 1.15rem; border: 1px dashed rgba(255, 255, 255, 0.6); border-radius: 999px; background: rgba(255, 255, 255, 0.13); color: var(--white); font-family: var(--mono); font-size: var(--t-base); font-weight: 640; letter-spacing: 0.1em; cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .promo__code:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--white); } .promo__code small { font-family: var(--sans); font-size: var(--t-micro); font-weight: 450; letter-spacing: 0.02em; opacity: 0.72; } .promo__code[data-copied] small { opacity: 1; } .promo__go { margin-top: 1.3rem; width: 100%; justify-content: center; } .promo__ruo { margin-top: 1.1rem; font-size: var(--t-micro); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .promo__x { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: rgba(255, 255, 255, 0.72); transition: background 0.25s var(--ease), color 0.25s var(--ease); } .promo__x:hover { background: rgba(255, 255, 255, 0.18); color: var(--white); } .promo__x:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } /* A slow breath, so it reads as lit rather than as a flashing advert. */ @keyframes promo-breathe { 0%, 100% { opacity: 0.4; transform: scale(1.03); } 50% { opacity: 0.72; transform: scale(1.07); } } .js .promo[data-open="true"] .promo__card::before { animation: promo-breathe 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .js .promo .promo__card::before { animation: none; } .promo, .promo__card { transition: none; } }