/* ============================================================================ NORTH PEPTIDES UK — "North Clinical" design system One stylesheet, one visual language, every page. Rules the whole system obeys: · Blue (#1F6FEB) is the ONLY saturated interactive colour. · Green is reserved for verification states, amber for stock/status. · DM Mono is the data voice: batch numbers, purity, prices, eyebrows, system messages. Never body prose. · Hairline borders over shadows. One badge per card. No urgency theatre. ========================================================================== */ /* Fonts are loaded once per page via the + preconnects in every ; no @import here (it would serialise the font CSS behind this stylesheet). */ /* ---------------------------------------------------------------- tokens */ :root { --ink: #0E1F38; /* headlines, dark bands, footer */ --ink-2: #132A46; /* raised surfaces on dark */ --ink-3: #1B3557; /* borders/hover on dark */ --action: #1F6FEB; /* the one saturated colour */ --action-deep: #174EA6; /* hover / pressed */ --action-tint: #EAF2FE; /* selected fills, quiet highlights */ --sky: #38BDF8; /* data accent on dark only */ --frost: #F5F9FC; /* page background */ --frost-2: #EDF3F9; /* alt sections, wells, input fills */ --paper: #FFFFFF; /* cards */ --line: #D5E2EE; /* hairlines (dividers, cards) */ --line-soft: #E3ECF4; /* subtle dividers */ --line-strong: #7B8FA8; /* form-field borders (3.3:1 on white) */ --body: #2A3B52; /* prose */ --muted: #5B6B7E; /* meta text */ --faint: #5F7189; /* placeholders, fine print (AA on paper/frost; use --muted on frost-2/action-tint) */ --hairline-ink: #8395A9; /* non-text art only: icon strokes, decorative rules — never text */ --verify: #0E9F6E; /* verification fills, dots, borders, large figures only */ --verify-text: #0A7A54; /* green TEXT and white-on-green badges (5.35:1) */ --verify-tint: #E7F6F0; --amber: #B45309; /* stock / status only */ --amber-tint: #FCF3E8; --danger: #C0392B; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'DM Mono', monospace; --font-wordmark: 'Syne', 'Space Grotesk', sans-serif; --r-card: 16px; --r-ctl: 11px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(14,31,56,.05); --shadow-2: 0 10px 30px rgba(14,31,56,.08); --shadow-lift: 0 16px 40px rgba(14,31,56,.12); --wrap: 1180px; --wrap-narrow: 860px; --ease: cubic-bezier(.2,.7,.2,1); } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--frost); color: var(--body); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--ink); letter-spacing: -0.015em; margin: 0; } p { margin: 0; } a { color: var(--action); text-decoration: none; } a:hover { color: var(--action-deep); } ::selection { background: rgba(31,111,235,.16); } :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { max-width: 100%; display: block; } /* Reduced motion: kill decorative movement, keep function */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* iOS Safari zooms the page on focus when a form control renders under 16px. Page-level rules are more specific, hence !important. */ @media (max-width: 768px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } } /* ---------------------------------------------------------------- a11y utilities */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--action); color: #fff; border-radius: var(--r-ctl); font: 500 .8rem var(--font-mono); letter-spacing: .06em; text-decoration: none; } .skip-link:focus { top: calc(var(--npbar-h, 36px) + 8px); color: #fff; } /* ---------------------------------------------------------------- text roles */ .np-eyebrow { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--action); } .np-mono { font-family: var(--font-mono); letter-spacing: .04em; } .np-muted { color: var(--muted); } .np-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; } @media (max-width: 768px) { .np-wrap { padding: 0 20px; } } /* ---------------------------------------------------------------- buttons */ .np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-ctl); padding: 14px 24px; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; } .np-btn-primary { background: var(--action); color: #fff; border: 1px solid var(--action); } .np-btn-primary:hover { background: var(--action-deep); border-color: var(--action-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); } .np-btn-primary:active { transform: none; } .np-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .np-btn-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--line); } .np-btn-secondary:hover { border-color: var(--action); color: var(--action); } .np-btn-ghost { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 10px 14px; } .np-btn-ghost:hover { color: var(--action); } .np-btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); } .np-btn-dark:hover { background: var(--ink-2); } /* ---------------------------------------------------------------- chips & badges */ .np-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper); color: var(--muted); white-space: nowrap; } .np-chip-verify { border-color: rgba(14,159,110,.35); background: var(--verify-tint); color: var(--verify-text); } .np-chip-action { border-color: rgba(31,111,235,.3); background: var(--action-tint); color: var(--action-deep); } .np-chip-amber { border-color: rgba(180,83,9,.3); background: var(--amber-tint); color: var(--amber); } .np-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ---------------------------------------------------------------- trust strip */ .np-trust-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; } .np-trust-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .np-trust-item svg { width: 14px; height: 14px; color: var(--action); flex-shrink: 0; } /* ---------------------------------------------------------------- section rhythm */ .np-section { padding: 88px 0; } .np-section-alt { background: var(--frost-2); } .np-section-dark { background: var(--ink); color: #B9C7DA; } .np-section-dark h2, .np-section-dark h3 { color: #fff; } @media (max-width: 768px) { .np-section { padding: 56px 0; } } .np-sec-head { max-width: 640px; margin-bottom: 44px; } .np-sec-head .np-eyebrow { display: block; margin-bottom: 12px; } .np-sec-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; } .np-sec-sub { margin-top: 14px; color: var(--muted); font-size: .98rem; } .np-section-dark .np-sec-sub { color: #8FA3BC; } /* ---------------------------------------------------------------- cards */ .np-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); } .np-card-hover { transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .np-card-hover:hover { border-color: #BFD3E6; box-shadow: var(--shadow-2); transform: translateY(-2px); } /* ---------------------------------------------------------------- forms */ .np-label { display: block; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .np-input, .np-select, .np-textarea { width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 13px 15px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); appearance: none; } .np-input::placeholder, .np-textarea::placeholder { color: var(--faint); } .np-input:focus-visible, .np-select:focus-visible, .np-textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-color: var(--action); box-shadow: 0 0 0 4px rgba(31,111,235,.18); } .np-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235B6B7E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; cursor: pointer; } .np-textarea { resize: vertical; min-height: 88px; } /* ---------------------------------------------------------------- tables */ .np-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .np-table th, .np-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); } .np-table th { font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .np-table tr:last-child th, .np-table tr:last-child td { border-bottom: none; } /* ============================================================================ SHARED CHROME — top bar handled by dispatch-bar.js (kept), nav, footer ========================================================================== */ /* Wordmark — the one place Syne survives */ .np-logo, .shop-nav-logo, .nav .logo, .logo { font-family: var(--font-wordmark); font-weight: 800; font-size: 1rem; letter-spacing: .08em; color: var(--ink); text-decoration: none; white-space: nowrap; } .np-logo span, .shop-nav-logo span, .nav .logo span, .logo span { color: var(--action); } /* --- Sub-page nav (.nav — product/blog/legal/lab/why-us pages) ----------- */ .nav { height: 62px; padding: 0 40px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; top: 0; z-index: 100; } .nav-links { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: var(--r-pill); transition: color .15s, background .15s; } .nav-links a:hover { color: var(--action); background: var(--action-tint); } /* Basket button shared across navs */ .nav-basket, .shop-basket-btn, .basket-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; border: 1px solid var(--ink); font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease); } .nav-basket:hover, .shop-basket-btn:hover, .basket-btn:hover { background: var(--action); border-color: var(--action); color: #fff; } .nav-basket-count, .shop-basket-count, .basket-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: #fff; color: var(--action-deep); font-size: .66rem; font-weight: 700; } @media (max-width: 768px) { .nav { padding: 0 16px; height: 58px; } .nav-links { display: none; } } /* On phones the sub-page header scrolls with the page instead of pinning — a sticky logo + search row costs too much viewport to carry everywhere. */ @media (max-width: 820px) { .nav { position: static; } } /* --- Footer (shared) ------------------------------------------------------ */ .np-footer, .footer, .footer-light { background: var(--ink); color: #8FA3BC; padding: 64px 40px 36px; font-size: .88rem; } .np-footer a, .footer a, .footer-light a { color: #B9C7DA; text-decoration: none; transition: color .15s; } .np-footer a:hover, .footer a:hover, .footer-light a:hover { color: var(--sky); } .np-footer-grid { max-width: var(--wrap); margin: 0 auto 44px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .np-footer-brand p { margin-top: 14px; max-width: 300px; line-height: 1.7; font-size: .84rem; } .np-footer-col h4 { font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #7B8FA8; margin: 0 0 16px; } .np-footer-col ul { list-style: none; margin: 0; padding: 0; } .np-footer-col li { margin-bottom: 10px; } .np-footer-bottom { max-width: var(--wrap); margin: 0 auto; border-top: 1px solid var(--ink-3); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: #7B8FA8; } .np-footer-ruo { max-width: var(--wrap); margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--ink-3); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; line-height: 1.7; color: #8FA3BC; } @media (max-width: 900px) { .np-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 560px) { .np-footer-grid { grid-template-columns: 1fr; } .np-footer-bottom { flex-direction: column; text-align: center; } } /* ============================================================================ BASKET DRAWER SUITE (basket.js contract: #basket-overlay, #basket-drawer, #basket-items, #basket-total, .basket-item*, .basket-ship-note...) ========================================================================== */ .basket-overlay { position: fixed; inset: 0; background: rgba(14,31,56,.44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 400; opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); } .basket-overlay.active { opacity: 1; pointer-events: all; } .basket-drawer { position: fixed; top: 0; right: -440px; width: 420px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--paper); z-index: 401; display: flex; flex-direction: column; visibility: hidden; /* out of the tab order while closed */ transition: right .32s var(--ease), visibility 0s .32s; border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(14,31,56,.14); } .basket-drawer.active { right: 0; visibility: visible; transition-delay: 0s; } #basket-view { display: flex; flex-direction: column; flex: 1; min-height: 0; } .basket-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; } .basket-header h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0; } .basket-close { color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 6px 10px; border-radius: 8px; transition: color .15s, background .15s; } .basket-close:hover { color: var(--ink); background: var(--frost-2); } .basket-items { flex: 1; overflow-y: auto; padding: 8px 24px; min-height: 0; } .basket-empty { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .06em; color: var(--muted); text-align: center; margin-top: 48px; } .basket-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); } .basket-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .basket-item-name { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--ink); } .basket-item-dose { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .basket-item-controls { display: flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: .8rem; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; } .basket-item-controls button { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .95rem; transition: background .15s, color .15s; } .basket-item-controls button:hover { background: var(--action-tint); color: var(--action); } .basket-item-controls span { min-width: 20px; text-align: center; } @media (max-width: 768px) { .basket-item-controls button { width: 44px; height: 44px; } } .basket-item-price { font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--ink); min-width: 48px; text-align: right; } .basket-item-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; color: var(--faint); font-size: .9rem; padding: 6px; border-radius: 6px; transition: color .15s; } .basket-item-remove:hover { color: var(--danger); } /* Free-delivery progress (renderShipNote) */ .basket-ship-note { font-size: .8rem; color: var(--muted); padding: 14px 0 6px; line-height: 1.5; } .basket-ship-note strong { color: var(--ink); } .basket-ship-note.unlocked { color: var(--verify-text); font-weight: 500; } .basket-ship-bar { height: 4px; background: var(--frost-2); border-radius: var(--r-pill); margin-top: 8px; overflow: hidden; } .basket-ship-bar span { display: block; height: 100%; background: var(--action); border-radius: var(--r-pill); transition: width .3s var(--ease); } .basket-footer { padding: 18px 24px 22px; border-top: 1px solid var(--line-soft); background: var(--frost); flex-shrink: 0; } .basket-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .basket-total-label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .basket-total-amount { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; color: var(--ink); } .basket-pay-note { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .btn-checkout { width: 100%; padding: 16px; background: var(--action); color: #fff; font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-ctl); transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .btn-checkout:hover { background: var(--action-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn-checkout:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 520px) { .basket-drawer { width: 100vw; right: -100vw; } } /* ------------------------------------------------- injected chrome (cookie UI) The settings control lives inside the footer in normal document flow. Keep it a text link at every width, including pages with sticky controls. */ #npuk-cookie-settings { position: static !important; inset: auto !important; z-index: auto !important; min-height: 44px !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: inherit !important; font: 500 .78rem var(--font-body) !important; letter-spacing: normal !important; text-transform: none; text-decoration: underline; text-underline-offset: 3px; box-shadow: none !important; } #npuk-cookie-settings:hover { color: var(--sky) !important; } #npuk-cookie-utility #npuk-cookie-settings:hover { color: var(--action) !important; } #npuk-cookie-settings[hidden], #npuk-cookie-utility[hidden] { display: none !important; } #npuk-cookie-banner { border: 1px solid var(--line) !important; border-radius: 4px !important; color: var(--ink) !important; font-family: var(--font-body) !important; } #npuk-cookie-banner button { border-radius: 3px !important; font: 600 .76rem var(--font-body) !important; } /* ---------------------------------------------------------------- toast */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 16px); background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; padding: 13px 22px; border-radius: var(--r-pill); box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 500; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast-name { color: var(--sky); }