/* ========================================================================== Custom Notebook Manufacturer - Design System Visual direction: "Paper & Press" - warm paper tones, ink accents, editorial typography. Deliberately unlike generic blue/white B2B templates. ========================================================================== */ /* 字体由 header.php 以非阻塞方式加载（media="print" onload 技巧），此处不 @import */ :root { /* Paper tones */ --paper-00: #fffdf9; --paper-01: #faf6ef; --paper-02: #f2ebe0; --paper-03: #e6dccd; --paper-04: #d4c7b2; /* Ink tones */ --ink-900: #16130f; --ink-800: #241f18; --ink-700: #3a332a; --ink-600: #554c40; --ink-500: #766a5b; --ink-400: #9a8d7c; /* Accent - press red (ink stamp) */ --press-600: #9c2b21; --press-500: #c0392b; --press-400: #d9544a; --press-100: #fbeceb; /* Accent - foil gold (premium binding) */ --foil-600: #8a6d24; --foil-500: #b8912f; --foil-400: #d4af52; --foil-100: #f8f1dd; /* Accent - thread green (sewn binding) */ --thread-600: #2c5545; --thread-500: #3d7a63; --thread-100: #e6f0ec; --white: #ffffff; /* Typography */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Layout */ --wrap: 1240px; --wrap-narrow: 820px; --radius-sm: 4px; --radius: 10px; --radius-lg: 18px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(22, 19, 15, .06), 0 2px 8px rgba(22, 19, 15, .04); --shadow: 0 2px 6px rgba(22, 19, 15, .07), 0 12px 32px rgba(22, 19, 15, .07); --shadow-lg: 0 8px 20px rgba(22, 19, 15, .09), 0 30px 60px rgba(22, 19, 15, .11); --ease: cubic-bezier(.22, .61, .36, 1); /* measured at runtime by main.js so RTL/CJK font stacks cannot overlap the drawer */ --header-h: 62px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--ink-700); background: var(--paper-01); -webkit-font-smoothing: antialiased; } /* Clip the off-canvas nav on both elements: setting overflow-x on alone is ignored when stays visible, which still produces a scrollbar. */ html, body { overflow-x: hidden; max-width: 100%; } img { max-width: 100%; height: auto; display: block; } a { color: var(--press-600); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--press-400); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--sp-4); } h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } h4 { font-size: 1.08rem; } p { margin: 0 0 var(--sp-4); } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; } li { margin-bottom: .4rem; } table { border-collapse: collapse; width: 100%; } /* ---------- Layout ---------- */ /* Grid/flex children default to min-width:auto and refuse to shrink below their content, which is the usual cause of mobile horizontal overflow. */ .grid > *, .split > *, .hero-grid > *, .quote-shell > * { min-width: 0; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); } .wrap-narrow { max-width: var(--wrap-narrow); } .section { padding: var(--sp-9) 0; position: relative; } .section-sm { padding: var(--sp-8) 0; } .section--paper { background: var(--paper-02); } .section--white { background: var(--paper-00); } .section--ink { background: var(--ink-900); color: var(--paper-03); } .section--ink h2, .section--ink h3 { color: var(--paper-00); } .grid { display: grid; gap: var(--sp-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Eyebrow / section heads ---------- */ .eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--press-600); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--press-500); display: inline-block; } .section--ink .eyebrow { color: var(--foil-400); } .section--ink .eyebrow::before { background: var(--foil-500); } .section-head { max-width: 720px; margin-bottom: var(--sp-7); } .section-head p { font-size: 1.06rem; color: var(--ink-500); margin-bottom: 0; } .section--ink .section-head p { color: var(--paper-04); } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: .85rem 1.7rem; font-family: var(--font-body); font-size: .96rem; font-weight: 600; letter-spacing: .01em; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: all .25s var(--ease); text-align: center; } .btn-primary { background: var(--press-600); color: var(--white); border-color: var(--press-600); } .btn-primary:hover { background: var(--press-500); border-color: var(--press-500); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-outline { background: transparent; color: var(--ink-900); border-color: var(--ink-400); } .btn-outline:hover { border-color: var(--ink-900); color: var(--ink-900); background: var(--paper-02); } .btn-light { background: var(--paper-00); color: var(--ink-900); border-color: var(--paper-00); } .btn-light:hover { background: var(--foil-400); border-color: var(--foil-400); color: var(--ink-900); transform: translateY(-2px); } .btn-ghost-light { background: transparent; color: var(--paper-02); border-color: rgba(255,253,249,.35); } .btn-ghost-light:hover { border-color: var(--paper-00); color: var(--paper-00); } .btn-lg { padding: 1.05rem 2.2rem; font-size: 1.02rem; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 253, 249, .93); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--paper-03); } .topbar { background: var(--ink-900); color: var(--paper-04); font-size: .8rem; padding: .45rem 0; } .topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .topbar a { color: var(--paper-02); } .topbar a:hover { color: var(--foil-400); } .topbar-badges { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; } .topbar-contact { display: flex; align-items: center; gap: var(--sp-4); } .topbar-contact a { display: inline-flex; align-items: center; gap: .35rem; } .topbar-contact svg { flex-shrink: 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-3) 0; } .logo { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; } .logo-mark { width: 38px; height: 38px; border-radius: 5px; background: linear-gradient(140deg, var(--press-600), var(--press-400) 55%, var(--foil-500)); display: grid; place-items: center; color: var(--white); font-family: var(--font-display); font-weight: 700; /* sized for a two-character monogram ("MM") without crowding the tile */ font-size: .95rem; letter-spacing: -.03em; box-shadow: var(--shadow-sm); } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--ink-900); letter-spacing: -.02em; } .logo-tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); } .nav { display: flex; align-items: center; gap: var(--sp-2); } .nav-item { position: relative; } .nav-link { display: block; padding: .55rem .8rem; color: var(--ink-700); font-weight: 500; font-size: .93rem; border-radius: var(--radius-sm); } .nav-link:hover, .nav-item:hover > .nav-link { color: var(--press-600); background: var(--paper-02); } .nav-link.is-active { color: var(--press-600); } .dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 290px; background: var(--paper-00); border: 1px solid var(--paper-03); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--sp-3); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .22s var(--ease); } .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: block; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--ink-700); font-size: .9rem; font-weight: 500; } .dropdown a:hover { background: var(--paper-02); color: var(--press-600); } .dropdown a small { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-400); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; width: 42px; height: 42px; } .nav-toggle span { display: block; height: 2px; background: var(--ink-900); margin: 5px 0; transition: .25s var(--ease); border-radius: 2px; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; background: radial-gradient(1100px 520px at 78% -8%, rgba(212,175,82,.16), transparent 62%), radial-gradient(880px 480px at 4% 108%, rgba(192,57,43,.10), transparent 60%), linear-gradient(168deg, var(--paper-01) 0%, var(--paper-02) 100%); padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; } .hero::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(58,51,42,.045) 27px, rgba(58,51,42,.045) 28px); pointer-events: none; mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent); } .hero .wrap { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--sp-8); align-items: center; } .hero h1 { margin-bottom: var(--sp-5); } .hero h1 em { font-style: italic; color: var(--press-600); } .hero-lede { font-size: 1.16rem; color: var(--ink-600); max-width: 54ch; margin-bottom: var(--sp-6); } .hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--paper-04); } .hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--ink-900); line-height: 1; } .hero-stat span { font-size: .84rem; color: var(--ink-500); } .hero-visual { position: relative; } .hero-visual img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .hero-card { position: absolute; bottom: -22px; left: -26px; background: var(--paper-00); border: 1px solid var(--paper-03); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-lg); max-width: 260px; } .hero-card .moq-num { font-family: var(--font-display); font-size: 2rem; color: var(--press-600); line-height: 1; } .hero-card .moq-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); } .hero-card p { font-size: .84rem; margin: .4rem 0 0; color: var(--ink-500); } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--ink-900); padding: var(--sp-5) 0; } .trust-strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: var(--sp-3); color: var(--paper-03); font-size: .88rem; } .trust-item svg { flex-shrink: 0; stroke: var(--foil-400); } /* ---------- Cards ---------- */ .card { background: var(--paper-00); border: 1px solid var(--paper-03); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--paper-04); } .card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-02); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card-media img { transform: scale(1.05); } .card-body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; } .card-body h3 { margin-bottom: var(--sp-2); font-size: 1.22rem; } .card-body p { font-size: .93rem; color: var(--ink-500); flex: 1; } .card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--paper-04); } .chip { font-family: var(--font-mono); font-size: .68rem; padding: .22rem .55rem; border-radius: 3px; background: var(--paper-02); color: var(--ink-600); letter-spacing: .03em; } .chip--moq { background: var(--press-100); color: var(--press-600); font-weight: 500; } .chip--foil { background: var(--foil-100); color: var(--foil-600); } .chip--thread { background: var(--thread-100); color: var(--thread-600); } .card-link { margin-top: var(--sp-4); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; } .card-link::after { content: '→'; transition: transform .25s var(--ease); } .card:hover .card-link::after { transform: translateX(4px); } /* ---------- Feature list ---------- */ .feature { display: flex; gap: var(--sp-4); } .feature-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--paper-02); border: 1px solid var(--paper-03); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--press-600); } .feature h4 { margin-bottom: .3rem; } .feature p { font-size: .92rem; color: var(--ink-500); margin: 0; } /* ---------- Process steps ---------- */ .steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); } .step { position: relative; padding-top: var(--sp-6); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--paper-04); line-height: 1; } .step h4 { margin-bottom: .35rem; } .step p { font-size: .9rem; color: var(--ink-500); margin: 0; } .section--ink .step::before { color: var(--ink-700); } .section--ink .step p { color: var(--paper-04); } .section--ink .step h4 { color: var(--paper-00); } /* ---------- MOQ table ---------- */ .spec-table { background: var(--paper-00); border: 1px solid var(--paper-03); border-radius: var(--radius); overflow: hidden; max-width: 100%; } .spec-table table { font-size: .93rem; min-width: 460px; } .spec-table th, .spec-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--paper-02); } .spec-table thead th { background: var(--ink-900); color: var(--paper-01); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; } .spec-table tbody tr:last-child td { border-bottom: 0; } .spec-table tbody tr:hover { background: var(--paper-01); } .spec-table td strong { color: var(--ink-900); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ---------- FAQ ---------- */ .faq-item { border-bottom: 1px solid var(--paper-03); } .faq-q { width: 100%; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) 0; text-align: left; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink-900); } .faq-q::after { content: '+'; font-size: 1.5rem; color: var(--press-600); line-height: 1; flex-shrink: 0; transition: transform .25s var(--ease); } .faq-item.is-open .faq-q::after { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .faq-item.is-open .faq-a { max-height: 640px; } .faq-a p { padding-bottom: var(--sp-5); margin: 0; color: var(--ink-500); font-size: .96rem; } /* ---------- CTA band ---------- */ .cta-band { background: radial-gradient(760px 380px at 88% 6%, rgba(212,175,82,.20), transparent 60%), linear-gradient(120deg, var(--ink-900), var(--ink-800)); color: var(--paper-02); padding: var(--sp-9) 0; text-align: center; } .cta-band h2 { color: var(--paper-00); max-width: 20ch; margin-inline: auto; } .cta-band p { color: var(--paper-04); max-width: 60ch; margin-inline: auto; margin-bottom: var(--sp-6); } .cta-band .btn-row { justify-content: center; } /* ---------- Quote form ---------- */ .quote-shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-8); align-items: start; } .quote-form { background: var(--paper-00); border: 1px solid var(--paper-03); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .field { display: flex; flex-direction: column; gap: .35rem; } .field--full { grid-column: 1 / -1; } .field label { font-size: .82rem; font-weight: 600; color: var(--ink-700); } .field label .req { color: var(--press-500); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: .94rem; padding: .7rem .85rem; border: 1px solid var(--paper-04); border-radius: var(--radius-sm); background: var(--paper-00); color: var(--ink-800); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--press-500); box-shadow: 0 0 0 3px var(--press-100); } .field textarea { resize: vertical; min-height: 108px; } .form-note { font-size: .8rem; color: var(--ink-400); margin-top: var(--sp-3); } /* ---------- Article / prose ---------- */ .prose { font-size: 1.04rem; } .prose h2 { margin-top: var(--sp-7); } .prose h3 { margin-top: var(--sp-6); } .prose > p:first-of-type { font-size: 1.14rem; color: var(--ink-600); } .prose ul li { margin-bottom: .55rem; } .prose blockquote { margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6); border-left: 3px solid var(--press-500); background: var(--paper-02); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-800); } .prose blockquote p:last-child { margin-bottom: 0; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { background: radial-gradient(900px 400px at 82% -20%, rgba(212,175,82,.14), transparent 60%), linear-gradient(170deg, var(--paper-02), var(--paper-01)); padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--paper-03); } .page-hero h1 { max-width: 20ch; } .page-hero .lede { font-size: 1.1rem; color: var(--ink-600); max-width: 62ch; } .breadcrumb { font-size: .82rem; color: var(--ink-400); margin-bottom: var(--sp-4); font-family: var(--font-mono); } .breadcrumb a { color: var(--ink-500); } .breadcrumb a:hover { color: var(--press-600); } .breadcrumb span { margin: 0 .45rem; opacity: .6; } /* ---------- Split media ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; } .split img { border-radius: var(--radius-lg); box-shadow: var(--shadow); } .split--reverse .split-media { order: 2; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink-900); color: var(--paper-04); padding: var(--sp-8) 0 var(--sp-5); font-size: .9rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); } .site-footer h4 { color: var(--paper-00); font-size: .8rem; font-family: var(--font-mono); letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--sp-4); } .site-footer a { color: var(--paper-04); display: block; padding: .22rem 0; font-size: .89rem; } .site-footer a:hover { color: var(--foil-400); } .site-footer .logo-name { color: var(--paper-00); } .site-footer p { font-size: .88rem; color: var(--ink-400); } .footer-bottom { border-top: 1px solid var(--ink-700); padding-top: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: .82rem; color: var(--ink-500); } .footer-bottom a { display: inline; } /* ---------- Utilities ---------- */ .text-center { text-align: center; } .mb-0 { margin-bottom: 0; } .mt-6 { margin-top: var(--sp-6); } .muted { color: var(--ink-400); } .lead { font-size: 1.1rem; color: var(--ink-600); } /* ---------- Reveal animation ---------- */ /* Hidden only when JS is confirmed alive (html.js is set in ), so a JS failure or a blocked script can never leave the page permanently blank. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); } .hero-visual { order: -1; } .hero-card { position: static; margin-top: var(--sp-4); max-width: none; } .quote-shell { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; gap: var(--sp-6); } .split--reverse .split-media { order: 0; } .nav-toggle { display: block; } .nav { position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); background: var(--paper-00); flex-direction: column; align-items: stretch; /* clear the sticky header instead of guessing a fixed offset: Arabic and other scripts render a taller header, which used to overlap the first link */ padding: calc(var(--header-h) + var(--sp-4)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom)); gap: 0; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .3s var(--ease), visibility .3s var(--ease); box-shadow: var(--shadow-lg); z-index: 99; /* visibility keeps the closed drawer out of the layout/scroll box entirely */ visibility: hidden; } .nav.is-open { transform: none; visibility: visible; } .nav-link { padding: .8rem .5rem; font-size: 1rem; border-bottom: 1px solid var(--paper-02); border-radius: 0; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-bottom: 1px solid var(--paper-02); padding: 0 0 var(--sp-3) var(--sp-4); min-width: 0; border-radius: 0; display: none; } .nav-item.is-expanded .dropdown { display: block; } .nav .btn { margin-top: var(--sp-4); } } @media (max-width: 680px) { body { font-size: 16px; } .section { padding: var(--sp-8) 0; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } .hero-stats { gap: var(--sp-5); } .topbar-badges { display: none; } /* keep WhatsApp reachable on mobile; drop the long email to save room */ .topbar .wrap { justify-content: center; } .topbar-contact { gap: var(--sp-3); font-size: .78rem; } .btn { width: 100%; } .btn-row { flex-direction: column; } .trust-strip .wrap { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } } /* ---------- Language switcher ---------- */ .lang-toggle { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); color: var(--ink-700); font-weight: 500; font-size: .93rem; } .lang-switch .dropdown { right: 0; left: auto; min-width: 170px; } .lang-dropdown a { display: flex; justify-content: space-between; } /* ---------- Honeypot field (hidden from humans, kept off-screen for bots) ---------- */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* ---------- RTL (Arabic) ---------- */ [dir="rtl"] { --font-display: 'Noto Naskh Arabic', 'Fraunces', serif; --font-body: 'Noto Naskh Arabic', 'Outfit', sans-serif; } /* 阿拉伯文禁用负字距/宽字距，否则字母连写会被破坏 */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .eyebrow, [dir="rtl"] .logo-tag, [dir="rtl"] .topbar-badges, [dir="rtl"] .chip, [dir="rtl"] .moq-label, [dir="rtl"] .spec-table thead th, [dir="rtl"] .site-footer h4 { letter-spacing: 0; } [dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td { text-align: right; } [dir="rtl"] .faq-q { text-align: right; } [dir="rtl"] .prose blockquote { border-left: 0; border-right: 3px solid var(--press-500); border-radius: var(--radius) 0 0 var(--radius); } [dir="rtl"] .card-link::after { content: '←'; } [dir="rtl"] .card:hover .card-link::after { transform: translateX(-4px); } [dir="rtl"] .dropdown { left: auto; right: 0; } [dir="rtl"] .lang-switch .dropdown { left: 0; right: auto; } [dir="rtl"] .hero-card { left: auto; right: -26px; } [dir="rtl"] .step::before { left: auto; right: 0; } @media (max-width: 900px) { [dir="rtl"] .nav { inset: 0 auto 0 0; transform: translateX(-100%); } [dir="rtl"] .nav.is-open { transform: none; } [dir="rtl"] .hero-card { right: auto; } } /* ---------- 市场页：真实案例 ---------- */ .cases-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .case-card { background: var(--paper-00); border: 1px solid var(--paper-03); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .case-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-02); } .case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .case-card:hover .case-media img { transform: scale(1.04); } .case-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .case-body h3 { margin: 0; font-size: 1.25rem; } .case-body > p { margin: 0; font-size: .93rem; color: var(--ink-500); flex: 1; } .case-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-1); } .case-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--paper-02); } .case-watch { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-2); font-weight: 600; font-size: .9rem; color: var(--press-600); } .case-watch:hover { color: var(--press-400); } .case-watch svg { flex: none; } .case-platform { color: var(--ink-500); font-weight: 500; } [dir="rtl"] .case-watch svg { transform: scaleX(-1); } @media (max-width: 900px) { .cases-grid { grid-template-columns: 1fr; } } /* ---------- 场景页：制作过程 ---------- */ .process-narrative { max-width: 880px; font-size: 1.08rem; line-height: 1.9; color: var(--paper-03); } .steps--mt { margin-top: var(--sp-7); }