/* ========================================================================== Wick 落地页 ·「秉烛 · 账册」—— 参考 bitfroth 的克制,材料全部来自秉烛 token 外观: ========================================================================== */ /* ---------- 秉烛 tokens(与 designs/wick-design-language/tokens-v2.css 一致) ---------- */ :root { --desk: #E7DCC6; --paper: #FBF4E6; --paper-hi: #FFFCF2; --paper-edge: #D6C8AC; --ink-1: #2B2014; --ink-2: #6B5942; --ink-3: #9A886B; --rule: rgba(43, 32, 20, 0.16); --ember: #E8791C; --ember-hi: #FFB25E; --glow: rgba(232, 121, 28, 0.32); --cinnabar: #C03A22; --cinnabar-press: #A8321E; --cinnabar-soft: rgba(192, 58, 34, 0.1); --dai: #3E5C50; --dai-soft: rgba(62, 92, 80, 0.12); --char-1: #191008; --stain-1: #F0DFB6; --stain-2: #E2C282; --tape: rgba(238, 210, 150, 0.5); --receipt: #FFFDF4; --receipt-ink: #33291A; --sh-page: 0 1px 2px rgba(43, 32, 20, 0.1), 0 10px 26px rgba(43, 32, 20, 0.14); --sh-lift: 0 2px 6px rgba(43, 32, 20, 0.12), 0 22px 50px rgba(43, 32, 20, 0.22); --f-print: "STSongti-SC-Regular", "Songti SC", "STSong", "HiraMinProN-W6", "Noto Serif SC", serif; --f-disp: ui-serif, "New York", "Songti SC", serif; --f-ui: ui-rounded, "SF Pro Rounded", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; --f-mono: ui-monospace, "SF Mono", "Menlo", monospace; --grain-opacity: 0.06; color-scheme: light; } [data-phase="dawn"]:not([data-scheme="dark"]) { --desk: #EBDACB; --paper: #FBF0E4; --paper-hi: #FFFAF1; --paper-edge: #DBC4B2; --ink-1: #33231C; --ink-2: #715850; --ink-3: #9C7F71; --ember: #E06A38; --glow: rgba(224, 106, 56, 0.3); } [data-phase="dusk"]:not([data-scheme="dark"]) { --desk: #E5D2B0; --paper: #FAEEDA; --paper-hi: #FFF9EA; --paper-edge: #D3BE98; --ink-1: #2E2112; --ink-2: #6B5136; --ink-3: #94764F; --ember: #E07412; --glow: rgba(224, 116, 18, 0.34); } [data-phase="night"]:not([data-scheme="dark"]) { --desk: #D9D3C4; --paper: #EDE8DB; --paper-hi: #F5F1E6; --paper-edge: #C0B8A4; --ink-1: #29241B; --ink-2: #5E5747; --ink-3: #8A8171; --ember: #E8862B; --glow: rgba(232, 134, 43, 0.3); } [data-scheme="dark"] { --desk: #191209; --paper: #2C2214; --paper-hi: #362A18; --paper-edge: #4A3A22; --ink-1: #F0E3C6; --ink-2: rgba(240, 227, 198, 0.64); --ink-3: rgba(240, 227, 198, 0.42); --rule: rgba(240, 227, 198, 0.14); --ember: #F59A3C; --ember-hi: #FFC882; --glow: rgba(245, 154, 60, 0.42); --cinnabar: #E06A4C; --cinnabar-press: #C0502F; --cinnabar-soft: rgba(224, 106, 76, 0.14); --dai: #8FAE9E; --dai-soft: rgba(143, 174, 158, 0.14); --char-1: #0C0703; --stain-1: #4A3820; --stain-2: #6B5226; --tape: rgba(220, 190, 130, 0.28); --receipt: #F5EEDC; --receipt-ink: #33291A; --sh-page: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.5); --sh-lift: 0 2px 8px rgba(0, 0, 0, 0.5), 0 26px 60px rgba(0, 0, 0, 0.6); --grain-opacity: 0.09; color-scheme: dark; } [data-scheme="dark"][data-phase="dawn"] { --paper: #2B2118; --paper-hi: #35291C; --desk: #181110; --ember: #F0A368; } [data-scheme="dark"][data-phase="dusk"] { --paper: #2E2010; --paper-hi: #382712; --desk: #1B1208; --ember: #F08A2B; } [data-scheme="dark"][data-phase="night"] { --paper: #241C10; --paper-hi: #2C2214; --desk: #120D07; --ember: #F5A83C; --glow: rgba(245, 168, 60, 0.5); } /* ---------- 共享基元:纸纹 / 烛痕条 / 朱砂方章(同 tokens-v2.css) ---------- */ .grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 120px 120px; } .burnstrip { position: relative; overflow: hidden; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / var(--ticks, 24))); background-color: var(--paper-hi); box-shadow: inset 0 0 0 1px var(--rule); } .burnstrip .char { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p); background: radial-gradient(120% 220% at 100% 50%, rgba(255, 190, 110, 0.5), transparent 50%), linear-gradient(90deg, var(--stain-1) 55%, var(--stain-2)); filter: url(#f-char); } .burnstrip .emberline { position: absolute; top: -1px; bottom: -1px; left: calc(var(--p) - 1px); width: 3px; background: linear-gradient(90deg, transparent, #FFB25E 45%, #FFE0A8); filter: blur(0.6px); box-shadow: 0 0 8px 1.5px var(--glow); animation: ember-flicker 2.2s ease-in-out infinite; } .burnstrip .flame { position: absolute; top: 50%; left: var(--p); width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -62%) rotate(-45deg); background: radial-gradient(circle at 35% 35%, #FFF0C8, #FFB25E 60%, #E8791C); box-shadow: 0 0 10px 2.5px var(--glow); animation: ember-flicker 1.7s ease-in-out infinite; } @keyframes ember-flicker { 0%, 100% { opacity: 1; } 42% { opacity: 0.72; } 58% { opacity: 0.92; } } /* ========================================================================== 基座布局 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--desk); color: var(--ink-1); font-family: var(--f-ui); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-wrap: pretty; } [lang="zh"] body { font-family: var(--f-print); } ::selection { background: color-mix(in srgb, var(--ember) 24%, transparent); } :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 2px; } .grain-layer { position: fixed; inset: 0; pointer-events: none; opacity: var(--grain-opacity); z-index: 0; } .container { width: 100%; max-width: 1060px; margin-inline: auto; padding-inline: 24px; } main.container { position: relative; z-index: 1; } .site-footer { position: relative; z-index: 1; } /* ---------- 顶栏 ---------- */ .site-header { position: sticky; top: 0; z-index: 50; padding: 10px 0; } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px 7px 14px; border: 1px solid transparent; border-radius: 12px; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .site-header.is-solid .header-inner { background: var(--paper); border-color: var(--rule); box-shadow: var(--sh-page); } .brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; } .brand-name { font-family: var(--f-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.18em; } .brand-zh { font-family: var(--f-print); font-size: 14px; color: var(--ink-2); } .site-nav { display: flex; align-items: center; gap: 2px; } .site-nav a { padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: color 150ms ease; } .site-nav a:hover { color: var(--ember); } .icon-btn { width: 30px; height: 30px; margin-left: 6px; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-2); cursor: pointer; transition: all 150ms ease; } .icon-btn:hover { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 8px var(--glow); } .icon-btn svg { width: 14px; height: 14px; } [data-scheme="light"] .icon-moon { display: block; } [data-scheme="light"] .icon-sun { display: none; } [data-scheme="dark"] .icon-moon { display: none; } [data-scheme="dark"] .icon-sun { display: block; } .lang-btn { margin-left: 6px; padding: 5px 11px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-1); cursor: pointer; transition: all 150ms ease; } .lang-btn:hover { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 8px var(--glow); } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 72px 0 56px; border-bottom: 2px solid var(--ink-1); } .eyebrow { margin: 0 0 14px; font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--ink-3); } [lang="zh"] .eyebrow { font-family: var(--f-print); } .hero h1 { margin: 0; font-family: var(--f-print); font-size: clamp(40px, 6.4vw, 64px); font-weight: 900; line-height: 1.14; letter-spacing: 0.01em; } [lang="en"] .hero h1 { font-family: var(--f-disp); letter-spacing: -0.02em; } .hero-live { margin: 16px 0 0; font-family: var(--f-print); font-size: 19px; font-weight: 700; color: var(--ink-2); } .hero-live b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ember); text-shadow: 0 0 14px var(--glow); } .lede { margin: 18px 0 0; max-width: 34rem; font-size: 14.5px; line-height: 1.95; color: var(--ink-2); } .cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 22px; background: var(--ember); color: #FFF3E0; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 6px; box-shadow: 0 1px 2px rgba(43, 32, 20, 0.2); transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease; } .btn-primary:hover { box-shadow: 0 0 20px var(--glow), 0 2px 6px rgba(43, 32, 20, 0.2); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-primary .ver { font-family: var(--f-mono); font-size: 11px; font-weight: 500; opacity: 0.8; } .btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; background: var(--paper-hi); color: var(--ink-1); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--ink-3); border-radius: 6px; box-shadow: 0 1px 2px rgba(43, 32, 20, 0.14); transition: all 180ms ease; } .btn-ghost:hover { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 12px var(--glow); } /* 朱砂小章:按钮内联状态签(如「即将上架」),微微歪一点像随手盖上去的 */ .btn-ghost .soon { font-family: var(--f-print); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: #FFF3E0; background: var(--cinnabar); border-radius: 2px; padding: 2px 6px; transform: rotate(-2deg); } /* ---------- 撕边纸签(菜单栏面板的缩影,实时) ---------- */ .slip { position: relative; width: min(360px, 100%); justify-self: end; padding: 16px 18px 12px; transform: rotate(-0.5deg); } .slip::before { content: ""; position: absolute; inset: 0; background: var(--paper-hi); box-shadow: var(--sh-lift); filter: url(#f-torn); } .slip > * { position: relative; } .slip-head { display: flex; align-items: baseline; gap: 7px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); } .slip-flame { width: 11px; height: 11px; align-self: center; } .slip-title { font-size: 12px; font-weight: 700; } .slip-clock { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); } .strip-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .strip-row .lbl { flex: none; min-width: 2.4em; font-family: var(--f-print); font-size: 13px; font-weight: 700; } .strip-row .burnstrip { flex: 1; height: 14px; } .strip-row .val { flex: none; width: 84px; text-align: right; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; } [lang="zh"] .slip-clock, [lang="zh"] .strip-row .val { font-family: var(--f-print); font-variant-numeric: tabular-nums; } /* ---------- 章节 ---------- */ .section { padding: 40px 0; scroll-margin-top: 80px; } .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; } .sec-head .no { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--cinnabar); } .sec-head h2 { margin: 0; font-family: var(--f-print); font-size: 25px; font-weight: 900; } .sec-head .en { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } [lang="en"] .sec-head .en { display: none; } /* en 模式下 h2 已是英文,小注会重复 */ /* 功能 = 桌上叠起的纸 */ .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .feat { position: relative; background: var(--paper); box-shadow: var(--sh-page); padding: 20px 22px; transition: transform 180ms ease, box-shadow 180ms ease; } .feat::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 5px; background: var(--paper-edge); box-shadow: var(--sh-page); } .feat:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); } .feat h3 { margin: 0 0 6px; font-family: var(--f-print); font-size: 17px; font-weight: 900; } .feat p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-2); } /* Songti SC Bold/Black mixes a few simplified glyphs with sans-style forms on iOS. */ [lang="zh"] .site-nav a, [lang="zh"] .eyebrow, [lang="zh"] .hero h1, [lang="zh"] .hero-live, [lang="zh"] .btn-primary, [lang="zh"] .btn-ghost, [lang="zh"] .btn-ghost .soon, [lang="zh"] .slip-title, [lang="zh"] .strip-row .lbl, [lang="zh"] .sec-head h2, [lang="zh"] .feat h3 { font-weight: 400; } [lang="zh"] .hero h1 { -webkit-text-stroke: 0.35px currentColor; } [lang="zh"] .hero-live, [lang="zh"] .sec-head h2, [lang="zh"] .feat h3 { -webkit-text-stroke: 0.15px currentColor; } [lang="zh"] .shot .cap-no { font-family: var(--f-print); font-weight: 400; } /* ---------- 实拍:洗出来贴在纸上的照片 ---------- */ .shots-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 26px; row-gap: 40px; align-items: end; } .shot { margin: 0; } .shot-main { grid-column: 1 / -1; } .shot-panel { grid-column: 1 / 7; transform: rotate(-1.1deg); } .shot-ios { grid-column: 8 / 12; } .shot-mat { position: relative; background: var(--paper-hi); padding: 10px 10px 12px; box-shadow: var(--sh-lift); border-radius: 2px; } .shot-mat::before, .shot-mat::after { content: ""; position: absolute; top: -11px; width: 76px; height: 22px; background: var(--tape); box-shadow: 0 1px 3px rgba(43, 32, 20, 0.15); z-index: 1; } .shot-mat::before { left: 8%; transform: rotate(-4deg); } .shot-mat::after { right: 8%; transform: rotate(3deg); } .shot-mat img { display: block; width: 100%; height: auto; border-radius: 10px; } /* 亮暗双版:选择器优先级必须压过 .shot-mat img */ .shot-mat img.img-dark { display: none; } [data-scheme="dark"] .shot-mat img.img-light { display: none; } [data-scheme="dark"] .shot-mat img.img-dark { display: block; } /* 纸签 = 透明剪影,不用相框:直接落在纸面上,投影像真的纸 */ .shot-panel .shot-mat { background: transparent; box-shadow: none; padding: 0; } .shot-panel .shot-mat::before, .shot-panel .shot-mat::after { display: none; } .shot-panel .shot-mat img { border-radius: 0; filter: drop-shadow(0 2px 5px rgba(43, 32, 20, 0.16)) drop-shadow(0 14px 28px rgba(43, 32, 20, 0.14)); } [data-scheme="dark"] .shot-panel .shot-mat img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5)); } .shot figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-left: 2px; font-family: var(--f-print); font-size: 13px; color: var(--ink-2); } .shot .cap-no { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--cinnabar); flex: none; } /* ---------- 下载 ---------- */ .dl-body { position: relative; background: var(--paper); box-shadow: var(--sh-page); padding: 30px 32px; text-align: center; } .dl-body::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 5px; background: var(--paper-edge); box-shadow: var(--sh-page); } .dl-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } .dl-col { display: flex; flex-direction: column; align-items: center; gap: 14px; } .dl-meta { margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); text-align: center; } [lang="zh"] .dl-meta { font-family: var(--f-print); } .dl-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .btn-primary.big { padding: 15px 30px; font-size: 15px; } .btn-ghost.big { padding: 14px 30px; font-size: 15px; } /* ---------- 页脚 ---------- */ .site-footer { margin-top: 56px; border-top: 1px solid var(--rule); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px 32px; font-size: 12px; color: var(--ink-3); } .footer-links { display: flex; gap: 16px; } .footer-links a { color: var(--ink-2); text-decoration: none; } .footer-links a:hover { color: var(--ember); } /* ---------- 入场显影(JS 加 .rv,入视加 .in) ---------- */ .rv { opacity: 0; transform: translateY(10px); } .rv.in { opacity: 1; transform: none; transition: opacity 480ms ease, transform 480ms cubic-bezier(0.2, 0.7, 0.3, 1); } .shot-panel.rv { transform: rotate(-1.1deg) translateY(10px); } .shot-panel.rv.in { transform: rotate(-1.1deg); } /* ---------- 响应式 ---------- */ @media (max-width: 880px) { .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 44px; } .slip { justify-self: center; } .feat-grid { grid-template-columns: 1fr; } .shots-grid { align-items: start; row-gap: 34px; } .shot-main { grid-column: 1 / -1; } .shot-panel { grid-column: 1 / -1; justify-self: center; width: min(440px, 100%); } .shot-ios { grid-column: 1 / -1; justify-self: center; width: min(300px, 88%); } } @media (max-width: 520px) { .container { padding-inline: 16px; } .brand-zh { display: none; } .site-nav a { padding: 6px 7px; font-size: 12px; } .dl-buttons { grid-template-columns: 1fr; gap: 22px; } .dl-body { padding: 24px 18px; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .burnstrip .emberline, .burnstrip .flame { animation: none; } .btn-primary, .btn-ghost, .feat, .header-inner { transition: none; } .rv { opacity: 1; transform: none; } .rv.in { transition: none; } }