/* ========================================================================== Hua Cheng Packaging - Global stylesheet Shared by: index.html / products.html / about.html / cases.html / contact.html -------------------------------------------------------------------------- Brand tokens live in :root below - change colours in ONE place. Component classes (.btn, .card, .field ...) are reused across every page, so a single edit here updates the whole site. ========================================================================== */ :root{ /* --- Brand colours (edit here to re-skin the site) --- */ --navy: #0F3460; /* primary brand blue */ --navy-900: #0A2440; /* darker shade / footer */ --navy-700: #16457C; /* lighter shade / hovers */ --navy-100: #E3EBF5; /* pale blue tint */ --accent: #F5A623; /* amber accent */ --accent-dark: #D98E10; --page: #F5F7FA; /* light grey page bg */ --surface: #FFFFFF; --line: #E2E8F0; --ink: #111827; /* body text */ --ink-soft: #4B5563; /* secondary text */ --ink-mute: #6B7280; /* captions */ /* --- Shape / depth --- */ --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(15,52,96,.06), 0 1px 3px rgba(15,52,96,.08); --shadow-md: 0 12px 30px -14px rgba(15,52,96,.28); --shadow-lg: 0 26px 52px -26px rgba(15,52,96,.38); --header-h: 72px; --wrap: 1200px; } /* --------------------------------------------------------- base / resets */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); /* keeps anchors clear of the sticky header */ } body{ margin:0; background:var(--page); color:var(--ink); font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans",sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--navy);text-decoration:none} a:hover{color:var(--navy-700)} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.2; font-weight:800; letter-spacing:-.015em; color:var(--navy-900); } h1{font-size:clamp(1.9rem,5vw,3.35rem)} /* mobile-first fluid type */ h2{font-size:clamp(1.5rem,3.4vw,2.3rem)} h3{font-size:clamp(1.1rem,2vw,1.35rem)} p{margin:0 0 1rem} /* Keyboard focus - visible on every interactive element */ :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px} /* Skip link for screen readers / keyboard users */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--accent);color:var(--navy-900); padding:.6rem 1rem;font-weight:700;border-radius:0 0 8px 0; } .skip-link:focus{left:0} /* --------------------------------------------------------- layout helpers */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.15rem} @media (min-width:640px){.wrap{padding-inline:1.75rem}} @media (min-width:1024px){.wrap{padding-inline:2rem}} .section{padding-block:3.5rem} @media (min-width:768px){.section{padding-block:5rem}} .section-tight{padding-block:2.5rem} @media (min-width:768px){.section-tight{padding-block:3.5rem}} .section-white{background:var(--surface)} .section-grey{background:var(--page)} .section-navy{background:var(--navy);color:#fff} .section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4{color:#fff} .section-navy p{color:rgba(255,255,255,.82)} .divider{height:1px;background:var(--line);border:0;margin:0} /* Section heading block */ .eyebrow{ display:inline-block; font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--navy-700);background:var(--navy-100); border-radius:999px;padding:.35rem .85rem;margin-bottom:1rem; } .section-navy .eyebrow{color:#fff;background:rgba(255,255,255,.14)} .lede{font-size:clamp(1rem,1.4vw,1.125rem);color:var(--ink-soft);max-width:62ch} .section-navy .lede{color:rgba(255,255,255,.85)} /* --------------------------------------------------------- buttons / links */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.85rem 1.5rem;border-radius:var(--radius-sm); font-weight:700;font-size:.95rem;line-height:1; border:2px solid transparent;cursor:pointer;text-align:center; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .btn:active{transform:translateY(1px)} .btn.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow-sm)} .btn.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff;box-shadow:var(--shadow-md)} .btn.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--navy-900)} .btn.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--navy-900)} .btn.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)} .btn.btn-outline:hover{background:var(--navy);color:#fff} .btn.btn-onnavy{background:transparent;border-color:rgba(255,255,255,.6);color:#fff} .btn.btn-onnavy:hover{background:#fff;border-color:#fff;color:var(--navy)} .btn.btn-whatsapp{background:#25D366;border-color:#25D366;color:#08331b} .btn.btn-whatsapp:hover{background:#1EBE5A;border-color:#1EBE5A;color:#fff} .btn.btn-sm{padding:.6rem 1.05rem;font-size:.85rem} .btn.btn-block{width:100%} @media (min-width:640px){.btn.btn-block-sm-auto{width:auto}} /* Inline text link with arrow */ .link-arrow{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.92rem;color:var(--navy)} .link-arrow svg{transition:transform .18s ease} .link-arrow:hover svg{transform:translateX(4px)} .section-navy .link-arrow{color:var(--accent)} /* --------------------------------------------------------- cards */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .card.card-pad{padding:1.5rem} .card.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#CBD8E8} @media (prefers-reduced-motion:reduce){ .card.card-hover:hover{transform:none} .btn:active{transform:none} } /* Media frame: keeps every product photo at the same 4:3 ratio */ .media{ position:relative;width:100%;aspect-ratio:4/3; background:linear-gradient(135deg,var(--navy-100),#F7F9FC); overflow:hidden; } .media img{width:100%;height:100%;object-fit:cover} /* Photo cards without a .media frame (factory gallery, QC cards, warehouse): crop every photo to the same 4:3 frame so each card is the same height and the image always fills the card edge-to-edge. */ .card.overflow-hidden > img{ display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; } /* Hero image: always fill its rounded frame */ .hero-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} /* Small square icon badge */ .icon-badge{ width:52px;height:52px;flex:0 0 52px; display:grid;place-items:center;border-radius:12px; background:var(--navy-100);color:var(--navy); } .section-navy .icon-badge{background:rgba(255,255,255,.14);color:#fff} .icon-badge svg{width:26px;height:26px} /* Numbered step circle (how-it-works) */ .step-no{ width:44px;height:44px;flex:0 0 44px;border-radius:999px; display:grid;place-items:center;font-weight:800; background:var(--navy);color:#fff; } /* Pill / chip */ .chip{ display:inline-flex;align-items:center;gap:.35rem; background:var(--navy-100);color:var(--navy); border-radius:999px;padding:.3rem .7rem; font-size:.8rem;font-weight:700;white-space:nowrap; } .section-navy .chip{background:rgba(255,255,255,.14);color:#fff} .chip-accent{background:#FDF1DC;color:#8A5A05} /* Trust / certification strip item */ .trust-item{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--ink-soft)} .trust-item svg{width:20px;height:20px;color:var(--accent);flex:0 0 20px} /* Spec list with tick markers */ .spec-list{list-style:none;margin:0;padding:0} .spec-list li{position:relative;padding-left:1.6rem;margin-bottom:.45rem;color:var(--ink-soft);font-size:.94rem} .spec-list li::before{ content:"";position:absolute;left:0;top:.55em; width:.5rem;height:.5rem;border-radius:2px;background:var(--accent); } .section-navy .spec-list li{color:rgba(255,255,255,.85)} /* Stat block */ .stat-value{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;line-height:1;color:var(--navy-900)} .section-navy .stat-value{color:#fff} .stat-label{font-size:.82rem;font-weight:600;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em} .section-navy .stat-label{color:rgba(255,255,255,.7)} /* --------------------------------------------------------- header / nav */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .2s ease; } .site-header.is-stuck{box-shadow:0 6px 24px -14px rgba(15,52,96,.45)} .topbar{background:var(--navy-900);color:rgba(255,255,255,.85);font-size:.82rem} .topbar a{color:rgba(255,255,255,.85)} .topbar a:hover{color:#fff} .brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.15rem;color:var(--navy-900);letter-spacing:-.02em} .brand:hover{color:var(--navy)} .brand-mark{ width:38px;height:38px;border-radius:10px;flex:0 0 38px; display:grid;place-items:center;background:var(--navy);color:#fff;font-size:1rem;font-weight:800; } .brand-sub{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)} .nav-link{ display:block;padding:.6rem .1rem;font-size:.94rem;font-weight:600; color:var(--ink-soft);border-bottom:2px solid transparent; } .nav-link:hover{color:var(--navy)} .nav-link[aria-current="page"]{color:var(--navy);border-bottom-color:var(--accent)} /* Mobile drawer */ .mobile-nav{display:none;border-top:1px solid var(--line);background:#fff} .mobile-nav.is-open{display:block} .mobile-nav .nav-link{padding:.85rem 0;border-bottom:1px solid var(--line)} .mobile-nav .nav-link[aria-current="page"]{border-bottom-color:var(--line);color:var(--navy);font-weight:800} /* Safety net: the drawer never shows at desktop widths, even if it is left open */ @media (min-width:1024px){ .mobile-nav,.mobile-nav.is-open{display:none} } /* --------------------------------------------------------- hero */ .hero{ position:relative;color:#fff;isolation:isolate; background: radial-gradient(1100px 520px at 78% 8%, rgba(37,99,175,.55), transparent 62%), linear-gradient(155deg,var(--navy-900) 0%,var(--navy) 58%,#0C2C52 100%); } .hero::after{ /* faint industrial grid */ content:"";position:absolute;inset:0;z-index:-1;opacity:.28; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,#000 25%,transparent 100%); } .hero h1,.hero h2,.hero h3{color:#fff} .hero-sub{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.5vw,1.15rem);max-width:56ch} .hero-media{ border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); } .hero-stat{padding:.9rem 1rem;border-left:2px solid rgba(255,255,255,.22)} .hero-stat .stat-value{font-size:clamp(1.35rem,2.4vw,1.9rem);color:#fff} .hero-stat .stat-label{color:rgba(255,255,255,.68)} /* Page banner used on the inner pages */ .page-head{ position:relative;color:#fff; background:linear-gradient(140deg,var(--navy-900) 0%,var(--navy) 70%,#123B6B 100%); } .page-head h1{color:#fff;margin-bottom:.35rem} .page-head p{color:rgba(255,255,255,.85);max-width:64ch;margin:0} .crumbs{font-size:.82rem;color:rgba(255,255,255,.7)} .crumbs a{color:rgba(255,255,255,.85)} .crumbs a:hover{color:#fff;text-decoration:underline} /* --------------------------------------------------------- forms */ .field{margin-bottom:1.1rem} .label{display:block;font-size:.87rem;font-weight:700;color:var(--navy-900);margin-bottom:.35rem} .req{color:#C2410C} .input,.select,.textarea{ width:100%;padding:.75rem .9rem; background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm); font-size:.95rem;color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease; } .input:focus,.select:focus,.textarea:focus{ outline:none;border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,52,96,.14); } .textarea{min-height:140px;resize:vertical} .input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{ border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.12); } .err{display:none;font-size:.8rem;font-weight:600;color:#DC2626;margin-top:.3rem} .err.is-shown{display:block} .form-note{font-size:.82rem;color:var(--ink-mute)} .form-status{ display:none;border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:.9rem;font-weight:600; } .form-status.is-shown{display:block} .form-status.ok{background:#E7F7EE;color:#116B3C;border:1px solid #B7E4CB} .form-status.warn{background:#FEF6E7;color:#8A5A05;border:1px solid #F6DEB0} /* --------------------------------------------------------- tables (spec sheets) */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff} table.spec{width:100%;border-collapse:collapse;min-width:640px} table.spec caption{text-align:left;padding:1rem 1.1rem .25rem;font-weight:800;color:var(--navy-900)} table.spec th,table.spec td{padding:.8rem 1.1rem;border-bottom:1px solid var(--line);font-size:.9rem;text-align:left;vertical-align:top} table.spec thead th{background:var(--navy);color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em} table.spec tbody tr:nth-child(even){background:#FAFBFD} table.spec tbody tr:last-child td{border-bottom:0} /* --------------------------------------------------------- footer */ .faq{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:0 1.25rem;box-shadow:var(--shadow-sm); } .faq + .faq{margin-top:.75rem} .faq summary{ cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.1rem 0;font-weight:700;color:var(--navy-900); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";flex:0 0 auto;font-size:1.35rem;line-height:1;font-weight:700;color:var(--navy); } .faq[open] summary::after{content:"\2013"} .faq summary:hover{color:var(--navy)} .faq .faq-body{padding:0 0 1.15rem;color:var(--ink-soft);font-size:.95rem} .faq .faq-body a{text-decoration:underline} /* Inline code snippet (used in the map placeholder note) */ code{ background:var(--navy-100);color:var(--navy-900); border-radius:6px;padding:.1rem .35rem;font-size:.85em; word-break:break-word; } .site-footer{background:var(--navy-900);color:rgba(255,255,255,.75);font-size:.92rem} .site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem} .site-footer a{color:rgba(255,255,255,.75)} .site-footer a:hover{color:#fff;text-decoration:underline} .footer-list{list-style:none;margin:0;padding:0} .footer-list li{margin-bottom:.55rem} .footer-bottom{border-top:1px solid rgba(255,255,255,.14)} /* Floating WhatsApp button (all pages) */ .wa-float{ position:fixed;right:16px;bottom:16px;z-index:70; display:inline-flex;align-items:center;gap:.5rem; background:#25D366;color:#06301A;font-weight:800;font-size:.9rem; padding:.8rem 1.05rem;border-radius:999px;box-shadow:0 12px 28px -10px rgba(0,0,0,.45); } .wa-float:hover{background:#1EBE5A;color:#fff} .wa-float svg{width:22px;height:22px} /* --------------------------------------------------------- scroll reveal */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease} .reveal.is-in{opacity:1;transform:none} /* If JS is disabled the class is added by