/* ============================================================ HOLEON — 家族设计系统 · 单一来源暖纸色 + 暖墨字 + 金色连接色 + 截图取景框母题每个页面只需切换招牌色 ============================================================ */ :root{ --paper:#FCFAF6; --paper-2:#F6F0E5; --cream:#FAF6EE; --card:#FFFFFF; --ink:#211C15; --ink-soft:#6E665B; --ink-faint:#A69E8D; --line:#E8E1D3; --line-2:#F0EBDF; --gold:#C5871C; --gold-2:#A8680F; --gold-soft:#F4E8CC; /* 产品招牌色（页面用 --ac 指向其一） */ --c-voice:#CF8A2A; --c-note:#6B4A8E; --c-cal:#2563EB; --c-stack:#D9682A; --ac:var(--gold); /* 默认；产品页覆盖 */ --sh-sm:0 1px 2px rgba(70,55,30,.05); --sh-md:0 12px 30px -14px rgba(72,56,33,.26), 0 2px 8px rgba(72,56,33,.07); --sh-card:20px 28px 60px -30px rgba(72,56,33,.30), 0 4px 16px rgba(72,56,33,.08); --disp:"Archivo","Noto Sans SC",sans-serif; --cn:"Noto Sans SC","Hanken Grotesk",sans-serif; --sans:"Hanken Grotesk","Noto Sans SC",-apple-system,system-ui,"PingFang SC",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --maxw:1140px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px} a{color:inherit;text-decoration:none} ::selection{background:var(--gold-soft); color:var(--ink)} /* texture */ .grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .topwarm{position:fixed; top:0; left:0; right:0; height:420px; z-index:-1; pointer-events:none; background:radial-gradient(80% 100% at 50% -20%, color-mix(in srgb,var(--ac) 8%,transparent), transparent 70%)} /* mono label with capture corner */ .label{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2)} .label::before{content:"⌑"; font-size:13px; opacity:.9} .label.ac{color:color-mix(in srgb,var(--ac) 82%,var(--ink))} /* ---------- family nav ---------- */ nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(12px); background:color-mix(in srgb,var(--paper) 82%, transparent); border-bottom:1px solid var(--line-2)} .nav-inner{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px} .logo{display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:-.01em; flex:none} .logo .glyph{width:26px;height:26px;flex:none} .nav-links{display:flex; gap:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft)} .nav-links a{transition:color .2s; white-space:nowrap} .nav-links a:hover{color:var(--ink)} .nav-links a.here{color:var(--ac)} .nav-cta{font-family:var(--mono); font-weight:500; font-size:12.5px; padding:9px 16px; border-radius:10px; color:var(--card); background:var(--ink); transition:.2s; flex:none; white-space:nowrap} .nav-cta:hover{background:var(--ac)} @media(max-width:760px){.nav-links{display:none}} /* ---------- buttons ---------- */ .btn{font-family:var(--sans); font-weight:600; font-size:15px; padding:14px 24px; border-radius:13px; transition:.22s; display:inline-flex; align-items:center; gap:9px; cursor:pointer} .btn svg{width:16px;height:16px} .btn-primary{color:var(--card); background:var(--ink); box-shadow:var(--sh-md)} .btn-primary:hover{background:var(--ac); transform:translateY(-2px)} .btn-ac{color:var(--card); background:var(--ac); box-shadow:0 12px 30px -14px color-mix(in srgb,var(--ac) 70%,transparent)} .btn-ac:hover{transform:translateY(-2px); filter:brightness(.96)} .btn-ghost{border:1px solid var(--line); color:var(--ink); background:var(--card)} .btn-ghost:hover{border-color:var(--ink-faint)} /* ---------- type / sections ---------- */ .sec{padding:92px 0} h1,.h1{font-family:var(--cn); font-weight:800; font-size:clamp(44px,6.2vw,78px); line-height:1.08; letter-spacing:-.01em; color:var(--ink)} .h1 .g,h1 .g{color:var(--ac)} .h2{font-family:var(--cn); font-weight:800; font-size:clamp(30px,4.2vw,46px); line-height:1.14; letter-spacing:-.01em; margin-top:15px} .lede{margin-top:24px; font-size:18.5px; line-height:1.64; color:var(--ink-soft); max-width:36ch} .lede b{color:var(--ink); font-weight:600} /* ---------- product hero ---------- */ .phero{padding:70px 0 64px} .phero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center} .phero h1{margin-top:22px} .phero-actions{margin-top:32px; display:flex; gap:13px; flex-wrap:wrap} @media(max-width:880px){.phero-grid{grid-template-columns:1fr; gap:36px} .phero-vis{grid-row:1; max-width:380px; margin:0 auto}} /* screenshot / app mock — framed like a capture */ .mock{position:relative; width:100%; max-width:460px; margin-left:auto; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh-card); padding:16px; overflow:hidden} .mock::after{content:""; position:absolute; top:14px; right:14px; width:15px;height:15px; border-top:2px solid var(--ac); border-right:2px solid var(--ac); border-radius:0 4px 0 0; opacity:.5} .mock-bar{display:flex; align-items:center; gap:6px; padding:4px 4px 14px} .mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)} .mock-bar i:first-child{background:var(--ac)} .mock-body{background:var(--paper); border-radius:14px; padding:18px; min-height:240px} .mrow{height:11px;border-radius:5px;background:#EDE7DB;margin-bottom:12px} .mrow.w8{width:80%}.mrow.w6{width:60%}.mrow.w4{width:42%} .mrow.ac{background:color-mix(in srgb,var(--ac) 28%,#EDE7DB)} .mchip{display:inline-block; padding:7px 13px; margin:4px 6px 0 0; border-radius:9px; font-family:var(--mono); font-size:12px; background:color-mix(in srgb,var(--ac) 12%,var(--card)); color:color-mix(in srgb,var(--ac) 80%,var(--ink)); border:1px solid color-mix(in srgb,var(--ac) 22%,var(--line))} /* ---------- features ---------- */ .features{padding:64px 0} .feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px} @media(max-width:760px){.feat-grid{grid-template-columns:1fr}} .feat{position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:var(--sh-sm); transition:transform .25s, box-shadow .25s, border-color .25s} .feat::after{content:""; position:absolute; top:15px; right:15px; width:13px;height:13px; border-top:2px solid var(--ac); border-right:2px solid var(--ac); border-radius:0 3px 0 0; opacity:.3} .feat:hover{transform:translateY(-4px); box-shadow:var(--sh-card); border-color:color-mix(in srgb,var(--ac) 40%,var(--line))} .feat .ficon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;margin-bottom:16px; background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 90%,#fff 10%),color-mix(in srgb,var(--ac) 64%,#000 12%)); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ac) 55%,transparent)} .feat .ficon svg{width:24px;height:24px} .fk{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; color:var(--gold-2)} .feat h3{font-family:var(--cn); font-weight:700; font-size:21px; margin:5px 0 9px} .feat p{font-size:14.5px; color:var(--ink-soft); line-height:1.62} /* ---------- principle strip (hub + product) ---------- */ .prin{display:grid; grid-template-columns:repeat(4,1fr); margin-top:42px; border-top:1px solid var(--line)} .pitem{padding:26px 24px 6px; border-right:1px solid var(--line-2)} .pitem:first-child{padding-left:0} .pitem:last-child{border-right:0; padding-right:0} .pk{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--gold-2)} .pitem p{margin-top:11px; font-size:14px; color:var(--ink-soft); line-height:1.6} @media(max-width:760px){.prin{grid-template-columns:1fr 1fr} .pitem{border-right:0; border-bottom:1px solid var(--line-2); padding:22px 0 18px}} /* ---------- status pill ---------- */ .status{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.03em; padding:5px 11px; border-radius:8px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft)} .status .sd{width:6px;height:6px;border-radius:50%} .status.live .sd{background:#2FA968} .status.live{color:#2a8a55} .status.review .sd{background:var(--gold)} .status.review{color:var(--gold-2)} /* ---------- cta band ---------- */ .ctaband{text-align:center; padding:96px 0; border-top:1px solid var(--line); background:linear-gradient(color-mix(in srgb,var(--ac) 6%,var(--cream)),var(--paper))} .ctaband .h2{max-width:20ch;margin:14px auto 0} .ctaband .row{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap} /* ---------- closing + footer ---------- */ .closing{text-align:center; padding:104px 0} .closing .h2{max-width:18ch; margin:14px auto 0} .closing .sub{margin-top:16px; color:var(--ink-soft); font-size:16px} footer{border-top:1px solid var(--line); padding:48px 0 56px; background:var(--cream)} .foot-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:30px; flex-wrap:wrap} .foot-brand{max-width:34ch} .foot-brand .logo{margin-bottom:13px} .foot-brand p{font-size:14px; color:var(--ink-soft)} .foot-fam{display:flex; gap:22px; font-family:var(--mono); font-size:12px; color:var(--ink-soft); flex-wrap:wrap} .foot-fam a:hover{color:var(--ink)} .foot-note{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; text-align:right; line-height:1.9} /* reveal */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1; transform:none} /* ============================================================ 总览页（hub）专属组件 —— 让 index.html 也共用本文件 ============================================================ */ .hero{padding:78px 0 70px} .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center} .hero-actions{margin-top:34px; display:flex; gap:13px; flex-wrap:wrap} /* hero 截图取景框 */ .viz{position:relative; aspect-ratio:1/.96; width:100%; max-width:480px; margin-left:auto} .frame{position:absolute; inset:0} .frame svg{width:100%;height:100%;overflow:visible} .dimtag{position:absolute; top:-11px; left:24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--card); background:var(--ink); padding:3px 9px; border-radius:5px} .stage{position:absolute; inset:13% 11% 13% 11%; display:grid; place-items:center} .shot{position:absolute; width:60%; background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:var(--sh-card); padding:13px; transform-origin:center} .shot .bar{display:flex; align-items:center; gap:5px; margin-bottom:11px} .shot .bar i{width:7px;height:7px;border-radius:50%;background:var(--line)} .shot .bar i:first-child{background:var(--ac)} .shot .ln{height:7px; border-radius:4px; background:#EFEADF; margin-bottom:7px} .shot .ln.w1{width:82%} .shot .ln.w2{width:60%} .shot .ln.w3{width:70%; background:color-mix(in srgb,var(--ac) 24%,#EFEADF)} .shot.s1{--ac:var(--c-stack); transform:translate(-30%,-16%) rotate(-9deg); z-index:1} .shot.s2{--ac:var(--c-cal); transform:translate(26%,-22%) rotate(8deg); z-index:1} .shot.s3{--ac:var(--c-note); transform:translate(-22%,20%) rotate(-5deg); z-index:2} .shot.s4{--ac:var(--c-voice);transform:translate(0,2%) rotate(2deg); z-index:3; box-shadow:0 30px 60px -26px rgba(72,56,33,.4)} .float{animation:fl 7s ease-in-out infinite} .s1{animation-delay:.0s}.s2{animation-delay:.6s}.s3{animation-delay:1.1s} @keyframes fl{0%,100%{translate:0 0}50%{translate:0 -7px}} .corecheck{position:absolute; right:8%; bottom:7%; width:46px;height:46px; border-radius:50%; background:var(--gold); display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(197,135,28,.6); z-index:5} .corecheck svg{width:22px;height:22px} @media(max-width:880px){.hero{padding:44px 0 56px} .hero-grid{grid-template-columns:1fr; gap:36px} .viz{grid-row:1; max-width:360px; margin:0 auto} .lede{max-width:48ch}} /* 理念三步 */ .thesis{border-top:1px solid var(--line); background:linear-gradient(var(--cream),var(--paper))} .tflow{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px} .tstep{position:relative; padding:30px 26px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm)} .tstep::before,.tstep::after{content:""; position:absolute; width:13px; height:13px; border:2px solid var(--gold); opacity:.55} .tstep::before{top:13px; left:13px; border-right:0; border-bottom:0; border-radius:3px 0 0 0} .tstep::after{bottom:13px; right:13px; border-left:0; border-top:0; border-radius:0 0 3px 0} .tnum{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--gold-2); letter-spacing:.08em} .tstep h3{font-family:var(--cn); font-weight:700; font-size:22px; margin:13px 0 9px} .tstep p{font-size:14.5px; color:var(--ink-soft); line-height:1.62} @media(max-width:760px){.tflow{grid-template-columns:1fr; gap:16px}} /* 产品矩阵 */ .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px} .sec-head p{font-size:15px; color:var(--ink-soft); max-width:30ch; text-align:right} @media(max-width:640px){.sec-head{flex-direction:column;align-items:flex-start} .sec-head p{text-align:left}} .grid{display:grid; grid-template-columns:1fr 1fr; gap:22px} @media(max-width:800px){.grid{grid-template-columns:1fr}} .card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 30px 26px; box-shadow:var(--sh-sm); overflow:hidden; transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s} .card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac); opacity:0; transition:opacity .26s} .card::after{content:""; position:absolute; top:15px; right:15px; width:14px; height:14px; border-top:2px solid var(--ac); border-right:2px solid var(--ac); border-radius:0 3px 0 0; opacity:.32; transition:opacity .26s} .card:hover{transform:translateY(-5px); box-shadow:var(--sh-card); border-color:color-mix(in srgb,var(--ac) 45%,var(--line))} .card:hover::before{opacity:1} .card:hover::after{opacity:.85} .card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px} .appicon{width:56px;height:56px;border-radius:15px;flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 90%,#fff 10%),color-mix(in srgb,var(--ac) 64%,#000 14%)); box-shadow:0 9px 22px -9px color-mix(in srgb,var(--ac) 60%,transparent)} .appicon svg{width:29px;height:29px} .card h3{font-family:var(--disp); font-size:23px; font-weight:800; letter-spacing:-.01em} .card h3 span{font-family:var(--mono); color:var(--ink-faint); font-weight:500; font-size:14px; letter-spacing:.02em} .card .cn{font-size:14px; color:var(--ink-faint); margin-top:3px} .card .desc{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.62; min-height:72px} .meta{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap} .tag{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); padding:5px 10px; background:var(--paper-2); border-radius:7px} .card-link{display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-family:var(--sans); font-weight:600; font-size:14.5px; color:color-mix(in srgb,var(--ac) 78%,var(--ink))} .card-link svg{width:15px;height:15px; transition:transform .2s} .card:hover .card-link svg{transform:translate(3px,-3px)}