/*
Theme Name: Hangcha Peptide
Theme URI: https://hangchapep.com/
Author: Hangcha Technology
Description: Premium research peptide supplier theme with responsive direct inquiry flow.
Version: 1.0.0
Text Domain: hangcha-peptide
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root { --navy:#062841; --navy-deep:#031b2f; --navy-mid:#0a3554; --teal:#10adae; --teal-light:#6bd7d0; --ink:#092842; --muted:#5f7180; --line:#d7e1e5; --pale:#f2f7f8; --white:#fff; --shadow:0 18px 50px rgba(3,27,47,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.container { width:min(1160px, calc(100% - 64px)); margin:0 auto; }
.topbar { background:var(--navy-deep); color:#c9d9e2; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.topbar-inner { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar a { color:var(--teal-light); transition:color .2s ease; white-space:nowrap; }
.topbar a:hover { color:#fff; }
.site-header { height:84px; display:flex; align-items:center; position:relative; z-index:20; background:#fff; border-bottom:1px solid rgba(10,53,84,.07); transition:box-shadow .2s ease; }
.site-header.scrolled { position:sticky; top:0; box-shadow:0 8px 24px rgba(3,27,47,.08); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:100%; gap:24px; }
.brand { display:inline-flex; gap:10px; align-items:center; flex-shrink:0; }
.brand-mark { width:37px; height:37px; display:grid; place-items:center; color:#fff; background:var(--navy); position:relative; overflow:hidden; font-weight:800; font-size:21px; line-height:1; letter-spacing:-.09em; }
.brand-mark span { position:relative; z-index:2; transform:translateX(-1px); }
.brand-mark i, .brand-mark b { position:absolute; height:4px; background:var(--teal); border-radius:10px; transform:rotate(-43deg); right:2px; }
.brand-mark i { width:16px; top:10px; }
.brand-mark b { width:23px; top:19px; }
.brand-copy { display:flex; flex-direction:column; line-height:1; gap:4px; }
.brand-copy strong { font-size:14px; letter-spacing:.13em; font-weight:800; }
.brand-copy small { color:var(--teal); font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.3em; font-weight:500; }
.main-nav { display:flex; align-items:center; gap:27px; margin-left:auto; }
.main-nav a { color:#304b5f; font-size:12px; font-weight:700; letter-spacing:.01em; position:relative; white-space:nowrap; }
.main-nav a:after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:center; transition:transform .2s ease; }
.main-nav a:hover, .main-nav a:focus { color:var(--navy); }
.main-nav a:hover:after { transform:scaleX(1); }
.header-cta { display:flex; align-items:center; gap:7px; color:var(--navy); border-left:1px solid var(--line); padding-left:22px; font-weight:800; font-size:11px; white-space:nowrap; }
.header-cta svg, .btn svg, .text-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.header-cta:hover { color:var(--teal); }
.menu-toggle { display:none; background:transparent; border:0; width:38px; height:38px; padding:6px; cursor:pointer; }
.menu-toggle span { display:block; height:2px; background:var(--navy); margin:5px 0; transition:all .2s ease; }
.section { padding:108px 0; }
.section-tint { background:var(--pale); }
.section-kicker { color:var(--teal); font-family:'DM Mono',monospace; letter-spacing:.13em; font-size:10px; font-weight:500; text-transform:uppercase; margin:0 0 16px; }
.section-kicker span { width:20px; height:1px; display:inline-block; background:currentColor; vertical-align:middle; margin-right:8px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Playfair Display',Georgia,serif; font-weight:600; letter-spacing:-.035em; line-height:1.08; }
h1 { font-size:clamp(46px,5.45vw,78px); }
h2 { font-size:clamp(35px,4vw,54px); margin-bottom:22px; }
h3 { color:var(--navy); font-size:18px; line-height:1.35; letter-spacing:-.025em; margin-bottom:12px; }
p { color:var(--muted); }
.hero { min-height:680px; background-color:var(--navy); background-image:linear-gradient(90deg, rgba(3,27,47,.96) 0%, rgba(3,27,47,.84) 35%, rgba(3,27,47,.28) 66%, rgba(3,27,47,.16) 100%), var(--hero-image); background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:space-between; color:#fff; overflow:hidden; }
.hero-inner { width:100%; display:flex; align-items:center; flex:1; padding:82px 0 62px; }
.hero-copy { width:min(650px, 58%); }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--teal-light); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; }
.eyebrow span { width:22px; height:1px; background:var(--teal); }
.hero h1 { margin:0 0 23px; color:#fff; }
.hero h1 em { color:var(--teal-light); font-weight:500; }
.hero-intro { color:#d9e6ea; max-width:570px; font-size:16px; line-height:1.8; margin-bottom:31px; }
.hero-actions { display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:12px 20px; font-size:12px; font-weight:800; letter-spacing:.005em; transition:all .2s ease; border:1px solid transparent; }
.btn-primary { color:#fff; background:var(--teal); border-color:var(--teal); box-shadow:0 8px 24px rgba(16,173,174,.18); }
.btn-primary:hover { color:#fff; background:#0b9296; border-color:#0b9296; transform:translateY(-2px); }
.btn-ghost { color:#dceaf0; border-color:rgba(255,255,255,.45); }
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.btn-light { color:var(--navy); background:#fff; border-color:#fff; }
.btn-light:hover { background:var(--teal-light); border-color:var(--teal-light); transform:translateY(-2px); }
.hero-note { display:flex; align-items:center; color:#aebfcc; font-size:11px; margin-top:28px; }
.mini-shield { width:20px; height:20px; display:grid; place-items:center; margin-right:8px; color:var(--teal-light); }
.mini-shield svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hero-stats { width:100%; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.17); }
.hero-stats > div { min-height:94px; border-left:1px solid rgba(255,255,255,.17); padding:22px 28px; display:flex; flex-direction:column; justify-content:center; }
.hero-stats > div:first-child { border-left:0; padding-left:0; }
.hero-stats strong { font-family:'Playfair Display',Georgia,serif; font-size:21px; letter-spacing:-.02em; font-weight:600; }
.hero-stats span { font-size:10px; color:#b4c5cf; letter-spacing:.04em; margin-top:2px; }
.intro-section { padding:105px 0 95px; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:120px; align-items:start; }
.intro-grid h2 { margin-bottom:0; }
.intro-text { padding-top:10px; }
.intro-text p { font-size:15px; margin-bottom:24px; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--navy); font-weight:800; font-size:12px; border-bottom:1px solid var(--teal); padding-bottom:5px; }
.text-link:hover { color:var(--teal); }
.section-heading { margin-bottom:48px; }
.split-heading { display:grid; grid-template-columns:1.05fr .8fr; gap:120px; align-items:end; }
.split-heading h2 { margin-bottom:0; }
.split-heading > p { margin:0; font-size:14px; line-height:1.75; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature-card { background:#fff; padding:37px 32px 34px; min-height:315px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid transparent; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#e3eff1; }
.feature-icon { width:45px; height:45px; border:1px solid #bddad9; display:grid; place-items:center; color:var(--teal); margin-bottom:24px; }
.feature-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.feature-card p { font-size:13px; margin-bottom:22px; }
.feature-card a { color:var(--navy); font-size:11px; font-weight:800; margin-top:auto; display:inline-flex; align-items:center; gap:8px; }
.feature-card a svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; }
.feature-card a:hover { color:var(--teal); }
.lab-banner { background:linear-gradient(90deg,rgba(3,27,47,.96) 0%,rgba(3,27,47,.9) 34%,rgba(3,27,47,.34) 69%),var(--lab-image); background-size:cover; background-position:center; min-height:510px; display:flex; align-items:center; }
.lab-banner-inner { width:100%; }
.lab-copy { width:min(530px,55%); padding:80px 0; }
.lab-copy h2 { color:#fff; }
.lab-copy p:not(.section-kicker) { color:#c7d6de; font-size:15px; }
.light { color:var(--teal-light); }
.collection-section { overflow:hidden; }
.collection-grid { display:grid; grid-template-columns:1fr .94fr; gap:92px; align-items:center; }
.collection-image { position:relative; }
.collection-image:before { content:""; position:absolute; background:var(--teal); width:72%; height:70%; top:-24px; left:-24px; opacity:.16; }
.collection-image img { width:100%; position:relative; box-shadow:var(--shadow); }
.collection-content p:not(.section-kicker) { font-size:14px; }
.check-list { padding:4px 0 3px; margin:27px 0 30px; list-style:none; }
.check-list li { display:flex; align-items:flex-start; gap:13px; margin:17px 0; color:var(--muted); font-size:12px; line-height:1.55; }
.check-list svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:var(--teal); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.check-list strong { color:var(--navy); font-weight:800; }
.dark-section { color:#fff; background-color:var(--navy-deep); background-image:linear-gradient(90deg,rgba(3,27,47,.96),rgba(3,27,47,.84) 45%,rgba(3,27,47,.28)),var(--molecule-image); background-size:cover; background-position:center; padding:124px 0; }
.dark-inner { width:min(650px,66%); }
.dark-inner h2 { color:#fff; margin-bottom:18px; }
.dark-inner > p:not(.section-kicker) { color:#c8d6df; font-size:15px; max-width:600px; margin-bottom:30px; }
.light-ghost { color:#fff; }
.faq-section { padding-top:104px; }
.centered { text-align:center; max-width:740px; margin-left:auto; margin-right:auto; }
.faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; border-top:1px solid var(--line); padding-top:35px; }
.faq-grid h3 { font-size:16px; }
.faq-grid p { font-size:13px; line-height:1.75; }
.site-footer { background:var(--navy-deep); color:#b6c7d1; padding-top:74px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .65fr .9fr; gap:85px; padding-bottom:52px; }
.footer-logo { color:#fff; margin-bottom:20px; }
.footer-brand > p { color:#b4c6d0; max-width:290px; font-size:12px; line-height:1.8; }
.footer-wa { color:var(--teal-light); font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:8px; margin-top:7px; }
.footer-wa:hover { color:#fff; }
.footer-wa svg { width:20px; height:20px; fill:currentColor; }
.footer-grid h3 { color:#fff; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.footer-grid > div:not(.footer-brand) a { display:block; color:#aec1cb; font-size:12px; line-height:1.8; margin:6px 0; }
.footer-grid > div:not(.footer-brand) a:hover { color:var(--teal-light); }
.footer-grid > div:not(.footer-brand) p { color:#aec1cb; font-size:12px; line-height:1.7; margin-bottom:14px; }
.compliance-bar { border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); padding:18px 0; }
.compliance-bar p { margin:0; color:#91a8b5; font-size:10px; line-height:1.75; }
.compliance-bar strong { color:#d0e0e7; }
.footer-bottom { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#76909e; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.whatsapp-float { position:fixed; z-index:50; right:24px; bottom:23px; display:inline-flex; align-items:center; gap:9px; color:#fff; background:#20bf6b; padding:13px 16px; box-shadow:0 12px 30px rgba(3,27,47,.24); font-size:11px; font-weight:800; transition:transform .2s ease, background .2s ease; }
.whatsapp-float:hover { color:#fff; background:#159b54; transform:translateY(-3px); }
.whatsapp-float svg { width:22px; height:22px; fill:currentColor; }
/* Page templates */
.page-hero { color:#fff; background-color:var(--navy); background-image:linear-gradient(90deg,rgba(3,27,47,.94),rgba(3,27,47,.76) 48%,rgba(3,27,47,.25)),var(--page-image); background-size:cover; background-position:center; }
.compact-hero { min-height:470px; display:flex; align-items:center; }
.compact-hero .container { padding:80px 0; }
.compact-hero h1 { color:#fff; max-width:800px; margin:0 0 18px; font-size:clamp(43px,5.1vw,70px); }
.compact-hero p:not(.section-kicker) { color:#d8e5ea; max-width:620px; font-size:15px; margin-bottom:27px; }
.program-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.program-grid article { border-top:2px solid var(--teal); background:var(--pale); padding:28px 23px 25px; min-height:247px; }
.program-grid span { font-family:'DM Mono',monospace; color:var(--teal); font-size:12px; }
.program-grid h3 { margin-top:27px; font-size:16px; }
.program-grid p { font-size:12px; line-height:1.75; }
.two-column-copy { display:grid; grid-template-columns:.9fr 1fr; gap:120px; }
.two-column-copy h2 { margin-bottom:0; }
.two-column-copy p { font-size:14px; }
.callout-card { background:var(--navy); color:#fff; min-height:230px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:48px 55px; position:relative; overflow:hidden; }
.callout-card:after { content:""; position:absolute; right:-80px; top:-90px; width:340px; height:340px; border:1px solid rgba(107,215,208,.24); border-radius:50%; box-shadow:0 0 0 48px rgba(107,215,208,.04),0 0 0 100px rgba(107,215,208,.03); }
.callout-card > * { position:relative; z-index:1; }
.callout-card h2 { color:#fff; font-size:34px; margin-bottom:10px; }
.callout-card p:not(.section-kicker) { color:#c2d2db; max-width:600px; font-size:13px; margin:0; }
.quality-layout { display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:center; }
.quality-image { position:relative; }
.quality-image:after { content:""; position:absolute; right:-22px; bottom:-22px; width:47%; height:47%; border:1px solid var(--teal); z-index:-1; }
.quality-image img { width:100%; box-shadow:var(--shadow); }
.quality-layout p:not(.section-kicker) { font-size:14px; }
.dark-process { background:var(--navy-deep); color:#fff; }
.light-heading h2 { color:#fff; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:52px; }
.process-grid article { padding:0 28px; border-left:1px solid rgba(255,255,255,.16); min-height:190px; }
.process-grid article:first-child { padding-left:0; border-left:0; }
.process-grid span { color:var(--teal-light); font-family:'DM Mono',monospace; font-size:11px; }
.process-grid h3 { color:#fff; font-size:16px; margin:17px 0 9px; }
.process-grid p { color:#b5c8d1; font-size:12px; line-height:1.7; }
.narrow-copy { max-width:810px; }
.narrow-copy p { font-size:15px; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#d5e0e4; border:1px solid #d5e0e4; }
.detail-grid article { background:#fff; padding:30px 28px 25px; min-height:208px; }
.detail-grid b { font-family:'DM Mono',monospace; font-weight:400; color:var(--teal); font-size:11px; }
.detail-grid h3 { font-size:16px; margin-top:23px; }
.detail-grid p { font-size:12px; line-height:1.7; }
.contact-grid { display:grid; grid-template-columns:1.1fr .8fr; gap:110px; align-items:start; }
.contact-grid > div > p:not(.section-kicker) { font-size:15px; max-width:570px; }
.contact-card { display:flex; gap:19px; align-items:flex-start; margin-top:35px; padding-top:29px; border-top:1px solid var(--line); }
.contact-card .feature-icon { flex:0 0 auto; margin:0; }
.contact-card small { display:block; color:var(--muted); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.contact-card a { display:block; color:var(--navy); font-size:25px; font-family:'Playfair Display',Georgia,serif; margin:4px 0; font-weight:600; }
.contact-card a:hover { color:var(--teal); }
.contact-card p { font-size:12px; margin:0; max-width:370px; }
.inquiry-panel { background:var(--pale); padding:39px 38px 37px; border-top:2px solid var(--teal); }
.inquiry-panel h3 { font-size:20px; }
.inquiry-panel ol { padding-left:19px; color:var(--muted); font-size:13px; margin:20px 0 28px; }
.inquiry-panel li { padding-left:7px; margin:10px 0; }
.full { width:100%; }
/* small screens */
@media (max-width:1050px) { .main-nav { gap:18px; } .header-cta { padding-left:16px; } .header-cta { font-size:10px; } .split-heading,.intro-grid,.two-column-copy { gap:70px; } .collection-grid,.quality-layout { gap:58px; } .footer-grid { gap:55px; } }
@media (max-width:900px) { .container { width:min(100% - 42px, 700px); } .site-header { height:72px; } .header-cta { display:none; } .menu-toggle { display:block; margin-left:auto; } .main-nav { position:absolute; top:72px; left:0; right:0; background:#fff; display:none; padding:16px 22px 22px; box-shadow:0 15px 30px rgba(3,27,47,.12); border-top:1px solid var(--line); margin:0; } .main-nav.is-open { display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .main-nav a { display:block; width:100%; padding:11px 0; font-size:13px; } .main-nav a:after { display:none; } .menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .menu-toggle.is-open span:nth-child(2) { opacity:0; } .menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .hero { min-height:650px; } .hero-copy,.lab-copy,.dark-inner { width:100%; } .intro-grid,.split-heading,.collection-grid,.quality-layout,.two-column-copy,.contact-grid { grid-template-columns:1fr; gap:36px; } .feature-grid { grid-template-columns:1fr; gap:15px; } .feature-card { min-height:0; padding:29px; } .feature-card p { margin-bottom:21px; } .feature-card a { margin-top:0; } .lab-banner { min-height:490px; background-image:linear-gradient(90deg,rgba(3,27,47,.95),rgba(3,27,47,.74)),var(--lab-image); } .collection-grid { gap:52px; } .program-grid,.process-grid { grid-template-columns:repeat(2,1fr); } .process-grid { gap:28px 0; } .process-grid article:nth-child(3) { padding-left:0; border-left:0; } .callout-card { padding:42px 37px; align-items:flex-start; flex-direction:column; } .detail-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1.2fr 1fr; gap:36px; } .footer-brand { grid-column:span 2; } .faq-grid { grid-template-columns:1fr; gap:18px; } .faq-grid article { padding-bottom:12px; border-bottom:1px solid var(--line); } }
@media (max-width:620px) { body { font-size:15px; } .container { width:calc(100% - 36px); } .topbar-inner { justify-content:center; min-height:32px; } .topbar-inner span { display:none; } .topbar { font-size:9px; } .brand-mark { width:34px; height:34px; } .brand-copy strong { font-size:12px; } .main-nav { top:72px; } .hero { min-height:665px; background-image:linear-gradient(90deg,rgba(3,27,47,.96),rgba(3,27,47,.75)),var(--hero-image); background-position:60% center; } .hero-inner { align-items:flex-start; padding:63px 0 38px; } .hero h1 { font-size:46px; } .hero-intro { font-size:14px; line-height:1.75; } .btn { width:100%; } .hero-actions { display:block; } .hero-actions .btn + .btn { margin-top:11px; } .hero-stats { grid-template-columns:1fr; padding:13px 0; } .hero-stats > div,.hero-stats > div:first-child { min-height:auto; padding:8px 0; border:0; } .hero-stats strong { font-size:18px; } .section { padding:74px 0; } .intro-section { padding:75px 0 67px; } h2 { font-size:36px; } .section-heading { margin-bottom:33px; } .feature-card { padding:28px 25px; } .lab-banner { min-height:490px; } .lab-copy { padding:64px 0; } .collection-image:before { top:-15px; left:-15px; } .collection-grid { gap:46px; } .dark-section { padding:80px 0; background-image:linear-gradient(90deg,rgba(3,27,47,.96),rgba(3,27,47,.75)),var(--molecule-image); } .compact-hero { min-height:430px; } .compact-hero .container { padding:66px 0; } .compact-hero h1 { font-size:44px; } .program-grid,.process-grid,.detail-grid { grid-template-columns:1fr; } .program-grid article { min-height:0; } .process-grid { margin-top:33px; } .process-grid article,.process-grid article:first-child,.process-grid article:nth-child(3) { min-height:0; padding:0 0 20px; border-left:0; border-bottom:1px solid rgba(255,255,255,.14); } .process-grid article:last-child { border-bottom:0; } .callout-card { padding:33px 25px; } .callout-card h2 { font-size:31px; } .quality-image:after { right:-12px; bottom:-12px; } .footer-grid { grid-template-columns:1fr; } .footer-brand { grid-column:auto; } .footer-bottom { min-height:82px; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px; } .whatsapp-float { right:16px; bottom:16px; padding:13px; } .whatsapp-float span { display:none; } .contact-card a { font-size:22px; } .inquiry-panel { padding:31px 25px; } }