/* 感恩日记 / Dailylet 官网样式。 颜色取自 ios/Sweetheart/DesignSystem/Colors.swift（暖光：奶油杏桃 × 陶土玫瑰）。 App 里的 inkSoft / pinkDeep 在纸色上对比度不够 AA，网页上正文用 ink / brown800，链接用加深的玫瑰色。 */ :root { color-scheme: light dark; --paper: #FBF3EC; --cream: #FFFCF8; --ink: #5B4A44; --ink-2: #7A5550; --heading: #5B3F3A; --link: #9C4450; --line: rgba(176, 122, 106, .28); --rule: rgba(176, 122, 106, .2); --tape: rgba(232, 198, 182, .75); --dot: rgba(176, 122, 106, .2); --shadow: 0 0 0 1px var(--line), 0 14px 30px rgba(176, 122, 106, .18); --grad-dream: linear-gradient(120deg, #F5C9A4, #F3C0B3 45%, #F2A7B3); --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", "Noto Sans CJK SC", "Segoe UI", Roboto, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Songti TC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif; } @media (prefers-color-scheme: dark) { :root { --paper: #2A201D; --cream: #352925; --ink: #F3E6DC; --ink-2: #D9BFB2; --heading: #FBEFE7; --link: #F7B9AE; --line: rgba(223, 179, 162, .28); --rule: rgba(223, 179, 162, .16); --tape: rgba(176, 122, 106, .55); --dot: rgba(223, 179, 162, .12); --shadow: 0 0 0 1px var(--line), 0 14px 30px rgba(0, 0, 0, .3); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background-color: var(--paper); color: var(--ink); font: 1.0625rem/1.75 var(--sans); } /* 右上、左下两角的半调网点，和 App 纸卡皮肤的背景同一个做法 */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(var(--dot) 1.1px, transparent 1.6px) 0 0 / 12px 12px; -webkit-mask: radial-gradient(60% 42% at 100% 0%, #000, transparent 72%), radial-gradient(55% 38% at 0% 100%, #000, transparent 72%); mask: radial-gradient(60% 42% at 100% 0%, #000, transparent 72%), radial-gradient(55% 38% at 0% 100%, #000, transparent 72%); } .wrap { width: 100%; max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; } a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: 1rem; top: -4rem; background: var(--cream); padding: .5rem .9rem; border-radius: 6px; box-shadow: var(--shadow); } .skip:focus { top: 1rem; z-index: 10; } /* ---------- 顶栏 ---------- */ .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; } .brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--heading); text-decoration: none; font: 600 1.0625rem/1.2 var(--serif); } .brand img { width: 2.25rem; height: 2.25rem; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); } .brand span span { display: block; font: 400 .8125rem/1.3 var(--sans); color: var(--ink-2); } .langs ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; } .langs a { display: block; padding: .45rem .7rem; min-height: 2.75rem; line-height: 1.85rem; border-radius: 6px; color: var(--ink-2); text-decoration: none; font-size: .9375rem; } .langs a:hover { color: var(--heading); box-shadow: inset 0 0 0 1px var(--line); } .langs a[aria-current="true"] { color: var(--heading); background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); } /* ---------- 多语言 ---------- 不开 JS：三种语言依次排开，顶栏的语言链接当页内锚点用。 开了 JS： 里的脚本给 打上 data-lang，只留一种。 */ .l10n { scroll-margin-top: 1rem; } .l10n + .l10n { margin-top: 4rem; padding-top: 3rem; border-top: 1px dashed var(--line); } html[data-lang] .l10n { display: none; } html[data-lang] .l10n + .l10n { margin-top: 0; padding-top: 0; border-top: 0; } html[data-lang="zh-Hans"] .l10n[lang="zh-Hans"], html[data-lang="zh-Hant"] .l10n[lang="zh-Hant"], html[data-lang="en"] .l10n[lang="en"] { display: block; } /* ---------- 文字 ---------- */ h1, h2, h3 { color: var(--heading); font-family: var(--serif); font-weight: 600; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); line-height: 1.2; margin: 2rem 0 1rem; letter-spacing: -.01em; } h2 { font-size: 1.5rem; line-height: 1.35; margin: 3.5rem 0 1rem; } h3 { font-size: 1.125rem; line-height: 1.5; margin: 0 0 .5rem; } [lang^="zh"] h1 { letter-spacing: .02em; } p { margin: 0 0 1rem; } .lede { font-size: 1.1875rem; color: var(--ink-2); max-width: 34rem; } .note { color: var(--ink-2); font-size: .9375rem; } /* ---------- 首页：贴着胶带的一页日记 ---------- */ .page-card { position: relative; margin: 2.75rem 0 1rem; padding: 1.75rem 1.5rem 1.1rem; border-radius: 8px; background: var(--cream); box-shadow: var(--shadow); transform: rotate(-.6deg); } .page-card::before { content: ""; position: absolute; left: 50%; top: -.7rem; width: 6.5rem; height: 1.5rem; margin-left: -3.25rem; background: var(--tape); transform: rotate(-2deg); clip-path: polygon(2% 0, 98% 4%, 100% 50%, 97% 100%, 3% 96%, 0 50%); } .page-card ol { margin: 0; padding: 0; list-style: none; counter-reset: line; } .page-card li { counter-increment: line; display: flex; gap: .85rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); font: 1.125rem/1.6 var(--serif); color: var(--heading); } .page-card li::before { content: counter(line); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--grad-dream); color: #5B3F3A; font: 600 .8125rem/1.5rem var(--sans); text-align: center; transform: translateY(-.1rem); } .page-card figcaption { margin-top: .9rem; text-align: right; font-size: .875rem; color: var(--ink-2); } figure { margin-inline: 0; } /* ---------- 留在手机上 / 账号里有什么 ---------- */ .ledger { display: grid; gap: 1.25rem; margin: 1.5rem 0; } @media (min-width: 38rem) { .ledger { grid-template-columns: 1fr 1fr; } } .ledger section { padding: 1.25rem 1.25rem 1rem; border-radius: 8px; background: var(--cream); box-shadow: 0 0 0 1px var(--line); } .ledger ul { margin: 0; padding-left: 1.2rem; } .ledger li { margin-bottom: .35rem; } .ledger li::marker { color: var(--ink-2); } /* ---------- 联系方式 ---------- */ .contact { margin: 2rem 0; padding: 1.5rem; border-radius: 8px; background: var(--cream); box-shadow: var(--shadow); } .contact h2 { margin-top: 0; } .contact .mail { font: 600 1.25rem/1.4 var(--serif); overflow-wrap: anywhere; } .contact ul { margin: 0 0 1rem; padding-left: 1.2rem; } /* ---------- 常见问题 ---------- */ .faq > section { padding: 1.5rem 0; border-top: 1px dashed var(--line); scroll-margin-top: 1rem; } .faq > section:last-child { border-bottom: 1px dashed var(--line); } .faq ol, .faq ul { margin: 0 0 1rem; padding-left: 1.3rem; } .faq li { margin-bottom: .35rem; } .path { white-space: nowrap; font-weight: 600; color: var(--heading); } .toc { margin: 1rem 0 2rem; padding-left: 1.2rem; } .toc li { margin-bottom: .3rem; } /* ---------- 去处 / 页脚 ---------- */ .doors { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } @media (min-width: 38rem) { .doors { grid-template-columns: 1fr 1fr; } } .doors a { display: block; height: 100%; padding: 1rem 1.25rem; border-radius: 8px; background: var(--cream); box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); } .doors a:hover { box-shadow: 0 0 0 1.5px var(--link); } .doors b { display: block; font: 600 1.0625rem/1.5 var(--serif); color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .doors span { font-size: .9375rem; color: var(--ink-2); } .foot { margin-top: 4rem; padding: 1.5rem 0 3rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); } .foot ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .5rem; padding: 0; list-style: none; } .foot p { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media print { body::before { display: none; } .langs, .skip { display: none; } }