/* =========================================================================== ALQAFILA AMNA LIMITED — design system Chinese-first typography, English secondary. =========================================================================== */ :root{ /* palette */ --ink:#0B0E13; --ink-2:#141922; --ink-3:#1E2530; --paper:#FFFFFF; --sand:#F6F4F0; --sand-2:#EFEBE4; --red:#C8322F; --red-2:#E04B44; --red-soft:rgba(200,50,47,.10); --gold:#C6A15B; --muted:#6C7480; --line:rgba(11,14,19,.12); --line-light:rgba(255,255,255,.16); /* type */ --ff-zh:'Noto Sans SC',system-ui,sans-serif; --ff-en:'Manrope',system-ui,sans-serif; --ff-body:var(--ff-zh),var(--ff-en); --ff-display:var(--ff-zh),var(--ff-en); /* metrics */ --wrap:1240px; --gutter:1.5rem; --header-h:88px; --header-h-stuck:66px; --radius:14px; --ease:cubic-bezier(.16,1,.3,1); } /* the Latin face leads when the visitor picks English */ html[lang="en"]{ --ff-body:var(--ff-en),var(--ff-zh); --ff-display:var(--ff-en),var(--ff-zh); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%; overflow-x:hidden;max-width:100%;scroll-padding-top:var(--header-h-stuck); } /* Note: the horizontal guard lives on only. Putting overflow on turns it into a scroll container, which stops position:sticky on the header from sticking to the viewport. */ body{ font-family:var(--ff-body);background:var(--paper);color:var(--ink); line-height:1.8;max-width:100%; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.3;font-weight:800;letter-spacing:-.01em} a{color:inherit;text-decoration:none} img,svg,video,iframe{max-width:100%} button,input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px} ::selection{background:var(--red);color:#fff} .wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto} /* overflow-x:clip contains the sideways reveal transforms without turning the section into a scroll container — overflow:hidden here would break the sticky header the same way it did on . */ .sec{padding:clamp(64px,9vw,120px) 0;overflow-x:clip} .sec--sand{background:var(--sand)} .sec--ink{background:var(--ink);color:#fff} /* ---------------------------------------------------------------- headings */ .head{max-width:680px;margin-bottom:clamp(36px,5vw,56px)} .head--center{margin-inline:auto;text-align:center} .kicker{ display:inline-flex;align-items:center;gap:10px;color:var(--red); font-weight:700;font-size:.9rem;letter-spacing:.04em;margin-bottom:14px; } .kicker::before{content:"";width:24px;height:2px;background:var(--red);flex:none} .head--center .kicker{justify-content:center} .sec--ink .kicker{color:var(--gold)} .sec--ink .kicker::before{background:var(--gold)} .head h2{font-size:clamp(1.7rem,3.6vw,2.6rem)} .head p{color:var(--muted);margin-top:14px;font-size:1.02rem} .sec--ink .head p{color:rgba(255,255,255,.66)} /* ---------------------------------------------------------------- buttons */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 26px;border:0;border-radius:8px;cursor:pointer;overflow:hidden;isolation:isolate; font-family:var(--ff-display);font-weight:700;font-size:.98rem;white-space:nowrap; transition:transform .3s var(--ease),background .25s ease,color .25s ease,box-shadow .25s ease; } .btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn::before{ content:"";position:absolute;inset-block:0;left:-120%;width:55%;z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-18deg);transition:left .65s ease; } .btn:hover::before{left:130%} .btn:active{transform:scale(.98)} .btn-red{background:var(--red);color:#fff;box-shadow:0 12px 28px -16px rgba(200,50,47,.9)} .btn-red:hover{background:var(--red-2);transform:translateY(-2px)} .btn-ink{background:var(--ink);color:#fff} .btn-ink:hover{background:var(--ink-3);transform:translateY(-2px)} .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.08)} .btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)} .btn-sm{padding:10px 18px;font-size:.88rem} /* ================================================================== TOP BAR Sits above the header and scrolls away with the page. ========================================================================= */ .topbar{ position:relative;z-index:60;background:var(--ink);color:rgba(255,255,255,.76); font-size:.84rem;transition:opacity .4s ease; } .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;flex-wrap:wrap} .tb-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .tb-left span{display:inline-flex;align-items:center;gap:7px} .tb-left svg{width:14px;height:14px;color:var(--gold);flex:none} .tb-left a:hover{color:#fff} .tb-right{display:flex;align-items:center;gap:8px} /* language switch */ .lang{display:flex;align-items:center;background:rgba(255,255,255,.09);border-radius:999px;padding:3px} .lang a{ padding:4px 13px;border-radius:999px;font-size:.8rem;font-weight:700; color:rgba(255,255,255,.7);transition:background .25s ease,color .25s ease; } .lang a.on{background:var(--red);color:#fff} .lang a:not(.on):hover{color:#fff} .tb-link{ display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:6px; font-weight:600;transition:background .25s ease,color .25s ease; } .tb-link svg{width:14px;height:14px} .tb-link:hover{background:rgba(255,255,255,.1);color:#fff} .tb-link--accent{background:var(--red);color:#fff} .tb-link--accent:hover{background:var(--red-2);color:#fff} /* =================================================================== HEADER At scroll 0 the header has no surface of its own: it sits directly on the hero image and reads as part of it. Past the threshold it lifts into a floating bar with its own background, and the palette flips to dark-on-light. ========================================================================= */ .hdr{ position:sticky;top:0;z-index:80; transition:transform .45s var(--ease),padding .35s var(--ease); will-change:transform; } .hdr-inner{ display:flex;align-items:center;justify-content:space-between;gap:24px; height:var(--header-h);padding-inline:0;border-radius:0; background:transparent;border:1px solid transparent; transition:height .4s var(--ease),background .4s ease,box-shadow .4s ease, padding .4s var(--ease),border-color .4s ease,backdrop-filter .4s ease; } /* floating state */ .hdr.stuck{padding-top:12px} .hdr.stuck .hdr-inner{ height:var(--header-h-stuck);padding-inline:22px;border-radius:999px; background:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-color:var(--line); box-shadow:0 18px 40px -26px rgba(11,14,19,.45); } /* hide the bar when scrolling down, bring it back on the way up */ .hdr.hide{transform:translateY(calc(-100% - 20px))} /* brand */ /* The brand must be allowed to shrink: with flex:none a long Chinese company name pushes the burger past the right edge on a 320px screen. */ .brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto} .brand-mark{width:42px;height:42px;flex:none;transition:transform .4s var(--ease)} .brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05)} .brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2;overflow:hidden} .brand-zh,.brand-en{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-zh{font-family:var(--ff-display);font-weight:800;font-size:1.06rem} .brand-en{ font-family:var(--ff-en);font-size:.6rem;letter-spacing:.2em;font-weight:700; color:var(--red); } /* nav links — light while over the hero, dark once the bar is solid */ .nav{display:none;align-items:center;gap:2px} .nav a{ position:relative;padding:10px 15px;border-radius:7px;font-weight:600;font-size:.96rem; color:rgba(255,255,255,.88);transition:color .3s ease; } .nav a::after{ content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px; background:var(--red);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease); } .nav a:hover::after,.nav a.active::after{transform:scaleX(1)} .nav a:hover,.nav a.active{color:#fff} .hdr-actions{display:flex;align-items:center;gap:10px;flex:none} .nav{flex:none} .hdr-cta{display:none} /* colour flip once the header is floating */ .hdr.stuck .brand-zh{color:var(--ink)} .hdr.stuck .nav a{color:var(--ink-2)} .hdr.stuck .nav a:hover,.hdr.stuck .nav a.active{color:var(--red)} .hdr.stuck .burger i{background:var(--ink)} /* burger */ .burger{ width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent; cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px; } .burger span{display:grid;gap:5px;width:22px} .burger i{ display:block;height:2px;background:#fff;border-radius:2px; transition:transform .4s var(--ease),opacity .25s ease,width .3s ease; } .burger i:nth-child(2){width:70%;margin-inline-start:auto} .burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.on i:nth-child(2){opacity:0;transform:translateX(12px)} .burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* =================================================================== DRAWER */ .scrim{ position:fixed;inset:0;z-index:90;background:rgba(6,9,14,.6); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s; } .scrim.on{opacity:1;visibility:visible} .drawer{ position:fixed;inset-block:0;right:0;z-index:95; width:min(86vw,330px);max-width:100%; background:var(--ink);color:rgba(255,255,255,.8); padding:22px 20px calc(28px + env(safe-area-inset-bottom)); display:flex;flex-direction:column; overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; transform:translateX(112%);visibility:hidden;pointer-events:none; transition:transform .5s var(--ease),visibility .5s; box-shadow:-30px 0 70px rgba(0,0,0,.5); } .drawer.open{transform:translateX(0);visibility:visible;pointer-events:auto} .drawer-top{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding-bottom:18px;border-bottom:1px solid var(--line-light); } .drawer-top .brand-zh{color:#fff} .drawer-close{ position:relative;width:42px;height:42px;flex:none;border-radius:50%;cursor:pointer; border:1.5px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);color:#fff; font-size:0;transition:background .3s ease,transform .35s var(--ease),border-color .3s ease; } .drawer-close::before,.drawer-close::after{ content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;border-radius:2px; background:currentColor; } .drawer-close::before{transform:translate(-50%,-50%) rotate(45deg)} .drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg)} .drawer-close:hover{background:var(--red);border-color:var(--red);transform:rotate(90deg)} .drawer nav{display:flex;flex-direction:column;margin-top:20px} .drawer nav a{ display:flex;align-items:center;min-height:50px;padding:12px 2px; font-family:var(--ff-display);font-weight:700;font-size:1.02rem;color:#fff; border-bottom:1px solid rgba(255,255,255,.08); opacity:0;transform:translateY(14px); transition:opacity .45s ease,transform .5s var(--ease),color .25s ease; } .drawer.open nav a{opacity:1;transform:none} .drawer.open nav a:nth-child(1){transition-delay:.10s} .drawer.open nav a:nth-child(2){transition-delay:.15s} .drawer.open nav a:nth-child(3){transition-delay:.20s} .drawer.open nav a:nth-child(4){transition-delay:.25s} .drawer.open nav a:nth-child(5){transition-delay:.30s} .drawer.open nav a:nth-child(6){transition-delay:.35s} .drawer nav a:hover{color:var(--red-2)} .drawer-foot{margin-top:auto;padding-top:22px;display:grid;gap:12px;font-size:.9rem} .drawer-foot a{display:flex;align-items:center;gap:10px;min-height:42px;overflow-wrap:anywhere} .drawer-foot svg{width:16px;height:16px;color:var(--gold);flex:none} .drawer-foot .btn{width:100%} /* ===================================================================== HERO Three full-bleed photographs that cross-fade behind the copy. ========================================================================= */ .hero{ position:relative;isolation:isolate;overflow:hidden;color:#fff; min-height:clamp(600px,96vh,940px);display:flex;align-items:center; margin-top:calc(-1 * var(--header-h) - 12px); padding-top:calc(var(--header-h) + 12px); background:var(--ink); } .hero-slides{position:absolute;inset:0;z-index:-4;overflow:hidden;background:var(--ink)} .hero-slide{ position:absolute;inset:0;background-position:center;background-size:cover; opacity:0;transform:scale(1.08); transition:opacity 1.5s cubic-bezier(.4,0,.2,1); will-change:opacity,transform; } .hero-slide.on{opacity:1;animation:heroPan 9s linear forwards} @keyframes heroPan{ from{transform:scale(1.08) translate3d(-1.5%,0,0)} to{transform:scale(1.14) translate3d(1.5%,0,0)} } .hero-veil{ position:absolute;inset:0;z-index:-3; background: linear-gradient(to bottom,rgba(11,14,19,.86) 0%,rgba(11,14,19,.44) 26%, rgba(11,14,19,.36) 56%,rgba(11,14,19,.72) 88%,rgba(11,14,19,.94) 100%), linear-gradient(to right,rgba(11,14,19,.84) 0%,rgba(11,14,19,.42) 42%,rgba(11,14,19,.06) 78%); } .hero-vignette{ position:absolute;inset:0;z-index:-2; background:radial-gradient(118% 84% at 50% 44%,rgba(11,14,19,0) 46%,rgba(11,14,19,.5) 100%); } .hero-grid{ position:absolute;inset:0;z-index:-1;opacity:.45; background-image: linear-gradient(rgba(198,161,91,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(198,161,91,.10) 1px,transparent 1px); background-size:80px 80px; -webkit-mask-image:radial-gradient(74% 62% at 50% 42%,#000 14%,transparent 100%); mask-image:radial-gradient(74% 62% at 50% 42%,#000 14%,transparent 100%); } .hero-inner{position:relative;z-index:1;padding-block:clamp(70px,10vw,110px)} .hero-copy{max-width:min(100%,780px)} .hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-radius:999px;padding:8px 18px;font-size:.87rem;font-weight:600;margin-bottom:24px; } .hero-eyebrow::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--red-2);flex:none; box-shadow:0 0 0 0 rgba(224,75,68,.75);animation:pulse 2.4s ease-out infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(224,75,68,.7)} 70%{box-shadow:0 0 0 12px rgba(224,75,68,0)} 100%{box-shadow:0 0 0 0 rgba(224,75,68,0)} } .hero h1{ font-size:clamp(2rem,5.4vw,3.8rem);font-weight:800;line-height:1.24; text-shadow:0 2px 34px rgba(0,0,0,.4); } .hero h1 .hl{ position:relative;color:var(--gold);white-space:nowrap; } .hero p{ color:rgba(255,255,255,.84);font-size:clamp(.98rem,1.5vw,1.12rem); margin-top:22px;max-width:60ch;text-shadow:0 1px 18px rgba(0,0,0,.45); } .hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px} /* slide indicators */ .hero-ticks{display:flex;gap:10px;margin-top:44px} .hero-ticks button{ position:relative;width:56px;height:3px;border:0;padding:0;cursor:pointer; border-radius:99px;background:rgba(255,255,255,.26);overflow:hidden; -webkit-tap-highlight-color:transparent;transition:background .3s ease; } .hero-ticks button::after{ content:"";position:absolute;inset:0;background:var(--gold); transform:scaleX(0);transform-origin:left;border-radius:99px; } .hero-ticks button.on::after{animation:tick var(--hero-ms,7s) linear forwards} @keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hero-ticks button:hover{background:rgba(255,255,255,.45)} .hero-scroll{ position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2; display:grid;place-items:center;gap:6px; color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:.14em; } .hero-scroll svg{width:19px;height:19px;animation:bob 2.2s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* ==================================================================== STATS */ .stats{background:var(--ink-2);color:#fff;position:relative;z-index:2} .stats .wrap{ display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:rgba(255,255,255,.1); } .stat{background:var(--ink-2);padding:34px 20px;text-align:center} .stat b{ display:block;font-family:var(--ff-display);font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--gold);line-height:1; } .stat span{display:block;margin-top:8px;font-size:.88rem;color:rgba(255,255,255,.62)} /* ==================================================================== ABOUT */ .about{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,70px);align-items:center} .about-media{position:relative} .about-photo{ position:relative;margin:0;border-radius:var(--radius);overflow:hidden; aspect-ratio:4/5;box-shadow:0 44px 80px -52px rgba(11,14,19,.8); } .about-photo img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.2s var(--ease)} .about-media:hover .about-photo img{transform:scale(1.05)} .about-badge{ position:absolute;right:-20px;bottom:30px;background:var(--red);color:#fff; border-radius:12px;padding:18px 24px;text-align:center; box-shadow:0 26px 50px -26px rgba(200,50,47,.9); } .about-badge b{display:block;font-family:var(--ff-display);font-size:1.8rem;line-height:1} .about-badge span{font-size:.78rem;opacity:.9} .about-body p{color:var(--muted);margin-top:16px} .about-points{list-style:none;display:grid;gap:14px;margin-top:28px} .about-points li{display:flex;gap:12px;align-items:flex-start} .about-points svg{width:22px;height:22px;color:var(--red);flex:none;margin-top:4px} .about-points b{display:block;font-family:var(--ff-display);font-size:.98rem} .about-points span{font-size:.9rem;color:var(--muted)} /* ================================================================= PRODUCTS */ .filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px} .filters button{ border:1px solid var(--line);background:var(--paper);border-radius:999px; padding:10px 20px;cursor:pointer;font-family:var(--ff-display);font-weight:600; font-size:.92rem;color:var(--muted);transition:.25s;white-space:nowrap; } .filters button:hover{border-color:var(--ink);color:var(--ink)} .filters button.on{background:var(--ink);border-color:var(--ink);color:#fff} .grid-p{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{ position:relative;border:1px solid var(--line);border-radius:var(--radius); background:var(--paper);padding:30px 26px 28px;overflow:hidden;isolation:isolate; transition:transform .4s var(--ease),box-shadow .4s ease,border-color .3s ease; } .card::before{ content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;z-index:-1; border-radius:50%;background:radial-gradient(circle,var(--red-soft),transparent 70%); transform:scale(.5);transition:transform .7s var(--ease); } .card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -40px rgba(11,14,19,.5);border-color:rgba(200,50,47,.3)} .card:hover::before{transform:scale(1.25)} .card-ico{ width:56px;height:56px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(145deg,var(--ink),var(--ink-3)); box-shadow:0 14px 26px -16px rgba(11,14,19,.9); transition:transform .45s var(--ease),background .35s ease; } .card:hover .card-ico{transform:translateY(-4px) rotate(-5deg);background:linear-gradient(145deg,var(--red),var(--red-2))} .card-ico svg{width:26px;height:26px;color:var(--gold);transition:color .35s ease} .card:hover .card-ico svg{color:#fff} .card-media{ margin:-30px -26px 18px;aspect-ratio:16/10;overflow:hidden;background:var(--sand); } .card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)} .card:hover .card-media img{transform:scale(1.07)} .card h3{font-size:1.06rem;margin-bottom:8px} .card p{font-size:.9rem;color:var(--muted)} .card .badge{ position:absolute;top:16px;right:16px;background:var(--red);color:#fff; font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:5px;letter-spacing:.02em; } .empty{ grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted); border:1px dashed var(--line);border-radius:var(--radius); } /* ================================================== WHOLESALE / TRADE / WHY */ .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .feats--3{grid-template-columns:repeat(3,1fr)} .feat{ position:relative;padding:32px 26px;border-radius:var(--radius);overflow:hidden;isolation:isolate; background:var(--paper);border:1px solid var(--line); transition:transform .4s var(--ease),box-shadow .4s ease,border-color .3s ease; } .sec--ink .feat{background:rgba(255,255,255,.04);border-color:var(--line-light)} .sec--sand .feat{background:var(--paper)} .feat:hover{transform:translateY(-7px);box-shadow:0 32px 56px -40px rgba(11,14,19,.55)} .sec--ink .feat:hover{border-color:rgba(198,161,91,.4);background:rgba(255,255,255,.07)} .feat-ico{ width:54px;height:54px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; background:var(--red-soft);color:var(--red); transition:transform .45s var(--ease),background .35s ease,color .35s ease; } .sec--ink .feat-ico{background:rgba(198,161,91,.14);color:var(--gold)} .feat:hover .feat-ico{transform:translateY(-4px) scale(1.06);background:var(--red);color:#fff} .feat-ico svg{width:25px;height:25px} .feat h3{font-size:1.04rem;margin-bottom:8px} .feat p{font-size:.9rem;color:var(--muted)} .sec--ink .feat p{color:rgba(255,255,255,.64)} /* ================================================================== PROCESS */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:step} .step{position:relative;padding-top:8px} .step::before{ content:"";position:absolute;top:26px;left:56px;right:-26px;height:1px; background:linear-gradient(90deg,var(--line),transparent); } .step:last-child::before{display:none} .step .num{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; font-family:var(--ff-display);font-weight:800;font-size:1.12rem;margin-bottom:18px; background:var(--paper);border:1px solid var(--line);color:var(--ink); transition:transform .4s var(--ease),background .35s ease,color .35s ease,border-color .3s; } .sec--sand .step .num{background:var(--paper)} .step:hover .num{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.08)} .step h3{font-size:1rem;margin-bottom:7px} .step p{font-size:.88rem;color:var(--muted)} /* ================================================================== CONTACT */ .contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,60px);align-items:start} .info-list{display:grid;gap:16px;margin-top:30px} .info{display:flex;gap:15px;align-items:flex-start} .info-ic{ width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex:none; background:var(--red-soft);color:var(--red); } .sec--ink .info-ic{background:rgba(198,161,91,.14);color:var(--gold)} .info-ic svg{width:21px;height:21px} .info b{display:block;font-family:var(--ff-display);font-size:.92rem} .info span{font-size:.94rem;color:var(--muted)} .sec--ink .info span{color:rgba(255,255,255,.66)} .info a:hover{color:var(--red)} .sec--ink .info a:hover{color:var(--gold)} .form-box{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(24px,3vw,36px);box-shadow:0 30px 60px -48px rgba(11,14,19,.6); } .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{margin-bottom:16px} .field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px} .field input,.field textarea{ width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:9px; background:var(--paper);font-family:var(--ff-body);transition:border-color .25s ease,box-shadow .25s ease; } .field textarea{min-height:130px;resize:vertical} .field input:focus,.field textarea:focus{ outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(200,50,47,.12); } .field .err{display:none;color:var(--red);font-size:.82rem;margin-top:5px} .field.bad input,.field.bad textarea{border-color:var(--red)} .field.bad .err{display:block} .form-box .btn{width:100%} /* =================================================================== FOOTER */ .ftr{background:var(--ink);color:rgba(255,255,255,.64);padding-top:clamp(52px,6vw,76px)} .ftr-grid{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px; padding-bottom:44px; } .ftr h4{color:#fff;font-size:.98rem;margin-bottom:18px} .ftr ul{list-style:none;display:grid;gap:10px;font-size:.92rem} .ftr ul a{display:inline-block;transition:color .25s ease,transform .25s ease} .ftr ul a:hover{color:var(--gold);transform:translateX(4px)} .ftr .tagline{font-size:.92rem;margin:16px 0 20px;max-width:38ch} .ftr-contact{display:grid;gap:11px;font-size:.92rem} .ftr-contact a{display:flex;align-items:center;gap:10px;overflow-wrap:anywhere} .ftr-contact svg{width:16px;height:16px;color:var(--gold);flex:none} .ftr-contact a:hover{color:#fff} .ftr-btm{ border-top:1px solid var(--line-light);padding:22px 0; display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;font-size:.85rem; } /* ===================================================================== MISC */ .fab{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:70;display:grid;gap:10px} .to-top{ width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center; background:var(--ink);color:#fff;box-shadow:0 16px 30px -16px rgba(11,14,19,.8); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .35s ease,visibility .35s,transform .35s var(--ease),background .25s; } .to-top.on{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--red);transform:translateY(-3px)} .to-top svg{width:19px;height:19px} .toast{ position:fixed;left:50%;bottom:26px;transform:translate(-50%,24px);z-index:120; display:flex;align-items:center;gap:11px;max-width:min(92vw,460px); background:var(--ink);color:#fff;border-radius:11px;padding:15px 20px;font-size:.92rem; box-shadow:0 28px 54px -26px rgba(0,0,0,.8); opacity:0;visibility:hidden;transition:opacity .35s ease,transform .45s var(--ease),visibility .35s; } .toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)} .toast svg{width:20px;height:20px;color:var(--gold);flex:none} .toast.bad svg{color:var(--red-2)} /* =========================================================================== MOTION =========================================================================== */ /* hero copy enters in sequence once the page is painted */ [data-rise]{ opacity:0;transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); } .hero.ready [data-rise]{opacity:1;transform:none} .hero.ready [data-rise="1"]{transition-delay:.12s} .hero.ready [data-rise="2"]{transition-delay:.24s} .hero.ready [data-rise="3"]{transition-delay:.36s} .hero.ready [data-rise="4"]{transition-delay:.48s} .hero.ready [data-rise="5"]{transition-delay:.60s} /* reveal on scroll */ .rv{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease),transform .85s var(--ease)} .rv.in{opacity:1;transform:none} .rv[data-rv="left"]{transform:translateX(-32px)} .rv[data-rv="right"]{transform:translateX(32px)} @supports not (overflow-x: clip){ /* Older engines: fall back to a vertical reveal so nothing can overhang. */ .rv[data-rv="left"],.rv[data-rv="right"]{transform:translateY(34px)} } .rv[data-rv="scale"]{transform:scale(.94)} .rv[data-rv="left"].in,.rv[data-rv="right"].in,.rv[data-rv="scale"].in{transform:none} /* staggered children inside a grid */ .stagger > *{ opacity:0;transform:translateY(28px); transition:opacity .75s var(--ease),transform .75s var(--ease); transition-delay:calc(var(--i,0) * 80ms); } .stagger.in > *{opacity:1;transform:none} /* the gold rule under a kicker draws itself in */ .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .1s} .rv.in .kicker::before,.head.in .kicker::before,.stagger.in .kicker::before{transform:scaleX(1)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } [data-rise],.rv,.stagger > *{opacity:1!important;transform:none!important} } /* =========================================================================== RESPONSIVE Grid and flex children need min-width:0 or the browser refuses to shrink them below their content width — the usual cause of a page wider than the screen. Long unbroken strings (emails, URLs) get overflow-wrap. =========================================================================== */ .hero-copy > *,.about > *,.contact-grid > *,.ftr-grid > *, .card > *,.feat > *,.step > *,.info > *,.stat > *{min-width:0} .info span,.info a,.ftr-contact a,.tb-left a,.drawer-foot a{overflow-wrap:anywhere} @media (min-width:992px){ .nav{display:flex} .hdr-cta{display:inline-flex} .burger{display:none} .drawer,.scrim{display:none} } @media (max-width:1100px){ .grid-p{grid-template-columns:repeat(2,1fr)} .feats{grid-template-columns:repeat(2,1fr)} .ftr-grid{grid-template-columns:1fr 1fr;gap:32px} } @media (max-width:860px){ .about{grid-template-columns:1fr;gap:34px} .about-media{order:-1;max-width:460px} .contact-grid{grid-template-columns:1fr} .steps{grid-template-columns:repeat(2,1fr);gap:30px} .step::before{display:none} .stats .wrap{grid-template-columns:repeat(2,1fr)} .tb-left{display:none} .topbar .wrap{justify-content:center} } @media (max-width:620px){ :root{--header-h:72px;--header-h-stuck:60px} .hero{min-height:clamp(540px,88vh,760px)} .hero h1{font-size:clamp(1.7rem,7.4vw,2.3rem)} .hero h1 .hl{white-space:normal} .hero p{font-size:.98rem;margin-top:18px} .hero-actions{gap:10px;margin-top:28px} .hero-actions .btn{flex:1 1 100%} .hero-ticks{margin-top:34px} .hero-ticks button{width:44px} .grid-p{grid-template-columns:1fr;gap:16px} .feats,.feats--3{grid-template-columns:1fr} .ftr-grid{grid-template-columns:1fr;gap:30px} .row2{grid-template-columns:1fr} .about-badge{right:14px;bottom:14px;padding:13px 18px} .about-badge b{font-size:1.4rem} .card-media{margin:-30px -26px 18px} /* the filter row scrolls sideways rather than stacking */ .filters{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);padding-bottom:4px; } .filters::-webkit-scrollbar{display:none} .filters button{flex:none} } @media (max-width:400px){ :root{--gutter:1.1rem} .hdr-inner{gap:10px} .brand{gap:9px} .stats .wrap{grid-template-columns:1fr} .brand-mark{width:36px;height:36px} .brand-zh{font-size:.98rem} .drawer{width:min(92vw,310px)} .ftr-btm{flex-direction:column;text-align:center} } /* touch devices: comfortable hit areas, no hover-only affordances */ @media (hover:none){ .btn,.nav a,.drawer nav a,.filters button,.tb-link,.lang a{min-height:44px} .lang a{display:inline-flex;align-items:center} .card:hover,.feat:hover,.step:hover .num{transform:none} .hero-ticks button{min-height:44px;padding-block:20px;background-clip:content-box} } @supports (padding: max(0px)){ .wrap{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))} }