/* ========================================================= PromoPen — Shared Stylesheet Palette: Navy / White / Light Grey / Gold-Orange accent Fonts are loaded via tags in each page (not @import) for faster first paint. ========================================================= */ :root{ --navy:#132A52; --navy-dark:#0C1D3B; --navy-light:#1E3A6B; --white:#FFFFFF; --grey-bg:#F4F6FA; --grey-border:#E3E7EF; --text-body:#4B5568; --text-muted:#5B6577; --accent:#DB8A2C; --accent-dark:#B96E19; --accent-light:#F3B96B; --accent-text:#9C5D15; --whatsapp:#25D366; --whatsapp-dark:#1EBE57; --serif:'DM Serif Display', serif; --sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono:'IBM Plex Mono', monospace; --container:1200px; --radius:10px; --shadow-sm:0 2px 10px rgba(19,42,82,0.06); --shadow-md:0 10px 30px rgba(19,42,82,0.10); --transition:0.25s ease; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:var(--sans); color:var(--text-body); background:var(--white); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{text-decoration:none;color:inherit} ul{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none} /* 16px minimum on all form fields — anything smaller triggers an unwanted auto-zoom on focus in iOS Safari */ input,textarea,select{font-family:inherit;font-size:16px} /* ---------- Accessibility: visible focus states everywhere ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; } /* ---------- Skip link (screen-reader / keyboard accessibility) ---------- */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--navy); color:var(--white); padding:14px 22px; font-size:14px; font-weight:600; z-index:2000; border-radius:0 0 8px 0; } .skip-link:focus{left:0} .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } h1,h2,h3,h4{ font-family:var(--serif); color:var(--navy); font-weight:400; line-height:1.2; } section{padding:88px 0} .section-head{ max-width:680px; margin:0 auto 52px; text-align:center; } .eyebrow{ font-family:var(--mono); text-transform:uppercase; letter-spacing:0.14em; font-size:12.5px; color:var(--accent-text); display:inline-block; margin-bottom:14px; } .section-head h2{ font-size:38px; margin-bottom:16px; } .section-head p{ font-size:16.5px; color:var(--text-muted); } .bg-grey{background:var(--grey-bg)} .bg-navy{background:var(--navy)} /* ========================================================= BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:6px; font-size:14.5px; font-weight:600; letter-spacing:0.01em; transition:all var(--transition); white-space:nowrap; } .btn-primary{ background:var(--accent); color:var(--navy); box-shadow:0 8px 20px rgba(219,138,44,0.28); } .btn-primary:hover{background:var(--accent-light);transform:translateY(-2px)} .btn-outline{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.5); } .btn-outline:hover{background:rgba(255,255,255,0.12);border-color:#fff} .btn-outline-navy{ background:transparent; color:var(--navy); border:1.5px solid var(--grey-border); } .btn-outline-navy:hover{border-color:var(--navy);background:var(--grey-bg)} .btn-sm{padding:11px 22px;font-size:13.5px} .btn-block{width:100%} .cta-note{ display:block; margin-top:12px; font-size:12.5px; color:rgba(255,255,255,0.6); } /* ========================================================= TOPBAR + HEADER ========================================================= */ .topbar{ background:var(--navy-dark); color:rgba(255,255,255,0.75); } .topbar-inner{ max-width:var(--container); margin:0 auto; padding:9px 24px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; } .topbar-left{display:flex;gap:22px} .topbar-item{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.75);transition:color var(--transition)} .topbar-item:hover{color:var(--accent-light)} .topbar-right{font-family:var(--mono);letter-spacing:0.03em;color:rgba(255,255,255,0.55)} .site-header{ position:sticky; top:0; z-index:999; background:var(--white); box-shadow:var(--shadow-sm); } .header-main{ max-width:var(--container); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .logo{display:flex;align-items:center;gap:12px} .logo-mark{ font-family:var(--serif); font-size:26px; color:var(--navy); letter-spacing:0.01em; } .logo-mark span{color:var(--accent)} .logo-divider{width:1px;height:28px;background:var(--grey-border)} .logo-sub{ font-family:var(--mono); font-size:11px; line-height:1.4; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; } .main-nav{display:flex;align-items:center;gap:34px} .nav-link{ font-size:14.5px; font-weight:500; color:var(--navy); position:relative; padding:6px 0; transition:color var(--transition); } .nav-link::after{ content:""; position:absolute; left:0;bottom:-2px; width:0;height:2px; background:var(--accent); transition:width var(--transition); } .nav-link:hover{color:var(--accent-text)} .nav-link:hover::after,.nav-link.active::after{width:100%} .nav-link.active{color:var(--accent-text)} .header-actions{display:flex;align-items:center;gap:18px} .hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:4px; } .hamburger span{ display:block; height:2px; width:100%; background:var(--navy); border-radius:2px; transition:all var(--transition); } .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{ display:none; max-height:0; overflow:hidden; background:var(--white); border-top:1px solid var(--grey-border); transition:max-height var(--transition); } .mobile-menu.open{max-height:460px} .mobile-menu-inner{ padding:18px 24px 26px; display:flex; flex-direction:column; gap:4px; } .mobile-nav-link{ padding:12px 4px; font-size:15.5px; font-weight:500; color:var(--navy); border-bottom:1px solid var(--grey-border); } .mobile-nav-link.active{color:var(--accent-text)} .mobile-menu .btn{margin-top:14px} /* ========================================================= HERO ========================================================= */ .hero{ background:linear-gradient(100deg,rgba(12,29,59,0.94) 0%,rgba(12,29,59,0.90) 38%,rgba(19,42,82,0.72) 65%,rgba(19,42,82,0.55) 100%),url('../images/hero-pen-printing.svg'); background-size:cover; background-position:center right; background-repeat:no-repeat; color:var(--white); padding:100px 0 96px; position:relative; overflow:hidden; } .hero::after{ content:""; position:absolute; right:-120px;top:-120px; width:420px;height:420px; border-radius:50%; background:radial-gradient(circle,rgba(219,138,44,0.20) 0%,rgba(219,138,44,0) 70%); } .hero-inner{ max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; } .hero-content{max-width:680px} .hero .eyebrow{color:var(--accent-light)} .hero h1{ font-size:50px; color:var(--white); margin-bottom:22px; } .hero p.hero-desc{ font-size:17.5px; color:rgba(255,255,255,0.78); max-width:560px; margin-bottom:28px; } .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .hero-served{ margin-top:24px; font-size:13.5px; color:rgba(255,255,255,0.55); max-width:560px; } .page-hero{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%); color:var(--white); padding:74px 0 70px; text-align:center; } .page-hero .eyebrow{color:var(--accent-light)} .page-hero h1{color:var(--white);font-size:42px;margin-bottom:14px} .page-hero p{color:rgba(255,255,255,0.78);font-size:16.5px;max-width:600px;margin:0 auto} /* ========================================================= STAT STRIP ========================================================= */ .stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--grey-border); border-bottom:1px solid var(--grey-border); } .stat-item{ padding:34px 20px; text-align:center; border-right:1px solid var(--grey-border); } .stat-item:last-child{border-right:none} .stat-num{ font-family:var(--serif); font-size:34px; color:var(--navy); display:block; margin-bottom:4px; } .stat-lbl{ font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; } /* ========================================================= TL;DR STRIP (About page) ========================================================= */ .tldr-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; align-items:center; font-family:var(--mono); font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; text-align:center; padding-bottom:28px; margin-bottom:12px; border-bottom:1px solid var(--grey-border); } .tldr-strip .dot{color:var(--grey-border)} /* ========================================================= CARD GRIDS — Categories / Products / Services ========================================================= */ .grid{ display:grid; gap:28px; } .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); overflow:hidden; transition:all var(--transition); } .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; } .img-placeholder{ background:var(--grey-bg); border-bottom:1px dashed var(--grey-border); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--text-muted); overflow:hidden; } .img-placeholder img{width:100%;height:100%;object-fit:cover;display:block} .img-placeholder svg{opacity:0.35} .img-placeholder span{ font-family:var(--mono); font-size:12px; letter-spacing:0.03em; text-transform:uppercase; } .card-body{padding:22px} .card-body h3{font-size:17px;margin-bottom:8px} .card-body p{font-size:12.5px;color:var(--text-muted);margin-bottom:14px;line-height:1.55} .cat-card{ padding:36px 26px; text-align:center; background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); transition:all var(--transition); } .cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:transparent} .cat-icon{ width:60px;height:60px; border-radius:50%; background:rgba(219,138,44,0.12); color:var(--accent-text); display:flex;align-items:center;justify-content:center; margin:0 auto 20px; } .cat-card h3{font-size:19px;margin-bottom:8px} .cat-card p{font-size:14px;color:var(--text-muted)} /* Why choose us / feature list */ .feature-card{ background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); padding:32px 28px; } .feature-icon{ width:48px;height:48px; border-radius:10px; background:var(--navy); color:var(--accent-light); display:flex;align-items:center;justify-content:center; margin-bottom:20px; } .feature-card h3{font-size:18.5px;margin-bottom:10px} .feature-card p{font-size:14.5px;color:var(--text-muted)} /* ========================================================= HOW IT WORKS ========================================================= */ .steps-grid{position:relative} .step-card{text-align:center;padding:10px 12px} .step-num{ display:inline-block; font-family:var(--serif); font-size:42px; color:var(--accent); margin-bottom:14px; } .step-card h3{font-size:19px;margin-bottom:10px} .step-card p{font-size:14.5px;color:var(--text-muted)} /* ========================================================= TESTIMONIALS / TRUST ========================================================= */ .industry-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:36px; } .industry-strip span{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; padding:8px 18px; border-radius:20px; background:var(--white); border:1px solid var(--grey-border); color:var(--navy); } .testimonial-card{ background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); padding:30px 28px; } .testimonial-card .quote{ font-size:15px; color:var(--text-body); margin-bottom:18px; line-height:1.7; } .testimonial-author strong{display:block;font-size:14px;color:var(--navy)} .testimonial-author span{font-size:12.5px;color:var(--text-muted)} .placeholder-note{ margin-top:28px; font-size:12px; color:var(--text-muted); font-style:italic; } /* ========================================================= PRODUCT CATALOGUE — filter bar, pills, cards, modal ========================================================= */ .catalogue-toolbar{ background:var(--grey-bg); border:1px solid var(--grey-border); border-radius:var(--radius); padding:24px 26px; margin-bottom:36px; } .filter-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:18px; margin-bottom:20px; } .filter-field label{ display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:8px; } .filter-field input,.filter-field select{ width:100%; padding:12px 14px; border:1px solid var(--grey-border); border-radius:6px; background:var(--white); font-size:16px; color:var(--navy); min-height:44px; } .filter-field input:focus,.filter-field select:focus{outline:none;border-color:var(--accent)} .avail-toggle{display:flex;gap:6px} .avail-btn{ flex:1; min-height:44px; padding:11px 10px; font-size:13px; font-weight:600; border:1px solid var(--grey-border); border-radius:6px; background:var(--white); color:var(--text-muted); transition:all var(--transition); } .avail-btn.active{background:var(--navy);border-color:var(--navy);color:var(--white)} .avail-btn:not(.active):hover{border-color:var(--navy)} .series-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--grey-border); } .series-lbl{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); } .series-pill{ min-height:40px; padding:8px 18px; border-radius:20px; border:1px solid var(--grey-border); background:var(--white); font-size:13px; font-weight:600; color:var(--navy); transition:all var(--transition); } .series-pill:hover{border-color:var(--accent)} .series-pill.active{background:var(--accent);border-color:var(--accent);color:var(--navy)} .results-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; } .results-count{font-size:14px;color:var(--text-muted)} .results-count strong{color:var(--navy)} .clear-btn{ font-size:13px; font-weight:600; color:var(--accent-text); text-decoration:underline; } .no-results{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted); font-size:15px; } /* Product card additions */ .product-card{cursor:pointer} .product-card .img-placeholder{position:relative} .badge-series{ position:absolute; top:12px;left:12px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; padding:5px 11px; border-radius:20px; background:var(--navy); color:var(--white); } .badge-series.tier-premium{background:var(--accent-dark)} .badge-series.tier-mid{background:var(--navy-light)} .badge-availability{ position:absolute; top:12px;right:12px; font-size:10.5px; font-weight:600; padding:5px 11px; border-radius:20px; background:rgba(255,255,255,0.92); color:var(--text-body); } .badge-availability.stock{color:#1c7a4a} .badge-availability.order{color:var(--accent-text)} .card-topline{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .card-category{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent-text); } .card-code{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); white-space:nowrap; } .card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-top:12px;border-top:1px solid var(--grey-border)} .meta-pill{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.03em; padding:4px 10px; border-radius:20px; background:var(--grey-bg); color:var(--text-muted); } .card-actions{display:flex;gap:8px} .card-actions .btn{flex:1;padding:10px 12px;font-size:12.5px;white-space:nowrap} /* Modal */ .modal-overlay{ display:none; position:fixed; inset:0; background:rgba(12,29,59,0.72); z-index:1200; padding:40px 20px; overflow-y:auto; } .modal-overlay.open{display:flex;align-items:flex-start;justify-content:center} .modal-box{ background:var(--white); border-radius:14px; max-width:760px; width:100%; margin:auto; overflow:hidden; position:relative; } .modal-close{ position:absolute; top:16px;right:16px; width:44px;height:44px; border-radius:50%; background:rgba(19,42,82,0.08); color:var(--navy); display:flex;align-items:center;justify-content:center; font-size:16px; z-index:2; transition:background var(--transition); } .modal-close:hover{background:rgba(19,42,82,0.16)} .modal-media{ aspect-ratio:16/8; background:var(--grey-bg); border-bottom:1px solid var(--grey-border); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--text-muted); position:relative; overflow:hidden; } .modal-media img{width:100%;height:100%;object-fit:cover;display:block} .modal-media span{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; } .modal-body{padding:36px 40px 40px} .modal-badges{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .modal-body h2{font-size:28px;margin-bottom:14px} .modal-desc{font-size:15px;color:var(--text-body);margin-bottom:26px} .spec-table{ width:100%; border:1px solid var(--grey-border); border-radius:8px; overflow:hidden; margin-bottom:22px; } .spec-row{ display:grid; grid-template-columns:180px 1fr; border-bottom:1px solid var(--grey-border); } .spec-row:last-child{border-bottom:none} .spec-row:nth-child(even){background:var(--grey-bg)} .spec-key{ padding:12px 16px; font-size:13px; font-weight:600; color:var(--navy); } .spec-val{ padding:12px 16px; font-size:13.5px; color:var(--text-body); } .modal-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px} .modal-actions{display:flex;gap:14px;flex-wrap:wrap} .modal-actions .btn{flex:1;min-width:160px} /* Services / How We Work list style */ .service-row{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:32px 0; border-bottom:1px solid var(--grey-border); } .service-row:last-child{border-bottom:none} .service-num{ font-family:var(--serif); font-size:32px; color:var(--accent); } .service-text h3{font-size:22px;margin-bottom:10px} .service-text p{font-size:15px;color:var(--text-muted);margin-bottom:14px;max-width:640px} .service-tags{display:flex;gap:10px;flex-wrap:wrap} .tag{ font-family:var(--mono); font-size:11.5px; padding:5px 12px; border-radius:20px; background:var(--grey-bg); color:var(--text-muted); letter-spacing:0.02em; } /* FAQ */ .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .faq-item{ border:1px solid var(--grey-border); border-radius:var(--radius); padding:22px 26px; background:var(--white); } .faq-item summary{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+"; font-size:22px; min-width:22px; text-align:center; color:var(--accent-text); transition:transform var(--transition); } .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item p{margin-top:14px;font-size:14.5px;color:var(--text-muted)} /* ========================================================= CTA BAND (split) ========================================================= */ .cta-band{ background:var(--navy); color:var(--white); border-radius:16px; padding:52px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .cta-band .eyebrow{color:var(--accent-light)} .cta-band h2{color:var(--white);font-size:30px;margin-bottom:10px} .cta-band p{color:rgba(255,255,255,0.75);font-size:15px;max-width:480px} .cta-band-btns{display:flex;flex-direction:column;gap:8px} .cta-band-btns .btns-row{display:flex;gap:14px;flex-wrap:wrap} .bulk-section{ background:var(--grey-bg); } .bulk-inner{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; } .bulk-list{margin-top:22px;display:flex;flex-direction:column;gap:14px} .bulk-list li{ display:flex; gap:12px; font-size:15px; color:var(--text-body); align-items:flex-start; } .bulk-check{ width:22px;height:22px;min-width:22px; border-radius:50%; background:var(--accent); color:#fff; display:flex;align-items:center;justify-content:center; font-size:12px; margin-top:2px; } .bulk-card{ background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-md); } .bulk-card .eyebrow{margin-bottom:8px} .bulk-card h3{font-size:26px;margin-bottom:14px} .bulk-card p{font-size:14.5px;color:var(--text-muted);margin-bottom:24px} .bulk-text .btn{margin-top:28px} .bulk-text .cta-note{display:block;margin-top:10px;font-size:12.5px} .bulk-media{ aspect-ratio:4/3.4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); } .bulk-media img{width:100%;height:100%;object-fit:cover;display:block} /* ========================================================= ABOUT PAGE SPECIFIC ========================================================= */ .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .about-media{ aspect-ratio:4/3.4; background:var(--grey-bg); border:1px dashed var(--grey-border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--text-muted); overflow:hidden; } .about-media img{width:100%;height:100%;object-fit:cover;display:block} .about-media span{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; } .about-text h2{font-size:34px;margin-bottom:18px} .about-text p{margin-bottom:16px;font-size:15.5px} .mission-card{ background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); padding:40px; text-align:center; } .mission-card .cat-icon{margin-bottom:22px} .mission-card h3{font-size:24px;margin-bottom:14px} .mission-card p{font-size:15px;color:var(--text-muted);max-width:520px;margin:0 auto} .trust-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .trust-item{ display:flex; gap:16px; padding:24px; background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); } .trust-item .num{ font-family:var(--serif); font-size:26px; color:var(--accent); min-width:44px; } .trust-item h4{font-size:16.5px;margin-bottom:6px;color:var(--navy)} .trust-item p{font-size:14px;color:var(--text-muted)} /* ========================================================= CONTACT PAGE ========================================================= */ .contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:flex-start; } .contact-form-card{ background:var(--white); border:1px solid var(--grey-border); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-sm); } .contact-form-card h3{font-size:24px;margin-bottom:8px} .contact-form-card>p{font-size:14.5px;color:var(--text-muted);margin-bottom:28px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .form-group{margin-bottom:18px;display:flex;flex-direction:column;gap:8px} .form-group label{font-size:13.5px;font-weight:600;color:var(--navy)} .form-group input,.form-group textarea,.form-group select{ padding:13px 15px; border:1px solid var(--grey-border); border-radius:6px; background:var(--grey-bg); color:var(--text-body); transition:border-color var(--transition),background var(--transition); } .form-group input:focus,.form-group textarea:focus,.form-group select:focus{ outline:none; border-color:var(--accent); background:var(--white); } .form-group textarea{resize:vertical;min-height:120px} .form-legal{font-size:12px;color:var(--text-muted);margin-top:14px;text-align:center} .form-legal a{color:var(--accent-text);text-decoration:underline} .form-msg{ display:none; margin-top:16px; padding:14px 16px; border-radius:6px; font-size:14px; background:rgba(219,138,44,0.12); color:var(--accent-text); border:1px solid rgba(219,138,44,0.3); } .form-msg.show{display:block} .contact-info-card{ background:var(--navy); color:var(--white); border-radius:var(--radius); padding:38px; margin-bottom:24px; } .contact-info-card h3{color:var(--white);font-size:21px;margin-bottom:22px} .info-row{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; } .info-row:last-child{margin-bottom:0} .info-icon{ width:38px;height:38px;min-width:38px; border-radius:8px; background:rgba(255,255,255,0.1); display:flex;align-items:center;justify-content:center; color:var(--accent-light); } .info-row h4{font-size:14px;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px;font-weight:500} .info-row p, .info-row a{font-size:15px;color:var(--white)} .map-placeholder{ aspect-ratio:16/9; background:var(--grey-bg); border:1px dashed var(--grey-border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--text-muted); overflow:hidden; } .map-placeholder iframe,.map-placeholder img{width:100%;height:100%;object-fit:cover;display:block} .map-placeholder span{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; } /* ========================================================= LEGAL PAGES (Privacy / Terms) ========================================================= */ .legal-content{max-width:820px;margin:0 auto} .legal-content h2{font-size:24px;margin:36px 0 14px} .legal-content h2:first-child{margin-top:0} .legal-content p,.legal-content li{font-size:15px;color:var(--text-body);margin-bottom:14px;line-height:1.75} .legal-content ul{list-style:disc;padding-left:22px} .legal-content ul li{margin-bottom:8px} .legal-updated{font-size:13px;color:var(--text-muted);margin-bottom:30px;font-family:var(--mono)} /* ========================================================= FLOATING ACTION BUTTONS ========================================================= */ .float-stack{ position:fixed; right:calc(26px + env(safe-area-inset-right, 0px)); bottom:calc(26px + env(safe-area-inset-bottom, 0px)); z-index:900; display:flex; flex-direction:column; gap:12px; align-items:flex-end; } .float-btn{ display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; color:var(--white); transition:all var(--transition); } .float-btn.whatsapp{background:var(--whatsapp);box-shadow:0 10px 26px rgba(37,211,102,0.35)} .float-btn.whatsapp:hover{background:var(--whatsapp-dark);transform:translateY(-3px)} /* ========================================================= FOOTER ========================================================= */ .site-footer{ background:var(--navy-dark); color:rgba(255,255,255,0.7); padding-top:70px; } .footer-main{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1); } .footer-brand .logo-mark{color:var(--white);font-size:24px} .footer-brand .logo-mark span{color:var(--accent-light)} .footer-brand p{margin-top:16px;font-size:14px;line-height:1.7;color:rgba(255,255,255,0.55);max-width:320px} .footer-social{display:flex;gap:10px;margin-top:20px} .footer-social a{ width:36px;height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex;align-items:center;justify-content:center; transition:background var(--transition); } .footer-social a:hover{background:var(--accent)} .footer-col h4{ font-family:var(--sans); font-weight:600; color:var(--white); font-size:14.5px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:20px; } .footer-col ul{display:flex;flex-direction:column;gap:12px} .footer-col a{font-size:14px;color:rgba(255,255,255,0.6);transition:color var(--transition)} .footer-col a:hover{color:var(--accent-light)} .footer-col p{font-size:14px;color:rgba(255,255,255,0.6);margin-bottom:12px} .footer-bottom{ padding:24px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:rgba(255,255,255,0.45); flex-wrap:wrap; gap:10px; } .footer-bottom a{color:rgba(255,255,255,0.45)} .footer-bottom a:hover{color:var(--accent-light)} /* ========================================================= MISC UTILITIES ========================================================= */ .text-center{text-align:center} .mt-24{margin-top:24px} .mb-24{margin-bottom:24px} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .about-grid, .bulk-inner, .contact-grid{grid-template-columns:1fr} .trust-list{grid-template-columns:1fr} .footer-main{grid-template-columns:1fr 1fr} .filter-row{grid-template-columns:1fr 1fr} } @media (max-width:768px){ section{padding:40px 0} .topbar-left{gap:14px} .topbar-right{display:none} .main-nav{display:none} .header-actions .btn-sm.header-cta{display:none} .hamburger{display:flex} .mobile-menu{display:block} .hero{padding:48px 0} .hero h1{font-size:30px;line-height:1.18;margin-bottom:14px} .hero .eyebrow{font-size:11px;margin-bottom:10px} .hero p.hero-desc{font-size:15px;margin-bottom:20px} .hero-served{font-size:12.5px;margin-top:16px} .page-hero{padding:44px 0 40px} .page-hero h1{font-size:26px;line-height:1.2;margin-bottom:8px} .page-hero p{font-size:14.5px} .section-head{margin-bottom:30px} .section-head h2{font-size:23px;line-height:1.25} .section-head p{font-size:14.5px} .eyebrow{font-size:11px;letter-spacing:0.08em;margin-bottom:8px} .cta-band h2{font-size:22px;line-height:1.25} .cta-band p{font-size:14px} .about-text h2{font-size:24px;line-height:1.25} .mission-card h3{font-size:19px} .bulk-card h3{font-size:20px} .bulk-text h2{font-size:23px;line-height:1.25} .service-text h3{font-size:18px} .feature-card h3{font-size:16px} .cat-card h3{font-size:16.5px} .step-card h3{font-size:16.5px} .modal-body h2{font-size:21px} .stat-strip{grid-template-columns:repeat(2,1fr)} .stat-item{padding:20px 12px;border-bottom:1px solid var(--grey-border)} .stat-num{font-size:26px} .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:repeat(2,1fr);gap:14px} .steps-grid{grid-template-columns:repeat(2,1fr)} .cat-card{padding:22px 16px} .cat-icon{width:46px;height:46px;margin-bottom:12px} .cat-card h3{font-size:15px;margin-bottom:6px} .cat-card p{font-size:12.5px} .step-card{padding:8px 6px} .step-num{font-size:32px;margin-bottom:8px} #productGrid{grid-template-columns:repeat(2,1fr);gap:10px} .card-actions{flex-direction:column;gap:6px} .card-actions .btn{padding:8px 10px;font-size:11px} .card-body{padding:13px} .card-body h3{font-size:13px;line-height:1.25;margin-bottom:5px} .card-body p{display:none} .card-topline{margin-bottom:4px;gap:6px} .card-category{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-code{font-size:8.5px} .card-meta{flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:10px;padding-top:8px} .meta-pill{font-size:8.5px;padding:3px 9px;white-space:nowrap} .badge-series{font-size:8px;padding:4px 8px;letter-spacing:0.02em;top:8px;left:8px} .badge-availability{ width:12px;height:12px;padding:0;border-radius:50%; font-size:0;line-height:0;overflow:hidden; top:10px;right:10px; box-shadow:0 0 0 2px rgba(255,255,255,0.9); background:#1c7a4a; } .badge-availability.order{background:var(--accent-dark)} .cta-band{flex-direction:column;text-align:center;padding:30px 22px;border-radius:12px} .cta-band-btns{align-items:center} .cta-band-btns .btns-row{justify-content:center} .service-row{grid-template-columns:1fr;gap:10px} .form-row{grid-template-columns:1fr} .footer-main{grid-template-columns:1fr;gap:34px} .filter-row{grid-template-columns:1fr} .modal-body{padding:28px 22px 32px} .spec-row{grid-template-columns:140px 1fr} .modal-actions .btn{min-width:0} .modal-overlay{padding:0} .modal-box{border-radius:0;min-height:100%} .grid-2{grid-template-columns:1fr} } @media (max-width:480px){ .hero h1{font-size:26px} .hero-ctas{flex-direction:column;align-items:stretch} .hero-ctas .btn{width:100%} .topbar-inner{padding:8px 16px} .header-main{padding:14px 16px} .container{padding:0 16px} .card-body{padding:20px} .section-head h2{font-size:21px} .cta-band h2{font-size:20px} .page-hero h1{font-size:23px} .modal-actions{flex-direction:column} .modal-actions .btn{width:100%} .cta-band-btns .btns-row{flex-direction:column;width:100%} .cta-band-btns .btns-row .btn{width:100%} } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *{transition-duration:0.01ms !important;animation-duration:0.01ms !important;scroll-behavior:auto !important} }