/* ========================================================================= Varichem Co Ltd — production stylesheet Globals, keyframes and responsive rules extracted from the approved design. Layout/visual styling lives inline on elements (verbatim from the design); this file carries the parts that genuinely need a stylesheet: resets, animations, view routing, interactive states and breakpoints. ========================================================================= */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#fff; font-family:'IBM Plex Sans',sans-serif; color:#15171C; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} ::selection{background:#B41C2A;color:#fff} input,textarea,button{font-family:inherit} /* ---- keyframes (from the design) ---- */ @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes revUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes toastIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes hue{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}} @keyframes dashFlow{to{stroke-dashoffset:-220}} @keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:1}} @keyframes ringSpin{to{transform:rotate(360deg)}} @keyframes sweep{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(160%) skewX(-18deg)}} /* ---- view (page) routing: one screen visible at a time ---- */ .view{display:none;animation:pageIn .45s cubic-bezier(.2,.7,.2,1) both} .view.active{display:block} /* ---- scroll-reveal (progressive enhancement, IntersectionObserver-driven) ---- Content is ALWAYS visible without JS. When JS is present the .js class is set on before paint, so reveal elements start hidden and animate in as they enter the viewport (app.js adds .in). No flash, no blank sections. */ html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)} html.js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html.js .reveal{opacity:1;transform:none;transition:none} .view{animation:none} } /* ---- header scrolled state ---- */ #site-header.scrolled{ background:rgba(255,255,255,.9); box-shadow:0 1px 0 #E7E9ED, 0 10px 30px -22px rgba(20,23,30,.5); } /* ---- primary nav active / inactive ---- */ .nav-link{color:#434C58;font-weight:500;background:transparent} .nav-link.active{color:#B41C2A;font-weight:600;background:#FBEDEE} .nav-link-m{color:#434C58;font-weight:500;background:transparent} .nav-link-m.active{color:#B41C2A;font-weight:600;background:#FBEDEE} /* ========================================================================= Responsive — these replace the width values the original computed in JS (narrow = viewport < 880px). ========================================================================= */ /* mobile-first defaults (< 880px) */ .nav-desktop{display:none} .search-desktop{display:none} .enquiry-desktop{display:none} .hamburger{display:inline-flex} .hero-grid{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} @media (min-width:880px){ .nav-desktop{display:flex} .search-desktop{display:flex} .enquiry-desktop{display:inline-flex} .hamburger{display:none} .hero-grid{grid-template-columns:1.12fr .88fr} .contact-grid{grid-template-columns:1.25fr .75fr} } /* keep the address/postcode pair from getting too cramped on small screens */ @media (max-width:420px){ .addr-grid{grid-template-columns:1fr} } /* ========================================================================= Fancy hero backgrounds — applied to every internal-page hero. Layered: gradient base · drifting glow orbs · hex lattice · light sweep · slowly-rotating molecule. Content sits above via z-index. ========================================================================= */ .hero{position:relative;overflow:hidden;background:radial-gradient(125% 95% at 82% -5%, #17222e 0%, #0E1116 52%, #0A0C10 100%);} .hero > div:not(.hero-deco){position:relative;z-index:2;} .hero-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;} .hero-deco .orb{position:absolute;border-radius:50%;} .hero-deco .orb-red{top:-170px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(180,28,42,.34),transparent 62%);animation:hue 9s ease-in-out infinite;} .hero-deco .orb-teal{bottom:-190px;left:-130px;width:470px;height:470px;background:radial-gradient(circle,rgba(12,124,132,.30),transparent 64%);animation:hue 12s ease-in-out infinite reverse;} .hero-hex{position:absolute;inset:0;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48'%3E%3Cpath d='M14 .5 L42 .5 L56 24 L42 47.5 L14 47.5 L0 24 Z' fill='none' stroke='%237FBCC8' stroke-width='1'/%3E%3C/svg%3E");background-size:95px 82px;} .hero-scan{position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(127,188,200,.07),transparent);animation:sweep 11s ease-in-out infinite;} .hero-mol{position:absolute;top:50%;right:-30px;width:min(440px,44%);transform:translateY(-50%);opacity:.5;} .hero-mol .mol-rot{animation:ringSpin 64s linear infinite;} .hero-mol .mol-dash{animation:dashFlow 3.2s linear infinite;} .hero-mol .mol-glow{animation:glowPulse 2.6s ease-in-out infinite;} @media (max-width:880px){ .hero-mol{opacity:.24;right:-90px;width:62%;} .hero-deco .orb-red{width:360px;height:360px;} .hero-deco .orb-teal{width:320px;height:320px;} } @media (prefers-reduced-motion: reduce){ .hero-deco .orb,.hero-scan,.hero-mol .mol-rot,.hero-mol .mol-dash,.hero-mol .mol-glow{animation:none;} } /* ========================================================================= Feature-card graphic panels — replace the low-res photos with crisp, on-brand SVG art (sharp at any size, never a broken image). ========================================================================= */ .card-art{position:relative;aspect-ratio:16/7;overflow:hidden;background:radial-gradient(120% 135% at 78% -15%, #1a2733 0%, #0E1116 58%, #0A0C10 100%);} .card-art svg{position:absolute;inset:0;width:100%;height:100%;display:block;} .card-art .art-dash{animation:dashFlow 4s linear infinite;} .card-art .art-glow{animation:glowPulse 3s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){ .card-art .art-dash,.card-art .art-glow{animation:none;} }