/* ============================================================================ SANGON IDENTITY — "VERMILLION REGISTER" Sangon Biotech (Shanghai) Co., Ltd. — brand SGN Loaded LAST: this file owns the visual identity. Concept: a Shanghai pharmaceutical house documented like an official certificate / batch register, stamped with the red company seal (chop). Warm bone paper, saturated brick-red lacquer, warm brown-ink. Swiss-clinical grotesque type (Archivo / Public Sans / JetBrains Mono). Crisp printed corners. Re-themes every page by overriding the base design tokens, then restyles the shared shop components and patches the template's leftover green hexes. ============================================================================ */ :root { /* --- Brick-red lacquer ramp (was jade green) --- */ --primary: #c0392b; --primary-dark: #a42c20; --primary-darker: #7e2016; --primary-light: #e06a58; /* lifted from #d65a4a: it is the accent on the INK ledger/footer, where it read 4.4:1 */ --primary-lighter: #ecb4ab; --primary-50: #fbf0ed; /* Lightened from #f4dbd4: it is the DARKEST stop of the /reports + /reports/:catNo hero gradients, where it dropped body copy to 4.39:1 and links to 4.13:1. */ --primary-100: #fae9e6; /* Success stays green (order-confirmed semantics), but muted to fit warm palette */ --secondary-green: #3f7d54; --success-green: #3f7d54; --warning-yellow: #b07d12; --error-red: #b3382c; --accent-navy: #241512; /* legacy name — now warm seal-ink for dark chips */ /* --- Warm bone / brown-ink neutrals --- */ --white: #fffdf9; --paper: #f7f3ec; --porcelain: #fffdf9; --gray-50: #f3ede2; --gray-100: #ebe3d5; --gray-200: #ddd0bd; /* warm clay border */ --gray-300: #cabca6; --gray-400: #736752; /* AA-safe muted label ink (was #9c8e79 — 2.7:1 on the bone panels) */ --gray-500: #6f6454; --gray-600: #554b3e; --gray-700: #40382d; --gray-800: #2b251d; --gray-900: #211b14; --ink: #211b14; --border-subtle: rgba(33, 27, 20, 0.09); --border-default: rgba(33, 27, 20, 0.16); --hairline: 1px solid rgba(33, 27, 20, 0.12); --surface-elevated: #fffdf9; --surface-sunken: #efe8db; --grid-line: rgba(126, 32, 22, 0.045); /* --- Type: grotesque display / clinical sans / technical mono --- */ --font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Archivo', 'Public Sans', 'Songti SC', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* --- Crisp printed-document corners --- */ --radius-sm: 0; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; /* --- Warm ink shadows, red glow accent --- */ --shadow-sm: 0 1px 2px rgba(60, 32, 24, 0.06); --shadow-md: 0 1px 2px rgba(60, 32, 24, 0.05), 0 6px 16px -8px rgba(60, 32, 24, 0.14); --shadow-lg: 0 2px 4px rgba(60, 32, 24, 0.05), 0 14px 30px -12px rgba(60, 32, 24, 0.2); --shadow-xl: 0 4px 10px rgba(60, 32, 24, 0.06), 0 26px 52px -18px rgba(60, 32, 24, 0.26); --shadow-jade: 0 8px 20px -8px rgba(192, 57, 43, 0.36); /* Seal / register specifics */ --seal: #c0392b; --register-rule: rgba(126, 32, 22, 0.55); } /* === BASE ================================================================ */ /* The faint register grid lives on the ROOT (canvas), not on . A gradient on becomes the "effective background" of every element whose own ancestors are transparent — its dark colour-stop (rgba(126,32,22,…)) then reads as a near-black panel and strands all body copy at ~1.3:1. Painting it on the canvas is pixel-identical and keeps an ordinary opaque surface. */ html { background-color: var(--paper); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; } body { font-family: var(--font-family); color: var(--gray-700); background: transparent; /* the root's paper + register grid shows through */ } h1, h2, h3, h4, .section-heading, .section-header h2 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.015em; font-weight: 800; } a { color: var(--primary); } ::selection { background: var(--primary); color: #fff; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .cn-accent { font-family: 'Noto Serif SC', var(--font-display); } /* The template's little "seal chip" character — restyle as a real red seal glyph */ .cn-seal { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; font-family: 'Noto Serif SC', serif; font-size: 0.62em; font-weight: 700; line-height: 1; color: #fff; background: var(--seal); border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35); transform: translateY(-1px); } /* === TOPLINE FLASH ======================================================= */ .site-flash { background: var(--ink); color: #f3d9d3; border-bottom: 2px solid var(--primary); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; text-align: center; } .site-flash strong { color: #fff; font-weight: 700; } /* === TRUST BAR — thin red-ruled register strip =========================== */ .trust-bar { background: var(--porcelain); /* global.css leaves the template's mint #e8f2ec here, and the anchors carry an inline `color:inherit` (which beats a class rule) — so the bar MUST own a readable colour or the links land at 1.13:1 on the bone strip. */ color: var(--gray-500); border-bottom: var(--hairline); border-top: 1px solid rgba(126, 32, 22, 0.14); } .trust-bar-inner { gap: 0 !important; } .trust-bar-item { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); } .trust-bar-item i { color: var(--primary); } /* === HEADER ============================================================== */ .header { background: rgba(247, 243, 236, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); box-shadow: none; } .header .logo-img { border-radius: 2px; } .logo-text { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; color: var(--ink); } .logo-text small { font-family: var(--font-mono); font-weight: 400; font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); white-space: nowrap; } .nav-link { font-family: var(--font-family); font-size: 0.83rem; font-weight: 600; letter-spacing: 0.005em; text-transform: none; color: var(--gray-600); border-radius: 2px; border-bottom: none; padding: 7px 10px; } .nav-link:hover { color: var(--primary-darker); background: var(--primary-50); } .nav-link.active { color: var(--primary-darker); background: var(--primary-50); box-shadow: inset 0 -2px 0 var(--primary); } .nav-link-secondary { color: var(--primary); } .nav-link-secondary:hover { color: var(--primary-darker); } .warehouse-btn { background: var(--white); border: 1px solid var(--border-default); color: var(--gray-700); font-family: var(--font-mono); font-size: 0.72rem; border-radius: 2px; } .warehouse-btn:hover { border-color: var(--primary); color: var(--primary-darker); } .cart-btn { background: var(--primary); color: #fff; border: none; border-radius: 2px; font-family: var(--font-family); font-weight: 700; letter-spacing: 0.01em; text-transform: none; box-shadow: var(--shadow-jade); } .cart-btn:hover { background: var(--primary-dark); transform: none; } .cart-count { background: var(--ink); color: #fff; font-family: var(--font-mono); font-weight: 700; } .hamburger-line { background: var(--ink); } /* Verified-On dropdown — warm porcelain panel, red ticks */ .vo-dd-menu { background: var(--porcelain) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-lg) !important; border-radius: 3px !important; } .vo-dd-menu a { color: var(--gray-700) !important; } .vo-dd-menu a:hover { background: var(--primary-50) !important; color: var(--primary-darker) !important; } .vo-dd-menu i { color: var(--primary) !important; } /* === BUTTONS ============================================================= */ .btn, .checkout-btn { font-family: var(--font-family); font-weight: 700; letter-spacing: 0.01em; text-transform: none; border-radius: 2px; } .btn-primary, .checkout-btn { background: var(--primary); border: none; color: #fff; box-shadow: var(--shadow-jade); } .btn-primary:hover, .checkout-btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-jade); } .btn-secondary { background: var(--white); border: 1px solid var(--border-default); color: var(--gray-700); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary-darker); background: var(--white); } /* ======================================================================== HOMEPAGE — "Vermillion Register" custom sections (sgn-*) ======================================================================== */ /* Shared section shell + register section device */ .sgn-section { padding: 74px 0; border-bottom: var(--hairline); } .sgn-section.alt { background: var(--surface-sunken); } .sgn-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-darker); margin-bottom: 16px; } .sgn-eyebrow::before { content: ''; width: 12px; height: 12px; background: var(--seal); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); border-radius: 1px; display: inline-block; } .sgn-sec-head { margin-bottom: 36px; max-width: 62ch; } .sgn-sec-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.08; margin-bottom: 10px; } .sgn-sec-head p { font-size: 0.98rem; color: var(--gray-500); line-height: 1.65; } .sgn-refline { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); } /* --- HERO: certificate register + seal ---------------------------------- */ .sgn-hero { position: relative; overflow: hidden; /* Opaque surface. The red corner wash is an ::before OVERLAY, not a background-image on the section — a translucent gradient here becomes the "effective background" of every hero element and reads as a solid crimson panel. */ background: var(--paper); border-bottom: var(--hairline); padding: 30px 0 0; } .sgn-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 88% 12%, rgba(192, 57, 43, 0.07), transparent 62%); } .sgn-hero > * { position: relative; } .sgn-hero-frame { position: relative; border-top: 3px double var(--register-rule); border-bottom: 3px double var(--register-rule); padding: 46px 0 52px; } /* corner registration ticks (print crop marks) */ .sgn-hero-frame::before, .sgn-hero-frame::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--primary); pointer-events: none; } .sgn-hero-frame::before { top: -8px; left: 0; border-right: none; border-bottom: none; } .sgn-hero-frame::after { bottom: -8px; right: 0; border-left: none; border-top: none; } .sgn-hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: center; } .sgn-hero-kicker { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 22px; } .sgn-hero-kicker .k-seal { color: var(--primary); font-weight: 700; } .sgn-hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.02; font-weight: 900; letter-spacing: -0.025em; color: var(--ink); max-width: 16ch; margin-bottom: 20px; } .sgn-hero h1 em { font-style: normal; color: var(--primary); } .sgn-hero-sub { font-size: 1.06rem; line-height: 1.62; color: var(--gray-600); max-width: 52ch; margin-bottom: 28px; } .sgn-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 30px; } .sgn-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--primary); color: #fff; font-family: var(--font-family); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; padding: 14px 26px; border-radius: 2px; text-decoration: none; border: none; box-shadow: var(--shadow-jade); transition: background var(--transition-fast), transform var(--transition-fast); } .sgn-btn:hover { background: var(--primary-dark); transform: translateY(-1px); } .sgn-btn-line { display: inline-flex; align-items: center; gap: 9px; background: transparent; color: var(--gray-700); font-family: var(--font-family); font-size: 0.92rem; font-weight: 600; padding: 14px 24px; border-radius: 2px; border: 1px solid var(--border-default); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); } .sgn-btn-line:hover { border-color: var(--primary); color: var(--primary-darker); } .sgn-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gray-500); padding-top: 20px; border-top: var(--hairline); } .sgn-hero-meta b { color: var(--ink); font-weight: 700; } /* The seal chop */ .sgn-hero-seal { display: flex; justify-content: center; align-items: center; } .sgn-seal-svg { width: 100%; max-width: 258px; height: auto; filter: drop-shadow(0 8px 18px rgba(126,32,22,0.18)); transform: rotate(-5deg); } /* --- SPECIMEN LEDGER: volume schedule ----------------------------------- */ .sgn-ledger { background: var(--ink); color: #e9ddd2; padding: 30px 0; } .sgn-ledger .container { position: relative; } .sgn-ledger-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 14px; } .sgn-ledger-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; color: #fff; } .sgn-ledger-timer { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d8b6ad; } .sgn-ledger-timer #promoTimerCard { color: #fff; font-weight: 700; } .sgn-ledger-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .sgn-tier { padding: 4px 20px 4px 0; border-right: 1px solid rgba(255,255,255,0.12); } .sgn-ledger-rows .sgn-tier:last-child { border-right: none; } .sgn-tier .deal-tier-label { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #b7a99b; margin-bottom: 3px; } .sgn-tier .deal-tier-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; color: #fff; background: none; border: none; padding: 0; border-radius: 0; } .sgn-tier .deal-tier-value .pct { color: var(--primary-light); } /* --- VERIFICATION REGISTER (four labs) ---------------------------------- */ .sgn-labs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .sgn-lab { position: relative; display: block; background: var(--porcelain); border: 1px solid var(--border-subtle); border-left: 3px solid var(--primary); border-radius: 2px; padding: 24px 24px 20px; text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .sgn-lab:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-left-color: var(--primary-darker); } .sgn-lab-ref { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-400); display: block; margin-bottom: 12px; } .sgn-lab h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 7px; color: var(--ink); } .sgn-lab p { font-size: 0.86rem; line-height: 1.58; color: var(--gray-500); margin-bottom: 14px; } .sgn-lab-go { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } .sgn-lab:hover .sgn-lab-go { color: var(--primary-darker); } /* --- FACILITY ----------------------------------------------------------- */ .sgn-facility-lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; } .lab-video-card { border-radius: 3px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); overflow: hidden; background: var(--porcelain); } .lab-video-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(33, 27, 20, 0.82); color: #f0e7dc; } .sgn-facility-note { background: var(--ink); color: #e9ddd2; border-radius: 3px; padding: 24px; display: flex; flex-direction: column; justify-content: center; } .sgn-facility-note h3 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; font-weight: 800; } .sgn-facility-note p { font-size: 0.88rem; line-height: 1.6; color: #c8b9ab; } .sgn-facility-note .cn-accent { color: var(--primary-light); } .sgn-facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* --- ORDER SEQUENCE ----------------------------------------------------- */ .sgn-seq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--border-subtle); border-radius: 3px; overflow: hidden; background: var(--porcelain); } .sgn-seq-step { padding: 24px 20px; border-right: 1px solid var(--border-subtle); } .sgn-seq .sgn-seq-step:last-child { border-right: none; } .sgn-seq-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--primary); letter-spacing: 0.06em; display: block; margin-bottom: 12px; } .sgn-seq-step h4 { font-size: 1rem; font-weight: 800; margin-bottom: 5px; color: var(--ink); } .sgn-seq-step p { font-size: 0.82rem; color: var(--gray-500); line-height: 1.5; } /* --- ASSURANCE: reviews line + payment index ---------------------------- */ .sgn-reviews { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--porcelain); border: 1px solid var(--border-subtle); border-left: 3px solid var(--primary); border-radius: 2px; padding: 22px 26px; text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .sgn-reviews:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .sgn-reviews .score { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); } .sgn-reviews .stars { color: var(--primary); font-size: 0.95rem; letter-spacing: 3px; } .sgn-reviews .count { font-size: 0.9rem; color: var(--gray-500); } .sgn-reviews .go { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } .sgn-pay { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .sgn-pay .pay-badge { background: var(--white); border: 1px solid var(--border-subtle); box-shadow: none; border-radius: 100px; font-family: var(--font-family); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gray-700); padding: 7px 15px; display: inline-flex; align-items: center; gap: 8px; } .sgn-pay .pay-badge i { color: var(--gray-500) !important; } .sgn-pay .pay-crypto-tag { background: var(--primary); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; letter-spacing: 0.04em; } /* === TRENDING CARDS ===================================================== */ .trending-card { background: var(--porcelain); border: 1px solid var(--border-subtle); border-radius: 3px; box-shadow: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .trending-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .trending-card-image { background: #fff; border-radius: 2px; } .trending-category { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--primary-50); color: var(--primary-darker); border: none; border-radius: 2px; font-size: 0.62rem; } .trending-badge { border-radius: 2px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } .trending-badge-popular { background: var(--primary); color: #fff; } .trending-badge-new { background: var(--ink); color: #fff; } .trending-badge-value { background: var(--primary-50); color: var(--primary-darker); } .trending-name { font-family: var(--font-display); font-weight: 800; color: var(--ink); } .trending-spec { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-400); } .trending-price-value { font-family: var(--font-mono); font-weight: 700; color: var(--primary-darker); } .trending-bulk { font-family: var(--font-mono); color: var(--gray-500); } .trending-cta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } /* === FAQ — two-column register ========================================= */ .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; border-top: none; } .faq-item { border: 1px solid var(--border-subtle); border-radius: 2px; background: var(--porcelain); box-shadow: none; margin-bottom: 0; } .faq-item.open { border-color: var(--primary); border-left: 3px solid var(--primary); } .faq-question { font-family: var(--font-family); font-weight: 700; font-size: 0.94rem; color: var(--ink); background: transparent; } .faq-question i { color: var(--primary); font-size: 0.7em; } .faq-answer p { font-size: 0.87rem; line-height: 1.62; color: var(--gray-600); } .faq-answer a, .faq-answer a[style] { color: var(--primary) !important; } /* === MODALS / TOAST / INPUTS =========================================== */ .modal { background: rgba(33, 22, 15, 0.55); } .modal-content { background: var(--porcelain); border-radius: 4px; border: 1px solid var(--border-default); border-top: 3px solid var(--primary); box-shadow: var(--shadow-xl); color: var(--gray-700); } .modal-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); } .modal-close { color: var(--gray-500); } .notification-toast { background: var(--porcelain); border-radius: 3px; border: 1px solid var(--border-default); border-left: 3px solid var(--primary); box-shadow: var(--shadow-xl); color: var(--gray-700); } .step-number { font-family: var(--font-mono); border-radius: 2px; } input, textarea, select { background: var(--white); color: var(--gray-800); border-color: var(--gray-300); border-radius: 2px; } input::placeholder, textarea::placeholder { color: var(--gray-400); } /* === MOBILE MENU / BOTTOM NAV ========================================== */ .mobile-menu { background: var(--porcelain); color: var(--gray-700); } .mobile-menu-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--gray-500); } .mobile-nav-link { color: var(--gray-700); border-radius: 2px; } .mobile-nav-link.active { background: var(--primary-50); color: var(--primary-darker); } .mobile-nav-link i { color: var(--primary); } .mobile-menu-footer a { color: var(--gray-600); } .mobile-bottom-nav { background: rgba(247, 243, 236, 0.97) !important; border-top: 1px solid var(--border-default) !important; backdrop-filter: blur(10px); } .bottom-nav-item { color: var(--gray-500); font-family: var(--font-mono); font-size: 0.6rem; } .bottom-nav-item.active { color: var(--primary); } .bottom-nav-item.active i { color: var(--primary); } .bottom-nav-badge { background: var(--primary); color: #fff; font-family: var(--font-mono); } /* === FOOTER — register plate =========================================== */ .footer { background: var(--ink); color: #b7a99b; border-top: 3px solid var(--primary); } .footer-logo { font-family: var(--font-display); font-weight: 900; color: #fff; } .footer-logo small { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.09em; text-transform: uppercase; color: #9b8d7f; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #9b8d7f; border-bottom: none; } .footer-col a, .footer-col p { color: #b7a99b; } .footer-col a:hover { color: var(--primary-light); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); } .footer-bottom p { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: #9b8d7f; } .footer-social a { color: #b7a99b; border: 1px solid rgba(255,255,255,0.14); border-radius: 2px; } .footer-social a:hover { color: var(--primary-light); border-color: var(--primary); } /* === PAGE-CSS PATCHES — kill leftover jade-green hexes ================== Other pages (products, product) hardcode the old green palette. Repaint. */ .section-alt { background: var(--surface-sunken); } .products-hero, .page-hero { background: var(--surface-sunken); } .page-hero::before { background-image: none; } .trustpilot-banner { background: var(--ink); } .trustpilot-banner:hover { background: #17120c; } /* products page header — kill green title + green glow. Same rule as .sgn-hero: the translucent red wash is an overlay, the section itself stays opaque. */ .products-page-header { position: relative; background: linear-gradient(180deg, var(--porcelain) 0%, var(--paper) 100%) !important; } .products-page-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 130% at 85% -20%, rgba(192, 57, 43, 0.07), transparent 60%); } .products-page-header > * { position: relative; } .products-page-title { color: var(--ink) !important; font-weight: 800; } /* product / products page green buttons -> red */ .view-product-btn { background: var(--primary) !important; color: #fff !important; } .view-product-btn:hover { background: var(--primary-dark) !important; box-shadow: var(--shadow-jade) !important; } .janoshik-link, .cat-coa-btn { background: var(--primary-50) !important; color: var(--primary-darker) !important; border-color: var(--primary-100) !important; } .janoshik-link:hover, .cat-coa-btn:hover { background: var(--primary-100) !important; border-color: var(--primary-light) !important; color: var(--primary-darker) !important; } .badge-popular { background: var(--primary-50); color: var(--primary-darker); } .badge-tested { background: var(--primary-50); color: var(--primary-darker); } .view-test-report-btn { background: var(--primary-50); color: var(--primary-darker); } .view-test-report-btn:hover { background: var(--primary-100); } /* === CONTRAST GATE ====================================================== Fixes for site-factory/contrast-audit.js failures. The template's page stylesheets hardcode a jade-grey ramp (#98a09a / #6c7670 / #9ca3af) that was tuned for the WWB palette and drops under 4.5:1 on this shop's bone panels. Repaint them with the warm ink ramp. `!important` is required: several of these are painted from INLINE styles in the shared partials. */ .pd-detail-label, .pd-price-label, .pd-section-subtitle, .pd-specification, .pd-breadcrumb-link, .vl-badge .vl-prefix { color: var(--gray-500) !important; } .pd-section-title { color: var(--ink) !important; } /* The red seal chop: footer.ejs paints it with an inline salmon (#d98575) that sits on the seal's own crimson fill — 1.96:1. The seal is always white-on-red. */ .cn-seal { color: #fff !important; border-color: transparent !important; } /* Footer body copy sits on --ink; gray-500 there is dark-on-dark (2.94:1). */ .footer p, .footer-col p, .footer .footer-col p { color: #b7a99b !important; } /* The countdown lives on TWO dark surfaces — the ink ledger (home) and the crimson sale bar (catalogue) — but home.css paints its units with the light-theme greys. */ .sgn-ledger .timer-unit, .sgn-ledger .timer-sep { color: #d8b6ad !important; } .sale-bar .timer-num, .sale-bar .timer-unit, .sale-bar .timer-sep { color: #fff !important; } /* Gold "Fastest" / "TRACKED" chips: the template's #5c3d0d on the gold gradient is 3.24:1. */ .about-team-badge-fastest, .contact-team-badge-fastest { color: #2e1e00 !important; } /* Muted-green savings tag and the pricelist middot were tuned for the jade palette. */ .price-save { color: #2f6340 !important; } .pl-raw-sep { color: var(--gray-400) !important; } /* about.ejs paints the e-mail CTA with an inline slate (#525c55) and lets the copy inherit the page's dark ink — the whole button was unreadable (1.2:1). */ .about-team-contact, .about-team-contact strong, .about-team-contact span, .about-team-contact i { color: #fff !important; } /* === SKIP LINK ========================================================= */ .skip-link { background: var(--primary-darker); } .skip-link:focus { background: var(--primary); color: #fff; } /* === MOTION DISCIPLINE ================================================== */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .sgn-seal-svg { transform: rotate(-5deg); } } /* === RESPONSIVE ======================================================== */ @media (max-width: 960px) { .sgn-hero-grid { grid-template-columns: 1fr; gap: 30px; } .sgn-hero-seal { order: -1; justify-content: flex-start; } .sgn-seal-svg { max-width: 180px; } .sgn-labs { grid-template-columns: 1fr; } .sgn-facility-lead { grid-template-columns: 1fr; } .sgn-facility-grid { grid-template-columns: 1fr 1fr; } .sgn-seq { grid-template-columns: 1fr 1fr; } .sgn-seq-step { border-bottom: 1px solid var(--border-subtle); } .sgn-ledger-rows { grid-template-columns: 1fr 1fr; gap: 14px 0; } .faq-list { grid-template-columns: 1fr; } } @media (max-width: 560px) { .sgn-section { padding: 48px 0; } .sgn-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); } .sgn-hero-cta { flex-direction: column; align-items: stretch; } .sgn-btn, .sgn-btn-line { justify-content: center; } .sgn-facility-grid { grid-template-columns: 1fr; } .sgn-seq { grid-template-columns: 1fr; } .sgn-seq-step { border-right: none; } .sgn-ledger-rows { grid-template-columns: 1fr; } .sgn-tier { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 10px 0; } .sgn-ledger-rows .sgn-tier:last-child { border-bottom: none; } }